@ngbase/adk 0.1.1 → 0.1.3

package/fesm2022/ngbase-adk-datepicker.mjs

@@ -1,15 +1,15 @@
-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 { InjectionToken, inject, ElementRef, input, effect, Directive, Injector, booleanAttribute, computed, afterNextRender, viewChild, model, signal, viewChildren, output, untracked } 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 { uniqueId, 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';
+import { NgbSelectTarget } from '@ngbase/adk/select';
 
 const NgbDateAdapter = new InjectionToken('mat-date-formats');
 function injectNgbDateAdapter() {
@@ -115,54 +115,85 @@ 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 NgbEndDate {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.inputS = inject(InputBase);
+        this.ngbEndDate = input.required();
+        this.hidden = false;
+        effect(() => {
+            this.ngbEndDate().endDate = this;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbEndDate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.0", type: NgbEndDate, isStandalone: true, selector: "[ngbEndDate]", inputs: { ngbEndDate: { classPropertyName: "ngbEndDate", publicName: "ngbEndDate", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "open()" } }, exportAs: ["ngbEndDate"], hostDirectives: [{ directive: i1.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbEndDate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbEndDate]',
+                    exportAs: 'ngbEndDate',
+                    hostDirectives: [{ directive: InputBase, inputs: ['value'], outputs: ['valueChange'] }],
+                    host: {
+                        '(click)': 'open()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
 class NgbDatepickerTrigger {
     constructor() {
         this.el = inject(ElementRef);
         this.inputS = inject(InputBase);
+        this.target = inject(NgbSelectTarget, { optional: true });
         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.noOfCalendars = input(1, { transform: (v) => Math.max(1, Number(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);
+        this.displayFormat = computed(() => {
+            return this.format() || (this.time() ? DEFAULT_TIME_FORMAT : DEFAULT_FORMAT);
+        });
+        this.inputValue = computed(() => this.getInputValue());
         effect(() => {
-            const value = this.getInputValue();
+            const value = this.inputValue();
             this.updateField(value);
         });
     }
     getInputValue() {
         const v = this.inputS.value();
+        const e = this.endDate?.inputS.value();
         let value = [];
         if (v) {
-            value = this.range() ? v : [v];
+            value = Array.isArray(v) ? v : [v];
+        }
+        if (e) {
+            value[1] = e;
         }
         return value.map(x => this.adapter.parse(x));
     }
     open() {
+        const target = this.target?.target() || this.el.nativeElement;
         const data = {
-            value: this.getInputValue(),
+            target,
+            value: this.inputValue,
             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,
+            target,
             position: 'bl',
             data,
             width: 'none',
@@ -173,40 +204,53 @@ class NgbDatepickerTrigger {
         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) {
+            if (filtered.length < 2) {
                 return;
             }
-            this.inputS?.setValue(formatDate);
+            if (this.endDate) {
+                this.inputS.setValue(formatDate[0], true);
+                this.endDate.inputS.setValue(formatDate[1], true);
+            }
+            else {
+                this.inputS?.setValue(formatDate, true);
+            }
         }
         else if (filtered.length) {
-            this.inputS?.setValue(formatDate[0]);
+            this.inputS?.setValue(formatDate[0], true);
         }
         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 });
+        const d = filtered.map(x => this.adapter.format(x, this.displayFormat())).filter(x => x);
+        afterNextRender(() => {
+            if (this.endDate && !this.endDate.hidden) {
+                this.el.nativeElement.value = d[0] || '';
+                this.endDate.el.nativeElement.value = d[1] || '';
+            }
+            else {
+                this.el.nativeElement.value = d.join(' - ');
+            }
+        }, { 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 }); }
+    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()" } }, exportAs: ["ngbDatepickerTrigger"], hostDirectives: [{ directive: i1.InputBase, inputs: ["value", "value"], outputs: ["valueChange", "valueChange"] }], 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],
+                    hostDirectives: [{ directive: InputBase, inputs: ['value'], outputs: ['valueChange'] }],
                     host: {
-                        class: 'cursor-pointer hover:bg-muted-background',
                         '(click)': 'open()',
                         readonly: 'true',
                     },
                 }]
         }], ctorParameters: () => [] });
+function aliasDatePickerTrigger(trigger) {
+    return { provide: NgbDatepickerTrigger, useExisting: trigger };
+}
 function registerDatePicker(datePicker) {
     return {
         provide: DatePicker,
@@ -235,6 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
         }], ctorParameters: () => [] });
 class NgbDatePicker {
     constructor() {
+        this.injector = inject(Injector);
         this.datepickerTrigger = inject(NgbDatepickerTrigger, {
             optional: true,
         });
@@ -282,11 +327,16 @@ class NgbDatePicker {
             return v;
         });
         this.ayId = uniqueId();
-        this.init();
+        effect(() => {
+            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));
+        const v = this.data
+            ?.value()
+            ?.filter(x => x)
+            .map(x => this.adapter.parse(x));
         if (Array.isArray(v) && v.length) {
             let date;
             let dates;
@@ -390,183 +440,22 @@ class NgbDatePicker {
         }
         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-2 pb-2">
-        <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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.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" }, viewQueries: [{ propertyName: "allyGroup", first: true, predicate: AccessibleGroup, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbDatePicker, decorators: [{
-            type: Component,
+            type: Directive,
             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-2 pb-2">
-        <ng-container *ngTemplateOutlet="template()" />
-      </div>
-    }
-  `,
-                    host: {
-                        class: 'inline-block',
-                    },
                 }]
         }], ctorParameters: () => [] });
-function provideDatePicker(picker) {
+function aliasDatePicker(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-1 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-1 flex gap-2">
-        <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-1 flex gap-2">
-        <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-1 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);
@@ -951,180 +840,128 @@ class NgbCalendar {
     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-2 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-2 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-2 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-1 text-center text-muted">{{ dayName }}</div>
-        }
-      </div>
-      <div class="grid grid-cols-7 gap-y-2">
-        @for (day of getDaysArray(); track day.day + '-' + day.mon) {
-          <button
-            #days="ngbCalDayBtn"
-            [ngbCalDayBtn]="day"
-            class="mx-auto flex h-9 w-9 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbCalendar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbCalendar, decorators: [{
-            type: Component,
+            type: Directive,
             args: [{
                     selector: 'ngb-calendar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [
-                        NgClass,
-                        NgbTimePicker,
-                        CalendarBtn,
-                        CalendarTitle,
-                        CalendarYearBtn,
-                        CalendarMonthBtn,
-                        CalendarDayBtn,
-                    ],
-                    template: `
-    <div class="mb-2 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-2 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-2 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-1 text-center text-muted">{{ dayName }}</div>
-        }
-      </div>
-      <div class="grid grid-cols-7 gap-y-2">
-        @for (day of getDaysArray(); track day.day + '-' + day.mon) {
-          <button
-            #days="ngbCalDayBtn"
-            [ngbCalDayBtn]="day"
-            class="mx-auto flex h-9 w-9 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) {
+function aliasCalendar(cal) {
     return {
         provide: NgbCalendar,
         useExisting: cal,
     };
 }
 
+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 = '00'] = 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.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.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" }, providers: [_provide(NgbTimePicker)], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: NgbTimePicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngbTime]',
+                    providers: [_provide(NgbTimePicker)],
+                }]
+        }], ctorParameters: () => [] });
+function _provide(picker) {
+    return [provideValueAccessor(picker)];
+}
+function aliasTimePicker(picker) {
+    return [_provide(picker), { provide: NgbTimePicker, useExisting: picker }];
+}
+
 /**
  * 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 };
+export { CalendarBtn, CalendarDayBtn, CalendarMonthBtn, CalendarTitle, CalendarYearBtn, DatepickerGroup, NgbCalendar, NgbDateAdapter, NgbDatePicker, NgbDatepickerTrigger, NgbEndDate, NgbNativeDateAdapter, NgbTimeInput, NgbTimePicker, aliasCalendar, aliasDatePicker, aliasDatePickerTrigger, aliasTimePicker, injectNgbDateAdapter, registerDatePicker };
 //# sourceMappingURL=ngbase-adk-datepicker.mjs.map