@randstad-uca/design-system 1.0.43 → 1.0.45

package/dist/components/Modal.d.ts

@@ -14,6 +14,7 @@ export declare class CustomModal extends LitElement {
     showSecondaryButton: boolean;
     secondaryButtonLabel: string;
     isFooterCustom: boolean;
+    modalWidth: string;
     private scrollable;
     static styles: import("lit").CSSResult;
     private closeModal;

package/dist/index.js

@@ -216,7 +216,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     .button-primary[disabled] {
       color: var(--secondary-color-60);
       background-color: var(--secondary-color-20);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     /* Secondary */
@@ -244,7 +244,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     .button-secondary[disabled] {
       color: var(--secondary-color-60);
       border-color: var(--secondary-color-60);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     /* Tertiary */
@@ -269,7 +269,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .button-tertiary[disabled] {
       color: var(--secondary-color-60);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     /* Round */
@@ -297,7 +297,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .button-round[disabled] {
       background-color: var(--secondary-color-20);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     .button-round img.button-icon {
@@ -385,7 +385,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     .button-card[disabled] {
       background-color: #CFD1D9;
       color: #6F758D;
-      cursor: not-allowed;
+      cursor: default;
     }
 
   `}handleClick(t){if(!this.disabled)if("submit"===this.type){const t=this.closest("form");t&&t.requestSubmit()}else if("reset"===this.type){const t=this.closest("form");t&&t.reset()}else this.idevent&&this.dispatchEvent(new CustomEvent("randstad-button-click",{detail:this.idevent,composed:!0,bubbles:!0,cancelable:!1}))}render(){const t={button:!0,[this.variant]:!0,loader:this.loader,[`button-${this.size}`]:"button-round"!==this.variant&&"button-card"!==this.variant},e="button-tertiary"===this.variant?"var(--primary-color)":"white";return i`
@@ -623,7 +623,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     input[type="checkbox"]:disabled {
       background-color: var(--secondary-color-10);
       border-color: var(--secondary-color-20);
-      cursor: not-allowed;
+      cursor: default;
     }
 
   `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}render(){return i`
@@ -642,7 +642,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           <slot></slot>
         </span>
       </label>
-    `}};n([T({type:Boolean,reflect:!0}),a("design:type",Object)],K.prototype,"checked",void 0),n([T({type:Boolean}),a("design:type",Object)],K.prototype,"error",void 0),n([T({type:Boolean}),a("design:type",Object)],K.prototype,"disabled",void 0),K=n([l("randstad-checkbox")],K);let Y=class extends e{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1,this.required=!1,this.optional=!1}static{this.styles=t`
+    `}};n([T({type:Boolean,reflect:!0}),a("design:type",Object)],K.prototype,"checked",void 0),n([T({type:Boolean}),a("design:type",Object)],K.prototype,"error",void 0),n([T({type:Boolean}),a("design:type",Object)],K.prototype,"disabled",void 0),K=n([l("randstad-checkbox")],K);let W=class extends e{constructor(){super(...arguments),this.value="",this.size="md",this.icon=null,this.helper=null,this.error=!1,this.errorMessage="",this.disabled=!1,this.typing=!1,this.type="text",this.isPasswordVisible=!1,this.cleanButton=!1,this.required=!1,this.optional=!1}static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -711,7 +711,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .form.disabled .form-input {
       background-color: var(--secondary-color-10);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     input::placeholder {
@@ -767,7 +767,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
     .form.disabled textarea.form-input {
       background-color: var(--secondary-color-10);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     .helper-description {
@@ -946,7 +946,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.helper?i`<p class="helper-description">${this.helper}</p>`:o}
       </div>
-    `}};n([T({type:String}),a("design:type",String)],Y.prototype,"placeholder",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"label",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"labelColor",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"value",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"size",void 0),n([T({type:String}),a("design:type",Object)],Y.prototype,"icon",void 0),n([T({type:String}),a("design:type",Object)],Y.prototype,"helper",void 0),n([T({type:Boolean}),a("design:type",Boolean)],Y.prototype,"error",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"errorMessage",void 0),n([T({type:Boolean}),a("design:type",Boolean)],Y.prototype,"disabled",void 0),n([T({type:Boolean}),a("design:type",Boolean)],Y.prototype,"typing",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"type",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"tooltipMessage",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"linkText",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"linkRoute",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Object)],Y.prototype,"isPasswordVisible",void 0),n([T({type:Boolean}),a("design:type",Boolean)],Y.prototype,"cleanButton",void 0),n([T({type:Number}),a("design:type",Number)],Y.prototype,"maxLength",void 0),n([T({type:Boolean}),a("design:type",Object)],Y.prototype,"required",void 0),n([T({type:Boolean}),a("design:type",Object)],Y.prototype,"optional",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"helpLink",void 0),Y=n([l("randstad-form")],Y);let W=class extends e{constructor(){super(...arguments),this.label="",this.error=!1,this.errorMessage="",this.required=!1,this.optional=!1}static{this.styles=t`
+    `}};n([T({type:String}),a("design:type",String)],W.prototype,"placeholder",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"label",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"labelColor",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"value",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"size",void 0),n([T({type:String}),a("design:type",Object)],W.prototype,"icon",void 0),n([T({type:String}),a("design:type",Object)],W.prototype,"helper",void 0),n([T({type:Boolean}),a("design:type",Boolean)],W.prototype,"error",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"errorMessage",void 0),n([T({type:Boolean}),a("design:type",Boolean)],W.prototype,"disabled",void 0),n([T({type:Boolean}),a("design:type",Boolean)],W.prototype,"typing",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"type",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"tooltipMessage",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"linkText",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"linkRoute",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Object)],W.prototype,"isPasswordVisible",void 0),n([T({type:Boolean}),a("design:type",Boolean)],W.prototype,"cleanButton",void 0),n([T({type:Number}),a("design:type",Number)],W.prototype,"maxLength",void 0),n([T({type:Boolean}),a("design:type",Object)],W.prototype,"required",void 0),n([T({type:Boolean}),a("design:type",Object)],W.prototype,"optional",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"helpLink",void 0),W=n([l("randstad-form")],W);let Y=class extends e{constructor(){super(...arguments),this.label="",this.error=!1,this.errorMessage="",this.required=!1,this.optional=!1}static{this.styles=t`
     :host {
       display: flex;
       flex-direction: column;
@@ -999,7 +999,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       </div>
 
       ${this.error?i`<span class="error">${this.errorMessage}</span>`:this.helper?i`<span class="helper">${this.helper}</span>`:null}
-    `}};n([T({type:String}),a("design:type",Object)],W.prototype,"label",void 0),n([T({type:String}),a("design:type",String)],W.prototype,"helper",void 0),n([T({type:Boolean}),a("design:type",Object)],W.prototype,"error",void 0),n([T({type:String}),a("design:type",Object)],W.prototype,"errorMessage",void 0),n([T({type:Boolean}),a("design:type",Object)],W.prototype,"required",void 0),n([T({type:Boolean}),a("design:type",Object)],W.prototype,"optional",void 0),W=n([l("randstad-form-group")],W);class X extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
+    `}};n([T({type:String}),a("design:type",Object)],Y.prototype,"label",void 0),n([T({type:String}),a("design:type",String)],Y.prototype,"helper",void 0),n([T({type:Boolean}),a("design:type",Object)],Y.prototype,"error",void 0),n([T({type:String}),a("design:type",Object)],Y.prototype,"errorMessage",void 0),n([T({type:Boolean}),a("design:type",Object)],Y.prototype,"required",void 0),n([T({type:Boolean}),a("design:type",Object)],Y.prototype,"optional",void 0),Y=n([l("randstad-form-group")],Y);class X extends e{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=t`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -1066,7 +1066,7 @@ function F(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.isFooterCustom=!1,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.modalWidth="500px",this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=t`
     :host {
       font-family: 'Graphik', sans-serif;
       display: none;
@@ -1083,42 +1083,69 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       left: 0;
       right: 0;
       bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      overflow-y: auto;
-      padding: 40px 16px;
       z-index: 9999;
       display: flex;
+      background: rgba(15, 25, 65, 0.4);
       justify-content: center;
-      align-items: flex-start;
+      align-items: center;
+      overflow-y: auto;
     }
 
     .modal {
-      background: var(--brand-off-white);
       width: 100%;
-      max-width: 500px;
+      background: var(--brand-off-white);
+      max-width: var(--modal-width);
+      max-height: 80vh;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       display: flex;
       flex-direction: column;
-      margin-top: 40px;
       border-radius: 8px;
     }
 
-    .modal.scrollable {
-      max-height: 90vh;
-    }
-
-    .modal-body.scrollable {
+    .modal-body {
       overflow-y: auto;
       flex: 1;
     }
+    
+    .modal-footer {
+      justify-content: flex-end;
+    }
 
-    .modal-body {
-      display: flex;
-      flex-direction: column;
-      padding: 24px;
-      gap: 16px;
+    .modal-footer.one-button randstad-button {
+      width: 100%;
+    }
+
+    .modal-footer.two-buttons randstad-button {
+      width: 50%;
+    }
+
+    /* Estilos para dispositivos pequeños (<= 940px) */
+    @media (max-width: 940px) {
+      .modal {
+        /* Se estira para ocupar casi toda la pantalla */
+        width: 96vw; 
+        height: 96vh;
+        max-width: none;
+        max-height: none;
+        margin: 0;
+      }
+
+      .modal-header,
+      .modal-body,
+      .modal-footer {
+        padding: 0; 
+      }
+
+      .modal-header {
+        margin-bottom: 16px;
+      }
+      
+      .modal-footer {
+        margin-top: 16px;
+      }
     }
 
+    /* Estilos comunes a ambos tamaños de pantalla */
     .modal-header {
       display: flex;
       flex-direction: column;
@@ -1170,39 +1197,27 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       padding: 0;
     }
 
-    .modal-footer {
+    .modal-body {
       display: flex;
-      justify-content: flex-end;
-      flex-direction: row;
+      flex-direction: column;
       padding: 24px;
       gap: 16px;
-      border-top: 1px solid var(--secondary-color-20);
     }
 
-    .modal-footer.one-button randstad-button, .modal-footer.footer-custom {
-      width: 100%;
-    }
-
-    .modal-footer.two-buttons randstad-button {
-      width: 50%;
-    }
-
-    @media (max-width: 940px) {
-      .modal-footer.two-buttons {
-        flex-direction: column;
-      }
-
-      .modal-footer.two-buttons randstad-button {
-        width: 100%;
-      }
+    .modal-footer {
+      display: flex;
+      padding: 24px;
+      gap: 16px;
+      border-top: 1px solid var(--secondary-color-20);
     }
   `}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" style="--modal-width: ${this.modalWidth};">
           <div class="modal-header">
             <div class="modal-header-content">
               <div class="titles-container">
                 <div class="modal-title">${this.title}</div>
+                
                 ${this.subtitle?i`<div class="modal-subtitle">${this.subtitle}</div>`:o}
               </div>
 
@@ -1212,12 +1227,13 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
             </div>
 
             ${this.showNotice?i`
-                  <randstad-notice
-                    .open=${!0}
-                    .type=${this.noticeType}
-                    .icon=${this.noticeIcon}
-                    .message=${this.noticeMessage}
-                  ></randstad-notice>
+                <randstad-notice
+                  .open=${!0}
+                  .type=${this.noticeType}
+                  .icon=${this.noticeIcon}
+                  .message=${this.noticeMessage}
+                >
+                </randstad-notice>
                 `:o}
           </div>
 
@@ -1225,30 +1241,31 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
             <slot name="content"></slot>
           </div>
 
-          <div class="modal-footer ${this.getFooterClass}">
+          <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"
-                    size="md"
-                    @click=${()=>this.dispatchEvent(new CustomEvent("secondary-click"))}
-                    label=${this.secondaryButtonLabel}
-                  ></randstad-button>
+                <randstad-button
+                  variant="button-secondary"
+                  size="md"
+                  @click=${()=>this.dispatchEvent(new CustomEvent("secondary-click"))}
+                  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>
+                <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([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`
+    `}};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([T({type:String}),a("design:type",Object)],Q.prototype,"modalWidth",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;
@@ -1668,7 +1685,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     md-radio.disabled {
-      cursor: not-allowed;
+      cursor: default;
       background: var(--secondary-color-20);
       border: 1px solid var(--secondary-color-20);
     }
@@ -2363,7 +2380,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </div>
         `))}
       </div>
-    `}};n([T({type:Number}),a("design:type",Object)],Kt.prototype,"totalSteps",void 0),n([T({type:Number}),a("design:type",Object)],Kt.prototype,"currentStep",void 0),Kt=n([l("custom-stepper")],Kt);let Yt=class extends e{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:o}=t;this.showPrev=e>0,this.showNext=e+o<i-1}}static{this.styles=t`
+    `}};n([T({type:Number}),a("design:type",Object)],Kt.prototype,"totalSteps",void 0),n([T({type:Number}),a("design:type",Object)],Kt.prototype,"currentStep",void 0),Kt=n([l("custom-stepper")],Kt);let Wt=class extends e{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=56,this.handleScroll=()=>{const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const{scrollLeft:e,scrollWidth:i,clientWidth:o}=t;this.showPrev=e>0,this.showNext=e+o<i-1}}static{this.styles=t`
     :host {
       display: block;
       border-bottom: 1px solid #E7E8EC;
@@ -2502,7 +2519,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </button>
         `:null}
       </div>
-    `}};n([T({type:Array}),a("design:type",Array)],Yt.prototype,"tabs",void 0),n([T({type:String}),a("design:type",String)],Yt.prototype,"selected",void 0),n([L(),a("design:type",String)],Yt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Yt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Yt.prototype,"showNext",void 0),Yt=n([l("tabs-bar")],Yt);let Wt=class extends e{constructor(){super(...arguments),this.files=[],this.loading=!1,this.progress=0,this.isDragging=!1,this.disabled=!1}static{this.styles=t`
+    `}};n([T({type:Array}),a("design:type",Array)],Wt.prototype,"tabs",void 0),n([T({type:String}),a("design:type",String)],Wt.prototype,"selected",void 0),n([L(),a("design:type",String)],Wt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Wt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Wt.prototype,"showNext",void 0),Wt=n([l("tabs-bar")],Wt);let Yt=class extends e{constructor(){super(...arguments),this.files=[],this.loading=!1,this.progress=0,this.isDragging=!1,this.disabled=!1}static{this.styles=t`
 
     :host {
       font-family: 'Graphik', sans-serif;
@@ -2572,7 +2589,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     :host([disabled]) .button {
       background-color: var(--secondary-color-20);
       color: var(--secondary-color-80);
-      cursor: not-allowed;
+      cursor: default;
     }
 
     input[type="file"] {
@@ -2626,5 +2643,5 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             </label>
           `}
       </div>
-    `}};n([T({type:Array}),a("design:type",Array)],Wt.prototype,"files",void 0),n([L(),a("design:type",Object)],Wt.prototype,"loading",void 0),n([L(),a("design:type",Object)],Wt.prototype,"progress",void 0),n([L(),a("design:type",Object)],Wt.prototype,"isDragging",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Object)],Wt.prototype,"disabled",void 0),Wt=n([l("upload-image")],Wt);export{N as AccordionList,V as AccordionPanel,H as CarouselCard,K as Checkbox,Q as CustomModal,Z as CustomPopup,Vt as CustomRadio,Kt as CustomStepper,Nt as FilterableSelect,W as FormGroup,X as IconComponent,tt as ProgressCircle,G as RandstadButton,Y as RandstadForm,J as RandstadNotice,Yt as TabsBar,Wt as UploadImage};
+    `}};n([T({type:Array}),a("design:type",Array)],Yt.prototype,"files",void 0),n([L(),a("design:type",Object)],Yt.prototype,"loading",void 0),n([L(),a("design:type",Object)],Yt.prototype,"progress",void 0),n([L(),a("design:type",Object)],Yt.prototype,"isDragging",void 0),n([T({type:Boolean,reflect:!0}),a("design:type",Object)],Yt.prototype,"disabled",void 0),Yt=n([l("upload-image")],Yt);export{N as AccordionList,V as AccordionPanel,H as CarouselCard,K as Checkbox,Q as CustomModal,Z as CustomPopup,Vt as CustomRadio,Kt as CustomStepper,Nt as FilterableSelect,Y as FormGroup,X as IconComponent,tt as ProgressCircle,G as RandstadButton,W as RandstadForm,J as RandstadNotice,Wt as TabsBar,Yt as UploadImage};
 //# sourceMappingURL=index.js.map