@swiftwc/ui 0.0.0-dev.21 → 0.0.0-dev.22

package/generated/components/tool-bar-item.d.ts

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

package/generated/components/tool-bar-item.js

@@ -1,10 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, toolbarRepositioner, touchGlass } from '../internal/utils';
-import { Snapshot } from '../snapshot';
+import { onoff, touchGlass } from '../internal/utils';
 export class ToolBarItem extends HTMLElement {
-    static get observedAttributes() {
-        return ['preferred-fine-modal-placement'];
-    }
+    // static get observedAttributes() {
+    //   return ['preferred-fine-modal-placement']
+    // }
     constructor() {
         super();
     }
@@ -18,32 +17,22 @@ export class ToolBarItem extends HTMLElement {
                 return false;
             return true;
         }), this).on());
-        if (this.closest('tool-bar-item-group'))
-            return;
-        if (!this.closest('[is=sheet-view]'))
-            return;
-        const handler1 = toolbarRepositioner.bind(null, this);
-        CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on());
-        Snapshot.waitReady.then(() => {
-            toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-            })); // Initial check
-        });
+        // if (this.closest('tool-bar-item-group')) return
+        // if (!this.closest('[is=sheet-view]')) return
+        // if (!self.matchMedia('(pointer: fine)').matches) return
+        // const handler1 = toolbarRepositioner.bind(null, this)
+        // CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1 as unknown as EventListener, Snapshot.on).on())
+        // Snapshot.waitReady.then(() => {
+        //   toolbarRepositioner(
+        //     this,
+        //     new MediaQueryListEvent(`media-change`, {
+        //       matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+        //     })
+        //   ) // Initial check
+        // })
     }
     disconnectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${ToolBarItem.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'preferred-fine-modal-placement':
-                Snapshot.waitReady.then(() => {
-                    toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                        matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-                    })); // Initial check
-                });
-                break;
-        }
-    }
 }

package/generated/components/tool-bar.d.ts

@@ -1,3 +1,15 @@
+/**
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot top-bar-leading - Places the item in the leading edge of the top bar
+ * @slot top-bar-principal - Places the item in the middle of the top bar
+ * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
 export declare class ToolBar extends HTMLElement {
     #private;
     static get template(): DocumentFragment;

package/generated/components/tool-bar.js

@@ -2,6 +2,18 @@ var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $ } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
+/**
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot top-bar-leading - Places the item in the leading edge of the top bar
+ * @slot top-bar-principal - Places the item in the middle of the top bar
+ * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
 export class ToolBar extends HTMLElement {
     static #template;
     static get template() {
@@ -9,6 +21,7 @@ export class ToolBar extends HTMLElement {
         return (this.#template ??= $(String.raw `
     <div part="root top-bar">
     <div part="root toolbar-leading-stack">
+      <slot name="cancellation-action"></slot>
       <slot name="top-bar-leading"></slot>
     </div>
     <div part="root toolbar-principal-stack">
@@ -16,6 +29,9 @@ export class ToolBar extends HTMLElement {
     </div>
     <div part="root toolbar-trailing-stack">
       <slot name="top-bar-trailing"></slot>
+      <slot name="primary-action"></slot>
+      <slot name="confirmation-action"></slot>
+      <slot name="destructive-action"></slot>
     </div>
   </div>
   <div part="root bottom-bar">
@@ -32,15 +48,12 @@ export class ToolBar extends HTMLElement {
     }
     #shadowRoot;
     get #scrollView() {
-        return this.parentElement?.querySelector(':scope > scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
+        return this.parentElement?.querySelector(':scope>scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
     }
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // NOTE: wait for config
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // })
     }
     connectedCallback() {
         console.debug(`${_a.name} ⚡️ connect`);
@@ -63,7 +76,7 @@ export class ToolBar extends HTMLElement {
             'top-bar': 'navbar',
             'bottom-bar': 'toolbar', //'bottombar',
         };
-        const { contentRect, target } = entry;
+        const { contentRect: { width }, target, } = entry;
         const parentPart = target.parentElement?.part.contains('top-bar') ? 'top-bar' : target.parentElement?.part.contains('bottom-bar') ? 'bottom-bar' : null;
         if (!parentPart)
             return;
@@ -71,7 +84,7 @@ export class ToolBar extends HTMLElement {
         if (!side)
             return;
         const prop = `--${parentMap[parentPart]}-padding-${side}`;
-        $.prop(prop, `${Math.round(contentRect.width)}px`, this.#scrollView); //;(this.#scrollView as HTMLElement)?.style?.setProperty(prop, `${Math.round(contentRect.width)}px`)
+        this.#scrollView?.style?.setProperty(prop, `${Math.round(width)}px`); // $.prop(prop, `${Math.round(width)}px`, this.#scrollView) //
     }
 }
 _a = ToolBar;