@randstad-uca/design-system 1.0.59 → 1.0.60

package/dist/components/DatePicker.d.ts

@@ -11,6 +11,7 @@ export declare class DatePickerComponent extends BaseControl {
     private viewDate;
     private isMobile;
     private calendarWidth;
+    private inputValue;
     private inputContainer;
     static styles: import("lit").CSSResult;
     private setMessageErrorFormatInvalid;
@@ -32,7 +33,7 @@ export declare class DatePickerComponent extends BaseControl {
     /**
       * Ciclo de vida: se llama después de cada actualización.
       * Se usa para recalcular el ancho si la apertura del calendario ha cambiado.
-  
+      
       * @param changedProperties - Mapa de propiedades que han cambiado.
     */
     updated(changedProperties: Map<string, any>): void;
@@ -48,7 +49,7 @@ export declare class DatePickerComponent extends BaseControl {
     /**
       * Maneja el evento de entrada del usuario en el input.
       * Valida el formato de la fecha y actualiza el estado del componente.
-    
+      
       * @param e - Objeto de evento de entrada.
     */
     handleInput(e: Event): void;
@@ -61,7 +62,7 @@ export declare class DatePickerComponent extends BaseControl {
     private handleClickOutside;
     /**
       * Abre o cierra el calendario al hacer clic en el botón de calendario.
-  
+      
       * @param e - Objeto de evento del clic.
     */
     handleCalendarButtonClick(e: Event): void;
@@ -75,14 +76,14 @@ export declare class DatePickerComponent extends BaseControl {
     private handleDateSelect;
     /**
       * Maneja el cambio de la fecha de vista en el calendario.
-  
+      
       * @param e - Objeto de evento con la nueva fecha de vista.
     */
     private handleViewDateChange;
     /**
       * Cierra el calendario y actualiza el valor del componente.
       * Emite un evento 'date-selected' con el valor de la fecha seleccionada.
-  
+      
       * @param valueSet - La fecha en formato de cadena (ej: 'dd-MM-yyyy') a establecer.
     */
     private closeOverlay;
@@ -90,7 +91,7 @@ export declare class DatePickerComponent extends BaseControl {
       * Analiza la propiedad 'value' externa y actualiza el estado interno del componente.
       * Se ejecuta cuando una propiedad cambia desde fuera (p. ej., Storybook, componente padre).
       * No emite eventos ni interactúa con el DOM para evitar bucles de renderizado.
-      
+  
       * @param value La cadena de fecha pasada desde una propiedad externa.
     */
     private _syncValue;
@@ -104,11 +105,11 @@ export declare class DatePickerComponent extends BaseControl {
     private _validateDate;
     /**
       * Valida la entrada del usuario en el campo de texto.
-     
+  
       * Este método se llama con cada pulsación de tecla o cambio en el input.
       * Se encarga de validar el formato, verificar si la fecha está dentro de los límites
       * y de actualizar el estado de error y el valor del input.
-    
+      
       * @param value La cadena de fecha que el usuario ha introducido.
       * @param fromInput Indica si la llamada proviene directamente de la interacción del usuario.
     */
@@ -117,7 +118,7 @@ export declare class DatePickerComponent extends BaseControl {
       * Intenta analizar una cadena de fecha en múltiples formatos.
       * Este método es la fuente de la verdad para el análisis de fechas.
       * Soporta los formatos 'dd-MM-yyyy' y 'yyyy-MM-dd', retornando un objeto Date.
-  
+      
       * @param dateString La cadena de fecha a analizar.
       * @returns Un objeto Date si es válido, de lo contrario, null.
     */
@@ -125,24 +126,24 @@ export declare class DatePickerComponent extends BaseControl {
     /**
       * Analiza una cadena de fecha con formato 'yyyy-MM-dd'.
       * Este método auxiliar ayuda a procesar la propiedad minDate y maxDate.
-      
+     
       * @param dateString La cadena de fecha en formato 'yyyy-MM-dd'.
-      
+  
       * @returns Un objeto Date si es válido, de lo contrario, null.
     */
     private _parseDateString;
     /**
       * Retorna el rango de fechas válido del componente.
       * Analiza las propiedades 'minDate' y 'maxDate' para determinar el rango permitido.
-  
+      
       * @returns Un objeto con las fechas mínima y máxima, o null si no se define un rango.
     */
     private _getValidDateRange;
     /**
       * Verifica si una fecha dada está dentro del rango permitido.
-  
+     
       * @param date La fecha a verificar.
-    
+  
       * @returns Verdadero si la fecha está dentro de los límites, de lo contrario, falso.
     */
     private _isWithinBounds;

package/dist/index.js

@@ -3300,7 +3300,7 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       <div class="calendar-container" style="width: ${this.calendarWidth}px;">
         ${i}
       </div>
-    `}};a([A({type:Object}),s("design:type",Object)],si.prototype,"selectedDate",void 0),a([A({type:Object}),s("design:type",Date)],si.prototype,"viewDate",void 0),a([A({type:Boolean}),s("design:type",Object)],si.prototype,"isMobile",void 0),a([A({type:Number}),s("design:type",Number)],si.prototype,"calendarWidth",void 0),a([A({type:Object}),s("design:type",Object)],si.prototype,"minDate",void 0),a([A({type:Object}),s("design:type",Object)],si.prototype,"maxDate",void 0),a([T(),s("design:type",String)],si.prototype,"currentView",void 0),si=a([d("calendar-overlay")],si);let di=class extends L{constructor(){super(...arguments),this.isRenderClearButton=!0,this.eighteenOrOlder=!1,this.isOpen=!1,this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.handleClickOutside=t=>{t.composedPath().includes(this)||(this.isOpen=!1)}}static{this.styles=o`
+    `}};a([A({type:Object}),s("design:type",Object)],si.prototype,"selectedDate",void 0),a([A({type:Object}),s("design:type",Date)],si.prototype,"viewDate",void 0),a([A({type:Boolean}),s("design:type",Object)],si.prototype,"isMobile",void 0),a([A({type:Number}),s("design:type",Number)],si.prototype,"calendarWidth",void 0),a([A({type:Object}),s("design:type",Object)],si.prototype,"minDate",void 0),a([A({type:Object}),s("design:type",Object)],si.prototype,"maxDate",void 0),a([T(),s("design:type",String)],si.prototype,"currentView",void 0),si=a([d("calendar-overlay")],si);let di=class extends L{constructor(){super(...arguments),this.isRenderClearButton=!0,this.eighteenOrOlder=!1,this.isOpen=!1,this.selectedDate=null,this.viewDate=new Date,this.isMobile=!1,this.calendarWidth=0,this.inputValue=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this),this.handleClickOutside=t=>{t.composedPath().includes(this)||(this.isOpen=!1)}}static{this.styles=o`
     ${X}
     ${Q}
     ${K}
@@ -3401,19 +3401,19 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     .calendar-button randstad-icon {
       font-size: 18px;
     }
-  `}setMessageErrorFormatInvalid(){return"formato de fecha inválido, se esperaba 'dd-MM-yyyy'"}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(t){t.has("value")&&this._syncValue(this.value),(t.has("isOpen")||t.has("value"))&&this.setInitialWidth(),super.updated(t)}setInitialWidth(){this.inputContainer&&(this.calendarWidth=this.inputContainer.getBoundingClientRect().width)}updateResponsiveMode(){this.isMobile=window.innerWidth<=940,this.setInitialWidth()}handleInput(t){const e=t.target;this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){this.disabled||(t.stopPropagation(),this.isOpen=!this.isOpen,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate())}handleClearDate(){this.selectedDate=null,this.error=!1,this.errorMessage=null,this.closeOverlay(null)}handleDateSelect(t){const e=t.detail.date;e&&(this.selectedDate=e,this.viewDate=e,this.closeOverlay(Je(e,"dd-MM-yyyy")))}handleViewDateChange(t){this.viewDate=t.detail.date}closeOverlay(t){this.value=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t}})),this.isOpen=!1}_syncValue(t){if(""===t||null===t)return void(this.error||(this.selectedDate=null,this.errorMessage=null));const e=this._parseDate(t);e&&this._validateDate(e)?(this.selectedDate=e,this.viewDate=e,this.error=!1,this.errorMessage=null,this.value=Je(e,"dd-MM-yyyy")):this.selectedDate=e}_validateDate(t){if(!t)return!1;if(this.error=!1,this.errorMessage=null,this.eighteenOrOlder){const e=function(t,e,i){return be(t,-18,i)}(new Date);if(ii(t,e))return this.error=!0,this.errorMessage="tenés que ser mayor de 18 años",!1}if(!this._isWithinBounds(t)){this.error=!0;const t=this._getValidDateRange();return this.errorMessage=`la fecha debe estar entre ${t?.minDate?Je(t.minDate,"dd-MM-yyyy"):""} y ${t?.maxDate?Je(t.maxDate,"dd-MM-yyyy"):""}.`,!1}return!0}_parseAndValidateDate(t,e){if(this.disabled)return;if(""===t||null===t)return this.selectedDate=null,this.error=!1,this.errorMessage=null,void(e&&this.closeOverlay(null));const i=this._parseDate(t);i?this._validateDate(i)?(this.selectedDate=i,this.viewDate=i,this.error=!1,this.errorMessage=null,e&&this.closeOverlay(Je(i,"dd-MM-yyyy"))):(e&&this.closeOverlay(null),console.error("La fecha es inválida.")):(this.error=!0,this.errorMessage=this.setMessageErrorFormatInvalid(),e&&this.closeOverlay(null),console.error("Formato de fecha no válido."))}_parseDate(t){const e=t.split("-").map(Number);if(3===e.length){const[i,o,r]=e;if(i&&o&&r&&o>=1&&o<=12&&r>1e3){const e=new Date(r,o-1,i,12);if(me(e)&&Je(e,"dd-MM-yyyy")===t)return e}}const i=t.split("-").map(Number);if(3===i.length){const[e,o,r]=i;if(e&&o&&r&&o>=1&&o<=12&&e>1e3){const i=new Date(e,o-1,r,12);if(me(i)&&Je(i,"yyyy-MM-dd")===t)return i}}return null}_parseDateString(t){if(!t)return null;const e=t.split("-").map(Number);if(3===e.length&&!isNaN(e[0])&&!isNaN(e[1])&&!isNaN(e[2])){return new Date(e[0],e[1]-1,e[2],12)}return null}_getValidDateRange(){const t=this._parseDateString(this.minDate),e=this._parseDateString(this.maxDate);return t||e?t&&e&&ii(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!oi(t,e.minDate))&&(!e.maxDate||!ii(t,e.maxDate))}render(){const t=n({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),o=`width: ${this.width||"100%"};`,r=this._getValidDateRange();return e`
+  `}setMessageErrorFormatInvalid(){return"formato de fecha inválido, se esperaba 'dd-MM-yyyy'"}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(t){t.has("value")&&this._syncValue(this.value),(t.has("isOpen")||t.has("value"))&&this.setInitialWidth(),super.updated(t)}setInitialWidth(){this.inputContainer&&(this.calendarWidth=this.inputContainer.getBoundingClientRect().width)}updateResponsiveMode(){this.isMobile=window.innerWidth<=940,this.setInitialWidth()}handleInput(t){const e=t.target;this.inputValue=e.value,this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){this.disabled||(t.stopPropagation(),this.isOpen=!this.isOpen,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate())}handleClearDate(){this.inputValue=null,this.selectedDate=null,this.error=!1,this.errorMessage=null,this.closeOverlay(null)}handleDateSelect(t){const e=t.detail.date;if(!e)return;if(this._validateDate(e)){this.selectedDate=e,this.viewDate=e;const t=Je(e,"dd-MM-yyyy");this.inputValue=t,this.closeOverlay(t)}else{const t=Je(e,"dd-MM-yyyy");this.inputValue=t,this.selectedDate=null,this.closeOverlay(null)}}handleViewDateChange(t){this.viewDate=t.detail.date}closeOverlay(t){this.value=t,this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t}})),this.isOpen=!1}_syncValue(t){if(""===t||null===t)return void(this.error||(this.selectedDate=null,this.inputValue=null,this.errorMessage=null));const e=this._parseDate(t);e&&this._validateDate(e)?(this.selectedDate=e,this.viewDate=e,this.error=!1,this.errorMessage=null,this.value=Je(e,"dd-MM-yyyy"),this.inputValue=this.value):this.selectedDate=e}_validateDate(t){if(!t)return!1;if(this.error=!1,this.errorMessage=null,this.eighteenOrOlder){const e=function(t,e,i){return be(t,-18,i)}(new Date);if(ii(t,e))return this.error=!0,this.errorMessage="tenés que ser mayor de 18 años",!1}if(!this._isWithinBounds(t)){const t=this._getValidDateRange();return this.error=!0,this.errorMessage=`la fecha debe estar entre ${t?.minDate?Je(t.minDate,"dd-MM-yyyy"):""} y ${t?.maxDate?Je(t.maxDate,"dd-MM-yyyy"):""}.`,!1}return!0}_parseAndValidateDate(t,e){if(this.disabled)return;if(""===t||null===t)return this.selectedDate=null,this.error=!1,this.errorMessage=null,void(e&&this.closeOverlay(null));const i=this._parseDate(t);if(i){this._validateDate(i)?(this.selectedDate=i,this.viewDate=i,this.error=!1,this.errorMessage=null,e&&this.closeOverlay(Je(i,"dd-MM-yyyy"))):(this.error=!0,this.selectedDate=null,e&&this.closeOverlay(null))}else this.error=!0,this.errorMessage=this.setMessageErrorFormatInvalid(),this.selectedDate=null,e&&this.closeOverlay(null)}_parseDate(t){const e=t.split("-").map(Number);if(3===e.length){const[i,o,r]=e;if(i&&o&&r&&o>=1&&o<=12&&r>1e3){const e=new Date(r,o-1,i,12);if(me(e)&&Je(e,"dd-MM-yyyy")===t)return e}}const i=t.split("-").map(Number);if(3===i.length){const[e,o,r]=i;if(e&&o&&r&&o>=1&&o<=12&&e>1e3){const i=new Date(e,o-1,r,12);if(me(i)&&Je(i,"yyyy-MM-dd")===t)return i}}return null}_parseDateString(t){if(!t)return null;const e=t.split("-").map(Number);if(3===e.length&&!isNaN(e[0])&&!isNaN(e[1])&&!isNaN(e[2])){return new Date(e[0],e[1]-1,e[2],12)}return null}_getValidDateRange(){const t=this._parseDateString(this.minDate),e=this._parseDateString(this.maxDate);return t||e?t&&e&&ii(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!oi(t,e.minDate))&&(!e.maxDate||!ii(t,e.maxDate))}render(){const t=n({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),o=`width: ${this.width||"100%"};`,r=this._getValidDateRange();return e`
       <div class="datepicker-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""} ${o}">
         ${this.renderLabelContainer()}
 
         <div class="input-container">
           <div class="${t}" style="width: 100%">
             <input
-              type="text"
-              class="date-input"
-              .value="${this.value}"
-              placeholder="${this.placeholder}"
-              ?disabled=${this.disabled}
-              @input=${this.handleInput}
+                type="text"
+                class="date-input"
+                .value="${this.inputValue??""}"
+                placeholder="${this.placeholder}"
+                ?disabled=${this.disabled}
+                @input=${this.handleInput}
             />
 
             ${this.isRenderClearButton&&this.selectedDate&&!this.disabled?e`
@@ -3439,21 +3439,21 @@ const Yt=o`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
                 .selectedDate=${this.selectedDate}
                 .viewDate=${this.viewDate}
                 .calendarWidth=${this.calendarWidth}
-                .minDate=${r?.minDate} 
-                .maxDate=${r?.maxDate} 
+                .minDate=${r?.minDate}
+                .maxDate=${r?.maxDate}
                 @close=${()=>this.isOpen=!1}
                 @view-date-change=${this.handleViewDateChange}
                 @date-selected=${this.handleDateSelect}
               >
               </calendar-overlay>
             `:i}
-          
+            
           ${this.renderError()}
         </div>
 
         ${this.renderHelper()}
       </div>
-    `}};a([A({type:String}),s("design:type",String)],di.prototype,"width",void 0),a([A({type:Boolean}),s("design:type",Object)],di.prototype,"isRenderClearButton",void 0),a([A({type:String}),s("design:type",String)],di.prototype,"minDate",void 0),a([A({type:String}),s("design:type",String)],di.prototype,"maxDate",void 0),a([A({type:Boolean}),s("design:type",Object)],di.prototype,"eighteenOrOlder",void 0),a([T(),s("design:type",Object)],di.prototype,"isOpen",void 0),a([T(),s("design:type",Object)],di.prototype,"selectedDate",void 0),a([T(),s("design:type",Date)],di.prototype,"viewDate",void 0),a([T(),s("design:type",Object)],di.prototype,"isMobile",void 0),a([T(),s("design:type",Number)],di.prototype,"calendarWidth",void 0),a([z(".input-container"),s("design:type",HTMLDivElement)],di.prototype,"inputContainer",void 0),di=a([d("datepicker-component")],di);const li={"application/pdf":"PDF","application/msword":"Word (.doc)","application/vnd.openxmlformats-officedocument.wordprocessingml.document":"Word (.docx)","image/jpeg":"JPEG","image/png":"PNG","text/plain":"Texto (.txt)"};let ci=class extends L{constructor(){super(...arguments),this.files=[],this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=5242880,this.buttonText="Agregar archivo",this.simulatedDelay=0,this.loading=!1,this.progress=0}static{this.styles=o`
+    `}};a([A({type:String}),s("design:type",String)],di.prototype,"width",void 0),a([A({type:Boolean}),s("design:type",Object)],di.prototype,"isRenderClearButton",void 0),a([A({type:String}),s("design:type",String)],di.prototype,"minDate",void 0),a([A({type:String}),s("design:type",String)],di.prototype,"maxDate",void 0),a([A({type:Boolean}),s("design:type",Object)],di.prototype,"eighteenOrOlder",void 0),a([T(),s("design:type",Object)],di.prototype,"isOpen",void 0),a([T(),s("design:type",Object)],di.prototype,"selectedDate",void 0),a([T(),s("design:type",Date)],di.prototype,"viewDate",void 0),a([T(),s("design:type",Object)],di.prototype,"isMobile",void 0),a([T(),s("design:type",Number)],di.prototype,"calendarWidth",void 0),a([T(),s("design:type",Object)],di.prototype,"inputValue",void 0),a([z(".input-container"),s("design:type",HTMLDivElement)],di.prototype,"inputContainer",void 0),di=a([d("datepicker-component")],di);const li={"application/pdf":"PDF","application/msword":"Word (.doc)","application/vnd.openxmlformats-officedocument.wordprocessingml.document":"Word (.docx)","image/jpeg":"JPEG","image/png":"PNG","text/plain":"Texto (.txt)"};let ci=class extends L{constructor(){super(...arguments),this.files=[],this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=5242880,this.buttonText="Agregar archivo",this.simulatedDelay=0,this.loading=!1,this.progress=0}static{this.styles=o`
         ${X}
         ${Q}
         ${K}