@limetech/lime-elements 37.14.0 → 37.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/limel-portal_3.cjs.entry.js +6 -4
- package/dist/cjs/limel-portal_3.cjs.entry.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.js +6 -4
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/esm/limel-portal_3.entry.js +6 -4
- package/dist/esm/limel-portal_3.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-4b29d287.entry.js → p-66c9403f.entry.js} +2 -2
- package/dist/lime-elements/p-66c9403f.entry.js.map +1 -0
- package/package.json +2 -2
- package/dist/lime-elements/p-4b29d287.entry.js.map +0 -1
|
@@ -86,16 +86,18 @@ export class Tooltip {
|
|
|
86
86
|
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
|
|
87
87
|
}
|
|
88
88
|
addListeners() {
|
|
89
|
-
var _a, _b, _c;
|
|
89
|
+
var _a, _b, _c, _d;
|
|
90
90
|
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.showTooltip);
|
|
91
91
|
(_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', this.hideTooltip);
|
|
92
|
-
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('
|
|
92
|
+
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('focus', this.showTooltip);
|
|
93
|
+
(_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.addEventListener('blur', this.hideTooltip);
|
|
93
94
|
}
|
|
94
95
|
removeListeners() {
|
|
95
|
-
var _a, _b, _c;
|
|
96
|
+
var _a, _b, _c, _d;
|
|
96
97
|
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.showTooltip);
|
|
97
98
|
(_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', this.hideTooltip);
|
|
98
|
-
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('
|
|
99
|
+
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
|
|
100
|
+
(_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
|
|
99
101
|
}
|
|
100
102
|
getOwnerElement() {
|
|
101
103
|
let element = this.host;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAG9D,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAMH,MAAM,OAAO,OAAO;EA+ChB;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n *\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /**\n * ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n */\n @Prop({ reflect: true })\n public elementId!: string;\n\n /**\n * Short descriptive text of the owner element.\n */\n @Prop({ reflect: true })\n public label!: string;\n\n /**\n * Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n */\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /**\n * The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n /**\n * Decides the tooltip's location in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top';\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n @State()\n private open: boolean;\n\n private portalId: string;\n private tooltipId: string;\n private showTooltipTimeoutHandle: number;\n private ownerElement: HTMLElement;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n }\n\n public connectedCallback() {\n this.ownerElement = this.getOwnerElement();\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render(): JSX.Element {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection={this.openDirection}\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n anchor={this.ownerElement}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.addEventListener('focus', this.showTooltip);\n this.ownerElement?.addEventListener('blur', this.hideTooltip);\n }\n\n private removeListeners() {\n this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.removeEventListener('focus', this.showTooltip);\n this.ownerElement?.removeEventListener('blur', this.hideTooltip);\n }\n\n private showTooltip = () => {\n const tooltipDelay = 500;\n this.showTooltipTimeoutHandle = window.setTimeout(() => {\n this.open = true;\n }, tooltipDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.showTooltipTimeoutHandle);\n this.open = false;\n };\n\n private getOwnerElement(): HTMLElement | undefined {\n let element: Node = this.host;\n\n do {\n element = element.parentNode;\n } while (\n element &&\n element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n element.nodeType !== Node.DOCUMENT_NODE\n );\n\n return (element as ShadowRoot)?.getElementById(this.elementId);\n }\n}\n"]}
|
|
@@ -2049,16 +2049,18 @@ const Tooltip = class {
|
|
|
2049
2049
|
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
|
|
2050
2050
|
}
|
|
2051
2051
|
addListeners() {
|
|
2052
|
-
var _a, _b, _c;
|
|
2052
|
+
var _a, _b, _c, _d;
|
|
2053
2053
|
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.showTooltip);
|
|
2054
2054
|
(_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', this.hideTooltip);
|
|
2055
|
-
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('
|
|
2055
|
+
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('focus', this.showTooltip);
|
|
2056
|
+
(_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.addEventListener('blur', this.hideTooltip);
|
|
2056
2057
|
}
|
|
2057
2058
|
removeListeners() {
|
|
2058
|
-
var _a, _b, _c;
|
|
2059
|
+
var _a, _b, _c, _d;
|
|
2059
2060
|
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.showTooltip);
|
|
2060
2061
|
(_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', this.hideTooltip);
|
|
2061
|
-
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('
|
|
2062
|
+
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
|
|
2063
|
+
(_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
|
|
2062
2064
|
}
|
|
2063
2065
|
getOwnerElement() {
|
|
2064
2066
|
let element = this.host;
|