@kelvininc/ui-components
Version:
Kelvin UI Components
316 lines (306 loc) • 19.3 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D-JVwta2.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { b as EValidationState } from './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import { a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { g as getClassMap } from './css-class.helper-DKOxy79t.js';
import { a as getCssStyle } from './utils-Cx1GRYZc.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import { b as getFlattenSelectOptions } from './select.helper-D_nHTFPl.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './config-CJMopqu5.js';
import { m as merge } from './merge-uvn7Q6Uf.js';
import './isNil-DjSNdVAB.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
import './string.helper-BMAMF_sW.js';
import './_baseMerge-CgbDsiSj.js';
import './identity-CK4jS9_E.js';
import './_MapCache-nTWrGhJJ.js';
const inputWrapperCss = "@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 KvInputWrapper = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.contentClick = createEvent(this, "contentClick", 7);
/** @inheritdoc */
this.contentHidden = false;
/** @inheritdoc */
this.icon = EIconName.Edit;
this.handleContentClick = () => {
if (!this.contentVisible && !this.contentHidden) {
this.contentClick.emit(this.contentVisible);
}
};
}
render() {
return (h(Host, { key: 'e3bdb69251bc0585c247ffb151cdde63a08602b4' }, h("div", { key: '85a07478335d00c75866ae1c4cc1b50e8e41fca1', class: {
'input-container': true,
'input-container--content-hidden': !this.contentVisible && !this.contentHidden
}, onClick: this.handleContentClick }, this.contentVisible && !this.contentHidden ? (h("div", { class: "slot-container" }, h("slot", null))) : (h("div", { class: "label-container" }, h("div", { class: "label" }, this.label), h("kv-icon", { name: this.icon }))))));
}
};
KvInputWrapper.style = inputWrapperCss;
const SINGLE_SELECT_CLEAR_SELECTION_LABEL = 'Clear all';
const MINIMUM_SEARCHABLE_OPTIONS = 15;
const INVALID_VALUE_ERROR = `Empty string "" is an invalid value for the dropdown, if you wish to deselect the dropdown please set the value to undefined.`;
const EMPTY_STRING = '';
const getDropdownDisplayIcon = (selectedOption, flattenOptions = {}) => {
if (!selectedOption || !flattenOptions[selectedOption]) {
return;
}
const option = flattenOptions[selectedOption];
return option.icon;
};
const getDropdownCustomCss = (selectedOption, flattenOptions = {}) => {
if (!selectedOption || !flattenOptions[selectedOption]) {
return;
}
const option = flattenOptions[selectedOption];
return option.customStyle;
};
const buildSingleSelectOptions = (options = {}) => Object.values(options).reduce((accumulator, option) => {
accumulator[option.value] = Object.assign(Object.assign({}, option), { selectable: isEmpty(option.options), options: buildSingleSelectOptions(option.options), togglable: false });
return accumulator;
}, {});
const singleSelectDropdownCss = "@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 KvSingleSelectDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.optionSelected = createEvent(this, "optionSelected", 7);
this.searchChange = createEvent(this, "searchChange", 7);
this.clearSelection = createEvent(this, "clearSelection", 7);
this.dismiss = createEvent(this, "dismiss", 7);
this.clickOutside = createEvent(this, "clickOutside", 7);
this.optionCreated = createEvent(this, "optionCreated", 7);
this.openStateChange = createEvent(this, "openStateChange", 3);
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.required = false;
/** @inheritdoc */
this.errorState = EValidationState.None;
/** @inheritdoc */
this.helpText = [];
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.inputSize = EComponentSize.Large;
/** @inheritdoc */
this.customClass = '';
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.options = {};
/** @inheritdoc */
this.searchable = true;
/** @inheritdoc */
this.clearSelectionLabel = SINGLE_SELECT_CLEAR_SELECTION_LABEL;
/** @inheritdoc */
this.minSearchOptions = MINIMUM_SEARCHABLE_OPTIONS;
/** @inheritdoc */
this.shortcuts = false;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
/** @inheritdoc */
this.canAddItems = false;
/** @inheritdoc */
this.autoFocus = true; // eslint-disable-line @stencil-community/reserved-member-names
this.onOptionSelected = (event) => {
event.stopPropagation();
const { detail: selectedOptionKey } = event;
this.selectOption(selectedOptionKey);
this.highlightedOption = selectedOptionKey;
};
this.onDismiss = () => {
this.setOpenState(false);
this.dismiss.emit();
};
this.onSearchChange = ({ detail: searchTerm }) => {
this.setSearch(searchTerm);
};
this.onOpenStateChange = ({ detail: state }) => {
this.setOpenState(state);
};
this.onClearSelection = () => {
this.optionSelected.emit(undefined);
this.clearSelection.emit();
this.calculateLabelValue();
};
this.onOptionCreated = ({ detail: newOptionKey }) => {
this.optionCreated.emit(newOptionKey);
};
this.selectOption = (selectedOption) => {
this.optionSelected.emit(selectedOption);
this.setOpenState(false);
};
this.focusSearchInput = () => {
setTimeout(() => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch(); });
};
this.setOpenState = (state) => {
if (state) {
if (this.autoFocus) {
this.focusSearchInput();
}
}
else {
this.setSearch('');
this.closeCreatePopup();
}
this.highlightedOption = undefined;
this.isOpen = state;
this.openStateChange.emit(state);
this.clearHighlightedOption();
};
this.setSearch = (searchTerm) => {
this._searchValue = searchTerm;
this.searchChange.emit(searchTerm);
};
this.getInputConfig = () => {
var _a, _b;
return merge({}, 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 && ((_a = this.options[this.selectedOption]) === null || _a === void 0 ? void 0 : _a.isDirty),
icon: (_b = getDropdownDisplayIcon(this.selectedOption, this.selectOptions.flatten)) !== null && _b !== void 0 ? _b : this.icon,
customStyle: getDropdownCustomCss(this.selectedOption, this.selectOptions.flatten)
});
};
this.clearHighlightedOption = () => {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.clearHighlightedOption();
};
this.closeCreatePopup = () => {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.closeCreatePopup();
};
this.calculateLabelValue = () => {
var _a, _b;
if ((_a = this.displayValue) === null || _a === void 0 ? void 0 : _a.length) {
this._selectionDisplayValue = this.displayValue;
return;
}
if (this.selectedOption && ((_b = this.selectOptions) === null || _b === void 0 ? void 0 : _b.flatten[this.selectedOption])) {
this._selectionDisplayValue = this.selectOptions.flatten[this.selectedOption].label;
return;
}
this._selectionDisplayValue = undefined;
};
this.validateSelectedOptionValue = () => {
if (this.selectedOption === EMPTY_STRING) {
throw new Error(INVALID_VALUE_ERROR);
}
};
this.buildSelectionOptions = () => {
const selectOptions = buildSingleSelectOptions(this.options);
const filteredSelectOptions = this.filteredOptions ? buildSingleSelectOptions(this.filteredOptions) : undefined;
const selectFlattenOptions = getFlattenSelectOptions(selectOptions);
this.selectOptions = {
total: selectOptions,
filtered: filteredSelectOptions,
flatten: selectFlattenOptions
};
};
}
optionsChangeHandler() {
this.buildSelectionOptions();
this.calculateLabelValue();
}
selectedOptionChangeHandler() {
this.validateSelectedOptionValue();
this.calculateLabelValue();
}
displayValueChangeHandler() {
this.calculateLabelValue();
}
filterOptionsChangeHandler() {
this.buildSelectionOptions();
}
/** Focuses the search text field */
async focusSearch() {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch();
}
componentWillLoad() {
this.validateSelectedOptionValue();
this.buildSelectionOptions();
this.calculateLabelValue();
}
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;
}
get selectedOptions() {
return this.selectedOption ? { [this.selectedOption]: true } : {};
}
connectedCallback() {
if (this.autoFocus) {
this.focusSearchInput();
}
}
render() {
return (h(Host, { key: '42468b7e01463d2164da2196c8777335a00e06d1' }, h("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 }, h("slot", { key: '8fb643e464da9639138375e164805b4f1525fdc2', name: "right-slot", slot: "right-slot" }), h("slot", { key: '4a9e635dbfc58fe53aa26d817868ff2553b7efab', name: "left-slot", slot: "left-slot" }), h("slot", { key: '34cc6d055912da304b36cf4a2a4ff8959211157d', name: "dropdown-action", slot: "dropdown-action" }), h("div", { key: '7c8ab415460a4fa10bc20c3b713a7c84c6ea9dae', class: Object.assign(Object.assign({}, getClassMap(this.customClass)), { 'single-select-dropdown-slot': true }) }, h("kv-select-multi-options", { key: '16de85ee0268dc5e5e3c4961bfbb4e06926135d9', ref: element => (this.selectRef = element), 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" }, h("slot", { key: '0a4e95bba41dafc150c41b8edf4f7fd45a4a56db', name: "create-new-option", slot: "create-new-option" }), h("slot", { key: 'f5740278d58167ef91ca55df464d74e23d48541b', name: "select-header-actions", slot: "select-header-actions" }), h("slot", { key: 'b95856d3090d020ab615a88cd72e3d5089b7e595', name: "select-header-label", slot: "select-header-label" }), h("slot", { key: '2978b448b588189e4d08c7b781e35c000e378ad0', name: "no-data-available", slot: "no-data-available" }), h("slot", { key: '1dacdab7c23ec33191ed41e63b76f6410dc14ff3', name: "no-results-found", slot: "no-results-found" })), h("slot", { key: 'a06c50835184723a155a2520a308119e581db587' })))));
}
get el() { return getElement(this); }
static get watchers() { return {
"options": ["optionsChangeHandler"],
"selectedOption": ["selectedOptionChangeHandler"],
"displayValue": ["displayValueChangeHandler"],
"filteredOptions": ["filterOptionsChangeHandler"]
}; }
};
KvSingleSelectDropdown.style = singleSelectDropdownCss;
const timePickerSelectOptionCss = "@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)}";
const KvTimePickerSelectOption = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.itemSelected = createEvent(this, "itemSelected", 7);
/** @inheritdoc */
this.selected = false;
this.onItemClick = () => {
this.itemSelected.emit(this.value);
};
}
render() {
return (h(Host, { key: '7f62a8510634b1eff4535512d3bb2b1c316a90a3' }, h("div", { key: 'd2e483e533a97fe88deadd559c91f853cdfd2074', class: {
'select-option': true,
'selected': this.selected
}, onClick: this.onItemClick }, h("div", { key: '6e16b68eb42a675684099a0fc55edf4567007074', class: "text-container" }, h("div", { key: '6cf98b835e0902838c47dc8581586d91f5757329', class: "item-label" }, this.label), h("div", { key: '949d759df54a9a539612290fafa3bb709b387ebb', class: "item-description" }, this.description)))));
}
};
KvTimePickerSelectOption.style = timePickerSelectOptionCss;
export { KvInputWrapper as kv_input_wrapper, KvSingleSelectDropdown as kv_single_select_dropdown, KvTimePickerSelectOption as kv_time_picker_select_option };