@kelvininc/ui-components
Version:
Kelvin UI Components
995 lines (943 loc) • 41.2 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h } from './p-D6GMjtmE.js';
import { a as EIllustrationName, b as EIconName, e as EToggleState } from './p-DBphUUgi.js';
import { a as getNextHightlightableOption, b as getPreviousHightlightableOption, c as buildAllOptionsSelected, d as getSelectableOptions, e as getFlattenSelectOptions } from './p-BEfnHAoy.js';
import './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import './p-Ba4zaTTd.js';
import { g as getDefaultExportFromCjs } from './p-BFTU3MAI.js';
import { d as defineCustomElement$k } from './p-CsQJZTqg.js';
import { d as defineCustomElement$j } from './p-C7UGguL_.js';
import { d as defineCustomElement$i } from './p-BOySlV0g.js';
import { d as defineCustomElement$h } from './p-BAnY2f0R.js';
import { d as defineCustomElement$g } from './p-BJSKhyhi.js';
import { d as defineCustomElement$f } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$e } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$d } from './p-B41PGLQm.js';
import { d as defineCustomElement$c } from './p-BMp30lyC.js';
import { d as defineCustomElement$b } from './p-Bi2u2KUW.js';
import { d as defineCustomElement$a } from './p-BIWUEm1f.js';
import { d as defineCustomElement$9 } from './p-DrAjMjwv.js';
import { d as defineCustomElement$8 } from './p-6evrDshf.js';
import { d as defineCustomElement$7 } from './p-pSs-P0wB.js';
import { d as defineCustomElement$6 } from './p-BGPTa9b0.js';
import { d as defineCustomElement$5 } from './p-C97qgeMO.js';
import { d as defineCustomElement$4 } from './p-DMity2tp.js';
import { d as defineCustomElement$3 } from './p-GHnCHOez.js';
import { d as defineCustomElement$2 } from './p-BuaFqlfN.js';
import { d as defineCustomElement$1 } from './p-C8hKWhkk.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const MINIMUM_SEARCHABLE_OPTIONS = 15;
const SELECT_OPTION_HEIGHT_IN_PX = 32;
const DEFAULT_ADD_OPTION_PLACEHOLDER = 'Add a new option';
const ADD_OPTION = {
label: DEFAULT_ADD_OPTION_PLACEHOLDER,
value: '9e8caf09-5cde-4150-84f5-29c06bebc0ae',
icon: EIconName.Add
};
const DEFAULT_NO_DATA_AVAILABLE_ILLUSTRATION_CONFIG = {
illustration: EIllustrationName.NoDataAvailable,
header: 'No Data Available',
description: 'There is no data to display at the moment.'
};
const DEFAULT_NO_RESULTS_FOUND_ILLUSTRATION_CONFIG = {
illustration: EIllustrationName.NoResultsFoundLight,
header: 'No Results Found',
description: 'Despite our best efforts, no results were extracted. Please try a new query or keyword for better results.'
};
const buildNewOption = (highlightedOption, createInputPlaceholder) => (Object.assign(Object.assign({}, ADD_OPTION), { label: createInputPlaceholder !== null && createInputPlaceholder !== void 0 ? createInputPlaceholder : ADD_OPTION.label, togglable: false, selected: false, state: EToggleState.None, highlighted: ADD_OPTION.value === highlightedOption }));
const buildSelectOption = ({ optionKey, options = {}, allOptions = {}, selectedOptions = {}, highlightedOption, level = 0 }) => {
const childrenOptions = buildSelectOptions({
options: options[optionKey].options,
allOptions: allOptions[optionKey].options,
selectedOptions,
highlightedOption,
level: level + 1
});
return Object.assign(Object.assign({ togglable: true }, options[optionKey]), { options: childrenOptions, selected: selectedOptions[optionKey] === true, state: getOptionToggleState(allOptions[optionKey], selectedOptions), highlighted: optionKey === highlightedOption, level: level, heading: Object.values(childrenOptions).length > 0 });
};
const getOptionToggleState = (option, selectedOptions = {}) => {
var _a;
const children = Object.values((_a = option.options) !== null && _a !== void 0 ? _a : {});
if (children.length === 0) {
if (selectedOptions[option.value]) {
return EToggleState.Selected;
}
return EToggleState.None;
}
const childrenStates = children.map(childrenOpt => getOptionToggleState(childrenOpt, selectedOptions));
const [firstChildrenState, ...otherChildrenStates] = childrenStates;
// Check if all children have the same state
if (otherChildrenStates.every(childrenState => childrenState === firstChildrenState)) {
return firstChildrenState;
}
// Otherwise
return EToggleState.Indeterminate;
};
const buildSelectOptions = ({ options = {}, allOptions = {}, selectedOptions = {}, highlightedOption, hasAddItem = false, createInputPlaceholder, level = 0 }) => {
const selectOptions = Object.keys(options).reduce((accumulator, optionKey) => {
if (allOptions[optionKey]) {
accumulator[optionKey] = buildSelectOption({ optionKey, options, allOptions, selectedOptions, highlightedOption, level });
}
return accumulator;
}, {});
if (hasAddItem) {
selectOptions[ADD_OPTION.value] = buildNewOption(highlightedOption, createInputPlaceholder);
}
return selectOptions;
};
function commonjsRequire(path) {
throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
}
var pluralize$2 = {exports: {}};
/* global define */
var pluralize$1 = pluralize$2.exports;
var hasRequiredPluralize;
function requirePluralize () {
if (hasRequiredPluralize) return pluralize$2.exports;
hasRequiredPluralize = 1;
(function (module, exports) {
(function (root, pluralize) {
/* istanbul ignore else */
if (typeof commonjsRequire === 'function' && 'object' === 'object' && 'object' === 'object') {
// Node.
module.exports = pluralize();
} else {
// Browser global.
root.pluralize = pluralize();
}
})(pluralize$1, function () {
// Rule storage - pluralize and singularize need to be run sequentially,
// while other rules can be optimized using an object for instant lookups.
var pluralRules = [];
var singularRules = [];
var uncountables = {};
var irregularPlurals = {};
var irregularSingles = {};
/**
* Sanitize a pluralization rule to a usable regular expression.
*
* @param {(RegExp|string)} rule
* @return {RegExp}
*/
function sanitizeRule (rule) {
if (typeof rule === 'string') {
return new RegExp('^' + rule + '$', 'i');
}
return rule;
}
/**
* Pass in a word token to produce a function that can replicate the case on
* another word.
*
* @param {string} word
* @param {string} token
* @return {Function}
*/
function restoreCase (word, token) {
// Tokens are an exact match.
if (word === token) return token;
// Lower cased words. E.g. "hello".
if (word === word.toLowerCase()) return token.toLowerCase();
// Upper cased words. E.g. "WHISKY".
if (word === word.toUpperCase()) return token.toUpperCase();
// Title cased words. E.g. "Title".
if (word[0] === word[0].toUpperCase()) {
return token.charAt(0).toUpperCase() + token.substr(1).toLowerCase();
}
// Lower cased words. E.g. "test".
return token.toLowerCase();
}
/**
* Interpolate a regexp string.
*
* @param {string} str
* @param {Array} args
* @return {string}
*/
function interpolate (str, args) {
return str.replace(/\$(\d{1,2})/g, function (match, index) {
return args[index] || '';
});
}
/**
* Replace a word using a rule.
*
* @param {string} word
* @param {Array} rule
* @return {string}
*/
function replace (word, rule) {
return word.replace(rule[0], function (match, index) {
var result = interpolate(rule[1], arguments);
if (match === '') {
return restoreCase(word[index - 1], result);
}
return restoreCase(match, result);
});
}
/**
* Sanitize a word by passing in the word and sanitization rules.
*
* @param {string} token
* @param {string} word
* @param {Array} rules
* @return {string}
*/
function sanitizeWord (token, word, rules) {
// Empty string or doesn't need fixing.
if (!token.length || uncountables.hasOwnProperty(token)) {
return word;
}
var len = rules.length;
// Iterate over the sanitization rules and use the first one to match.
while (len--) {
var rule = rules[len];
if (rule[0].test(word)) return replace(word, rule);
}
return word;
}
/**
* Replace a word with the updated word.
*
* @param {Object} replaceMap
* @param {Object} keepMap
* @param {Array} rules
* @return {Function}
*/
function replaceWord (replaceMap, keepMap, rules) {
return function (word) {
// Get the correct token and case restoration functions.
var token = word.toLowerCase();
// Check against the keep object map.
if (keepMap.hasOwnProperty(token)) {
return restoreCase(word, token);
}
// Check against the replacement map for a direct word replacement.
if (replaceMap.hasOwnProperty(token)) {
return restoreCase(word, replaceMap[token]);
}
// Run all the rules against the word.
return sanitizeWord(token, word, rules);
};
}
/**
* Check if a word is part of the map.
*/
function checkWord (replaceMap, keepMap, rules, bool) {
return function (word) {
var token = word.toLowerCase();
if (keepMap.hasOwnProperty(token)) return true;
if (replaceMap.hasOwnProperty(token)) return false;
return sanitizeWord(token, token, rules) === token;
};
}
/**
* Pluralize or singularize a word based on the passed in count.
*
* @param {string} word The word to pluralize
* @param {number} count How many of the word exist
* @param {boolean} inclusive Whether to prefix with the number (e.g. 3 ducks)
* @return {string}
*/
function pluralize (word, count, inclusive) {
var pluralized = count === 1
? pluralize.singular(word) : pluralize.plural(word);
return (inclusive ? count + ' ' : '') + pluralized;
}
/**
* Pluralize a word.
*
* @type {Function}
*/
pluralize.plural = replaceWord(
irregularSingles, irregularPlurals, pluralRules
);
/**
* Check if a word is plural.
*
* @type {Function}
*/
pluralize.isPlural = checkWord(
irregularSingles, irregularPlurals, pluralRules
);
/**
* Singularize a word.
*
* @type {Function}
*/
pluralize.singular = replaceWord(
irregularPlurals, irregularSingles, singularRules
);
/**
* Check if a word is singular.
*
* @type {Function}
*/
pluralize.isSingular = checkWord(
irregularPlurals, irregularSingles, singularRules
);
/**
* Add a pluralization rule to the collection.
*
* @param {(string|RegExp)} rule
* @param {string} replacement
*/
pluralize.addPluralRule = function (rule, replacement) {
pluralRules.push([sanitizeRule(rule), replacement]);
};
/**
* Add a singularization rule to the collection.
*
* @param {(string|RegExp)} rule
* @param {string} replacement
*/
pluralize.addSingularRule = function (rule, replacement) {
singularRules.push([sanitizeRule(rule), replacement]);
};
/**
* Add an uncountable word rule.
*
* @param {(string|RegExp)} word
*/
pluralize.addUncountableRule = function (word) {
if (typeof word === 'string') {
uncountables[word.toLowerCase()] = true;
return;
}
// Set singular and plural references for the word.
pluralize.addPluralRule(word, '$0');
pluralize.addSingularRule(word, '$0');
};
/**
* Add an irregular word definition.
*
* @param {string} single
* @param {string} plural
*/
pluralize.addIrregularRule = function (single, plural) {
plural = plural.toLowerCase();
single = single.toLowerCase();
irregularSingles[single] = plural;
irregularPlurals[plural] = single;
};
/**
* Irregular rules.
*/
[
// Pronouns.
['I', 'we'],
['me', 'us'],
['he', 'they'],
['she', 'they'],
['them', 'them'],
['myself', 'ourselves'],
['yourself', 'yourselves'],
['itself', 'themselves'],
['herself', 'themselves'],
['himself', 'themselves'],
['themself', 'themselves'],
['is', 'are'],
['was', 'were'],
['has', 'have'],
['this', 'these'],
['that', 'those'],
// Words ending in with a consonant and `o`.
['echo', 'echoes'],
['dingo', 'dingoes'],
['volcano', 'volcanoes'],
['tornado', 'tornadoes'],
['torpedo', 'torpedoes'],
// Ends with `us`.
['genus', 'genera'],
['viscus', 'viscera'],
// Ends with `ma`.
['stigma', 'stigmata'],
['stoma', 'stomata'],
['dogma', 'dogmata'],
['lemma', 'lemmata'],
['schema', 'schemata'],
['anathema', 'anathemata'],
// Other irregular rules.
['ox', 'oxen'],
['axe', 'axes'],
['die', 'dice'],
['yes', 'yeses'],
['foot', 'feet'],
['eave', 'eaves'],
['goose', 'geese'],
['tooth', 'teeth'],
['quiz', 'quizzes'],
['human', 'humans'],
['proof', 'proofs'],
['carve', 'carves'],
['valve', 'valves'],
['looey', 'looies'],
['thief', 'thieves'],
['groove', 'grooves'],
['pickaxe', 'pickaxes'],
['passerby', 'passersby']
].forEach(function (rule) {
return pluralize.addIrregularRule(rule[0], rule[1]);
});
/**
* Pluralization rules.
*/
[
[/s?$/i, 's'],
[/[^\u0000-\u007F]$/i, '$0'],
[/([^aeiou]ese)$/i, '$1'],
[/(ax|test)is$/i, '$1es'],
[/(alias|[^aou]us|t[lm]as|gas|ris)$/i, '$1es'],
[/(e[mn]u)s?$/i, '$1s'],
[/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, '$1'],
[/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, '$1i'],
[/(alumn|alg|vertebr)(?:a|ae)$/i, '$1ae'],
[/(seraph|cherub)(?:im)?$/i, '$1im'],
[/(her|at|gr)o$/i, '$1oes'],
[/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, '$1a'],
[/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, '$1a'],
[/sis$/i, 'ses'],
[/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, '$1$2ves'],
[/([^aeiouy]|qu)y$/i, '$1ies'],
[/([^ch][ieo][ln])ey$/i, '$1ies'],
[/(x|ch|ss|sh|zz)$/i, '$1es'],
[/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, '$1ices'],
[/\b((?:tit)?m|l)(?:ice|ouse)$/i, '$1ice'],
[/(pe)(?:rson|ople)$/i, '$1ople'],
[/(child)(?:ren)?$/i, '$1ren'],
[/eaux$/i, '$0'],
[/m[ae]n$/i, 'men'],
['thou', 'you']
].forEach(function (rule) {
return pluralize.addPluralRule(rule[0], rule[1]);
});
/**
* Singularization rules.
*/
[
[/s$/i, ''],
[/(ss)$/i, '$1'],
[/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, '$1fe'],
[/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, '$1f'],
[/ies$/i, 'y'],
[/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, '$1ie'],
[/\b(mon|smil)ies$/i, '$1ey'],
[/\b((?:tit)?m|l)ice$/i, '$1ouse'],
[/(seraph|cherub)im$/i, '$1'],
[/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, '$1'],
[/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, '$1sis'],
[/(movie|twelve|abuse|e[mn]u)s$/i, '$1'],
[/(test)(?:is|es)$/i, '$1is'],
[/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, '$1us'],
[/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, '$1um'],
[/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, '$1on'],
[/(alumn|alg|vertebr)ae$/i, '$1a'],
[/(cod|mur|sil|vert|ind)ices$/i, '$1ex'],
[/(matr|append)ices$/i, '$1ix'],
[/(pe)(rson|ople)$/i, '$1rson'],
[/(child)ren$/i, '$1'],
[/(eau)x?$/i, '$1'],
[/men$/i, 'man']
].forEach(function (rule) {
return pluralize.addSingularRule(rule[0], rule[1]);
});
/**
* Uncountable rules.
*/
[
// Singular words with no plurals.
'adulthood',
'advice',
'agenda',
'aid',
'aircraft',
'alcohol',
'ammo',
'analytics',
'anime',
'athletics',
'audio',
'bison',
'blood',
'bream',
'buffalo',
'butter',
'carp',
'cash',
'chassis',
'chess',
'clothing',
'cod',
'commerce',
'cooperation',
'corps',
'debris',
'diabetes',
'digestion',
'elk',
'energy',
'equipment',
'excretion',
'expertise',
'firmware',
'flounder',
'fun',
'gallows',
'garbage',
'graffiti',
'hardware',
'headquarters',
'health',
'herpes',
'highjinks',
'homework',
'housework',
'information',
'jeans',
'justice',
'kudos',
'labour',
'literature',
'machinery',
'mackerel',
'mail',
'media',
'mews',
'moose',
'music',
'mud',
'manga',
'news',
'only',
'personnel',
'pike',
'plankton',
'pliers',
'police',
'pollution',
'premises',
'rain',
'research',
'rice',
'salmon',
'scissors',
'series',
'sewage',
'shambles',
'shrimp',
'software',
'species',
'staff',
'swine',
'tennis',
'traffic',
'transportation',
'trout',
'tuna',
'wealth',
'welfare',
'whiting',
'wildebeest',
'wildlife',
'you',
/pok[eé]mon$/i,
// Regexes.
/[^aeiou]ese$/i, // "chinese", "japanese"
/deer$/i, // "deer", "reindeer"
/fish$/i, // "fish", "blowfish", "angelfish"
/measles$/i,
/o[iu]s$/i, // "carnivorous"
/pox$/i, // "chickpox", "smallpox"
/sheep$/i
].forEach(pluralize.addUncountableRule);
return pluralize;
});
} (pluralize$2));
return pluralize$2.exports;
}
var pluralizeExports = requirePluralize();
var pluralize = /*@__PURE__*/getDefaultExportFromCjs(pluralizeExports);
const selectMultiOptionsCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--select-list-max-height:400px;--select-list-min-height:auto;--select-list-max-width:auto;--select-list-min-width:max-content}kv-select{--select-max-height:var(--select-list-max-height);--select-min-height:var(--select-list-min-height);--select-max-width:var(--select-list-max-width);--select-min-width:var(--select-list-min-width)}.select-header-label{overflow:hidden;max-width:110px}.selected-items-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;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);text-wrap:nowrap}.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}.create-new-option-container{position:absolute;top:0;left:0;border-radius:4px;border:1px solid var(--kv-neutral-6, #3f3f3f);width:calc(100% - 2px);height:calc(100% - 2px);background:rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.8);z-index:1}.create-new-option-container.has-shortcuts .create-new-option-form{bottom:36px;border-bottom:1px solid var(--kv-neutral-6, #3f3f3f)}.form-container{background:var(--kv-neutral-7, #2a2a2a);padding:var(--kv-spacing-3x, 12px) var(--kv-spacing-4x, 16px)}.create-new-option-form{width:100%;position:absolute;bottom:0;left:0;border-top:1px solid var(--kv-neutral-6, #3f3f3f)}.create-new-option-button{border-top:1px solid var(--kv-neutral-6, #3f3f3f);padding:var(--kv-spacing-3x, 12px) 0}.no-results-found,.no-data-available{display:flex;flex-direction:column}.no-results-found .illustration-message,.no-data-available .illustration-message{max-width:292px;padding:var(--kv-spacing-8x, 32px) var(--kv-spacing-3x, 12px);align-self:center}";
var __rest = (undefined && undefined.__rest) || function (s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
const KvSelectMultiOptions = /*@__PURE__*/ proxyCustomElement(class KvSelectMultiOptions extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.optionsSelected = createEvent(this, "optionsSelected", 7);
this.optionSelected = createEvent(this, "optionSelected", 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.optionCreated = createEvent(this, "optionCreated", 7);
/** @inheritdoc */
this.options = {};
/** @inheritdoc */
this.selectedOptions = {};
/** @inheritdoc */
this.noDataAvailableConfig = DEFAULT_NO_DATA_AVAILABLE_ILLUSTRATION_CONFIG;
/** @inheritdoc */
this.noResultsFoundConfig = DEFAULT_NO_RESULTS_FOUND_ILLUSTRATION_CONFIG;
/** @inheritdoc */
this.searchable = true;
/** @inheritdoc */
this.minSearchOptions = MINIMUM_SEARCHABLE_OPTIONS;
/** @inheritdoc */
this.shortcuts = false;
/** @inheritdoc */
this.canAddItems = false;
/** @inheritdoc */
this.createOptionPlaceholder = DEFAULT_ADD_OPTION_PLACEHOLDER;
this.isCreating = false;
this.createdOptionValue = '';
this.onEnter = () => {
if (isEmpty(this.highlightedOption)) {
return;
}
this.selectOption(this.highlightedOption);
};
this.onNavigateDown = () => {
this.highlightedOption = getNextHightlightableOption(this.selectOptions.currentSelectable, this.highlightedOption);
};
this.onNavigateUp = () => {
this.highlightedOption = getPreviousHightlightableOption(this.selectOptions.currentSelectable, this.highlightedOption);
};
this.onDismiss = () => {
this.highlightedOption = undefined;
this.dismiss.emit();
};
this.onSelectAll = (event) => {
event.stopPropagation();
this.optionsSelected.emit(buildAllOptionsSelected(getSelectableOptions(this.options)));
this.selectAll.emit();
};
this.onClearSelection = (event) => {
event.stopPropagation();
this.optionsSelected.emit({});
this.clearSelection.emit();
};
this.onItemSelected = (event) => {
event.stopPropagation();
this.selectOption(event.detail);
if (this.shortcuts) {
this.highlightedOption = event.detail;
}
};
this.selectOption = (selectedOptionKey) => {
if (selectedOptionKey === ADD_OPTION.value) {
this.isCreating = true;
this.createdOptionValue = this.searchValue;
return;
}
const selectedOption = this.selectOptions.totalFlatten[selectedOptionKey];
this.optionSelected.emit(selectedOptionKey);
// Check if the selected option does not have any children
if (isEmpty(selectedOption.options)) {
const _a = this.selectedOptions, _b = selectedOptionKey, selectedOptionValue = _a[_b], otherSelectedOptions = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
if (selectedOptionValue) {
this.optionsSelected.emit(otherSelectedOptions);
}
else {
this.optionsSelected.emit(Object.assign(Object.assign({}, otherSelectedOptions), { [selectedOptionKey]: true }));
}
return;
}
const childrenValues = getSelectableOptions(selectedOption.options);
switch (selectedOption.state) {
case EToggleState.Selected:
case EToggleState.Indeterminate:
// de-select all children
const newOptions = this.selectedOptions;
Object.keys(childrenValues).forEach(childrenKey => delete newOptions[childrenKey]);
this.optionsSelected.emit(Object.assign({}, newOptions));
break;
case EToggleState.None:
// select all children
this.optionsSelected.emit(Object.assign(Object.assign({}, this.selectedOptions), buildAllOptionsSelected(childrenValues)));
}
};
this.renderOptions = () => {
const items = Object.values(this.selectOptions.currentFlatten);
return (h("kv-virtualized-list", { itemCount: items.length, itemHeight: SELECT_OPTION_HEIGHT_IN_PX, getItemKey: index => items[index].value, renderItem: index => (h("kv-select-option", Object.assign({ key: items[index].value }, items[index], { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
} }))) }));
};
}
valueChangedOptionHandler({ detail: newValue }) {
this.createdOptionValue = newValue;
}
clickCreateOptionHandler() {
this.optionCreated.emit(this.createdOptionValue);
this.optionSelected.emit(this.createdOptionValue);
this.isCreating = false;
}
cancelCreateOptionHandler() {
this.isCreating = false;
}
buildSelectionOptions() {
const selectOptions = buildSelectOptions({
options: this.options,
allOptions: this.options,
selectedOptions: this.selectedOptions,
highlightedOption: this.highlightedOption,
hasAddItem: this.canAddItems,
createInputPlaceholder: this.createOptionPlaceholder
});
const selectCurrentOptions = buildSelectOptions({
options: this.currentOptions,
allOptions: this.options,
selectedOptions: this.selectedOptions,
highlightedOption: this.highlightedOption,
hasAddItem: this.canAddItems,
createInputPlaceholder: this.createOptionPlaceholder
});
const selectSelectableOptions = getSelectableOptions(selectOptions);
const selectCurrentSelectableOptions = getSelectableOptions(selectCurrentOptions);
const selectFlattenOptions = getFlattenSelectOptions(selectOptions);
const selectCurrentFlattenOptions = getFlattenSelectOptions(selectCurrentOptions);
this.selectOptions = {
totalFlatten: selectFlattenOptions,
currentFlatten: selectCurrentFlattenOptions,
totalSelectable: selectSelectableOptions,
currentSelectable: selectCurrentSelectableOptions
};
}
handleKeyDown(event) {
if (!this.shortcuts) {
return;
}
switch (event.key) {
case 'Escape':
this.onDismiss();
break;
case 'Enter':
this.onEnter();
break;
case 'ArrowUp':
this.onNavigateUp();
break;
case 'ArrowDown':
this.onNavigateDown();
break;
}
}
/** Clears the highlighted option state */
async clearHighlightedOption() {
this.highlightedOption = undefined;
}
/** Close create popup */
async closeCreatePopup() {
this.isCreating = false;
}
/** Focuses the search text field */
async focusSearch() {
var _a;
(_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focusSearch();
}
componentWillLoad() {
this.buildSelectionOptions();
}
get isSearchable() {
return this.searchable && Object.keys(this.selectOptions.totalSelectable).length >= this.minSearchOptions;
}
get currentOptions() {
var _a;
return (_a = this.filteredOptions) !== null && _a !== void 0 ? _a : this.options;
}
render() {
var _a;
const selectedOptions = (_a = this.selectedOptions) !== null && _a !== void 0 ? _a : {};
const optionsLength = Object.keys(this.selectOptions.totalSelectable).length;
const currentOptionsLength = Object.keys(this.selectOptions.currentSelectable).length;
const selectedOptionsLength = Object.keys(selectedOptions).filter(key => selectedOptions[key]).length;
const hasOptions = optionsLength > 0;
const hasCurrentOptions = currentOptionsLength > 0;
const hasSelectedOptions = selectedOptionsLength > 0;
const isSelectionClearable = hasOptions && this.selectionClearable;
const isSelectionClearEnabled = hasSelectedOptions && hasCurrentOptions;
const isSelectAllAvailable = hasOptions && this.selectionAll;
const isSelectAllEnabled = hasCurrentOptions && selectedOptionsLength < optionsLength;
const hasNoDataAvailable = !hasOptions && !hasCurrentOptions;
const hasNoResultsFound = hasOptions && !hasCurrentOptions;
const selectedItemsCountText = `Selected: ${selectedOptionsLength}/${optionsLength}`;
return (h("kv-select", { key: '958e4ccb402fad6ab32db00b34de5454fa66cef0', ref: element => (this.selectRef = element), maxHeight: this.maxHeight, minHeight: this.minHeight, maxWidth: this.maxWidth, minWidth: this.minWidth, searchable: this.isSearchable, searchValue: this.searchValue, selectionClearable: isSelectionClearable, selectionClearEnabled: isSelectionClearEnabled, searchPlaceholder: this.searchPlaceholder, clearSelectionLabel: this.clearSelectionLabel, selectionAll: isSelectAllAvailable, selectionAllEnabled: isSelectAllEnabled, selectAllLabel: this.selectAllLabel, onSelectAll: this.onSelectAll, onClearSelection: this.onClearSelection, part: "select" }, h("slot", { key: 'a870a0ebb924bfc747d8efd1733dded667704c12', name: "select-header-actions", slot: "select-header-actions" }), h("slot", { key: 'f75b82ea36b5774dbe70a6ee54d46255464e8b5b', name: "select-header-label", slot: "select-header-label" }), this.counter && (h("div", { key: 'ac8269141a0733756c81f08d70b4759116043134', class: "select-header-label", slot: "select-header-label" }, h("kv-tooltip", { key: 'd1a678af9250bc5f29a82692dcee9c41474e7fc4', text: selectedItemsCountText, truncate: true }, h("div", { key: '551a2a5c36281d42637dea4f1e590d1a7ab0ab44', class: "selected-items-label" }, selectedItemsCountText)))), hasNoDataAvailable && (h("slot", { key: '8f1ed81b1188850e3d09c486966dfeabb0f0f078', name: "no-data-available" }, h("div", { key: '433a56f3541f4845d132352c8ec664c47fed979e', class: "no-data-available" }, h("div", { key: 'ff64edfa5f6f1e3fa7c6fd3c0d606a84b9b6389a', class: "illustration-message" }, h("kv-illustration-message", Object.assign({ key: 'cd53154bb0f1ff480f660f142200f1077e05643e' }, this.noDataAvailableConfig)))), this.canAddItems && (h("div", { key: '41fb0869ba24ea58a2bff05484533b0d0062c297', class: "create-new-option-button" }, h("kv-select-option", Object.assign({ key: '5cca9095b7270d92c508d6480363afcad908d921' }, buildNewOption(this.highlightedOption, this.createOptionPlaceholder), { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
} })))))), hasNoResultsFound && (h("slot", { key: '295167bb5140450bdbd6831a5d3d093243e99e86', name: "no-results-found" }, h("div", { key: '3521ad756c13499fa043558bc9fc5fa7d16a0605', class: "no-results-found" }, h("div", { key: '6f0d733115348a72f6fb49bf0bbff0255a831578', class: "illustration-message" }, h("kv-illustration-message", Object.assign({ key: '71f8084ce8c233be892418adb2291aed78b74c55' }, this.noResultsFoundConfig))), this.canAddItems && (h("div", { key: '4622125125507f216698e0683927e0e046ca651b', class: "create-new-option-button" }, h("kv-select-option", Object.assign({ key: '0cde310441b3dea8d64807330a2418569968881a' }, buildNewOption(this.highlightedOption, this.createOptionPlaceholder), { onItemSelected: this.onItemSelected, style: {
'--select-option-height': `${SELECT_OPTION_HEIGHT_IN_PX}px`
} }))))))), hasCurrentOptions && this.renderOptions(), this.isCreating && (h("div", { key: '4f975afce4001523824af16d1a1b73a68219be1d', class: {
'create-new-option-container': true,
'has-shortcuts': this.shortcuts
} }, h("div", { key: 'b6e6779123a9730d4c584a151d069bedfc7dc192', class: "create-new-option-form" }, h("slot", { key: 'dc302a348538b6e88496ac7fa57a8a7321debe94', name: "create-new-option" }, h("div", { key: 'e4c8d301e82ae2d26271ec7d6f573ca246e7e3cf', class: "form-container" }, h("kv-select-create-option", { key: '4670df0d2eb3338e64329127646c850afc7e3208', value: this.createdOptionValue, inputConfig: { placeholder: this.createInputPlaceholder } })))))), this.shortcuts && (h("slot", { key: 'db105964aa4a43393b5586f0af102831eace16b3', name: "select-footer", slot: "select-footer" }, h("kv-select-shortcuts-label", { key: '63349b242efbfa1e54570509c97172ade86aa31e' }, h("div", { key: 'dc5c59716950b76b025fa6ac4a6aae588f0abae3', class: "counter", slot: "right-items" }, !isEmpty(this.searchValue) && hasCurrentOptions && h("span", { key: '54046b20f57da68d54e201cda05a9c967bffbad6' }, pluralize('result', currentOptionsLength, true))))))));
}
get el() { return this; }
static get watchers() { return {
"options": ["buildSelectionOptions"],
"filteredOptions": ["buildSelectionOptions"],
"selectedOptions": ["buildSelectionOptions"],
"highlightedOption": ["buildSelectionOptions"]
}; }
static get style() { return selectMultiOptionsCss; }
}, [1, "kv-select-multi-options", {
"options": [16],
"filteredOptions": [16, "filtered-options"],
"selectedOptions": [16, "selected-options"],
"noDataAvailableConfig": [16, "no-data-available-config"],
"noResultsFoundConfig": [16, "no-results-found-config"],
"searchable": [516],
"searchPlaceholder": [513, "search-placeholder"],
"searchValue": [513, "search-value"],
"selectionClearable": [516, "selection-clearable"],
"clearSelectionLabel": [513, "clear-selection-label"],
"minHeight": [513, "min-height"],
"maxHeight": [513, "max-height"],
"minWidth": [513, "min-width"],
"maxWidth": [513, "max-width"],
"selectionAll": [516, "selection-all"],
"selectAllLabel": [513, "select-all-label"],
"counter": [516],
"minSearchOptions": [514, "min-search-options"],
"shortcuts": [516],
"canAddItems": [516, "can-add-items"],
"createInputPlaceholder": [513, "create-input-placeholder"],
"createOptionPlaceholder": [513, "create-option-placeholder"],
"selectOptions": [32],
"highlightedOption": [32],
"isCreating": [32],
"createdOptionValue": [32],
"clearHighlightedOption": [64],
"closeCreatePopup": [64],
"focusSearch": [64]
}, [[0, "valueChanged", "valueChangedOptionHandler"], [0, "clickCreate", "clickCreateOptionHandler"], [0, "clickCancel", "cancelCreateOptionHandler"], [4, "keydown", "handleKeyDown"]], {
"options": ["buildSelectionOptions"],
"filteredOptions": ["buildSelectionOptions"],
"selectedOptions": ["buildSelectionOptions"],
"highlightedOption": ["buildSelectionOptions"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-select-multi-options", "kv-action-button", "kv-action-button-icon", "kv-badge", "kv-checkbox", "kv-dirty-dot", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-illustration", "kv-illustration-message", "kv-portal", "kv-search", "kv-select", "kv-select-create-option", "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-select-multi-options":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvSelectMultiOptions);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "kv-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "kv-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "kv-illustration-message":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-search":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-select":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-select-create-option":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-select-option":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-select-shortcuts-label":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-virtualized-list":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvSelectMultiOptions as K, defineCustomElement as d };