@ascentgl/ads-ui 21.9.0 → 21.10.0

package/fesm2022/ascentgl-ads-ui.mjs

@@ -6324,8 +6324,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
         }] });
 
 class AdsExpansionPanelComponent {
-    constructor(registry) {
+    constructor(registry, elementRef) {
         this.registry = registry;
+        this.elementRef = elementRef;
         /** The unique id of the chip */
         this.id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** The header text */
@@ -6344,9 +6345,9 @@ class AdsExpansionPanelComponent {
         this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : []));
         /** The Chevron Icon size () */
         this.chevronSize = input('base', ...(ngDevMode ? [{ debugName: "chevronSize" }] : []));
-        /** Header padding size size () */
+        /** Header padding size () */
         this.headerPadding = input('', ...(ngDevMode ? [{ debugName: "headerPadding" }] : []));
-        /** Content padding size size () */
+        /** Content padding size () */
         this.contentPadding = input('', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
         this.expandedChange = output();
         this.registry.register([adsIconChevronDown, adsIconChevronUp]);
@@ -6355,8 +6356,9 @@ class AdsExpansionPanelComponent {
         return this.panel.expanded;
     }
     ngAfterContentInit() {
-        const panelHeader = document.querySelector('.mat-expansion-panel-header');
-        const contentPadding = document.querySelector('.mat-expansion-panel-body');
+        // Scope the query to this component instance instead of the entire document
+        const panelHeader = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-header');
+        const contentPadding = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-body');
         if (panelHeader && !!this.headerPadding()) {
             panelHeader.style.padding = this.headerPadding();
         }
@@ -6370,13 +6372,13 @@ class AdsExpansionPanelComponent {
         panel.toggle();
         event.stopPropagation();
     }
-    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 }); }
+    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 }); }
     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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AdsExpansionPanelComponent, decorators: [{
             type: Component,
             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"] }]
-        }], 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: [{
+        }], 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: [{
                 type: ViewChild,
                 args: ['panel', { static: true }]
             }] } });