@truenas/ui-components 0.7.2 → 0.7.4

package/fesm2022/truenas-ui-components.mjs

@@ -22744,11 +22744,18 @@ class TnDateInputComponent {
                 offsetY: -8,
             },
         ];
+        // Rigid dimensions, like tn-select and tn-file-picker. With flexible
+        // dimensions on, CDK sizes the bounding box to the whole space between the
+        // trigger and the viewport edge and lets the pane grow into it, so the
+        // calendar (a block whose month table is `width: 100%`) stretched across
+        // the screen. Rigid + push keeps the pane content-sized and fully visible.
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.wrapperEl())
-            .withPositions(positions)
-            .withPush(false);
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withPush(true)
+            .withPositions(positions);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -22772,7 +22779,7 @@ class TnDateInputComponent {
                 useExisting: forwardRef(() => TnDateInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "monthRef", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "dayRef", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "yearRef", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "monthRef", first: true, predicate: ["monthInput"], descendants: true, isSignal: true }, { propertyName: "dayRef", first: true, predicate: ["dayInput"], descendants: true, isSignal: true }, { propertyName: "yearRef", first: true, predicate: ["yearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDateInputComponent, decorators: [{
             type: Component,
@@ -22784,7 +22791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         }
                     ], host: {
                         'class': 'tn-date-input'
-                    }, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
+                    }, template: "<div class=\"tn-date-input-container\" tnTestIdType=\"date-input\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-input-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Date segments MM/DD/YYYY -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #monthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('month')\"\n        (blur)=\"onSegmentBlur('month')\"\n        (keydown)=\"onSegmentKeydown($event, 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #dayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('day')\"\n        (blur)=\"onSegmentBlur('day')\"\n        (keydown)=\"onSegmentKeydown($event, 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #yearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('year')\"\n        (blur)=\"onSegmentBlur('year')\"\n        (keydown)=\"onSegmentKeydown($event, 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-input-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"false\"\n      [selected]=\"value()\"\n      (selectedChange)=\"onDateSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-input-container{position:relative;display:flex;align-items:center}.tn-date-input-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-input-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-input-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-input-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], monthRef: [{ type: i0.ViewChild, args: ['monthInput', { isSignal: true }] }], dayRef: [{ type: i0.ViewChild, args: ['dayInput', { isSignal: true }] }], yearRef: [{ type: i0.ViewChild, args: ['yearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
 /**
@@ -23301,11 +23308,18 @@ class TnDateRangeInputComponent {
                 offsetY: -8,
             },
         ];
+        // Rigid dimensions, like tn-select and tn-file-picker. With flexible
+        // dimensions on, CDK sizes the bounding box to the whole space between the
+        // trigger and the viewport edge and lets the pane grow into it, so the
+        // calendar (a block whose month table is `width: 100%`) stretched across
+        // the screen. Rigid + push keeps the pane content-sized and fully visible.
         const positionStrategy = this.overlay
             .position()
             .flexibleConnectedTo(this.wrapperEl())
-            .withPositions(positions)
-            .withPush(false);
+            .withFlexibleDimensions(false)
+            .withViewportMargin(8)
+            .withPush(true)
+            .withPositions(positions);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -23329,7 +23343,7 @@ class TnDateRangeInputComponent {
                 useExisting: forwardRef(() => TnDateRangeInputComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "startMonthRef", first: true, predicate: ["startMonthInput"], descendants: true, isSignal: true }, { propertyName: "startDayRef", first: true, predicate: ["startDayInput"], descendants: true, isSignal: true }, { propertyName: "startYearRef", first: true, predicate: ["startYearInput"], descendants: true, isSignal: true }, { propertyName: "endMonthRef", first: true, predicate: ["endMonthInput"], descendants: true, isSignal: true }, { propertyName: "endDayRef", first: true, predicate: ["endDayInput"], descendants: true, isSignal: true }, { propertyName: "endYearRef", first: true, predicate: ["endYearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+        ], viewQueries: [{ propertyName: "startMonthRef", first: true, predicate: ["startMonthInput"], descendants: true, isSignal: true }, { propertyName: "startDayRef", first: true, predicate: ["startDayInput"], descendants: true, isSignal: true }, { propertyName: "startYearRef", first: true, predicate: ["startYearInput"], descendants: true, isSignal: true }, { propertyName: "endMonthRef", first: true, predicate: ["endMonthInput"], descendants: true, isSignal: true }, { propertyName: "endDayRef", first: true, predicate: ["endDayInput"], descendants: true, isSignal: true }, { propertyName: "endYearRef", first: true, predicate: ["endYearInput"], descendants: true, isSignal: true }, { propertyName: "calendarTemplate", first: true, predicate: ["calendarTemplate"], descendants: true, isSignal: true }, { propertyName: "wrapperEl", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"], dependencies: [{ kind: "component", type: TnCalendarComponent, selector: "tn-calendar", inputs: ["startView", "selected", "minDate", "maxDate", "dateFilter", "markedDates", "activeDate", "locale", "rangeMode", "selectedRange"], outputs: ["selectedChange", "activeDateChange", "viewChanged", "selectedRangeChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnDateRangeInputComponent, decorators: [{
             type: Component,
@@ -23341,7 +23355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         }
                     ], host: {
                         'class': 'tn-date-range-input'
-                    }, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}:host ::ng-deep .tn-datepicker-overlay .tn-calendar{background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;min-width:380px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}:host ::ng-deep .tn-datepicker-overlay .tn-calendar .tn-calendar-content{padding:0}\n"] }]
+                    }, template: "<div class=\"tn-date-range-container\" tnTestIdType=\"date-range\" [tnTestId]=\"testId()\">\n  <div #wrapper ixInput class=\"tn-date-range-wrapper\" style=\"padding-right: 40px;\">\n    <!-- Start date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #startMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'month')\"\n        (blur)=\"onSegmentBlur('start', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'day')\"\n        (blur)=\"onSegmentBlur('start', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #startYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('start', 'year')\"\n        (blur)=\"onSegmentBlur('start', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'start', 'year')\">\n    </div>\n\n    <span class=\"tn-date-range-separator\">\u2013</span>\n\n    <!-- End date segments -->\n    <div class=\"tn-date-segment-group\">\n      <input\n        #endMonthInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-month\"\n        placeholder=\"MM\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'month')\"\n        (blur)=\"onSegmentBlur('end', 'month')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'month')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endDayInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-day\"\n        placeholder=\"DD\"\n        maxlength=\"2\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'day')\"\n        (blur)=\"onSegmentBlur('end', 'day')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'day')\">\n      <span class=\"tn-date-segment-separator\">/</span>\n      <input\n        #endYearInput\n        type=\"text\"\n        class=\"tn-date-segment tn-date-segment-year\"\n        placeholder=\"YYYY\"\n        maxlength=\"4\"\n        [disabled]=\"isDisabled()\"\n        (focus)=\"onSegmentFocus('end', 'year')\"\n        (blur)=\"onSegmentBlur('end', 'year')\"\n        (keydown)=\"onSegmentKeydown($event, 'end', 'year')\">\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"tn-date-range-toggle\"\n      aria-label=\"Open calendar\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"openDatepicker()\">\n      <span aria-hidden=\"true\">\uD83D\uDCC5</span>\n    </button>\n  </div>\n\n  <ng-template #calendarTemplate>\n    <tn-calendar\n      class=\"tn-calendar\"\n      [startView]=\"'month'\"\n      [rangeMode]=\"true\"\n      [selectedRange]=\"value()\"\n      (selectedRangeChange)=\"onRangeSelected($event)\" />\n  </ng-template>\n</div>\n", styles: [":host{display:block;width:100%}.tn-date-range-container{position:relative;display:flex;align-items:center}.tn-date-range-wrapper{display:flex;align-items:center;width:100%;position:relative}.tn-date-segment-group{display:flex;align-items:center}.tn-date-segment{background:transparent;border:none;outline:none;font:inherit;color:inherit;padding:0;min-width:0;text-align:center;width:2.6ch}.tn-date-segment::placeholder{color:var(--tn-alt-fg1, #999);opacity:1}.tn-date-segment:focus{outline:none;background:var(--tn-bg2, rgba(0, 0, 0, .05));border-radius:2px}.tn-date-segment:focus::placeholder{opacity:0}.tn-date-segment.tn-date-segment-year{width:4ch}.tn-date-segment-separator{padding:0 2px;-webkit-user-select:none;user-select:none;color:var(--tn-alt-fg1, #999)}.tn-date-range-separator{padding:0 .25em;-webkit-user-select:none;user-select:none;color:var(--tn-fg2, #666);flex-shrink:0}.tn-date-range-toggle{position:absolute;right:8px;z-index:2;pointer-events:auto;background:transparent;border:none;cursor:pointer;padding:4px;font-size:1rem}.tn-date-range-toggle:hover{background:var(--tn-bg2, #f0f0f0);border-radius:4px}.tn-date-range-toggle:disabled{cursor:not-allowed;opacity:.5}.tn-calendar{box-sizing:content-box;width:calc(7 * var(--calendar-cell-size));background:var(--tn-bg1, white);border:1px solid var(--tn-lines, #e0e0e0);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:24px;--calendar-cell-size: 48px;--calendar-header-height: 44px;--calendar-cell-font-size: 1rem;--calendar-header-font-size: 14px}.tn-calendar ::ng-deep .tn-calendar-content{padding:0}\n"] }]
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], startMonthRef: [{ type: i0.ViewChild, args: ['startMonthInput', { isSignal: true }] }], startDayRef: [{ type: i0.ViewChild, args: ['startDayInput', { isSignal: true }] }], startYearRef: [{ type: i0.ViewChild, args: ['startYearInput', { isSignal: true }] }], endMonthRef: [{ type: i0.ViewChild, args: ['endMonthInput', { isSignal: true }] }], endDayRef: [{ type: i0.ViewChild, args: ['endDayInput', { isSignal: true }] }], endYearRef: [{ type: i0.ViewChild, args: ['endYearInput', { isSignal: true }] }], calendarTemplate: [{ type: i0.ViewChild, args: ['calendarTemplate', { isSignal: true }] }], wrapperEl: [{ type: i0.ViewChild, args: ['wrapper', { isSignal: true }] }] } });
 
 /**
@@ -25801,14 +25815,14 @@ class TnSidePanelComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonAriaLabel: { classPropertyName: "closeButtonAriaLabel", publicName: "closeButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, contentAriaLabel: { classPropertyName: "contentAriaLabel", publicName: "contentAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Overlay wrapper: portaled to document.body.\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 \u2014 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 \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\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  [class.tn-side-panel__overlay--open]=\"open()\"\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]=\"!open() ? '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 \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\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    (keydown)=\"onKeydown($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 \u2014 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 \u2014 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", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.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}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "tooltipSticky", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnSidePanelComponent, isStandalone: true, selector: "tn-side-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeGuard: { classPropertyName: "closeGuard", publicName: "closeGuard", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonTestId: { classPropertyName: "closeButtonTestId", publicName: "closeButtonTestId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonAriaLabel: { classPropertyName: "closeButtonAriaLabel", publicName: "closeButtonAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, contentAriaLabel: { classPropertyName: "contentAriaLabel", publicName: "contentAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { properties: { "attr.data-tn-panel": "panelId" }, classAttribute: "tn-side-panel" }, queries: [{ propertyName: "actionContent", predicate: TnSidePanelActionDirective, isSignal: true }], viewQueries: [{ propertyName: "overlayRef", first: true, predicate: ["overlay"], descendants: true, isSignal: true }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n  Overlay wrapper: portaled to document.body.\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 \u2014 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 \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\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  [class.tn-side-panel__overlay--open]=\"open()\"\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]=\"!open() ? '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 \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\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    (keydown)=\"onKeydown($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 \u2014 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 \u2014 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", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: TnIconButtonComponent, selector: "tn-icon-button", inputs: ["disabled", "dense", "ariaLabel", "ariaExpanded", "testId", "name", "size", "color", "tooltip", "tooltipPosition", "tooltipSticky", "library", "iconClass"], outputs: ["onClick"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnSidePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tn-side-panel', standalone: true, imports: [CommonModule, A11yModule, TnIconButtonComponent, TnTestIdDirective], host: {
                         'class': 'tn-side-panel',
                         '[attr.data-tn-panel]': 'panelId',
-                    }, template: "<!--\n  Overlay wrapper: portaled to document.body.\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 \u2014 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 \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\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  [class.tn-side-panel__overlay--open]=\"open()\"\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]=\"!open() ? '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 \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\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    (keydown)=\"onKeydown($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 \u2014 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 \u2014 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", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.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}.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"] }]
+                    }, template: "<!--\n  Overlay wrapper: portaled to document.body.\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 \u2014 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 \u2014 an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\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  [class.tn-side-panel__overlay--open]=\"open()\"\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]=\"!open() ? '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 \u2014 see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\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    (keydown)=\"onKeydown($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 \u2014 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 \u2014 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", styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;z-index:1000;pointer-events:none}.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"] }]
         }], ctorParameters: () => [], propDecorators: { overlayRef: [{ type: i0.ViewChild, args: ['overlay', { isSignal: true }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeGuard: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeGuard", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], closeButtonTestId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonTestId", required: false }] }], closeButtonAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonAriaLabel", required: false }] }], contentAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], actionContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }] }] } });
 
 /**