@randstad-uca/design-system 1.0.29 → 1.0.31

package/dist/components/Select.d.ts

@@ -25,7 +25,7 @@ export declare class FilterableSelect extends LitElement {
     private highlightedIndex;
     private debounceTimeout;
     static styles: import("lit").CSSResult;
-    updated(changedProperties: Map<string, any>): void;
+    update(changedProperties: Map<string, any>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private updateResponsiveModeBound;

package/dist/index.js

@@ -74,14 +74,14 @@ function F(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;
-`,q=t`
+`,V=t`
   font-family: 'Graphik', sans-serif;
   font-weight: 400;
   font-size: 26px;
   line-height: 30px;
   letter-spacing: -1%;
   vertical-align: middle;
-`;let V=class extends e{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=t`
+`;let q=class extends e{constructor(){super(...arguments),this.title="",this.isOpen=!1,this.isDesktop=window.innerWidth>940,this.handleResize=()=>{this.isDesktop=window.innerWidth>940}}static{this.styles=t`
     :host {
       display: flex;
       flex-direction: column;
@@ -159,7 +159,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       <div class="content ${this.isOpen?"open":""}">
         <slot></slot>
       </div>
-    `}};n([I({type:String}),a("design:type",Object)],V.prototype,"title",void 0),n([L(),a("design:type",Object)],V.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],V.prototype,"isDesktop",void 0),V=n([l("accordion-panel")],V);let N=class extends e{static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",Object)],q.prototype,"title",void 0),n([L(),a("design:type",Object)],q.prototype,"isOpen",void 0),n([L(),a("design:type",Object)],q.prototype,"isDesktop",void 0),q=n([l("accordion-panel")],q);let N=class extends e{static{this.styles=t`
     :host {
       display: flex;
       flex-direction: column;
@@ -1145,7 +1145,7 @@ function F(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
     }
 
     .modal-title {
-      ${q}
+      ${V}
       margin: 0;
       color: var(--secondary-color);
     }
@@ -1606,7 +1606,7 @@ const Ut=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 qt=class extends Dt{};qt.styles=[Ut],qt=n([l("md-radio")],qt);let Vt=class extends e{constructor(){super(...arguments),this.name="radio-group",this.checked=!1,this.disabled=!1,this.error=!1}static{this.styles=t`
+ */;let Vt=class extends Dt{};Vt.styles=[Ut],Vt=n([l("md-radio")],Vt);let qt=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;
     }
@@ -1665,7 +1665,7 @@ const Ut=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([I({type:String}),a("design:type",Object)],Vt.prototype,"name",void 0),n([I({type:Boolean}),a("design:type",Object)],Vt.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],Vt.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Object)],Vt.prototype,"error",void 0),Vt=n([l("custom-radio")],Vt);let Nt=class extends e{constructor(){super(...arguments),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.error=!1,this.required=!1,this.optional=!1,this.isMobile=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.highlightedIndex=-1,this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=t`
+    `}};n([I({type:String}),a("design:type",Object)],qt.prototype,"name",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"checked",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"disabled",void 0),n([I({type:Boolean}),a("design:type",Object)],qt.prototype,"error",void 0),qt=n([l("custom-radio")],qt);let Nt=class extends e{constructor(){super(...arguments),this.options=[],this.placeholder="Filtrar opciones...",this.defaultValue="",this.disabled=!1,this.label="",this.value="",this.labelColor="",this.filterable=!0,this.error=!1,this.required=!1,this.optional=!1,this.isMobile=!1,this.filteredOptions=[],this.filterValue="",this.isOpen=!1,this.mobileFilterValue="",this.highlightedIndex=-1,this.debounceTimeout=null,this.updateResponsiveModeBound=this.updateResponsiveMode.bind(this)}static{this.styles=t`
     :host {
       display: block;
       font-family: 'Graphik', sans-serif;
@@ -1960,7 +1960,7 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
       color: var(--secondary-color-60);
       ${_}
     }
-  `}updated(t){if(t.has("options")||t.has("value")||t.has("defaultValue")){const t=this.value||this.defaultValue,e=this.options.find((e=>"string"==typeof e?e===t:e.value===t));this.filterValue=e?"string"==typeof e?e:e.label:""}t.has("options")&&(this.filteredOptions=[...this.options])}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(t){const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(t){this.value="string"==typeof t?t:t.value;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(t){const{key:e}=t;if(!this.isOpen&&("Enter"===e||" "===e))return t.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===e)t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===e)t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===e){t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];e&&this.handleSelect(e)}else"Escape"===e&&(t.preventDefault(),this.isOpen=!1)}render(){const t=this.isMobile;return i`
+  `}update(t){if(t.has("options")&&(this.filteredOptions=[...this.options]),t.has("defaultValue")||t.has("options")){const t=this.options.find((t=>"string"==typeof t?t===this.defaultValue:t.value===this.defaultValue));t&&(this.filterValue="string"==typeof t?t:t.label)}if(t.has("value")){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));t&&(this.filterValue="string"==typeof t?t:t.label)}super.update(t)}connectedCallback(){super.connectedCallback(),this.updateResponsiveMode(),window.addEventListener("resize",this.updateResponsiveModeBound),document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateResponsiveModeBound),document.removeEventListener("click",this.handleClickOutside.bind(this)),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.isMobile&&(this.mobileFilterValue=""),this.disabled||(this.isOpen=!this.isOpen,this.requestUpdate())}handleInput(t){if(!this.filterable)return;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.filterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(this.filterValue.toLowerCase()))),this.isOpen=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{this.filterValue.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:this.filterValue},bubbles:!0,composed:!0}))}),300),this.requestUpdate()}handleMobileInput(t){const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength).toLowerCase():e.toLowerCase();this.mobileFilterValue=i,this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(i))),this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=window.setTimeout((()=>{i.length>2&&this.dispatchEvent(new CustomEvent("filter-location",{detail:{value:i},bubbles:!0,composed:!0}))}),300)}handleSelect(t){this.value="string"==typeof t?t:t.value;const e="string"==typeof t?t:t.value;this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:e},bubbles:!0,composed:!0})),this.filterValue="string"==typeof t?t:t.label,this.isOpen=!1,this.requestUpdate()}handleIconClick(){this.disabled||(this.filterable&&this.filterValue?(this.filterValue="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1):this.isOpen=!this.isOpen,this.requestUpdate())}handleClickOutside(t){const e=t.target;e instanceof Node&&(this.contains(e)||(this.isOpen=!1,this.requestUpdate()))}handleKeyDown(t){const{key:e}=t;if(!this.isOpen&&("Enter"===e||" "===e))return t.preventDefault(),void(this.isOpen=!0);if(this.isOpen)if("ArrowDown"===e)t.preventDefault(),this.highlightedIndex=Math.min(this.highlightedIndex+1,this.filteredOptions.length-1),this.requestUpdate();else if("ArrowUp"===e)t.preventDefault(),this.highlightedIndex=Math.max(this.highlightedIndex-1,0),this.requestUpdate();else if("Enter"===e){t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];e&&this.handleSelect(e)}else"Escape"===e&&(t.preventDefault(),this.isOpen=!1)}render(){const t=this.isMobile;return i`
       <div class="select-container" style="${this.labelColor?` --label-color: ${this.labelColor}`:""}">
         ${this.label?i`
           <div class="label-container">
@@ -2554,5 +2554,5 @@ const Ut=t`@layer{:host{display:inline-flex;height:var(--md-radio-icon-size, 20p
             </label>
           `}
       </div>
-    `}};n([I({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([I({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([I({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([I({type:Boolean,reflect:!0}),a("design:type",Object)],Wt.prototype,"disabled",void 0),Wt=n([l("upload-image")],Wt);export{N as AccordionList,q as AccordionPanel,H as CarouselCard,K as Checkbox,Q as CustomModal,Z as CustomPopup,qt 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};
 //# sourceMappingURL=index.js.map