@truenas/ui-components 0.3.17 → 0.3.18
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.
|
@@ -6215,11 +6215,11 @@ class TnExpansionPanelComponent {
|
|
|
6215
6215
|
].filter(Boolean);
|
|
6216
6216
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
6217
6217
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6218
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnExpansionPanelComponent, isStandalone: true, selector: "tn-expansion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, titleStyle: { classPropertyName: "titleStyle", publicName: "titleStyle", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, toggleTestId: { classPropertyName: "toggleTestId", publicName: "toggleTestId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", toggleEvent: "toggleEvent" }, ngImport: i0, template: "<div tnTestIdType=\"expansion-panel\" [ngClass]=\"classes()\" [tnTestId]=\"testId()\">\n <button class=\"tn-expansion-panel__header\"\n type=\"button\"\n tnTestIdType=\"button\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"effectiveExpanded()\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-disabled]=\"disabled()\"\n [tnTestId]=\"toggleTestId()\"\n (click)=\"toggle()\">\n @if (title()) {\n <div class=\"tn-expansion-panel__title\">\n {{ title() }}\n </div>\n }\n <ng-content select=\"[slot=title]\" />\n\n <div class=\"tn-expansion-panel__indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </div>\n </button>\n\n <!-- `inert` (not aria-hidden) when collapsed: it removes the content from both\n the tab order and the a11y tree, so interactive children aren't keyboard-\n reachable while hidden. aria-hidden alone would leave them focusable, which\n is also an ARIA violation (aria-hidden must not contain focusable elements). -->\n <div class=\"tn-expansion-panel__content\"\n [class.tn-expansion-panel__content--collapsed]=\"!effectiveExpanded()\"\n [id]=\"contentId\"\n [attr.inert]=\"!effectiveExpanded() ? '' : null\">\n <div class=\"tn-expansion-panel__content-inner\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".tn-expansion-panel{border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-expansion-panel--elevation-none{box-shadow:none}.tn-expansion-panel--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-expansion-panel--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-expansion-panel--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-expansion-panel--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel--background{background-color:var(--tn-bg2, #ffffff)}.tn-expansion-panel--disabled{opacity:.6;cursor:not-allowed}.tn-expansion-panel--disabled .tn-expansion-panel__header{cursor:not-allowed}.tn-expansion-panel--expanded .tn-expansion-panel__indicator svg{transform:rotate(180deg)}.tn-expansion-panel--padding-small .tn-expansion-panel__header{padding:12px 16px}.tn-expansion-panel--padding-small .tn-expansion-panel__content-inner{padding:0 16px 16px}.tn-expansion-panel--padding-medium .tn-expansion-panel__header{padding:16px 24px}.tn-expansion-panel--padding-medium .tn-expansion-panel__content-inner{padding:0 24px 24px}.tn-expansion-panel--padding-large .tn-expansion-panel__header{padding:24px 32px}.tn-expansion-panel--padding-large .tn-expansion-panel__content-inner{padding:0 32px 32px}.tn-expansion-panel--title-header .tn-expansion-panel__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-header .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-link .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-primary, #3b82f6);text-decoration:none}.tn-expansion-panel--title-link .tn-expansion-panel__indicator{color:var(--tn-primary, #3b82f6)}.tn-expansion-panel--title-link .tn-expansion-panel__header:hover:not(:disabled) .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel--title-link .tn-expansion-panel__header:focus .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel__header{width:100%;background:none;border:none;color:var(--tn-fg1, #1f2937);display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;text-align:left;transition:background-color .2s ease}.tn-expansion-panel--bordered .tn-expansion-panel__header{border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel__header:hover:not(:disabled){background-color:var(--tn-alt-bg1, rgba(0, 0, 0, .05))}.tn-expansion-panel__header:focus{outline:2px solid var(--tn-primary, #3b82f6);outline-offset:-2px}.tn-expansion-panel__header:disabled{cursor:not-allowed}.tn-expansion-panel__title{margin:0;line-height:1.5;flex:1;transition:text-decoration .2s ease}.tn-expansion-panel__indicator{display:flex;align-items:center;justify-content:center;margin-left:16px;transition:transform .2s ease,color .2s ease}.tn-expansion-panel__indicator svg{transition:transform .2s ease}.tn-expansion-panel__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.tn-expansion-panel__content--collapsed{grid-template-rows:0fr}.tn-expansion-panel__content-inner{min-height:0;overflow:hidden}@media(prefers-reduced-motion:reduce){.tn-expansion-panel,.tn-expansion-panel__header,.tn-expansion-panel__title,.tn-expansion-panel__indicator,.tn-expansion-panel__indicator svg,.tn-expansion-panel__content{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
|
|
6218
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnExpansionPanelComponent, isStandalone: true, selector: "tn-expansion-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, titleStyle: { classPropertyName: "titleStyle", publicName: "titleStyle", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, toggleTestId: { classPropertyName: "toggleTestId", publicName: "toggleTestId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange", toggleEvent: "toggleEvent" }, ngImport: i0, template: "<div tnTestIdType=\"expansion-panel\" [ngClass]=\"classes()\" [tnTestId]=\"testId()\">\n <button class=\"tn-expansion-panel__header\"\n type=\"button\"\n tnTestIdType=\"button\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"effectiveExpanded()\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-disabled]=\"disabled()\"\n [tnTestId]=\"toggleTestId()\"\n (click)=\"toggle()\">\n @if (title()) {\n <div class=\"tn-expansion-panel__title\">\n {{ title() }}\n </div>\n }\n <ng-content select=\"[slot=title]\" />\n\n <div class=\"tn-expansion-panel__indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </div>\n </button>\n\n <!-- `inert` (not aria-hidden) when collapsed: it removes the content from both\n the tab order and the a11y tree, so interactive children aren't keyboard-\n reachable while hidden. aria-hidden alone would leave them focusable, which\n is also an ARIA violation (aria-hidden must not contain focusable elements). -->\n <div class=\"tn-expansion-panel__content\"\n [class.tn-expansion-panel__content--collapsed]=\"!effectiveExpanded()\"\n [id]=\"contentId\"\n [attr.inert]=\"!effectiveExpanded() ? '' : null\">\n <div class=\"tn-expansion-panel__content-inner\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".tn-expansion-panel{border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-expansion-panel--elevation-none{box-shadow:none}.tn-expansion-panel--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-expansion-panel--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-expansion-panel--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-expansion-panel--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel--background{background-color:var(--tn-bg2, #ffffff)}.tn-expansion-panel--disabled{opacity:.6;cursor:not-allowed}.tn-expansion-panel--disabled .tn-expansion-panel__header{cursor:not-allowed}.tn-expansion-panel--expanded .tn-expansion-panel__indicator svg{transform:rotate(180deg)}.tn-expansion-panel--padding-small .tn-expansion-panel__header{padding:12px 16px}.tn-expansion-panel--padding-small .tn-expansion-panel__content-inner{padding:0 16px 16px}.tn-expansion-panel--padding-medium .tn-expansion-panel__header{padding:16px 24px}.tn-expansion-panel--padding-medium .tn-expansion-panel__content-inner{padding:0 24px 24px}.tn-expansion-panel--padding-large .tn-expansion-panel__header{padding:24px 32px}.tn-expansion-panel--padding-large .tn-expansion-panel__content-inner{padding:0 32px 32px}.tn-expansion-panel--title-header .tn-expansion-panel__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-header .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-link .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-primary, #3b82f6);text-decoration:none}.tn-expansion-panel--title-link .tn-expansion-panel__indicator{color:var(--tn-primary, #3b82f6)}.tn-expansion-panel--title-link .tn-expansion-panel__header:hover:not(:disabled) .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel--title-link .tn-expansion-panel__header:focus .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel__header{width:100%;background:none;border:none;color:var(--tn-fg1, #1f2937);display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;text-align:left;transition:background-color .2s ease}.tn-expansion-panel--bordered .tn-expansion-panel__header{border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel__header:hover:not(:disabled){background-color:var(--tn-alt-bg1, rgba(0, 0, 0, .05))}.tn-expansion-panel__header:focus{outline:2px solid var(--tn-primary, #3b82f6);outline-offset:-2px}.tn-expansion-panel__header:disabled{cursor:not-allowed}.tn-expansion-panel__title{margin:0;line-height:1.5;flex:1;transition:text-decoration .2s ease}.tn-expansion-panel__indicator{display:flex;align-items:center;justify-content:center;margin-left:16px;transition:transform .2s ease,color .2s ease}.tn-expansion-panel__indicator svg{transition:transform .2s ease}.tn-expansion-panel__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.tn-expansion-panel__content--collapsed{grid-template-rows:0fr}.tn-expansion-panel__content--collapsed .tn-expansion-panel__content-inner{padding-bottom:0}.tn-expansion-panel__content-inner{min-height:0;overflow:hidden;transition:padding-bottom .3s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.tn-expansion-panel,.tn-expansion-panel__header,.tn-expansion-panel__title,.tn-expansion-panel__indicator,.tn-expansion-panel__indicator svg,.tn-expansion-panel__content,.tn-expansion-panel__content-inner{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
|
|
6219
6219
|
}
|
|
6220
6220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnExpansionPanelComponent, decorators: [{
|
|
6221
6221
|
type: Component,
|
|
6222
|
-
args: [{ selector: 'tn-expansion-panel', standalone: true, imports: [CommonModule, TnTestIdDirective], template: "<div tnTestIdType=\"expansion-panel\" [ngClass]=\"classes()\" [tnTestId]=\"testId()\">\n <button class=\"tn-expansion-panel__header\"\n type=\"button\"\n tnTestIdType=\"button\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"effectiveExpanded()\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-disabled]=\"disabled()\"\n [tnTestId]=\"toggleTestId()\"\n (click)=\"toggle()\">\n @if (title()) {\n <div class=\"tn-expansion-panel__title\">\n {{ title() }}\n </div>\n }\n <ng-content select=\"[slot=title]\" />\n\n <div class=\"tn-expansion-panel__indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </div>\n </button>\n\n <!-- `inert` (not aria-hidden) when collapsed: it removes the content from both\n the tab order and the a11y tree, so interactive children aren't keyboard-\n reachable while hidden. aria-hidden alone would leave them focusable, which\n is also an ARIA violation (aria-hidden must not contain focusable elements). -->\n <div class=\"tn-expansion-panel__content\"\n [class.tn-expansion-panel__content--collapsed]=\"!effectiveExpanded()\"\n [id]=\"contentId\"\n [attr.inert]=\"!effectiveExpanded() ? '' : null\">\n <div class=\"tn-expansion-panel__content-inner\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".tn-expansion-panel{border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-expansion-panel--elevation-none{box-shadow:none}.tn-expansion-panel--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-expansion-panel--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-expansion-panel--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-expansion-panel--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel--background{background-color:var(--tn-bg2, #ffffff)}.tn-expansion-panel--disabled{opacity:.6;cursor:not-allowed}.tn-expansion-panel--disabled .tn-expansion-panel__header{cursor:not-allowed}.tn-expansion-panel--expanded .tn-expansion-panel__indicator svg{transform:rotate(180deg)}.tn-expansion-panel--padding-small .tn-expansion-panel__header{padding:12px 16px}.tn-expansion-panel--padding-small .tn-expansion-panel__content-inner{padding:0 16px 16px}.tn-expansion-panel--padding-medium .tn-expansion-panel__header{padding:16px 24px}.tn-expansion-panel--padding-medium .tn-expansion-panel__content-inner{padding:0 24px 24px}.tn-expansion-panel--padding-large .tn-expansion-panel__header{padding:24px 32px}.tn-expansion-panel--padding-large .tn-expansion-panel__content-inner{padding:0 32px 32px}.tn-expansion-panel--title-header .tn-expansion-panel__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-header .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-link .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-primary, #3b82f6);text-decoration:none}.tn-expansion-panel--title-link .tn-expansion-panel__indicator{color:var(--tn-primary, #3b82f6)}.tn-expansion-panel--title-link .tn-expansion-panel__header:hover:not(:disabled) .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel--title-link .tn-expansion-panel__header:focus .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel__header{width:100%;background:none;border:none;color:var(--tn-fg1, #1f2937);display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;text-align:left;transition:background-color .2s ease}.tn-expansion-panel--bordered .tn-expansion-panel__header{border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel__header:hover:not(:disabled){background-color:var(--tn-alt-bg1, rgba(0, 0, 0, .05))}.tn-expansion-panel__header:focus{outline:2px solid var(--tn-primary, #3b82f6);outline-offset:-2px}.tn-expansion-panel__header:disabled{cursor:not-allowed}.tn-expansion-panel__title{margin:0;line-height:1.5;flex:1;transition:text-decoration .2s ease}.tn-expansion-panel__indicator{display:flex;align-items:center;justify-content:center;margin-left:16px;transition:transform .2s ease,color .2s ease}.tn-expansion-panel__indicator svg{transition:transform .2s ease}.tn-expansion-panel__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.tn-expansion-panel__content--collapsed{grid-template-rows:0fr}.tn-expansion-panel__content-inner{min-height:0;overflow:hidden}@media(prefers-reduced-motion:reduce){.tn-expansion-panel,.tn-expansion-panel__header,.tn-expansion-panel__title,.tn-expansion-panel__indicator,.tn-expansion-panel__indicator svg,.tn-expansion-panel__content{transition:none}}\n"] }]
|
|
6222
|
+
args: [{ selector: 'tn-expansion-panel', standalone: true, imports: [CommonModule, TnTestIdDirective], template: "<div tnTestIdType=\"expansion-panel\" [ngClass]=\"classes()\" [tnTestId]=\"testId()\">\n <button class=\"tn-expansion-panel__header\"\n type=\"button\"\n tnTestIdType=\"button\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"effectiveExpanded()\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-disabled]=\"disabled()\"\n [tnTestId]=\"toggleTestId()\"\n (click)=\"toggle()\">\n @if (title()) {\n <div class=\"tn-expansion-panel__title\">\n {{ title() }}\n </div>\n }\n <ng-content select=\"[slot=title]\" />\n\n <div class=\"tn-expansion-panel__indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </div>\n </button>\n\n <!-- `inert` (not aria-hidden) when collapsed: it removes the content from both\n the tab order and the a11y tree, so interactive children aren't keyboard-\n reachable while hidden. aria-hidden alone would leave them focusable, which\n is also an ARIA violation (aria-hidden must not contain focusable elements). -->\n <div class=\"tn-expansion-panel__content\"\n [class.tn-expansion-panel__content--collapsed]=\"!effectiveExpanded()\"\n [id]=\"contentId\"\n [attr.inert]=\"!effectiveExpanded() ? '' : null\">\n <div class=\"tn-expansion-panel__content-inner\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [".tn-expansion-panel{border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-expansion-panel--elevation-none{box-shadow:none}.tn-expansion-panel--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-expansion-panel--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-expansion-panel--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-expansion-panel--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel--background{background-color:var(--tn-bg2, #ffffff)}.tn-expansion-panel--disabled{opacity:.6;cursor:not-allowed}.tn-expansion-panel--disabled .tn-expansion-panel__header{cursor:not-allowed}.tn-expansion-panel--expanded .tn-expansion-panel__indicator svg{transform:rotate(180deg)}.tn-expansion-panel--padding-small .tn-expansion-panel__header{padding:12px 16px}.tn-expansion-panel--padding-small .tn-expansion-panel__content-inner{padding:0 16px 16px}.tn-expansion-panel--padding-medium .tn-expansion-panel__header{padding:16px 24px}.tn-expansion-panel--padding-medium .tn-expansion-panel__content-inner{padding:0 24px 24px}.tn-expansion-panel--padding-large .tn-expansion-panel__header{padding:24px 32px}.tn-expansion-panel--padding-large .tn-expansion-panel__content-inner{padding:0 32px 32px}.tn-expansion-panel--title-header .tn-expansion-panel__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-header .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-link .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-primary, #3b82f6);text-decoration:none}.tn-expansion-panel--title-link .tn-expansion-panel__indicator{color:var(--tn-primary, #3b82f6)}.tn-expansion-panel--title-link .tn-expansion-panel__header:hover:not(:disabled) .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel--title-link .tn-expansion-panel__header:focus .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel__header{width:100%;background:none;border:none;color:var(--tn-fg1, #1f2937);display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;text-align:left;transition:background-color .2s ease}.tn-expansion-panel--bordered .tn-expansion-panel__header{border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel__header:hover:not(:disabled){background-color:var(--tn-alt-bg1, rgba(0, 0, 0, .05))}.tn-expansion-panel__header:focus{outline:2px solid var(--tn-primary, #3b82f6);outline-offset:-2px}.tn-expansion-panel__header:disabled{cursor:not-allowed}.tn-expansion-panel__title{margin:0;line-height:1.5;flex:1;transition:text-decoration .2s ease}.tn-expansion-panel__indicator{display:flex;align-items:center;justify-content:center;margin-left:16px;transition:transform .2s ease,color .2s ease}.tn-expansion-panel__indicator svg{transition:transform .2s ease}.tn-expansion-panel__content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.tn-expansion-panel__content--collapsed{grid-template-rows:0fr}.tn-expansion-panel__content--collapsed .tn-expansion-panel__content-inner{padding-bottom:0}.tn-expansion-panel__content-inner{min-height:0;overflow:hidden;transition:padding-bottom .3s cubic-bezier(.4,0,.2,1)}@media(prefers-reduced-motion:reduce){.tn-expansion-panel,.tn-expansion-panel__header,.tn-expansion-panel__title,.tn-expansion-panel__indicator,.tn-expansion-panel__indicator svg,.tn-expansion-panel__content,.tn-expansion-panel__content-inner{transition:none}}\n"] }]
|
|
6223
6223
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], titleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleStyle", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], toggleTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleTestId", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], toggleEvent: [{ type: i0.Output, args: ["toggleEvent"] }] } });
|
|
6224
6224
|
|
|
6225
6225
|
/**
|