@randstad-uca/design-system 1.0.23 → 1.0.24

package/dist/assets/icons/arrow_back.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3095_5899)">
+<path d="M21.475 12.2H3.725L8.575 7.35C8.775 7.15 8.775 6.85 8.575 6.65C8.375 6.45 8.075 6.45 7.875 6.65L2.15 12.35C1.95 12.55 1.95 12.85 2.15 13.05L7.8 18.7C7.9 18.8 8.025 18.85 8.15 18.85C8.275 18.85 8.4 18.8 8.5 18.7C8.7 18.5 8.7 18.2 8.5 18L3.725 13.2H21.5C21.775 13.2 22 12.975 22 12.7C22 12.425 21.75 12.2 21.475 12.2Z" fill="#2175D9"/>
+</g>
+<defs>
+<clipPath id="clip0_3095_5899">
+<rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/components/Button.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import '../styles/buttons.css';
 export declare class RandstadButton extends LitElement {
-    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round';
+    variant: 'button-primary' | 'button-secondary' | 'button-tertiary' | 'button-round' | 'button-card';
     size: 'md' | 'lg';
     label: string;
     loader: boolean;

package/dist/index.js

@@ -42,13 +42,13 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
   font-size: 12px;
   line-height: 15px;
   letter-spacing: 0%;
-`,M=t`
+`,F=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 25px;
   letter-spacing: 0%;
-`,F=t`
+`,M=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 16px;
@@ -81,7 +81,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`;let q=class extends e{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"}static{this.styles=t`
+`;let D=class extends e{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"}static{this.styles=t`
     :host {
       display: inline-block;
     }
@@ -106,7 +106,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .button-md {
-      ${F}
+      ${M}
       min-height: 57px;
     }
 
@@ -269,6 +269,41 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       border: none;
       color: var(--white);
     }
+
+    .button-card {
+      font-family: 'Graphik';
+      background-color: var(--primary-color);
+      color: var(--white);
+      border-radius: 4px;
+      padding: 4px 16px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 15px;
+      letter-spacing: 0%;
+      text-align: center;
+      vertical-align: middle;
+
+    }
+
+    .button-card:not([disabled]):hover {
+      background-color: #175197;
+    }
+
+    .button-card:not([disabled]):active {
+      background-color: #124077;
+    }
+
+    .button-card:not([disabled]):focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    .button-card[disabled] {
+      background-color: #CFD1D9;
+      color: #6F758D;
+      cursor: not-allowed;
+    }
+
   `}handleClick(t){if(!this.disabled)if("submit"===this.type){const t=this.closest("form");t&&t.requestSubmit()}else this.dispatchEvent(new CustomEvent("button-click",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("click",{bubbles:!0,composed:!0}))}render(){const t={button:!0,[`button-${this.size}`]:"button-round"!==this.variant,[this.variant]:!0,loader:this.loader},e="button-tertiary"===this.variant?"var(--primary-color)":"white";return i`
       <button
         part="button"
@@ -291,14 +326,14 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
               ${this.iconName&&"button-round"!==this.variant&&"right"===this.iconPosition?i`<randstad-icon name=${this.iconName} size="24px"></randstad-icon>`:""}
             `}
       </button>
-    `}};n([j({type:String}),a("design:type",String)],q.prototype,"variant",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"size",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"label",void 0),n([j({type:Boolean}),a("design:type",Object)],q.prototype,"loader",void 0),n([j({type:String,attribute:"icon-src"}),a("design:type",String)],q.prototype,"iconSrc",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"iconPosition",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Boolean)],q.prototype,"disabled",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"iconName",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"type",void 0),q=n([l("randstad-button")],q);let D=class extends e{constructor(){super(...arguments),this.prefix="Acepto los",this.clause1Text="términos y condiciones",this.connector="y los",this.clause2Text="avisos de privacidad del sitio",this.checked=!1}static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",String)],D.prototype,"variant",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"size",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"label",void 0),n([j({type:Boolean}),a("design:type",Object)],D.prototype,"loader",void 0),n([j({type:String,attribute:"icon-src"}),a("design:type",String)],D.prototype,"iconSrc",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"iconPosition",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Boolean)],D.prototype,"disabled",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"iconName",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"type",void 0),D=n([l("randstad-button")],D);let q=class extends e{constructor(){super(...arguments),this.prefix="Acepto los",this.clause1Text="términos y condiciones",this.connector="y los",this.clause2Text="avisos de privacidad del sitio",this.checked=!1}static{this.styles=t`
     :host {
       display: block;
       max-width: 100%;
     }
 
     label {
-      ${M}
+      ${F}
       display: flex;
       align-items: center;
       gap: 8px;
@@ -361,7 +396,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
           ${this.renderClause(this.clause2Text,this.clause2Url)}.
         </span>
       </label>
-    `}};n([j({type:String}),a("design:type",Object)],D.prototype,"prefix",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"clause1Text",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"clause1Url",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"connector",void 0),n([j({type:String}),a("design:type",Object)],D.prototype,"clause2Text",void 0),n([j({type:String}),a("design:type",String)],D.prototype,"clause2Url",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Object)],D.prototype,"checked",void 0),D=n([l("randstad-checkbox")],D);let G=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}static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",Object)],q.prototype,"prefix",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"clause1Text",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"clause1Url",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"connector",void 0),n([j({type:String}),a("design:type",Object)],q.prototype,"clause2Text",void 0),n([j({type:String}),a("design:type",String)],q.prototype,"clause2Url",void 0),n([j({type:Boolean,reflect:!0}),a("design:type",Object)],q.prototype,"checked",void 0),q=n([l("randstad-checkbox")],q);let G=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}static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -383,7 +418,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .form-label {
-      ${F}
+      ${M}
       color: var(--label-color, var(--secondary-color-80));
     }
 
@@ -483,7 +518,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .helper-description {
-      ${F}
+      ${M}
       color: var(--secondary-color-40);
       margin: 0px;
     }
@@ -493,13 +528,13 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .error-message {
-      ${F}
+      ${M}
       color: var(--ui-negative);
       margin: 0px;
     }
 
     .link-text {
-      ${F}
+      ${M}
       color: var(--primary-color);
       cursor: pointer;
       text-align: end;
@@ -666,7 +701,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .container {
-      ${F}
+      ${M}
       display: flex;
       align-items: flex-start;
       gap: 8px;
@@ -805,7 +840,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .modal-subtitle {
-      ${F}
+      ${M}
       margin: 0;
       color: var(--secondary-color-60);
     }
@@ -953,7 +988,7 @@ function _(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .popup-description {
-      ${F}
+      ${M}
       margin: 0;
       color: var(--secondary-color-60);
     }
@@ -1144,7 +1179,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- */;let Mt=class extends _t{};Mt.styles=[Rt],Mt=n([l("md-radio")],Mt);let Ft=class extends e{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=t`
+ */;let Ft=class extends _t{};Ft.styles=[Rt],Ft=n([l("md-radio")],Ft);let Mt=class extends e{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=t`
     :host {
       font-family: "Graphik", sans-serif;
     }
@@ -1203,7 +1238,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         ></md-radio>
         <span>${this.checked?"On":"Off"} ${this.error?"Error":""}</span>
       </label>
-    `}};n([j({type:String}),a("design:type",Object)],Ft.prototype,"name",void 0),n([j({type:Boolean}),a("design:type",Object)],Ft.prototype,"checked",void 0),n([j({type:Boolean}),a("design:type",Object)],Ft.prototype,"disabled",void 0),n([j({type:Boolean}),a("design:type",Object)],Ft.prototype,"error",void 0),Ft=n([l("custom-radio")],Ft);let Ut=class extends e{static{this.styles=t`
+    `}};n([j({type:String}),a("design:type",Object)],Mt.prototype,"name",void 0),n([j({type:Boolean}),a("design:type",Object)],Mt.prototype,"checked",void 0),n([j({type:Boolean}),a("design:type",Object)],Mt.prototype,"disabled",void 0),n([j({type:Boolean}),a("design:type",Object)],Mt.prototype,"error",void 0),Mt=n([l("custom-radio")],Mt);let Ut=class extends e{static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -1246,7 +1281,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
     }
 
     .form-label {
-      ${F};
+      ${M};
       color: var(--label-color, var(--secondary-color-80));
     }
 
@@ -1747,7 +1782,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       }
 
       .container {
-        ${M};
+        ${F};
         display: flex;
         align-items: center;
         box-sizing: border-box;
@@ -1813,7 +1848,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
         <randstad-icon name=${this.icon} size="24px" color="white"></randstad-icon>
         <span class="message">${this.message}</span>
       </div>
-    `}}customElements.define("randstad-snackbar",Nt);let qt=class extends e{constructor(){super(...arguments),this.tabs=[],this.selected="",this.internalSelected="",this.showPrev=!1,this.showNext=!1,this.SCROLL_OFFSET=78,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`
+    `}}customElements.define("randstad-snackbar",Nt);let Dt=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;
@@ -1900,7 +1935,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       font-size: 24px;
       cursor: pointer;
       z-index: 1;
-      width: 78px;
+      width: 56px;
       height: 100%;
       display: flex;
       align-items: center;
@@ -1921,6 +1956,13 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       right: 0;
       background: linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
     }
+
+    @media (max-width: 940px) {
+      .tab {
+        ${M};
+        padding: 16px;
+      }
+    }
   `}firstUpdated(){this.handleScroll()}updated(t){t.has("selected")&&(this.internalSelected=this.selected)}selectTab(t){this.internalSelected=t,this.dispatchEvent(new CustomEvent("tab-change",{detail:t,bubbles:!0,composed:!0}))}scrollTabsLeft(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(let o=i.length-1;o>=0;o--){const r=i[o].offsetLeft;if(r<e+this.SCROLL_OFFSET-1){const e=r-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}}setTimeout((()=>this.handleScroll()),300)}scrollTabsRight(){const t=this.renderRoot.querySelector(".tab-wrapper");if(!t)return;const e=t.scrollLeft,i=Array.from(t.querySelectorAll(".tab"));for(const o of i)if(o.offsetLeft>e+this.SCROLL_OFFSET){const e=o.offsetLeft-this.SCROLL_OFFSET;t.scrollTo({left:e,behavior:"smooth"});break}setTimeout((()=>this.handleScroll()),300)}render(){return i`
       <div class="scroll-container">
         ${this.showPrev?i`
@@ -1945,7 +1987,7 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           </button>
         `:null}
       </div>
-    `}};n([j({type:Array}),a("design:type",Array)],qt.prototype,"tabs",void 0),n([j({type:String}),a("design:type",String)],qt.prototype,"selected",void 0),n([L(),a("design:type",String)],qt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],qt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],qt.prototype,"showNext",void 0),qt=n([l("tabs-bar")],qt);let Dt=class extends e{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=t`
+    `}};n([j({type:Array}),a("design:type",Array)],Dt.prototype,"tabs",void 0),n([j({type:String}),a("design:type",String)],Dt.prototype,"selected",void 0),n([L(),a("design:type",String)],Dt.prototype,"internalSelected",void 0),n([L(),a("design:type",Object)],Dt.prototype,"showPrev",void 0),n([L(),a("design:type",Object)],Dt.prototype,"showNext",void 0),Dt=n([l("tabs-bar")],Dt);let qt=class extends e{constructor(){super(...arguments),this.value=0,this.max=5}static{this.styles=t`
     :host {
       display: inline-block;
       width: 64px;
@@ -2006,5 +2048,5 @@ const Rt=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
           ${this.value} de ${this.max}
         </text>
       </svg>
-    `}};n([j({type:Number}),a("design:type",Object)],Dt.prototype,"value",void 0),n([j({type:Number}),a("design:type",Object)],Dt.prototype,"max",void 0),Dt=n([l("progress-circle")],Dt);export{D as Checkbox,Y as CustomModal,W as CustomPopup,Ft as CustomRadio,Bt as CustomStepper,Ut as FilterableSelect,K as IconComponent,Dt as ProgressCircle,q as RandstadButton,G as RandstadForm,H as RandstadNotice,qt as TabsBar};
+    `}};n([j({type:Number}),a("design:type",Object)],qt.prototype,"value",void 0),n([j({type:Number}),a("design:type",Object)],qt.prototype,"max",void 0),qt=n([l("progress-circle")],qt);export{q as Checkbox,Y as CustomModal,W as CustomPopup,Mt as CustomRadio,Bt as CustomStepper,Ut as FilterableSelect,K as IconComponent,qt as ProgressCircle,D as RandstadButton,G as RandstadForm,H as RandstadNotice,Dt as TabsBar};
 //# sourceMappingURL=index.js.map