@kelvininc/ui-components
Version:
Kelvin UI Components
428 lines (421 loc) • 18.8 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, L as Host } from './p-BP5CxQcH.js';
import { b as getSelectedSelectableOptions } from './p-BO7qqFHC.js';
import { b as getCssStyle } from './p-B6zr3BG3.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './p-CRcRM80a.js';
import { d as defineCustomElement$q } from './p-0XA6IHyr.js';
import { d as defineCustomElement$p } from './p-DFvvqEwa.js';
import { d as defineCustomElement$o } from './p-DviRLduP.js';
import { d as defineCustomElement$n } from './p-CJTppmYq.js';
import { d as defineCustomElement$m } from './p-Cblno6rQ.js';
import { d as defineCustomElement$l } from './p-CcHqOBLS.js';
import { d as defineCustomElement$k } from './p-DzkvH5wF.js';
import { d as defineCustomElement$j } from './p-BfW2hU_X.js';
import { d as defineCustomElement$i } from './p-BOKt4LQl.js';
import { d as defineCustomElement$h } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$g } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$f } from './p-RSgE4CBK.js';
import { d as defineCustomElement$e } from './p-hPCB4r-t.js';
import { d as defineCustomElement$d } from './p-CgqRIP0M.js';
import { d as defineCustomElement$c } from './p-s9JMr6UQ.js';
import { d as defineCustomElement$b } from './p-BrEVQ5h5.js';
import { d as defineCustomElement$a } from './p-Cqe6LD24.js';
import { d as defineCustomElement$9 } from './p-CJVymxK-.js';
import { d as defineCustomElement$8 } from './p-D-fLcdga.js';
import { d as defineCustomElement$7 } from './p-D_es2aRD.js';
import { d as defineCustomElement$6 } from './p-BVyufZh8.js';
import { d as defineCustomElement$5 } from './p-sG4FxOig.js';
import { d as defineCustomElement$4 } from './p-DdZmrasC.js';
import { d as defineCustomElement$3 } from './p-DFBbXuLI.js';
import { d as defineCustomElement$2 } from './p-BkX0eEtL.js';
import { m as merge } from './p-597Q-QFb.js';
const MINIMUM_SEARCHABLE_OPTIONS = 15;
const BADGE_MINIMUM_OPTIONS = 2;
const getDropdownDisplayValue = (options = {}, selectedOptions = {}) => {
const [firstOption] = Object.values(getSelectedSelectableOptions(options, selectedOptions));
return firstOption === null || firstOption === void 0 ? void 0 : firstOption.label;
};
const getBadgeLabelValue = (selectedOptions = {}) => {
const selectedOptionsCount = Object.keys(selectedOptions).filter(key => selectedOptions[key]).length;
if (selectedOptionsCount < BADGE_MINIMUM_OPTIONS)
return;
return `+${selectedOptionsCount - 1}`;
};
const multiSelectDropdownCss = "@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}";
const KvMultiSelectDropdown$1 = /*@__PURE__*/ proxyCustomElement(class KvMultiSelectDropdown extends H {
constructor() {
super();
this.__registerHost();
this.optionsSelected = createEvent(this, "optionsSelected", 7);
this.searchChange = createEvent(this, "searchChange", 7);
this.clearSelection = createEvent(this, "clearSelection", 7);
this.selectAll = createEvent(this, "selectAll", 7);
this.dismiss = createEvent(this, "dismiss", 7);
this.clickOutside = createEvent(this, "clickOutside", 7);
this.openStateChange = createEvent(this, "openStateChange", 3);
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.searchable = true;
/** @inheritdoc */
this.selectionClearable = true;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.options = {};
/** @inheritdoc */
this.selectedOptions = {};
/** @inheritdoc */
this.inputSize = EComponentSize.Large;
/** @inheritdoc */
this.customClass = '';
/** @inheritdoc */
this.selectionAll = true;
/** @inheritdoc */
this.counter = true;
/** @inheritdoc */
this.minSearchOptions = MINIMUM_SEARCHABLE_OPTIONS;
/** @inheritdoc */
this.shortcuts = false;
/** @inheritdoc */
this.showShortcuts = false;
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
/** @inheritdoc */
this.autoFocus = true; // eslint-disable-line @stencil-community/reserved-member-names
/** @inheritdoc */
this.hideBadge = false;
this._badgeLabel = this.badge;
this._isOpen = false;
this.onOptionsSelected = ({ detail: newOptions }) => {
this.optionsSelected.emit(newOptions);
};
this.onSearchChange = ({ detail: searchValue }) => {
this.setSearch(searchValue);
};
this.onClearSelection = (event) => {
event.stopPropagation();
this.clearSelection.emit();
this.calculateLabelValue();
};
this.onSelectAll = (event) => {
event.stopPropagation();
this.selectAll.emit();
this.calculateLabelValue();
};
this.onDismiss = () => {
this.setOpenState(false);
this.dismiss.emit();
};
this.onOpenStateChange = ({ detail: state }) => {
this.setOpenState(state);
};
this.setOpenState = (state) => {
if (state) {
if (this.autoFocus) {
this.focusSearchInput();
}
}
else {
this.setSearch('');
}
this.clearHighlightedOption();
this._isOpen = state;
};
this.setSearch = (searchTerm) => {
this._searchValue = searchTerm;
this.searchChange.emit(searchTerm);
};
this.clearHighlightedOption = () => {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.clearHighlightedOption();
};
this.calculateLabelValue = () => {
var _a;
if ((_a = this.displayValue) === null || _a === void 0 ? void 0 : _a.length) {
this._selectionDisplayValue = this.displayValue;
}
else {
this._selectionDisplayValue = getDropdownDisplayValue(this.options, this.selectedOptions);
}
};
this.calculateBadgeValue = () => {
var _a;
if ((_a = this.badge) === null || _a === void 0 ? void 0 : _a.length) {
this._badgeLabel = this.badge;
}
else {
this._badgeLabel = getBadgeLabelValue(this.selectedOptions);
}
};
this.focusSearchInput = () => {
setTimeout(() => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch(); });
};
}
badgeChangeHandler() {
this.calculateBadgeValue();
}
labelValueHandler() {
this.calculateLabelValue();
this.calculateBadgeValue();
}
/** Focuses the search text field */
async focusSearch() {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch();
}
componentWillLoad() {
this.calculateLabelValue();
this.calculateBadgeValue();
}
getMaxHeight() {
var _a;
const maxHeight = getCssStyle(this.el, '--dropdown-max-height');
return (_a = this.maxHeight) !== null && _a !== void 0 ? _a : maxHeight;
}
getMinHeight() {
var _a;
const minHeight = getCssStyle(this.el, '--dropdown-min-height');
return (_a = this.minHeight) !== null && _a !== void 0 ? _a : minHeight;
}
getMaxWidth() {
var _a;
const maxWidth = getCssStyle(this.el, '--dropdown-max-width');
return (_a = this.maxWidth) !== null && _a !== void 0 ? _a : maxWidth;
}
getMinWidth() {
var _a;
const minWidth = getCssStyle(this.el, '--dropdown-min-width');
return (_a = this.minWidth) !== null && _a !== void 0 ? _a : minWidth;
}
getInputConfig() {
return merge({}, 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() {
if (this.autoFocus) {
this.focusSearchInput();
}
}
render() {
return (h(Host, { key: '635437fbd5b3d05180802259bec9f21acf43baa7' }, h("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 }, h("slot", { key: 'df7cd0ed16946f0afd1f0b8ac8b307f1e2d99573', name: "dropdown-action", slot: "dropdown-action" }), h("div", { key: '5e7b7026e86157714bef7bf6a23ed6c9b9c3342c', class: getClassMap(this.customClass) }, h("kv-select-multi-options", { key: 'd5a54b9c37e501dceb6583c57af16e55ef3cb0cb', ref: element => (this.selectRef = element), 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" }, h("slot", { key: '7c5b61e9bcb287981b8c55bb3a8a5ba8fcfacc25', name: "select-header-actions", slot: "select-header-actions" }), h("slot", { key: '5d963c20803edf6a0fa679d6110fd76f02cca4e0', name: "select-header-label", slot: "select-header-label" }), h("slot", { key: '96ff302ecab3e6eff537dbe5b06405b868c00c7e', name: "no-data-available", slot: "no-data-available" }), h("slot", { key: '5b62441d40392e8f444f213cdcc36de8435c2330', name: "no-results-found", slot: "no-results-found" }), h("slot", { key: '771dd2cfb0ed95f77f96530ef221f4d86db0cb8f', name: "select-footer", slot: "select-footer" }))))));
}
get el() { return this; }
static get watchers() { return {
"badge": ["badgeChangeHandler"],
"options": ["labelValueHandler"],
"selectedOptions": ["labelValueHandler"],
"displayValue": ["labelValueHandler"]
}; }
static get style() { return multiSelectDropdownCss; }
}, [260, "kv-multi-select-dropdown", {
"placeholder": [513],
"loading": [516],
"icon": [513],
"searchable": [516],
"searchPlaceholder": [513, "search-placeholder"],
"selectionClearable": [516, "selection-clearable"],
"clearSelectionLabel": [513, "clear-selection-label"],
"required": [516],
"label": [513],
"displayValue": [513, "display-value"],
"displayPrefix": [513, "display-prefix"],
"badge": [513],
"errorState": [513, "error-state"],
"helpText": [513, "help-text"],
"disabled": [516],
"noDataAvailableConfig": [16, "no-data-available-config"],
"noResultsFoundConfig": [16, "no-results-found-config"],
"options": [16],
"selectedOptions": [16, "selected-options"],
"filteredOptions": [16, "filtered-options"],
"minHeight": [513, "min-height"],
"maxHeight": [513, "max-height"],
"minWidth": [513, "min-width"],
"maxWidth": [513, "max-width"],
"inputSize": [513, "input-size"],
"customClass": [513, "custom-class"],
"dropdownOptions": [16, "dropdown-options"],
"selectionAll": [4, "selection-all"],
"selectAllLabel": [1, "select-all-label"],
"counter": [4],
"minSearchOptions": [514, "min-search-options"],
"shortcuts": [516],
"showShortcuts": [516, "show-shortcuts"],
"clickOutsideClose": [516, "click-outside-close"],
"actionElement": [16, "action-element"],
"zIndex": [2, "z-index"],
"inputConfig": [16, "input-config"],
"autoFocus": [516, "auto-focus"],
"hideBadge": [516, "hide-badge"],
"maxSelectable": [514, "max-selectable"],
"_selectionDisplayValue": [32],
"_searchValue": [32],
"_badgeLabel": [32],
"_isOpen": [32],
"focusSearch": [64]
}, undefined, {
"badge": ["badgeChangeHandler"],
"options": ["labelValueHandler"],
"selectedOptions": ["labelValueHandler"],
"displayValue": ["labelValueHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-multi-select-dropdown", "kv-action-button", "kv-action-button-icon", "kv-action-button-text", "kv-badge", "kv-checkbox", "kv-dirty-dot", "kv-dropdown", "kv-dropdown-base", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-illustration", "kv-illustration-message", "kv-portal", "kv-radio", "kv-search", "kv-select", "kv-select-create-option", "kv-select-multi-options", "kv-select-option", "kv-select-shortcuts-label", "kv-text-field", "kv-tooltip", "kv-tooltip-text", "kv-virtualized-list"];
components.forEach(tagName => { switch (tagName) {
case "kv-multi-select-dropdown":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvMultiSelectDropdown$1);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$q();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$p();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$o();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$n();
}
break;
case "kv-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$m();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$l();
}
break;
case "kv-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "kv-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "kv-illustration-message":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "kv-search":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "kv-select":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-select-create-option":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-select-multi-options":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-select-option":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-select-shortcuts-label":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-virtualized-list":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvMultiSelectDropdown = KvMultiSelectDropdown$1;
const defineCustomElement = defineCustomElement$1;
export { KvMultiSelectDropdown, defineCustomElement };