@kelvininc/ui-components
Version:
Kelvin UI Components
106 lines (101 loc) • 4.61 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, d as defineCustomElement$1 } from './p-BIWUEm1f.js';
import { d as didClickOnElement } from './p-Dhw0q1D8.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './p-BEvgYojK.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}}.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();
}
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: '0df805faac4fa5b200785e30eeb45e03b5612fd8' }, h("div", { key: '6f6dac7aaa939ddf6bba101f6c303eac3a7c6be3', id: "dropdown-action", ref: el => (this.action = el) }, h("slot", { key: 'b08f14ce5c960d7de0d16e3287a31d9268e9d2e7', name: "action" })), h("kv-portal", { key: '5cde2f3bd5ae4c571e83805032d18f57d9d6f027', animated: true, ref: el => (this.portal = el), show: this.isOpen, reference: this.getActionElement(), options: this.options, zIndex: this.zIndex }, h("div", { key: '80a3955b6d774d819189af42f7806f81ec952c04', class: "dropdown-base-list" }, h("slot", { key: '836df702f17b000221222338b6bef3e1777a78a8', name: "list" })))));
}
get element() { return this; }
static get style() { return dropdownBaseCss; }
}, [4, "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 };