@randstad-uca/design-system 1.0.5 → 1.0.7

package/dist/components/Modal.d.ts

@@ -1,14 +1,8 @@
 import { LitElement } from 'lit';
 export declare class CustomModal extends LitElement {
     open: boolean;
-    type: string;
     title: string;
-    description: string;
-    width: string;
-    buttonText: string;
-    confirmText: string;
-    cancelText: string;
     static styles: import("lit").CSSResult;
-    closeModal(response: boolean): void;
+    private closeModal;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/index.js

@@ -149,7 +149,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
     }
 
     .button-round {
-      width: 48px;
+      width: 48px !important;
       height: 48px;
       border-radius: 50%;
       background-color: var(--white);
@@ -221,7 +221,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       border: none;
       color: var(--white);
     }
-  `}handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0}))}render(){const t=`button button-${this.size} ${this.variant} ${this.loader?"loader":""}`,e="button-tertiary"===this.variant?"#2175D9":"white";return o`
+  `}handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0}))}render(){const t=`button ${"button-round"===this.variant?"":`button-${this.size}`} ${this.variant} ${this.loader?"loader":""}`,e="button-tertiary"===this.variant?"#2175D9":"white";return o`
       <button
         type="button"
         class=${t}
@@ -237,7 +237,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
             `:o`
               ${this.iconSrc&&"button-round"===this.variant?o`<img src=${this.iconSrc} alt="icon" class="button-icon" />`:""}
               ${this.iconName&&"button-round"!==this.variant&&"left"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
-              ${this.label}
+              <slot>${this.label}</slot>
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?o`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
@@ -253,7 +253,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
       gap: 8px;
       font-family: Graphik, sans-serif;
       font-size: 14px;
-      line-height: 1.5;
+      line-height: 25px;
       color: #0F1941;
     }
 
@@ -294,7 +294,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
 
     .terms-link {
       color: #2175D9;
-      text-decoration: underline;
+      text-decoration: none;
       cursor: pointer;
     }
   `}toggleCheck(t){this.checked=t.target.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0}))}renderClause(t,e){return e?o`<a class="terms-link" href="${e}" target="_blank" rel="noopener" @click=${this.stopPropagation}>${t}</a>`:o`${t}`}stopPropagation(t){t.stopPropagation()}render(){return o`
@@ -308,7 +308,7 @@ function N(t,e){return(e,o,i)=>((t,e,o)=>(o.configurable=!0,o.enumerable=!0,Refl
           ${this.prefix}&nbsp;
           ${this.renderClause(this.clause1Text,this.clause1Url)},&nbsp;
           ${this.connector}&nbsp;
-          ${this.renderClause(this.clause2Text,this.clause2Url)}.
+          ${this.renderClause(this.clause2Text,this.clause2Url)}
         </span>
       </label>
     `}};n([I({type:String}),a("design:type",Object)],M.prototype,"prefix",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"clause1Text",void 0),n([I({type:String}),a("design:type",String)],M.prototype,"clause1Url",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"connector",void 0),n([I({type:String}),a("design:type",Object)],M.prototype,"clause2Text",void 0),n([I({type:String}),a("design:type",String)],M.prototype,"clause2Url",void 0),n([I({type:Boolean,reflect:!0}),a("design:type",Object)],M.prototype,"checked",void 0),M=n([l("randstad-checkbox")],M);
@@ -4041,7 +4041,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       outline: none;
       transition: border-color 0.3s ease, box-shadow 0.3s ease;
       width: 100%;
-      color: #0F1941;
+      color: #0F1941 !important;
     }
 
     .form.error .form-input {
@@ -4161,7 +4161,7 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     }
 
     .link-text:hover {
-      color: #0f3b65;
+      text-decoration: underline;
     }
 
     .tooltip-wrapper randstad-icon {
@@ -4176,6 +4176,13 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
     .toggle-password randstad-icon svg {
       fill: #2175D9 !important;
     }
+
+    input:-webkit-autofill,
+    textarea:-webkit-autofill {
+      box-shadow: 0 0 0px 1000px white inset !important;
+      -webkit-text-fill-color: #0F1941 !important;
+      transition: background-color 5000s ease-in-out 0s;
+    }
   `}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;this.value=e.value,this.dispatchEvent(new CustomEvent("valueChanged",{detail:this.value})),this.dispatchEvent(new Event("input",{bubbles:!0}))}handleLinkClick(t){t.preventDefault(),this.linkRoute&&this.dispatchEvent(new CustomEvent("linkClicked",{detail:this.linkRoute,bubbles:!0,composed:!0}))}render(){return o`
       <div
         class="form ${this.error?"error":""} ${this.success?"success":""} ${this.disabled?"disabled":""}"
@@ -4233,7 +4240,11 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
                 ${this.errorMessage?this.errorMessage:o`<slot name="error-extended"></slot>`}
               </p>
             `:r}
-        ${this.linkText&&this.linkRoute?o`<a class="link-text" href="#" @click=${this.handleLinkClick}>${this.linkText}</a>`:r}
+        ${this.linkText&&this.linkRoute?o`
+            <div style="text-align: right;">
+              <a class="link-text" href="#" @click=${this.handleLinkClick}>${this.linkText}</a>
+            </div>
+          `:r}
 
         ${this.helper?o`<p class="helper-description">${this.helper}</p>`:r}
       </div>
@@ -4250,94 +4261,86 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       height: var(--icon-size, 24px); /* Tamaño fijo basado en size */
       fill: var(--icon-color, currentColor);
     }
-  `}constructor(){super(),this.name="",this.size="24px",this.color=""}connectedCallback(){super.connectedCallback(),this.name&&this.loadIcon()}updated(t){t.has("name")&&this.name&&this.loadIcon(),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color)}async loadIcon(){if(this.name)try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),o=new DOMParser,i=o.parseFromString(e,"image/svg+xml").querySelector("svg");if(!i)throw new Error("No se encontró un elemento SVG válido");i.removeAttribute("fill"),i.setAttribute("width",this.size||"24px"),i.setAttribute("height",this.size||"24px"),this.renderRoot.innerHTML="",this.renderRoot.appendChild(i)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.renderRoot.innerHTML="<span>⚠️</span>"}else this.renderRoot.innerHTML=""}render(){return null}}n([I({type:String}),a("design:type",String)],Cs.prototype,"name",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"size",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"color",void 0),customElements.define("randstad-icon",Cs);let ks=class extends t{constructor(){super(...arguments),this.open=!1,this.type="default",this.title="Título del Modal",this.description="Descripción del modal",this.width="400px",this.buttonText="Aceptar",this.confirmText="Sí",this.cancelText="No"}static{this.styles=e`
+  `}constructor(){super(),this.name="",this.size="24px",this.color=""}connectedCallback(){super.connectedCallback(),this.name&&this.loadIcon()}updated(t){t.has("name")&&this.name&&this.loadIcon(),t.has("size")&&this.style.setProperty("--icon-size",this.size),t.has("color")&&this.style.setProperty("--icon-color",this.color)}async loadIcon(){if(this.name)try{const t=await fetch(`/assets/icons/${this.name}.svg`);if(!t.ok)throw new Error("Icon not found");const e=await t.text(),o=new DOMParser,i=o.parseFromString(e,"image/svg+xml").querySelector("svg");if(!i)throw new Error("No se encontró un elemento SVG válido");i.removeAttribute("fill"),i.setAttribute("width",this.size||"24px"),i.setAttribute("height",this.size||"24px"),this.renderRoot.innerHTML="",this.renderRoot.appendChild(i)}catch(t){console.error(`❌ Error cargando icono ${this.name}:`,t),this.renderRoot.innerHTML="<span>⚠️</span>"}else this.renderRoot.innerHTML=""}render(){return null}}n([I({type:String}),a("design:type",String)],Cs.prototype,"name",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"size",void 0),n([I({type:String}),a("design:type",String)],Cs.prototype,"color",void 0),customElements.define("randstad-icon",Cs);let ks=class extends t{constructor(){super(...arguments),this.open=!1,this.title="Título del modal"}static{this.styles=e`
     :host {
       display: none;
       position: fixed;
       z-index: 9999;
       top: 0;
       left: 0;
-      width: 100%;
-      height: 100%;
+      width: 100vw;
+      height: 100vh;
       background: rgba(0, 0, 0, 0.5);
       justify-content: center;
       align-items: center;
       font-family: "Graphik", sans-serif;
     }
+
     :host([open]) {
       display: flex;
     }
+
     .modal {
-      background: green;
-      padding: 20px;
-      border-radius: 8px;
-      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-      text-align: center;
-      animation: fadeIn 0.2s ease-in-out;
-      width: var(--modal-width, 400px);
+      background: #f7f5f0;
+      width: 90%;
+      max-width: 500px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      display: flex;
+      flex-direction: column;
+      position: relative;
     }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: scale(0.9); }
-      to { opacity: 1; transform: scale(1); }
+
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 25px;
+      border-bottom: 1px solid #E0E0E0;
     }
-    h2 {
+
+    h3 {
+      margin: 0;
       font-family: Graphik;
       font-weight: 400;
       font-size: 20px;
-      line-height: 22px;
-      letter-spacing: 0%;
-      text-align: center;
-      color: #404767;
-    }
-    p {
-      font-family: Graphik;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 17.6px;
-      letter-spacing: 0%;
-      text-align: center;
-      color: #6F758D;
-    }
-    .buttons {
-      margin-top: 12px;
-      display: flex;
-      justify-content: space-around;
-      gap: 10px;
+      line-height: 30px;
+      color: #0F1941;
     }
-    button {
+
+    .modal-close {
+      background: none;
       border: none;
       cursor: pointer;
-      font-size: 14px;
-      font-weight: 400;
-      width: 100%;
-      width: 212;
-      height: 57;
-      border-radius: 4px;
-      padding: 16px;
-      font-family: Graphik;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
     }
-    .accept { background-color: #2175D9; color: white; }
-    .cancel { background-color: #FFFFFF; border: 1px solid #2175D9; color: #2175D9 }
-    .primary { background-color: #2175D9; color: white; }
-  `}closeModal(t){this.dispatchEvent(new CustomEvent("modal-close",{detail:t})),this.open=!1}render(){return o`
-      <div class="modal" style="width: ${this.width};">
-        ${"default"===this.type?o`
-          <div><img src="assets/img/icon_warning.svg"></div>
-          <p>${this.description}</p>
-          <div class="buttons">
-            <button class="primary" @click=${()=>this.closeModal(!0)}>${this.buttonText}</button>
-          </div>
-        `:o`
-          <div><img src="assets/img/icon_warning.svg"></div>
-          <h2>${this.title}</h2>
-          <p>${this.description}</p>
-          <div class="buttons">
-            <button class="cancel" @click=${()=>this.closeModal(!1)}>${this.cancelText}</button>
-            <button class="accept" @click=${()=>this.closeModal(!0)}>${this.confirmText}</button>
-          </div>
-        `}
+
+    .modal-body {
+      flex: 1;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  `}closeModal(){this.dispatchEvent(new CustomEvent("modal-close",{detail:null})),this.open=!1}render(){return o`
+      <div class="modal">
+        <div class="modal-header">
+          <h3>${this.title}</h3>
+          <button class="modal-close" @click="${this.closeModal}" aria-label="Cerrar modal">
+            <randstad-icon name="close" size="24px"></randstad-icon>
+          </button>
+        </div>
+        <div class="modal-body">
+          <slot name="content"></slot>
+        </div>
+        <div class="modal-footer">
+          <slot name="confirm-button"></slot>
+        </div>
       </div>
-    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],ks.prototype,"open",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"type",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"title",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"description",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"width",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"buttonText",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"confirmText",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"cancelText",void 0),ks=n([l("custom-modal")],ks);class As extends t{static{this.styles=e`
+    `}};n([I({type:Boolean,reflect:!0}),a("design:type",Object)],ks.prototype,"open",void 0),n([I({type:String}),a("design:type",Object)],ks.prototype,"title",void 0),ks=n([l("custom-modal")],ks);class As extends t{static{this.styles=e`
     :host {
       display: block;
       border-radius: 4px;
@@ -4345,7 +4348,6 @@ console.warn('WARNING: Since Vaadin 23.2, "@vaadin/vaadin-date-picker" is deprec
       line-height: 25px;
       font-weight: 400;
       color: white;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
       font-family: 'Graphik', sans-serif;
     }
     .container {
@@ -4853,6 +4855,7 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       background: white;
       cursor: pointer;
       transition: background-color 0.3s ease;
+      color: #0F1941 !important;
     }
 
     .input-container:hover .filter-input {
@@ -5152,8 +5155,8 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         align-items: center;
         box-sizing: border-box;
         min-height: 48px;
-        min-width: 270px;
-        max-width: 480px;
+        min-width: 380px;
+        max-width: 380px;
         border-radius: 4px;
         padding: 8px;
         gap: 8px;
@@ -5207,6 +5210,17 @@ const ha=e`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       .informative {
         background-color: var(--ui-informative);
       }
+
+      @media (max-width: 940px) {
+        :host {
+          bottom: 16px !important;
+          left: 50% !important;
+          right: auto !important;
+          top: auto !important;
+          transform: translateX(-50%) !important;
+          justify-content: center !important;
+        }
+      }
     `]}constructor(){super(),this.type="informative",this.icon="info",this.message="Este es un mensaje.",this.open=!1,this.position="bottom-center"}static get properties(){return{type:{type:String},icon:{type:String},message:{type:String},open:{type:Boolean},position:{type:String,reflect:!0}}}render(){const t="error"===this.type||"warning"===this.type?"alert":"status";return o`
       <div
         class="container ${this.open?"":"hidden"} ${this.type}"