@akcelik/strct 4.21.0 → 4.22.0

package/fesm2022/akcelik-strct.mjs

@@ -23261,6 +23261,479 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\n"] }]
         }], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
+const WINDOW_LABELS = {
+    minimize: 'Minimize',
+    maximize: 'Maximize',
+    restore: 'Restore',
+    close: 'Close',
+    dock: 'Minimized windows',
+};
+let windowCounter = 0;
+/**
+ * Knows which windows exist, which is on top, and which are minimised — so the
+ * dock can list them and a click can raise one.
+ */
+class StrctWindowService {
+    topZ = 0;
+    windows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "windows" }] : /* istanbul ignore next */ []));
+    /** The minimised ones, in the order they were opened. */
+    minimized = computed(() => this.windows().filter((w) => w.minimized()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
+    register(w) {
+        this.windows.update((ws) => [...ws, w]);
+    }
+    unregister(w) {
+        this.windows.update((ws) => ws.filter((x) => x !== w));
+    }
+    /** Raise a window above the others; returns its new stacking offset. */
+    raise() {
+        return ++this.topZ;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Some work lives in a window beside the page: a VM console stays open while
+ * the operator browses. It can be moved, resized and minimised, and it comes
+ * back from the dock. A modal blocks the page and a drawer is pinned to an
+ * edge — neither is a window.
+ *
+ *   <strct-window [(open)]="open" [(minimized)]="min" heading="APP01" palette="dark">
+ *     <ng-container strctWindowTitleMeta><strct-badge status="success">Running</strct-badge></ng-container>
+ *     <ng-container strctWindowActions>…</ng-container>
+ *     …content…
+ *     <ng-container strctWindowStatus>…</ng-container>
+ *   </strct-window>
+ *   <strct-window-dock />
+ */
+class StrctWindow {
+    /** Whether the window exists on screen (two-way). */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Minimised to the dock (two-way). */
+    minimized = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []));
+    /** Filling the viewport — not browser fullscreen (two-way). */
+    maximized = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maximized" }] : /* istanbul ignore next */ []));
+    /** Position and size in px (two-way); null lets the window place itself. */
+    bounds = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /** The title-bar heading, and the window's accessible name. */
+    heading = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    /** Corner resize grips. */
+    resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minWidth = input(480, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    minHeight = input(320, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    /** `dark` / `light` force that scheme inside the window (a console is dark). */
+    palette = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "palette" }] : /* istanbul ignore next */ []));
+    /** What a click outside does. A window is not dismissed like a modal. */
+    closeOnOutside = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnOutside" }] : /* istanbul ignore next */ []));
+    /** The window's own strings. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** The accessible name of each resize grip. */
+    resizeLabel = input((corner) => `Resize (${corner})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizeLabel" }] : /* istanbul ignore next */ []));
+    /** The window was closed. */
+    closed = output();
+    CORNERS = ['nw', 'ne', 'sw', 'se'];
+    titleId = `strct-window-${++windowCounter}`;
+    L = computed(() => ({
+        ...WINDOW_LABELS,
+        ...this.labels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "L" }] : /* istanbul ignore next */ []));
+    service = inject(StrctWindowService);
+    doc = inject(DOCUMENT$1);
+    host = inject(ElementRef);
+    zOffset = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOffset" }] : /* istanbul ignore next */ []));
+    zIndex = computed(() => `calc(var(--z-window) + ${this.zOffset()})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** The palette in force outside, so `palette` only swaps the scheme. */
+    hostPalette = computed(() => this.doc.documentElement.getAttribute('data-palette') ?? 'arctic', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostPalette" }] : /* istanbul ignore next */ []));
+    /** Where the window is. Defaults to a slightly offset, comfortable box. */
+    fallback = signal({ x: 80, y: 80, width: 720, height: 460 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+    rect = computed(() => this.bounds() ?? this.fallback(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []));
+    restoreTo = null;
+    constructor() {
+        this.service.register(this);
+        effect(() => {
+            if (this.open() && !this.minimized()) {
+                this.restoreTo ??= saveFocusedElement();
+                this.zOffset.set(this.service.raise());
+                queueMicrotask(() => this.focusTitle());
+            }
+        });
+    }
+    /** Raise this window above the others when it is clicked. */
+    focusWindow() {
+        this.zOffset.set(this.service.raise());
+    }
+    focusTitle() {
+        this.host.nativeElement.querySelector('.strct-window__title')?.focus();
+    }
+    minimize() {
+        if (!this.open())
+            return;
+        this.minimized.set(true);
+        restoreFocus(this.restoreTo);
+    }
+    /** Bring a minimised window back and raise it. */
+    restore() {
+        this.minimized.set(false);
+        this.open.set(true);
+    }
+    close() {
+        this.open.set(false);
+        this.minimized.set(false);
+        this.closed.emit();
+        restoreFocus(this.restoreTo);
+        this.restoreTo = null;
+    }
+    // ── Moving ───────────────────────────────────────────────────────────────
+    dragFrom = null;
+    onMove = (e) => this.dragMove(e);
+    onUp = () => this.dragEnd();
+    onDragStart(event) {
+        if (event.target.closest('button'))
+            return;
+        if (this.maximized())
+            return;
+        event.preventDefault();
+        this.dragFrom = { x: event.clientX, y: event.clientY, rect: this.rect() };
+        this.doc.addEventListener('pointermove', this.onMove);
+        this.doc.addEventListener('pointerup', this.onUp);
+        this.doc.addEventListener('pointercancel', this.onUp);
+    }
+    dragMove(event) {
+        const from = this.dragFrom;
+        if (!from)
+            return;
+        this.setRect({
+            ...from.rect,
+            x: from.rect.x + (event.clientX - from.x),
+            y: from.rect.y + (event.clientY - from.y),
+        });
+    }
+    dragEnd() {
+        this.dragFrom = null;
+        this.doc.removeEventListener('pointermove', this.onMove);
+        this.doc.removeEventListener('pointerup', this.onUp);
+        this.doc.removeEventListener('pointercancel', this.onUp);
+    }
+    /** Alt+arrows move the window; Escape minimises it. */
+    onTitleKeydown(event) {
+        if (!event.altKey)
+            return;
+        const step = event.shiftKey ? 64 : 16;
+        const r = this.rect();
+        const moves = {
+            ArrowLeft: { x: r.x - step },
+            ArrowRight: { x: r.x + step },
+            ArrowUp: { y: r.y - step },
+            ArrowDown: { y: r.y + step },
+        };
+        const move = moves[event.key];
+        if (!move)
+            return;
+        event.preventDefault();
+        this.setRect({ ...r, ...move });
+    }
+    // ── Resizing ─────────────────────────────────────────────────────────────
+    resizeFrom = null;
+    onResizeMove = (e) => this.resizeMove(e);
+    onResizeUp = () => this.resizeEnd();
+    onResizeStart(event, corner) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.resizeFrom = { x: event.clientX, y: event.clientY, rect: this.rect(), corner };
+        this.doc.addEventListener('pointermove', this.onResizeMove);
+        this.doc.addEventListener('pointerup', this.onResizeUp);
+        this.doc.addEventListener('pointercancel', this.onResizeUp);
+    }
+    resizeMove(event) {
+        const from = this.resizeFrom;
+        if (!from)
+            return;
+        this.setRect(this.resized(from.rect, from.corner, event.clientX - from.x, event.clientY - from.y));
+    }
+    resizeEnd() {
+        this.resizeFrom = null;
+        this.doc.removeEventListener('pointermove', this.onResizeMove);
+        this.doc.removeEventListener('pointerup', this.onResizeUp);
+        this.doc.removeEventListener('pointercancel', this.onResizeUp);
+    }
+    /** Arrows resize by 16px, Shift+arrows by 64px. */
+    onResizeKeydown(event, corner) {
+        const step = event.shiftKey ? 64 : 16;
+        const deltas = {
+            ArrowLeft: [-step, 0],
+            ArrowRight: [step, 0],
+            ArrowUp: [0, -step],
+            ArrowDown: [0, step],
+        };
+        const delta = deltas[event.key];
+        if (!delta)
+            return;
+        event.preventDefault();
+        this.setRect(this.resized(this.rect(), corner, delta[0], delta[1]));
+    }
+    /**
+     * A corner drag moves the two edges it touches: the west and north edges move
+     * the window's origin as well as its size, so the opposite corner stays put.
+     */
+    resized(rect, corner, dx, dy) {
+        const west = corner.includes('w');
+        const north = corner.includes('n');
+        const width = Math.max(this.minWidth(), rect.width + (west ? -dx : dx));
+        const height = Math.max(this.minHeight(), rect.height + (north ? -dy : dy));
+        return {
+            x: west ? rect.x + (rect.width - width) : rect.x,
+            y: north ? rect.y + (rect.height - height) : rect.y,
+            width,
+            height,
+        };
+    }
+    setRect(next) {
+        if (this.bounds())
+            this.bounds.set(next);
+        else
+            this.fallback.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindow, isStandalone: true, selector: "strct-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutside: { classPropertyName: "closeOnOutside", publicName: "closeOnOutside", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", minimized: "minimizedChange", maximized: "maximizedChange", bounds: "boundsChange", closed: "closed" }, host: { classAttribute: "strct-window" }, ngImport: i0, template: `
+    @if (open() && !minimized()) {
+      <div
+        class="strct-window__frame"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-palette]="palette() === 'inherit' ? null : hostPalette()"
+        [attr.data-theme]="palette() === 'inherit' ? null : palette()"
+        [style.z-index]="zIndex()"
+        [style.left.px]="maximized() ? null : rect().x"
+        [style.top.px]="maximized() ? null : rect().y"
+        [style.width.px]="maximized() ? null : rect().width"
+        [style.height.px]="maximized() ? null : rect().height"
+        [class.strct-window__frame--max]="maximized()"
+        (pointerdown)="focusWindow()"
+        (keydown.escape)="minimize()"
+      >
+        <!-- The title bar moves the window: by pointer, or with Alt+arrows. -->
+        <div
+          class="strct-window__title"
+          tabindex="0"
+          [attr.aria-label]="heading()"
+          (pointerdown)="onDragStart($event)"
+          (keydown)="onTitleKeydown($event)"
+          (dblclick)="maximized.set(!maximized())"
+        >
+          <span class="strct-window__heading" [id]="titleId">{{ heading() }}</span>
+          <span class="strct-window__meta"><ng-content select="[strctWindowTitleMeta]" /></span>
+          <span class="strct-window__actions"><ng-content select="[strctWindowActions]" /></span>
+          <span class="strct-window__controls">
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="L().minimize"
+              (click)="minimize()"
+            >
+              <strct-icon strictName="minus" [size]="14" />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="maximized() ? L().restore : L().maximize"
+              (click)="maximized.set(!maximized())"
+            >
+              <strct-icon
+                [strictName]="maximized() ? 'exitFullscreen' : 'fullscreen'"
+                [size]="13"
+              />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn strct-window__btn--close"
+              [attr.aria-label]="L().close"
+              (click)="close()"
+            >
+              <strct-icon strictName="close" [size]="14" />
+            </button>
+          </span>
+        </div>
+
+        <div class="strct-window__body"><ng-content /></div>
+        <div class="strct-window__status"><ng-content select="[strctWindowStatus]" /></div>
+
+        @if (resizable() && !maximized()) {
+          <!-- Focusable, so a window can be resized without a pointer. -->
+          @for (corner of CORNERS; track corner) {
+            <button
+              type="button"
+              class="strct-window__rz strct-window__rz--{{ corner }}"
+              [attr.aria-label]="resizeLabel()(corner)"
+              (pointerdown)="onResizeStart($event, corner)"
+              (keydown)="onResizeKeydown($event, corner)"
+            ></button>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\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: StrctWindow, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-window', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    @if (open() && !minimized()) {
+      <div
+        class="strct-window__frame"
+        role="dialog"
+        aria-modal="false"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-palette]="palette() === 'inherit' ? null : hostPalette()"
+        [attr.data-theme]="palette() === 'inherit' ? null : palette()"
+        [style.z-index]="zIndex()"
+        [style.left.px]="maximized() ? null : rect().x"
+        [style.top.px]="maximized() ? null : rect().y"
+        [style.width.px]="maximized() ? null : rect().width"
+        [style.height.px]="maximized() ? null : rect().height"
+        [class.strct-window__frame--max]="maximized()"
+        (pointerdown)="focusWindow()"
+        (keydown.escape)="minimize()"
+      >
+        <!-- The title bar moves the window: by pointer, or with Alt+arrows. -->
+        <div
+          class="strct-window__title"
+          tabindex="0"
+          [attr.aria-label]="heading()"
+          (pointerdown)="onDragStart($event)"
+          (keydown)="onTitleKeydown($event)"
+          (dblclick)="maximized.set(!maximized())"
+        >
+          <span class="strct-window__heading" [id]="titleId">{{ heading() }}</span>
+          <span class="strct-window__meta"><ng-content select="[strctWindowTitleMeta]" /></span>
+          <span class="strct-window__actions"><ng-content select="[strctWindowActions]" /></span>
+          <span class="strct-window__controls">
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="L().minimize"
+              (click)="minimize()"
+            >
+              <strct-icon strictName="minus" [size]="14" />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn"
+              [attr.aria-label]="maximized() ? L().restore : L().maximize"
+              (click)="maximized.set(!maximized())"
+            >
+              <strct-icon
+                [strictName]="maximized() ? 'exitFullscreen' : 'fullscreen'"
+                [size]="13"
+              />
+            </button>
+            <button
+              type="button"
+              class="strct-window__btn strct-window__btn--close"
+              [attr.aria-label]="L().close"
+              (click)="close()"
+            >
+              <strct-icon strictName="close" [size]="14" />
+            </button>
+          </span>
+        </div>
+
+        <div class="strct-window__body"><ng-content /></div>
+        <div class="strct-window__status"><ng-content select="[strctWindowStatus]" /></div>
+
+        @if (resizable() && !maximized()) {
+          <!-- Focusable, so a window can be resized without a pointer. -->
+          @for (corner of CORNERS; track corner) {
+            <button
+              type="button"
+              class="strct-window__rz strct-window__rz--{{ corner }}"
+              [attr.aria-label]="resizeLabel()(corner)"
+              (pointerdown)="onResizeStart($event, corner)"
+              (keydown)="onResizeKeydown($event, corner)"
+            ></button>
+          }
+        }
+      </div>
+    }
+  `, host: { class: 'strct-window' }, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }, { type: i0.Output, args: ["minimizedChange"] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: false }] }, { type: i0.Output, args: ["boundsChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], closeOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutside", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+/**
+ * Where minimised windows wait. Put it in a toolbar or a status bar; each entry
+ * restores its window, and its × closes it.
+ */
+class StrctWindowDock {
+    service = inject(StrctWindowService);
+    /** The dock's accessible name. */
+    label = input('Minimized windows', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The name of each chip's close button. */
+    closeLabel = input((heading) => `Close ${heading}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDock, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindowDock, isStandalone: true, selector: "strct-window-dock", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()" }, classAttribute: "strct-windock" }, ngImport: i0, template: `
+    @for (w of service.minimized(); track w) {
+      <span class="strct-windock__chip">
+        <button type="button" class="strct-windock__open" (click)="w.restore()">
+          {{ w.heading() }}
+        </button>
+        <button
+          type="button"
+          class="strct-windock__close"
+          [attr.aria-label]="closeLabel()(w.heading())"
+          (click)="w.close()"
+        >
+          <strct-icon strictName="close" [size]="11" />
+        </button>
+      </span>
+    }
+  `, isInline: true, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\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: StrctWindowDock, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-window-dock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    @for (w of service.minimized(); track w) {
+      <span class="strct-windock__chip">
+        <button type="button" class="strct-windock__open" (click)="w.restore()">
+          {{ w.heading() }}
+        </button>
+        <button
+          type="button"
+          class="strct-windock__close"
+          [attr.aria-label]="closeLabel()(w.heading())"
+          (click)="w.close()"
+        >
+          <strct-icon strictName="close" [size]="11" />
+        </button>
+      </span>
+    }
+  `, host: {
+                        class: 'strct-windock',
+                        role: 'group',
+                        '[attr.aria-label]': 'label()',
+                    }, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
+
 /**
  * A value change, as one phrase: "v10.27 → v10.28". The old value is muted, the
  * arrow is the library's, the new one is emphasised — and assistive tech hears
@@ -25177,5 +25650,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map