@ascentgl/ads-ui 21.69.0 → 21.70.1
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.
|
@@ -7028,7 +7028,13 @@ class AdsExpansionPanelComponent {
|
|
|
7028
7028
|
effect(() => {
|
|
7029
7029
|
const noBorder = this.noBorder();
|
|
7030
7030
|
if (this.panelElement) {
|
|
7031
|
-
|
|
7031
|
+
if (noBorder) {
|
|
7032
|
+
this.panelElement.style.border = 'none';
|
|
7033
|
+
}
|
|
7034
|
+
else {
|
|
7035
|
+
// Restore border when noBorder is false
|
|
7036
|
+
this.panelElement.style.border = `1px solid var(--color-${this.borderColor()})`;
|
|
7037
|
+
}
|
|
7032
7038
|
}
|
|
7033
7039
|
});
|
|
7034
7040
|
effect(() => {
|
|
@@ -7053,11 +7059,14 @@ class AdsExpansionPanelComponent {
|
|
|
7053
7059
|
if (this.panelContent && this.contentPadding()) {
|
|
7054
7060
|
this.panelContent.style.padding = this.contentPadding();
|
|
7055
7061
|
}
|
|
7056
|
-
if (this.panelElement
|
|
7057
|
-
this.
|
|
7058
|
-
|
|
7059
|
-
|
|
7060
|
-
|
|
7062
|
+
if (this.panelElement) {
|
|
7063
|
+
if (this.noBorder()) {
|
|
7064
|
+
this.panelElement.style.border = 'none';
|
|
7065
|
+
}
|
|
7066
|
+
else {
|
|
7067
|
+
// Initialize border with color when noBorder is false
|
|
7068
|
+
this.panelElement.style.border = `1px solid var(--color-${this.borderColor()})`;
|
|
7069
|
+
}
|
|
7061
7070
|
}
|
|
7062
7071
|
this.panel.expandedChange.subscribe(value => this.expandedChange.emit(value));
|
|
7063
7072
|
}
|
|
@@ -10856,11 +10865,11 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
10856
10865
|
});
|
|
10857
10866
|
}
|
|
10858
10867
|
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 }); }
|
|
10859
|
-
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=\"xxs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\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 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:16px!important;height:16px!important;border-radius:50%!important;border:2px 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:32px;align-items:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted{transform:translate(-24px)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted .step-indicator{opacity:0;transform:scale(.8)}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator{flex-shrink:0;width:16px;transition:opacity .25s ease-in-out,transform .25s ease-in-out;transform-origin:center}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator--empty{opacity:0}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon{width:16px!important;height:16px!important;display:block!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:16px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 16px;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:2px;background-color:var(--color-light);min-height:24px}.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;transition:background-color .2s ease}.ads-vertical-side-navigation-stepper .step-button--main{margin-top:-2px}.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:
|
|
10868
|
+
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=\"xxs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\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 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:16px!important;height:16px!important;border-radius:50%!important;border:2px 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:32px;align-items:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted{transform:translate(-24px)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted .step-indicator{opacity:0;transform:scale(.8)}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator{flex-shrink:0;width:16px;transition:opacity .25s ease-in-out,transform .25s ease-in-out;transform-origin:center}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator--empty{opacity:0}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon{width:16px!important;height:16px!important;display:block!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:16px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 16px;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:2px;background-color:var(--color-light);min-height:24px}.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;transition:background-color .2s ease}.ads-vertical-side-navigation-stepper .step-button--main{margin-top:-2px}.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:149px}.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"] }] }); }
|
|
10860
10869
|
}
|
|
10861
10870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
10862
10871
|
type: Component,
|
|
10863
|
-
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=\"xxs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\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 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:16px!important;height:16px!important;border-radius:50%!important;border:2px 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:32px;align-items:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted{transform:translate(-24px)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted .step-indicator{opacity:0;transform:scale(.8)}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator{flex-shrink:0;width:16px;transition:opacity .25s ease-in-out,transform .25s ease-in-out;transform-origin:center}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator--empty{opacity:0}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon{width:16px!important;height:16px!important;display:block!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:16px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 16px;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:2px;background-color:var(--color-light);min-height:24px}.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;transition:background-color .2s ease}.ads-vertical-side-navigation-stepper .step-button--main{margin-top:-2px}.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:
|
|
10872
|
+
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=\"xxs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\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 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:16px!important;height:16px!important;border-radius:50%!important;border:2px 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:32px;align-items:center;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted{transform:translate(-24px)}.ads-vertical-side-navigation-stepper .stepper-item--first.stepper-item--uncompleted .step-indicator{opacity:0;transform:scale(.8)}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator{flex-shrink:0;width:16px;transition:opacity .25s ease-in-out,transform .25s ease-in-out;transform-origin:center}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator--empty{opacity:0}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon{width:16px!important;height:16px!important;display:block!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-indicator ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item--first .step-button{transition:transform .3s cubic-bezier(.4,0,.2,1)}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-item ::ng-deep ads-icon svg{width:16px!important;height:16px!important}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:16px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 16px;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:2px;background-color:var(--color-light);min-height:24px}.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;transition:background-color .2s ease}.ads-vertical-side-navigation-stepper .step-button--main{margin-top:-2px}.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:149px}.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"] }]
|
|
10864
10873
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { steps: [{
|
|
10865
10874
|
type: Input
|
|
10866
10875
|
}], stepClick: [{
|