quang 19.0.19-2

package/fesm2022/quang-components-date.mjs

@@ -0,0 +1,392 @@
+import { NgIf, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, computed, signal, inject, effect, forwardRef, Optional, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TranslocoPipe } from '@jsverse/transloco';
+import AirDatepicker from 'air-datepicker';
+import en from 'air-datepicker/locale/en';
+import fr from 'air-datepicker/locale/fr';
+import it from 'air-datepicker/locale/it';
+import { isMatch, parse, format } from 'date-fns';
+import { QuangTranslationService } from 'quang/translation';
+import { fromEvent, debounceTime } from 'rxjs';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+/**
+ * Datepicker component based on {@link https://air-datepicker.com/docs}.
+ *
+ * @usageNotes
+ * 1. It can be used to only display the `timepicker` component by setting
+ * `[showOnlyTimepicker]="true"`
+ *
+ * 2. `datepickerOptions` can be used to override the default options of the component to get full access to all the
+ * possible customizations that Air Datepicker provides. See {@link https://air-datepicker.com/examples}
+ * Please note that overriding the `container` and `locale` properties and the `onSelect` and `onHide`
+ * events might cause the component to malfunction.
+ */
+class QuangDateComponent extends QuangBaseComponent {
+    constructor() {
+        super();
+        /**
+         * Format to use to show on the input field.
+         * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}
+         * Default: dd/MM/yyyy
+         * @default dd/MM/yyyy
+         */
+        this.dateFormat = input('dd/MM/yyyy');
+        /**
+         * Format to use to show on the time inside the input field.
+         * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}
+         * Default: HH:mm
+         * @default HH:mm
+         */
+        this.timeFormat = input('HH:mm');
+        /**
+         * Calendar locale, if not provided the component will try to use the one provided in {@link QuangTranslationService}
+         * if the language is not set in {@link QuangTranslationService} it will use the browser language
+         * Use this parameter only to override default behavior
+         */
+        this.activeLanguageOverride = input(undefined);
+        /**
+         * If true enable the timepicker inside the calendar
+         */
+        this.timepicker = input(false);
+        /**
+         * The message to show inside the input if the date is invalid
+         */
+        this.invalidDateMessage = input('');
+        this.showOnlyTimepicker = input(false);
+        this.minHour = input(0);
+        this.maxHour = input(24);
+        this.minMinute = input(0);
+        this.maxMinute = input(59);
+        this.minDate = input(undefined);
+        this.maxDate = input(undefined);
+        this.showInline = input(false);
+        this.calendarClasses = input('');
+        this.buttonClass = input('');
+        this.datepickerOptions = input(undefined);
+        this._inputForDate = viewChild('inputForDate');
+        this.contentTemplate = viewChild.required('calendarButton');
+        this.hasNoContent = computed(() => this.contentTemplate()?.nativeElement.children.length === 0);
+        this._quangTranslationService = signal(inject(QuangTranslationService));
+        this._quangTranslationActiveLang = computed(() => this._quangTranslationService()?.activeLang() ?? null);
+        this.multipleDatesSeparator = input(' - ');
+        this.rangeSelection = input(false);
+        this._activeLanguage = computed(() => {
+            if (this.activeLanguageOverride()) {
+                return this.activeLanguageOverride();
+            }
+            if (this._quangTranslationService()) {
+                return this._quangTranslationActiveLang();
+            }
+            return navigator.language;
+        });
+        this._airDatepickerInstance = signal(undefined);
+        this.searchTextDebounce = input(500);
+        this.targetPosition = signal('bottom left');
+        this._generateAirDatepickerEffect = effect(() => {
+            this.setupCalendar();
+        }, { allowSignalWrites: true });
+        this.valueFormat = computed(() => this.showOnlyTimepicker()
+            ? this.timeFormat()
+            : this.dateFormat() + (this.showTimepicker() ? ` ${this.timeFormat()}` : ''));
+        this.inputValueString = computed(() => this.formatDate(this._value()));
+        this.showTimepicker = computed(() => !this.rangeSelection() && (this.timepicker() || this.showOnlyTimepicker()));
+        this.isMouseInsideCalendar = signal(false);
+        this.isMouseOutsideCalendar = computed(() => !this.isMouseInsideCalendar());
+        fromEvent(document, 'scroll', { capture: true })
+            .pipe(takeUntilDestroyed(), debounceTime(250))
+            .subscribe(() => {
+            if (this._airDatepickerInstance()?.visible) {
+                this.setupCalendar();
+            }
+        });
+    }
+    setupCalendar() {
+        if (this._inputForDate()?.nativeElement) {
+            const currentValue = this._value();
+            let targetDate;
+            if (currentValue && typeof currentValue === 'string') {
+                targetDate = [currentValue];
+            }
+            else if (currentValue && typeof currentValue === 'object') {
+                targetDate = [];
+                if (currentValue.dateFrom) {
+                    targetDate.push(currentValue.dateFrom);
+                }
+                if (currentValue.dateTo) {
+                    targetDate.push(currentValue.dateTo);
+                }
+            }
+            this.setCalendarPosition();
+            const airDatepickerOpts = {
+                autoClose: true,
+                classes: this.calendarClasses(),
+                dateFormat: this.dateFormat(),
+                inline: this.showInline(),
+                isMobile: false,
+                multipleDatesSeparator: this.multipleDatesSeparator(),
+                range: this.rangeSelection(),
+                timepicker: this.showTimepicker(),
+                onlyTimepicker: this.showOnlyTimepicker(),
+                timeFormat: this.timeFormat(),
+                minHours: this.minHour(),
+                maxHours: this.maxHour(),
+                minMinutes: this.minMinute(),
+                maxMinutes: this.maxMinute(),
+                minDate: this.minDate(),
+                maxDate: this.maxDate(),
+                toggleSelected: false,
+                multipleDates: false,
+                selectedDates: targetDate,
+                position: this.targetPosition(),
+                locale: this.getLocale(),
+                onSelect: ({ date }) => {
+                    if (!Array.isArray(date)) {
+                        let selectTargetDate = date;
+                        if (!this.showTimepicker()) {
+                            selectTargetDate = this.dateToUtc(date);
+                        }
+                        this.onChangedHandler(selectTargetDate.toISOString());
+                    }
+                    if (this.showInline()) {
+                        this.onHideCalendar();
+                    }
+                },
+                onHide: (isAnimationComplete) => {
+                    if (isAnimationComplete) {
+                        this.onHideCalendar();
+                    }
+                },
+                ...(this.datepickerOptions() ?? {}),
+                onShow: (isAnimationComplete) => {
+                    const datepicker = this._airDatepickerInstance()?.$datepicker;
+                    if (datepicker) {
+                        datepicker.onmouseenter = () => {
+                            this.isMouseInsideCalendar.set(true);
+                        };
+                        datepicker.onmouseleave = () => {
+                            this.isMouseInsideCalendar.set(false);
+                        };
+                    }
+                    if (isAnimationComplete || !this.showTimepicker()) {
+                        return;
+                    }
+                    this.setupTimepicker();
+                },
+            };
+            if (this._airDatepickerInstance()) {
+                if (this._airDatepickerInstance()?.visible) {
+                    this._airDatepickerInstance()?.update(airDatepickerOpts);
+                }
+                else {
+                    this._airDatepickerInstance()?.update(airDatepickerOpts, { silent: true });
+                }
+                if (!targetDate) {
+                    this._airDatepickerInstance()?.setFocusDate(false);
+                    this._airDatepickerInstance()?.clear({ silent: true });
+                }
+                else {
+                    this._airDatepickerInstance()?.selectDate(targetDate, { updateTime: true });
+                }
+            }
+            else {
+                this._airDatepickerInstance.set(new AirDatepicker(this._inputForDate()?.nativeElement, airDatepickerOpts));
+            }
+            if (this.showInline()) {
+                this.setupTimepicker();
+            }
+        }
+    }
+    onChangeText($event) {
+        const value = $event.target?.value;
+        if (value) {
+            // TODO: check format for DateRange
+            if (value.length === this.valueFormat().length && isMatch(value, this.valueFormat())) {
+                this.onChangedHandler(this.setupInputStringToDate(value).toISOString());
+            }
+        }
+        else {
+            this.onChangedHandler(value);
+        }
+    }
+    onBlurHandler() {
+        super.onBlurHandler();
+        if (this.isMouseOutsideCalendar() && this._airDatepickerInstance()?.visible) {
+            this._airDatepickerInstance()?.hide();
+        }
+    }
+    setupInputStringToDate(value) {
+        let targetDate = parse(value, this.valueFormat(), new Date());
+        if (!this.showTimepicker()) {
+            targetDate = this.dateToUtc(targetDate);
+        }
+        return targetDate;
+    }
+    onChangedHandler(value) {
+        let targetDate = value;
+        const currentValue = this._value();
+        if (typeof targetDate === 'string' && (!currentValue || typeof currentValue === 'string')) {
+            if (!this.showTimepicker() && targetDate) {
+                // remove time from date
+                targetDate = `${targetDate.split('T')[0]}T00:00:00.000Z`;
+            }
+            else if (this.showOnlyTimepicker() && currentValue && targetDate) {
+                targetDate = `${currentValue.split('T')[0]}T${targetDate.split('T')[1]}`;
+            }
+        }
+        else if (this.rangeSelection() &&
+            typeof targetDate === 'object' &&
+            (currentValue === null || typeof currentValue === 'object')) {
+            if (!this.showTimepicker() && targetDate?.dateFrom) {
+                // remove time from date
+                targetDate.dateFrom = `${targetDate.dateFrom.split('T')[0]}T00:00:00.000Z`;
+            }
+            else if (this.showOnlyTimepicker() && currentValue?.dateFrom && targetDate?.dateFrom) {
+                targetDate.dateFrom = `${currentValue?.dateFrom.split('T')[0]}T${targetDate.dateFrom.split('T')[1]}`;
+            }
+            if (!this.showTimepicker() && targetDate?.dateTo) {
+                // remove time from date
+                targetDate.dateTo = `${targetDate.dateTo.split('T')[0]}T00:00:00.000Z`;
+            }
+            else if (this.showOnlyTimepicker() && currentValue?.dateTo && targetDate?.dateTo) {
+                targetDate.dateTo = `${currentValue?.dateTo.split('T')[0]}T${targetDate.dateTo.split('T')[1]}`;
+            }
+        }
+        if (JSON.stringify(currentValue) === JSON.stringify(targetDate)) {
+            return;
+        }
+        this._value.set(targetDate);
+    }
+    onHideCalendar() {
+        const valueInput = this._inputForDate()?.nativeElement.value;
+        let value = valueInput;
+        if (this.rangeSelection()) {
+            value = { dateFrom: '', dateTo: '' };
+            const [dateFrom, dateTo] = valueInput.split(this.multipleDatesSeparator());
+            value.dateFrom = dateFrom ?? '';
+            value.dateTo = dateTo ?? '';
+            if (!value.dateFrom || !isMatch(value.dateFrom, this.valueFormat())) {
+                value.dateFrom = null;
+            }
+            else {
+                value.dateFrom = this.setupInputStringToDate(value.dateFrom).toISOString();
+            }
+            if (!value.dateTo || !isMatch(value.dateTo, this.valueFormat())) {
+                value.dateTo = null;
+            }
+            else {
+                value.dateTo = this.setupInputStringToDate(value.dateTo).toISOString();
+            }
+            this.onChangedHandler(value);
+        }
+        else if (isMatch(value, this.valueFormat())) {
+            this.onChangedHandler(this.setupInputStringToDate(value).toISOString());
+        }
+        else {
+            this.onChangedHandler(null);
+        }
+        if (this.formControl()?.getRawValue() !== this._value()) {
+            super.onChangedHandler(this._value());
+        }
+        else if (this.onTouched) {
+            this.onTouched();
+        }
+        this.onBlurHandler();
+    }
+    formatDate(val) {
+        if (val && typeof val === 'string') {
+            return format(val, this.valueFormat());
+        }
+        if (val && typeof val === 'object') {
+            let dateFromFormat = '';
+            let dateToFormat = '';
+            if (val.dateFrom) {
+                dateFromFormat = format(val.dateFrom, this.valueFormat());
+            }
+            if (val.dateTo) {
+                dateToFormat = format(val.dateTo, this.valueFormat());
+            }
+            return `${dateFromFormat}${this.multipleDatesSeparator()}${dateToFormat}`;
+        }
+        return '';
+    }
+    openDatePicker() {
+        if (this._inputForDate()?.nativeElement) {
+            this._inputForDate()?.nativeElement.focus();
+        }
+    }
+    interceptInputInteraction($event) {
+        if (!this.isReadonly())
+            return;
+        $event.stopPropagation();
+        $event.stopImmediatePropagation();
+        $event.preventDefault();
+    }
+    getLocale() {
+        switch (this._activeLanguage()?.toLowerCase()) {
+            case 'en':
+                return en.default || en;
+            case 'it':
+                return it.default || it;
+            case 'fr':
+                return fr.default || fr;
+            default:
+                return en.default || en;
+        }
+    }
+    onCancel() {
+        this._inputForDate()?.nativeElement.blur();
+    }
+    dateToUtc(date) {
+        // convert to UTC time removing the timezone
+        return new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+    }
+    setCalendarPosition() {
+        const windowInnerHeight = window.innerHeight;
+        const inputBoundingClientRect = this._inputForDate()?.nativeElement.getBoundingClientRect();
+        const diff = windowInnerHeight - inputBoundingClientRect.height - inputBoundingClientRect.top - 239;
+        if (diff >= 0) {
+            this.targetPosition.set('bottom left');
+        }
+        else {
+            this.targetPosition.set('top left');
+        }
+    }
+    setupTimepicker() {
+        const timepicker = document.getElementsByClassName('air-datepicker-time')?.[0];
+        if (timepicker) {
+            const inputs = timepicker.getElementsByTagName('input');
+            for (const input of Array.from(inputs)) {
+                input.setAttribute('type', 'number');
+                input.setAttribute('maxLength', '2');
+                input.className = 'form-control';
+                input.onmouseup = (evt) => {
+                    evt.stopImmediatePropagation();
+                };
+                input.onblur = () => {
+                    if (this.isMouseOutsideCalendar()) {
+                        this._airDatepickerInstance()?.hide();
+                    }
+                };
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.5", type: QuangDateComponent, isStandalone: true, selector: "quang-date", inputs: { dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, activeLanguageOverride: { classPropertyName: "activeLanguageOverride", publicName: "activeLanguageOverride", isSignal: true, isRequired: false, transformFunction: null }, timepicker: { classPropertyName: "timepicker", publicName: "timepicker", isSignal: true, isRequired: false, transformFunction: null }, invalidDateMessage: { classPropertyName: "invalidDateMessage", publicName: "invalidDateMessage", isSignal: true, isRequired: false, transformFunction: null }, showOnlyTimepicker: { classPropertyName: "showOnlyTimepicker", publicName: "showOnlyTimepicker", isSignal: true, isRequired: false, transformFunction: null }, minHour: { classPropertyName: "minHour", publicName: "minHour", isSignal: true, isRequired: false, transformFunction: null }, maxHour: { classPropertyName: "maxHour", publicName: "maxHour", isSignal: true, isRequired: false, transformFunction: null }, minMinute: { classPropertyName: "minMinute", publicName: "minMinute", isSignal: true, isRequired: false, transformFunction: null }, maxMinute: { classPropertyName: "maxMinute", publicName: "maxMinute", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, showInline: { classPropertyName: "showInline", publicName: "showInline", isSignal: true, isRequired: false, transformFunction: null }, calendarClasses: { classPropertyName: "calendarClasses", publicName: "calendarClasses", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, datepickerOptions: { classPropertyName: "datepickerOptions", publicName: "datepickerOptions", isSignal: true, isRequired: false, transformFunction: null }, multipleDatesSeparator: { classPropertyName: "multipleDatesSeparator", publicName: "multipleDatesSeparator", isSignal: true, isRequired: false, transformFunction: null }, rangeSelection: { classPropertyName: "rangeSelection", publicName: "rangeSelection", isSignal: true, isRequired: false, transformFunction: null }, searchTextDebounce: { classPropertyName: "searchTextDebounce", publicName: "searchTextDebounce", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], viewQueries: [{ propertyName: "_inputForDate", first: true, predicate: ["inputForDate"], descendants: true, isSignal: true }, { propertyName: "contentTemplate", first: true, predicate: ["calendarButton"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mb-3\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'quang-date', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }], imports: [TranslocoPipe, NgIf, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-3\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}::ng-deep .air-datepicker{z-index:99999}::ng-deep .air-datepicker .air-datepicker--pointer{display:none}::ng-deep .air-datepicker .air-datepicker-time{display:block}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--current{display:none}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders{display:flex;justify-content:center;padding-top:.25rem;gap:1rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row{width:100%;position:relative}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row:first-child:after{content:\":\";display:inline;font-size:1rem;position:absolute;right:-.65rem}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row input{width:100%;text-align:center;padding:0;padding-left:1rem;border-color:var(--bs-border-color)}::ng-deep .air-datepicker .air-datepicker-time .air-datepicker-time--sliders .air-datepicker-time--row .form-control:focus{box-shadow:unset!important}::ng-deep .air-datepicker.-inline-.-only-timepicker-{border:0}::ng-deep .air-datepicker.-inline-.-only-timepicker- .air-datepicker--time{border:0}:host{display:block}:host .input-date-container{display:flex}:host input{flex:1}:host input.with-button-calendar{border-top-right-radius:0;border-bottom-right-radius:0}:host input:disabled{border-radius:var(--bs-border-radius)}:host .btn-outline-calendar{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;min-width:unset;display:flex;border-color:var(--bs-border-color)}:host .border-danger{border-color:var(--bs-form-invalid-border-color)}:host .border-success{border-color:var(--bs-form-valid-border-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _quangTranslationService: [{
+                type: Optional
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { QuangDateComponent };
+//# sourceMappingURL=quang-components-date.mjs.map

package/fesm2022/quang-components-date.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quang-components-date.mjs","sources":["../../../projects/quang/components/date/date.component.ts","../../../projects/quang/components/date/date.component.html","../../../projects/quang/components/date/quang-components-date.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  Optional,\n  computed,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport AirDatepicker, {\n  AirDatepickerDate,\n  AirDatepickerLocale,\n  AirDatepickerOptions,\n  AirDatepickerPosition,\n} from 'air-datepicker'\nimport en from 'air-datepicker/locale/en'\nimport fr from 'air-datepicker/locale/fr'\nimport it from 'air-datepicker/locale/it'\nimport { format, isMatch, parse } from 'date-fns'\nimport { QuangTranslationService } from 'quang/translation'\nimport { debounceTime, fromEvent } from 'rxjs'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport interface DateRange {\n  dateFrom: string | null\n  dateTo: string | null\n}\n\nexport type QuangDatepickerOptions = AirDatepickerOptions\n\n@Component({\n  selector: 'quang-date',\n  templateUrl: './date.component.html',\n  styleUrl: './date.component.scss',\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => QuangDateComponent), multi: true }],\n  imports: [TranslocoPipe, NgIf, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Datepicker component based on {@link https://air-datepicker.com/docs}.\n *\n * @usageNotes\n * 1. It can be used to only display the `timepicker` component by setting\n * `[showOnlyTimepicker]=\"true\"`\n *\n * 2. `datepickerOptions` can be used to override the default options of the component to get full access to all the\n * possible customizations that Air Datepicker provides. See {@link https://air-datepicker.com/examples}\n * Please note that overriding the `container` and `locale` properties and the `onSelect` and `onHide`\n * events might cause the component to malfunction.\n */\nexport class QuangDateComponent extends QuangBaseComponent<string | DateRange | null> {\n  /**\n   * Format to use to show on the input field.\n   * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}\n   * Default: dd/MM/yyyy\n   * @default dd/MM/yyyy\n   */\n  dateFormat = input<string>('dd/MM/yyyy')\n\n  /**\n   * Format to use to show on the time inside the input field.\n   * The format is based on the standard {@link https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table}\n   * Default: HH:mm\n   * @default HH:mm\n   */\n  timeFormat = input<string>('HH:mm')\n\n  /**\n   * Calendar locale, if not provided the component will try to use the one provided in {@link QuangTranslationService}\n   * if the language is not set in {@link QuangTranslationService} it will use the browser language\n   * Use this parameter only to override default behavior\n   */\n  activeLanguageOverride = input<string | undefined>(undefined)\n\n  /**\n   * If true enable the timepicker inside the calendar\n   */\n  timepicker = input<boolean>(false)\n\n  /**\n   * The message to show inside the input if the date is invalid\n   */\n  invalidDateMessage = input<string>('')\n\n  showOnlyTimepicker = input<boolean>(false)\n\n  minHour = input<number>(0)\n\n  maxHour = input<number>(24)\n\n  minMinute = input<number>(0)\n\n  maxMinute = input<number>(59)\n\n  minDate = input<Date | undefined>(undefined)\n\n  maxDate = input<Date | undefined>(undefined)\n\n  showInline = input<boolean>(false)\n\n  calendarClasses = input<string>('')\n\n  buttonClass = input<string>('')\n\n  datepickerOptions = input<QuangDatepickerOptions | undefined>(undefined)\n\n  _inputForDate = viewChild<ElementRef>('inputForDate')\n\n  contentTemplate = viewChild.required<ElementRef>('calendarButton')\n\n  hasNoContent = computed(() => this.contentTemplate()?.nativeElement.children.length === 0)\n\n  @Optional() _quangTranslationService = signal<QuangTranslationService | undefined>(inject(QuangTranslationService))\n\n  _quangTranslationActiveLang = computed(() => this._quangTranslationService()?.activeLang() ?? null)\n\n  multipleDatesSeparator = input<string>(' - ')\n\n  rangeSelection = input(false)\n\n  _activeLanguage = computed(() => {\n    if (this.activeLanguageOverride()) {\n      return this.activeLanguageOverride()\n    }\n    if (this._quangTranslationService()) {\n      return this._quangTranslationActiveLang()\n    }\n    return navigator.language\n  })\n\n  _airDatepickerInstance = signal<AirDatepicker | undefined>(undefined)\n\n  searchTextDebounce = input<number>(500)\n\n  targetPosition = signal<AirDatepickerPosition>('bottom left')\n\n  _generateAirDatepickerEffect = effect(\n    () => {\n      this.setupCalendar()\n    },\n    { allowSignalWrites: true }\n  )\n\n  valueFormat = computed(() =>\n    this.showOnlyTimepicker()\n      ? this.timeFormat()\n      : this.dateFormat() + (this.showTimepicker() ? ` ${this.timeFormat()}` : '')\n  )\n\n  inputValueString = computed(() => this.formatDate(this._value()))\n\n  constructor() {\n    super()\n\n    fromEvent(document, 'scroll', { capture: true })\n      .pipe(takeUntilDestroyed(), debounceTime(250))\n      .subscribe(() => {\n        if (this._airDatepickerInstance()?.visible) {\n          this.setupCalendar()\n        }\n      })\n  }\n\n  showTimepicker = computed(() => !this.rangeSelection() && (this.timepicker() || this.showOnlyTimepicker()))\n\n  isMouseInsideCalendar = signal(false)\n\n  isMouseOutsideCalendar = computed(() => !this.isMouseInsideCalendar())\n\n  setupCalendar() {\n    if (this._inputForDate()?.nativeElement) {\n      const currentValue = this._value()\n      let targetDate: AirDatepickerDate[] | undefined\n      if (currentValue && typeof currentValue === 'string') {\n        targetDate = [currentValue]\n      } else if (currentValue && typeof currentValue === 'object') {\n        targetDate = []\n        if (currentValue.dateFrom) {\n          targetDate.push(currentValue.dateFrom)\n        }\n        if (currentValue.dateTo) {\n          targetDate.push(currentValue.dateTo)\n        }\n      }\n      this.setCalendarPosition()\n      const airDatepickerOpts: QuangDatepickerOptions = {\n        autoClose: true,\n        classes: this.calendarClasses(),\n        dateFormat: this.dateFormat(),\n        inline: this.showInline(),\n        isMobile: false,\n        multipleDatesSeparator: this.multipleDatesSeparator(),\n        range: this.rangeSelection(),\n        timepicker: this.showTimepicker(),\n        onlyTimepicker: this.showOnlyTimepicker(),\n        timeFormat: this.timeFormat(),\n        minHours: this.minHour(),\n        maxHours: this.maxHour(),\n        minMinutes: this.minMinute(),\n        maxMinutes: this.maxMinute(),\n        minDate: this.minDate(),\n        maxDate: this.maxDate(),\n        toggleSelected: false,\n        multipleDates: false,\n        selectedDates: targetDate,\n        position: this.targetPosition(),\n        locale: this.getLocale(),\n        onSelect: ({ date }) => {\n          if (!Array.isArray(date)) {\n            let selectTargetDate = date\n            if (!this.showTimepicker()) {\n              selectTargetDate = this.dateToUtc(date)\n            }\n            this.onChangedHandler(selectTargetDate.toISOString())\n          }\n          if (this.showInline()) {\n            this.onHideCalendar()\n          }\n        },\n        onHide: (isAnimationComplete: boolean) => {\n          if (isAnimationComplete) {\n            this.onHideCalendar()\n          }\n        },\n        ...(this.datepickerOptions() ?? {}),\n        onShow: (isAnimationComplete) => {\n          const datepicker = this._airDatepickerInstance()?.$datepicker\n          if (datepicker) {\n            datepicker.onmouseenter = () => {\n              this.isMouseInsideCalendar.set(true)\n            }\n            datepicker.onmouseleave = () => {\n              this.isMouseInsideCalendar.set(false)\n            }\n          }\n          if (isAnimationComplete || !this.showTimepicker()) {\n            return\n          }\n          this.setupTimepicker()\n        },\n      }\n\n      if (this._airDatepickerInstance()) {\n        if (this._airDatepickerInstance()?.visible) {\n          this._airDatepickerInstance()?.update(airDatepickerOpts)\n        } else {\n          this._airDatepickerInstance()?.update(airDatepickerOpts, { silent: true })\n        }\n\n        if (!targetDate) {\n          this._airDatepickerInstance()?.setFocusDate(false)\n          this._airDatepickerInstance()?.clear({ silent: true })\n        } else {\n          this._airDatepickerInstance()?.selectDate(targetDate, { updateTime: true })\n        }\n      } else {\n        this._airDatepickerInstance.set(new AirDatepicker(this._inputForDate()?.nativeElement, airDatepickerOpts))\n      }\n\n      if (this.showInline()) {\n        this.setupTimepicker()\n      }\n    }\n  }\n\n  onChangeText($event: Event): void {\n    const value = ($event.target as HTMLInputElement)?.value\n    if (value) {\n      // TODO: check format for DateRange\n      if (value.length === this.valueFormat().length && isMatch(value, this.valueFormat())) {\n        this.onChangedHandler(this.setupInputStringToDate(value).toISOString())\n      }\n    } else {\n      this.onChangedHandler(value)\n    }\n  }\n\n  override onBlurHandler() {\n    super.onBlurHandler()\n\n    if (this.isMouseOutsideCalendar() && this._airDatepickerInstance()?.visible) {\n      this._airDatepickerInstance()?.hide()\n    }\n  }\n\n  setupInputStringToDate(value: string) {\n    let targetDate = parse(value, this.valueFormat(), new Date())\n    if (!this.showTimepicker()) {\n      targetDate = this.dateToUtc(targetDate)\n    }\n    return targetDate\n  }\n\n  override onChangedHandler(value: string | DateRange | null): void {\n    let targetDate = value\n    const currentValue = this._value()\n    if (typeof targetDate === 'string' && (!currentValue || typeof currentValue === 'string')) {\n      if (!this.showTimepicker() && targetDate) {\n        // remove time from date\n        targetDate = `${targetDate.split('T')[0]}T00:00:00.000Z`\n      } else if (this.showOnlyTimepicker() && currentValue && targetDate) {\n        targetDate = `${currentValue.split('T')[0]}T${targetDate.split('T')[1]}`\n      }\n    } else if (\n      this.rangeSelection() &&\n      typeof targetDate === 'object' &&\n      (currentValue === null || typeof currentValue === 'object')\n    ) {\n      if (!this.showTimepicker() && targetDate?.dateFrom) {\n        // remove time from date\n        targetDate.dateFrom = `${targetDate.dateFrom.split('T')[0]}T00:00:00.000Z`\n      } else if (this.showOnlyTimepicker() && currentValue?.dateFrom && targetDate?.dateFrom) {\n        targetDate.dateFrom = `${currentValue?.dateFrom.split('T')[0]}T${targetDate.dateFrom.split('T')[1]}`\n      }\n      if (!this.showTimepicker() && targetDate?.dateTo) {\n        // remove time from date\n        targetDate.dateTo = `${targetDate.dateTo.split('T')[0]}T00:00:00.000Z`\n      } else if (this.showOnlyTimepicker() && currentValue?.dateTo && targetDate?.dateTo) {\n        targetDate.dateTo = `${currentValue?.dateTo.split('T')[0]}T${targetDate.dateTo.split('T')[1]}`\n      }\n    }\n\n    if (JSON.stringify(currentValue) === JSON.stringify(targetDate)) {\n      return\n    }\n\n    this._value.set(targetDate)\n  }\n\n  onHideCalendar(): void {\n    const valueInput: string = this._inputForDate()?.nativeElement.value\n    let value: string | DateRange = valueInput\n    if (this.rangeSelection()) {\n      value = { dateFrom: '', dateTo: '' }\n      const [dateFrom, dateTo] = valueInput.split(this.multipleDatesSeparator())\n      value.dateFrom = dateFrom ?? ''\n      value.dateTo = dateTo ?? ''\n      if (!value.dateFrom || !isMatch(value.dateFrom, this.valueFormat())) {\n        value.dateFrom = null\n      } else {\n        value.dateFrom = this.setupInputStringToDate(value.dateFrom).toISOString()\n      }\n      if (!value.dateTo || !isMatch(value.dateTo, this.valueFormat())) {\n        value.dateTo = null\n      } else {\n        value.dateTo = this.setupInputStringToDate(value.dateTo).toISOString()\n      }\n      this.onChangedHandler(value)\n    } else if (isMatch(value, this.valueFormat())) {\n      this.onChangedHandler(this.setupInputStringToDate(value).toISOString())\n    } else {\n      this.onChangedHandler(null)\n    }\n\n    if (this.formControl()?.getRawValue() !== this._value()) {\n      super.onChangedHandler(this._value())\n    } else if (this.onTouched) {\n      this.onTouched()\n    }\n\n    this.onBlurHandler()\n  }\n\n  formatDate(val: string | DateRange | null): string {\n    if (val && typeof val === 'string') {\n      return format(val, this.valueFormat())\n    }\n    if (val && typeof val === 'object') {\n      let dateFromFormat = ''\n      let dateToFormat = ''\n      if (val.dateFrom) {\n        dateFromFormat = format(val.dateFrom, this.valueFormat())\n      }\n      if (val.dateTo) {\n        dateToFormat = format(val.dateTo, this.valueFormat())\n      }\n      return `${dateFromFormat}${this.multipleDatesSeparator()}${dateToFormat}`\n    }\n    return ''\n  }\n\n  openDatePicker() {\n    if (this._inputForDate()?.nativeElement) {\n      this._inputForDate()?.nativeElement.focus()\n    }\n  }\n\n  interceptInputInteraction($event: Event) {\n    if (!this.isReadonly()) return\n\n    $event.stopPropagation()\n    $event.stopImmediatePropagation()\n    $event.preventDefault()\n  }\n\n  getLocale(): AirDatepickerLocale {\n    switch (this._activeLanguage()?.toLowerCase()) {\n      case 'en':\n        return (en as any).default || en\n      case 'it':\n        return (it as any).default || it\n      case 'fr':\n        return (fr as any).default || fr\n      default:\n        return (en as any).default || en\n    }\n  }\n\n  onCancel(): void {\n    this._inputForDate()?.nativeElement.blur()\n  }\n\n  private dateToUtc(date: Date): Date {\n    // convert to UTC time removing the timezone\n    return new Date(date.getTime() - date.getTimezoneOffset() * 60000)\n  }\n\n  private setCalendarPosition() {\n    const windowInnerHeight = window.innerHeight\n    const inputBoundingClientRect = this._inputForDate()?.nativeElement.getBoundingClientRect()\n    const diff = windowInnerHeight - inputBoundingClientRect.height - inputBoundingClientRect.top - 239\n    if (diff >= 0) {\n      this.targetPosition.set('bottom left')\n    } else {\n      this.targetPosition.set('top left')\n    }\n  }\n\n  private setupTimepicker() {\n    const timepicker = document.getElementsByClassName('air-datepicker-time')?.[0]\n    if (timepicker) {\n      const inputs = timepicker.getElementsByTagName('input')\n      for (const input of Array.from(inputs)) {\n        input.setAttribute('type', 'number')\n        input.setAttribute('maxLength', '2')\n        input.className = 'form-control'\n        input.onmouseup = (evt) => {\n          evt.stopImmediatePropagation()\n        }\n        input.onblur = () => {\n          if (this.isMouseOutsideCalendar()) {\n            this._airDatepickerInstance()?.hide()\n          }\n        }\n      }\n    }\n  }\n}\n","<div class=\"mb-3\">\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <div\n    [class.is-invalid]=\"_showErrors()\"\n    [class.is-valid]=\"_showSuccess()\"\n    class=\"input-date-container\"\n  >\n    <input\n      [attr.required]=\"getIsRequiredControl()\"\n      [autocomplete]=\"'off'\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.with-button-calendar]=\"!hasNoContent()\"\n      [disabled]=\"_isDisabled()\"\n      [hidden]=\"showInline()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"inputValueString()\"\n      (blur)=\"onBlurHandler()\"\n      (focus)=\"interceptInputInteraction($event)\"\n      (input)=\"onChangeText($event)\"\n      (mouseenter)=\"isMouseInsideCalendar.set(true)\"\n      (mouseleave)=\"isMouseInsideCalendar.set(false)\"\n      (search)=\"onCancel()\"\n      #inputForDate\n      class=\"form-control\"\n      type=\"search\"\n    />\n    <button\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.border-danger]=\"_showErrors()\"\n      [class.border-success]=\"_showSuccess()\"\n      [hidden]=\"showInline() || hasNoContent() || _isDisabled()\"\n      [ngClass]=\"buttonClass()\"\n      (click)=\"_ngControl()?.disabled ? null : openDatePicker()\"\n      #calendarButton\n      aria-label=\"calendar-button\"\n      class=\"btn btn-outline-secondary btn-outline-calendar\"\n      type=\"button\"\n    >\n      <ng-content></ng-content>\n    </button>\n  </div>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/quang-components-input.mjs

@@ -0,0 +1,54 @@
+import { NgIf, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { TranslocoPipe } from '@jsverse/transloco';
+import { QuangBaseComponent } from 'quang/components/shared';
+
+/**
+ * Input component that handles all the types declared in {@link InputType}
+ * @property {boolean} resizable just for textarea {@link InputType}
+ */
+class QuangInputComponent extends QuangBaseComponent {
+    constructor() {
+        super();
+        this.componentType = input.required();
+        this.maxLengthText = input(null);
+        this.minLengthText = input(null);
+        this.minNumber = input(undefined);
+        this.maxNumber = input(undefined);
+        this.componentStep = input(1);
+        this.resizable = input(true);
+        toObservable(this.componentType)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.setupFormControl();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.5", type: QuangInputComponent, isStandalone: true, selector: "quang-input", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, maxLengthText: { classPropertyName: "maxLengthText", publicName: "maxLengthText", isSignal: true, isRequired: false, transformFunction: null }, minLengthText: { classPropertyName: "minLengthText", publicName: "minLengthText", isSignal: true, isRequired: false, transformFunction: null }, minNumber: { classPropertyName: "minNumber", publicName: "minNumber", isSignal: true, isRequired: false, transformFunction: null }, maxNumber: { classPropertyName: "maxNumber", publicName: "maxNumber", isSignal: true, isRequired: false, transformFunction: null }, componentStep: { classPropertyName: "componentStep", publicName: "componentStep", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => QuangInputComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"componentType()\"\n  class=\"mb-3\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <ng-container *ngIf=\"componentType() !== 'textarea'\">\n    <input\n      [attr.maxLength]=\"maxLengthText()\"\n      [attr.minLength]=\"minLengthText()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [max]=\"maxNumber()\"\n      [min]=\"minNumber()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [step]=\"componentStep()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [type]=\"componentType()\"\n      [value]=\"_value()\"\n      (blur)=\"onBlurHandler()\"\n      (input)=\"onChangedEventHandler($event)\"\n      autocomplete=\"off\"\n      class=\"form-control\"\n    />\n  </ng-container>\n  <ng-container *ngIf=\"componentType() === 'textarea'\">\n    <textarea\n      [attr.maxLength]=\"maxLengthText()\"\n      [attr.minLength]=\"minLengthText()\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.no-resize]=\"!resizable()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_value()\"\n      (blur)=\"onBlurHandler()\"\n      (input)=\"onChangedEventHandler($event)\"\n      class=\"form-control\"\n    ></textarea>\n  </ng-container>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QuangInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'quang-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => QuangInputComponent),
+                            multi: true,
+                        },
+                    ], imports: [TranslocoPipe, NgIf, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"componentType()\"\n  class=\"mb-3\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <ng-container *ngIf=\"componentType() !== 'textarea'\">\n    <input\n      [attr.maxLength]=\"maxLengthText()\"\n      [attr.minLength]=\"minLengthText()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [max]=\"maxNumber()\"\n      [min]=\"minNumber()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [step]=\"componentStep()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [type]=\"componentType()\"\n      [value]=\"_value()\"\n      (blur)=\"onBlurHandler()\"\n      (input)=\"onChangedEventHandler($event)\"\n      autocomplete=\"off\"\n      class=\"form-control\"\n    />\n  </ng-container>\n  <ng-container *ngIf=\"componentType() === 'textarea'\">\n    <textarea\n      [attr.maxLength]=\"maxLengthText()\"\n      [attr.minLength]=\"minLengthText()\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.no-resize]=\"!resizable()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_value()\"\n      (blur)=\"onBlurHandler()\"\n      (input)=\"onChangedEventHandler($event)\"\n      class=\"form-control\"\n    ></textarea>\n  </ng-container>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n", styles: ["input::-webkit-search-cancel-button{-webkit-appearance:none;height:.75rem;width:.75rem;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 3 1024 1024' width='12' height='12' fill='currentColor'%3E%3Cpath d='M9 1018q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5l459-459 459 459q5 4 10.5 6.5 5.5 2.5 11.5 2.5 6 0 11.5-2.5 5.5-2.5 10.5-6.5 9-9 9-22 0-13-9-22l-459-459 459-459q9-9 9-22 0-13-9-22-9-9-22-9-13 0-22 9l-459 459-459-459q-9-9-22-9-13 0-22 9-9 9-9 22 0 13 9 22l459 459-459 459q-9 9-9 22 0 13 9 22l0 0z'/%3E%3C/svg%3E%0A\");cursor:pointer}:host{display:block}.no-resize{resize:none}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { QuangInputComponent };
+//# sourceMappingURL=quang-components-input.mjs.map

package/fesm2022/quang-components-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"quang-components-input.mjs","sources":["../../../projects/quang/components/input/input.component.ts","../../../projects/quang/components/input/input.component.html","../../../projects/quang/components/input/quang-components-input.ts"],"sourcesContent":["import { NgClass, NgIf } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, forwardRef, input } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\n\nimport { QuangBaseComponent } from 'quang/components/shared'\n\nexport type InputType = 'text' | 'textarea' | 'password' | 'email' | 'number' | 'url' | 'search' | 'tel' | 'color'\n\n@Component({\n  selector: 'quang-input',\n  templateUrl: './input.component.html',\n  styleUrl: './input.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => QuangInputComponent),\n      multi: true,\n    },\n  ],\n  imports: [TranslocoPipe, NgIf, NgClass],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Input component that handles all the types declared in {@link InputType}\n * @property {boolean} resizable just for textarea {@link InputType}\n */\nexport class QuangInputComponent extends QuangBaseComponent<string | number> {\n  componentType = input.required<InputType>()\n\n  maxLengthText = input<number | null>(null)\n\n  minLengthText = input<number | null>(null)\n\n  minNumber = input<number | undefined>(undefined)\n\n  maxNumber = input<number | undefined>(undefined)\n\n  componentStep = input<number>(1)\n\n  resizable = input(true)\n\n  constructor() {\n    super()\n    toObservable(this.componentType)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setupFormControl()\n      })\n  }\n}\n","<div\n  *ngIf=\"componentType()\"\n  class=\"mb-3\"\n>\n  <label\n    [htmlFor]=\"componentId()\"\n    *ngIf=\"componentLabel()\"\n    class=\"form-label\"\n  >\n    {{ componentLabel() | transloco }}\n    <span [hidden]=\"!_isRequired()\">*</span>\n  </label>\n  <ng-container *ngIf=\"componentType() !== 'textarea'\">\n    <input\n      [attr.maxLength]=\"maxLengthText()\"\n      [attr.minLength]=\"minLengthText()\"\n      [attr.required]=\"getIsRequiredControl()\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [max]=\"maxNumber()\"\n      [min]=\"minNumber()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [step]=\"componentStep()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [type]=\"componentType()\"\n      [value]=\"_value()\"\n      (blur)=\"onBlurHandler()\"\n      (input)=\"onChangedEventHandler($event)\"\n      autocomplete=\"off\"\n      class=\"form-control\"\n    />\n  </ng-container>\n  <ng-container *ngIf=\"componentType() === 'textarea'\">\n    <textarea\n      [attr.maxLength]=\"maxLengthText()\"\n      [attr.minLength]=\"minLengthText()\"\n      [class.is-invalid]=\"_showErrors()\"\n      [class.is-valid]=\"_showSuccess()\"\n      [class.no-resize]=\"!resizable()\"\n      [disabled]=\"_isDisabled()\"\n      [id]=\"componentId()\"\n      [ngClass]=\"componentClass()\"\n      [placeholder]=\"componentPlaceholder() | transloco\"\n      [readOnly]=\"isReadonly()\"\n      [tabIndex]=\"componentTabIndex()\"\n      [value]=\"_value()\"\n      (blur)=\"onBlurHandler()\"\n      (input)=\"onChangedEventHandler($event)\"\n      class=\"form-control\"\n    ></textarea>\n  </ng-container>\n  <div class=\"valid-feedback\">\n    {{ successMessage() | transloco }}\n  </div>\n  <div class=\"invalid-feedback\">\n    {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n  </div>\n  <small\n    [hidden]=\"_showSuccess() || _showErrors()\"\n    *ngIf=\"helpMessage()\"\n    aria-live=\"assertive\"\n    class=\"form-text text-muted\"\n  >\n    {{ helpMessage() | transloco }}\n  </small>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}