@kelvininc/ui-components
Version:
Kelvin UI Components
225 lines (218 loc) • 10.7 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var select_helper = require('./select.helper-CeQKEbrG.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var utils = require('./utils-B3rsVRCe.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');
var config = require('./config-TIjltaxO.js');
var merge = require('./merge-CkQdj9a0.js');
require('./string.helper-B1KQeZk_.js');
require('./isEmpty-C_HQvGy-.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.js');
require('./isNil-B-fGcnNC.js');
require('./_baseMerge-wzi7o0GG.js');
require('./identity-Dz5mxHaJ.js');
require('./_MapCache-DqKaXYoi.js');
const MINIMUM_SEARCHABLE_OPTIONS = 15;
const BADGE_MINIMUM_OPTIONS = 2;
const getDropdownDisplayValue = (options = {}, selectedOptions = {}) => {
const [firstOption] = Object.values(select_helper.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}}: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 = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.optionsSelected = index.createEvent(this, "optionsSelected", 7);
this.searchChange = index.createEvent(this, "searchChange", 7);
this.clearSelection = index.createEvent(this, "clearSelection", 7);
this.selectAll = index.createEvent(this, "selectAll", 7);
this.dismiss = index.createEvent(this, "dismiss", 7);
this.clickOutside = index.createEvent(this, "clickOutside", 7);
this.openStateChange = index.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 = components.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.clickOutsideClose = true;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.zIndex = config.DEFAULT_DROPDOWN_Z_INDEX;
/** @inheritdoc */
this.autoFocus = true; // eslint-disable-line @stencil-community/reserved-member-names
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 = utils.getCssStyle(this.el, '--dropdown-max-height');
return (_a = this.maxHeight) !== null && _a !== void 0 ? _a : maxHeight;
}
getMinHeight() {
var _a;
const minHeight = utils.getCssStyle(this.el, '--dropdown-min-height');
return (_a = this.minHeight) !== null && _a !== void 0 ? _a : minHeight;
}
getMaxWidth() {
var _a;
const maxWidth = utils.getCssStyle(this.el, '--dropdown-max-width');
return (_a = this.maxWidth) !== null && _a !== void 0 ? _a : maxWidth;
}
getMinWidth() {
var _a;
const minWidth = utils.getCssStyle(this.el, '--dropdown-min-width');
return (_a = this.minWidth) !== null && _a !== void 0 ? _a : minWidth;
}
getInputConfig() {
return merge.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
});
}
connectedCallback() {
if (this.autoFocus) {
this.focusSearchInput();
}
}
render() {
return (index.h(index.Host, { key: '6d810794e50de49938c3a5009607f79e3e3d34b8' }, index.h("kv-dropdown", { key: '722084e194cf88703a001d133bc72cc65cdc33c3', inputConfig: this.getInputConfig(), isOpen: this._isOpen, onOpenStateChange: this.onOpenStateChange, disabled: this.disabled, options: this.dropdownOptions, clickOutsideClose: this.clickOutsideClose, actionElement: this.actionElement, zIndex: this.zIndex }, index.h("slot", { key: '059969a5dbd7aafd786f8c6ec56bc29c988a6737', name: "dropdown-action", slot: "dropdown-action" }), index.h("div", { key: '84dd56799b74a3a490e57a2fcb1e7bce80f8cfef', class: cssClass_helper.getClassMap(this.customClass) }, index.h("kv-select-multi-options", { key: 'bd6464ecea791330a3d05258465a5d44fcb949ae', 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, onSearchChange: this.onSearchChange, onClearSelection: this.onClearSelection, onOptionsSelected: this.onOptionsSelected, onSelectAll: this.onSelectAll, onDismiss: this.onDismiss, exportparts: "select" }, index.h("slot", { key: 'd9f0ebb156816f046db41d173b142da538ee988a', name: "select-header-actions", slot: "select-header-actions" }), index.h("slot", { key: '03db9174c99e5e1b7ae5532829279a1c643c526b', name: "select-header-label", slot: "select-header-label" }), index.h("slot", { key: '2d6fa524a65126a9f8e1823d621922ef889e1630', name: "no-data-available", slot: "no-data-available" }), index.h("slot", { key: '35e7840a53f248ace292b2c1da03812155fd612d', name: "no-results-found", slot: "no-results-found" }))))));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"badge": ["badgeChangeHandler"],
"options": ["labelValueHandler"],
"selectedOptions": ["labelValueHandler"],
"displayValue": ["labelValueHandler"]
}; }
};
KvMultiSelectDropdown.style = multiSelectDropdownCss;
exports.kv_multi_select_dropdown = KvMultiSelectDropdown;