@ascentgl/ads-ui 21.110.0 → 21.112.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.
|
@@ -11122,11 +11122,11 @@ class AdsHorizontalStepperComponent {
|
|
|
11122
11122
|
this.stepClick.emit({ step, index });
|
|
11123
11123
|
}
|
|
11124
11124
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsHorizontalStepperComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsHorizontalStepperComponent, isStandalone: false, selector: "ads-horizontal-stepper", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick" }, ngImport: i0, template: "<div class=\"horizontal-stepper-container\" [id]=\"id()\">\n <div class=\"stepper-row\">\n @for (step of steps(); track $index; let last = $last) {\n <div class=\"step-icon\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n @switch (step.status) {\n @case (HorizontalStepStatus.Planned) {\n <div class=\"step-indicator step-indicator--planned\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.InProgress) {\n <div class=\"step-indicator step-indicator--in-progress\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.Completed) {\n <ads-icon name=\"check_circle_filled\"\n [size]=\"isBaseSize() ? 'xs' : 'xxs'\" />\n }\n }\n </div>\n @if (!last) {\n <div class=\"step-line\"\n [class.mobile]=\"!isBaseSize()\"\n [class.completed]=\"step.status === HorizontalStepStatus.Completed\"></div>\n }\n }\n </div>\n <div class=\"stepper-row titles-row\">\n @for (step of steps(); track $index; let first = $first; let last = $last) {\n <div class=\"title-anchor\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n <span class=\"step-title\"\n [class.mobile]=\"!isBaseSize()\"\n [class.clickable]=\"step.targetSelector\">{{ step.title }}</span>\n </div>\n @if (!last) {\n <div class=\"title-spacer\"></div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.horizontal-stepper-container .stepper-row{display:flex;align-items:center;gap:4px}.horizontal-stepper-container .titles-row{margin-top:4px;align-items:flex-start}.horizontal-stepper-container .step-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.horizontal-stepper-container .step-icon.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator{width:20px;height:20px;border-radius:50%;box-sizing:border-box}.horizontal-stepper-container .step-indicator.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator--planned{border:4px solid var(--color-light)}.horizontal-stepper-container .step-indicator--planned.mobile{border-width:3px}.horizontal-stepper-container .step-indicator--in-progress{border:8px solid var(--color-secondary)}.horizontal-stepper-container .step-indicator--in-progress.mobile{border-width:5px}.horizontal-stepper-container .step-line{flex:1;height:4px;background-color:var(--color-light);border-radius:80px;min-width:8px}.horizontal-stepper-container .step-line.completed{background-color:var(--color-secondary)}.horizontal-stepper-container .step-line.mobile{height:3px}.horizontal-stepper-container .title-anchor{flex-shrink:0;width:20px;display:flex;justify-content:center;overflow:visible}.horizontal-stepper-container .title-anchor.first{justify-content:flex-start}.horizontal-stepper-container .title-anchor.last{justify-content:flex-end}.horizontal-stepper-container .title-anchor.mobile{width:14px}.horizontal-stepper-container .title-spacer{flex:1;min-width:8px}.horizontal-stepper-container .step-title{text-align:center;white-space:nowrap;color:var(--color-medium);font-size:16px;font-style:normal;font-weight:400;line-height:21px}.horizontal-stepper-container .step-title.mobile{font-size:14px;font-weight:400;line-height:18px}.horizontal-stepper-container .step-title.clickable{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11125
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsHorizontalStepperComponent, isStandalone: false, selector: "ads-horizontal-stepper", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepClick: "stepClick" }, ngImport: i0, template: "<div class=\"horizontal-stepper-container\" [id]=\"id()\">\n <div class=\"stepper-row\">\n @for (step of steps(); track $index; let last = $last) {\n <div class=\"step-icon\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n @switch (step.status) {\n @case (HorizontalStepStatus.Planned) {\n <div class=\"step-indicator step-indicator--planned\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.InProgress) {\n <div class=\"step-indicator step-indicator--in-progress\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.Completed) {\n <ads-icon name=\"check_circle_filled\"\n [size]=\"isBaseSize() ? 'xs' : 'xxs'\" />\n }\n }\n </div>\n @if (!last) {\n <div class=\"step-line\"\n [class.mobile]=\"!isBaseSize()\"\n [class.completed]=\"step.status === HorizontalStepStatus.Completed\"></div>\n }\n }\n </div>\n <div class=\"stepper-row titles-row\">\n @for (step of steps(); track $index; let first = $first; let last = $last) {\n <div class=\"title-anchor\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n <span class=\"step-title\"\n [class.mobile]=\"!isBaseSize()\"\n [class.clickable]=\"step.targetSelector\">{{ step.title }}</span>\n </div>\n @if (!last) {\n <div class=\"title-spacer\"></div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.horizontal-stepper-container .stepper-row{display:flex;align-items:center;gap:4px}.horizontal-stepper-container .titles-row{margin-top:4px;align-items:flex-start}.horizontal-stepper-container .step-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.horizontal-stepper-container .step-icon.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator{width:20px;height:20px;border-radius:50%;box-sizing:border-box}.horizontal-stepper-container .step-indicator.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator--planned{border:4px solid var(--color-light)}.horizontal-stepper-container .step-indicator--planned.mobile{border-width:3px}.horizontal-stepper-container .step-indicator--in-progress{border:8px solid var(--color-secondary)}.horizontal-stepper-container .step-indicator--in-progress.mobile{border-width:5px}.horizontal-stepper-container .step-line{flex:1;height:4px;background-color:var(--color-light);border-radius:80px;min-width:8px}.horizontal-stepper-container .step-line.completed{background-color:var(--color-secondary)}.horizontal-stepper-container .step-line.mobile{height:3px}.horizontal-stepper-container .title-anchor{flex-shrink:0;width:20px;display:flex;justify-content:center;overflow:visible}.horizontal-stepper-container .title-anchor.first{justify-content:flex-start}.horizontal-stepper-container .title-anchor.last{justify-content:flex-end}.horizontal-stepper-container .title-anchor.mobile{width:14px}.horizontal-stepper-container .title-spacer{flex:1;min-width:8px}.horizontal-stepper-container .step-title{text-align:center;white-space:nowrap;color:var(--color-medium);font-size:16px;font-style:normal;font-weight:400;line-height:21px}.horizontal-stepper-container .step-title.mobile{font-size:14px;font-weight:400;line-height:18px}.horizontal-stepper-container .step-title.clickable{cursor:pointer}@media(max-width:480px){.horizontal-stepper-container .titles-row .title-anchor{flex:1 1 0;min-width:0;width:auto}.horizontal-stepper-container .titles-row .title-spacer{display:none}.horizontal-stepper-container .titles-row .step-title{white-space:normal;word-break:break-word}.horizontal-stepper-container .titles-row .title-anchor.first .step-title{text-align:left}.horizontal-stepper-container .titles-row .title-anchor.last .step-title{text-align:right}}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11126
11126
|
}
|
|
11127
11127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsHorizontalStepperComponent, decorators: [{
|
|
11128
11128
|
type: Component,
|
|
11129
|
-
args: [{ selector: 'ads-horizontal-stepper', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"horizontal-stepper-container\" [id]=\"id()\">\n <div class=\"stepper-row\">\n @for (step of steps(); track $index; let last = $last) {\n <div class=\"step-icon\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n @switch (step.status) {\n @case (HorizontalStepStatus.Planned) {\n <div class=\"step-indicator step-indicator--planned\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.InProgress) {\n <div class=\"step-indicator step-indicator--in-progress\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.Completed) {\n <ads-icon name=\"check_circle_filled\"\n [size]=\"isBaseSize() ? 'xs' : 'xxs'\" />\n }\n }\n </div>\n @if (!last) {\n <div class=\"step-line\"\n [class.mobile]=\"!isBaseSize()\"\n [class.completed]=\"step.status === HorizontalStepStatus.Completed\"></div>\n }\n }\n </div>\n <div class=\"stepper-row titles-row\">\n @for (step of steps(); track $index; let first = $first; let last = $last) {\n <div class=\"title-anchor\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n <span class=\"step-title\"\n [class.mobile]=\"!isBaseSize()\"\n [class.clickable]=\"step.targetSelector\">{{ step.title }}</span>\n </div>\n @if (!last) {\n <div class=\"title-spacer\"></div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.horizontal-stepper-container .stepper-row{display:flex;align-items:center;gap:4px}.horizontal-stepper-container .titles-row{margin-top:4px;align-items:flex-start}.horizontal-stepper-container .step-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.horizontal-stepper-container .step-icon.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator{width:20px;height:20px;border-radius:50%;box-sizing:border-box}.horizontal-stepper-container .step-indicator.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator--planned{border:4px solid var(--color-light)}.horizontal-stepper-container .step-indicator--planned.mobile{border-width:3px}.horizontal-stepper-container .step-indicator--in-progress{border:8px solid var(--color-secondary)}.horizontal-stepper-container .step-indicator--in-progress.mobile{border-width:5px}.horizontal-stepper-container .step-line{flex:1;height:4px;background-color:var(--color-light);border-radius:80px;min-width:8px}.horizontal-stepper-container .step-line.completed{background-color:var(--color-secondary)}.horizontal-stepper-container .step-line.mobile{height:3px}.horizontal-stepper-container .title-anchor{flex-shrink:0;width:20px;display:flex;justify-content:center;overflow:visible}.horizontal-stepper-container .title-anchor.first{justify-content:flex-start}.horizontal-stepper-container .title-anchor.last{justify-content:flex-end}.horizontal-stepper-container .title-anchor.mobile{width:14px}.horizontal-stepper-container .title-spacer{flex:1;min-width:8px}.horizontal-stepper-container .step-title{text-align:center;white-space:nowrap;color:var(--color-medium);font-size:16px;font-style:normal;font-weight:400;line-height:21px}.horizontal-stepper-container .step-title.mobile{font-size:14px;font-weight:400;line-height:18px}.horizontal-stepper-container .step-title.clickable{cursor:pointer}\n"] }]
|
|
11129
|
+
args: [{ selector: 'ads-horizontal-stepper', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"horizontal-stepper-container\" [id]=\"id()\">\n <div class=\"stepper-row\">\n @for (step of steps(); track $index; let last = $last) {\n <div class=\"step-icon\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n @switch (step.status) {\n @case (HorizontalStepStatus.Planned) {\n <div class=\"step-indicator step-indicator--planned\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.InProgress) {\n <div class=\"step-indicator step-indicator--in-progress\"\n [class.mobile]=\"!isBaseSize()\"></div>\n }\n @case (HorizontalStepStatus.Completed) {\n <ads-icon name=\"check_circle_filled\"\n [size]=\"isBaseSize() ? 'xs' : 'xxs'\" />\n }\n }\n </div>\n @if (!last) {\n <div class=\"step-line\"\n [class.mobile]=\"!isBaseSize()\"\n [class.completed]=\"step.status === HorizontalStepStatus.Completed\"></div>\n }\n }\n </div>\n <div class=\"stepper-row titles-row\">\n @for (step of steps(); track $index; let first = $first; let last = $last) {\n <div class=\"title-anchor\"\n [class.first]=\"first\"\n [class.last]=\"last\"\n [class.mobile]=\"!isBaseSize()\"\n (click)=\"onStepClick(step, $index)\">\n <span class=\"step-title\"\n [class.mobile]=\"!isBaseSize()\"\n [class.clickable]=\"step.targetSelector\">{{ step.title }}</span>\n </div>\n @if (!last) {\n <div class=\"title-spacer\"></div>\n }\n }\n </div>\n</div>\n", styles: [":host{display:block}.horizontal-stepper-container .stepper-row{display:flex;align-items:center;gap:4px}.horizontal-stepper-container .titles-row{margin-top:4px;align-items:flex-start}.horizontal-stepper-container .step-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.horizontal-stepper-container .step-icon.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator{width:20px;height:20px;border-radius:50%;box-sizing:border-box}.horizontal-stepper-container .step-indicator.mobile{width:14px;height:14px}.horizontal-stepper-container .step-indicator--planned{border:4px solid var(--color-light)}.horizontal-stepper-container .step-indicator--planned.mobile{border-width:3px}.horizontal-stepper-container .step-indicator--in-progress{border:8px solid var(--color-secondary)}.horizontal-stepper-container .step-indicator--in-progress.mobile{border-width:5px}.horizontal-stepper-container .step-line{flex:1;height:4px;background-color:var(--color-light);border-radius:80px;min-width:8px}.horizontal-stepper-container .step-line.completed{background-color:var(--color-secondary)}.horizontal-stepper-container .step-line.mobile{height:3px}.horizontal-stepper-container .title-anchor{flex-shrink:0;width:20px;display:flex;justify-content:center;overflow:visible}.horizontal-stepper-container .title-anchor.first{justify-content:flex-start}.horizontal-stepper-container .title-anchor.last{justify-content:flex-end}.horizontal-stepper-container .title-anchor.mobile{width:14px}.horizontal-stepper-container .title-spacer{flex:1;min-width:8px}.horizontal-stepper-container .step-title{text-align:center;white-space:nowrap;color:var(--color-medium);font-size:16px;font-style:normal;font-weight:400;line-height:21px}.horizontal-stepper-container .step-title.mobile{font-size:14px;font-weight:400;line-height:18px}.horizontal-stepper-container .step-title.clickable{cursor:pointer}@media(max-width:480px){.horizontal-stepper-container .titles-row .title-anchor{flex:1 1 0;min-width:0;width:auto}.horizontal-stepper-container .titles-row .title-spacer{display:none}.horizontal-stepper-container .titles-row .step-title{white-space:normal;word-break:break-word}.horizontal-stepper-container .titles-row .title-anchor.first .step-title{text-align:left}.horizontal-stepper-container .titles-row .title-anchor.last .step-title{text-align:right}}\n"] }]
|
|
11130
11130
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stepClick: [{
|
|
11131
11131
|
type: Output
|
|
11132
11132
|
}] } });
|
|
@@ -11727,6 +11727,8 @@ class AdsTabsComponent {
|
|
|
11727
11727
|
this.tabGroup = viewChild.required('tabGroup');
|
|
11728
11728
|
this.tabs = [];
|
|
11729
11729
|
this.selectedIndex = 0;
|
|
11730
|
+
/** When `true`, the border-bottom on inactive (non-active, non-disabled) tabs is hidden. Defaults to `false`. */
|
|
11731
|
+
this.hideInactiveBorder = false;
|
|
11730
11732
|
this.selectedIndexChange = new EventEmitter();
|
|
11731
11733
|
this.tabChange = new EventEmitter();
|
|
11732
11734
|
}
|
|
@@ -11753,11 +11755,11 @@ class AdsTabsComponent {
|
|
|
11753
11755
|
};
|
|
11754
11756
|
}
|
|
11755
11757
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
|
|
11758
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTabsComponent, isStandalone: false, selector: "ads-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", tabWidth: "tabWidth", activeColor: "activeColor", hideInactiveBorder: "hideInactiveBorder" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabGroup", first: true, predicate: ["tabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}\n"], dependencies: [{ kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }] }); }
|
|
11757
11759
|
}
|
|
11758
11760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTabsComponent, decorators: [{
|
|
11759
11761
|
type: Component,
|
|
11760
|
-
args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}\n"] }]
|
|
11762
|
+
args: [{ selector: 'ads-tabs', standalone: false, template: "<mat-tab-group\n [selectedIndex]=\"selectedIndex\"\n (selectedIndexChange)=\"selectedIndexChange.emit($event)\"\n [style.--ads-tab-width]=\"tabWidth || null\"\n [style.--ads-tab-active-color]=\"_activeColorVar\"\n class=\"custom-tabs\"\n [class.hide-inactive-border]=\"hideInactiveBorder\"\n #tabGroup\n [disableRipple]=\"true\"\n>\n @for(tab of tabs; track $index) {\n @if (tab.headerTemplate) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n </ng-template>\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n } @else {\n <mat-tab [disabled]=\"tab.disabled\" [label]=\"tab.text || ''\">\n @if(tab.template) {\n <ng-container *ngTemplateOutlet=\"tab.template\"></ng-container>\n }\n </mat-tab>\n }\n }\n</mat-tab-group>\n", styles: [":host::ng-deep .mat-mdc-tab.mdc-tab{border-bottom:2px solid var(--color-medium-30);min-width:var(--ads-tab-width, auto)!important;max-width:var(--ads-tab-width, none)!important;width:var(--ads-tab-width, auto)!important;flex-basis:var(--ads-tab-width, auto)!important;flex-shrink:0}:host::ng-deep .mat-mdc-tab.mdc-tab .mdc-tab__text-label{line-height:normal;font-weight:400;color:var(--color-medium-30)!important}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active{border-bottom:2px solid var(--ads-tab-active-color, var(--color-primary-hover))}:host::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--ads-tab-active-color, var(--color-primary-hover))!important;font-weight:500}:host::ng-deep .mat-mdc-tab-disabled{border-bottom:2px solid var(--color-medium-opacity-50)!important}:host::ng-deep .mat-mdc-tab-disabled .mdc-tab__text-label{color:var(--color-medium-opacity-50)!important}:host::ng-deep .mdc-tab-indicator{display:none}:host::ng-deep .hide-inactive-border .mat-mdc-tab.mdc-tab:not(.mdc-tab--active):not(.mat-mdc-tab-disabled){border-bottom-color:transparent}\n"] }]
|
|
11761
11763
|
}], propDecorators: { tabGroup: [{ type: i0.ViewChild, args: ['tabGroup', { isSignal: true }] }], tabs: [{
|
|
11762
11764
|
type: Input
|
|
11763
11765
|
}], selectedIndex: [{
|
|
@@ -11766,6 +11768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
11766
11768
|
type: Input
|
|
11767
11769
|
}], activeColor: [{
|
|
11768
11770
|
type: Input
|
|
11771
|
+
}], hideInactiveBorder: [{
|
|
11772
|
+
type: Input
|
|
11769
11773
|
}], selectedIndexChange: [{
|
|
11770
11774
|
type: Output
|
|
11771
11775
|
}], tabChange: [{
|
|
@@ -12261,11 +12265,11 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
12261
12265
|
});
|
|
12262
12266
|
}
|
|
12263
12267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps" }, outputs: { stepClick: "stepClick", subStepClick: "subStepClick" }, ngImport: i0, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last) {\n <div class=\"stepper-connector\"></div>\n }\n </div>\n <div class=\"stepper-content-wrapper\">\n <button\n type=\"button\"\n class=\"step-button step-button--main\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div\n class=\"step-content\"\n [class.step-content--intermediate]=\"i > 1 && !last\"\n >\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch;min-height:48px}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:20px;gap:4px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--indicator-size);height:var(--indicator-size)}.ads-vertical-side-navigation-stepper .stepper-connector{flex:1;width:4px;border-radius:80px;background-color:var(--color-light);min-height:24px;margin-bottom:4px}.ads-vertical-side-navigation-stepper .stepper-content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.ads-vertical-side-navigation-stepper .sub-step{display:flex;flex-direction:column}.ads-vertical-side-navigation-stepper .step-button{width:100%;border:none;background:transparent;text-align:left;padding:0;outline:none}.ads-vertical-side-navigation-stepper .step-button--last-sub{margin-bottom:24px}.ads-vertical-side-navigation-stepper .step-content{cursor:pointer;display:flex;align-items:center;min-height:21px}.ads-vertical-side-navigation-stepper .step-content--intermediate .step-title{font-size:14px;font-weight:400;line-height:18px}.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:
|
|
12268
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps" }, outputs: { stepClick: "stepClick", subStepClick: "subStepClick" }, ngImport: i0, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last) {\n <div class=\"stepper-connector\"></div>\n }\n </div>\n <div class=\"stepper-content-wrapper\">\n <button\n type=\"button\"\n class=\"step-button step-button--main\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div\n class=\"step-content\"\n [class.step-content--intermediate]=\"i > 1 && !last\"\n >\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch;min-height:48px}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:20px;gap:4px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--indicator-size);height:var(--indicator-size)}.ads-vertical-side-navigation-stepper .stepper-connector{flex:1;width:4px;border-radius:80px;background-color:var(--color-light);min-height:24px;margin-bottom:4px}.ads-vertical-side-navigation-stepper .stepper-content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.ads-vertical-side-navigation-stepper .sub-step{display:flex;flex-direction:column}.ads-vertical-side-navigation-stepper .step-button{width:100%;border:none;background:transparent;text-align:left;padding:0;outline:none}.ads-vertical-side-navigation-stepper .step-button--last-sub{margin-bottom:24px}.ads-vertical-side-navigation-stepper .step-content{cursor:pointer;display:flex;align-items:center;min-height:21px}.ads-vertical-side-navigation-stepper .step-content--intermediate .step-title{font-size:14px;font-weight:400;line-height:18px}.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:145px}.ads-vertical-side-navigation-stepper .step-title{flex:1;font-size:16px;font-weight:600;color:var(--color-link);line-height:21px;transition:color .2s ease}.ads-vertical-side-navigation-stepper .step-title:hover{color:var(--color-link-hover)}.ads-vertical-side-navigation-stepper .step-title:active{color:var(--color-link-pressed)}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
12265
12269
|
}
|
|
12266
12270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
12267
12271
|
type: Component,
|
|
12268
|
-
args: [{ selector: 'ads-vertical-side-navigation-stepper', standalone: false, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last) {\n <div class=\"stepper-connector\"></div>\n }\n </div>\n <div class=\"stepper-content-wrapper\">\n <button\n type=\"button\"\n class=\"step-button step-button--main\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div\n class=\"step-content\"\n [class.step-content--intermediate]=\"i > 1 && !last\"\n >\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch;min-height:48px}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:20px;gap:4px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--indicator-size);height:var(--indicator-size)}.ads-vertical-side-navigation-stepper .stepper-connector{flex:1;width:4px;border-radius:80px;background-color:var(--color-light);min-height:24px;margin-bottom:4px}.ads-vertical-side-navigation-stepper .stepper-content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.ads-vertical-side-navigation-stepper .sub-step{display:flex;flex-direction:column}.ads-vertical-side-navigation-stepper .step-button{width:100%;border:none;background:transparent;text-align:left;padding:0;outline:none}.ads-vertical-side-navigation-stepper .step-button--last-sub{margin-bottom:24px}.ads-vertical-side-navigation-stepper .step-content{cursor:pointer;display:flex;align-items:center;min-height:21px}.ads-vertical-side-navigation-stepper .step-content--intermediate .step-title{font-size:14px;font-weight:400;line-height:18px}.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:
|
|
12272
|
+
args: [{ selector: 'ads-vertical-side-navigation-stepper', standalone: false, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last) {\n <div class=\"stepper-connector\"></div>\n }\n </div>\n <div class=\"stepper-content-wrapper\">\n <button\n type=\"button\"\n class=\"step-button step-button--main\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div\n class=\"step-content\"\n [class.step-content--intermediate]=\"i > 1 && !last\"\n >\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch;min-height:48px}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:20px;gap:4px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--indicator-size);height:var(--indicator-size)}.ads-vertical-side-navigation-stepper .stepper-connector{flex:1;width:4px;border-radius:80px;background-color:var(--color-light);min-height:24px;margin-bottom:4px}.ads-vertical-side-navigation-stepper .stepper-content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.ads-vertical-side-navigation-stepper .sub-step{display:flex;flex-direction:column}.ads-vertical-side-navigation-stepper .step-button{width:100%;border:none;background:transparent;text-align:left;padding:0;outline:none}.ads-vertical-side-navigation-stepper .step-button--last-sub{margin-bottom:24px}.ads-vertical-side-navigation-stepper .step-content{cursor:pointer;display:flex;align-items:center;min-height:21px}.ads-vertical-side-navigation-stepper .step-content--intermediate .step-title{font-size:14px;font-weight:400;line-height:18px}.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:145px}.ads-vertical-side-navigation-stepper .step-title{flex:1;font-size:16px;font-weight:600;color:var(--color-link);line-height:21px;transition:color .2s ease}.ads-vertical-side-navigation-stepper .step-title:hover{color:var(--color-link-hover)}.ads-vertical-side-navigation-stepper .step-title:active{color:var(--color-link-pressed)}\n"] }]
|
|
12269
12273
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { steps: [{
|
|
12270
12274
|
type: Input
|
|
12271
12275
|
}], stepClick: [{
|