@kodaris/krubble-components 1.0.12 → 1.0.13

package/dist/krubble.bundled.min.js

@@ -1156,7 +1156,7 @@ const qe="important",Be=" !"+qe,Ue=ke(class extends xe{constructor(e){if(super(e
       :host([active]) {
         display: block;
       }
-    `],Fe([pe({type:String,reflect:!0})],We.prototype,"id",void 0),Fe([pe({type:String})],We.prototype,"title",void 0),Fe([pe({type:String})],We.prototype,"badge",void 0),Fe([pe({type:String,attribute:"badge-background"})],We.prototype,"badgeBackground",void 0),Fe([pe({type:String,attribute:"badge-color"})],We.prototype,"badgeColor",void 0),Fe([pe({type:Boolean})],We.prototype,"disabled",void 0),Fe([pe({type:Boolean})],We.prototype,"dismissible",void 0),Fe([pe({type:Boolean,reflect:!0})],We.prototype,"active",void 0),We=Fe([de("kr-tab")],We);var Ke=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};const Ze=['"',"+","-","&&","||","!","(",")","{","}","[","]","^","~","*","?",":"],Xe=['\\"',"\\+","\\-","\\&\\&","\\|\\|","\\!","\\(","\\)","\\{","\\}","\\[","\\]","\\^","\\~","\\*","\\?","\\:"];function Qe(e){let t=e;for(let e=0;e<Ze.length;e++)t=t.split(Ze[e]).join(Xe[e]);return t}let Ye=class extends ne{constructor(){super(...arguments),this._scrollStyle="overlay",this._data=[],this._dataState="idle",this._page=1,this._pageSize=50,this._totalItems=0,this._totalPages=0,this._searchQuery="",this._canScrollLeft=!1,this._canScrollRight=!1,this._canScrollHorizontal=!1,this._columnPickerOpen=!1,this._displayedColumns=[],this._widthsLocked=!1,this._resizing=null,this._resizeObserver=null,this._searchPositionLocked=!1,this._def={columns:[]},this.def={columns:[]},this._handleClickOutsideColumnPicker=e=>{if(!this._columnPickerOpen)return;const t=e.composedPath(),i=this.shadowRoot?.querySelector(".column-picker-wrapper");i&&!t.includes(i)&&(this._columnPickerOpen=!1)},this._handleResizeMove=e=>{if(!this._resizing)return;const t=this._def.columns.find(e=>e.id===this._resizing.columnId);if(t){const i=this._resizing.startWidth+(e.clientX-this._resizing.startX);t.width=`${Math.min(900,Math.max(50,i))}px`,this.requestUpdate()}},this._handleResizeEnd=()=>{this._resizing=null,document.removeEventListener("mousemove",this._handleResizeMove),document.removeEventListener("mouseup",this._handleResizeEnd)}}connectedCallback(){super.connectedCallback(),this.classList.toggle("kr-table--scroll-overlay","overlay"===this._scrollStyle),this.classList.toggle("kr-table--scroll-edge","edge"===this._scrollStyle),this._fetch(),this._initRefresh(),document.addEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver=new ResizeObserver(()=>{this._searchPositionLocked=!1,this._updateSearchPosition()}),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._refreshTimer),document.removeEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver?.disconnect()}willUpdate(e){e.has("def")&&(this._def={...this.def,columns:this.def.columns.map(e=>"actions"===e.type?{...e,sticky:"right",resizable:!1}:{...e})},this._displayedColumns=this._def.displayedColumns||this._def.columns.map(e=>e.id),this._widthsLocked=!1,this.classList.remove("kr-table--widths-locked"),this._fetch(),this._initRefresh())}updated(e){this._updateScrollFlags()}refresh(){this._fetch()}goToPrevPage(){this._page>1&&(this._page--,this._fetch())}goToNextPage(){this._page<this._totalPages&&(this._page++,this._fetch())}goToPage(e){e>=1&&e<=this._totalPages&&(this._page=e,this._fetch())}_fetch(){if(!this._def.dataSource)return;let e;switch(this._dataState="loading",this._def.dataSource.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":throw Error("DB not supported yet");default:e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&e.queryFields.push({name:"_text_",operation:"IS",value:Qe(this._searchQuery)})}this._def.dataSource.fetch(e).then(e=>{switch(this._def.dataSource?.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":throw Error("DB not supported yet");default:{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size}}this._dataState="success",this._updateSearchPosition(),this._widthsLocked||this._lockColumnWidths()}).catch(e=>{this._dataState="error",Ie.show({message:e instanceof Error?e.message:"Failed to load data",type:"error"})})}_initRefresh(){clearInterval(this._refreshTimer),this._def.refreshInterval&&this._def.refreshInterval>0&&(this._refreshTimer=window.setInterval(()=>{this._fetch()},this._def.refreshInterval))}_handleSearch(e){const t=e.target;this._searchQuery=t.value,this._page=1,this._fetch()}_lockColumnWidths(){this.getDisplayedColumns().forEach(e=>{e.width||(e.width="180px")}),this._widthsLocked=!0,this.classList.add("kr-table--widths-locked"),this.requestUpdate()}_updateSearchPosition(){if(this._searchPositionLocked)return;const e=this.shadowRoot?.querySelector(".search"),t=e?.querySelector(".search-field");e&&t&&(e.style.justifyContent="center",t.style.marginLeft="",requestAnimationFrame(()=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect().left-i.left;e.style.justifyContent="flex-start",t.style.marginLeft=`${o}px`,this._searchPositionLocked=!0}))}_toggleColumnPicker(){this._columnPickerOpen=!this._columnPickerOpen}_toggleColumn(e){this._displayedColumns.includes(e)?this._displayedColumns=this._displayedColumns.filter(t=>t!==e):this._displayedColumns=[...this._displayedColumns,e]}getDisplayedColumns(){return this._displayedColumns.map(e=>this._def.columns.find(t=>t.id===e)).sort((e,t)=>"actions"===e.type&&"actions"!==t.type?1:"actions"!==e.type&&"actions"===t.type?-1:0)}_handleScroll(e){const t=e.target;this._canScrollLeft=t.scrollLeft>0,this._canScrollRight=t.scrollLeft<t.scrollWidth-t.clientWidth-1}_updateScrollFlags(){const e=this.shadowRoot?.querySelector(".content");e&&(this._canScrollLeft=e.scrollLeft>0,this._canScrollRight=e.scrollWidth>e.clientWidth&&e.scrollLeft<e.scrollWidth-e.clientWidth-1,this._canScrollHorizontal=e.scrollWidth>e.clientWidth),this.classList.toggle("kr-table--scroll-left-available",this._canScrollLeft),this.classList.toggle("kr-table--scroll-right-available",this._canScrollRight),this.classList.toggle("kr-table--scroll-horizontal-available",this._canScrollHorizontal),this.classList.toggle("kr-table--sticky-left",this.getDisplayedColumns().some(e=>"left"===e.sticky)),this.classList.toggle("kr-table--sticky-right",this.getDisplayedColumns().some(e=>"right"===e.sticky))}_handleResizeStart(e,t){e.preventDefault();const i=this.shadowRoot?.querySelector(`.header-cell[data-column-id="${t}"]`);this._resizing={columnId:t,startX:e.clientX,startWidth:i?.offsetWidth||200},document.addEventListener("mousemove",this._handleResizeMove),document.addEventListener("mouseup",this._handleResizeEnd)}_handleAction(e){this.dispatchEvent(new CustomEvent("action",{detail:{action:e.id},bubbles:!0,composed:!0}))}_renderCellContent(e,t){const i=t[e.id];if(e.render){const i=e.render(t);return"string"==typeof i?Oe(i):i}if(null==i)return"";switch(e.type){case"number":return"number"==typeof i?i.toLocaleString():String(i);case"currency":return"number"==typeof i?i.toLocaleString("en-US",{style:"currency",currency:"USD"}):String(i);case"date":return i instanceof Date?i.toLocaleDateString():new Date(i).toLocaleDateString();case"boolean":return!0===i?"Yes":!1===i?"No":"";default:return String(i)}}_getHeaderCellClasses(e,t){return{"header-cell":!0,"header-cell--align-center":"center"===e.align,"header-cell--align-right":"right"===e.align,"header-cell--sticky-left":"left"===e.sticky,"header-cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"header-cell--sticky-right":"right"===e.sticky,"header-cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellClasses(e,t){return{cell:!0,"cell--actions":"actions"===e.type,"cell--align-center":"center"===e.align,"cell--align-right":"right"===e.align,"cell--sticky-left":"left"===e.sticky,"cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"cell--sticky-right":"right"===e.sticky,"cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellStyle(e,t){const i={};if("left"===e.sticky){let e=0;for(let i=0;i<t;i++){const t=this.getDisplayedColumns()[i];"left"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.left=`${e}px`}if("right"===e.sticky){let e=0;for(let i=t+1;i<this.getDisplayedColumns().length;i++){const t=this.getDisplayedColumns()[i];"right"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.right=`${e}px`}return i}_renderPagination(){const e=(this._page-1)*this._pageSize+1,t=Math.min(this._page*this._pageSize,this._totalItems);return U`
+    `],Fe([pe({type:String,reflect:!0})],We.prototype,"id",void 0),Fe([pe({type:String})],We.prototype,"title",void 0),Fe([pe({type:String})],We.prototype,"badge",void 0),Fe([pe({type:String,attribute:"badge-background"})],We.prototype,"badgeBackground",void 0),Fe([pe({type:String,attribute:"badge-color"})],We.prototype,"badgeColor",void 0),Fe([pe({type:Boolean})],We.prototype,"disabled",void 0),Fe([pe({type:Boolean})],We.prototype,"dismissible",void 0),Fe([pe({type:Boolean,reflect:!0})],We.prototype,"active",void 0),We=Fe([de("kr-tab")],We);var Ke=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};const Ze=['"',"+","-","&&","||","!","(",")","{","}","[","]","^","~","*","?",":"],Xe=['\\"',"\\+","\\-","\\&\\&","\\|\\|","\\!","\\(","\\)","\\{","\\}","\\[","\\]","\\^","\\~","\\*","\\?","\\:"];function Qe(e){let t=e;for(let e=0;e<Ze.length;e++)t=t.split(Ze[e]).join(Xe[e]);return t}let Ye=class extends ne{constructor(){super(...arguments),this._scrollStyle="overlay",this._data=[],this._dataState="idle",this._page=1,this._pageSize=50,this._totalItems=0,this._totalPages=0,this._searchQuery="",this._canScrollLeft=!1,this._canScrollRight=!1,this._canScrollHorizontal=!1,this._columnPickerOpen=!1,this._displayedColumns=[],this._resizing=null,this._resizeObserver=null,this._searchPositionLocked=!1,this._def={columns:[]},this.def={columns:[]},this._handleClickOutsideColumnPicker=e=>{if(!this._columnPickerOpen)return;const t=e.composedPath(),i=this.shadowRoot?.querySelector(".column-picker-wrapper");i&&!t.includes(i)&&(this._columnPickerOpen=!1)},this._handleResizeMove=e=>{if(!this._resizing)return;const t=this._def.columns.find(e=>e.id===this._resizing.columnId);if(t){const i=this._resizing.startWidth+(e.clientX-this._resizing.startX);t.width=`${Math.min(900,Math.max(50,i))}px`,this.requestUpdate()}},this._handleResizeEnd=()=>{this._resizing=null,document.removeEventListener("mousemove",this._handleResizeMove),document.removeEventListener("mouseup",this._handleResizeEnd)}}connectedCallback(){super.connectedCallback(),this.classList.toggle("kr-table--scroll-overlay","overlay"===this._scrollStyle),this.classList.toggle("kr-table--scroll-edge","edge"===this._scrollStyle),this._fetch(),this._initRefresh(),document.addEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver=new ResizeObserver(()=>{this._searchPositionLocked=!1,this._updateSearchPosition()}),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._refreshTimer),document.removeEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver?.disconnect()}willUpdate(e){e.has("def")&&(this._def={...this.def,columns:this.def.columns.map(e=>"actions"===e.type?{...e,sticky:"right",resizable:!1}:{...e})},this._displayedColumns=this._def.displayedColumns||this._def.columns.map(e=>e.id),this._fetch(),this._initRefresh())}updated(e){this._updateScrollFlags()}refresh(){this._fetch()}goToPrevPage(){this._page>1&&(this._page--,this._fetch())}goToNextPage(){this._page<this._totalPages&&(this._page++,this._fetch())}goToPage(e){e>=1&&e<=this._totalPages&&(this._page=e,this._fetch())}_fetch(){if(!this._def.dataSource)return;let e;switch(this._dataState="loading",this._def.dataSource.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":throw Error("DB not supported yet");default:e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&e.queryFields.push({name:"_text_",operation:"IS",value:Qe(this._searchQuery)})}this._def.dataSource.fetch(e).then(e=>{switch(this._def.dataSource?.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":throw Error("DB not supported yet");default:{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size}}this._dataState="success",this._updateSearchPosition()}).catch(e=>{this._dataState="error",Ie.show({message:e instanceof Error?e.message:"Failed to load data",type:"error"})})}_initRefresh(){clearInterval(this._refreshTimer),this._def.refreshInterval&&this._def.refreshInterval>0&&(this._refreshTimer=window.setInterval(()=>{this._fetch()},this._def.refreshInterval))}_handleSearch(e){const t=e.target;this._searchQuery=t.value,this._page=1,this._fetch()}_getGridTemplateColumns(){return this.getDisplayedColumns().map(e=>e.width?e.width:"actions"===e.type?"max-content":"minmax(80px, auto)").join(" ")}_updateSearchPosition(){if(this._searchPositionLocked)return;const e=this.shadowRoot?.querySelector(".search"),t=e?.querySelector(".search-field");e&&t&&(e.style.justifyContent="center",t.style.marginLeft="",requestAnimationFrame(()=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect().left-i.left;e.style.justifyContent="flex-start",t.style.marginLeft=`${o}px`,this._searchPositionLocked=!0}))}_toggleColumnPicker(){this._columnPickerOpen=!this._columnPickerOpen}_toggleColumn(e){this._displayedColumns.includes(e)?this._displayedColumns=this._displayedColumns.filter(t=>t!==e):this._displayedColumns=[...this._displayedColumns,e]}getDisplayedColumns(){return this._displayedColumns.map(e=>this._def.columns.find(t=>t.id===e)).sort((e,t)=>"actions"===e.type&&"actions"!==t.type?1:"actions"!==e.type&&"actions"===t.type?-1:0)}_handleScroll(e){const t=e.target;this._canScrollLeft=t.scrollLeft>0,this._canScrollRight=t.scrollLeft<t.scrollWidth-t.clientWidth-1}_updateScrollFlags(){const e=this.shadowRoot?.querySelector(".content");e&&(this._canScrollLeft=e.scrollLeft>0,this._canScrollRight=e.scrollWidth>e.clientWidth&&e.scrollLeft<e.scrollWidth-e.clientWidth-1,this._canScrollHorizontal=e.scrollWidth>e.clientWidth),this.classList.toggle("kr-table--scroll-left-available",this._canScrollLeft),this.classList.toggle("kr-table--scroll-right-available",this._canScrollRight),this.classList.toggle("kr-table--scroll-horizontal-available",this._canScrollHorizontal),this.classList.toggle("kr-table--sticky-left",this.getDisplayedColumns().some(e=>"left"===e.sticky)),this.classList.toggle("kr-table--sticky-right",this.getDisplayedColumns().some(e=>"right"===e.sticky))}_handleResizeStart(e,t){e.preventDefault();const i=this.shadowRoot?.querySelector(`.header-cell[data-column-id="${t}"]`);this._resizing={columnId:t,startX:e.clientX,startWidth:i?.offsetWidth||200},document.addEventListener("mousemove",this._handleResizeMove),document.addEventListener("mouseup",this._handleResizeEnd)}_handleAction(e){this.dispatchEvent(new CustomEvent("action",{detail:{action:e.id},bubbles:!0,composed:!0}))}_renderCellContent(e,t){const i=t[e.id];if(e.render){const i=e.render(t);return"string"==typeof i?Oe(i):i}if(null==i)return"";switch(e.type){case"number":return"number"==typeof i?i.toLocaleString():String(i);case"currency":return"number"==typeof i?i.toLocaleString("en-US",{style:"currency",currency:"USD"}):String(i);case"date":return i instanceof Date?i.toLocaleDateString():new Date(i).toLocaleDateString();case"boolean":return!0===i?"Yes":!1===i?"No":"";default:return String(i)}}_getHeaderCellClasses(e,t){return{"header-cell":!0,"header-cell--align-center":"center"===e.align,"header-cell--align-right":"right"===e.align,"header-cell--sticky-left":"left"===e.sticky,"header-cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"header-cell--sticky-right":"right"===e.sticky,"header-cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellClasses(e,t){return{cell:!0,"cell--actions":"actions"===e.type,"cell--align-center":"center"===e.align,"cell--align-right":"right"===e.align,"cell--sticky-left":"left"===e.sticky,"cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"cell--sticky-right":"right"===e.sticky,"cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellStyle(e,t){const i={};if("left"===e.sticky){let e=0;for(let i=0;i<t;i++){const t=this.getDisplayedColumns()[i];"left"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.left=`${e}px`}if("right"===e.sticky){let e=0;for(let i=t+1;i<this.getDisplayedColumns().length;i++){const t=this.getDisplayedColumns()[i];"right"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.right=`${e}px`}return i}_renderPagination(){const e=(this._page-1)*this._pageSize+1,t=Math.min(this._page*this._pageSize,this._totalItems);return U`
       <div class="pagination">
         <span
           class="pagination-icon ${1===this._page?"pagination-icon--disabled":""}"
@@ -1231,7 +1231,7 @@ const qe="important",Be=" !"+qe,Ue=ke(class extends xe{constructor(e){if(super(e
           `:V}
         </div>
       </div>
-    `}_renderStatus(){return"loading"===this._dataState&&0===this._data.length?U`<div class="status">Loading...</div>`:"error"===this._dataState&&0===this._data.length?U`<div class="status status--error">Error loading data</div>`:0===this._data.length?U`<div class="status">No data available</div>`:V}_getGridTemplateColumns(){const e=this.getDisplayedColumns(),t=e.map((e,t)=>e.sticky?-1:t).filter(e=>e>=0).pop();return e.map((e,i)=>i===t&&this._widthsLocked?`minmax(${e.width||"auto"}, 1fr)`:e.width||"auto").join(" ")}_renderTable(){return U`
+    `}_renderStatus(){return"loading"===this._dataState&&0===this._data.length?U`<div class="status">Loading...</div>`:"error"===this._dataState&&0===this._data.length?U`<div class="status status--error">Error loading data</div>`:0===this._data.length?U`<div class="status">No data available</div>`:V}_renderTable(){return U`
       <div class="wrapper">
         <div class="overlay-left"></div>
         <div class="overlay-right"></div>
@@ -1889,7 +1889,7 @@ const Ge=e=>e??V,Je={},et=ke(class extends xe{constructor(e){if(super(e),e.type!
       font-size: 0.75rem;
       color: var(--kr-text-field-helper-color, #6b7280);
     }
-  `,it.formAssociated=!0,tt([pe({type:String})],it.prototype,"label",void 0),tt([pe({type:String})],it.prototype,"name",void 0),tt([pe({type:String})],it.prototype,"value",void 0),tt([pe({type:String})],it.prototype,"placeholder",void 0),tt([pe({type:String})],it.prototype,"type",void 0),tt([pe({type:Boolean})],it.prototype,"required",void 0),tt([pe({type:Boolean})],it.prototype,"disabled",void 0),tt([pe({type:Boolean})],it.prototype,"readonly",void 0),tt([pe({type:Number})],it.prototype,"minlength",void 0),tt([pe({type:Number})],it.prototype,"maxlength",void 0),tt([pe({type:String})],it.prototype,"pattern",void 0),tt([pe({type:String})],it.prototype,"autocomplete",void 0),tt([pe({type:String})],it.prototype,"hint",void 0),tt([ge("input")],it.prototype,"_input",void 0),tt([ue()],it.prototype,"_touched",void 0),tt([ue()],it.prototype,"_dirty",void 0),it=tt([de("kr-text-field")],it);var ot=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let st=class extends ne{constructor(){super(),this.label="",this.name="",this.value="",this.placeholder="Select an option",this.disabled=!1,this.required=!1,this.readonly=!1,this.hint="",this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._close()},this._handleKeyDown=e=>{if(!this._isOpen)return;const t=Array.from(this.querySelectorAll("kr-select-option"));switch(e.key){case"Escape":this._close(),this._triggerElement?.focus();break;case"ArrowDown":if(e.preventDefault(),t.some(e=>!e.disabled)){let e=this._highlightedIndex+1;for(;e<t.length&&t[e]?.disabled;)e++;e<t.length&&(this._highlightedIndex=e)}break;case"ArrowUp":e.preventDefault();{let e=this._highlightedIndex-1;for(;e>=0&&t[e]?.disabled;)e--;e>=0&&(this._highlightedIndex=e)}break;case"Enter":e.preventDefault(),this._highlightedIndex>=0&&this._highlightedIndex<t.length&&this._selectOption(t[this._highlightedIndex])}},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value="",this._touched=!1,this._internals.setFormValue(""),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick),document.addEventListener("keydown",this._handleKeyDown),this.addEventListener("invalid",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has("required")||e.has("value"))&&this._updateValidity()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),document.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("invalid",this._handleInvalid)}_toggle(){if(!this.disabled&&!this.readonly)if(this._isOpen)this._close();else{this._isOpen=!0;const e=Array.from(this.querySelectorAll("kr-select-option"));this._highlightedIndex=e.findIndex(e=>e.value===this.value)}}_close(){this._isOpen=!1,this._highlightedIndex=-1}_selectOption(e){e.disabled||(this.value=e.value,this._internals.setFormValue(this.value),this._updateValidity(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this._close(),this._triggerElement?.focus())}_handleBlur(){this._touched=!0,this._updateValidity()}_updateValidity(){this.required&&!this.value?this._internals.setValidity({valueMissing:!0},"Please select an option",this._triggerElement):this._internals.setValidity({})}render(){const e=Array.from(this.querySelectorAll("kr-select-option")),t=e.find(e=>e.value===this.value)?.label;return U`
+  `,it.formAssociated=!0,tt([pe({type:String})],it.prototype,"label",void 0),tt([pe({type:String})],it.prototype,"name",void 0),tt([pe({type:String})],it.prototype,"value",void 0),tt([pe({type:String})],it.prototype,"placeholder",void 0),tt([pe({type:String})],it.prototype,"type",void 0),tt([pe({type:Boolean})],it.prototype,"required",void 0),tt([pe({type:Boolean})],it.prototype,"disabled",void 0),tt([pe({type:Boolean})],it.prototype,"readonly",void 0),tt([pe({type:Number})],it.prototype,"minlength",void 0),tt([pe({type:Number})],it.prototype,"maxlength",void 0),tt([pe({type:String})],it.prototype,"pattern",void 0),tt([pe({type:String})],it.prototype,"autocomplete",void 0),tt([pe({type:String})],it.prototype,"hint",void 0),tt([ge("input")],it.prototype,"_input",void 0),tt([ue()],it.prototype,"_touched",void 0),tt([ue()],it.prototype,"_dirty",void 0),it=tt([de("kr-text-field")],it);var ot=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let st=class extends ne{constructor(){super(),this.label="",this.name="",this.value="",this.placeholder="Select an option",this.disabled=!1,this.required=!1,this.readonly=!1,this.hint="",this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._handleOutsideClick=e=>{e.composedPath().includes(this)||this._close()},this._handleKeyDown=e=>{if(!this._isOpen)return;const t=Array.from(this.querySelectorAll("kr-select-field-option"));switch(e.key){case"Escape":this._close(),this._triggerElement?.focus();break;case"ArrowDown":if(e.preventDefault(),t.some(e=>!e.disabled)){let e=this._highlightedIndex+1;for(;e<t.length&&t[e]?.disabled;)e++;e<t.length&&(this._highlightedIndex=e)}break;case"ArrowUp":e.preventDefault();{let e=this._highlightedIndex-1;for(;e>=0&&t[e]?.disabled;)e--;e>=0&&(this._highlightedIndex=e)}break;case"Enter":e.preventDefault(),this._highlightedIndex>=0&&this._highlightedIndex<t.length&&this._selectOption(t[this._highlightedIndex])}},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value="",this._touched=!1,this._internals.setFormValue(""),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick),document.addEventListener("keydown",this._handleKeyDown),this.addEventListener("invalid",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has("required")||e.has("value"))&&this._updateValidity()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),document.removeEventListener("keydown",this._handleKeyDown),this.removeEventListener("invalid",this._handleInvalid)}_toggle(){if(!this.disabled&&!this.readonly)if(this._isOpen)this._close();else{this._isOpen=!0;const e=Array.from(this.querySelectorAll("kr-select-field-option"));this._highlightedIndex=e.findIndex(e=>e.value===this.value)}}_close(){this._isOpen=!1,this._highlightedIndex=-1}_selectOption(e){e.disabled||(this.value=e.value,this._internals.setFormValue(this.value),this._updateValidity(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this._close(),this._triggerElement?.focus())}_handleBlur(){this._touched=!0,this._updateValidity()}_updateValidity(){this.required&&!this.value?this._internals.setValidity({valueMissing:!0},"Please select an option",this._triggerElement):this._internals.setValidity({})}render(){const e=Array.from(this.querySelectorAll("kr-select-field-option")),t=e.find(e=>e.value===this.value)?.label;return U`
       <div class="wrapper">
         ${this.label?U`
               <label>
@@ -2065,32 +2065,32 @@ const Ge=e=>e??V,Je={},et=ke(class extends xe{constructor(e){if(super(e),e.type!
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       font-size: 14px;
-      color: var(--kr-select-option-color, #111827);
+      color: var(--kr-select-field-option-color, #111827);
       cursor: pointer;
       border-radius: 4px;
       transition: background-color 0.15s;
     }
 
     .select-option:hover:not(.select-option--disabled) {
-      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+      background-color: var(--kr-select-field-option-hover-bg, #f3f4f6);
     }
 
     .select-option--selected {
-      background-color: var(--kr-select-option-selected-bg, #eff6ff);
-      color: var(--kr-select-option-selected-color, #1d4ed8);
+      background-color: var(--kr-select-field-option-selected-bg, #eff6ff);
+      color: var(--kr-select-field-option-selected-color, #1d4ed8);
     }
 
     .select-option--selected:hover {
-      background-color: var(--kr-select-option-selected-hover-bg, #dbeafe);
+      background-color: var(--kr-select-field-option-selected-hover-bg, #dbeafe);
     }
 
     .select-option--disabled {
-      color: var(--kr-select-option-disabled-color, #9ca3af);
+      color: var(--kr-select-field-option-disabled-color, #9ca3af);
       cursor: not-allowed;
     }
 
     .select-option--highlighted {
-      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+      background-color: var(--kr-select-field-option-hover-bg, #f3f4f6);
     }
 
     .select-empty {
@@ -2129,9 +2129,9 @@ const Ge=e=>e??V,Je={},et=ke(class extends xe{constructor(e){if(super(e),e.type!
     .options-slot {
       display: none;
     }
-  `,st.formAssociated=!0,ot([pe({type:String})],st.prototype,"label",void 0),ot([pe({type:String})],st.prototype,"name",void 0),ot([pe({type:String})],st.prototype,"value",void 0),ot([pe({type:String})],st.prototype,"placeholder",void 0),ot([pe({type:Boolean})],st.prototype,"disabled",void 0),ot([pe({type:Boolean})],st.prototype,"required",void 0),ot([pe({type:Boolean})],st.prototype,"readonly",void 0),ot([pe({type:String})],st.prototype,"hint",void 0),ot([ue()],st.prototype,"_isOpen",void 0),ot([ue()],st.prototype,"_highlightedIndex",void 0),ot([ue()],st.prototype,"_touched",void 0),ot([ge(".select-trigger")],st.prototype,"_triggerElement",void 0),st=ot([de("kr-select")],st);var rt=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let nt=class extends ne{constructor(){super(...arguments),this.value="",this.disabled=!1}get label(){return this.textContent?.trim()||""}render(){return U`<slot></slot>`}};nt.styles=r`
+  `,st.formAssociated=!0,ot([pe({type:String})],st.prototype,"label",void 0),ot([pe({type:String})],st.prototype,"name",void 0),ot([pe({type:String})],st.prototype,"value",void 0),ot([pe({type:String})],st.prototype,"placeholder",void 0),ot([pe({type:Boolean})],st.prototype,"disabled",void 0),ot([pe({type:Boolean})],st.prototype,"required",void 0),ot([pe({type:Boolean})],st.prototype,"readonly",void 0),ot([pe({type:String})],st.prototype,"hint",void 0),ot([ue()],st.prototype,"_isOpen",void 0),ot([ue()],st.prototype,"_highlightedIndex",void 0),ot([ue()],st.prototype,"_touched",void 0),ot([ge(".select-trigger")],st.prototype,"_triggerElement",void 0),st=ot([de("kr-select-field")],st);var rt=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let nt=class extends ne{constructor(){super(...arguments),this.value="",this.disabled=!1}get label(){return this.textContent?.trim()||""}render(){return U`<slot></slot>`}};nt.styles=r`
     :host {
       display: none;
     }
-  `,rt([pe({type:String})],nt.prototype,"value",void 0),rt([pe({type:Boolean})],nt.prototype,"disabled",void 0),nt=rt([de("kr-select-option")],nt);export{De as DialogRef,be as KRAccordion,Ce as KRAlert,Ee as KRButton,ze as KRCodeDemo,Le as KRContextMenu,je as KRDialog,st as KRSelect,nt as KRSelectOption,Ie as KRSnackbar,We as KRTab,Ve as KRTabGroup,Ye as KRTable,it as KRTextField,ae as krBaseCSS};
+  `,rt([pe({type:String})],nt.prototype,"value",void 0),rt([pe({type:Boolean})],nt.prototype,"disabled",void 0),nt=rt([de("kr-select-field-option")],nt);export{De as DialogRef,be as KRAccordion,Ce as KRAlert,Ee as KRButton,ze as KRCodeDemo,Le as KRContextMenu,je as KRDialog,st as KRSelectField,nt as KRSelectFieldOption,Ie as KRSnackbar,We as KRTab,Ve as KRTabGroup,Ye as KRTable,it as KRTextField,ae as krBaseCSS};
 //# sourceMappingURL=krubble.bundled.min.js.map