@ascentgl/ads-ui 21.123.0 → 21.124.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8190,11 +8190,11 @@ class AdsCustomHeaderComponent {
|
|
|
8190
8190
|
this.params.onMenuClosed?.();
|
|
8191
8191
|
}
|
|
8192
8192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCustomHeaderComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCustomHeaderComponent, isStandalone: false, selector: "ads-custom-header", ngImport: i0, template: "<div class=\"ads-custom-header\">\n <span\n class=\"menu-trigger-anchor\"\n [class.align-right]=\"isLastColumn\"\n #menuTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"sortFilterMenu\"\n (menuOpened)=\"menuOpen = true\"\n (menuClosed)=\"closeMenu()\"\n ></span>\n\n <span class=\"header-text\" [class.header-text--filtered]=\"isColumnFiltered\" [class.header-text--sorted]=\"isColumnSorted\">\n @if (isColumnSorted) {\n <div class=\"sort-order-badge\">\n <span>{{ sortOrder }}</span>\n </div>\n }\n @if (isColumnFiltered) {\n <ads-icon name=\"table_filter\" size=\"xxs_16\" stroke=\"secondary\" />\n }\n <span class=\"header-text__label\">{{ displayName }}</span>\n </span>\n\n @if (hasSortFilterConfig) {\n <button\n class=\"header-menu-button\"\n [class.active]=\"isActive\"\n (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n >\n @if (sortDirection === 'asc') {\n <ads-icon name=\"sorting_arrow_up\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else if (sortDirection === 'desc') {\n <ads-icon name=\"sorting_arrow_down\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else {\n <ads-icon name=\"menu_filters\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n }\n </button>\n }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n @if (sortFilterConfig) {\n <ads-column-sort-filter-menu\n [config]=\"sortFilterConfig\"\n [currentSortDirection]=\"sortDirection\"\n [selectedFilterValues]=\"filterValues\"\n (sortChanged)=\"onSortChanged($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (hideColumn)=\"onHideColumn($event)\"\n />\n }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;min-width:70px;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.ads-custom-header .header-text--filtered,.ads-custom-header .header-text--sorted{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;color:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge{display:flex;width:20px;height:20px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px;background:var(--color-secondary);flex-shrink:0}.ads-custom-header .header-text .sort-order-badge span{color:var(--color-white);text-align:center;font-size:12px;font-weight:600;line-height:16px}.ads-custom-header .header-text__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AdsColumnSortFilterMenuComponent, selector: "ads-column-sort-filter-menu", inputs: ["config", "currentSortDirection", "selectedFilterValues"], outputs: ["sortChanged", "filterChanged", "hideColumn"] }] }); }
|
|
8193
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCustomHeaderComponent, isStandalone: false, selector: "ads-custom-header", ngImport: i0, template: "<div class=\"ads-custom-header\">\n <span\n class=\"menu-trigger-anchor\"\n [class.align-right]=\"isLastColumn\"\n #menuTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"sortFilterMenu\"\n (menuOpened)=\"menuOpen = true\"\n (menuClosed)=\"closeMenu()\"\n ></span>\n\n <span class=\"header-text\" [class.header-text--filtered]=\"isColumnFiltered\" [class.header-text--sorted]=\"isColumnSorted\">\n @if (isColumnSorted) {\n <div class=\"sort-order-badge\">\n <span>{{ sortOrder }}</span>\n </div>\n }\n @if (isColumnFiltered) {\n <ads-icon class=\"filter-icon\" name=\"table_filter\" size=\"xxs_16\" stroke=\"secondary\" />\n }\n <span class=\"header-text__label\">{{ displayName }}</span>\n </span>\n\n @if (hasSortFilterConfig) {\n <button\n class=\"header-menu-button\"\n [class.active]=\"isActive\"\n (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n >\n @if (sortDirection === 'asc') {\n <ads-icon name=\"sorting_arrow_up\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else if (sortDirection === 'desc') {\n <ads-icon name=\"sorting_arrow_down\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else {\n <ads-icon name=\"menu_filters\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n }\n </button>\n }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n @if (sortFilterConfig) {\n <ads-column-sort-filter-menu\n [config]=\"sortFilterConfig\"\n [currentSortDirection]=\"sortDirection\"\n [selectedFilterValues]=\"filterValues\"\n (sortChanged)=\"onSortChanged($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (hideColumn)=\"onHideColumn($event)\"\n />\n }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;min-width:70px;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.ads-custom-header .header-text--filtered,.ads-custom-header .header-text--sorted{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;color:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge{display:flex;width:20px;height:20px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px;background:var(--color-secondary);flex-shrink:0}.ads-custom-header .header-text .sort-order-badge span{color:var(--color-white);text-align:center;font-size:12px;font-weight:600;line-height:16px}.ads-custom-header .header-text__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ads-custom-header .header-text .filter-icon{flex-shrink:0;min-width:16px}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: AdsColumnSortFilterMenuComponent, selector: "ads-column-sort-filter-menu", inputs: ["config", "currentSortDirection", "selectedFilterValues"], outputs: ["sortChanged", "filterChanged", "hideColumn"] }] }); }
|
|
8194
8194
|
}
|
|
8195
8195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCustomHeaderComponent, decorators: [{
|
|
8196
8196
|
type: Component,
|
|
8197
|
-
args: [{ selector: 'ads-custom-header', standalone: false, template: "<div class=\"ads-custom-header\">\n <span\n class=\"menu-trigger-anchor\"\n [class.align-right]=\"isLastColumn\"\n #menuTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"sortFilterMenu\"\n (menuOpened)=\"menuOpen = true\"\n (menuClosed)=\"closeMenu()\"\n ></span>\n\n <span class=\"header-text\" [class.header-text--filtered]=\"isColumnFiltered\" [class.header-text--sorted]=\"isColumnSorted\">\n @if (isColumnSorted) {\n <div class=\"sort-order-badge\">\n <span>{{ sortOrder }}</span>\n </div>\n }\n @if (isColumnFiltered) {\n <ads-icon name=\"table_filter\" size=\"xxs_16\" stroke=\"secondary\" />\n }\n <span class=\"header-text__label\">{{ displayName }}</span>\n </span>\n\n @if (hasSortFilterConfig) {\n <button\n class=\"header-menu-button\"\n [class.active]=\"isActive\"\n (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n >\n @if (sortDirection === 'asc') {\n <ads-icon name=\"sorting_arrow_up\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else if (sortDirection === 'desc') {\n <ads-icon name=\"sorting_arrow_down\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else {\n <ads-icon name=\"menu_filters\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n }\n </button>\n }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n @if (sortFilterConfig) {\n <ads-column-sort-filter-menu\n [config]=\"sortFilterConfig\"\n [currentSortDirection]=\"sortDirection\"\n [selectedFilterValues]=\"filterValues\"\n (sortChanged)=\"onSortChanged($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (hideColumn)=\"onHideColumn($event)\"\n />\n }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;min-width:70px;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.ads-custom-header .header-text--filtered,.ads-custom-header .header-text--sorted{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;color:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge{display:flex;width:20px;height:20px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px;background:var(--color-secondary);flex-shrink:0}.ads-custom-header .header-text .sort-order-badge span{color:var(--color-white);text-align:center;font-size:12px;font-weight:600;line-height:16px}.ads-custom-header .header-text__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"] }]
|
|
8197
|
+
args: [{ selector: 'ads-custom-header', standalone: false, template: "<div class=\"ads-custom-header\">\n <span\n class=\"menu-trigger-anchor\"\n [class.align-right]=\"isLastColumn\"\n #menuTrigger=\"matMenuTrigger\"\n [matMenuTriggerFor]=\"sortFilterMenu\"\n (menuOpened)=\"menuOpen = true\"\n (menuClosed)=\"closeMenu()\"\n ></span>\n\n <span class=\"header-text\" [class.header-text--filtered]=\"isColumnFiltered\" [class.header-text--sorted]=\"isColumnSorted\">\n @if (isColumnSorted) {\n <div class=\"sort-order-badge\">\n <span>{{ sortOrder }}</span>\n </div>\n }\n @if (isColumnFiltered) {\n <ads-icon class=\"filter-icon\" name=\"table_filter\" size=\"xxs_16\" stroke=\"secondary\" />\n }\n <span class=\"header-text__label\">{{ displayName }}</span>\n </span>\n\n @if (hasSortFilterConfig) {\n <button\n class=\"header-menu-button\"\n [class.active]=\"isActive\"\n (click)=\"menuTrigger.openMenu(); $event.stopPropagation()\"\n >\n @if (sortDirection === 'asc') {\n <ads-icon name=\"sorting_arrow_up\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else if (sortDirection === 'desc') {\n <ads-icon name=\"sorting_arrow_down\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n } @else {\n <ads-icon name=\"menu_filters\" [theme]=\"sortArrowColor\" [stroke]=\"sortArrowColor\" size=\"auto\" />\n }\n </button>\n }\n</div>\n\n<mat-menu #sortFilterMenu=\"matMenu\" class=\"column-sort-filter-panel\" [xPosition]=\"isLastColumn ? 'before' : 'after'\">\n @if (sortFilterConfig) {\n <ads-column-sort-filter-menu\n [config]=\"sortFilterConfig\"\n [currentSortDirection]=\"sortDirection\"\n [selectedFilterValues]=\"filterValues\"\n (sortChanged)=\"onSortChanged($event)\"\n (filterChanged)=\"onFilterChanged($event)\"\n (hideColumn)=\"onHideColumn($event)\"\n />\n }\n</mat-menu>\n\n", styles: [":host{display:block;width:100%;height:100%}.ads-custom-header{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;min-width:70px;position:relative}.ads-custom-header .menu-trigger-anchor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}.ads-custom-header .menu-trigger-anchor.align-right{left:auto;right:0}.ads-custom-header .header-text{font-weight:600;font-size:16px;line-height:21px;color:var(--color-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.ads-custom-header .header-text--filtered,.ads-custom-header .header-text--sorted{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;color:var(--color-secondary)}.ads-custom-header .header-text .sort-order-badge{display:flex;width:20px;height:20px;flex-direction:column;justify-content:center;align-items:center;border-radius:100px;background:var(--color-secondary);flex-shrink:0}.ads-custom-header .header-text .sort-order-badge span{color:var(--color-white);text-align:center;font-size:12px;font-weight:600;line-height:16px}.ads-custom-header .header-text__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ads-custom-header .header-text .filter-icon{flex-shrink:0;min-width:16px}.ads-custom-header .header-menu-button{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;flex-shrink:0}::ng-deep .column-sort-filter-panel{margin-top:1px}::ng-deep .column-sort-filter-panel .mat-mdc-menu-content{padding:0}\n"] }]
|
|
8198
8198
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }] });
|
|
8199
8199
|
|
|
8200
8200
|
class AdsColumnSortFilterMenuModule {
|
|
@@ -12609,11 +12609,11 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
12609
12609
|
});
|
|
12610
12610
|
}
|
|
12611
12611
|
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\">\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) {\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
|
|
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\">\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) {\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-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
12613
|
}
|
|
12614
12614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
12615
12615
|
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\">\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) {\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
|
|
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\">\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) {\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-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
12617
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { steps: [{
|
|
12618
12618
|
type: Input
|
|
12619
12619
|
}], stepClick: [{
|