@ascentgl/ads-ui 0.0.147 → 0.0.149
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.
|
@@ -5815,11 +5815,11 @@ class AdsModalComponent extends AbstractWindowResizeComponent {
|
|
|
5815
5815
|
this.dialogRef.close(ModalActionType.Delete);
|
|
5816
5816
|
}
|
|
5817
5817
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsModalComponent, deps: [{ token: i1$4.MatDialogRef }, { token: i1.AdsIconRegistry }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5818
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsModalComponent, isStandalone: false, selector: "ads-modal", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title [id]=\"id + '-title'\">\r\n @if (data.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\r\n }\r\n\r\n <span class=\"header-text\">{{ data.title }}</span>\r\n\r\n\r\n @if (!data.hideCrossIcon) {\r\n <div class=\"cross-icon-container\" [id]=\"id + '-cross-icon'\">\r\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onCancel()\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<div mat-dialog-content [id]=\"id + '-content'\" [class.mobile]=\"isMobile()\">\r\n @if (data.contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\r\n }\r\n
|
|
5818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsModalComponent, isStandalone: false, selector: "ads-modal", usesInheritance: true, ngImport: i0, template: "<div mat-dialog-title [id]=\"id + '-title'\">\r\n @if (data.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\r\n }\r\n\r\n <span class=\"header-text\">{{ data.title }}</span>\r\n\r\n\r\n @if (!data.hideCrossIcon) {\r\n <div class=\"cross-icon-container\" [id]=\"id + '-cross-icon'\">\r\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onCancel()\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<div mat-dialog-content [id]=\"id + '-content'\" [class.mobile]=\"isMobile()\">\r\n @if (data.contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\r\n } @else {\r\n <span [innerHTML]=\"data.content\"></span>\r\n }\r\n</div>\r\n\r\n<div mat-dialog-actions [class.actions-centered]=\"data.actionsCentered\" [class.mobile]=\"isMobile()\">\r\n @if (data.actionsTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\r\n } @else {\r\n @if (data.actionHint) {\r\n <div class=\"action-hint\" [class.mobile]=\"isMobile()\" [id]=\"id + '-action-hint'\">{{ data.actionHint }}</div>\r\n }\r\n <div class=\"actions-container\" [class.mobile]=\"isMobile()\">\r\n @if (data.showDeleteButton) {\r\n <ads-button\r\n [variant]=\"data.deleteButtonVariant ?? 'error'\"\r\n (click)=\"onDelete()\"\r\n [id]=\"id + '-action-delete'\"\r\n [size]=\"isMobile() ? 'sm' : 'base'\"\r\n > @if (data.deleteButtonText) {\r\n {{ data.deleteButtonText }}\r\n } @else {\r\n {{ 'Delete' }}\r\n }\r\n </ads-button>\r\n }\r\n @if (!data.hideCancelButton) {\r\n <ads-button\r\n [variant]=\"data.cancelButtonVariant ?? 'secondary'\"\r\n (click)=\"onCancel()\"\r\n [id]=\"id + '-action-secondary'\"\r\n [size]=\"isMobile() ? 'sm' : 'base'\"\r\n >\r\n @if (data.cancelButtonText) {\r\n {{ data.cancelButtonText }}\r\n } @else {\r\n {{ 'Cancel' }}\r\n }\r\n </ads-button>\r\n }\r\n <ads-button\r\n [disabled]=\"!!data.disabledConfirmButton\"\r\n [variant]=\"data.confirmButtonVariant ?? 'primary'\"\r\n (click)=\"onSubmit()\"\r\n [id]=\"id + '-action-primary'\"\r\n [size]=\"isMobile() ? 'sm' : 'base'\"\r\n >\r\n @if (data.confirmButtonText) {\r\n {{ data.confirmButtonText }}\r\n } @else {\r\n Save\r\n }\r\n </ads-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mdc-dialog-container-shape: 10px;--mdc-dialog-container-color: var(--color-white);--mat-dialog-container-min-width: 288px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{display:flex;justify-content:space-between;--mdc-dialog-subhead-color: var(--color-dark);--mdc-dialog-subhead-line-height: 26px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .header-text{padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{display:flex;align-items:center;padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{cursor:pointer;width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content.mobile{padding:0 16px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mdc-dialog-supporting-text-color: var(--color-medium);--mdc-dialog-supporting-text-line-height: 21px;--mdc-dialog-supporting-text-size: 16px;--mdc-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);gap:16px;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.actions-centered{justify-content:center}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.mobile{gap:8px;padding:24px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container{gap:16px;display:flex;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container.mobile{gap:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint{flex:1;display:flex;justify-content:flex-end;color:var(--color-medium);line-height:21px;font-size:16px;text-align:right}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint.mobile{font-size:14px;line-height:18px}\n"], dependencies: [{ kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
5819
5819
|
}
|
|
5820
5820
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsModalComponent, decorators: [{
|
|
5821
5821
|
type: Component,
|
|
5822
|
-
args: [{ selector: 'ads-modal', standalone: false, template: "<div mat-dialog-title [id]=\"id + '-title'\">\r\n @if (data.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\r\n }\r\n\r\n <span class=\"header-text\">{{ data.title }}</span>\r\n\r\n\r\n @if (!data.hideCrossIcon) {\r\n <div class=\"cross-icon-container\" [id]=\"id + '-cross-icon'\">\r\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onCancel()\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<div mat-dialog-content [id]=\"id + '-content'\" [class.mobile]=\"isMobile()\">\r\n @if (data.contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\r\n }\r\n
|
|
5822
|
+
args: [{ selector: 'ads-modal', standalone: false, template: "<div mat-dialog-title [id]=\"id + '-title'\">\r\n @if (data.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.headerTemplate; context: { data: data.templateData }\" />\r\n }\r\n\r\n <span class=\"header-text\">{{ data.title }}</span>\r\n\r\n\r\n @if (!data.hideCrossIcon) {\r\n <div class=\"cross-icon-container\" [id]=\"id + '-cross-icon'\">\r\n <ads-icon name=\"cross\" size=\"xxs\" stroke=\"iconPrimary\" (click)=\"onCancel()\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<div mat-dialog-content [id]=\"id + '-content'\" [class.mobile]=\"isMobile()\">\r\n @if (data.contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.contentTemplate; context: { data: data.templateData }\" />\r\n } @else {\r\n <span [innerHTML]=\"data.content\"></span>\r\n }\r\n</div>\r\n\r\n<div mat-dialog-actions [class.actions-centered]=\"data.actionsCentered\" [class.mobile]=\"isMobile()\">\r\n @if (data.actionsTemplate) {\r\n <ng-container *ngTemplateOutlet=\"data.actionsTemplate; context: { data: data.templateData }\" />\r\n } @else {\r\n @if (data.actionHint) {\r\n <div class=\"action-hint\" [class.mobile]=\"isMobile()\" [id]=\"id + '-action-hint'\">{{ data.actionHint }}</div>\r\n }\r\n <div class=\"actions-container\" [class.mobile]=\"isMobile()\">\r\n @if (data.showDeleteButton) {\r\n <ads-button\r\n [variant]=\"data.deleteButtonVariant ?? 'error'\"\r\n (click)=\"onDelete()\"\r\n [id]=\"id + '-action-delete'\"\r\n [size]=\"isMobile() ? 'sm' : 'base'\"\r\n > @if (data.deleteButtonText) {\r\n {{ data.deleteButtonText }}\r\n } @else {\r\n {{ 'Delete' }}\r\n }\r\n </ads-button>\r\n }\r\n @if (!data.hideCancelButton) {\r\n <ads-button\r\n [variant]=\"data.cancelButtonVariant ?? 'secondary'\"\r\n (click)=\"onCancel()\"\r\n [id]=\"id + '-action-secondary'\"\r\n [size]=\"isMobile() ? 'sm' : 'base'\"\r\n >\r\n @if (data.cancelButtonText) {\r\n {{ data.cancelButtonText }}\r\n } @else {\r\n {{ 'Cancel' }}\r\n }\r\n </ads-button>\r\n }\r\n <ads-button\r\n [disabled]=\"!!data.disabledConfirmButton\"\r\n [variant]=\"data.confirmButtonVariant ?? 'primary'\"\r\n (click)=\"onSubmit()\"\r\n [id]=\"id + '-action-primary'\"\r\n [size]=\"isMobile() ? 'sm' : 'base'\"\r\n >\r\n @if (data.confirmButtonText) {\r\n {{ data.confirmButtonText }}\r\n } @else {\r\n Save\r\n }\r\n </ads-button>\r\n </div>\r\n }\r\n</div>\r\n", styles: ["::ng-deep .mat-mdc-dialog-surface{--mdc-dialog-container-shape: 10px;--mdc-dialog-container-color: var(--color-white);--mat-dialog-container-min-width: 288px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title{display:flex;justify-content:space-between;--mdc-dialog-subhead-color: var(--color-dark);--mdc-dialog-subhead-line-height: 26px;--mdc-dialog-subhead-size: 20px;--mdc-dialog-subhead-weight: 600}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title:before{content:none}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .header-text{padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container{display:flex;align-items:center;padding-right:16px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon,::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-title .cross-icon-container ads-icon>svg{cursor:pointer;width:16px!important;height:16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content.mobile{padding:0 16px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-container .mat-mdc-dialog-title+.mat-mdc-dialog-content{padding-top:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-content{letter-spacing:normal!important;--mdc-dialog-supporting-text-color: var(--color-medium);--mdc-dialog-supporting-text-line-height: 21px;--mdc-dialog-supporting-text-size: 16px;--mdc-dialog-supporting-text-weight: 400}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions{border-top:1px solid var(--color-light);gap:16px;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.actions-centered{justify-content:center}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions.mobile{gap:8px;padding:24px 16px!important}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container{gap:16px;display:flex;justify-content:flex-end}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .actions-container.mobile{gap:8px}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint{flex:1;display:flex;justify-content:flex-end;color:var(--color-medium);line-height:21px;font-size:16px;text-align:right}::ng-deep .mat-mdc-dialog-surface .mat-mdc-dialog-actions .action-hint.mobile{font-size:14px;line-height:18px}\n"] }]
|
|
5823
5823
|
}], ctorParameters: () => [{ type: i1$4.MatDialogRef }, { type: i1.AdsIconRegistry }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
5824
5824
|
type: Inject,
|
|
5825
5825
|
args: [MAT_DIALOG_DATA]
|
|
@@ -6763,6 +6763,10 @@ class AdsWizardStepperComponent extends AbstractWindowResizeComponent {
|
|
|
6763
6763
|
* The steps to display
|
|
6764
6764
|
*/
|
|
6765
6765
|
this.steps = input.required();
|
|
6766
|
+
/**
|
|
6767
|
+
* Make stepper horizontal manually
|
|
6768
|
+
*/
|
|
6769
|
+
this.horizontalView = input(false);
|
|
6766
6770
|
/** @ignore */
|
|
6767
6771
|
this.WizardStepStatus = WizardStepStatus;
|
|
6768
6772
|
}
|
|
@@ -6771,11 +6775,11 @@ class AdsWizardStepperComponent extends AbstractWindowResizeComponent {
|
|
|
6771
6775
|
this.focusedStepIndex = this.steps().findIndex((step) => step.status === WizardStepStatus.Current);
|
|
6772
6776
|
}
|
|
6773
6777
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsWizardStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6774
|
-
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 } }, usesInheritance: true, ngImport: i0, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"isMobile()\">\r\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\r\n @if(!first && isMobile()) {\r\n <div class=\"line-container-mobile\">\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"step\"\r\n [class.step-mobile]=\"isMobile()\"\r\n [class.focused]=\"step.status === WizardStepStatus.Current\"\r\n [ngClass]=\"{ clickable: step.onClick }\"\r\n >\r\n @if (!first && !isMobile()) {\r\n <div class=\"line-container\" [class.line-container-mobile]=\"isMobile()\">\r\n <div></div>\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n [id]=\"step.id\"\r\n class=\"step-icon-wrapper\"\r\n (click)=\"step.onClick && step.status !== WizardStepStatus.Disabled ? step.onClick!(step) : null\"\r\n [ngClass]=\"step.status\"\r\n [class.clickable]=\"step.onClick && step.status !== WizardStepStatus.Disabled\"\r\n >\r\n <div class=\"step-icon\" [class.step-icon-mobile]=\"isMobile()\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\r\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\r\n </div>\r\n\r\n <span class=\"title\" [class.title-mobile]=\"isMobile()\">{{ step.title }}</span>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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.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"] }] }); }
|
|
6778
|
+
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 }, horizontalView: { classPropertyName: "horizontalView", publicName: "horizontalView", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"(isMobile() || horizontalView())\" [class.wizard-stepper-horizontal]=\"horizontalView()\">\r\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\r\n @if(!first && (isMobile() || horizontalView())) {\r\n <div class=\"line-container-mobile\">\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"step\"\r\n [class.step-mobile]=\"(isMobile() || horizontalView())\"\r\n [class.focused]=\"step.status === WizardStepStatus.Current\"\r\n [ngClass]=\"{ clickable: step.onClick }\"\r\n >\r\n @if (!first && (!isMobile() && !horizontalView())) {\r\n <div class=\"line-container\" [class.line-container-mobile]=\"(isMobile() || horizontalView())\">\r\n <div></div>\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n [id]=\"step.id\"\r\n class=\"step-icon-wrapper\"\r\n (click)=\"step.onClick && step.status !== WizardStepStatus.Disabled ? step.onClick!(step) : null\"\r\n [ngClass]=\"step.status\"\r\n [class.clickable]=\"step.onClick && step.status !== WizardStepStatus.Disabled\"\r\n >\r\n <div class=\"step-icon\" [class.step-icon-mobile]=\"(isMobile() || horizontalView())\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\r\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\r\n </div>\r\n\r\n <span class=\"title\" [class.title-mobile]=\"(isMobile() || horizontalView())\">{{ step.title }}</span>\r\n\r\n @if(step.date) {\r\n <span class=\"title subtitle\">{{ step.date }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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 .subtitle{font-size:.675rem;line-height:16px}.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)}.wizard-stepper-horizontal{align-items:baseline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.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"] }] }); }
|
|
6775
6779
|
}
|
|
6776
6780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsWizardStepperComponent, decorators: [{
|
|
6777
6781
|
type: Component,
|
|
6778
|
-
args: [{ selector: 'ads-wizard-stepper', standalone: false, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"isMobile()\">\r\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\r\n @if(!first && isMobile()) {\r\n <div class=\"line-container-mobile\">\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"step\"\r\n [class.step-mobile]=\"isMobile()\"\r\n [class.focused]=\"step.status === WizardStepStatus.Current\"\r\n [ngClass]=\"{ clickable: step.onClick }\"\r\n >\r\n @if (!first && !isMobile()) {\r\n <div class=\"line-container\" [class.line-container-mobile]=\"isMobile()\">\r\n <div></div>\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n [id]=\"step.id\"\r\n class=\"step-icon-wrapper\"\r\n (click)=\"step.onClick && step.status !== WizardStepStatus.Disabled ? step.onClick!(step) : null\"\r\n [ngClass]=\"step.status\"\r\n [class.clickable]=\"step.onClick && step.status !== WizardStepStatus.Disabled\"\r\n >\r\n <div class=\"step-icon\" [class.step-icon-mobile]=\"isMobile()\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\r\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\r\n </div>\r\n\r\n <span class=\"title\" [class.title-mobile]=\"isMobile()\">{{ step.title }}</span>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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"] }]
|
|
6782
|
+
args: [{ selector: 'ads-wizard-stepper', standalone: false, template: "<div class=\"wizard-stepper\" [class.wizard-stepper-mobile]=\"(isMobile() || horizontalView())\" [class.wizard-stepper-horizontal]=\"horizontalView()\">\r\n @for (step of steps(); track index; let first = $first; let last = $last; let index = $index) {\r\n @if(!first && (isMobile() || horizontalView())) {\r\n <div class=\"line-container-mobile\">\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"step\"\r\n [class.step-mobile]=\"(isMobile() || horizontalView())\"\r\n [class.focused]=\"step.status === WizardStepStatus.Current\"\r\n [ngClass]=\"{ clickable: step.onClick }\"\r\n >\r\n @if (!first && (!isMobile() && !horizontalView())) {\r\n <div class=\"line-container\" [class.line-container-mobile]=\"(isMobile() || horizontalView())\">\r\n <div></div>\r\n <div></div>\r\n </div>\r\n }\r\n\r\n <div\r\n [id]=\"step.id\"\r\n class=\"step-icon-wrapper\"\r\n (click)=\"step.onClick && step.status !== WizardStepStatus.Disabled ? step.onClick!(step) : null\"\r\n [ngClass]=\"step.status\"\r\n [class.clickable]=\"step.onClick && step.status !== WizardStepStatus.Disabled\"\r\n >\r\n <div class=\"step-icon\" [class.step-icon-mobile]=\"(isMobile() || horizontalView())\" [matTooltip]=\"step.tooltip || ''\" [matTooltipDisabled]=\"!step.tooltip\">\r\n <ads-icon [name]=\"step.icon\" size=\"sm\" stroke=\"white\" theme=\"white\" />\r\n </div>\r\n\r\n <span class=\"title\" [class.title-mobile]=\"(isMobile() || horizontalView())\">{{ step.title }}</span>\r\n\r\n @if(step.date) {\r\n <span class=\"title subtitle\">{{ step.date }}</span>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\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 .subtitle{font-size:.675rem;line-height:16px}.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)}.wizard-stepper-horizontal{align-items:baseline}\n"] }]
|
|
6779
6783
|
}], ctorParameters: () => [] });
|
|
6780
6784
|
|
|
6781
6785
|
class AdsWizardStepperModule {
|