@sky.ui/core 0.0.46 → 0.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +3087 -2885
- package/dist/helper/controllers/popover-controller.js +1 -1
- package/dist/helper/controllers/popover-controller.js.map +1 -1
- package/dist/helper/controllers/preset-controller.d.ts +9 -0
- package/dist/helper/controllers/preset-controller.js +1 -1
- package/dist/helper/controllers/preset-controller.js.map +1 -1
- package/dist/helper/index.js +1 -1
- package/dist/helper/utils/component-presets.d.ts +9 -0
- package/dist/helper/utils/component-presets.js +1 -1
- package/dist/helper/utils/component-presets.js.map +1 -1
- package/dist/helper/utils/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/sky-combobox/sky-combobox.d.ts +64 -0
- package/dist/sky-combobox/sky-combobox.js +65 -61
- package/dist/sky-combobox/sky-combobox.js.map +1 -1
- package/dist/sky-input/sky-input.js +7 -7
- package/dist/sky-input/sky-input.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";import{property as r,state as a,query as n,queryAll as l,queryAssignedElements as h,customElement as d}from"lit/decorators.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as u}from"lit/directives/repeat.js";import{classMap as y}from"lit/directives/class-map.js";import{resolveColor as v}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as m}from"../helper/utils/contrast-color.js";import{PopoverController as g}from"../helper/controllers/popover-controller.js";import{FormControlBase as f}from"../helper/internals/form-control-base.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";import{SkyCheckbox as k}from"../sky-checkbox/sky-checkbox.js";import{SkyInput as w}from"../sky-input/sky-input.js";import{PresetController as x}from"../helper/controllers/preset-controller.js";var S=Object.defineProperty,I=Object.getOwnPropertyDescriptor,O=(t,e,i,s)=>{for(var o,r=s>1?void 0:s?I(e,i):e,a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s?o(e,i,r):o(r))||r);return s&&r&&S(e,i,r),r};let A=class extends f{constructor(){super(),this.value="",this.placeholder="Select An Option",this.searchPlaceholder="Search...",this.label="",this._options=[],this.chipSize=20,this.color="primary",this.clearable=!1,this.loading=!1,this.compact=!1,this.disabled=!1,this.searchable=!1,this.multiSelect=!1,this.visibleChips=2,this.selectAll=!1,this._validations=[],this.showErrors=!1,this.errorDisplayMode="single",this.required=!1,this.emitFullObject=!1,this.emittedKey="value",this.displayKey="",this.addOption=!1,this.validationArrayFormat=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.justify="flex-start",this.zIndex=11,this.height="200px",this.requiredMessage="Selection is required.",this.readonly=!1,this.enforceMinOneSelection=!1,this.openAbove=!1,this.validationActive=!1,this.invalid=!1,this.variant="default",this.multiDisplay="chips",this.searchQuery="",this.filteredOptions=[],this.focused=!1,this.open=!1,this.selectedItems=[],this.hiddenChipsOpen=!1,this.activeIndex=-1,this.validationErrors=[],this.validationStatus=[],this.hasLeftIcon=!1,this.hasRightIcon=!1,this.optionSlotSet=new Set,this._searchDebounceId=null,this._closeResetId=null,this.dropdownPopover=new g(this,{getAnchor:()=>this.inputWrapperEl,getPopover:()=>this.dropdownEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(t,e)=>{this.open=t,t?(this.focused=!0,null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null),this.validationActive=!0,this.filterOptions(),requestAnimationFrame(()=>this.focusOnOpen())):(this.activeIndex=-1,null!=this._closeResetId&&clearTimeout(this._closeResetId),this._closeResetId=setTimeout(()=>{this._closeResetId=null,this.open||(this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions())},A._CLOSE_RESET_MS),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new g(this,{getAnchor:()=>this.overflowChipEl,getPopover:()=>this.hiddenDropdownEl,cssVarLeft:"--sky-hc-left",cssVarTop:"--sky-hc-top",cssVarWidth:"--sky-hc-width",getPlacement:()=>"bottom",getAlign:()=>"center",getGap:()=>4,getPadding:()=>8,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>120,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!1,onOpenChange:t=>{this.hiddenChipsOpen=t,t&&this.open&&this.dropdownPopover.closePopover("api")}}),this.preset="",this._presets=new x(this),this.refreshOptionSlots=()=>{const t=new Set;this.querySelectorAll('[slot^="option-"]').forEach(e=>{const i=e.slot;i&&t.add(i)}),this.optionSlotSet=t},this.onSearchKeydown=t=>{const{key:e,shiftKey:i}=t;if("Enter"===e)return t.preventDefault(),t.stopPropagation(),void this.commitDropdownEnter();if("ArrowDown"===e||"ArrowUp"===e||"Tab"===e){t.preventDefault(),t.stopPropagation();const i=this.searchable||this.addOption,s=this.multiSelect&&this.selectAll?i?1:0:this.headerRows,o=this.headerRows+Math.max(0,this.filteredOptions.length)-1,r="ArrowUp"===e||"Tab"===e&&t.shiftKey?-1:1;this.activeIndex<s?this.activeIndex=s:this.activeIndex=this.activeIndex+r<s?o:this.activeIndex+r>o?s:this.activeIndex+r,this.scrollActiveItemIntoView()}return"Escape"===e?(t.preventDefault(),t.stopPropagation(),void this.dropdownPopover.closePopover("escape")):void 0},this.handleAddaddOption=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;if(!this.canAddaddOption())return;const e=this.searchQuery.trim();this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:e},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()},this.onIconSlotChange=()=>{this.hasLeftIcon=(this.iconLeftEls?.length??0)>0,this.hasRightIcon=(this.iconRightEls?.length??0)>0},this.captureDefaultValue("")}get options(){return this._options}set options(t){const e=this._options;this._options=Array.isArray(t)?t:[],this.requestUpdate("options",e)}get validations(){return this._validations}set validations(t){const e=this._validations;this._validations=Array.isArray(t)?t:[],this.requestUpdate("validations",e)}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.refreshOptionSlots()}firstUpdated(){this.dropdownPopover.refreshTargets(),this.hiddenPopover.refreshTargets()}getFormValue(){if(this.disabled||!this.name)return null;if(this.multiSelect){const t=new FormData;return this.selectedItems.forEach(e=>{const i=this.emitFullObject?JSON.stringify(e):String(this.getOptionValue(e));t.append(this.name,i)}),0===this.selectedItems.length&&this.required&&t.append(this.name,""),t}{if(0===this.selectedItems.length)return"";const t=this.selectedItems[0];return this.emitFullObject?JSON.stringify(t):String(this.getOptionValue(t))}}setValueFromFormState(t){if(null===t||""===t)return this.value=this.multiSelect?[]:"",void(this.selectedItems=[]);if(this.multiSelect){let e=[];if(t instanceof FormData)e=t.getAll(this.name);else if(Array.isArray(t))e=t;else if("string"==typeof t)try{const i=JSON.parse(t);e=Array.isArray(i)?i:[t]}catch{e=[t]}this.setValueFromArray(e)}else{let e="";"string"==typeof t?e=t:t instanceof FormData?e=t.get(this.name)?.toString()||"":Array.isArray(t)&&t.length>0&&(e=t[0].toString()),this.value=e,this.syncSelectedItemsWithValue()}}syncFormValue(){if(!this.name||this.disabled)return void this.internals.setFormValue(null);const t=this.getFormValue();if(null!==t)if(this.multiSelect&&Array.isArray(t)){const e=new FormData;t.forEach(t=>{null!=t&&""!==t&&e.append(this.name,String(t))}),this.internals.setFormValue(e)}else this.internals.setFormValue(t);else this.internals.setFormValue(null)}setValueFromArray(t){const e=Array.isArray(this.options)?this.options:[];this.selectedItems=e.filter(e=>{const i=this.getOptionValue(e),s=this.emitFullObject?JSON.stringify(e):String(i);return t.some(t=>{const e=String(t);if(!this.emitFullObject)return e===s;try{const t=JSON.parse(e);return JSON.stringify(t)===s}catch{return e===s}})}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}getValidityAnchor(){return this}isEmpty(){return this.multiSelect?0===this.selectedItems.length:0===this.selectedItems.length||!this.value}getNativeControl(){return this.inputWrapperEl||null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){super.onFormReset(),this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.invalid=!1,this.validationErrors=[],this.validationActive=!1}onFormDisabled(t){this.disabled=t}onFormStateRestore(t){this.setValueFromFormState(t)}toggleSelectAll(){if(this.disabled||this.readonly)return;const t=t=>String(this.getOptionValue(t));if(this.isAllFilteredSelected()){const e=new Set(this.filteredOptions.map(t=>String(this.getOptionValue(t.original)))),i=this.selectedItems.filter(i=>!e.has(t(i)));if(this.enforceMinOneSelection&&0===i.length)return;this.selectedItems=i}else{const e=new Set(this.selectedItems.map(e=>t(e))),i=this.filteredOptions.map(t=>t.original).filter(i=>!e.has(t(i)));this.selectedItems=[...this.selectedItems,...i]}const e=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!!this.searchQuery.trim()},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.requestUpdate()}isAllFilteredSelected(){if(0===this.filteredOptions.length)return!1;return this.filteredOptions.map(t=>this.getOptionValue(t.original)).every(t=>this.selectedItems.some(e=>this.getOptionValue(e)===t))}truncateText(t,e){return t.length>e?t.slice(0,e)+"...":t}validateInput(){if(!this.validationActive)return;this.validationErrors=[];const t=this.validationArrayFormat?this.selectedItems:this.value;if(this.required&&this.isEmpty())this.validationErrors.push(this.requiredMessage||"Selection is required.");else if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);!0!==i&&this.validationErrors.push(String(i||"Invalid value."))}this.invalid=this.validationErrors.length>0,this.dispatchEvent(new CustomEvent(this.invalid?"validation-error":"validation-success",{detail:this.invalid?{errors:this.validationErrors}:{value:this.selectedItems},bubbles:!0,composed:!0})),this.syncValidity(),this.requestUpdate()}validateForForm(){if(this.disabled)return"";const t=this.validationArrayFormat?this.selectedItems:this.value;if(Array.isArray(this.validations)&&this.validations.length)for(const e of this.validations){const i=e(t);if(!0!==i)return String(i||"Invalid value.")}return this.enforceMinOneSelection&&this.isEmpty()?this.requiredMessage||"At least one selection is required.":this.required&&this.isEmpty()?this.requiredMessage||"Selection is required.":""}focus(t){super.focus(t),this.searchInputEl?this.searchInputEl.focus(t):this.inputWrapperEl&&this.inputWrapperEl.focus(t)}blur(){this.open&&this.dropdownPopover.closePopover("light-dismiss"),super.blur()}handleFocus(){this.focused=!0,this.validationActive||(this.validationActive=!0)}reset(){this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.validationErrors=[],this.validationActive=!1,this.open=!1,this.invalid=!1,this.syncFormValue(),this.syncValidity(),this.requestUpdate()}openDropdown(){this.disabled||this.readonly||this.dropdownPopover.openPopover()}closeDropdown(){this.dropdownPopover.closePopover("api")}clearSelection(){this.handleClear()}handleBlur(){this.open||(this.focused=!1,this.validationActive&&this.validateInput())}updated(t){t.has("color")&&this.style.setProperty("--sky-dropdown-color",v(this.color)),t.has("height")&&this.style.setProperty("--sky-scroll-height",this.height)}willUpdate(t){t.has("value")&&(this.syncSelectedItemsWithValue(),this.syncFormValue(),this.syncValidity()),t.has("options")&&(Array.isArray(this.options)||(this.options=[]),this.syncSelectedItemsWithValue(),this.filterOptions(),this.syncFormValue(),this.syncValidity()),t.has("searchable")&&this.filterOptions(),t.has("searchQuery")&&this.filterOptions(),t.has("validationErrors")&&this.requestUpdate()}syncSelectedItemsWithValue(){const t=Array.isArray(this.options)?this.options:[],e=this.multiSelect&&Array.isArray(this.value)&&0===this.value.length;if(null==this.value||""===this.value||e)return this.selectedItems=[],void(this.value=this.multiSelect?[]:"");if(this.multiSelect&&"string"==typeof this.value)try{const t=JSON.parse(this.value);Array.isArray(t)&&(this.value=t)}catch(t){}const i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)};if(this.multiSelect){const e=Array.isArray(this.value)?this.value:[this.value],s=new Set(e.map(t=>this.emitFullObject&&"object"==typeof t?JSON.stringify(t):String(t)));this.selectedItems=t.filter(t=>{const e=this.emitFullObject?JSON.stringify(t):i(t);return s.has(e)}),this.value=this.selectedItems.map(t=>this.emitFullObject?t:this.getOptionValue(t))}else{const e=this.emitFullObject&&"object"==typeof this.value?JSON.stringify(this.value):String(this.value),s=t.find(t=>(this.emitFullObject?JSON.stringify(t):i(t))===e);this.selectedItems=s?[s]:[],this.value=s?this.emitFullObject?s:this.getOptionValue(s):""}}filterOptions(){const t=Array.isArray(this.options)?this.options:[],e=(t,e)=>{const i=this.getOptionLabel(t);return{original:t,_idx:e,label:i,highlighted:i}};if(!this.searchable||!this.searchQuery.trim())return void(this.filteredOptions=t.map(e));const i=this.searchQuery.toLowerCase();this.filteredOptions=t.map(e).filter(t=>String(t.label).toLowerCase().includes(i)).map(t=>{const e=new RegExp(`(${i})`,"gi");return{...t,highlighted:String(t.label).replace(e,t=>`<span class="highlight">${t}</span>`)}})}emitSearchQueryChanged(){this.dispatchEvent(new CustomEvent("search-query-changed",{detail:{searchQuery:this.searchQuery},bubbles:!0,composed:!0}))}handleSearchValueChanged(t){t.stopPropagation(),this.disabled||this.readonly||this.applySearchQuery(String(t.detail?.value??""))}handleSearchValueCleared(t){t.stopPropagation(),this.disabled||this.readonly||this.applySearchQuery("")}applySearchQuery(t){this.searchQuery=t;const e=Array.isArray(this.options)?this.options.length:0,i=this.searchable&&e>A._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},A._SEARCH_DEBOUNCE_MS)):s()}disconnectedCallback(){super.disconnectedCallback(),null!=this._searchDebounceId&&(clearTimeout(this._searchDebounceId),this._searchDebounceId=null),null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null)}handleClear(){if(this.disabled||this.readonly)return;const t=this.multiSelect?this.selectedItems.length>0:!!this.value;this.enforceMinOneSelection&&t||(this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity())}selectOption(t){if(this.disabled||this.readonly)return;const e=t=>this.emitFullObject?t:this.getOptionValue(t),i=t=>{const e=this.getOptionValue(t);return"object"==typeof e?JSON.stringify(e):String(e)},s=""!==this.searchQuery.trim();if(!this.multiSelect){const o=this.selectedItems.length&&i(this.selectedItems[0])===i(t);return o&&this.enforceMinOneSelection?void(this.open=!1):(o?(this.selectedItems=[],this.value=""):(this.selectedItems=[t],this.value=e(t)),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.selectedItems.map(e),isFilteredSelection:s},bubbles:!0,composed:!0})),this.dropdownPopover.closePopover("api"),this.syncFormValue(),this.syncValidity(),void this.requestUpdate())}const o=this.selectedItems.findIndex(e=>i(e)===i(t));let r;r=o>-1?[...this.selectedItems.slice(0,o),...this.selectedItems.slice(o+1)]:[...this.selectedItems,t],this.enforceMinOneSelection&&0===r.length||(this.selectedItems=r,this.value=r.map(e),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.value,isFilteredSelection:s},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.open=!0,this.requestUpdate())}toggleHiddenChips(t){t.stopPropagation(),t.preventDefault(),this.disabled||this.readonly||(this.open&&this.dropdownPopover.closePopover("api"),this.hiddenPopover.toggle())}renderHiddenChipsDropdown(){return s`
|
|
1
|
+
import{unsafeCSS as e,css as t,LitElement as i,html as s,nothing as o}from"lit";import{property as r,state as n,query as a,queryAll as l,queryAssignedElements as h,customElement as d}from"lit/decorators.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{when as c}from"lit/directives/when.js";import{repeat as u}from"lit/directives/repeat.js";import{classMap as y}from"lit/directives/class-map.js";import{resolveColor as v}from"../helper/utils/color-resolver.js";import{cssOnFillEnhance as m}from"../helper/utils/contrast-color.js";import{PopoverController as g}from"../helper/controllers/popover-controller.js";import{FormControlBase as f}from"../helper/internals/form-control-base.js";import{SkyIcon as b}from"../sky-icon/sky-icon.js";import{SkyCheckbox as k}from"../sky-checkbox/sky-checkbox.js";import{SkyInput as w}from"../sky-input/sky-input.js";import{PresetController as x}from"../helper/controllers/preset-controller.js";var S=Object.defineProperty,I=Object.getOwnPropertyDescriptor,O=(e,t,i,s)=>{for(var o,r=s>1?void 0:s?I(t,i):t,n=e.length-1;n>=0;n--)(o=e[n])&&(r=(s?o(t,i,r):o(r))||r);return s&&r&&S(t,i,r),r};const A="$rendererState";function $(e){const t=e?.[A];return function(e){if(null==e||"object"!=typeof e||Array.isArray(e))return!1;const t=e;return"function"!=typeof t.option&&"function"!=typeof t.selected}(t)?{...t}:{}}let E=class extends f{constructor(){super(),this.value="",this.placeholder="Select An Option",this.searchPlaceholder="Search...",this.label="",this._options=[],this.chipSize=20,this.color="primary",this.clearable=!1,this.loading=!1,this.compact=!1,this.disabled=!1,this.searchable=!1,this.multiSelect=!1,this.visibleChips=2,this.selectAll=!1,this._validations=[],this.showErrors=!1,this.errorDisplayMode="single",this.required=!1,this.emitFullObject=!1,this.emittedKey="value",this.displayKey="",this._customRenderers={},this.addOption=!1,this.validationArrayFormat=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.justify="flex-start",this.zIndex=11,this.height="200px",this.requiredMessage="Selection is required.",this.readonly=!1,this.enforceMinOneSelection=!1,this.openAbove=!1,this.validationActive=!1,this.invalid=!1,this.variant="default",this.multiDisplay="chips",this.searchQuery="",this.filteredOptions=[],this.focused=!1,this.open=!1,this.selectedItems=[],this.hiddenChipsOpen=!1,this.activeIndex=-1,this.validationErrors=[],this.validationStatus=[],this.hasLeftIcon=!1,this.hasRightIcon=!1,this.optionSlotSet=new Set,this._rendererRuntimeState={},this._searchDebounceId=null,this._closeResetId=null,this.dropdownPopover=new g(this,{getAnchor:()=>this.inputWrapperEl,getPopover:()=>this.dropdownEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>"bottom",getAlign:()=>"start",getGap:()=>6,getPadding:()=>8,getMatchAnchorWidth:()=>!0,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>160,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,onOpenChange:(e,t)=>{this.open=e,e?(this.focused=!0,null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null),this.validationActive=!0,this.filterOptions(),requestAnimationFrame(()=>this.focusOnOpen())):(this.activeIndex=-1,null!=this._closeResetId&&clearTimeout(this._closeResetId),this._closeResetId=setTimeout(()=>{this._closeResetId=null,this.open||(this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions())},E._CLOSE_RESET_MS),this.hiddenChipsOpen=!1,this.hiddenPopover.closePopover("api"))}}),this.hiddenPopover=new g(this,{getAnchor:()=>this.overflowChipEl,getPopover:()=>this.hiddenDropdownEl,cssVarLeft:"--sky-hc-left",cssVarTop:"--sky-hc-top",cssVarWidth:"--sky-hc-width",getPlacement:()=>"bottom",getAlign:()=>"center",getGap:()=>4,getPadding:()=>8,getMatchAnchorWidth:()=>!1,getMaxWidthToViewport:()=>!0,getMaxWidthMode:()=>"cap",getFlip:()=>!0,getFlipOrder:()=>[],getAnimateReposition:()=>!0,getRepositionMs:()=>120,getCloseOnEscape:()=>!0,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!1,onOpenChange:e=>{this.hiddenChipsOpen=e,e&&this.open&&this.dropdownPopover.closePopover("api")}}),this.preset="",this._presets=new x(this),this.refreshOptionSlots=()=>{const e=new Set;this.querySelectorAll('[slot^="option-"]').forEach(t=>{const i=t.slot;i&&e.add(i)}),this.optionSlotSet=e},this.onSearchKeydown=e=>{const{key:t,shiftKey:i}=e;if("Enter"===t)return e.preventDefault(),e.stopPropagation(),void this.commitDropdownEnter();if("ArrowDown"===t||"ArrowUp"===t||"Tab"===t){e.preventDefault(),e.stopPropagation();const i=this.searchable||this.addOption,s=this.multiSelect&&this.selectAll?i?1:0:this.headerRows,o=this.headerRows+Math.max(0,this.filteredOptions.length)-1,r="ArrowUp"===t||"Tab"===t&&e.shiftKey?-1:1;this.activeIndex<s?this.activeIndex=s:this.activeIndex=this.activeIndex+r<s?o:this.activeIndex+r>o?s:this.activeIndex+r,this.scrollActiveItemIntoView()}return"Escape"===t?(e.preventDefault(),e.stopPropagation(),void this.dropdownPopover.closePopover("escape")):void 0},this.handleAddaddOption=e=>{if(e.stopPropagation(),this.disabled||this.readonly)return;if(!this.canAddaddOption())return;const t=this.searchQuery.trim();this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:t},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()},this.onIconSlotChange=()=>{this.hasLeftIcon=(this.iconLeftEls?.length??0)>0,this.hasRightIcon=(this.iconRightEls?.length??0)>0},this.captureDefaultValue("")}get options(){return this._options}set options(e){const t=this._options;this._options=Array.isArray(e)?e:[],this.requestUpdate("options",t)}get validations(){return this._validations}set validations(e){const t=this._validations;this._validations=Array.isArray(e)?e:[],this.requestUpdate("validations",t)}get customRenderers(){return this._customRenderers}set customRenderers(e){const t=this._customRenderers;this._customRenderers=null==e||"object"!=typeof e||Array.isArray(e)?{}:e,this.requestUpdate("customRenderers",t)}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.refreshOptionSlots()}firstUpdated(){this.dropdownPopover.refreshTargets(),this.hiddenPopover.refreshTargets()}getFormValue(){if(this.disabled||!this.name)return null;if(this.multiSelect){const e=new FormData;return this.selectedItems.forEach(t=>{const i=this.emitFullObject?JSON.stringify(t):String(this.getOptionValue(t));e.append(this.name,i)}),0===this.selectedItems.length&&this.required&&e.append(this.name,""),e}{if(0===this.selectedItems.length)return"";const e=this.selectedItems[0];return this.emitFullObject?JSON.stringify(e):String(this.getOptionValue(e))}}setValueFromFormState(e){if(null===e||""===e)return this.value=this.multiSelect?[]:"",void(this.selectedItems=[]);if(this.multiSelect){let t=[];if(e instanceof FormData)t=e.getAll(this.name);else if(Array.isArray(e))t=e;else if("string"==typeof e)try{const i=JSON.parse(e);t=Array.isArray(i)?i:[e]}catch{t=[e]}this.setValueFromArray(t)}else{let t="";"string"==typeof e?t=e:e instanceof FormData?t=e.get(this.name)?.toString()||"":Array.isArray(e)&&e.length>0&&(t=e[0].toString()),this.value=t,this.syncSelectedItemsWithValue()}}syncFormValue(){if(!this.name||this.disabled)return void this.internals.setFormValue(null);const e=this.getFormValue();if(null!==e)if(this.multiSelect&&Array.isArray(e)){const t=new FormData;e.forEach(e=>{null!=e&&""!==e&&t.append(this.name,String(e))}),this.internals.setFormValue(t)}else this.internals.setFormValue(e);else this.internals.setFormValue(null)}setValueFromArray(e){const t=Array.isArray(this.options)?this.options:[];this.selectedItems=t.filter(t=>{const i=this.getOptionValue(t),s=this.emitFullObject?JSON.stringify(t):String(i);return e.some(e=>{const t=String(e);if(!this.emitFullObject)return t===s;try{const e=JSON.parse(t);return JSON.stringify(e)===s}catch{return t===s}})}),this.value=this.selectedItems.map(e=>this.emitFullObject?e:this.getOptionValue(e))}getValidityAnchor(){return this}isEmpty(){return this.multiSelect?0===this.selectedItems.length:0===this.selectedItems.length||!this.value}getNativeControl(){return this.inputWrapperEl||null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){super.onFormReset(),this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.invalid=!1,this.validationErrors=[],this.validationActive=!1}onFormDisabled(e){this.disabled=e}onFormStateRestore(e){this.setValueFromFormState(e)}toggleSelectAll(){if(this.disabled||this.readonly)return;if(this.isAllFilteredSelected()){const e=new Set(this.filteredOptions.map(e=>this.optionKey(e.original))),t=this.selectedItems.filter(t=>!e.has(this.optionKey(t)));if(this.enforceMinOneSelection&&0===t.length)return;this.selectedItems=t}else{const e=new Set(this.selectedItems.map(e=>this.optionKey(e))),t=this.filteredOptions.map(e=>e.original).filter(t=>!e.has(this.optionKey(t)));this.selectedItems=[...this.selectedItems,...t]}const e=this.selectedItems.map(e=>this.emitFullObject?e:this.getOptionValue(e));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!!this.searchQuery.trim()},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.requestUpdate()}isAllFilteredSelected(){if(0===this.filteredOptions.length)return!1;const e=new Set(this.selectedItems.map(e=>this.optionKey(e)));return this.filteredOptions.every(t=>e.has(this.optionKey(t.original)))}truncateText(e,t){return e.length>t?e.slice(0,t)+"...":e}validateInput(){if(!this.validationActive)return;this.validationErrors=[];const e=this.validationArrayFormat?this.selectedItems:this.value;if(this.required&&this.isEmpty())this.validationErrors.push(this.requiredMessage||"Selection is required.");else if(Array.isArray(this.validations)&&this.validations.length)for(const t of this.validations){const i=t(e);!0!==i&&this.validationErrors.push(String(i||"Invalid value."))}this.invalid=this.validationErrors.length>0,this.dispatchEvent(new CustomEvent(this.invalid?"validation-error":"validation-success",{detail:this.invalid?{errors:this.validationErrors}:{value:this.selectedItems},bubbles:!0,composed:!0})),this.syncValidity(),this.requestUpdate()}validateForForm(){if(this.disabled)return"";const e=this.validationArrayFormat?this.selectedItems:this.value;if(Array.isArray(this.validations)&&this.validations.length)for(const t of this.validations){const i=t(e);if(!0!==i)return String(i||"Invalid value.")}return this.enforceMinOneSelection&&this.isEmpty()?this.requiredMessage||"At least one selection is required.":this.required&&this.isEmpty()?this.requiredMessage||"Selection is required.":""}focus(e){super.focus(e),this.searchInputEl?this.searchInputEl.focus(e):this.inputWrapperEl&&this.inputWrapperEl.focus(e)}blur(){this.open&&this.dropdownPopover.closePopover("light-dismiss"),super.blur()}handleFocus(){this.focused=!0,this.validationActive||(this.validationActive=!0)}reset(){this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions(),this.validationErrors=[],this.validationActive=!1,this.open=!1,this.invalid=!1,this.syncFormValue(),this.syncValidity(),this.requestUpdate()}openDropdown(){this.disabled||this.readonly||this.dropdownPopover.openPopover()}closeDropdown(){this.dropdownPopover.closePopover("api")}clearSelection(){this.handleClear()}handleBlur(){this.open||(this.focused=!1,this.validationActive&&this.validateInput())}updated(e){e.has("color")&&this.style.setProperty("--sky-dropdown-color",v(this.color)),e.has("height")&&this.style.setProperty("--sky-scroll-height",this.height)}willUpdate(e){e.has("customRenderers")&&this.syncRendererStateFromProp(),e.has("value")&&(this.syncSelectedItemsWithValue(),this.syncFormValue(),this.syncValidity()),e.has("options")&&(Array.isArray(this.options)||(this.options=[]),this.syncSelectedItemsWithValue(),this.filterOptions(),this.syncFormValue(),this.syncValidity()),e.has("searchable")&&this.filterOptions(),e.has("searchQuery")&&this.filterOptions(),e.has("validationErrors")&&this.requestUpdate()}patchRendererState(e){this._rendererRuntimeState={...this._rendererRuntimeState,...e},this.requestUpdate()}syncRendererStateFromProp(){const e=$(this.customRenderers);this._rendererRuntimeState={...this._rendererRuntimeState,...e}}rendererStateApi(){return{rendererState:this._rendererRuntimeState,patchRendererState:e=>this.patchRendererState(e)}}buildOptionRenderContext(e){return{index:e.index,sourceIndex:e.sourceIndex,label:String(this.getOptionLabel(e.option)),highlightedLabel:e.highlightedLabel,selected:e.selected,active:e.active,multiSelect:this.multiSelect,...this.rendererStateApi()}}buildSelectedRenderContext(e,t){return{selectedItems:[...this.selectedItems],index:t,multiSelect:this.multiSelect,multiDisplay:this.resolveMultiDisplay(),label:String(this.getOptionLabel(e)),...this.rendererStateApi()}}renderOptionContent(e){const t=s`<span
|
|
2
|
+
class="highlighted-text"
|
|
3
|
+
part="highlighted-text"
|
|
4
|
+
>${p(e.highlighted)}</span
|
|
5
|
+
>`;if(e.hasSlot)return s`
|
|
6
|
+
<div style="display: flex; gap: 8px;width:100%">
|
|
7
|
+
<slot name=${e.slotName}> ${t} </slot>
|
|
8
|
+
</div>
|
|
9
|
+
`;const i=this.customRenderers?.option;if(i){const t=i(e.option,this.buildOptionRenderContext({option:e.option,index:e.index,sourceIndex:e.sourceIndex,highlightedLabel:e.highlighted,selected:e.selected,active:e.active}));return s`<div style="display: flex; gap: 8px;width:100%">
|
|
10
|
+
${t}
|
|
11
|
+
</div>`}return t}renderSelectedLabel(e,t){const i=this.customRenderers?.selected;return i?i(e,this.buildSelectedRenderContext(e,t)):this.truncateText(String(this.getOptionLabel(e)),this.chipSize)}renderSelectedSummaryLabel(e,t){const i=this.customRenderers?.selected;return i?i(e,this.buildSelectedRenderContext(e,t)):String(this.getOptionLabel(e))}syncSelectedItemsWithValue(){const e=Array.isArray(this.options)?this.options:[],t=this.multiSelect&&Array.isArray(this.value)&&0===this.value.length;if(null==this.value||""===this.value||t)return this.selectedItems=[],void(this.value=this.multiSelect?[]:"");if(this.multiSelect&&"string"==typeof this.value)try{const e=JSON.parse(this.value);Array.isArray(e)&&(this.value=e)}catch(e){}if(this.multiSelect){const t=Array.isArray(this.value)?this.value:[this.value],i=new Set(t.map(e=>this.optionKey(e)));this.selectedItems=e.filter(e=>i.has(this.optionKey(e))),this.value=this.selectedItems.map(e=>this.emitFullObject?e:this.getOptionValue(e))}else{const t=this.optionKey(this.value),i=e.find(e=>this.optionKey(e)===t);this.selectedItems=i?[i]:[],this.value=i?this.emitFullObject?i:this.getOptionValue(i):""}}filterOptions(){const e=Array.isArray(this.options)?this.options:[],t=(e,t)=>{const i=this.getOptionLabel(e);return{original:e,_idx:t,label:i,highlighted:i}};if(!this.searchable||!this.searchQuery.trim())return void(this.filteredOptions=e.map(t));const i=this.searchQuery.toLowerCase();this.filteredOptions=e.map(t).filter(e=>String(e.label).toLowerCase().includes(i)).map(e=>{const t=new RegExp(`(${i})`,"gi");return{...e,highlighted:String(e.label).replace(t,e=>`<span class="highlight">${e}</span>`)}})}emitSearchQueryChanged(){this.dispatchEvent(new CustomEvent("search-query-changed",{detail:{searchQuery:this.searchQuery},bubbles:!0,composed:!0}))}handleSearchValueChanged(e){e.stopPropagation(),this.disabled||this.readonly||this.applySearchQuery(String(e.detail?.value??""))}handleSearchValueCleared(e){e.stopPropagation(),this.disabled||this.readonly||this.applySearchQuery("")}applySearchQuery(e){this.searchQuery=e;const t=Array.isArray(this.options)?this.options.length:0,i=this.searchable&&t>E._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD,s=()=>{this.filterOptions(),this.emitSearchQueryChanged()};i?(null!=this._searchDebounceId&&clearTimeout(this._searchDebounceId),this._searchDebounceId=setTimeout(()=>{this._searchDebounceId=null,s()},E._SEARCH_DEBOUNCE_MS)):s()}disconnectedCallback(){super.disconnectedCallback(),null!=this._searchDebounceId&&(clearTimeout(this._searchDebounceId),this._searchDebounceId=null),null!=this._closeResetId&&(clearTimeout(this._closeResetId),this._closeResetId=null)}handleClear(){if(this.disabled||this.readonly)return;const e=this.multiSelect?this.selectedItems.length>0:!!this.value;this.enforceMinOneSelection&&e||(this.value=this.multiSelect?[]:"",this.selectedItems=[],this.searchQuery="",this.emitSearchQueryChanged(),this.open=!1,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity())}selectOption(e){if(this.disabled||this.readonly)return;const t=e=>this.emitFullObject?e:this.getOptionValue(e),i=""!==this.searchQuery.trim();if(!this.multiSelect){const s=this.selectedItems.length&&this.optionKey(this.selectedItems[0])===this.optionKey(e);return s&&this.enforceMinOneSelection?void(this.open=!1):(s?(this.selectedItems=[],this.value=""):(this.selectedItems=[e],this.value=t(e)),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.selectedItems.map(t),isFilteredSelection:i},bubbles:!0,composed:!0})),this.dropdownPopover.closePopover("api"),this.syncFormValue(),this.syncValidity(),void this.requestUpdate())}const s=this.selectedItems.findIndex(t=>this.optionKey(t)===this.optionKey(e));let o;o=s>-1?[...this.selectedItems.slice(0,s),...this.selectedItems.slice(s+1)]:[...this.selectedItems,e],this.enforceMinOneSelection&&0===o.length||(this.selectedItems=o,this.value=o.map(t),this.validateInput(),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:this.selectedItems,emittedValues:this.value,isFilteredSelection:i},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity(),this.open=!0,this.requestUpdate())}toggleHiddenChips(e){e.stopPropagation(),e.preventDefault(),this.disabled||this.readonly||(this.open&&this.dropdownPopover.closePopover("api"),this.hiddenPopover.toggle())}renderHiddenChipsDropdown(){return s`
|
|
2
12
|
<div
|
|
3
13
|
class="hidden-chips-dropdown"
|
|
4
14
|
part="hidden-chips-dropdown"
|
|
5
15
|
popover="manual"
|
|
6
16
|
@toggle=${this.hiddenPopover.onToggle}
|
|
7
|
-
@click=${
|
|
17
|
+
@click=${e=>e.stopPropagation()}
|
|
8
18
|
style="
|
|
9
19
|
left: var(--sky-hc-left, 0px);
|
|
10
20
|
top: var(--sky-hc-top, 0px);
|
|
@@ -12,38 +22,38 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
12
22
|
z-index: ${this.zIndex};
|
|
13
23
|
"
|
|
14
24
|
>
|
|
15
|
-
${u(this.selectedItems.slice(this.visibleChips),
|
|
25
|
+
${u(this.selectedItems.slice(this.visibleChips),e=>this.optionKey(e),e=>s`
|
|
16
26
|
<div class="hidden-chip-inner" part="hidden-chip-inner">
|
|
17
27
|
<span part="hidden-chip-label">
|
|
18
|
-
${this.
|
|
28
|
+
${this.renderSelectedLabel(e,this.selectedItems.indexOf(e))}
|
|
19
29
|
</span>
|
|
20
30
|
<sky-icon
|
|
21
31
|
part="remove-chip-icon"
|
|
22
32
|
class="remove-chip-inner"
|
|
23
33
|
icon="ion:close"
|
|
24
|
-
@click=${
|
|
34
|
+
@click=${t=>{t.stopPropagation(),this.removeChip(e)}}
|
|
25
35
|
></sky-icon>
|
|
26
36
|
</div>
|
|
27
37
|
`)}
|
|
28
38
|
</div>
|
|
29
|
-
`}removeChip(
|
|
30
|
-
${u(
|
|
39
|
+
`}removeChip(e){if(this.disabled||this.readonly)return;const t=this.selectedItems.filter(t=>this.optionKey(t)!==this.optionKey(e));if(!this.enforceMinOneSelection||0!==t.length){if(this.selectedItems=t,this.selectedItems.length<=this.visibleChips&&this.hiddenPopover.closePopover("api"),this.multiSelect){const e=this.selectedItems.map(e=>this.emitFullObject?e:this.getOptionValue(e));this.value=e,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:e,selectedItems:[...this.selectedItems],emittedValues:e,isFilteredSelection:!1},bubbles:!0,composed:!0}))}else this.value="",this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value,selectedItems:[],isFilteredSelection:!1},bubbles:!0,composed:!0}));this.syncFormValue(),this.syncValidity(),this.validateInput(),this.requestUpdate()}}renderChips(){const e=Array.isArray(this.selectedItems)?this.selectedItems.slice(0,this.visibleChips):[],t=this.selectedItems.length-this.visibleChips;return s`
|
|
40
|
+
${u(e,e=>this.optionKey(e),(e,t)=>s`
|
|
31
41
|
<span class="chip" ?compact=${this.compact} part="chip">
|
|
32
42
|
<span class="chip-label" part="chip-label"
|
|
33
|
-
>${this.
|
|
43
|
+
>${this.renderSelectedLabel(e,t)}</span
|
|
34
44
|
>
|
|
35
45
|
${c(this.multiSelect,()=>s`
|
|
36
46
|
<sky-icon
|
|
37
47
|
class="remove-chip"
|
|
38
48
|
part="remove-chip-icon"
|
|
39
49
|
?compact=${this.compact}
|
|
40
|
-
@click=${
|
|
50
|
+
@click=${t=>{t.stopPropagation(),this.removeChip(e)}}
|
|
41
51
|
icon="ion:close"
|
|
42
52
|
></sky-icon>
|
|
43
53
|
`)}
|
|
44
54
|
</span>
|
|
45
55
|
`)}
|
|
46
|
-
${c(
|
|
56
|
+
${c(t>0,()=>s`
|
|
47
57
|
<span
|
|
48
58
|
class="chip overflow-chip"
|
|
49
59
|
part="overflow-chip"
|
|
@@ -51,35 +61,43 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
51
61
|
?compact=${this.compact}
|
|
52
62
|
@click=${this.toggleHiddenChips}
|
|
53
63
|
>
|
|
54
|
-
+ ${
|
|
64
|
+
+ ${t}
|
|
55
65
|
</span>
|
|
56
66
|
`)}
|
|
57
|
-
`}resolveMultiDisplay(){const
|
|
67
|
+
`}resolveMultiDisplay(){const e=this.multiDisplay;return"text"===e||"count"===e||"chips"===e?e:"chips"}renderSelectedValue(){if(!this.selectedItems.length)return null;if(!this.multiSelect){const e=this.selectedItems[0],t=String(this.getOptionLabel(e));return s`
|
|
58
68
|
<span
|
|
59
69
|
class="value-summary"
|
|
60
70
|
part="value-summary single-select-chip"
|
|
61
71
|
title=${t}
|
|
62
|
-
>${
|
|
72
|
+
>${this.renderSelectedSummaryLabel(e,0)}</span
|
|
63
73
|
>
|
|
64
|
-
`}const
|
|
74
|
+
`}const e=this.resolveMultiDisplay();if("text"===e){const e=this.customRenderers?.selected;if(e)return s`
|
|
75
|
+
<span class="value-summary" part="value-summary">
|
|
76
|
+
${this.selectedItems.map((t,i)=>s`${i>0?", ":""}${e(t,this.buildSelectedRenderContext(t,i))}`)}
|
|
77
|
+
</span>
|
|
78
|
+
`;const t=this.selectedItems.map(e=>String(this.getOptionLabel(e))).join(", ");return s`
|
|
65
79
|
<span class="value-summary" part="value-summary" title=${t}
|
|
66
80
|
>${t}</span
|
|
67
81
|
>
|
|
68
|
-
`}if("count"===
|
|
69
|
-
|
|
82
|
+
`}if("count"===e){const e=this.selectedItems.length,t=String(this.getOptionLabel(this.selectedItems[0])),i=1===e?t:`${t} +${e-1}`,r=this.selectedItems.map(e=>String(this.getOptionLabel(e))).join(", "),n=this.customRenderers?.selected;return n?s`
|
|
83
|
+
<span class="value-summary" part="value-summary" title=${r}>
|
|
84
|
+
${n(this.selectedItems[0],this.buildSelectedRenderContext(this.selectedItems[0],0))}${e>1?" +"+(e-1):o}
|
|
85
|
+
</span>
|
|
86
|
+
`:s`
|
|
87
|
+
<span class="value-summary" part="value-summary" title=${r}
|
|
70
88
|
>${i}</span
|
|
71
89
|
>
|
|
72
90
|
`}return s`
|
|
73
91
|
<div class="chip-container" part="chip-container" ?compact=${this.compact}>
|
|
74
92
|
${this.renderChips()}
|
|
75
93
|
</div>
|
|
76
|
-
`}handleKeydown(
|
|
94
|
+
`}handleKeydown(e){if(e.target?.closest(".search-container"))return;const{key:t,shiftKey:i}=e;if(!this.open&&("ArrowDown"===t||"ArrowUp"===t||"Enter"===t))return this.dropdownPopover.openPopover(),void e.preventDefault();if(!this.open)return;const s=this.searchable||this.addOption,o=this.multiSelect&&this.selectAll?s?1:0:this.headerRows,r=this.headerRows+Math.max(0,this.filteredOptions.length)-1;if(this.activeIndex<o&&(this.activeIndex=o),"ArrowDown"===t){const t=this.activeIndex<o?o:this.activeIndex;return this.activeIndex=t>=r?o:t+1,this.scrollActiveItemIntoView(),void e.preventDefault()}if("ArrowUp"===t){const t=this.activeIndex<o?o:this.activeIndex;return this.activeIndex=t<=o?r:t-1,this.scrollActiveItemIntoView(),void e.preventDefault()}if("Tab"===t){if(i){const e=this.activeIndex<o?o:this.activeIndex;this.activeIndex=e<=o?r:e-1}else{const e=this.activeIndex<o?o:this.activeIndex;this.activeIndex=e>=r?o:e+1}return this.scrollActiveItemIntoView(),void e.preventDefault()}return"Enter"===t?(e.preventDefault(),e.stopPropagation(),void this.commitDropdownEnter()):this.readonly?void("Escape"===t&&(this.open=!1,e.preventDefault())):"Home"===t?(this.activeIndex=o,this.scrollActiveItemIntoView(),void e.preventDefault()):"End"===t?(this.activeIndex=Math.max(o,r),this.scrollActiveItemIntoView(),void e.preventDefault()):void 0}get headerRows(){let e=0;return(this.searchable||this.addOption)&&(e+=1),this.multiSelect&&this.selectAll&&(e+=1),e}getOptionByActiveIndex(){if(!this.open)return null;const e=this.activeIndex;if(e<0)return null;if((this.searchable||this.addOption)&&0===e)return{kind:"search"};const t=this.searchable||this.addOption?1:0;if(this.multiSelect&&this.selectAll&&e===t)return{kind:"select-all"};const i=e-this.headerRows;return i>=0&&i<this.filteredOptions.length?{kind:"option",optionIndex:i}:null}commitDropdownEnter(){const e=this.getOptionByActiveIndex();if(e)if("search"!==e.kind)if("select-all"!==e.kind){if("option"===e.kind&&"number"==typeof e.optionIndex){const t=this.filteredOptions[e.optionIndex].original;this.selectOption(t)}}else this.toggleSelectAll();else this.addOption&&this.canAddaddOption()?(this.dispatchEvent(new CustomEvent("add-new-option",{detail:{value:this.searchQuery.trim()},bubbles:!0,composed:!0})),this.searchQuery="",this.emitSearchQueryChanged(),this.filterOptions()):this.filteredOptions.length>0&&this.selectOption(this.filteredOptions[0].original)}focusOnOpen(){const e=this.searchInputEl;if(e&&document.activeElement!==e&&requestAnimationFrame(()=>e.focus()),this.filteredOptions.length>0){let e=0;if(this.selectedItems.length>0){const t=this.optionKey(this.selectedItems[0]),i=this.filteredOptions.findIndex(e=>this.optionKey(e.original)===t);i>=0&&(e=i)}return this.activeIndex=this.headerRows+e,void this.scrollActiveItemIntoView()}this.activeIndex=this.searchable||this.addOption?0:-1}canAddaddOption(){if(!this.addOption)return!1;const e=this.searchQuery.trim();if(!e)return!1;return!(Array.isArray(this.options)?this.options:[]).some(t=>{const i=String(this.getOptionLabel(t)||"").toLowerCase(),s=(this.getOptionValue(t)??"").toString().toLowerCase();return i===e.toLowerCase()||s===e.toLowerCase()})}scrollActiveItemIntoView(){const e=Array.from(this.rowEls).find(e=>Number(e.dataset.rowIndex)===this.activeIndex);e?.scrollIntoView({block:"nearest",behavior:"smooth"})}toggleDropdown(e){e.stopPropagation(),this.disabled||this.readonly||(this.hiddenChipsOpen&&this.hiddenPopover.closePopover("api"),this.validationActive=!0,this.dropdownPopover.toggle())}renderDropdown(){return s`
|
|
77
95
|
<div
|
|
78
96
|
class="dropdown"
|
|
79
97
|
part="dropdown"
|
|
80
98
|
popover="manual"
|
|
81
99
|
@toggle=${this.dropdownPopover.onToggle}
|
|
82
|
-
@click=${
|
|
100
|
+
@click=${e=>e.stopPropagation()}
|
|
83
101
|
style="
|
|
84
102
|
left: var(--sky-dd-left, 0px);
|
|
85
103
|
top: var(--sky-dd-top, 0px);
|
|
@@ -125,10 +143,10 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
125
143
|
`)}
|
|
126
144
|
|
|
127
145
|
<div class="dropdown-scroller">
|
|
128
|
-
${c(this.multiSelect&&this.selectAll&&this.filteredOptions.length,()=>{const
|
|
146
|
+
${c(this.multiSelect&&this.selectAll&&this.filteredOptions.length,()=>{const e=this.searchable||this.addOption?1:0,t=y({"dropdown-item":!0,active:this.activeIndex===e,selected:this.isAllFilteredSelected()});return s`
|
|
129
147
|
<div
|
|
130
|
-
class=${
|
|
131
|
-
data-row-index=${
|
|
148
|
+
class=${t}
|
|
149
|
+
data-row-index=${e}
|
|
132
150
|
style="justify-content: ${this.justify};"
|
|
133
151
|
part="select-all"
|
|
134
152
|
@click=${this.toggleSelectAll}
|
|
@@ -140,35 +158,21 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
140
158
|
Select All
|
|
141
159
|
</div>
|
|
142
160
|
`})}
|
|
143
|
-
${c(this.filteredOptions.length>0,()=>u(this.filteredOptions,({original:
|
|
161
|
+
${c(this.filteredOptions.length>0,()=>u(this.filteredOptions,({original:e,_idx:t})=>`${t}-${this.optionKey(e)}`,({original:e,highlighted:t,_idx:i},o)=>{const r=`option-${i}`,n=this.optionSlotSet.has(r),a=Array.isArray(this.selectedItems)&&this.selectedItems.some(t=>this.optionKey(t)===this.optionKey(e)),l=this.headerRows+o,h=l===this.activeIndex,d=y({"dropdown-item":!0,active:h,selected:a});return s`
|
|
144
162
|
<div
|
|
145
|
-
class=${
|
|
146
|
-
data-row-index=${
|
|
163
|
+
class=${d}
|
|
164
|
+
data-row-index=${l}
|
|
147
165
|
style="justify-content: ${this.justify};"
|
|
148
166
|
part="option"
|
|
149
|
-
@click=${()=>this.selectOption(
|
|
150
|
-
@pointerenter=${()=>{this.activeIndex=
|
|
167
|
+
@click=${()=>this.selectOption(e)}
|
|
168
|
+
@pointerenter=${()=>{this.activeIndex=l}}
|
|
151
169
|
?compact=${this.compact}
|
|
152
170
|
>
|
|
153
171
|
${c(this.multiSelect,()=>s` <sky-checkbox
|
|
154
|
-
.checked=${
|
|
172
|
+
.checked=${a}
|
|
155
173
|
readonly
|
|
156
174
|
></sky-checkbox>`)}
|
|
157
|
-
${
|
|
158
|
-
<div style="display: flex; gap: 8px;width:100%">
|
|
159
|
-
<slot name=${r}>
|
|
160
|
-
<span
|
|
161
|
-
class="highlighted-text"
|
|
162
|
-
part="highlighted-text"
|
|
163
|
-
>${p(e)}</span
|
|
164
|
-
>
|
|
165
|
-
</slot>
|
|
166
|
-
</div>
|
|
167
|
-
`,()=>s`<span
|
|
168
|
-
class="highlighted-text"
|
|
169
|
-
part="highlighted-text"
|
|
170
|
-
>${p(e)}</span
|
|
171
|
-
>`)}
|
|
175
|
+
${this.renderOptionContent({option:e,index:o,sourceIndex:i,highlighted:t,selected:a,active:h,hasSlot:n,slotName:r})}
|
|
172
176
|
</div>
|
|
173
177
|
`}),()=>s`<div
|
|
174
178
|
class="dropdown-item"
|
|
@@ -179,18 +183,18 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
179
183
|
</div>`)}
|
|
180
184
|
</div>
|
|
181
185
|
</div>
|
|
182
|
-
`}getOptionValue(
|
|
186
|
+
`}getOptionValue(e){return this.emitFullObject?e:"object"==typeof e&&null!==e?this.emittedKey in e?e[this.emittedKey]:"value"in e?e.value:e:e}optionKey(e){if(null==e)return String(e);if("object"==typeof e){if(this.emittedKey&&this.emittedKey in e){const t=e[this.emittedKey];return"object"==typeof t&&null!==t?JSON.stringify(t):String(t)}const t=this.getOptionValue(e);return"object"==typeof t&&null!==t?JSON.stringify(t):String(t??"")}return String(e)}getOptionLabel(e){if(!e)return"";if(!Array.isArray(this.options)||this.options,this.displayKey&&"object"==typeof e&&e[this.displayKey])return String(e[this.displayKey]);if("object"==typeof e){const t=Object.values(e).filter(e=>"string"==typeof e);return t.length>0?t[0]:JSON.stringify(e)}return String(e)}renderValidationErrors(){if(!this.showErrors||!this.validationActive)return null;const e=this.getErrorMessages();if(!e.length)return null;const t=`${this.id||"sky-combobox"}-errors`;return s`
|
|
183
187
|
<div class="progress-message">
|
|
184
|
-
<ul id=${
|
|
185
|
-
${u(
|
|
188
|
+
<ul id=${t} class="error-list" part="error-list">
|
|
189
|
+
${u(e,e=>e,e=>s`<li class="error" part="error-item">${e}</li>`)}
|
|
186
190
|
</ul>
|
|
187
191
|
</div>
|
|
188
|
-
`}getErrorMessages(){const
|
|
192
|
+
`}getErrorMessages(){const e=Array.isArray(this.validationErrors)?this.validationErrors:[];switch(this.errorDisplayMode){case"single":return e.slice(0,1);case"all":return e;default:return[]}}handleIconClick(e,t){this.dispatchEvent(new CustomEvent("icon-click",{detail:{position:e,event:t},bubbles:!0,composed:!0}))}render(){const e=y({"icon-slot":!0,left:!0,focused:this.focused}),t=y({"icon-slot":!0,right:!0,focused:this.focused}),i=y({"placeholder-label":!0,active:this.selectedItems.length>0}),r="fieldset"===this.variant,n="inside"===this.variant,a=this.label?r?s`<legend class="label" part="label">${this.label}</legend>`:s`<div class="label" part="label">${this.label}</div>`:null,l=s`
|
|
189
193
|
<div
|
|
190
|
-
class=${
|
|
194
|
+
class=${e}
|
|
191
195
|
part="icon-slot"
|
|
192
196
|
?filled=${this.hasLeftIcon}
|
|
193
|
-
@click=${
|
|
197
|
+
@click=${e=>this.handleIconClick("left",e)}
|
|
194
198
|
>
|
|
195
199
|
<slot name="icon-left" @slotchange=${this.onIconSlotChange}></slot>
|
|
196
200
|
</div>
|
|
@@ -209,15 +213,15 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
209
213
|
class="clear-button"
|
|
210
214
|
part="clear-button"
|
|
211
215
|
?compact=${this.compact}
|
|
212
|
-
@click=${
|
|
216
|
+
@click=${e=>{e.stopPropagation(),this.handleClear()}}
|
|
213
217
|
?loading=${this.loading}
|
|
214
218
|
icon="ion:close"
|
|
215
219
|
></sky-icon>`)}
|
|
216
220
|
${c(this.loading,()=>s`<div class="loading-indicator right"></div>`,()=>this.hasRightIcon?s`<div
|
|
217
221
|
part="icon-slot"
|
|
218
|
-
class=${
|
|
222
|
+
class=${t}
|
|
219
223
|
?filled=${!0}
|
|
220
|
-
@click=${
|
|
224
|
+
@click=${e=>this.handleIconClick("right",e)}
|
|
221
225
|
>
|
|
222
226
|
<slot
|
|
223
227
|
name="icon-right"
|
|
@@ -232,7 +236,7 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
232
236
|
class="dropdown-button"
|
|
233
237
|
part="dropdown-button"
|
|
234
238
|
?compact=${this.compact}
|
|
235
|
-
@click=${
|
|
239
|
+
@click=${e=>{e.stopPropagation(),this.disabled||this.readonly||this.toggleDropdown(e)}}
|
|
236
240
|
icon=${this.open?"ion:ios-arrow-up":"ion:chevron-down"}
|
|
237
241
|
>
|
|
238
242
|
</sky-icon>
|
|
@@ -244,13 +248,13 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
244
248
|
`,u=s`
|
|
245
249
|
${l}
|
|
246
250
|
<div class="input-inside-main">
|
|
247
|
-
${
|
|
251
|
+
${a}
|
|
248
252
|
<div class="input-inside-row">
|
|
249
253
|
<div class="field-main" part="field-main">${h}</div>
|
|
250
254
|
</div>
|
|
251
255
|
</div>
|
|
252
256
|
${this.readonly?o:d}
|
|
253
|
-
`,v=
|
|
257
|
+
`,v=n?u:p,m=e=>{this.disabled||this.readonly||this.toggleDropdown(e)},g=this.handleKeydown,f=r?s`
|
|
254
258
|
<fieldset
|
|
255
259
|
class="input-wrapper"
|
|
256
260
|
tabindex="0"
|
|
@@ -263,7 +267,7 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
263
267
|
@click=${m}
|
|
264
268
|
@keydown=${g}
|
|
265
269
|
>
|
|
266
|
-
${
|
|
270
|
+
${a}
|
|
267
271
|
<div class="input-fieldset-body">${v}</div>
|
|
268
272
|
</fieldset>
|
|
269
273
|
`:s`
|
|
@@ -283,13 +287,13 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
283
287
|
</div>
|
|
284
288
|
`;return s`
|
|
285
289
|
<div class="combo-box-container" part="combo-box-container">
|
|
286
|
-
${r||
|
|
290
|
+
${r||n?o:a}
|
|
287
291
|
${f}
|
|
288
292
|
${this.renderHiddenChipsDropdown()} ${this.renderDropdown()}
|
|
289
293
|
${this.renderValidationErrors()}
|
|
290
294
|
<slot style="display:none" @slotchange=${this.refreshOptionSlots}></slot>
|
|
291
295
|
</div>
|
|
292
|
-
`}};
|
|
296
|
+
`}};E.dependencies={"sky-icon":b,"sky-checkbox":k,"sky-input":w},E._SEARCH_DEBOUNCE_MS=150,E._SEARCH_DEBOUNCE_OPTIONS_THRESHOLD=30,E._CLOSE_RESET_MS=250,E.styles=t`
|
|
293
297
|
:host {
|
|
294
298
|
display: block;
|
|
295
299
|
font-family: var(--sky-font);
|
|
@@ -1045,8 +1049,8 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
1045
1049
|
height: 100%;
|
|
1046
1050
|
max-height: 100%;
|
|
1047
1051
|
box-sizing: border-box;
|
|
1048
|
-
flex: 0 0
|
|
1049
|
-
width:
|
|
1052
|
+
flex: 0 0 auto;
|
|
1053
|
+
width: auto;
|
|
1050
1054
|
min-width: var(--sky-input-icon-width);
|
|
1051
1055
|
padding: 0;
|
|
1052
1056
|
background: none;
|
|
@@ -1358,6 +1362,6 @@ import{unsafeCSS as t,css as e,LitElement as i,html as s,nothing as o}from"lit";
|
|
|
1358
1362
|
cursor: not-allowed;
|
|
1359
1363
|
}
|
|
1360
1364
|
|
|
1361
|
-
${
|
|
1362
|
-
`,
|
|
1365
|
+
${e(m([{selector:".placeholder-label.active[compact]",fillVar:"--sky-dropdown-color"},{selector:".sky-checkbox:checked::after",fillVar:"--sky-active-primary",property:"border-color"},{selector:".sky-checkbox.indeterminate::after",fillVar:"--sky-active-primary",property:"background-color"}]))}
|
|
1366
|
+
`,E.shadowRootOptions={...i.shadowRootOptions,delegatesFocus:!0},O([r()],E.prototype,"value",2),O([r({type:String})],E.prototype,"placeholder",2),O([r({type:String})],E.prototype,"searchPlaceholder",2),O([r({type:String})],E.prototype,"label",2),O([r({type:Array})],E.prototype,"options",1),O([r({type:Number})],E.prototype,"chipSize",2),O([r({type:String})],E.prototype,"color",2),O([r({type:Boolean,reflect:!0})],E.prototype,"clearable",2),O([r({type:Boolean,reflect:!0})],E.prototype,"loading",2),O([r({type:Boolean,reflect:!0})],E.prototype,"compact",2),O([r({type:Boolean,reflect:!0})],E.prototype,"disabled",2),O([r({type:Boolean,reflect:!0})],E.prototype,"searchable",2),O([r({type:Boolean,reflect:!0})],E.prototype,"multiSelect",2),O([r({type:Number,reflect:!0})],E.prototype,"visibleChips",2),O([r({type:Boolean,reflect:!0})],E.prototype,"selectAll",2),O([r({type:Array})],E.prototype,"validations",1),O([r({type:Boolean})],E.prototype,"showErrors",2),O([r({type:String})],E.prototype,"errorDisplayMode",2),O([r({type:Boolean,reflect:!0})],E.prototype,"required",2),O([r({type:Boolean,reflect:!0})],E.prototype,"emitFullObject",2),O([r({type:String})],E.prototype,"emittedKey",2),O([r({type:String})],E.prototype,"displayKey",2),O([r({type:Object})],E.prototype,"customRenderers",1),O([r({type:Boolean})],E.prototype,"addOption",2),O([r({type:Boolean})],E.prototype,"validationArrayFormat",2),O([r({type:String})],E.prototype,"prefix",2),O([r({type:String})],E.prototype,"suffix",2),O([r({type:String})],E.prototype,"prefixColor",2),O([r({type:String})],E.prototype,"suffixColor",2),O([r({type:String})],E.prototype,"justify",2),O([r({type:Number})],E.prototype,"zIndex",2),O([r({type:String})],E.prototype,"height",2),O([r({type:String})],E.prototype,"requiredMessage",2),O([r({type:Boolean,reflect:!0})],E.prototype,"readonly",2),O([r({type:Boolean})],E.prototype,"enforceMinOneSelection",2),O([r({type:Boolean})],E.prototype,"openAbove",2),O([r({type:Boolean,reflect:!0})],E.prototype,"validationActive",2),O([r({type:Boolean,reflect:!0})],E.prototype,"invalid",2),O([r({type:String,reflect:!0})],E.prototype,"variant",2),O([r({type:String,reflect:!0,attribute:"multi-display"})],E.prototype,"multiDisplay",2),O([r({type:String,attribute:!1})],E.prototype,"searchQuery",2),O([n()],E.prototype,"filteredOptions",2),O([n()],E.prototype,"focused",2),O([n()],E.prototype,"open",2),O([n()],E.prototype,"selectedItems",2),O([n()],E.prototype,"hiddenChipsOpen",2),O([n()],E.prototype,"activeIndex",2),O([n()],E.prototype,"validationErrors",2),O([n()],E.prototype,"validationStatus",2),O([n()],E.prototype,"hasLeftIcon",2),O([n()],E.prototype,"hasRightIcon",2),O([n()],E.prototype,"optionSlotSet",2),O([a(".input-wrapper")],E.prototype,"inputWrapperEl",2),O([a(".dropdown")],E.prototype,"dropdownEl",2),O([a(".hidden-chips-dropdown")],E.prototype,"hiddenDropdownEl",2),O([a(".search-container sky-input")],E.prototype,"searchInputEl",2),O([a(".overflow-chip")],E.prototype,"overflowChipEl",2),O([a(".combo-box-container")],E.prototype,"comboContainerEl",2),O([l("[data-row-index]")],E.prototype,"rowEls",2),O([h({slot:"icon-left"})],E.prototype,"iconLeftEls",2),O([h({slot:"icon-right"})],E.prototype,"iconRightEls",2),O([r({type:String,reflect:!0})],E.prototype,"preset",2),E=O([d("sky-combobox")],E);export{A as COMBOBOX_RENDERERS_STATE_KEY,E as SkyCombobox};
|
|
1363
1367
|
//# sourceMappingURL=sky-combobox.js.map
|