@scania/tegel/dist/components/tds-popover-menu.js

Tegel Design System

import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
import { i as inheritAttributes } from './p-3fe9cbbf.js';
import { d as defineCustomElement$2 } from './p-d3866be7.js';

const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
const TdsPopoverMenuStyle0 = popoverMenuCss;

const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = [];
        this.selector = undefined;
        this.referenceEl = undefined;
        this.show = null;
        this.defaultShow = false;
        this.placement = 'auto';
        this.animation = 'none';
        this.offsetSkidding = 0;
        this.offsetDistance = 8;
        this.fluidWidth = false;
        this.childRef = undefined;
    }
    /** Property for closing popover programmatically */
    async close() {
        var _a;
        (_a = this.childRef) === null || _a === void 0 ? void 0 : _a.close();
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
    }
    render() {
        var _a;
        return (h(Host, { key: '4f285ba1fb6b12ad66c09bbf3d109aa4cdff82cf' }, h("tds-popover-core", { key: 'bd1fb62cbeb25ec8a0a5bfa580cef36c950e0fa3', class: {
                'tds-popover-menu': true,
                [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                'fluid-width': this.fluidWidth,
            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                this.childRef = el;
            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'c79034c0d9f06bc429d30c51e6c5b70edd404052', role: "menu" }, h("slot", { key: '7e10d182c7529d716734317a5cca5087f30c1a9b' })))));
    }
    get host() { return this; }
    static get style() { return TdsPopoverMenuStyle0; }
}, [6, "tds-popover-menu", {
        "selector": [1],
        "referenceEl": [16],
        "show": [4],
        "defaultShow": [4, "default-show"],
        "placement": [1],
        "animation": [1],
        "offsetSkidding": [2, "offset-skidding"],
        "offsetDistance": [2, "offset-distance"],
        "fluidWidth": [4, "fluid-width"],
        "childRef": [32],
        "close": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["tds-popover-menu", "tds-popover-core"];
    components.forEach(tagName => { switch (tagName) {
        case "tds-popover-menu":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TdsPopoverMenu$1);
            }
            break;
        case "tds-popover-core":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const TdsPopoverMenu = TdsPopoverMenu$1;
const defineCustomElement = defineCustomElement$1;

export { TdsPopoverMenu, defineCustomElement };