@ascentgl/ads-ui 21.5.0 → 21.6.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.
|
@@ -8743,88 +8743,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
8743
8743
|
}]
|
|
8744
8744
|
}] });
|
|
8745
8745
|
|
|
8746
|
-
class
|
|
8747
|
-
constructor() {
|
|
8746
|
+
class AdsVerticalSideNavigationStepperComponent {
|
|
8747
|
+
constructor(registry) {
|
|
8748
|
+
this.registry = registry;
|
|
8748
8749
|
/** List of steps to display in the stepper */
|
|
8749
8750
|
this.steps = [];
|
|
8750
|
-
/** Index of the currently active step */
|
|
8751
|
-
this.activeStepIndex = 0;
|
|
8752
8751
|
/** Whether to enable smooth scrolling when navigating to steps */
|
|
8753
8752
|
this.smoothScroll = true;
|
|
8754
8753
|
/** Scroll offset in pixels when navigating to target elements */
|
|
8755
8754
|
this.scrollOffset = 100;
|
|
8756
|
-
/** Whether clicking on steps is enabled */
|
|
8757
|
-
this.clickable = true;
|
|
8758
8755
|
/** Event emitted when a step is clicked */
|
|
8759
8756
|
this.stepClick = new EventEmitter();
|
|
8760
|
-
|
|
8761
|
-
|
|
8762
|
-
|
|
8763
|
-
this.updateActiveStep();
|
|
8764
|
-
this.setupScrollListener();
|
|
8765
|
-
}
|
|
8766
|
-
/** @ignore */
|
|
8767
|
-
ngOnChanges(changes) {
|
|
8768
|
-
if (changes['activeStepIndex'] || changes['steps']) {
|
|
8769
|
-
this.updateActiveStep();
|
|
8770
|
-
}
|
|
8771
|
-
}
|
|
8772
|
-
/** @ignore */
|
|
8773
|
-
ngOnDestroy() {
|
|
8774
|
-
if (this.scrollListener) {
|
|
8775
|
-
window.removeEventListener('scroll', this.scrollListener);
|
|
8776
|
-
}
|
|
8777
|
-
}
|
|
8778
|
-
/** @ignore */
|
|
8779
|
-
updateActiveStep() {
|
|
8780
|
-
if (!this.steps || this.steps.length === 0) {
|
|
8781
|
-
return;
|
|
8782
|
-
}
|
|
8783
|
-
// Ensure activeStepIndex is within bounds
|
|
8784
|
-
if (this.activeStepIndex < 0 || this.activeStepIndex >= this.steps.length) {
|
|
8785
|
-
this.activeStepIndex = 0;
|
|
8786
|
-
}
|
|
8787
|
-
this.steps.forEach((step, index) => {
|
|
8788
|
-
step.active = index === this.activeStepIndex;
|
|
8789
|
-
});
|
|
8790
|
-
}
|
|
8791
|
-
/** @ignore */
|
|
8792
|
-
setupScrollListener() {
|
|
8793
|
-
this.scrollListener = () => {
|
|
8794
|
-
this.updateActiveStepBasedOnScroll();
|
|
8795
|
-
};
|
|
8796
|
-
window.addEventListener('scroll', this.scrollListener, { passive: true });
|
|
8797
|
-
}
|
|
8798
|
-
/** @ignore */
|
|
8799
|
-
updateActiveStepBasedOnScroll() {
|
|
8800
|
-
const scrollPosition = window.pageYOffset + this.scrollOffset;
|
|
8801
|
-
for (let i = this.steps.length - 1; i >= 0; i--) {
|
|
8802
|
-
const step = this.steps[i];
|
|
8803
|
-
if (step.targetSelector) {
|
|
8804
|
-
const element = document.querySelector(step.targetSelector);
|
|
8805
|
-
if (element) {
|
|
8806
|
-
const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
|
|
8807
|
-
if (scrollPosition >= elementTop) {
|
|
8808
|
-
if (this.activeStepIndex !== i) {
|
|
8809
|
-
this.setActiveStep(i);
|
|
8810
|
-
}
|
|
8811
|
-
break;
|
|
8812
|
-
}
|
|
8813
|
-
}
|
|
8814
|
-
}
|
|
8815
|
-
}
|
|
8757
|
+
/** Event emitted when a substep is clicked */
|
|
8758
|
+
this.subStepClick = new EventEmitter();
|
|
8759
|
+
this.registry.register(adsIconCheckCircleFilled);
|
|
8816
8760
|
}
|
|
8817
8761
|
/** @ignore */
|
|
8818
8762
|
onStepClick(step, index) {
|
|
8819
|
-
if (!this.clickable || step.disabled) {
|
|
8820
|
-
return;
|
|
8821
|
-
}
|
|
8822
8763
|
this.stepClick.emit({ step, index });
|
|
8823
|
-
this.setActiveStep(index);
|
|
8824
8764
|
if (step.targetSelector) {
|
|
8825
8765
|
this.scrollToElement(step.targetSelector);
|
|
8826
8766
|
}
|
|
8827
8767
|
}
|
|
8768
|
+
onSubStepClick(step, subStep, index, subIndex) {
|
|
8769
|
+
this.subStepClick.emit({
|
|
8770
|
+
parentStep: step,
|
|
8771
|
+
subStep: subStep,
|
|
8772
|
+
parentIndex: index,
|
|
8773
|
+
subIndex: subIndex
|
|
8774
|
+
});
|
|
8775
|
+
if (subStep.targetSelector) {
|
|
8776
|
+
this.scrollToElement(subStep.targetSelector);
|
|
8777
|
+
}
|
|
8778
|
+
}
|
|
8828
8779
|
/** @ignore */
|
|
8829
8780
|
scrollToElement(selector) {
|
|
8830
8781
|
const element = document.querySelector(selector);
|
|
@@ -8841,77 +8792,35 @@ class AdsVerticalNavigationStepperComponent {
|
|
|
8841
8792
|
}
|
|
8842
8793
|
}
|
|
8843
8794
|
}
|
|
8844
|
-
|
|
8845
|
-
|
|
8846
|
-
if (index >= 0 && index < this.steps.length && index !== this.activeStepIndex) {
|
|
8847
|
-
this.activeStepIndex = index;
|
|
8848
|
-
this.updateActiveStep();
|
|
8849
|
-
}
|
|
8850
|
-
}
|
|
8851
|
-
/**
|
|
8852
|
-
* Programmatically set the active step
|
|
8853
|
-
* @param index - The index of the step to activate
|
|
8854
|
-
*/
|
|
8855
|
-
setActiveStepByIndex(index) {
|
|
8856
|
-
this.setActiveStep(index);
|
|
8857
|
-
}
|
|
8858
|
-
/**
|
|
8859
|
-
* Programmatically set the active step by step ID
|
|
8860
|
-
* @param id - The ID of the step to activate
|
|
8861
|
-
*/
|
|
8862
|
-
setActiveStepById(id) {
|
|
8863
|
-
const index = this.steps.findIndex(step => step.id === id);
|
|
8864
|
-
if (index !== -1) {
|
|
8865
|
-
this.setActiveStep(index);
|
|
8866
|
-
}
|
|
8867
|
-
}
|
|
8868
|
-
/**
|
|
8869
|
-
* Navigate to the next step
|
|
8870
|
-
*/
|
|
8871
|
-
nextStep() {
|
|
8872
|
-
if (this.activeStepIndex < this.steps.length - 1) {
|
|
8873
|
-
this.setActiveStep(this.activeStepIndex + 1);
|
|
8874
|
-
}
|
|
8875
|
-
}
|
|
8876
|
-
/**
|
|
8877
|
-
* Navigate to the previous step
|
|
8878
|
-
*/
|
|
8879
|
-
previousStep() {
|
|
8880
|
-
if (this.activeStepIndex > 0) {
|
|
8881
|
-
this.setActiveStep(this.activeStepIndex - 1);
|
|
8882
|
-
}
|
|
8883
|
-
}
|
|
8884
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8885
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: AdsVerticalNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-navigation-stepper", inputs: { steps: "steps", activeStepIndex: "activeStepIndex", smoothScroll: "smoothScroll", scrollOffset: "scrollOffset", clickable: "clickable" }, outputs: { stepClick: "stepClick" }, usesOnChanges: true, ngImport: i0, template: "<nav class=\"ads-vertical-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index) {\n <li\n class=\"stepper-item\"\n [class.active]=\"step.active || i === activeStepIndex\"\n [class.disabled]=\"step.disabled\"\n [class.clickable]=\"clickable && !step.disabled\"\n >\n <button\n type=\"button\"\n class=\"stepper-button\"\n [disabled]=\"!clickable || step.disabled\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-current]=\"(step.active || i === activeStepIndex) ? 'step' : null\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"stepper-content\">\n <div class=\"step-label\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-navigation-stepper{width:100%}.ads-vertical-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-navigation-stepper .stepper-item{position:relative;display:block}.ads-vertical-navigation-stepper .stepper-item:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:1px;background-color:var(--color-light);transition:all .2s ease}.ads-vertical-navigation-stepper .stepper-item.active:before{width:4px;background-color:var(--color-secondary)}.ads-vertical-navigation-stepper .stepper-item.disabled:before{background-color:var(--color-muted)}.ads-vertical-navigation-stepper .stepper-item .stepper-button{width:100%;border:none;background:transparent;padding:8px 0 0 16px;text-align:left;outline:none;transition:background-color .2s ease}.ads-vertical-navigation-stepper .stepper-item .stepper-button .stepper-content{cursor:pointer}.ads-vertical-navigation-stepper .stepper-item .stepper-button:disabled .stepper-content{cursor:default}.ads-vertical-navigation-stepper .stepper-item .stepper-content{display:flex;align-items:center;min-height:21px}.ads-vertical-navigation-stepper .stepper-item .step-label{flex:1;font-size:16px;font-weight:400;color:var(--color-link);line-height:21px;transition:color .2s ease}.ads-vertical-navigation-stepper .stepper-item.active .step-label{font-weight:600}.ads-vertical-navigation-stepper .stepper-item.disabled .step-label{color:var(--color-muted);cursor:default}.ads-vertical-navigation-stepper .stepper-item.clickable:not(.disabled) .stepper-button{cursor:pointer}\n"] }); }
|
|
8795
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps", smoothScroll: "smoothScroll", scrollOffset: "scrollOffset" }, 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,.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px}.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"] }] }); }
|
|
8886
8797
|
}
|
|
8887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type:
|
|
8798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
8888
8799
|
type: Component,
|
|
8889
|
-
args: [{ selector: 'ads-vertical-navigation-stepper', standalone: false, template: "<nav class=\"ads-vertical-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index) {\n
|
|
8890
|
-
}], propDecorators: { steps: [{
|
|
8891
|
-
type: Input
|
|
8892
|
-
}], activeStepIndex: [{
|
|
8800
|
+
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,.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px}.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"] }]
|
|
8801
|
+
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { steps: [{
|
|
8893
8802
|
type: Input
|
|
8894
8803
|
}], smoothScroll: [{
|
|
8895
8804
|
type: Input
|
|
8896
8805
|
}], scrollOffset: [{
|
|
8897
8806
|
type: Input
|
|
8898
|
-
}], clickable: [{
|
|
8899
|
-
type: Input
|
|
8900
8807
|
}], stepClick: [{
|
|
8901
8808
|
type: Output
|
|
8809
|
+
}], subStepClick: [{
|
|
8810
|
+
type: Output
|
|
8902
8811
|
}] } });
|
|
8903
8812
|
|
|
8904
8813
|
class AdsVerticalNavigationStepperModule {
|
|
8905
8814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8906
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, declarations: [
|
|
8907
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, imports: [CommonModule] }); }
|
|
8815
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, declarations: [AdsVerticalSideNavigationStepperComponent], imports: [CommonModule, AdsIconModule], exports: [AdsVerticalSideNavigationStepperComponent] }); }
|
|
8816
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, imports: [CommonModule, AdsIconModule] }); }
|
|
8908
8817
|
}
|
|
8909
8818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, decorators: [{
|
|
8910
8819
|
type: NgModule,
|
|
8911
8820
|
args: [{
|
|
8912
|
-
declarations: [
|
|
8913
|
-
imports: [CommonModule],
|
|
8914
|
-
exports: [
|
|
8821
|
+
declarations: [AdsVerticalSideNavigationStepperComponent],
|
|
8822
|
+
imports: [CommonModule, AdsIconModule],
|
|
8823
|
+
exports: [AdsVerticalSideNavigationStepperComponent],
|
|
8915
8824
|
}]
|
|
8916
8825
|
}] });
|
|
8917
8826
|
|
|
@@ -8919,5 +8828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
8919
8828
|
* Generated bundle index. Do not edit.
|
|
8920
8829
|
*/
|
|
8921
8830
|
|
|
8922
|
-
export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule,
|
|
8831
|
+
export { AdsAscentLogoComponent, AdsAscentLogoModule, AdsAvatarComponent, AdsAvatarModule, AdsBreadcrumbComponent, AdsBreadcrumbModule, AdsBubbleComponent, AdsBubbleModule, AdsButtonComponent, AdsButtonContainerComponent, AdsButtonContainerModule, AdsButtonModule, AdsCardComponent, AdsCardModule, AdsCheckboxComponent, AdsCheckboxModule, AdsChipComponent, AdsChipModule, AdsCreateTagComponent, AdsCreateTagModule, AdsDatepickerComponent, AdsDatepickerModule, AdsDatetimepickerComponent, AdsDatetimepickerModule, AdsDividerModule, AdsDragAndDropListComponent, AdsDragAndDropListModule, AdsDropdownComponent, AdsDropdownModule, AdsErrorPageCodeComponent, AdsErrorPageCodeModule, AdsErrorPageComponent, AdsErrorPageModule, AdsExpansionPanelComponent, AdsExpansionPanelModule, AdsFooterComponent, AdsFooterContainerComponent, AdsFooterContainerModule, AdsFooterModule, AdsGenericLogoComponent, AdsGenericLogoModule, AdsHeaderComponent, AdsHeaderContainerComponent, AdsHeaderContainerModule, AdsHeaderModule, AdsHorizontalNavBarComponent, AdsHorizontalNavBarModule, AdsIconButtonComponent, AdsIconButtonModule, AdsIconHoverComponent, AdsIconHoverModule, AdsInputComponent, AdsInputDropdownComponent, AdsInputDropdownModule, AdsInputModule, AdsInternationalPhoneFieldComponent, AdsInternationalPhoneFieldModule, AdsLinkButtonComponent, AdsLinkButtonModule, AdsMainMenuComponent, AdsMainMenuModule, AdsModalComponent, AdsModalModule, AdsMultiSelectDropdownComponent, AdsMultiSelectDropdownModule, AdsNavMenuComponent, AdsNavMenuModule, AdsNavigationCollapseHandleComponent, AdsNavigationCollapseHandleModule, AdsNavigationComponent, AdsNavigationHeaderComponent, AdsNavigationHeaderModule, AdsNavigationItemComponent, AdsNavigationItemModule, AdsNavigationItemsContainerComponent, AdsNavigationItemsContainerModule, AdsNavigationModule, AdsNumericBadgeComponent, AdsNumericBadgeModule, AdsNumericStepperComponent, AdsNumericStepperModule, AdsOrgDisplayTextComponent, AdsOrgDisplayTextModule, AdsPeakEssentialsLogoComponent, AdsPeakEssentialsLogoModule, AdsPeakMarketplaceLogoComponent, AdsPeakMarketplaceLogoModule, AdsPeakOrderManagementLogoComponent, AdsPeakOrderManagementLogoModule, AdsPhoneFieldComponent, AdsPhoneFieldModule, AdsPrimaryLogoComponent, AdsPrimaryLogoModule, AdsProgressBarComponent, AdsProgressBarModule, AdsProgressIndicatorSpinnerComponent, AdsProgressIndicatorSpinnerModule, AdsProgressSpinnerComponent, AdsProgressSpinnerModule, AdsProgressStepperComponent, AdsProgressStepperModule, AdsRadioButtonComponent, AdsRadioButtonModule, AdsScmsLogoComponent, AdsScmsLogoModule, AdsScmsSideNavBarComponent, AdsScmsSideNavBarModule, AdsSearchDropdownComponent, AdsSearchDropdownModule, AdsSearchInputComponent, AdsSearchInputModule, AdsShellLayoutModule, AdsSideNavBarComponent, AdsSideNavBarModule, AdsSlideToggle, AdsSlideToggleComponent, AdsSliderComponent, AdsSliderModule, AdsSnackbarComponent, AdsSnackbarModule, AdsSplashPageComponent, AdsSplashPageModule, AdsStepperComponent, AdsStepperModule, AdsTableComponent, AdsTableModule, AdsTabsComponent, AdsTabsModule, AdsTagComponent, AdsTagContainerComponent, AdsTagContainerModule, AdsTagModule, AdsTextareaComponent, AdsTextareaModule, AdsTimeFieldComponent, AdsTimeFieldModule, AdsTimepickerComponent, AdsTimepickerModule, AdsVerticalNavigationStepperModule, AdsVerticalSideNavigationStepperComponent, AdsWizardStepperComponent, AdsWizardStepperModule, AscentCardComponent, AscentCardModule, BadgeColor, Colors, CustomDatetimeAdapter, DividerComponent, ErrorPageDefault, MainMenuService, ModalActionType, ModalPanelClass, PanelClass, ShellLayoutComponent, SpinnerSize, StepStatus, TableBreakpoint, ViewportService, WindowService, WizardStepStatus };
|
|
8923
8832
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|