UNPKG

@kelvininc/ui-components

Version:
1 lines 12.9 kB
import{r as t,c as e,h as i,H as s,g as o}from"./p-D-JVwta2.js";import{E as n}from"./p-SVedE_O8.js";import{b as a}from"./p-CojoW2Y2.js";import{a as r}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";import"./p-DVds6a5Z.js";import"./p-BcMhjKoS.js";import"./p-Do0EyoO8.js";import"./p-CBuzk8fR.js";import"./p-DHk26cGe.js";import"./p-7ioMFMb5.js";import{g as l}from"./p-DKOxy79t.js";import{a as h}from"./p-DHsSp4wP.js";import{i as c}from"./p-BA_npyc9.js";import{b as d}from"./p-CKk8_-cJ.js";import{a as p}from"./p-nGbDFIaH.js";import{m as f}from"./p-DkMsLawH.js";import"./p-DjSNdVAB.js";import"./p-CiDQ1Z66.js";import"./p-DfPM2t43.js";import"./p-Dkd2PDJ-.js";import"./p-DQfCDnBw.js";import"./p-Dp5Jdzmz.js";import"./p-CK4jS9_E.js";import"./p-DVju43gQ.js";const m=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:"e3bdb69251bc0585c247ffb151cdde63a08602b4"},i("div",{key:"85a07478335d00c75866ae1c4cc1b50e8e41fca1",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}))))}};m.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{display:block}.input-container{background-color:var(--kv-neutral-7, #2a2a2a);padding:0 var(--kv-spacing-4x, 16px);height:32px;display:flex;align-items:center}.input-container kv-icon{visibility:hidden}.input-container--content-hidden:hover{background-color:var(--kv-neutral-6, #3f3f3f);cursor:pointer}.input-container--content-hidden:hover kv-icon{visibility:visible}.input-container .label-container{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--kv-neutral-4, #bebebe)}.input-container .slot-container{width:100%}';const v=(t,e={})=>{if(t&&e[t])return e[t].icon},b=(t,e={})=>{if(t&&e[t])return e[t].customStyle},u=(t={})=>Object.values(t).reduce(((t,e)=>(t[e.value]=Object.assign(Object.assign({},e),{selectable:c(e.options),options:u(e.options),togglable:!1}),t)),{}),g=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=r.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.zIndex=p,this.canAddItems=!1,this.autoFocus=!0,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=v(this.selectedOption,this.selectOptions.flatten))&&void 0!==e?e:this.icon,customStyle:b(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=u(this.options),e=this.filteredOptions?u(this.filteredOptions):void 0,i=d(t);this.selectOptions={total:t,filtered:e,flatten:i}}}optionsChangeHandler(){this.buildSelectionOptions(),this.calculateLabelValue()}selectedOptionChangeHandler(){this.validateSelectedOptionValue(),this.calculateLabelValue()}displayValueChangeHandler(){this.calculateLabelValue()}filterOptionsChangeHandler(){this.buildSelectionOptions()}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:"42468b7e01463d2164da2196c8777335a00e06d1"},i("kv-dropdown",{key:"e1448bb20d328d2ed1bf0e0a3733168d0c935b68",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:"8fb643e464da9639138375e164805b4f1525fdc2",name:"right-slot",slot:"right-slot"}),i("slot",{key:"4a9e635dbfc58fe53aa26d817868ff2553b7efab",name:"left-slot",slot:"left-slot"}),i("slot",{key:"34cc6d055912da304b36cf4a2a4ff8959211157d",name:"dropdown-action",slot:"dropdown-action"}),i("div",{key:"7c8ab415460a4fa10bc20c3b713a7c84c6ea9dae",class:Object.assign(Object.assign({},l(this.customClass)),{"single-select-dropdown-slot":!0})},i("kv-select-multi-options",{key:"16de85ee0268dc5e5e3c4961bfbb4e06926135d9",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,onSearchChange:this.onSearchChange,onClearSelection:this.onClearSelection,onOptionSelected:this.onOptionSelected,onOptionCreated:this.onOptionCreated,onDismiss:this.onDismiss,canAddItems:this.canAddItems,exportparts:"select"},i("slot",{key:"0a4e95bba41dafc150c41b8edf4f7fd45a4a56db",name:"create-new-option",slot:"create-new-option"}),i("slot",{key:"f5740278d58167ef91ca55df464d74e23d48541b",name:"select-header-actions",slot:"select-header-actions"}),i("slot",{key:"b95856d3090d020ab615a88cd72e3d5089b7e595",name:"select-header-label",slot:"select-header-label"}),i("slot",{key:"2978b448b588189e4d08c7b781e35c000e378ad0",name:"no-data-available",slot:"no-data-available"}),i("slot",{key:"1dacdab7c23ec33191ed41e63b76f6410dc14ff3",name:"no-results-found",slot:"no-results-found"})),i("slot",{key:"a06c50835184723a155a2520a308119e581db587"}))))}get el(){return o(this)}static get watchers(){return{options:["optionsChangeHandler"],selectedOption:["selectedOptionChangeHandler"],displayValue:["displayValueChangeHandler"],filteredOptions:["filterOptionsChangeHandler"]}}};g.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}.counter{display:flex;align-items:center;color:var(--kv-neutral-4, #bebebe);font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none}';const k=class{constructor(i){t(this,i),this.itemSelected=e(this,"itemSelected",7),this.selected=!1,this.onItemClick=()=>{this.itemSelected.emit(this.value)}}render(){return i(s,{key:"7f62a8510634b1eff4535512d3bb2b1c316a90a3"},i("div",{key:"d2e483e533a97fe88deadd559c91f853cdfd2074",class:{"select-option":!0,selected:this.selected},onClick:this.onItemClick},i("div",{key:"6e16b68eb42a675684099a0fc55edf4567007074",class:"text-container"},i("div",{key:"6cf98b835e0902838c47dc8581586d91f5757329",class:"item-label"},this.label),i("div",{key:"949d759df54a9a539612290fafa3bb709b387ebb",class:"item-description"},this.description))))}};k.style='@property --rotation{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--time-picker-select-option-padding:0 var(--kv-spacing-4x, 16px);--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:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-weight 100ms linear;color:var(--kv-neutral-2, #e5e5e5)}.select-option .text-container .item-description{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-4, #bebebe)}.select-option.selected{background-color:var(--kv-neutral-6, #3f3f3f)}.select-option.selected .item-label{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}.select-option.selected .item-description{font-family:var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");font-size:12px;font-weight:600;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;transition:font-weight 100ms linear;color:var(--kv-neutral-2, #e5e5e5)}.select-option:hover{background-color:var(--kv-neutral-6, #3f3f3f)}';export{m as kv_input_wrapper,g as kv_single_select_dropdown,k as kv_time_picker_select_option}