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

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, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const observing = new WeakSet();
 function observeResizeEnd(el, callback, stableFrames = 4) {
@@ -67,6 +67,12 @@ function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0p
     };
     return !(elRect.bottom < marginRect.top || elRect.top > marginRect.bottom || elRect.right < marginRect.left || elRect.left > marginRect.right);
 }
+/**
+ *
+ * @attr {boolean} padding
+ * @attr {boolean} navigation-bar-auto-hide
+ *
+ */
 export class NavigationLargeTitle extends HTMLElement {
     #styleObserver;
     #scrollObserver;
@@ -76,13 +82,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -105,7 +111,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -150,7 +156,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        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,15 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
+ */
 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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-split-view': NavigationSplitView;
+    }
 }

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

@@ -1,18 +1,22 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
+ */
 export class NavigationSplitView extends NavigationView {
     constructor() {
         super();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
     disconnectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        debug(`${NavigationSplitView.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        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,15 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A container view that shows a main screen and lets the user 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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-stack': NavigationStack;
+    }
 }

package/generated/components/navigation-stack.js

@@ -1,24 +1,26 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view that shows a main screen and lets the user 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}")`);
+        debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
-        // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'hidden':
                 break;
         }
-        // })
+    }
+    disconnectedCallback() {
+        debug(`${NavigationStack.name} ⚡️ disconnect`);
+        super.disconnectedCallback();
+    }
+    connectedCallback() {
+        debug(`${NavigationStack.name} ⚡️ connect`);
+        super.connectedCallback();
     }
 }

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

@@ -1,8 +1,18 @@
+/**
+ * @summary A container view.
+ *
+ * @attr {boolean} padding
+ */
 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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-title': NavigationTitle;
+    }
 }

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 { debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A container view.
+ *
+ * @attr {boolean} padding
+ */
+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) {
+        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`);
+        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;
-        }
+        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) => {
+        queryMorph(':not([slot])', html `
+        <navigation-large-title>
+          <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">
+              ${title
+            ? html `<label-view line-limit="1" truncation-mode="tail" font="headline">
+                    <span>${title}</span>
+                  </label-view>`
+            : null}
+              ${subtitle
+            ? html `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout">
+                    <span>${subtitle}</span>
+                  </label-view>`
+            : null}
+            </v-stack>
+          </v-stack>
+        </navigation-large-title>
+      `, this);
+    };
+};
+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,27 +1,68 @@
 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[];
+/**
+ * @summary A control that selects one value from a set of options.
+ *
+ * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
+ *
+ * @attr 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 — The default slot.
+ * @slot label
+ * @slot list
+ * @slot {HTMLOptionElement[]} validity-options
+ */
 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;
+    /**
+     * Form participation property
+     */
     get name(): string;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
     setCustomValidity: (message: string) => void;
-    formAssociatedCallback: (form: HTMLFormElement) => void;
-    formDisabledCallback: (disabled: boolean) => void;
-    formResetCallback: () => void;
+    formStateRestoreCallback(state: string, reason: string): void;
+    formAssociatedCallback(form: HTMLFormElement): void;
+    formDisabledCallback(disabled: boolean): void;
+    formResetCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'picker-view': PickerView;
+    }
 }
 export {};