@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 6.36 kB
JavaScript
import{r as t,c as i,h as s,H as e,g as h}from"./p-D-JVwta2.js";import{g as o}from"./p-CKk8_-cJ.js";import{a}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import"./p-CojoW2Y2.js";import"./p-SVedE_O8.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import{a as n}from"./p-DHsSp4wP.js";import{g as l}from"./p-DKOxy79t.js";import{a as r}from"./p-nGbDFIaH.js";import{m as d}from"./p-DkMsLawH.js";import"./p-DQfCDnBw.js";import"./p-BA_npyc9.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-DjSNdVAB.js";import"./p-Dp5Jdzmz.js";import"./p-CK4jS9_E.js";import"./p-DVju43gQ.js";const p=class{constructor(s){t(this,s),this.optionsSelected=i(this,"optionsSelected",7),this.searchChange=i(this,"searchChange",7),this.clearSelection=i(this,"clearSelection",7),this.selectAll=i(this,"selectAll",7),this.dismiss=i(this,"dismiss",7),this.clickOutside=i(this,"clickOutside",7),this.openStateChange=i(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.clickOutsideClose=!0,this.actionElement=null,this.zIndex=r,this.autoFocus=!0,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={},i={})=>{const[s]=Object.values(o(t,i));return null==s?void 0:s.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 i=Object.keys(t).filter((i=>t[i])).length;if(!(i<2))return"+"+(i-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 i=n(this.el,"--dropdown-max-height");return null!==(t=this.maxHeight)&&void 0!==t?t:i}getMinHeight(){var t;const i=n(this.el,"--dropdown-min-height");return null!==(t=this.minHeight)&&void 0!==t?t:i}getMaxWidth(){var t;const i=n(this.el,"--dropdown-max-width");return null!==(t=this.maxWidth)&&void 0!==t?t:i}getMinWidth(){var t;const i=n(this.el,"--dropdown-min-width");return null!==(t=this.minWidth)&&void 0!==t?t:i}getInputConfig(){return d({},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})}connectedCallback(){this.autoFocus&&this.focusSearchInput()}render(){return s(e,{key:"6d810794e50de49938c3a5009607f79e3e3d34b8"},s("kv-dropdown",{key:"722084e194cf88703a001d133bc72cc65cdc33c3",inputConfig:this.getInputConfig(),isOpen:this._isOpen,onOpenStateChange:this.onOpenStateChange,disabled:this.disabled,options:this.dropdownOptions,clickOutsideClose:this.clickOutsideClose,actionElement:this.actionElement,zIndex:this.zIndex},s("slot",{key:"059969a5dbd7aafd786f8c6ec56bc29c988a6737",name:"dropdown-action",slot:"dropdown-action"}),s("div",{key:"84dd56799b74a3a490e57a2fcb1e7bce80f8cfef",class:l(this.customClass)},s("kv-select-multi-options",{key:"bd6464ecea791330a3d05258465a5d44fcb949ae",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,onSearchChange:this.onSearchChange,onClearSelection:this.onClearSelection,onOptionsSelected:this.onOptionsSelected,onSelectAll:this.onSelectAll,onDismiss:this.onDismiss,exportparts:"select"},s("slot",{key:"d9f0ebb156816f046db41d173b142da538ee988a",name:"select-header-actions",slot:"select-header-actions"}),s("slot",{key:"03db9174c99e5e1b7ae5532829279a1c643c526b",name:"select-header-label",slot:"select-header-label"}),s("slot",{key:"2d6fa524a65126a9f8e1823d621922ef889e1630",name:"no-data-available",slot:"no-data-available"}),s("slot",{key:"35e7840a53f248ace292b2c1da03812155fd612d",name:"no-results-found",slot:"no-results-found"})))))}get el(){return h(this)}static get watchers(){return{badge:["badgeChangeHandler"],options:["labelValueHandler"],selectedOptions:["labelValueHandler"],displayValue:["labelValueHandler"]}}};p.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}: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{p as kv_multi_select_dropdown}