@kelvininc/ui-components
Version:
Kelvin UI Components
89 lines (84 loc) • 4.08 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D-JVwta2.js';
import { o as offset, f as flip } from './floating-ui.dom-CJTtq_QG.js';
import { d as didClickOnElement } from './mouse-event.helper-GA0HsMY0.js';
import { a as DEFAULT_DROPDOWN_Z_INDEX } from './config-CJMopqu5.js';
import './isNil-DjSNdVAB.js';
import './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './icon.types-SVedE_O8.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.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 = 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();
}
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 getElement(this); }
};
KvDropdownBase.style = dropdownBaseCss;
export { KvDropdownBase as kv_dropdown_base };