@vialiq/web-components 0.9.0 → 0.10.0

package/validity-mixin-H4aOFJEr.js

@@ -0,0 +1,635 @@
+import { property } from 'lit/decorators.js';
+
+function applyDecs2203RFactory() {
+    function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+        return function addInitializer(initializer) {
+            assertNotFinished(decoratorFinishedRef, "addInitializer");
+            assertCallable(initializer, "An initializer");
+            initializers.push(initializer);
+        };
+    }
+    function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value) {
+        var kindStr;
+        switch(kind){
+            case 1:
+                kindStr = "accessor";
+                break;
+            case 2:
+                kindStr = "method";
+                break;
+            case 3:
+                kindStr = "getter";
+                break;
+            case 4:
+                kindStr = "setter";
+                break;
+            default:
+                kindStr = "field";
+        }
+        var ctx = {
+            kind: kindStr,
+            name: isPrivate ? "#" + name : name,
+            static: isStatic,
+            private: isPrivate,
+            metadata: metadata
+        };
+        var decoratorFinishedRef = {
+            v: false
+        };
+        ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef);
+        var get, set;
+        if (kind === 0) {
+            if (isPrivate) {
+                get = desc.get;
+                set = desc.set;
+            } else {
+                get = function() {
+                    return this[name];
+                };
+                set = function(v) {
+                    this[name] = v;
+                };
+            }
+        } else if (kind === 2) {
+            get = function() {
+                return desc.value;
+            };
+        } else {
+            if (kind === 1 || kind === 3) {
+                get = function() {
+                    return desc.get.call(this);
+                };
+            }
+            if (kind === 1 || kind === 4) {
+                set = function(v) {
+                    desc.set.call(this, v);
+                };
+            }
+        }
+        ctx.access = get && set ? {
+            get: get,
+            set: set
+        } : get ? {
+            get: get
+        } : {
+            set: set
+        };
+        try {
+            return dec(value, ctx);
+        } finally{
+            decoratorFinishedRef.v = true;
+        }
+    }
+    function assertNotFinished(decoratorFinishedRef, fnName) {
+        if (decoratorFinishedRef.v) {
+            throw new Error("attempted to call " + fnName + " after decoration was finished");
+        }
+    }
+    function assertCallable(fn, hint) {
+        if (typeof fn !== "function") {
+            throw new TypeError(hint + " must be a function");
+        }
+    }
+    function assertValidReturnValue(kind, value) {
+        var type = typeof value;
+        if (kind === 1) {
+            if (type !== "object" || value === null) {
+                throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+            }
+            if (value.get !== undefined) {
+                assertCallable(value.get, "accessor.get");
+            }
+            if (value.set !== undefined) {
+                assertCallable(value.set, "accessor.set");
+            }
+            if (value.init !== undefined) {
+                assertCallable(value.init, "accessor.init");
+            }
+        } else if (type !== "function") {
+            var hint;
+            if (kind === 0) {
+                hint = "field";
+            } else if (kind === 10) {
+                hint = "class";
+            } else {
+                hint = "method";
+            }
+            throw new TypeError(hint + " decorators must return a function or void 0");
+        }
+    }
+    function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata) {
+        var decs = decInfo[0];
+        var desc, init, value;
+        if (isPrivate) {
+            if (kind === 0 || kind === 1) {
+                desc = {
+                    get: decInfo[3],
+                    set: decInfo[4]
+                };
+            } else if (kind === 3) {
+                desc = {
+                    get: decInfo[3]
+                };
+            } else if (kind === 4) {
+                desc = {
+                    set: decInfo[3]
+                };
+            } else {
+                desc = {
+                    value: decInfo[3]
+                };
+            }
+        } else if (kind !== 0) {
+            desc = Object.getOwnPropertyDescriptor(base, name);
+        }
+        if (kind === 1) {
+            value = {
+                get: desc.get,
+                set: desc.set
+            };
+        } else if (kind === 2) {
+            value = desc.value;
+        } else if (kind === 3) {
+            value = desc.get;
+        } else if (kind === 4) {
+            value = desc.set;
+        }
+        var newValue, get, set;
+        if (typeof decs === "function") {
+            newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+            if (newValue !== void 0) {
+                assertValidReturnValue(kind, newValue);
+                if (kind === 0) {
+                    init = newValue;
+                } else if (kind === 1) {
+                    init = newValue.init;
+                    get = newValue.get || value.get;
+                    set = newValue.set || value.set;
+                    value = {
+                        get: get,
+                        set: set
+                    };
+                } else {
+                    value = newValue;
+                }
+            }
+        } else {
+            for(var i = decs.length - 1; i >= 0; i--){
+                var dec = decs[i];
+                newValue = memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, metadata, value);
+                if (newValue !== void 0) {
+                    assertValidReturnValue(kind, newValue);
+                    var newInit;
+                    if (kind === 0) {
+                        newInit = newValue;
+                    } else if (kind === 1) {
+                        newInit = newValue.init;
+                        get = newValue.get || value.get;
+                        set = newValue.set || value.set;
+                        value = {
+                            get: get,
+                            set: set
+                        };
+                    } else {
+                        value = newValue;
+                    }
+                    if (newInit !== void 0) {
+                        if (init === void 0) {
+                            init = newInit;
+                        } else if (typeof init === "function") {
+                            init = [
+                                init,
+                                newInit
+                            ];
+                        } else {
+                            init.push(newInit);
+                        }
+                    }
+                }
+            }
+        }
+        if (kind === 0 || kind === 1) {
+            if (init === void 0) {
+                init = function(instance, init) {
+                    return init;
+                };
+            } else if (typeof init !== "function") {
+                var ownInitializers = init;
+                init = function(instance, init) {
+                    var value = init;
+                    for(var i = 0; i < ownInitializers.length; i++){
+                        value = ownInitializers[i].call(instance, value);
+                    }
+                    return value;
+                };
+            } else {
+                var originalInitializer = init;
+                init = function(instance, init) {
+                    return originalInitializer.call(instance, init);
+                };
+            }
+            ret.push(init);
+        }
+        if (kind !== 0) {
+            if (kind === 1) {
+                desc.get = value.get;
+                desc.set = value.set;
+            } else if (kind === 2) {
+                desc.value = value;
+            } else if (kind === 3) {
+                desc.get = value;
+            } else if (kind === 4) {
+                desc.set = value;
+            }
+            if (isPrivate) {
+                if (kind === 1) {
+                    ret.push(function(instance, args) {
+                        return value.get.call(instance, args);
+                    });
+                    ret.push(function(instance, args) {
+                        return value.set.call(instance, args);
+                    });
+                } else if (kind === 2) {
+                    ret.push(value);
+                } else {
+                    ret.push(function(instance, args) {
+                        return value.call(instance, args);
+                    });
+                }
+            } else {
+                Object.defineProperty(base, name, desc);
+            }
+        }
+    }
+    function applyMemberDecs(Class, decInfos, metadata) {
+        var ret = [];
+        var protoInitializers;
+        var staticInitializers;
+        var existingProtoNonFields = new Map();
+        var existingStaticNonFields = new Map();
+        for(var i = 0; i < decInfos.length; i++){
+            var decInfo = decInfos[i];
+            if (!Array.isArray(decInfo)) continue;
+            var kind = decInfo[1];
+            var name = decInfo[2];
+            var isPrivate = decInfo.length > 3;
+            var isStatic = kind >= 5;
+            var base;
+            var initializers;
+            if (isStatic) {
+                base = Class;
+                kind = kind - 5;
+                staticInitializers = staticInitializers || [];
+                initializers = staticInitializers;
+            } else {
+                base = Class.prototype;
+                protoInitializers = protoInitializers || [];
+                initializers = protoInitializers;
+            }
+            if (kind !== 0 && !isPrivate) {
+                var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields;
+                var existingKind = existingNonFields.get(name) || 0;
+                if (existingKind === true || existingKind === 3 && kind !== 4 || existingKind === 4 && kind !== 3) {
+                    throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+                } else if (!existingKind && kind > 2) {
+                    existingNonFields.set(name, kind);
+                } else {
+                    existingNonFields.set(name, true);
+                }
+            }
+            applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, metadata);
+        }
+        pushInitializers(ret, protoInitializers);
+        pushInitializers(ret, staticInitializers);
+        return ret;
+    }
+    function pushInitializers(ret, initializers) {
+        if (initializers) {
+            ret.push(function(instance) {
+                for(var i = 0; i < initializers.length; i++){
+                    initializers[i].call(instance);
+                }
+                return instance;
+            });
+        }
+    }
+    function applyClassDecs(targetClass, classDecs, metadata) {
+        if (classDecs.length > 0) {
+            var initializers = [];
+            var newClass = targetClass;
+            var name = targetClass.name;
+            for(var i = classDecs.length - 1; i >= 0; i--){
+                var decoratorFinishedRef = {
+                    v: false
+                };
+                try {
+                    var nextNewClass = classDecs[i](newClass, {
+                        kind: "class",
+                        name: name,
+                        addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef),
+                        metadata
+                    });
+                } finally{
+                    decoratorFinishedRef.v = true;
+                }
+                if (nextNewClass !== undefined) {
+                    assertValidReturnValue(10, nextNewClass);
+                    newClass = nextNewClass;
+                }
+            }
+            return [
+                defineMetadata(newClass, metadata),
+                function() {
+                    for(var i = 0; i < initializers.length; i++){
+                        initializers[i].call(newClass);
+                    }
+                }
+            ];
+        }
+    }
+    function defineMetadata(Class, metadata) {
+        return Object.defineProperty(Class, Symbol.metadata || Symbol.for("Symbol.metadata"), {
+            configurable: true,
+            enumerable: true,
+            value: metadata
+        });
+    }
+    return function applyDecs2203R(targetClass, memberDecs, classDecs, parentClass) {
+        if (parentClass !== void 0) {
+            var parentMetadata = parentClass[Symbol.metadata || Symbol.for("Symbol.metadata")];
+        }
+        var metadata = Object.create(parentMetadata === void 0 ? null : parentMetadata);
+        var e = applyMemberDecs(targetClass, memberDecs, metadata);
+        if (!classDecs.length) defineMetadata(targetClass, metadata);
+        return {
+            e: e,
+            get c () {
+                return applyClassDecs(targetClass, classDecs, metadata);
+            }
+        };
+    };
+}
+function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
+    return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
+}
+/**
+ * ValidityMixin
+ *
+ * Adds the full WHATWG Constraint Validation API and form-associated lifecycle
+ * to any Lit element. Consumers only need to:
+ *
+ *   1. Override `_testValidity()` to return component-specific validity flags.
+ *   2. Declare `value`, `name`, and `disabled` as `@property`.
+ *   3. Call `_internals.setFormValue()` in their `updated()` lifecycle.
+ *
+ * The mixin owns: `static formAssociated`, `_internals`, `status`, `required`,
+ * `validityMessage`, and all form lifecycle callbacks.
+ */ function ValidityMixin(Base) {
+    var _dec, _dec1, _dec2, // ── Shared validation properties ─────────────────────────────────────────
+    // These are the "contract" properties that ValidityMixin manages.
+    // Consumers no longer need to declare these themselves.
+    _init_status, _init_required, _init_validityMessage, _initProto;
+    _dec = property({
+        reflect: true
+    }), _dec1 = property({
+        type: Boolean,
+        reflect: true
+    }), _dec2 = property({
+        attribute: 'validity-message'
+    });
+    class ValidityMixinClass extends Base {
+        static{
+            ({ e: [_init_status, _init_required, _init_validityMessage, _initProto] } = _apply_decs_2203_r(this, [
+                [
+                    _dec,
+                    1,
+                    "status"
+                ],
+                [
+                    _dec1,
+                    1,
+                    "required"
+                ],
+                [
+                    _dec2,
+                    1,
+                    "validityMessage"
+                ]
+            ], []));
+        }
+        // ── Form association ─────────────────────────────────────────────────────
+        static formAssociated = true;
+        _internals = (_initProto(this), this.attachInternals());
+        #___private_status_1 = _init_status(this, 'default');
+        get status() {
+            return this.#___private_status_1;
+        }
+        set status(_v) {
+            this.#___private_status_1 = _v;
+        }
+        #___private_required_2 = _init_required(this, false);
+        get required() {
+            return this.#___private_required_2;
+        }
+        set required(_v) {
+            this.#___private_required_2 = _v;
+        }
+        #___private_validityMessage_3 = _init_validityMessage(this, '');
+        get validityMessage() {
+            return this.#___private_validityMessage_3;
+        }
+        set validityMessage(_v) {
+            this.#___private_validityMessage_3 = _v;
+        }
+        // ── ValidityState getters (WHATWG Constraint Validation API) ──────────────
+        /**
+     * The ValidityState from ElementInternals.
+     * Always reflects the most recent `_testValidity()` result.
+     */ get validity() {
+            return this._internals.validity;
+        }
+        /**
+     * The human-readable validation message from ElementInternals.
+     * Set by `setValidity()` and `setCustomValidity()`.
+     */ get validationMessage() {
+            return this._internals.validationMessage;
+        }
+        /**
+     * Whether this control will participate in form validation.
+     * Per spec, disabled controls return false (they are not candidates).
+     */ get willValidate() {
+            return this._internals.willValidate;
+        }
+        // ── Extension hooks for subclasses ────────────────────────────────────────
+        /**
+     * Returns ValidityStateFlags describing why the current value is invalid.
+     * Return `{}` (empty) when the value is valid.
+     *
+     * Subclasses MUST override this. The base implementation returns `{}`
+     * (always valid) as a safe default.
+     */ _testValidity() {
+            return {};
+        }
+        /**
+     * Returns the element that browser validation popups should anchor to.
+     * Override in subclasses that wrap a native control via FocusableMixin.
+     *
+     * @example
+     *   protected override _getValidationAnchor(): HTMLElement | undefined {
+     *     return this._focusableElement ?? undefined;
+     *   }
+     */ _getValidationAnchor() {
+            return undefined;
+        }
+        /**
+     * Internal validity check — sets validity on ElementInternals and
+     * dispatches the cancelable `invalid` event if invalid.
+     * Returns whether the control is valid and whether the event was allowed.
+     */ _checkValidityAndDispatch() {
+            const flags = this._testValidity();
+            const isValid = !Object.values(flags).some(Boolean);
+            const anchor = this._getValidationAnchor();
+            if (isValid) {
+                this._internals.setValidity({});
+            } else {
+                const msg = this.validityMessage || 'Invalid value';
+                if (anchor) {
+                    this._internals.setValidity(flags, msg, anchor);
+                } else {
+                    this._internals.setValidity(flags, msg);
+                }
+            }
+            let proceed = true;
+            if (!isValid) {
+                proceed = this.dispatchEvent(new Event('invalid', {
+                    bubbles: false,
+                    cancelable: true,
+                    composed: false
+                }));
+            }
+            return {
+                isValid,
+                proceed
+            };
+        }
+        /**
+     * Checks whether the control satisfies all validity constraints.
+     *
+     * Per the WHATWG spec, this method:
+     * - Evaluates validity via `_testValidity()`
+     * - Updates `_internals.setValidity()` so `.validity` is fresh
+     * - Dispatches a cancelable `invalid` event if the control is invalid
+     * - Returns `true` if valid, `false` otherwise
+     *
+     * **Does NOT mutate `status`.** Use `reportValidity()` to update
+     * the visual state.
+     */ checkValidity() {
+            return this._checkValidityAndDispatch().isValid;
+        }
+        /**
+     * Checks validity, updates the visual `status` (if the `invalid` event
+     * was not prevented), and triggers the browser's built-in validation popup.
+     *
+     * This is the method that should be called when you want the user
+     * to see validation feedback.
+     */ reportValidity() {
+            const { isValid, proceed } = this._checkValidityAndDispatch();
+            if (isValid) {
+                if (this.status === 'invalid') {
+                    this.status = 'default';
+                    this.validityMessage = '';
+                }
+            } else {
+                // Only update visual status if the `invalid` event wasn't prevented
+                if (proceed) {
+                    this.status = 'invalid';
+                }
+            }
+            return this._internals.reportValidity();
+        }
+        /**
+     * Sets or clears a custom validation error.
+     *
+     * - Pass a non-empty string to mark the control as invalid with a custom message.
+     * - Pass an empty string to clear the custom error.
+     */ setCustomValidity(message) {
+            const hasError = Boolean(message);
+            this.status = hasError ? 'invalid' : 'default';
+            this.validityMessage = message;
+            if (hasError) {
+                const anchor = this._getValidationAnchor();
+                if (anchor) {
+                    this._internals.setValidity({
+                        customError: true
+                    }, message, anchor);
+                } else {
+                    this._internals.setValidity({
+                        customError: true
+                    }, message);
+                }
+            } else {
+                this._internals.setValidity({});
+            }
+        }
+        // ── Auto re-validation (keeps .validity fresh) ───────────────────────────
+        /**
+     * Silently keeps `_internals.setValidity()` in sync whenever reactive
+     * properties change. This ensures `.validity` is always fresh without
+     * mutating `status` or dispatching events.
+     */ updated(changed) {
+            super.updated(changed);
+            if (changed.has('value') || changed.has('required')) {
+                this._syncValidity();
+            }
+        }
+        /**
+     * Internal validity sync — updates `_internals.setValidity()` without
+     * changing visual `status` or dispatching events.
+     */ _syncValidity() {
+            const flags = this._testValidity();
+            const isValid = !Object.values(flags).some(Boolean);
+            const anchor = this._getValidationAnchor();
+            if (isValid) {
+                this._internals.setValidity({});
+            } else {
+                const msg = this.validityMessage || 'Invalid value';
+                if (anchor) {
+                    this._internals.setValidity(flags, msg, anchor);
+                } else {
+                    this._internals.setValidity(flags, msg);
+                }
+            }
+        }
+        // ── Form lifecycle callbacks ─────────────────────────────────────────────
+        /**
+     * Called when the associated `<form>` is reset.
+     * Resets visual status and validation message.
+     *
+     * Subclasses should override to also reset their `value` property,
+     * then call `super.formResetCallback()`.
+     */ formResetCallback() {
+            this.status = 'default';
+            this.validityMessage = '';
+            this._internals.setValidity({});
+        }
+        /**
+     * Called when the form or parent `<fieldset>` disabled state changes.
+     * Propagates the disabled state to the element's `disabled` property.
+     */ formDisabledCallback(disabled) {
+            // All consumers declare `disabled` as @property — set it directly.
+            this.disabled = disabled;
+        }
+        /**
+     * Called when the browser restores form state (back/forward cache, autofill).
+     * Default implementation handles string values. Override for complex types
+     * (arrays, FormData, etc.).
+     */ formStateRestoreCallback(state, _reason) {
+            if (typeof state === 'string') {
+                this.value = state;
+            }
+        }
+    }
+    return ValidityMixinClass;
+}
+
+export { ValidityMixin as V };