@lucca-front/ng 21.3.0-rc.5 → 22.0.0-rc.2

package/fesm2022/lucca-front-ng-date.mjs

@@ -1,13 +1,14 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, InjectionToken, Injectable, input, LOCALE_ID, forwardRef, Input, Inject, ChangeDetectionStrategy, Component, HostListener, Directive, EventEmitter, TemplateRef, ViewChild, Output, inject } from '@angular/core';
+import { Pipe, NgModule, InjectionToken, Injectable, input, LOCALE_ID, forwardRef, Inject, ChangeDetectionStrategy, Component, Directive, EventEmitter, viewChild, TemplateRef, inject } from '@angular/core';
 import * as i1 from '@lucca-front/ng/core';
-import { ELuDateGranularity, intlInputOptions } from '@lucca-front/ng/core';
+import { ELuDateGranularity, intlInputOptions, isNotNil, ɵeffectWithDeps as _effectWithDeps, syncInputSignal } from '@lucca-front/ng/core';
 import { getLocaleDayNames, FormStyle, TranslationWidth, getLocaleFirstDayOfWeek } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { ALuInput, LuInputDisplayerDirective } from '@lucca-front/ng/input';
 import * as i3 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { ALuPickerPanel } from '@lucca-front/ng/picker';
 import { luTransformPopover } from '@lucca-front/ng/popover';
 import * as i1$1 from '@angular/cdk/overlay';
@@ -27,10 +28,10 @@ class LuDateAdapterPipe {
         }
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterPipe, deps: [{ token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterPipe, isStandalone: true, name: "luDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterPipe, deps: [{ token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterPipe, isStandalone: true, name: "luDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luDate',
@@ -42,11 +43,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * @deprecated use `LuDateAdapterPipe` instead
  */
 class LuDateAdapterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterModule, imports: [LuDateAdapterPipe], exports: [LuDateAdapterPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterModule, imports: [LuDateAdapterPipe], exports: [LuDateAdapterPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateAdapterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateAdapterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuDateAdapterPipe],
@@ -100,7 +101,7 @@ class ACalendarItem {
         this.isDisabled = false;
     }
     get id() {
-        return `${this.granularity}-${this.date.toString()}`;
+        return `${this.granularity}-${String(this.date)}`;
     }
 }
 class DayItem extends ACalendarItem {
@@ -162,10 +163,10 @@ class LuCalendarItemFactory {
         const label = `${this._adapter.format(decadeStart, format)} - ${this._adapter.format(decadeEnd, format)}`;
         return new DecadeItem(decadeStart, label);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCalendarItemFactory, deps: [{ token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCalendarItemFactory }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCalendarItemFactory, deps: [{ token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCalendarItemFactory }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCalendarItemFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCalendarItemFactory, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.ALuDateAdapter }] });
 
@@ -187,25 +188,31 @@ class LuCalendarInputComponent extends ALuInput {
         this._factory = _factory;
         this._adapter = _adapter;
         this.intl = input(...intlInputOptions(LU_CALENDARINPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
-        this.granularity = ELuDateGranularity.day;
-        this.startOn = this._adapter.forgeToday();
+        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        this.granularity = input(ELuDateGranularity.day, ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+        this.startOn = input(...(ngDevMode ? [undefined, { debugName: "startOn" }] : /* istanbul ignore next */ []));
         this.items = [];
         // daily view
         this.labels = [];
     }
     ngOnInit() {
-        this.viewGranularity = this.granularity;
+        this.viewGranularity = this.granularity();
         this.initDayLabels();
     }
     writeValue(value) {
-        const date = value && this._adapter.isValid(value) ? this._adapter.clone(value) : this.startOn;
+        const startOn = this.startOn() ?? this._adapter.forgeToday();
+        const date = value && this._adapter.isValid(value) ? this._adapter.clone(value) : startOn;
         this.header = this._factory.forgeMonth(date);
         super.writeValue(value);
     }
     initDayLabels() {
         this.labels = [...getLocaleDayNames(this._locale, FormStyle.Standalone, TranslationWidth.Abbreviated)];
         if (getLocaleFirstDayOfWeek(this._locale) === 1) {
-            this.labels.push(this.labels.shift());
+            const firstLabel = this.labels.shift();
+            if (firstLabel !== undefined) {
+                this.labels.push(firstLabel);
+            }
         }
     }
     render() {
@@ -265,8 +272,10 @@ class LuCalendarInputComponent extends ALuInput {
     applyDailyMods() {
         const month = this.header.date;
         const today = this._adapter.forgeToday();
-        const min = this.min && this._adapter.isValid(this.min) ? this.min : undefined;
-        const max = this.max && this._adapter.isValid(this.max) ? this.max : undefined;
+        const minSignal = this.min();
+        const maxSignal = this.max();
+        const min = isNotNil(minSignal) && this._adapter.isValid(minSignal) ? minSignal : undefined;
+        const max = isNotNil(maxSignal) && this._adapter.isValid(maxSignal) ? maxSignal : undefined;
         this.items.forEach((item) => {
             const day = item.date;
             if (this._adapter.compare(day, month, ELuDateGranularity.month) < 0) {
@@ -291,8 +300,10 @@ class LuCalendarInputComponent extends ALuInput {
     }
     applyMonthlyMods() {
         const today = this._adapter.forgeToday();
-        const min = this.min && this._adapter.isValid(this.min) ? this.min : undefined;
-        const max = this.max && this._adapter.isValid(this.max) ? this.max : undefined;
+        const minSignal = this.min();
+        const maxSignal = this.max();
+        const min = isNotNil(minSignal) && this._adapter.isValid(minSignal) ? minSignal : undefined;
+        const max = isNotNil(maxSignal) && this._adapter.isValid(maxSignal) ? maxSignal : undefined;
         this.items.forEach((item) => {
             const month = item.date;
             if (this._adapter.compare(month, today, ELuDateGranularity.month) === 0) {
@@ -311,8 +322,10 @@ class LuCalendarInputComponent extends ALuInput {
     }
     applyYearlyMods() {
         const today = this._adapter.forgeToday();
-        const min = this.min && this._adapter.isValid(this.min) ? this.min : undefined;
-        const max = this.max && this._adapter.isValid(this.max) ? this.max : undefined;
+        const minSignal = this.min();
+        const maxSignal = this.max();
+        const min = isNotNil(minSignal) && this._adapter.isValid(minSignal) ? minSignal : undefined;
+        const max = maxSignal && this._adapter.isValid(maxSignal) ? maxSignal : undefined;
         this.items.forEach((item) => {
             const year = item.date;
             if (this._adapter.compare(year, today, ELuDateGranularity.year) === 0) {
@@ -351,7 +364,7 @@ class LuCalendarInputComponent extends ALuInput {
         this.setValue(item.date);
     }
     selectMonth(item) {
-        if (this.granularity === ELuDateGranularity.month) {
+        if (this.granularity() === ELuDateGranularity.month) {
             this.setValue(item.date);
         }
         else {
@@ -361,7 +374,7 @@ class LuCalendarInputComponent extends ALuInput {
         }
     }
     selectYear(item) {
-        if (this.granularity === ELuDateGranularity.year) {
+        if (this.granularity() === ELuDateGranularity.year) {
             this.setValue(item.date);
         }
         else {
@@ -438,16 +451,18 @@ class LuCalendarInputComponent extends ALuInput {
         if (!this._adapter.isValid(d)) {
             return { date: true };
         }
-        if (!!this.min && this._adapter.isValid(this.min) && this._adapter.compare(this.min, d, ELuDateGranularity.day) > 0) {
+        const min = this.min();
+        if (!!min && this._adapter.isValid(min) && this._adapter.compare(min, d, ELuDateGranularity.day) > 0) {
             return { min: true };
         }
-        if (!!this.max && this._adapter.isValid(this.max) && this._adapter.compare(this.max, d, ELuDateGranularity.day) < 0) {
+        const max = this.max();
+        if (!!max && this._adapter.isValid(max) && this._adapter.compare(max, d, ELuDateGranularity.day) < 0) {
             return { max: true };
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCalendarInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: LuCalendarItemFactory }, { token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: LuCalendarInputComponent, isStandalone: true, selector: "lu-calendar", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: false, isRequired: false, transformFunction: null }, startOn: { classPropertyName: "startOn", publicName: "startOn", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCalendarInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: LuCalendarItemFactory }, { token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LuCalendarInputComponent, isStandalone: true, selector: "lu-calendar", inputs: { intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, startOn: { classPropertyName: "startOn", publicName: "startOn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuCalendarInputComponent),
@@ -461,7 +476,7 @@ class LuCalendarInputComponent extends ALuInput {
             LuCalendarItemFactory,
         ], usesInheritance: true, ngImport: i0, template: "<section class=\"calendar\">\n\t<header class=\"calendar-header\">\n\t\t<button type=\"button\" class=\"button mod-onlyIcon mod-ghost mod-S\" (click)=\"previous()\">\n\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-arrowChevronLeft\"></span>\n\t\t\t<span class=\"pr-u-mask\">{{ intl().previous }}</span>\n\t\t</button>\n\t\t<button type=\"button\" class=\"calendar-header-date\" (click)=\"increaseGranularity()\">{{ header.label }}</button>\n\t\t<button type=\"button\" class=\"button mod-onlyIcon mod-ghost mod-S\" (click)=\"next()\">\n\t\t\t<span aria-hidden=\"true\" class=\"lucca-icon icon-arrowChevronRight\"></span>\n\t\t\t<span class=\"pr-u-mask\">{{ intl().next }}</span>\n\t\t</button>\n\t</header>\n\t<section class=\"calendar-labels\" [class]=\"mod\">\n\t\t@for (label of labels; track label) {\n\t\t\t<div class=\"calendar-labels-item\">{{ label }}</div>\n\t\t}\n\t</section>\n\t<section class=\"calendar-grid\" [class]=\"mod\">\n\t\t@for (item of items; track item.id) {\n\t\t\t<button type=\"button\" class=\"calendar-grid-item\" [class]=\"item.mods\" [disabled]=\"item.isDisabled\" (click)=\"select(item)\">\n\t\t\t\t<div class=\"calendar-grid-item-content\">{{ item.label }}</div>\n\t\t\t</button>\n\t\t}\n\t</section>\n</section>\n", styles: ["@layer components{.calendar{background-color:var(--pr-t-elevation-surface-raised);inline-size:var(--components-calendar-width)}}@layer mods{:host-context(.mod-block) .calendar{inline-size:auto;max-inline-size:var(--components-calendar-width)}}@layer components{.calendar-header{display:flex;align-items:center;justify-content:space-between}}@layer components{.calendar-header-date{font:var(--pr-t-font-heading-3);color:var(--pr-t-color-text-heading);font-weight:var(--pr-t-font-fontWeight-semibold);padding:0;background:transparent;border:none;cursor:pointer}}@layer mods{.calendar-header-date:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:4px}}@layer components{.calendar-labels{display:none}}@layer mods{.calendar-labels.mod-dailyView{display:flex;align-items:center;flex-wrap:wrap;text-align:center;block-size:var(--components-calendar-day-size);font-size:var(--pr-t-font-body-S-fontSize);color:var(--palettes-product-700)}.calendar-labels.mod-dailyView .calendar-labels-item{inline-size:var(--components-calendar-day-size)}}@layer components{.calendar-grid{display:flex;text-align:center;align-self:stretch;flex-wrap:wrap;inline-size:var(--components-calendar-width)}}@layer mods{.calendar-grid.mod-dailyView .calendar-grid-item{inline-size:var(--components-calendar-day-size)}.calendar-grid.mod-monthlyView .calendar-grid-item-content,.calendar-grid.mod-yearlyView .calendar-grid-item-content{inline-size:5.83rem}}@layer components{.calendar-grid-item{block-size:var(--components-calendar-day-size);border:none;cursor:pointer;background:transparent;position:relative;padding:0;outline:none;color:var(--pr-t-color-text)}}@layer mods{.calendar-grid-item.is-disabled,.calendar-grid-item[disabled]{color:var(--palettes-neutral-500);text-decoration:line-through;cursor:default}.calendar-grid-item.is-disabled:hover .calendar-grid-item-content,.calendar-grid-item.is-disabled:active .calendar-grid-item-content,.calendar-grid-item[disabled]:hover .calendar-grid-item-content,.calendar-grid-item[disabled]:active .calendar-grid-item-content{background-color:transparent}.calendar-grid-item.is-previousMonth,.calendar-grid-item.is-nextMonth{color:var(--palettes-neutral-500)}.calendar-grid-item.is-today{color:var(--palettes-product-700);font-weight:var(--pr-t-font-fontWeight-semibold)}.calendar-grid-item.is-today:after{content:\"\";position:absolute;inset-block-end:var(--pr-t-spacings-50);inset-inline:var(--pr-t-spacings-100) var(--pr-t-spacings-100);block-size:2px;background:var(--palettes-product-700);z-index:1}.calendar-grid-item:hover .calendar-grid-item-content{background:var(--palettes-neutral-50)}.calendar-grid-item:active .calendar-grid-item-content{background:var(--palettes-neutral-100)}.calendar-grid-item:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-default);z-index:1}.calendar-grid-item.is-active .calendar-grid-item-content{background:var(--palettes-product-700);color:var(--palettes-product-0)}.calendar-grid-item.is-active.is-today{color:var(--palettes-product-700);font-weight:600}.calendar-grid-item.is-active.is-today:after{content:\"\";position:absolute;inset-block-end:var(--pr-t-spacings-50);inset-inline:var(--pr-t-spacings-100) var(--pr-t-spacings-100);block-size:2px;background:var(--palettes-product-700);z-index:1}.calendar-grid-item.is-active:hover .calendar-grid-item-content{background:var(--palettes-neutral-50)}.calendar-grid-item.is-active:active .calendar-grid-item-content{background:var(--palettes-neutral-100)}.calendar-grid-item.is-active:focus-visible{outline:2px solid var(--palettes-700, var(--palettes-product-700));outline-offset:2px;border-radius:var(--pr-t-border-radius-default);z-index:1}.calendar-grid-item.is-active.is-active .calendar-grid-item-content{background:var(--palettes-product-700);color:var(--palettes-product-0)}.calendar-grid-item.is-active.is-active.is-today:after{background-color:var(--palettes-neutral-0)!important;transition:background-color var(--commons-animations-durations-fast)}.calendar-grid-item.is-active.is-disabled,.calendar-grid-item.is-active[disabled]{color:var(--palettes-neutral-500);pointer-events:none}.calendar-grid-item.is-active.is-disabled:hover .calendar-grid-item-content,.calendar-grid-item.is-active[disabled]:hover .calendar-grid-item-content{background-color:var(--palettes-neutral-0)}}@layer components{.calendar-grid-item-content{position:relative;block-size:var(--components-calendar-day-size);inline-size:var(--components-calendar-day-size);line-height:var(--components-calendar-day-size);border-radius:var(--pr-t-border-radius-default);transition-duration:var(--commons-animations-durations-fast);transition-property:background-color,color}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuCalendarInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuCalendarInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], providers: [
                         {
@@ -479,15 +494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
-                }] }, { type: LuCalendarItemFactory }, { type: i1.ALuDateAdapter }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], granularity: [{
-                type: Input
-            }], startOn: [{
-                type: Input
-            }] } });
+                }] }, { type: LuCalendarItemFactory }, { type: i1.ALuDateAdapter }], propDecorators: { intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], startOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOn", required: false }] }] } });
 
 const Translations$1 = {
     pt: {
@@ -545,29 +552,37 @@ class LuDateInputDirective extends ALuInput {
         super(_changeDetectorRef, _elementRef, _renderer);
         this._adapter = _adapter;
         this._focused = false;
-        this.granularity = ELuDateGranularity.day;
+        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        this.granularity = input(ELuDateGranularity.day, ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+        this.placeHolderInput = input('', { ...(ngDevMode ? { debugName: "placeHolderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
         this.intl = input(...intlInputOptions(LU_DATE_INPUT_TRANSLATIONS), ...(ngDevMode ? [{ debugName: "intl" }] : /* istanbul ignore next */ []));
-    }
-    ngOnInit() {
-        switch (this.granularity) {
-            case ELuDateGranularity.year:
-                this.placeholder = this.intl().placeholderYear;
-                break;
-            case ELuDateGranularity.month:
-                this.placeholder = this.intl().placeholderMonth;
-                break;
-            case ELuDateGranularity.day:
-            default:
-                this.placeholder = this.intl().placeholderDay;
-                break;
-        }
+        _effectWithDeps([this.placeHolderInput, this.granularity, this.intl], (placeHolderInput, granularity, intl) => {
+            if (placeHolderInput) {
+                this._elementRef.nativeElement.placeholder = placeHolderInput;
+            }
+            else {
+                switch (granularity) {
+                    case ELuDateGranularity.year:
+                        this._elementRef.nativeElement.placeholder = intl.placeholderYear;
+                        break;
+                    case ELuDateGranularity.month:
+                        this._elementRef.nativeElement.placeholder = intl.placeholderMonth;
+                        break;
+                    case ELuDateGranularity.day:
+                    default:
+                        this._elementRef.nativeElement.placeholder = intl.placeholderDay;
+                        break;
+                }
+            }
+        });
     }
     render() {
         if (this._focused) {
             return;
         }
         let format;
-        switch (this.granularity) {
+        switch (this.granularity()) {
             case ELuDateGranularity.year:
                 format = 'y';
                 break;
@@ -587,11 +602,12 @@ class LuDateInputDirective extends ALuInput {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         const text = event.target.value;
         const value = this.parse(text);
-        this.setValue(value);
+        if (isNotNil(value)) {
+            this.setValue(value);
+        }
     }
     parse(text) {
-        const date = this._adapter.parse(text, this.granularity);
-        return date;
+        return this._adapter.parse(text, this.granularity());
     }
     onFocus() {
         this._focused = true;
@@ -608,16 +624,18 @@ class LuDateInputDirective extends ALuInput {
         if (!this._adapter.isValid(d)) {
             return { date: true };
         }
-        if (!!this.min && this._adapter.isValid(this.min) && this._adapter.compare(this.min, d, ELuDateGranularity.day) > 0) {
+        const min = this.min();
+        if (!!min && this._adapter.isValid(min) && this._adapter.compare(min, d, ELuDateGranularity.day) > 0) {
             return { min: true };
         }
-        if (!!this.max && this._adapter.isValid(this.max) && this._adapter.compare(this.max, d, ELuDateGranularity.day) < 0) {
+        const max = this.max();
+        if (!!max && this._adapter.isValid(max) && this._adapter.compare(max, d, ELuDateGranularity.day) < 0) {
             return { max: true };
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: LuDateInputDirective, isStandalone: true, selector: "input[luDateInput]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuDateInputDirective, isStandalone: true, selector: "input[luDateInput]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, placeHolderInput: { classPropertyName: "placeHolderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, intl: { classPropertyName: "intl", publicName: "intl", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "onInput($event)", "focus": "onFocus()", "blur": "onBlur()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuDateInputDirective),
@@ -630,10 +648,15 @@ class LuDateInputDirective extends ALuInput {
             },
         ], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[luDateInput]',
+                    host: {
+                        '(input)': 'onInput($event)',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                    },
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -647,41 +670,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ALuDateAdapter }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], granularity: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }], onInput: [{
-                type: HostListener,
-                args: ['input', ['$event']]
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.ALuDateAdapter }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], placeHolderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], intl: [{ type: i0.Input, args: [{ isSignal: true, alias: "intl", required: false }] }] } });
 
 //FIXME
 /* eslint-disable @angular-eslint/no-output-on-prefix */
 /* eslint-disable @angular-eslint/no-output-native */
 class LuDatePickerComponent extends ALuPickerPanel {
-    set vcTemplateRef(tr) {
-        this.templateRef = tr;
-    }
     constructor(_adapter) {
         super();
         this._adapter = _adapter;
-        this.granularity = ELuDateGranularity.day;
-        this.startOn = this._adapter.forgeToday();
+        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        this.granularity = input(ELuDateGranularity.day, ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+        this.startOn = input(...(ngDevMode ? [undefined, { debugName: "startOn" }] : /* istanbul ignore next */ []));
         this.close = new EventEmitter();
         this.open = new EventEmitter();
         this.hovered = new EventEmitter();
         this.onSelectValue = new EventEmitter();
+        this.closeOutput = outputFromObservable(this.close, { alias: 'close' });
+        this.openOutput = outputFromObservable(this.open, { alias: 'open' });
+        this.hoveredOutput = outputFromObservable(this.hovered, { alias: 'hovered' });
+        this.onSelectValueOutput = outputFromObservable(this.onSelectValue, { alias: 'onSelectValue' });
+        this.vcTemplateRef = viewChild.required(TemplateRef);
+        _effectWithDeps([this.vcTemplateRef], (vcTemplateRef) => {
+            this.templateRef = vcTemplateRef;
+        });
     }
     _emitOpenEvent() {
         this.open.emit();
@@ -724,52 +737,33 @@ class LuDatePickerComponent extends ALuPickerPanel {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDatePickerComponent, deps: [{ token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: LuDatePickerComponent, isStandalone: true, selector: "lu-date-picker", inputs: { min: "min", max: "max", granularity: "granularity", startOn: "startOn" }, outputs: { close: "close", open: "open", hovered: "hovered", onSelectValue: "onSelectValue" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDatePickerComponent, deps: [{ token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: LuDatePickerComponent, isStandalone: true, selector: "lu-date-picker", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, startOn: { classPropertyName: "startOn", publicName: "startOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeOutput: "close", openOutput: "open", hoveredOutput: "hovered", onSelectValueOutput: "onSelectValue" }, providers: [
             {
                 provide: ALuPickerPanel,
                 useExisting: forwardRef(() => LuDatePickerComponent),
             },
-        ], viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["LuDatePicker"], usesInheritance: true, ngImport: i0, template: "<ng-template>\n\t<div\n\t\tclass=\"lu-picker-panel lu-date-picker-panel\"\n\t\trole=\"dialog\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t>\n\t\t<div class=\"lu-picker-content\" [class]=\"contentClassesMap\" cdkTrapFocus=\"false\" cdkTrapFocusAutoCapture=\"true\">\n\t\t\t<label class=\"textfield lu-picker-textfield\">\n\t\t\t\t<input\n\t\t\t\t\tluDateInput\n\t\t\t\t\tclass=\"textfield-input\"\n\t\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t\t(ngModelChange)=\"_onInput($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(keydown.enter)=\"_onEnter()\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[granularity]=\"granularity\"\n\t\t\t\t/>\n\t\t\t</label>\n\t\t\t<lu-calendar\n\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t(ngModelChange)=\"_onCalendar($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[granularity]=\"granularity\"\n\t\t\t\t[startOn]=\"startOn\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LuCalendarInputComponent, selector: "lu-calendar", inputs: ["intl", "min", "max", "granularity", "startOn"] }, { kind: "directive", type: LuDateInputDirective, selector: "input[luDateInput]", inputs: ["min", "max", "granularity", "placeholder", "intl"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["LuDatePicker"], usesInheritance: true, ngImport: i0, template: "<ng-template>\n\t<div\n\t\tclass=\"lu-picker-panel lu-date-picker-panel\"\n\t\trole=\"dialog\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t>\n\t\t<div class=\"lu-picker-content\" [class]=\"contentClassesMap\" cdkTrapFocus=\"false\" cdkTrapFocusAutoCapture=\"true\">\n\t\t\t<label class=\"textfield lu-picker-textfield\">\n\t\t\t\t<input\n\t\t\t\t\tluDateInput\n\t\t\t\t\tclass=\"textfield-input\"\n\t\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t\t(ngModelChange)=\"_onInput($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(keydown.enter)=\"_onEnter()\"\n\t\t\t\t\t[min]=\"min()\"\n\t\t\t\t\t[max]=\"max()\"\n\t\t\t\t\t[granularity]=\"granularity()\"\n\t\t\t\t/>\n\t\t\t</label>\n\t\t\t<lu-calendar\n\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t(ngModelChange)=\"_onCalendar($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[granularity]=\"granularity()\"\n\t\t\t\t[startOn]=\"startOn()\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LuCalendarInputComponent, selector: "lu-calendar", inputs: ["intl", "min", "max", "granularity", "startOn"] }, { kind: "directive", type: LuDateInputDirective, selector: "input[luDateInput]", inputs: ["min", "max", "granularity", "placeholder", "intl"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'LuDatePicker', animations: [luTransformPopover], imports: [FormsModule, LuCalendarInputComponent, LuDateInputDirective, A11yModule], providers: [
                         {
                             provide: ALuPickerPanel,
                             useExisting: forwardRef(() => LuDatePickerComponent),
                         },
-                    ], template: "<ng-template>\n\t<div\n\t\tclass=\"lu-picker-panel lu-date-picker-panel\"\n\t\trole=\"dialog\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t>\n\t\t<div class=\"lu-picker-content\" [class]=\"contentClassesMap\" cdkTrapFocus=\"false\" cdkTrapFocusAutoCapture=\"true\">\n\t\t\t<label class=\"textfield lu-picker-textfield\">\n\t\t\t\t<input\n\t\t\t\t\tluDateInput\n\t\t\t\t\tclass=\"textfield-input\"\n\t\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t\t(ngModelChange)=\"_onInput($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(keydown.enter)=\"_onEnter()\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[granularity]=\"granularity\"\n\t\t\t\t/>\n\t\t\t</label>\n\t\t\t<lu-calendar\n\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t(ngModelChange)=\"_onCalendar($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[granularity]=\"granularity\"\n\t\t\t\t[startOn]=\"startOn\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1.ALuDateAdapter }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], granularity: [{
-                type: Input
-            }], startOn: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }], open: [{
-                type: Output
-            }], hovered: [{
-                type: Output
-            }], onSelectValue: [{
-                type: Output
-            }], vcTemplateRef: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }] } });
+                    ], template: "<ng-template>\n\t<div\n\t\tclass=\"lu-picker-panel lu-date-picker-panel\"\n\t\trole=\"dialog\"\n\t\t[class]=\"panelClassesMap\"\n\t\t(click)=\"onClick()\"\n\t\t(mouseover)=\"onMouseOver()\"\n\t\t(mouseleave)=\"onMouseLeave()\"\n\t\t(mousedown)=\"onMouseDown()\"\n\t>\n\t\t<div class=\"lu-picker-content\" [class]=\"contentClassesMap\" cdkTrapFocus=\"false\" cdkTrapFocusAutoCapture=\"true\">\n\t\t\t<label class=\"textfield lu-picker-textfield\">\n\t\t\t\t<input\n\t\t\t\t\tluDateInput\n\t\t\t\t\tclass=\"textfield-input\"\n\t\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t\t(ngModelChange)=\"_onInput($event)\"\n\t\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t\t(keydown.enter)=\"_onEnter()\"\n\t\t\t\t\t[min]=\"min()\"\n\t\t\t\t\t[max]=\"max()\"\n\t\t\t\t\t[granularity]=\"granularity()\"\n\t\t\t\t/>\n\t\t\t</label>\n\t\t\t<lu-calendar\n\t\t\t\t[ngModel]=\"_value\"\n\t\t\t\t(ngModelChange)=\"_onCalendar($event)\"\n\t\t\t\t[ngModelOptions]=\"{ standalone: true }\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[granularity]=\"granularity()\"\n\t\t\t\t[startOn]=\"startOn()\"\n\t\t\t/>\n\t\t</div>\n\t</div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: i1.ALuDateAdapter }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], startOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOn", required: false }] }], closeOutput: [{ type: i0.Output, args: ["close"] }], openOutput: [{ type: i0.Output, args: ["open"] }], hoveredOutput: [{ type: i0.Output, args: ["hovered"] }], onSelectValueOutput: [{ type: i0.Output, args: ["onSelectValue"] }], vcTemplateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 /**
  * @deprecated use `LuDatePickerComponent` instead
  */
 class LuDatePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuDatePickerModule, imports: [LuDatePickerComponent], exports: [LuDatePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDatePickerModule, imports: [LuDatePickerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDatePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuDatePickerModule, imports: [LuDatePickerComponent], exports: [LuDatePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDatePickerModule, imports: [LuDatePickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDatePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuDatePickerComponent],
@@ -778,17 +772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }] });
 
 class LuDateSelectInputComponent extends ALuSelectInputComponent {
-    set inputPlaceholder(p) {
-        this._placeholder = p;
-    }
-    set startOn(s) {
-        this._startOn = s ?? this._adapter.forgeToday();
-    }
-    get startOn() {
-        return this._startOn;
-    }
     get format() {
-        switch (this.granularity) {
+        switch (this.granularity()) {
             case ELuDateGranularity.year:
                 return 'y';
             case ELuDateGranularity.month:
@@ -806,10 +791,16 @@ class LuDateSelectInputComponent extends ALuSelectInputComponent {
         this._viewContainerRef = _viewContainerRef;
         this._renderer = _renderer;
         this._adapter = _adapter;
-        this.granularity = ELuDateGranularity.day;
-        this.hideClearer = false;
+        this.min = input(...(ngDevMode ? [undefined, { debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : /* istanbul ignore next */ []));
+        this.granularity = input(ELuDateGranularity.day, ...(ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []));
+        this.hideClearer = input(false, ...(ngDevMode ? [{ debugName: "hideClearer" }] : /* istanbul ignore next */ []));
+        this.startOn = input(...(ngDevMode ? [undefined, { debugName: "startOn" }] : /* istanbul ignore next */ []));
         this._startOn = this._adapter.forgeToday();
-        this.overlapInput = true;
+        this.pickerOverlapRef.set(true);
+        syncInputSignal(this.startOn, (s) => {
+            this._startOn = s ?? this._adapter.forgeToday();
+        });
     }
     validate(control) {
         const d = control.value;
@@ -819,16 +810,18 @@ class LuDateSelectInputComponent extends ALuSelectInputComponent {
         if (!this._adapter.isValid(d)) {
             return { date: true };
         }
-        if (!!this.min && this._adapter.isValid(this.min) && this._adapter.compare(this.min, d, ELuDateGranularity.day) > 0) {
+        const min = this.min();
+        if (!!min && this._adapter.isValid(min) && this._adapter.compare(min, d, ELuDateGranularity.day) > 0) {
             return { min: true };
         }
-        if (!!this.max && this._adapter.isValid(this.max) && this._adapter.compare(this.max, d, ELuDateGranularity.day) < 0) {
+        const max = this.max();
+        if (!!max && this._adapter.isValid(max) && this._adapter.compare(max, d, ELuDateGranularity.day) < 0) {
             return { max: true };
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateSelectInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: LuDateSelectInputComponent, isStandalone: true, selector: "lu-date-select", inputs: { min: "min", max: "max", granularity: "granularity", inputPlaceholder: ["placeholder", "inputPlaceholder"], hideClearer: "hideClearer", startOn: "startOn" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateSelectInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i1.ALuDateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: LuDateSelectInputComponent, isStandalone: true, selector: "lu-date-select", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, granularity: { classPropertyName: "granularity", publicName: "granularity", isSignal: true, isRequired: false, transformFunction: null }, hideClearer: { classPropertyName: "hideClearer", publicName: "hideClearer", isSignal: true, isRequired: false, transformFunction: null }, startOn: { classPropertyName: "startOn", publicName: "startOn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => LuDateSelectInputComponent),
@@ -839,9 +832,9 @@ class LuDateSelectInputComponent extends ALuSelectInputComponent {
                 useExisting: LuDateSelectInputComponent,
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\n<div class=\"lu-select-value\">\n\t<div class=\"lu-select-display-wrapper notranslate\">\n\t\t<ng-container #display />\n\t</div>\n</div>\n<div class=\"lu-select-suffix\">\n\t<lu-clear [attr.hidden]=\"hideClearer ? 'hidden' : null\" />\n</div>\n<ng-template luDisplayer let-value> {{ value | luDate: format }} </ng-template>\n<lu-date-picker [min]=\"min\" [max]=\"max\" [granularity]=\"granularity\" [startOn]=\"startOn\" />\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-select-input-padding-horizontal: var(--pr-t-spacings-100);--components-select-input-padding-vertical: var(--pr-t-spacings-100);--components-select-framed-color: var(--palettes-neutral-500);--components-select-framed-color50: var(--palettes-neutral-50);--components-select-framed-see-through: var(--palettes-neutral-50);--components-select-framed-text: var(--pr-t-color-text);--components-select-framed-placeholder: #cccccc;--components-select-framed-side-padding: var(--pr-t-spacings-200);--components-select-framed-top-padding: var(--pr-t-spacings-400);--components-select-framed-bottom-padding: var(--pr-t-spacings-200);--components-select-framed-label-top-offset: var(--pr-t-spacings-100);cursor:pointer;outline:none;padding:0;gap:0}:host:after{--icon-content: \"\\e97c\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);inset-block-end:var(--components-select-input-padding-vertical);font-size:var(--pr-t-font-body-M-lineHeight);line-height:var(--pr-t-font-body-M-lineHeight);pointer-events:none;position:absolute;inset-inline-end:var(--components-select-input-padding-horizontal);transition:transform var(--commons-animations-durations-standard) ease}}@layer mods{:host[disabled],:host.is-disabled{cursor:not-allowed;pointer-events:all}}@layer components{.lu-select-display-wrapper{display:block;inline-size:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lu-select-value{font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);display:none}.lu-select-placeholder{color:var(--palettes-neutral-400);font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix,.lu-select-clearer{position:absolute;inset-block-end:var(--pr-t-spacings-150);inset-inline-end:2.5rem}::ng-deep .lu-select-value .chip{display:inline-flex;max-inline-size:100%;margin-block:0 var(--pr-t-spacings-50);margin-inline:0 var(--pr-t-spacings-50);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}@layer mods{:host-context(.textfield.mod-S){padding:0}:host-context(.textfield.mod-S) .lu-select-value,:host-context(.textfield.mod-S) .lu-select-placeholder{font-size:var(--pr-t-font-body-S-fontSize);line-height:var(--pr-t-font-body-XS-lineHeight);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-XS-lineHeight))}:host-context(.textfield.mod-S) .lu-select-clearer{inset-block-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-S):after{line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-S-lineHeight)}:host-context(.textfield.mod-S) .lu-select-suffix{inset-block-end:.5rem;inset-inline-end:2rem}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .chip{block-size:var(--pr-t-font-body-XS-lineHeight);line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-XS-fontSize);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50)}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding-block:var(--components-select-framed-top-padding) 0;padding-inline:0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:var(--palettes-neutral-500);inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-value{padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400);padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;block-size:auto;padding-block-start:var(--pr-t-spacings-200);color:var(--pr-t-color-text)}:host-context(.textfield.mod-material):after{color:var(--palettes-neutral-500);inset-block-end:.6rem;inset-inline-end:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-inline:0 .8rem}:host-context(.textfield.mod-material) .lu-select-suffix{inset-inline-end:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{inset-block-end:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{inset-inline-end:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple) .lu-select-value{block-size:auto;align-items:center}:host(.mod-multiple) .lu-select-display-wrapper{overflow:visible;white-space:normal;margin-block-end:calc(var(--pr-t-spacings-50) * -1)}:host-context(.textfield.mod-outlined).textfield-input:after{color:var(--palettes-neutral-600)}:host-context(.textfield.mod-outlined).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error):after{color:var(--palettes-error-600)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex;align-items:flex-start}:host-context(.textfield .textfield-input.is-focused):after{transform:rotate(180deg)}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-inline-end:3.5rem}:host-context(.textfield-input.is-error,.textfield-input.is-invalid,.textfield-input.ng-invalid.ng-touched) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:var(--commons-disabled-placeholder)}}@layer components{:host:after{--icon-content: \"\\e920\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;transform:none!important}}\n"], dependencies: [{ kind: "component", type: LuDatePickerComponent, selector: "lu-date-picker", inputs: ["min", "max", "granularity", "startOn"], outputs: ["close", "open", "hovered", "onSelectValue"], exportAs: ["LuDatePicker"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { kind: "pipe", type: LuDateAdapterPipe, name: "luDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\n<div class=\"lu-select-value\">\n\t<div class=\"lu-select-display-wrapper notranslate\">\n\t\t<ng-container #display />\n\t</div>\n</div>\n<div class=\"lu-select-suffix\">\n\t<lu-clear [attr.hidden]=\"hideClearer() ? 'hidden' : null\" />\n</div>\n<ng-template luDisplayer let-value> {{ value | luDate: format }} </ng-template>\n<lu-date-picker [min]=\"min()\" [max]=\"max()\" [granularity]=\"granularity()\" [startOn]=\"startOn()\" />\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-select-input-padding-horizontal: var(--pr-t-spacings-100);--components-select-input-padding-vertical: var(--pr-t-spacings-100);--components-select-framed-color: var(--palettes-neutral-500);--components-select-framed-color50: var(--palettes-neutral-50);--components-select-framed-see-through: var(--palettes-neutral-50);--components-select-framed-text: var(--pr-t-color-text);--components-select-framed-placeholder: #cccccc;--components-select-framed-side-padding: var(--pr-t-spacings-200);--components-select-framed-top-padding: var(--pr-t-spacings-400);--components-select-framed-bottom-padding: var(--pr-t-spacings-200);--components-select-framed-label-top-offset: var(--pr-t-spacings-100);cursor:pointer;outline:none;padding:0;gap:0}:host:after{--icon-content: \"\\e97c\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);inset-block-end:var(--components-select-input-padding-vertical);font-size:var(--pr-t-font-body-M-lineHeight);line-height:var(--pr-t-font-body-M-lineHeight);pointer-events:none;position:absolute;inset-inline-end:var(--components-select-input-padding-horizontal);transition:transform var(--commons-animations-durations-standard) ease}}@layer mods{:host[disabled],:host.is-disabled{cursor:not-allowed;pointer-events:all}}@layer components{.lu-select-display-wrapper{display:block;inline-size:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lu-select-value{font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);display:none}.lu-select-placeholder{color:var(--palettes-neutral-400);font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix,.lu-select-clearer{position:absolute;inset-block-end:var(--pr-t-spacings-150);inset-inline-end:2.5rem}::ng-deep .lu-select-value .chip{display:inline-flex;max-inline-size:100%;margin-block:0 var(--pr-t-spacings-50);margin-inline:0 var(--pr-t-spacings-50);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}@layer mods{:host-context(.textfield.mod-S){padding:0}:host-context(.textfield.mod-S) .lu-select-value,:host-context(.textfield.mod-S) .lu-select-placeholder{font-size:var(--pr-t-font-body-S-fontSize);line-height:var(--pr-t-font-body-XS-lineHeight);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-XS-lineHeight))}:host-context(.textfield.mod-S) .lu-select-clearer{inset-block-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-S):after{line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-S-lineHeight)}:host-context(.textfield.mod-S) .lu-select-suffix{inset-block-end:.5rem;inset-inline-end:2rem}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .chip{block-size:var(--pr-t-font-body-XS-lineHeight);line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-XS-fontSize);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50)}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding-block:var(--components-select-framed-top-padding) 0;padding-inline:0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:var(--palettes-neutral-500);inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-value{padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400);padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;block-size:auto;padding-block-start:var(--pr-t-spacings-200);color:var(--pr-t-color-text)}:host-context(.textfield.mod-material):after{color:var(--palettes-neutral-500);inset-block-end:.6rem;inset-inline-end:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-inline:0 .8rem}:host-context(.textfield.mod-material) .lu-select-suffix{inset-inline-end:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{inset-block-end:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{inset-inline-end:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple) .lu-select-value{block-size:auto;align-items:center}:host(.mod-multiple) .lu-select-display-wrapper{overflow:visible;white-space:normal;margin-block-end:calc(var(--pr-t-spacings-50) * -1)}:host-context(.textfield.mod-outlined).textfield-input:after{color:var(--palettes-neutral-600)}:host-context(.textfield.mod-outlined).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error):after{color:var(--palettes-error-600)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex;align-items:flex-start}:host-context(.textfield .textfield-input.is-focused):after{transform:rotate(180deg)}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-inline-end:3.5rem}:host-context(.textfield-input.is-error,.textfield-input.is-invalid,.textfield-input.ng-invalid.ng-touched) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:var(--commons-disabled-placeholder)}}@layer components{:host:after{--icon-content: \"\\e920\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;transform:none!important}}\n"], dependencies: [{ kind: "component", type: LuDatePickerComponent, selector: "lu-date-picker", inputs: ["min", "max", "granularity", "startOn"], outputs: ["close", "open", "hovered", "onSelectValue"], exportAs: ["LuDatePicker"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: ClearComponent, selector: "lu-clear", inputs: ["intl", "size", "disabled", "palette", "inverted"], outputs: ["onClear"], exportAs: ["luClearer"] }, { kind: "directive", type: LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { kind: "pipe", type: LuDateAdapterPipe, name: "luDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateSelectInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-date-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [LuDateAdapterPipe, LuDatePickerComponent, OverlayModule, ClearComponent, LuInputDisplayerDirective], providers: [
                         {
@@ -854,31 +847,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                             useExisting: LuDateSelectInputComponent,
                             multi: true,
                         },
-                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\n<div class=\"lu-select-value\">\n\t<div class=\"lu-select-display-wrapper notranslate\">\n\t\t<ng-container #display />\n\t</div>\n</div>\n<div class=\"lu-select-suffix\">\n\t<lu-clear [attr.hidden]=\"hideClearer ? 'hidden' : null\" />\n</div>\n<ng-template luDisplayer let-value> {{ value | luDate: format }} </ng-template>\n<lu-date-picker [min]=\"min\" [max]=\"max\" [granularity]=\"granularity\" [startOn]=\"startOn\" />\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-select-input-padding-horizontal: var(--pr-t-spacings-100);--components-select-input-padding-vertical: var(--pr-t-spacings-100);--components-select-framed-color: var(--palettes-neutral-500);--components-select-framed-color50: var(--palettes-neutral-50);--components-select-framed-see-through: var(--palettes-neutral-50);--components-select-framed-text: var(--pr-t-color-text);--components-select-framed-placeholder: #cccccc;--components-select-framed-side-padding: var(--pr-t-spacings-200);--components-select-framed-top-padding: var(--pr-t-spacings-400);--components-select-framed-bottom-padding: var(--pr-t-spacings-200);--components-select-framed-label-top-offset: var(--pr-t-spacings-100);cursor:pointer;outline:none;padding:0;gap:0}:host:after{--icon-content: \"\\e97c\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);inset-block-end:var(--components-select-input-padding-vertical);font-size:var(--pr-t-font-body-M-lineHeight);line-height:var(--pr-t-font-body-M-lineHeight);pointer-events:none;position:absolute;inset-inline-end:var(--components-select-input-padding-horizontal);transition:transform var(--commons-animations-durations-standard) ease}}@layer mods{:host[disabled],:host.is-disabled{cursor:not-allowed;pointer-events:all}}@layer components{.lu-select-display-wrapper{display:block;inline-size:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lu-select-value{font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);display:none}.lu-select-placeholder{color:var(--palettes-neutral-400);font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix,.lu-select-clearer{position:absolute;inset-block-end:var(--pr-t-spacings-150);inset-inline-end:2.5rem}::ng-deep .lu-select-value .chip{display:inline-flex;max-inline-size:100%;margin-block:0 var(--pr-t-spacings-50);margin-inline:0 var(--pr-t-spacings-50);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}@layer mods{:host-context(.textfield.mod-S){padding:0}:host-context(.textfield.mod-S) .lu-select-value,:host-context(.textfield.mod-S) .lu-select-placeholder{font-size:var(--pr-t-font-body-S-fontSize);line-height:var(--pr-t-font-body-XS-lineHeight);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-XS-lineHeight))}:host-context(.textfield.mod-S) .lu-select-clearer{inset-block-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-S):after{line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-S-lineHeight)}:host-context(.textfield.mod-S) .lu-select-suffix{inset-block-end:.5rem;inset-inline-end:2rem}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .chip{block-size:var(--pr-t-font-body-XS-lineHeight);line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-XS-fontSize);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50)}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding-block:var(--components-select-framed-top-padding) 0;padding-inline:0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:var(--palettes-neutral-500);inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-value{padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400);padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;block-size:auto;padding-block-start:var(--pr-t-spacings-200);color:var(--pr-t-color-text)}:host-context(.textfield.mod-material):after{color:var(--palettes-neutral-500);inset-block-end:.6rem;inset-inline-end:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-inline:0 .8rem}:host-context(.textfield.mod-material) .lu-select-suffix{inset-inline-end:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{inset-block-end:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{inset-inline-end:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple) .lu-select-value{block-size:auto;align-items:center}:host(.mod-multiple) .lu-select-display-wrapper{overflow:visible;white-space:normal;margin-block-end:calc(var(--pr-t-spacings-50) * -1)}:host-context(.textfield.mod-outlined).textfield-input:after{color:var(--palettes-neutral-600)}:host-context(.textfield.mod-outlined).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error):after{color:var(--palettes-error-600)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex;align-items:flex-start}:host-context(.textfield .textfield-input.is-focused):after{transform:rotate(180deg)}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-inline-end:3.5rem}:host-context(.textfield-input.is-error,.textfield-input.is-invalid,.textfield-input.ng-invalid.ng-touched) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:var(--commons-disabled-placeholder)}}@layer components{:host:after{--icon-content: \"\\e920\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;transform:none!important}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1.ALuDateAdapter }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], granularity: [{
-                type: Input
-            }], inputPlaceholder: [{
-                type: Input,
-                args: ['placeholder']
-            }], hideClearer: [{
-                type: Input
-            }], startOn: [{
-                type: Input
-            }] } });
+                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\n<div class=\"lu-select-value\">\n\t<div class=\"lu-select-display-wrapper notranslate\">\n\t\t<ng-container #display />\n\t</div>\n</div>\n<div class=\"lu-select-suffix\">\n\t<lu-clear [attr.hidden]=\"hideClearer() ? 'hidden' : null\" />\n</div>\n<ng-template luDisplayer let-value> {{ value | luDate: format }} </ng-template>\n<lu-date-picker [min]=\"min()\" [max]=\"max()\" [granularity]=\"granularity()\" [startOn]=\"startOn()\" />\n", styles: ["@charset \"UTF-8\";@layer base{:root{--components-options-item-padding-vertical: var(--pr-t-spacings-50);--components-options-item-padding-horizontal: var(--pr-t-spacings-100);--components-options-item-multiple-padding: 2.25rem;--components-options-item-icon-color: var(--palettes-neutral-800);--components-options-checkbox-size: 1.25rem;--components-options-checkbox-color: var(--palettes-700, var(--palettes-product-700));--components-options-checkbox-border-radius: var(--pr-t-border-radius-small);--components-options-checkbox-border-color: var(--palettes-neutral-700);--components-options-establishment-multiple-padding: 2rem}}@layer reset,base,components,mods,product,utils;@layer components{:host{--components-select-input-padding-horizontal: var(--pr-t-spacings-100);--components-select-input-padding-vertical: var(--pr-t-spacings-100);--components-select-framed-color: var(--palettes-neutral-500);--components-select-framed-color50: var(--palettes-neutral-50);--components-select-framed-see-through: var(--palettes-neutral-50);--components-select-framed-text: var(--pr-t-color-text);--components-select-framed-placeholder: #cccccc;--components-select-framed-side-padding: var(--pr-t-spacings-200);--components-select-framed-top-padding: var(--pr-t-spacings-400);--components-select-framed-bottom-padding: var(--pr-t-spacings-200);--components-select-framed-label-top-offset: var(--pr-t-spacings-100);cursor:pointer;outline:none;padding:0;gap:0}:host:after{--icon-content: \"\\e97c\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;color:var(--palettes-neutral-600);inset-block-end:var(--components-select-input-padding-vertical);font-size:var(--pr-t-font-body-M-lineHeight);line-height:var(--pr-t-font-body-M-lineHeight);pointer-events:none;position:absolute;inset-inline-end:var(--components-select-input-padding-horizontal);transition:transform var(--commons-animations-durations-standard) ease}}@layer mods{:host[disabled],:host.is-disabled{cursor:not-allowed;pointer-events:all}}@layer components{.lu-select-display-wrapper{display:block;inline-size:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.lu-select-value{font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);display:none}.lu-select-placeholder{color:var(--palettes-neutral-400);font:var(--pr-t-font-body-M);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-M-lineHeight));padding-block:var(--components-select-input-padding-vertical);padding-inline:var(--components-select-input-padding-horizontal) 3.5rem;transition:all var(--commons-animations-durations-standard);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix,.lu-select-clearer{position:absolute;inset-block-end:var(--pr-t-spacings-150);inset-inline-end:2.5rem}::ng-deep .lu-select-value .chip{display:inline-flex;max-inline-size:100%;margin-block:0 var(--pr-t-spacings-50);margin-inline:0 var(--pr-t-spacings-50);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}}@layer mods{:host-context(.textfield.mod-S){padding:0}:host-context(.textfield.mod-S) .lu-select-value,:host-context(.textfield.mod-S) .lu-select-placeholder{font-size:var(--pr-t-font-body-S-fontSize);line-height:var(--pr-t-font-body-XS-lineHeight);min-block-size:calc(var(--components-select-framed-bottom-padding) + var(--pr-t-font-body-XS-lineHeight))}:host-context(.textfield.mod-S) .lu-select-clearer{inset-block-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-S):after{line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-S-lineHeight)}:host-context(.textfield.mod-S) .lu-select-suffix{inset-block-end:.5rem;inset-inline-end:2rem}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .chip{block-size:var(--pr-t-font-body-XS-lineHeight);line-height:var(--pr-t-font-body-XS-lineHeight);font-size:var(--pr-t-font-body-XS-fontSize);padding-inline:var(--pr-t-spacings-50);gap:var(--pr-t-spacings-50)}:host-context(.textfield.mod-S) ::ng-deep .lu-select-value .numericBadge{--components-numericBadge-size: 1.25rem;--components-numericBadge-borderRadius: var(--pr-t-border-radius-small);--components-numericBadge-font: var(--pr-t-font-body-XS);--components-numericBadge-fontSize: var(--pr-t-font-body-XS-fontSize);--components-numericBadge-lineHeight: var(--pr-t-font-body-XS-lineHeight)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding-block:var(--components-select-framed-top-padding) 0;padding-inline:0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:var(--palettes-neutral-500);inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:var(--pr-t-spacings-100)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-value{padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400);padding-block:0 var(--components-select-framed-bottom-padding);padding-inline:var(--components-select-framed-side-padding) calc(var(--components-select-framed-side-padding) * 3)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{inset-block-end:var(--components-select-framed-bottom-padding);inset-inline-end:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;block-size:auto;padding-block-start:var(--pr-t-spacings-200);color:var(--pr-t-color-text)}:host-context(.textfield.mod-material):after{color:var(--palettes-neutral-500);inset-block-end:.6rem;inset-inline-end:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-inline:0 .8rem}:host-context(.textfield.mod-material) .lu-select-suffix{inset-inline-end:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{inset-block-end:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{inset-inline-end:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple) .lu-select-value{block-size:auto;align-items:center}:host(.mod-multiple) .lu-select-display-wrapper{overflow:visible;white-space:normal;margin-block-end:calc(var(--pr-t-spacings-50) * -1)}:host-context(.textfield.mod-outlined).textfield-input:after{color:var(--palettes-neutral-600)}:host-context(.textfield.mod-outlined).textfield-input .lu-select-placeholder{color:var(--palettes-neutral-400)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error):after{color:var(--palettes-error-600)}:host-context(.textfield.mod-outlined) :host-context(.textfield-input.is-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex;align-items:flex-start}:host-context(.textfield .textfield-input.is-focused):after{transform:rotate(180deg)}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-inline-end:3.5rem}:host-context(.textfield-input.is-error,.textfield-input.is-invalid,.textfield-input.ng-invalid.ng-touched) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:var(--commons-disabled-placeholder)}}@layer components{:host:after{--icon-content: \"\\e920\";font-weight:var(--pr-t-font-fontWeight-regular);display:inline-block;vertical-align:text-bottom;font-style:normal;font-family:var(--icon-fontFamily);content:var(--icon-content)/\"\";-webkit-font-smoothing:antialiased;text-transform:none;transform:none!important}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i1.ALuDateAdapter }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], granularity: [{ type: i0.Input, args: [{ isSignal: true, alias: "granularity", required: false }] }], hideClearer: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClearer", required: false }] }], startOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOn", required: false }] }] } });
 
 /**
  * @deprecated use `LuDateSelectInputComponent` instead
  */
 class LuDateSelectInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateSelectInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuDateSelectInputModule, imports: [LuDateSelectInputComponent], exports: [LuDateSelectInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateSelectInputModule, imports: [LuDateSelectInputComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateSelectInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuDateSelectInputModule, imports: [LuDateSelectInputComponent], exports: [LuDateSelectInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateSelectInputModule, imports: [LuDateSelectInputComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateSelectInputModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateSelectInputModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuDateSelectInputComponent],
@@ -938,11 +918,11 @@ const luDateSelectInputTranslations = Translations;
  * @deprecated use `LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent` instead
  */
 class LuDateModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuDateModule, imports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent], exports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateModule, imports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateSelectInputComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuDateModule, imports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent], exports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateModule, imports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateSelectInputComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuDateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuDateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent],
@@ -955,10 +935,10 @@ class LuHumanizeDateFormatter {
     format(relativeTime) {
         return this.#intlRelativeTimeFormat.format(relativeTime.value, relativeTime.unit);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuHumanizeDateFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuHumanizeDateFormatter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuHumanizeDateFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuHumanizeDateFormatter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuHumanizeDateFormatter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuHumanizeDateFormatter, decorators: [{
             type: Injectable
         }] });
 
@@ -1045,10 +1025,10 @@ class LuHumanizeDatePipe {
     transform(value, allowedUnits) {
         return relativeTimeTimer(new Date(value), allowedUnits).pipe(map((relativeTime) => this.#formatter.format(relativeTime)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuHumanizeDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: LuHumanizeDatePipe, isStandalone: true, name: "luHumanizeDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuHumanizeDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuHumanizeDatePipe, isStandalone: true, name: "luHumanizeDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LuHumanizeDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuHumanizeDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'luHumanizeDate',