@ascentgl/ads-ui 21.125.0 → 21.125.2
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.
|
@@ -4965,6 +4965,25 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
4965
4965
|
*/
|
|
4966
4966
|
super.processOptions(options);
|
|
4967
4967
|
this.allOptions = new Map(this.displayedOptions);
|
|
4968
|
+
/**
|
|
4969
|
+
* Trigger change detection so that the autocomplete panel
|
|
4970
|
+
* picks up the new options in OnPush parent components.
|
|
4971
|
+
* Then open the panel if the input is still focused.
|
|
4972
|
+
*/
|
|
4973
|
+
this.cdr.markForCheck();
|
|
4974
|
+
this.cdr.detectChanges();
|
|
4975
|
+
if (this.displayedOptions.size &&
|
|
4976
|
+
document.activeElement === this.input?.nativeElement &&
|
|
4977
|
+
!this.trigger?.panelOpen) {
|
|
4978
|
+
// Defer panel opening to next microtask to ensure the autocomplete
|
|
4979
|
+
// overlay picks up rendered options after change detection completes
|
|
4980
|
+
// (required when parent uses OnPush change detection).
|
|
4981
|
+
Promise.resolve().then(() => {
|
|
4982
|
+
if (document.activeElement === this.input?.nativeElement && !this.trigger?.panelOpen) {
|
|
4983
|
+
this.trigger?.openPanel();
|
|
4984
|
+
}
|
|
4985
|
+
});
|
|
4986
|
+
}
|
|
4968
4987
|
});
|
|
4969
4988
|
}
|
|
4970
4989
|
/** @ignore */
|
|
@@ -12609,11 +12628,11 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
12609
12628
|
});
|
|
12610
12629
|
}
|
|
12611
12630
|
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 }); }
|
|
12612
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps" }, outputs: { stepClick: "stepClick", subStepClick: "subStepClick" }, ngImport: i0, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\" [class.stepper-item--separated]=\"step.separated\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last && !steps[i + 1]?.separated) {\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 class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-item--separated{margin-top:
|
|
12631
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps" }, outputs: { stepClick: "stepClick", subStepClick: "subStepClick" }, ngImport: i0, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\" [class.stepper-item--separated]=\"step.separated\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last && !steps[i + 1]?.separated) {\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 class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-item--separated{margin-top:24px}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:20px;gap:4px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--indicator-size);height:var(--indicator-size)}.ads-vertical-side-navigation-stepper .stepper-connector{flex:1;width:4px;border-radius:80px;background-color:var(--color-light);min-height:24px;margin-bottom:4px}.ads-vertical-side-navigation-stepper .stepper-content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.ads-vertical-side-navigation-stepper .sub-step{display:flex;flex-direction:column}.ads-vertical-side-navigation-stepper .step-button{width:100%;border:none;background:transparent;text-align:left;padding:0;outline:none}.ads-vertical-side-navigation-stepper .step-button--last-sub{margin-bottom:24px}.ads-vertical-side-navigation-stepper .step-content{cursor:pointer;display:flex;align-items:center;min-height:21px}.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:145px}.ads-vertical-side-navigation-stepper .step-title{flex:1;font-size:16px;font-weight:600;color:var(--color-link);line-height:21px;transition:color .2s ease}.ads-vertical-side-navigation-stepper .step-title:hover{color:var(--color-link-hover)}.ads-vertical-side-navigation-stepper .step-title:active{color:var(--color-link-pressed)}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
12613
12632
|
}
|
|
12614
12633
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
12615
12634
|
type: Component,
|
|
12616
|
-
args: [{ selector: 'ads-vertical-side-navigation-stepper', standalone: false, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\" [class.stepper-item--separated]=\"step.separated\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last && !steps[i + 1]?.separated) {\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 class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-item--separated{margin-top:
|
|
12635
|
+
args: [{ selector: 'ads-vertical-side-navigation-stepper', standalone: false, template: "<nav class=\"ads-vertical-side-navigation-stepper\" role=\"navigation\" aria-label=\"Step navigation\">\n <ol class=\"stepper-list\">\n @for (step of steps; track step.id; let i = $index; let last = $last) {\n @if (i === 0) {\n <div>\n <li class=\"stepper-item stepper-item--first\" [class.stepper-item--uncompleted]=\"!step.completed\">\n <div class=\"step-indicator\" [class.step-indicator--empty]=\"!step.completed\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n <button\n type=\"button\"\n class=\"step-button step-button--primary\"\n (click)=\"onStepClick(step, i)\"\n [attr.aria-label]=\"'Step ' + (i + 1) + ': ' + step.label\"\n >\n <div class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n </li>\n </div>\n } @else {\n <li class=\"stepper-item\" [class.stepper-item--separated]=\"step.separated\">\n <div class=\"stepper-indicator-column\">\n <div class=\"step-indicator\">\n @if (step.completed) {\n <ads-icon size=\"xs\" name=\"check_circle_filled\" theme=\"success\" stroke=\"success\" />\n } @else {\n <div class=\"step-indicator__circle\"></div>\n }\n </div>\n @if (!last && !steps[i + 1]?.separated) {\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 class=\"step-content\">\n <div class=\"step-title\">{{ step.label }}</div>\n </div>\n </button>\n @if(step.subSteps?.length) {\n @for (subStep of step.subSteps; track subStep.id; let j = $index; let subLast = $last) {\n <div class=\"sub-step\">\n <button\n type=\"button\"\n class=\"step-button step-button--sub\"\n [class.step-button--last-sub]=\"subLast\"\n (click)=\"onSubStepClick(step, subStep, i, j)\"\n [attr.aria-label]=\"'Sub-step ' + (j + 1) + ': ' + subStep.label\"\n >\n <div class=\"step-content step-content--sub\">\n <div class=\"step-title\">{{ subStep.label }}</div>\n </div>\n </button>\n </div>\n }\n }\n </div>\n </li>\n }\n }\n </ol>\n</nav>\n\n", styles: [".ads-vertical-side-navigation-stepper{width:100%}.ads-vertical-side-navigation-stepper .step-indicator__circle{all:initial;width:20px!important;height:20px!important;border-radius:50%!important;border:5px solid var(--color-light)!important;background:var(--color-white)!important;display:block!important;box-sizing:border-box!important}.ads-vertical-side-navigation-stepper .stepper-list{list-style:none;margin:0;padding:0;position:relative}.ads-vertical-side-navigation-stepper .stepper-item{position:relative;display:flex;gap:8px;align-items:stretch}.ads-vertical-side-navigation-stepper .stepper-item--first{min-height:21px;padding-bottom:24px;align-items:center;position:relative}.ads-vertical-side-navigation-stepper .stepper-item--separated{margin-top:24px}.ads-vertical-side-navigation-stepper .stepper-indicator-column{display:flex;flex-direction:column;align-items:center;width:20px;gap:4px}.ads-vertical-side-navigation-stepper .step-indicator{--indicator-size: 20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--indicator-size);height:var(--indicator-size)}.ads-vertical-side-navigation-stepper .stepper-connector{flex:1;width:4px;border-radius:80px;background-color:var(--color-light);min-height:24px;margin-bottom:4px}.ads-vertical-side-navigation-stepper .stepper-content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1}.ads-vertical-side-navigation-stepper .sub-step{display:flex;flex-direction:column}.ads-vertical-side-navigation-stepper .step-button{width:100%;border:none;background:transparent;text-align:left;padding:0;outline:none}.ads-vertical-side-navigation-stepper .step-button--last-sub{margin-bottom:24px}.ads-vertical-side-navigation-stepper .step-content{cursor:pointer;display:flex;align-items:center;min-height:21px}.ads-vertical-side-navigation-stepper .step-content--sub .step-title{font-size:14px;font-weight:400;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:145px}.ads-vertical-side-navigation-stepper .step-title{flex:1;font-size:16px;font-weight:600;color:var(--color-link);line-height:21px;transition:color .2s ease}.ads-vertical-side-navigation-stepper .step-title:hover{color:var(--color-link-hover)}.ads-vertical-side-navigation-stepper .step-title:active{color:var(--color-link-pressed)}\n"] }]
|
|
12617
12636
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { steps: [{
|
|
12618
12637
|
type: Input
|
|
12619
12638
|
}], stepClick: [{
|