@akcelik/strct 1.15.0 → 1.16.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.
|
@@ -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 .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 .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 {
|
|
@@ -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,6 +3846,13 @@ 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 */ []));
|
|
3831
3858
|
/** Label for the final-step button (default "Finish"). */
|
|
@@ -3890,7 +3917,7 @@ class StrctWizard {
|
|
|
3890
3917
|
this.finished.emit();
|
|
3891
3918
|
}
|
|
3892
3919
|
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: `
|
|
3920
|
+
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 }, 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
3921
|
<div
|
|
3895
3922
|
class="strct-wiz__layout"
|
|
3896
3923
|
[class.strct-wiz__layout--v]="vertical()"
|
|
@@ -3982,11 +4009,13 @@ class StrctWizard {
|
|
|
3982
4009
|
</div>
|
|
3983
4010
|
</div>
|
|
3984
4011
|
|
|
3985
|
-
|
|
3986
|
-
<
|
|
3987
|
-
|
|
4012
|
+
@if (asideDef()) {
|
|
4013
|
+
<aside class="strct-wiz__aside">
|
|
4014
|
+
<ng-content select="[strctWizardAside]" />
|
|
4015
|
+
</aside>
|
|
4016
|
+
}
|
|
3988
4017
|
</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(0,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(0,1fr) 280px}.strct-wiz__layout--v .strct-wiz__aside{display:block;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__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}@container (max-width: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v .strct-wiz__aside{display:none}}@container (max-width: 720px){.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}}@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 });
|
|
4018
|
+
`, 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(0,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(0,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__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: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 720px){.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}}@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
4019
|
}
|
|
3991
4020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctWizard, decorators: [{
|
|
3992
4021
|
type: Component,
|
|
@@ -4082,12 +4111,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
|
|
|
4082
4111
|
</div>
|
|
4083
4112
|
</div>
|
|
4084
4113
|
|
|
4085
|
-
|
|
4086
|
-
<
|
|
4087
|
-
|
|
4114
|
+
@if (asideDef()) {
|
|
4115
|
+
<aside class="strct-wiz__aside">
|
|
4116
|
+
<ng-content select="[strctWizardAside]" />
|
|
4117
|
+
</aside>
|
|
4118
|
+
}
|
|
4088
4119
|
</div>
|
|
4089
|
-
`, host: {
|
|
4090
|
-
|
|
4120
|
+
`, host: {
|
|
4121
|
+
class: 'strct-wiz',
|
|
4122
|
+
'[class.strct-wiz--vertical]': 'vertical()',
|
|
4123
|
+
'[class.strct-wiz--flush]': 'flush()',
|
|
4124
|
+
}, 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(0,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(0,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__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: 800px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 720px){.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}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
|
|
4125
|
+
}], 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 }] }], 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
4126
|
|
|
4092
4127
|
/**
|
|
4093
4128
|
* Separator rule. Horizontal by default; pass `vertical` for an inline rule.
|