@scania/tegel
Version:
Tegel Design System
57 lines (52 loc) • 3.29 kB
JavaScript
'use strict';
var index = require('./index-DGsdvbvx.js');
var inheritAttributes = require('./inheritAttributes-CGw91JfB.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 TdsPopoverMenu = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
/** 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 if the component should be visible from the start. */
this.defaultShow = false;
/** Decides the placement of the Popover Menu */
this.placement = 'auto';
/** Whether the popover should animate when being opened/closed or not */
this.animation = 'none';
/** Sets the offset skidding */
this.offsetSkidding = 0;
/** Sets the offset distance */
this.offsetDistance = 8;
/** If true this unsets the width (160px) of the Popover Menu */
this.fluidWidth = false;
/** 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.inheritAttributes(this.host, ['style', 'class']);
}
render() {
var _a;
return (index.h(index.Host, { key: '532fd12854743e5200896f6c2397a36308dfbb6b', class: {
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
} }, index.h("tds-popover-core", { key: '3544cb2cafd1f4b536ffeff249f77665063419fc', 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 }, index.h("div", { key: '0f4fa6bc7a230fbe86fec7c02b3324d81a379594', role: "menu" }, index.h("slot", { key: '41f2693c7dfa904bec41ad1eeb665c019282fa9f' })))));
}
get host() { return index.getElement(this); }
};
TdsPopoverMenu.style = popoverMenuCss();
exports.tds_popover_menu = TdsPopoverMenu;