@ascentgl/ads-ui 0.0.105 → 0.0.107
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.
|
@@ -6478,29 +6478,32 @@ class AdsNumericStepComponent {
|
|
|
6478
6478
|
this.isDelivery = input.required();
|
|
6479
6479
|
this.index = input.required();
|
|
6480
6480
|
this.distance = input();
|
|
6481
|
+
this.isMobile = input.required();
|
|
6481
6482
|
}
|
|
6482
6483
|
get isFirst() {
|
|
6483
6484
|
return this.index() === 0;
|
|
6484
6485
|
}
|
|
6485
6486
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6486
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line':
|
|
6487
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line': !isMobile(),\n outermost: isFirst || isLast() || isMobile(),\n 'circle-container-mobile': isMobile(),\n }\"\n>\n @if(!isMobile()) {\n <div\n class=\"dash-line top\"\n [ngClass]=\"{\n top: isLast(),\n bottom: isFirst,\n }\"\n ></div>\n @if (!isLast() && distance()) {\n <div class=\"distance-text\">\n {{ distance() }}\n </div>\n }\n }\n <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container.circle-container-mobile{width:18px}.circle-container.circle-container-mobile .stop-circle{position:absolute;left:0;margin-top:9px}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
6487
6488
|
}
|
|
6488
6489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepComponent, decorators: [{
|
|
6489
6490
|
type: Component,
|
|
6490
|
-
args: [{ selector: 'ads-numeric-step', imports: [NgClass], template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line':
|
|
6491
|
+
args: [{ selector: 'ads-numeric-step', imports: [NgClass], template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line': !isMobile(),\n outermost: isFirst || isLast() || isMobile(),\n 'circle-container-mobile': isMobile(),\n }\"\n>\n @if(!isMobile()) {\n <div\n class=\"dash-line top\"\n [ngClass]=\"{\n top: isLast(),\n bottom: isFirst,\n }\"\n ></div>\n @if (!isLast() && distance()) {\n <div class=\"distance-text\">\n {{ distance() }}\n </div>\n }\n }\n <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container.circle-container-mobile{width:18px}.circle-container.circle-container-mobile .stop-circle{position:absolute;left:0;margin-top:9px}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
|
|
6491
6492
|
}] });
|
|
6492
6493
|
|
|
6493
6494
|
class AdsNumericStepperComponent {
|
|
6494
6495
|
constructor() {
|
|
6495
6496
|
/** Steps array */
|
|
6496
6497
|
this.steps = input.required();
|
|
6498
|
+
/** Is mobile stepper */
|
|
6499
|
+
this.isMobile = input(false);
|
|
6497
6500
|
}
|
|
6498
6501
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepperComponent, isStandalone: false, selector: "ads-numeric-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdsNumericStepComponent, selector: "ads-numeric-step", inputs: ["isLast", "isDelivery", "index", "distance"] }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }] }); }
|
|
6502
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepperComponent, isStandalone: false, selector: "ads-numeric-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\" [class.step-item-mobile]=\"isMobile()\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n [isMobile]=\"isMobile()\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\" [class.dash-container-mobile]=\"isMobile()\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .step-item.step-item-mobile{grid-gap:0}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}.stepper-container .dash-container.dash-container-mobile{display:flex;justify-content:center}.stepper-container .dash-container.dash-container-mobile .dash-line{position:static;transform:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdsNumericStepComponent, selector: "ads-numeric-step", inputs: ["isLast", "isDelivery", "index", "distance", "isMobile"] }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }] }); }
|
|
6500
6503
|
}
|
|
6501
6504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepperComponent, decorators: [{
|
|
6502
6505
|
type: Component,
|
|
6503
|
-
args: [{ selector: 'ads-numeric-stepper', standalone: false, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}\n"] }]
|
|
6506
|
+
args: [{ selector: 'ads-numeric-stepper', standalone: false, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\" [class.step-item-mobile]=\"isMobile()\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n [isMobile]=\"isMobile()\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\" [class.dash-container-mobile]=\"isMobile()\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .step-item.step-item-mobile{grid-gap:0}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}.stepper-container .dash-container.dash-container-mobile{display:flex;justify-content:center}.stepper-container .dash-container.dash-container-mobile .dash-line{position:static;transform:none}\n"] }]
|
|
6504
6507
|
}] });
|
|
6505
6508
|
|
|
6506
6509
|
class AdsNumericStepperModule {
|
|
@@ -6542,11 +6545,11 @@ class AdsWizardStepperComponent {
|
|
|
6542
6545
|
this.focusedStepIndex = this.steps().findIndex((step) => step.status === WizardStepStatus.Current);
|
|
6543
6546
|
}
|
|
6544
6547
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsWizardStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsWizardStepperComponent, isStandalone: false, selector: "ads-wizard-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"isMobile()\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n <div\n class=\"step\"\n [class.step-mobile]=\"isMobile()\"\n [class.focused]=\"step.status === WizardStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first) {\n <div class=\"line-container\" [class.line-container-mobile]=\"isMobile()\">\n <div></div>\n
|
|
6548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsWizardStepperComponent, isStandalone: false, selector: "ads-wizard-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"isMobile()\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n @if(!first && isMobile()) {\n <div class=\"line-container-mobile\">\n <div></div>\n </div>\n }\n\n <div\n class=\"step\"\n [class.step-mobile]=\"isMobile()\"\n [class.focused]=\"step.status === WizardStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first && !isMobile()) {\n <div class=\"line-container\" [class.line-container-mobile]=\"isMobile()\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n [id]=\"step.id\"\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== WizardStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== WizardStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [class.step-icon-mobile]=\"isMobile()\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\" [class.title-mobile]=\"isMobile()\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.wizard-stepper{display:flex;flex-direction:column}.wizard-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.wizard-stepper .step.step-mobile{flex-direction:row;flex:1}.wizard-stepper .step.step-mobile:first-child{flex:none}.wizard-stepper .step .line-container{display:flex;padding:8px 0}.wizard-stepper .step .line-container div{flex:1;height:40px}.wizard-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.wizard-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.wizard-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.wizard-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.wizard-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary);text-align:center}.wizard-stepper .step .step-icon-wrapper .title.title-mobile{font-size:14px;line-height:18px}.wizard-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.wizard-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.wizard-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.wizard-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.wizard-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.wizard-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.wizard-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.wizard-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.wizard-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.wizard-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon.step-icon-mobile{height:30px;width:30px}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon.step-icon-mobile ads-icon,.wizard-stepper .step:not(.focused) ::ng-deep .step-icon.step-icon-mobile svg{width:12px!important;height:12px!important}.wizard-stepper .step:not(.focused) .title{color:var(--color-medium)}.wizard-stepper .step.focused .step-icon{height:72px;width:72px}.wizard-stepper .step.focused .step-icon.step-icon-mobile{height:54px;width:54px}.wizard-stepper .step.focused .step-icon.step-icon-mobile ads-icon,.wizard-stepper .step.focused .step-icon.step-icon-mobile svg{width:18px!important;height:18px!important}.wizard-stepper .step.focused .title{color:var(--color-dark)}.wizard-stepper-mobile{flex-direction:row;flex:1;align-items:center}.wizard-stepper-mobile .line-container-mobile{padding:0 8px;width:100%}.wizard-stepper-mobile .line-container-mobile div{height:2px;width:100%;background-color:var(--color-light)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
6546
6549
|
}
|
|
6547
6550
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsWizardStepperComponent, decorators: [{
|
|
6548
6551
|
type: Component,
|
|
6549
|
-
args: [{ selector: 'ads-wizard-stepper', standalone: false, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"isMobile()\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n <div\n class=\"step\"\n [class.step-mobile]=\"isMobile()\"\n [class.focused]=\"step.status === WizardStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first) {\n <div class=\"line-container\" [class.line-container-mobile]=\"isMobile()\">\n <div></div>\n
|
|
6552
|
+
args: [{ selector: 'ads-wizard-stepper', standalone: false, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"isMobile()\">\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\n @if(!first && isMobile()) {\n <div class=\"line-container-mobile\">\n <div></div>\n </div>\n }\n\n <div\n class=\"step\"\n [class.step-mobile]=\"isMobile()\"\n [class.focused]=\"step.status === WizardStepStatus.Current\"\n [ngClass]=\"{ clickable: step.onClick }\"\n >\n @if (!first && !isMobile()) {\n <div class=\"line-container\" [class.line-container-mobile]=\"isMobile()\">\n <div></div>\n <div></div>\n </div>\n }\n\n <div\n [id]=\"step.id\"\n class=\"step-icon-wrapper\"\n (click)=\"step.onClick && step.status !== WizardStepStatus.Disabled ? step.onClick!(step) : null\"\n [ngClass]=\"step.status\"\n [class.clickable]=\"step.onClick && step.status !== WizardStepStatus.Disabled\"\n >\n <div class=\"step-icon\" [class.step-icon-mobile]=\"isMobile()\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\n </div>\n\n <span class=\"title\" [class.title-mobile]=\"isMobile()\">{{ step.title }}</span>\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex}.wizard-stepper{display:flex;flex-direction:column}.wizard-stepper .step{display:flex;justify-content:center;align-items:center;flex-direction:column}.wizard-stepper .step.step-mobile{flex-direction:row;flex:1}.wizard-stepper .step.step-mobile:first-child{flex:none}.wizard-stepper .step .line-container{display:flex;padding:8px 0}.wizard-stepper .step .line-container div{flex:1;height:40px}.wizard-stepper .step .line-container div:first-child{border-right:1px solid var(--color-light)}.wizard-stepper .step .line-container div:last-child{border-left:1px solid var(--color-light)}.wizard-stepper .step .step-icon-wrapper{display:flex;align-items:center;flex-direction:column}.wizard-stepper .step .step-icon-wrapper .step-icon{border-radius:80px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}.wizard-stepper .step .step-icon-wrapper .title{line-height:21px;color:var(--color-primary);text-align:center}.wizard-stepper .step .step-icon-wrapper .title.title-mobile{font-size:14px;line-height:18px}.wizard-stepper .step .step-icon-wrapper.clickable{cursor:pointer}.wizard-stepper .step .step-icon-wrapper.completed .step-icon{background-color:var(--color-primary)}.wizard-stepper .step .step-icon-wrapper.current .step-icon{background-color:var(--color-secondary)}.wizard-stepper .step .step-icon-wrapper.current .title{color:var(--color-dark)}.wizard-stepper .step .step-icon-wrapper.disabled .step-icon{background-color:var(--color-white);border:2px solid var(--color-light)}.wizard-stepper .step .step-icon-wrapper.disabled .step-icon ::ng-deep ads-icon svg{fill:var(--color-light);stroke:var(--color-light)}.wizard-stepper .step .step-icon-wrapper.disabled .title{color:var(--color-medium)}.wizard-stepper .step .step-icon-wrapper.future .step-icon{background-color:transparent;border:2px solid var(--color-primary)}.wizard-stepper .step .step-icon-wrapper.future .step-icon ::ng-deep ads-icon svg{fill:var(--color-primary);stroke:var(--color-primary)}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon{height:40px;width:40px}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon ads-icon,.wizard-stepper .step:not(.focused) ::ng-deep .step-icon svg{width:16px!important;height:16px!important}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon.step-icon-mobile{height:30px;width:30px}.wizard-stepper .step:not(.focused) ::ng-deep .step-icon.step-icon-mobile ads-icon,.wizard-stepper .step:not(.focused) ::ng-deep .step-icon.step-icon-mobile svg{width:12px!important;height:12px!important}.wizard-stepper .step:not(.focused) .title{color:var(--color-medium)}.wizard-stepper .step.focused .step-icon{height:72px;width:72px}.wizard-stepper .step.focused .step-icon.step-icon-mobile{height:54px;width:54px}.wizard-stepper .step.focused .step-icon.step-icon-mobile ads-icon,.wizard-stepper .step.focused .step-icon.step-icon-mobile svg{width:18px!important;height:18px!important}.wizard-stepper .step.focused .title{color:var(--color-dark)}.wizard-stepper-mobile{flex-direction:row;flex:1;align-items:center}.wizard-stepper-mobile .line-container-mobile{padding:0 8px;width:100%}.wizard-stepper-mobile .line-container-mobile div{height:2px;width:100%;background-color:var(--color-light)}\n"] }]
|
|
6550
6553
|
}] });
|
|
6551
6554
|
|
|
6552
6555
|
class AdsWizardStepperModule {
|