@scania/tegel
Version:
Tegel Design System
301 lines (300 loc) • 11.6 kB
JavaScript
import { Host, h } from "@stencil/core";
import inheritAttributes from "../../utils/inheritAttributes";
/**
* @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
*/
export class TdsPopoverMenu {
constructor() {
/** 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(this.host, ['style', 'class']);
}
render() {
var _a;
return (h(Host, { key: '532fd12854743e5200896f6c2397a36308dfbb6b', class: {
[`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
} }, 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 }, h("div", { key: '0f4fa6bc7a230fbe86fec7c02b3324d81a379594', role: "menu" }, h("slot", { key: '41f2693c7dfa904bec41ad1eeb665c019282fa9f' })))));
}
static get is() { return "tds-popover-menu"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["popover-menu.scss"]
};
}
static get styleUrls() {
return {
"$": ["popover-menu.css"]
};
}
static get properties() {
return {
"selector": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The CSS-selector for an element that will trigger the pop-over"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "selector"
},
"referenceEl": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "HTMLElement | null",
"resolved": "HTMLElement | null | undefined",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Element that will trigger the pop-over (takes priority over selector)"
},
"getter": false,
"setter": false
},
"show": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean | null",
"resolved": "boolean | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show",
"defaultValue": "null"
},
"defaultShow": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decides if the component should be visible from the start."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "default-show",
"defaultValue": "false"
},
"placement": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Placement",
"resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
"references": {
"Placement": {
"location": "import",
"path": "@popperjs/core",
"id": "node_modules::Placement",
"referenceLocation": "Placement"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decides the placement of the Popover Menu"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "placement",
"defaultValue": "'auto'"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'none' | 'fade' | string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the popover should animate when being opened/closed or not"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "animation",
"defaultValue": "'none'"
},
"offsetSkidding": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the offset skidding"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "offset-skidding",
"defaultValue": "0"
},
"offsetDistance": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the offset distance"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "offset-distance",
"defaultValue": "8"
},
"fluidWidth": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If true this unsets the width (160px) of the Popover Menu"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "fluid-width",
"defaultValue": "false"
},
"modeVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'primary' | 'secondary' | null",
"resolved": "\"primary\" | \"secondary\" | null",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Mode variant of the component, based on current mode."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "mode-variant",
"defaultValue": "null"
}
};
}
static get states() {
return {
"childRef": {}
};
}
static get methods() {
return {
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Property for closing popover programmatically",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}