@ctrliq/quantic-components 1.63.3 → 1.63.5

package/dist/quantic-components.min.js

@@ -626,7 +626,7 @@ const{I:Ze}=re,Ge=()=>document.createComment(""),Ne=(e,t,i)=>{const n=e._$AA.par
   <line x1="12" x2="12.01" y1="16" y2="16" />
 </svg>
 
-    `}},e.LucideIconCircleAlert.styles=Ue.styles,e.LucideIconCircleAlert=t([Ce("quantic-icon-lucide-circle-alert")],e.LucideIconCircleAlert),e.LucideIconChevronDown.ensureDefined(),e.LucideIconCircleAlert.ensureDefined(),e.Combobox=class extends(Si(fe)){constructor(){super(),this.listboxId=Ri("combobox-listbox"),this.value="",this.name="",this.placeholder="",this.options=[],this.size=$i.Medium,this.disabled=!1,this.required=!1,this.invalid=!1,this.emptyLabel="No results",this.allowCustomValue=!1,this._open=!1,this._inputValue="",this._activeIndex=-1,this._inputRef=ct(),this._listboxRef=ct(),this.internals=this.attachInternals()}updated(e){const t=e.has("value"),i=e.has("options"),n=e.has("allowCustomValue");if(t||n||i&&!this._open){const e=this.options.find(e=>e.value===this.value);e?this._inputValue=e.label:this.allowCustomValue?this._inputValue=this.value:this._inputValue=""}e.has("value")&&this.internals.setFormValue(this.value),(e.has("value")||e.has("required"))&&this.updateValidity(),e.has("options")&&this._open&&(this._activeIndex=-1),e.has("_activeIndex")&&this._activeIndex>=0&&this.shadowRoot?.querySelectorAll('[role="option"]')[this._activeIndex]?.scrollIntoView({block:"nearest"})}get filteredOptions(){if(!this._inputValue)return this.options;const e=this.filterFn??((e,t)=>e.label.toLowerCase().includes(t.toLowerCase()));return this.options.filter(t=>e(t,this._inputValue))}firstNavigableIndex(){return this.filteredOptions.findIndex(e=>!e.disabled)}lastNavigableIndex(){const e=this.filteredOptions;for(let t=e.length-1;t>=0;t--)if(!e[t].disabled)return t;return-1}nextNavigableIndex(e,t){const i=this.filteredOptions;let n=e+t;for(;n>=0&&n<i.length;){if(!i[n].disabled)return n;n+=t}return e}async openList(){this._open||this.disabled||(this._open=!0,this._activeIndex=-1,await this.updateComplete,this.positionListbox())}closeList(e=!1){if(this._open)if(this._open=!1,this._activeIndex=-1,this.cleanup?.(),this.cleanup=void 0,this.allowCustomValue&&e)this.commitCustomValue();else{const e=this.options.find(e=>e.value===this.value);this._inputValue=e?.label??(this.allowCustomValue?this.value:"")}}commitCustomValue(){const e=this._inputValue.trim();this._inputValue=e,e!==this.value&&(this.value=e,this.internals.setFormValue(e),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e},bubbles:!0,composed:!0})))}positionListbox(){const e=this._listboxRef.value;e&&(this.cleanup=Ii(this,e,async()=>{if(!e)return;const{x:t,y:i}=await qi(this,e,{placement:"bottom-start",middleware:[fi(4),bi(),Ci({padding:8})],strategy:"absolute"});Object.assign(e.style,{left:`${t}px`,top:`${i}px`,width:`${this.getBoundingClientRect().width}px`})}))}selectOption(e){this.value=e.value,this._inputValue=e.label,this.internals.setFormValue(e.value),this._open=!1,this._activeIndex=-1,this.cleanup?.(),this.cleanup=void 0,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})),this._inputRef.value?.focus()}handleInput(e){const t=e.target;this._inputValue=t.value,this._activeIndex=-1,this._open||this.openList(),this.dispatchEvent(new CustomEvent("input-changed",{detail:{value:this._inputValue},bubbles:!0,composed:!0}))}handleKeyDown(e){switch(e.key){case"ArrowDown":e.preventDefault(),this._open?this._activeIndex=this.nextNavigableIndex(this._activeIndex,1):this.openList().then(()=>{this._activeIndex=this.firstNavigableIndex()});break;case"ArrowUp":if(!this._open)return;e.preventDefault(),this._activeIndex=this.nextNavigableIndex(this._activeIndex,-1);break;case"Home":if(!this._open)return;e.preventDefault(),this._activeIndex=this.firstNavigableIndex();break;case"End":if(!this._open)return;e.preventDefault(),this._activeIndex=this.lastNavigableIndex();break;case"Enter":if(this._open&&this._activeIndex>=0){const t=this.filteredOptions[this._activeIndex];t&&!t.disabled&&(e.preventDefault(),this.selectOption(t))}else this.allowCustomValue&&this._inputValue.trim()&&(e.preventDefault(),this.closeList(!0),this.commitCustomValue());break;case"Escape":e.preventDefault(),this.closeList();break;case"Tab":this.closeList(!0)}}handleBlur(){this.closeList(!0),this.dispatchEvent(new Event("blur",{bubbles:!0,composed:!0}))}handleFocus(){this.dispatchEvent(new Event("focus",{bubbles:!0,composed:!0}))}handleChevronMouseDown(e){e.preventDefault(),this._open?this.closeList():(this._inputRef.value?.focus(),this.openList())}formResetCallback(){this.value="",this._inputValue="",this.internals.setFormValue("")}formStateRestoreCallback(e){this.value=e,this.internals.setFormValue(e);const t=this.options.find(t=>t.value===e);this._inputValue=t?.label??(this.allowCustomValue?e:"")}formDisabledCallback(e){this.disabled=e}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.()}updateValidity(){const e=this._inputRef.value;e&&this.internals.setValidity(e.validity,e.validationMessage,e)}get activeDescendant(){if(this._open&&!(this._activeIndex<0))return`${this.listboxId}-opt-${this._activeIndex}`}render(){const e=Oe({main:!0,[`size--${this.size}`]:!0}),t=Oe({listbox:!0,"is-open":this._open,[`size--${this.size}`]:!0}),i=this.getA11yAttributes({invalid:this.invalid}),n=this.filteredOptions;return Z`
+    `}},e.LucideIconCircleAlert.styles=Ue.styles,e.LucideIconCircleAlert=t([Ce("quantic-icon-lucide-circle-alert")],e.LucideIconCircleAlert),e.LucideIconChevronDown.ensureDefined(),e.LucideIconCircleAlert.ensureDefined(),e.Combobox=class extends(Si(fe)){constructor(){super(),this.listboxId=Ri("combobox-listbox"),this.value="",this.name="",this.placeholder="",this.options=[],this.size=$i.Medium,this.disabled=!1,this.required=!1,this.invalid=!1,this.emptyLabel="No results",this.allowCustomValue=!1,this._open=!1,this._inputValue="",this._activeIndex=-1,this._inputRef=ct(),this._listboxRef=ct(),this.internals=this.attachInternals()}updated(e){const t=e.has("value"),i=e.has("options"),n=e.has("allowCustomValue");if(t||n||i&&!this._open){const e=this.options.find(e=>e.value===this.value);e?this._inputValue=e.label:this.allowCustomValue?this._inputValue=this.value:this._inputValue=""}e.has("value")&&this.internals.setFormValue(this.value),(e.has("value")||e.has("required"))&&this.updateValidity(),e.has("options")&&this._open&&(this._activeIndex=-1),e.has("_activeIndex")&&this._activeIndex>=0&&this.shadowRoot?.querySelectorAll('[role="option"]')[this._activeIndex]?.scrollIntoView({block:"nearest"})}get filteredOptions(){if(!this._inputValue)return this.options;const e=this.filterFn??((e,t)=>e.label.toLowerCase().includes(t.toLowerCase()));return this.options.filter(t=>e(t,this._inputValue))}firstNavigableIndex(){return this.filteredOptions.findIndex(e=>!e.disabled)}lastNavigableIndex(){const e=this.filteredOptions;for(let t=e.length-1;t>=0;t--)if(!e[t].disabled)return t;return-1}nextNavigableIndex(e,t){const i=this.filteredOptions;let n=e+t;for(;n>=0&&n<i.length;){if(!i[n].disabled)return n;n+=t}return e}async openList(){this._open||this.disabled||(this._open=!0,this._activeIndex=-1,await this.updateComplete,this.positionListbox())}closeList(e=!1){if(this._open)if(this._open=!1,this._activeIndex=-1,this.cleanup?.(),this.cleanup=void 0,!e||!this.allowCustomValue&&this._inputValue.trim()){const e=this.options.find(e=>e.value===this.value);this._inputValue=e?.label??(this.allowCustomValue?this.value:"")}else this.commitInputValue()}commitInputValue(){const e=this._inputValue.trim();this._inputValue=e,e!==this.value&&(this.value=e,this.internals.setFormValue(e),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e},bubbles:!0,composed:!0})))}positionListbox(){const e=this._listboxRef.value;e&&(this.cleanup=Ii(this,e,async()=>{if(!e)return;const{x:t,y:i}=await qi(this,e,{placement:"bottom-start",middleware:[fi(4),bi(),Ci({padding:8})],strategy:"absolute"});Object.assign(e.style,{left:`${t}px`,top:`${i}px`,width:`${this.getBoundingClientRect().width}px`})}))}selectOption(e){this.value=e.value,this._inputValue=e.label,this.internals.setFormValue(e.value),this._open=!1,this._activeIndex=-1,this.cleanup?.(),this.cleanup=void 0,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})),this._inputRef.value?.focus()}handleInput(e){const t=e.target;this._inputValue=t.value,this._activeIndex=-1,this._open||this.openList(),this.dispatchEvent(new CustomEvent("input-changed",{detail:{value:this._inputValue},bubbles:!0,composed:!0}))}handleKeyDown(e){switch(e.key){case"ArrowDown":e.preventDefault(),this._open?this._activeIndex=this.nextNavigableIndex(this._activeIndex,1):this.openList().then(()=>{this._activeIndex=this.firstNavigableIndex()});break;case"ArrowUp":if(!this._open)return;e.preventDefault(),this._activeIndex=this.nextNavigableIndex(this._activeIndex,-1);break;case"Home":if(!this._open)return;e.preventDefault(),this._activeIndex=this.firstNavigableIndex();break;case"End":if(!this._open)return;e.preventDefault(),this._activeIndex=this.lastNavigableIndex();break;case"Enter":if(this._open&&this._activeIndex>=0){const t=this.filteredOptions[this._activeIndex];t&&!t.disabled&&(e.preventDefault(),this.selectOption(t))}else!this._open||!this.allowCustomValue&&this._inputValue.trim()||(e.preventDefault(),this.closeList(!0));break;case"Escape":e.preventDefault(),this.closeList();break;case"Tab":this.closeList(!0)}}handleBlur(){this.closeList(!0),this.dispatchEvent(new Event("blur",{bubbles:!0,composed:!0}))}handleFocus(){this.dispatchEvent(new Event("focus",{bubbles:!0,composed:!0}))}handleChevronMouseDown(e){e.preventDefault(),this._open?this.closeList():(this._inputRef.value?.focus(),this.openList())}formResetCallback(){this.value="",this._inputValue="",this.internals.setFormValue("")}formStateRestoreCallback(e){this.value=e,this.internals.setFormValue(e);const t=this.options.find(t=>t.value===e);this._inputValue=t?.label??(this.allowCustomValue?e:"")}formDisabledCallback(e){this.disabled=e}disconnectedCallback(){super.disconnectedCallback(),this.cleanup?.()}updateValidity(){const e=this._inputRef.value;e&&this.internals.setValidity(e.validity,e.validationMessage,e)}get activeDescendant(){if(this._open&&!(this._activeIndex<0))return`${this.listboxId}-opt-${this._activeIndex}`}render(){const e=Oe({main:!0,[`size--${this.size}`]:!0}),t=Oe({listbox:!0,"is-open":this._open,[`size--${this.size}`]:!0}),i=this.getA11yAttributes({invalid:this.invalid}),n=this.filteredOptions;return Z`
       <div class=${e}>
         <input
           ${at(this._inputRef)}
@@ -967,7 +967,7 @@ const{I:Ze}=re,Ge=()=>document.createComment(""),Ne=(e,t,i)=>{const n=e._$AA.par
       );
       color: var(--quantic-text-tertiary);
     }
-  `,t([Le({type:"string",default:"",reflect:!0,description:"Currently selected value submitted with the form."})],e.Combobox.prototype,"value",void 0),t([Le({type:"string",description:"Name submitted with form data."})],e.Combobox.prototype,"name",void 0),t([Le({type:"string",description:"Placeholder shown when no option is selected."})],e.Combobox.prototype,"placeholder",void 0),t([Le({type:"ComboboxOption[]",default:"[]",description:"Options to display. Each item must have a label (display text) and value (form value). Set this prop reactively to implement async/server-side filtering."})],e.Combobox.prototype,"options",void 0),t([Le({type:"ComboboxSize",options:Object.values($i),default:$i.Medium,description:"Controls padding and font size."})],e.Combobox.prototype,"size",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Prevents interaction."})],e.Combobox.prototype,"disabled",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Marks the field as required for form validation."})],e.Combobox.prototype,"required",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Applies error styling. Set alongside an error message in the parent quantic-combobox-field."})],e.Combobox.prototype,"invalid",void 0),t([Le({type:"string",default:"No results",description:"Text shown in the listbox when no options match the input."})],e.Combobox.prototype,"emptyLabel",void 0),t([Le({type:"boolean",default:"false",description:"When true, the user can type a value that does not match any option. The typed text is preserved on blur/Enter and surfaced through the value-changed event. When false (default), only values from the options list are accepted."})],e.Combobox.prototype,"allowCustomValue",void 0),t([Le({type:"(option: ComboboxOption, inputValue: string) => boolean",description:"Custom filter predicate. If omitted, defaults to case-insensitive substring match on option.label."})],e.Combobox.prototype,"filterFn",void 0),t([ve()],e.Combobox.prototype,"_open",void 0),t([ve()],e.Combobox.prototype,"_inputValue",void 0),t([ve()],e.Combobox.prototype,"_activeIndex",void 0),e.Combobox=t([Ie("value-changed",{description:"Fired when the user selects an option from the list, or commits a custom value when allowCustomValue is enabled.",detail:"{ value: string }"}),Ie("input-changed",{description:"Fired on every keystroke in the text field. Use to drive async filtering by updating the options prop in response.",detail:"{ value: string }"}),Ie("focus",{forwarded:!0}),Ie("blur",{forwarded:!0}),Ce("quantic-combobox")],e.Combobox);const _i=Bi,Ei={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"};e.Badge=class extends fe{constructor(){super(...arguments),this.color=_i.Brand,this.size=Ei.Medium,this.rounded=!1,this.icon=!1}render(){const e=Oe({main:!0,[`size--${this.size}`]:!0,[`color--${this.color}`]:!0,icon:this.icon,rounded:this.rounded});return je`
+  `,t([Le({type:"string",default:"",reflect:!0,description:"Currently selected value submitted with the form."})],e.Combobox.prototype,"value",void 0),t([Le({type:"string",description:"Name submitted with form data."})],e.Combobox.prototype,"name",void 0),t([Le({type:"string",description:"Placeholder shown when no option is selected."})],e.Combobox.prototype,"placeholder",void 0),t([Le({type:"ComboboxOption[]",default:"[]",description:"Options to display. Each item must have a label (display text) and value (form value). Set this prop reactively to implement async/server-side filtering."})],e.Combobox.prototype,"options",void 0),t([Le({type:"ComboboxSize",options:Object.values($i),default:$i.Medium,description:"Controls padding and font size."})],e.Combobox.prototype,"size",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Prevents interaction."})],e.Combobox.prototype,"disabled",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Marks the field as required for form validation."})],e.Combobox.prototype,"required",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Applies error styling. Set alongside an error message in the parent quantic-combobox-field."})],e.Combobox.prototype,"invalid",void 0),t([Le({type:"string",default:"No results",description:"Text shown in the listbox when no options match the input."})],e.Combobox.prototype,"emptyLabel",void 0),t([Le({type:"boolean",default:"false",description:"When true, the user can type a value that does not match any option. The typed text is preserved on blur/Enter and surfaced through the value-changed event. When false (default), only values from the options list are accepted."})],e.Combobox.prototype,"allowCustomValue",void 0),t([Le({type:"(option: ComboboxOption, inputValue: string) => boolean",description:"Custom filter predicate. If omitted, defaults to case-insensitive substring match on option.label."})],e.Combobox.prototype,"filterFn",void 0),t([ve()],e.Combobox.prototype,"_open",void 0),t([ve()],e.Combobox.prototype,"_inputValue",void 0),t([ve()],e.Combobox.prototype,"_activeIndex",void 0),e.Combobox=t([Ie("value-changed",{description:"Fired when the user selects an option from the list, clears the field, or commits a custom value when allowCustomValue is enabled.",detail:"{ value: string }"}),Ie("input-changed",{description:"Fired on every keystroke in the text field. Use to drive async filtering by updating the options prop in response.",detail:"{ value: string }"}),Ie("focus",{forwarded:!0}),Ie("blur",{forwarded:!0}),Ce("quantic-combobox")],e.Combobox);const _i=Bi,Ei={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"};e.Badge=class extends fe{constructor(){super(...arguments),this.color=_i.Brand,this.size=Ei.Medium,this.rounded=!1,this.icon=!1}render(){const e=Oe({main:!0,[`size--${this.size}`]:!0,[`color--${this.color}`]:!0,icon:this.icon,rounded:this.rounded});return je`
       <div class=${e}>
         <slot name="before" data-description="Content before the label (e.g. icon)."></slot>
         <slot data-description="Badge label text or icon."></slot>
@@ -38985,7 +38985,7 @@ const Qn="important",Yn=" !"+Qn,eo=Fe(class extends Re{constructor(e){if(super(e
       display: table-footer-group;
       border-top: 1px solid var(--quantic-component-table-border-color);
     }
-  `,t([Le({type:"string",default:"rowgroup",reflect:!0,description:"ARIA role for the footer row group."})],e.TableFooter.prototype,"role",void 0),e.TableFooter=t([Ce("quantic-table-footer")],e.TableFooter);const ss={Horizontal:"horizontal",Vertical:"vertical"},cs={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"},rs="tabs.id",ls="tabs.size",as="tabs.orientation",ds="tabs.selectedIndex";e.Tabs=class extends fe{constructor(){super(...arguments),this.size=cs.Medium,this.orientation=ss.Horizontal,this.selectedIndex=0,this.id=""}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-selected",this._onTabSelect),this.id||(this.id=`tabs-${Math.random().toString(36).substring(2,9)}`)}firstUpdated(){this._assignSlots();const e=this.shadowRoot.querySelector('slot[name="buttons"]'),t=this.shadowRoot.querySelector('slot[name="panels"]');e?.addEventListener("slotchange",this._assignSlots),t?.addEventListener("slotchange",()=>{this._assignSlots(),this.requestUpdate()})}_assignSlots(){Array.from(this.children).filter(e=>e instanceof HTMLElement).forEach(e=>{const t=e.tagName.toLowerCase();"quantic-tab-button"===t&&(e.slot="buttons"),"quantic-tab-panel"===t&&(e.slot="panels")})}_onTabSelect(e){e.target.closest("quantic-tabs")===this&&(this.selectedIndex=e.detail.index)}render(){const e=Oe({main:!0,[`orientation--${this.orientation}`]:!0}),t=Oe({panels:!0,"panels--hidden":0===this._panelElements.length});return Z`
+  `,t([Le({type:"string",default:"rowgroup",reflect:!0,description:"ARIA role for the footer row group."})],e.TableFooter.prototype,"role",void 0),e.TableFooter=t([Ce("quantic-table-footer")],e.TableFooter);const ss={Horizontal:"horizontal",Vertical:"vertical"},cs={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"},rs="tabs.id",ls="tabs.size",as="tabs.orientation",ds="tabs.selectedIndex";e.Tabs=class extends fe{constructor(){super(...arguments),this.size=cs.Medium,this.orientation=ss.Horizontal,this.selectedIndex=0,this.id=""}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-selected",this._onTabSelect),this.id||(this.id=`tabs-${Math.random().toString(36).substring(2,9)}`)}firstUpdated(){this._assignSlots();const e=this.shadowRoot.querySelector('slot[name="buttons"]'),t=this.shadowRoot.querySelector('slot[name="panels"]');e?.addEventListener("slotchange",this._assignSlots),t?.addEventListener("slotchange",()=>{this._assignSlots(),this.requestUpdate()})}_assignSlots(){Array.from(this.children).filter(e=>e instanceof HTMLElement).forEach(e=>{const t=e.tagName.toLowerCase();"quantic-tab-button"===t&&(e.slot="buttons"),"quantic-tab-panel"===t&&(e.slot="panels")})}_onTabSelect(e){e.target.closest("quantic-tabs")===this&&(e.stopPropagation(),this.selectedIndex=e.detail.index)}render(){const e=Oe({main:!0,[`orientation--${this.orientation}`]:!0}),t=Oe({panels:!0,"panels--hidden":0===this._panelElements.length});return Z`
       <div class=${e}>
         <div class="buttons" role="tablist"><slot name="buttons"></slot></div>
         <div class=${t}><slot name="panels"></slot></div>