@kelvininc/ui-components/dist/cjs/kv-dropdown-base.cjs.entry.js

Kelvin UI Components

'use strict';

var index = require('./index-rNNWWpit.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var mouseEvent_helper = require('./mouse-event.helper-D8ZVsFab.js');
var config = require('./config-dyyw7PBD.js');
require('./wizard.types-C9Yhv1tt.js');
require('./isNil-B-fGcnNC.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.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(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 (index.h(index.Host, { key: '4e4c7a224c21ed840cda7b25bcdf5291a011b5c0' }, index.h("div", { key: '3f34c6190639bbcd5a4764ee05938dfd01099428', id: "dropdown-action", ref: el => (this.action = el) }, index.h("slot", { key: '1a69edda08f5e8925edd72e46b33baacc6dbe0e5', name: "action" })), index.h("kv-portal", { key: '76662b19361907772abd2c5a112146b22367a5f2', animated: true, ref: el => (this.portal = el), show: this.isOpen, reference: this.getActionElement(), options: this.options, zIndex: this.zIndex }, index.h("div", { key: '3a2cf570844afd3b1e9b650308c8ea4c70c50fe6', class: "dropdown-base-list" }, index.h("slot", { key: '5150c2a047b5482c38a0904916859572d8021644', name: "list" })))));
    }
    get element() { return index.getElement(this); }
};
KvDropdownBase.style = dropdownBaseCss;

exports.kv_dropdown_base = KvDropdownBase;