@akcelik/strct 5.5.0 → 5.6.1
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.
- package/fesm2022/akcelik-strct.mjs +231 -70
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +93 -9
|
@@ -812,12 +812,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
812
812
|
class StrctThemeSwitcher {
|
|
813
813
|
theme = inject(StrctThemeService);
|
|
814
814
|
/** Labels for the Light / Dark mode buttons (localizable). */
|
|
815
|
+
/**
|
|
816
|
+
* Where the switcher sits. `header` (the default) reads on `--hdr`;
|
|
817
|
+
* `surface` is a raised one — a user menu, a settings popover — where the
|
|
818
|
+
* header's foreground would be invisible.
|
|
819
|
+
*/
|
|
820
|
+
tone = input('header', /* @ts-ignore */
|
|
821
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
815
822
|
lightLabel = input('Light', /* @ts-ignore */
|
|
816
823
|
...(ngDevMode ? [{ debugName: "lightLabel" }] : /* istanbul ignore next */ []));
|
|
817
824
|
darkLabel = input('Dark', /* @ts-ignore */
|
|
818
825
|
...(ngDevMode ? [{ debugName: "darkLabel" }] : /* istanbul ignore next */ []));
|
|
819
826
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctThemeSwitcher, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
820
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctThemeSwitcher, isStandalone: true, selector: "strct-theme-switcher", inputs: { lightLabel: { classPropertyName: "lightLabel", publicName: "lightLabel", isSignal: true, isRequired: false, transformFunction: null }, darkLabel: { classPropertyName: "darkLabel", publicName: "darkLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-ts" }, ngImport: i0, template: `
|
|
827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctThemeSwitcher, isStandalone: true, selector: "strct-theme-switcher", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, lightLabel: { classPropertyName: "lightLabel", publicName: "lightLabel", isSignal: true, isRequired: false, transformFunction: null }, darkLabel: { classPropertyName: "darkLabel", publicName: "darkLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-ts--surface": "tone() === 'surface'" }, classAttribute: "strct-ts" }, ngImport: i0, template: `
|
|
821
828
|
<div class="strct-ts__pal">
|
|
822
829
|
@for (p of theme.palettes; track p.id) {
|
|
823
830
|
<button
|
|
@@ -857,7 +864,7 @@ class StrctThemeSwitcher {
|
|
|
857
864
|
<strct-icon name="moon" [size]="16" [strokeWidth]="1.5" />
|
|
858
865
|
</button>
|
|
859
866
|
</div>
|
|
860
|
-
`, isInline: true, styles: [".strct-ts{display:inline-flex;align-items:center;gap:14px}.strct-ts__pal{display:inline-flex;gap:7px}.strct-ts__dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;background:transparent;border:1.5px solid color-mix(in srgb,var(--hdr-fg) 40%,transparent);transition:transform .15s ease,border-color .15s ease}.strct-ts__dot:hover{transform:scale(1.12)}.strct-ts__inner{width:11px;height:11px;border-radius:50%;display:block}.strct-ts__dot--on{border-color:var(--hdr-fg);box-shadow:0 0 0 2px color-mix(in srgb,var(--hdr-fg) 28%,transparent)}.strct-ts__pill{display:inline-flex;padding:2px;gap:2px;border-radius:7px;background:color-mix(in srgb,var(--hdr-fg) 12%,transparent)}.strct-ts__pbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 65%,transparent);transition:background .14s ease,color .14s ease}.strct-ts__pbtn--on{background:color-mix(in srgb,var(--hdr-fg) 20%,transparent);color:var(--hdr-fg)}.strct-ts__dot:focus-visible,.strct-ts__pbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
867
|
+
`, isInline: true, styles: [".strct-ts--surface{--strct-ts-fg: var(--t1)}.strct-ts{display:inline-flex;align-items:center;gap:14px}.strct-ts__pal{display:inline-flex;gap:7px}.strct-ts__dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;background:transparent;border:1.5px solid color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 40%,transparent);transition:transform .15s ease,border-color .15s ease}.strct-ts__dot:hover{transform:scale(1.12)}.strct-ts__inner{width:11px;height:11px;border-radius:50%;display:block}.strct-ts__dot--on{border-color:var(--strct-ts-fg, var(--hdr-fg));box-shadow:0 0 0 2px color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 28%,transparent)}.strct-ts__pill{display:inline-flex;padding:2px;gap:2px;border-radius:7px;background:color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 12%,transparent)}.strct-ts__pbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 65%,transparent);transition:background .14s ease,color .14s ease}.strct-ts__pbtn--on{background:color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 20%,transparent);color:var(--strct-ts-fg, var(--hdr-fg))}.strct-ts__dot:focus-visible,.strct-ts__pbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
861
868
|
}
|
|
862
869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctThemeSwitcher, decorators: [{
|
|
863
870
|
type: Component,
|
|
@@ -901,8 +908,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
901
908
|
<strct-icon name="moon" [size]="16" [strokeWidth]="1.5" />
|
|
902
909
|
</button>
|
|
903
910
|
</div>
|
|
904
|
-
`, host: {
|
|
905
|
-
|
|
911
|
+
`, host: {
|
|
912
|
+
class: 'strct-ts',
|
|
913
|
+
'[class.strct-ts--surface]': "tone() === 'surface'",
|
|
914
|
+
}, styles: [".strct-ts--surface{--strct-ts-fg: var(--t1)}.strct-ts{display:inline-flex;align-items:center;gap:14px}.strct-ts__pal{display:inline-flex;gap:7px}.strct-ts__dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;padding:0;cursor:pointer;background:transparent;border:1.5px solid color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 40%,transparent);transition:transform .15s ease,border-color .15s ease}.strct-ts__dot:hover{transform:scale(1.12)}.strct-ts__inner{width:11px;height:11px;border-radius:50%;display:block}.strct-ts__dot--on{border-color:var(--strct-ts-fg, var(--hdr-fg));box-shadow:0 0 0 2px color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 28%,transparent)}.strct-ts__pill{display:inline-flex;padding:2px;gap:2px;border-radius:7px;background:color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 12%,transparent)}.strct-ts__pbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 65%,transparent);transition:background .14s ease,color .14s ease}.strct-ts__pbtn--on{background:color-mix(in srgb,var(--strct-ts-fg, var(--hdr-fg)) 20%,transparent);color:var(--strct-ts-fg, var(--hdr-fg))}.strct-ts__dot:focus-visible,.strct-ts__pbtn:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
|
|
915
|
+
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], lightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightLabel", required: false }] }], darkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkLabel", required: false }] }] } });
|
|
906
916
|
|
|
907
917
|
/**
|
|
908
918
|
* Positions an overlay panel with `position: fixed` relative to an anchor
|
|
@@ -1112,7 +1122,7 @@ class StrctHeader {
|
|
|
1112
1122
|
<strct-icon name="menu" [size]="18" />
|
|
1113
1123
|
</button>
|
|
1114
1124
|
<ng-content />
|
|
1115
|
-
`, isInline: true, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1125
|
+
`, isInline: true, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat{color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1116
1126
|
}
|
|
1117
1127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeader, decorators: [{
|
|
1118
1128
|
type: Component,
|
|
@@ -1128,7 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1128
1138
|
<strct-icon name="menu" [size]="18" />
|
|
1129
1139
|
</button>
|
|
1130
1140
|
<ng-content />
|
|
1131
|
-
`, host: { class: 'strct-header' }, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
|
|
1141
|
+
`, host: { class: 'strct-header' }, styles: [".strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat{color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
|
|
1132
1142
|
}], propDecorators: { drawerToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerToggleAriaLabel", required: false }] }] } });
|
|
1133
1143
|
/** Bottom status bar. */
|
|
1134
1144
|
class StrctFooter {
|
|
@@ -1569,18 +1579,21 @@ class StrctLogin {
|
|
|
1569
1579
|
}
|
|
1570
1580
|
}
|
|
1571
1581
|
<div class="strct-login__aside-inner">
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
<
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1582
|
+
<div class="strct-login__brand">
|
|
1583
|
+
@if (brandIcon()) {
|
|
1584
|
+
<span class="strct-login__mark">
|
|
1585
|
+
<strct-icon [name]="brandIcon()" [size]="18" [strokeWidth]="1.5" />
|
|
1586
|
+
</span>
|
|
1587
|
+
}
|
|
1588
|
+
@if (brandName()) {
|
|
1589
|
+
<span class="strct-login__brandname">{{ brandName() }}</span>
|
|
1590
|
+
}
|
|
1591
|
+
<!-- What this install is: "APPLIANCE", "EVALUATION". It belongs
|
|
1592
|
+
on the brand's line, not in the tagline under it. -->
|
|
1593
|
+
<span class="strct-login__brandmeta">
|
|
1594
|
+
<ng-content select="[strctLoginBrandMeta]" />
|
|
1595
|
+
</span>
|
|
1596
|
+
</div>
|
|
1584
1597
|
<div class="strct-login__asidebody">
|
|
1585
1598
|
@if (tagline()) {
|
|
1586
1599
|
<div class="strct-login__kicker">{{ tagline() }}</div>
|
|
@@ -1595,7 +1608,7 @@ class StrctLogin {
|
|
|
1595
1608
|
} @else {
|
|
1596
1609
|
<div class="strct-login__inner" [style.max-width.px]="maxWidth()"><ng-content /></div>
|
|
1597
1610
|
}
|
|
1598
|
-
`, isInline: true, styles: [".strct-login{display:flex;align-items:center;justify-content:center;width:100%;min-height:100%;padding:32px}.strct-login__inner{width:100%}.strct-login__card{display:grid;grid-template-columns:1.05fr 1fr;width:100%;overflow:hidden}.strct-login__main{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}.strct-login__aside{position:relative;overflow:hidden;min-height:420px;color:var(--t1);border-inline-end:1px solid var(--b2)}.strct-login__aside:before,.strct-login__aside:after{display:none}.strct-login__aside-inner{position:relative;z-index:var(--z-base);height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);padding:34px 36px}.strct-login__glow,.strct-login__matrix,.strct-login__net{position:absolute;inset:-36px;pointer-events:none}.strct-login__glow{filter:blur(46px)}.strct-login__glow--a{background:radial-gradient(360px 300px at 12% 8%,var(--acc30),transparent 70%)}.strct-login__glow--b{background:radial-gradient(320px 300px at 92% 96%,var(--acc18),transparent 70%)}.strct-login__matrix{background-image:radial-gradient(var(--acc30) 1px,transparent 1.4px);background-size:22px 22px;opacity:.4;-webkit-mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%);mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%)}.strct-login__net{width:calc(100% + 72px);height:calc(100% + 72px)}.strct-login__link{fill:none;stroke:var(--acc30);stroke-width:1}.strct-login__node{fill:var(--acc);opacity:.55}@media(prefers-reduced-motion:no-preference){.strct-login__node{animation:strct-login-pulse 4.5s ease-in-out infinite}.strct-login__node--p2{animation-delay:1.4s}.strct-login__node--p3{animation-delay:2.8s}}@keyframes strct-login-pulse{0%,to{opacity:.35}50%{opacity:.85}}.strct-login__brand{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.strct-login__mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--acc-m);border:1px solid var(--acc30);color:var(--acc)}.strct-login__brandname{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--t1)}.strct-login__asidebody{position:relative}.strct-login__kicker{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-block-end:10px;color:var(--acc)}.strct-login__status:empty{display:none}.strct-login__status{position:relative}@media(max-width:720px){.strct-login__card{grid-template-columns:1fr}.strct-login__aside{min-height:220px}.strct-login__main{padding:30px 26px}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1611
|
+
`, isInline: true, styles: [".strct-login{display:flex;align-items:center;justify-content:center;width:100%;min-height:100%;padding:32px}.strct-login__inner{width:100%}.strct-login__card{display:grid;grid-template-columns:1.05fr 1fr;width:100%;overflow:hidden}.strct-login__main{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}.strct-login__aside{position:relative;overflow:hidden;min-height:420px;color:var(--t1);border-inline-end:1px solid var(--b2)}.strct-login__aside:before,.strct-login__aside:after{display:none}.strct-login__aside-inner{position:relative;z-index:var(--z-base);height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);padding:34px 36px}.strct-login__glow,.strct-login__matrix,.strct-login__net{position:absolute;inset:-36px;pointer-events:none}.strct-login__glow{filter:blur(46px)}.strct-login__glow--a{background:radial-gradient(360px 300px at 12% 8%,var(--acc30),transparent 70%)}.strct-login__glow--b{background:radial-gradient(320px 300px at 92% 96%,var(--acc18),transparent 70%)}.strct-login__matrix{background-image:radial-gradient(var(--acc30) 1px,transparent 1.4px);background-size:22px 22px;opacity:.4;-webkit-mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%);mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%)}.strct-login__net{width:calc(100% + 72px);height:calc(100% + 72px)}.strct-login__link{fill:none;stroke:var(--acc30);stroke-width:1}.strct-login__node{fill:var(--acc);opacity:.55}@media(prefers-reduced-motion:no-preference){.strct-login__node{animation:strct-login-pulse 4.5s ease-in-out infinite}.strct-login__node--p2{animation-delay:1.4s}.strct-login__node--p3{animation-delay:2.8s}}@keyframes strct-login-pulse{0%,to{opacity:.35}50%{opacity:.85}}.strct-login__brand:not(:has(*)){display:none}.strct-login__brandmeta:empty{display:none}.strct-login__brandmeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-login__brand{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.strct-login__mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--acc-m);border:1px solid var(--acc30);color:var(--acc)}.strct-login__brandname{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--t1)}.strct-login__asidebody{position:relative}.strct-login__kicker{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-block-end:10px;color:var(--acc)}.strct-login__status:empty{display:none}.strct-login__status{position:relative}@media(max-width:720px){.strct-login__card{grid-template-columns:1fr}.strct-login__aside{min-height:220px}.strct-login__main{padding:30px 26px}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1599
1612
|
}
|
|
1600
1613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctLogin, decorators: [{
|
|
1601
1614
|
type: Component,
|
|
@@ -1627,18 +1640,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1627
1640
|
}
|
|
1628
1641
|
}
|
|
1629
1642
|
<div class="strct-login__aside-inner">
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
<
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1643
|
+
<div class="strct-login__brand">
|
|
1644
|
+
@if (brandIcon()) {
|
|
1645
|
+
<span class="strct-login__mark">
|
|
1646
|
+
<strct-icon [name]="brandIcon()" [size]="18" [strokeWidth]="1.5" />
|
|
1647
|
+
</span>
|
|
1648
|
+
}
|
|
1649
|
+
@if (brandName()) {
|
|
1650
|
+
<span class="strct-login__brandname">{{ brandName() }}</span>
|
|
1651
|
+
}
|
|
1652
|
+
<!-- What this install is: "APPLIANCE", "EVALUATION". It belongs
|
|
1653
|
+
on the brand's line, not in the tagline under it. -->
|
|
1654
|
+
<span class="strct-login__brandmeta">
|
|
1655
|
+
<ng-content select="[strctLoginBrandMeta]" />
|
|
1656
|
+
</span>
|
|
1657
|
+
</div>
|
|
1642
1658
|
<div class="strct-login__asidebody">
|
|
1643
1659
|
@if (tagline()) {
|
|
1644
1660
|
<div class="strct-login__kicker">{{ tagline() }}</div>
|
|
@@ -1653,7 +1669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
1653
1669
|
} @else {
|
|
1654
1670
|
<div class="strct-login__inner" [style.max-width.px]="maxWidth()"><ng-content /></div>
|
|
1655
1671
|
}
|
|
1656
|
-
`, host: { class: 'strct-login' }, styles: [".strct-login{display:flex;align-items:center;justify-content:center;width:100%;min-height:100%;padding:32px}.strct-login__inner{width:100%}.strct-login__card{display:grid;grid-template-columns:1.05fr 1fr;width:100%;overflow:hidden}.strct-login__main{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}.strct-login__aside{position:relative;overflow:hidden;min-height:420px;color:var(--t1);border-inline-end:1px solid var(--b2)}.strct-login__aside:before,.strct-login__aside:after{display:none}.strct-login__aside-inner{position:relative;z-index:var(--z-base);height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);padding:34px 36px}.strct-login__glow,.strct-login__matrix,.strct-login__net{position:absolute;inset:-36px;pointer-events:none}.strct-login__glow{filter:blur(46px)}.strct-login__glow--a{background:radial-gradient(360px 300px at 12% 8%,var(--acc30),transparent 70%)}.strct-login__glow--b{background:radial-gradient(320px 300px at 92% 96%,var(--acc18),transparent 70%)}.strct-login__matrix{background-image:radial-gradient(var(--acc30) 1px,transparent 1.4px);background-size:22px 22px;opacity:.4;-webkit-mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%);mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%)}.strct-login__net{width:calc(100% + 72px);height:calc(100% + 72px)}.strct-login__link{fill:none;stroke:var(--acc30);stroke-width:1}.strct-login__node{fill:var(--acc);opacity:.55}@media(prefers-reduced-motion:no-preference){.strct-login__node{animation:strct-login-pulse 4.5s ease-in-out infinite}.strct-login__node--p2{animation-delay:1.4s}.strct-login__node--p3{animation-delay:2.8s}}@keyframes strct-login-pulse{0%,to{opacity:.35}50%{opacity:.85}}.strct-login__brand{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.strct-login__mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--acc-m);border:1px solid var(--acc30);color:var(--acc)}.strct-login__brandname{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--t1)}.strct-login__asidebody{position:relative}.strct-login__kicker{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-block-end:10px;color:var(--acc)}.strct-login__status:empty{display:none}.strct-login__status{position:relative}@media(max-width:720px){.strct-login__card{grid-template-columns:1fr}.strct-login__aside{min-height:220px}.strct-login__main{padding:30px 26px}}\n"] }]
|
|
1672
|
+
`, host: { class: 'strct-login' }, styles: [".strct-login{display:flex;align-items:center;justify-content:center;width:100%;min-height:100%;padding:32px}.strct-login__inner{width:100%}.strct-login__card{display:grid;grid-template-columns:1.05fr 1fr;width:100%;overflow:hidden}.strct-login__main{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}.strct-login__aside{position:relative;overflow:hidden;min-height:420px;color:var(--t1);border-inline-end:1px solid var(--b2)}.strct-login__aside:before,.strct-login__aside:after{display:none}.strct-login__aside-inner{position:relative;z-index:var(--z-base);height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-5);padding:34px 36px}.strct-login__glow,.strct-login__matrix,.strct-login__net{position:absolute;inset:-36px;pointer-events:none}.strct-login__glow{filter:blur(46px)}.strct-login__glow--a{background:radial-gradient(360px 300px at 12% 8%,var(--acc30),transparent 70%)}.strct-login__glow--b{background:radial-gradient(320px 300px at 92% 96%,var(--acc18),transparent 70%)}.strct-login__matrix{background-image:radial-gradient(var(--acc30) 1px,transparent 1.4px);background-size:22px 22px;opacity:.4;-webkit-mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%);mask-image:linear-gradient(155deg,rgba(0,0,0,.9),transparent 72%)}.strct-login__net{width:calc(100% + 72px);height:calc(100% + 72px)}.strct-login__link{fill:none;stroke:var(--acc30);stroke-width:1}.strct-login__node{fill:var(--acc);opacity:.55}@media(prefers-reduced-motion:no-preference){.strct-login__node{animation:strct-login-pulse 4.5s ease-in-out infinite}.strct-login__node--p2{animation-delay:1.4s}.strct-login__node--p3{animation-delay:2.8s}}@keyframes strct-login-pulse{0%,to{opacity:.35}50%{opacity:.85}}.strct-login__brand:not(:has(*)){display:none}.strct-login__brandmeta:empty{display:none}.strct-login__brandmeta{display:inline-flex;align-items:center;gap:var(--space-2)}.strct-login__brand{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.strct-login__mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--acc-m);border:1px solid var(--acc30);color:var(--acc)}.strct-login__brandname{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--t1)}.strct-login__asidebody{position:relative}.strct-login__kicker{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;margin-block-end:10px;color:var(--acc)}.strct-login__status:empty{display:none}.strct-login__status{position:relative}@media(max-width:720px){.strct-login__card{grid-template-columns:1fr}.strct-login__aside{min-height:220px}.strct-login__main{padding:30px 26px}}\n"] }]
|
|
1657
1673
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], split: [{ type: i0.Input, args: [{ isSignal: true, alias: "split", required: false }] }], art: [{ type: i0.Input, args: [{ isSignal: true, alias: "art", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], brandName: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandName", required: false }] }], tagline: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagline", required: false }] }] } });
|
|
1658
1674
|
|
|
1659
1675
|
/** Marks the breadcrumb row projected above the title. */
|
|
@@ -5481,6 +5497,13 @@ class StrctDropdown {
|
|
|
5481
5497
|
/** Accessible name of the popover dialog (localizable). */
|
|
5482
5498
|
popoverLabel = input('Filters', /* @ts-ignore */
|
|
5483
5499
|
...(ngDevMode ? [{ debugName: "popoverLabel" }] : /* istanbul ignore next */ []));
|
|
5500
|
+
/**
|
|
5501
|
+
* Only with `popover`: the panel's rows are controls in their own right — a
|
|
5502
|
+
* theme switcher, a filter — so they keep a real tab stop instead of the
|
|
5503
|
+
* `tabindex="-1"` a menu's items carry. Without it nothing inside a popover
|
|
5504
|
+
* can be reached from the keyboard at all.
|
|
5505
|
+
*/
|
|
5506
|
+
focusable = input(false, { ...(ngDevMode ? { debugName: "focusable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5484
5507
|
open = signal(false, /* @ts-ignore */
|
|
5485
5508
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
5486
5509
|
constructor() {
|
|
@@ -5626,7 +5649,7 @@ class StrctDropdown {
|
|
|
5626
5649
|
this.close(true);
|
|
5627
5650
|
}
|
|
5628
5651
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5629
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, popoverLabel: { classPropertyName: "popoverLabel", publicName: "popoverLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
|
|
5652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDropdown, isStandalone: true, selector: "strct-dropdown", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, popover: { classPropertyName: "popover", publicName: "popover", isSignal: true, isRequired: false, transformFunction: null }, popoverLabel: { classPropertyName: "popoverLabel", publicName: "popoverLabel", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape()" }, classAttribute: "strct-dd" }, ngImport: i0, template: `
|
|
5630
5653
|
<!--
|
|
5631
5654
|
The wrapper is intentionally inert: the projected trigger should be a
|
|
5632
5655
|
real button (nesting interactives fails axe). Its native click —
|
|
@@ -5689,7 +5712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
5689
5712
|
</div>
|
|
5690
5713
|
}
|
|
5691
5714
|
`, host: { class: 'strct-dd' }, styles: [".strct-dd{position:relative;display:inline-block}.strct-dd__trigger{display:inline-flex}.strct-dd__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:var(--z-dropdown);min-width:170px;max-width:calc(100vw - 24px);padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-dd-in .1s ease}.strct-dd__menu--end{left:auto;right:0}.strct-dd__menu--popover{min-width:240px;padding:12px 14px}@keyframes strct-dd-in{0%{opacity:0;transform:translateY(-4px)}}\n"] }]
|
|
5692
|
-
}], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], onDocClick: [{
|
|
5715
|
+
}], ctorParameters: () => [], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], popover: [{ type: i0.Input, args: [{ isSignal: true, alias: "popover", required: false }] }], popoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverLabel", required: false }] }], focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], onDocClick: [{
|
|
5693
5716
|
type: HostListener,
|
|
5694
5717
|
args: ['document:click', ['$event']]
|
|
5695
5718
|
}], onEscape: [{
|
|
@@ -5772,6 +5795,19 @@ class StrctDropdownItem {
|
|
|
5772
5795
|
hint = input(null, /* @ts-ignore */
|
|
5773
5796
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
5774
5797
|
hintId = `strct-dd-item-${++dropdownItemCounter}-hint`;
|
|
5798
|
+
/** The panel this row belongs to, when it is inside one. */
|
|
5799
|
+
panel = inject(StrctDropdown, { optional: true });
|
|
5800
|
+
/**
|
|
5801
|
+
* A menu's rows are roved with the arrow keys, so they stay out of the tab
|
|
5802
|
+
* order. A `popover [focusable]` is a panel of real controls, and its rows
|
|
5803
|
+
* keep a tab stop of their own.
|
|
5804
|
+
*/
|
|
5805
|
+
tabindex = computed(() => {
|
|
5806
|
+
if (this.disabled() && !this.hint())
|
|
5807
|
+
return null;
|
|
5808
|
+
return this.panel?.popover() && this.panel.focusable() ? 0 : -1;
|
|
5809
|
+
}, /* @ts-ignore */
|
|
5810
|
+
...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
|
|
5775
5811
|
constructor() {
|
|
5776
5812
|
// Without pointer-events:none (see the hinted style), a disabled item
|
|
5777
5813
|
// would pass clicks to the consumer's (click). Capture-phase at the target
|
|
@@ -5786,7 +5822,7 @@ class StrctDropdownItem {
|
|
|
5786
5822
|
}, { capture: true });
|
|
5787
5823
|
}
|
|
5788
5824
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5789
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "
|
|
5825
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "tabindex()", "attr.title": "hint() || null", "attr.aria-describedby": "hint() ? hintId : null", "class.strct-dd__item--hinted": "!!hint()", "class.strct-dd__item--critical": "critical()", "class.strct-dd__item--selected": "selected() === true", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `@if (selected() !== null) {
|
|
5790
5826
|
<span class="strct-dd__check" aria-hidden="true">
|
|
5791
5827
|
@if (selected()) {
|
|
5792
5828
|
<strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
|
|
@@ -5825,7 +5861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
5825
5861
|
'[attr.role]': "selected() === null ? 'menuitem' : 'menuitemradio'",
|
|
5826
5862
|
'[attr.aria-checked]': 'selected()',
|
|
5827
5863
|
// A disabled item is skipped — unless it has a hint to be read.
|
|
5828
|
-
'[attr.tabindex]': '
|
|
5864
|
+
'[attr.tabindex]': 'tabindex()',
|
|
5829
5865
|
'[attr.title]': 'hint() || null',
|
|
5830
5866
|
'[attr.aria-describedby]': 'hint() ? hintId : null',
|
|
5831
5867
|
'[class.strct-dd__item--hinted]': '!!hint()',
|
|
@@ -8656,7 +8692,7 @@ class StrctCheckbox {
|
|
|
8656
8692
|
}
|
|
8657
8693
|
</span>
|
|
8658
8694
|
</label>
|
|
8659
|
-
`, isInline: true, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}.strct-cb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-cb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-cb__desc--projected{order:1}.strct-cb--described{align-items:flex-start}.strct-cb--described .strct-cb__box{margin-block-start:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8695
|
+
`, isInline: true, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__box{position:relative}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}.strct-cb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-cb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-cb__desc--projected{order:1}.strct-cb--described{align-items:flex-start}.strct-cb--described .strct-cb__box{margin-block-start:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8660
8696
|
}
|
|
8661
8697
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCheckbox, decorators: [{
|
|
8662
8698
|
type: Component,
|
|
@@ -8697,7 +8733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
8697
8733
|
}
|
|
8698
8734
|
</span>
|
|
8699
8735
|
</label>
|
|
8700
|
-
`, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}.strct-cb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-cb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-cb__desc--projected{order:1}.strct-cb--described{align-items:flex-start}.strct-cb--described .strct-cb__box{margin-block-start:1px}\n"] }]
|
|
8736
|
+
`, styles: [".strct-cb{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--t1);-webkit-user-select:none;user-select:none}.strct-cb--disabled{opacity:.5;cursor:not-allowed}.strct-cb__native{position:absolute;opacity:0;width:0;height:0}.strct-cb__box{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:4px;flex-shrink:0;background:var(--bg-2);border:1px solid var(--b3);color:transparent;transition:background .14s ease,border-color .14s ease}.strct-cb__native:checked+.strct-cb__box{background:var(--acc);border-color:transparent;color:var(--inv)}.strct-cb__native:indeterminate+.strct-cb__box{background:var(--acc);border-color:transparent}.strct-cb__native:indeterminate+.strct-cb__box strct-icon{visibility:hidden}.strct-cb__box{position:relative}.strct-cb__native:indeterminate+.strct-cb__box:after{content:\"\";position:absolute;inset:0;margin:auto;width:9px;height:2px;border-radius:1px;background:var(--inv)}.strct-cb__native:focus-visible+.strct-cb__box{box-shadow:0 0 0 3px var(--acc18)}.strct-cb__text{display:flex;flex-direction:column;gap:1px;min-width:0}.strct-cb__desc{font-size:var(--text-sm);line-height:1.4;color:var(--t3)}.strct-cb__desc--projected{order:1}.strct-cb--described{align-items:flex-start}.strct-cb--described .strct-cb__box{margin-block-start:1px}\n"] }]
|
|
8701
8737
|
}], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], projected: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctControlDescription), { isSignal: true }] }] } });
|
|
8702
8738
|
|
|
8703
8739
|
let toggleCounter = 0;
|
|
@@ -9928,6 +9964,11 @@ class StrctInputOtp {
|
|
|
9928
9964
|
*/
|
|
9929
9965
|
groupSize = input(0, /* @ts-ignore */
|
|
9930
9966
|
...(ngDevMode ? [{ debugName: "groupSize" }] : /* istanbul ignore next */ []));
|
|
9967
|
+
/**
|
|
9968
|
+
* Spread the boxes across the full width, so the code lines up with a
|
|
9969
|
+
* full-width button under it rather than huddling at the start of the row.
|
|
9970
|
+
*/
|
|
9971
|
+
fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9931
9972
|
slots = signal([], /* @ts-ignore */
|
|
9932
9973
|
...(ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []));
|
|
9933
9974
|
isDisabled = signal(false, /* @ts-ignore */
|
|
@@ -10012,10 +10053,10 @@ class StrctInputOtp {
|
|
|
10012
10053
|
this.isDisabled.set(isDisabled);
|
|
10013
10054
|
}
|
|
10014
10055
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctInputOtp, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10015
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctInputOtp, isStandalone: true, selector: "strct-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSize: { classPropertyName: "groupSize", publicName: "groupSize", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
10056
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctInputOtp, isStandalone: true, selector: "strct-input-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, groupSize: { classPropertyName: "groupSize", publicName: "groupSize", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
10016
10057
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctInputOtp), multi: true },
|
|
10017
10058
|
], ngImport: i0, template: `
|
|
10018
|
-
<div class="strct-otp">
|
|
10059
|
+
<div class="strct-otp" [class.strct-otp--fill]="fill()">
|
|
10019
10060
|
@for (i of indices(); track i) {
|
|
10020
10061
|
@if (groupSize() > 0 && i > 0 && i % groupSize() === 0) {
|
|
10021
10062
|
<span class="strct-otp__sep" aria-hidden="true">–</span>
|
|
@@ -10035,14 +10076,14 @@ class StrctInputOtp {
|
|
|
10035
10076
|
/>
|
|
10036
10077
|
}
|
|
10037
10078
|
</div>
|
|
10038
|
-
`, isInline: true, styles: [".strct-otp{display:inline-flex;align-items:center;gap:8px}.strct-otp__sep{margin-inline:3px;color:var(--t3);font-size:16px;-webkit-user-select:none;user-select:none}.strct-otp__box{width:40px;height:46px;text-align:center;font-family:var(--mono);font-size:18px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2);border-radius:8px;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-otp__box:focus{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-otp__box:disabled{opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10079
|
+
`, isInline: true, styles: [".strct-otp{display:inline-flex;align-items:center;gap:8px}.strct-otp--fill{display:flex;width:100%}.strct-otp--fill .strct-otp__box{flex:1;min-width:0}.strct-otp__sep{margin-inline:3px;color:var(--t3);font-size:16px;-webkit-user-select:none;user-select:none}.strct-otp__box{width:40px;height:46px;text-align:center;font-family:var(--mono);font-size:18px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2);border-radius:8px;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-otp__box:focus{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-otp__box:disabled{opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10039
10080
|
}
|
|
10040
10081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctInputOtp, decorators: [{
|
|
10041
10082
|
type: Component,
|
|
10042
10083
|
args: [{ selector: 'strct-input-otp', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
10043
10084
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StrctInputOtp), multi: true },
|
|
10044
10085
|
], template: `
|
|
10045
|
-
<div class="strct-otp">
|
|
10086
|
+
<div class="strct-otp" [class.strct-otp--fill]="fill()">
|
|
10046
10087
|
@for (i of indices(); track i) {
|
|
10047
10088
|
@if (groupSize() > 0 && i > 0 && i % groupSize() === 0) {
|
|
10048
10089
|
<span class="strct-otp__sep" aria-hidden="true">–</span>
|
|
@@ -10062,8 +10103,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
10062
10103
|
/>
|
|
10063
10104
|
}
|
|
10064
10105
|
</div>
|
|
10065
|
-
`, styles: [".strct-otp{display:inline-flex;align-items:center;gap:8px}.strct-otp__sep{margin-inline:3px;color:var(--t3);font-size:16px;-webkit-user-select:none;user-select:none}.strct-otp__box{width:40px;height:46px;text-align:center;font-family:var(--mono);font-size:18px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2);border-radius:8px;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-otp__box:focus{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-otp__box:disabled{opacity:.5}\n"] }]
|
|
10066
|
-
}], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], groupSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSize", required: false }] }] } });
|
|
10106
|
+
`, styles: [".strct-otp{display:inline-flex;align-items:center;gap:8px}.strct-otp--fill{display:flex;width:100%}.strct-otp--fill .strct-otp__box{flex:1;min-width:0}.strct-otp__sep{margin-inline:3px;color:var(--t3);font-size:16px;-webkit-user-select:none;user-select:none}.strct-otp__box{width:40px;height:46px;text-align:center;font-family:var(--mono);font-size:18px;color:var(--t1);background:var(--bg-2);border:1px solid var(--b2);border-radius:8px;transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.strct-otp__box:focus{outline:none;border-color:var(--acc50);box-shadow:0 0 0 3px var(--acc18);background:var(--bg-1)}.strct-otp__box:disabled{opacity:.5}\n"] }]
|
|
10107
|
+
}], ctorParameters: () => [], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], groupSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupSize", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
|
|
10067
10108
|
|
|
10068
10109
|
const COLOR$3 = {
|
|
10069
10110
|
accent: 'var(--acc)',
|
|
@@ -20805,7 +20846,7 @@ class StrctTimeRangePicker {
|
|
|
20805
20846
|
</div>
|
|
20806
20847
|
</div>
|
|
20807
20848
|
</strct-dropdown>
|
|
20808
|
-
`, isInline: true, styles: [".strct-tr{display:inline-block}.strct-tr__trigger .strct-tr__label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tr__panel{display:flex;gap:16px}.strct-tr__group{display:flex;flex-direction:column;gap:2px;min-width:150px}.strct-tr__head{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-tr__preset{text-align:start;padding:6px 9px;border:0;border-radius:var(--radius-sm);background:transparent;font-family:var(--font);font-size:12.5px;color:var(--t1);cursor:pointer}.strct-tr__preset:hover{background:var(--bg-3)}.strct-tr__preset--active{background:var(--acc18);color:var(--acc);font-weight:600}.strct-tr__preset:focus-visible,.strct-tr__input:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-tr__field{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--t2);margin-bottom:7px}.strct-tr__input{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-tr__error{font-size:11.5px;color:var(--critical);margin-bottom:6px}.strct-tr__apply{align-self:flex-start}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20849
|
+
`, isInline: true, styles: [".strct-tr{display:inline-block}.strct-tr__trigger .strct-tr__label{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-tr__panel{display:flex;gap:16px}.strct-tr__group{display:flex;flex-direction:column;gap:2px;min-width:150px}.strct-tr__head{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--t3);margin-bottom:5px}.strct-tr__preset{text-align:start;padding:6px 9px;border:0;border-radius:var(--radius-sm);background:transparent;font-family:var(--font);font-size:12.5px;color:var(--t1);cursor:pointer}.strct-tr__preset:hover{background:var(--bg-3)}.strct-tr__preset--active{background:var(--acc18);color:var(--acc);font-weight:600}.strct-tr__preset:focus-visible,.strct-tr__input:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-tr__field{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--t2);margin-bottom:7px}.strct-tr__input{padding:5px 8px;border:1px solid var(--b2);border-radius:var(--radius-sm);background:var(--bg-2);color:var(--t1);font-family:var(--font);font-size:12px}.strct-tr__error{font-size:11.5px;color:var(--critical);margin-bottom:6px}.strct-tr__apply{align-self:flex-start}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }, { kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel", "focusable"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
20809
20850
|
}
|
|
20810
20851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctTimeRangePicker, decorators: [{
|
|
20811
20852
|
type: Component,
|
|
@@ -22327,7 +22368,7 @@ class StrctSplitButton {
|
|
|
22327
22368
|
}
|
|
22328
22369
|
</strct-dropdown>
|
|
22329
22370
|
</div>
|
|
22330
|
-
`, isInline: true, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:13px;font-weight:600;line-height:1;cursor:pointer;padding:var(--space-2) var(--space-4)}.strct-sbt__main{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);border-inline-end:0}.strct-sbt__chev{padding:var(--space-2);border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:var(--z-base)}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["selected", "critical", "disabled", "hint"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22371
|
+
`, isInline: true, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:13px;font-weight:600;line-height:1;cursor:pointer;padding:var(--space-2) var(--space-4)}.strct-sbt__main{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);border-inline-end:0}.strct-sbt__chev{padding:var(--space-2);border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:var(--z-base)}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel", "focusable"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["selected", "critical", "disabled", "hint"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
22331
22372
|
}
|
|
22332
22373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSplitButton, decorators: [{
|
|
22333
22374
|
type: Component,
|
|
@@ -24243,12 +24284,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24243
24284
|
}, styles: [".strct-mf{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-3);min-width:0}.strct-mf>img,.strct-mf>video,.strct-mf>canvas{width:100%;height:100%;object-fit:cover;display:block}.strct-mf--contain>img,.strct-mf--contain>video,.strct-mf--contain>canvas{object-fit:contain}.strct-mf[data-state=off]{background:#000}.strct-mf__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-2);color:var(--t3);text-align:center}.strct-mf[data-state=off] .strct-mf__placeholder{color:#fff9}.strct-mf[data-state=error] .strct-mf__placeholder{color:var(--critical)}.strct-mf__msg{font-size:var(--text-sm);line-height:1.35}.strct-mf__hit{position:absolute;inset:-1px;padding:0;border:0;background:none;cursor:pointer}.strct-mf__hit:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-mf--interactive:hover{border-color:var(--b3)}\n"] }]
|
|
24244
24285
|
}], propDecorators: { ratio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ratio", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], activateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "activateLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
|
|
24245
24286
|
|
|
24287
|
+
/** The title bar's height — what must stay on screen for the window to be
|
|
24288
|
+
* draggable back from an edge. */
|
|
24289
|
+
const TITLE_H = 36;
|
|
24246
24290
|
const WINDOW_LABELS = {
|
|
24247
24291
|
minimize: 'Minimize',
|
|
24248
24292
|
maximize: 'Maximize',
|
|
24249
24293
|
restore: 'Restore',
|
|
24250
24294
|
close: 'Close',
|
|
24251
24295
|
dock: 'Minimized windows',
|
|
24296
|
+
minimizeHint: '',
|
|
24297
|
+
maximizeHint: '',
|
|
24298
|
+
restoreHint: '',
|
|
24299
|
+
closeHint: '',
|
|
24252
24300
|
};
|
|
24253
24301
|
let windowCounter = 0;
|
|
24254
24302
|
/**
|
|
@@ -24327,8 +24375,20 @@ class StrctWindow {
|
|
|
24327
24375
|
/** The accessible name of each resize grip. */
|
|
24328
24376
|
resizeLabel = input((corner) => `Resize (${corner})`, /* @ts-ignore */
|
|
24329
24377
|
...(ngDevMode ? [{ debugName: "resizeLabel" }] : /* istanbul ignore next */ []));
|
|
24378
|
+
/** A leading icon in the title bar, as `strct-page-header [icon]` has. */
|
|
24379
|
+
icon = input('', /* @ts-ignore */
|
|
24380
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
24381
|
+
/**
|
|
24382
|
+
* What a double-click on the title bar does. A console whose content has a
|
|
24383
|
+
* real full screen of its own wants `none` and its own answer to
|
|
24384
|
+
* `(titleDblclick)`.
|
|
24385
|
+
*/
|
|
24386
|
+
titleDblclick = input('maximize', /* @ts-ignore */
|
|
24387
|
+
...(ngDevMode ? [{ debugName: "titleDblclick" }] : /* istanbul ignore next */ []));
|
|
24330
24388
|
/** The window was closed. */
|
|
24331
24389
|
closed = output();
|
|
24390
|
+
/** The title bar was double-clicked, whatever `titleDblclick` then did. */
|
|
24391
|
+
titleDblclicked = output();
|
|
24332
24392
|
CORNERS = ['nw', 'ne', 'sw', 'se'];
|
|
24333
24393
|
titleId = `strct-window-${++windowCounter}`;
|
|
24334
24394
|
L = computed(() => ({
|
|
@@ -24443,6 +24503,14 @@ class StrctWindow {
|
|
|
24443
24503
|
this.doc.removeEventListener('pointercancel', this.onUp);
|
|
24444
24504
|
}
|
|
24445
24505
|
/** Alt+arrows move the window; Escape minimises it. */
|
|
24506
|
+
toggleMaximized() {
|
|
24507
|
+
this.maximized.set(!this.maximized());
|
|
24508
|
+
}
|
|
24509
|
+
onTitleDblclick() {
|
|
24510
|
+
this.titleDblclicked.emit();
|
|
24511
|
+
if (this.titleDblclick() === 'maximize')
|
|
24512
|
+
this.toggleMaximized();
|
|
24513
|
+
}
|
|
24446
24514
|
onTitleKeydown(event) {
|
|
24447
24515
|
if (!event.altKey)
|
|
24448
24516
|
return;
|
|
@@ -24515,14 +24583,33 @@ class StrctWindow {
|
|
|
24515
24583
|
height,
|
|
24516
24584
|
};
|
|
24517
24585
|
}
|
|
24586
|
+
/**
|
|
24587
|
+
* A window dragged off the screen cannot be dragged back: the title bar is
|
|
24588
|
+
* the only handle it has. Keep enough of that bar on screen to grab — the
|
|
24589
|
+
* window may hang off any edge, but never past its own title.
|
|
24590
|
+
*/
|
|
24591
|
+
clamp(next) {
|
|
24592
|
+
const view = this.doc.defaultView;
|
|
24593
|
+
if (!view)
|
|
24594
|
+
return next;
|
|
24595
|
+
const KEEP = 48; // enough of the bar to put a pointer on
|
|
24596
|
+
const maxX = view.innerWidth - KEEP;
|
|
24597
|
+
const maxY = view.innerHeight - TITLE_H;
|
|
24598
|
+
return {
|
|
24599
|
+
...next,
|
|
24600
|
+
x: Math.min(Math.max(next.x, KEEP - next.width), maxX),
|
|
24601
|
+
y: Math.min(Math.max(next.y, 0), Math.max(0, maxY)),
|
|
24602
|
+
};
|
|
24603
|
+
}
|
|
24518
24604
|
setRect(next) {
|
|
24605
|
+
const clamped = this.clamp(next);
|
|
24519
24606
|
if (this.bounds())
|
|
24520
|
-
this.bounds.set(
|
|
24607
|
+
this.bounds.set(clamped);
|
|
24521
24608
|
else
|
|
24522
|
-
this.fallback.set(
|
|
24609
|
+
this.fallback.set(clamped);
|
|
24523
24610
|
}
|
|
24524
24611
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindow, isStandalone: true, selector: "strct-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutside: { classPropertyName: "closeOnOutside", publicName: "closeOnOutside", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", minimized: "minimizedChange", maximized: "maximizedChange", bounds: "boundsChange", closed: "closed" }, host: { classAttribute: "strct-window" }, ngImport: i0, template: `
|
|
24612
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindow, isStandalone: true, selector: "strct-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, minimized: { classPropertyName: "minimized", publicName: "minimized", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutside: { classPropertyName: "closeOnOutside", publicName: "closeOnOutside", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, titleDblclick: { classPropertyName: "titleDblclick", publicName: "titleDblclick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", minimized: "minimizedChange", maximized: "maximizedChange", bounds: "boundsChange", closed: "closed", titleDblclicked: "titleDblclicked" }, host: { classAttribute: "strct-window" }, ngImport: i0, template: `
|
|
24526
24613
|
@if (open() && !minimized()) {
|
|
24527
24614
|
<div
|
|
24528
24615
|
class="strct-window__frame"
|
|
@@ -24547,8 +24634,11 @@ class StrctWindow {
|
|
|
24547
24634
|
[attr.aria-label]="heading()"
|
|
24548
24635
|
(pointerdown)="onDragStart($event)"
|
|
24549
24636
|
(keydown)="onTitleKeydown($event)"
|
|
24550
|
-
(dblclick)="
|
|
24637
|
+
(dblclick)="onTitleDblclick()"
|
|
24551
24638
|
>
|
|
24639
|
+
@if (icon()) {
|
|
24640
|
+
<strct-icon class="strct-window__icon" [name]="icon()" [size]="14" />
|
|
24641
|
+
}
|
|
24552
24642
|
<span class="strct-window__heading" [id]="titleId">{{ heading() }}</span>
|
|
24553
24643
|
<span class="strct-window__meta"><ng-content select="[strctWindowTitleMeta]" /></span>
|
|
24554
24644
|
<span class="strct-window__actions"><ng-content select="[strctWindowActions]" /></span>
|
|
@@ -24557,6 +24647,7 @@ class StrctWindow {
|
|
|
24557
24647
|
type="button"
|
|
24558
24648
|
class="strct-window__btn"
|
|
24559
24649
|
[attr.aria-label]="L().minimize"
|
|
24650
|
+
[attr.title]="L().minimizeHint || null"
|
|
24560
24651
|
(click)="minimize()"
|
|
24561
24652
|
>
|
|
24562
24653
|
<strct-icon strictName="minus" [size]="14" />
|
|
@@ -24565,7 +24656,8 @@ class StrctWindow {
|
|
|
24565
24656
|
type="button"
|
|
24566
24657
|
class="strct-window__btn"
|
|
24567
24658
|
[attr.aria-label]="maximized() ? L().restore : L().maximize"
|
|
24568
|
-
|
|
24659
|
+
[attr.title]="(maximized() ? L().restoreHint : L().maximizeHint) || null"
|
|
24660
|
+
(click)="toggleMaximized()"
|
|
24569
24661
|
>
|
|
24570
24662
|
<strct-icon
|
|
24571
24663
|
[strictName]="maximized() ? 'exitFullscreen' : 'fullscreen'"
|
|
@@ -24576,6 +24668,7 @@ class StrctWindow {
|
|
|
24576
24668
|
type="button"
|
|
24577
24669
|
class="strct-window__btn strct-window__btn--close"
|
|
24578
24670
|
[attr.aria-label]="L().close"
|
|
24671
|
+
[attr.title]="L().closeHint || null"
|
|
24579
24672
|
(click)="close()"
|
|
24580
24673
|
>
|
|
24581
24674
|
<strct-icon strictName="close" [size]="14" />
|
|
@@ -24600,7 +24693,7 @@ class StrctWindow {
|
|
|
24600
24693
|
}
|
|
24601
24694
|
</div>
|
|
24602
24695
|
}
|
|
24603
|
-
`, isInline: true, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24696
|
+
`, isInline: true, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__icon{flex:none;color:var(--t3)}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24604
24697
|
}
|
|
24605
24698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindow, decorators: [{
|
|
24606
24699
|
type: Component,
|
|
@@ -24629,8 +24722,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24629
24722
|
[attr.aria-label]="heading()"
|
|
24630
24723
|
(pointerdown)="onDragStart($event)"
|
|
24631
24724
|
(keydown)="onTitleKeydown($event)"
|
|
24632
|
-
(dblclick)="
|
|
24725
|
+
(dblclick)="onTitleDblclick()"
|
|
24633
24726
|
>
|
|
24727
|
+
@if (icon()) {
|
|
24728
|
+
<strct-icon class="strct-window__icon" [name]="icon()" [size]="14" />
|
|
24729
|
+
}
|
|
24634
24730
|
<span class="strct-window__heading" [id]="titleId">{{ heading() }}</span>
|
|
24635
24731
|
<span class="strct-window__meta"><ng-content select="[strctWindowTitleMeta]" /></span>
|
|
24636
24732
|
<span class="strct-window__actions"><ng-content select="[strctWindowActions]" /></span>
|
|
@@ -24639,6 +24735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24639
24735
|
type="button"
|
|
24640
24736
|
class="strct-window__btn"
|
|
24641
24737
|
[attr.aria-label]="L().minimize"
|
|
24738
|
+
[attr.title]="L().minimizeHint || null"
|
|
24642
24739
|
(click)="minimize()"
|
|
24643
24740
|
>
|
|
24644
24741
|
<strct-icon strictName="minus" [size]="14" />
|
|
@@ -24647,7 +24744,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24647
24744
|
type="button"
|
|
24648
24745
|
class="strct-window__btn"
|
|
24649
24746
|
[attr.aria-label]="maximized() ? L().restore : L().maximize"
|
|
24650
|
-
|
|
24747
|
+
[attr.title]="(maximized() ? L().restoreHint : L().maximizeHint) || null"
|
|
24748
|
+
(click)="toggleMaximized()"
|
|
24651
24749
|
>
|
|
24652
24750
|
<strct-icon
|
|
24653
24751
|
[strictName]="maximized() ? 'exitFullscreen' : 'fullscreen'"
|
|
@@ -24658,6 +24756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24658
24756
|
type="button"
|
|
24659
24757
|
class="strct-window__btn strct-window__btn--close"
|
|
24660
24758
|
[attr.aria-label]="L().close"
|
|
24759
|
+
[attr.title]="L().closeHint || null"
|
|
24661
24760
|
(click)="close()"
|
|
24662
24761
|
>
|
|
24663
24762
|
<strct-icon strictName="close" [size]="14" />
|
|
@@ -24682,11 +24781,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24682
24781
|
}
|
|
24683
24782
|
</div>
|
|
24684
24783
|
}
|
|
24685
|
-
`, host: { class: 'strct-window' }, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"] }]
|
|
24686
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }, { type: i0.Output, args: ["minimizedChange"] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: false }] }, { type: i0.Output, args: ["boundsChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], closeOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutside", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
24784
|
+
`, host: { class: 'strct-window' }, styles: [".strct-window{display:contents}.strct-window__frame{position:fixed;display:flex;flex-direction:column;min-width:0;border:1px solid var(--b2);border-radius:var(--radius-lg);background:var(--bg-1);color:var(--t1);box-shadow:var(--shadow-overlay, 0 12px 40px rgba(0, 0, 0, .32));overflow:hidden}.strct-window__frame--max{inset:var(--space-3);width:auto;height:auto}.strct-window__icon{flex:none;color:var(--t3)}.strct-window__title{display:flex;align-items:center;gap:var(--space-2);padding:6px 6px 6px var(--space-3);border-block-end:1px solid var(--b1);background:var(--bg-2);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-window__title:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__heading{font-size:var(--text-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-window__meta,.strct-window__actions{display:inline-flex;align-items:center;gap:6px}.strct-window__actions{margin-inline-start:auto}.strct-window__controls{display:inline-flex;align-items:center;gap:2px;flex:none}.strct-window__btn{display:inline-flex;padding:4px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--t2);cursor:pointer}.strct-window__btn:hover{background:var(--bg-3);color:var(--t1)}.strct-window__btn--close:hover{background:var(--critical-bg);color:var(--critical)}.strct-window__body{flex:1;min-height:0;overflow:auto}.strct-window__status:empty{display:none}.strct-window__status{border-block-start:1px solid var(--b1);padding:4px var(--space-3);font-size:var(--text-sm);color:var(--t3);background:var(--bg-2)}.strct-window__rz{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent}.strct-window__rz:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-window__rz--nw{inset-block-start:0;inset-inline-start:0;cursor:nwse-resize}.strct-window__rz--ne{inset-block-start:0;inset-inline-end:0;cursor:nesw-resize}.strct-window__rz--sw{inset-block-end:0;inset-inline-start:0;cursor:nesw-resize}.strct-window__rz--se{inset-block-end:0;inset-inline-end:0;cursor:nwse-resize}\n"] }]
|
|
24785
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], minimized: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimized", required: false }] }, { type: i0.Output, args: ["minimizedChange"] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], bounds: [{ type: i0.Input, args: [{ isSignal: true, alias: "bounds", required: false }] }, { type: i0.Output, args: ["boundsChange"] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], closeOnOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutside", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], titleDblclick: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleDblclick", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], titleDblclicked: [{ type: i0.Output, args: ["titleDblclicked"] }] } });
|
|
24786
|
+
/**
|
|
24787
|
+
* What a dock chip shows, when the window's heading is not enough — a status
|
|
24788
|
+
* dot, an icon, a count. The window is the context:
|
|
24789
|
+
*
|
|
24790
|
+
* <ng-template strctWindowDockItem let-w>
|
|
24791
|
+
* <strct-status-dot [status]="tone(w)" size="sm" /> {{ w.heading() }}
|
|
24792
|
+
* </ng-template>
|
|
24793
|
+
*/
|
|
24794
|
+
class StrctWindowDockItem {
|
|
24795
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDockItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
24796
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctWindowDockItem, isStandalone: true, selector: "ng-template[strctWindowDockItem]", ngImport: i0 });
|
|
24797
|
+
}
|
|
24798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDockItem, decorators: [{
|
|
24799
|
+
type: Directive,
|
|
24800
|
+
args: [{ selector: 'ng-template[strctWindowDockItem]' }]
|
|
24801
|
+
}] });
|
|
24687
24802
|
/**
|
|
24688
24803
|
* Where minimised windows wait. Put it in a toolbar or a status bar; each entry
|
|
24689
|
-
* restores its window
|
|
24804
|
+
* restores its window — or asks the consumer to, through `(restoreRequest)` —
|
|
24805
|
+
* and its × closes it.
|
|
24690
24806
|
*/
|
|
24691
24807
|
class StrctWindowDock {
|
|
24692
24808
|
service = inject(StrctWindowService);
|
|
@@ -24696,12 +24812,39 @@ class StrctWindowDock {
|
|
|
24696
24812
|
/** The name of each chip's close button. */
|
|
24697
24813
|
closeLabel = input((heading) => `Close ${heading}`, /* @ts-ignore */
|
|
24698
24814
|
...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
24815
|
+
/** What each chip shows, when a heading is not enough. */
|
|
24816
|
+
itemTpl = contentChild(StrctWindowDockItem, { ...(ngDevMode ? { debugName: "itemTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
|
|
24817
|
+
/**
|
|
24818
|
+
* Who restores a window when its chip is pressed. `dock` does it itself, as
|
|
24819
|
+
* before; `request` only emits `(restoreRequest)`, so an app that allows one
|
|
24820
|
+
* open window at a time can close the other first — the dock's own restore
|
|
24821
|
+
* would walk past that rule.
|
|
24822
|
+
*/
|
|
24823
|
+
restoreMode = input('dock', /* @ts-ignore */
|
|
24824
|
+
...(ngDevMode ? [{ debugName: "restoreMode" }] : /* istanbul ignore next */ []));
|
|
24825
|
+
/** A chip was pressed. Always emitted; with `restoreMode="request"` it is
|
|
24826
|
+
* the only thing that happens. */
|
|
24827
|
+
restoreRequest = output();
|
|
24828
|
+
onRestore(w) {
|
|
24829
|
+
this.restoreRequest.emit(w);
|
|
24830
|
+
if (this.restoreMode() === 'dock')
|
|
24831
|
+
w.restore();
|
|
24832
|
+
}
|
|
24699
24833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
24700
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindowDock, isStandalone: true, selector: "strct-window-dock", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()" }, classAttribute: "strct-windock" }, ngImport: i0, template: `
|
|
24834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctWindowDock, isStandalone: true, selector: "strct-window-dock", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { restoreRequest: "restoreRequest" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()" }, classAttribute: "strct-windock" }, queries: [{ propertyName: "itemTpl", first: true, predicate: StrctWindowDockItem, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
|
|
24701
24835
|
@for (w of service.minimized(); track w) {
|
|
24702
24836
|
<span class="strct-windock__chip">
|
|
24703
|
-
<button type="button" class="strct-windock__open" (click)="w
|
|
24704
|
-
|
|
24837
|
+
<button type="button" class="strct-windock__open" (click)="onRestore(w)">
|
|
24838
|
+
@if (itemTpl(); as tpl) {
|
|
24839
|
+
<!-- A chip can say more than a heading: a status dot, an icon, a
|
|
24840
|
+
count. The window is the template's context. -->
|
|
24841
|
+
<ng-container
|
|
24842
|
+
[ngTemplateOutlet]="tpl"
|
|
24843
|
+
[ngTemplateOutletContext]="{ $implicit: w, window: w }"
|
|
24844
|
+
/>
|
|
24845
|
+
} @else {
|
|
24846
|
+
{{ w.heading() }}
|
|
24847
|
+
}
|
|
24705
24848
|
</button>
|
|
24706
24849
|
<button
|
|
24707
24850
|
type="button"
|
|
@@ -24713,15 +24856,24 @@ class StrctWindowDock {
|
|
|
24713
24856
|
</button>
|
|
24714
24857
|
</span>
|
|
24715
24858
|
}
|
|
24716
|
-
`, isInline: true, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24859
|
+
`, isInline: true, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
24717
24860
|
}
|
|
24718
24861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWindowDock, decorators: [{
|
|
24719
24862
|
type: Component,
|
|
24720
|
-
args: [{ selector: 'strct-window-dock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
|
|
24863
|
+
args: [{ selector: 'strct-window-dock', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, NgTemplateOutlet], template: `
|
|
24721
24864
|
@for (w of service.minimized(); track w) {
|
|
24722
24865
|
<span class="strct-windock__chip">
|
|
24723
|
-
<button type="button" class="strct-windock__open" (click)="w
|
|
24724
|
-
|
|
24866
|
+
<button type="button" class="strct-windock__open" (click)="onRestore(w)">
|
|
24867
|
+
@if (itemTpl(); as tpl) {
|
|
24868
|
+
<!-- A chip can say more than a heading: a status dot, an icon, a
|
|
24869
|
+
count. The window is the template's context. -->
|
|
24870
|
+
<ng-container
|
|
24871
|
+
[ngTemplateOutlet]="tpl"
|
|
24872
|
+
[ngTemplateOutletContext]="{ $implicit: w, window: w }"
|
|
24873
|
+
/>
|
|
24874
|
+
} @else {
|
|
24875
|
+
{{ w.heading() }}
|
|
24876
|
+
}
|
|
24725
24877
|
</button>
|
|
24726
24878
|
<button
|
|
24727
24879
|
type="button"
|
|
@@ -24738,7 +24890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
24738
24890
|
role: 'group',
|
|
24739
24891
|
'[attr.aria-label]': 'label()',
|
|
24740
24892
|
}, styles: [".strct-windock{display:inline-flex;align-items:center;gap:6px}.strct-windock__chip{display:inline-flex;align-items:center;gap:2px;padding-inline:8px 4px;border:1px solid var(--b2);border-radius:var(--radius-full, 999px);background:var(--bg-1);font-size:12px}.strct-windock__open,.strct-windock__close{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:3px 2px;border-radius:var(--radius-sm)}.strct-windock__open:hover{color:var(--acc)}.strct-windock__close{display:inline-flex;color:var(--t3)}.strct-windock__close:hover{color:var(--critical)}.strct-windock__open:focus-visible,.strct-windock__close:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}\n"] }]
|
|
24741
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }] } });
|
|
24893
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWindowDockItem), { ...{ read: TemplateRef }, isSignal: true }] }], restoreMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreMode", required: false }] }], restoreRequest: [{ type: i0.Output, args: ["restoreRequest"] }] } });
|
|
24742
24894
|
|
|
24743
24895
|
/** A card the message carries — an action to approve, a result to read. */
|
|
24744
24896
|
class StrctChatAttachment {
|
|
@@ -25646,6 +25798,13 @@ class StrctPopover {
|
|
|
25646
25798
|
/** Accessible name of the popover dialog (localizable). */
|
|
25647
25799
|
ariaLabel = input('Details', /* @ts-ignore */
|
|
25648
25800
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
25801
|
+
/**
|
|
25802
|
+
* How wide the panel may get (px). The default suits a sentence; an alarm
|
|
25803
|
+
* list or a drift table wants 340–360. `--strct-popover-max-w` is the same
|
|
25804
|
+
* knob in CSS, for a panel the consumer does not own.
|
|
25805
|
+
*/
|
|
25806
|
+
maxWidth = input(null, /* @ts-ignore */
|
|
25807
|
+
...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
25649
25808
|
/**
|
|
25650
25809
|
* Modal-ish usage: move focus into the panel on open, trap Tab inside and
|
|
25651
25810
|
* hand focus back to the trigger on close. Off by default — a plain popover
|
|
@@ -25702,7 +25861,7 @@ class StrctPopover {
|
|
|
25702
25861
|
this.close(true);
|
|
25703
25862
|
}
|
|
25704
25863
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25705
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctPopover, isStandalone: true, selector: "strct-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, trap: { classPropertyName: "trap", publicName: "trap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape($event)" }, classAttribute: "strct-popover" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
25864
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctPopover, isStandalone: true, selector: "strct-popover", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, trap: { classPropertyName: "trap", publicName: "trap", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:click": "onDocClick($event)", "document:keydown.escape": "onEscape($event)" }, classAttribute: "strct-popover" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
25706
25865
|
<!--
|
|
25707
25866
|
Same contract as the signpost: the wrapper stays inert and the real
|
|
25708
25867
|
trigger button carries aria-haspopup/aria-expanded (wired by the
|
|
@@ -25718,6 +25877,7 @@ class StrctPopover {
|
|
|
25718
25877
|
role="dialog"
|
|
25719
25878
|
tabindex="-1"
|
|
25720
25879
|
[attr.aria-label]="ariaLabel()"
|
|
25880
|
+
[style.--strct-popover-max-w.px]="maxWidth()"
|
|
25721
25881
|
[strctOverlay]="trigger"
|
|
25722
25882
|
[strctOverlayPlacement]="placement()"
|
|
25723
25883
|
(keydown.tab)="onTab($event)"
|
|
@@ -25726,7 +25886,7 @@ class StrctPopover {
|
|
|
25726
25886
|
<ng-content />
|
|
25727
25887
|
</div>
|
|
25728
25888
|
}
|
|
25729
|
-
`, isInline: true, styles: [".strct-popover{position:relative;display:inline-block}.strct-popover__trigger{display:inline-flex}.strct-popover__panel{z-index:var(--z-popover);width:max-content;max-width:320px;padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-popover-in .11s ease}@keyframes strct-popover-in{0%{opacity:0;transform:scale(.97)}}@media(prefers-reduced-motion:reduce){.strct-popover__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
25889
|
+
`, isInline: true, styles: [".strct-popover{position:relative;display:inline-block}.strct-popover__trigger{display:inline-flex}.strct-popover__panel{z-index:var(--z-popover);width:max-content;max-width:var(--strct-popover-max-w, 320px);padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-popover-in .11s ease}@keyframes strct-popover-in{0%{opacity:0;transform:scale(.97)}}@media(prefers-reduced-motion:reduce){.strct-popover__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: StrctOverlay, selector: "[strctOverlay]", inputs: ["strctOverlay", "strctOverlayPlacement", "strctOverlayMatchWidth", "strctOverlayGap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
25730
25890
|
}
|
|
25731
25891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctPopover, decorators: [{
|
|
25732
25892
|
type: Component,
|
|
@@ -25746,6 +25906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
25746
25906
|
role="dialog"
|
|
25747
25907
|
tabindex="-1"
|
|
25748
25908
|
[attr.aria-label]="ariaLabel()"
|
|
25909
|
+
[style.--strct-popover-max-w.px]="maxWidth()"
|
|
25749
25910
|
[strctOverlay]="trigger"
|
|
25750
25911
|
[strctOverlayPlacement]="placement()"
|
|
25751
25912
|
(keydown.tab)="onTab($event)"
|
|
@@ -25754,8 +25915,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
25754
25915
|
<ng-content />
|
|
25755
25916
|
</div>
|
|
25756
25917
|
}
|
|
25757
|
-
`, host: { class: 'strct-popover' }, styles: [".strct-popover{position:relative;display:inline-block}.strct-popover__trigger{display:inline-flex}.strct-popover__panel{z-index:var(--z-popover);width:max-content;max-width:320px;padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-popover-in .11s ease}@keyframes strct-popover-in{0%{opacity:0;transform:scale(.97)}}@media(prefers-reduced-motion:reduce){.strct-popover__panel{animation:none}}\n"] }]
|
|
25758
|
-
}], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trap: [{ type: i0.Input, args: [{ isSignal: true, alias: "trap", required: false }] }], onDocClick: [{
|
|
25918
|
+
`, host: { class: 'strct-popover' }, styles: [".strct-popover{position:relative;display:inline-block}.strct-popover__trigger{display:inline-flex}.strct-popover__panel{z-index:var(--z-popover);width:max-content;max-width:var(--strct-popover-max-w, 320px);padding:var(--space-3);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-lg);box-shadow:var(--shadow-floating);animation:strct-popover-in .11s ease}@keyframes strct-popover-in{0%{opacity:0;transform:scale(.97)}}@media(prefers-reduced-motion:reduce){.strct-popover__panel{animation:none}}\n"] }]
|
|
25919
|
+
}], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], trap: [{ type: i0.Input, args: [{ isSignal: true, alias: "trap", required: false }] }], onDocClick: [{
|
|
25759
25920
|
type: HostListener,
|
|
25760
25921
|
args: ['document:click', ['$event']]
|
|
25761
25922
|
}], onEscape: [{
|
|
@@ -27493,5 +27654,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
27493
27654
|
* Generated bundle index. Do not edit.
|
|
27494
27655
|
*/
|
|
27495
27656
|
|
|
27496
|
-
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
27657
|
+
export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
|
|
27497
27658
|
//# sourceMappingURL=akcelik-strct.mjs.map
|