@scania/tegel/dist/esm/tds-popover-canvas.entry.js

Tegel Design System

import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
import { i as inheritAttributes } from './inheritAttributes-CF8bH08v.js';

const popoverCanvasCss = () => `.tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:var(--tds-popover-canvas-box-shadow);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}`;

const TdsPopoverCanvas = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** Decides if the component should be visible from the start. */
        this.defaultShow = false;
        /** Controls whether the Popover is shown or not. If this is set hiding and showing
         * will be decided by this prop and will need to be controlled from the outside. This
         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
         */
        this.show = null;
        /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */
        this.placement = 'auto';
        /** Sets the offset skidding */
        this.offsetSkidding = 0;
        /** Whether the popover should animate when being opened/closed or not */
        this.animation = 'none';
        /** Sets the offset distance */
        this.offsetDistance = 8;
        /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
        this.modifiers = [];
        /** Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
        this.tdsAlertDialog = 'dialog';
        /** Mode variant of the component, based on current mode. */
        this.modeVariant = null;
        this.inheritedAttributes = {};
    }
    /** 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: 'f839a18c87e3bfda390b498902c839e9c02498dd', class: {
                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
            } }, h("tds-popover-core", Object.assign({ key: '406b98aa40a5a227956018a6892b0963530bc0a0', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
                'tds-popover-canvas': true,
                [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                this.childRef = el;
            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '4c733fb2a810d47668f4625d947f5e82884cfdf8' }, h("slot", { key: 'cff933b094ae64e5ecad95ab1752206f16f3f919' })))));
    }
    get host() { return getElement(this); }
};
TdsPopoverCanvas.style = popoverCanvasCss();

export { TdsPopoverCanvas as tds_popover_canvas };