@randstad-uca/design-system 1.0.40 → 1.0.41

package/dist/components/Modal.d.ts

@@ -13,11 +13,13 @@ export declare class CustomModal extends LitElement {
     primaryButtonLabel: string;
     showSecondaryButton: boolean;
     secondaryButtonLabel: string;
+    isFooterCustom: boolean;
     private scrollable;
     static styles: import("lit").CSSResult;
     private closeModal;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private setScrollableMode;
+    private getFooterClass;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/index.js

@@ -20,7 +20,7 @@ const l=t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)}
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const I={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:j},P=(t=I,e,i)=>{const{kind:o,metadata:r}=i;let s=globalThis.litPropertyMetadata.get(r);if(void 0===s&&globalThis.litPropertyMetadata.set(r,s=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),s.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function T(t){return(e,i)=>"object"==typeof i?P(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
+const P={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:j},I=(t=P,e,i)=>{const{kind:o,metadata:r}=i;let s=globalThis.litPropertyMetadata.get(r);if(void 0===s&&globalThis.litPropertyMetadata.set(r,s=new Map),"setter"===o&&((t=Object.create(t)).wrapped=!0),s.set(i.name,t),"accessor"===o){const{name:o}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(o,r,t)},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===o){const{name:o}=i;return function(i){const r=this[o];e.call(this,i),this.requestUpdate(o,r,t)}}throw Error("Unsupported decorator location: "+o)};function T(t){return(e,i)=>"object"==typeof i?I(t,e,i):((t,e,i)=>{const o=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),o?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -36,7 +36,7 @@ const I={attribute:!0,type:String,converter:O,reflect:!1,hasChanged:j},P=(t=I,e,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}const F=t`
+function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof e&&Object.defineProperty(t,e,i),i))(e,i,{get(){return(e=>e.renderRoot?.querySelector(t)??null)(this)}})}const _=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 12px;
@@ -873,7 +873,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .optional {
       color: var(--secondary-color-60);
-      ${F}
+      ${_}
     }
   `}togglePassword(t){this.isPasswordVisible=!this.isPasswordVisible;const e=t.currentTarget.parentElement?.querySelector("input");e&&(e.type=this.isPasswordVisible?"text":"password"),this.requestUpdate()}handleInput(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}))}handleKeyDown(t){if("Enter"===t.key){const t=new Event("submit",{bubbles:!0,composed:!0,cancelable:!0}),e=this.closest("form");e&&e.dispatchEvent(t)}}render(){const t=this.cleanButton&&this.value&&"password"!==this.type&&"textarea"!==this.type;return i`
       <div
@@ -986,7 +986,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .optional {
       color: var(--secondary-color-60);
-      ${F}
+      ${_}
     }
   `}render(){return i`
       <label class="form-label">
@@ -1066,7 +1066,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         <randstad-icon class="icon" name="${this.icon}" size="24px" style="color: var(--icon-color);"></randstad-icon>
         <span class="message">${this.message}</span>
       </div>
-    `}};n([T({type:String}),a("design:type",String)],J.prototype,"type",void 0),n([T({type:String}),a("design:type",String)],J.prototype,"icon",void 0),n([T({type:String}),a("design:type",String)],J.prototype,"message",void 0),n([T({type:Boolean}),a("design:type",Boolean)],J.prototype,"open",void 0),J=n([l("randstad-notice")],J);let Q=class extends e{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar",this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=t`
+    `}};n([T({type:String}),a("design:type",String)],J.prototype,"type",void 0),n([T({type:String}),a("design:type",String)],J.prototype,"icon",void 0),n([T({type:String}),a("design:type",String)],J.prototype,"message",void 0),n([T({type:Boolean}),a("design:type",Boolean)],J.prototype,"open",void 0),J=n([l("randstad-notice")],J);let Q=class extends e{constructor(){super(...arguments),this.open=!1,this.title="Título del modal",this.showNotice=!1,this.noticeType="informative",this.noticeMessage="",this.noticeIcon="info",this.showPrimaryButton=!1,this.primaryButtonLabel="Aceptar",this.showSecondaryButton=!1,this.secondaryButtonLabel="Cancelar",this.isFooterCustom=!1,this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=t`
     :host {
       font-family: 'Graphik', sans-serif;
       display: none;
@@ -1179,7 +1179,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       border-top: 1px solid var(--secondary-color-20);
     }
 
-    .modal-footer.one-button randstad-button {
+    .modal-footer.one-button randstad-button, .modal-footer.footer-custom {
       width: 100%;
     }
 
@@ -1196,7 +1196,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         width: 100%;
       }
     }
-  `}closeModal(){this.dispatchEvent(new CustomEvent("modal-close"))}connectedCallback(){super.connectedCallback(),this.setScrollableMode(),window.addEventListener("resize",this.setScrollableMode)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.setScrollableMode)}render(){return i`
+  `}closeModal(){this.dispatchEvent(new CustomEvent("modal-close"))}connectedCallback(){super.connectedCallback(),this.setScrollableMode(),window.addEventListener("resize",this.setScrollableMode)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.setScrollableMode)}getFooterClass(){return!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button":"footer-custom"}render(){return i`
       <div class="overlay" role="dialog" aria-modal="true">
         <div class="modal ${this.scrollable?"scrollable":""}">
           <div class="modal-header">
@@ -1205,10 +1205,12 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                 <div class="modal-title">${this.title}</div>
                 ${this.subtitle?i`<div class="modal-subtitle">${this.subtitle}</div>`:o}
               </div>
+
               <button class="modal-close" @click=${this.closeModal} aria-label="Cerrar modal">
                 <randstad-icon name="close" size="24px" style="--icon-color: var(--primary-color);"></randstad-icon>
               </button>
             </div>
+
             ${this.showNotice?i`
                   <randstad-notice
                     .open=${!0}
@@ -1218,18 +1220,14 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                   ></randstad-notice>
                 `:o}
           </div>
+
           <div class="modal-body ${this.scrollable?"scrollable":""}">
             <slot name="content"></slot>
           </div>
-          <div class="modal-footer ${this.showPrimaryButton&&this.showSecondaryButton?"two-buttons":"one-button"}">
-            ${this.showPrimaryButton?i`
-                  <randstad-button
-                    variant="button-primary"
-                    size="md"
-                    @click=${()=>this.dispatchEvent(new CustomEvent("primary-click"))}
-                    label=${this.primaryButtonLabel}
-                  ></randstad-button>
-                `:o}
+
+          <div class="modal-footer ${this.getFooterClass}">
+            ${!this.isFooterCustom||this.showPrimaryButton||this.showSecondaryButton?o:i` <slot name="footer-custom"></slot> `}
+
             ${this.showSecondaryButton?i`
                   <randstad-button
                     variant="button-secondary"
@@ -1238,10 +1236,19 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                     label=${this.secondaryButtonLabel}
                   ></randstad-button>
                 `:o}
+
+            ${this.showPrimaryButton?i`
+                  <randstad-button
+                    variant="button-primary"
+                    size="md"
+                    @click=${()=>this.dispatchEvent(new CustomEvent("primary-click"))}
+                    label=${this.primaryButtonLabel}
+                  ></randstad-button>
+                `:o}
           </div>
         </div>
       </div>
-    `}};n([T({type:Boolean,reflect:!0}),a("design:type",Object)],Q.prototype,"open",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"title",void 0),n([T({type:String}),a("design:type",String)],Q.prototype,"subtitle",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"showNotice",void 0),n([T({type:String}),a("design:type",String)],Q.prototype,"noticeType",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"noticeMessage",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"noticeIcon",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"showPrimaryButton",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"primaryButtonLabel",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"showSecondaryButton",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"secondaryButtonLabel",void 0),n([L(),a("design:type",Object)],Q.prototype,"scrollable",void 0),Q=n([l("custom-modal")],Q);let Z=class extends e{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No",this.stackedActions=[],this._onBackgroundClick=t=>{const e=t.composedPath(),i=this.renderRoot.querySelector(".popup");i&&!e.includes(i)&&(this.dispatchEvent(new CustomEvent("popup-close",{detail:null})),this.open=!1)}}static{this.styles=t`
+    `}};n([T({type:Boolean,reflect:!0}),a("design:type",Object)],Q.prototype,"open",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"title",void 0),n([T({type:String}),a("design:type",String)],Q.prototype,"subtitle",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"showNotice",void 0),n([T({type:String}),a("design:type",String)],Q.prototype,"noticeType",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"noticeMessage",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"noticeIcon",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"showPrimaryButton",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"primaryButtonLabel",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"showSecondaryButton",void 0),n([T({type:String}),a("design:type",Object)],Q.prototype,"secondaryButtonLabel",void 0),n([T({type:Boolean}),a("design:type",Object)],Q.prototype,"isFooterCustom",void 0),n([L(),a("design:type",Object)],Q.prototype,"scrollable",void 0),Q=n([l("custom-modal")],Q);let Z=class extends e{constructor(){super(...arguments),this.open=!1,this.type="default",this.icon="warning",this.title="Título del Popup",this.description="Descripción del popup",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No",this.stackedActions=[],this._onBackgroundClick=t=>{const e=t.composedPath(),i=this.renderRoot.querySelector(".popup");i&&!e.includes(i)&&(this.dispatchEvent(new CustomEvent("popup-close",{detail:null})),this.open=!1)}}static{this.styles=t`
     :host {
       display: none;
       position: fixed;
@@ -1438,7 +1445,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .circle-text {
-      ${F};
+      ${_};
       text-align: center;
       vertical-align: middle;
       fill: var(--randstad-dark-blue-40);
@@ -1519,7 +1526,7 @@ const dt="cubic-bezier(0.2, 0, 0, 1)";
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var ct;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(ct||(ct={}));const pt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],ht=r?null:window.matchMedia("(forced-colors: active)");class ut extends e{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=ct.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new ot(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return i`<div class="surface ${s(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==ct.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==ct.HOLDING)return this.state===ct.TOUCH_DELAY?(this.state=ct.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=ct.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=ct.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=ct.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===ct.TOUCH_DELAY&&(this.state=ct.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==ct.WAITING_FOR_CLICK?this.state===ct.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),o=Math.max(.35*i,75),r=Math.floor(.2*i),s=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(s+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),s=e+o,n=i+r,{pageX:a,pageY:l}=t;return{x:a-s,y:l-n}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let r;return r=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),o=`${e.x}px, ${e.y}px`,r=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${o}) scale(1)`,`translate(${r}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:dt,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=ct.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:o,bottom:r,right:s}=this.getBoundingClientRect();return t>=o&&t<=s&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!ht?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!r)for(const i of pt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}n([T({type:Boolean,reflect:!0})],ut.prototype,"disabled",void 0),n([L()],ut.prototype,"hovered",void 0),n([L()],ut.prototype,"pressed",void 0),n([_(".surface")],ut.prototype,"mdRoot",void 0);
+ */var ct;!function(t){t[t.INACTIVE=0]="INACTIVE",t[t.TOUCH_DELAY=1]="TOUCH_DELAY",t[t.HOLDING=2]="HOLDING",t[t.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK"}(ct||(ct={}));const pt=["click","contextmenu","pointercancel","pointerdown","pointerenter","pointerleave","pointerup"],ht=r?null:window.matchMedia("(forced-colors: active)");class ut extends e{constructor(){super(...arguments),this.disabled=!1,this.hovered=!1,this.pressed=!1,this.rippleSize="",this.rippleScale="",this.initialSize=0,this.state=ct.INACTIVE,this.checkBoundsAfterContextMenu=!1,this.attachableController=new ot(this,this.onControlChange.bind(this))}get htmlFor(){return this.attachableController.htmlFor}set htmlFor(t){this.attachableController.htmlFor=t}get control(){return this.attachableController.control}set control(t){this.attachableController.control=t}attach(t){this.attachableController.attach(t)}detach(){this.attachableController.detach()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true")}render(){const t={hovered:this.hovered,pressed:this.pressed};return i`<div class="surface ${s(t)}"></div>`}update(t){t.has("disabled")&&this.disabled&&(this.hovered=!1,this.pressed=!1),super.update(t)}handlePointerenter(t){this.shouldReactToEvent(t)&&(this.hovered=!0)}handlePointerleave(t){this.shouldReactToEvent(t)&&(this.hovered=!1,this.state!==ct.INACTIVE&&this.endPressAnimation())}handlePointerup(t){if(this.shouldReactToEvent(t)){if(this.state!==ct.HOLDING)return this.state===ct.TOUCH_DELAY?(this.state=ct.WAITING_FOR_CLICK,void this.startPressAnimation(this.rippleStartEvent)):void 0;this.state=ct.WAITING_FOR_CLICK}}async handlePointerdown(t){if(this.shouldReactToEvent(t)){if(this.rippleStartEvent=t,!this.isTouch(t))return this.state=ct.WAITING_FOR_CLICK,void this.startPressAnimation(t);this.checkBoundsAfterContextMenu&&!this.inBounds(t)||(this.checkBoundsAfterContextMenu=!1,this.state=ct.TOUCH_DELAY,await new Promise((t=>{setTimeout(t,150)})),this.state===ct.TOUCH_DELAY&&(this.state=ct.HOLDING,this.startPressAnimation(t)))}}handleClick(){this.disabled||(this.state!==ct.WAITING_FOR_CLICK?this.state===ct.INACTIVE&&(this.startPressAnimation(),this.endPressAnimation()):this.endPressAnimation())}handlePointercancel(t){this.shouldReactToEvent(t)&&this.endPressAnimation()}handleContextmenu(){this.disabled||(this.checkBoundsAfterContextMenu=!0,this.endPressAnimation())}determineRippleSize(){const{height:t,width:e}=this.getBoundingClientRect(),i=Math.max(t,e),o=Math.max(.35*i,75),r=Math.floor(.2*i),s=Math.sqrt(e**2+t**2)+10;this.initialSize=r,this.rippleScale=""+(s+o)/r,this.rippleSize=`${r}px`}getNormalizedPointerEventCoords(t){const{scrollX:e,scrollY:i}=window,{left:o,top:r}=this.getBoundingClientRect(),s=e+o,n=i+r,{pageX:a,pageY:l}=t;return{x:a-s,y:l-n}}getTranslationCoordinates(t){const{height:e,width:i}=this.getBoundingClientRect(),o={x:(i-this.initialSize)/2,y:(e-this.initialSize)/2};let r;return r=t instanceof PointerEvent?this.getNormalizedPointerEventCoords(t):{x:i/2,y:e/2},r={x:r.x-this.initialSize/2,y:r.y-this.initialSize/2},{startPoint:r,endPoint:o}}startPressAnimation(t){if(!this.mdRoot)return;this.pressed=!0,this.growAnimation?.cancel(),this.determineRippleSize();const{startPoint:e,endPoint:i}=this.getTranslationCoordinates(t),o=`${e.x}px, ${e.y}px`,r=`${i.x}px, ${i.y}px`;this.growAnimation=this.mdRoot.animate({top:[0,0],left:[0,0],height:[this.rippleSize,this.rippleSize],width:[this.rippleSize,this.rippleSize],transform:[`translate(${o}) scale(1)`,`translate(${r}) scale(${this.rippleScale})`]},{pseudoElement:"::after",duration:450,easing:dt,fill:"forwards"})}async endPressAnimation(){this.rippleStartEvent=void 0,this.state=ct.INACTIVE;const t=this.growAnimation;let e=1/0;"number"==typeof t?.currentTime?e=t.currentTime:t?.currentTime&&(e=t.currentTime.to("ms").value),e>=225?this.pressed=!1:(await new Promise((t=>{setTimeout(t,225-e)})),this.growAnimation===t&&(this.pressed=!1))}shouldReactToEvent(t){if(this.disabled||!t.isPrimary)return!1;if(this.rippleStartEvent&&this.rippleStartEvent.pointerId!==t.pointerId)return!1;if("pointerenter"===t.type||"pointerleave"===t.type)return!this.isTouch(t);const e=1===t.buttons;return this.isTouch(t)||e}inBounds({x:t,y:e}){const{top:i,left:o,bottom:r,right:s}=this.getBoundingClientRect();return t>=o&&t<=s&&e>=i&&e<=r}isTouch({pointerType:t}){return"touch"===t}async handleEvent(t){if(!ht?.matches)switch(t.type){case"click":this.handleClick();break;case"contextmenu":this.handleContextmenu();break;case"pointercancel":this.handlePointercancel(t);break;case"pointerdown":await this.handlePointerdown(t);break;case"pointerenter":this.handlePointerenter(t);break;case"pointerleave":this.handlePointerleave(t);break;case"pointerup":this.handlePointerup(t)}}onControlChange(t,e){if(!r)for(const i of pt)t?.removeEventListener(i,this),e?.addEventListener(i,this)}}n([T({type:Boolean,reflect:!0})],ut.prototype,"disabled",void 0),n([L()],ut.prototype,"hovered",void 0),n([L()],ut.prototype,"pressed",void 0),n([F(".surface")],ut.prototype,"mdRoot",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
@@ -1560,18 +1567,18 @@ const Ct=Symbol("isFocusable"),Et=Symbol("privateIsFocusable"),Ot=Symbol("extern
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-const zt=Symbol("getFormValue"),It=Symbol("getFormState");
+const zt=Symbol("getFormValue"),Pt=Symbol("getFormState");
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-class Pt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
+class It{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const t=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,t)))return this.currentValidity;const{validity:e,validationMessage:i}=this.computeValidity(t);return this.prevState=this.copy(t),this.currentValidity={validationMessage:i,validity:{badInput:e.badInput,customError:e.customError,patternMismatch:e.patternMismatch,rangeOverflow:e.rangeOverflow,rangeUnderflow:e.rangeUnderflow,stepMismatch:e.stepMismatch,tooLong:e.tooLong,tooShort:e.tooShort,typeMismatch:e.typeMismatch,valueMissing:e.valueMissing}},this.currentValidity}}
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */class Tt extends Pt{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:o,required:r}of t)r&&(e=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const o=t[i],r=e[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
+ */class Tt extends It{computeValidity(t){this.radioElement||(this.radioElement=document.createElement("input"),this.radioElement.type="radio",this.radioElement.name="group");let e=!1,i=!1;for(const{checked:o,required:r}of t)r&&(e=!0),o&&(i=!0);return this.radioElement.checked=i,this.radioElement.required=e,{validity:{valueMissing:e&&!i},validationMessage:this.radioElement.validationMessage}}equals(t,e){if(t.length!==e.length)return!1;for(let i=0;i<t.length;i++){const o=t[i],r=e[i];if(o.checked!==r.checked||o.required!==r.required)return!1}return!0}copy(t){return t.map((({checked:t,required:e})=>({checked:t,required:e})))}}
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -1581,7 +1588,7 @@ class Pt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */var _t;const Ft=Symbol("checked");let Mt=0;const Rt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[$t](),this[mt].validity}get validationMessage(){return this[$t](),this[mt].validationMessage}get willValidate(){return this[$t](),this[mt].willValidate}checkValidity(){return this[$t](),this[mt].checkValidity()}reportValidity(){return this[$t](),this[mt].reportValidity()}setCustomValidity(t){this[St]=t,this[$t]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[$t]()}firstUpdated(t){super.firstUpdated(t),this[$t]()}[(e=St,$t)](){if(r)return;this[kt]||(this[kt]=this[xt]());const{validity:t,validationMessage:e}=this[kt].getValidity(),i=!!this[St],o=this[St]||e;this[mt].setValidity({...t,customError:i},o,this[wt]()??void 0)}[xt](){throw new Error("Implement [createValidator]")}[wt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[mt].form}get labels(){return this[mt].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[mt].setFormValue(this[zt](),this[It]())}[zt](){throw new Error("Implement [getFormValue]")}[It](){return this[zt]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([T({noAccessor:!0})],e.prototype,"name",null),n([T({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Bt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Ct](){return this[Et]}set[Ct](t){this[Ct]!==t&&(this[Et]=t,this[At]())}connectedCallback(){super.connectedCallback(),this[At]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[jt])return this.hasAttribute("tabindex")?void(this[Ot]=this.tabIndex):(this[Ot]=null,void this[At]())}else super.attributeChangedCallback(t,e,i)}[(e=Et,i=Ot,o=jt,At)](){const t=this[Ct]?0:-1,e=this[Ot]??t;this[jt]=!0,this.tabIndex=e,this[jt]=!1}}return n([T({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Bt{get[mt](){return this[ft]||(this[ft]=this.attachInternals()),this[ft]}})));var Bt;class Dt extends Rt{get checked(){return this[Ft]}set checked(t){const e=this.checked;e!==t&&(this[Ft]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Mt,this[_t]=!1,this.required=!1,this.value="on",this.selectionController=new Lt(this),this.addController(this.selectionController),r||(this[mt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return i`
+ */var Ft;const _t=Symbol("checked");let Mt=0;const Rt=function(t){var e;class i extends t{constructor(){super(...arguments),this[e]=""}get validity(){return this[$t](),this[mt].validity}get validationMessage(){return this[$t](),this[mt].validationMessage}get willValidate(){return this[$t](),this[mt].willValidate}checkValidity(){return this[$t](),this[mt].checkValidity()}reportValidity(){return this[$t](),this[mt].reportValidity()}setCustomValidity(t){this[St]=t,this[$t]()}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[$t]()}firstUpdated(t){super.firstUpdated(t),this[$t]()}[(e=St,$t)](){if(r)return;this[kt]||(this[kt]=this[xt]());const{validity:t,validationMessage:e}=this[kt].getValidity(),i=!!this[St],o=this[St]||e;this[mt].setValidity({...t,customError:i},o,this[wt]()??void 0)}[xt](){throw new Error("Implement [createValidator]")}[wt](){throw new Error("Implement [getValidityAnchor]")}}return i}(function(t){class e extends t{get form(){return this[mt].form}get labels(){return this[mt].labels}get name(){return this.getAttribute("name")??""}set name(t){this.setAttribute("name",t)}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.toggleAttribute("disabled",t)}attributeChangedCallback(t,e,i){if("name"!==t&&"disabled"!==t)super.attributeChangedCallback(t,e,i);else{const i="disabled"===t?null!==e:e;this.requestUpdate(t,i)}}requestUpdate(t,e,i){super.requestUpdate(t,e,i),this[mt].setFormValue(this[zt](),this[Pt]())}[zt](){throw new Error("Implement [getFormValue]")}[Pt](){return this[zt]()}formDisabledCallback(t){this.disabled=t}}return e.formAssociated=!0,n([T({noAccessor:!0})],e.prototype,"name",null),n([T({type:Boolean,noAccessor:!0})],e.prototype,"disabled",null),e}((Bt=function(t){var e,i,o;class r extends t{constructor(){super(...arguments),this[e]=!0,this[i]=null,this[o]=!1}get[Ct](){return this[Et]}set[Ct](t){this[Ct]!==t&&(this[Et]=t,this[At]())}connectedCallback(){super.connectedCallback(),this[At]()}attributeChangedCallback(t,e,i){if("tabindex"===t){if(this.requestUpdate("tabIndex",Number(e??-1)),!this[jt])return this.hasAttribute("tabindex")?void(this[Ot]=this.tabIndex):(this[Ot]=null,void this[At]())}else super.attributeChangedCallback(t,e,i)}[(e=Et,i=Ot,o=jt,At)](){const t=this[Ct]?0:-1,e=this[Ot]??t;this[jt]=!0,this.tabIndex=e,this[jt]=!1}}return n([T({noAccessor:!0})],r.prototype,"tabIndex",void 0),r}(e),class extends Bt{get[mt](){return this[ft]||(this[ft]=this.attachInternals()),this[ft]}})));var Bt;class Dt extends Rt{get checked(){return this[_t]}set checked(t){const e=this.checked;e!==t&&(this[_t]=t,this.requestUpdate("checked",e),this.selectionController.handleCheckedChange())}constructor(){super(),this.maskId="cutout"+ ++Mt,this[Ft]=!1,this.required=!1,this.value="on",this.selectionController=new Lt(this),this.addController(this.selectionController),r||(this[mt].role="radio",this.addEventListener("click",this.handleClick.bind(this)),this.addEventListener("keydown",this.handleKeydown.bind(this)))}render(){const t={checked:this.checked};return i`
       <div class="container ${s(t)}" aria-hidden="true">
         <md-ripple
           part="ripple"
@@ -1604,7 +1611,7 @@ class Pt{constructor(t){this.getCurrentState=t,this.currentValidity={validity:{}
 
         <div class="touch-target"></div>
       </div>
-    `}updated(){this[mt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(yt(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(_t=Ft,zt)](){return this.checked?this.value:null}[It](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[xt](){return new Tt((()=>this.selectionController?this.selectionController.controls:[this]))}[wt](){return this.container}}n([T({type:Boolean})],Dt.prototype,"checked",null),n([T({type:Boolean})],Dt.prototype,"required",void 0),n([T()],Dt.prototype,"value",void 0),n([_(".container")],Dt.prototype,"container",void 0);
+    `}updated(){this[mt].ariaChecked=String(this.checked)}async handleClick(t){this.disabled||(await 0,t.defaultPrevented||(yt(t)&&this.focus(),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0}))))}async handleKeydown(t){await 0," "!==t.key||t.defaultPrevented||this.click()}[(Ft=_t,zt)](){return this.checked?this.value:null}[Pt](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(t){this.checked="true"===t}[xt](){return new Tt((()=>this.selectionController?this.selectionController.controls:[this]))}[wt](){return this.container}}n([T({type:Boolean})],Dt.prototype,"checked",null),n([T({type:Boolean})],Dt.prototype,"required",void 0),n([T()],Dt.prototype,"value",void 0),n([F(".container")],Dt.prototype,"container",void 0);
 /**
  * @license
  * Copyright 2024 Google LLC
@@ -1974,7 +1981,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
 
     .optional {
       color: var(--secondary-color-60);
-      ${F}
+      ${_}
     }
 
     /* Estilos por defecto del icon para mobile */
@@ -2537,21 +2544,21 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .text-secondary {
-      ${F};
+      ${_};
       text-align: center;
       vertical-align: middle;
       color: var(--secondary-color-60);
     }
 
     .text-tertiary {
-      ${F};
+      ${_};
       text-align: center;
       vertical-align: middle;
       color: var(--secondary-color-40);
     }
 
     .button {
-      ${F};
+      ${_};
       background-color: var(--primary-color);
       border: none;
       padding: 4px 16px;