@scania/tegel
Version:
Tegel Design System
320 lines (319 loc) • 12.8 kB
JavaScript
import { Host, h } from "@stencil/core";
import inheritAttributes from "../../utils/inheritAttributes";
/**
* @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
*/
export class TdsPopoverCanvas {
constructor() {
/** 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' })))));
}
static get is() { return "tds-popover-canvas"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["popover-canvas.scss"]
};
}
static get styleUrls() {
return {
"$": ["popover-canvas.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 Popover"
},
"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 Popover (takes priority over selector)"
},
"getter": false,
"setter": false
},
"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"
},
"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"
},
"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 Canvas. See https://popper.js.org/docs/v2/constructors/#placement"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "placement",
"defaultValue": "'auto'"
},
"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"
},
"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'"
},
"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"
},
"modifiers": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "object[]",
"resolved": "object[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"tdsAlertDialog": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'alertdialog' | 'dialog'",
"resolved": "\"alertdialog\" | \"dialog\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Role of the popover canvas component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-alert-dialog",
"defaultValue": "'dialog'"
},
"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"; }
}