Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 5x 5x 5x 5x 5x 1x 1x 1x | import { LightningElement, api } from 'lwc';
import { normalizeBoolean } from 'sds/utils';
export default class EinsteinAiResponse extends LightningElement {
// Render component in native shadow mode
static shadowSupportMode = 'native';
@api avatarSrc;
@api aiResponse = false;
@api response;
@api
get loading() {
return this._loading;
}
set loading(value) {
this._loading = normalizeBoolean(value);
Eif (this._loading) {
this.aiResponse = true;
}
}
_dirty = false;
get slottedDetails() {
const slot = this.template.querySelector('slot[name="details"]');
return slot.assignedElements({ flatten: true });
}
get slottedActions() {
const slot = this.template.querySelector('slot[name="actions"]');
return slot.assignedElements({ flatten: true });
}
get input() {
return this.querySelector('[data-input="input-id"]');
}
get saveButton() {
return this.querySelector('[data-id="save"]');
}
async handleValidity(input) {
const validity = await input.validity;
if (!validity.valid) {
this._dirty = true;
this.saveButton.dirty = true;
}
}
async handleInputs(e) {
const validity = await e.target.validity;
if (!validity.valid) {
e.target.invalid = true;
this._dirty = true;
this.saveButton.dirty = true;
} else {
e.target.invalid = false;
this._dirty = false;
this.saveButton.dirty = false;
}
}
async handleSave() {
// need to check for invalid first
let hasInvalids = false;
for (const input of [...this.slottedDetails]) {
const validity = await input.validity;
if (!validity.valid) {
input.invalid = true;
hasInvalids = true;
}
}
if (hasInvalids) {
this._dirty = true;
this.saveButton.dirty = true;
return;
}
if (!this._dirty) {
this.input.disabled = true;
this.response = 'saved';
}
}
handleSavedState(el) {
if (this.response === 'saved') {
el.disabled = true;
}
}
handleDetails() {
[...this.slottedDetails].forEach(async (detail) => {
if (await detail.validity) {
this.handleSavedState(detail);
this.handleValidity(detail);
detail.addEventListener('input', this.handleInputs.bind(this));
detail.addEventListener('change', this.handleInputs.bind(this));
}
});
}
handleActions() {
[...this.slottedActions].forEach((action) => {
if (action.dataset.id === 'save') {
this.handleSavedState(action);
if (!action.disabled) {
action.addEventListener('click', this.handleSave.bind(this));
}
}
});
}
}
|