@tailng-ui/primitives 0.32.0 → 0.33.0

package/src/lib/form/datepicker/tng-datepicker.parts.js

@@ -0,0 +1,883 @@
+import { DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injector, computed, effect, inject, input, signal, } from '@angular/core';
+import * as i0 from "@angular/core";
+export function resolveTngDatepickerPeriodLabel(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 bindTngDatepicker(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(() => resolveTngDatepickerPeriodLabel(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 queueDatepickerOverlayFocusSync(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 TngDatepickerControllerPart {
+    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() {
+        queueDatepickerOverlayFocusSync(this.controller(), this.ownerDocument);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerControllerPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngDatepickerControllerPart, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerControllerPart, decorators: [{
+            type: Directive
+        }] });
+export class TngDatepickerHost extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerHost' });
+    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: TngDatepickerHost, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerHost, isStandalone: true, selector: "[tngDatepickerHost]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerHost", 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: ["tngDatepickerHost"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerHost, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDatepickerHost]',
+                    exportAs: 'tngDatepickerHost',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerHost", 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 TngDatepickerInput extends TngDatepickerControllerPart {
+    inputElement = inject(ElementRef);
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerInput' });
+    dataSlot = 'datepicker-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: TngDatepickerInput, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerInput, isStandalone: true, selector: "input[tngDatepickerInput]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerInput", 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: ["tngDatepickerInput"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[tngDatepickerInput]',
+                    exportAs: 'tngDatepickerInput',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerInput", 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 TngDatepickerTrigger extends TngDatepickerControllerPart {
+    elementRef = inject(ElementRef);
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerTrigger' });
+    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 = 'datepicker-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 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: TngDatepickerTrigger, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerTrigger, isStandalone: true, selector: "button[tngDatepickerTrigger]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerTrigger", 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.data-open": "this.dataOpen" } }, exportAs: ["tngDatepickerTrigger"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerTrigger]',
+                    exportAs: 'tngDatepickerTrigger',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerTrigger", 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']
+            }], dataOpen: [{
+                type: HostBinding,
+                args: ['attr.data-open']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDatepickerPrevButton extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerPrevButton' });
+    dataSlot = 'datepicker-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: TngDatepickerPrevButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerPrevButton, isStandalone: true, selector: "button[tngDatepickerPrevButton]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerPrevButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDatepickerPrevButton"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerPrevButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerPrevButton]',
+                    exportAs: 'tngDatepickerPrevButton',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerPrevButton", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDatepickerNextButton extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerNextButton' });
+    dataSlot = 'datepicker-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: TngDatepickerNextButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerNextButton, isStandalone: true, selector: "button[tngDatepickerNextButton]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerNextButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDatepickerNextButton"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerNextButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerNextButton]',
+                    exportAs: 'tngDatepickerNextButton',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerNextButton", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDatepickerPeriodButton extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerPeriodButton' });
+    dataSlot = 'datepicker-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: TngDatepickerPeriodButton, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerPeriodButton, isStandalone: true, selector: "button[tngDatepickerPeriodButton]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerPeriodButton", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick()" }, properties: { "attr.data-slot": "this.dataSlot", "attr.data-interactive": "this.dataInteractive" } }, exportAs: ["tngDatepickerPeriodButton"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerPeriodButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerPeriodButton]',
+                    exportAs: 'tngDatepickerPeriodButton',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerPeriodButton", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], dataInteractive: [{
+                type: HostBinding,
+                args: ['attr.data-interactive']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+export class TngDatepickerDayGrid extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerDayGrid' });
+    get dataSlot() {
+        this.renderVersion();
+        return this.controller().getOutputs().getGridAttributes()['data-slot'] ?? 'datepicker-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: TngDatepickerDayGrid, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerDayGrid, isStandalone: true, selector: "[tngDatepickerDayGrid]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerDayGrid", 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: ["tngDatepickerDayGrid"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerDayGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDatepickerDayGrid]',
+                    exportAs: 'tngDatepickerDayGrid',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerDayGrid", 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 TngDatepickerDayCell extends TngDatepickerControllerPart {
+    dayGrid = inject(TngDatepickerDayGrid);
+    controller = computed(() => this.dayGrid.controller(), ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    cell = input.required({ ...(ngDevMode ? { debugName: "cell" } : {}), alias: 'tngDatepickerDayCell' });
+    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 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 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 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');
+    }
+    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: TngDatepickerDayCell, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerDayCell, isStandalone: true, selector: "button[tngDatepickerDayCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tngDatepickerDayCell", 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-selected": "this.ariaSelected", "attr.data-active": "this.dataActive", "attr.data-disabled": "this.dataDisabled", "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-range-end": "this.dataRangeEnd", "attr.data-range-start": "this.dataRangeStart", "attr.data-selected": "this.dataSelected", "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngDatepickerDayCell"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerDayCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerDayCell]',
+                    exportAs: 'tngDatepickerDayCell',
+                    standalone: true,
+                }]
+        }], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerDayCell", 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']
+            }], 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']
+            }], dataHidden: [{
+                type: HostBinding,
+                args: ['attr.data-hidden']
+            }], dataInMonth: [{
+                type: HostBinding,
+                args: ['attr.data-in-month']
+            }], dataInRange: [{
+                type: HostBinding,
+                args: ['attr.data-in-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']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onPointerEnter: [{
+                type: HostListener,
+                args: ['pointerenter']
+            }] } });
+export class TngDatepickerMonthGrid extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerMonthGrid' });
+    dataSlot = 'datepicker-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: TngDatepickerMonthGrid, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerMonthGrid, isStandalone: true, selector: "[tngDatepickerMonthGrid]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerMonthGrid", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.role" } }, exportAs: ["tngDatepickerMonthGrid"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerMonthGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDatepickerMonthGrid]',
+                    exportAs: 'tngDatepickerMonthGrid',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerMonthGrid", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDatepickerMonthOption extends TngDatepickerControllerPart {
+    monthGrid = inject(TngDatepickerMonthGrid);
+    controller = computed(() => this.monthGrid.controller(), ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    option = input.required({ ...(ngDevMode ? { debugName: "option" } : {}), alias: 'tngDatepickerMonthOption' });
+    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: TngDatepickerMonthOption, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerMonthOption, isStandalone: true, selector: "button[tngDatepickerMonthOption]", inputs: { option: { classPropertyName: "option", publicName: "tngDatepickerMonthOption", 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: ["tngDatepickerMonthOption"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerMonthOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerMonthOption]',
+                    exportAs: 'tngDatepickerMonthOption',
+                    standalone: true,
+                }]
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerMonthOption", 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 TngDatepickerYearGrid extends TngDatepickerControllerPart {
+    controller = input.required({ ...(ngDevMode ? { debugName: "controller" } : {}), alias: 'tngDatepickerYearGrid' });
+    dataSlot = 'datepicker-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: TngDatepickerYearGrid, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerYearGrid, isStandalone: true, selector: "[tngDatepickerYearGrid]", inputs: { controller: { classPropertyName: "controller", publicName: "tngDatepickerYearGrid", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.role": "this.role" } }, exportAs: ["tngDatepickerYearGrid"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerYearGrid, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngDatepickerYearGrid]',
+                    exportAs: 'tngDatepickerYearGrid',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerYearGrid", required: true }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngDatepickerYearOption extends TngDatepickerControllerPart {
+    yearGrid = inject(TngDatepickerYearGrid);
+    controller = computed(() => this.yearGrid.controller(), ...(ngDevMode ? [{ debugName: "controller" }] : []));
+    option = input.required({ ...(ngDevMode ? { debugName: "option" } : {}), alias: 'tngDatepickerYearOption' });
+    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: TngDatepickerYearOption, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngDatepickerYearOption, isStandalone: true, selector: "button[tngDatepickerYearOption]", inputs: { option: { classPropertyName: "option", publicName: "tngDatepickerYearOption", 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: ["tngDatepickerYearOption"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngDatepickerYearOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[tngDatepickerYearOption]',
+                    exportAs: 'tngDatepickerYearOption',
+                    standalone: true,
+                }]
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "tngDatepickerYearOption", 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-datepicker.parts.js.map