@ascentgl/ads-ui 21.4.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.
|
@@ -6016,7 +6016,6 @@ class AdsSnackbarComponent {
|
|
|
6016
6016
|
this.snackBarRef = inject(MatSnackBarRef);
|
|
6017
6017
|
this.defaultButtonCaption = 'Close';
|
|
6018
6018
|
this.PanelClass = PanelClass;
|
|
6019
|
-
this.indexedDB = indexedDB;
|
|
6020
6019
|
}
|
|
6021
6020
|
get buttonPanelClass() {
|
|
6022
6021
|
const panelClass = this.snackBarRef.containerInstance.snackBarConfig.panelClass;
|
|
@@ -6032,6 +6031,33 @@ class AdsSnackbarComponent {
|
|
|
6032
6031
|
if (overlayWrapper) {
|
|
6033
6032
|
overlayWrapper.style.zIndex = '1100';
|
|
6034
6033
|
}
|
|
6034
|
+
this.setupAutoCloseTimer();
|
|
6035
|
+
}
|
|
6036
|
+
/**
|
|
6037
|
+
* Sets up the auto-close timer if required.
|
|
6038
|
+
* If autoCloseDuration is 0, null, or undefined, disables auto-close even for 'success'.
|
|
6039
|
+
*/
|
|
6040
|
+
setupAutoCloseTimer() {
|
|
6041
|
+
const panelClass = this.snackBarRef.containerInstance.snackBarConfig.panelClass;
|
|
6042
|
+
// If autoCloseDuration is explicitly set to 0, null, or undefined, do not auto-close
|
|
6043
|
+
if (this.data.autoCloseDuration === 0) {
|
|
6044
|
+
return;
|
|
6045
|
+
}
|
|
6046
|
+
// If autoCloseDuration is set and > 0, use it for any panel class
|
|
6047
|
+
if (typeof this.data.autoCloseDuration === 'number' && this.data.autoCloseDuration > 0) {
|
|
6048
|
+
this.autoCloseTimeoutId = window.setTimeout(() => this.snackBarRef.dismiss(), this.data.autoCloseDuration);
|
|
6049
|
+
return;
|
|
6050
|
+
}
|
|
6051
|
+
// If panel class is Success and no explicit duration, default to 4000ms
|
|
6052
|
+
if (panelClass === PanelClass.Success) {
|
|
6053
|
+
this.autoCloseTimeoutId = window.setTimeout(() => this.snackBarRef.dismiss(), 4000);
|
|
6054
|
+
}
|
|
6055
|
+
}
|
|
6056
|
+
/** @ignore */
|
|
6057
|
+
ngOnDestroy() {
|
|
6058
|
+
if (this.autoCloseTimeoutId) {
|
|
6059
|
+
clearTimeout(this.autoCloseTimeoutId);
|
|
6060
|
+
}
|
|
6035
6061
|
}
|
|
6036
6062
|
/** @ignore */
|
|
6037
6063
|
onSnackbarClick() {
|
|
@@ -8717,88 +8743,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
8717
8743
|
}]
|
|
8718
8744
|
}] });
|
|
8719
8745
|
|
|
8720
|
-
class
|
|
8721
|
-
constructor() {
|
|
8746
|
+
class AdsVerticalSideNavigationStepperComponent {
|
|
8747
|
+
constructor(registry) {
|
|
8748
|
+
this.registry = registry;
|
|
8722
8749
|
/** List of steps to display in the stepper */
|
|
8723
8750
|
this.steps = [];
|
|
8724
|
-
/** Index of the currently active step */
|
|
8725
|
-
this.activeStepIndex = 0;
|
|
8726
8751
|
/** Whether to enable smooth scrolling when navigating to steps */
|
|
8727
8752
|
this.smoothScroll = true;
|
|
8728
8753
|
/** Scroll offset in pixels when navigating to target elements */
|
|
8729
8754
|
this.scrollOffset = 100;
|
|
8730
|
-
/** Whether clicking on steps is enabled */
|
|
8731
|
-
this.clickable = true;
|
|
8732
8755
|
/** Event emitted when a step is clicked */
|
|
8733
8756
|
this.stepClick = new EventEmitter();
|
|
8734
|
-
|
|
8735
|
-
|
|
8736
|
-
|
|
8737
|
-
this.updateActiveStep();
|
|
8738
|
-
this.setupScrollListener();
|
|
8739
|
-
}
|
|
8740
|
-
/** @ignore */
|
|
8741
|
-
ngOnChanges(changes) {
|
|
8742
|
-
if (changes['activeStepIndex'] || changes['steps']) {
|
|
8743
|
-
this.updateActiveStep();
|
|
8744
|
-
}
|
|
8745
|
-
}
|
|
8746
|
-
/** @ignore */
|
|
8747
|
-
ngOnDestroy() {
|
|
8748
|
-
if (this.scrollListener) {
|
|
8749
|
-
window.removeEventListener('scroll', this.scrollListener);
|
|
8750
|
-
}
|
|
8751
|
-
}
|
|
8752
|
-
/** @ignore */
|
|
8753
|
-
updateActiveStep() {
|
|
8754
|
-
if (!this.steps || this.steps.length === 0) {
|
|
8755
|
-
return;
|
|
8756
|
-
}
|
|
8757
|
-
// Ensure activeStepIndex is within bounds
|
|
8758
|
-
if (this.activeStepIndex < 0 || this.activeStepIndex >= this.steps.length) {
|
|
8759
|
-
this.activeStepIndex = 0;
|
|
8760
|
-
}
|
|
8761
|
-
this.steps.forEach((step, index) => {
|
|
8762
|
-
step.active = index === this.activeStepIndex;
|
|
8763
|
-
});
|
|
8764
|
-
}
|
|
8765
|
-
/** @ignore */
|
|
8766
|
-
setupScrollListener() {
|
|
8767
|
-
this.scrollListener = () => {
|
|
8768
|
-
this.updateActiveStepBasedOnScroll();
|
|
8769
|
-
};
|
|
8770
|
-
window.addEventListener('scroll', this.scrollListener, { passive: true });
|
|
8771
|
-
}
|
|
8772
|
-
/** @ignore */
|
|
8773
|
-
updateActiveStepBasedOnScroll() {
|
|
8774
|
-
const scrollPosition = window.pageYOffset + this.scrollOffset;
|
|
8775
|
-
for (let i = this.steps.length - 1; i >= 0; i--) {
|
|
8776
|
-
const step = this.steps[i];
|
|
8777
|
-
if (step.targetSelector) {
|
|
8778
|
-
const element = document.querySelector(step.targetSelector);
|
|
8779
|
-
if (element) {
|
|
8780
|
-
const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
|
|
8781
|
-
if (scrollPosition >= elementTop) {
|
|
8782
|
-
if (this.activeStepIndex !== i) {
|
|
8783
|
-
this.setActiveStep(i);
|
|
8784
|
-
}
|
|
8785
|
-
break;
|
|
8786
|
-
}
|
|
8787
|
-
}
|
|
8788
|
-
}
|
|
8789
|
-
}
|
|
8757
|
+
/** Event emitted when a substep is clicked */
|
|
8758
|
+
this.subStepClick = new EventEmitter();
|
|
8759
|
+
this.registry.register(adsIconCheckCircleFilled);
|
|
8790
8760
|
}
|
|
8791
8761
|
/** @ignore */
|
|
8792
8762
|
onStepClick(step, index) {
|
|
8793
|
-
if (!this.clickable || step.disabled) {
|
|
8794
|
-
return;
|
|
8795
|
-
}
|
|
8796
8763
|
this.stepClick.emit({ step, index });
|
|
8797
|
-
this.setActiveStep(index);
|
|
8798
8764
|
if (step.targetSelector) {
|
|
8799
8765
|
this.scrollToElement(step.targetSelector);
|
|
8800
8766
|
}
|
|
8801
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
|
+
}
|
|
8802
8779
|
/** @ignore */
|
|
8803
8780
|
scrollToElement(selector) {
|
|
8804
8781
|
const element = document.querySelector(selector);
|
|
@@ -8815,77 +8792,35 @@ class AdsVerticalNavigationStepperComponent {
|
|
|
8815
8792
|
}
|
|
8816
8793
|
}
|
|
8817
8794
|
}
|
|
8818
|
-
|
|
8819
|
-
|
|
8820
|
-
if (index >= 0 && index < this.steps.length && index !== this.activeStepIndex) {
|
|
8821
|
-
this.activeStepIndex = index;
|
|
8822
|
-
this.updateActiveStep();
|
|
8823
|
-
}
|
|
8824
|
-
}
|
|
8825
|
-
/**
|
|
8826
|
-
* Programmatically set the active step
|
|
8827
|
-
* @param index - The index of the step to activate
|
|
8828
|
-
*/
|
|
8829
|
-
setActiveStepByIndex(index) {
|
|
8830
|
-
this.setActiveStep(index);
|
|
8831
|
-
}
|
|
8832
|
-
/**
|
|
8833
|
-
* Programmatically set the active step by step ID
|
|
8834
|
-
* @param id - The ID of the step to activate
|
|
8835
|
-
*/
|
|
8836
|
-
setActiveStepById(id) {
|
|
8837
|
-
const index = this.steps.findIndex(step => step.id === id);
|
|
8838
|
-
if (index !== -1) {
|
|
8839
|
-
this.setActiveStep(index);
|
|
8840
|
-
}
|
|
8841
|
-
}
|
|
8842
|
-
/**
|
|
8843
|
-
* Navigate to the next step
|
|
8844
|
-
*/
|
|
8845
|
-
nextStep() {
|
|
8846
|
-
if (this.activeStepIndex < this.steps.length - 1) {
|
|
8847
|
-
this.setActiveStep(this.activeStepIndex + 1);
|
|
8848
|
-
}
|
|
8849
|
-
}
|
|
8850
|
-
/**
|
|
8851
|
-
* Navigate to the previous step
|
|
8852
|
-
*/
|
|
8853
|
-
previousStep() {
|
|
8854
|
-
if (this.activeStepIndex > 0) {
|
|
8855
|
-
this.setActiveStep(this.activeStepIndex - 1);
|
|
8856
|
-
}
|
|
8857
|
-
}
|
|
8858
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8859
|
-
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"] }] }); }
|
|
8860
8797
|
}
|
|
8861
|
-
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: [{
|
|
8862
8799
|
type: Component,
|
|
8863
|
-
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
|
|
8864
|
-
}], propDecorators: { steps: [{
|
|
8865
|
-
type: Input
|
|
8866
|
-
}], 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: [{
|
|
8867
8802
|
type: Input
|
|
8868
8803
|
}], smoothScroll: [{
|
|
8869
8804
|
type: Input
|
|
8870
8805
|
}], scrollOffset: [{
|
|
8871
8806
|
type: Input
|
|
8872
|
-
}], clickable: [{
|
|
8873
|
-
type: Input
|
|
8874
8807
|
}], stepClick: [{
|
|
8875
8808
|
type: Output
|
|
8809
|
+
}], subStepClick: [{
|
|
8810
|
+
type: Output
|
|
8876
8811
|
}] } });
|
|
8877
8812
|
|
|
8878
8813
|
class AdsVerticalNavigationStepperModule {
|
|
8879
8814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8880
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, declarations: [
|
|
8881
|
-
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] }); }
|
|
8882
8817
|
}
|
|
8883
8818
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AdsVerticalNavigationStepperModule, decorators: [{
|
|
8884
8819
|
type: NgModule,
|
|
8885
8820
|
args: [{
|
|
8886
|
-
declarations: [
|
|
8887
|
-
imports: [CommonModule],
|
|
8888
|
-
exports: [
|
|
8821
|
+
declarations: [AdsVerticalSideNavigationStepperComponent],
|
|
8822
|
+
imports: [CommonModule, AdsIconModule],
|
|
8823
|
+
exports: [AdsVerticalSideNavigationStepperComponent],
|
|
8889
8824
|
}]
|
|
8890
8825
|
}] });
|
|
8891
8826
|
|
|
@@ -8893,5 +8828,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
8893
8828
|
* Generated bundle index. Do not edit.
|
|
8894
8829
|
*/
|
|
8895
8830
|
|
|
8896
|
-
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 };
|
|
8897
8832
|
//# sourceMappingURL=ascentgl-ads-ui.mjs.map
|