@randstad-uca/design-system 1.0.72 → 1.0.74

package/dist/components/DatePicker.d.ts

@@ -3,6 +3,7 @@ import "./CalendarOverlay.ts";
 export declare class DatePickerComponent extends BaseControl {
     width?: string;
     isRenderClearButton: boolean;
+    readonly: boolean;
     minDate?: string;
     maxDate?: string;
     eighteenOrOlder: boolean;

package/dist/index.js

@@ -128,18 +128,18 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     :host {
       display: flex;
       flex-direction: column;
-      font-family: 'Graphik', sans-serif;
-      position: relative;
+      font-family: 'Graphik', sans-serif;      
     }
 
     .header {
+      position: relative;
       display: flex;
       justify-content: space-between;
       gap: 16px;
       flex-direction: row;
-      align-items: center;
+      align-items: flex-start;
       cursor: pointer;
-      padding-bottom: 16px;
+      min-height: 57px;
     }
 
     .title {
@@ -148,6 +148,9 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .icon-wrapper {
+      position: absolute;
+      top: 0;
+      right: 0;
       width: 40px;
       height: 40px;
       border-radius: 50%;
@@ -188,13 +191,22 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     @media (min-width: 941px) {
-      .header {
-        align-items: flex-start;
+      .header:hover .icon-wrapper {
+        background-color: var( --primary-color-5 );
       }
-
+    }
+    
+    @media (max-width: 500px) {
       .header:hover .icon-wrapper {
         background-color: var( --primary-color-5 );
       }
+      .header {
+        min-height: 42px;
+        max-height: 67px;
+      }
+      .title {
+        margin-bottom: 16px;
+      }
     }
   `}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.handleResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleResize)}toggle(){this.isOpen=!this.isOpen}render(){const t=e`
       <randstad-icon
@@ -1095,7 +1107,7 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         height: 24px;
         color: var( --primary-color );
       }
-    `]}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){this.handleInputCustom(t);const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleInputCustom(t){"number"===this.keydown?this.onlyNumeric(t):"text"===this.keydown&&this.onlyText(t)}onlyNumeric(t){const e=t.target,i=e.value.replace(/[^0-9]/g,"");e.value=i}onlyText(t){const e=t.target,i=e.value.replace(/[^a-zA-Z\sáéíóúñÁÉÍÓÚÑ]/g,"");e.value=i}handleInputKeyDown(t){this.handleKeyDown(t),this.handleInputArrowKey(t)}get _isCleanButtonVisible(){return this.cleanButton&&!!this.value&&"password"!==this.type&&"textarea"!==this.type}handleKeyDown(t){if("Enter"!==t.key)return;const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),i=this.closest("form");i&&i.dispatchEvent(e)}handleInputArrowKey(t){if("ArrowRight"!==t.key)return;const e=t.target;if(("password"===this.type||this._isCleanButtonVisible)&&e.selectionStart===e.value.length){t.preventDefault();const e=this.shadowRoot?.querySelector(".toggle-password, .clean-button");e?.focus()}}handleButtonArrowKey(t){if("ArrowLeft"!==t.key)return;t.preventDefault();const e=this.shadowRoot?.querySelector(".form-input");e&&(e.focus(),e.selectionStart=e.selectionEnd=e.value.length)}render(){const t="textarea"===this.type?` height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto; `:"",o=this.labelColor?`--label-color: ${this.labelColor};`:"",r=e`
+    `]}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(t){this.handleInputCustom(t);const e=t.target.value;void 0!==this.maxLength&&"textarea"!==this.type?this.value=e.slice(0,this.maxLength):this.value=e,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleClear(){this.value="",this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0})),this.requestUpdate()}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}handleInputCustom(t){"number"===this.keydown?this.onlyNumeric(t):"text"===this.keydown&&this.onlyText(t)}onlyNumeric(t){const e=t.target,i=e.value.replace(/[^0-9]/g,"");e.value=i}onlyText(t){const e=t.target,i=e.value,o=i.replace(/[^a-zA-Z\sáéíóúüñÁÉÍÓÚÑÜ]/g,"").trimStart();i!==o&&(t.preventDefault(),e.value=o)}handleInputKeyDown(t){this.handleKeyDown(t),this.handleInputArrowKey(t)}get _isCleanButtonVisible(){return this.cleanButton&&!!this.value&&"password"!==this.type&&"textarea"!==this.type}handleKeyDown(t){if("Enter"!==t.key)return;const e=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),i=this.closest("form");i&&i.dispatchEvent(e)}handleInputArrowKey(t){if("ArrowRight"!==t.key)return;const e=t.target;if(("password"===this.type||this._isCleanButtonVisible)&&e.selectionStart===e.value.length){t.preventDefault();const e=this.shadowRoot?.querySelector(".toggle-password, .clean-button");e?.focus()}}handleButtonArrowKey(t){if("ArrowLeft"!==t.key)return;t.preventDefault();const e=this.shadowRoot?.querySelector(".form-input");e&&(e.focus(),e.selectionStart=e.selectionEnd=e.value.length)}render(){const t="textarea"===this.type?` height: ${this.heightTextArea??"30px"}; max-height: ${this.maxHeightTextArea??"30px"}; overflow-y: auto; `:"",o=this.labelColor?`--label-color: ${this.labelColor};`:"",r=e`
       <randstad-icon
         name="${this.isPasswordVisible?"eye_crossed":"eye"}"
         size="24px"
@@ -3503,7 +3515,7 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       <div class="calendar-container" style="width: ${this.calendarWidth}px;">
         ${i}
       </div>
-    `}};s([L({type:Object}),n("design:type",Object)],$e.prototype,"selectedDate",void 0),s([L({type:Object}),n("design:type",Date)],$e.prototype,"viewDate",void 0),s([L({type:Boolean}),n("design:type",Object)],$e.prototype,"isMobile",void 0),s([L({type:Number}),n("design:type",Number)],$e.prototype,"calendarWidth",void 0),s([L({type:Object}),n("design:type",Object)],$e.prototype,"minDate",void 0),s([L({type:Object}),n("design:type",Object)],$e.prototype,"maxDate",void 0),s([T(),n("design:type",String)],$e.prototype,"currentView",void 0),s([P(".day.selected, .day.today:not(.selected)"),n("design:type",HTMLButtonElement)],$e.prototype,"initialFocusElement",void 0),$e=s([a("calendar-overlay")],$e);let Se=class extends j{constructor(){super(...arguments),this.isRenderClearButton=!0,this.eighteenOrOlder=!1,this._maxLength=10,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)}}get maxLength(){return this._maxLength}set maxLength(t){const e=this._maxLength;this._maxLength=t<10?10:t,this.requestUpdate("maxLength",e)}static{this.styles=o`
+    `}};s([L({type:Object}),n("design:type",Object)],$e.prototype,"selectedDate",void 0),s([L({type:Object}),n("design:type",Date)],$e.prototype,"viewDate",void 0),s([L({type:Boolean}),n("design:type",Object)],$e.prototype,"isMobile",void 0),s([L({type:Number}),n("design:type",Number)],$e.prototype,"calendarWidth",void 0),s([L({type:Object}),n("design:type",Object)],$e.prototype,"minDate",void 0),s([L({type:Object}),n("design:type",Object)],$e.prototype,"maxDate",void 0),s([T(),n("design:type",String)],$e.prototype,"currentView",void 0),s([P(".day.selected, .day.today:not(.selected)"),n("design:type",HTMLButtonElement)],$e.prototype,"initialFocusElement",void 0),$e=s([a("calendar-overlay")],$e);let Se=class extends j{constructor(){super(...arguments),this.isRenderClearButton=!0,this.readonly=!1,this.eighteenOrOlder=!1,this._maxLength=10,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)}}get maxLength(){return this._maxLength}set maxLength(t){const e=this._maxLength;this._maxLength=t<10?10:t,this.requestUpdate("maxLength",e)}static{this.styles=o`
     ${X}
     ${Q}
     ${G}
@@ -3543,6 +3555,16 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       cursor: default;
     }
 
+    /* Estilos para el estado readonly */
+    .input-wrapper.readonly .date-input {
+      cursor: pointer;
+    }
+
+    .input-wrapper.readonly .calendar-button {
+      cursor: pointer;
+      color: #2175d9;
+    }
+
     /* Estilos del campo de entrada y sus estados */
     .input-wrapper {
       display: flex;
@@ -3610,7 +3632,7 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     .calendar-button randstad-icon {
       font-size: 18px;
     }
-  `}setMessageErrorFormatInvalid(){return"formato de fecha inválido, se esperaba 'dd-MM-yyyy'"}handleFocusInput(){this.shadowRoot?.querySelector(".date-input")?.focus()}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside),this.addEventListener("focus-input",this.handleFocusInput)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),this.removeEventListener("focus-input",this.handleFocusInput),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(t){t.has("width")&&this.style.setProperty("width",this.width||"100%"),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){this.onlyNumericAndDash(t);const e=t.target,i=e.value.substring(0,this.maxLength);e.value!==i&&(e.value=i),this.inputValue=e.value,this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){if(!this.disabled)if(t.stopPropagation(),this.isOpen){this.isOpen=!1;const t=this.shadowRoot?.querySelector(".date-input");t?.focus()}else this.isOpen=!0,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate(),this.updateComplete.then((()=>{const t=this.shadowRoot?.querySelector(".date-input");t?.focus()}))}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=ge(e,"dd-MM-yyyy");this.inputValue=t,this.closeOverlay(t)}else{const t=ge(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;const e=this.shadowRoot?.querySelector(".date-input");e?.focus()}_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=ge(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 Ot(t,-18,i)}(new Date);if(ve(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?ge(t.minDate,"dd-MM-yyyy"):""} y ${t?.maxDate?ge(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(ge(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(Bt(e)&&ge(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(Bt(i)&&ge(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&&ve(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!fe(t,e.minDate))&&(!e.maxDate||!ve(t,e.maxDate))}handleKeyDown(t){if(this.disabled)return;const{key:e}=t,i=this.shadowRoot?.querySelector(".date-input");if("Enter"===e||" "===e)t.preventDefault(),this.isOpen?this.closeOverlay(this.value):(this.isOpen=!0,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate());else if("Escape"===e){if(!this.isOpen)return;t.preventDefault(),this.closeOverlay(this.value)}else"ArrowDown"===e&&(t.preventDefault(),this.isOpen||(this.isOpen=!0,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate()),this.updateComplete.then((()=>{const t=this.shadowRoot?.querySelector("calendar-overlay");t&&"function"==typeof t.focusCalendar&&t.focusCalendar()})));const o=this.shadowRoot?.querySelector(".clear-button"),r=this.shadowRoot?.querySelector(".calendar-button");"ArrowRight"===e&&(t.preventDefault(),this.shadowRoot?.activeElement===i&&(o?o.focus():r?.focus()))}handleClearButtonKeydown(t){if(this.disabled)return;const{key:e}=t,i=this.shadowRoot?.querySelector(".date-input"),o=this.shadowRoot?.querySelector(".calendar-button");"ArrowLeft"===e?(t.preventDefault(),i?.focus()):"ArrowRight"===e&&(t.preventDefault(),o?.focus())}handleCalendarButtonKeydown(t){if(this.disabled)return;const{key:e}=t,i=this.shadowRoot?.querySelector(".date-input"),o=this.shadowRoot?.querySelector(".clear-button");"ArrowLeft"===e?(t.preventDefault(),o?o.focus():i?.focus()):("Enter"!==e&&" "!==e||t.preventDefault(),this.handleCalendarButtonClick(t))}onlyNumericAndDash(t){const e=t.target,i=e.value.replace(/[^0-9-]/g,"");e.value=i}render(){const t=r({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled}),o=this._getValidDateRange();return e`
+  `}setMessageErrorFormatInvalid(){return"formato de fecha inválido, se esperaba 'dd-MM-yyyy'"}handleFocusInput(){this.shadowRoot?.querySelector(".date-input")?.focus()}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside),this.addEventListener("focus-input",this.handleFocusInput)}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside),this.removeEventListener("focus-input",this.handleFocusInput),super.disconnectedCallback()}firstUpdated(){this.setInitialWidth()}updated(t){t.has("width")&&this.style.setProperty("width",this.width||"100%"),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){this.onlyNumericAndDash(t);const e=t.target,i=e.value.substring(0,this.maxLength);e.value!==i&&(e.value=i),this.inputValue=e.value,this._parseAndValidateDate(e.value,!0)}handleCalendarButtonClick(t){if(!this.disabled)if(t.stopPropagation(),this.isOpen){this.isOpen=!1;const t=this.shadowRoot?.querySelector(".date-input");t?.focus()}else this.isOpen=!0,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate(),this.updateComplete.then((()=>{const t=this.shadowRoot?.querySelector(".date-input");t?.focus()}))}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=ge(e,"dd-MM-yyyy");this.inputValue=t,this.closeOverlay(t)}else{const t=ge(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;const e=this.shadowRoot?.querySelector(".date-input");e?.focus()}_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=ge(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 Ot(t,-18,i)}(new Date);if(ve(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?ge(t.minDate,"dd-MM-yyyy"):""} y ${t?.maxDate?ge(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(ge(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(Bt(e)&&ge(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(Bt(i)&&ge(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&&ve(t,e)?null:{minDate:t,maxDate:e}:{minDate:null,maxDate:null}}_isWithinBounds(t){const e=this._getValidDateRange();return!e||(!e.minDate||!fe(t,e.minDate))&&(!e.maxDate||!ve(t,e.maxDate))}handleKeyDown(t){if(this.disabled)return;const{key:e}=t,i=this.shadowRoot?.querySelector(".date-input");if("Enter"===e||" "===e)t.preventDefault(),this.isOpen?this.closeOverlay(this.value):(this.isOpen=!0,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate());else if("Escape"===e){if(!this.isOpen)return;t.preventDefault(),this.closeOverlay(this.value)}else"ArrowDown"===e&&(t.preventDefault(),this.isOpen||(this.isOpen=!0,this.selectedDate?this.viewDate=this.selectedDate:this.viewDate=new Date,this.requestUpdate()),this.updateComplete.then((()=>{const t=this.shadowRoot?.querySelector("calendar-overlay");t&&"function"==typeof t.focusCalendar&&t.focusCalendar()})));const o=this.shadowRoot?.querySelector(".clear-button"),r=this.shadowRoot?.querySelector(".calendar-button");"ArrowRight"===e&&(t.preventDefault(),this.shadowRoot?.activeElement===i&&(o?o.focus():r?.focus()))}handleClearButtonKeydown(t){if(this.disabled)return;const{key:e}=t,i=this.shadowRoot?.querySelector(".date-input"),o=this.shadowRoot?.querySelector(".calendar-button");"ArrowLeft"===e?(t.preventDefault(),i?.focus()):"ArrowRight"===e&&(t.preventDefault(),o?.focus())}handleCalendarButtonKeydown(t){if(this.disabled)return;const{key:e}=t,i=this.shadowRoot?.querySelector(".date-input"),o=this.shadowRoot?.querySelector(".clear-button");"ArrowLeft"===e?(t.preventDefault(),o?o.focus():i?.focus()):("Enter"!==e&&" "!==e||t.preventDefault(),this.handleCalendarButtonClick(t))}onlyNumericAndDash(t){const e=t.target,i=e.value.replace(/[^0-9-]/g,"");e.value=i}render(){const t=r({"input-wrapper":!0,active:this.isOpen,error:this.error,disabled:this.disabled,readonly:this.readonly}),o=this._getValidDateRange();return e`
       <div class="datepicker-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
         ${this.renderLabelContainer()}
 
@@ -3622,9 +3644,11 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               .value="${this.inputValue??""}"
               placeholder="${this.placeholder}"
               ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
               maxlength="${this.maxLength}"
-              @input=${this.handleInput}
-              @keydown=${this.handleKeyDown}
+              @input=${this.readonly?null:this.handleInput}
+              @keydown=${this.readonly?null:this.handleKeyDown}
+              @click=${this.readonly?this.handleCalendarButtonClick:null}
             />
 
             ${this.isRenderClearButton&&this.selectedDate&&!this.disabled?e`
@@ -3666,7 +3690,7 @@ function P(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.renderHelper()}
       </div>
-    `}};s([L({type:String}),n("design:type",String)],Se.prototype,"width",void 0),s([L({type:Boolean}),n("design:type",Object)],Se.prototype,"isRenderClearButton",void 0),s([L({type:String}),n("design:type",String)],Se.prototype,"minDate",void 0),s([L({type:String}),n("design:type",String)],Se.prototype,"maxDate",void 0),s([L({type:Boolean}),n("design:type",Object)],Se.prototype,"eighteenOrOlder",void 0),s([L({type:Number}),n("design:type",Number),n("design:paramtypes",[Number])],Se.prototype,"maxLength",null),s([T(),n("design:type",Object)],Se.prototype,"isOpen",void 0),s([T(),n("design:type",Object)],Se.prototype,"selectedDate",void 0),s([T(),n("design:type",Date)],Se.prototype,"viewDate",void 0),s([T(),n("design:type",Object)],Se.prototype,"isMobile",void 0),s([T(),n("design:type",Number)],Se.prototype,"calendarWidth",void 0),s([T(),n("design:type",Object)],Se.prototype,"inputValue",void 0),s([P(".input-container"),n("design:type",HTMLDivElement)],Se.prototype,"inputContainer",void 0),Se=s([a("datepicker-component")],Se);let De=class extends pt{constructor(){super(...arguments),this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=0,this.buttonText="Agregar archivo",this.showDeleteConfirmation=!1,this.isRemovePopupOpen=!1,this.fileIndexToRemove=-1,this.fileNameToRemove=""}static{this.styles=o`
+    `}};s([L({type:String}),n("design:type",String)],Se.prototype,"width",void 0),s([L({type:Boolean}),n("design:type",Object)],Se.prototype,"isRenderClearButton",void 0),s([L({type:Boolean}),n("design:type",Object)],Se.prototype,"readonly",void 0),s([L({type:String}),n("design:type",String)],Se.prototype,"minDate",void 0),s([L({type:String}),n("design:type",String)],Se.prototype,"maxDate",void 0),s([L({type:Boolean}),n("design:type",Object)],Se.prototype,"eighteenOrOlder",void 0),s([L({type:Number}),n("design:type",Number),n("design:paramtypes",[Number])],Se.prototype,"maxLength",null),s([T(),n("design:type",Object)],Se.prototype,"isOpen",void 0),s([T(),n("design:type",Object)],Se.prototype,"selectedDate",void 0),s([T(),n("design:type",Date)],Se.prototype,"viewDate",void 0),s([T(),n("design:type",Object)],Se.prototype,"isMobile",void 0),s([T(),n("design:type",Number)],Se.prototype,"calendarWidth",void 0),s([T(),n("design:type",Object)],Se.prototype,"inputValue",void 0),s([P(".input-container"),n("design:type",HTMLDivElement)],Se.prototype,"inputContainer",void 0),Se=s([a("datepicker-component")],Se);let De=class extends pt{constructor(){super(...arguments),this.maxFiles=1,this.acceptedFileTypes=[],this.maxFileSize=0,this.buttonText="Agregar archivo",this.showDeleteConfirmation=!1,this.isRemovePopupOpen=!1,this.fileIndexToRemove=-1,this.fileNameToRemove=""}static{this.styles=o`
         ${X}
         ${Q}
         ${G}