@ascentgl/ads-ui 21.32.0 → 21.34.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.
|
@@ -9518,10 +9518,6 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
9518
9518
|
this.registry = registry;
|
|
9519
9519
|
/** List of steps to display in the stepper */
|
|
9520
9520
|
this.steps = [];
|
|
9521
|
-
/** Whether to enable smooth scrolling when navigating to steps */
|
|
9522
|
-
this.smoothScroll = true;
|
|
9523
|
-
/** Offset in pixels from the top when scrolling to an element */
|
|
9524
|
-
this.scrollOffset = 0;
|
|
9525
9521
|
/** Event emitted when a step is clicked */
|
|
9526
9522
|
this.stepClick = new EventEmitter();
|
|
9527
9523
|
/** Event emitted when a substep is clicked */
|
|
@@ -9531,9 +9527,6 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
9531
9527
|
/** @ignore */
|
|
9532
9528
|
onStepClick(step, index) {
|
|
9533
9529
|
this.stepClick.emit({ step, index });
|
|
9534
|
-
if (step.targetSelector) {
|
|
9535
|
-
this.scrollToElement(step.targetSelector);
|
|
9536
|
-
}
|
|
9537
9530
|
}
|
|
9538
9531
|
onSubStepClick(step, subStep, index, subIndex) {
|
|
9539
9532
|
this.subStepClick.emit({
|
|
@@ -9542,37 +9535,15 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
9542
9535
|
parentIndex: index,
|
|
9543
9536
|
subIndex: subIndex,
|
|
9544
9537
|
});
|
|
9545
|
-
if (subStep.targetSelector) {
|
|
9546
|
-
this.scrollToElement(subStep.targetSelector);
|
|
9547
|
-
}
|
|
9548
|
-
}
|
|
9549
|
-
/** @ignore */
|
|
9550
|
-
scrollToElement(selector) {
|
|
9551
|
-
const element = document.querySelector(selector);
|
|
9552
|
-
if (element) {
|
|
9553
|
-
const elementPosition = element.getBoundingClientRect().top + window.scrollY;
|
|
9554
|
-
const offsetPosition = elementPosition - this.scrollOffset;
|
|
9555
|
-
window.scrollTo({
|
|
9556
|
-
top: offsetPosition,
|
|
9557
|
-
behavior: this.smoothScroll ? 'smooth' : 'instant',
|
|
9558
|
-
});
|
|
9559
|
-
}
|
|
9560
|
-
else {
|
|
9561
|
-
console.warn('Element not found for selector:', selector);
|
|
9562
|
-
}
|
|
9563
9538
|
}
|
|
9564
9539
|
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 }); }
|
|
9565
|
-
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"
|
|
9540
|
+
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:225px}.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"] }] }); }
|
|
9566
9541
|
}
|
|
9567
9542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
9568
9543
|
type: Component,
|
|
9569
9544
|
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:225px}.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"] }]
|
|
9570
9545
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { steps: [{
|
|
9571
9546
|
type: Input
|
|
9572
|
-
}], smoothScroll: [{
|
|
9573
|
-
type: Input
|
|
9574
|
-
}], scrollOffset: [{
|
|
9575
|
-
type: Input
|
|
9576
9547
|
}], stepClick: [{
|
|
9577
9548
|
type: Output
|
|
9578
9549
|
}], subStepClick: [{
|