ui-lit
Version:
UI Elements on LIT
242 lines (241 loc) • 7.89 kB
JavaScript
import { __decorate } from "tslib";
import { css } from 'lit';
import { property } from 'lit/decorators.js';
import '../../note';
const defaultValidationMessages = {
badInput: {
"en": "Bad input",
},
customError: {
"en": "Custom error",
},
patternMismatch: {
"en": "Pattern ${pattern} error",
},
rangeOverflow: {
"en": "Value must be less then ${max}",
},
rangeUnderflow: {
"en": "Value must be more then ${min}",
},
stepMismatch: {
"en": "Value must be in step of ${step}",
},
tooLong: {
"en": "Value is too long",
},
tooShort: {
"en": "Value is too short",
},
valueMissing: {
"en": "Value is required",
},
typeMismatch: {
"en": "Type mismatch",
},
};
const getLang = () => window.ValidationsMessagesLang || window.navigator.language.split('-')[0];
const defaultValidity = {
badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valueMissing: false,
};
export const formAssociated = (superClass) => {
class FormAssociated extends superClass {
constructor() {
super(...arguments);
this._formAssiciated = true;
this.disabled = false;
this.required = false;
this.readonly = false;
this.willValidate = true;
this.validateOnChange = false;
this.name = '';
//@property({type: Boolean}) valid: boolean = true;
this.validity = { ...defaultValidity };
this._value = '';
this.customValidationMessage = '';
this.isFirstUpdated = false;
this.min = NaN;
this.max = NaN;
this.step = NaN;
this.pattern = '';
this._submitForm = null;
this._valueOnInit = '';
}
static get properties() {
return {
value: { type: String },
};
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
}
connectedCallback() {
super.connectedCallback();
this.addEventListener("keypress", this._handleKeypress);
}
disconnectedCallback() {
var _a;
super.disconnectedCallback();
(_a = this._submitForm) === null || _a === void 0 ? void 0 : _a.detatchElement(this);
}
async firstUpdated() {
await this.updateComplete;
this.dispatchEvent(new CustomEvent("fromAttached", {
bubbles: true,
composed: true,
detail: {
element: this,
onAttatch: (form) => {
this._submitForm = form;
}
}
}));
this._valueOnInit = this._value;
this.isFirstUpdated = true;
}
get form() {
return this._submitForm;
}
get valid() {
return this.checkValidity();
}
/** Validation */
_getErrorText(key) {
var _a, _b;
const text = ((_a = window.ValidationsMessages) === null || _a === void 0 ? void 0 : _a[key][getLang()])
|| ((_b = window.ValidationsMessages) === null || _b === void 0 ? void 0 : _b[key]['en'])
|| defaultValidationMessages[key][getLang()]
|| defaultValidationMessages[key]['en'];
const data = {
min: this.min,
max: this.max,
step: this.step,
pattern: this.pattern,
};
return text.replace(/\$\{([a-zA-Z0-9_.,=)( ]+)\}/g, (m, n) => {
let value = data[n];
if (typeof value === "number" && Math.log10(value) < -4) {
return value.toFixed(Math.abs(Math.ceil(Math.log10(value))) + 1);
}
return value !== undefined
? String(value)
: m;
});
}
get validationMessage() {
const keys = Object.keys(this.validity);
for (const key of keys) {
const v = this.validity[key];
if (v) {
return this._getErrorText(key);
}
}
return "";
}
checkValidity() {
if (!this.isFirstUpdated) {
return true;
}
if (this.validateOnChange && this._valueOnInit === this._value) {
return true;
}
return !Object.values(this.validity).filter(it => it).length;
}
reportValidity() {
const valid = this.checkValidity();
if (!valid) {
this.dispatchEvent(new CustomEvent('reportInvalid'));
}
return valid;
}
validate() {
if (this.required && !this.value && !this.disabled) {
this.setValidity({ valueMissing: true });
}
else if (this.validity.valueMissing) {
this.setValidity({ valueMissing: false });
}
else if (!this.value) {
this.validityDefault();
}
}
setValidity(flags, message, anchor) {
if (!this.willValidate) {
return;
}
this.validity = { ...this.validity, ...flags };
if (message) {
this.customValidationMessage = message;
}
this._updateValidity();
}
validityDefault() {
this.setValidity({ ...defaultValidity });
this.reportValidity();
}
_updateValidity() {
this.dispatchEvent(new CustomEvent(this.checkValidity() ? 'valid' : 'invalid', {
detail: this,
composed: true,
bubbles: true
}));
}
/** ========= */
_handleKeypress(e) {
if (e.key === 'Enter') {
this.dispatchEvent(new CustomEvent('submitForm', {
bubbles: true,
composed: true
}));
}
}
notify() {
this.dispatchEvent(new CustomEvent("changed", { detail: this.value, bubbles: true }));
}
}
FormAssociated.styles = [
...superClass.elementStyles,
css `
:host([disabled]){
opacity: 0.5;
pointer-events: none;
}
:host([readonly]){
opacity: 0.7;
pointer-events: none;
}`
];
__decorate([
property({ type: Boolean, reflect: true })
], FormAssociated.prototype, "disabled", void 0);
__decorate([
property({ type: Boolean })
], FormAssociated.prototype, "required", void 0);
__decorate([
property({ type: Boolean, reflect: true })
], FormAssociated.prototype, "readonly", void 0);
__decorate([
property({ type: Boolean })
], FormAssociated.prototype, "willValidate", void 0);
__decorate([
property({ type: Boolean })
], FormAssociated.prototype, "validateOnChange", void 0);
__decorate([
property({ type: String })
], FormAssociated.prototype, "name", void 0);
;
return FormAssociated;
;
};