@kelvininc/ui-components
Version:
Kelvin UI Components
167 lines (161 loc) • 9.66 kB
JavaScript
import { e as EComponentSize, B as EValidationState, A as EInputFieldType, H as proxyCustomElement, I as H, J as createEvent, K as h, t as EIconName, L as Host } from './p-BP5CxQcH.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './p-CRcRM80a.js';
import { o as offset, f as flip, s as size, d as defineCustomElement$4 } from './p-CgqRIP0M.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { d as defineCustomElement$a } from './p-CJTppmYq.js';
import { d as defineCustomElement$9 } from './p-CcHqOBLS.js';
import { d as defineCustomElement$8 } from './p-BfW2hU_X.js';
import { d as defineCustomElement$7 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$6 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$5 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$3 } from './p-sG4FxOig.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
import { m as merge } from './p-597Q-QFb.js';
const DEFAULT_INPUT_CONFIG = {
placeholder: 'Select an option',
type: EInputFieldType.Text,
state: EValidationState.None,
size: EComponentSize.Large
};
const DEFAULT_DROPDOWN_OFFSET = 8;
const HELP_TEXT_HEIGHT_PX = 24;
const getDefaultDropdownPositionConfig = (inputConfig) => {
const helpTextOffset = isEmpty(inputConfig.helpText) ? 0 : HELP_TEXT_HEIGHT_PX;
return {
placement: 'bottom',
middleware: [
offset(DEFAULT_DROPDOWN_OFFSET - helpTextOffset),
flip({
padding: 16,
fallbackPlacements: ['top-end', 'bottom-end', 'top-start', 'bottom-start']
}),
size({
apply({ rects, elements }) {
Object.assign(elements.floating.style, {
width: `${rects.reference.width}px`
});
}
})
]
};
};
const dropdownCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.dropdown-container{user-select:none}.dropdown-container kv-text-field{--input-height-large:var(--dropdown-height-regular);--input-height-small:var(--dropdown-height-compact);--input-gap-x:var(--dropdown-gap-vertical-default);--input-prefix-spacing-x:var(--dropdown-gap-vertical-small);--input-gap-y:var(--dropdown-gap-horizontal-horizontal);--input-padding-x-large:var(--dropdown-padding-x-regular);--input-padding-x-small:var(--dropdown-padding-x-compact);--input-radius-large:var(--dropdown-radius-regular);--input-radius-small:var(--dropdown-radius-compact);--input-border-thickness:var(--dropdown-border-thickness-default);--action-icon-size:var(--dropdown-icon-size-regular);--text-color-input-default:var(--dropdown-text-text-default);--text-color-help-text-default:var(--dropdown-text-helper-text-default);--border-color-default:var(--dropdown-border-color-default);--background-color-default:var(--dropdown-background-default);--text-color-icon-default:var(--dropdown-icon-color-input-default);--text-color-action-icon-default:var(--dropdown-icon-color-input-default);--text-color-input-focused:var(--dropdown-text-text-selected);--border-color-focused:var(--dropdown-border-color-selected);--text-color-icon-focused:var(--dropdown-icon-color-input-selected);--text-color-action-icon-focused:var(--dropdown-icon-color-input-selected);--text-color-input-filled:var(--dropdown-text-text-filled);--text-color-icon-filled:var(--dropdown-icon-color-input-filled);--text-color-action-icon-filled:var(--dropdown-icon-color-input-filled);--border-color-filled:var(--dropdown-border-color-filled);--text-color-input-disabled:var(--dropdown-text-text-disabled);--text-color-placeholder-disabled:var(--dropdown-text-text-disabled);--border-color-disabled:var(--dropdown-border-color-disabled);--background-color-disabled:var(--dropdown-background-disabled);--text-color-icon-disabled:var(--dropdown-icon-color-input-disabled);--text-color-action-icon-disabled:var(--dropdown-icon-color-input-disabled);--text-color-help-text-error:var(--dropdown-text-helper-text-error);--border-color-error:var(--dropdown-border-color-error)}";
const KvDropdown = /*@__PURE__*/ proxyCustomElement(class KvDropdown extends H {
constructor() {
super();
this.__registerHost();
this.openStateChange = createEvent(this, "openStateChange", 3);
this.clickOutside = createEvent(this, "clickOutside", 7);
/** @inheritdoc */
this.inputConfig = {};
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.listElement = null;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
this.getInputConfig = () => {
return merge({}, DEFAULT_INPUT_CONFIG, { inputDisabled: this.disabled }, this.inputConfig);
};
}
/** Toggles the dropdown open state */
async onToggleOpenState() {
if (!this.disabled) {
this.openStateChange.emit(!this.isOpen);
}
}
componentDidRender() {
var _a;
this._actionElement = (_a = this.actionElement) !== null && _a !== void 0 ? _a : this.el.querySelector('#dropdown-input').shadowRoot.querySelector('#dropdown-input');
}
render() {
var _a;
const inputConfig = this.getInputConfig();
return (h(Host, { key: 'c083c83fd9a6aa37463ae894629f02f12089bc2c' }, h("div", { key: 'a50eeb51574c39dfecc914fcf76340a08ebd3e8a', class: "dropdown-container" }, h("kv-dropdown-base", { key: 'bbc825dc210378fa0a13eedc8b80ce0cd95b288c', isOpen: this.isOpen, options: (_a = this.options) !== null && _a !== void 0 ? _a : getDefaultDropdownPositionConfig(inputConfig), actionElement: this._actionElement, listElement: this.listElement, clickOutsideClose: this.clickOutsideClose, zIndex: this.zIndex }, h("slot", { key: '6f05055ab2960b1271b6ce9d5167594cd4fe392f', name: "dropdown-action", slot: "action" }, h("div", { key: '86f8694876e234cdd8115e6b584efb56abb971af' }, h("kv-text-field", Object.assign({ key: 'cf2052003f2a0596c97527176680b582bf89ad2b' }, inputConfig, { id: "dropdown-input", forcedFocus: this.isOpen, onFieldClick: this.onToggleOpenState.bind(this), inputReadonly: true, actionIcon: this.isOpen ? EIconName.ArrowDropUp : EIconName.ArrowDropDown }), h("slot", { key: '2b5ec20bfb917fd4fc0df8a2dfb79ba5b4cb1d63', name: "right-slot", slot: "right-slot" }), h("slot", { key: '73e3903105aa3c9198c491d1e52ad0937365b522', name: "left-slot", slot: "left-slot" })))), h("div", { key: 'e276011c29cf3015a2a98f821733660a18e7b949', slot: "list" }, h("div", { key: '5607a15a0816b8ae5aa6780f7edbf339dfa90e57', id: "select", class: "select" }, h("slot", { key: '468b00342404e43053392ae287c225a9eb809e66' })))))));
}
get el() { return this; }
static get style() { return dropdownCss; }
}, [260, "kv-dropdown", {
"inputConfig": [16, "input-config"],
"isOpen": [516, "is-open"],
"options": [16],
"actionElement": [16, "action-element"],
"listElement": [16, "list-element"],
"disabled": [4],
"clickOutsideClose": [516, "click-outside-close"],
"zIndex": [2, "z-index"],
"_actionElement": [32],
"onToggleOpenState": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-dropdown", "kv-badge", "kv-dirty-dot", "kv-dropdown-base", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-portal", "kv-text-field", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-dropdown":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvDropdown);
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvDropdown as K, defineCustomElement as d };