@akcelik/strct 1.15.0 → 1.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/akcelik-strct.mjs +112 -53
- package/fesm2022/akcelik-strct.mjs.map +1 -1
- package/package.json +1 -1
- package/types/akcelik-strct.d.ts +30 -3
|
@@ -2980,6 +2980,13 @@ class StrctModal {
|
|
|
2980
2980
|
size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
2981
2981
|
/** Hide the footer slot. */
|
|
2982
2982
|
hideFooter = input(false, { ...(ngDevMode ? { debugName: "hideFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2983
|
+
/**
|
|
2984
|
+
* Wizard-hosting mode: no head, no body padding, no footer — the projected
|
|
2985
|
+
* content (a `flush` vertical wizard) is the dialog surface. `title` still
|
|
2986
|
+
* names the dialog for assistive tech; backdrop/Escape dismissal follow
|
|
2987
|
+
* `dismissible` as usual.
|
|
2988
|
+
*/
|
|
2989
|
+
chromeless = input(false, { ...(ngDevMode ? { debugName: "chromeless" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2983
2990
|
/** Accessible label of the X close button (localizable). */
|
|
2984
2991
|
closeLabel = input('Close', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
|
|
2985
2992
|
/**
|
|
@@ -3135,7 +3142,7 @@ class StrctModal {
|
|
|
3135
3142
|
(items[0] ?? this.dialog())?.focus();
|
|
3136
3143
|
}
|
|
3137
3144
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3138
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctModal, isStandalone: true, selector: "strct-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
|
|
3145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctModal, isStandalone: true, selector: "strct-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, chromeless: { classPropertyName: "chromeless", publicName: "chromeless", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
|
|
3139
3146
|
@if (open()) {
|
|
3140
3147
|
<!-- Backdrop: pointer-only dismiss target. No role/tabindex — keyboard users
|
|
3141
3148
|
dismiss via Escape, and the focus trap makes the backdrop unreachable
|
|
@@ -3150,41 +3157,45 @@ class StrctModal {
|
|
|
3150
3157
|
#dialog
|
|
3151
3158
|
class="strct-modal__dialog strct-modal__dialog--{{ size() }} {{ panelClass() }}"
|
|
3152
3159
|
[class.strct-modal__dialog--glass]="variant() === 'glass'"
|
|
3160
|
+
[class.strct-modal__dialog--chromeless]="chromeless()"
|
|
3153
3161
|
[style.transform]="dragTransform()"
|
|
3154
3162
|
role="dialog"
|
|
3155
3163
|
aria-modal="true"
|
|
3156
|
-
[attr.aria-labelledby]="title() ? titleId : null"
|
|
3164
|
+
[attr.aria-labelledby]="title() && !chromeless() ? titleId : null"
|
|
3165
|
+
[attr.aria-label]="chromeless() ? title() || null : null"
|
|
3157
3166
|
tabindex="-1"
|
|
3158
3167
|
(click)="$event.stopPropagation()"
|
|
3159
3168
|
(keydown.tab)="onTab($event)"
|
|
3160
3169
|
(keydown.shift.tab)="onTab($event)"
|
|
3161
3170
|
>
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
|
|
3168
|
-
|
|
3169
|
-
|
|
3170
|
-
<span class="strct-modal__title" [id]="titleId">{{ title() }}</span>
|
|
3171
|
-
<button
|
|
3172
|
-
type="button"
|
|
3173
|
-
class="strct-modal__close"
|
|
3174
|
-
[attr.aria-label]="closeLabel()"
|
|
3175
|
-
(click)="close()"
|
|
3171
|
+
@if (!chromeless()) {
|
|
3172
|
+
<div
|
|
3173
|
+
class="strct-modal__head"
|
|
3174
|
+
[class.strct-modal__head--drag]="draggable()"
|
|
3175
|
+
(pointerdown)="onHeadPointerDown($event)"
|
|
3176
|
+
(pointermove)="onHeadPointerMove($event)"
|
|
3177
|
+
(pointerup)="onHeadPointerEnd()"
|
|
3178
|
+
(lostpointercapture)="onHeadPointerEnd()"
|
|
3176
3179
|
>
|
|
3177
|
-
<
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
+
<span class="strct-modal__title" [id]="titleId">{{ title() }}</span>
|
|
3181
|
+
<button
|
|
3182
|
+
type="button"
|
|
3183
|
+
class="strct-modal__close"
|
|
3184
|
+
[attr.aria-label]="closeLabel()"
|
|
3185
|
+
(click)="close()"
|
|
3186
|
+
>
|
|
3187
|
+
<strct-icon name="close" [size]="14" />
|
|
3188
|
+
</button>
|
|
3189
|
+
</div>
|
|
3190
|
+
}
|
|
3180
3191
|
<div class="strct-modal__body"><ng-content /></div>
|
|
3181
|
-
@if (!hideFooter()) {
|
|
3192
|
+
@if (!hideFooter() && !chromeless()) {
|
|
3182
3193
|
<div class="strct-modal__foot"><ng-content select="[strctModalFooter]" /></div>
|
|
3183
3194
|
}
|
|
3184
3195
|
</div>
|
|
3185
3196
|
</div>
|
|
3186
3197
|
}
|
|
3187
|
-
`, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3198
|
+
`, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 480px) + 2px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 480px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3188
3199
|
}
|
|
3189
3200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctModal, decorators: [{
|
|
3190
3201
|
type: Component,
|
|
@@ -3203,35 +3214,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
3203
3214
|
#dialog
|
|
3204
3215
|
class="strct-modal__dialog strct-modal__dialog--{{ size() }} {{ panelClass() }}"
|
|
3205
3216
|
[class.strct-modal__dialog--glass]="variant() === 'glass'"
|
|
3217
|
+
[class.strct-modal__dialog--chromeless]="chromeless()"
|
|
3206
3218
|
[style.transform]="dragTransform()"
|
|
3207
3219
|
role="dialog"
|
|
3208
3220
|
aria-modal="true"
|
|
3209
|
-
[attr.aria-labelledby]="title() ? titleId : null"
|
|
3221
|
+
[attr.aria-labelledby]="title() && !chromeless() ? titleId : null"
|
|
3222
|
+
[attr.aria-label]="chromeless() ? title() || null : null"
|
|
3210
3223
|
tabindex="-1"
|
|
3211
3224
|
(click)="$event.stopPropagation()"
|
|
3212
3225
|
(keydown.tab)="onTab($event)"
|
|
3213
3226
|
(keydown.shift.tab)="onTab($event)"
|
|
3214
3227
|
>
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
|
|
3222
|
-
|
|
3223
|
-
<span class="strct-modal__title" [id]="titleId">{{ title() }}</span>
|
|
3224
|
-
<button
|
|
3225
|
-
type="button"
|
|
3226
|
-
class="strct-modal__close"
|
|
3227
|
-
[attr.aria-label]="closeLabel()"
|
|
3228
|
-
(click)="close()"
|
|
3228
|
+
@if (!chromeless()) {
|
|
3229
|
+
<div
|
|
3230
|
+
class="strct-modal__head"
|
|
3231
|
+
[class.strct-modal__head--drag]="draggable()"
|
|
3232
|
+
(pointerdown)="onHeadPointerDown($event)"
|
|
3233
|
+
(pointermove)="onHeadPointerMove($event)"
|
|
3234
|
+
(pointerup)="onHeadPointerEnd()"
|
|
3235
|
+
(lostpointercapture)="onHeadPointerEnd()"
|
|
3229
3236
|
>
|
|
3230
|
-
<
|
|
3231
|
-
|
|
3232
|
-
|
|
3237
|
+
<span class="strct-modal__title" [id]="titleId">{{ title() }}</span>
|
|
3238
|
+
<button
|
|
3239
|
+
type="button"
|
|
3240
|
+
class="strct-modal__close"
|
|
3241
|
+
[attr.aria-label]="closeLabel()"
|
|
3242
|
+
(click)="close()"
|
|
3243
|
+
>
|
|
3244
|
+
<strct-icon name="close" [size]="14" />
|
|
3245
|
+
</button>
|
|
3246
|
+
</div>
|
|
3247
|
+
}
|
|
3233
3248
|
<div class="strct-modal__body"><ng-content /></div>
|
|
3234
|
-
@if (!hideFooter()) {
|
|
3249
|
+
@if (!hideFooter() && !chromeless()) {
|
|
3235
3250
|
<div class="strct-modal__foot"><ng-content select="[strctModalFooter]" /></div>
|
|
3236
3251
|
}
|
|
3237
3252
|
</div>
|
|
@@ -3239,8 +3254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
3239
3254
|
}
|
|
3240
3255
|
`, host: {
|
|
3241
3256
|
'(document:keydown.escape)': 'onEscape()',
|
|
3242
|
-
}, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
|
|
3243
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
3257
|
+
}, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 480px) + 2px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 480px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
|
|
3258
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], chromeless: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeless", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
3244
3259
|
|
|
3245
3260
|
/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
|
|
3246
3261
|
class StrctDrawerFooter {
|
|
@@ -3802,7 +3817,7 @@ function provideStrctWizardDefaults(defaults) {
|
|
|
3802
3817
|
* rail — dashed-ring states (idle ⊙ / active ●⊙ / done ✓), a progress bar
|
|
3803
3818
|
* with an “n/N” counter, and click-back navigation to visited steps — plus an
|
|
3804
3819
|
* optional right column projected via `strctWizardAside` (live summaries).
|
|
3805
|
-
* The rail never flips horizontal: under ~
|
|
3820
|
+
* The rail never flips horizontal: under ~700px of component width it
|
|
3806
3821
|
* collapses to a compact vertical ring column (container query).
|
|
3807
3822
|
*
|
|
3808
3823
|
* <strct-wizard vertical title="Create virtual machine">
|
|
@@ -3810,6 +3825,11 @@ function provideStrctWizardDefaults(defaults) {
|
|
|
3810
3825
|
* …
|
|
3811
3826
|
* <aside strctWizardAside>…live summary…</aside>
|
|
3812
3827
|
* </strct-wizard>
|
|
3828
|
+
*
|
|
3829
|
+
* Hosted in a dialog, the wizard IS the surface: pair `flush` here with
|
|
3830
|
+
* `chromeless` on `strct-modal` (keep `cancelable` — the head's X is gone).
|
|
3831
|
+
* Size the host with width/height only; overriding its `display` turns the
|
|
3832
|
+
* grid into a content-sized flex item and silently breaks the layout.
|
|
3813
3833
|
*/
|
|
3814
3834
|
class StrctWizard {
|
|
3815
3835
|
defaults = inject(STRCT_WIZARD_DEFAULTS, { optional: true });
|
|
@@ -3826,8 +3846,22 @@ class StrctWizard {
|
|
|
3826
3846
|
* this input always wins when bound.
|
|
3827
3847
|
*/
|
|
3828
3848
|
vertical = input(this.defaults?.vertical ?? false, { ...(ngDevMode ? { debugName: "vertical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3849
|
+
/**
|
|
3850
|
+
* The wizard IS the surface: drops the vertical layout's own card
|
|
3851
|
+
* (border / radius / background) and fills its host — pair with
|
|
3852
|
+
* `strct-modal`'s `chromeless` so the rail reaches the dialog edges.
|
|
3853
|
+
* Size the host with width/height only; do not override its `display`.
|
|
3854
|
+
*/
|
|
3855
|
+
flush = input(false, { ...(ngDevMode ? { debugName: "flush" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3829
3856
|
/** Rail heading shown above the progress bar (vertical mode). */
|
|
3830
3857
|
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
3858
|
+
/**
|
|
3859
|
+
* Name the content pane after the active step (vertical mode): the step's
|
|
3860
|
+
* `label` as a heading, its `description` as the lede. In the compact
|
|
3861
|
+
* narrow rail this is the only visible step name. On by default;
|
|
3862
|
+
* `[contentHeader]="false"` opts out.
|
|
3863
|
+
*/
|
|
3864
|
+
contentHeader = input(true, { ...(ngDevMode ? { debugName: "contentHeader" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3831
3865
|
/** Label for the final-step button (default "Finish"). */
|
|
3832
3866
|
finishLabel = input('Finish', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
|
|
3833
3867
|
/** Labels for the Back / Next / Cancel buttons (localizable). */
|
|
@@ -3853,6 +3887,7 @@ class StrctWizard {
|
|
|
3853
3887
|
/** Furthest step reached — drives the progress bar and rail clickability. */
|
|
3854
3888
|
maxVisited = signal(0, ...(ngDevMode ? [{ debugName: "maxVisited" }] : /* istanbul ignore next */ []));
|
|
3855
3889
|
progressPct = computed(() => this.steps().length ? (this.maxVisited() / this.steps().length) * 100 : 0, ...(ngDevMode ? [{ debugName: "progressPct" }] : /* istanbul ignore next */ []));
|
|
3890
|
+
activeStep = computed(() => this.steps()[this.current()] ?? null, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
3856
3891
|
isLast = computed(() => this.current() >= this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
|
|
3857
3892
|
/** Whether the current step permits advancing (its `canAdvance`). */
|
|
3858
3893
|
canAdvance = computed(() => this.steps()[this.current()]?.canAdvance() ?? true, ...(ngDevMode ? [{ debugName: "canAdvance" }] : /* istanbul ignore next */ []));
|
|
@@ -3890,7 +3925,7 @@ class StrctWizard {
|
|
|
3890
3925
|
this.finished.emit();
|
|
3891
3926
|
}
|
|
3892
3927
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3893
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submittingLabel: { classPropertyName: "submittingLabel", publicName: "submittingLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, stepsLabel: { classPropertyName: "stepsLabel", publicName: "stepsLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { properties: { "class.strct-wiz--vertical": "vertical()" }, classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }, { propertyName: "asideDef", first: true, predicate: StrctWizardAside, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3928
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctWizard, isStandalone: true, selector: "strct-wizard", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, contentHeader: { classPropertyName: "contentHeader", publicName: "contentHeader", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submittingLabel: { classPropertyName: "submittingLabel", publicName: "submittingLabel", isSignal: true, isRequired: false, transformFunction: null }, progressLabel: { classPropertyName: "progressLabel", publicName: "progressLabel", isSignal: true, isRequired: false, transformFunction: null }, stepsLabel: { classPropertyName: "stepsLabel", publicName: "stepsLabel", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, cancelable: { classPropertyName: "cancelable", publicName: "cancelable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange", finished: "finished", cancelled: "cancelled", stepChange: "stepChange" }, host: { properties: { "class.strct-wiz--vertical": "vertical()", "class.strct-wiz--flush": "flush()" }, classAttribute: "strct-wiz" }, queries: [{ propertyName: "steps", predicate: StrctStep, isSignal: true }, { propertyName: "asideDef", first: true, predicate: StrctWizardAside, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
3894
3929
|
<div
|
|
3895
3930
|
class="strct-wiz__layout"
|
|
3896
3931
|
[class.strct-wiz__layout--v]="vertical()"
|
|
@@ -3949,6 +3984,14 @@ class StrctWizard {
|
|
|
3949
3984
|
}
|
|
3950
3985
|
|
|
3951
3986
|
<div class="strct-wiz__main">
|
|
3987
|
+
@if (vertical() && contentHeader() && activeStep(); as step) {
|
|
3988
|
+
<div class="strct-wiz__chead">
|
|
3989
|
+
<h2 class="strct-wiz__ctitle">{{ step.label() }}</h2>
|
|
3990
|
+
@if (step.description()) {
|
|
3991
|
+
<p class="strct-wiz__clede">{{ step.description() }}</p>
|
|
3992
|
+
}
|
|
3993
|
+
</div>
|
|
3994
|
+
}
|
|
3952
3995
|
<div class="strct-wiz__content"><ng-content /></div>
|
|
3953
3996
|
|
|
3954
3997
|
<div class="strct-wiz__foot">
|
|
@@ -3982,11 +4025,13 @@ class StrctWizard {
|
|
|
3982
4025
|
</div>
|
|
3983
4026
|
</div>
|
|
3984
4027
|
|
|
3985
|
-
|
|
3986
|
-
<
|
|
3987
|
-
|
|
4028
|
+
@if (asideDef()) {
|
|
4029
|
+
<aside class="strct-wiz__aside">
|
|
4030
|
+
<ng-content select="[strctWizardAside]" />
|
|
4031
|
+
</aside>
|
|
4032
|
+
}
|
|
3988
4033
|
</div>
|
|
3989
|
-
`, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(
|
|
4034
|
+
`, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{padding:18px 24px 13px;border-bottom:1px solid var(--b1)}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3)}.strct-wiz__rail{display:flex;flex-direction:column;padding:20px 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:12px}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 16px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 980px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__vtitle,.strct-wiz__pbar,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}.strct-wiz__chead{padding:14px 18px 11px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3990
4035
|
}
|
|
3991
4036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, decorators: [{
|
|
3992
4037
|
type: Component,
|
|
@@ -4049,6 +4094,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
4049
4094
|
}
|
|
4050
4095
|
|
|
4051
4096
|
<div class="strct-wiz__main">
|
|
4097
|
+
@if (vertical() && contentHeader() && activeStep(); as step) {
|
|
4098
|
+
<div class="strct-wiz__chead">
|
|
4099
|
+
<h2 class="strct-wiz__ctitle">{{ step.label() }}</h2>
|
|
4100
|
+
@if (step.description()) {
|
|
4101
|
+
<p class="strct-wiz__clede">{{ step.description() }}</p>
|
|
4102
|
+
}
|
|
4103
|
+
</div>
|
|
4104
|
+
}
|
|
4052
4105
|
<div class="strct-wiz__content"><ng-content /></div>
|
|
4053
4106
|
|
|
4054
4107
|
<div class="strct-wiz__foot">
|
|
@@ -4082,12 +4135,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
4082
4135
|
</div>
|
|
4083
4136
|
</div>
|
|
4084
4137
|
|
|
4085
|
-
|
|
4086
|
-
<
|
|
4087
|
-
|
|
4138
|
+
@if (asideDef()) {
|
|
4139
|
+
<aside class="strct-wiz__aside">
|
|
4140
|
+
<ng-content select="[strctWizardAside]" />
|
|
4141
|
+
</aside>
|
|
4142
|
+
}
|
|
4088
4143
|
</div>
|
|
4089
|
-
`, host: {
|
|
4090
|
-
|
|
4144
|
+
`, host: {
|
|
4145
|
+
class: 'strct-wiz',
|
|
4146
|
+
'[class.strct-wiz--vertical]': 'vertical()',
|
|
4147
|
+
'[class.strct-wiz--flush]': 'flush()',
|
|
4148
|
+
}, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{padding:18px 24px 13px;border-bottom:1px solid var(--b1)}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3)}.strct-wiz__rail{display:flex;flex-direction:column;padding:20px 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:12px}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 16px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 980px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 480px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__vtitle,.strct-wiz__pbar,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}.strct-wiz__chead{padding:14px 18px 11px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
|
|
4149
|
+
}], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], asideDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWizardAside), { isSignal: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], contentHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHeader", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submittingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submittingLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], stepsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
|
|
4091
4150
|
|
|
4092
4151
|
/**
|
|
4093
4152
|
* Separator rule. Horizontal by default; pass `vertical` for an inline rule.
|