@riverty/web-components 5.5.0 → 5.7.0
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 +29 -0
- package/README.md +3 -3
- package/custom-elements.json +19 -15
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/r-accordion.cjs.entry.js +1 -1
- package/dist/cjs/r-alert.cjs.entry.js +1 -1
- package/dist/cjs/r-badge.cjs.entry.js +1 -1
- package/dist/cjs/r-button.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox.cjs.entry.js +4 -4
- package/dist/cjs/r-hint_3.cjs.entry.js +136 -38
- package/dist/cjs/r-icon-button.cjs.entry.js +3 -3
- package/dist/cjs/r-icon.cjs.entry.js +2 -2
- package/dist/cjs/r-input-code.cjs.entry.js +1 -1
- package/dist/cjs/r-input-date.cjs.entry.js +7 -7
- package/dist/cjs/r-input-password.cjs.entry.js +7 -4
- package/dist/cjs/r-input-phone-number.cjs.entry.js +4 -4
- package/dist/cjs/r-input.cjs.entry.js +6 -4
- package/dist/cjs/r-radio-button.cjs.entry.js +1 -1
- package/dist/cjs/r-radio-group.cjs.entry.js +7 -7
- package/dist/cjs/r-select.cjs.entry.js +3 -3
- package/dist/cjs/r-textarea.cjs.entry.js +1 -1
- package/dist/cjs/r-toast.cjs.entry.js +9 -10
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/components/accordion/accordion.js +1 -2
- package/dist/collection/components/alert/alert.css +4 -4
- package/dist/collection/components/badge/badge.css +8 -8
- package/dist/collection/components/button/button.js +1 -2
- package/dist/collection/components/checkbox/checkbox.js +4 -5
- package/dist/collection/components/checkbox-group/checkbox-group.css +2 -2
- package/dist/collection/components/hint/hint.css +1 -1
- package/dist/collection/components/icon/bundled-icons/riverty-kit.json +1 -1
- package/dist/collection/components/icon/icon.js +2 -2
- package/dist/collection/components/icon/riverty-kit.js +1 -1
- package/dist/collection/components/icon-button/icon-button.js +3 -4
- package/dist/collection/components/input/input.css +1 -1
- package/dist/collection/components/input/input.js +24 -3
- package/dist/collection/components/input-code/input-code.css +1 -1
- package/dist/collection/components/input-date/input-date.css +1 -1
- package/dist/collection/components/input-date/input-date.js +7 -7
- package/dist/collection/components/input-password/input-password.js +8 -5
- package/dist/collection/components/input-phone-number/input-phone-number.js +5 -5
- package/dist/collection/components/label/label.js +4 -4
- package/dist/collection/components/radio-button/radio-button.css +1 -1
- package/dist/collection/components/radio-group/radio-group.css +2 -2
- package/dist/collection/components/radio-group/radio-group.js +7 -7
- package/dist/collection/components/select/select.css +2 -2
- package/dist/collection/components/select/select.js +3 -4
- package/dist/collection/components/textarea/textarea.css +1 -1
- package/dist/collection/components/textarea/textarea.js +1 -1
- package/dist/collection/components/toast/toast.css +7 -7
- package/dist/collection/components/toast/toast.js +10 -11
- package/dist/collection/components/tooltip/tooltip.css +6 -71
- package/dist/collection/components/tooltip/tooltip.js +135 -33
- package/dist/esm/loader.js +1 -1
- package/dist/esm/r-accordion.entry.js +1 -1
- package/dist/esm/r-alert.entry.js +1 -1
- package/dist/esm/r-badge.entry.js +1 -1
- package/dist/esm/r-button.entry.js +1 -1
- package/dist/esm/r-checkbox-group.entry.js +1 -1
- package/dist/esm/r-checkbox.entry.js +4 -4
- package/dist/esm/r-hint_3.entry.js +136 -38
- package/dist/esm/r-icon-button.entry.js +3 -3
- package/dist/esm/r-icon.entry.js +2 -2
- package/dist/esm/r-input-code.entry.js +1 -1
- package/dist/esm/r-input-date.entry.js +7 -7
- package/dist/esm/r-input-password.entry.js +7 -4
- package/dist/esm/r-input-phone-number.entry.js +4 -4
- package/dist/esm/r-input.entry.js +6 -4
- package/dist/esm/r-radio-button.entry.js +1 -1
- package/dist/esm/r-radio-group.entry.js +7 -7
- package/dist/esm/r-select.entry.js +3 -3
- package/dist/esm/r-textarea.entry.js +1 -1
- package/dist/esm/r-toast.entry.js +9 -10
- package/dist/esm/web-components.js +1 -1
- package/dist/types/components/accordion/accordion.d.ts +0 -1
- package/dist/types/components/button/button.d.ts +0 -1
- package/dist/types/components/checkbox/checkbox.d.ts +0 -1
- package/dist/types/components/icon/exports.d.ts +1 -0
- package/dist/types/components/icon/icon-data.d.ts +1 -0
- package/dist/types/components/icon/icon.d.ts +1 -1
- package/dist/types/components/icon/riverty-kit.d.ts +1 -0
- package/dist/types/components/icon-button/icon-button.d.ts +0 -1
- package/dist/types/components/input/input.d.ts +5 -0
- package/dist/types/components/input-date/input-date.d.ts +1 -1
- package/dist/types/components/input-password/input-password.d.ts +1 -1
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +1 -1
- package/dist/types/components/label/label.d.ts +1 -1
- package/dist/types/components/radio-group/radio-group.d.ts +1 -1
- package/dist/types/components/select/select.d.ts +1 -2
- package/dist/types/components/textarea/textarea.d.ts +3 -3
- package/dist/types/components/toast/toast.d.ts +1 -3
- package/dist/types/components/tooltip/tooltip.d.ts +12 -4
- package/dist/types/components.d.ts +28 -40
- package/dist/web-components/bundled-icons/riverty-kit.json +1 -1
- package/dist/web-components/p-289eb4b0.entry.js +1 -0
- package/dist/web-components/p-2b8e12ae.entry.js +1 -0
- package/dist/web-components/{p-89136369.entry.js → p-2e2c8a5b.entry.js} +1 -1
- package/dist/web-components/{p-ad4292d8.entry.js → p-3a39932b.entry.js} +1 -1
- package/dist/web-components/{p-43eff76a.entry.js → p-44be9992.entry.js} +1 -1
- package/dist/web-components/{p-230e44ae.entry.js → p-63474b32.entry.js} +1 -1
- package/dist/web-components/{p-0735fd75.entry.js → p-72c0c0d8.entry.js} +1 -1
- package/dist/web-components/{p-24bbf3b6.entry.js → p-74d2a563.entry.js} +1 -1
- package/dist/web-components/p-7ad8e78b.entry.js +1 -0
- package/dist/web-components/{p-28718c50.entry.js → p-8028c2a9.entry.js} +1 -1
- package/dist/web-components/{p-a683612d.entry.js → p-96ddeb7f.entry.js} +1 -1
- package/dist/web-components/{p-7fccc301.entry.js → p-9d898089.entry.js} +1 -1
- package/dist/web-components/{p-99ba15d9.entry.js → p-9e50120b.entry.js} +1 -1
- package/dist/web-components/{p-e49b1ec3.entry.js → p-b2f03016.entry.js} +1 -1
- package/dist/web-components/{p-8c577cda.entry.js → p-c300c22f.entry.js} +1 -1
- package/dist/web-components/{p-f1e22caa.entry.js → p-d1379ac6.entry.js} +1 -1
- package/dist/web-components/{p-c09a863b.entry.js → p-d93c240d.entry.js} +1 -1
- package/dist/web-components/p-f770e22b.entry.js +1 -0
- package/dist/web-components/{p-a58124c4.entry.js → p-f952161b.entry.js} +1 -1
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +7 -6
- package/dist/web-components/p-00eb6986.entry.js +0 -1
- package/dist/web-components/p-0f4eea22.entry.js +0 -1
- package/dist/web-components/p-2265dae1.entry.js +0 -1
- package/dist/web-components/p-f22696e0.entry.js +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const hintCss = ":host{--r-hint--text--flex:1}:host([variant=information]){--r-hint--color:var(--r-text-soft, #686868)}:host([variant=success]),:host([success]){--r-hint--color:var(--r-status-success-regular, #298535)}:host([variant=warning]),:host([warning]){--r-hint--color:var(--r-status-warning-strong, #89411a)}:host([variant=error]),:host([invalid]){--r-hint--color:var(--r-status-error-regular, #
|
|
3
|
+
const hintCss = ":host{--r-hint--text--flex:1}:host([variant=information]){--r-hint--color:var(--r-text-soft, #686868)}:host([variant=success]),:host([success]){--r-hint--color:var(--r-status-success-regular, #298535)}:host([variant=warning]),:host([warning]){--r-hint--color:var(--r-status-warning-strong, #89411a)}:host([variant=error]),:host([invalid]){--r-hint--color:var(--r-status-error-regular, #b00c15)}:host([icon-position=end]){--r-hint--flex-direction:row-reverse}:host{display:block}.r-hint{display:var(--r-hint--display, flex);flex-direction:var(--r-hint--flex-direction, row);gap:var(--r-hint--gap, var(--r-spacing-050, 0.5rem));font-family:var(--r-hint--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-hint--font-size, var(--r-font-size-300, 0.875rem));line-height:var(--r-hint--line-height, var(--r-line-height-m, 1.5));color:var(--r-hint--color, var(--r-text-soft, #686868));font-weight:var(--r-hint--font-weight, var(--r-font-weight-regular, 400));margin-top:var(--r-hint--margin-top, 0);margin-bottom:var(--r-hint--margin-bottom, 0)}.r-hint--icon{display:var(--r-hint--icon--display, flex);align-items:var(--r-hint--icon--align-items, start);min-width:var(--r-hint--icon--min-width, 1rem);margin-top:var(--r-hint--icon--margin-top, 0.15rem)}.r-hint--text{flex:var(--r-hint--text--flex, 1)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
4
4
|
|
|
5
5
|
const Hint = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -55,14 +55,14 @@ const RLabel = class {
|
|
|
55
55
|
size: 's',
|
|
56
56
|
color: tooltipIconColor
|
|
57
57
|
};
|
|
58
|
-
return (h(Host, { key: '
|
|
59
|
-
h("span", { key: '
|
|
60
|
-
h("span", { key: '
|
|
58
|
+
return (h(Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
|
|
59
|
+
h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
|
|
60
|
+
h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
|
|
61
61
|
}
|
|
62
62
|
};
|
|
63
63
|
RLabel.style = labelCss;
|
|
64
64
|
|
|
65
|
-
const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:
|
|
65
|
+
const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:fixed;--r-tooltip--content--display:none;--r-tooltip--content--color:var(--r-text-inverse);--r-tooltip--content--background-color:var(--r-background-inverse);--r-tooltip--content--font-family:var(--r-font-family-text);--r-tooltip--content--font-weight:var(--r-font-weight-regular);--r-tooltip--content--font-size:var(--r-font-size-200);--r-tooltip--content--line-height:var(--r-line-height-s);--r-tooltip--content--min-width:32px;--r-tooltip--content--max-width:300px;--r-tooltip--content--min-height:32px;--r-tooltip--content--padding:var(--r-spacing-050) var(--r-spacing-100);--r-tooltip--content--width:max-width;--r-tooltip--content--word-break:break-word;--r-tooltip--content--box-sizing:border-box;--r-tooltip--content--justify-content:center;--r-tooltip--content--align-items:center;--r-tooltip--content--z-index:0;--r-tooltip--arrow--display:none;--r-tooltip--arrow--position:fixed;--r-tooltip--arrow--width:12px;--r-tooltip--arrow--height:12px;--r-tooltip--arrow--transform:rotate(180deg);--r-tooltip--arrow--inner-content:\"\";--r-tooltip--arrow--inner--width:12px;--r-tooltip--arrow--inner--height:6px;--r-tooltip--arrow--inner--background-color:var(--r-tooltip--content--background-color);--r-tooltip--arrow--inner--clip-path:polygon(50% 0%, 0% 100%, 100% 100%);--r-tooltip--arrow--inner--border-radius:0;--r-tooltip--arrow--inner--align-self:flex-end}:host slot{display:contents}:host([data-position=bottom]){--r-tooltip--arrow--transform:rotate(0)}:host([data-position=right]){--r-tooltip--arrow--transform:rotate(270deg)}:host([data-position=left]){--r-tooltip--arrow--transform:rotate(90deg)}.r-tooltip{position:var(--r-tooltip--position)}.r-tooltip:has(.r-tooltip--content--visible){--r-tooltip--content--width:max-content;--r-tooltip--content--display:flex;--r-tooltip--content--z-index:1060;--r-tooltip--arrow--display:flex;--r-tooltip--arrow--inner--display:block}.r-tooltip--trigger{color:var(--r-tooltip--trigger--color, inherit);box-shadow:var(--r-tooltip--trigger--box-shadow, none);outline:var(--r-tooltip--trigger--outline, none);outline-offset:var(--r-tooltip--trigger--outline-offset, 0)}.r-tooltip--trigger:focus{--r-tooltip--trigger--box-shadow:0 0 0 6px var(--r-border-focused-outlined);--r-tooltip--trigger--outline:2px solid var(--r-border-focused);--r-tooltip--trigger--outline-offset:2px}.r-tooltip--content{position:var(--r-tooltip--content--position);display:var(--r-tooltip--content--display);color:var(--r-tooltip--content--color);background-color:var(--r-tooltip--content--background-color);font-family:var(--r-tooltip--content--font-family);font-weight:var(--r-tooltip--content--font-weight);font-size:var(--r-tooltip--content--font-size);line-height:var(--r-tooltip--content--line-height);min-width:var(--r-tooltip--content--min-width);max-width:var(--r-tooltip--content--max-width);min-height:var(--r-tooltip--content--min-height);padding:var(--r-tooltip--content--padding);width:var(--r-tooltip--content--width);word-break:var(--r-tooltip--content--word-break);box-sizing:var(--r-tooltip--content--box-sizing);z-index:var(--r-tooltip--content--z-index)}.r-tooltip--arrow{display:var(--r-tooltip--arrow--display);position:var(--r-tooltip--arrow--position);width:var(--r-tooltip--arrow--width);height:var(--r-tooltip--arrow--height);transform:var(--r-tooltip--arrow--transform)}.r-tooltip--arrow:after{content:var(--r-tooltip--arrow--inner-content);display:var(--r-tooltip--arrow--inner--display);width:var(--r-tooltip--arrow--inner--width);height:var(--r-tooltip--arrow--inner--height);background-color:var(--r-tooltip--arrow--inner--background-color);clip-path:var(--r-tooltip--arrow--inner--clip-path);border-radius:var(--r-tooltip--arrow--inner--border-radius);align-self:var(--r-tooltip--arrow--inner--align-self)}";
|
|
66
66
|
|
|
67
67
|
const OFFSET = 20;
|
|
68
68
|
const Tooltip = class {
|
|
@@ -76,6 +76,71 @@ const Tooltip = class {
|
|
|
76
76
|
this.arrowPositionState = 'left';
|
|
77
77
|
this.isShown = false;
|
|
78
78
|
this.uniqueId = `r-tooltip-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
79
|
+
this.getOffsetLeft = (arrowPosition) => {
|
|
80
|
+
var _a, _b, _c;
|
|
81
|
+
const offsetLeft = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width));
|
|
82
|
+
switch (arrowPosition) {
|
|
83
|
+
case 'center':
|
|
84
|
+
return offsetLeft / 2;
|
|
85
|
+
case 'right':
|
|
86
|
+
return offsetLeft;
|
|
87
|
+
default:
|
|
88
|
+
return 0;
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
this.alignTooltipPosition = () => {
|
|
92
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
93
|
+
const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
|
|
94
|
+
const offsetLeft = this.getOffsetLeft(this.arrowPositionState);
|
|
95
|
+
const hostHeight = ((_e = (_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.height) + this.arrowHeight || 0;
|
|
96
|
+
const hostWidth = ((_g = (_f = this.element) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.width) + this.arrowWidth || 0;
|
|
97
|
+
switch (this.positionState) {
|
|
98
|
+
case 'top':
|
|
99
|
+
this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
|
|
100
|
+
break;
|
|
101
|
+
case 'bottom':
|
|
102
|
+
this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
|
|
103
|
+
break;
|
|
104
|
+
case 'left':
|
|
105
|
+
this.alignPosition(this.tooltip, -this.tooltipContainerWidth, -offsetHeight);
|
|
106
|
+
break;
|
|
107
|
+
case 'right':
|
|
108
|
+
this.alignPosition(this.tooltip, hostWidth, -offsetHeight);
|
|
109
|
+
break;
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
this.alignArrowPosition = () => {
|
|
113
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
114
|
+
const offsetHeight = Math.abs(((_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) - ((_c = (_b = this.arrow) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.height)) / 2;
|
|
115
|
+
const offsetLeft = Math.abs(((_d = this.element) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().width) - ((_f = (_e = this.arrow) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect()) === null || _f === void 0 ? void 0 : _f.width)) / 2;
|
|
116
|
+
const hostHeight = ((_h = (_g = this.element) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect()) === null || _h === void 0 ? void 0 : _h.height) || 0;
|
|
117
|
+
const hostWidth = ((_k = (_j = this.element) === null || _j === void 0 ? void 0 : _j.getBoundingClientRect()) === null || _k === void 0 ? void 0 : _k.width) || 0;
|
|
118
|
+
switch (this.positionState) {
|
|
119
|
+
case 'top':
|
|
120
|
+
this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
|
|
121
|
+
break;
|
|
122
|
+
case 'bottom':
|
|
123
|
+
this.alignPosition(this.arrow, offsetLeft, hostHeight);
|
|
124
|
+
break;
|
|
125
|
+
case 'left':
|
|
126
|
+
this.alignPosition(this.arrow, -this.arrowWidth, offsetHeight);
|
|
127
|
+
break;
|
|
128
|
+
case 'right':
|
|
129
|
+
this.alignPosition(this.arrow, hostWidth, offsetHeight);
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
this.alignPosition = (element, offsetLeft, offsetTop) => {
|
|
134
|
+
var _a;
|
|
135
|
+
if (!element) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
let elementOffset = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
139
|
+
let left = elementOffset.left + offsetLeft;
|
|
140
|
+
let top = elementOffset.top + offsetTop;
|
|
141
|
+
element.style.left = `${left > 0 ? left : 0}px`;
|
|
142
|
+
element.style.top = `${top}px`;
|
|
143
|
+
};
|
|
79
144
|
/**
|
|
80
145
|
* Listen on hovering tooltip element and update tooltip position if needed
|
|
81
146
|
*/
|
|
@@ -93,11 +158,22 @@ const Tooltip = class {
|
|
|
93
158
|
};
|
|
94
159
|
this.showTooltip = () => {
|
|
95
160
|
this.isShown = true;
|
|
96
|
-
this.
|
|
161
|
+
this.tooltip.classList.add('r-tooltip--content--visible');
|
|
97
162
|
};
|
|
98
163
|
this.removeTooltip = () => {
|
|
99
164
|
this.isShown = false;
|
|
100
|
-
this.
|
|
165
|
+
this.tooltip.style.width = 'max-content';
|
|
166
|
+
this.tooltip.classList.remove('r-tooltip--content--visible');
|
|
167
|
+
};
|
|
168
|
+
this.handleScroll = () => {
|
|
169
|
+
if (!this.isShown) {
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
if (!this.isOnScreen) {
|
|
173
|
+
this.removeTooltip();
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
this.setCorrectPosition();
|
|
101
177
|
};
|
|
102
178
|
}
|
|
103
179
|
/**
|
|
@@ -126,30 +202,47 @@ const Tooltip = class {
|
|
|
126
202
|
this.removeTooltip();
|
|
127
203
|
}
|
|
128
204
|
}
|
|
129
|
-
/**
|
|
130
|
-
* Tooltip element value
|
|
131
|
-
*/
|
|
132
|
-
get tooltipValue() {
|
|
133
|
-
var _a, _b;
|
|
134
|
-
return (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.uniqueId);
|
|
135
|
-
}
|
|
136
205
|
/**
|
|
137
206
|
* Parent with non visible overflow
|
|
138
207
|
*/
|
|
139
208
|
get overflowedParent() {
|
|
140
209
|
return this.findOverflowParent(this.element.parentElement);
|
|
141
210
|
}
|
|
211
|
+
get arrowWidth() {
|
|
212
|
+
var _a;
|
|
213
|
+
return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
|
|
214
|
+
}
|
|
215
|
+
get arrowHeight() {
|
|
216
|
+
var _a;
|
|
217
|
+
return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
|
|
218
|
+
}
|
|
219
|
+
get tooltipContainerWidth() {
|
|
220
|
+
var _a, _b;
|
|
221
|
+
return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) + this.arrowWidth || 0;
|
|
222
|
+
}
|
|
223
|
+
get tooltipContainerHeight() {
|
|
224
|
+
var _a, _b;
|
|
225
|
+
return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) + this.arrowHeight || 0;
|
|
226
|
+
}
|
|
142
227
|
/**
|
|
143
228
|
* Available space at the top
|
|
144
229
|
*/
|
|
145
230
|
get top() {
|
|
146
|
-
return
|
|
231
|
+
return this.element.getBoundingClientRect().top;
|
|
147
232
|
}
|
|
148
233
|
/**
|
|
149
234
|
* Available space on the left
|
|
150
235
|
*/
|
|
151
236
|
get left() {
|
|
152
|
-
return
|
|
237
|
+
return this.element.getBoundingClientRect().left;
|
|
238
|
+
}
|
|
239
|
+
get isOnScreen() {
|
|
240
|
+
const parent = this.overflowedParent || document.documentElement;
|
|
241
|
+
const parentRect = parent.getBoundingClientRect();
|
|
242
|
+
const elementRect = this.element.getBoundingClientRect();
|
|
243
|
+
const isVerticallyVisible = elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
|
|
244
|
+
const isHorizontallyVisible = elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
|
|
245
|
+
return isVerticallyVisible && isHorizontallyVisible;
|
|
153
246
|
}
|
|
154
247
|
/**
|
|
155
248
|
* Available space at the bottom
|
|
@@ -158,7 +251,7 @@ const Tooltip = class {
|
|
|
158
251
|
function calculateBottomSpace(element) {
|
|
159
252
|
return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
|
|
160
253
|
}
|
|
161
|
-
return
|
|
254
|
+
return calculateBottomSpace(this.element);
|
|
162
255
|
}
|
|
163
256
|
/**
|
|
164
257
|
* Available space on the right
|
|
@@ -167,35 +260,31 @@ const Tooltip = class {
|
|
|
167
260
|
function calculateRightSpace(element) {
|
|
168
261
|
return window.innerWidth - element.getBoundingClientRect().left - element.getBoundingClientRect().width;
|
|
169
262
|
}
|
|
170
|
-
return
|
|
263
|
+
return calculateRightSpace(this.element);
|
|
171
264
|
}
|
|
172
265
|
/**
|
|
173
266
|
* Defines which horizontal placement is available
|
|
174
267
|
*/
|
|
175
268
|
get horizontalPlacement() {
|
|
176
|
-
|
|
177
|
-
return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetWidth) + OFFSET < this.left ? 'left' : 'right';
|
|
269
|
+
return this.tooltipContainerWidth + OFFSET < this.left ? 'left' : 'right';
|
|
178
270
|
}
|
|
179
271
|
/**
|
|
180
272
|
* Defines which vertical placement is available
|
|
181
273
|
*/
|
|
182
274
|
get verticalPlacement() {
|
|
183
|
-
|
|
184
|
-
return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetHeight) + OFFSET < this.top ? 'top' : 'bottom';
|
|
275
|
+
return this.tooltipContainerHeight + OFFSET < this.top ? 'top' : 'bottom';
|
|
185
276
|
}
|
|
186
277
|
/**
|
|
187
278
|
* Checks if there is enough space for placing tooltip vertically
|
|
188
279
|
*/
|
|
189
280
|
get isEnoughSpaceVertically() {
|
|
190
|
-
|
|
191
|
-
return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetHeight) + OFFSET < this.top || ((_b = this.tooltipValue) === null || _b === void 0 ? void 0 : _b.offsetHeight) + OFFSET < this.bottom;
|
|
281
|
+
return this.tooltipContainerHeight + OFFSET < this.top || this.tooltipContainerHeight + OFFSET < this.bottom;
|
|
192
282
|
}
|
|
193
283
|
/**
|
|
194
284
|
* Checks if there is enough space for placing tooltip horizontally
|
|
195
285
|
*/
|
|
196
286
|
get isEnoughSpaceHorizontally() {
|
|
197
|
-
|
|
198
|
-
return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetWidth) + OFFSET < this.left || ((_b = this.tooltipValue) === null || _b === void 0 ? void 0 : _b.offsetWidth) + OFFSET < this.right;
|
|
287
|
+
return this.tooltipContainerWidth + OFFSET < this.left || this.tooltipContainerWidth + OFFSET < this.right;
|
|
199
288
|
}
|
|
200
289
|
get activeElement() {
|
|
201
290
|
return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
|
|
@@ -210,13 +299,16 @@ const Tooltip = class {
|
|
|
210
299
|
* Listen to active child element
|
|
211
300
|
*/
|
|
212
301
|
componentDidLoad() {
|
|
213
|
-
var _a, _b;
|
|
302
|
+
var _a, _b, _c;
|
|
214
303
|
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
|
|
215
304
|
this.handleFocus();
|
|
216
305
|
});
|
|
217
306
|
(_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', () => {
|
|
218
307
|
this.removeTooltip();
|
|
219
308
|
});
|
|
309
|
+
(_c = this.overflowedParent) === null || _c === void 0 ? void 0 : _c.addEventListener('scroll', () => {
|
|
310
|
+
this.handleScroll();
|
|
311
|
+
});
|
|
220
312
|
}
|
|
221
313
|
/**
|
|
222
314
|
* Finds first element's parent with not visible overflow.
|
|
@@ -265,25 +357,32 @@ const Tooltip = class {
|
|
|
265
357
|
* First it checks the available space for a defined position and then sets the new one based on the available space.
|
|
266
358
|
*/
|
|
267
359
|
setCorrectPosition() {
|
|
268
|
-
|
|
269
|
-
if (!this.tooltipValue || !this.isShown) {
|
|
360
|
+
if (!this.tooltip || !this.isShown) {
|
|
270
361
|
return;
|
|
271
362
|
}
|
|
272
363
|
switch (this.position) {
|
|
273
364
|
case 'top':
|
|
274
|
-
this.positionState =
|
|
365
|
+
this.positionState = this.tooltipContainerHeight + OFFSET < this.top ? this.position : this.getAlternativePosition();
|
|
275
366
|
break;
|
|
276
367
|
case 'bottom':
|
|
277
|
-
this.positionState =
|
|
368
|
+
this.positionState = this.tooltipContainerHeight + OFFSET < this.bottom ? this.position : this.getAlternativePosition();
|
|
278
369
|
break;
|
|
279
370
|
case 'left':
|
|
280
|
-
this.positionState =
|
|
371
|
+
this.positionState = this.tooltipContainerWidth + OFFSET < this.left ? this.position : this.getAlternativePosition();
|
|
281
372
|
break;
|
|
282
373
|
case 'right':
|
|
283
|
-
this.positionState =
|
|
374
|
+
this.positionState = this.tooltipContainerWidth + OFFSET < this.right ? this.position : this.getAlternativePosition();
|
|
284
375
|
break;
|
|
285
376
|
}
|
|
286
377
|
this.adjustArrowPosition();
|
|
378
|
+
this.alignTooltipPosition();
|
|
379
|
+
this.alignArrowPosition();
|
|
380
|
+
// allow tooltip content wrap and recalculate position
|
|
381
|
+
if (this.tooltip.style.width === 'fit-content') {
|
|
382
|
+
return;
|
|
383
|
+
}
|
|
384
|
+
this.tooltip.style.width = 'fit-content';
|
|
385
|
+
this.alignTooltipPosition();
|
|
287
386
|
}
|
|
288
387
|
/**
|
|
289
388
|
* Adjusts arrow correct position.
|
|
@@ -291,10 +390,9 @@ const Tooltip = class {
|
|
|
291
390
|
* For right & left tooltip positions there is only one position = "center".
|
|
292
391
|
*/
|
|
293
392
|
adjustArrowPosition() {
|
|
294
|
-
|
|
295
|
-
const
|
|
296
|
-
|
|
297
|
-
if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
|
|
393
|
+
const isEnoughTooltipSpaceLeft = this.tooltipContainerWidth / 2 + OFFSET < this.left;
|
|
394
|
+
const isEnoughTooltipSpaceRight = this.tooltipContainerWidth / 2 + OFFSET < this.right;
|
|
395
|
+
if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || !isEnoughTooltipSpaceLeft && !isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
|
|
298
396
|
this.arrowPositionState = 'center';
|
|
299
397
|
}
|
|
300
398
|
else if (!isEnoughTooltipSpaceLeft) {
|
|
@@ -320,7 +418,7 @@ const Tooltip = class {
|
|
|
320
418
|
role: 'tooltip',
|
|
321
419
|
'aria-hidden': `${!isShown}`
|
|
322
420
|
};
|
|
323
|
-
return (h(Host, Object.assign({ key: '
|
|
421
|
+
return (h(Host, Object.assign({ key: 'f0b2e0117f0604d325becbcc05686433fbd3d506' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), h("div", { key: '2f5ff7638dedddd04dac78a2131438457211354b', class: "r-tooltip" }, h("div", Object.assign({ key: 'cb562089f6e7ac27b99ba09953c2f28f29e3e649', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), h("slot", { key: '2e09b16563b9aa325ff64f10af1ad5f4728a2417' })), h("div", Object.assign({ key: 'ffe53881e5ec5335073a7adf2ed5479f3a56f00f', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), h("div", { key: '3f85fb76e934b18d5963d125699d00776c6abbac', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
|
|
324
422
|
}
|
|
325
423
|
get element() { return getElement(this); }
|
|
326
424
|
static get watchers() { return {
|
|
@@ -63,11 +63,11 @@ const IconButton = class {
|
|
|
63
63
|
name,
|
|
64
64
|
size
|
|
65
65
|
};
|
|
66
|
-
const buttonTemplate = () => (h("button", Object.assign({ key: '
|
|
66
|
+
const buttonTemplate = () => (h("button", Object.assign({ key: 'ce7c3beb7c5fdbff3b47011289fe730dddf844f5', type: "button", class: "r-icon-button", "aria-label": this.host.getAttribute('aria-label') || null }, buttonAttrs, { onClick: this._handleClick, onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.nativeElement = el) }), name ?
|
|
67
67
|
h("r-icon", Object.assign({}, iconAttrs))
|
|
68
68
|
:
|
|
69
|
-
h("r-icon", { size: size, class: "r-icon-button--icon" }, h("slot", null)), h("span", { key: '
|
|
70
|
-
return (h(Host, { key: '
|
|
69
|
+
h("r-icon", { size: size, class: "r-icon-button--icon" }, h("slot", null)), h("span", { key: '914c52bcfa15416981670f65cc4c009dd887003a', class: "r-icon-button--label visually-hidden" }, this.label), h("span", { key: 'e30a94256908de2c81f42d294e68a5e5524055c0', class: "r-icon-button--target-area" })));
|
|
70
|
+
return (h(Host, { key: 'b894237ccf791815719dc96ab85b7717141afdaf' }, !disabled && tooltipText ?
|
|
71
71
|
h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
|
|
72
72
|
:
|
|
73
73
|
buttonTemplate()));
|