@limetech/lime-elements 37.15.0 → 37.15.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 +34 -16
- package/dist/cjs/limel-portal_3.cjs.entry.js.map +1 -1
- package/dist/collection/components/tooltip/getOwnerElement.js +10 -0
- package/dist/collection/components/tooltip/getOwnerElement.js.map +1 -0
- package/dist/collection/components/tooltip/tooltip.js +6 -16
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/components/tooltip/tooltipTimer.js +20 -0
- package/dist/collection/components/tooltip/tooltipTimer.js.map +1 -0
- package/dist/esm/limel-portal_3.entry.js +34 -16
- 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-ae978098.entry.js +2 -0
- package/dist/lime-elements/p-ae978098.entry.js.map +1 -0
- package/dist/types/components/tooltip/getOwnerElement.d.ts +2 -0
- package/dist/types/components/tooltip/tooltip.d.ts +1 -2
- package/dist/types/components/tooltip/tooltipTimer.d.ts +10 -0
- package/package.json +2 -2
- package/dist/lime-elements/p-66c9403f.entry.js +0 -2
- package/dist/lime-elements/p-66c9403f.entry.js.map +0 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export function getOwnerElement(id, startingPoint) {
|
|
2
|
+
let element = startingPoint;
|
|
3
|
+
do {
|
|
4
|
+
element = element.parentNode;
|
|
5
|
+
} while (element &&
|
|
6
|
+
element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
|
|
7
|
+
element.nodeType !== Node.DOCUMENT_NODE);
|
|
8
|
+
return element === null || element === void 0 ? void 0 : element.getElementById(id);
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=getOwnerElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getOwnerElement.js","sourceRoot":"","sources":["../../../src/components/tooltip/getOwnerElement.tsx"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAC3B,EAAU,EACV,aAAmB;EAEnB,IAAI,OAAO,GAAS,aAAa,CAAC;EAElC,GAAG;IACC,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC;GAChC,QACG,OAAO;IACP,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,sBAAsB;IAChD,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,aAAa,EACzC;EAEF,OAAQ,OAAsB,aAAtB,OAAO,uBAAP,OAAO,CAAiB,cAAc,CAAC,EAAE,CAAC,CAAC;AACvD,CAAC","sourcesContent":["export function getOwnerElement(\n id: string,\n startingPoint: Node,\n): HTMLElement | undefined {\n let element: Node = startingPoint;\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(id);\n}\n"]}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
2
|
import { createRandomString } from '../../util/random-string';
|
|
3
|
+
import { getOwnerElement } from './getOwnerElement';
|
|
4
|
+
import { TooltipTimer } from './tooltipTimer';
|
|
3
5
|
const DEFAULT_MAX_LENGTH = 50;
|
|
4
6
|
/**
|
|
5
7
|
* A tooltip can be used to display a descriptive text for any element.
|
|
@@ -48,14 +50,10 @@ const DEFAULT_MAX_LENGTH = 50;
|
|
|
48
50
|
export class Tooltip {
|
|
49
51
|
constructor() {
|
|
50
52
|
this.showTooltip = () => {
|
|
51
|
-
|
|
52
|
-
this.showTooltipTimeoutHandle = window.setTimeout(() => {
|
|
53
|
-
this.open = true;
|
|
54
|
-
}, tooltipDelay);
|
|
53
|
+
this.tooltipTimer.showAfterDelay();
|
|
55
54
|
};
|
|
56
55
|
this.hideTooltip = () => {
|
|
57
|
-
|
|
58
|
-
this.open = false;
|
|
56
|
+
this.tooltipTimer.hide();
|
|
59
57
|
};
|
|
60
58
|
this.elementId = undefined;
|
|
61
59
|
this.label = undefined;
|
|
@@ -65,9 +63,10 @@ export class Tooltip {
|
|
|
65
63
|
this.open = undefined;
|
|
66
64
|
this.portalId = createRandomString();
|
|
67
65
|
this.tooltipId = createRandomString();
|
|
66
|
+
this.tooltipTimer = new TooltipTimer(() => (this.open = true), () => (this.open = false));
|
|
68
67
|
}
|
|
69
68
|
connectedCallback() {
|
|
70
|
-
this.ownerElement = this.
|
|
69
|
+
this.ownerElement = getOwnerElement(this.elementId, this.host);
|
|
71
70
|
this.setOwnerAriaLabel();
|
|
72
71
|
this.addListeners();
|
|
73
72
|
}
|
|
@@ -99,15 +98,6 @@ export class Tooltip {
|
|
|
99
98
|
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
|
|
100
99
|
(_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
|
|
101
100
|
}
|
|
102
|
-
getOwnerElement() {
|
|
103
|
-
let element = this.host;
|
|
104
|
-
do {
|
|
105
|
-
element = element.parentNode;
|
|
106
|
-
} while (element &&
|
|
107
|
-
element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
|
|
108
|
-
element.nodeType !== Node.DOCUMENT_NODE);
|
|
109
|
-
return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
|
|
110
|
-
}
|
|
111
101
|
static get is() { return "limel-tooltip"; }
|
|
112
102
|
static get encapsulation() { return "shadow"; }
|
|
113
103
|
static get originalStyleUrls() {
|
|
@@ -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;
|
|
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';\nimport { getOwnerElement } from './getOwnerElement';\nimport { TooltipTimer } from './tooltipTimer';\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 ownerElement: HTMLElement;\n private tooltipTimer: TooltipTimer;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n this.tooltipTimer = new TooltipTimer(\n () => (this.open = true),\n () => (this.open = false),\n );\n }\n\n public connectedCallback() {\n this.ownerElement = getOwnerElement(this.elementId, this.host);\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 this.tooltipTimer.showAfterDelay();\n };\n\n private hideTooltip = () => {\n this.tooltipTimer.hide();\n };\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const DEFAULT_DELAY_FOR_SHOWING = 500;
|
|
2
|
+
export class TooltipTimer {
|
|
3
|
+
constructor(showCallback, hideCallback, delayForShowing = DEFAULT_DELAY_FOR_SHOWING) {
|
|
4
|
+
this.timerHandle = null;
|
|
5
|
+
this.showCallback = showCallback;
|
|
6
|
+
this.hideCallback = hideCallback;
|
|
7
|
+
this.delayForShowing = delayForShowing;
|
|
8
|
+
}
|
|
9
|
+
showAfterDelay() {
|
|
10
|
+
if (!this.timerHandle) {
|
|
11
|
+
this.timerHandle = setTimeout(this.showCallback, this.delayForShowing);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
hide() {
|
|
15
|
+
clearTimeout(this.timerHandle);
|
|
16
|
+
this.timerHandle = null;
|
|
17
|
+
this.hideCallback();
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=tooltipTimer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltipTimer.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltipTimer.ts"],"names":[],"mappings":"AAAA,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAEtC,MAAM,OAAO,YAAY;EAMrB,YACI,YAAsB,EACtB,YAAsB,EACtB,kBAA0B,yBAAyB;IAR/C,gBAAW,GAAkB,IAAI,CAAC;IAUtC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;EAC3C,CAAC;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACnB,IAAI,CAAC,WAAW,GAAG,UAAU,CACzB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,eAAe,CACvB,CAAC;KACL;EACL,CAAC;EAED,IAAI;IACA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC/B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IACxB,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;CACJ","sourcesContent":["const DEFAULT_DELAY_FOR_SHOWING = 500;\n\nexport class TooltipTimer {\n private timerHandle: number | null = null;\n private showCallback: Function;\n private hideCallback: Function;\n private delayForShowing: number;\n\n constructor(\n showCallback: Function,\n hideCallback: Function,\n delayForShowing: number = DEFAULT_DELAY_FOR_SHOWING,\n ) {\n this.showCallback = showCallback;\n this.hideCallback = hideCallback;\n this.delayForShowing = delayForShowing;\n }\n\n showAfterDelay(): void {\n if (!this.timerHandle) {\n this.timerHandle = setTimeout(\n this.showCallback,\n this.delayForShowing,\n );\n }\n }\n\n hide(): void {\n clearTimeout(this.timerHandle);\n this.timerHandle = null;\n this.hideCallback();\n }\n}\n"]}
|
|
@@ -2004,6 +2004,36 @@ const Portal = class {
|
|
|
2004
2004
|
};
|
|
2005
2005
|
Portal.style = portalCss;
|
|
2006
2006
|
|
|
2007
|
+
function getOwnerElement(id, startingPoint) {
|
|
2008
|
+
let element = startingPoint;
|
|
2009
|
+
do {
|
|
2010
|
+
element = element.parentNode;
|
|
2011
|
+
} while (element &&
|
|
2012
|
+
element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
|
|
2013
|
+
element.nodeType !== Node.DOCUMENT_NODE);
|
|
2014
|
+
return element === null || element === void 0 ? void 0 : element.getElementById(id);
|
|
2015
|
+
}
|
|
2016
|
+
|
|
2017
|
+
const DEFAULT_DELAY_FOR_SHOWING = 500;
|
|
2018
|
+
class TooltipTimer {
|
|
2019
|
+
constructor(showCallback, hideCallback, delayForShowing = DEFAULT_DELAY_FOR_SHOWING) {
|
|
2020
|
+
this.timerHandle = null;
|
|
2021
|
+
this.showCallback = showCallback;
|
|
2022
|
+
this.hideCallback = hideCallback;
|
|
2023
|
+
this.delayForShowing = delayForShowing;
|
|
2024
|
+
}
|
|
2025
|
+
showAfterDelay() {
|
|
2026
|
+
if (!this.timerHandle) {
|
|
2027
|
+
this.timerHandle = setTimeout(this.showCallback, this.delayForShowing);
|
|
2028
|
+
}
|
|
2029
|
+
}
|
|
2030
|
+
hide() {
|
|
2031
|
+
clearTimeout(this.timerHandle);
|
|
2032
|
+
this.timerHandle = null;
|
|
2033
|
+
this.hideCallback();
|
|
2034
|
+
}
|
|
2035
|
+
}
|
|
2036
|
+
|
|
2007
2037
|
const tooltipCss = ":host(limel-tooltip){position:absolute;pointer-events:none}";
|
|
2008
2038
|
|
|
2009
2039
|
const DEFAULT_MAX_LENGTH = 50;
|
|
@@ -2011,14 +2041,10 @@ const Tooltip = class {
|
|
|
2011
2041
|
constructor(hostRef) {
|
|
2012
2042
|
registerInstance(this, hostRef);
|
|
2013
2043
|
this.showTooltip = () => {
|
|
2014
|
-
|
|
2015
|
-
this.showTooltipTimeoutHandle = window.setTimeout(() => {
|
|
2016
|
-
this.open = true;
|
|
2017
|
-
}, tooltipDelay);
|
|
2044
|
+
this.tooltipTimer.showAfterDelay();
|
|
2018
2045
|
};
|
|
2019
2046
|
this.hideTooltip = () => {
|
|
2020
|
-
|
|
2021
|
-
this.open = false;
|
|
2047
|
+
this.tooltipTimer.hide();
|
|
2022
2048
|
};
|
|
2023
2049
|
this.elementId = undefined;
|
|
2024
2050
|
this.label = undefined;
|
|
@@ -2028,9 +2054,10 @@ const Tooltip = class {
|
|
|
2028
2054
|
this.open = undefined;
|
|
2029
2055
|
this.portalId = createRandomString();
|
|
2030
2056
|
this.tooltipId = createRandomString();
|
|
2057
|
+
this.tooltipTimer = new TooltipTimer(() => (this.open = true), () => (this.open = false));
|
|
2031
2058
|
}
|
|
2032
2059
|
connectedCallback() {
|
|
2033
|
-
this.ownerElement = this.
|
|
2060
|
+
this.ownerElement = getOwnerElement(this.elementId, this.host);
|
|
2034
2061
|
this.setOwnerAriaLabel();
|
|
2035
2062
|
this.addListeners();
|
|
2036
2063
|
}
|
|
@@ -2062,15 +2089,6 @@ const Tooltip = class {
|
|
|
2062
2089
|
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.showTooltip);
|
|
2063
2090
|
(_d = this.ownerElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('blur', this.hideTooltip);
|
|
2064
2091
|
}
|
|
2065
|
-
getOwnerElement() {
|
|
2066
|
-
let element = this.host;
|
|
2067
|
-
do {
|
|
2068
|
-
element = element.parentNode;
|
|
2069
|
-
} while (element &&
|
|
2070
|
-
element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&
|
|
2071
|
-
element.nodeType !== Node.DOCUMENT_NODE);
|
|
2072
|
-
return element === null || element === void 0 ? void 0 : element.getElementById(this.elementId);
|
|
2073
|
-
}
|
|
2074
2092
|
get host() { return getElement(this); }
|
|
2075
2093
|
};
|
|
2076
2094
|
Tooltip.style = tooltipCss;
|