@ngbase/adk 0.1.0

package/fesm2022/ngbase-adk-datepicker.mjs

@@ -0,0 +1,1130 @@
+import { NgTemplateOutlet, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, Injector, input, booleanAttribute, computed, effect, afterNextRender, Directive, viewChild, model, signal, Component, ChangeDetectionStrategy, output, untracked, viewChildren } from '@angular/core';
+import * as i1$1 from '@ngbase/adk/a11y';
+import { AccessibleGroup, AccessibleItem } from '@ngbase/adk/a11y';
+import { Directionality } from '@ngbase/adk/bidi';
+import { DialogRef } from '@ngbase/adk/portal';
+import * as i1$2 from '@ngbase/adk/utils';
+import { uniqueId, RangePipe, NumberOnly, padString, provideValueAccessor } from '@ngbase/adk/utils';
+import * as i1 from '@ngbase/adk/form-field';
+import { InputBase } from '@ngbase/adk/form-field';
+import { ngbPopoverPortal } from '@ngbase/adk/popover';
+
+const NgbDateAdapter = new InjectionToken('mat-date-formats');
+function injectNgbDateAdapter() {
+    const adapter = inject(NgbDateAdapter, { optional: true });
+    return adapter || new NgbNativeDateAdapter();
+}
+class NgbNativeDateAdapter {
+    now() {
+        return new Date();
+    }
+    create(year, month = 0, date = 1) {
+        return new Date(year, month, date);
+    }
+    compare(first, second) {
+        return first.getTime() - second.getTime();
+    }
+    getTime(date) {
+        return date.getTime();
+    }
+    getYear(date) {
+        return date.getFullYear();
+    }
+    getMonth(date) {
+        return date.getMonth();
+    }
+    getDate(date) {
+        return date.getDate();
+    }
+    getDay(date) {
+        return date.getDay();
+    }
+    format(date, format) {
+        if (!date)
+            return '';
+        const d = new Date(date);
+        if (isNaN(d.getTime()))
+            return '';
+        const formatters = {
+            YYYY: () => d.getFullYear().toString(),
+            yyyy: () => d.getFullYear().toString(),
+            yy: () => d.getFullYear().toString().slice(-2),
+            MMM: () => d.toLocaleString('default', { month: 'short' }),
+            MM: () => this.pad(d.getMonth() + 1),
+            M: () => (d.getMonth() + 1).toString(),
+            DD: () => this.pad(d.getDate()),
+            dd: () => this.pad(d.getDate()),
+            d: () => d.getDate().toString(),
+            HH: () => this.pad(d.getHours()),
+            H: () => d.getHours().toString(),
+            hh: () => this.pad(d.getHours() % 12 || 12),
+            h: () => (d.getHours() % 12 || 12).toString(),
+            mm: () => this.pad(d.getMinutes()),
+            ss: () => this.pad(d.getSeconds()),
+            SSS: () => this.pad(d.getMilliseconds(), 3),
+            ISO: () => d.toISOString(),
+            a: () => (d.getHours() < 12 ? 'AM' : 'PM'),
+        };
+        const regex = /\b(?:yyyy|YYYY|yy|MMM|MM|M|DD|dd|d|HH|H|hh|h|mm|ss|SSS|a|ISO)\b/g;
+        return format.replace(regex, match => formatters[match]?.() ?? match);
+    }
+    pad(value, length = 2) {
+        return value.toString().padStart(length, '0');
+    }
+    // We have to parse the date string like '2024-10-01T00:00:00.000Z'
+    parse(value, _) {
+        if (value instanceof Date)
+            return new Date(value.setHours(0, 0, 0, 0));
+        if (typeof value !== 'string')
+            return new Date(NaN);
+        if (value.includes('T')) {
+            return new Date(value);
+        }
+        const parts = value.split(/\D+/).map(Number);
+        if (parts.length !== 3)
+            return new Date(NaN);
+        const [a, b, c] = parts;
+        return a > 31 ? new Date(a, b - 1, c) : new Date(c, b - 1, a);
+    }
+    set(date, value, unit) {
+        const newDate = new Date(date);
+        if (unit === 'year')
+            newDate.setFullYear(value);
+        else if (unit === 'month')
+            newDate.setMonth(value);
+        else if (unit === 'date')
+            newDate.setDate(value);
+        else if (unit === 'hour')
+            newDate.setHours(value);
+        else if (unit === 'minute')
+            newDate.setMinutes(value);
+        else if (unit === 'second')
+            newDate.setSeconds(value);
+        else if (unit === 'millisecond')
+            newDate.setMilliseconds(value);
+        return newDate;
+    }
+    longMonthNames(date) {
+        return date.toLocaleString('default', { month: 'long' });
+    }
+}
+
+const DEFAULT_FIELD_FORMAT = 'ISO';
+const DEFAULT_FORMAT = 'M/d/yyyy';
+const DEFAULT_TIME_FORMAT = 'M/d/yyyy, HH:mm a';
+const DatePicker = new InjectionToken('DatePicker');
+class NgbDatepickerTrigger {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.inputS = inject(InputBase);
+        this.injector = inject(Injector);
+        this.adapter = injectNgbDateAdapter();
+        this.popover = ngbPopoverPortal();
+        this.datepicker = inject(DatePicker, { optional: true }) ?? (NgbDatePicker);
+        // readonly datepicker = input<NgbDatePicker<D>>();
+        this.noOfCalendars = input(1, { transform: (v) => Math.max(1, v) });
+        this.range = input(false, { transform: booleanAttribute });
+        this.time = input(false, { transform: booleanAttribute });
+        this.format = input('');
+        this.fieldFormat = input(DEFAULT_FIELD_FORMAT);
+        this.displayFormat = computed(() => {
+            return this.format() || (this.time() ? DEFAULT_TIME_FORMAT : DEFAULT_FORMAT);
+        });
+        this.dateFilter = input(() => true);
+        this.pickerType = input('date');
+        this.pickerTemplate = input(null);
+        effect(() => {
+            const value = this.getInputValue();
+            this.updateField(value);
+        });
+    }
+    getInputValue() {
+        const v = this.inputS.value();
+        let value = [];
+        if (v) {
+            value = this.range() ? v : [v];
+        }
+        return value.map(x => this.adapter.parse(x));
+    }
+    open() {
+        const data = {
+            value: this.getInputValue(),
+            pickerType: this.pickerType(),
+            noOfCalendars: this.noOfCalendars(),
+            range: this.range(),
+            format: this.displayFormat(),
+            fieldFormat: this.fieldFormat(),
+            target: this.el.nativeElement,
+            template: this.pickerTemplate(),
+            dateFilter: this.dateFilter(),
+            time: this.time(),
+        };
+        const { diaRef } = this.popover.open(this.datepicker, {
+            target: this.el.nativeElement,
+            position: 'bl',
+            data,
+            width: 'none',
+        });
+        this.close = diaRef.close;
+    }
+    updateInput(dates) {
+        const filtered = dates.filter(x => x);
+        const formatDate = dates.map(x => (x ? this.adapter.format(x, this.fieldFormat()) : x));
+        if (this.range()) {
+            if (filtered.length === 1) {
+                return;
+            }
+            this.inputS?.setValue(formatDate);
+        }
+        else if (filtered.length) {
+            this.inputS?.setValue(formatDate[0]);
+        }
+        this.updateField(filtered);
+    }
+    updateField(filtered) {
+        // console.log(this.fieldFormat());
+        const d = filtered
+            .map(x => this.adapter.format(x, this.displayFormat()))
+            .filter(x => x)
+            .join(' - ');
+        afterNextRender(() => (this.el.nativeElement.value = d), { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbDatepickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbDatepickerTrigger, isStandalone: true, selector: "[ngbDatepickerTrigger]", inputs: { noOfCalendars: { classPropertyName: "noOfCalendars", publicName: "noOfCalendars", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, fieldFormat: { classPropertyName: "fieldFormat", publicName: "fieldFormat", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: true, isRequired: false, transformFunction: null }, pickerTemplate: { classPropertyName: "pickerTemplate", publicName: "pickerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "readonly": "true" }, listeners: { "click": "open()" }, classAttribute: "cursor-pointer hover:bg-muted-background" }, exportAs: ["ngbDatepickerTrigger"], hostDirectives: [{ directive: i1.InputBase }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbDatepickerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbDatepickerTrigger]',
+                    exportAs: 'ngbDatepickerTrigger',
+                    hostDirectives: [InputBase],
+                    host: {
+                        class: 'cursor-pointer hover:bg-muted-background',
+                        '(click)': 'open()',
+                        readonly: 'true',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+function registerDatePicker(datePicker) {
+    return {
+        provide: DatePicker,
+        useValue: datePicker,
+    };
+}
+
+class DatepickerGroup {
+    constructor() {
+        this.picker = inject((NgbDatePicker));
+        this.allyGroup = inject(AccessibleGroup);
+        this.allyGroup._ayId.set(this.picker.ayId);
+        this.allyGroup._columns.set(7);
+        this.allyGroup._initialFocus.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DatepickerGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: DatepickerGroup, isStandalone: true, selector: "[ngbDatepickerGroup]", exportAs: ["ngbDatepickerGroup"], hostDirectives: [{ directive: i1$1.AccessibleGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: DatepickerGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbDatepickerGroup]',
+                    exportAs: 'ngbDatepickerGroup',
+                    hostDirectives: [AccessibleGroup],
+                }]
+        }], ctorParameters: () => [] });
+class NgbDatePicker {
+    constructor() {
+        this.datepickerTrigger = inject(NgbDatepickerTrigger, {
+            optional: true,
+        });
+        this.dialogRef = inject(DialogRef, { optional: true });
+        this.adapter = injectNgbDateAdapter();
+        this.dateFilter = input(this.data?.dateFilter || (() => true));
+        this.pickerType = input(this.data?.pickerType || 'date');
+        this.allyGroup = viewChild(AccessibleGroup);
+        this.noOfCalendar = model(this.data?.noOfCalendars || 1);
+        this.range = model(this.data?.range || false);
+        this.time = signal(this.data?.time || false);
+        this.format = signal(this.data?.format || `MM-dd-yyyy${this.data?.time ? ' HH:mm a' : ''}`);
+        this.template = signal(this.data?.template || null);
+        this.showType = signal(this.pickerType());
+        this.selectedDates = signal([null, null]);
+        this.times = signal([null, null]);
+        this.startDate = computed(() => {
+            const dates = this.selectedDates();
+            return Array.isArray(dates) && dates[0] ? dates[0] : this.adapter.now();
+        });
+        this.startMonth = signal(this.adapter.getMonth(this.startDate()));
+        this.startYear = signal(this.adapter.getYear(this.startDate()));
+        this.hoveredDate = signal(null);
+        this.hoveredCount = computed(() => {
+            const date = this.hoveredDate();
+            return date ? this.adapter.getTime(date) : 0;
+        });
+        this.startDateCount = computed(() => {
+            const date = this.selectedDates()[0];
+            return date ? this.adapter.getTime(date) : 0;
+        });
+        this.dates = computed(() => {
+            const dates = this.selectedDates();
+            const v = { year: [], month: [], day: [] };
+            for (const x of dates) {
+                if (x) {
+                    const year = this.adapter.getYear(x);
+                    const month = this.adapter.getMonth(x);
+                    const day = this.adapter.getDate(x);
+                    v.year.push(year);
+                    v.month.push(`${month}-${year}`);
+                    v.day.push(`${day}-${month}-${year}`);
+                }
+            }
+            return v;
+        });
+        this.ayId = uniqueId();
+        this.init();
+        // this.allyGroup.focusChanged.subscribe(item => this.focusChanged(item));
+    }
+    init() {
+        const v = this.data?.value?.filter(x => x).map(x => this.adapter.parse(x));
+        if (Array.isArray(v) && v.length) {
+            let date;
+            let dates;
+            if (v.length === 2) {
+                dates = v;
+                this.hoveredDate.set(v[1]);
+            }
+            else {
+                dates = [v[0], null];
+            }
+            date = dates[0];
+            this.selectedDates.set(dates);
+            this.startYear.set(this.adapter.getYear(date));
+            this.startMonth.set(this.adapter.getMonth(date));
+        }
+    }
+    get data() {
+        return this.dialogRef?.data;
+    }
+    // focusChanged(_: { current: AccessibleItem; previous?: AccessibleItem }) {
+    // const cData = item.current.data();
+    // const pData = item.previous?.data();
+    // console.log('focusChanged', cData, pData);
+    // console.log(data);
+    // if (cData.day) {
+    // let add = 0;
+    // if (pData) {
+    //   const v = (cData.day - pData.day) / 7;
+    //   console.log(Math.abs(1));
+    //   if (1 === Math.abs(v)) {
+    //     add = 0;
+    //   } else if (v > 0) {
+    //     add = -1;
+    //   } else {
+    //     add = 1;
+    //   }
+    // }
+    // console.log(add);
+    // this.startMonth.set(cData.mon + add);
+    // }
+    // }
+    updateHoveredDate(date) {
+        if (this.range()) {
+            const single = this.selectedDates().filter(x => x).length === 1;
+            this.hoveredDate.set(single ? date : null);
+        }
+    }
+    selectDate(date, index) {
+        let dates = this.selectedDates();
+        if (index != undefined) {
+            dates[index] = date;
+        }
+        else if (this.range()) {
+            if ((dates[0] && dates[1]) || !dates[0] || this.adapter.compare(dates[0], date) > 0) {
+                dates = [date, null];
+                this.hoveredDate.set(null);
+            }
+            else if (dates[0]) {
+                dates[1] = date;
+                this.hoveredDate.set(date);
+            }
+        }
+        else {
+            dates = [date, null];
+        }
+        this.selectedDates.set([...dates]);
+        this.datepickerTrigger?.updateInput(dates);
+    }
+    selectYear(year) {
+        this.startYear.set(year);
+        if (this.pickerType() !== 'year') {
+            this.showType.set('month');
+        }
+        else {
+            this.selectDate(this.adapter.create(year, this.startMonth()));
+        }
+    }
+    selectMonth(month, year) {
+        this.startMonth.set(month);
+        this.startYear.set(year);
+        if (this.pickerType() === 'date') {
+            this.showType.set('date');
+        }
+        else {
+            this.selectDate(this.adapter.create(year, month));
+        }
+    }
+    toggleView() {
+        let type = this.showType();
+        if (type === 'date') {
+            type = 'month';
+        }
+        else if (type === 'month' || this.pickerType() === 'year') {
+            type = 'year';
+        }
+        else if (this.pickerType() === 'date') {
+            type = 'date';
+        }
+        else {
+            type = 'month';
+        }
+        this.showType.set(type);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbDatePicker, isStandalone: true, selector: "[ngbDatepicker]", inputs: { dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, pickerType: { classPropertyName: "pickerType", publicName: "pickerType", isSignal: true, isRequired: false, transformFunction: null }, noOfCalendar: { classPropertyName: "noOfCalendar", publicName: "noOfCalendar", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { noOfCalendar: "noOfCalendarChange", range: "rangeChange" }, host: { classAttribute: "inline-block" }, viewQueries: [{ propertyName: "allyGroup", first: true, predicate: AccessibleGroup, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex" ngbDatepickerGroup>
+      @for (no of noOfCalendar() | range; track no) {
+        <ngb-calendar [first]="$first" [last]="$last" [index]="$index" />
+      }
+    </div>
+    @if (template()) {
+      <div class="px-b2 pb-b2">
+        <ng-container *ngTemplateOutlet="template()" />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: NgbCalendar, selector: "ngb-calendar", inputs: ["first", "last", "index"] }, { kind: "pipe", type: RangePipe, name: "range" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DatepickerGroup, selector: "[ngbDatepickerGroup]", exportAs: ["ngbDatepickerGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbDatePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ngbDatepicker]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgbCalendar, RangePipe, NgTemplateOutlet, AccessibleGroup, DatepickerGroup],
+                    template: `
+    <div class="flex" ngbDatepickerGroup>
+      @for (no of noOfCalendar() | range; track no) {
+        <ngb-calendar [first]="$first" [last]="$last" [index]="$index" />
+      }
+    </div>
+    @if (template()) {
+      <div class="px-b2 pb-b2">
+        <ng-container *ngTemplateOutlet="template()" />
+      </div>
+    }
+  `,
+                    host: {
+                        class: 'inline-block',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+function provideDatePicker(picker) {
+    return {
+        provide: NgbDatePicker,
+        useExisting: picker,
+    };
+}
+
+class NgbTimeInput {
+    constructor() {
+        this.numberOnly = inject(NumberOnly);
+        this.timePicker = inject(NgbTimePicker);
+        this.ngbTimeInput = input.required();
+        this.numberOnly._min.set(0);
+        this.numberOnly._len.set(2);
+        effect(() => {
+            const type = this.ngbTimeInput();
+            if (type === 'hours') {
+                this.numberOnly._max.set(this.timePicker.is24() ? 23 : 11);
+            }
+            else {
+                this.numberOnly._max.set(59);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbTimeInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbTimeInput, isStandalone: true, selector: "[ngbTimeInput]", inputs: { ngbTimeInput: { classPropertyName: "ngbTimeInput", publicName: "ngbTimeInput", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "tel" } }, hostDirectives: [{ directive: i1$2.NumberOnly, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbTimeInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbTimeInput]',
+                    hostDirectives: [{ directive: NumberOnly, inputs: ['value'], outputs: ['valueChange'] }],
+                    host: {
+                        type: 'tel',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class NgbTimePicker {
+    constructor() {
+        this.is24 = input(false);
+        this.value = input();
+        this.valueChange = output();
+        this.time = computed(() => {
+            return (`${padString(this.hours())}:${padString(this.minutes())}:${padString(this.seconds())}` +
+                (!this.is24() ? ` ${this.am() ? 'AM' : 'PM'}` : ''));
+        });
+        this.hours = signal('00');
+        this.minutes = signal('00');
+        this.seconds = signal('00');
+        this.am = signal(true);
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                this.parseValue(value);
+            });
+        });
+    }
+    parseValue(value) {
+        if (value) {
+            const [time, period] = value.split(' ');
+            const [hours, minutes, seconds] = time.split(':');
+            const am = period === 'AM';
+            this.hours.set(padString(hours));
+            this.minutes.set(padString(minutes));
+            this.seconds.set(padString(seconds));
+            this.am.set(am);
+        }
+    }
+    changeAm(active) {
+        this.am.set(active);
+        this.updateValue();
+    }
+    updateValue() {
+        this.notify(this.time());
+    }
+    notify(time) {
+        this.valueChange.emit(time);
+        this.onChange(time);
+        this.onTouched();
+    }
+    writeValue(value) {
+        if (value) {
+            this.parseValue(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbTimePicker, isStandalone: true, selector: "[ngbTime]", inputs: { is24: { classPropertyName: "is24", publicName: "is24", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "inline-flex gap-b items-center justify-center" }, providers: [_provide(NgbTimePicker)], ngImport: i0, template: `
+    <input ngbTimeInput="hours" [(value)]="hours" (valueChange)="updateValue()" />
+    <span>:</span>
+    <input ngbTimeInput="minutes" [(value)]="minutes" (valueChange)="updateValue()" />
+    <span>:</span>
+    <input ngbTimeInput="seconds" [(value)]="seconds" (valueChange)="updateValue()" />
+    @if (!is24()) {
+      <div class="ml-b flex gap-b2">
+        <button type="button" class="small" (click)="changeAm(true)">AM</button>
+        <button type="button" class="small" (click)="changeAm(false)">PM</button>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgbTimeInput, selector: "[ngbTimeInput]", inputs: ["ngbTimeInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbTimePicker, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ngbTime]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [_provide(NgbTimePicker)],
+                    imports: [NumberOnly, NgbTimeInput],
+                    template: `
+    <input ngbTimeInput="hours" [(value)]="hours" (valueChange)="updateValue()" />
+    <span>:</span>
+    <input ngbTimeInput="minutes" [(value)]="minutes" (valueChange)="updateValue()" />
+    <span>:</span>
+    <input ngbTimeInput="seconds" [(value)]="seconds" (valueChange)="updateValue()" />
+    @if (!is24()) {
+      <div class="ml-b flex gap-b2">
+        <button type="button" class="small" (click)="changeAm(true)">AM</button>
+        <button type="button" class="small" (click)="changeAm(false)">PM</button>
+      </div>
+    }
+  `,
+                    host: {
+                        class: 'inline-flex gap-b items-center justify-center',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+function _provide(picker) {
+    return [provideValueAccessor(picker)];
+}
+function provideTimePicker(picker) {
+    return [_provide(picker), { provide: NgbTimePicker, useExisting: picker }];
+}
+
+class CalendarBtn {
+    constructor() {
+        this.cal = inject(NgbCalendar);
+        this.ngbCalendarBtn = input.required();
+        this.disabled = computed(() => {
+            return this.ngbCalendarBtn() === 'left' ? this.cal.leftBtn() : this.cal.rightBtn();
+        });
+        this.visible = computed(() => {
+            return this.ngbCalendarBtn() === 'left' ? this.cal.first() : this.cal.last();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CalendarBtn, isStandalone: true, selector: "[ngbCalendarBtn]", inputs: { ngbCalendarBtn: { classPropertyName: "ngbCalendarBtn", publicName: "ngbCalendarBtn", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "cal.navigate(ngbCalendarBtn() === \"left\" ? -1 : 1)" }, properties: { "class": "!visible() ? \"invisible\" : \"\"", "disabled": "disabled()", "tabIndex": "disabled() ? -1 : 0" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarBtn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbCalendarBtn]',
+                    host: {
+                        type: 'button',
+                        '[class]': '!visible() ? "invisible" : ""',
+                        '(click)': 'cal.navigate(ngbCalendarBtn() === "left" ? -1 : 1)',
+                        '[disabled]': 'disabled()',
+                        '[tabIndex]': 'disabled() ? -1 : 0',
+                    },
+                }]
+        }] });
+class CalendarTitle {
+    constructor() {
+        this.cal = inject(NgbCalendar);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.0", type: CalendarTitle, isStandalone: true, selector: "[ngbCalendarTitle]", host: { attributes: { "type": "button" }, listeners: { "click": "cal.toggleView()" }, properties: { "tabIndex": "0" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbCalendarTitle]',
+                    host: {
+                        type: 'button',
+                        '(click)': 'cal.toggleView()',
+                        '[tabIndex]': '0',
+                    },
+                }]
+        }] });
+class CalendarYearBtn {
+    constructor() {
+        this.cal = inject(NgbCalendar);
+        this.ally = inject(AccessibleItem);
+        this.ngbCalYearBtn = input.required();
+        this.active = computed(() => this.ngbCalYearBtn().year === this.cal.cStartYear());
+        this.selected = computed(() => this.cal.todayDay() && this.active());
+        this.ally._ayId.set(this.cal.datePicker.ayId);
+        effect(() => {
+            this.ally._data.set(this.ngbCalYearBtn());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarYearBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CalendarYearBtn, isStandalone: true, selector: "[ngbCalYearBtn]", inputs: { ngbCalYearBtn: { classPropertyName: "ngbCalYearBtn", publicName: "ngbCalYearBtn", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "!ngbCalYearBtn().disabled && cal.selectYear(ngbCalYearBtn().year)" } }, exportAs: ["ngbCalYearBtn"], hostDirectives: [{ directive: i1$1.AccessibleItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarYearBtn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbCalYearBtn]',
+                    exportAs: 'ngbCalYearBtn',
+                    hostDirectives: [AccessibleItem],
+                    host: {
+                        type: 'button',
+                        '(click)': '!ngbCalYearBtn().disabled && cal.selectYear(ngbCalYearBtn().year)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class CalendarMonthBtn {
+    constructor() {
+        this.cal = inject(NgbCalendar);
+        this.ally = inject(AccessibleItem);
+        this.ngbCalMonthBtn = input.required();
+        this.active = computed(() => this.cal.datePicker
+            .dates()
+            .month.includes(this.ngbCalMonthBtn().value + '-' + this.cal.cStartYear()));
+        this.selected = computed(() => this.cal.todayDay() && this.cal.cStartMonth() === this.ngbCalMonthBtn().value);
+        this.ally._ayId.set(this.cal.datePicker.ayId);
+        effect(() => {
+            this.ally._data.set(this.ngbCalMonthBtn());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarMonthBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CalendarMonthBtn, isStandalone: true, selector: "[ngbCalMonthBtn]", inputs: { ngbCalMonthBtn: { classPropertyName: "ngbCalMonthBtn", publicName: "ngbCalMonthBtn", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "!ngbCalMonthBtn().disabled && cal.selectMonth(ngbCalMonthBtn())" } }, exportAs: ["ngbCalMonthBtn"], hostDirectives: [{ directive: i1$1.AccessibleItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarMonthBtn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbCalMonthBtn]',
+                    exportAs: 'ngbCalMonthBtn',
+                    hostDirectives: [AccessibleItem],
+                    host: {
+                        type: 'button',
+                        '(click)': '!ngbCalMonthBtn().disabled && cal.selectMonth(ngbCalMonthBtn())',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class CalendarDayBtn {
+    constructor() {
+        this.cal = inject(NgbCalendar);
+        this.ally = inject(AccessibleItem);
+        this.ngbCalDayBtn = input.required();
+        this.active = computed(() => this.cal.datePicker
+            .dates()
+            .day.includes(this.ngbCalDayBtn().day + '-' + this.ngbCalDayBtn().mon + '-' + this.cal.cStartYear()));
+        this.dummy = computed(() => !this.ngbCalDayBtn().current || this.ngbCalDayBtn().disabled);
+        this.selected = computed(() => {
+            const day = this.ngbCalDayBtn();
+            return ((day.day === this.cal.todayDay() && day.current) ||
+                (day.count <= this.cal.datePicker.hoveredCount() &&
+                    this.cal.datePicker.startDateCount() &&
+                    day.count >= this.cal.datePicker.startDateCount()));
+        });
+        this.ally._ayId.set(this.cal.datePicker.ayId);
+        effect(() => {
+            this.ally._data.set(this.ngbCalDayBtn());
+            this.ally._id.set(this.ngbCalDayBtn().day + '-' + this.ngbCalDayBtn().mon);
+            this.ally._skip.set(this.ngbCalDayBtn().disabled);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarDayBtn, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: CalendarDayBtn, isStandalone: true, selector: "[ngbCalDayBtn]", inputs: { ngbCalDayBtn: { classPropertyName: "ngbCalDayBtn", publicName: "ngbCalDayBtn", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "!ngbCalDayBtn().disabled && cal.selectDate(ngbCalDayBtn().day, ngbCalDayBtn().mon)" } }, exportAs: ["ngbCalDayBtn"], hostDirectives: [{ directive: i1$1.AccessibleItem }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: CalendarDayBtn, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbCalDayBtn]',
+                    exportAs: 'ngbCalDayBtn',
+                    hostDirectives: [AccessibleItem],
+                    host: {
+                        type: 'button',
+                        '(click)': '!ngbCalDayBtn().disabled && cal.selectDate(ngbCalDayBtn().day, ngbCalDayBtn().mon)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+class NgbCalendar {
+    constructor() {
+        this.dir = inject(Directionality);
+        this.datePicker = inject(NgbDatePicker);
+        this.days = viewChildren(CalendarDayBtn, {
+            read: ElementRef,
+        });
+        this.first = input(false);
+        this.last = input(false);
+        this.index = input(0);
+        this.time1 = signal(null);
+        this.time2 = signal(null);
+        this.cStartMonth = computed(() => {
+            const month = this.datePicker.startMonth() + this.index();
+            return month > 11 ? 12 - month : month;
+        });
+        this.cStartYear = computed(() => {
+            const year = this.datePicker.startYear();
+            const month = this.datePicker.startMonth();
+            const showType = this.datePicker.showType();
+            const index = this.index();
+            if (showType === 'date') {
+                return year + Math.floor((month + index) / 12);
+            }
+            else if (showType === 'month') {
+                return year + index;
+            }
+            else {
+                return year + index * 24;
+            }
+        });
+        this.selectedMonthName = computed(() => {
+            const date = this.adapter.create(this.cStartYear(), this.cStartMonth());
+            return this.adapter.longMonthNames(date);
+        });
+        this.currentYear = signal(this.cStartYear());
+        this.years = computed(() => {
+            const year = this.currentYear();
+            const filter = this.datePicker.dateFilter();
+            return Array.from({ length: 18 }, (_, i) => {
+                const y = year - (18 - 6) + i;
+                return { year: y, disabled: !filter?.(this.adapter.create(y, 0)) };
+            });
+        });
+        this.months = computed(() => {
+            const filter = this.datePicker.dateFilter();
+            return Array.from({ length: 12 }, (_, i) => {
+                const date = this.adapter.create(this.cStartYear(), i);
+                const isDisabled = !filter?.(date);
+                const name = this.adapter.longMonthNames(date);
+                return { name: name.substring(0, 3), value: i, disabled: isDisabled };
+            });
+        });
+        // computed the title based on the type
+        this.title = computed(() => {
+            const type = this.datePicker.showType();
+            const month = this.selectedMonthName();
+            const year = this.cStartYear();
+            const years = this.years();
+            const r = type === 'year'
+                ? `${years[0].year} - ${years[years.length - 1].year} `
+                : type === 'month'
+                    ? year
+                    : month + ' ' + year;
+            return r;
+        });
+        this.dayNames = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+        // get the days array based on the month and year
+        this.getDaysArray = computed(() => {
+            const month = this.cStartMonth();
+            const year = this.cStartYear();
+            const dateFilter = this.datePicker.dateFilter();
+            const numDays = this.adapter.getDate(this.adapter.create(year, month + 1, 0));
+            const daysArray = Array.from({ length: numDays }, (_, i) => {
+                const date = this.adapter.create(year, month, i + 1);
+                return {
+                    mon: month,
+                    day: i + 1,
+                    year: this.adapter.getYear(date),
+                    disabled: !dateFilter?.(date) || false,
+                    current: true,
+                    count: this.adapter.getTime(date),
+                };
+            });
+            const startDay = this.adapter.getDay(this.adapter.create(year, month));
+            // get the additional days from the previous month
+            const prevMonth = this.adapter.getDate(this.adapter.create(year, month, 0));
+            const daysArrayPrev = Array.from({ length: startDay }, (_, i) => {
+                const date = this.adapter.create(year, month - 1, prevMonth - startDay + i + 1);
+                return {
+                    mon: this.adapter.getMonth(date),
+                    day: prevMonth - startDay + i + 1,
+                    year: this.adapter.getYear(date),
+                    disabled: !dateFilter?.(date) || false,
+                    current: false,
+                    count: this.adapter.getTime(date),
+                };
+            });
+            const t = daysArrayPrev.concat(daysArray); // Padding for start day alignment
+            // get the additional days from the next month to fill the last row
+            // we need to check whether it is divisible by 7 and we have to fill only the remaining days
+            const remaining = t.length % 7 === 0 ? 0 : 7 - (t.length % 7);
+            const daysArrayNext = Array.from({ length: remaining }, (_, i) => {
+                const date = this.adapter.create(year, month + 1, i + 1);
+                return {
+                    mon: this.adapter.getMonth(date),
+                    day: i + 1,
+                    year: this.adapter.getYear(date),
+                    disabled: !dateFilter?.(date) || false,
+                    current: false,
+                    count: this.adapter.getTime(date),
+                };
+            });
+            t.push(...daysArrayNext);
+            return t;
+        });
+        // whether the left button is disabled based on the type
+        // and disabled state
+        this.leftBtn = computed(() => {
+            const type = this.datePicker.showType();
+            const year = this.cStartYear();
+            const filter = this.datePicker.dateFilter();
+            if (type === 'year') {
+                return !filter?.(this.adapter.create(this.years()[0].year - 1, 11, 31));
+            }
+            else if (type === 'month') {
+                return !filter?.(this.adapter.create(year - 1, 0));
+            }
+            else {
+                return !filter?.(this.adapter.create(year, this.cStartMonth() - 1));
+            }
+        });
+        // whether the right button is disabled based on the type
+        // and disabled state
+        this.rightBtn = computed(() => {
+            const type = this.datePicker.showType();
+            const year = this.cStartYear();
+            const filter = this.datePicker.dateFilter();
+            if (type === 'year') {
+                return !filter?.(this.adapter.create(this.years()[this.years().length - 1].year + 1, 0));
+            }
+            else if (type === 'month') {
+                return !filter?.(this.adapter.create(year + 1, 0));
+            }
+            else {
+                return !filter?.(this.adapter.create(year, this.cStartMonth() + 1));
+            }
+        });
+        this.todayDay = computed(() => {
+            const today = this.adapter.now();
+            return this.getSelectedDayOfMonth(today);
+        });
+        this.eventListeners = [];
+        if (this.datePicker.time() && this.datePicker.range()) {
+            const [first, second] = this.datePicker.selectedDates();
+            this.time1.set(first ? this.adapter.format(first, 'hh:mm a') : '');
+            this.time2.set(second ? this.adapter.format(second, 'hh:mm a') : '');
+        }
+        effect(() => {
+            const days = this.days();
+            const range = this.datePicker.range();
+            const dates = this.datePicker.selectedDates();
+            this.clearListeners();
+            if (days.length && range && dates[0] && !dates[1]) {
+                const arr = this.getDaysArray();
+                days.forEach((day, i) => {
+                    const listener = () => {
+                        this.hoverDate(arr[i].day, arr[i].mon);
+                    };
+                    day.nativeElement.addEventListener('mouseover', listener);
+                    this.eventListeners.push({ element: day.nativeElement, listener });
+                });
+            }
+        });
+    }
+    get adapter() {
+        return this.datePicker.adapter;
+    }
+    getSelectedDayOfMonth(date) {
+        const r = this.cStartMonth() === this.adapter.getMonth(date) &&
+            this.cStartYear() === this.adapter.getYear(date)
+            ? this.adapter.getDate(date)
+            : 0;
+        return r;
+    }
+    clearListeners() {
+        this.eventListeners.forEach(({ element, listener }) => {
+            element.removeEventListener('mouseover', listener);
+        });
+    }
+    hoverDate(day, month) {
+        this.datePicker.updateHoveredDate(this.adapter.create(this.cStartYear(), month, day));
+    }
+    timeChanged(index, timing) {
+        const [time, period] = timing.split(' ');
+        const [hours, min] = time.split(':').map(Number);
+        const dates = this.datePicker.selectedDates();
+        let date = dates[index];
+        date = this.adapter.set(date, period === 'PM' ? hours + 12 : hours, 'hour');
+        date = this.adapter.set(date, min, 'minute');
+        this.datePicker.selectDate(date, index);
+    }
+    selectDate(day, month) {
+        const date = this.adapter.create(this.cStartYear(), month, day);
+        this.datePicker.selectDate(date);
+    }
+    navigate(direction) {
+        let selectedYear = this.datePicker.startYear();
+        let selectedMonth = this.datePicker.startMonth();
+        const count = this.datePicker.noOfCalendar();
+        direction = direction * count;
+        const type = this.datePicker.showType();
+        if (type === 'year') {
+            selectedYear += direction * 24;
+            this.currentYear.set(selectedYear);
+        }
+        else if (type === 'month') {
+            selectedYear += direction;
+        }
+        else {
+            selectedMonth += direction;
+            if (selectedMonth < 0) {
+                selectedMonth = 12 + selectedMonth;
+                selectedYear--;
+            }
+            else if (selectedMonth > 11) {
+                selectedMonth = selectedMonth - 12;
+                selectedYear++;
+            }
+        }
+        this.datePicker.startYear.set(selectedYear);
+        this.datePicker.startMonth.set(selectedMonth);
+    }
+    selectYear(year) {
+        this.datePicker.selectYear(year);
+    }
+    selectMonth(month) {
+        this.datePicker.selectMonth(month.value, this.cStartYear());
+    }
+    toggleView() {
+        this.datePicker.toggleView();
+    }
+    ngOnDestroy() {
+        this.clearListeners();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: NgbCalendar, isStandalone: true, selector: "ngb-calendar", inputs: { first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, last: { classPropertyName: "last", publicName: "last", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "days", predicate: CalendarDayBtn, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    <div class="mb-b2 flex items-center justify-between">
+      <button ngbCalendarBtn="left">{{ dir.isRtl() ? '>' : '<' }}</button>
+      <button ngbCalendarTitle>{{ title() }}</button>
+      <button ngbCalendarBtn="right">{{ dir.isRtl() ? '<' : '>' }}</button>
+    </div>
+
+    @if (datePicker.showType() === 'year') {
+      <div class="grid grid-cols-3">
+        @for (year of years(); track year.year) {
+          <button
+            [ngbCalYearBtn]="year"
+            #yearBtn="ngbCalYearBtn"
+            class="items-center justify-center rounded-md py-b2 h-9 w-[84px] {{
+              year.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
+            }}"
+            [ngClass]="{
+              'border bg-muted-background': yearBtn.selected(),
+              '!bg-primary text-foreground': yearBtn.active(),
+            }"
+          >
+            {{ year.year }}
+          </button>
+        }
+      </div>
+    } @else if (datePicker.showType() === 'month') {
+      <div class="grid grid-cols-3">
+        @for (month of months(); track month.value) {
+          <button
+            [ngbCalMonthBtn]="month"
+            #monthBtn="ngbCalMonthBtn"
+            class="items-center justify-center rounded-md py-b2 h-9 w-[84px] {{
+              month.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
+            }}"
+            [ngClass]="{
+              'border bg-muted-background': monthBtn.selected(),
+              '!bg-primary text-foreground': monthBtn.active(),
+            }"
+          >
+            {{ month.name }}
+          </button>
+        }
+      </div>
+    } @else {
+      <div class="day-names grid grid-cols-7">
+        @for (dayName of dayNames; track dayName) {
+          <div class="p-b text-center text-muted">{{ dayName }}</div>
+        }
+      </div>
+      <div class="grid grid-cols-7 gap-y-b2">
+        @for (day of getDaysArray(); track day.day + '-' + day.mon) {
+          <button
+            #days="ngbCalDayBtn"
+            [ngbCalDayBtn]="day"
+            class="mx-auto flex h-b9 w-b9 items-center justify-center text-center {{
+              day.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
+            }}"
+            [ngClass]="{
+              'bg-muted-background': days.selected(),
+              'opacity-40': days.dummy(),
+              '!bg-primary text-foreground': days.active(),
+            }"
+          >
+            {{ day.day }}
+          </button>
+        }
+      </div>
+      @if (datePicker.time() && datePicker.range()) {
+        <div ngbTime [(value)]="time1" (valueChange)="timeChanged(0, time1()!)"></div>
+        <div ngbTime [(value)]="time2" (valueChange)="timeChanged(1, time2()!)"></div>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgbTimePicker, selector: "[ngbTime]", inputs: ["is24", "value"], outputs: ["valueChange"] }, { kind: "directive", type: CalendarBtn, selector: "[ngbCalendarBtn]", inputs: ["ngbCalendarBtn"] }, { kind: "directive", type: CalendarTitle, selector: "[ngbCalendarTitle]" }, { kind: "directive", type: CalendarYearBtn, selector: "[ngbCalYearBtn]", inputs: ["ngbCalYearBtn"], exportAs: ["ngbCalYearBtn"] }, { kind: "directive", type: CalendarMonthBtn, selector: "[ngbCalMonthBtn]", inputs: ["ngbCalMonthBtn"], exportAs: ["ngbCalMonthBtn"] }, { kind: "directive", type: CalendarDayBtn, selector: "[ngbCalDayBtn]", inputs: ["ngbCalDayBtn"], exportAs: ["ngbCalDayBtn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbCalendar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngb-calendar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgClass,
+                        NgbTimePicker,
+                        CalendarBtn,
+                        CalendarTitle,
+                        CalendarYearBtn,
+                        CalendarMonthBtn,
+                        CalendarDayBtn,
+                    ],
+                    template: `
+    <div class="mb-b2 flex items-center justify-between">
+      <button ngbCalendarBtn="left">{{ dir.isRtl() ? '>' : '<' }}</button>
+      <button ngbCalendarTitle>{{ title() }}</button>
+      <button ngbCalendarBtn="right">{{ dir.isRtl() ? '<' : '>' }}</button>
+    </div>
+
+    @if (datePicker.showType() === 'year') {
+      <div class="grid grid-cols-3">
+        @for (year of years(); track year.year) {
+          <button
+            [ngbCalYearBtn]="year"
+            #yearBtn="ngbCalYearBtn"
+            class="items-center justify-center rounded-md py-b2 h-9 w-[84px] {{
+              year.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
+            }}"
+            [ngClass]="{
+              'border bg-muted-background': yearBtn.selected(),
+              '!bg-primary text-foreground': yearBtn.active(),
+            }"
+          >
+            {{ year.year }}
+          </button>
+        }
+      </div>
+    } @else if (datePicker.showType() === 'month') {
+      <div class="grid grid-cols-3">
+        @for (month of months(); track month.value) {
+          <button
+            [ngbCalMonthBtn]="month"
+            #monthBtn="ngbCalMonthBtn"
+            class="items-center justify-center rounded-md py-b2 h-9 w-[84px] {{
+              month.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
+            }}"
+            [ngClass]="{
+              'border bg-muted-background': monthBtn.selected(),
+              '!bg-primary text-foreground': monthBtn.active(),
+            }"
+          >
+            {{ month.name }}
+          </button>
+        }
+      </div>
+    } @else {
+      <div class="day-names grid grid-cols-7">
+        @for (dayName of dayNames; track dayName) {
+          <div class="p-b text-center text-muted">{{ dayName }}</div>
+        }
+      </div>
+      <div class="grid grid-cols-7 gap-y-b2">
+        @for (day of getDaysArray(); track day.day + '-' + day.mon) {
+          <button
+            #days="ngbCalDayBtn"
+            [ngbCalDayBtn]="day"
+            class="mx-auto flex h-b9 w-b9 items-center justify-center text-center {{
+              day.disabled ? 'cursor-default opacity-50' : 'hover:bg-muted-background'
+            }}"
+            [ngClass]="{
+              'bg-muted-background': days.selected(),
+              'opacity-40': days.dummy(),
+              '!bg-primary text-foreground': days.active(),
+            }"
+          >
+            {{ day.day }}
+          </button>
+        }
+      </div>
+      @if (datePicker.time() && datePicker.range()) {
+        <div ngbTime [(value)]="time1" (valueChange)="timeChanged(0, time1()!)"></div>
+        <div ngbTime [(value)]="time2" (valueChange)="timeChanged(1, time2()!)"></div>
+      }
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+function provideCalendar(cal) {
+    return {
+        provide: NgbCalendar,
+        useExisting: cal,
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CalendarBtn, CalendarDayBtn, CalendarMonthBtn, CalendarTitle, CalendarYearBtn, DatepickerGroup, NgbCalendar, NgbDateAdapter, NgbDatePicker, NgbDatepickerTrigger, NgbNativeDateAdapter, NgbTimeInput, NgbTimePicker, injectNgbDateAdapter, provideCalendar, provideDatePicker, provideTimePicker, registerDatePicker };
+//# sourceMappingURL=ngbase-adk-datepicker.mjs.map