@randstad-uca/design-system 1.0.87 → 1.0.89

package/dist/index.js

@@ -2287,6 +2287,16 @@ function j(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
         color: var( --ui-negative );
       }
 
+      .no-results-icon {
+        position: absolute;
+        right: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        color: var(--ui-negative);
+      }
+
       .mobile-backdrop {
         position: fixed;
         inset: 0;
@@ -2379,7 +2389,7 @@ function j(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
       .mobile-modal .options-list li.no-results-item.mobile-item {
         text-align: center;
       }
-    `]}manageScrollElement(t,e){e?t.classList.add("modal-open-no-scroll"):t.classList.remove("modal-open-no-scroll")}toggleDynamicScrollLock(t){const e=document.documentElement;if(t){this.originalHtmlOverflow=e.style.overflow,this.originalHtmlPaddingRight=e.style.paddingRight,e.style.overflow="hidden",this.manageScrollElement(e,!0);if(e.scrollHeight>e.clientHeight){const t=window.innerWidth-e.clientWidth;e.style.paddingRight=`${t}px`}}else e.style.overflow=this.originalHtmlOverflow,e.style.paddingRight=this.originalHtmlPaddingRight,this.manageScrollElement(e,!1)}sortOptions(t,e,i){const o=t=>"string"==typeof t?t:"string"==typeof t.value?t.value:"",r=this.getOptionLabel(t),s=this.getOptionLabel(e),n=r.toLowerCase(),a=s.toLowerCase();if(i&&i.length>0){const t=i.toLowerCase(),e=n.startsWith(t),o=a.startsWith(t);if(e&&!o)return-1;if(!e&&o)return 1}const l=o(t),d=o(e);if("+54"===l)return-1;if("+54"===d)return 1;if("+54"===l&&"+54"===d)return 0;const c=r.match(/^\d+(\.\d+)?/),h=s.match(/^\d+(\.\d+)?/),p=c?Number(c[0]):NaN,u=h?Number(h[0]):NaN;return isNaN(p)||isNaN(u)?r.localeCompare(s,"es",{usage:"sort",sensitivity:"accent"}):p-u}filterAndSortOptions(){if(!this.filterable||!this.filterValue||0===this.filterValue.length)return this.filteredOptions=this.sortable?[...this.options].sort(((t,e)=>this.sortOptions(t,e,void 0))):[...this.options],this.highlightedIndex=-1,void(this.showNoResults=!1);const t=this.filterValue,e=t.toLowerCase();let i=this.options.filter((t=>this.getOptionLabel(t).toLowerCase().includes(e)));this.sortable?this.filteredOptions=i.sort(((e,i)=>this.sortOptions(e,i,t))):this.filteredOptions=i,this.highlightedIndex=this.filteredOptions.length>0?0:-1,this.showNoResults=0===this.filteredOptions.length}handleOptionHover(t){this.highlightedIndex!==t&&(this.highlightedIndex=t)}update(t){if(t.has("options")){if(this.sortable){const t=[...this.options].sort(((t,e)=>this.sortOptions(t,e,void 0)));this.options=t}this.filterAndSortOptions();if(this.options.length<=5)this.filterable=!1;else{const t=this.getAttribute("filterable");this.filterable=null===t||"false"!==t}}if((t.has("defaultValue")||t.has("options")||t.has("value")&&this.value)&&!this._isCleared){const t=this.value||this.defaultValue,e=this.options.find((e=>"string"==typeof e?e===t:e.value===t));e?(this.filterValue="string"==typeof e?e:e.label,this.value="string"==typeof e?e:e.value):((this.isOpen||this.filterValue)&&(this.isOpen||""!==this.value)||(this.filterValue=""),this.value="")}this._isCleared&&""===this.value&&(this._isCleared=!1),super.update(t)}willUpdate(t){t.has("filterValue")&&this.filterAndSortOptions()}updated(t){super.updated(t);const e=!1===t.get("isOpen");this.isMobile&&this.isOpen&&t.has("isOpen")&&e&&this.updateComplete.then((()=>{const t=this.mobileInputRef;t&&window.setTimeout((()=>{t.focus(),t.setSelectionRange(t.value.length,t.value.length)}),0)}))}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)),this.debounceTimeout&&(clearTimeout(this.debounceTimeout),this.debounceTimeout=null),this.isMobile&&this.toggleDynamicScrollLock(!1),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.disabled||(this.isOpen||(this.filteredOptions=[...this.options],this.showNoResults=!1,this.isMobile&&(this.mobileFilterValue="")),this.isOpen=!this.isOpen,this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:this.isOpen},bubbles:!0,composed:!0})),this.isMobile&&this.toggleDynamicScrollLock(this.isOpen),this.requestUpdate())}handleInput(t){if(!this.filterable)return;this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength):e;if(this.filterValue=i,this.isOpen=!0,""===i)this.value="",this.filteredOptions=[...this.options],this.showNoResults=!1;else{const t=i.toLowerCase();this.filteredOptions=this.options.filter((e=>("string"==typeof e?e:e.label).toLowerCase().includes(t))),this.showNoResults=0===this.filteredOptions.length}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){this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength):e;this.mobileFilterValue=i;const o=i.toLowerCase();this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(o))),this.showNoResults=i.length>0&&0===this.filteredOptions.length,this.requestUpdate(),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})):0===i.length&&(this.filteredOptions=[...this.options])}),300)}handleSelect(t){this._isCleared=!1,this.highlightedIndex=-1;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.value=e,this.isOpen=!1,this.isMobile&&this.toggleDynamicScrollLock(!1),this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})),this.mobileFilterValue=this.filterValue,this.filteredOptions=[...this.options],this.showNoResults=!1,this.requestUpdate()}handleIconClick(){if(this.disabled)return;this.highlightedIndex=-1;const t=this.isRenderClearButton,e="string"==typeof this.value&&""!==this.value,i="object"==typeof this.value&&null!==this.value&&Object.keys(this.value).length>0;t&&(e||i)?(this._isCleared=!0,this.filterValue="",this.value="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1,this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0}))):(this.isOpen=!this.isOpen,this.isOpen?(this.mobileFilterValue="",this.showNoResults=!1,this.filteredOptions=[...this.options],this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!0},bubbles:!0,composed:!0})),this.updateComplete.then((()=>{if(this.isMobile)return;const t=this.shadowRoot?.querySelector(".filter-input");t?.focus()}))):(this.mobileFilterValue="",this.filteredOptions=[...this.options],this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})))),this.requestUpdate()}handleReset(){this.filterValue="",this.showNoResults=!1,this.highlightedIndex=-1,this.mobileFilterValue="",this.filteredOptions=[...this.options]}handleClickOutside(t){const e=t.target;e instanceof Node&&(!this.contains(e)&&this.isOpen&&(this.isOpen=!1,this.validateAndCleanOnBlur(),this.isMobile&&this.toggleDynamicScrollLock(!1),this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})),this.requestUpdate()),this.isMobile&&(this.mobileFilterValue="",this.filteredOptions=[...this.options]))}handleKeyDown(t){const{key:e}=t,i=this.shadowRoot?.querySelector(".filter-input");if("Backspace"===e&&this.filterable){const t=i?.value||"",e=i&&i.selectionStart!==i.selectionEnd,o=1===t.length&&!e,r=0===t.length;(o||r)&&(this.value="",this.filterValue="",this._isCleared=!0,this.filteredOptions=[...this.options],this.isOpen=!0,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.requestUpdate())}const o=this.filteredOptions.filter((t=>!("object"==typeof t&&t.disabled)));if(!this.isOpen&&("Enter"===e||" "===e)){t.preventDefault(),this.isOpen=!0;const e=this.filteredOptions.findIndex((t=>!("object"==typeof t&&t.disabled)));return this.highlightedIndex=-1!==e?e:-1,void this.requestUpdate()}if(this.isOpen){if("ArrowDown"===e){t.preventDefault();let e=this.highlightedIndex+1;for(;e<this.filteredOptions.length;){const t=this.filteredOptions[e];if("object"!=typeof t||!t.disabled){this.highlightedIndex=e;break}e++}if(e>=this.filteredOptions.length){const t=this.filteredOptions.length-1;this.highlightedIndex=o.length>0?t:-1}this.requestUpdate(),this.updateComplete.then((()=>this.scrollHighlightedIntoView()))}else if("ArrowUp"===e){t.preventDefault();let e=this.highlightedIndex-1;for(;e>=0;){const t=this.filteredOptions[e];if("object"!=typeof t||!t.disabled){this.highlightedIndex=e;break}e--}e<0&&(this.highlightedIndex=-1),this.requestUpdate(),this.updateComplete.then((()=>this.scrollHighlightedIntoView()))}else if("Enter"===e||" "===e){this.highlightedIndex>=0&&t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];if(this.highlightedIndex>=0&&e&&("object"!=typeof e||!e.disabled)){this.handleSelect(e);const t=this.shadowRoot?.querySelector(".filter-input"),i=this.shadowRoot?.querySelector(".filter-fake");return t?t.focus():i?.focus(),void(this.highlightedIndex=-1)}}else if("Escape"===e){t.preventDefault(),this.isOpen=!1,this.highlightedIndex=-1,this.isMobile&&this.toggleDynamicScrollLock(!1),this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".filter-input"),i=this.shadowRoot?.querySelector(".filter-fake");e?e.focus():i?.focus()}else"Tab"===e?(this.isOpen=!1,this.highlightedIndex=-1,this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})),this.requestUpdate()):!this.isMobile&&this.filterable&&1===e.length&&(this.highlightedIndex=-1);if(("ArrowLeft"===e||"ArrowRight"===e)&&this.filterable)return}if("ArrowRight"!==e)this.isOpen&&!this.isMobile&&this.filterable&&1===e.length&&(this.highlightedIndex=-1);else{const e=!i||i.selectionStart===i.value.length;if(!this.filterable||e){t.preventDefault();const e=this.shadowRoot?.querySelector(".icon-button");e?.focus()}}}handleButtonKeyDown(t){const{key:e}=t,i=this.shadowRoot?.querySelector(".filter-input"),o=this.shadowRoot?.querySelector(".filter-fake"),r=i||o;return"ArrowLeft"===e?(t.preventDefault(),r?.focus(),void(r instanceof HTMLInputElement&&(r.selectionStart=r.selectionEnd=r.value.length))):"Enter"===e||" "===e?(t.preventDefault(),this.filterable&&this.filterValue?(this.handleIconClick(),r?.focus()):(this.isOpen=!this.isOpen,this.isOpen&&(this.highlightedIndex=-1,r?.focus())),void this.requestUpdate()):void("Tab"===e&&this.isOpen&&(this.isOpen=!1,this.highlightedIndex=-1,this.requestUpdate()))}handleBlur(){window.setTimeout((()=>{this.isOpen||(this.validateAndCleanOnBlur(),this.requestUpdate())}),200)}scrollHighlightedIntoView(){if(this.isMobile||this.highlightedIndex<0)return;const t=this.shadowRoot?.querySelector(".options-list");if(!t)return;const e=t.querySelector("li.highlighted");e&&e.scrollIntoView({block:"nearest"})}renderSelectedIcon(){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));return t&&"string"!=typeof t&&t.icon&&"string"==typeof t.icon?e`<span class="icon-selected" .innerHTML="${t.icon}"></span>`:i}renderOptionIcon(t){return t&&"string"==typeof t?e`<span class="icon-list" .innerHTML="${t}"></span>`:i}_getFilteredOptions(){if(!this.filterable)return this.options;if(!this.filterValue||""===this.filterValue.trim())return this.options;const t=this.filterValue.toLowerCase();return this.options.filter((e=>"string"==typeof e?e.toLowerCase().includes(t):e.label.toLowerCase().includes(t)))}validateAndCleanOnBlur(){const t=(this.filterValue||"").trim().toLowerCase();if(!t)return""!==this.value&&(this.value="",this._isCleared=!0,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0}))),this.filterValue="",this.filteredOptions=[...this.options],void(this.showNoResults=!1);const e=this.options.find((e=>{const i="string"==typeof e?e:e.label;return String(i).toLowerCase()===t}));if(e){const t="string"==typeof e?e:e.value,i="string"==typeof e?e:e.label;this.value!==t&&(this.value=t,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:t},bubbles:!0,composed:!0}))),this.filterValue=i,this.showNoResults=!1}else this.value="",this._isCleared=!0,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.filterValue="",this.filteredOptions=[...this.options],this.showNoResults=!1}render(){const t=this.isMobile,o=` --filter-text-color: ${this.value?"var( --secondary-color )":"var( --secondary-color-40 )"}; `,r=e`
+    `]}manageScrollElement(t,e){e?t.classList.add("modal-open-no-scroll"):t.classList.remove("modal-open-no-scroll")}toggleDynamicScrollLock(t){const e=document.documentElement;if(t){this.originalHtmlOverflow=e.style.overflow,this.originalHtmlPaddingRight=e.style.paddingRight,e.style.overflow="hidden",this.manageScrollElement(e,!0);if(e.scrollHeight>e.clientHeight){const t=window.innerWidth-e.clientWidth;e.style.paddingRight=`${t}px`}}else e.style.overflow=this.originalHtmlOverflow,e.style.paddingRight=this.originalHtmlPaddingRight,this.manageScrollElement(e,!1)}sortOptions(t,e,i){const o=t=>"string"==typeof t?t:"string"==typeof t.value?t.value:"",r=this.getOptionLabel(t),s=this.getOptionLabel(e),n=r.toLowerCase(),a=s.toLowerCase();if(i&&i.length>0){const t=i.toLowerCase(),e=n.startsWith(t),o=a.startsWith(t);if(e&&!o)return-1;if(!e&&o)return 1}const l=o(t),d=o(e);if("+54"===l)return-1;if("+54"===d)return 1;if("+54"===l&&"+54"===d)return 0;const c=r.match(/^\d+(\.\d+)?/),h=s.match(/^\d+(\.\d+)?/),p=c?Number(c[0]):NaN,u=h?Number(h[0]):NaN;return isNaN(p)||isNaN(u)?r.localeCompare(s,"es",{usage:"sort",sensitivity:"accent"}):p-u}filterAndSortOptions(){if(!this.filterable||!this.filterValue||0===this.filterValue.length)return this.filteredOptions=this.sortable?[...this.options].sort(((t,e)=>this.sortOptions(t,e,void 0))):[...this.options],this.highlightedIndex=-1,void(this.showNoResults=!1);const t=this.filterValue,e=t.toLowerCase();let i=this.options.filter((t=>this.getOptionLabel(t).toLowerCase().includes(e)));this.sortable?this.filteredOptions=i.sort(((e,i)=>this.sortOptions(e,i,t))):this.filteredOptions=i,this.highlightedIndex=this.filteredOptions.length>0?0:-1,this.showNoResults=0===this.filteredOptions.length}handleOptionHover(t){this.highlightedIndex!==t&&(this.highlightedIndex=t)}update(t){if(t.has("options")){if(this.sortable){const t=[...this.options].sort(((t,e)=>this.sortOptions(t,e,void 0)));this.options=t}this.filterAndSortOptions();if(this.options.length<=5)this.filterable=!1;else{const t=this.getAttribute("filterable");this.filterable=null===t||"false"!==t}}if((t.has("defaultValue")||t.has("options")||t.has("value")&&this.value)&&!this._isCleared){const t=this.value||this.defaultValue,e=this.options.find((e=>"string"==typeof e?e===t:e.value===t));e?(this.filterValue="string"==typeof e?e:e.label,this.value="string"==typeof e?e:e.value):((this.isOpen||this.filterValue)&&(this.isOpen||""!==this.value)||(this.filterValue=""),this.value="")}this._isCleared&&""===this.value&&(this._isCleared=!1),super.update(t)}willUpdate(t){t.has("filterValue")&&this.filterAndSortOptions()}updated(t){super.updated(t);const e=!1===t.get("isOpen");this.isMobile&&this.isOpen&&t.has("isOpen")&&e&&this.updateComplete.then((()=>{const t=this.mobileInputRef;t&&window.setTimeout((()=>{t.focus(),t.setSelectionRange(t.value.length,t.value.length)}),0)}))}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)),this.debounceTimeout&&(clearTimeout(this.debounceTimeout),this.debounceTimeout=null),this.isMobile&&this.toggleDynamicScrollLock(!1),super.disconnectedCallback()}updateResponsiveMode(){this.isMobile=window.innerWidth<=940}handleInputClick(t){this.disabled||(this.isOpen||(this.filteredOptions=[...this.options],this.showNoResults=!1,this.isMobile&&(this.mobileFilterValue="")),this.isOpen=!this.isOpen,this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:this.isOpen},bubbles:!0,composed:!0})),this.isMobile&&this.toggleDynamicScrollLock(this.isOpen),this.requestUpdate())}handleInput(t){if(!this.filterable)return;this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength):e;if(this.filterValue=i,this.isOpen=!0,""===i)this.value="",this.filteredOptions=[...this.options],this.showNoResults=!1;else{const t=i.toLowerCase();this.filteredOptions=this.options.filter((e=>("string"==typeof e?e:e.label).toLowerCase().includes(t))),this.showNoResults=0===this.filteredOptions.length}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){this._isCleared=!1;const e=t.target.value,i=this.maxLength?e.slice(0,this.maxLength):e;this.mobileFilterValue=i;const o=i.toLowerCase();this.filteredOptions=this.options.filter((t=>("string"==typeof t?t:t.label).toLowerCase().includes(o))),this.showNoResults=i.length>0&&0===this.filteredOptions.length,this.requestUpdate(),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})):0===i.length&&(this.filteredOptions=[...this.options])}),300)}handleSelect(t){this._isCleared=!1,this.highlightedIndex=-1;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.value=e,this.isOpen=!1,this.isMobile&&this.toggleDynamicScrollLock(!1),this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})),this.mobileFilterValue=this.filterValue,this.filteredOptions=[...this.options],this.showNoResults=!1,this.requestUpdate()}handleIconClick(){if(this.disabled)return;this.highlightedIndex=-1;const t=this.isRenderClearButton,e="string"==typeof this.value&&""!==this.value,i="object"==typeof this.value&&null!==this.value&&Object.keys(this.value).length>0;t&&(e||i)?(this._isCleared=!0,this.filterValue="",this.value="",this.filteredOptions=[...this.options],this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.isOpen=!1,this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0}))):(this.isOpen=!this.isOpen,this.isOpen?(this.mobileFilterValue="",this.showNoResults=!1,this.filteredOptions=[...this.options],this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!0},bubbles:!0,composed:!0})),this.updateComplete.then((()=>{if(this.isMobile)return;const t=this.shadowRoot?.querySelector(".filter-input");t?.focus()}))):(this.mobileFilterValue="",this.filteredOptions=[...this.options],this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})))),this.requestUpdate()}handleReset(){this.filterValue="",this.showNoResults=!1,this.highlightedIndex=-1,this.mobileFilterValue="",this.filteredOptions=[...this.options]}handleClickOutside(t){const e=t.target;e instanceof Node&&(!this.contains(e)&&this.isOpen&&(this.isOpen=!1,this.validateAndCleanOnBlur(),this.isMobile&&this.toggleDynamicScrollLock(!1),this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})),this.requestUpdate()),this.isMobile&&(this.mobileFilterValue="",this.filteredOptions=[...this.options]))}handleKeyDown(t){const{key:e}=t,i=this.shadowRoot?.querySelector(".filter-input");if("Backspace"===e&&this.filterable){const t=i?.value||"",e=i&&i.selectionStart!==i.selectionEnd,o=1===t.length&&!e,r=0===t.length;(o||r)&&(this.value="",this.filterValue="",this._isCleared=!0,this.filteredOptions=[...this.options],this.isOpen=!0,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.requestUpdate())}const o=this.filteredOptions.filter((t=>!("object"==typeof t&&t.disabled)));if(!this.isOpen&&("Enter"===e||" "===e)){t.preventDefault(),this.isOpen=!0;const e=this.filteredOptions.findIndex((t=>!("object"==typeof t&&t.disabled)));return this.highlightedIndex=-1!==e?e:-1,void this.requestUpdate()}if(this.isOpen){if("ArrowDown"===e){t.preventDefault();let e=this.highlightedIndex+1;for(;e<this.filteredOptions.length;){const t=this.filteredOptions[e];if("object"!=typeof t||!t.disabled){this.highlightedIndex=e;break}e++}if(e>=this.filteredOptions.length){const t=this.filteredOptions.length-1;this.highlightedIndex=o.length>0?t:-1}this.requestUpdate(),this.updateComplete.then((()=>this.scrollHighlightedIntoView()))}else if("ArrowUp"===e){t.preventDefault();let e=this.highlightedIndex-1;for(;e>=0;){const t=this.filteredOptions[e];if("object"!=typeof t||!t.disabled){this.highlightedIndex=e;break}e--}e<0&&(this.highlightedIndex=-1),this.requestUpdate(),this.updateComplete.then((()=>this.scrollHighlightedIntoView()))}else if("Enter"===e||" "===e){this.highlightedIndex>=0&&t.preventDefault();const e=this.filteredOptions[this.highlightedIndex];if(this.highlightedIndex>=0&&e&&("object"!=typeof e||!e.disabled)){this.handleSelect(e);const t=this.shadowRoot?.querySelector(".filter-input"),i=this.shadowRoot?.querySelector(".filter-fake");return t?t.focus():i?.focus(),void(this.highlightedIndex=-1)}}else if("Escape"===e){t.preventDefault(),this.isOpen=!1,this.highlightedIndex=-1,this.isMobile&&this.toggleDynamicScrollLock(!1),this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0}));const e=this.shadowRoot?.querySelector(".filter-input"),i=this.shadowRoot?.querySelector(".filter-fake");e?e.focus():i?.focus()}else"Tab"===e?(this.isOpen=!1,this.highlightedIndex=-1,this.lastElement&&!this.isMobile&&this.dispatchEvent(new CustomEvent("dropdown-toggle",{detail:{open:!1},bubbles:!0,composed:!0})),this.requestUpdate()):!this.isMobile&&this.filterable&&1===e.length&&(this.highlightedIndex=-1);if(("ArrowLeft"===e||"ArrowRight"===e)&&this.filterable)return}if("ArrowRight"!==e)this.isOpen&&!this.isMobile&&this.filterable&&1===e.length&&(this.highlightedIndex=-1);else{const e=!i||i.selectionStart===i.value.length;if(!this.filterable||e){t.preventDefault();const e=this.shadowRoot?.querySelector(".icon-button");e?.focus()}}}handleButtonKeyDown(t){const{key:e}=t,i=this.shadowRoot?.querySelector(".filter-input"),o=this.shadowRoot?.querySelector(".filter-fake"),r=i||o;return"ArrowLeft"===e?(t.preventDefault(),r?.focus(),void(r instanceof HTMLInputElement&&(r.selectionStart=r.selectionEnd=r.value.length))):"Enter"===e||" "===e?(t.preventDefault(),this.filterable&&this.filterValue?(this.handleIconClick(),r?.focus()):(this.isOpen=!this.isOpen,this.isOpen&&(this.highlightedIndex=-1,r?.focus())),void this.requestUpdate()):void("Tab"===e&&this.isOpen&&(this.isOpen=!1,this.highlightedIndex=-1,this.requestUpdate()))}handleBlur(){window.setTimeout((()=>{this.isOpen||(this.validateAndCleanOnBlur(),this.requestUpdate())}),200)}scrollHighlightedIntoView(){if(this.isMobile||this.highlightedIndex<0)return;const t=this.shadowRoot?.querySelector(".options-list");if(!t)return;const e=t.querySelector("li.highlighted");e&&e.scrollIntoView({block:"nearest"})}renderSelectedIcon(){const t=this.options.find((t=>"string"==typeof t?t===this.value:t.value===this.value));return t&&"string"!=typeof t&&t.icon&&"string"==typeof t.icon?e`<span class="icon-selected" .innerHTML="${t.icon}"></span>`:i}renderOptionIcon(t){return t&&"string"==typeof t?e`<span class="icon-list" .innerHTML="${t}"></span>`:i}_getFilteredOptions(){if(!this.filterable)return this.options;if(!this.filterValue||""===this.filterValue.trim())return this.options;const t=this.filterValue.toLowerCase();return this.options.filter((e=>"string"==typeof e?e.toLowerCase().includes(t):e.label.toLowerCase().includes(t)))}validateAndCleanOnBlur(){if(!this.filterable)return;const t=(this.filterValue||"").trim().toLowerCase();if(!t)return""!==this.value&&(this.value="",this._isCleared=!0,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0}))),this.filterValue="",this.filteredOptions=[...this.options],void(this.showNoResults=!1);const e=this.options.find((e=>{const i="string"==typeof e?e:e.label;return String(i).toLowerCase()===t}));if(e){const t="string"==typeof e?e:e.value,i="string"==typeof e?e:e.label;this.value!==t&&(this.value=t,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:t},bubbles:!0,composed:!0}))),this.filterValue=i,this.showNoResults=!1}else this.value="",this._isCleared=!0,this.dispatchEvent(new CustomEvent("option-selected",{detail:{value:""},bubbles:!0,composed:!0})),this.filterValue="",this.filteredOptions=[...this.options],this.showNoResults=!1}render(){const t=this.isMobile,o=` --filter-text-color: ${this.value?"var( --secondary-color )":"var( --secondary-color-40 )"}; `,r=e`
       <randstad-icon
         name="${this.isOpen&&this.filteredOptions.length>0?"arrow_up":"arrow_down"}"
         size="24px"
@@ -2431,6 +2441,8 @@ function j(t,e){return(e,i,o)=>((t,e,i)=>(i.configurable=!0,i.enumerable=!0,Refl
                   />
                 `}
 
+              ${!t&&this.showNoResults?e`<randstad-icon name="warning" size="24px" class="no-results-icon"></randstad-icon>`:i}
+
               <button
                 class="icon-button"
                 @click="${this.handleIconClick}"