@ascentgl/ads-ui 21.41.0 → 21.43.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.
|
@@ -6915,6 +6915,8 @@ class AdsExpansionPanelComponent {
|
|
|
6915
6915
|
this.headerPadding = input('', ...(ngDevMode ? [{ debugName: "headerPadding" }] : []));
|
|
6916
6916
|
/** Content padding size () */
|
|
6917
6917
|
this.contentPadding = input('', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
|
|
6918
|
+
/** Whether to remove the panel border. Default: false */
|
|
6919
|
+
this.noBorder = input(false, ...(ngDevMode ? [{ debugName: "noBorder" }] : []));
|
|
6918
6920
|
this.expandedChange = output();
|
|
6919
6921
|
this.registry.register([adsIconChevronDown, adsIconChevronUp]);
|
|
6920
6922
|
}
|
|
@@ -6925,12 +6927,16 @@ class AdsExpansionPanelComponent {
|
|
|
6925
6927
|
// Scope the query to this component instance instead of the entire document
|
|
6926
6928
|
const panelHeader = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-header');
|
|
6927
6929
|
const contentPadding = this.elementRef.nativeElement.querySelector('.mat-expansion-panel-body');
|
|
6930
|
+
const panelElement = this.elementRef.nativeElement.querySelector('.mat-expansion-panel');
|
|
6928
6931
|
if (panelHeader && !!this.headerPadding()) {
|
|
6929
6932
|
panelHeader.style.padding = this.headerPadding();
|
|
6930
6933
|
}
|
|
6931
6934
|
if (contentPadding && !!this.contentPadding()) {
|
|
6932
6935
|
contentPadding.style.padding = this.contentPadding();
|
|
6933
6936
|
}
|
|
6937
|
+
if (panelElement && this.noBorder()) {
|
|
6938
|
+
panelElement.style.border = 'none';
|
|
6939
|
+
}
|
|
6934
6940
|
this.panel.expandedChange.subscribe(value => this.expandedChange.emit(value));
|
|
6935
6941
|
}
|
|
6936
6942
|
/** @ignore */
|
|
@@ -6939,12 +6945,12 @@ class AdsExpansionPanelComponent {
|
|
|
6939
6945
|
event.stopPropagation();
|
|
6940
6946
|
}
|
|
6941
6947
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsExpansionPanelComponent, deps: [{ token: i1.AdsIconRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6942
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] }); }
|
|
6948
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", 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"] }] }); }
|
|
6943
6949
|
}
|
|
6944
6950
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsExpansionPanelComponent, decorators: [{
|
|
6945
6951
|
type: Component,
|
|
6946
6952
|
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"] }]
|
|
6947
|
-
}], 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: [{
|
|
6953
|
+
}], 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 }] }], noBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "noBorder", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], panel: [{
|
|
6948
6954
|
type: ViewChild,
|
|
6949
6955
|
args: ['panel', { static: true }]
|
|
6950
6956
|
}] } });
|