@kelvininc/ui-components
Version:
Kelvin UI Components
1 lines • 12.7 kB
JavaScript
import{r as t,c as e,h as i,H as s,g as o}from"./p-WTwLUJcM.js";import{o as n,w as a,c as l}from"./p-COrzvkrr.js";import{a as r}from"./p-DCOsOAOy.js";import{a as h}from"./p-Q8gJ6v8U.js";import{i as c}from"./p-GpUjqmUL.js";import{c as d}from"./p-ShWxjiEm.js";import{a as p}from"./p-B4OowdnI.js";import{m as f}from"./p-DlXzUI51.js";import"./p-DjSNdVAB.js";import"./p-Dkd2PDJ-.js";import"./p-BJ9G-v5a.js";import"./p-BL_6ssnk.js";import"./p-CK4jS9_E.js";const b=class{constructor(i){t(this,i),this.contentClick=e(this,"contentClick",7),this.contentHidden=!1,this.icon=n.Edit,this.handleContentClick=()=>{this.contentVisible||this.contentHidden||this.contentClick.emit(this.contentVisible)}}render(){return i(s,{key:"80b3abbba9ee9bccd764818b64922b10a053ebb0"},i("div",{key:"180134974d4de7dabbb1096f7cf1ae718da8d011",class:{"input-container":!0,"input-container--content-hidden":!this.contentVisible&&!this.contentHidden},onClick:this.handleContentClick},this.contentVisible&&!this.contentHidden?i("div",{class:"slot-container"},i("slot",null)):i("div",{class:"label-container"},i("div",{class:"label"},this.label),i("kv-icon",{name:this.icon}))))}};b.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{display:block}.input-container{background-color:var(--transparent);padding:0 var(--spacing-2xl);height:32px;display:flex;align-items:center}.input-container kv-icon{visibility:hidden}.input-container--content-hidden:hover{background-color:var(--background-interactive-slider-list-hover);cursor:pointer}.input-container--content-hidden:hover kv-icon{--icon-color:var(--icon-surface-neutral-primary);visibility:visible}.input-container .label-container{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--text-container-neutral-default)}.input-container .slot-container{width:100%}';const u=(t,e={})=>{if(t&&e[t])return e[t].icon},v=(t,e={})=>{if(t&&e[t])return e[t].customStyle},g=(t={})=>Object.values(t).reduce(((t,e)=>(t[e.value]=Object.assign(Object.assign({},e),{selectable:c(e.options),options:g(e.options),togglable:!1}),t)),{}),m=class{constructor(i){t(this,i),this.optionSelected=e(this,"optionSelected",7),this.searchChange=e(this,"searchChange",7),this.clearSelection=e(this,"clearSelection",7),this.dismiss=e(this,"dismiss",7),this.clickOutside=e(this,"clickOutside",7),this.optionCreated=e(this,"optionCreated",7),this.openStateChange=e(this,"openStateChange",3),this.isOpen=!1,this.loading=!1,this.required=!1,this.errorState=a.None,this.helpText=[],this.disabled=!1,this.inputSize=l.Large,this.customClass="",this.clickOutsideClose=!0,this.actionElement=null,this.options={},this.searchable=!0,this.clearSelectionLabel="Clear all",this.minSearchOptions=15,this.shortcuts=!1,this.showShortcuts=!1,this.zIndex=p,this.canAddItems=!1,this.autoFocus=!0,this.rebuildScheduled=!1,this.scheduleRebuild=()=>{this.rebuildScheduled||(this.rebuildScheduled=!0,queueMicrotask((()=>{this.rebuildScheduled=!1,this.buildSelectionOptions(),this.calculateLabelValue()})))},this.onOptionSelected=t=>{t.stopPropagation();const{detail:e}=t;this.selectOption(e),this.highlightedOption=e},this.onDismiss=()=>{this.setOpenState(!1),this.dismiss.emit()},this.onSearchChange=({detail:t})=>{this.setSearch(t)},this.onOpenStateChange=({detail:t})=>{this.setOpenState(t)},this.onClearSelection=()=>{this.optionSelected.emit(void 0),this.clearSelection.emit(),this.calculateLabelValue()},this.onOptionCreated=({detail:t})=>{this.optionCreated.emit(t)},this.selectOption=t=>{this.optionSelected.emit(t),this.setOpenState(!1)},this.focusSearchInput=()=>{setTimeout((()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focusSearch()}))},this.setOpenState=t=>{t?this.autoFocus&&this.focusSearchInput():(this.setSearch(""),this.closeCreatePopup()),this.highlightedOption=void 0,this.isOpen=t,this.openStateChange.emit(t),this.clearHighlightedOption()},this.setSearch=t=>{this._searchValue=t,this.searchChange.emit(t)},this.getInputConfig=()=>{var t,e;return f({},this.inputConfig,{label:this.label,value:this._selectionDisplayValue,valuePrefix:this.displayPrefix,loading:this.loading,inputDisabled:this.disabled,inputRequired:this.required,placeholder:this.placeholder,state:this.errorState,helpText:this.helpText,size:this.inputSize,badge:this.badge,isDirty:this.selectedOption&&this.options&&(null===(t=this.options[this.selectedOption])||void 0===t?void 0:t.isDirty),icon:null!==(e=u(this.selectedOption,this.selectOptions.flatten))&&void 0!==e?e:this.icon,customStyle:v(this.selectedOption,this.selectOptions.flatten)})},this.clearHighlightedOption=()=>{var t;null===(t=this.selectRef)||void 0===t||t.clearHighlightedOption()},this.closeCreatePopup=()=>{var t;null===(t=this.selectRef)||void 0===t||t.closeCreatePopup()},this.calculateLabelValue=()=>{var t,e;this._selectionDisplayValue=(null===(t=this.displayValue)||void 0===t?void 0:t.length)?this.displayValue:this.selectedOption&&(null===(e=this.selectOptions)||void 0===e?void 0:e.flatten[this.selectedOption])?this.selectOptions.flatten[this.selectedOption].label:void 0},this.validateSelectedOptionValue=()=>{if(""===this.selectedOption)throw new Error('Empty string "" is an invalid value for the dropdown, if you wish to deselect the dropdown please set the value to undefined.')},this.buildSelectionOptions=()=>{const t=g(this.options),e=this.filteredOptions?g(this.filteredOptions):void 0,i=d(t);this.selectOptions={total:t,filtered:e,flatten:i}}}optionsChangeHandler(){this.scheduleRebuild()}selectedOptionChangeHandler(){this.validateSelectedOptionValue(),this.calculateLabelValue()}displayValueChangeHandler(){this.calculateLabelValue()}filterOptionsChangeHandler(){this.scheduleRebuild()}async focusSearch(){var t;null===(t=this.selectRef)||void 0===t||t.focusSearch()}componentWillLoad(){this.validateSelectedOptionValue(),this.buildSelectionOptions(),this.calculateLabelValue()}getMaxHeight(){var t;const e=h(this.el,"--dropdown-max-height");return null!==(t=this.maxHeight)&&void 0!==t?t:e}getMinHeight(){var t;const e=h(this.el,"--dropdown-min-height");return null!==(t=this.minHeight)&&void 0!==t?t:e}getMaxWidth(){var t;const e=h(this.el,"--dropdown-max-width");return null!==(t=this.maxWidth)&&void 0!==t?t:e}getMinWidth(){var t;const e=h(this.el,"--dropdown-min-width");return null!==(t=this.minWidth)&&void 0!==t?t:e}get selectedOptions(){return this.selectedOption?{[this.selectedOption]:!0}:{}}connectedCallback(){this.autoFocus&&this.focusSearchInput()}render(){return i(s,{key:"4b7590ba6e30ba2d3650f012e0df5e1cd69b8e65"},i("kv-dropdown",{key:"961c15e0dff4d88d69de41912048de270903ee98",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:"6144ec1787cc225746b824e3ca8fec10ad565233",name:"right-slot",slot:"right-slot"}),i("slot",{key:"a4433167c06ec6c70b815777a42a33b64897106b",name:"left-slot",slot:"left-slot"}),i("slot",{key:"cad85f7a8e681778945b8f76b3bd0f7f99b13bfb",name:"dropdown-action",slot:"dropdown-action"}),i("div",{key:"1459e958549adf73649fd62478357be30f71fb43",class:Object.assign(Object.assign({},r(this.customClass)),{"single-select-dropdown-slot":!0})},i("kv-select-multi-options",{key:"bde933426b770f432564ef3cfb6a16106f8ad9c8",ref:t=>this.selectRef=t,options:this.selectOptions.total,filteredOptions:this.selectOptions.filtered,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,createInputPlaceholder:this.createInputPlaceholder,createOptionPlaceholder:this.createOptionPlaceholder,maxHeight:this.getMaxHeight(),minHeight:this.getMinHeight(),maxWidth:this.getMaxWidth(),minWidth:this.getMinWidth(),counter:this.counter,shortcuts:this.isOpen&&this.shortcuts,showShortcuts:this.showShortcuts,onSearchChange:this.onSearchChange,onClearSelection:this.onClearSelection,onOptionSelected:this.onOptionSelected,onOptionCreated:this.onOptionCreated,onDismiss:this.onDismiss,canAddItems:this.canAddItems,exportparts:"select,select-option-icon"},i("slot",{key:"18d8a952d27eead433350ec7c7031fd42c4b2547",name:"create-new-option",slot:"create-new-option"}),i("slot",{key:"df8750ee1178a798e054bdb81cc6d453f0601ccd",name:"select-header-actions",slot:"select-header-actions"}),i("slot",{key:"0929d5fe3bf2cba2722c4541e146330036efceaf",name:"select-header-label",slot:"select-header-label"}),i("slot",{key:"2edefef48f3b7e92055c9b2eb9c02c5475bf15bf",name:"no-data-available",slot:"no-data-available"}),i("slot",{key:"5732c9c22db1cf77fc978caae33e9eb9a36b7959",name:"no-results-found",slot:"no-results-found"}),i("slot",{key:"3f50b627592700132253bca262ea5be21d7f853c",name:"select-footer",slot:"select-footer"})),i("slot",{key:"8cdbc0340ea2b532f6a965ca51ae4b9ca5f35093"}))))}get el(){return o(this)}static get watchers(){return{options:["optionsChangeHandler"],selectedOption:["selectedOptionChangeHandler"],displayValue:["displayValueChangeHandler"],filteredOptions:["filterOptionsChangeHandler"]}}};m.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}.counter{display:flex;align-items:center;color:var(--text-container-neutral-subtle);font-family:Proxima Nova;font-weight:400;font-size:10px;line-height:14px;letter-spacing:0}';const k=class{constructor(i){t(this,i),this.itemSelected=e(this,"itemSelected",7),this.selected=!1,this.customAttributes={},this.onItemClick=()=>{this.itemSelected.emit(this.value)}}render(){return i(s,{key:"4a2b79e3adb3e6757e03dd81e4409f4a027d136a"},i("div",Object.assign({key:"157d96b50d7afb36a0111e15bc378ac665030a06",class:{"select-option":!0,selected:this.selected},onClick:this.onItemClick},this.customAttributes),i("div",{key:"84efbd90d44e01b82160a083861e1e3e332c43c6",class:"text-container"},i("div",{key:"56c57554ddb71c79048377a167ea2ae305750ca6",class:"item-label"},this.label),i("div",{key:"8fb93bf958520780be1a51b45e41c7d0708b6ccc",class:"item-description"},this.description))))}};k.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{--time-picker-select-option-padding:0 var(--spacing-2xl);--time-picker-select-option-background-color:transparent;--time-picker-select-option-height:32px}.select-option{height:var(--time-picker-select-option-height);padding:var(--time-picker-select-option-padding);display:flex;align-items:center;user-select:none;cursor:pointer;background-color:var(--time-picker-select-option-background-color);transition:background-color 100ms linear}.select-option .text-container{display:flex;justify-content:space-between;align-items:center;min-width:0;width:100%}.select-option .text-container .item-label{font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-weight 100ms linear;color:var(--text-interactive-slider-list-default)}.select-option .text-container .item-description{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-on-color-neutral-tertiary)}.select-option:hover{background-color:var(--background-interactive-slider-list-hover)}.select-option.selected{background-color:var(--background-interactive-slider-list-selected)}.select-option.selected .item-label{font-family:Proxima Nova;font-weight:600;font-size:14px;line-height:20px;letter-spacing:0;color:var(--text-interactive-slider-list-selected)}.select-option.selected .item-description{font-family:Proxima Nova;font-weight:600;font-size:12px;line-height:16px;letter-spacing:0;transition:font-weight 100ms linear;color:var(--text-interactive-slider-list-default)}';export{b as kv_input_wrapper,m as kv_single_select_dropdown,k as kv_time_picker_select_option}