@akcelik/strct 0.6.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive,
|
|
2
|
+
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';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -793,6 +793,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
793
793
|
}, 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"] }]
|
|
794
794
|
}], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
795
795
|
|
|
796
|
+
/**
|
|
797
|
+
* Collapsible, data-driven primary navigation rail for an application shell.
|
|
798
|
+
* Each item is an icon + label + optional status badge; collapsing shrinks it to
|
|
799
|
+
* an icon-only rail (badges become dots, labels become tooltips).
|
|
800
|
+
*
|
|
801
|
+
* <strct-rail [items]="navItems" [(activeId)]="section" [(collapsed)]="railOff"
|
|
802
|
+
* (select)="go($event)" />
|
|
803
|
+
*/
|
|
804
|
+
class StrctRail {
|
|
805
|
+
/** Navigation entries. */
|
|
806
|
+
items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
807
|
+
/** Currently-active item id (two-way). */
|
|
808
|
+
activeId = model(null, ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
|
|
809
|
+
/** Collapsed (icon-only) state (two-way). */
|
|
810
|
+
collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
811
|
+
/** Show the collapse toggle at the foot of the rail. */
|
|
812
|
+
collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
|
|
813
|
+
/** Accessible label for the nav landmark. */
|
|
814
|
+
ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
815
|
+
/** Emitted when an item is chosen. */
|
|
816
|
+
select = output();
|
|
817
|
+
pick(item) {
|
|
818
|
+
if (item.disabled)
|
|
819
|
+
return;
|
|
820
|
+
this.activeId.set(item.id);
|
|
821
|
+
this.select.emit(item);
|
|
822
|
+
}
|
|
823
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
824
|
+
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: `
|
|
825
|
+
<nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
|
|
826
|
+
@for (item of items(); track item.id) {
|
|
827
|
+
<button
|
|
828
|
+
type="button"
|
|
829
|
+
class="strct-rail__item"
|
|
830
|
+
[class.strct-rail__item--active]="item.id === activeId()"
|
|
831
|
+
[disabled]="item.disabled"
|
|
832
|
+
[attr.aria-current]="item.id === activeId() ? 'page' : null"
|
|
833
|
+
[attr.title]="collapsed() ? item.label : null"
|
|
834
|
+
(click)="pick(item)"
|
|
835
|
+
>
|
|
836
|
+
<strct-icon
|
|
837
|
+
class="strct-rail__icon"
|
|
838
|
+
[name]="item.icon"
|
|
839
|
+
[size]="18"
|
|
840
|
+
[strokeWidth]="1.6"
|
|
841
|
+
/>
|
|
842
|
+
@if (!collapsed()) {
|
|
843
|
+
<span class="strct-rail__label">{{ item.label }}</span>
|
|
844
|
+
}
|
|
845
|
+
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
846
|
+
<span
|
|
847
|
+
class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
848
|
+
[class.strct-rail__badge--dot]="collapsed()"
|
|
849
|
+
>
|
|
850
|
+
@if (!collapsed()) {
|
|
851
|
+
{{ item.badge }}
|
|
852
|
+
}
|
|
853
|
+
</span>
|
|
854
|
+
}
|
|
855
|
+
</button>
|
|
856
|
+
}
|
|
857
|
+
</nav>
|
|
858
|
+
|
|
859
|
+
@if (collapsible()) {
|
|
860
|
+
<button
|
|
861
|
+
type="button"
|
|
862
|
+
class="strct-rail__toggle"
|
|
863
|
+
[attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'"
|
|
864
|
+
[attr.aria-expanded]="!collapsed()"
|
|
865
|
+
(click)="collapsed.set(!collapsed())"
|
|
866
|
+
>
|
|
867
|
+
<strct-icon class="strct-rail__toggle-icon" name="chevronRight" [size]="16" />
|
|
868
|
+
@if (!collapsed()) {
|
|
869
|
+
<span class="strct-rail__toggle-label">Collapse</span>
|
|
870
|
+
}
|
|
871
|
+
</button>
|
|
872
|
+
}
|
|
873
|
+
`, 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 });
|
|
874
|
+
}
|
|
875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctRail, decorators: [{
|
|
876
|
+
type: Component,
|
|
877
|
+
args: [{ selector: 'strct-rail', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
|
|
878
|
+
<nav class="strct-rail__nav" [attr.aria-label]="ariaLabel()">
|
|
879
|
+
@for (item of items(); track item.id) {
|
|
880
|
+
<button
|
|
881
|
+
type="button"
|
|
882
|
+
class="strct-rail__item"
|
|
883
|
+
[class.strct-rail__item--active]="item.id === activeId()"
|
|
884
|
+
[disabled]="item.disabled"
|
|
885
|
+
[attr.aria-current]="item.id === activeId() ? 'page' : null"
|
|
886
|
+
[attr.title]="collapsed() ? item.label : null"
|
|
887
|
+
(click)="pick(item)"
|
|
888
|
+
>
|
|
889
|
+
<strct-icon
|
|
890
|
+
class="strct-rail__icon"
|
|
891
|
+
[name]="item.icon"
|
|
892
|
+
[size]="18"
|
|
893
|
+
[strokeWidth]="1.6"
|
|
894
|
+
/>
|
|
895
|
+
@if (!collapsed()) {
|
|
896
|
+
<span class="strct-rail__label">{{ item.label }}</span>
|
|
897
|
+
}
|
|
898
|
+
@if (item.badge !== undefined && item.badge !== null && item.badge !== '') {
|
|
899
|
+
<span
|
|
900
|
+
class="strct-rail__badge strct-rail__badge--{{ item.badgeStatus ?? 'accent' }}"
|
|
901
|
+
[class.strct-rail__badge--dot]="collapsed()"
|
|
902
|
+
>
|
|
903
|
+
@if (!collapsed()) {
|
|
904
|
+
{{ item.badge }}
|
|
905
|
+
}
|
|
906
|
+
</span>
|
|
907
|
+
}
|
|
908
|
+
</button>
|
|
909
|
+
}
|
|
910
|
+
</nav>
|
|
911
|
+
|
|
912
|
+
@if (collapsible()) {
|
|
913
|
+
<button
|
|
914
|
+
type="button"
|
|
915
|
+
class="strct-rail__toggle"
|
|
916
|
+
[attr.aria-label]="collapsed() ? 'Expand navigation' : 'Collapse navigation'"
|
|
917
|
+
[attr.aria-expanded]="!collapsed()"
|
|
918
|
+
(click)="collapsed.set(!collapsed())"
|
|
919
|
+
>
|
|
920
|
+
<strct-icon class="strct-rail__toggle-icon" name="chevronRight" [size]="16" />
|
|
921
|
+
@if (!collapsed()) {
|
|
922
|
+
<span class="strct-rail__toggle-label">Collapse</span>
|
|
923
|
+
}
|
|
924
|
+
</button>
|
|
925
|
+
}
|
|
926
|
+
`, host: {
|
|
927
|
+
class: 'strct-rail',
|
|
928
|
+
'[class.strct-rail--collapsed]': 'collapsed()',
|
|
929
|
+
}, 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"] }]
|
|
930
|
+
}], 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"] }] } });
|
|
931
|
+
|
|
796
932
|
/**
|
|
797
933
|
* Authentication layout. Two modes:
|
|
798
934
|
* - default: a single centered column (drop a card + form inside).
|
|
@@ -2218,6 +2354,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
2218
2354
|
}, 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"] }]
|
|
2219
2355
|
}], 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"] }] } });
|
|
2220
2356
|
|
|
2357
|
+
/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
|
|
2358
|
+
class StrctDrawerFooter {
|
|
2359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawerFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2360
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: StrctDrawerFooter, isStandalone: true, selector: "[strctDrawerFooter]", ngImport: i0 });
|
|
2361
|
+
}
|
|
2362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawerFooter, decorators: [{
|
|
2363
|
+
type: Directive,
|
|
2364
|
+
args: [{ selector: '[strctDrawerFooter]' }]
|
|
2365
|
+
}] });
|
|
2366
|
+
/**
|
|
2367
|
+
* Slide-out overlay panel anchored to an edge of the viewport — for inspecting
|
|
2368
|
+
* or editing a record without losing the underlying table's scroll/selection.
|
|
2369
|
+
*
|
|
2370
|
+
* <strct-drawer [(open)]="editing" side="end" title="Virtual machine">
|
|
2371
|
+
* … body …
|
|
2372
|
+
* <ng-container strctDrawerFooter>
|
|
2373
|
+
* <button strct-button (click)="editing.set(false)">Cancel</button>
|
|
2374
|
+
* </ng-container>
|
|
2375
|
+
* </strct-drawer>
|
|
2376
|
+
*/
|
|
2377
|
+
class StrctDrawer {
|
|
2378
|
+
/** Open state (two-way). */
|
|
2379
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
2380
|
+
/** Edge to anchor to. Defaults to `end` (right in LTR). */
|
|
2381
|
+
side = input('end', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
2382
|
+
/** Extent along the sliding axis. */
|
|
2383
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2384
|
+
/** Header title. */
|
|
2385
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
2386
|
+
/** Show the close button and allow backdrop/Esc dismissal. */
|
|
2387
|
+
dismissable = input(true, { ...(ngDevMode ? { debugName: "dismissable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2388
|
+
footerDef = contentChild(StrctDrawerFooter, ...(ngDevMode ? [{ debugName: "footerDef" }] : /* istanbul ignore next */ []));
|
|
2389
|
+
hasFooter = computed(() => !!this.footerDef(), ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
|
|
2390
|
+
onBackdrop() {
|
|
2391
|
+
if (this.dismissable())
|
|
2392
|
+
this.close();
|
|
2393
|
+
}
|
|
2394
|
+
onEscape() {
|
|
2395
|
+
if (this.dismissable())
|
|
2396
|
+
this.close();
|
|
2397
|
+
}
|
|
2398
|
+
close() {
|
|
2399
|
+
this.open.set(false);
|
|
2400
|
+
}
|
|
2401
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2402
|
+
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: `
|
|
2403
|
+
@if (open()) {
|
|
2404
|
+
<div
|
|
2405
|
+
class="strct-drawer__backdrop"
|
|
2406
|
+
[class.strct-drawer__backdrop--bare]="!dismissable()"
|
|
2407
|
+
(click)="onBackdrop()"
|
|
2408
|
+
(keydown.escape)="onEscape()"
|
|
2409
|
+
tabindex="-1"
|
|
2410
|
+
></div>
|
|
2411
|
+
<aside
|
|
2412
|
+
class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
|
|
2413
|
+
role="dialog"
|
|
2414
|
+
aria-modal="true"
|
|
2415
|
+
[attr.aria-label]="title() || 'Panel'"
|
|
2416
|
+
>
|
|
2417
|
+
@if (title() || dismissable()) {
|
|
2418
|
+
<header class="strct-drawer__head">
|
|
2419
|
+
<span class="strct-drawer__title">{{ title() }}</span>
|
|
2420
|
+
@if (dismissable()) {
|
|
2421
|
+
<button
|
|
2422
|
+
type="button"
|
|
2423
|
+
class="strct-drawer__close"
|
|
2424
|
+
aria-label="Close"
|
|
2425
|
+
(click)="close()"
|
|
2426
|
+
>
|
|
2427
|
+
<strct-icon name="close" [size]="15" />
|
|
2428
|
+
</button>
|
|
2429
|
+
}
|
|
2430
|
+
</header>
|
|
2431
|
+
}
|
|
2432
|
+
<div class="strct-drawer__body"><ng-content /></div>
|
|
2433
|
+
@if (hasFooter()) {
|
|
2434
|
+
<footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
|
|
2435
|
+
}
|
|
2436
|
+
</aside>
|
|
2437
|
+
}
|
|
2438
|
+
`, 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 });
|
|
2439
|
+
}
|
|
2440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctDrawer, decorators: [{
|
|
2441
|
+
type: Component,
|
|
2442
|
+
args: [{ selector: 'strct-drawer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
|
|
2443
|
+
@if (open()) {
|
|
2444
|
+
<div
|
|
2445
|
+
class="strct-drawer__backdrop"
|
|
2446
|
+
[class.strct-drawer__backdrop--bare]="!dismissable()"
|
|
2447
|
+
(click)="onBackdrop()"
|
|
2448
|
+
(keydown.escape)="onEscape()"
|
|
2449
|
+
tabindex="-1"
|
|
2450
|
+
></div>
|
|
2451
|
+
<aside
|
|
2452
|
+
class="strct-drawer strct-drawer--{{ side() }} strct-drawer--{{ size() }}"
|
|
2453
|
+
role="dialog"
|
|
2454
|
+
aria-modal="true"
|
|
2455
|
+
[attr.aria-label]="title() || 'Panel'"
|
|
2456
|
+
>
|
|
2457
|
+
@if (title() || dismissable()) {
|
|
2458
|
+
<header class="strct-drawer__head">
|
|
2459
|
+
<span class="strct-drawer__title">{{ title() }}</span>
|
|
2460
|
+
@if (dismissable()) {
|
|
2461
|
+
<button
|
|
2462
|
+
type="button"
|
|
2463
|
+
class="strct-drawer__close"
|
|
2464
|
+
aria-label="Close"
|
|
2465
|
+
(click)="close()"
|
|
2466
|
+
>
|
|
2467
|
+
<strct-icon name="close" [size]="15" />
|
|
2468
|
+
</button>
|
|
2469
|
+
}
|
|
2470
|
+
</header>
|
|
2471
|
+
}
|
|
2472
|
+
<div class="strct-drawer__body"><ng-content /></div>
|
|
2473
|
+
@if (hasFooter()) {
|
|
2474
|
+
<footer class="strct-drawer__foot"><ng-content select="[strctDrawerFooter]" /></footer>
|
|
2475
|
+
}
|
|
2476
|
+
</aside>
|
|
2477
|
+
}
|
|
2478
|
+
`, 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"] }]
|
|
2479
|
+
}], 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 }] }] } });
|
|
2480
|
+
|
|
2221
2481
|
/**
|
|
2222
2482
|
* Click-to-open menu:
|
|
2223
2483
|
* <strct-dropdown align="end">
|
|
@@ -7286,5 +7546,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
7286
7546
|
* Generated bundle index. Do not edit.
|
|
7287
7547
|
*/
|
|
7288
7548
|
|
|
7289
|
-
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 };
|
|
7549
|
+
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 };
|
|
7290
7550
|
//# sourceMappingURL=akcelik-strct.mjs.map
|