@randstad-uca/design-system 1.0.51 → 1.0.53

package/dist/components/Button.d.ts

@@ -1,15 +1,15 @@
 import { LitElement } from 'lit';
 import '../styles/buttons.css';
 export declare class RandstadButton extends LitElement {
+    type: 'button' | 'submit' | 'reset';
     variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round' | 'button-card' | 'button-icon';
     size: 'md' | 'lg';
     label: string;
     loader: boolean;
     iconSrc?: string;
     iconPosition: 'left' | 'right';
-    disabled: boolean;
     iconName: string | null;
-    type: 'button' | 'submit' | 'reset';
+    disabled: boolean;
     idevent: string;
     static styles: import("lit").CSSResult;
     private handleClick;

package/dist/components/FormGroup.d.ts

@@ -1,6 +1,6 @@
 import { BaseControl } from '../helpers/BaseControl';
 export declare class FormGroup extends BaseControl {
-    direction: 'column' | 'row';
+    rows: string;
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/Modal.d.ts

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

package/dist/index.js

@@ -204,7 +204,7 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       flex-direction: column;
       gap: 16px;
     }
-  `}render(){return e`<slot></slot>`}};Y=a([d("accordion-list")],Y);let U=class extends t{constructor(){super(...arguments),this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.disabled=!1,this.iconName=null,this.type="button",this.idevent=""}static{this.styles=o`
+  `}render(){return e`<slot></slot>`}};Y=a([d("accordion-list")],Y);let U=class extends t{constructor(){super(...arguments),this.type="button",this.variant="button-primary",this.size="md",this.label="",this.loader=!1,this.iconPosition="left",this.iconName=null,this.disabled=!1,this.idevent=""}static{this.styles=o`
     :host {
       display: inline-block;
     }
@@ -216,11 +216,30 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       border-radius: 4px;
       cursor: pointer;
       font-weight: 400;
-      padding: 16px;
+      padding: 0;
       border: none;
       transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
       gap: 4px;
       width: 100%;
+      position: relative;
+      box-sizing: border-box; 
+    }
+
+    .content-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      width: 100%;
+      padding: 16px;
+      height: 100%;
+    }
+
+    .content-container .label-text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
     }
 
     .button-lg {
@@ -369,15 +388,17 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       color: var(--secondary-color-60);
       cursor: default;
     }
-
+    
     /* Loader */
+    .loader, .label-text, .button-icon {
+      line-height: 1; 
+    }
+      
     .loader {
       display: flex;
-      gap: 8px;
-      justify-content: center;
       align-items: center;
-      width: 100%;
-      height: 100%;
+      justify-content: center;
+      gap: 8px;
     }
 
     .dot {
@@ -419,6 +440,33 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       color: var(--white);
     }
 
+    /* Estilos de sobrescritura para el estado de carga */
+    .button-primary.loader[disabled] {
+      background-color: var(--primary-color) !important;
+      color: var(--white) !important;
+    }
+
+    .button-secondary.loader[disabled] {
+      background-color: var(--primary-color) !important;
+      border-color: var(--primary-color) !important;
+      color: var(--white) !important;
+    }
+
+    .button-tertiary.loader[disabled] {
+      color: var(--primary-color) !important;
+      background-color: transparent !important;
+    }
+
+    .button-round.loader[disabled] {
+      background-color: var(--white) !important;
+    }
+
+    .button-icon.loader[disabled] {
+      color: var(--primary-color) !important;
+      background-color: transparent !important;
+    }
+    /*  */  
+
     .button-card {
       font-family: 'Graphik';
       background-color: var(--primary-color);
@@ -458,24 +506,31 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         part="button"
         type=${this.type}
         class=${n(t)}
-        ?disabled=${this.disabled}
+        ?disabled=${this.disabled||this.loader}
         ?aria-busy=${this.loader}
         @click=${this.handleClick}
       >
         ${this.loader?e`
+            <div class="content-container">
               <div class="loader">
                 <span class="dot" style="background-color: ${i};"></span>
                 <span class="dot" style="background-color: ${i};"></span>
                 <span class="dot" style="background-color: ${i};"></span>
               </div>
+            </div>
             `:e`
+            <div class="content-container">
               ${this.iconSrc&&"button-round"===this.variant?e`<img src=${this.iconSrc} alt="icon" class="button-icon" part="button-icon"/>`:""}
+              
               ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?e`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
-              ${this.label?e`<span part="label">${this.label}</span>`:e`<slot></slot>`}
+              
+              ${this.label?e`<span class="label-text" part="label">${this.label}</span>`:e`<slot></slot>`}
+              
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?e`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
-            `}
+            </div>
+          `}
       </button>
-    `}};a([T({type:String}),s("design:type",String)],U.prototype,"variant",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"label",void 0),a([T({type:Boolean}),s("design:type",Object)],U.prototype,"loader",void 0),a([T({type:String,attribute:"icon-src"}),s("design:type",String)],U.prototype,"iconSrc",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"iconPosition",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Boolean)],U.prototype,"disabled",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"iconName",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"type",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"idevent",void 0),U=a([d("randstad-button")],U);let H=class extends t{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.buttonLabel="Contactanos",this.cardId=""}static{this.styles=o`
+    `}};a([T({type:String}),s("design:type",String)],U.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"variant",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"label",void 0),a([T({type:Boolean}),s("design:type",Object)],U.prototype,"loader",void 0),a([T({type:String,attribute:"icon-src"}),s("design:type",String)],U.prototype,"iconSrc",void 0),a([T({type:String}),s("design:type",String)],U.prototype,"iconPosition",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"iconName",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Boolean)],U.prototype,"disabled",void 0),a([T({type:String}),s("design:type",Object)],U.prototype,"idevent",void 0),U=a([d("randstad-button")],U);let H=class extends t{constructor(){super(...arguments),this.img="",this.name="",this.title="",this.description="",this.buttonLabel="Contactanos",this.cardId=""}static{this.styles=o`
     :host {
       display: inline-block;
       font-family: "Graphik", sans-serif;
@@ -1042,12 +1097,14 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.renderHelper()} 
       </div>
-    `}};a([T({type:String}),s("design:type",String)],J.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"icon",void 0),a([T({type:Boolean}),s("design:type",Boolean)],J.prototype,"typing",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"linkText",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"linkRoute",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],J.prototype,"isPasswordVisible",void 0),a([T({type:Boolean}),s("design:type",Boolean)],J.prototype,"cleanButton",void 0),a([T({type:Number}),s("design:type",Number)],J.prototype,"maxLength",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"heightTextArea",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"maxHeightTextArea",void 0),J=a([d("randstad-form")],J);let Z=class extends L{constructor(){super(...arguments),this.direction="column"}static{this.styles=o`
+    `}};a([T({type:String}),s("design:type",String)],J.prototype,"size",void 0),a([T({type:String}),s("design:type",Object)],J.prototype,"icon",void 0),a([T({type:Boolean}),s("design:type",Boolean)],J.prototype,"typing",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"linkText",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"linkRoute",void 0),a([T({type:Boolean,reflect:!0}),s("design:type",Object)],J.prototype,"isPasswordVisible",void 0),a([T({type:Boolean}),s("design:type",Boolean)],J.prototype,"cleanButton",void 0),a([T({type:Number}),s("design:type",Number)],J.prototype,"maxLength",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"heightTextArea",void 0),a([T({type:String}),s("design:type",String)],J.prototype,"maxHeightTextArea",void 0),J=a([d("randstad-form")],J);let Z=class extends L{constructor(){super(...arguments),this.rows=""}static{this.styles=o`
     ${X}
     ${Q}
     ${K}
     
     :host {
+      display: flex;
+      flex-direction: column;
       gap: 8px;
     }
 
@@ -1059,10 +1116,9 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .fields {
-      display: flex;
-      gap: 16px;
+      gap: 8px;
     }
-  `}render(){const t=`flex-direction: ${this.direction??"column"};`;return e`
+  `}render(){const t=this.rows?`display: grid; grid-template-columns: ${this.rows};`:"display: flex; flex-direction: column;";return e`
       <div class="group-container">
         ${this.renderLabelContainer()}
 
@@ -1076,7 +1132,7 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         ${this.renderHelper()}
       </div>
-    `}};a([T({type:String}),s("design:type",String)],Z.prototype,"direction",void 0),Z=a([d("randstad-form-group")],Z);class tt extends t{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=o`
+    `}};a([T({type:String}),s("design:type",String)],Z.prototype,"rows",void 0),Z=a([d("randstad-form-group")],Z);class tt extends t{constructor(){super(...arguments),this.name="",this.size="24px"}static{this.styles=o`
     :host {
       display: inline-flex;
       width: var(--icon-size, 24px);
@@ -1143,7 +1199,7 @@ function A(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>
-    `}};a([T({type:String}),s("design:type",String)],et.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],et.prototype,"icon",void 0),a([T({type:String}),s("design:type",String)],et.prototype,"message",void 0),a([T({type:Boolean}),s("design:type",Boolean)],et.prototype,"open",void 0),et=a([d("randstad-notice")],et);let it=class extends t{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=o`
+    `}};a([T({type:String}),s("design:type",String)],et.prototype,"type",void 0),a([T({type:String}),s("design:type",String)],et.prototype,"icon",void 0),a([T({type:String}),s("design:type",String)],et.prototype,"message",void 0),a([T({type:Boolean}),s("design:type",Boolean)],et.prototype,"open",void 0),et=a([d("randstad-notice")],et);let it=class extends t{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.isPrimaryLoader=!1,this.isPrimaryDisabled=!1,this.modalWidth="500px",this.scrollable=!1,this.setScrollableMode=()=>{this.scrollable=window.innerWidth>940}}static{this.styles=o`
     :host {
       font-family: 'Graphik', sans-serif;
       display: none;
@@ -1336,13 +1392,15 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                   size="md"
                   @click=${()=>this.dispatchEvent(new CustomEvent("primary-click"))}
                   label=${this.primaryButtonLabel}
+                  .loader=${this.isPrimaryLoader}
+                  .disabled=${this.isPrimaryDisabled}
                 >
                 </randstad-button>
                 `:i}
           </div>
         </div>
       </div>
-    `}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],it.prototype,"open",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"title",void 0),a([T({type:String}),s("design:type",String)],it.prototype,"subtitle",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showNotice",void 0),a([T({type:String}),s("design:type",String)],it.prototype,"noticeType",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"noticeMessage",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"noticeIcon",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showPrimaryButton",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"primaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showSecondaryButton",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"secondaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"isFooterCustom",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"modalWidth",void 0),a([z(),s("design:type",Object)],it.prototype,"scrollable",void 0),it=a([d("custom-modal")],it);let ot=class extends t{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=o`
+    `}};a([T({type:Boolean,reflect:!0}),s("design:type",Object)],it.prototype,"open",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"title",void 0),a([T({type:String}),s("design:type",String)],it.prototype,"subtitle",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showNotice",void 0),a([T({type:String}),s("design:type",String)],it.prototype,"noticeType",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"noticeMessage",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"noticeIcon",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showPrimaryButton",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"primaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"showSecondaryButton",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"secondaryButtonLabel",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"isFooterCustom",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"isPrimaryLoader",void 0),a([T({type:Boolean}),s("design:type",Object)],it.prototype,"isPrimaryDisabled",void 0),a([T({type:String}),s("design:type",Object)],it.prototype,"modalWidth",void 0),a([z(),s("design:type",Object)],it.prototype,"scrollable",void 0),it=a([d("custom-modal")],it);let ot=class extends t{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=o`
     :host {
       display: none;
       position: fixed;
@@ -1475,9 +1533,12 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
 
         <div class="popup-content">
           ${"default"===this.type?e`
+                ${this.title?e`<h2 id="popup-title" class="popup-title">${this.title}</h2>`:i}
+                
                 <div class="titles-container">
                   <p id="popup-description" class="popup-description">${this.description}</p>
                 </div>
+
                 <div class="buttons-container">
                   <randstad-button
                     variant="button-primary"
@@ -1509,19 +1570,23 @@ function A(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                   <h2 id="popup-title" class="popup-title">${this.title}</h2>
                   <p id="popup-description" class="popup-description">${this.description}</p>
                 </div>
+
                 <div class="buttons-container">
                   <randstad-button
                     variant="button-secondary"
                     size="md"
                     @click=${()=>this.closePopup(!1)}
                     label=${this.cancelText}
-                  ></randstad-button>
+                  >
+                  </randstad-button>
+
                   <randstad-button
                     variant="button-primary"
                     size="md"
                     @click=${()=>this.closePopup(!0)}
                     label=${this.confirmText}
-                  ></randstad-button>
+                  >
+                  </randstad-button>
                 </div>
               `}
         </div>