@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.61

package/generated/components/tab-view.js

@@ -1,29 +1,264 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { CSSStyleObserver } from '../internal/class/css-style-observer';
+import { NavigationPath } from '../internal/class/navigation-path';
+import { $, cssTime, debounce, devFlags, frame, onoff, timeout } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
+/**
+ * @fires tabshow A Tab is shown
+ * @fires tabhide A Tab is hidden
+ * @fires tab-view:toggle
+ * @fires tab-view:adaptable-tab-bar-placement-change
+ */
 export class TabView extends HTMLElement {
+    #debouncedHandler;
+    #cssStyleObserver;
+    #afterTabRevealDelay = timeout();
+    #cachedAdaptableTabBarPlacement = 'bottom-bar';
+    static gatherTab(newTab) {
+        const possibleParentNs = newTab?.parentElement?.closest('navigation-stack,navigation-split-view');
+        return [possibleParentNs, newTab].filter(Boolean);
+    }
     constructor() {
         super();
+        this.#debouncedHandler = debounce(this.#handleSelectionChange, 1);
     }
     disconnectedCallback() {
-        console.debug(`${TabView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        this.#afterTabRevealDelay.cancel();
+        this.#cssStyleObserver?.disconnect();
+        CleanupRegistry.unregister(this);
     }
-    connectedCallback() {
-        console.debug(`${TabView.name} ⚡️ connect`);
+    get tabBarPlacement() {
+        return this.#cachedAdaptableTabBarPlacement;
     }
-    get selection() {
-        const selectedTab = this.querySelector(':scope > navigation-stack:not([hidden]),:scope > navigation-split-view:not([hidden])');
-        return selectedTab;
+    get moreTab() {
+        return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
     }
-    set selection(nv) {
-        if (!['NAVIGATION-STACK', 'NAVIGATION-SPLIT-VIEW'].includes(nv?.tagName ?? ''))
-            throw new Error('Element not found');
-        if (nv === this.selection)
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        this.#cssStyleObserver = new CSSStyleObserver({
+            properties: ['--adaptable-tab-bar-placement-index'],
+        });
+        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
+        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); // Snapshot.waitReady.then(this.#handleStyleChange)
+        // NOTE: wait for config
+        // Snapshot.waitReady.then(() => { // FIXME: Check this removed!
+        // for (const [or, w, handler] of [
+        //   ['portrait', `max-width:${Snapshot.config!['ipad-portrait-bp-max']}`, this.#handleMediaChange],
+        //   ['landscape', `max-width:${Snapshot.config!['ipad-landscape-bp-max']}`, this.#handleMediaChange],
+        //   ['portrait', `min-width:${Snapshot.config!['ipad-portrait-bp-min']}`, this.#handleMediaChange],
+        //   ['landscape', `min-width:${Snapshot.config!['ipad-landscape-bp-min']}`, this.#handleMediaChange],
+        // ]) {
+        //   const mediaQueryList = self.matchMedia(`(orientation:${or}) and (${w})`)
+        //   if (mediaQueryList.matches)
+        //     this.#handleMediaChange(
+        //       new MediaQueryListEvent('media-change', {
+        //         matches: mediaQueryList.matches,
+        //       })
+        //     ) // Initial check
+        //   CleanupRegistry.register(this, onoff('change', handler as EventListener, mediaQueryList).on())
+        // }
+        CleanupRegistry.register(this, onoff([
+            { types: 'tabreveal tabswap', listener: this.#debouncedHandler },
+            { types: 'beforetabreveal beforetabswap', listener: this.#addAnimations },
+            { types: 'tab-view:adaptable-tab-bar-placement-change', listener: this.#handleAdaptableTabBarPlacementChange },
+            { types: 'pagereveal', listener: this.#handleTabViewPagereveal },
+            {
+                types: 'click',
+                listener: this.#handleSummaryClick,
+            },
+        ], this).on());
+        // })
+    }
+    #handleSummaryClick = ({ target }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        const summary = target.closest('summary');
+        if (!summary)
+            return;
+        if (0 === $.siblings('[aria-selected=true]', summary).length)
+            return;
+        if (!summary.closest('scroll-view')?.matches('tab-view > [is=sidebar-view] > scroll-view'))
             return;
-        for (const ns of this.querySelectorAll(':scope > navigation-stack,:scope > navigation-split-view')) {
-            if (nv === ns)
-                continue;
-            ns.hidden = true;
-            this.dispatchEvent(new CustomEvent('tabswap', { detail: { x: 42 } }));
+        const form = summary.closest('[is=form-view]');
+        if (!form)
+            return;
+        const style = self.getComputedStyle(form);
+        if ('sidebar' !== style.getPropertyValue('--list-style'))
+            return;
+        this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
+    };
+    #handleTabViewPagereveal = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        void this.#syncBodyFace();
+    };
+    #handleStyleChange = () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
+        const style = self.getComputedStyle(this);
+        const placement = style.getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
+        newValue = TAB_BAR_PLACEMENTS.includes(placement) ? placement : 'bottom-bar';
+        if (newValue !== this.#cachedAdaptableTabBarPlacement) {
+            const oldValue = this.#cachedAdaptableTabBarPlacement;
+            this.#cachedAdaptableTabBarPlacement = newValue;
+            this.dispatchEvent(new CustomEvent('tab-view:adaptable-tab-bar-placement-change', {
+                detail: { oldValue, newValue },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    };
+    // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
+    //   if (devFlags.debug) console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
+    //   if (!evt.matches) return
+    //   this.#handleStyleChange()
+    //   // if (evt.matches) {
+    //   //   const placement = self.getComputedStyle(this).getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
+    //   //     newValue = (TAB_BAR_PLACEMENTS as readonly string[]).includes(placement) ? (placement as (typeof TAB_BAR_PLACEMENTS)[number]) : 'bottom-bar'
+    //   //   if (newValue !== this.#cachedAdaptableTabBarPlacement) {
+    //   //     const oldValue = this.#cachedAdaptableTabBarPlacement
+    //   //     this.#cachedAdaptableTabBarPlacement = newValue
+    //   //     this.dispatchEvent(
+    //   //       new CustomEvent<TabViewAdaptableTabBarPlacementDetail>('tab-view:adaptable-tab-bar-placement-change', {
+    //   //         detail: { oldValue, newValue },
+    //   //         bubbles: true,
+    //   //         composed: true,
+    //   //       })
+    //   //     )
+    //   //   }
+    //   // }
+    //   // // trigger more-stack (dis)allowed event
+    //   // if (evt.matches !== this.#moreStackAllowed) {
+    //   //   this.#moreStackAllowed = evt.matches
+    //   //   const eventType = evt.matches ? 'tab-view:more-tab-allowed' : 'tab-view:more-tab-disallowed'
+    //   //   this.dispatchEvent(new CustomEvent<TabMoreStackAllowanceDetail>(eventType, { detail: { moreTab: this.moreTab }, bubbles: true, composed: true }))
+    //   // }
+    //   // if (evt.matches) return // no button triggers should happen, already on iphone portrait
+    //   // const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
+    //   // if (innerSelection) {
+    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"][value="${CSS.escape(innerSelection)}"]`)
+    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
+    //   //   if (btn) {
+    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
+    //   //     if (newTab) {
+    //   //       this.selectedTab = TabView.gatherTab(newTab)
+    //   //       return
+    //   //     }
+    //   //   }
+    //   // }
+    //   // const outerSelection = this?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id
+    //   // if (outerSelection && outerSelection === this.moreTab?.id) {
+    //   //   const btn = this.querySelector<HTMLButtonElement>(`[is="tab-item"]:not([value="${CSS.escape(outerSelection)}"])`)
+    //   //   // NOTE: simulate btn click BU WITHOUT tabroot functionality!
+    //   //   if (btn) {
+    //   //     const newTab = this.querySelector<NavigationStack | NavigationSplitView>(`#${btn.getAttribute('value')}`)
+    //   //     if (newTab) {
+    //   //       this.selectedTab = TabView.gatherTab(newTab)
+    //   //       return
+    //   //     }
+    //   //   }
+    //   // }
+    // }
+    #handleAdaptableTabBarPlacementChange = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if ('bottom-bar' !== evt.detail.oldValue)
+            return; // button triggers should happen, ONLY when going FROM bottom-bar TO anything else
+        const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
+        if (innerSelection) {
+            const btn = this.querySelector(`[is="tab-item"][value="${CSS.escape(innerSelection)}"]`);
+            // NOTE: simulate btn click BU WITHOUT tabroot functionality!
+            if (btn) {
+                const newTab = this.querySelector(`#${btn.getAttribute('value')}`);
+                if (newTab) {
+                    this.selectedTab = _a.gatherTab(newTab);
+                    return;
+                }
+            }
+        }
+        const outerSelection = this?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
+        if (outerSelection && outerSelection === this.moreTab?.id) {
+            const btn = this.querySelector(`[is="tab-item"]:not([value="${CSS.escape(outerSelection)}"])`);
+            // NOTE: simulate btn click BU WITHOUT tabroot functionality!
+            if (btn) {
+                const newTab = this.querySelector(`#${btn.getAttribute('value')}`);
+                if (newTab) {
+                    this.selectedTab = _a.gatherTab(newTab);
+                    return;
+                }
+            }
         }
-        nv.hidden = false;
-        this.dispatchEvent(new CustomEvent('tabreveal', { detail: { x: 42 } }));
+    };
+    get selectedTab() {
+        // return this.querySelector<NavigationStack | NavigationSplitView>(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')
+        return [...this.querySelectorAll('navigation-stack:not([hidden]),navigation-split-view:not([hidden])')];
     }
+    set selectedTab(tabs) {
+        const valid = [...tabs].every((el, i, arr) => !i || arr[i - 1].contains(el));
+        if (0 === tabs.length)
+            throw new Error('Element not found');
+        if (!valid)
+            throw new Error('selectedTab[] must be in order of parent>child. You provided an element that contains the previous sibling.');
+        //
+        const selectors = [':not(:is(:scope>{{tag}}))', ':is(:scope>{{tag}})']; // first nested ones, then root ones
+        const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`);
+        for (const selector of selectors)
+            for (const ns of this.querySelectorAll(`navigation-stack:not([hidden])${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view:not([hidden])${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
+                if (!tabs.some((tab) => !ns.contains(tab)))
+                    continue; // shouldRun
+                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
+                ns.hidden = true; // triggers
+            }
+        for (const selector of selectors.reverse())
+            for (const ns of this.querySelectorAll(`navigation-stack[hidden]${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view[hidden]${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
+                if (!tabs.some((tab) => ns.contains(tab)))
+                    continue; // shouldRun
+                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
+                ns.hidden = false; // triggers
+            }
+    }
+    #addAnimations = (evt) => {
+        this.setAttribute('js-aftertabreveal', '');
+        // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
+        this.#afterTabRevealDelay.next(() => {
+            this.removeAttribute('js-aftertabreveal');
+        }, evt.detail.ms);
+    };
+    #handleSelectionChange = (evt) => {
+        this.#triggerToggleEvent(evt);
+    };
+    #triggerToggleEvent = (evt) => {
+        const eventType = 'tab-view:toggle';
+        void this.#syncBodyFace();
+        if (devFlags.debug)
+            console.debug(`${_a.name} 💡 ${eventType}`);
+        this.dispatchEvent(new CustomEvent(eventType, { detail: { selection: this.selectedTab }, bubbles: true, composed: true }));
+    };
+    #syncBodyFace = async () => {
+        if (!(await frame(this)))
+            return;
+        const tab = this.selectedTab.at(-1), //event.detail.selection.at(-1), //document.querySelector(`#${}`),
+        path = new NavigationPath(tab), sv = [path, ...path.children()]
+            .filter((item) => item.component?.matches(':not(dialog)'))
+            .map((item) => item.body)
+            .filter(Boolean)
+            .at(-1); //queryBodyAll(tab).at(-1)
+        if (!sv)
+            return;
+        // const style = self.getComputedStyle(sv),
+        //   hostStyle = self.getComputedStyle(document.documentElement)
+        // console.log(999, tab, style.getPropertyValue('--face'), hostStyle.getPropertyValue('--face'))
+        if (!sv.style.getPropertyValue('--face'))
+            return document.body.style.removeProperty('--face');
+        // if (style.getPropertyValue('--face') === hostStyle.getPropertyValue('--face'))
+        document.body.style.setProperty('--face', sv.style.getPropertyValue('--face'));
+        // if (tab?.matches('tab-view>navigation-stack>:scope')) return document.body.style.setProperty('--face', style.getPropertyValue('--face'))
+        // if (tab?.matches('tab-view>:scope')) return document.body.style.setProperty('--face', style.getPropertyValue('--face'))
+    };
 }
+_a = TabView;

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

@@ -0,0 +1,12 @@
+/**
+ * @summary Display selectable, sortable data arranged in rows and columns.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ */
+export declare class TableView extends HTMLElement {
+    #private;
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/table-view.js

@@ -0,0 +1,153 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { CSSStyleObserver } from '../internal/class/css-style-observer';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, devFlags, listActive, onoff, renderLabelTitle } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+/**
+ * @summary Display selectable, sortable data arranged in rows and columns.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ */
+export class TableView extends HTMLElement {
+    #styleObserver;
+    #compactToolbarItem;
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <div part="root table-container">
+      <div part="root table-header-stack">
+        <div part="root table-header-leading-stack">
+          <slot name="header-leading"></slot>
+        </div>
+        <div part="root table-header-principal-stack">
+          <slot name="header-principal"></slot>
+        </div>
+        <div part="root table-header-trailing-stack">
+          <slot name="header-trailing"></slot>
+        </div>
+      </div>
+      <div part="root table-column-stack">
+        <slot name="column"></slot>
+      </div>
+      <slot><p>empty</p></slot>
+      <div part="root table-footer-stack">
+        <div part="root table-footer-leading-stack">
+          <slot name="footer-leading"></slot>
+        </div>
+        <div part="root table-footer-principal-stack">
+          <slot name="footer-principal"></slot>
+        </div>
+        <div part="root table-footer-trailing-stack">
+          <slot name="footer-trailing"></slot>
+        </div>
+      </div>
+    </div>`));
+    }
+    #shadowRoot;
+    #slots = new Map();
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        this.#styleObserver?.disconnect();
+        this.#observers.unobserveAll();
+        this.#compactToolbarItem = undefined;
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(listActive(this), this).on());
+        this.#styleObserver = new CSSStyleObserver({
+            properties: ['--adaptable-table-style-index'],
+        });
+        const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
+        if (!target)
+            return;
+        this.#styleObserver.observe(target, this.#handleStyleChange);
+        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
+    }
+    #handleColumnSlotchange = ({ type, target: slot }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#observers.syncObservations(assigned);
+        // if (0 < assigned.length)
+        this.#renderColumns([]);
+    };
+    #renderColumns = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        if (!this.#compactToolbarItem) {
+            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
+            CleanupRegistry.unregister(this, 'compact_toolbar');
+            CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
+        }
+        this.#compactToolbarItem.innerHTML = `<label-view slot="label" system-image="dots-three"></label-view>`;
+        for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
+            if (!node.matches('[is=table-column]'))
+                continue;
+            const btn = $(`<button type="button" tabindex="0">
+        <v-stack spacing="0" alignment="leading">
+          <label-view></label-view>
+          <label-view font="callout" foreground="secondary"></label-view>
+        </v-stack>
+      </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
+            if (title)
+                renderLabelTitle(title, node.textContent.trim()); //title?.setAttribute('title', node.textContent.trim())
+            if (subTitle)
+                renderLabelTitle(subTitle, node.ariaSort ?? ''); //subTitle?.setAttribute('title', node.ariaSort ?? '')
+            this.#compactToolbarItem.appendChild(btn);
+        }
+    };
+    #observers = new MutationObserverSet(this.#renderColumns);
+    #handleStyleChange = () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
+        const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
+        if (!target)
+            return;
+        const style = self.getComputedStyle(target);
+        const adaptableTableStyle = style.getPropertyValue('--adaptable-table-style') || 'compact';
+        switch (adaptableTableStyle) {
+            case 'expanded':
+                if (this.#compactToolbarItem?.isConnected)
+                    this.#compactToolbarItem?.remove();
+                break;
+            default:
+                if (!this.#compactToolbarItem)
+                    break;
+                if (!this.#slots
+                    ?.get('column')
+                    ?.assignedElements()
+                    .filter((el) => el.matches(':is(button[is=table-column])')).length)
+                    break;
+                if (!this.#compactToolbarItem?.isConnected)
+                    this.insertAdjacentElement('beforeend', this.#compactToolbarItem);
+                break;
+        }
+    };
+    #handleMenuClick = ({ target }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        const btn = target.closest('button');
+        if (!btn)
+            return;
+        const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])], index = siblings.indexOf(btn);
+        this.querySelector(`:scope>[slot=column]:nth-of-type(${index + 1})`)?.click();
+    };
+}
+_a = TableView;

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

@@ -0,0 +1,29 @@
+import { FormAssociatedBase } from '../internal/class/form-associated-base';
+declare const keyboardTypes: readonly ["decimal-pad", "number-pad", "default"];
+export type KeyboardType = (typeof keyboardTypes)[number];
+/**
+ * @slot label
+ * @slot validity-options
+ */
+export declare class TextField 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 keyboardType(): KeyboardType;
+    get text(): string;
+    set text(v: string);
+    get name(): string;
+    get value(): string;
+    get valueAsNumber(): number | "";
+    get negativeNumbersAllowed(): boolean;
+    setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;
+    setCustomValidity: (message: string) => void;
+    formAssociatedCallback: (form: HTMLFormElement) => void;
+    formDisabledCallback: (disabled: boolean) => void;
+    formResetCallback: () => void;
+}
+export {};