@nuraly/lumenui 0.1.0

package/dist/src/components/select/bundle.js

@@ -0,0 +1,721 @@
+import{css as t,nothing as e,html as i,LitElement as r}from"lit";import{property as s,query as o,customElement as n}from"lit/decorators.js";import{map as a}from"lit/directives/map.js";import{choose as l}from"lit/directives/choose.js";import{classMap as c}from"lit/directives/class-map.js";import{styleMap as h}from"lit/directives/style-map.js";import{unsafeHTML as u}from"lit/directives/unsafe-html.js";import{NuralyUIBaseMixin as d}from"@nuralyui/common/mixins";import{renderValidationMessage as p}from"@nuralyui/common/utils";import{BaseComponentController as v,BaseValidationController as y}from"@nuralyui/common/controllers";const g=t`
+  :host {
+    width: fit-content;
+    display: block;
+    font-family: var(--nuraly-select-font-family, var(--nuraly-font-family));
+    font-size: var(--nuraly-select-font-size, var(--nuraly-font-size-sm));
+    line-height: var(--nuraly-select-line-height, var(--nuraly-line-height-normal));
+    margin: var(--nuraly-select-margin, 0);
+  }
+
+  /* Host attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: var(--nuraly-select-disabled-opacity, 0.5);
+    pointer-events: none;
+  }
+
+  :host([disabled]) .wrapper {
+    background-color: var(--nuraly-select-disabled-background, var(--nuraly-color-background-disabled));
+    border-color: var(--nuraly-select-disabled-border-color, var(--nuraly-color-border));
+    color: var(--nuraly-select-disabled-text-color, var(--nuraly-color-text-disabled));
+    cursor: not-allowed;
+  }
+
+  /* Size variants */
+  :host([size='small']) .wrapper {
+    height: var(--nuraly-select-small-height, var(--nuraly-size-sm));
+    min-height: var(--nuraly-select-small-height, var(--nuraly-size-sm));
+    font-size: var(--nuraly-select-small-font-size, var(--nuraly-font-size-xs));
+  }
+
+  :host([size='small']) .select-trigger {
+    padding: var(--nuraly-select-small-padding, var(--nuraly-spacing-1) var(--nuraly-spacing-2));
+    padding-right: calc(var(--nuraly-select-small-icon-size, var(--nuraly-font-size-sm)) + var(--nuraly-spacing-5));
+  }
+
+  :host([size='small']) .icons-container nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-font-size-sm));
+  }
+
+  :host([size='small']) .option {
+    padding: var(--nuraly-select-small-padding, var(--nuraly-spacing-1) var(--nuraly-spacing-2));
+    font-size: var(--nuraly-select-small-font-size, var(--nuraly-font-size-xs));
+    min-height: var(--nuraly-select-small-height, var(--nuraly-size-sm));
+  }
+
+  :host([size='small']) .option-icon,
+  :host([size='small']) .option nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-small-icon-size, var(--nuraly-font-size-sm));
+  }
+
+  :host([size='medium']) .wrapper {
+    min-height: var(--nuraly-select-medium-height, var(--nuraly-size-lg));
+    font-size: var(--nuraly-select-medium-font-size, var(--nuraly-font-size-sm));
+  }
+
+  :host([size='medium']) .select-trigger {
+    padding: var(--nuraly-select-medium-padding, var(--nuraly-spacing-2) var(--nuraly-spacing-3));
+    padding-right: calc(var(--nuraly-select-medium-icon-size, var(--nuraly-font-size-base)) + var(--nuraly-spacing-5));
+  }
+
+  :host([size='medium']) .icons-container nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-font-size-base));
+  }
+
+  :host([size='medium']) .option {
+    padding: var(--nuraly-select-medium-padding, var(--nuraly-spacing-2) var(--nuraly-spacing-3));
+    font-size: var(--nuraly-select-medium-font-size, var(--nuraly-font-size-sm));
+    min-height: var(--nuraly-select-medium-height, var(--nuraly-size-lg));
+  }
+
+  :host([size='medium']) .option-icon,
+  :host([size='medium']) .option nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-medium-icon-size, var(--nuraly-font-size-base));
+  }
+
+  :host([size='large']) .wrapper {
+    min-height: var(--nuraly-select-large-height, var(--nuraly-size-xl));
+    font-size: var(--nuraly-select-large-font-size, var(--nuraly-font-size-lg));
+  }
+
+  :host([size='large']) .select-trigger {
+    padding: var(--nuraly-select-large-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));
+    padding-right: calc(var(--nuraly-select-large-icon-size, var(--nuraly-font-size-xl)) + var(--nuraly-spacing-5));
+  }
+
+  :host([size='large']) .icons-container nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-font-size-xl));
+  }
+
+  :host([size='large']) .option {
+    padding: var(--nuraly-select-large-padding, var(--nuraly-spacing-3) var(--nuraly-spacing-4));
+    font-size: var(--nuraly-select-large-font-size, var(--nuraly-font-size-lg));
+    min-height: var(--nuraly-select-large-height, var(--nuraly-size-xl));
+  }
+
+  :host([size='large']) .option-icon,
+  :host([size='large']) .option nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-large-icon-size, var(--nuraly-font-size-xl));
+  }
+
+  /* Status variants */
+  :host([status='error']) .wrapper {
+    border-color: var(--nuraly-select-error-border-color, var(--nuraly-color-danger));
+  }
+
+  :host([status='warning']) .wrapper {
+    border-color: var(--nuraly-select-warning-border-color, var(--nuraly-color-warning));
+  }
+
+  :host([status='success']) .wrapper {
+    border-color: var(--nuraly-select-success-border-color, var(--nuraly-color-success));
+  }
+
+  /* Type variants */
+  :host([type='inline']) {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2);
+  }
+
+  :host([type='inline']) .wrapper {
+    flex: 1;
+  }
+
+  /* Block (full width) */
+  :host([block]) {
+    width: 100%;
+  }
+
+  :host([block]) .wrapper {
+    width: 100%;
+  }
+
+  /* Show dropdown */
+  :host([show]) .options {
+    display: flex !important;
+  }
+
+  /* Main wrapper container */
+  .wrapper {
+    position: relative;
+    width: var(--nuraly-select-width, fit-content);
+    background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));
+    border: var(--nuraly-select-border-width, var(--nuraly-border-width-1)) solid
+            var(--nuraly-select-border-color, var(--nuraly-color-border));
+    border-radius: var(--nuraly-select-border-radius, var(--nuraly-border-radius-md));
+    transition: all var(--nuraly-select-transition-duration, var(--nuraly-transition-fast))
+                var(--nuraly-select-transition-timing, ease-in-out);
+    cursor: pointer;
+    outline: none;
+    margin: var(--nuraly-select-wrapper-margin, 0);
+    min-height: var(--nuraly-select-min-height, var(--nuraly-size-lg));
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    /* Ensure dropdown can overflow the wrapper */
+    overflow: visible;
+  }
+
+  .wrapper:hover:not(:disabled) {
+    border-color: var(--nuraly-select-border-hover, var(--nuraly-color-primary));
+  }
+
+  .wrapper:focus,
+  .wrapper:focus-within {
+    border-color: var(--nuraly-select-border-focus, var(--nuraly-color-primary));
+    box-shadow: var(--nuraly-focus-ring);
+  }
+
+  /* Select container */
+  .select {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Select trigger (main display area) */
+  .select-trigger {
+    display: flex;
+    align-items: center;
+    padding: var(--nuraly-select-padding-top, var(--nuraly-spacing-2))
+             calc(var(--nuraly-select-icon-size, var(--nuraly-font-size-base)) + var(--nuraly-spacing-5))
+             var(--nuraly-select-padding-bottom, var(--nuraly-spacing-2))
+             var(--nuraly-select-padding-left, var(--nuraly-spacing-3));
+    color: var(--nuraly-select-color, var(--nuraly-color-text));
+    font-size: inherit;
+    line-height: inherit;
+    word-break: break-word;
+    flex: 1;
+    min-height: 0;
+    flex-wrap: wrap;
+    gap: var(--nuraly-select-tag-margin, var(--nuraly-spacing-1));
+    box-sizing: border-box;
+  }
+
+  .select-trigger:empty:before {
+    content: attr(data-placeholder);
+    color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
+    font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-font-size-sm));
+  }
+
+  /* Multi-select tags */
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1);
+    background-color: var(--nuraly-select-tag-background, var(--nuraly-color-background-active));
+    color: var(--nuraly-select-tag-color, var(--nuraly-color-text));
+    padding: var(--nuraly-select-tag-padding, var(--nuraly-spacing-1) var(--nuraly-spacing-2));
+    border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-border-radius-xs));
+    font-size: calc(var(--nuraly-select-font-size, var(--nuraly-font-size-sm)) - 1px);
+    max-width: 100%;
+  }
+
+  .tag-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tag-close {
+    color: var(--nuraly-select-tag-close-color, var(--nuraly-color-text-secondary));
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
+    height: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
+    border-radius: var(--nuraly-border-radius-full);
+    transition: color var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
+  }
+
+  .tag-close:hover {
+    color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-color-text));
+  }
+
+  /* Icons container */
+  .icons-container {
+    position: absolute;
+    top: 50%;
+    right: var(--nuraly-spacing-3);
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1);
+    pointer-events: none;
+  }
+
+  .icons-container nr-icon {
+    --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
+    --nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));
+    pointer-events: auto;
+    cursor: pointer;
+    transition: color var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
+  }
+
+  .icons-container nr-icon:hover {
+    --nuraly-icon-color: var(--nuraly-color-select-icon-hover, var(--nuraly-color-text));
+  }
+
+  .arrow-icon {
+    --nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-font-size-base));
+    transition: transform var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
+    pointer-events: none !important;
+  }
+
+  :host([show]) .arrow-icon {
+    transform: rotate(180deg);
+  }
+
+  /* Dropdown options */
+  .options {
+    /* Fixed positioning to escape overflow containers */
+    position: fixed;
+    /* top/left will be set by controller */
+    background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));
+    border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, var(--nuraly-border-width-1))) solid
+            var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));
+    border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, var(--nuraly-border-radius-md)));
+    box-shadow: var(--nuraly-select-dropdown-shadow, var(--nuraly-shadow-lg));
+    z-index: var(--nuraly-select-dropdown-z-index, var(--nuraly-z-dropdown));
+    max-height: var(--nuraly-select-dropdown-max-height, auto);
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: none;
+    flex-direction: column;
+    animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-transition-fast)) ease-out;
+    /* Ensure proper containment and exact wrapper width */
+    box-sizing: border-box;
+    /* Allow overriding width via either of these custom props */
+    width: var(
+      --nuraly-select-dropdown-width,
+      var(--select-dropdown-width, max-content)
+    );
+    /* Create new stacking context to prevent layering issues */
+    isolation: isolate;
+    /* Ensure solid background to prevent visual bleed-through */
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    /* Prevent pointer events when hidden */
+    pointer-events: none;
+  }
+
+  :host([show]) .options {
+    pointer-events: auto;
+  }
+
+  .options.placement-top {
+    animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-transition-fast)) ease-out;
+  }
+
+  .options.placement-bottom {
+    animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, var(--nuraly-transition-fast)) ease-out;
+  }
+
+  @keyframes dropdown-enter {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dropdown-enter-top {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Search container - sticky at top of dropdown */
+  .search-container {
+    position: sticky;
+    top: 0;
+    z-index: var(--nuraly-z-sticky);
+    background-color: var(--nuraly-select-dropdown-background, var(--nuraly-color-background-panel));
+    border-bottom: var(--nuraly-select-border-width, var(--nuraly-border-width-1)) solid
+                   var(--nuraly-select-dropdown-border-color, var(--nuraly-color-border));
+    padding: var(--nuraly-spacing-2);
+    margin: 0;
+    /* Ensure it stays above options during scroll */
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    /* Ensure proper stacking and smooth scrolling */
+    will-change: transform;
+    transform: translateZ(0);
+  }
+
+  /* Search input styling */
+  .search-container .search-input {
+    width: 100%;
+    max-width: var(--nuraly-select-input-container-max-width, var(--nuraly-select-width));
+    --nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-border-radius-md));
+    --nuraly-input-background-color: var(--nuraly-select-background, var(--nuraly-color-background-panel));
+    --nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-color-border));
+    --nuraly-input-text-color: var(--nuraly-select-color, var(--nuraly-color-text));
+    --nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
+  }
+
+  /* Search icon in the search input */
+  .search-container .search-icon {
+    --nuraly-icon-color: var(--nuraly-color-select-icon, var(--nuraly-color-text-secondary));
+  }
+
+  /* Options list container - ensure proper scroll behavior with sticky search */
+  .options:has(.search-container) {
+    /* Add small padding-top when search is present to ensure proper separation */
+    padding-top: 0;
+  }
+
+  /* Option items */
+  .option {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2);
+    padding: var(--nuraly-select-option-padding, var(--nuraly-spacing-2) var(--nuraly-spacing-3));
+    min-height: var(--nuraly-select-option-min-height, auto);
+    color: var(--nuraly-select-option-color, var(--nuraly-color-text));
+    font-size: var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm));
+    cursor: pointer;
+    transition: background-color var(--nuraly-select-transition-duration, var(--nuraly-transition-fast));
+    position: relative;
+  }
+
+  /* First option after search container should have no extra margin */
+  .search-container + .option {
+    margin-top: 0;
+  }
+
+  .option:hover {
+    background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));
+  }
+
+  .option.selected {
+    background-color: var(--nuraly-select-option-selected-background, var(--nuraly-color-primary));
+    color: var(--nuraly-select-option-selected-color, var(--nuraly-color-text-on-color));
+  }
+
+  .option.focused {
+    background-color: var(--nuraly-select-option-hover-background, var(--nuraly-color-background-hover));
+    outline: 2px solid var(--nuraly-select-border-focus, var(--nuraly-color-primary));
+    outline-offset: -2px;
+  }
+
+  .option.disabled {
+    opacity: var(--nuraly-select-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+
+  .option-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2);
+  }
+
+  .option-icon {
+    --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
+    --nuraly-icon-color: currentColor;
+  }
+
+  .option-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .option-description {
+    font-size: calc(var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm)) - 1px);
+    opacity: 0.7;
+    margin-top: var(--nuraly-spacing-1);
+  }
+
+  .check-icon {
+    --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-font-size-base));
+    --nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-color-text-on-color));
+  }
+
+  .no-options {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--select-no-options-padding, var(--nuraly-spacing-6) var(--nuraly-spacing-4));
+    color: var(--select-no-options-color, var(--nuraly-color-text-secondary));
+    font-size: var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm));
+    cursor: default;
+    user-select: none;
+  }
+
+  .no-options-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--select-no-options-gap, var(--nuraly-spacing-2));
+    text-align: center;
+  }
+
+  .no-options-icon {
+    --nuraly-icon-width: var(--nuraly-spacing-6);
+    --nuraly-icon-color: var(--select-no-options-icon-color, var(--nuraly-color-border));
+    opacity: 0.8;
+  }
+
+  .no-options-text {
+    font-size: var(--nuraly-select-option-font-size, var(--nuraly-font-size-sm));
+    color: var(--select-no-options-color, var(--nuraly-color-text-secondary));
+    line-height: 1.4;
+  }
+
+  /* Validation message */
+  .validation-message {
+    display: block;
+    margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-spacing-1));
+    font-size: var(--nuraly-select-message-font-size, var(--nuraly-font-size-xs));
+    color: var(--nuraly-select-error-message-color, var(--nuraly-color-danger));
+  }
+
+  .validation-message.warning {
+    color: var(--nuraly-select-warning-message-color, var(--nuraly-color-warning));
+  }
+
+  .validation-message.success {
+    color: var(--nuraly-select-success-message-color, var(--nuraly-color-success));
+  }
+
+  /* Slotted content styles */
+  ::slotted([slot='label']) {
+    display: block;
+    margin-bottom: var(--nuraly-spacing-1);
+    font-weight: 500;
+    color: var(--nuraly-select-color, var(--nuraly-color-text));
+  }
+
+  ::slotted([slot='helper-text']) {
+    display: block;
+    margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-spacing-1));
+    font-size: var(--nuraly-select-message-font-size, var(--nuraly-font-size-xs));
+    color: var(--nuraly-select-placeholder-color, var(--nuraly-color-text-secondary));
+  }
+
+  /* Accessibility improvements */
+  @media (prefers-reduced-motion: reduce) {
+    .options,
+    .wrapper,
+    .tag-close,
+    .arrow-icon,
+    .option {
+      transition: none;
+      animation: none;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .wrapper {
+      border-width: 2px;
+    }
+    
+    .wrapper:focus,
+    .wrapper:focus-within {
+      outline: 3px solid;
+    }
+  }
+`;var m,f,b,w,x,z,O,E,k;!function(t){t.Default="default",t.Inline="inline",t.Button="button",t.Slot="slot"}(m||(m={})),function(t){t.Default="default",t.Warning="warning",t.Error="error",t.Success="success"}(f||(f={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(b||(b={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(w||(w={})),function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(x||(x={})),function(t){t.Default="default",t.Solid="solid",t.Outline="outline",t.Borderless="borderless"}(z||(z={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(O||(O={})),function(t){t.None="none",t.StartsWith="starts-with",t.Contains="contains",t.Fuzzy="fuzzy"}(E||(E={}));class S extends v{}class $ extends S{constructor(){super(...arguments),this._selectedOptions=[],this._initialized=!1}getSelectedOptions(){return[...this._selectedOptions]}getSelectedOption(){return this._selectedOptions[0]}selectOption(t){try{if(this.isOptionDisabled(t))return;const e=this.host.multiple,i=this.getCurrentValue();e?this.isOptionSelected(t)||(this._selectedOptions=[...this._selectedOptions,t],this.updateHostValue(),this.dispatchChangeEvent(i)):(this.isOptionSelected(t)?this._selectedOptions=[]:this._selectedOptions=[t],this.updateHostValue(),this.dispatchChangeEvent(i)),this.requestUpdate()}catch(t){this.handleError(t,"selectOption")}}unselectOption(t){try{if(this.isOptionSelected(t)){const e=this.getCurrentValue();this._selectedOptions=this._selectedOptions.filter(e=>e.value!==t.value),this.updateHostValue(),this.dispatchChangeEvent(e),this.requestUpdate()}}catch(t){this.handleError(t,"unselectOption")}}clearSelection(){try{if(this._selectedOptions.length>0){const t=this.getCurrentValue();this._selectedOptions=[],this.updateHostValue(),this.dispatchChangeEvent(t),this.requestUpdate()}}catch(t){this.handleError(t,"clearSelection")}}isOptionSelected(t){return this._selectedOptions.some(e=>e.value===t.value)}isOptionDisabled(t){return Boolean(t.disabled)||this.host.disabled}toggleOption(t){this.isOptionSelected(t)?this.unselectOption(t):this.selectOption(t)}initializeFromValue(){try{if(this._initialized)return;const t=this.host.value;if(!t||Array.isArray(t)&&0===t.length)return;const e=Array.isArray(t)?t:[t],i=this.host.options.filter(t=>e.includes(t.value));i.length>0&&(this._selectedOptions=this.host.multiple?i:[i[0]],this.requestUpdate()),this._initialized=!0}catch(t){this.handleError(t,"initializeFromValue")}}updateHostValue(){var t;const e=this.host.multiple?this._selectedOptions.map(t=>t.value):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||"",i=this.host.value;let r=!1;if(this.host.multiple){const t=Array.isArray(i)?i:[],s=Array.isArray(e)?e:[];r=t.length===s.length&&t.every((t,e)=>t===s[e])}else r=i===e;r||(this.host.value=e)}getCurrentValue(){var t;return this.host.multiple?this._selectedOptions.map(t=>t.value):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||""}dispatchChangeEvent(t){const e={value:this.getCurrentValue(),selectedOptions:this.getSelectedOptions(),previousValue:t};this.dispatchEvent(new CustomEvent("nr-change",{detail:e,bubbles:!0,composed:!0}))}hostUpdated(){this.syncWithHostOptions()}syncWithHostOptions(){try{this._selectedOptions=this._selectedOptions.filter(t=>this.host.options.some(e=>e.value===t.value)),this._selectedOptions=this._selectedOptions.map(t=>this.host.options.find(e=>e.value===t.value)||t),this.updateHostValue()}catch(t){this.handleError(t,"syncWithHostOptions")}}}class C extends S{constructor(t,e,i){super(t),this.selectionController=e,this.dropdownController=i,this._focusedIndex=-1,this._hasKeyboardNavigated=!1}handleKeyDown(t){try{const e=this.isSearchInputFocused();switch(t.key){case"ArrowDown":t.preventDefault(),this.dropdownController.isOpen?this.navigateNext():this.openDropdown();break;case"ArrowUp":t.preventDefault(),this.dropdownController.isOpen?this.navigatePrevious():this.openDropdown();break;case"Enter":this.dropdownController.isOpen?e&&this._focusedIndex>=0?(t.preventDefault(),this.selectFocused()):e||(t.preventDefault(),this.selectFocused()):(t.preventDefault(),this.openDropdown());break;case" ":e||(t.preventDefault(),this.dropdownController.isOpen?this.selectFocused():this.openDropdown());break;case"Escape":t.preventDefault(),this.closeDropdown();break;case"Tab":this.closeDropdown();break;case"Home":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(0));break;case"End":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(this.host.options.length-1));break;default:1===t.key.length&&/[a-zA-Z0-9]/.test(t.key)&&this.handleAlphanumericKey(t.key.toLowerCase())}}catch(t){this.handleError(t,"handleKeyDown")}}navigateNext(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(0);let e=this._focusedIndex+1;e>=t.length&&(e=0),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigateNext")}}navigatePrevious(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(t.length-1);let e=this._focusedIndex-1;e<0&&(e=t.length-1),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigatePrevious")}}selectFocused(){try{const t=this.getNavigableOptions()[this._focusedIndex];t&&!this.selectionController.isOptionDisabled(t)&&(this.selectionController.selectOption(t),this.host.multiple||this.closeDropdown())}catch(t){this.handleError(t,"selectFocused")}}openDropdown(){try{this.dropdownController.open(),this._hasKeyboardNavigated=!1,this._focusedIndex=-1}catch(t){this.handleError(t,"openDropdown")}}closeDropdown(){try{this.dropdownController.close(),this._focusedIndex=-1,this._hasKeyboardNavigated=!1}catch(t){this.handleError(t,"closeDropdown")}}setFocusedIndex(t){try{const e=this.getNavigableOptions();t>=0&&t<e.length&&(this._focusedIndex=t,this.dispatchFocusEvent(e[t],t),this.requestUpdate(),this.scrollToFocusedOption(t))}catch(t){this.handleError(t,"setFocusedIndex")}}scrollToFocusedOption(t){var e;try{const i=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(".options");if(!i)return;setTimeout(()=>{const e=i.querySelector(".option.focused");if(e)e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"});else{const e=40,r=i.clientHeight,s=i.scrollTop,o=t*e,n=o+e,a=s+r;o<s?i.scrollTo({top:o,behavior:"smooth"}):n>a&&i.scrollTo({top:n-r,behavior:"smooth"})}},10)}catch(t){console.warn("Failed to scroll to focused option:",t)}}get focusedIndex(){return this._focusedIndex}get focusedOption(){return this.getNavigableOptions()[this._focusedIndex]}handleAlphanumericKey(t){try{const e=this.getNavigableOptions(),i=this._focusedIndex+1;for(let r=0;r<e.length;r++){const s=(i+r)%e.length;if(e[s].label.toLowerCase().startsWith(t)){this.setFocusedIndex(s),this.dropdownController.isOpen||this.openDropdown();break}}}catch(t){this.handleError(t,"handleAlphanumericKey")}}getNavigableOptions(){const t=this.host;if(!t.options||!Array.isArray(t.options))return[];let e=t.options;return t.searchable&&t.searchQuery&&"function"==typeof t.getFilteredOptions&&(e=t.getFilteredOptions()),e.filter(t=>!t.disabled)}dispatchFocusEvent(t,e){const i={focusedOption:t,focusedIndex:e};this.dispatchEvent(new CustomEvent("nr-select-focus",{detail:i,bubbles:!0,composed:!0}))}isSearchInputFocused(){var t;try{const e=this.host;if(!e.searchable)return!1;const i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".search-input");return!!i&&(document.activeElement===i||i.shadowRoot&&i.shadowRoot.querySelector("input")===i.shadowRoot.activeElement||i.contains(document.activeElement))}catch(t){return!1}}hostUpdated(){this.dropdownController.isOpen||-1===this._focusedIndex||(this._focusedIndex=-1)}}function A(t){if(t.parentElement)return t.parentElement;const e=t.getRootNode();return e instanceof ShadowRoot?e.host:null}function I(t,e,i={}){var r,s;const{offset:o=4,viewportMargin:n=8}=i,a=t.getBoundingClientRect(),l=e.getBoundingClientRect(),c=(null===(r=window.visualViewport)||void 0===r?void 0:r.height)||window.innerHeight,h=(null===(s=window.visualViewport)||void 0===s?void 0:s.width)||window.innerWidth,u=function(t){let e=t;for(;e;){const t=A(e);if(!t||t===document.body||t===document.documentElement)break;if(t instanceof HTMLElement){const e=getComputedStyle(t),i=e.transform,r=e.willChange,s=e.filter,o=e.perspective,n=e.contain;if(i&&"none"!==i||o&&"none"!==o||s&&"none"!==s||"transform"===r||"perspective"===r||"filter"===r||n&&n.includes("paint"))return t}e=t}return null}(e);let d={top:0,left:0};if(u){const t=u.getBoundingClientRect();d={top:t.top,left:t.left}}const p=c-a.bottom,v=a.top,y=l.height||200,g=function(t,e,i){return i>=t?"bottom":e>=t||e>i?"top":"bottom"}(y,v,p);let m;m="bottom"===g?a.bottom+o:a.top-y-o;let f=a.left;const b=a.width;return f=Math.max(n,Math.min(f,h-b-n)),m=Math.max(n,Math.min(m,c-y-n)),u&&(m-=d.top,f-=d.left),{top:m,left:f,width:a.width,placement:g}}function N(t,e,i,r={}){var s;const{viewportMargin:o=8,maxHeight:n}=r,a=(null===(s=window.visualViewport)||void 0===s?void 0:s.height)||window.innerHeight,l=e.getBoundingClientRect(),c=t.scrollHeight;let h;h="bottom"===i?a-l.bottom-o-2:l.top-o-2,n?(t.style.maxHeight=n,t.style.overflowY="auto"):c>h?(t.style.maxHeight=`${h}px`,t.style.overflowY="auto"):(t.style.maxHeight=`${c}px`,t.style.overflowY="auto")}class D extends S{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this.handleResize=()=>{this._isOpen&&this.calculatePosition()},this.handleScroll=()=>{this._isOpen&&this._triggerElement&&(!function(t){var e;const i=t.getBoundingClientRect(),r=(null===(e=window.visualViewport)||void 0===e?void 0:e.height)||window.innerHeight;return i.bottom>=0&&i.top<=r}(this._triggerElement)?this.close():this.calculatePosition())}}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}open(){try{this._isOpen||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),this.findElements(),setTimeout(()=>{this.calculatePosition()},10),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout(()=>{this.host.setupEventListeners()},50),this.focusSearchInput(),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&this.host.removeEventListeners(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}focusSearchInput(){try{const t=this.host;t&&t.searchable&&setTimeout(()=>{var e;const i=null===(e=t.shadowRoot)||void 0===e?void 0:e.querySelector(".search-input");i&&"function"==typeof i.focus&&i.focus()},100)}catch(t){console.warn("Failed to focus search input:",t)}}calculatePosition(){try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const t=I(this._triggerElement,this._dropdownElement,{offset:4,viewportMargin:8});this._position=t,this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}resetPosition(){try{if(this._dropdownElement){t=this._dropdownElement,["position","top","left","right","bottom","width","min-width","max-height","min-height","height","overflow-y","transform","display","opacity","visibility","z-index"].forEach(e=>t.style.removeProperty(e)),t.classList.remove("placement-top","placement-bottom");this.host.maxHeight||this._dropdownElement.style.removeProperty("max-height")}}catch(t){this.handleError(t,"resetPosition")}var t}setElements(t,e){this._dropdownElement=t,this._triggerElement=e}findElements(){try{const t=this._host;if(t.optionsElement&&t.wrapper)return this._dropdownElement=t.optionsElement,void(this._triggerElement=t.wrapper);t.shadowRoot&&(this._dropdownElement=t.shadowRoot.querySelector(".options"),this._triggerElement=t.shadowRoot.querySelector(".wrapper"))}catch(t){this.handleError(t,"findElements")}}applyPosition(){var t;try{if(!this._dropdownElement||!this._triggerElement)return;const e=this.host.maxHeight,i=null===(t=getComputedStyle(this._dropdownElement).getPropertyValue("--nuraly-select-local-dropdown-max-height"))||void 0===t?void 0:t.trim(),r="auto"===i||!e&&"auto"===i;!function(t,e,i="9999"){t.style.position="fixed",t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.removeProperty("right"),t.style.removeProperty("bottom"),t.style.minWidth=`${e.width}px`,t.style.removeProperty("width"),t.style.zIndex=i,t.style.height="auto",t.style.minHeight="auto",t.classList.remove("placement-top","placement-bottom"),t.classList.add(`placement-${e.placement}`)}(this._dropdownElement,this._position,"var(--nuraly-select-dropdown-z-index, 9999)"),e||r||(this._dropdownElement.style.maxHeight="none"),e?N(this._dropdownElement,this._triggerElement,this._position.placement,{viewportMargin:10,maxHeight:e}):r?(this._dropdownElement.style.removeProperty("max-height"),this._dropdownElement.style.overflowY="visible"):N(this._dropdownElement,this._triggerElement,this._position.placement,{viewportMargin:10})}catch(t){this.handleError(t,"applyPosition")}}getAvailableSpace(){var t,e;if(!this._triggerElement)return{above:0,below:0,left:0,right:0};const i=this._triggerElement.getBoundingClientRect(),r=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth;return{above:i.top,below:r-i.bottom,left:i.left,right:s-i.right}}hostConnected(){window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}hostDisconnected(){window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0)}}class T extends S{constructor(){super(...arguments),this._focusedIndex=-1,this._hasFocus=!1}get focusedIndex(){return this._focusedIndex}getFocusedOption(){if(this._focusedIndex>=0&&this._focusedIndex<this.host.options.length)return this.host.options[this._focusedIndex]}get hasFocus(){return this._hasFocus}setFocusedOption(t){try{t>=0&&t<this.host.options.length&&(this._focusedIndex=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus-change",{detail:{focusedIndex:t,focusedOption:this.getFocusedOption()},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"setFocusedOption")}}focus(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&(e.focus(),this._hasFocus=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"focus")}}blur(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.blur(),this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"blur")}}focusNext(){try{const t=this.getNextFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusNext")}}focusPrevious(){try{const t=this.getPreviousFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusPrevious")}}focusFirst(){try{const t=this.getNextFocusableIndex(-1);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusFirst")}}focusLast(){try{const t=this.getPreviousFocusableIndex(this.host.options.length);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusLast")}}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.requestUpdate()}handleFocus(){this._hasFocus=!0,this.requestUpdate()}handleBlur(){this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate()}getNextFocusableIndex(t){const e=this.host.options;for(let i=t+1;i<e.length;i++)if(!e[i].disabled)return i;for(let i=0;i<=t;i++)if(!e[i].disabled)return i;return-1}getPreviousFocusableIndex(t){const e=this.host.options;for(let i=t-1;i>=0;i--)if(!e[i].disabled)return i;for(let i=e.length-1;i>=t;i--)if(!e[i].disabled)return i;return-1}findOptionIndex(t){return this.host.options.findIndex(e=>e.value===t)}focusOptionByValue(t){const e=this.findOptionIndex(t);-1!==e&&this.setFocusedOption(e)}}!function(t){t.Valid="valid",t.Invalid="invalid",t.Pending="pending",t.Pristine="pristine"}(k||(k={}));class R extends y{constructor(t,e){super(t),this.selectionController=e}get validationState(){return this._validationState}validate(){try{this._validationState=k.Pending;const t=this.selectionController.getSelectedOptions().length>0;return this.host.required&&!t?(this.setValidationResult(!1,"This field is required",k.Invalid),!1):(this.setValidationResult(!0,"",k.Valid),!0)}catch(t){return this.handleError(t,"validate"),this.setValidationResult(!1,"Validation error occurred",k.Invalid),!1}}reset(){try{this._isValid=!0,this._validationMessage="",this._validationState=k.Pristine,this.requestUpdate(),this.dispatchValidationEvent()}catch(t){this.handleError(t,"reset")}}getFormData(){var t;try{const e=this._host,i=e.name||e.getAttribute("name")||"select",r=this.selectionController.getSelectedOptions();return this.host.multiple?{[i]:r.map(t=>t.value)}:{[i]:(null===(t=r[0])||void 0===t?void 0:t.value)||""}}catch(t){return this.handleError(t,"getFormData"),{}}}reportValidity(){var t;const e=this.validate();if(!e){const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.focus()}return e}setCustomValidity(t){try{t?this.setValidationResult(!1,t,k.Invalid):this.validate()}catch(t){this.handleError(t,"setCustomValidity")}}validateOnChange(){this._validationState!==k.Pristine&&this.validate()}validateOnBlur(){this._validationState===k.Pristine&&(this._validationState=k.Pending),this.validate()}setValidationResult(t,e,i){const r=this._isValid!==t||this._validationMessage!==e||this._validationState!==i;this._isValid=t,this._validationMessage=e,this._validationState=i,r&&(this.requestUpdate(),this.dispatchValidationEvent())}dispatchValidationEvent(){const t={isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}hostUpdated(){this.validateOnChange()}getValidationClasses(){return{valid:this._isValid&&this._validationState===k.Valid,invalid:!this._isValid&&this._validationState===k.Invalid,pending:this._validationState===k.Pending,pristine:this._validationState===k.Pristine}}getAriaAttributes(){const t={};return this.host.required&&(t["aria-required"]="true"),this._isValid||(t["aria-invalid"]="true",this._validationMessage&&(t["aria-describedby"]="validation-message")),t}}class L extends S{constructor(){super(...arguments),this._searchQuery="",this.handleSearchInput=t=>{this.setSearchQuery(t.detail.value||"")},this.handleSearchClear=()=>{this.clearSearch()},this.handleSearchKeyDown=t=>{if(["ArrowDown","ArrowUp","Enter","Home","End"].includes(t.key)){const e=this.host.keyboardController;return void(e&&e.handleKeyDown(t))}t.stopPropagation(),"Escape"===t.key&&(this.host.closeDropdown(),this.host.focus())}}get searchQuery(){return this._searchQuery}get hasSearch(){return""!==this._searchQuery.trim()}setSearchQuery(t){this._searchQuery=t,this.host.searchQuery=t,this.host.requestUpdate()}search(t){this.setSearchQuery(t)}clearSearch(){this.setSearchQuery("")}getFilteredOptions(t){if(!this.host.searchable||!this._searchQuery.trim())return t;const e=this._searchQuery.toLowerCase().trim();return t.filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)||t.description&&t.description.toLowerCase().includes(e))}renderSearchInput(){return this.host.searchable?i`
+      <div class="search-container">
+        <nr-input
+          type="text"
+          class="search-input"
+          placeholder="${this.host.searchPlaceholder}"
+          .value="${this._searchQuery}"
+          allowClear
+          @nr-input="${this.handleSearchInput}"
+          @nr-clear="${this.handleSearchClear}"
+          @keydown="${this.handleSearchKeyDown}"
+          @click="${t=>t.stopPropagation()}"
+        >
+          <nr-icon 
+            name="search" 
+            class="search-icon" 
+            slot="prefix"
+            aria-hidden="true">
+          </nr-icon>
+        </nr-input>
+      </div>
+    `:e}renderNoResults(){return i`
+      <div class="no-options" role="option" aria-disabled="true">
+        <div class="no-options-content">
+          <nr-icon 
+            name="search" 
+            class="no-options-icon"
+            aria-hidden="true">
+          </nr-icon>
+          <span class="no-options-text">No results found for "${this._searchQuery}"</span>
+        </div>
+      </div>
+    `}hasNoResults(t){return this.host.searchable&&""!==this._searchQuery.trim()&&0===this.getFilteredOptions(t).length}getCurrentQuery(){return this.host.searchQuery||this._searchQuery}hostUpdated(){super.hostUpdated(),this.host.searchQuery!==this._searchQuery&&(this._searchQuery=this.host.searchQuery)}hostConnected(){super.hostConnected(),this._searchQuery=""}}class P extends S{constructor(){super(...arguments),this.handleTriggerClick=t=>{this.host.disabled||(t.preventDefault(),t.stopPropagation(),this.host.toggleDropdown())},this.handleOptionClick=(t,e)=>{t.stopPropagation(),e.disabled||(this.host.multiple?this.host.toggleOption(e):(this.host.selectOption(e),this.host.closeDropdown()))},this.handleTagRemove=(t,e)=>{t.stopPropagation(),this.host.unselectOption(e)},this.handleClearAll=t=>{t.stopPropagation(),this.host.clearSelection()},this.handleKeyDown=t=>{const e=this.host.keyboardController;e&&e.handleKeyDown(t)},this.handleFocus=()=>{const t=this.host.focusController;t&&t.handleFocus()},this.handleBlur=()=>{const t=this.host.focusController;t&&t.handleBlur()},this.handleWindowClick=t=>{t.composedPath().includes(this.host)||this.host.closeDropdown()}}setupEventListeners(){window.addEventListener("click",this.handleWindowClick)}removeEventListeners(){window.removeEventListener("click",this.handleWindowClick)}hostDisconnected(){super.hostDisconnected(),this.removeEventListeners()}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var F=function(t,e,i,r){for(var s,o=arguments.length,n=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,i):r,a=t.length-1;a>=0;a--)(s=t[a])&&(n=(o<3?s(n):o>3?s(e,i,n):s(e,i))||n);return o>3&&n&&Object.defineProperty(e,i,n),n};let B=class extends(d(r)){constructor(){super(...arguments),this.requiredComponents=["nr-input","nr-icon"],this.options=[],this.placeholder="Select an option",this.disabled=!1,this.type=m.Default,this.multiple=!1,this.show=!1,this.status=f.Default,this.size=b.Medium,this.required=!1,this.name="",this.value="",this.noOptionsMessage="No options available",this.noOptionsIcon="info",this.searchable=!1,this.clearable=!1,this.searchPlaceholder="Search options...",this.searchQuery="",this.useCustomSelectedDisplay=!1,this.maxHeight="",this.block=!1,this.selectionController=new $(this),this.dropdownController=new D(this),this.keyboardController=new C(this,this.selectionController,this.dropdownController),this.focusController=new T(this),this.validationController=new R(this,this.selectionController),this.searchController=new L(this),this.eventController=new P(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleOptionClick=(t,e)=>{this.eventController.handleOptionClick(t,e)},this.handleTagRemove=(t,e)=>{this.eventController.handleTagRemove(t,e)},this.handleClearAll=t=>{this.eventController.handleClearAll(t)},this.handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this.handleFocus=()=>{this.eventController.handleFocus()},this.handleBlur=()=>{this.eventController.handleBlur()}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}willUpdate(t){super.willUpdate(t),(t.has("options")||t.has("value"))&&this.options.length>0&&this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&(this.selectionController._initialized=!1,this.selectionController.initializeFromValue())}firstUpdated(t){super.firstUpdated(t),this.optionsElement&&this.wrapper?this.dropdownController.setElements(this.optionsElement,this.wrapper):setTimeout(()=>{this.optionsElement&&this.wrapper&&this.dropdownController.setElements(this.optionsElement,this.wrapper)},100),this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&this.selectionController.initializeFromValue()}get selectedOptions(){return this.selectionController.getSelectedOptions()}get selectedOption(){return this.selectionController.getSelectedOption()}selectOption(t){this.selectionController.selectOption(t)}unselectOption(t){this.selectionController.unselectOption(t)}toggleOption(t){this.selectionController.toggleOption(t)}clearSelection(){this.selectionController.clearSelection()}isOptionSelected(t){return this.selectionController.isOptionSelected(t)}toggleDropdown(){this.dropdownController.toggle()}openDropdown(){this.dropdownController.open()}closeDropdown(){this.dropdownController.close()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}validate(){return this.validationController.validate()}checkValidity(){return this.validationController.checkValidity()}reportValidity(){return this.validationController.reportValidity()}setCustomValidity(t){this.validationController.setCustomValidity(t)}getValidationStatus(){return{isValid:this.validationController.checkValidity(),validationMessage:this.validationController.validationMessage||""}}get validationMessage(){return this.validationController.validationMessage||""}clearValidation(){this.validationController.setCustomValidity(""),this.status=f.Default}searchOptions(t){this.searchController.search(t)}clearSearch(){this.searchController.clearSearch()}getSearchFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}getCurrentSearchQuery(){return this.searchController.searchQuery}getSelectedOptions(){return this.selectedOptions}setupGlobalEventListeners(){this.eventController.setupEventListeners()}removeGlobalEventListeners(){this.eventController.removeEventListeners()}getFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}setupEventListeners(){this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){return i`${l(this.type,[[m.Default,()=>this.renderDefault()],[m.Inline,()=>this.renderInline()],[m.Button,()=>this.renderButton()],[m.Slot,()=>this.renderSlot()]])}`}renderDefault(){const t=this.selectedOptions,r=this.validationController.getValidationClasses();return i`
+      <slot name="label"></slot>
+      <div 
+        class="${c(Object.assign({wrapper:!0},r))}"
+        data-theme="${this.currentTheme}"
+        tabindex="0"
+        role="combobox"
+        aria-expanded="${this.show}"
+        aria-haspopup="listbox"
+        aria-labelledby="select-label"
+
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeyDown}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <div class="select">
+          <div class="select-trigger">
+            ${this.renderSelectedContent(t)}
+          </div>
+          
+          <div class="icons-container">
+            ${this.renderStatusIcon()}
+            ${this.renderClearButton(t)}
+            <nr-icon 
+              name="chevron-down" 
+              size="${this.size}"
+              class="arrow-icon"
+              aria-hidden="true"
+            ></nr-icon>
+          </div>
+          
+          <div
+            class="options"
+            role="listbox"
+            aria-multiselectable="${this.multiple}"
+            style=${this.maxHeight?h({"max-height":this.maxHeight}):e}
+            @click=${t=>t.stopPropagation()}
+          >
+            ${this.searchable?this.renderSearchInput():e}
+            <slot name="before-options"></slot>
+            ${this.renderSelectOptions()}
+            <slot name="after-options"></slot>
+          </div>
+        </div>
+      </div>
+      
+      ${this.renderValidationMessage()}
+      <slot name="helper-text"></slot>
+    `}renderInline(){return i`
+      <slot name="label"></slot>
+      ${this.renderDefault()}
+      <slot name="helper-text"></slot>
+    `}renderButton(){const t=this.selectedOptions;return i`
+      <button
+        class="select-button"
+        ?disabled=${this.disabled}
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleKeyDown}
+      >
+        ${t.length>0?t[0].label:this.placeholder}
+        <nr-icon name="chevron-down" class="arrow-icon"></nr-icon>
+      </button>
+      
+      <div
+        class="options"
+        role="listbox"
+        style=${this.maxHeight?h({"max-height":this.maxHeight}):e}
+        @click=${t=>t.stopPropagation()}
+      >
+        ${this.searchable?this.renderSearchInput():e}
+        <slot name="before-options"></slot>
+        ${this.renderSelectOptions()}
+        <slot name="after-options"></slot>
+      </div>
+    `}renderSlot(){return i`
+      <slot name="trigger" @click=${this.handleTriggerClick}></slot>
+      <div
+        class="options"
+        role="listbox"
+        style=${this.maxHeight?h({"max-height":this.maxHeight}):e}
+        @click=${t=>t.stopPropagation()}
+      >
+        ${this.searchable?this.renderSearchInput():e}
+        <slot name="before-options"></slot>
+        ${this.renderSelectOptions()}
+        <slot name="after-options"></slot>
+      </div>
+    `}renderSelectedContent(t){return 0===t.length?i`<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`:this.multiple?this.useCustomSelectedDisplay?i`<slot name="selected-display" .selectedOptions=${t}></slot>`:a(t,t=>i`
+        <span class="tag">
+          <span class="tag-label">${t.label}</span>
+          <nr-icon 
+            name="x"
+            size="${this.size}"
+            class="tag-close"
+            @click=${e=>this.handleTagRemove(e,t)}
+            aria-label="Remove ${t.label}"
+          ></nr-icon>
+        </span>
+      `):i`${t[0].label}`}renderStatusIcon(){switch(this.status){case f.Warning:return i`<nr-icon name="alert-triangle" size="${this.size}" class="status-icon warning"></nr-icon>`;case f.Error:return i`<nr-icon name="alert-circle" size="${this.size}" class="status-icon error"></nr-icon>`;case f.Success:return i`<nr-icon name="circle-check" size="${this.size}" class="status-icon success"></nr-icon>`;default:return e}}renderClearButton(t){return!this.clearable||0===t.length||this.disabled?e:i`
+      <nr-icon
+        name="x"
+        size="${this.size}"
+        class="clear-icon"
+        @click=${this.handleClearAll}
+        aria-label="Clear selection"
+        tabindex="-1"
+      ></nr-icon>
+    `}renderSelectOptions(){const t=this.getFilteredOptions();if(!this.options||0===this.options.length)return i`
+        <div class="no-options" role="option" aria-disabled="true">
+          <div class="no-options-content">
+            <nr-icon 
+              name="${this.noOptionsIcon}" 
+              class="no-options-icon"
+              aria-hidden="true">
+            </nr-icon>
+            <span class="no-options-text">${this.noOptionsMessage}</span>
+          </div>
+        </div>
+      `;if(this.searchController.hasNoResults(this.options))return this.searchController.renderNoResults();const r=this.keyboardController.focusedOption;return a(t,t=>{const s=this.isOptionSelected(t),o=r&&r.value===t.value;return i`
+        <div
+          class="${c({option:!0,selected:s,focused:o,disabled:Boolean(t.disabled)})}"
+          role="option"
+          aria-selected="${s}"
+          aria-disabled="${Boolean(t.disabled)}"
+          data-value="${t.value}"
+          @click=${e=>this.handleOptionClick(e,t)}
+          style=${h(t.style?{style:t.style}:{})}
+          title="${t.title||""}"
+        >
+          <div class="option-content">
+            ${t.icon?i`<nr-icon name="${t.icon}" size="${this.size}" class="option-icon"></nr-icon>`:e}
+            <div class="option-text">
+              ${t.htmlContent?i`<div>${u(t.htmlContent)}</div>`:t.label}
+              ${t.description?i`<div class="option-description">${t.description}</div>`:e}
+            </div>
+          </div>
+          
+          ${s?i`<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>`:e}
+          
+          ${t.state&&t.message?i`
+            <div class="option-message ${t.state}">
+              <nr-icon name="${"error"===t.state?"alert-circle":"alert-triangle"}" size="${this.size}"></nr-icon>
+              <span>${t.message}</span>
+            </div>
+          `:e}
+        </div>
+      `})}renderSearchInput(){return this.searchController.renderSearchInput()}renderValidationMessage(){return p(this.validationController.validationMessage,{statusClass:this.status})}};B.styles=g,F([s({type:Array})],B.prototype,"options",void 0),F([s({type:String})],B.prototype,"placeholder",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"disabled",void 0),F([s({type:String,reflect:!0})],B.prototype,"type",void 0),F([s({type:Boolean,attribute:"multiple"})],B.prototype,"multiple",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"show",void 0),F([s({type:String,reflect:!0})],B.prototype,"status",void 0),F([s({type:String,reflect:!0})],B.prototype,"size",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"required",void 0),F([s({type:String})],B.prototype,"name",void 0),F([s()],B.prototype,"value",void 0),F([s({type:String,attribute:"no-options-message"})],B.prototype,"noOptionsMessage",void 0),F([s({type:String,attribute:"no-options-icon"})],B.prototype,"noOptionsIcon",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"searchable",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"clearable",void 0),F([s({type:String,attribute:"search-placeholder"})],B.prototype,"searchPlaceholder",void 0),F([s({type:String})],B.prototype,"searchQuery",void 0),F([s({type:Boolean,attribute:"use-custom-selected-display"})],B.prototype,"useCustomSelectedDisplay",void 0),F([s({type:String,attribute:"max-height"})],B.prototype,"maxHeight",void 0),F([s({type:Boolean,reflect:!0})],B.prototype,"block",void 0),F([o(".options")],B.prototype,"optionsElement",void 0),F([o(".wrapper")],B.prototype,"wrapper",void 0),F([o(".search-input")],B.prototype,"searchInput",void 0),B=F([n("nr-select")],B);
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const _={CHANGE:"nr-change",FOCUS:"nr-focus",BLUR:"nr-blur",DROPDOWN_OPEN:"nr-dropdown-open",DROPDOWN_CLOSE:"nr-dropdown-close",VALIDATION:"nr-validation",ERROR:"nr-controller-error"},H={WRAPPER:"wrapper",SELECT:"select",TRIGGER:"select-trigger",OPTIONS:"options",OPTION:"option",SELECTED:"selected",FOCUSED:"focused",DISABLED:"disabled",TAG:"tag",TAG_LABEL:"tag-label",TAG_CLOSE:"tag-close",ICONS_CONTAINER:"icons-container",ARROW_ICON:"arrow-icon",CLEAR_ICON:"clear-icon",STATUS_ICON:"status-icon",CHECK_ICON:"check-icon",VALIDATION_MESSAGE:"validation-message",PLACEHOLDER:"placeholder",NO_OPTIONS:"no-options",NO_OPTIONS_CONTENT:"no-options-content",NO_OPTIONS_ICON:"no-options-icon",NO_OPTIONS_TEXT:"no-options-text",SEARCH_CONTAINER:"search-container",SEARCH_INPUT:"search-input",SEARCH_ICON:"search-icon",SEARCH_CLEAR:"search-clear"},V={COMBOBOX:"combobox",LISTBOX:"listbox",OPTION:"option",EXPANDED:"aria-expanded",HASPOPUP:"aria-haspopup",MULTISELECTABLE:"aria-multiselectable",SELECTED:"aria-selected",DISABLED:"aria-disabled",REQUIRED:"aria-required",INVALID:"aria-invalid",DESCRIBEDBY:"aria-describedby",LABELLEDBY:"aria-labelledby"},M={PLACEHOLDER:"Select an option",MAX_HEIGHT:"auto",DROPDOWN_OFFSET:4,TAG_MAX_WIDTH:"150px",TRANSITION_DURATION:200,DEBOUNCE_DELAY:300},U={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",HOME:"Home",END:"End",TAB:"Tab"},j="",G=", ";export{S as BaseSelectController,O as DropdownPlacement,j as EMPTY_STRING,B as HySelectComponent,G as MULTIPLE_OPTIONS_SEPARATOR,w as OptionSize,V as SELECT_ARIA,H as SELECT_CLASSES,M as SELECT_DEFAULTS,_ as SELECT_EVENTS,U as SELECT_KEYS,E as SearchMode,x as SelectDirection,D as SelectDropdownController,P as SelectEventController,T as SelectFocusController,C as SelectKeyboardController,L as SelectSearchController,$ as SelectSelectionController,b as SelectSize,f as SelectStatus,m as SelectType,R as SelectValidationController,z as SelectVariant};