@kelvininc/ui-components
Version:
Kelvin UI Components
91 lines (85 loc) • 4.15 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var mouseEvent_helper = require('./mouse-event.helper-D3vPaJ0b.js');
var config = require('./config-TIjltaxO.js');
require('./isNil-B-fGcnNC.js');
require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
const DEFAULT_DROPDOWN_OFFSET = 8;
const DEFAULT_POSITION_CONFIG = {
placement: 'bottom',
middleware: [
floatingUi_dom.offset(DEFAULT_DROPDOWN_OFFSET),
floatingUi_dom.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) {
index.registerInstance(this, hostRef);
this.openStateChange = index.createEvent(this, "openStateChange", 7);
this.clickOutside = index.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 = config.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 mouseEvent_helper.didClickOnElement(dropdownActionElement, event);
};
this.didClickOnDropdownList = (event) => {
const dropdownListElement = this.getListElement();
return mouseEvent_helper.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 (index.h(index.Host, { key: '0df805faac4fa5b200785e30eeb45e03b5612fd8' }, index.h("div", { key: '6f6dac7aaa939ddf6bba101f6c303eac3a7c6be3', id: "dropdown-action", ref: el => (this.action = el) }, index.h("slot", { key: 'b08f14ce5c960d7de0d16e3287a31d9268e9d2e7', name: "action" })), index.h("kv-portal", { key: '5cde2f3bd5ae4c571e83805032d18f57d9d6f027', animated: true, ref: el => (this.portal = el), show: this.isOpen, reference: this.getActionElement(), options: this.options, zIndex: this.zIndex }, index.h("div", { key: '80a3955b6d774d819189af42f7806f81ec952c04', class: "dropdown-base-list" }, index.h("slot", { key: '836df702f17b000221222338b6bef3e1777a78a8', name: "list" })))));
}
get element() { return index.getElement(this); }
};
KvDropdownBase.style = dropdownBaseCss;
exports.kv_dropdown_base = KvDropdownBase;