@akcelik/strct 4.0.0 → 4.1.0

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, contentChild, viewChild, InjectionToken, untracked, Injector, viewChildren, TemplateRef, Renderer2, Pipe, PLATFORM_ID, afterRenderEffect } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, isDevMode, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, booleanAttribute, afterNextRender, Directive, model, output, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, DestroyRef, TemplateRef, contentChild, viewChild, InjectionToken, untracked, Injector, viewChildren, Renderer2, Pipe, PLATFORM_ID, afterRenderEffect } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -3344,6 +3344,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-tree{display:block}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"] }]
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], chevronAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronAriaLabel", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }], projectedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
 
+/**
+ * Dev-mode diagnostics for combinations a component accepts but cannot honour.
+ *
+ * Every message names what was ignored and what to do instead. Keyed: a
+ * condition warns once per page load, not once per change detection.
+ *
+ * Production cost: none, PROVIDED each call site is guarded INLINE with
+ *   if (typeof ngDevMode !== 'undefined' && ngDevMode) { … }
+ * Production builds define `ngDevMode` as false, and the minifier then drops
+ * the whole block — messages included. A helper function returning that same
+ * expression would NOT be folded across the call, so the check and its
+ * strings would ship; that is why no such helper exists here.
+ */
+const warned = new Set();
+function strctDevWarn(key, message) {
+    if (typeof ngDevMode === 'undefined' || !ngDevMode || warned.has(key))
+        return;
+    warned.add(key);
+    console.warn(message);
+}
+/** Test hook: forget which warnings have fired. Not part of the public API. */
+function resetStrctDevWarnings() {
+    warned.clear();
+}
+
 /**
  * Refcounted body scroll-lock shared across any number of simultaneously
  * open transient surfaces (modal, drawer …): the first lock hides body
@@ -3378,6 +3403,27 @@ function removeOpenModal(modal) {
 function isTopmostModal(modal) {
     return openModalStack[openModalStack.length - 1] === modal;
 }
+/**
+ * Lazily rendered modal body. Plain projected content is created by the PARENT
+ * with the parent's own view, so it is instantiated — and costs — even while
+ * the modal is closed. Content inside this template is created only while the
+ * modal is open, and destroyed when it closes (state does not survive a close):
+ *
+ *   <strct-modal [(open)]="show" title="Import hosts">
+ *     <ng-template strctModalContent>
+ *       <strct-datagrid [rows]="hosts" … />
+ *     </ng-template>
+ *   </strct-modal>
+ */
+class StrctModalContent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctModalContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctModalContent, isStandalone: true, selector: "[strctModalContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctModalContent, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctModalContent]' }]
+        }] });
 /**
  * Overlay dialog with two-way `open`:
  *   <strct-modal [(open)]="show" title="Confirm">
@@ -3396,7 +3442,8 @@ class StrctModal {
     /** Dialog title. */
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Size variant (fixed scale; defaults to `sm` = 480px). */
+    /** Size variant (fixed scale; defaults to `sm` = 480px). Ignored by
+     *  `chromeless`, which sizes from the wizard it hosts. */
     size = input('sm', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Hide the footer slot. */
@@ -3406,6 +3453,11 @@ class StrctModal {
      * content (a `flush` vertical wizard) is the dialog surface. `title` still
      * names the dialog for assistive tech; backdrop/Escape dismissal follow
      * `dismissible` as usual.
+     *
+     * The dialog's width comes from the wizard's geometry, not from `size`:
+     * rail + `--strct-wiz-content-min` (default 864px) [+ aside]. To change it,
+     * set that variable on this `strct-modal` or an ancestor — the dialog reads
+     * it on itself, so setting it on the `strct-wizard` inside does not reach it.
      */
     chromeless = input(false, { ...(ngDevMode ? { debugName: "chromeless" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Accessible label of the X close button (localizable). */
@@ -3431,6 +3483,22 @@ class StrctModal {
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Emitted when the alert is dismissed. */
     closed = output();
+    /** Lazily rendered body, if one is provided (see {@link StrctModalContent}). */
+    lazyContent = contentChild(StrctModalContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazyContent" }] : /* istanbul ignore next */ []));
+    // Dev mode only: `size` is accepted alongside `chromeless` but cannot apply.
+    sizeDiagnostic = typeof ngDevMode !== 'undefined' && ngDevMode
+        ? effect(() => {
+            const size = this.size();
+            if (this.chromeless() && size !== 'sm') {
+                strctDevWarn(`modal:chromeless-size:${size}`, `[strct-modal] size="${size}" has no effect with chromeless: a chromeless ` +
+                    `dialog sizes itself from the wizard it hosts (rail + --strct-wiz-content-min, ` +
+                    `default 864px). To change its width, set --strct-wiz-content-min on the ` +
+                    `strct-modal or an ancestor — on the strct-wizard alone it does not reach ` +
+                    `the dialog.`);
+            }
+        })
+        : null;
     titleId = `strct-modal-${++modalCounter}`;
     /** Element that had focus before the dialog opened, restored on close. */
     previousActive = null;
@@ -3573,7 +3641,7 @@ class StrctModal {
         (items[0] ?? this.dialog())?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctModal, isStandalone: true, selector: "strct-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, chromeless: { classPropertyName: "chromeless", publicName: "chromeless", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctModal, isStandalone: true, selector: "strct-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, chromeless: { classPropertyName: "chromeless", publicName: "chromeless", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "lazyContent", first: true, predicate: StrctModalContent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss target. No role/tabindex — keyboard users
            dismiss via Escape, and the focus trap makes the backdrop unreachable
@@ -3619,18 +3687,23 @@ class StrctModal {
               </button>
             </div>
           }
-          <div class="strct-modal__body"><ng-content /></div>
+          <div class="strct-modal__body">
+            <ng-content />
+            @if (lazyContent(); as lazy) {
+              <ng-container [ngTemplateOutlet]="lazy.template" />
+            }
+          </div>
           @if (!hideFooter() && !chromeless()) {
             <div class="strct-modal__foot"><ng-content select="[strctModalFooter]" /></div>
           }
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctModal, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StrctIcon], template: `
+            args: [{ selector: 'strct-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StrctIcon, NgTemplateOutlet], template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss target. No role/tabindex — keyboard users
            dismiss via Escape, and the focus trap makes the backdrop unreachable
@@ -3676,7 +3749,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
               </button>
             </div>
           }
-          <div class="strct-modal__body"><ng-content /></div>
+          <div class="strct-modal__body">
+            <ng-content />
+            @if (lazyContent(); as lazy) {
+              <ng-container [ngTemplateOutlet]="lazy.template" />
+            }
+          </div>
           @if (!hideFooter() && !chromeless()) {
             <div class="strct-modal__foot"><ng-content select="[strctModalFooter]" /></div>
           }
@@ -3686,7 +3764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
   `, host: {
                         '(document:keydown.escape)': 'onEscape()',
                     }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], chromeless: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeless", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], chromeless: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeless", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctModalContent), { isSignal: true }] }] } });
 
 /** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
 class StrctDrawerFooter {
@@ -4668,7 +4746,10 @@ class StrctWizard {
      * ~720px of component width — it never flips horizontal.
      *
      * The default can be flipped app-wide via `provideStrctWizardDefaults`;
-     * this input always wins when bound.
+     * this input always wins when bound. **Tests:** a spec that renders a
+     * component using `strct-wizard` must provide the same defaults the app
+     * does, or it renders the horizontal layout — a different DOM, no rail,
+     * no title.
      */
     vertical = input(this.defaults?.vertical ?? false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
@@ -4678,7 +4759,8 @@ class StrctWizard {
      * Size the host with width/height only; do not override its `display`.
      */
     flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Rail heading shown above the progress bar (vertical mode). */
+    /** Rail heading shown above the progress bar. Vertical mode only — the
+     *  horizontal layout has no title band (a dev-mode warning says so). */
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     /**
@@ -4730,6 +4812,8 @@ class StrctWizard {
     canAdvance = computed(() => this.steps()[this.current()]?.canAdvance() ?? true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canAdvance" }] : /* istanbul ignore next */ []));
     constructor() {
+        if (typeof ngDevMode !== 'undefined' && ngDevMode)
+            this.diagnose();
         effect(() => {
             const idx = this.current();
             this.steps().forEach((step, i) => step.setActive(i === idx));
@@ -4739,6 +4823,37 @@ class StrctWizard {
             });
         });
     }
+    /** Dev-mode warnings for inputs the current layout silently ignores. */
+    diagnose() {
+        if (!(typeof ngDevMode !== 'undefined' && ngDevMode))
+            return;
+        effect(() => {
+            const title = this.title();
+            if (title && !this.vertical()) {
+                strctDevWarn('wizard:horizontal-title', `[strct-wizard] title="${title}" is not rendered: only the vertical layout ` +
+                    `has a title band. Set \`vertical\` — or, if the app provides ` +
+                    `provideStrctWizardDefaults({ vertical: true }), provide it here too ` +
+                    `(a test that omits it renders the horizontal wizard).`);
+            }
+        });
+        // A chromeless dialog sizes itself from --strct-wiz-content-min read on the
+        // DIALOG; set on the wizard, it widens the grid but not the dialog.
+        const host = inject((ElementRef)).nativeElement;
+        afterNextRender(() => {
+            const dialog = host.closest('.strct-modal__dialog--chromeless');
+            if (!dialog)
+                return;
+            const prop = '--strct-wiz-content-min';
+            const own = getComputedStyle(host).getPropertyValue(prop).trim();
+            const outer = getComputedStyle(dialog).getPropertyValue(prop).trim();
+            if (own !== outer) {
+                strctDevWarn('wizard:content-min-scope', `[strct-wizard] ${prop} is ${own || '(unset)'} on the wizard but ` +
+                    `${outer || '(unset — default 864px)'} on its chromeless dialog. The dialog ` +
+                    `reads the variable on itself, so its width ignores the wizard's value. Set ` +
+                    `it on the strct-modal or an ancestor instead.`);
+            }
+        });
+    }
     next() {
         if (!this.isLast() && this.canAdvance()) {
             this.current.update((i) => i + 1);
@@ -10492,7 +10607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Per-column cell template for `strct-table` / `strct-datagrid`. The column key
  * is the directive value; the row, value and column are the template context:
  *
- *   <ng-template strctCell="status" let-row let-value="value">
+ *   <ng-template strctCell="status" let-row let-value="value">   (let-row="row" also works)
  *     <strct-badge [status]="row['success'] ? 'success' : 'critical'">{{ value }}</strct-badge>
  *   </ng-template>
  */
@@ -10576,6 +10691,7 @@ class StrctTable {
                       [ngTemplateOutlet]="tpl"
                       [ngTemplateOutletContext]="{
                         $implicit: row,
+                        row,
                         value: row[col.key],
                         column: col,
                       }"
@@ -10632,6 +10748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                       [ngTemplateOutlet]="tpl"
                       [ngTemplateOutletContext]="{
                         $implicit: row,
+                        row,
                         value: row[col.key],
                         column: col,
                       }"
@@ -10809,7 +10926,7 @@ const UTIL_W = { detail: 36, expand: 36, sel: 40 };
 const STICKY_FALLBACK_W = 120;
 /**
  * Marks the expandable-row detail template. The row is the template's implicit
- * context: `<ng-template strctRowDetail let-row> … {{ row['name'] }} … </ng-template>`.
+ * context (`let-row`, or `let-row="row"`): `<ng-template strctRowDetail let-row> … {{ row['name'] }} … </ng-template>`.
  */
 class StrctRowDetailDef {
     template = inject(TemplateRef);
@@ -11603,6 +11720,55 @@ class StrctDatagrid {
     somePageSelected = computed(() => !this.allPageSelected() &&
         this.selectionRows().some((r) => this.selected().has(this.idOf(r))), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "somePageSelected" }] : /* istanbul ignore next */ []));
+    /** Dev-mode check that row identities can do their job (see util/dev-warn). */
+    diagnoseIdentity(rowId, rows, init, lazy) {
+        if (!(typeof ngDevMode !== 'undefined' && ngDevMode))
+            return;
+        if (rows.length === 0)
+            return;
+        const label = rowId == null ? '' : typeof rowId === 'function' ? 'rowId (function)' : `rowId="${rowId}"`;
+        if (rowId != null) {
+            const seen = new Set();
+            const dupes = new Set();
+            let unresolved = 0;
+            for (const r of rows) {
+                const raw = typeof rowId === 'function' ? rowId(r) : r[rowId];
+                if (raw == null)
+                    unresolved++;
+                else if (seen.has(raw))
+                    dupes.add(raw);
+                else
+                    seen.add(raw);
+            }
+            if (dupes.size > 0) {
+                const sample = [...dupes]
+                    .slice(0, 3)
+                    .map((v) => JSON.stringify(v))
+                    .join(', ');
+                strctDevWarn(`datagrid:dupe:${label}`, `[strct-datagrid] ${label} resolves to the same value for more than one row ` +
+                    `(${sample}). Selection and expansion key on this value, so those rows ` +
+                    `will behave as one. Give each row a distinct value, or drop rowId to key ` +
+                    `on the row object.`);
+            }
+            if (unresolved > 0) {
+                strctDevWarn(`datagrid:unresolved:${label}`, `[strct-datagrid] ${label} does not resolve for ${unresolved} of ${rows.length} ` +
+                    `rows. Those rows fall back to object identity, so their selection and ` +
+                    `expansion will not survive a data refresh. Check the field name, or give ` +
+                    `every row a value.`);
+            }
+        }
+        // Lazy mode seeds ids for rows on other pages, so a miss there is normal.
+        if (!lazy && init && init.length > 0) {
+            const ids = new Set(rows.map((r) => this.idOf(r)));
+            if (!init.some((v) => ids.has(v))) {
+                strctDevWarn(`datagrid:init:${label}`, `[strct-datagrid] initialSelection has ${init.length} value(s), none of which ` +
+                    (rowId == null
+                        ? `is one of the rows — with no rowId, the values must be the row objects themselves. `
+                        : `matches any row's ${label}. `) +
+                    `The pre-selection will be empty.`);
+            }
+        }
+    }
     /** Resolve a row's stable identity: its `rowId` value, or the row object
      *  itself when there is no `rowId` or it resolves to null/undefined. */
     idOf(row) {
@@ -11654,6 +11820,17 @@ class StrctDatagrid {
                 return;
             untracked(() => this.selected.set(new Set(init)));
         });
+        // Dev mode only: say so when rowId or initialSelection cannot do what they
+        // were given to do. In production the effect is never registered.
+        if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+            effect(() => {
+                const rowId = this.rowId();
+                const rows = this.rows();
+                const init = this.initialSelection();
+                const lazy = this.lazy();
+                untracked(() => this.diagnoseIdentity(rowId, rows, init, lazy));
+            });
+        }
         // Server-side mode: announce what to load whenever page / sort / pageSize
         // change (and once on init, so the consumer fetches the first page).
         effect(() => {
@@ -12340,6 +12517,7 @@ class StrctDatagrid {
                             [ngTemplateOutlet]="tpl"
                             [ngTemplateOutletContext]="{
                               $implicit: row,
+                              row,
                               value: row[col.key],
                               column: col,
                             }"
@@ -12368,7 +12546,7 @@ class StrctDatagrid {
                         <div class="strct-dg__detail">
                           <ng-container
                             [ngTemplateOutlet]="detailDef()!.template"
-                            [ngTemplateOutletContext]="{ $implicit: row }"
+                            [ngTemplateOutletContext]="{ $implicit: row, row }"
                           />
                         </div>
                       </td>
@@ -12406,7 +12584,7 @@ class StrctDatagrid {
           <div class="strct-dg__pane-body">
             <ng-container
               [ngTemplateOutlet]="detailDef()!.template"
-              [ngTemplateOutletContext]="{ $implicit: activeRow() }"
+              [ngTemplateOutletContext]="{ $implicit: activeRow(), row: activeRow() }"
             />
           </div>
         </aside>
@@ -12829,6 +13007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                             [ngTemplateOutlet]="tpl"
                             [ngTemplateOutletContext]="{
                               $implicit: row,
+                              row,
                               value: row[col.key],
                               column: col,
                             }"
@@ -12857,7 +13036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         <div class="strct-dg__detail">
                           <ng-container
                             [ngTemplateOutlet]="detailDef()!.template"
-                            [ngTemplateOutletContext]="{ $implicit: row }"
+                            [ngTemplateOutletContext]="{ $implicit: row, row }"
                           />
                         </div>
                       </td>
@@ -12895,7 +13074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
           <div class="strct-dg__pane-body">
             <ng-container
               [ngTemplateOutlet]="detailDef()!.template"
-              [ngTemplateOutletContext]="{ $implicit: activeRow() }"
+              [ngTemplateOutletContext]="{ $implicit: activeRow(), row: activeRow() }"
             />
           </div>
         </aside>
@@ -21573,5 +21752,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, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, 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, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, 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 };
 //# sourceMappingURL=akcelik-strct.mjs.map