@tailng-ui/components 0.13.0 → 0.15.0

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

@@ -0,0 +1,684 @@
+import { __decorate } from "tslib";
+import { Component, ElementRef, HostBinding, LOCALE_ID, computed, effect, inject, input, output, signal, viewChild, } from '@angular/core';
+import { booleanAttribute } from '@angular/core';
+import { computeOverlayPosition, } from '@tailng-ui/cdk';
+import { createDatepickerController, } from '@tailng-ui/primitives';
+const OVERLAY_VIEWPORT_MARGIN = 12;
+const OVERLAY_OFFSET = 9;
+function rectFromClientRect(rect) {
+    return {
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+    };
+}
+function viewportRect(windowRef) {
+    return {
+        height: windowRef.innerHeight || 768,
+        left: 0,
+        top: 0,
+        width: windowRef.innerWidth || 1024,
+    };
+}
+function normalizeOptionalBooleanInput(value) {
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    return booleanAttribute(value);
+}
+function normalizeNumberInput(value) {
+    return typeof value === 'number' ? value : Number(value);
+}
+function normalizeWeekdayInput(value) {
+    const normalized = Math.max(0, Math.min(6, Math.trunc(normalizeNumberInput(value))));
+    return normalized;
+}
+function isKeyboardEventTarget(value) {
+    return value instanceof HTMLElement;
+}
+let nextDatepickerInputId = 0;
+function createDatepickerInputId() {
+    nextDatepickerInputId += 1;
+    return `tng-datepicker-input-${nextDatepickerInputId}`;
+}
+let TngDatepickerComponent = class TngDatepickerComponent {
+    hostElement = inject(ElementRef);
+    defaultLocale = inject(LOCALE_ID);
+    fallbackInputId = createDatepickerInputId();
+    ownerDocument = this.hostElement.nativeElement.ownerDocument ?? null;
+    ownerWindow = this.ownerDocument?.defaultView ?? null;
+    renderVersion = signal(0);
+    overlayOpen = signal(false);
+    resolvedOverlayPlacement = signal('bottom');
+    anchorRef = viewChild('anchorShell');
+    triggerRef = viewChild('triggerButton');
+    overlayRef = viewChild('overlayPanel');
+    overlayPlaceholder = null;
+    overlayOriginalParent = null;
+    removeResizeListener = null;
+    removeScrollListener = null;
+    resizeObserver = null;
+    overlayLayoutFrame = null;
+    appliedInitialState = false;
+    controller = createDatepickerController({
+        allowManualInput: true,
+        autoCommitView: false,
+        closeOnEscape: true,
+        closeOnOutsideClick: true,
+        closeOnSelect: true,
+        locale: this.defaultLocale,
+        ownerDocument: this.ownerDocument,
+        restoreFocus: true,
+        showOutsideDays: true,
+        trapFocus: true,
+        value: null,
+    });
+    unsubscribe = this.controller.subscribe((event) => {
+        this.renderVersion.update((value) => value + 1);
+        switch (event.type) {
+            case 'activeChange':
+                this.activeDateChange.emit(event.activeDate);
+                break;
+            case 'closed':
+                this.overlayOpen.set(false);
+                this.openChange.emit(false);
+                this.closed.emit(event.reason);
+                break;
+            case 'monthChange':
+                this.monthChange.emit(event.visibleMonth);
+                break;
+            case 'opened':
+                this.overlayOpen.set(true);
+                this.openChange.emit(true);
+                this.queueOverlayFocusSync();
+                break;
+            case 'valueChange':
+                this.valueChange.emit(event.value);
+                break;
+            case 'viewChange':
+                this.viewChange.emit(event.view);
+                break;
+            case 'yearChange':
+                this.yearChange.emit(event.year);
+                break;
+        }
+    });
+    adapter = input(undefined);
+    allowDeselect = input(false, {
+        transform: booleanAttribute,
+    });
+    allowManualInput = input(true, {
+        transform: booleanAttribute,
+    });
+    ariaDescribedBy = input(null);
+    ariaLabel = input(null);
+    ariaLabelledBy = input(null);
+    autoCommitView = input(false, {
+        transform: booleanAttribute,
+    });
+    closeOnEscape = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnOutsideClick = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOnSelect = input(true, {
+        transform: booleanAttribute,
+    });
+    closeOthersOnOpen = input(false, {
+        transform: booleanAttribute,
+    });
+    defaultOpen = input(false, {
+        transform: booleanAttribute,
+    });
+    defaultValue = input(undefined);
+    direction = input('ltr');
+    disableDate = input(null);
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    fullWidth = input(true, {
+        transform: booleanAttribute,
+    });
+    id = input(null);
+    inputAriaLabel = input('Date input');
+    invalid = input(false, {
+        transform: booleanAttribute,
+    });
+    locale = input(this.defaultLocale);
+    maxDate = input(undefined);
+    minDate = input(undefined);
+    open = input(undefined, {
+        transform: normalizeOptionalBooleanInput,
+    });
+    overlaySize = input(320, {
+        transform: normalizeNumberInput,
+    });
+    placement = input('auto');
+    placeholder = input('MM-DD-YYYY');
+    readonly = input(false, {
+        transform: booleanAttribute,
+    });
+    restoreFocus = input(true, {
+        transform: booleanAttribute,
+    });
+    selectionMode = input('single');
+    showOutsideDays = input(true, {
+        transform: booleanAttribute,
+    });
+    today = input(undefined);
+    trapFocus = input(true, {
+        transform: booleanAttribute,
+    });
+    value = input(undefined);
+    weekStartsOn = input(0, {
+        transform: normalizeWeekdayInput,
+    });
+    yearPageSize = input(24, {
+        transform: normalizeNumberInput,
+    });
+    activeDateChange = output();
+    closed = output();
+    monthChange = output();
+    openChange = output();
+    valueChange = output();
+    viewChange = output();
+    yearChange = output();
+    outputs = computed(() => {
+        this.renderVersion();
+        return this.controller.getOutputs();
+    });
+    invalidState = computed(() => this.invalid() || this.outputs().validationError !== null);
+    currentOverlayPlacement = computed(() => this.resolvedOverlayPlacement());
+    materialPeriodLabel = computed(() => {
+        const outputs = this.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 this.controller.formatDate(outputs.visibleMonth, 'year-label');
+        }
+        return outputs.labelMonthYear;
+    });
+    get dataFullWidth() {
+        return this.fullWidth() ? '' : null;
+    }
+    constructor() {
+        effect(() => {
+            const trigger = this.triggerRef()?.nativeElement ?? null;
+            this.controller.registerTrigger(trigger);
+        });
+        effect(() => {
+            const overlay = this.overlayRef()?.nativeElement ?? null;
+            this.controller.registerOverlay(overlay);
+            this.initializeOverlayPortal(overlay);
+            this.renderVersion.update((value) => value + 1);
+        });
+        effect(() => {
+            const overlay = this.overlayRef()?.nativeElement;
+            if (overlay === undefined) {
+                return;
+            }
+            if (this.overlayOpen()) {
+                this.mountOverlayToBodyAndPosition();
+                return;
+            }
+            this.restoreOverlayToPlaceholder();
+        });
+        effect(() => {
+            this.placement();
+            this.direction();
+            this.overlaySize();
+            if (!this.overlayOpen()) {
+                return;
+            }
+            this.scheduleOverlayLayoutSync();
+        });
+        effect(() => {
+            this.controller.setConfig({
+                adapter: this.adapter(),
+                allowDeselect: this.allowDeselect(),
+                allowManualInput: this.allowManualInput(),
+                ariaDescribedBy: this.ariaDescribedBy(),
+                ariaLabel: this.ariaLabel(),
+                ariaLabelledBy: this.ariaLabelledBy(),
+                autoCommitView: this.autoCommitView(),
+                closeOnEscape: this.closeOnEscape(),
+                closeOnOutsideClick: this.closeOnOutsideClick(),
+                closeOnSelect: this.closeOnSelect(),
+                closeOthersOnOpen: this.closeOthersOnOpen(),
+                direction: this.direction(),
+                disableDate: this.disableDate() ?? undefined,
+                disabled: this.disabled(),
+                id: this.id() ?? undefined,
+                locale: this.locale(),
+                maxDate: this.maxDate(),
+                minDate: this.minDate(),
+                overlaySize: this.overlaySize(),
+                ownerDocument: this.ownerDocument,
+                restoreFocus: this.restoreFocus(),
+                selectionMode: this.selectionMode(),
+                showOutsideDays: this.showOutsideDays(),
+                today: this.today(),
+                trapFocus: this.trapFocus(),
+                weekStartsOn: this.weekStartsOn(),
+                yearPageSize: this.yearPageSize(),
+            });
+            const controlledValue = this.value();
+            if (controlledValue !== undefined) {
+                this.controller.setValue(controlledValue);
+            }
+            const controlledOpen = this.open();
+            const currentOpen = this.controller.getOutputs().open;
+            if (controlledOpen !== undefined) {
+                this.controller.setOpen(controlledOpen);
+            }
+            if (!this.appliedInitialState) {
+                if (controlledValue === undefined && this.defaultValue() !== undefined) {
+                    this.controller.setValue(this.defaultValue());
+                }
+                if (controlledOpen === undefined && this.defaultOpen()) {
+                    this.controller.setOpen(true);
+                }
+                this.appliedInitialState = true;
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.overlayLayoutFrame !== null && this.ownerWindow !== null) {
+            this.ownerWindow.cancelAnimationFrame(this.overlayLayoutFrame);
+            this.overlayLayoutFrame = null;
+        }
+        this.teardownOverlayRepositionListeners();
+        this.restoreOverlayToPlaceholder(true);
+        this.unsubscribe();
+        this.controller.destroy();
+    }
+    clear() {
+        this.controller.clear();
+        this.controller.showDaysPanel();
+        this.queueOverlayFocusSync();
+    }
+    close(reason = 'programmatic') {
+        this.controller.close(reason);
+    }
+    openDatepicker() {
+        this.controller.open();
+    }
+    showDaysPanel() {
+        this.controller.showDaysPanel();
+        this.queueOverlayFocusSync();
+    }
+    showMonthsPanel() {
+        this.controller.showMonthsPanel();
+        this.queueOverlayFocusSync();
+    }
+    showYearsPanel() {
+        this.controller.showYearsPanel();
+        this.queueOverlayFocusSync();
+    }
+    toggleOpen() {
+        this.controller.toggleOpen();
+    }
+    resolveInputId() {
+        const id = this.id()?.trim();
+        if (id !== undefined && id !== '') {
+            return `${id}-input`;
+        }
+        return this.fallbackInputId;
+    }
+    isDayView() {
+        return this.outputs().view === 'day';
+    }
+    isMonthView() {
+        return this.outputs().view === 'month';
+    }
+    isYearView() {
+        return this.outputs().view === 'year';
+    }
+    onDayCellClick(cell) {
+        if (cell.disabled || cell.hidden) {
+            return;
+        }
+        this.controller.handleCellClick(cell.date);
+    }
+    onInputBlur() {
+        if (!this.allowManualInput()) {
+            return;
+        }
+        this.controller.commitInputText();
+        this.renderVersion.update((value) => value + 1);
+    }
+    onInputChange(event) {
+        if (!this.allowManualInput()) {
+            return;
+        }
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) {
+            return;
+        }
+        this.controller.setInputText(target.value);
+        this.renderVersion.update((value) => value + 1);
+    }
+    onInputKeydown(event) {
+        if (event.key === 'Enter' && this.allowManualInput()) {
+            event.preventDefault();
+            this.controller.commitInputText();
+            this.renderVersion.update((value) => value + 1);
+            return;
+        }
+        if (event.key === 'ArrowDown' && !this.outputs().open) {
+            event.preventDefault();
+            this.controller.open();
+        }
+    }
+    onGridKeydown(event) {
+        this.controller.handleGridKeyDown(event);
+        if (this.shouldSyncOverlayFocusAfterPickerKey(event.key)) {
+            this.queueOverlayFocusSync();
+        }
+    }
+    onMonthKeydown(event) {
+        this.controller.handleMonthGridKeyDown(event);
+        if (this.isPickerActivationKey(event.key)) {
+            this.controller.showDaysPanel();
+        }
+        if (this.shouldSyncOverlayFocusAfterPickerKey(event.key)) {
+            this.queueOverlayFocusSync();
+        }
+    }
+    onMonthOptionClick(option) {
+        if (option.disabled) {
+            return;
+        }
+        this.controller.selectMonth(option.index);
+        this.controller.showDaysPanel();
+        this.queueOverlayFocusSync();
+    }
+    onOverlayKeydown(event) {
+        this.controller.handleOverlayKeyDown(event);
+    }
+    onTriggerClick() {
+        if (this.disabled()) {
+            return;
+        }
+        this.controller.toggleOpen();
+    }
+    onTriggerKeydown(event) {
+        this.controller.handleTriggerKeyDown(event);
+    }
+    onPeriodButtonClick() {
+        if (this.isYearView()) {
+            return;
+        }
+        this.controller.showYearsPanel();
+        this.queueOverlayFocusSync();
+    }
+    onYearKeydown(event) {
+        this.controller.handleYearGridKeyDown(event);
+        if (this.isPickerActivationKey(event.key)) {
+            this.controller.showMonthsPanel();
+        }
+        if (this.shouldSyncOverlayFocusAfterPickerKey(event.key)) {
+            this.queueOverlayFocusSync();
+        }
+    }
+    onYearOptionClick(option) {
+        if (option.disabled) {
+            return;
+        }
+        this.controller.selectYear(option.year);
+        this.controller.showMonthsPanel();
+        this.queueOverlayFocusSync();
+    }
+    pageBackward() {
+        if (this.isDayView()) {
+            this.controller.prevMonth();
+            this.queueOverlayFocusSync();
+            return;
+        }
+        if (this.isMonthView() || this.isYearView()) {
+            this.controller.prevYear();
+            this.queueOverlayFocusSync();
+            return;
+        }
+    }
+    pageForward() {
+        if (this.isDayView()) {
+            this.controller.nextMonth();
+            this.queueOverlayFocusSync();
+            return;
+        }
+        if (this.isMonthView() || this.isYearView()) {
+            this.controller.nextYear();
+            this.queueOverlayFocusSync();
+            return;
+        }
+    }
+    queueOverlayFocusSync() {
+        this.scheduleOverlayLayoutSync();
+        queueMicrotask(() => {
+            const focusActiveTarget = () => {
+                const outputs = this.outputs();
+                if (!outputs.open || this.ownerDocument === null) {
+                    return;
+                }
+                const targetId = this.resolveCurrentFocusTargetId(outputs);
+                if (targetId === null) {
+                    return;
+                }
+                const target = this.ownerDocument.getElementById(targetId);
+                if (!isKeyboardEventTarget(target)) {
+                    return;
+                }
+                target.focus();
+            };
+            if (typeof requestAnimationFrame === 'function') {
+                requestAnimationFrame(() => {
+                    focusActiveTarget();
+                });
+                return;
+            }
+            setTimeout(() => {
+                focusActiveTarget();
+            }, 0);
+        });
+    }
+    resolveCurrentFocusTargetId(outputs) {
+        if (outputs.view === 'day') {
+            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;
+    }
+    shouldSyncOverlayFocusAfterPickerKey(key) {
+        return (key === 'ArrowUp' ||
+            key === 'ArrowDown' ||
+            key === 'ArrowLeft' ||
+            key === 'ArrowRight' ||
+            key === 'Home' ||
+            key === 'End' ||
+            key === 'PageUp' ||
+            key === 'PageDown' ||
+            key === 'Enter' ||
+            key === ' ' ||
+            key === 'Escape');
+    }
+    isPickerActivationKey(key) {
+        return key === 'Enter' || key === ' ';
+    }
+    scheduleOverlayLayoutSync() {
+        if (!this.overlayOpen() || this.ownerWindow === null) {
+            return;
+        }
+        if (this.overlayLayoutFrame !== null) {
+            this.ownerWindow.cancelAnimationFrame(this.overlayLayoutFrame);
+        }
+        this.overlayLayoutFrame = this.ownerWindow.requestAnimationFrame(() => {
+            this.overlayLayoutFrame = null;
+            this.positionOverlay();
+        });
+    }
+    initializeOverlayPortal(overlay) {
+        if (overlay === null || this.overlayPlaceholder !== null) {
+            return;
+        }
+        const placeholderDocument = this.ownerDocument ?? document;
+        this.overlayPlaceholder = placeholderDocument.createComment('tng-datepicker-overlay-anchor');
+        this.overlayOriginalParent = overlay.parentNode;
+        this.overlayOriginalParent?.insertBefore(this.overlayPlaceholder, overlay);
+    }
+    positionOverlay() {
+        const overlay = this.overlayRef()?.nativeElement;
+        const anchor = this.anchorRef()?.nativeElement;
+        if (overlay === undefined || anchor === undefined || this.ownerWindow === null) {
+            return;
+        }
+        const anchorRect = rectFromClientRect(anchor.getBoundingClientRect());
+        const viewport = viewportRect(this.ownerWindow);
+        const width = Math.max(0, Math.min(anchorRect.width, viewport.width - OVERLAY_VIEWPORT_MARGIN * 2));
+        overlay.style.width = `${width}px`;
+        overlay.style.maxWidth = `${Math.max(0, viewport.width - OVERLAY_VIEWPORT_MARGIN * 2)}px`;
+        overlay.style.maxHeight = '';
+        const overlayRect = rectFromClientRect(overlay.getBoundingClientRect());
+        const result = computeOverlayPosition({
+            anchorRect,
+            collision: this.resolveOverlayCollision(this.placement()),
+            direction: this.direction(),
+            offset: this.resolveOverlayOffset(),
+            overlayRect,
+            placement: this.resolveOverlayPlacement(this.placement()),
+            viewportRect: viewport,
+        });
+        overlay.style.left = `${result.x}px`;
+        overlay.style.top = `${result.y}px`;
+        const anchorBottom = anchorRect.top + anchorRect.height;
+        const availableHeight = result.side === 'top'
+            ? Math.max(0, Math.floor(anchorRect.top - OVERLAY_VIEWPORT_MARGIN - OVERLAY_OFFSET))
+            : Math.max(0, Math.floor(viewport.height - anchorBottom - OVERLAY_VIEWPORT_MARGIN - OVERLAY_OFFSET));
+        if (availableHeight > 0) {
+            overlay.style.maxHeight = `${availableHeight}px`;
+        }
+        this.resolvedOverlayPlacement.set(result.side === 'top' ? 'top' : 'bottom');
+        overlay.style.visibility = '';
+    }
+    mountOverlayToBodyAndPosition() {
+        const overlay = this.overlayRef()?.nativeElement;
+        if (overlay === undefined || this.ownerDocument === null) {
+            return;
+        }
+        this.initializeOverlayPortal(overlay);
+        this.setupOverlayRepositionListeners();
+        if (overlay.parentNode !== this.ownerDocument.body) {
+            this.ownerDocument.body.appendChild(overlay);
+        }
+        overlay.style.position = 'fixed';
+        overlay.style.left = '0px';
+        overlay.style.top = '0px';
+        overlay.style.visibility = 'hidden';
+        overlay.style.zIndex = '1000';
+        queueMicrotask(() => {
+            if (!this.overlayOpen()) {
+                return;
+            }
+            this.positionOverlay();
+        });
+    }
+    restoreOverlayToPlaceholder(force = false) {
+        const overlay = this.overlayRef()?.nativeElement;
+        if (overlay === undefined) {
+            return;
+        }
+        if (!force && overlay.parentNode !== this.ownerDocument?.body) {
+            return;
+        }
+        const placeholder = this.overlayPlaceholder;
+        if (placeholder?.parentNode !== null && placeholder !== null) {
+            placeholder.parentNode.insertBefore(overlay, placeholder);
+        }
+        else if (this.overlayOriginalParent !== null) {
+            this.overlayOriginalParent.appendChild(overlay);
+        }
+        this.teardownOverlayRepositionListeners();
+        this.resolvedOverlayPlacement.set(this.placement() === 'top' ? 'top' : 'bottom');
+        overlay.style.left = '';
+        overlay.style.maxHeight = '';
+        overlay.style.maxWidth = '';
+        overlay.style.position = '';
+        overlay.style.top = '';
+        overlay.style.visibility = '';
+        overlay.style.width = '';
+        overlay.style.zIndex = '';
+    }
+    setupOverlayRepositionListeners() {
+        if (this.ownerWindow === null || this.removeResizeListener !== null || this.removeScrollListener !== null) {
+            return;
+        }
+        const schedule = () => {
+            this.scheduleOverlayLayoutSync();
+        };
+        this.ownerWindow.addEventListener('resize', schedule);
+        this.ownerWindow.addEventListener('scroll', schedule, true);
+        this.removeResizeListener = () => this.ownerWindow?.removeEventListener('resize', schedule);
+        this.removeScrollListener = () => this.ownerWindow?.removeEventListener('scroll', schedule, true);
+        if ('ResizeObserver' in this.ownerWindow) {
+            this.resizeObserver = new this.ownerWindow.ResizeObserver(() => {
+                this.scheduleOverlayLayoutSync();
+            });
+            const anchor = this.anchorRef()?.nativeElement;
+            if (anchor !== undefined) {
+                this.resizeObserver.observe(anchor);
+            }
+            const overlay = this.overlayRef()?.nativeElement;
+            if (overlay !== undefined) {
+                this.resizeObserver.observe(overlay);
+            }
+        }
+    }
+    teardownOverlayRepositionListeners() {
+        this.removeResizeListener?.();
+        this.removeScrollListener?.();
+        this.removeResizeListener = null;
+        this.removeScrollListener = null;
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    resolveOverlayCollision(placement) {
+        return {
+            flip: placement === 'auto',
+            padding: OVERLAY_VIEWPORT_MARGIN,
+            shift: true,
+        };
+    }
+    resolveOverlayOffset() {
+        return { side: OVERLAY_OFFSET };
+    }
+    resolveOverlayPlacement(placement) {
+        return {
+            align: 'start',
+            side: placement === 'top' ? 'top' : 'bottom',
+        };
+    }
+};
+__decorate([
+    HostBinding('attr.data-full-width')
+], TngDatepickerComponent.prototype, "dataFullWidth", null);
+TngDatepickerComponent = __decorate([
+    Component({
+        selector: 'tng-datepicker',
+        templateUrl: './tng-datepicker.component.html',
+        styleUrl: './tng-datepicker.component.css',
+    })
+], TngDatepickerComponent);
+export { TngDatepickerComponent };
+//# sourceMappingURL=tng-datepicker.component.js.map