UNPKG

@kelvininc/ui-components

Version:
1 lines 6.37 kB
import{r as t,c as s,h as i,H as e,g as h}from"./p-WTwLUJcM.js";import{b as o}from"./p-ShWxjiEm.js";import{c as a}from"./p-COrzvkrr.js";import{a as l}from"./p-Q8gJ6v8U.js";import{a as n}from"./p-DCOsOAOy.js";import{a as d}from"./p-B4OowdnI.js";import{m as r}from"./p-DlXzUI51.js";import"./p-BJ9G-v5a.js";import"./p-GpUjqmUL.js";import"./p-Dkd2PDJ-.js";import"./p-DjSNdVAB.js";import"./p-BL_6ssnk.js";import"./p-CK4jS9_E.js";const c=class{constructor(i){t(this,i),this.optionsSelected=s(this,"optionsSelected",7),this.searchChange=s(this,"searchChange",7),this.clearSelection=s(this,"clearSelection",7),this.selectAll=s(this,"selectAll",7),this.dismiss=s(this,"dismiss",7),this.clickOutside=s(this,"clickOutside",7),this.openStateChange=s(this,"openStateChange",3),this.loading=!1,this.searchable=!0,this.selectionClearable=!0,this.helpText=[],this.options={},this.selectedOptions={},this.inputSize=a.Large,this.customClass="",this.selectionAll=!0,this.counter=!0,this.minSearchOptions=15,this.shortcuts=!1,this.showShortcuts=!1,this.clickOutsideClose=!0,this.actionElement=null,this.zIndex=d,this.autoFocus=!0,this.hideBadge=!1,this._badgeLabel=this.badge,this._isOpen=!1,this.onOptionsSelected=({detail:t})=>{this.optionsSelected.emit(t)},this.onSearchChange=({detail:t})=>{this.setSearch(t)},this.onClearSelection=t=>{t.stopPropagation(),this.clearSelection.emit(),this.calculateLabelValue()},this.onSelectAll=t=>{t.stopPropagation(),this.selectAll.emit(),this.calculateLabelValue()},this.onDismiss=()=>{this.setOpenState(!1),this.dismiss.emit()},this.onOpenStateChange=({detail:t})=>{this.setOpenState(t)},this.setOpenState=t=>{t?this.autoFocus&&this.focusSearchInput():this.setSearch(""),this.clearHighlightedOption(),this._isOpen=t},this.setSearch=t=>{this._searchValue=t,this.searchChange.emit(t)},this.clearHighlightedOption=()=>{var t;null===(t=this.selectRef)||void 0===t||t.clearHighlightedOption()},this.calculateLabelValue=()=>{var t;this._selectionDisplayValue=(null===(t=this.displayValue)||void 0===t?void 0:t.length)?this.displayValue:((t={},s={})=>{const[i]=Object.values(o(t,s));return null==i?void 0:i.label})(this.options,this.selectedOptions)},this.calculateBadgeValue=()=>{var t;this._badgeLabel=(null===(t=this.badge)||void 0===t?void 0:t.length)?this.badge:((t={})=>{const s=Object.keys(t).filter((s=>t[s])).length;if(!(s<2))return"+"+(s-1)})(this.selectedOptions)},this.focusSearchInput=()=>{setTimeout((()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focusSearch()}))}}badgeChangeHandler(){this.calculateBadgeValue()}labelValueHandler(){this.calculateLabelValue(),this.calculateBadgeValue()}async focusSearch(){var t;null===(t=this.selectRef)||void 0===t||t.focusSearch()}componentWillLoad(){this.calculateLabelValue(),this.calculateBadgeValue()}getMaxHeight(){var t;const s=l(this.el,"--dropdown-max-height");return null!==(t=this.maxHeight)&&void 0!==t?t:s}getMinHeight(){var t;const s=l(this.el,"--dropdown-min-height");return null!==(t=this.minHeight)&&void 0!==t?t:s}getMaxWidth(){var t;const s=l(this.el,"--dropdown-max-width");return null!==(t=this.maxWidth)&&void 0!==t?t:s}getMinWidth(){var t;const s=l(this.el,"--dropdown-min-width");return null!==(t=this.minWidth)&&void 0!==t?t:s}getInputConfig(){return r({},this.inputConfig,{label:this.label,value:this._selectionDisplayValue,valuePrefix:this.displayPrefix,loading:this.loading,icon:this.icon,inputDisabled:this.disabled,inputRequired:this.required,placeholder:this.placeholder,state:this.errorState,helpText:this.helpText,size:this.inputSize,badge:this._badgeLabel,hideBadge:this.hideBadge})}connectedCallback(){this.autoFocus&&this.focusSearchInput()}render(){return i(e,{key:"635437fbd5b3d05180802259bec9f21acf43baa7"},i("kv-dropdown",{key:"038128f47273668a5eed7bf065bbe43fd9c0d7c2",inputConfig:this.getInputConfig(),isOpen:this._isOpen,onOpenStateChange:this.onOpenStateChange,disabled:this.disabled,options:this.dropdownOptions,clickOutsideClose:this.clickOutsideClose,actionElement:this.actionElement,zIndex:this.zIndex},i("slot",{key:"df7cd0ed16946f0afd1f0b8ac8b307f1e2d99573",name:"dropdown-action",slot:"dropdown-action"}),i("div",{key:"5e7b7026e86157714bef7bf6a23ed6c9b9c3342c",class:n(this.customClass)},i("kv-select-multi-options",{key:"d5a54b9c37e501dceb6583c57af16e55ef3cb0cb",ref:t=>this.selectRef=t,options:this.options,filteredOptions:this.filteredOptions,selectedOptions:this.selectedOptions,noDataAvailableConfig:this.noDataAvailableConfig,noResultsFoundConfig:this.noResultsFoundConfig,searchable:this.searchable,minSearchOptions:this.minSearchOptions,searchValue:this._searchValue,selectionClearable:this.selectionClearable,clearSelectionLabel:this.clearSelectionLabel,selectionAll:this.selectionAll,selectAllLabel:this.selectAllLabel,searchPlaceholder:this.searchPlaceholder,maxHeight:this.getMaxHeight(),minHeight:this.getMinHeight(),maxWidth:this.getMaxWidth(),minWidth:this.getMinWidth(),counter:this.counter,shortcuts:this._isOpen&&this.shortcuts,showShortcuts:this.showShortcuts,maxSelectable:this.maxSelectable,onSearchChange:this.onSearchChange,onClearSelection:this.onClearSelection,onOptionsSelected:this.onOptionsSelected,onSelectAll:this.onSelectAll,onDismiss:this.onDismiss,exportparts:"select"},i("slot",{key:"7c5b61e9bcb287981b8c55bb3a8a5ba8fcfacc25",name:"select-header-actions",slot:"select-header-actions"}),i("slot",{key:"5d963c20803edf6a0fa679d6110fd76f02cca4e0",name:"select-header-label",slot:"select-header-label"}),i("slot",{key:"96ff302ecab3e6eff537dbe5b06405b868c00c7e",name:"no-data-available",slot:"no-data-available"}),i("slot",{key:"5b62441d40392e8f444f213cdcc36de8435c2330",name:"no-results-found",slot:"no-results-found"}),i("slot",{key:"771dd2cfb0ed95f77f96530ef221f4d86db0cb8f",name:"select-footer",slot:"select-footer"})))))}get el(){return h(this)}static get watchers(){return{badge:["badgeChangeHandler"],options:["labelValueHandler"],selectedOptions:["labelValueHandler"],displayValue:["labelValueHandler"]}}};c.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--dropdown-max-height:400px;--dropdown-min-height:auto;--dropdown-max-width:auto;--dropdown-min-width:max-content}kv-dropdown[disabled=true]{pointer-events:none}';export{c as kv_multi_select_dropdown}