@cbpds/web-components
Version:
Web components for the CBP Design System.
185 lines (184 loc) • 7.63 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey, getInvertedContext } from "../../utils/utils";
export class CbpTooltip {
constructor() {
this.open = false;
this.variant = undefined;
this.alignment = undefined;
this.fieldId = createNamespaceKey('cbp-tooltip');
this.context = undefined;
this.sx = {};
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
dismissTooltip() {
this.host.focus();
this.open = false;
}
handleFocusOut({ key, shiftKey }) {
if (key == 'Tab' && !shiftKey)
this.open = false;
}
handleKeyDown(ev) {
if (ev.key == 'Escape') {
this.dismissTooltip();
}
}
invertContext() {
let currentElement = this.host;
let context;
while (currentElement) {
if (currentElement.hasAttribute('context') || currentElement.hasAttribute('data-cbp-theme')) {
if (currentElement.hasAttribute('context')) {
context = currentElement.getAttribute('context');
}
else {
context = currentElement.getAttribute('data-cbp-theme');
}
return getInvertedContext(context);
}
currentElement = currentElement.parentElement;
}
}
render() {
return (h(Host, { key: 'b9e2570f044de09727c00830771c5aebe93e29d0', "aria-describedby": `${this.fieldId}`, role: "button", tabindex: "0", onfocus: () => this.open = true, onClick: () => this.host.focus() }, h("slot", { key: 'fe87172dedabf627c8e8b4fe64f64e0b7b17bb3e' }), h("div", { key: 'b236ba9d75e6df46b32710ccbf7dbcb37dc7ed3d', role: "tooltip", id: `${this.fieldId}` }, h("div", { key: '73b64eef6548e25a990324f4ae3bc0ab89ba4d48' }, h("slot", { key: '944fe4430dbb8d612d35690e83fe7b23ce72371e', name: "cbp-tooltip-content" })), h("cbp-button", { key: '4175a0036c8946750a0d4128927614aa7402547d', class: "cbp-tooltip-close", type: "button", fill: "ghost", color: "secondary", context: this.invertContext(), variant: "square", onClick: () => this.dismissTooltip(), onKeyDown: (e) => this.handleFocusOut(e) }, h("cbp-icon", { key: '38b3a8911bfc8d4fdc049c7c373270ceff09773d', name: "circle-xmark", size: "var(--cbp-space-5x)" })))));
}
static get is() { return "cbp-tooltip"; }
static get originalStyleUrls() {
return {
"$": ["cbp-tooltip.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-tooltip.css"]
};
}
static get properties() {
return {
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When set, specifies that the tooltip is open"
},
"attribute": "open",
"reflect": true,
"defaultValue": "false"
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'definition'",
"resolved": "\"definition\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "used to set styles for the definition link for text controls"
},
"attribute": "variant",
"reflect": true
},
"alignment": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"top-left\" | \"top-center\" | \"top-left\" | \"right-top\" | \"right-center\" | \"right-bottom\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\" | \"left-top\" | \"left-center\" | \"left-bottom\"",
"resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"left-bottom\" | \"left-center\" | \"left-top\" | \"right-bottom\" | \"right-center\" | \"right-top\" | \"top-center\" | \"top-left\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "sets where the tooltip will be displayed and where the caret will be placed"
},
"attribute": "alignment",
"reflect": true
},
"fieldId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility"
},
"attribute": "field-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-tooltip')"
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-tooltip.js.map