@cbpds/web-components
Version:
Web components for the CBP Design System.
185 lines (184 loc) • 7.67 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: 'f162a7a0a4c86a27e252087d5d2461ffa387577d', "aria-describedby": `${this.fieldId}`, role: "button", tabindex: "0", onfocus: () => this.open = true, onClick: () => this.host.focus() }, h("slot", { key: 'd4bcb6c1503a5a8532819ffd0199c8075f3eb082' }), h("div", { key: '128d1fca83f585361be5f52cf5411c88ee731fe1', role: "tooltip", id: `${this.fieldId}` }, h("div", { key: '0cbba979b9d34ccb5203d905a7ec91cbf05ecb6f' }, h("slot", { key: '2168846bc49e0b0e9f06d455b51580832b14fe2f', name: "cbp-tooltip-content" })), h("cbp-button", { key: 'dfbd2b35a5978aa0e43a294406f7e8a7979bdf13', class: "cbp-tooltip-close", type: "button", fill: "ghost", color: "secondary", context: this.invertContext(), variant: "square", accessibilityText: "Close Tooltip", onClick: () => this.dismissTooltip(), onKeyDown: (e) => this.handleFocusOut(e) }, h("cbp-icon", { key: '17995a877461780f0a0b019f9b9011aa06584734', 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