@kksdev/ds-angular 1.11.0 → 1.12.0

package/fesm2022/kksdev-ds-angular.mjs

@@ -6,7 +6,7 @@ import * as i1$1 from '@fortawesome/angular-fontawesome';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { faInfoCircle, faTimesCircle, faExclamationTriangle, faCheckCircle, faTimes, faEye, faEyeSlash, faClose, faCircleInfo, faCircleXmark, faCircleExclamation, faCircleCheck, faChevronDown, faChevronLeft, faChevronRight, faAnglesLeft, faAnglesRight, faCheck, faSearch, faXmark, faSpinner, faCalendar, faCloudArrowUp, faFile, faFileImage, faFilePdf, faFileWord, faFileExcel, faInbox, faStar, faStarHalfStroke, faClock, faFolder, faFolderOpen, faCircle, faCircleHalfStroke, faTriangleExclamation, faMinus, faPlus, faEyeDropper, faExternalLinkAlt, faBars, faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { faInfoCircle, faTimesCircle, faExclamationTriangle, faCheckCircle, faTimes, faEye, faEyeSlash, faClose, faCircleInfo, faCircleXmark, faCircleExclamation, faCircleCheck, faChevronDown, faChevronLeft, faChevronRight, faAnglesLeft, faAnglesRight, faCheck, faSearch, faXmark, faSpinner, faCalendar, faCloudArrowUp, faFile, faFileImage, faFilePdf, faFileWord, faFileExcel, faInbox, faStar, faStarHalfStroke, faClock, faFolder, faFolderOpen, faCircle, faCircleHalfStroke, faTriangleExclamation, faMinus, faPlus, faEyeDropper, faExternalLinkAlt, faBars, faAngleLeft, faAngleRight, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import * as i1$2 from '@angular/router';
 import { RouterModule, Router } from '@angular/router';
 import * as i1$3 from '@angular/cdk/overlay';
@@ -16754,6 +16754,357 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+/** Positions pour le popup overlay */
+const INPUT_DATE_POSITIONS = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4,
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4,
+    },
+];
+/**
+ * Parse une chaîne de date au format dd/MM/yyyy, dd-MM-yyyy, dd.MM.yyyy ou dd MM yyyy
+ */
+function parseDate(input) {
+    if (!input || !input.trim()) {
+        return { valid: true, date: null };
+    }
+    const trimmed = input.trim();
+    // Regex multi-format: dd/MM/yyyy, dd-MM-yyyy, dd.MM.yyyy, dd MM yyyy
+    const regex = /^(\d{1,2})[\/\-\.\s](\d{1,2})[\/\-\.\s](\d{4})$/;
+    const match = trimmed.match(regex);
+    if (!match) {
+        return { valid: false, date: null, error: 'invalid_format' };
+    }
+    const day = parseInt(match[1], 10);
+    const month = parseInt(match[2], 10);
+    const year = parseInt(match[3], 10);
+    // Validation des valeurs
+    if (month < 1 || month > 12) {
+        return { valid: false, date: null, error: 'invalid_date' };
+    }
+    if (day < 1 || day > 31) {
+        return { valid: false, date: null, error: 'invalid_date' };
+    }
+    // Créer la date en heure locale (pas UTC)
+    const date = new Date(year, month - 1, day, 0, 0, 0, 0);
+    // Vérifier que la date est valide (ex: 31/02 créera une date en mars)
+    if (date.getDate() !== day || date.getMonth() !== month - 1 || date.getFullYear() !== year) {
+        return { valid: false, date: null, error: 'invalid_date' };
+    }
+    return { valid: true, date };
+}
+/**
+ * Formate une date au format dd/MM/yyyy
+ */
+function formatDate(date) {
+    if (!date)
+        return '';
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+}
+/**
+ * DsInputDate - Composant de saisie de date avec calendrier popup
+ *
+ * @description
+ * Input textuel avec icône calendrier et popup DsDatePicker pour la sélection
+ * de date dans les formulaires. Supporte la saisie manuelle et les contraintes min/max.
+ *
+ * @example
+ * ```html
+ * <ds-input-date
+ *   [(ngModel)]="selectedDate"
+ *   label="Date de naissance"
+ *   placeholder="jj/mm/aaaa">
+ * </ds-input-date>
+ * ```
+ */
+class DsInputDate {
+    // ViewChild - référence à l'élément input pour le focus
+    inputElementRef;
+    // Inputs
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    helper = input(undefined, ...(ngDevMode ? [{ debugName: "helper" }] : []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
+    clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
+    // Outputs
+    dateChange = output();
+    // Icons
+    calendarIcon = faCalendar;
+    clearIcon = faTimes;
+    errorIcon = faExclamationCircle;
+    // Overlay positions
+    overlayPositions = INPUT_DATE_POSITIONS;
+    // Unique ID for aria-controls
+    panelId = `ds-input-date-panel-${Math.random().toString(36).substr(2, 9)}`;
+    // State
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    inputText = signal('', ...(ngDevMode ? [{ debugName: "inputText" }] : []));
+    hasParseError = signal(false, ...(ngDevMode ? [{ debugName: "hasParseError" }] : []));
+    // ControlValueAccessor
+    onChange = () => { };
+    onTouched = () => { };
+    hasExternalValue = signal(false, ...(ngDevMode ? [{ debugName: "hasExternalValue" }] : []));
+    // Computed
+    displayValue = computed(() => {
+        const text = this.inputText();
+        if (text)
+            return text;
+        return formatDate(this.internalValue());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    containerClasses = computed(() => {
+        const classes = ['ds-input-date'];
+        classes.push(`ds-input-date--${this.size()}`);
+        if (this.disabled())
+            classes.push('ds-input-date--disabled');
+        if (this.readonly())
+            classes.push('ds-input-date--readonly');
+        if (this.isFocused())
+            classes.push('ds-input-date--focused');
+        if (this.isOpen())
+            classes.push('ds-input-date--open');
+        if (this.inputState() === 'error')
+            classes.push('ds-input-date--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    isDisabled = computed(() => this.disabled() || this.readonly(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    inputState = computed(() => {
+        if (this.hasParseError() || this.error())
+            return 'error';
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "inputState" }] : []));
+    showClearButton = computed(() => {
+        return this.clearable() && this.internalValue() !== null && !this.isDisabled();
+    }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    effectiveMinDate = computed(() => {
+        const min = this.minDate();
+        const max = this.maxDate();
+        // Si minDate > maxDate (config invalide), ignorer les contraintes
+        if (min && max && min > max) {
+            console.warn('[DsInputDate] minDate > maxDate: constraints ignored');
+            return null;
+        }
+        return min;
+    }, ...(ngDevMode ? [{ debugName: "effectiveMinDate" }] : []));
+    effectiveMaxDate = computed(() => {
+        const min = this.minDate();
+        const max = this.maxDate();
+        // Si minDate > maxDate (config invalide), ignorer les contraintes
+        if (min && max && min > max) {
+            return null;
+        }
+        return max;
+    }, ...(ngDevMode ? [{ debugName: "effectiveMaxDate" }] : []));
+    constructor() {
+        // Sync external value with internal
+        effect(() => {
+            const val = this.value();
+            if (!this.hasExternalValue() && val !== this.internalValue()) {
+                this.internalValue.set(val);
+                this.inputText.set(formatDate(val));
+            }
+        });
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.hasExternalValue.set(true);
+        this.internalValue.set(value);
+        this.inputText.set(formatDate(value));
+        this.hasParseError.set(false);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Géré par input disabled
+    }
+    // Event handlers
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isDisabled() || this.isOpen())
+            return;
+        this.isOpen.set(true);
+    }
+    close() {
+        if (!this.isOpen())
+            return;
+        this.isOpen.set(false);
+    }
+    onInputFocus() {
+        if (!this.disabled()) {
+            this.isFocused.set(true);
+        }
+    }
+    onInputBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+        // Parse et valide la saisie
+        const text = this.inputText();
+        if (!text) {
+            // Champ vidé
+            if (this.internalValue() !== null) {
+                this.updateValue(null);
+            }
+            this.hasParseError.set(false);
+            return;
+        }
+        const result = parseDate(text);
+        if (!result.valid) {
+            this.hasParseError.set(true);
+            return;
+        }
+        // Validation des contraintes min/max
+        if (result.date) {
+            const min = this.effectiveMinDate();
+            const max = this.effectiveMaxDate();
+            if (min && result.date < min) {
+                this.hasParseError.set(true);
+                return;
+            }
+            if (max && result.date > max) {
+                this.hasParseError.set(true);
+                return;
+            }
+        }
+        this.hasParseError.set(false);
+        if (result.date !== this.internalValue()) {
+            this.updateValue(result.date);
+        }
+        // Reformatter la saisie
+        this.inputText.set(formatDate(result.date));
+    }
+    onInputChange(event) {
+        const input = event.target;
+        this.inputText.set(input.value);
+        // Le parsing/validation se fait uniquement au blur
+    }
+    onInputKeydown(event) {
+        if (this.isDisabled())
+            return;
+        switch (event.key) {
+            case 'Enter':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.open();
+                break;
+            case 'Escape':
+                if (this.isOpen()) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+        }
+    }
+    onCalendarIconClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggle();
+    }
+    onDateSelected(date) {
+        this.updateValue(date);
+        this.inputText.set(formatDate(date));
+        this.hasParseError.set(false);
+        this.close();
+        this.inputElementRef?.nativeElement.focus();
+    }
+    onBackdropClick() {
+        this.close();
+    }
+    onOverlayKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+            this.inputElementRef?.nativeElement.focus();
+        }
+    }
+    clearValue(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.updateValue(null);
+        this.inputText.set('');
+        this.hasParseError.set(false);
+        this.inputElementRef?.nativeElement.focus();
+    }
+    updateValue(value) {
+        this.hasExternalValue.set(true);
+        this.internalValue.set(value);
+        this.onChange(value);
+        this.dateChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsInputDate, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsInputDate, isStandalone: true, selector: "ds-input-date", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, helper: { classPropertyName: "helper", publicName: "helper", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsInputDate),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-input-date__label\" [attr.for]=\"panelId + '-input'\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Input container -->\n  <div\n    class=\"ds-input-date__wrapper\"\n    #triggerOrigin=\"cdkOverlayOrigin\"\n    cdkOverlayOrigin>\n\n    <input\n      #inputElement\n      type=\"text\"\n      class=\"ds-input-date__input\"\n      [id]=\"panelId + '-input'\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"isOpen() ? panelId : null\"\n      [attr.aria-invalid]=\"inputState() === 'error'\"\n      (input)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onInputKeydown($event)\">\n\n    <!-- Icons zone -->\n    <div class=\"ds-input-date__icons\">\n      <!-- Clear button -->\n      @if (showClearButton()) {\n        <button\n          type=\"button\"\n          class=\"ds-input-date__clear\"\n          tabindex=\"-1\"\n          aria-label=\"Effacer la date\"\n          (click)=\"clearValue($event)\">\n          <fa-icon [icon]=\"clearIcon\" aria-hidden=\"true\"></fa-icon>\n        </button>\n      }\n\n      <!-- Calendar icon -->\n      <button\n        type=\"button\"\n        class=\"ds-input-date__calendar-btn\"\n        [disabled]=\"isDisabled()\"\n        tabindex=\"-1\"\n        aria-label=\"Ouvrir le calendrier\"\n        (click)=\"onCalendarIconClick($event)\">\n        <fa-icon [icon]=\"calendarIcon\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Helper / Error message -->\n  @if (error() || hasParseError()) {\n    <div class=\"ds-input-date__error\">\n      <fa-icon [icon]=\"errorIcon\" aria-hidden=\"true\"></fa-icon>\n      <span>{{ error() || 'Format de date invalide' }}</span>\n    </div>\n  } @else if (helper()) {\n    <div class=\"ds-input-date__helper\">{{ helper() }}</div>\n  }\n</div>\n\n<!-- Date Picker Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"triggerOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n  [cdkConnectedOverlayPanelClass]=\"'ds-input-date-overlay'\"\n  (backdropClick)=\"onBackdropClick()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\">\n\n  <div\n    class=\"ds-input-date__popup\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"S\u00E9lectionner une date\">\n    <ds-date-picker\n      [mode]=\"'single'\"\n      [minDate]=\"effectiveMinDate()\"\n      [maxDate]=\"effectiveMaxDate()\"\n      [showTodayButton]=\"true\"\n      [showClearButton]=\"false\"\n      (dateChange)=\"onDateSelected($event)\">\n    </ds-date-picker>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex;width:100%}.ds-input-date{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ds-input-date__label{display:block;color:var(--input-label-color);font-size:var(--input-label-font-size);font-weight:500;margin-bottom:var(--input-label-margin-bottom)}.ds-input-date__wrapper{position:relative;display:flex;align-items:center}.ds-input-date__input{flex:1;width:100%;height:var(--input-height-md);padding:0 var(--ds-input-date-icon-zone-width, 72px) 0 var(--input-padding-default);background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-border-radius);color:var(--input-text);font-size:var(--input-font-size-md);outline:none;transition:all .2s ease}.ds-input-date__input::placeholder{color:var(--input-placeholder)}.ds-input-date__input:hover:not(:disabled):not([readonly]){border-color:var(--input-hover-border)}.ds-input-date__input:focus:not(:disabled){border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.ds-input-date__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--input-disabled-bg)}.ds-input-date__input[readonly]{cursor:default;background-color:var(--input-disabled-bg)}.ds-input-date__icons{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;gap:var(--space-1);padding-right:var(--space-2)}.ds-input-date__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-1);color:var(--input-icon);cursor:pointer;transition:all .15s ease}.ds-input-date__clear:hover{background-color:var(--surface-hover);color:var(--text-default)}.ds-input-date__clear:focus-visible{outline:2px solid var(--input-focus-border);outline-offset:1px}.ds-input-date__clear fa-icon{font-size:14px}.ds-input-date__calendar-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--radius-1);color:var(--input-icon);cursor:pointer;transition:all .15s ease}.ds-input-date__calendar-btn:hover:not(:disabled){background-color:var(--surface-hover);color:var(--color-primary)}.ds-input-date__calendar-btn:focus-visible{outline:2px solid var(--input-focus-border);outline-offset:1px}.ds-input-date__calendar-btn:disabled{opacity:.5;cursor:not-allowed}.ds-input-date__calendar-btn fa-icon{font-size:16px}.ds-input-date__helper{font-size:var(--font-size-1);color:var(--text-muted)}.ds-input-date__error{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-1);color:var(--text-error)}.ds-input-date__error fa-icon{font-size:12px}.ds-input-date__popup{background-color:var(--surface-default);border:1px solid var(--border-color);border-radius:var(--radius-2);box-shadow:var(--shadow-3);overflow:hidden}.ds-input-date--sm .ds-input-date__input{height:var(--input-height-sm);padding-left:var(--space-2);font-size:var(--input-font-size-sm)}.ds-input-date--sm .ds-input-date__calendar-btn{width:24px;height:24px}.ds-input-date--sm .ds-input-date__calendar-btn fa-icon{font-size:14px}.ds-input-date--sm .ds-input-date__clear{width:20px;height:20px}.ds-input-date--sm .ds-input-date__clear fa-icon{font-size:12px}.ds-input-date--lg .ds-input-date__input{height:var(--input-height-lg);padding-left:var(--space-3);font-size:var(--input-font-size-lg)}.ds-input-date--lg .ds-input-date__calendar-btn{width:32px;height:32px}.ds-input-date--lg .ds-input-date__calendar-btn fa-icon{font-size:18px}.ds-input-date--lg .ds-input-date__clear{width:28px;height:28px}.ds-input-date--lg .ds-input-date__clear fa-icon{font-size:16px}.ds-input-date--focused .ds-input-date__input{border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.ds-input-date--open .ds-input-date__calendar-btn{color:var(--color-primary)}.ds-input-date--error .ds-input-date__input{border-color:var(--input-error-border)}.ds-input-date--error .ds-input-date__input:focus{border-color:var(--input-error-border);box-shadow:0 0 0 2px color-mix(in oklab,var(--error) 20%,transparent)}.ds-input-date--error .ds-input-date__calendar-btn{color:var(--error)}.ds-input-date--disabled{pointer-events:none;opacity:.5}.ds-input-date--readonly .ds-input-date__calendar-btn{pointer-events:none}::ng-deep .ds-input-date-overlay{z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: DsDatePicker, selector: "ds-date-picker", inputs: ["size", "mode", "disabled", "minDate", "maxDate", "showTodayButton", "showClearButton", "todayLabel", "clearLabel", "prevMonthLabel", "nextMonthLabel", "presets", "showPresets", "showRangePreview"], outputs: ["dateChange", "rangeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsInputDate, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-input-date', standalone: true, imports: [
+                        CommonModule,
+                        FontAwesomeModule,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        DsDatePicker,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsInputDate),
+                            multi: true,
+                        },
+                    ], template: "<div [class]=\"containerClasses()\">\n  <!-- Label -->\n  @if (label()) {\n    <label class=\"ds-input-date__label\" [attr.for]=\"panelId + '-input'\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Input container -->\n  <div\n    class=\"ds-input-date__wrapper\"\n    #triggerOrigin=\"cdkOverlayOrigin\"\n    cdkOverlayOrigin>\n\n    <input\n      #inputElement\n      type=\"text\"\n      class=\"ds-input-date__input\"\n      [id]=\"panelId + '-input'\"\n      [value]=\"displayValue()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"isOpen() ? panelId : null\"\n      [attr.aria-invalid]=\"inputState() === 'error'\"\n      (input)=\"onInputChange($event)\"\n      (focus)=\"onInputFocus()\"\n      (blur)=\"onInputBlur()\"\n      (keydown)=\"onInputKeydown($event)\">\n\n    <!-- Icons zone -->\n    <div class=\"ds-input-date__icons\">\n      <!-- Clear button -->\n      @if (showClearButton()) {\n        <button\n          type=\"button\"\n          class=\"ds-input-date__clear\"\n          tabindex=\"-1\"\n          aria-label=\"Effacer la date\"\n          (click)=\"clearValue($event)\">\n          <fa-icon [icon]=\"clearIcon\" aria-hidden=\"true\"></fa-icon>\n        </button>\n      }\n\n      <!-- Calendar icon -->\n      <button\n        type=\"button\"\n        class=\"ds-input-date__calendar-btn\"\n        [disabled]=\"isDisabled()\"\n        tabindex=\"-1\"\n        aria-label=\"Ouvrir le calendrier\"\n        (click)=\"onCalendarIconClick($event)\">\n        <fa-icon [icon]=\"calendarIcon\" aria-hidden=\"true\"></fa-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Helper / Error message -->\n  @if (error() || hasParseError()) {\n    <div class=\"ds-input-date__error\">\n      <fa-icon [icon]=\"errorIcon\" aria-hidden=\"true\"></fa-icon>\n      <span>{{ error() || 'Format de date invalide' }}</span>\n    </div>\n  } @else if (helper()) {\n    <div class=\"ds-input-date__helper\">{{ helper() }}</div>\n  }\n</div>\n\n<!-- Date Picker Overlay -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"triggerOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n  [cdkConnectedOverlayPanelClass]=\"'ds-input-date-overlay'\"\n  (backdropClick)=\"onBackdropClick()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\">\n\n  <div\n    class=\"ds-input-date__popup\"\n    [id]=\"panelId\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"S\u00E9lectionner une date\">\n    <ds-date-picker\n      [mode]=\"'single'\"\n      [minDate]=\"effectiveMinDate()\"\n      [maxDate]=\"effectiveMaxDate()\"\n      [showTodayButton]=\"true\"\n      [showClearButton]=\"false\"\n      (dateChange)=\"onDateSelected($event)\">\n    </ds-date-picker>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-flex;width:100%}.ds-input-date{display:flex;flex-direction:column;gap:var(--space-1);width:100%}.ds-input-date__label{display:block;color:var(--input-label-color);font-size:var(--input-label-font-size);font-weight:500;margin-bottom:var(--input-label-margin-bottom)}.ds-input-date__wrapper{position:relative;display:flex;align-items:center}.ds-input-date__input{flex:1;width:100%;height:var(--input-height-md);padding:0 var(--ds-input-date-icon-zone-width, 72px) 0 var(--input-padding-default);background-color:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-border-radius);color:var(--input-text);font-size:var(--input-font-size-md);outline:none;transition:all .2s ease}.ds-input-date__input::placeholder{color:var(--input-placeholder)}.ds-input-date__input:hover:not(:disabled):not([readonly]){border-color:var(--input-hover-border)}.ds-input-date__input:focus:not(:disabled){border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.ds-input-date__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--input-disabled-bg)}.ds-input-date__input[readonly]{cursor:default;background-color:var(--input-disabled-bg)}.ds-input-date__icons{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;gap:var(--space-1);padding-right:var(--space-2)}.ds-input-date__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-1);color:var(--input-icon);cursor:pointer;transition:all .15s ease}.ds-input-date__clear:hover{background-color:var(--surface-hover);color:var(--text-default)}.ds-input-date__clear:focus-visible{outline:2px solid var(--input-focus-border);outline-offset:1px}.ds-input-date__clear fa-icon{font-size:14px}.ds-input-date__calendar-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--radius-1);color:var(--input-icon);cursor:pointer;transition:all .15s ease}.ds-input-date__calendar-btn:hover:not(:disabled){background-color:var(--surface-hover);color:var(--color-primary)}.ds-input-date__calendar-btn:focus-visible{outline:2px solid var(--input-focus-border);outline-offset:1px}.ds-input-date__calendar-btn:disabled{opacity:.5;cursor:not-allowed}.ds-input-date__calendar-btn fa-icon{font-size:16px}.ds-input-date__helper{font-size:var(--font-size-1);color:var(--text-muted)}.ds-input-date__error{display:flex;align-items:center;gap:var(--space-1);font-size:var(--font-size-1);color:var(--text-error)}.ds-input-date__error fa-icon{font-size:12px}.ds-input-date__popup{background-color:var(--surface-default);border:1px solid var(--border-color);border-radius:var(--radius-2);box-shadow:var(--shadow-3);overflow:hidden}.ds-input-date--sm .ds-input-date__input{height:var(--input-height-sm);padding-left:var(--space-2);font-size:var(--input-font-size-sm)}.ds-input-date--sm .ds-input-date__calendar-btn{width:24px;height:24px}.ds-input-date--sm .ds-input-date__calendar-btn fa-icon{font-size:14px}.ds-input-date--sm .ds-input-date__clear{width:20px;height:20px}.ds-input-date--sm .ds-input-date__clear fa-icon{font-size:12px}.ds-input-date--lg .ds-input-date__input{height:var(--input-height-lg);padding-left:var(--space-3);font-size:var(--input-font-size-lg)}.ds-input-date--lg .ds-input-date__calendar-btn{width:32px;height:32px}.ds-input-date--lg .ds-input-date__calendar-btn fa-icon{font-size:18px}.ds-input-date--lg .ds-input-date__clear{width:28px;height:28px}.ds-input-date--lg .ds-input-date__clear fa-icon{font-size:16px}.ds-input-date--focused .ds-input-date__input{border-color:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}.ds-input-date--open .ds-input-date__calendar-btn{color:var(--color-primary)}.ds-input-date--error .ds-input-date__input{border-color:var(--input-error-border)}.ds-input-date--error .ds-input-date__input:focus{border-color:var(--input-error-border);box-shadow:0 0 0 2px color-mix(in oklab,var(--error) 20%,transparent)}.ds-input-date--error .ds-input-date__calendar-btn{color:var(--error)}.ds-input-date--disabled{pointer-events:none;opacity:.5}.ds-input-date--readonly .ds-input-date__calendar-btn{pointer-events:none}::ng-deep .ds-input-date-overlay{z-index:1000}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputElementRef: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], helper: [{ type: i0.Input, args: [{ isSignal: true, alias: "helper", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
+
 /*
  * Components barrel export
  */
@@ -17242,5 +17593,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAccordionItem, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
+export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAccordionItem, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputDate, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
 //# sourceMappingURL=kksdev-ds-angular.mjs.map