@educarehq/solaris-ui 0.24.0 → 0.25.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.
|
@@ -17091,6 +17091,8 @@ class SolarisCollapsibleComponent {
|
|
|
17091
17091
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
17092
17092
|
appearance = input('boxed', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
17093
17093
|
icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
17094
|
+
leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
|
|
17095
|
+
leadingIconDecorative = input(true, { ...(ngDevMode ? { debugName: "leadingIconDecorative" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
17094
17096
|
baseId = computed(() => {
|
|
17095
17097
|
return resolveElementId(this.elementRef, 'solaris-collapsible');
|
|
17096
17098
|
}, ...(ngDevMode ? [{ debugName: "baseId" }] : /* istanbul ignore next */ []));
|
|
@@ -17160,7 +17162,7 @@ class SolarisCollapsibleComponent {
|
|
|
17160
17162
|
this.open.set(!this.open());
|
|
17161
17163
|
}
|
|
17162
17164
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h6>\n }\n @default {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n }\n} @else {\n <div class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </div>\n}\n\n<ng-template #triggerContent>\n <button\n type=\"button\"\n class=\"solaris-collapsible__trigger\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n [disabled]=\"isEffectivelyDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"solaris-collapsible__trigger-label\">\n {{ labelText() }}\n </span>\n <solaris-icon\n [name]=\"effectiveIcon()\"\n class=\"solaris-collapsible__trigger-icon\"\n [decorative]=\"true\"\n />\n </button>\n</ng-template>\n\n<div\n class=\"solaris-collapsible__panel\"\n [id]=\"panelId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"triggerId()\"\n [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n [attr.inert]=\"isOpen() ? null : ''\"\n>\n <div class=\"solaris-collapsible__panel-inner\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17165
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: SolarisCollapsibleComponent, isStandalone: true, selector: "solaris-collapsible", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, leadingIconDecorative: { classPropertyName: "leadingIconDecorative", publicName: "leadingIconDecorative", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-appearance": "effectiveAppearance()", "attr.data-open": "isOpen() ? \"\" : null", "attr.data-disabled": "isEffectivelyDisabled() ? \"\" : null" }, classAttribute: "solaris-collapsible" }, ngImport: i0, template: "@if (headingLevel()) {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h6>\n }\n @default {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n }\n} @else {\n <div class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </div>\n}\n\n<ng-template #triggerContent>\n <button\n type=\"button\"\n class=\"solaris-collapsible__trigger\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n [disabled]=\"isEffectivelyDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"solaris-collapsible__trigger-label\">\n @if (leadingIcon(); as leadingIconName) {\n <solaris-icon\n [name]=\"leadingIconName\"\n class=\"solaris-collapsible__trigger-leading-icon\"\n [decorative]=\"leadingIconDecorative()\"\n />\n }\n {{ labelText() }}\n </span>\n <solaris-icon\n [name]=\"effectiveIcon()\"\n class=\"solaris-collapsible__trigger-icon\"\n [decorative]=\"true\"\n />\n </button>\n</ng-template>\n\n<div\n class=\"solaris-collapsible__panel\"\n [id]=\"panelId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"triggerId()\"\n [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n [attr.inert]=\"isOpen() ? null : ''\"\n>\n <div class=\"solaris-collapsible__panel-inner\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-label{flex:1;min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-collapsible-trigger-gap)}.solaris-collapsible__trigger-leading-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17164
17166
|
}
|
|
17165
17167
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: SolarisCollapsibleComponent, decorators: [{
|
|
17166
17168
|
type: Component,
|
|
@@ -17170,8 +17172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
17170
17172
|
'[attr.data-appearance]': 'effectiveAppearance()',
|
|
17171
17173
|
'[attr.data-open]': 'isOpen() ? "" : null',
|
|
17172
17174
|
'[attr.data-disabled]': 'isEffectivelyDisabled() ? "" : null',
|
|
17173
|
-
}, template: "@if (headingLevel()) {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h6>\n }\n @default {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n }\n} @else {\n <div class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </div>\n}\n\n<ng-template #triggerContent>\n <button\n type=\"button\"\n class=\"solaris-collapsible__trigger\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n [disabled]=\"isEffectivelyDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"solaris-collapsible__trigger-label\">\n {{ labelText() }}\n </span>\n <solaris-icon\n [name]=\"effectiveIcon()\"\n class=\"solaris-collapsible__trigger-icon\"\n [decorative]=\"true\"\n />\n </button>\n</ng-template>\n\n<div\n class=\"solaris-collapsible__panel\"\n [id]=\"panelId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"triggerId()\"\n [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n [attr.inert]=\"isOpen() ? null : ''\"\n>\n <div class=\"solaris-collapsible__panel-inner\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"] }]
|
|
17174
|
-
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
17175
|
+
}, template: "@if (headingLevel()) {\n @switch (headingLevel()) {\n @case (2) {\n <h2 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h2>\n }\n @case (3) {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n @case (4) {\n <h4 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h4>\n }\n @case (5) {\n <h5 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h5>\n }\n @case (6) {\n <h6 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h6>\n }\n @default {\n <h3 class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </h3>\n }\n }\n} @else {\n <div class=\"solaris-collapsible__header\">\n <ng-container *ngTemplateOutlet=\"triggerContent\" />\n </div>\n}\n\n<ng-template #triggerContent>\n <button\n type=\"button\"\n class=\"solaris-collapsible__trigger\"\n [id]=\"triggerId()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"panelId()\"\n [attr.aria-label]=\"effectiveAriaLabel()\"\n [attr.aria-disabled]=\"!canToggleClosed() && isOpen() ? 'true' : null\"\n [disabled]=\"isEffectivelyDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"solaris-collapsible__trigger-label\">\n @if (leadingIcon(); as leadingIconName) {\n <solaris-icon\n [name]=\"leadingIconName\"\n class=\"solaris-collapsible__trigger-leading-icon\"\n [decorative]=\"leadingIconDecorative()\"\n />\n }\n {{ labelText() }}\n </span>\n <solaris-icon\n [name]=\"effectiveIcon()\"\n class=\"solaris-collapsible__trigger-icon\"\n [decorative]=\"true\"\n />\n </button>\n</ng-template>\n\n<div\n class=\"solaris-collapsible__panel\"\n [id]=\"panelId()\"\n role=\"region\"\n [attr.aria-labelledby]=\"triggerId()\"\n [attr.aria-hidden]=\"isOpen() ? null : 'true'\"\n [attr.inert]=\"isOpen() ? null : ''\"\n>\n <div class=\"solaris-collapsible__panel-inner\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{--solaris-collapsible-radius: var(--solaris-radius-md);--solaris-collapsible-icon-size: var(--solaris-spacing-4);--solaris-collapsible-trigger-gap: var(--solaris-spacing-2);--solaris-collapsible-trigger-color: var(--solaris-text-muted);--solaris-collapsible-border-color: var(--solaris-border-subtle);--solaris-collapsible-trigger-font-size: var(--solaris-font-size-md);--solaris-collapsible-trigger-font-weight: var(--solaris-font-weight-medium);--solaris-collapsible-trigger-padding: var(--solaris-spacing-2) var(--solaris-spacing-3);--solaris-collapsible-header-inset-top: var(--solaris-spacing-3);display:block;box-sizing:border-box}.solaris-collapsible__header{margin:0}.solaris-collapsible__trigger{width:100%;border:none;display:flex;cursor:pointer;text-align:start;align-items:center;box-sizing:border-box;background:transparent;justify-content:space-between;gap:var(--solaris-collapsible-trigger-gap);color:var(--solaris-collapsible-trigger-color);padding:var(--solaris-collapsible-trigger-padding);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard);font:var(--solaris-collapsible-trigger-font-weight) var(--solaris-collapsible-trigger-font-size)/1.2 var(--solaris-font-family-sans)}.solaris-collapsible__trigger:hover:not(:disabled){color:var(--solaris-text-default)}.solaris-collapsible__trigger:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-focus-ring-color)}.solaris-collapsible__trigger:disabled{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-collapsible__trigger-label{flex:1;min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-collapsible-trigger-gap)}.solaris-collapsible__trigger-leading-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size)}.solaris-collapsible__trigger-icon{flex-shrink:0;width:var(--solaris-collapsible-icon-size);height:var(--solaris-collapsible-icon-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__trigger-icon{transform:rotate(180deg)}.solaris-collapsible__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-collapsible__panel{grid-template-rows:1fr}.solaris-collapsible__panel-inner{min-height:0;overflow:hidden;color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);padding:0 var(--solaris-spacing-5) var(--solaris-spacing-3)}:host([data-appearance=boxed]){border-radius:var(--solaris-collapsible-radius);border:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=boxed]) .solaris-collapsible__header{margin-top:var(--solaris-collapsible-header-inset-top)}:host([data-appearance=lined]) .solaris-collapsible__trigger{border-bottom:var(--solaris-border-width-sm) solid var(--solaris-collapsible-border-color)}:host([data-appearance=lined]):last-child .solaris-collapsible__trigger{border-bottom:none}@media(prefers-reduced-motion:reduce){.solaris-collapsible__trigger,.solaris-collapsible__trigger-icon,.solaris-collapsible__panel{transition:none}}:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger,:host-context([data-reduced-motion=true]) .solaris-collapsible__trigger-icon,:host-context([data-reduced-motion=true]) .solaris-collapsible__panel{transition:none}\n"] }]
|
|
17176
|
+
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], leadingIconDecorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIconDecorative", required: false }] }] } });
|
|
17175
17177
|
|
|
17176
17178
|
class SolarisAccordionComponent {
|
|
17177
17179
|
appearance = input('boxed', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|