@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

package/generated/components/menu-view.js

@@ -1,6 +1,9 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff, touchGlass } from '../internal/utils';
+import { $, devFlags, onoff, renderLabel, touchGlass } from '../internal/utils';
+/**
+ * @summary A control for presenting a menu of actions.
+ */
 export class MenuView extends HTMLElement {
     static get observedAttributes() {
         return ['open', 'closing', 'label'];
@@ -17,7 +20,7 @@ export class MenuView extends HTMLElement {
         <slot></slot>
       </div>
     </form>
-  </dialog>`, ''));
+  </dialog>`));
     }
     #shadowRoot;
     #dialog;
@@ -26,8 +29,42 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'open':
+                if (!this.#dialog)
+                    break;
+                this.#dialog.inert = null === newValue;
+                if (null === newValue && this.#dialog.open) {
+                    if (devFlags.debug)
+                        console.debug(`${_a.name} ⚡️ will-close`);
+                    this.setAttribute('closing', '');
+                    Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
+                        if (!this.hasAttribute('closing'))
+                            return;
+                        this.#dialog?.close();
+                        this.removeAttribute('closing');
+                    });
+                }
+                if ('' === newValue && !this.#dialog.open) {
+                    if (devFlags.debug)
+                        console.debug(`${_a.name} ⚡️ will-open`);
+                    this.removeAttribute('closing');
+                    const form = this.#shadowRoot.querySelector('form');
+                    form.scrollTop = 0;
+                    this.#dialog.showModal();
+                }
+                break;
+            case 'label':
+                renderLabel(':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
+                break;
+        }
+    }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         // const dialog = this.#shadowRoot.querySelector('dialog'),
         //   trigger = this.#shadowRoot.querySelector('button')
         // trigger?.removeEventListener('click', this.#handleTriggerClick)
@@ -40,7 +77,8 @@ export class MenuView extends HTMLElement {
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
         const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
         CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
@@ -49,10 +87,12 @@ export class MenuView extends HTMLElement {
             { types: 'close', listener: this.#handleDialogClose },
             { types: 'cancel', listener: this.#handleDialogCancel },
         ], this.#dialog).on());
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, (evt) => {
-            if (evt.target.matches('menu-view'))
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('menu-view'))
                 return false;
-            if (!evt.target.closest('menu-view[open]'))
+            if (!target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());
@@ -61,72 +101,41 @@ export class MenuView extends HTMLElement {
         summaryPart?.style.setProperty('anchor-name', newAnchorName, 'important'); // override unset:all // $.prop('anchor-name', newAnchorName, summaryPart, 'important') //
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'open':
-                if (!this.#dialog)
-                    break;
-                this.#dialog.inert = null === newValue;
-                if (null === newValue && this.#dialog.open) {
-                    console.debug(`${_a.name} ⚡️ will-close`);
-                    this.setAttribute('closing', '');
-                    Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
-                        if (!this.hasAttribute('closing'))
-                            return;
-                        this.#dialog?.close();
-                        this.removeAttribute('closing');
-                    });
-                }
-                if ('' === newValue && !this.#dialog.open) {
-                    console.debug(`${_a.name} ⚡️ will-open`);
-                    this.removeAttribute('closing');
-                    const form = this.#shadowRoot.querySelector('form');
-                    form.scrollTop = 0;
-                    this.#dialog.showModal();
-                }
-                break;
-            case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`));
-                    label.setAttribute('title', newValue);
-                }
-                else
-                    label?.remove();
-                break;
-        }
-    }
-    #handleDialogClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (evt.target.matches('dialog'))
+    #handleDialogClick = ({ type, target }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        if (target.matches('dialog'))
             return this.toggleAttribute('open', false); // click outside
-        const target = evt.target;
         target.scrollIntoView({
             behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
             block: 'nearest',
             inline: 'nearest',
         });
-        if (!evt.target.closest('button'))
+        if (!target.closest('button'))
             return;
         // TODO: Handle btns this.toggleAttribute('open', false)
         this.toggleAttribute('open', false);
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }

package/generated/components/navigation-large-title.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { add, frame, onoff, slowHideShow, timeout } from '../internal/utils';
+import { add, devFlags, frame, onoff, slowHideShow, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const observing = new WeakSet();
 function observeResizeEnd(el, callback, stableFrames = 4) {
@@ -76,13 +76,15 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -105,7 +107,8 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -150,7 +153,8 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)

package/generated/components/navigation-split-view.d.ts

@@ -1,7 +1,10 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
 export declare class NavigationSplitView extends NavigationView {
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/navigation-split-view.js

@@ -1,18 +1,25 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { devFlags } from '../internal/utils';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
 export class NavigationSplitView extends NavigationView {
     constructor() {
         super();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
     disconnectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${NavigationSplitView.name} ⚡️ connect`);
         super.connectedCallback();
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        super.attributeChangedCallback(name, oldValue, newValue);
-    }
 }

package/generated/components/navigation-stack.d.ts

@@ -1,7 +1,10 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
 export declare class NavigationStack extends NavigationView {
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/navigation-stack.js

@@ -1,18 +1,15 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { devFlags } from '../internal/utils';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
 export class NavigationStack extends NavigationView {
     constructor() {
         super();
     }
-    disconnectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ disconnect`);
-        super.disconnectedCallback();
-    }
-    connectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ connect`);
-        super.connectedCallback();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (devFlags.debug)
+            console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
         // Snapshot.waitReady.then(() => {
         switch (name) {
@@ -21,4 +18,14 @@ export class NavigationStack extends NavigationView {
         }
         // })
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+        super.disconnectedCallback();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${NavigationStack.name} ⚡️ connect`);
+        super.connectedCallback();
+    }
 }

package/generated/components/navigation-title.d.ts

@@ -2,7 +2,7 @@ export declare class NavigationTitle extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/navigation-title.js

@@ -1,66 +1,69 @@
-import { $ } from '../internal/utils';
-export class NavigationTitle extends HTMLElement {
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var NavigationTitle_1;
+import { microtaskOnConnected } from '../internal/decorators';
+import { devFlags } from '../internal/utils';
+import { html, render } from '../tpl';
+let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
-        return ['value', 'subtitle'];
+        return ['value', 'subtitle', 'system-image', 'system-image-weight'];
     }
     constructor() {
         super();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        this.#render(this.getAttribute('value'), this.getAttribute('subtitle'), this.getAttribute('system-image'), this.getAttribute('system-image-weight'));
+    }
     disconnectedCallback() {
-        console.debug(`${NavigationTitle.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        console.debug(`${NavigationTitle.name} ⚡️ connect`);
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        const sibling = this.closest('scroll-view') ?? undefined;
-        switch (name) {
-            case 'value':
-                if (null === newValue)
-                    sibling?.removeAttribute('navigation-inline-title');
-                else
-                    sibling?.setAttribute('navigation-inline-title', newValue);
-                this.#render(newValue, this.getAttribute('subtitle'));
-                break;
-            case 'subtitle':
-                if (null === newValue)
-                    sibling?.removeAttribute('navigation-inline-subtitle');
-                else
-                    sibling?.setAttribute('navigation-inline-subtitle', newValue);
-                this.#render(this.getAttribute('value'), newValue);
-                break;
-        }
+        if (devFlags.debug)
+            console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
-    #render = (title, subtitle) => {
-        const el = this.querySelector(':scope>:not([slot])') ??
-            this.appendChild($(`<navigation-large-title><v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`)), vStack = el.querySelector(':scope>v-stack') ??
-            el.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`));
-        let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
-        if (title) {
-            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`));
-            titleLabel.setAttribute('title', title);
-        }
+    #render = (title, subtitle, systemImage, systemImageWeight) => {
+        const template = html `
+      <v-stack alignment="fill">
+        ${systemImage ? html `<image-view system-name="${systemImage}" system-weight="${systemImageWeight}" foreground="blue"></image-view>` : null}
+        <v-stack spacing="0" alignment="fill">
+          <label-view line-limit="1" truncation-mode="tail" font="headline">
+            <span>${title ?? ''}</span>
+          </label-view>
+          <label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout">
+            <span>${subtitle ?? ''}</span>
+          </label-view>
+        </v-stack>
+      </v-stack>
+    `;
+        const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild(document.createElement('navigation-large-title'));
+        render(template, container);
+        // const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`,
+        //   subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`,
+        //   vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`
+        // const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')),
+        //   vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'))
+        // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
+        // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
+    };
+};
+NavigationTitle = NavigationTitle_1 = __decorate([
+    microtaskOnConnected((el) => {
+        const sibling = el.closest('scroll-view'), value = el.getAttribute('value'), subtitle = el.getAttribute('subtitle');
+        if (null === value)
+            sibling?.removeAttribute('navigation-inline-title');
         else
-            titleLabel?.remove();
-        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
-        if (subtitle) {
-            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`));
-            subtitleLabel.setAttribute('title', subtitle);
-        }
+            sibling?.setAttribute('navigation-inline-title', value);
+        if (null === subtitle)
+            sibling?.removeAttribute('navigation-inline-subtitle');
         else
-            subtitleLabel?.remove();
-        // for (const el of this.querySelectorAll(':scope>*')) el.remove()
-        // const el = this.appendChild(
-        //     Object.assign(document.createElement('template'), {
-        //       innerHTML: `<navigation-large-title><v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`,
-        //     }).content.firstElementChild!
-        //   ),
-        //   titleLabel = el.querySelector('label-view:nth-child(1)'),
-        //   subtitleLabel = el.querySelector('label-view:nth-child(2)')
-        // if (title) titleLabel?.setAttribute('label', title)
-        // else titleLabel?.remove()
-        // if (subtitle) subtitleLabel?.setAttribute('label', subtitle)
-        // else subtitleLabel?.remove()
-    };
-}
+            sibling?.setAttribute('navigation-inline-subtitle', subtitle);
+    })
+], NavigationTitle);
+export { NavigationTitle };

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

@@ -1,22 +1,50 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
-declare const pickerStyles: readonly ["menu", "inline", "automatic"];
+declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "automatic"];
 export type PickerStyle = (typeof pickerStyles)[number];
+export type DictEntry = {
+    value: string;
+    title?: string;
+    subtitle?: string;
+    systemImage?: string;
+    children: DictEntry[];
+};
+export type Dictionary = DictEntry[];
+/**
+ *
+ * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
+ *
+ * @attr {string} help - Adds a help tooltip to the trigger of the picker, if style supports one
+ *
+ * @attr {DictEntry[]} dictionary - Renders all options using this array
+ *
+ * @attr {vertical|horizontal|auto} label-value-placement
+ *
+ * @slot list
+ */
 export declare class PickerView extends FormAssociatedBase {
     #private;
     static get ATTR(): {
         PLACEHOLDER: string;
+        PLACEHOLDER_ICON: string;
         LABEL: string;
         PICKER_STYLE: string;
         SELECTION: string;
+        SEARCHABLE: string;
+        CURRENT_VALUE_LABEL: string;
+        CURRENT_VALUE_ICON: string;
+        TRIGGER_HELP: string;
+        DICTIONARY: string;
+        REQUIRED: string;
     };
     static get observedAttributes(): string[];
+    get selection(): string;
+    set selection(v: string);
     get template(): DocumentFragment;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
     get pickerStyle(): PickerStyle;
-    static wrapTag(node: Element, slotName?: string): Element;
     get name(): string;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;