@akcelik/strct 0.6.0 → 0.7.1

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, DestroyRef, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, model, output, booleanAttribute, HostListener, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, DestroyRef, contentChild, forwardRef, TemplateRef, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -129,7 +129,7 @@ const STRCT_ICONS = {
     plus: '<path d="M8 3v10M3 8h10"/>',
     minus: '<path d="M3 8h10"/>',
     pencil: '<path d="M11.5 2.5l2 2-8.5 8.5-3 .5.5-3z"/>',
-    trash: '<path d="M2.5 4.5h11M5.5 4.5v8.5a1 1 0 001 1h3a1 1 0 001-1V4.5M6.5 3h3"/>',
+    trash: '<path d="M3 4.5h10"/><path d="M6.3 4.5v-1a1 1 0 0 1 1-1h1.4a1 1 0 0 1 1 1v1"/><path d="M4.2 4.5L5 13.3a1 1 0 0 0 1 .9h4a1 1 0 0 0 1-.9L11.8 4.5"/><path d="M6.6 6.9v4.6M8 6.9v4.6M9.4 6.9v4.6"/>',
     refresh: '<path d="M13.5 7.5a5.5 5.5 0 11-2-5.2"/><path d="M13.5 2.5v3.5H10"/>',
     filter: '<path d="M2 3.5h12l-4.5 5.5v4.5h-3V9z"/>',
     settings: '<path d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"/><path d="M7.2 1.5h1.6l.3 1.8c.4.1.8.3 1.2.5l1.5-1.1 1.1 1.1-1.1 1.5c.2.4.4.8.5 1.2l1.8.3v1.6l-1.8.3c-.1.4-.3.8-.5 1.2l1.1 1.5-1.1 1.1-1.5-1.1c-.4.2-.8.4-1.2.5l-.3 1.8H7.2l-.3-1.8a5.4 5.4 0 01-1.2-.5l-1.5 1.1-1.1-1.1 1.1-1.5a5.4 5.4 0 01-.5-1.2l-1.8-.3V7.2l1.8-.3c.1-.4.3-.8.5-1.2L2.7 4.2l1.1-1.1 1.5 1.1c.4-.2.8-.4 1.2-.5z"/>',
@@ -793,6 +793,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     }, styles: [".strct-nav-item{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;cursor:pointer;color:var(--t2);transition:background .14s ease,color .14s ease}.strct-nav-item:hover{background:var(--bg-3);color:var(--t1)}.strct-nav-item--active{background:var(--acc-m);color:var(--acc)}.strct-nav-item:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
+/**
+ * Collapsible, data-driven primary navigation rail for an application shell.
+ * Each item is an icon + label + optional status badge; collapsing shrinks it to
+ * an icon-only rail (badges become dots, labels become tooltips).
+ *
+ *   <strct-rail [items]="navItems" [(activeId)]="section" [(collapsed)]="railOff"
+ *               (select)="go($event)" />
+ */
+class StrctRail {
+    /** Navigation entries. */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Currently-active item id (two-way). */
+    activeId = model(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Collapsed (icon-only) state (two-way). */
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Show the collapse toggle at the foot of the rail. */
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the nav landmark. */
+    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Emitted when an item is chosen. */
+    select = output();
+    pick(item) {
+        if (item.disabled)
+            return;
+        this.activeId.set(item.id);
+        this.select.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctRail, isStandalone: true, selector: "strct-rail", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeId: "activeIdChange", collapsed: "collapsedChange", select: "select" }, host: { properties: { "class.strct-rail--collapsed": "collapsed()" }, classAttribute: "strct-rail" }, ngImport: i0, template: `
+    <nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="strct-rail__item"
+          [class.strct-rail__item--active]="item.id === activeId()"
+          [disabled]="item.disabled"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          [attr.title]="collapsed() ? item.label : null"
+          (click)="pick(item)"
+        >
+          <strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
+          @if (!collapsed()) {
+            <span class="strct-rail__label">{{ item.label }}</span>
+          }
+          @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+            <span
+              class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
+              [class.strct-rail__badge--dot]="collapsed()"
+            >
+              @if (!collapsed()) {
+                {{ item.badge }}
+              }
+            </span>
+          }
+        </button>
+      }
+    </nav>
+
+    @if (collapsible()) {
+      <button
+        type="button"
+        class="strct-rail__toggle"
+        [attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'"
+        [attr.aria-expanded]="!collapsed()"
+        (click)="collapsed.set(!collapsed())"
+      >
+        <strct-icon class="strct-rail__toggle-icon" name="chevronRight" [size]="16" />
+        @if (!collapsed()) {
+          <span class="strct-rail__toggle-label">Collapse</span>
+        }
+      </button>
+    }
+  `, isInline: true, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:8px;overflow-y:auto}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:left;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;right:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\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: StrctRail, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-rail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    <nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
+      @for (item of items(); track item.id) {
+        <button
+          type="button"
+          class="strct-rail__item"
+          [class.strct-rail__item--active]="item.id === activeId()"
+          [disabled]="item.disabled"
+          [attr.aria-current]="item.id === activeId() ? 'page' : null"
+          [attr.title]="collapsed() ? item.label : null"
+          (click)="pick(item)"
+        >
+          <strct-icon class="strct-rail__icon" [name]="item.icon" [size]="18" [strokeWidth]="1.6" />
+          @if (!collapsed()) {
+            <span class="strct-rail__label">{{ item.label }}</span>
+          }
+          @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
+            <span
+              class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
+              [class.strct-rail__badge--dot]="collapsed()"
+            >
+              @if (!collapsed()) {
+                {{ item.badge }}
+              }
+            </span>
+          }
+        </button>
+      }
+    </nav>
+
+    @if (collapsible()) {
+      <button
+        type="button"
+        class="strct-rail__toggle"
+        [attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'"
+        [attr.aria-expanded]="!collapsed()"
+        (click)="collapsed.set(!collapsed())"
+      >
+        <strct-icon class="strct-rail__toggle-icon" name="chevronRight" [size]="16" />
+        @if (!collapsed()) {
+          <span class="strct-rail__toggle-label">Collapse</span>
+        }
+      </button>
+    }
+  `, host: {
+                        class: 'strct-rail',
+                        '[class.strct-rail--collapsed]': 'collapsed()',
+                    }, styles: [".strct-rail{display:flex;flex-direction:column;width:232px;flex-shrink:0;background:var(--bg-1);border-right:1px solid var(--b2);overflow:hidden;transition:width .16s ease}.strct-rail--collapsed{width:60px}.strct-rail__nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:8px;overflow-y:auto}.strct-rail__item{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--t2);cursor:pointer;font-size:13.5px;font-family:var(--font);text-align:left;white-space:nowrap;transition:background .14s ease,color .14s ease}.strct-rail--collapsed .strct-rail__item{justify-content:center;padding:8px}.strct-rail__item:hover:not(:disabled){background:var(--bg-3);color:var(--t1)}.strct-rail__item--active{background:var(--acc-m);color:var(--acc)}.strct-rail__item--active .strct-rail__icon{color:var(--acc)}.strct-rail__item:disabled{opacity:.5;cursor:not-allowed}.strct-rail__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-rail__icon{flex-shrink:0}.strct-rail__label{flex:1;overflow:hidden;text-overflow:ellipsis}.strct-rail__badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1;border-radius:9px;font-variant-numeric:tabular-nums}.strct-rail__badge--dot{position:absolute;top:5px;right:7px;min-width:8px;width:8px;height:8px;padding:0;border-radius:50%}.strct-rail__badge--accent{background:var(--acc-m);color:var(--acc)}.strct-rail__badge--success{background:var(--success-bg);color:var(--success)}.strct-rail__badge--warning{background:var(--warning-bg);color:var(--warning)}.strct-rail__badge--critical{background:var(--critical-bg);color:var(--critical)}.strct-rail__badge--dot.strct-rail__badge--accent{background:var(--acc)}.strct-rail__badge--dot.strct-rail__badge--success{background:var(--success)}.strct-rail__badge--dot.strct-rail__badge--warning{background:var(--warning)}.strct-rail__badge--dot.strct-rail__badge--critical{background:var(--critical)}.strct-rail__toggle{display:flex;align-items:center;gap:10px;padding:9px 14px;border:0;border-top:1px solid var(--b1);background:transparent;color:var(--t3);cursor:pointer;font-size:12.5px;font-family:var(--font)}.strct-rail--collapsed .strct-rail__toggle{justify-content:center;padding:9px}.strct-rail__toggle:hover{color:var(--t1);background:var(--bg-3)}.strct-rail__toggle-icon{transition:transform .16s ease}.strct-rail:not(.strct-rail--collapsed) .strct-rail__toggle-icon{transform:rotate(180deg)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], select: [{ type: i0.Output, args: ["select"] }] } });
+
 /**
  * Authentication layout. Two modes:
  *  - default: a single centered column (drop a card + form inside).
@@ -2218,6 +2344,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                     }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-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-width:min(460px,calc(100vw - 32px));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(360px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(720px,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__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__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)}}\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 }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
+/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
+class StrctDrawerFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctDrawerFooter, isStandalone: true, selector: "[strctDrawerFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawerFooter, decorators: [{
+            type: Directive,
+            args: [{ selector: '[strctDrawerFooter]' }]
+        }] });
+/**
+ * Slide-out overlay panel anchored to an edge of the viewport — for inspecting
+ * or editing a record without losing the underlying table's scroll/selection.
+ *
+ *   <strct-drawer [(open)]="editing" side="end" title="Virtual machine">
+ *     … body …
+ *     <ng-container strctDrawerFooter>
+ *       <button strct-button (click)="editing.set(false)">Cancel</button>
+ *     </ng-container>
+ *   </strct-drawer>
+ */
+class StrctDrawer {
+    /** Open state (two-way). */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Edge to anchor to. Defaults to `end` (right in LTR). */
+    side = input('end', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** Extent along the sliding axis. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Header title. */
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Show the close button and allow backdrop/Esc dismissal. */
+    dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    footerDef = contentChild(StrctDrawerFooter, ...(ngDevMode ? [{ debugName: "footerDef" }] : /* istanbul ignore next */ []));
+    hasFooter = computed(() => !!this.footerDef(), ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    onBackdrop() {
+        if (this.dismissable())
+            this.close();
+    }
+    onEscape() {
+        if (this.dismissable())
+            this.close();
+    }
+    close() {
+        this.open.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctDrawer, isStandalone: true, selector: "strct-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { classAttribute: "strct-drawer-host" }, queries: [{ propertyName: "footerDef", first: true, predicate: StrctDrawerFooter, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open()) {
+      <div
+        class="strct-drawer__backdrop"
+        [class.strct-drawer__backdrop--bare]="!dismissable()"
+        (click)="onBackdrop()"
+        (keydown.escape)="onEscape()"
+        tabindex="-1"
+      ></div>
+      <aside
+        class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="title() || 'Panel'"
+      >
+        @if (title() || dismissable()) {
+          <header class="strct-drawer__head">
+            <span class="strct-drawer__title">{{ title() }}</span>
+            @if (dismissable()) {
+              <button
+                type="button"
+                class="strct-drawer__close"
+                aria-label="Close"
+                (click)="close()"
+              >
+                <strct-icon name="close" [size]="15" />
+              </button>
+            }
+          </header>
+        }
+        <div class="strct-drawer__body"><ng-content /></div>
+        @if (hasFooter()) {
+          <footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
+        }
+      </aside>
+    }
+  `, isInline: true, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:1100;background:#00000070;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.strct-drawer{position:fixed;z-index:1101;display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{left:0;border-right:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{right:0;border-left:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}\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: StrctDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-drawer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
+    @if (open()) {
+      <div
+        class="strct-drawer__backdrop"
+        [class.strct-drawer__backdrop--bare]="!dismissable()"
+        (click)="onBackdrop()"
+        (keydown.escape)="onEscape()"
+        tabindex="-1"
+      ></div>
+      <aside
+        class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="title() || 'Panel'"
+      >
+        @if (title() || dismissable()) {
+          <header class="strct-drawer__head">
+            <span class="strct-drawer__title">{{ title() }}</span>
+            @if (dismissable()) {
+              <button
+                type="button"
+                class="strct-drawer__close"
+                aria-label="Close"
+                (click)="close()"
+              >
+                <strct-icon name="close" [size]="15" />
+              </button>
+            }
+          </header>
+        }
+        <div class="strct-drawer__body"><ng-content /></div>
+        @if (hasFooter()) {
+          <footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
+        }
+      </aside>
+    }
+  `, host: { class: 'strct-drawer-host' }, styles: [".strct-drawer__backdrop{position:fixed;inset:0;z-index:1100;background:#00000070;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:strct-drawer-fade .16s ease}.strct-drawer__backdrop--bare{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.strct-drawer{position:fixed;z-index:1101;display:flex;flex-direction:column;background:var(--bg-1);box-shadow:var(--shh)}.strct-drawer--start,.strct-drawer--end{top:0;bottom:0;border-radius:0}.strct-drawer--start{left:0;border-right:1px solid var(--b2);animation:strct-drawer-in-start .18s ease}.strct-drawer--end{right:0;border-left:1px solid var(--b2);animation:strct-drawer-in-end .18s ease}.strct-drawer--top,.strct-drawer--bottom{left:0;right:0}.strct-drawer--top{top:0;border-bottom:1px solid var(--b2);animation:strct-drawer-in-top .18s ease}.strct-drawer--bottom{bottom:0;border-top:1px solid var(--b2);animation:strct-drawer-in-bottom .18s ease}.strct-drawer--start.strct-drawer--sm,.strct-drawer--end.strct-drawer--sm{width:300px}.strct-drawer--start.strct-drawer--md,.strct-drawer--end.strct-drawer--md{width:420px}.strct-drawer--start.strct-drawer--lg,.strct-drawer--end.strct-drawer--lg{width:600px}.strct-drawer--top.strct-drawer--sm,.strct-drawer--bottom.strct-drawer--sm{height:220px}.strct-drawer--top.strct-drawer--md,.strct-drawer--bottom.strct-drawer--md{height:340px}.strct-drawer--top.strct-drawer--lg,.strct-drawer--bottom.strct-drawer--lg{height:480px}.strct-drawer{max-width:100vw;max-height:100vh}.strct-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--b1);flex-shrink:0}.strct-drawer__title{font-size:15px;font-weight:600;color:var(--t1)}.strct-drawer__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer;transition:color .14s ease,background .14s ease}.strct-drawer__close:hover{color:var(--t1);background:var(--bg-3)}.strct-drawer__body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;font-size:13px;color:var(--t1)}.strct-drawer__foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--b1);flex-shrink:0}@keyframes strct-drawer-fade{0%{opacity:0}}@keyframes strct-drawer-in-start{0%{transform:translate(-100%)}}@keyframes strct-drawer-in-end{0%{transform:translate(100%)}}@keyframes strct-drawer-in-top{0%{transform:translateY(-100%)}}@keyframes strct-drawer-in-bottom{0%{transform:translateY(100%)}}\n"] }]
+        }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissable: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissable", required: false }] }], footerDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctDrawerFooter), { isSignal: true }] }] } });
+
 /**
  * Click-to-open menu:
  *   <strct-dropdown align="end">
@@ -7286,5 +7536,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, 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, 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, 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 };
 //# sourceMappingURL=akcelik-strct.mjs.map