@ascentgl/ads-ui 0.0.105 → 0.0.106
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.
|
@@ -6542,11 +6542,11 @@ class AdsWizardStepperComponent {
|
|
|
6542
6542
|
this.focusedStepIndex = this.steps().findIndex((step) => step.status === WizardStepStatus.Current);
|
|
6543
6543
|
}
|
|
6544
6544
|
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
|
|
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 @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
6546
|
}
|
|
6547
6547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsWizardStepperComponent, decorators: [{
|
|
6548
6548
|
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
|
|
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 @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
6550
|
}] });
|
|
6551
6551
|
|
|
6552
6552
|
class AdsWizardStepperModule {
|