@ascentgl/ads-ui 21.8.0 → 21.10.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.
|
@@ -6324,8 +6324,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
6324
6324
|
}] });
|
|
6325
6325
|
|
|
6326
6326
|
class AdsExpansionPanelComponent {
|
|
6327
|
-
constructor(registry) {
|
|
6327
|
+
constructor(registry, elementRef) {
|
|
6328
6328
|
this.registry = registry;
|
|
6329
|
+
this.elementRef = elementRef;
|
|
6329
6330
|
/** The unique id of the chip */
|
|
6330
6331
|
this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
6331
6332
|
/** The header text */
|
|
@@ -6344,9 +6345,9 @@ class AdsExpansionPanelComponent {
|
|
|
6344
6345
|
this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
|
|
6345
6346
|
/** The Chevron Icon size () */
|
|
6346
6347
|
this.chevronSize = input('base', ...(ngDevMode ? [{ debugName: "chevronSize" }] : []));
|
|
6347
|
-
/** Header padding size
|
|
6348
|
+
/** Header padding size () */
|
|
6348
6349
|
this.headerPadding = input('', ...(ngDevMode ? [{ debugName: "headerPadding" }] : []));
|
|
6349
|
-
/** Content padding size
|
|
6350
|
+
/** Content padding size () */
|
|
6350
6351
|
this.contentPadding = input('', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
|
|
6351
6352
|
this.expandedChange = output();
|
|
6352
6353
|
this.registry.register([adsIconChevronDown, adsIconChevronUp]);
|
|
@@ -6355,8 +6356,9 @@ class AdsExpansionPanelComponent {
|
|
|
6355
6356
|
return this.panel.expanded;
|
|
6356
6357
|
}
|
|
6357
6358
|
ngAfterContentInit() {
|
|
6358
|
-
|
|
6359
|
-
const
|
|
6359
|
+
// Scope the query to this component instance instead of the entire document
|
|
6360
|
+
const panelHeader = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-header');
|
|
6361
|
+
const contentPadding = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-body');
|
|
6360
6362
|
if (panelHeader && !!this.headerPadding()) {
|
|
6361
6363
|
panelHeader.style.padding = this.headerPadding();
|
|
6362
6364
|
}
|
|
@@ -6370,13 +6372,13 @@ class AdsExpansionPanelComponent {
|
|
|
6370
6372
|
panel.toggle();
|
|
6371
6373
|
event.stopPropagation();
|
|
6372
6374
|
}
|
|
6373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AdsExpansionPanelComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AdsExpansionPanelComponent, deps: [{ token: i1.AdsIconRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6374
6376
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AdsExpansionPanelComponent, isStandalone: false, selector: "ads-expansion-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, chevronColor: { classPropertyName: "chevronColor", publicName: "chevronColor", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplateData: { classPropertyName: "headerTemplateData", publicName: "headerTemplateData", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, chevronSize: { classPropertyName: "chevronSize", publicName: "chevronSize", isSignal: true, isRequired: false, transformFunction: null }, headerPadding: { classPropertyName: "headerPadding", publicName: "headerPadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }], ngImport: i0, template: "<mat-expansion-panel [expanded]=\"isExpanded()\" [ngStyle]=\"{ width: width() }\" #panel [disabled]=\"disabled()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (!!headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate()!; context: { data: headerTemplateData() }\" />\n } @else {\n {{ header() }}\n }\n </mat-panel-title>\n <mat-panel-description (click)=\"toggleAndStop(panel, $event)\">\n @if (panel.expanded) {\n <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_up\" [theme]=\"chevronColor()\" />\n } @else {\n <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_down\" [theme]=\"chevronColor()\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content />\n</mat-expansion-panel>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i6$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i6$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$1.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
6375
6377
|
}
|
|
6376
6378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AdsExpansionPanelComponent, decorators: [{
|
|
6377
6379
|
type: Component,
|
|
6378
6380
|
args: [{ selector: 'ads-expansion-panel', standalone: false, template: "<mat-expansion-panel [expanded]=\"isExpanded()\" [ngStyle]=\"{ width: width() }\" #panel [disabled]=\"disabled()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (!!headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate()!; context: { data: headerTemplateData() }\" />\n } @else {\n {{ header() }}\n }\n </mat-panel-title>\n <mat-panel-description (click)=\"toggleAndStop(panel, $event)\">\n @if (panel.expanded) {\n <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_up\" [theme]=\"chevronColor()\" />\n } @else {\n <ads-icon [size]=\"chevronSize() === 'base' ? 'xs' : 'xxxs'\" name=\"chevron_down\" [theme]=\"chevronColor()\" />\n }\n </mat-panel-description>\n </mat-expansion-panel-header>\n <ng-content />\n</mat-expansion-panel>\n", styles: [".mat-expansion-panel{--mat-expansion-container-shape: 5px;--mat-expansion-container-background-color: var(--color-white);--mat-expansion-container-text-color: var(--color-medium);--mat-expansion-container-text-size: font-size(text-base);box-shadow:none!important;border:1px solid var(--color-light)}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header{--mat-expansion-header-collapsed-state-height: unset;min-height:24px;height:auto;padding:16px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header.mat-expanded{padding-bottom:8px}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-title{--mat-expansion-header-text-color: var(--color-dark);font-size:1.25rem;line-height:26px;font-weight:600;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header mat-panel-description{margin:0;justify-content:end;flex-basis:auto}.mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-expansion-indicator{display:none}.mat-expansion-panel ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body{--mat-expansion-container-text-size: font-size(text-base);line-height:21px;padding:0 16px 16px}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true]{background-color:var(--color-muted)}.mat-expansion-panel .mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title{color:var(--color-medium)}\n"] }]
|
|
6379
|
-
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], chevronColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronColor", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], headerTemplateData: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplateData", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], chevronSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronSize", required: false }] }], headerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], panel: [{
|
|
6381
|
+
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], chevronColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronColor", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], headerTemplateData: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplateData", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], chevronSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronSize", required: false }] }], headerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], panel: [{
|
|
6380
6382
|
type: ViewChild,
|
|
6381
6383
|
args: ['panel', { static: true }]
|
|
6382
6384
|
}] } });
|
|
@@ -8761,8 +8763,6 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
8761
8763
|
this.steps = [];
|
|
8762
8764
|
/** Whether to enable smooth scrolling when navigating to steps */
|
|
8763
8765
|
this.smoothScroll = true;
|
|
8764
|
-
/** Scroll offset in pixels when navigating to target elements */
|
|
8765
|
-
this.scrollOffset = 100;
|
|
8766
8766
|
/** Event emitted when a step is clicked */
|
|
8767
8767
|
this.stepClick = new EventEmitter();
|
|
8768
8768
|
/** Event emitted when a substep is clicked */
|
|
@@ -8803,7 +8803,7 @@ class AdsVerticalSideNavigationStepperComponent {
|
|
|
8803
8803
|
}
|
|
8804
8804
|
}
|
|
8805
8805
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8806
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps", smoothScroll: "smoothScroll"
|
|
8806
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AdsVerticalSideNavigationStepperComponent, isStandalone: false, selector: "ads-vertical-side-navigation-stepper", inputs: { steps: "steps", smoothScroll: "smoothScroll" }, 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"] }] }); }
|
|
8807
8807
|
}
|
|
8808
8808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AdsVerticalSideNavigationStepperComponent, decorators: [{
|
|
8809
8809
|
type: Component,
|
|
@@ -8812,8 +8812,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
8812
8812
|
type: Input
|
|
8813
8813
|
}], smoothScroll: [{
|
|
8814
8814
|
type: Input
|
|
8815
|
-
}], scrollOffset: [{
|
|
8816
|
-
type: Input
|
|
8817
8815
|
}], stepClick: [{
|
|
8818
8816
|
type: Output
|
|
8819
8817
|
}], subStepClick: [{
|