@truenas/ui-components 0.8.10 → 0.8.12
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.
|
@@ -9489,7 +9489,7 @@ var TnExpansionPanelComponent = class TnExpansionPanelComponent {
|
|
|
9489
9489
|
},
|
|
9490
9490
|
ngImport: i0,
|
|
9491
9491
|
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",
|
|
9492
|
-
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-text, var(--tn-primary, #0074a7));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{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);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
|
|
9492
|
+
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-text, var(--tn-primary, #0074a7));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{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);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;border-radius:8px}.tn-expansion-panel--bordered>.tn-expansion-panel__header{border-radius:7px}.tn-expansion-panel--expanded>.tn-expansion-panel__header{border-bottom-left-radius:0;border-bottom-right-radius:0}.tn-expansion-panel--bordered.tn-expansion-panel--expanded>.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-visible{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"],
|
|
9493
9493
|
dependencies: [
|
|
9494
9494
|
{
|
|
9495
9495
|
kind: "ngmodule",
|
|
@@ -9524,7 +9524,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9524
9524
|
imports: [CommonModule, TnTestIdDirective],
|
|
9525
9525
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
9526
9526
|
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",
|
|
9527
|
-
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-text, var(--tn-primary, #0074a7));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{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);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
|
|
9527
|
+
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-text, var(--tn-primary, #0074a7));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{--tn-error-text: var(--tn-error, var(--tn-red, #bd2626));--tn-primary-text: var(--tn-fg1, #222222);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;border-radius:8px}.tn-expansion-panel--bordered>.tn-expansion-panel__header{border-radius:7px}.tn-expansion-panel--expanded>.tn-expansion-panel__header{border-bottom-left-radius:0;border-bottom-right-radius:0}.tn-expansion-panel--bordered.tn-expansion-panel--expanded>.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-visible{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"]
|
|
9528
9528
|
}]
|
|
9529
9529
|
}],
|
|
9530
9530
|
propDecorators: {
|
|
@@ -25588,6 +25588,37 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
25588
25588
|
}]
|
|
25589
25589
|
}]
|
|
25590
25590
|
});
|
|
25591
|
+
var TnSidePanelTitleDirective = class TnSidePanelTitleDirective {
|
|
25592
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
25593
|
+
minVersion: "12.0.0",
|
|
25594
|
+
version: "22.2.1",
|
|
25595
|
+
ngImport: i0,
|
|
25596
|
+
type: TnSidePanelTitleDirective,
|
|
25597
|
+
deps: [],
|
|
25598
|
+
target: i0.ɵɵFactoryTarget.Directive
|
|
25599
|
+
});
|
|
25600
|
+
static ɵdir = i0.ɵɵngDeclareDirective({
|
|
25601
|
+
minVersion: "14.0.0",
|
|
25602
|
+
version: "22.2.1",
|
|
25603
|
+
type: TnSidePanelTitleDirective,
|
|
25604
|
+
isStandalone: true,
|
|
25605
|
+
selector: "[tnSidePanelTitle]",
|
|
25606
|
+
ngImport: i0
|
|
25607
|
+
});
|
|
25608
|
+
};
|
|
25609
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
25610
|
+
minVersion: "12.0.0",
|
|
25611
|
+
version: "22.2.1",
|
|
25612
|
+
ngImport: i0,
|
|
25613
|
+
type: TnSidePanelTitleDirective,
|
|
25614
|
+
decorators: [{
|
|
25615
|
+
type: Directive,
|
|
25616
|
+
args: [{
|
|
25617
|
+
selector: "[tnSidePanelTitle]",
|
|
25618
|
+
standalone: true
|
|
25619
|
+
}]
|
|
25620
|
+
}]
|
|
25621
|
+
});
|
|
25591
25622
|
var TnSidePanelComponent = class TnSidePanelComponent {
|
|
25592
25623
|
iconRegistry = inject(TnIconRegistryService);
|
|
25593
25624
|
document = inject(DOCUMENT);
|
|
@@ -25619,6 +25650,8 @@ var TnSidePanelComponent = class TnSidePanelComponent {
|
|
|
25619
25650
|
closed = output();
|
|
25620
25651
|
actionContent = contentChildren(TnSidePanelActionDirective, ...ngDevMode ? [{ debugName: "actionContent" }] : /* istanbul ignore next */ []);
|
|
25621
25652
|
hasActions = computed(() => this.actionContent().length > 0, ...ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []);
|
|
25653
|
+
titleSlotContent = contentChildren(TnSidePanelTitleDirective, ...ngDevMode ? [{ debugName: "titleSlotContent" }] : /* istanbul ignore next */ []);
|
|
25654
|
+
hasTitleSlot = computed(() => this.titleSlotContent().length > 0, ...ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []);
|
|
25622
25655
|
panelId = `tn-side-panel-${Math.random().toString(36).substring(2, 9)}`;
|
|
25623
25656
|
titleId = `${this.panelId}-title`;
|
|
25624
25657
|
hasTitle = computed(() => this.title().trim() !== "", ...ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []);
|
|
@@ -25858,6 +25891,10 @@ var TnSidePanelComponent = class TnSidePanelComponent {
|
|
|
25858
25891
|
propertyName: "actionContent",
|
|
25859
25892
|
predicate: TnSidePanelActionDirective,
|
|
25860
25893
|
isSignal: true
|
|
25894
|
+
}, {
|
|
25895
|
+
propertyName: "titleSlotContent",
|
|
25896
|
+
predicate: TnSidePanelTitleDirective,
|
|
25897
|
+
isSignal: true
|
|
25861
25898
|
}],
|
|
25862
25899
|
viewQueries: [
|
|
25863
25900
|
{
|
|
@@ -25883,8 +25920,8 @@ var TnSidePanelComponent = class TnSidePanelComponent {
|
|
|
25883
25920
|
}
|
|
25884
25921
|
],
|
|
25885
25922
|
ngImport: i0,
|
|
25886
|
-
template: "<!--\n Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n back here — `display: none` — while it is not. `--open` and `--attached` are\n applied by the component rather than bound, because both have to land in a\n fixed order around the move; see the constants in `side-panel.component.ts`.\n\n A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n and keeps its close button and its projected content, so `aria-hidden` alone\n hid a subtree a keyboard user could still Tab into — landing focus on controls\n that are translated off-screen. `inert` takes the subtree out of the focus\n order and the accessibility tree together; `aria-hidden` stays beside it for\n browsers without `inert` (Firefox before 112), where it is still the half that\n works. Same reasoning as the checkbox in `list-option.component.html`.\n\n `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n dialog opened OVER the panel hides it too (#322) — the panel is still open\n underneath, which is why the other three stay on `open()`.\n-->\n<div\n #overlay\n class=\"tn-side-panel__overlay\"\n role=\"dialog\"\n tnTestIdType=\"side-panel\"\n [attr.data-tn-panel]=\"panelId\"\n [tnTestId]=\"testId()\"\n [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n [attr.aria-modal]=\"open() ? 'true' : null\"\n [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n [attr.inert]=\"open() ? null : ''\">\n\n <!-- Backdrop -->\n @if (hasBackdrop()) {\n <div\n class=\"tn-side-panel__backdrop\"\n aria-hidden=\"true\"\n (click)=\"onBackdropClick()\">\n </div>\n }\n\n <!--\n Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n IN on open is `tnFocusOnOpen` in the component, not\n `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n focuses — see `../a11y/initial-focus.ts` for why the container and not the\n first control inside it.\n\n No `(keydown)` here since #322: Escape arrives through CDK's overlay\n keyboard dispatcher, which knows which overlay is on top and this element\n does not.\n -->\n <div\n #panel\n class=\"tn-side-panel__panel\"\n tabindex=\"-1\"\n cdkTrapFocus\n [style.width]=\"width()\"\n (transitionend)=\"onTransitionEnd($event)\">\n\n <!-- Header -->\n <header class=\"tn-side-panel__header\">\n <!--\n No heading element at all when there is no title, rather than an empty\n one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n a level-2 heading with nothing in it into the document outline.\n -->\n @if (hasTitle()) {\n <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <div class=\"tn-side-panel__header-actions\">\n <ng-content select=\"[tnSidePanelHeaderAction]\" />\n <tn-icon-button\n name=\"close\"\n library=\"mdi\"\n size=\"sm\"\n [ariaLabel]=\"closeButtonAriaLabel()\"\n [testId]=\"closeButtonTestId()\"\n (onClick)=\"dismiss()\" />\n </div>\n </header>\n\n <!--\n Content. This is the element that scrolls, and a scrolling element a\n keyboard cannot reach is content below the fold that a keyboard cannot\n read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n is a focus TARGET, not a tab stop, and it is on the container rather than\n on the element with the overflow.\n\n All three attributes are gated together, and the gate is the point — an\n unconditional tab stop would land on every panel in the library, including\n the ones whose content fits, where it announces a group and does nothing.\n\n The gate is `contentKeyboardReachable`, which is the measurement OR the\n region's own focus, not the measurement alone. Content that stops\n overflowing while the region is focused would otherwise take the tab stop\n off the focused element and blur a keyboard user out of the open panel.\n Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n which says why in full — including why it listens for this element's own\n `focus`/`blur` itself rather than leaving each caller to bind them.\n\n `role=\"group\"` rather than the `region` a named `<section>` would imply:\n `region` is a landmark, and a landmark named the same thing in every panel\n is what `landmark-unique` reports the moment two of them are open. A group\n is not summarised, which is what this is.\n -->\n <section\n #content\n class=\"tn-side-panel__content\"\n [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n <ng-content />\n </section>\n\n <!-- Actions -->\n @if (hasActions()) {\n <footer class=\"tn-side-panel__actions\">\n <ng-content select=\"[tnSidePanelAction]\" />\n </footer>\n }\n </div>\n</div>\n",
|
|
25887
|
-
styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"],
|
|
25923
|
+
template: "<!--\n Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n back here — `display: none` — while it is not. `--open` and `--attached` are\n applied by the component rather than bound, because both have to land in a\n fixed order around the move; see the constants in `side-panel.component.ts`.\n\n A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n and keeps its close button and its projected content, so `aria-hidden` alone\n hid a subtree a keyboard user could still Tab into — landing focus on controls\n that are translated off-screen. `inert` takes the subtree out of the focus\n order and the accessibility tree together; `aria-hidden` stays beside it for\n browsers without `inert` (Firefox before 112), where it is still the half that\n works. Same reasoning as the checkbox in `list-option.component.html`.\n\n `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n dialog opened OVER the panel hides it too (#322) — the panel is still open\n underneath, which is why the other three stay on `open()`.\n-->\n<div\n #overlay\n class=\"tn-side-panel__overlay\"\n role=\"dialog\"\n tnTestIdType=\"side-panel\"\n [attr.data-tn-panel]=\"panelId\"\n [tnTestId]=\"testId()\"\n [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n [attr.aria-modal]=\"open() ? 'true' : null\"\n [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n [attr.inert]=\"open() ? null : ''\">\n\n <!-- Backdrop -->\n @if (hasBackdrop()) {\n <div\n class=\"tn-side-panel__backdrop\"\n aria-hidden=\"true\"\n (click)=\"onBackdropClick()\">\n </div>\n }\n\n <!--\n Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n IN on open is `tnFocusOnOpen` in the component, not\n `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n focuses — see `../a11y/initial-focus.ts` for why the container and not the\n first control inside it.\n\n No `(keydown)` here since #322: Escape arrives through CDK's overlay\n keyboard dispatcher, which knows which overlay is on top and this element\n does not.\n -->\n <div\n #panel\n class=\"tn-side-panel__panel\"\n tabindex=\"-1\"\n cdkTrapFocus\n [style.width]=\"width()\"\n (transitionend)=\"onTransitionEnd($event)\">\n\n <!-- Header -->\n <header class=\"tn-side-panel__header\">\n <!--\n No heading element at all when there is no title, rather than an empty\n one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n a level-2 heading with nothing in it into the document outline.\n -->\n @if (hasTitle()) {\n <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <!--\n A heading of the consumer's own (#372), in the place `title` takes and\n outside the actions group. The wrapper is what grows and shrinks, since\n the projected element is the consumer's and this stylesheet cannot reach\n it; it is only rendered when something is projected into it, so a titled\n panel's header is unchanged.\n -->\n @if (hasTitleSlot()) {\n <div class=\"tn-side-panel__title-slot\">\n <ng-content select=\"[tnSidePanelTitle]\" />\n </div>\n }\n <div class=\"tn-side-panel__header-actions\">\n <ng-content select=\"[tnSidePanelHeaderAction]\" />\n <tn-icon-button\n name=\"close\"\n library=\"mdi\"\n size=\"sm\"\n [ariaLabel]=\"closeButtonAriaLabel()\"\n [testId]=\"closeButtonTestId()\"\n (onClick)=\"dismiss()\" />\n </div>\n </header>\n\n <!--\n Content. This is the element that scrolls, and a scrolling element a\n keyboard cannot reach is content below the fold that a keyboard cannot\n read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n is a focus TARGET, not a tab stop, and it is on the container rather than\n on the element with the overflow.\n\n All three attributes are gated together, and the gate is the point — an\n unconditional tab stop would land on every panel in the library, including\n the ones whose content fits, where it announces a group and does nothing.\n\n The gate is `contentKeyboardReachable`, which is the measurement OR the\n region's own focus, not the measurement alone. Content that stops\n overflowing while the region is focused would otherwise take the tab stop\n off the focused element and blur a keyboard user out of the open panel.\n Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n which says why in full — including why it listens for this element's own\n `focus`/`blur` itself rather than leaving each caller to bind them.\n\n `role=\"group\"` rather than the `region` a named `<section>` would imply:\n `region` is a landmark, and a landmark named the same thing in every panel\n is what `landmark-unique` reports the moment two of them are open. A group\n is not summarised, which is what this is.\n -->\n <section\n #content\n class=\"tn-side-panel__content\"\n [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n <ng-content />\n </section>\n\n <!-- Actions -->\n @if (hasActions()) {\n <footer class=\"tn-side-panel__actions\">\n <ng-content select=\"[tnSidePanelAction]\" />\n </footer>\n }\n </div>\n</div>\n",
|
|
25924
|
+
styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__title-slot{flex:1;min-width:0}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"],
|
|
25888
25925
|
dependencies: [
|
|
25889
25926
|
{
|
|
25890
25927
|
kind: "ngmodule",
|
|
@@ -25953,8 +25990,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
25953
25990
|
"class": "tn-side-panel",
|
|
25954
25991
|
"[attr.data-tn-panel]": "panelId"
|
|
25955
25992
|
},
|
|
25956
|
-
template: "<!--\n Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n back here — `display: none` — while it is not. `--open` and `--attached` are\n applied by the component rather than bound, because both have to land in a\n fixed order around the move; see the constants in `side-panel.component.ts`.\n\n A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n and keeps its close button and its projected content, so `aria-hidden` alone\n hid a subtree a keyboard user could still Tab into — landing focus on controls\n that are translated off-screen. `inert` takes the subtree out of the focus\n order and the accessibility tree together; `aria-hidden` stays beside it for\n browsers without `inert` (Firefox before 112), where it is still the half that\n works. Same reasoning as the checkbox in `list-option.component.html`.\n\n `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n dialog opened OVER the panel hides it too (#322) — the panel is still open\n underneath, which is why the other three stay on `open()`.\n-->\n<div\n #overlay\n class=\"tn-side-panel__overlay\"\n role=\"dialog\"\n tnTestIdType=\"side-panel\"\n [attr.data-tn-panel]=\"panelId\"\n [tnTestId]=\"testId()\"\n [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n [attr.aria-modal]=\"open() ? 'true' : null\"\n [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n [attr.inert]=\"open() ? null : ''\">\n\n <!-- Backdrop -->\n @if (hasBackdrop()) {\n <div\n class=\"tn-side-panel__backdrop\"\n aria-hidden=\"true\"\n (click)=\"onBackdropClick()\">\n </div>\n }\n\n <!--\n Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n IN on open is `tnFocusOnOpen` in the component, not\n `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n focuses — see `../a11y/initial-focus.ts` for why the container and not the\n first control inside it.\n\n No `(keydown)` here since #322: Escape arrives through CDK's overlay\n keyboard dispatcher, which knows which overlay is on top and this element\n does not.\n -->\n <div\n #panel\n class=\"tn-side-panel__panel\"\n tabindex=\"-1\"\n cdkTrapFocus\n [style.width]=\"width()\"\n (transitionend)=\"onTransitionEnd($event)\">\n\n <!-- Header -->\n <header class=\"tn-side-panel__header\">\n <!--\n No heading element at all when there is no title, rather than an empty\n one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n a level-2 heading with nothing in it into the document outline.\n -->\n @if (hasTitle()) {\n <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <div class=\"tn-side-panel__header-actions\">\n <ng-content select=\"[tnSidePanelHeaderAction]\" />\n <tn-icon-button\n name=\"close\"\n library=\"mdi\"\n size=\"sm\"\n [ariaLabel]=\"closeButtonAriaLabel()\"\n [testId]=\"closeButtonTestId()\"\n (onClick)=\"dismiss()\" />\n </div>\n </header>\n\n <!--\n Content. This is the element that scrolls, and a scrolling element a\n keyboard cannot reach is content below the fold that a keyboard cannot\n read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n is a focus TARGET, not a tab stop, and it is on the container rather than\n on the element with the overflow.\n\n All three attributes are gated together, and the gate is the point — an\n unconditional tab stop would land on every panel in the library, including\n the ones whose content fits, where it announces a group and does nothing.\n\n The gate is `contentKeyboardReachable`, which is the measurement OR the\n region's own focus, not the measurement alone. Content that stops\n overflowing while the region is focused would otherwise take the tab stop\n off the focused element and blur a keyboard user out of the open panel.\n Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n which says why in full — including why it listens for this element's own\n `focus`/`blur` itself rather than leaving each caller to bind them.\n\n `role=\"group\"` rather than the `region` a named `<section>` would imply:\n `region` is a landmark, and a landmark named the same thing in every panel\n is what `landmark-unique` reports the moment two of them are open. A group\n is not summarised, which is what this is.\n -->\n <section\n #content\n class=\"tn-side-panel__content\"\n [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n <ng-content />\n </section>\n\n <!-- Actions -->\n @if (hasActions()) {\n <footer class=\"tn-side-panel__actions\">\n <ng-content select=\"[tnSidePanelAction]\" />\n </footer>\n }\n </div>\n</div>\n",
|
|
25957
|
-
styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"]
|
|
25993
|
+
template: "<!--\n Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n back here — `display: none` — while it is not. `--open` and `--attached` are\n applied by the component rather than bound, because both have to land in a\n fixed order around the move; see the constants in `side-panel.component.ts`.\n\n A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n and keeps its close button and its projected content, so `aria-hidden` alone\n hid a subtree a keyboard user could still Tab into — landing focus on controls\n that are translated off-screen. `inert` takes the subtree out of the focus\n order and the accessibility tree together; `aria-hidden` stays beside it for\n browsers without `inert` (Firefox before 112), where it is still the half that\n works. Same reasoning as the checkbox in `list-option.component.html`.\n\n `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n dialog opened OVER the panel hides it too (#322) — the panel is still open\n underneath, which is why the other three stay on `open()`.\n-->\n<div\n #overlay\n class=\"tn-side-panel__overlay\"\n role=\"dialog\"\n tnTestIdType=\"side-panel\"\n [attr.data-tn-panel]=\"panelId\"\n [tnTestId]=\"testId()\"\n [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n [attr.aria-modal]=\"open() ? 'true' : null\"\n [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n [attr.inert]=\"open() ? null : ''\">\n\n <!-- Backdrop -->\n @if (hasBackdrop()) {\n <div\n class=\"tn-side-panel__backdrop\"\n aria-hidden=\"true\"\n (click)=\"onBackdropClick()\">\n </div>\n }\n\n <!--\n Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n IN on open is `tnFocusOnOpen` in the component, not\n `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n focuses — see `../a11y/initial-focus.ts` for why the container and not the\n first control inside it.\n\n No `(keydown)` here since #322: Escape arrives through CDK's overlay\n keyboard dispatcher, which knows which overlay is on top and this element\n does not.\n -->\n <div\n #panel\n class=\"tn-side-panel__panel\"\n tabindex=\"-1\"\n cdkTrapFocus\n [style.width]=\"width()\"\n (transitionend)=\"onTransitionEnd($event)\">\n\n <!-- Header -->\n <header class=\"tn-side-panel__header\">\n <!--\n No heading element at all when there is no title, rather than an empty\n one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n a level-2 heading with nothing in it into the document outline.\n -->\n @if (hasTitle()) {\n <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n }\n <!--\n A heading of the consumer's own (#372), in the place `title` takes and\n outside the actions group. The wrapper is what grows and shrinks, since\n the projected element is the consumer's and this stylesheet cannot reach\n it; it is only rendered when something is projected into it, so a titled\n panel's header is unchanged.\n -->\n @if (hasTitleSlot()) {\n <div class=\"tn-side-panel__title-slot\">\n <ng-content select=\"[tnSidePanelTitle]\" />\n </div>\n }\n <div class=\"tn-side-panel__header-actions\">\n <ng-content select=\"[tnSidePanelHeaderAction]\" />\n <tn-icon-button\n name=\"close\"\n library=\"mdi\"\n size=\"sm\"\n [ariaLabel]=\"closeButtonAriaLabel()\"\n [testId]=\"closeButtonTestId()\"\n (onClick)=\"dismiss()\" />\n </div>\n </header>\n\n <!--\n Content. This is the element that scrolls, and a scrolling element a\n keyboard cannot reach is content below the fold that a keyboard cannot\n read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n is a focus TARGET, not a tab stop, and it is on the container rather than\n on the element with the overflow.\n\n All three attributes are gated together, and the gate is the point — an\n unconditional tab stop would land on every panel in the library, including\n the ones whose content fits, where it announces a group and does nothing.\n\n The gate is `contentKeyboardReachable`, which is the measurement OR the\n region's own focus, not the measurement alone. Content that stops\n overflowing while the region is focused would otherwise take the tab stop\n off the focused element and blur a keyboard user out of the open panel.\n Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n which says why in full — including why it listens for this element's own\n `focus`/`blur` itself rather than leaving each caller to bind them.\n\n `role=\"group\"` rather than the `region` a named `<section>` would imply:\n `region` is a landmark, and a landmark named the same thing in every panel\n is what `landmark-unique` reports the moment two of them are open. A group\n is not summarised, which is what this is.\n -->\n <section\n #content\n class=\"tn-side-panel__content\"\n [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n <ng-content />\n </section>\n\n <!-- Actions -->\n @if (hasActions()) {\n <footer class=\"tn-side-panel__actions\">\n <ng-content select=\"[tnSidePanelAction]\" />\n </footer>\n }\n </div>\n</div>\n",
|
|
25994
|
+
styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__title-slot{flex:1;min-width:0}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"]
|
|
25958
25995
|
}]
|
|
25959
25996
|
}],
|
|
25960
25997
|
ctorParameters: () => [],
|
|
@@ -26089,6 +26126,10 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
26089
26126
|
actionContent: [{
|
|
26090
26127
|
type: i0.ContentChildren,
|
|
26091
26128
|
args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }]
|
|
26129
|
+
}],
|
|
26130
|
+
titleSlotContent: [{
|
|
26131
|
+
type: i0.ContentChildren,
|
|
26132
|
+
args: [i0.forwardRef(() => TnSidePanelTitleDirective), { isSignal: true }]
|
|
26092
26133
|
}]
|
|
26093
26134
|
}
|
|
26094
26135
|
});
|
|
@@ -26103,7 +26144,8 @@ var TnSidePanelHarness = class TnSidePanelHarness extends ComponentHarness {
|
|
|
26103
26144
|
}
|
|
26104
26145
|
async getTitle() {
|
|
26105
26146
|
const panelId = await (await this.host()).getAttribute("data-tn-panel");
|
|
26106
|
-
const
|
|
26147
|
+
const slot = `[data-tn-panel="${panelId}"] .tn-side-panel__title-slot`;
|
|
26148
|
+
const titleEl = await this.documentRootLocatorFactory().locatorForOptional(`[data-tn-panel="${panelId}"] .tn-side-panel__title`, `${slot} :is(h1, h2, h3, h4, h5, h6, [role="heading"])`)();
|
|
26107
26149
|
return titleEl ? (await titleEl.text()).trim() : "";
|
|
26108
26150
|
}
|
|
26109
26151
|
async isOpen() {
|
|
@@ -28816,6 +28858,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28816
28858
|
}],
|
|
28817
28859
|
ctorParameters: () => []
|
|
28818
28860
|
});
|
|
28819
|
-
export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, FlatTreeControl, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_CHIP_INPUT_DEFAULT_LABELS, TN_CHIP_INPUT_LABELS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxGroupComponent, TnCheckboxGroupHarness, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, createTnOptionsDataSource, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
|
|
28861
|
+
export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, FlatTreeControl, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_CHIP_INPUT_DEFAULT_LABELS, TN_CHIP_INPUT_LABELS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxGroupComponent, TnCheckboxGroupHarness, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSidePanelTitleDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, createTnOptionsDataSource, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
|
|
28820
28862
|
|
|
28821
28863
|
//# sourceMappingURL=truenas-ui-components.mjs.map
|