@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/generated/components/text-field.js

@@ -1,12 +1,19 @@
 var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals, makeSlotchangeHandler } from '../internal/class/form-associated-base';
-import { $, compareBigDecimals, kebabCase, onoff, set } from '../internal/utils';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, compareBigDecimals, debug, kebabCase, onoff, set } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
+ * @summary A control that displays an editable text area.
+ *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
- * @slot validity-options
+ * @slot {HTMLOptionElement[]} validity-options
  */
 export class TextField extends FormAssociatedBase {
     static get observedAttributes() {
@@ -20,29 +27,46 @@ export class TextField extends FormAssociatedBase {
             'name',
             'text',
             'text-input-autocapitalization',
+            /**
+             * @type {boolean}
+             */
             'disable-autocorrection',
+            /**
+             * @type {decimal-pad|number-pad|default}
+             */
             'keyboard-type',
+            /**
+             * @type {boolean}
+             */
             'required',
+            /**
+             * @type {boolean}
+             */
             'disabled',
         ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root text-field-stack">
-    <div part="root text-field-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root text-field-input-stack">
-      <input type="text" part="root input text-field-form-input">
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`, ''));
+        return (this.#template ??= $(html `<label part="root text-field-stack">
+        <div part="root text-field-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root text-field-input-stack">
+          <input type="text" part="root input text-field-form-input" />
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #shadowRoot;
     // #internals: ElementInternals
     #customValidity = '';
-    #validitiesSlot;
+    // #validitiesSlot?: HTMLSlotElement
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
     #input;
     get #internals() {
         return getInternals(this);
@@ -51,9 +75,13 @@ export class TextField extends FormAssociatedBase {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#validitiesSlot = this.#shadowRoot.querySelector('slot[name=validity-options]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
         CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#validitiesSlot).on(), 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
         this.#input = this.#shadowRoot.querySelector('input') ?? undefined;
         CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
         CleanupRegistry.register(this, onoff([
@@ -62,23 +90,12 @@ export class TextField extends FormAssociatedBase {
             { types: 'beforeinput', listener: this.#handleInputBeforeinput },
             { types: 'paste', listener: this.#handleInputPaste },
         ], this.#input).on());
-        CleanupRegistry.register(this, onoff('change', () => {
+        CleanupRegistry.register(this, onoff('localechange', () => {
             this.text = this.text;
         }, I18n.on).on());
     }
-    connectedCallback() {
-        super.connectedCallback();
-        // finally
-        if (!this.hasAttribute('text'))
-            return;
-        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
-        this.#sendValueToForm(false);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'keyboard-type':
                 switch (newValue) {
@@ -126,7 +143,7 @@ export class TextField extends FormAssociatedBase {
                 break;
             case 'text':
                 // if (this.#input) this.#input.value = newValue ?? ''
-                this.text = newValue ?? '';
+                // nothing happens //this.text = newValue ?? ''
                 break;
             case 'required':
                 this.#input?.setAttribute(name, newValue ?? ''); // else this.#input?.removeAttribute(name)
@@ -135,7 +152,7 @@ export class TextField extends FormAssociatedBase {
             case 'name':
             case 'minimum':
             case 'maximum':
-                this.#sendValueToForm();
+                this.#sendValueToForm(false);
                 break;
             case 'prompt':
                 this.#input?.setAttribute('placeholder', newValue ?? ''); // else this.#input?.removeAttribute(name)
@@ -149,14 +166,8 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label" foreground="secondary"></span>`));
-                    label.textContent = newValue;
-                }
-                else
-                    label?.remove();
-                this.#sendValueToForm();
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
+                // this.#sendValueToForm()
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))
@@ -180,10 +191,20 @@ export class TextField extends FormAssociatedBase {
                 break;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // finally
+        if (!this.hasAttribute('text'))
+            return;
+        this.text = this.getAttribute('text') ?? ''; // this.#input.value = this.getAttribute('text') ?? ''
+        this.#sendValueToForm(false);
+    }
     get keyboardType() {
-        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '')
-            ? this.getAttribute('keyboard-type')
-            : 'default';
+        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '') ? this.getAttribute('keyboard-type') : 'default';
     }
     get text() {
         return this.#input?.value ?? '';
@@ -200,8 +221,17 @@ export class TextField extends FormAssociatedBase {
             set(this.#input, 'value', finalText); // if (this.text !== finalText) this.#input.value = finalText
         }
     }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        // if (0 < assigned.length)
+        this.#renderValidityMsgs([]);
+    };
     #handleFocusin = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (evt.target === this)
             this.#input?.focus();
     };
@@ -232,9 +262,9 @@ export class TextField extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement))
             return;
         evt.preventDefault();
         const data = this.#identity(evt.clipboardData?.getData('text') ?? ''); // number is now sanitized but contains edge cases like '+' and also global one separator that could be wither dot or decimal.
@@ -303,41 +333,41 @@ export class TextField extends FormAssociatedBase {
                 const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
                 digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/; // allow only one ',' or '.' and finally only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(str);
-            //   // console.log(isValidDecimal(""));       // true
-            //   // console.log(isValidDecimal("+"));      // true
-            //   // console.log(isValidDecimal("-"));      // true
-            //   // console.log(isValidDecimal("123"));    // true
-            //   // console.log(isValidDecimal("+123"));   // true
-            //   // console.log(isValidDecimal("-456"));   // true
-            //   // console.log(isValidDecimal("12.34"));  // true
-            //   // console.log(isValidDecimal("-0,56"));  // true
-            //   // console.log(isValidDecimal(".78"));    // true
-            //   // console.log(isValidDecimal(",9"));     // true
-            //   // console.log(isValidDecimal("12.3.4")); // false
-            //   // console.log(isValidDecimal("12,3,4")); // false
-            //   // console.log(isValidDecimal("12-3"));   // false
-            //   // console.log(isValidDecimal("12a"));    // false
+            //   // isValidDecimal("");       // true
+            //   // isValidDecimal("+");      // true
+            //   // isValidDecimal("-");      // true
+            //   // isValidDecimal("123");    // true
+            //   // isValidDecimal("+123");   // true
+            //   // isValidDecimal("-456");   // true
+            //   // isValidDecimal("12.34");  // true
+            //   // isValidDecimal("-0,56");  // true
+            //   // isValidDecimal(".78");    // true
+            //   // isValidDecimal(",9");     // true
+            //   // isValidDecimal("12.3.4"); // false
+            //   // isValidDecimal("12,3,4"); // false
+            //   // isValidDecimal("12-3");   // false
+            //   // isValidDecimal("12a");    // false
             case 'number-pad':
                 const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
                 digitsOnlyRegex = /^(\d+)?$/; // allow only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex).test(str);
-            //   // console.log(isValidInteger(""));      // true
-            //   // console.log(isValidInteger("+"));     // true
-            //   // console.log(isValidInteger("-"));     // true
-            //   // console.log(isValidInteger("123"));   // true
-            //   // console.log(isValidInteger("+123"));  // true
-            //   // console.log(isValidInteger("-456"));  // true
-            //   // console.log(isValidInteger("12-3"));  // false
-            //   // console.log(isValidInteger("++123")); // false
-            //   // console.log(isValidInteger("123a"));  // false
+            //   // isValidInteger("");      // true
+            //   // isValidInteger("+");     // true
+            //   // isValidInteger("-");     // true
+            //   // isValidInteger("123");   // true
+            //   // isValidInteger("+123");  // true
+            //   // isValidInteger("-456");  // true
+            //   // isValidInteger("12-3");  // false
+            //   // isValidInteger("++123"); // false
+            //   // isValidInteger("123a");  // false
             default:
                 return true;
         }
     };
     #handleInputBeforeinput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement))
             return;
         if ('insertText' !== evt.inputType)
             return;
@@ -369,10 +399,9 @@ export class TextField extends FormAssociatedBase {
             // this.setValidity(prevValidity, prevValiditationMessage) // restore
         }
     };
-    #handleInputBlur = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+    #handleInputBlur = ({ type, target: input }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(input instanceof HTMLInputElement))
             return;
         if (0 === input.value.length)
             return;
@@ -382,10 +411,12 @@ export class TextField extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
-    // Optional: form participation properties
+    /**
+     * Form participation property
+     */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
     }
@@ -426,14 +457,8 @@ export class TextField extends FormAssociatedBase {
         }
     }
     get negativeNumbersAllowed() {
-        // switch (this.keyboardType) {
-        //   case 'decimal-pad':
-        //   case 'number-pad':
         const min = this.getAttribute('minimum') ?? '-Infinity', max = this.getAttribute('maximum') ?? 'Infinity';
         return compareBigDecimals('0', min) >= 0 && compareBigDecimals('0', max) <= 0;
-        //   default:
-        //     return false
-        // }
     }
     setValidity = (flags, message, anchor) => {
         // let msg
@@ -442,16 +467,16 @@ export class TextField extends FormAssociatedBase {
             const key = k; // ✅ type-safe cast
             if (true !== flags[key])
                 continue;
-            for (const el of this.#validitiesSlot?.assignedElements({ flatten: true }) ?? []) {
+            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
                 if (!el.matches('option'))
                     continue;
-                const option = el;
-                if (`${kebabCase(key)}` === option.value) {
-                    message = option.label;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
                     break;
                 }
-                else if (`${kebabCase(key)}:${message}` === option.value) {
-                    message = option.label;
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
                     break;
                 }
             }
@@ -464,7 +489,7 @@ export class TextField extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
     };
     setCustomValidity = (message) => {
@@ -474,16 +499,19 @@ export class TextField extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        this.text = state;
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const el of this.#shadowRoot.querySelectorAll('input'))
             el.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
+    }
+    formResetCallback() {
         this.text = '';
-        this.#sendValueToForm();
-    };
+        this.#sendValueToForm(false);
+    }
 }
 _a = TextField;

package/generated/components/text-view.d.ts

@@ -0,0 +1,11 @@
+export declare class TextView extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'text-view': TextView;
+    }
+}

package/generated/components/text-view.js

@@ -0,0 +1,16 @@
+import { debug } from '../internal/utils';
+export class TextView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${TextView.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${TextView.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${TextView.name} ⚡️ attr-change [${name}]`);
+        //
+    }
+}

package/generated/components/toggle-view.d.ts

@@ -0,0 +1,43 @@
+import { FormAssociatedBase } from '../internal/class/form-associated-base';
+declare const toggleStyles: readonly ["switch", "button"];
+export type ToggleStyle = (typeof toggleStyles)[number];
+/**
+ * @summary A control that switches between on and off states.
+ *
+ * @example <toggle-view label="Custom Label"></toggle-view> — Creates a toggle that displays a custom label
+ *
+ * @fires toggle:change — User toggled the control
+ *
+ * @slot label
+ * @slot {HTMLOptionElement[]} validity-options
+ */
+export declare class ToggleView extends FormAssociatedBase {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    get toggleStyle(): ToggleStyle;
+    get isOn(): boolean;
+    set isOn(v: boolean);
+    /**
+     * Form participation property
+     */
+    get name(): string;
+    get value(): string | null;
+    set value(v: string | null);
+    setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
+    setCustomValidity: (message: string) => void;
+    formStateRestoreCallback(state: string, reason: string): void;
+    formAssociatedCallback(form: HTMLFormElement): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'toggle-view': ToggleView;
+    }
+}
+export {};