@kelvininc/ui-components
Version:
Kelvin UI Components
165 lines (160 loc) • 7.34 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { o as offset, f as flip, s as size, d as defineCustomElement$4 } from './p-BIWUEm1f.js';
import { d as EValidationState, c as EInputFieldType, b as EIconName } from './p-DBphUUgi.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './p-BEvgYojK.js';
import { d as defineCustomElement$a } from './p-BOySlV0g.js';
import { d as defineCustomElement$9 } from './p-BJSKhyhi.js';
import { d as defineCustomElement$8 } from './p-z6Xl-2s2.js';
import { d as defineCustomElement$7 } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$6 } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$5 } from './p-B41PGLQm.js';
import { d as defineCustomElement$3 } from './p-DMity2tp.js';
import { d as defineCustomElement$2 } from './p-GHnCHOez.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.js';
import { m as merge } from './p-DZUGWoQz.js';
const DEFAULT_INPUT_CONFIG = {
placeholder: 'Select an option',
type: EInputFieldType.Text,
state: EValidationState.None,
size: EComponentSize.Large
};
const DEFAULT_DROPDOWN_OFFSET = 8;
const DEFAULT_DROPDOWN_POSITION_CONFIG = {
placement: 'bottom',
middleware: [
offset(DEFAULT_DROPDOWN_OFFSET),
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}}.dropdown-container{user-select:none}.dropdown-container kv-text-field{--action-icon-size:20px}";
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.options = DEFAULT_DROPDOWN_POSITION_CONFIG;
/** @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, { disabled: 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() {
return (h(Host, { key: '3d7e19268935ae45c7180a634e6f5ce8d1a7611a' }, h("div", { key: 'd718a943fbdca2ed3929550437a31e571c5b4836', class: "dropdown-container" }, h("kv-dropdown-base", { key: '7c9daf293f7f79f153add1f2f04a8e08f24259b0', isOpen: this.isOpen, options: this.options, actionElement: this._actionElement, listElement: this.listElement, clickOutsideClose: this.clickOutsideClose, zIndex: this.zIndex }, h("slot", { key: 'ff77d8996a68418af2bf03ed6dc65305d391dd76', name: "dropdown-action", slot: "action" }, h("div", { key: '2600cc143459895cf4ccdf99540ad3f6e7118a14' }, h("kv-text-field", Object.assign({ key: '9627f5d413ebef6abc7177a6d4ec00dc7a6982bf' }, this.getInputConfig(), { id: "dropdown-input", forcedFocus: this.isOpen, onFieldClick: this.onToggleOpenState.bind(this), inputReadonly: true, actionIcon: this.isOpen ? EIconName.ArrowDropUp : EIconName.ArrowDropDown }), h("slot", { key: 'c927d5d65699389e20e6b2ec461af4f68cfaedf3', name: "right-slot", slot: "right-slot" }), h("slot", { key: '8ab71ee8dbcb935a1b44c7eff7eb1bb3912033dc', name: "left-slot", slot: "left-slot" })))), h("div", { key: '45b410efd27534b722ff0734fba601803646e119', slot: "list" }, h("div", { key: 'a6b03a114ee472af0b0a72cc2c1aaaccde940101', id: "select", class: "select" }, h("slot", { key: 'a233e261b1e36a198dacdca423b99151cc9c1804' })))))));
}
get el() { return this; }
static get style() { return dropdownCss; }
}, [4, "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 };