@akcelik/strct 5.0.1 → 5.0.2

package/fesm2022/akcelik-strct.mjs

@@ -1749,7 +1749,7 @@ class StrctPageHeader {
       <div class="strct-ph__actions"><ng-content select="[strctPageHeaderActions]" /></div>
     </div>
     <ng-content />
-  `, isInline: true, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:var(--text-lg);font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:18px;font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctPageHeader, decorators: [{
             type: Component,
@@ -1794,7 +1794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         class: 'strct-ph',
                         '[class.strct-ph--divider]': 'divider()',
                         '[class.strct-ph--pane]': "size() === 'pane'",
-                    }, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:var(--text-lg);font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"] }]
+                    }, styles: [".strct-ph{display:block}.strct-ph--divider{padding-bottom:16px;border-bottom:1px solid var(--b1)}.strct-ph__crumbs:empty{display:none}.strct-ph__crumbs{margin-bottom:6px}.strct-ph__row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}.strct-ph__text{flex:1;min-width:0}.strct-ph__titlerow{display:flex;align-items:baseline;gap:var(--space-2);min-width:0;flex-wrap:wrap}.strct-ph__icon{align-self:center;color:var(--t2);flex:none}.strct-ph__titlemeta:empty{display:none}.strct-ph__titlemeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-ph--pane .strct-ph__title{font-size:18px;font-weight:600;letter-spacing:0}.strct-ph__title{margin:0;font-size:var(--text-2xl);font-weight:700;letter-spacing:-.01em;color:var(--t1);text-wrap:balance}.strct-ph__subtitle{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--t2);max-width:72ch}.strct-ph__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.strct-ph__actions:empty{display:none}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /** Leading marker of a row — a badge, a status dot, an icon. */
@@ -7810,22 +7810,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 class StrctCodeInline {
     /** Append a copy button that copies this element's text. */
     copyable = input(false, { ...(ngDevMode ? { debugName: "copyable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * What the copy button puts on the clipboard, when that is not simply what
+     * the element says — a span showing a shortened thumbprint copies the whole
+     * one. Empty follows the element's own text, including later changes.
+     */
+    value = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Long ids wrap instead of overflowing a narrow card. */
+    wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     host = inject(ElementRef);
     vcr = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    /** The button, once it exists; and a counter the observer bumps. */
+    copyRef = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyRef" }] : /* istanbul ignore next */ []));
+    revision = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []));
     constructor() {
         afterNextRender(() => {
             if (!this.copyable())
                 return;
             const el = this.host.nativeElement;
             const ref = this.vcr.createComponent(StrctCopy);
-            // The text to copy is what the element says, before the button joins it.
-            ref.setInput('text', el.textContent?.trim() ?? '');
-            ref.changeDetectorRef.detectChanges();
             el.appendChild(ref.location.nativeElement);
+            this.copyRef.set(ref);
+            // The element's text is not a signal, so watch it: a path or a thumbprint
+            // that loads later must be the text that gets copied, not the first one.
+            if (typeof MutationObserver !== 'undefined') {
+                const mo = new MutationObserver(() => this.revision.update((n) => n + 1));
+                mo.observe(el, { childList: true, characterData: true, subtree: true });
+                this.destroyRef.onDestroy(() => mo.disconnect());
+            }
+        });
+        // Keeps the button's text in step with `value`, or with the element.
+        effect(() => {
+            const ref = this.copyRef();
+            if (!ref)
+                return;
+            this.revision(); // re-read the element whenever its text changed
+            const text = this.value() || this.ownText();
+            untracked(() => {
+                ref.setInput('text', text);
+                ref.changeDetectorRef.detectChanges();
+            });
         });
     }
+    /** What the element says, without the copy button's own content. */
+    ownText() {
+        const clone = this.host.nativeElement.cloneNode(true);
+        clone.querySelector('strct-copy')?.remove();
+        return clone.textContent?.trim() ?? '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCodeInline, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctCodeInline, isStandalone: true, selector: "[strctCode]", inputs: { copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-code-inline--copyable": "copyable()" }, classAttribute: "strct-code-inline" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctCodeInline, isStandalone: true, selector: "[strctCode]", inputs: { copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-code-inline--copyable": "copyable()", "class.strct-code-inline--wrap": "wrap()" }, classAttribute: "strct-code-inline" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCodeInline, decorators: [{
             type: Directive,
@@ -7834,9 +7872,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     host: {
                         class: 'strct-code-inline',
                         '[class.strct-code-inline--copyable]': 'copyable()',
+                        '[class.strct-code-inline--wrap]': 'wrap()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
 
 /**
  * The standard strip above a data grid: a search field, the active filter
@@ -14309,6 +14348,26 @@ class StrctDatagrid {
                 return;
             untracked(() => this.selected.set(new Set(init)));
         });
+        // A selection must not outlive its rows: after a delete the footer said
+        // "2 selected" and selectionChange consumers held ids for rows that are
+        // gone. Prune to the ids the current rows can account for, and emit only
+        // when the pruning actually removed something. A lazy grid cannot prove a
+        // row is gone rather than on another page, so it is left alone.
+        effect(() => {
+            const rows = this.rows();
+            if (this.lazy())
+                return;
+            untracked(() => {
+                const selected = this.selected();
+                if (!selected.size)
+                    return;
+                const present = new Set(rows.map((r) => this.idOf(r)));
+                const kept = new Set([...selected].filter((id) => present.has(id)));
+                if (kept.size === selected.size)
+                    return;
+                this.commitSelection(kept);
+            });
+        });
         // Single mode: the checked row follows `selectedId`, whoever wrote it — the
         // user picking, or a consumer restoring a pick from an earlier step. It
         // writes `selected` directly rather than through commitSelection, so an
@@ -22973,7 +23032,9 @@ class StrctReorderItem {
     // Captured before our own binding ever writes tabindex, so it never flips.
     hadOwnTabindex = this.el.nativeElement.hasAttribute('tabindex');
     hostTabindex() {
-        return this.hadOwnTabindex ? null : 0;
+        if (this.hadOwnTabindex)
+            return null;
+        return this.list.reorderDisabled() ? null : 0;
     }
     /** The keys that apply: the sideways pair only when there is somewhere to go. */
     shortcuts() {
@@ -23059,7 +23120,7 @@ class StrctReorderItem {
         setTimeout(() => this.list.items()[to]?.focus());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctReorderItem, isStandalone: true, selector: "[strctReorderItem]", host: { listeners: { "pointerdown": "onPointerDown($event)", "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "!list.reorderDisabled()", "attr.tabindex": "hostTabindex()", "class.strct-reorder--dragging": "isDragging()", "class.strct-reorder--over": "isOver()", "attr.aria-roledescription": "'sortable'", "attr.aria-keyshortcuts": "shortcuts()", "attr.aria-posinset": "index() + 1", "attr.aria-setsize": "list.items().length", "attr.aria-describedby": "list.instructions() ? list.instructionsId : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctReorderItem, isStandalone: true, selector: "[strctReorderItem]", host: { listeners: { "pointerdown": "onPointerDown($event)", "dragstart": "onDragStart($event)", "dragover": "onDragOver($event)", "drop": "onDrop($event)", "dragend": "onDragEnd()", "keydown": "onKeydown($event)" }, properties: { "attr.draggable": "!list.reorderDisabled()", "attr.tabindex": "hostTabindex()", "class.strct-reorder--dragging": "isDragging()", "class.strct-reorder--over": "isOver()", "attr.aria-roledescription": "list.reorderDisabled() ? null : 'sortable'", "attr.aria-keyshortcuts": "list.reorderDisabled() ? null : shortcuts()", "attr.aria-posinset": "list.reorderDisabled() ? null : index() + 1", "attr.aria-setsize": "list.reorderDisabled() ? null : list.items().length", "attr.aria-describedby": "list.reorderDisabled() || !list.instructions() ? null : list.instructionsId" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctReorderItem, decorators: [{
             type: Directive,
@@ -23070,11 +23131,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[attr.tabindex]': 'hostTabindex()',
                         '[class.strct-reorder--dragging]': 'isDragging()',
                         '[class.strct-reorder--over]': 'isOver()',
-                        '[attr.aria-roledescription]': "'sortable'",
-                        '[attr.aria-keyshortcuts]': 'shortcuts()',
-                        '[attr.aria-posinset]': 'index() + 1',
-                        '[attr.aria-setsize]': 'list.items().length',
-                        '[attr.aria-describedby]': 'list.instructions() ? list.instructionsId : null',
+                        // A display-only list says nothing about sorting: no roledescription, no
+                        // shortcuts, no tab stop of its own, and no description pointing at
+                        // instructions that do not apply.
+                        '[attr.aria-roledescription]': "list.reorderDisabled() ? null : 'sortable'",
+                        '[attr.aria-keyshortcuts]': 'list.reorderDisabled() ? null : shortcuts()',
+                        '[attr.aria-posinset]': 'list.reorderDisabled() ? null : index() + 1',
+                        '[attr.aria-setsize]': 'list.reorderDisabled() ? null : list.items().length',
+                        '[attr.aria-describedby]': 'list.reorderDisabled() || !list.instructions() ? null : list.instructionsId',
                     },
                 }]
         }], propDecorators: { onPointerDown: [{
@@ -23649,6 +23713,7 @@ class StrctWindow {
     ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
     service = inject(StrctWindowService);
     doc = inject(DOCUMENT$1);
+    zone = inject(NgZone);
     host = inject(ElementRef);
     zOffset = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zOffset" }] : /* istanbul ignore next */ []));
@@ -23663,6 +23728,16 @@ class StrctWindow {
     rect = computed(() => this.bounds() ?? this.fallback(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
     restoreTo = null;
+    /** A click beside the window, when `closeOnOutside` asks for one. */
+    onOutside = (event) => {
+        if (this.closeOnOutside() !== 'minimize' || !this.open() || this.minimized())
+            return;
+        const frame = this.host.nativeElement.querySelector('.strct-window__frame');
+        const target = event.target;
+        if (frame && target instanceof Node && frame.contains(target))
+            return;
+        this.zone.run(() => this.minimize());
+    };
     constructor() {
         this.service.register(this);
         effect(() => {
@@ -23672,6 +23747,19 @@ class StrctWindow {
                 queueMicrotask(() => this.focusTitle());
             }
         });
+        // `closeOnOutside` was declared and never read. The listener is added only
+        // while a window asks for it, and outside the zone — a click anywhere on
+        // the page must not cost a change-detection pass for every open window.
+        effect((onCleanup) => {
+            if (this.closeOnOutside() !== 'minimize' || !this.open() || this.minimized())
+                return;
+            // Deferred, so the click that opened the window does not close it.
+            const timer = setTimeout(() => this.zone.runOutsideAngular(() => this.doc.addEventListener('pointerdown', this.onOutside, true)));
+            onCleanup(() => {
+                clearTimeout(timer);
+                this.doc.removeEventListener('pointerdown', this.onOutside, true);
+            });
+        });
     }
     /** Raise this window above the others when it is clicked. */
     focusWindow() {
@@ -24062,8 +24150,25 @@ class StrctChatThread {
     /** False once the reader scrolls away from the end; true again at the end. */
     atEnd = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "atEnd" }] : /* istanbul ignore next */ []));
+    destroyRef = inject(DestroyRef);
     constructor() {
-        afterNextRender(() => this.scrollToEnd());
+        afterNextRender(() => {
+            this.scrollToEnd();
+            // A new message, or a streaming one growing, changes the list's height —
+            // and nothing else tells the thread that. Following `busy` alone left the
+            // reader looking at the message before last.
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const list = this.host.nativeElement.querySelector('.strct-chat__list');
+            if (!list)
+                return;
+            const ro = new ResizeObserver(() => {
+                if (this.autoScroll() && this.atEnd())
+                    this.scrollToEnd();
+            });
+            ro.observe(list);
+            this.destroyRef.onDestroy(() => ro.disconnect());
+        });
         effect(() => {
             this.busy();
             if (this.autoScroll() && this.atEnd())