@kelvininc/ui-components
Version:
Kelvin UI Components
106 lines (101 loc) • 4.69 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, L as Host } from './p-BP5CxQcH.js';
import { o as offset, f as flip, d as defineCustomElement$1 } from './p-CgqRIP0M.js';
import { d as didClickOnElement } from './p-Cvht_zQn.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './p-CRcRM80a.js';
const DEFAULT_DROPDOWN_OFFSET = 8;
const DEFAULT_POSITION_CONFIG = {
placement: 'bottom',
middleware: [
offset(DEFAULT_DROPDOWN_OFFSET),
flip({
padding: 16,
fallbackPlacements: ['top-end', 'bottom-end', 'top-start', 'bottom-start']
})
]
};
const dropdownBaseCss = "@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-base-list{width:100%}";
const KvDropdownBase = /*@__PURE__*/ proxyCustomElement(class KvDropdownBase extends H {
constructor() {
super();
this.__registerHost();
this.openStateChange = createEvent(this, "openStateChange", 7);
this.clickOutside = createEvent(this, "clickOutside", 7);
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.options = DEFAULT_POSITION_CONFIG;
/** @inheritdoc */
this.actionElement = null;
/** @inheritdoc */
this.listElement = null;
/** @inheritdoc */
this.clickOutsideClose = true;
/** @inheritdoc */
this.zIndex = DEFAULT_DROPDOWN_Z_INDEX;
this.getActionElement = () => {
var _a;
return (_a = this.actionElement) !== null && _a !== void 0 ? _a : this.action;
};
this.getListElement = () => {
var _a;
return (_a = this.listElement) !== null && _a !== void 0 ? _a : this.portal;
};
this.didClickOnDropdownAction = (event) => {
const dropdownActionElement = this.getActionElement();
return didClickOnElement(dropdownActionElement, event);
};
this.didClickOnDropdownList = (event) => {
const dropdownListElement = this.getListElement();
return didClickOnElement(dropdownListElement, event);
};
}
checkForClickOutside(event) {
// Check if clicked inside the dropdown
if (this.didClickOnDropdownAction(event) || this.didClickOnDropdownList(event)) {
return;
}
if (this.isOpen && this.clickOutsideClose) {
this.openStateChange.emit(!this.isOpen);
}
this.clickOutside.emit(event);
}
disconnectedCallback() {
var _a;
// Requires deleting portal from outside KvPortal because KvPortal is moved to global context
// and would only be destroyed when the global context is destroyed.
(_a = this.portal) === null || _a === void 0 ? void 0 : _a.remove();
}
render() {
return (h(Host, { key: '4e4c7a224c21ed840cda7b25bcdf5291a011b5c0' }, h("div", { key: '3f34c6190639bbcd5a4764ee05938dfd01099428', id: "dropdown-action", ref: el => (this.action = el) }, h("slot", { key: '1a69edda08f5e8925edd72e46b33baacc6dbe0e5', name: "action" })), h("kv-portal", { key: '76662b19361907772abd2c5a112146b22367a5f2', animated: true, ref: el => (this.portal = el), show: this.isOpen, reference: this.getActionElement(), options: this.options, zIndex: this.zIndex }, h("div", { key: '3a2cf570844afd3b1e9b650308c8ea4c70c50fe6', class: "dropdown-base-list" }, h("slot", { key: '5150c2a047b5482c38a0904916859572d8021644', name: "list" })))));
}
get element() { return this; }
static get style() { return dropdownBaseCss; }
}, [260, "kv-dropdown-base", {
"isOpen": [516, "is-open"],
"options": [16],
"actionElement": [16, "action-element"],
"listElement": [16, "list-element"],
"clickOutsideClose": [516, "click-outside-close"],
"zIndex": [2, "z-index"],
"action": [32]
}, [[9, "mousedown", "checkForClickOutside"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-dropdown-base", "kv-portal"];
components.forEach(tagName => { switch (tagName) {
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvDropdownBase);
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvDropdownBase as K, defineCustomElement as d };