@cdek-it/angular-ui-kit 0.0.2 → 0.2.6-test

package/fesm2022/cdek-it-angular-ui-kit-components-date-picker.mjs

@@ -0,0 +1,640 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DatePicker } from 'primeng/datepicker';
+import { InputText } from 'primeng/inputtext';
+import { PrimeTemplate } from 'primeng/api';
+import { Select } from 'primeng/select';
+import { Button } from 'primeng/button';
+
+const MONTHS = [
+    { name: 'Январь', value: 0 },
+    { name: 'Февраль', value: 1 },
+    { name: 'Март', value: 2 },
+    { name: 'Апрель', value: 3 },
+    { name: 'Май', value: 4 },
+    { name: 'Июнь', value: 5 },
+    { name: 'Июль', value: 6 },
+    { name: 'Август', value: 7 },
+    { name: 'Сентябрь', value: 8 },
+    { name: 'Октябрь', value: 9 },
+    { name: 'Ноябрь', value: 10 },
+    { name: 'Декабрь', value: 11 },
+];
+const YEARS = (() => {
+    const result = [];
+    for (let y = 1990; y <= 2035; y++) {
+        result.push({ name: String(y), value: y });
+    }
+    return result;
+})();
+class ExtraDatePickerComponent {
+    cdr = inject(ChangeDetectorRef);
+    dpRef;
+    months = MONTHS;
+    years = YEARS;
+    dpCurrentMonth = new Date().getMonth();
+    dpCurrentYear = new Date().getFullYear();
+    hourInput = '00';
+    minuteInput = '00';
+    modelValue = null;
+    disabled = false;
+    dateFormat = 'dd.mm.yy';
+    selectionMode = 'single';
+    size = 'medium';
+    showIcon = true;
+    iconDisplay = 'input';
+    inline = false;
+    showButtonBar = false;
+    showTime = false;
+    hourFormat = '24';
+    showClear = false;
+    placeholder = undefined;
+    readonly = false;
+    invalid = false;
+    minDate = undefined;
+    maxDate = undefined;
+    view = 'date';
+    showOtherMonths = true;
+    selectOtherMonths = false;
+    onSelect = new EventEmitter();
+    onMonthChange = new EventEmitter();
+    onYearChange = new EventEmitter();
+    onClear = new EventEmitter();
+    get primeSize() {
+        if (this.size === 'small')
+            return 'small';
+        if (this.size === 'large' || this.size === 'xlarge')
+            return 'large';
+        return undefined;
+    }
+    ngAfterViewInit() {
+        // Sync initial month/year for inline mode (panel renders immediately)
+        if (this.inline) {
+            this.syncCurrentDate();
+        }
+    }
+    syncCurrentDate() {
+        if (this.dpRef) {
+            this.dpCurrentMonth = this.dpRef.currentMonth;
+            this.dpCurrentYear = this.dpRef.currentYear;
+        }
+    }
+    onMonthChangeHandler(event) {
+        this.dpCurrentMonth = event.month ? event.month - 1 : new Date().getMonth();
+        this.dpCurrentYear = event.year || new Date().getFullYear();
+        this.onMonthChange.emit(event);
+    }
+    onYearChangeHandler(event) {
+        this.dpCurrentMonth = event.month ? event.month - 1 : new Date().getMonth();
+        this.dpCurrentYear = event.year || new Date().getFullYear();
+        this.onYearChange.emit(event);
+    }
+    onMonthSelect(month) {
+        this.dpCurrentMonth = month;
+        this.dpRef?.createMonths(month, this.dpCurrentYear);
+    }
+    onYearSelect(year) {
+        this.dpCurrentYear = year;
+        this.dpRef?.createMonths(this.dpCurrentMonth, year);
+    }
+    navPrev(event) {
+        this.dpRef?.navBackward(event);
+    }
+    navNext(event) {
+        this.dpRef?.navForward(event);
+    }
+    onValueChange(val) {
+        this.modelValue = val;
+        this._onChange(val);
+        if (this.inline) {
+            this._onTouched();
+        }
+        if (this.selectionMode === 'range' && Array.isArray(val)) {
+            if (val[1]) {
+                this.rangeStart = null;
+                if (!this.inline) {
+                    this.dpRef.hideOverlay();
+                }
+            }
+            else {
+                this.rangeStart = val[0] ?? null;
+            }
+        }
+    }
+    onHourFieldInput(event) {
+        const input = event.target;
+        const cleaned = input.value.replace(/\D/g, '').slice(0, 2);
+        if (input.value !== cleaned) {
+            input.value = cleaned;
+        }
+        this.hourInput = cleaned;
+        if (cleaned.length === 2) {
+            const parsed = parseInt(cleaned, 10);
+            if (!isNaN(parsed)) {
+                this.dpRef.currentHour = Math.min(23, Math.max(0, parsed));
+            }
+        }
+    }
+    onHourFieldBlur() {
+        const parsed = parseInt(this.hourInput, 10);
+        const clamped = isNaN(parsed) ? 0 : Math.min(23, Math.max(0, parsed));
+        this.dpRef.currentHour = clamped;
+        this.hourInput = String(clamped).padStart(2, '0');
+        this.dpRef.updateTime();
+        this.cdr.markForCheck();
+    }
+    onMinuteFieldInput(event) {
+        const input = event.target;
+        const cleaned = input.value.replace(/\D/g, '').slice(0, 2);
+        if (input.value !== cleaned) {
+            input.value = cleaned;
+        }
+        this.minuteInput = cleaned;
+        if (cleaned.length === 2) {
+            const parsed = parseInt(cleaned, 10);
+            if (!isNaN(parsed)) {
+                this.dpRef.currentMinute = Math.min(59, Math.max(0, parsed));
+            }
+        }
+    }
+    onMinuteFieldBlur() {
+        const parsed = parseInt(this.minuteInput, 10);
+        const clamped = isNaN(parsed) ? 0 : Math.min(59, Math.max(0, parsed));
+        this.dpRef.currentMinute = clamped;
+        this.minuteInput = String(clamped).padStart(2, '0');
+        this.dpRef.updateTime();
+        this.cdr.markForCheck();
+    }
+    syncTimeInputs() {
+        if (!this.dpRef)
+            return;
+        const h = this.dpRef.currentHour ?? 0;
+        const m = this.dpRef.currentMinute ?? 0;
+        this.hourInput = String(h).padStart(2, '0');
+        this.minuteInput = String(m).padStart(2, '0');
+        this.cdr.markForCheck();
+    }
+    selectOverlayGuard = null;
+    attachSelectOverlayGuard() {
+        if (this.selectOverlayGuard)
+            return;
+        this.selectOverlayGuard = (e) => {
+            const target = e.target;
+            if (target && target.closest('.p-select-overlay')) {
+                e.stopPropagation();
+            }
+        };
+        document.addEventListener('mousedown', this.selectOverlayGuard, true);
+    }
+    detachSelectOverlayGuard() {
+        if (!this.selectOverlayGuard)
+            return;
+        document.removeEventListener('mousedown', this.selectOverlayGuard, true);
+        this.selectOverlayGuard = null;
+    }
+    // ── Range hover preview ──────────────────────────────────────────────────
+    panelMouseoverHandler = null;
+    panelMouseleaveHandler = null;
+    rangeStart = null;
+    onPanelShow() {
+        this.syncCurrentDate();
+        this.syncTimeInputs();
+        this.attachSelectOverlayGuard();
+        if (this.selectionMode === 'range') {
+            this.attachRangePreview();
+        }
+    }
+    onPanelClose() {
+        this.detachSelectOverlayGuard();
+        this.detachRangePreview();
+        this._onTouched();
+    }
+    onDateSelected(event) {
+        this.onSelect.emit(event);
+    }
+    // ── ControlValueAccessor ──────────────────────────────────────────────────
+    _onChange = () => { };
+    _onTouched = () => { };
+    writeValue(value) {
+        this.modelValue = value ?? null;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        this.detachRangePreview();
+        this.detachSelectOverlayGuard();
+    }
+    attachRangePreview() {
+        this.removeRangeListeners();
+        setTimeout(() => {
+            const panel = this.getPanelElement();
+            if (!panel)
+                return;
+            this.panelMouseoverHandler = (e) => {
+                if (!this.rangeStart)
+                    return;
+                const dayEl = e.target.closest('.p-datepicker-day');
+                if (!dayEl)
+                    return;
+                const dateKey = dayEl.getAttribute('data-date');
+                if (!dateKey)
+                    return;
+                const hovered = this.parseDateKey(dateKey);
+                if (!hovered)
+                    return;
+                this.clearHoverPreview(panel);
+                this.applyRangePreview(panel, this.rangeStart, hovered);
+            };
+            this.panelMouseleaveHandler = () => {
+                this.clearHoverPreview(panel);
+            };
+            panel.addEventListener('mouseover', this.panelMouseoverHandler);
+            panel.addEventListener('mouseleave', this.panelMouseleaveHandler);
+        });
+    }
+    removeRangeListeners() {
+        const panel = this.getPanelElement();
+        if (panel) {
+            if (this.panelMouseoverHandler) {
+                panel.removeEventListener('mouseover', this.panelMouseoverHandler);
+            }
+            if (this.panelMouseleaveHandler) {
+                panel.removeEventListener('mouseleave', this.panelMouseleaveHandler);
+            }
+        }
+        this.panelMouseoverHandler = null;
+        this.panelMouseleaveHandler = null;
+    }
+    detachRangePreview() {
+        const panel = this.getPanelElement();
+        if (panel)
+            this.clearHoverPreview(panel);
+        this.removeRangeListeners();
+    }
+    getPanelElement() {
+        return this.dpRef?.content?.nativeElement ?? document.querySelector('.p-datepicker-panel');
+    }
+    parseDateKey(key) {
+        const parts = key.split('-').map(Number);
+        if (parts.length !== 3 || parts.some(isNaN))
+            return null;
+        return new Date(parts[0], parts[1], parts[2]);
+    }
+    applyRangePreview(panel, start, end) {
+        const [from, to] = start <= end ? [start, end] : [end, start];
+        const days = panel.querySelectorAll('.p-datepicker-day[data-date]');
+        days.forEach((el) => {
+            const key = el.getAttribute('data-date');
+            if (!key)
+                return;
+            const d = this.parseDateKey(key);
+            if (!d)
+                return;
+            const inRange = d > from && d < to;
+            const isEdge = d.getTime() === from.getTime() || d.getTime() === to.getTime();
+            if (inRange) {
+                el.classList.add('p-datepicker-day-selected-range');
+                el.setAttribute('data-hover-preview', '');
+            }
+            if (isEdge && !el.classList.contains('p-datepicker-day-selected')) {
+                el.classList.add('p-datepicker-day-selected');
+                el.setAttribute('data-hover-preview', '');
+            }
+        });
+    }
+    clearHoverPreview(panel) {
+        panel.querySelectorAll('[data-hover-preview]').forEach((el) => {
+            el.classList.remove('p-datepicker-day-selected-range', 'p-datepicker-day-selected');
+            el.removeAttribute('data-hover-preview');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExtraDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ExtraDatePickerComponent, isStandalone: true, selector: "extra-date-picker", inputs: { dateFormat: "dateFormat", selectionMode: "selectionMode", size: "size", showIcon: "showIcon", iconDisplay: "iconDisplay", inline: "inline", showButtonBar: "showButtonBar", showTime: "showTime", hourFormat: "hourFormat", showClear: "showClear", placeholder: "placeholder", readonly: "readonly", invalid: "invalid", minDate: "minDate", maxDate: "maxDate", view: "view", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths" }, outputs: { onSelect: "onSelect", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClear: "onClear" }, host: { styleAttribute: "display: inline-flex" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ExtraDatePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "dpRef", first: true, predicate: ["dpRef"], descendants: true }], ngImport: i0, template: `
+    <p-datepicker
+      #dpRef
+      [ngModel]="modelValue"
+      (ngModelChange)="onValueChange($event)"
+      [dateFormat]="dateFormat"
+      [selectionMode]="selectionMode"
+      [showIcon]="showIcon"
+      [iconDisplay]="iconDisplay"
+      [inline]="inline"
+      [showButtonBar]="showButtonBar"
+      [showTime]="showTime"
+      [hourFormat]="hourFormat"
+      [showClear]="showClear"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [readonlyInput]="readonly"
+      [invalid]="invalid"
+      [size]="primeSize"
+      [inputStyleClass]="size === 'xlarge' ? 'p-inputtext-xlg' : ''"
+      [panelStyle]="{ minWidth: 'fit-content' }"
+      [appendTo]="inline ? undefined : 'body'"
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [view]="view"
+      [hideOnDateTimeSelect]="false"
+      [showOtherMonths]="showOtherMonths"
+      [selectOtherMonths]="selectOtherMonths"
+      (onShow)="onPanelShow()"
+      (onClose)="onPanelClose()"
+      (onMonthChange)="onMonthChangeHandler($event)"
+      (onYearChange)="onYearChangeHandler($event)"
+      (onSelect)="onDateSelected($event)"
+      (onClear)="onClear.emit($event)"
+    >
+      <ng-template pTemplate="header">
+        <div class="p-datepicker-header p-datepicker-custom-header">
+          <p-button severity="secondary" [rounded]="true" [text]="true" (onClick)="navPrev($event)">
+            <ng-template pTemplate="icon">
+              <i class="ti ti-chevron-left" aria-hidden="true"></i>
+            </ng-template>
+          </p-button>
+          <div class="p-datepicker-title">
+            <p-select
+              appendTo="body"
+              [options]="months"
+              optionLabel="name"
+              optionValue="value"
+              [ngModel]="dpCurrentMonth"
+              (ngModelChange)="onMonthSelect($event)"
+              class="p-datepicker-month-select"
+            ></p-select>
+            <p-select
+              appendTo="body"
+              [options]="years"
+              optionLabel="name"
+              optionValue="value"
+              [ngModel]="dpCurrentYear"
+              (ngModelChange)="onYearSelect($event)"
+              class="p-datepicker-year-select"
+            ></p-select>
+          </div>
+          <p-button severity="secondary" [rounded]="true" [text]="true" (onClick)="navNext($event)">
+            <ng-template pTemplate="icon">
+              <i class="ti ti-chevron-right" aria-hidden="true"></i>
+            </ng-template>
+          </p-button>
+        </div>
+      </ng-template>
+
+      <ng-template pTemplate="inputicon" let-clickCallBack="clickCallBack">
+        <i class="ti ti-calendar-month p-datepicker-input-icon cursor-pointer" (click)="clickCallBack($event)"></i>
+      </ng-template>
+      <ng-template pTemplate="triggericon">
+        <i class="ti ti-calendar-month"></i>
+      </ng-template>
+      @if (showClear) {
+        <ng-template pTemplate="clearicon">
+          <i class="ti ti-x"></i>
+        </ng-template>
+      }
+      @if (showTime) {
+        <ng-template pTemplate="footer">
+          <div class="p-datepicker-time-picker p-datepicker-time-picker-custom" (keydown)="$event.stopPropagation()">
+            <div class="p-datepicker-time-field">
+              <label class="p-datepicker-time-label">Часы</label>
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                pattern="[0-9]{2}"
+                pInputText
+                class="p-datepicker-time-input"
+                [value]="hourInput"
+                (input)="onHourFieldInput($event)"
+                (blur)="onHourFieldBlur()"
+              />
+            </div>
+            <div class="p-datepicker-separator">
+              <span>:</span>
+            </div>
+            <div class="p-datepicker-time-field">
+              <label class="p-datepicker-time-label">Минуты</label>
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                pattern="[0-9]{2}"
+                pInputText
+                class="p-datepicker-time-input"
+                [value]="minuteInput"
+                (input)="onMinuteFieldInput($event)"
+                (blur)="onMinuteFieldBlur()"
+              />
+            </div>
+          </div>
+        </ng-template>
+      }
+    </p-datepicker>
+  `, isInline: true, dependencies: [{ kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ExtraDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'extra-date-picker',
+                    host: { style: 'display: inline-flex' },
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ExtraDatePickerComponent),
+                            multi: true
+                        }
+                    ],
+                    imports: [DatePicker, InputText, PrimeTemplate, FormsModule, Select, Button],
+                    template: `
+    <p-datepicker
+      #dpRef
+      [ngModel]="modelValue"
+      (ngModelChange)="onValueChange($event)"
+      [dateFormat]="dateFormat"
+      [selectionMode]="selectionMode"
+      [showIcon]="showIcon"
+      [iconDisplay]="iconDisplay"
+      [inline]="inline"
+      [showButtonBar]="showButtonBar"
+      [showTime]="showTime"
+      [hourFormat]="hourFormat"
+      [showClear]="showClear"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [readonlyInput]="readonly"
+      [invalid]="invalid"
+      [size]="primeSize"
+      [inputStyleClass]="size === 'xlarge' ? 'p-inputtext-xlg' : ''"
+      [panelStyle]="{ minWidth: 'fit-content' }"
+      [appendTo]="inline ? undefined : 'body'"
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [view]="view"
+      [hideOnDateTimeSelect]="false"
+      [showOtherMonths]="showOtherMonths"
+      [selectOtherMonths]="selectOtherMonths"
+      (onShow)="onPanelShow()"
+      (onClose)="onPanelClose()"
+      (onMonthChange)="onMonthChangeHandler($event)"
+      (onYearChange)="onYearChangeHandler($event)"
+      (onSelect)="onDateSelected($event)"
+      (onClear)="onClear.emit($event)"
+    >
+      <ng-template pTemplate="header">
+        <div class="p-datepicker-header p-datepicker-custom-header">
+          <p-button severity="secondary" [rounded]="true" [text]="true" (onClick)="navPrev($event)">
+            <ng-template pTemplate="icon">
+              <i class="ti ti-chevron-left" aria-hidden="true"></i>
+            </ng-template>
+          </p-button>
+          <div class="p-datepicker-title">
+            <p-select
+              appendTo="body"
+              [options]="months"
+              optionLabel="name"
+              optionValue="value"
+              [ngModel]="dpCurrentMonth"
+              (ngModelChange)="onMonthSelect($event)"
+              class="p-datepicker-month-select"
+            ></p-select>
+            <p-select
+              appendTo="body"
+              [options]="years"
+              optionLabel="name"
+              optionValue="value"
+              [ngModel]="dpCurrentYear"
+              (ngModelChange)="onYearSelect($event)"
+              class="p-datepicker-year-select"
+            ></p-select>
+          </div>
+          <p-button severity="secondary" [rounded]="true" [text]="true" (onClick)="navNext($event)">
+            <ng-template pTemplate="icon">
+              <i class="ti ti-chevron-right" aria-hidden="true"></i>
+            </ng-template>
+          </p-button>
+        </div>
+      </ng-template>
+
+      <ng-template pTemplate="inputicon" let-clickCallBack="clickCallBack">
+        <i class="ti ti-calendar-month p-datepicker-input-icon cursor-pointer" (click)="clickCallBack($event)"></i>
+      </ng-template>
+      <ng-template pTemplate="triggericon">
+        <i class="ti ti-calendar-month"></i>
+      </ng-template>
+      @if (showClear) {
+        <ng-template pTemplate="clearicon">
+          <i class="ti ti-x"></i>
+        </ng-template>
+      }
+      @if (showTime) {
+        <ng-template pTemplate="footer">
+          <div class="p-datepicker-time-picker p-datepicker-time-picker-custom" (keydown)="$event.stopPropagation()">
+            <div class="p-datepicker-time-field">
+              <label class="p-datepicker-time-label">Часы</label>
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                pattern="[0-9]{2}"
+                pInputText
+                class="p-datepicker-time-input"
+                [value]="hourInput"
+                (input)="onHourFieldInput($event)"
+                (blur)="onHourFieldBlur()"
+              />
+            </div>
+            <div class="p-datepicker-separator">
+              <span>:</span>
+            </div>
+            <div class="p-datepicker-time-field">
+              <label class="p-datepicker-time-label">Минуты</label>
+              <input
+                type="text"
+                inputmode="numeric"
+                maxlength="2"
+                pattern="[0-9]{2}"
+                pInputText
+                class="p-datepicker-time-input"
+                [value]="minuteInput"
+                (input)="onMinuteFieldInput($event)"
+                (blur)="onMinuteFieldBlur()"
+              />
+            </div>
+          </div>
+        </ng-template>
+      }
+    </p-datepicker>
+  `
+                }]
+        }], propDecorators: { dpRef: [{
+                type: ViewChild,
+                args: ['dpRef']
+            }], dateFormat: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], iconDisplay: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], showButtonBar: [{
+                type: Input
+            }], showTime: [{
+                type: Input
+            }], hourFormat: [{
+                type: Input
+            }], showClear: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], showOtherMonths: [{
+                type: Input
+            }], selectOtherMonths: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], onMonthChange: [{
+                type: Output
+            }], onYearChange: [{
+                type: Output
+            }], onClear: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ExtraDatePickerComponent };
+//# sourceMappingURL=cdek-it-angular-ui-kit-components-date-picker.mjs.map