@tailng-ui/primitives 0.54.0 → 0.56.0

package/src/lib/form/date-range-picker/tng-date-range-picker.parts.js

@@ -0,0 +1,940 @@
+import { DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injector, computed, effect, inject, input, signal, } from '@angular/core';
+import * as i0 from "@angular/core";
+export function resolveTngDateRangePickerPeriodLabel(controller, outputs) {
+    if (outputs.view === 'year') {
+        const startYear = outputs.yearOptions[0]?.year;
+        const endYear = outputs.yearOptions[outputs.yearOptions.length - 1]?.year;
+        if (startYear !== undefined && endYear !== undefined) {
+            return `${startYear} - ${endYear}`;
+        }
+    }
+    if (outputs.view === 'month') {
+        return controller.formatDate(outputs.visibleMonth, 'year-label');
+    }
+    return outputs.labelMonthYear;
+}
+export function bindTngDateRangePicker(controller) {
+    const destroyRef = inject(DestroyRef);
+    const version = signal(0, ...(ngDevMode ? [{ debugName: "version" }] : []));
+    const unsubscribe = controller.subscribe(() => {
+        version.update((value) => value + 1);
+    });
+    destroyRef.onDestroy(() => unsubscribe());
+    const outputs = computed(() => {
+        version();
+        return controller.getOutputs();
+    }, ...(ngDevMode ? [{ debugName: "outputs" }] : []));
+    const periodLabel = computed(() => resolveTngDateRangePickerPeriodLabel(controller, outputs()), ...(ngDevMode ? [{ debugName: "periodLabel" }] : []));
+    return Object.freeze({ outputs, periodLabel });
+}
+function resolveCurrentFocusTargetId(outputs) {
+    if (outputs.view === 'day') {
+        const gridAttributes = outputs.getGridAttributes();
+        if (gridAttributes['aria-activedescendant'] !== undefined) {
+            return gridAttributes.id ?? null;
+        }
+        return outputs.cells.find((cell) => cell.active)?.id ?? null;
+    }
+    if (outputs.view === 'month') {
+        return outputs.monthOptions.find((option) => option.active)?.id ?? null;
+    }
+    if (outputs.view === 'year') {
+        return outputs.yearOptions.find((option) => option.active)?.id ?? null;
+    }
+    return null;
+}
+function shouldSyncOverlayFocusAfterPickerKey(key) {
+    return (key === 'ArrowUp' ||
+        key === 'ArrowDown' ||
+        key === 'ArrowLeft' ||
+        key === 'ArrowRight' ||
+        key === 'Home' ||
+        key === 'End' ||
+        key === 'PageUp' ||
+        key === 'PageDown' ||
+        key === 'Enter' ||
+        key === ' ' ||
+        key === 'Escape');
+}
+function isPickerActivationKey(key) {
+    return key === 'Enter' || key === ' ';
+}
+function queueDateRangePickerOverlayFocusSync(controller, ownerDocument) {
+    const targetDocument = ownerDocument ?? document;
+    queueMicrotask(() => {
+        const focusTarget = () => {
+            const outputs = controller.getOutputs();
+            if (!outputs.open) {
+                return;
+            }
+            const targetId = resolveCurrentFocusTargetId(outputs);
+            if (targetId === null) {
+                return;
+            }
+            const target = targetDocument.getElementById(targetId);
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            target.focus();
+        };
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => focusTarget());
+            return;
+        }
+        setTimeout(() => focusTarget(), 0);
+    });
+}
+function resolveAttribute(attributes, key) {
+    return attributes[key] ?? null;
+}
+class TngDateRangePickerControllerPart {
+    injector = inject(Injector);
+    ownerDocument = inject((ElementRef)).nativeElement.ownerDocument ?? null;
+    renderVersion = signal(0, ...(ngDevMode ? [{ debugName: "renderVersion" }] : []));
+    ngOnInit() {
+        effect((onCleanup) => {
+            const controller = this.controller();
+            const unsubscribe = controller.subscribe(() => {
+                this.renderVersion.update((value) => value + 1);
+            });
+            onCleanup(() => unsubscribe());
+        }, { injector: this.injector });
+    }
+    syncOverlayFocus() {
+        queueDateRangePickerOverlayFocusSync(this.controller(), this.ownerDocument);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerControllerPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngDateRangePickerControllerPart, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerControllerPart, decorators: [{
+            type: Directive
+        }] });
+export class TngDateRangePickerHost extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerHost' });
+    attributes = computed(() => {
+        this.renderVersion();
+        return this.controller().getOutputs().getHostAttributes();
+    }, ...(ngDevMode ? [{ debugName: "attributes" }] : []));
+    get ariaDescribedby() {
+        return resolveAttribute(this.attributes(), 'aria-describedby');
+    }
+    get ariaLabel() {
+        return resolveAttribute(this.attributes(), 'aria-label');
+    }
+    get ariaLabelledby() {
+        return resolveAttribute(this.attributes(), 'aria-labelledby');
+    }
+    get dataDisabled() {
+        return resolveAttribute(this.attributes(), 'data-disabled');
+    }
+    get dataOpen() {
+        return resolveAttribute(this.attributes(), 'data-open');
+    }
+    get dataSlot() {
+        return resolveAttribute(this.attributes(), 'data-slot');
+    }
+    get dataView() {
+        return resolveAttribute(this.attributes(), 'data-view');
+    }
+    get dir() {
+        return resolveAttribute(this.attributes(), 'dir');
+    }
+    get role() {
+        return resolveAttribute(this.attributes(), 'role');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerHost, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerHost, isStandalone: true, selector: "[tngDateRangePickerHost]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerHost", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-describedby": "this.ariaDescribedby", "attr.aria-label": "this.ariaLabel", "attr.aria-labelledby": "this.ariaLabelledby", "attr.data-disabled": "this.dataDisabled", "attr.data-open": "this.dataOpen", "attr.data-slot": "this.dataSlot", "attr.data-view": "this.dataView", "attr.dir": "this.dir", "attr.role": "this.role" } }, exportAs: ["tngDateRangePickerHost"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerHost, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDateRangePickerHost]',
+                    exportAs: 'tngDateRangePickerHost',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerHost", required: true }] }], ariaDescribedby: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabelledby: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], dataDisabled: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], dataOpen: [{
+                type: HostBinding,
+                args: ['attr.data-open']
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataView: [{
+                type: HostBinding,
+                args: ['attr.data-view']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }] } });
+export class TngDateRangePickerInput extends TngDateRangePickerControllerPart {
+    inputElement = inject(ElementRef);
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerInput' });
+    dataSlot = 'date-range-picker-input';
+    get valueProp() {
+        this.renderVersion();
+        return this.controller().getOutputs().inputText;
+    }
+    get ariaInvalid() {
+        this.renderVersion();
+        return this.controller().getOutputs().validationError !== null ? 'true' : null;
+    }
+    onBlur() {
+        this.controller().commitInputText();
+    }
+    onInput() {
+        this.controller().setInputText(this.inputElement.nativeElement.value);
+    }
+    onClick() {
+        if (this.controller().getOutputs().open) {
+            return;
+        }
+        this.controller().open();
+        this.syncOverlayFocus();
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (!this.controller().getOutputs().open) {
+                this.controller().open();
+                this.syncOverlayFocus();
+                return;
+            }
+            this.controller().commitInputText();
+            return;
+        }
+        if (event.key === 'ArrowDown' && !this.controller().getOutputs().open) {
+            event.preventDefault();
+            this.controller().open();
+            this.syncOverlayFocus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerInput, isStandalone: true, selector: "input[tngDateRangePickerInput]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerInput", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "input": "onInput()", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "value": "this.valueProp", "attr.aria-invalid": "this.ariaInvalid" } }, exportAs: ["tngDateRangePickerInput"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[tngDateRangePickerInput]',
+                    exportAs: 'tngDateRangePickerInput',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerInput", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], valueProp: [{
+                type: HostBinding,
+                args: ['value']
+            }], ariaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDateRangePickerTrigger extends TngDateRangePickerControllerPart {
+    elementRef = inject(ElementRef);
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerTrigger' });
+    ngOnInit() {
+        super.ngOnInit();
+        effect((onCleanup) => {
+            const controller = this.controller();
+            const element = this.elementRef.nativeElement;
+            controller.registerTrigger(element);
+            onCleanup(() => controller.registerTrigger(null));
+        }, { injector: this.injector });
+    }
+    dataSlot = 'date-range-picker-trigger';
+    get ariaHaspopup() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['aria-haspopup'] ?? null;
+    }
+    get ariaExpanded() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['aria-expanded'] ?? null;
+    }
+    get ariaControls() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['aria-controls'] ?? null;
+    }
+    get ariaDisabled() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['aria-disabled'] ?? null;
+    }
+    get dataDisabled() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['data-disabled'] ?? null;
+    }
+    get disabled() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['disabled'] === 'true';
+    }
+    get dataOpen() {
+        this.renderVersion();
+        return this.controller().getOutputs().getTriggerAttributes()['data-open'] ?? null;
+    }
+    onClick() {
+        const wasOpen = this.controller().getOutputs().open;
+        this.controller().toggleOpen();
+        if (!wasOpen && this.controller().getOutputs().open) {
+            this.syncOverlayFocus();
+        }
+    }
+    onKeydown(event) {
+        const wasOpen = this.controller().getOutputs().open;
+        this.controller().handleTriggerKeyDown(event);
+        if (!wasOpen && this.controller().getOutputs().open) {
+            this.syncOverlayFocus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerTrigger, isStandalone: true, selector: "button[tngDateRangePickerTrigger]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.aria-haspopup": "this.ariaHaspopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-controls": "this.ariaControls", "attr.aria-disabled": "this.ariaDisabled", "attr.data-disabled": "this.dataDisabled", "disabled": "this.disabled", "attr.data-open": "this.dataOpen" } }, exportAs: ["tngDateRangePickerTrigger"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerTrigger]',
+                    exportAs: 'tngDateRangePickerTrigger',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerTrigger", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], ariaHaspopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }], ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], dataDisabled: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], dataOpen: [{
+                type: HostBinding,
+                args: ['attr.data-open']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDateRangePickerPrevButton extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerPrevButton' });
+    dataSlot = 'date-range-picker-nav-button';
+    onClick() {
+        if (this.controller().getOutputs().view === 'day') {
+            this.controller().prevMonth();
+        }
+        else {
+            this.controller().prevYear();
+        }
+        this.syncOverlayFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerPrevButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerPrevButton, isStandalone: true, selector: "button[tngDateRangePickerPrevButton]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerPrevButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDateRangePickerPrevButton"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerPrevButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerPrevButton]',
+                    exportAs: 'tngDateRangePickerPrevButton',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerPrevButton", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDateRangePickerNextButton extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerNextButton' });
+    dataSlot = 'date-range-picker-nav-button';
+    onClick() {
+        if (this.controller().getOutputs().view === 'day') {
+            this.controller().nextMonth();
+        }
+        else {
+            this.controller().nextYear();
+        }
+        this.syncOverlayFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerNextButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerNextButton, isStandalone: true, selector: "button[tngDateRangePickerNextButton]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerNextButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDateRangePickerNextButton"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerNextButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerNextButton]',
+                    exportAs: 'tngDateRangePickerNextButton',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerNextButton", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDateRangePickerPeriodButton extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerPeriodButton' });
+    dataSlot = 'date-range-picker-period-button';
+    get dataInteractive() {
+        this.renderVersion();
+        return this.controller().getOutputs().view !== 'year' ? 'true' : null;
+    }
+    onClick() {
+        if (this.controller().getOutputs().view === 'year') {
+            return;
+        }
+        this.controller().showYearsPanel();
+        this.syncOverlayFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerPeriodButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerPeriodButton, isStandalone: true, selector: "button[tngDateRangePickerPeriodButton]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerPeriodButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-interactive": "this.dataInteractive" } }, exportAs: ["tngDateRangePickerPeriodButton"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerPeriodButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerPeriodButton]',
+                    exportAs: 'tngDateRangePickerPeriodButton',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerPeriodButton", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataInteractive: [{
+                type: HostBinding,
+                args: ['attr.data-interactive']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDateRangePickerDayGrid extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerDayGrid' });
+    get dataSlot() {
+        this.renderVersion();
+        return (this.controller().getOutputs().getGridAttributes()['data-slot'] ?? 'date-range-picker-grid');
+    }
+    get id() {
+        this.renderVersion();
+        return this.controller().getOutputs().getGridAttributes().id ?? null;
+    }
+    get role() {
+        this.renderVersion();
+        return this.controller().getOutputs().getGridAttributes()['role'] ?? null;
+    }
+    get ariaActiveDescendant() {
+        this.renderVersion();
+        return this.controller().getOutputs().getGridAttributes()['aria-activedescendant'] ?? null;
+    }
+    get ariaLabelledby() {
+        this.renderVersion();
+        return this.controller().getOutputs().getGridAttributes()['aria-labelledby'] ?? null;
+    }
+    onKeydown(event) {
+        this.controller().handleGridKeyDown(event);
+        if (shouldSyncOverlayFocusAfterPickerKey(event.key)) {
+            this.syncOverlayFocus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerDayGrid, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerDayGrid, isStandalone: true, selector: "[tngDateRangePickerDayGrid]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerDayGrid", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.id": "this.id", "attr.role": "this.role", "attr.aria-activedescendant": "this.ariaActiveDescendant", "attr.aria-labelledby": "this.ariaLabelledby" } }, exportAs: ["tngDateRangePickerDayGrid"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerDayGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDateRangePickerDayGrid]',
+                    exportAs: 'tngDateRangePickerDayGrid',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerDayGrid", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaActiveDescendant: [{
+                type: HostBinding,
+                args: ['attr.aria-activedescendant']
+            }], ariaLabelledby: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDateRangePickerDayCell extends TngDateRangePickerControllerPart {
+    dayGrid = inject(TngDateRangePickerDayGrid);
+    controller = computed(() => this.dayGrid.controller(), ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    cell = input.required({ ...(ngDevMode ? { debugName: "cell" } : {}), alias: 'tngDateRangePickerDayCell' });
+    attributes = computed(() => {
+        this.renderVersion();
+        return this.controller().getOutputs().getCellAttributes(this.cell());
+    }, ...(ngDevMode ? [{ debugName: "attributes" }] : []));
+    get id() {
+        return this.attributes().id ?? null;
+    }
+    get role() {
+        return resolveAttribute(this.attributes(), 'role');
+    }
+    get tabindex() {
+        return resolveAttribute(this.attributes(), 'tabindex');
+    }
+    get disabled() {
+        return this.cell().disabled;
+    }
+    get ariaCurrent() {
+        return resolveAttribute(this.attributes(), 'aria-current');
+    }
+    get ariaDisabled() {
+        return resolveAttribute(this.attributes(), 'aria-disabled');
+    }
+    get ariaLabel() {
+        return resolveAttribute(this.attributes(), 'aria-label');
+    }
+    get ariaSelected() {
+        return resolveAttribute(this.attributes(), 'aria-selected');
+    }
+    get dataActive() {
+        return resolveAttribute(this.attributes(), 'data-active');
+    }
+    get dataDisabled() {
+        return resolveAttribute(this.attributes(), 'data-disabled');
+    }
+    get dataFocused() {
+        return resolveAttribute(this.attributes(), 'data-focused');
+    }
+    get dataFocusVisible() {
+        return resolveAttribute(this.attributes(), 'data-focus-visible');
+    }
+    get dataHidden() {
+        return resolveAttribute(this.attributes(), 'data-hidden');
+    }
+    get dataInMonth() {
+        return resolveAttribute(this.attributes(), 'data-in-month');
+    }
+    get dataInRange() {
+        return resolveAttribute(this.attributes(), 'data-in-range');
+    }
+    get dataOutsideMonth() {
+        return resolveAttribute(this.attributes(), 'data-outside-month');
+    }
+    get dataPreviewEnd() {
+        return resolveAttribute(this.attributes(), 'data-preview-end');
+    }
+    get dataPreviewRange() {
+        return resolveAttribute(this.attributes(), 'data-preview-range');
+    }
+    get dataRangeEnd() {
+        return resolveAttribute(this.attributes(), 'data-range-end');
+    }
+    get dataRangeStart() {
+        return resolveAttribute(this.attributes(), 'data-range-start');
+    }
+    get dataSelected() {
+        return resolveAttribute(this.attributes(), 'data-selected');
+    }
+    get dataSlot() {
+        return resolveAttribute(this.attributes(), 'data-slot');
+    }
+    get dataToday() {
+        return resolveAttribute(this.attributes(), 'data-today');
+    }
+    onClick(event) {
+        const cell = this.cell();
+        if (cell.disabled || cell.hidden) {
+            return;
+        }
+        this.controller().handleCellClick(cell.date, { shiftKey: event.shiftKey });
+        this.syncOverlayFocus();
+    }
+    onPointerEnter() {
+        const cell = this.cell();
+        if (cell.disabled || cell.hidden) {
+            return;
+        }
+        this.controller().handleCellPointerEnter(cell.date);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerDayCell, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerDayCell, isStandalone: true, selector: "button[tngDateRangePickerDayCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tngDateRangePickerDayCell", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPointerEnter()" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "disabled": "this.disabled", "attr.aria-current": "this.ariaCurrent", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-label": "this.ariaLabel", "attr.aria-selected": "this.ariaSelected", "attr.data-active": "this.dataActive", "attr.data-disabled": "this.dataDisabled", "attr.data-focused": "this.dataFocused", "attr.data-focus-visible": "this.dataFocusVisible", "attr.data-hidden": "this.dataHidden", "attr.data-in-month": "this.dataInMonth", "attr.data-in-range": "this.dataInRange", "attr.data-outside-month": "this.dataOutsideMonth", "attr.data-preview-end": "this.dataPreviewEnd", "attr.data-preview-range": "this.dataPreviewRange", "attr.data-range-end": "this.dataRangeEnd", "attr.data-range-start": "this.dataRangeStart", "attr.data-selected": "this.dataSelected", "attr.data-slot": "this.dataSlot", "attr.data-today": "this.dataToday" } }, exportAs: ["tngDateRangePickerDayCell"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerDayCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerDayCell]',
+                    exportAs: 'tngDateRangePickerDayCell',
+                    standalone: true,
+                }]
+        }], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerDayCell", required: true }] }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], ariaCurrent: [{
+                type: HostBinding,
+                args: ['attr.aria-current']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], dataActive: [{
+                type: HostBinding,
+                args: ['attr.data-active']
+            }], dataDisabled: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], dataFocused: [{
+                type: HostBinding,
+                args: ['attr.data-focused']
+            }], dataFocusVisible: [{
+                type: HostBinding,
+                args: ['attr.data-focus-visible']
+            }], dataHidden: [{
+                type: HostBinding,
+                args: ['attr.data-hidden']
+            }], dataInMonth: [{
+                type: HostBinding,
+                args: ['attr.data-in-month']
+            }], dataInRange: [{
+                type: HostBinding,
+                args: ['attr.data-in-range']
+            }], dataOutsideMonth: [{
+                type: HostBinding,
+                args: ['attr.data-outside-month']
+            }], dataPreviewEnd: [{
+                type: HostBinding,
+                args: ['attr.data-preview-end']
+            }], dataPreviewRange: [{
+                type: HostBinding,
+                args: ['attr.data-preview-range']
+            }], dataRangeEnd: [{
+                type: HostBinding,
+                args: ['attr.data-range-end']
+            }], dataRangeStart: [{
+                type: HostBinding,
+                args: ['attr.data-range-start']
+            }], dataSelected: [{
+                type: HostBinding,
+                args: ['attr.data-selected']
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataToday: [{
+                type: HostBinding,
+                args: ['attr.data-today']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onPointerEnter: [{
+                type: HostListener,
+                args: ['pointerenter']
+            }] } });
+export class TngDateRangePickerMonthGrid extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerMonthGrid' });
+    dataSlot = 'date-range-picker-grid';
+    role = 'grid';
+    onKeydown(event) {
+        this.controller().handleMonthGridKeyDown(event);
+        if (isPickerActivationKey(event.key)) {
+            this.controller().showDaysPanel();
+        }
+        if (shouldSyncOverlayFocusAfterPickerKey(event.key)) {
+            this.syncOverlayFocus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerMonthGrid, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerMonthGrid, isStandalone: true, selector: "[tngDateRangePickerMonthGrid]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerMonthGrid", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.role" } }, exportAs: ["tngDateRangePickerMonthGrid"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerMonthGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDateRangePickerMonthGrid]',
+                    exportAs: 'tngDateRangePickerMonthGrid',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerMonthGrid", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDateRangePickerMonthOption extends TngDateRangePickerControllerPart {
+    monthGrid = inject(TngDateRangePickerMonthGrid);
+    controller = computed(() => this.monthGrid.controller(), ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    option = input.required({ ...(ngDevMode ? { debugName: "option" } : {}), alias: 'tngDateRangePickerMonthOption' });
+    attributes = computed(() => {
+        this.renderVersion();
+        return this.controller().getOutputs().getMonthAttributes(this.option());
+    }, ...(ngDevMode ? [{ debugName: "attributes" }] : []));
+    get id() {
+        return this.attributes().id ?? null;
+    }
+    get role() {
+        return resolveAttribute(this.attributes(), 'role');
+    }
+    get tabindex() {
+        return resolveAttribute(this.attributes(), 'tabindex');
+    }
+    get disabled() {
+        return this.option().disabled;
+    }
+    get ariaDisabled() {
+        return resolveAttribute(this.attributes(), 'aria-disabled');
+    }
+    get ariaSelected() {
+        return resolveAttribute(this.attributes(), 'aria-selected');
+    }
+    get dataActive() {
+        return resolveAttribute(this.attributes(), 'data-active');
+    }
+    get dataDisabled() {
+        return resolveAttribute(this.attributes(), 'data-disabled');
+    }
+    get dataFocusVisible() {
+        return resolveAttribute(this.attributes(), 'data-focus-visible');
+    }
+    get dataSelected() {
+        return resolveAttribute(this.attributes(), 'data-selected');
+    }
+    get dataSlot() {
+        return resolveAttribute(this.attributes(), 'data-slot');
+    }
+    onClick() {
+        const option = this.option();
+        if (option.disabled) {
+            return;
+        }
+        this.controller().selectMonth(option.index);
+        this.controller().showDaysPanel();
+        this.syncOverlayFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerMonthOption, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerMonthOption, isStandalone: true, selector: "button[tngDateRangePickerMonthOption]", inputs: { option: { classPropertyName: "option", publicName: "tngDateRangePickerMonthOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "disabled": "this.disabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected", "attr.data-active": "this.dataActive", "attr.data-disabled": "this.dataDisabled", "attr.data-focus-visible": "this.dataFocusVisible", "attr.data-selected": "this.dataSelected", "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDateRangePickerMonthOption"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerMonthOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerMonthOption]',
+                    exportAs: 'tngDateRangePickerMonthOption',
+                    standalone: true,
+                }]
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerMonthOption", required: true }] }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], dataActive: [{
+                type: HostBinding,
+                args: ['attr.data-active']
+            }], dataDisabled: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], dataFocusVisible: [{
+                type: HostBinding,
+                args: ['attr.data-focus-visible']
+            }], dataSelected: [{
+                type: HostBinding,
+                args: ['attr.data-selected']
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDateRangePickerYearGrid extends TngDateRangePickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDateRangePickerYearGrid' });
+    dataSlot = 'date-range-picker-grid';
+    role = 'grid';
+    onKeydown(event) {
+        this.controller().handleYearGridKeyDown(event);
+        if (isPickerActivationKey(event.key)) {
+            this.controller().showMonthsPanel();
+        }
+        if (shouldSyncOverlayFocusAfterPickerKey(event.key)) {
+            this.syncOverlayFocus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerYearGrid, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerYearGrid, isStandalone: true, selector: "[tngDateRangePickerYearGrid]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDateRangePickerYearGrid", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.role" } }, exportAs: ["tngDateRangePickerYearGrid"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerYearGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDateRangePickerYearGrid]',
+                    exportAs: 'tngDateRangePickerYearGrid',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerYearGrid", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDateRangePickerYearOption extends TngDateRangePickerControllerPart {
+    yearGrid = inject(TngDateRangePickerYearGrid);
+    controller = computed(() => this.yearGrid.controller(), ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    option = input.required({ ...(ngDevMode ? { debugName: "option" } : {}), alias: 'tngDateRangePickerYearOption' });
+    attributes = computed(() => {
+        this.renderVersion();
+        return this.controller().getOutputs().getYearAttributes(this.option());
+    }, ...(ngDevMode ? [{ debugName: "attributes" }] : []));
+    get id() {
+        return this.attributes().id ?? null;
+    }
+    get role() {
+        return resolveAttribute(this.attributes(), 'role');
+    }
+    get tabindex() {
+        return resolveAttribute(this.attributes(), 'tabindex');
+    }
+    get disabled() {
+        return this.option().disabled;
+    }
+    get ariaDisabled() {
+        return resolveAttribute(this.attributes(), 'aria-disabled');
+    }
+    get ariaSelected() {
+        return resolveAttribute(this.attributes(), 'aria-selected');
+    }
+    get dataActive() {
+        return resolveAttribute(this.attributes(), 'data-active');
+    }
+    get dataDisabled() {
+        return resolveAttribute(this.attributes(), 'data-disabled');
+    }
+    get dataFocusVisible() {
+        return resolveAttribute(this.attributes(), 'data-focus-visible');
+    }
+    get dataSelected() {
+        return resolveAttribute(this.attributes(), 'data-selected');
+    }
+    get dataSlot() {
+        return resolveAttribute(this.attributes(), 'data-slot');
+    }
+    onClick() {
+        const option = this.option();
+        if (option.disabled) {
+            return;
+        }
+        this.controller().selectYear(option.year);
+        this.controller().showMonthsPanel();
+        this.syncOverlayFocus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerYearOption, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDateRangePickerYearOption, isStandalone: true, selector: "button[tngDateRangePickerYearOption]", inputs: { option: { classPropertyName: "option", publicName: "tngDateRangePickerYearOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "disabled": "this.disabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected", "attr.data-active": "this.dataActive", "attr.data-disabled": "this.dataDisabled", "attr.data-focus-visible": "this.dataFocusVisible", "attr.data-selected": "this.dataSelected", "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDateRangePickerYearOption"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDateRangePickerYearOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDateRangePickerYearOption]',
+                    exportAs: 'tngDateRangePickerYearOption',
+                    standalone: true,
+                }]
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDateRangePickerYearOption", required: true }] }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], disabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], dataActive: [{
+                type: HostBinding,
+                args: ['attr.data-active']
+            }], dataDisabled: [{
+                type: HostBinding,
+                args: ['attr.data-disabled']
+            }], dataFocusVisible: [{
+                type: HostBinding,
+                args: ['attr.data-focus-visible']
+            }], dataSelected: [{
+                type: HostBinding,
+                args: ['attr.data-selected']
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+//# sourceMappingURL=tng-date-range-picker.parts.js.map