69 lines
2 KiB
JavaScript
69 lines
2 KiB
JavaScript
import { html, LitElement } from '@lion/core';
|
|
|
|
/**
|
|
* @typedef {import('../validate/Validator').Validator} Validator
|
|
* @typedef {import('@lion/core').TemplateResult} TemplateResult
|
|
* @typedef {Object} messageMap
|
|
* @property {string | Node} message
|
|
* @property {string} type
|
|
* @property {Validator} [validator]
|
|
*/
|
|
|
|
/**
|
|
* @desc Takes care of accessible rendering of error messages
|
|
* Should be used in conjunction with FormControl having ValidateMixin applied
|
|
*/
|
|
export class LionValidationFeedback extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
feedbackData: { attribute: false },
|
|
};
|
|
}
|
|
|
|
/**
|
|
* @overridable
|
|
* @param {Object} opts
|
|
* @param {string | Node | TemplateResult } opts.message message or feedback node or TemplateResult
|
|
* @param {string} [opts.type]
|
|
* @param {Validator} [opts.validator]
|
|
* @protected
|
|
*/
|
|
// eslint-disable-next-line class-methods-use-this
|
|
_messageTemplate({ message }) {
|
|
return message;
|
|
}
|
|
|
|
/**
|
|
* @param {import('@lion/core').PropertyValues } changedProperties
|
|
*/
|
|
updated(changedProperties) {
|
|
super.updated(changedProperties);
|
|
if (this.feedbackData && this.feedbackData[0]) {
|
|
this.setAttribute('type', this.feedbackData[0].type);
|
|
this.currentType = this.feedbackData[0].type;
|
|
window.clearTimeout(this.removeMessage);
|
|
// TODO: this logic should be in ValidateMixin, so that [show-feedback-for] is in sync,
|
|
// plus duration should be configurable
|
|
if (this.currentType === 'success') {
|
|
this.removeMessage = window.setTimeout(() => {
|
|
this.removeAttribute('type');
|
|
/** @type {messageMap[]} */
|
|
this.feedbackData = [];
|
|
}, 3000);
|
|
}
|
|
} else if (this.currentType !== 'success') {
|
|
this.removeAttribute('type');
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
${this.feedbackData &&
|
|
this.feedbackData.map(
|
|
({ message, type, validator }) => html`
|
|
${this._messageTemplate({ message, type, validator })}
|
|
`,
|
|
)}
|
|
`;
|
|
}
|
|
}
|