@akcelik/strct 0.8.1 → 0.9.1

package/fesm2022/akcelik-strct.mjs

@@ -2076,7 +2076,7 @@ class StrctTreeNode {
         }
       </div>
     }
-  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"], dependencies: [{ kind: "component", type: StrctTreeNode, selector: "strct-tree-node", inputs: ["node", "label", "icon", "badge", "active", "expanded", "nodeMenu"], outputs: ["expandedChange", "activated", "nodeActivated", "nodeMenuSelect"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: StrctContextMenuTrigger, selector: "[strctContextMenu]", inputs: ["strctContextMenu", "strctContextMenuData"], outputs: ["menuSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctTreeNode, decorators: [{
             type: Component,
@@ -2138,7 +2138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }
       </div>
     }
-  `, host: { class: 'strct-tnode' }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"] }]
+  `, host: { class: 'strct-tnode' }, styles: [".strct-tnode{display:block}.strct-tnode__row{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-tnode__row:hover{background:var(--bg-3)}.strct-tnode__row--active{background:var(--acc-m);color:var(--acc);font-weight:500}.strct-tnode__row--active .strct-tnode__icon,.strct-tnode__row--active .strct-tnode__chevron{color:var(--acc)}.strct-tnode__chevron{display:inline-flex;color:var(--t3);transition:transform .15s ease;width:14px;justify-content:center}.strct-tnode__chevron--open{transform:rotate(90deg)}.strct-tnode__spacer{width:14px;flex-shrink:0}.strct-tnode__icon{color:var(--t2);flex-shrink:0}.strct-tnode__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-tnode__children{margin-left:16px}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], childNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { isSignal: true }] }] } });
 /**
  * Root container for a tree. Either project `<strct-tree-node>` children, or
@@ -7211,6 +7211,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-gauge' }, styles: [".strct-gauge{display:inline-block}.strct-gauge__wrap{position:relative}.strct-gauge__track{stroke:var(--bg-3)}.strct-gauge__value{transition:stroke-dasharray .4s ease}.strct-gauge__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.strct-gauge__num{font-size:22px;font-weight:600;color:var(--t1);line-height:1}.strct-gauge__pct{font-size:12px;color:var(--t2);margin-left:1px}.strct-gauge__label{font-size:12px;color:var(--t2);margin-top:3px}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }] } });
 
+/**
+ * Dense KPI tile: a label, a large value (+ unit), an optional change indicator
+ * and an optional inline sparkline. Built for at-a-glance dashboards.
+ *
+ *   <strct-metric-tile label="CPU" [value]="62" unit="%" icon="cpu"
+ *                      status="warning" [delta]="8" [data]="cpuTrend" />
+ */
+class StrctMetricTile {
+    /** Small caption above the value. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** The headline value. */
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Unit shown after the value (e.g. `%`, `GB`). */
+    unit = input('', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    /** Optional leading icon name. */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Tints the value (defaults to neutral primary text). */
+    status = input('neutral', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Change indicator; sign drives the arrow + colour. Null hides it. */
+    delta = input(null, ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
+    /** Suffix for the delta number. */
+    deltaSuffix = input('%', ...(ngDevMode ? [{ debugName: "deltaSuffix" }] : /* istanbul ignore next */ []));
+    /** Treat a positive delta as bad (e.g. error rate, latency). */
+    invertDelta = input(false, { ...(ngDevMode ? { debugName: "invertDelta" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Small sub-text under the value (e.g. "of 256 GB"). */
+    caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** Sparkline series; empty hides the chart. */
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    hasDelta = computed(() => this.delta() !== null, ...(ngDevMode ? [{ debugName: "hasDelta" }] : /* istanbul ignore next */ []));
+    absDelta = computed(() => Math.abs(this.delta() ?? 0), ...(ngDevMode ? [{ debugName: "absDelta" }] : /* istanbul ignore next */ []));
+    deltaTone = computed(() => {
+        const d = this.delta() ?? 0;
+        if (d === 0)
+            return 'flat';
+        const good = this.invertDelta() ? d < 0 : d > 0;
+        return good ? 'up' : 'down';
+    }, ...(ngDevMode ? [{ debugName: "deltaTone" }] : /* istanbul ignore next */ []));
+    sparkStatus = computed(() => {
+        const s = this.status();
+        return s === 'neutral' ? 'accent' : s;
+    }, ...(ngDevMode ? [{ debugName: "sparkStatus" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMetricTile, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctMetricTile, isStandalone: true, selector: "strct-metric-tile", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaSuffix: { classPropertyName: "deltaSuffix", publicName: "deltaSuffix", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-mt" }, ngImport: i0, template: `
+    <div class="strct-mt__top">
+      @if (icon()) {
+        <span class="strct-mt__icon"><strct-icon [name]="icon()" [size]="14" /></span>
+      }
+      <span class="strct-mt__label">{{ label() }}</span>
+      @if (hasDelta()) {
+        <span class="strct-mt__delta strct-mt__delta--{{ deltaTone() }}">
+          <strct-icon
+            [name]="delta()! >= 0 ? 'arrowUp' : 'arrowDown'"
+            [size]="11"
+            [strokeWidth]="2"
+          />
+          {{ absDelta() }}{{ deltaSuffix() }}
+        </span>
+      }
+    </div>
+
+    <div class="strct-mt__value strct-mt__value--{{ status() }}">
+      {{ value() }}
+      @if (unit()) {
+        <span class="strct-mt__unit">{{ unit() }}</span>
+      }
+    </div>
+
+    @if (caption()) {
+      <div class="strct-mt__caption">{{ caption() }}</div>
+    }
+
+    @if (data().length) {
+      <div class="strct-mt__spark">
+        <strct-sparkline [data]="data()" [status]="sparkStatus()" area [height]="28" />
+      </div>
+    }
+  `, isInline: true, styles: [".strct-mt{display:flex;flex-direction:column;gap:6px;padding:13px 15px;border:1px solid var(--b2);border-radius:10px;background:var(--bg-1);min-width:0}.strct-mt__top{display:flex;align-items:center;gap:7px}.strct-mt__icon{display:inline-flex;color:var(--t3);flex-shrink:0}.strct-mt__label{font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-mt__delta{display:inline-flex;align-items:center;gap:2px;margin-left:auto;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.strct-mt__delta--up{color:var(--success)}.strct-mt__delta--down{color:var(--critical)}.strct-mt__delta--flat{color:var(--t3)}.strct-mt__value{display:flex;align-items:baseline;gap:4px;font-size:26px;font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:1.1}.strct-mt__value--accent{color:var(--acc)}.strct-mt__value--success{color:var(--success)}.strct-mt__value--warning{color:var(--warning)}.strct-mt__value--critical{color:var(--critical)}.strct-mt__unit{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}.strct-mt__caption{font-size:12px;color:var(--t3)}.strct-mt__spark{margin-top:2px;line-height:0}.strct-mt__spark strct-sparkline,.strct-mt__spark .strct-spark__svg{width:100%}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "component", type: StrctSparkline, selector: "strct-sparkline", inputs: ["data", "status", "area", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctMetricTile, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-metric-tile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctSparkline], template: `
+    <div class="strct-mt__top">
+      @if (icon()) {
+        <span class="strct-mt__icon"><strct-icon [name]="icon()" [size]="14" /></span>
+      }
+      <span class="strct-mt__label">{{ label() }}</span>
+      @if (hasDelta()) {
+        <span class="strct-mt__delta strct-mt__delta--{{ deltaTone() }}">
+          <strct-icon
+            [name]="delta()! >= 0 ? 'arrowUp' : 'arrowDown'"
+            [size]="11"
+            [strokeWidth]="2"
+          />
+          {{ absDelta() }}{{ deltaSuffix() }}
+        </span>
+      }
+    </div>
+
+    <div class="strct-mt__value strct-mt__value--{{ status() }}">
+      {{ value() }}
+      @if (unit()) {
+        <span class="strct-mt__unit">{{ unit() }}</span>
+      }
+    </div>
+
+    @if (caption()) {
+      <div class="strct-mt__caption">{{ caption() }}</div>
+    }
+
+    @if (data().length) {
+      <div class="strct-mt__spark">
+        <strct-sparkline [data]="data()" [status]="sparkStatus()" area [height]="28" />
+      </div>
+    }
+  `, host: { class: 'strct-mt' }, styles: [".strct-mt{display:flex;flex-direction:column;gap:6px;padding:13px 15px;border:1px solid var(--b2);border-radius:10px;background:var(--bg-1);min-width:0}.strct-mt__top{display:flex;align-items:center;gap:7px}.strct-mt__icon{display:inline-flex;color:var(--t3);flex-shrink:0}.strct-mt__label{font-size:12px;font-weight:500;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-mt__delta{display:inline-flex;align-items:center;gap:2px;margin-left:auto;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}.strct-mt__delta--up{color:var(--success)}.strct-mt__delta--down{color:var(--critical)}.strct-mt__delta--flat{color:var(--t3)}.strct-mt__value{display:flex;align-items:baseline;gap:4px;font-size:26px;font-weight:650;letter-spacing:-.01em;color:var(--t1);line-height:1.1}.strct-mt__value--accent{color:var(--acc)}.strct-mt__value--success{color:var(--success)}.strct-mt__value--warning{color:var(--warning)}.strct-mt__value--critical{color:var(--critical)}.strct-mt__unit{font-size:14px;font-weight:500;color:var(--t3);letter-spacing:0}.strct-mt__caption{font-size:12px;color:var(--t3)}.strct-mt__spark{margin-top:2px;line-height:0}.strct-mt__spark strct-sparkline,.strct-mt__spark .strct-spark__svg{width:100%}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaSuffix", required: false }] }], invertDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "invertDelta", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
 /** Inline contextual banner. `<strct-alert type="warning">…</strct-alert>`. */
 class StrctAlert {
     /** Visual type / variant. */
@@ -7570,6 +7687,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, styles: [".strct-toasts{position:fixed;top:var(--space-4);right:var(--space-4);z-index:1200;display:flex;flex-direction:column;gap:var(--space-2);max-width:360px;pointer-events:none}.strct-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-left:3px solid var(--acc);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-toast-in .16s ease}.strct-toast strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-toast__msg{flex:1}.strct-toast__close{flex-shrink:0;display:inline-flex;padding:2px;margin:-2px -2px 0 0;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:4px}.strct-toast__close:hover{color:var(--t1);background:var(--bg-3)}.strct-toast--success{border-left-color:var(--success)}.strct-toast--success strct-icon{color:var(--success)}.strct-toast--warning{border-left-color:var(--warning)}.strct-toast--warning strct-icon{color:var(--warning)}.strct-toast--critical{border-left-color:var(--critical)}.strct-toast--critical strct-icon{color:var(--critical)}@keyframes strct-toast-in{0%{opacity:0;transform:translate(16px)}}\n"] }]
         }] });
 
+const VARIANTS = {
+    empty: { icon: 'folder', tone: 'neutral' },
+    denied: { icon: 'lock', tone: 'warning' },
+    error: { icon: 'warning', tone: 'critical' },
+    notfound: { icon: 'search', tone: 'neutral' },
+};
+/**
+ * A centered empty / permission / error state — an icon, a title, an optional
+ * description and a slot for call-to-action buttons. Project actions as children.
+ *
+ *   <strct-empty-state variant="denied" title="Insufficient privileges"
+ *                     description="You don't have access to this cluster.">
+ *     <button strct-button variant="primary">Request access</button>
+ *   </strct-empty-state>
+ */
+class StrctEmptyState {
+    /** Preset that supplies a default icon + tone. */
+    variant = input('empty', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Override the preset icon. */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Override the preset tone (neutral / warning / critical / accent). */
+    tone = input('', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    resolvedIcon = computed(() => this.icon() || VARIANTS[this.variant()].icon, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+    toneClass = computed(() => this.tone() || VARIANTS[this.variant()].tone, ...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctEmptyState, isStandalone: true, selector: "strct-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-empty" }, ngImport: i0, template: `
+    <span class="strct-empty__icon strct-empty__icon--{{ toneClass() }}">
+      <strct-icon [name]="resolvedIcon()" [size]="26" [strokeWidth]="1.4" />
+    </span>
+    <h3 class="strct-empty__title">{{ title() }}</h3>
+    @if (description()) {
+      <p class="strct-empty__desc">{{ description() }}</p>
+    }
+    <div class="strct-empty__actions"><ng-content /></div>
+  `, isInline: true, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctEmptyState, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <span class="strct-empty__icon strct-empty__icon--{{ toneClass() }}">
+      <strct-icon [name]="resolvedIcon()" [size]="26" [strokeWidth]="1.4" />
+    </span>
+    <h3 class="strct-empty__title">{{ title() }}</h3>
+    @if (description()) {
+      <p class="strct-empty__desc">{{ description() }}</p>
+    }
+    <div class="strct-empty__actions"><ng-content /></div>
+  `, host: { class: 'strct-empty' }, styles: [".strct-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 24px}.strct-empty__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;margin-bottom:2px}.strct-empty__icon--neutral{background:var(--bg-3);color:var(--t2)}.strct-empty__icon--warning{background:var(--warning-bg);color:var(--warning)}.strct-empty__icon--critical{background:var(--critical-bg);color:var(--critical)}.strct-empty__icon--accent{background:var(--acc-m);color:var(--acc)}.strct-empty__title{margin:0;font-size:15px;font-weight:600;color:var(--t1)}.strct-empty__desc{margin:0;max-width:360px;font-size:13px;line-height:1.5;color:var(--t3)}.strct-empty__actions{display:flex;align-items:center;gap:8px;margin-top:6px}.strct-empty__actions:empty{display:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });
+
 /**
  * Public API surface of the strct UI library.
  */
@@ -7579,5 +7748,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
 //# sourceMappingURL=akcelik-strct.mjs.map