@kelvininc/ui-components
Version:
Kelvin UI Components
80 lines (75 loc) • 3.77 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BOTigrTZ.js';
import { o as offset, f as flip } from './floating-ui.dom-CJTtq_QG.js';
import { d as didClickOnElement } from './mouse-event.helper-CImXQnlm.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './config-DfTrc9q6.js';
import './wizard.types-COrzvkrr.js';
import './isNil-DjSNdVAB.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
};
KvDropdownBase.style = dropdownBaseCss;
export { KvDropdownBase as kv_dropdown_base };