@riverty/web-components 5.5.0 → 5.6.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 +15 -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-button.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox.cjs.entry.js +4 -4
- package/dist/cjs/r-hint_3.cjs.entry.js +135 -37
- 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-date.cjs.entry.js +6 -6
- package/dist/cjs/r-input-password.cjs.entry.js +2 -2
- package/dist/cjs/r-input-phone-number.cjs.entry.js +4 -4
- package/dist/cjs/r-input.cjs.entry.js +3 -1
- package/dist/cjs/r-radio-group.cjs.entry.js +6 -6
- package/dist/cjs/r-select.cjs.entry.js +2 -2
- package/dist/cjs/r-toast.cjs.entry.js +8 -9
- package/dist/cjs/web-components.cjs.js +1 -1
- package/dist/collection/components/accordion/accordion.js +1 -2
- package/dist/collection/components/button/button.js +1 -2
- package/dist/collection/components/checkbox/checkbox.js +4 -5
- 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.js +22 -1
- package/dist/collection/components/input-date/input-date.js +7 -7
- package/dist/collection/components/input-password/input-password.js +3 -3
- 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-group/radio-group.js +7 -7
- package/dist/collection/components/select/select.js +3 -4
- package/dist/collection/components/textarea/textarea.js +1 -1
- 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-button.entry.js +1 -1
- package/dist/esm/r-checkbox.entry.js +4 -4
- package/dist/esm/r-hint_3.entry.js +135 -37
- package/dist/esm/r-icon-button.entry.js +3 -3
- package/dist/esm/r-icon.entry.js +2 -2
- package/dist/esm/r-input-date.entry.js +6 -6
- package/dist/esm/r-input-password.entry.js +2 -2
- package/dist/esm/r-input-phone-number.entry.js +4 -4
- package/dist/esm/r-input.entry.js +3 -1
- package/dist/esm/r-radio-group.entry.js +6 -6
- package/dist/esm/r-select.entry.js +2 -2
- package/dist/esm/r-toast.entry.js +8 -9
- 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-7fccc301.entry.js → p-1ae69897.entry.js} +1 -1
- package/dist/web-components/p-29a1e75f.entry.js +1 -0
- package/dist/web-components/{p-43eff76a.entry.js → p-44be9992.entry.js} +1 -1
- package/dist/web-components/{p-0735fd75.entry.js → p-72c0c0d8.entry.js} +1 -1
- package/dist/web-components/{p-28718c50.entry.js → p-8028c2a9.entry.js} +1 -1
- package/dist/web-components/{p-00eb6986.entry.js → p-828cb164.entry.js} +1 -1
- package/dist/web-components/{p-a683612d.entry.js → p-96ddeb7f.entry.js} +1 -1
- package/dist/web-components/{p-24bbf3b6.entry.js → p-9b08e9ee.entry.js} +1 -1
- package/dist/web-components/{p-99ba15d9.entry.js → p-9e50120b.entry.js} +1 -1
- package/dist/web-components/{p-2265dae1.entry.js → p-a5be3395.entry.js} +1 -1
- package/dist/web-components/p-b2cec978.entry.js +1 -0
- package/dist/web-components/{p-ad4292d8.entry.js → p-d3ff65b0.entry.js} +1 -1
- package/dist/web-components/p-f770e22b.entry.js +1 -0
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +2 -1
- package/dist/web-components/p-0f4eea22.entry.js +0 -1
- package/dist/web-components/p-c09a863b.entry.js +0 -1
- package/dist/web-components/p-f22696e0.entry.js +0 -1
|
@@ -57,14 +57,14 @@ const RLabel = class {
|
|
|
57
57
|
size: 's',
|
|
58
58
|
color: tooltipIconColor
|
|
59
59
|
};
|
|
60
|
-
return (index.h(index.Host, { key: '
|
|
61
|
-
index.h("span", { key: '
|
|
62
|
-
index.h("span", { key: '
|
|
60
|
+
return (index.h(index.Host, { key: '2d7da94197a774e5b3399ff59dba01f946f0d8df' }, index.h("div", { key: '56baaf39a736e1f504502c9f49b4cf5fbff2f911', class: "r-label" }, index.h("span", { key: '5b0032c31e83b628d73a207eeaa915368edc7237', class: "r-label--slot" }, index.h("slot", { key: 'fbcd30c185b9eef55ea43c8ca8b082a0308953e2' }), fieldIndicator &&
|
|
61
|
+
index.h("span", { key: '0d355d5857e515e735dc543d3416540e0a0ffdba', class: "r-label--marker" }, fieldIndicator)), tooltip &&
|
|
62
|
+
index.h("span", { key: 'b450b3e7ee2b33dbdc02d9fce04bd2ef6a97713d', class: "r-label--tooltip-icon" }, index.h("r-tooltip", Object.assign({ key: 'a1b2a24a312b7eabd5acd43273658bce3199ef1b' }, tooltipAttrs), index.h("r-icon", Object.assign({ key: 'c22f6349b9c67a82b29f4a5758a77fb1b2910b75' }, tooltipIconAttrs)))))));
|
|
63
63
|
}
|
|
64
64
|
};
|
|
65
65
|
RLabel.style = labelCss;
|
|
66
66
|
|
|
67
|
-
const tooltipCss = ":host{display:inline-block;--r-tooltip--position:relative;--r-tooltip--content--position:
|
|
67
|
+
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)}";
|
|
68
68
|
|
|
69
69
|
const OFFSET = 20;
|
|
70
70
|
const Tooltip = class {
|
|
@@ -78,6 +78,71 @@ const Tooltip = class {
|
|
|
78
78
|
this.arrowPositionState = 'left';
|
|
79
79
|
this.isShown = false;
|
|
80
80
|
this.uniqueId = `r-tooltip-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
81
|
+
this.getOffsetLeft = (arrowPosition) => {
|
|
82
|
+
var _a, _b, _c;
|
|
83
|
+
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));
|
|
84
|
+
switch (arrowPosition) {
|
|
85
|
+
case 'center':
|
|
86
|
+
return offsetLeft / 2;
|
|
87
|
+
case 'right':
|
|
88
|
+
return offsetLeft;
|
|
89
|
+
default:
|
|
90
|
+
return 0;
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
this.alignTooltipPosition = () => {
|
|
94
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
95
|
+
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;
|
|
96
|
+
const offsetLeft = this.getOffsetLeft(this.arrowPositionState);
|
|
97
|
+
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;
|
|
98
|
+
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;
|
|
99
|
+
switch (this.positionState) {
|
|
100
|
+
case 'top':
|
|
101
|
+
this.alignPosition(this.tooltip, -offsetLeft, -this.tooltipContainerHeight);
|
|
102
|
+
break;
|
|
103
|
+
case 'bottom':
|
|
104
|
+
this.alignPosition(this.tooltip, -offsetLeft, hostHeight);
|
|
105
|
+
break;
|
|
106
|
+
case 'left':
|
|
107
|
+
this.alignPosition(this.tooltip, -this.tooltipContainerWidth, -offsetHeight);
|
|
108
|
+
break;
|
|
109
|
+
case 'right':
|
|
110
|
+
this.alignPosition(this.tooltip, hostWidth, -offsetHeight);
|
|
111
|
+
break;
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
this.alignArrowPosition = () => {
|
|
115
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
116
|
+
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;
|
|
117
|
+
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;
|
|
118
|
+
const hostHeight = ((_h = (_g = this.element) === null || _g === void 0 ? void 0 : _g.getBoundingClientRect()) === null || _h === void 0 ? void 0 : _h.height) || 0;
|
|
119
|
+
const hostWidth = ((_k = (_j = this.element) === null || _j === void 0 ? void 0 : _j.getBoundingClientRect()) === null || _k === void 0 ? void 0 : _k.width) || 0;
|
|
120
|
+
switch (this.positionState) {
|
|
121
|
+
case 'top':
|
|
122
|
+
this.alignPosition(this.arrow, offsetLeft, -this.arrowHeight);
|
|
123
|
+
break;
|
|
124
|
+
case 'bottom':
|
|
125
|
+
this.alignPosition(this.arrow, offsetLeft, hostHeight);
|
|
126
|
+
break;
|
|
127
|
+
case 'left':
|
|
128
|
+
this.alignPosition(this.arrow, -this.arrowWidth, offsetHeight);
|
|
129
|
+
break;
|
|
130
|
+
case 'right':
|
|
131
|
+
this.alignPosition(this.arrow, hostWidth, offsetHeight);
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
this.alignPosition = (element, offsetLeft, offsetTop) => {
|
|
136
|
+
var _a;
|
|
137
|
+
if (!element) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
let elementOffset = (_a = this.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
141
|
+
let left = elementOffset.left + offsetLeft;
|
|
142
|
+
let top = elementOffset.top + offsetTop;
|
|
143
|
+
element.style.left = `${left > 0 ? left : 0}px`;
|
|
144
|
+
element.style.top = `${top}px`;
|
|
145
|
+
};
|
|
81
146
|
/**
|
|
82
147
|
* Listen on hovering tooltip element and update tooltip position if needed
|
|
83
148
|
*/
|
|
@@ -95,11 +160,22 @@ const Tooltip = class {
|
|
|
95
160
|
};
|
|
96
161
|
this.showTooltip = () => {
|
|
97
162
|
this.isShown = true;
|
|
98
|
-
this.
|
|
163
|
+
this.tooltip.classList.add('r-tooltip--content--visible');
|
|
99
164
|
};
|
|
100
165
|
this.removeTooltip = () => {
|
|
101
166
|
this.isShown = false;
|
|
102
|
-
this.
|
|
167
|
+
this.tooltip.style.width = 'max-content';
|
|
168
|
+
this.tooltip.classList.remove('r-tooltip--content--visible');
|
|
169
|
+
};
|
|
170
|
+
this.handleScroll = () => {
|
|
171
|
+
if (!this.isShown) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
if (!this.isOnScreen) {
|
|
175
|
+
this.removeTooltip();
|
|
176
|
+
return;
|
|
177
|
+
}
|
|
178
|
+
this.setCorrectPosition();
|
|
103
179
|
};
|
|
104
180
|
}
|
|
105
181
|
/**
|
|
@@ -128,30 +204,47 @@ const Tooltip = class {
|
|
|
128
204
|
this.removeTooltip();
|
|
129
205
|
}
|
|
130
206
|
}
|
|
131
|
-
/**
|
|
132
|
-
* Tooltip element value
|
|
133
|
-
*/
|
|
134
|
-
get tooltipValue() {
|
|
135
|
-
var _a, _b;
|
|
136
|
-
return (_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(this.uniqueId);
|
|
137
|
-
}
|
|
138
207
|
/**
|
|
139
208
|
* Parent with non visible overflow
|
|
140
209
|
*/
|
|
141
210
|
get overflowedParent() {
|
|
142
211
|
return this.findOverflowParent(this.element.parentElement);
|
|
143
212
|
}
|
|
213
|
+
get arrowWidth() {
|
|
214
|
+
var _a;
|
|
215
|
+
return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
|
|
216
|
+
}
|
|
217
|
+
get arrowHeight() {
|
|
218
|
+
var _a;
|
|
219
|
+
return ((_a = this.arrow) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
|
|
220
|
+
}
|
|
221
|
+
get tooltipContainerWidth() {
|
|
222
|
+
var _a, _b;
|
|
223
|
+
return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) + this.arrowWidth || 0;
|
|
224
|
+
}
|
|
225
|
+
get tooltipContainerHeight() {
|
|
226
|
+
var _a, _b;
|
|
227
|
+
return ((_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) + this.arrowHeight || 0;
|
|
228
|
+
}
|
|
144
229
|
/**
|
|
145
230
|
* Available space at the top
|
|
146
231
|
*/
|
|
147
232
|
get top() {
|
|
148
|
-
return
|
|
233
|
+
return this.element.getBoundingClientRect().top;
|
|
149
234
|
}
|
|
150
235
|
/**
|
|
151
236
|
* Available space on the left
|
|
152
237
|
*/
|
|
153
238
|
get left() {
|
|
154
|
-
return
|
|
239
|
+
return this.element.getBoundingClientRect().left;
|
|
240
|
+
}
|
|
241
|
+
get isOnScreen() {
|
|
242
|
+
const parent = this.overflowedParent || document.documentElement;
|
|
243
|
+
const parentRect = parent.getBoundingClientRect();
|
|
244
|
+
const elementRect = this.element.getBoundingClientRect();
|
|
245
|
+
const isVerticallyVisible = elementRect.top >= parentRect.top && elementRect.bottom <= parentRect.bottom;
|
|
246
|
+
const isHorizontallyVisible = elementRect.left >= parentRect.left && elementRect.right <= parentRect.right;
|
|
247
|
+
return isVerticallyVisible && isHorizontallyVisible;
|
|
155
248
|
}
|
|
156
249
|
/**
|
|
157
250
|
* Available space at the bottom
|
|
@@ -160,7 +253,7 @@ const Tooltip = class {
|
|
|
160
253
|
function calculateBottomSpace(element) {
|
|
161
254
|
return window.innerHeight - element.getBoundingClientRect().top - element.getBoundingClientRect().height;
|
|
162
255
|
}
|
|
163
|
-
return
|
|
256
|
+
return calculateBottomSpace(this.element);
|
|
164
257
|
}
|
|
165
258
|
/**
|
|
166
259
|
* Available space on the right
|
|
@@ -169,35 +262,31 @@ const Tooltip = class {
|
|
|
169
262
|
function calculateRightSpace(element) {
|
|
170
263
|
return window.innerWidth - element.getBoundingClientRect().left - element.getBoundingClientRect().width;
|
|
171
264
|
}
|
|
172
|
-
return
|
|
265
|
+
return calculateRightSpace(this.element);
|
|
173
266
|
}
|
|
174
267
|
/**
|
|
175
268
|
* Defines which horizontal placement is available
|
|
176
269
|
*/
|
|
177
270
|
get horizontalPlacement() {
|
|
178
|
-
|
|
179
|
-
return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetWidth) + OFFSET < this.left ? 'left' : 'right';
|
|
271
|
+
return this.tooltipContainerWidth + OFFSET < this.left ? 'left' : 'right';
|
|
180
272
|
}
|
|
181
273
|
/**
|
|
182
274
|
* Defines which vertical placement is available
|
|
183
275
|
*/
|
|
184
276
|
get verticalPlacement() {
|
|
185
|
-
|
|
186
|
-
return ((_a = this.tooltipValue) === null || _a === void 0 ? void 0 : _a.offsetHeight) + OFFSET < this.top ? 'top' : 'bottom';
|
|
277
|
+
return this.tooltipContainerHeight + OFFSET < this.top ? 'top' : 'bottom';
|
|
187
278
|
}
|
|
188
279
|
/**
|
|
189
280
|
* Checks if there is enough space for placing tooltip vertically
|
|
190
281
|
*/
|
|
191
282
|
get isEnoughSpaceVertically() {
|
|
192
|
-
|
|
193
|
-
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;
|
|
283
|
+
return this.tooltipContainerHeight + OFFSET < this.top || this.tooltipContainerHeight + OFFSET < this.bottom;
|
|
194
284
|
}
|
|
195
285
|
/**
|
|
196
286
|
* Checks if there is enough space for placing tooltip horizontally
|
|
197
287
|
*/
|
|
198
288
|
get isEnoughSpaceHorizontally() {
|
|
199
|
-
|
|
200
|
-
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;
|
|
289
|
+
return this.tooltipContainerWidth + OFFSET < this.left || this.tooltipContainerWidth + OFFSET < this.right;
|
|
201
290
|
}
|
|
202
291
|
get activeElement() {
|
|
203
292
|
return this.element.querySelector('r-button, r-icon-button, a, button, [tabindex]:not([tabindex="-1"])');
|
|
@@ -212,13 +301,16 @@ const Tooltip = class {
|
|
|
212
301
|
* Listen to active child element
|
|
213
302
|
*/
|
|
214
303
|
componentDidLoad() {
|
|
215
|
-
var _a, _b;
|
|
304
|
+
var _a, _b, _c;
|
|
216
305
|
(_a = this.activeElement) === null || _a === void 0 ? void 0 : _a.addEventListener('focus', () => {
|
|
217
306
|
this.handleFocus();
|
|
218
307
|
});
|
|
219
308
|
(_b = this.activeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('blur', () => {
|
|
220
309
|
this.removeTooltip();
|
|
221
310
|
});
|
|
311
|
+
(_c = this.overflowedParent) === null || _c === void 0 ? void 0 : _c.addEventListener('scroll', () => {
|
|
312
|
+
this.handleScroll();
|
|
313
|
+
});
|
|
222
314
|
}
|
|
223
315
|
/**
|
|
224
316
|
* Finds first element's parent with not visible overflow.
|
|
@@ -267,25 +359,32 @@ const Tooltip = class {
|
|
|
267
359
|
* First it checks the available space for a defined position and then sets the new one based on the available space.
|
|
268
360
|
*/
|
|
269
361
|
setCorrectPosition() {
|
|
270
|
-
|
|
271
|
-
if (!this.tooltipValue || !this.isShown) {
|
|
362
|
+
if (!this.tooltip || !this.isShown) {
|
|
272
363
|
return;
|
|
273
364
|
}
|
|
274
365
|
switch (this.position) {
|
|
275
366
|
case 'top':
|
|
276
|
-
this.positionState =
|
|
367
|
+
this.positionState = this.tooltipContainerHeight + OFFSET < this.top ? this.position : this.getAlternativePosition();
|
|
277
368
|
break;
|
|
278
369
|
case 'bottom':
|
|
279
|
-
this.positionState =
|
|
370
|
+
this.positionState = this.tooltipContainerHeight + OFFSET < this.bottom ? this.position : this.getAlternativePosition();
|
|
280
371
|
break;
|
|
281
372
|
case 'left':
|
|
282
|
-
this.positionState =
|
|
373
|
+
this.positionState = this.tooltipContainerWidth + OFFSET < this.left ? this.position : this.getAlternativePosition();
|
|
283
374
|
break;
|
|
284
375
|
case 'right':
|
|
285
|
-
this.positionState =
|
|
376
|
+
this.positionState = this.tooltipContainerWidth + OFFSET < this.right ? this.position : this.getAlternativePosition();
|
|
286
377
|
break;
|
|
287
378
|
}
|
|
288
379
|
this.adjustArrowPosition();
|
|
380
|
+
this.alignTooltipPosition();
|
|
381
|
+
this.alignArrowPosition();
|
|
382
|
+
// allow tooltip content wrap and recalculate position
|
|
383
|
+
if (this.tooltip.style.width === 'fit-content') {
|
|
384
|
+
return;
|
|
385
|
+
}
|
|
386
|
+
this.tooltip.style.width = 'fit-content';
|
|
387
|
+
this.alignTooltipPosition();
|
|
289
388
|
}
|
|
290
389
|
/**
|
|
291
390
|
* Adjusts arrow correct position.
|
|
@@ -293,10 +392,9 @@ const Tooltip = class {
|
|
|
293
392
|
* For right & left tooltip positions there is only one position = "center".
|
|
294
393
|
*/
|
|
295
394
|
adjustArrowPosition() {
|
|
296
|
-
|
|
297
|
-
const
|
|
298
|
-
|
|
299
|
-
if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
|
|
395
|
+
const isEnoughTooltipSpaceLeft = this.tooltipContainerWidth / 2 + OFFSET < this.left;
|
|
396
|
+
const isEnoughTooltipSpaceRight = this.tooltipContainerWidth / 2 + OFFSET < this.right;
|
|
397
|
+
if (isEnoughTooltipSpaceLeft && isEnoughTooltipSpaceRight || !isEnoughTooltipSpaceLeft && !isEnoughTooltipSpaceRight || this.positionState === 'left' || this.positionState === 'right') {
|
|
300
398
|
this.arrowPositionState = 'center';
|
|
301
399
|
}
|
|
302
400
|
else if (!isEnoughTooltipSpaceLeft) {
|
|
@@ -322,7 +420,7 @@ const Tooltip = class {
|
|
|
322
420
|
role: 'tooltip',
|
|
323
421
|
'aria-hidden': `${!isShown}`
|
|
324
422
|
};
|
|
325
|
-
return (index.h(index.Host, Object.assign({ key: '
|
|
423
|
+
return (index.h(index.Host, Object.assign({ key: 'f0b2e0117f0604d325becbcc05686433fbd3d506' }, hostAttrs, { onMouseenter: this.handleHover, onMouseleave: this.removeTooltip }), index.h("div", { key: '2f5ff7638dedddd04dac78a2131438457211354b', class: "r-tooltip" }, index.h("div", Object.assign({ key: 'cb562089f6e7ac27b99ba09953c2f28f29e3e649', class: "r-tooltip--trigger", onFocus: this.handleFocus, onBlur: this.removeTooltip }, triggerAttrs), index.h("slot", { key: '2e09b16563b9aa325ff64f10af1ad5f4728a2417' })), index.h("div", Object.assign({ key: 'ffe53881e5ec5335073a7adf2ed5479f3a56f00f', class: "r-tooltip--content", ref: (el) => this.tooltip = el }, contentAttrs), text), index.h("div", { key: '3f85fb76e934b18d5963d125699d00776c6abbac', ref: (el) => this.arrow = el, class: "r-tooltip--arrow" }))));
|
|
326
424
|
}
|
|
327
425
|
get element() { return index.getElement(this); }
|
|
328
426
|
static get watchers() { return {
|
|
@@ -65,11 +65,11 @@ const IconButton = class {
|
|
|
65
65
|
name,
|
|
66
66
|
size
|
|
67
67
|
};
|
|
68
|
-
const buttonTemplate = () => (index.h("button", Object.assign({ key: '
|
|
68
|
+
const buttonTemplate = () => (index.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 ?
|
|
69
69
|
index.h("r-icon", Object.assign({}, iconAttrs))
|
|
70
70
|
:
|
|
71
|
-
index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: '
|
|
72
|
-
return (index.h(index.Host, { key: '
|
|
71
|
+
index.h("r-icon", { size: size, class: "r-icon-button--icon" }, index.h("slot", null)), index.h("span", { key: '914c52bcfa15416981670f65cc4c009dd887003a', class: "r-icon-button--label visually-hidden" }, this.label), index.h("span", { key: 'e30a94256908de2c81f42d294e68a5e5524055c0', class: "r-icon-button--target-area" })));
|
|
72
|
+
return (index.h(index.Host, { key: 'b894237ccf791815719dc96ab85b7717141afdaf' }, !disabled && tooltipText ?
|
|
73
73
|
index.h("r-tooltip", { text: tooltipText, position: tooltipPosition }, buttonTemplate())
|
|
74
74
|
:
|
|
75
75
|
buttonTemplate()));
|