@haiilo/catalyst 2.1.0 → 2.1.2
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/dist/catalyst/catalyst.css +1 -1
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/{p-50031766.entry.js → p-c0ccf7d1.entry.js} +2 -2
- package/dist/catalyst/p-c0ccf7d1.entry.js.map +1 -0
- package/dist/catalyst/scss/core/_typography.scss +3 -2
- package/dist/cjs/cat-alert_22.cjs.entry.js +14 -7
- package/dist/cjs/cat-alert_22.cjs.entry.js.map +1 -1
- package/dist/collection/components/cat-tooltip/cat-tooltip.css +11 -0
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +13 -6
- package/dist/collection/components/cat-tooltip/cat-tooltip.js.map +1 -1
- package/dist/collection/scss/core/_typography.scss +3 -2
- package/dist/components/cat-tooltip.js +14 -7
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/esm/cat-alert_22.entry.js +14 -7
- package/dist/esm/cat-alert_22.entry.js.map +1 -1
- package/dist/types/components/cat-tooltip/cat-tooltip.d.ts +3 -0
- package/package.json +2 -2
- package/dist/catalyst/p-50031766.entry.js.map +0 -1
|
@@ -26,6 +26,17 @@
|
|
|
26
26
|
z-index: 200;
|
|
27
27
|
max-width: 20rem;
|
|
28
28
|
}
|
|
29
|
+
.tooltip-hidden {
|
|
30
|
+
position: absolute !important;
|
|
31
|
+
width: 1px !important;
|
|
32
|
+
height: 1px !important;
|
|
33
|
+
padding: 0 !important;
|
|
34
|
+
margin: -1px !important;
|
|
35
|
+
overflow: hidden !important;
|
|
36
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
37
|
+
white-space: nowrap !important;
|
|
38
|
+
border: 0 !important;
|
|
39
|
+
}
|
|
29
40
|
.tooltip-show {
|
|
30
41
|
opacity: 1;
|
|
31
42
|
visibility: visible;
|
|
@@ -6,6 +6,7 @@ let nextUniqueId = 0;
|
|
|
6
6
|
export class CatTooltip {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.id = `cat-tooltip-${nextUniqueId++}`;
|
|
9
|
+
this.hidden = false;
|
|
9
10
|
/**
|
|
10
11
|
* The content of the tooltip.
|
|
11
12
|
*/
|
|
@@ -64,6 +65,9 @@ export class CatTooltip {
|
|
|
64
65
|
(_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
|
|
65
66
|
}
|
|
66
67
|
}
|
|
68
|
+
componentWillRender() {
|
|
69
|
+
this.hidden = !this.content || this.disabled;
|
|
70
|
+
}
|
|
67
71
|
disconnectedCallback() {
|
|
68
72
|
var _a, _b, _c, _d, _e, _f;
|
|
69
73
|
if (isTouchScreen) {
|
|
@@ -82,11 +86,12 @@ export class CatTooltip {
|
|
|
82
86
|
return (h(Host, null,
|
|
83
87
|
h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" },
|
|
84
88
|
h("slot", null)),
|
|
85
|
-
|
|
89
|
+
h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
|
|
86
90
|
tooltip: true,
|
|
91
|
+
'tooltip-hidden': this.hidden,
|
|
87
92
|
'tooltip-round': this.round,
|
|
88
93
|
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
89
|
-
} }, this.content)))
|
|
94
|
+
} }, this.content)));
|
|
90
95
|
}
|
|
91
96
|
get isTabbable() {
|
|
92
97
|
return firstTabbable(this.trigger);
|
|
@@ -109,8 +114,7 @@ export class CatTooltip {
|
|
|
109
114
|
showListener() {
|
|
110
115
|
window.clearTimeout(this.hideTimeout);
|
|
111
116
|
this.showTimeout = window.setTimeout(() => {
|
|
112
|
-
|
|
113
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
|
|
117
|
+
this.showTooltip();
|
|
114
118
|
}, this.showDelay);
|
|
115
119
|
}
|
|
116
120
|
hideListener() {
|
|
@@ -123,8 +127,7 @@ export class CatTooltip {
|
|
|
123
127
|
touchStartListener(event) {
|
|
124
128
|
event.stopPropagation();
|
|
125
129
|
this.touchTimeout = window.setTimeout(() => {
|
|
126
|
-
|
|
127
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
|
|
130
|
+
this.showTooltip();
|
|
128
131
|
}, this.longTouchDuration);
|
|
129
132
|
}
|
|
130
133
|
touchEndListener() {
|
|
@@ -136,6 +139,10 @@ export class CatTooltip {
|
|
|
136
139
|
var _a;
|
|
137
140
|
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
|
|
138
141
|
}
|
|
142
|
+
showTooltip() {
|
|
143
|
+
var _a;
|
|
144
|
+
!this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
|
|
145
|
+
}
|
|
139
146
|
static get is() { return "cat-tooltip"; }
|
|
140
147
|
static get encapsulation() { return "shadow"; }
|
|
141
148
|
static get originalStyleUrls() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private triggerElement?: HTMLElement;\n private trigger?: FocusableElement;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: Placement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideListener();\n }\n\n componentDidLoad(): void {\n this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n if (!this.isTabbable) {\n this.trigger?.setAttribute('tabindex', '0');\n }\n if (this.trigger && this.tooltip) {\n autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n }\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n <slot />\n </div>\n {this.content && !this.disabled && (\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n class={{\n tooltip: true,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n {this.content}\n </div>\n )}\n </Host>\n );\n }\n\n private get isTabbable() {\n return firstTabbable(this.trigger);\n }\n\n private update() {\n if (this.trigger && this.tooltip) {\n computePosition(this.trigger, this.tooltip, {\n placement: this.placement,\n middleware: [offset(CatTooltip.OFFSET), flip()]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.showTimeout = window.setTimeout(() => {\n this.tooltip?.classList.add('tooltip-show');\n }, this.showDelay);\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.hideTimeout = window.setTimeout(() => {\n this.tooltip?.classList.remove('tooltip-show');\n }, this.hideDelay);\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n this.touchTimeout = window.setTimeout(() => {\n this.tooltip?.classList.add('tooltip-show');\n }, this.longTouchDuration);\n }\n\n private touchEndListener() {\n if (this.touchTimeout) {\n window.clearTimeout(this.touchTimeout);\n }\n }\n\n private windowTouchStartListener() {\n this.tooltip?.classList.remove('tooltip-show');\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private triggerElement?: HTMLElement;\n private trigger?: FocusableElement;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private hidden = false;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: Placement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideListener();\n }\n\n componentDidLoad(): void {\n this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n if (!this.isTabbable) {\n this.trigger?.setAttribute('tabindex', '0');\n }\n\n if (this.trigger && this.tooltip) {\n autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n }\n }\n\n componentWillRender(): void {\n this.hidden = !this.content || this.disabled;\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n <slot />\n </div>\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n aria-hidden={this.hidden}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.hidden,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n {this.content}\n </div>\n </Host>\n );\n }\n\n private get isTabbable() {\n return firstTabbable(this.trigger);\n }\n\n private update() {\n if (this.trigger && this.tooltip) {\n computePosition(this.trigger, this.tooltip, {\n placement: this.placement,\n middleware: [offset(CatTooltip.OFFSET), flip()]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.showTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.showDelay);\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.hideTimeout = window.setTimeout(() => {\n this.tooltip?.classList.remove('tooltip-show');\n }, this.hideDelay);\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n this.touchTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.longTouchDuration);\n }\n\n private touchEndListener() {\n if (this.touchTimeout) {\n window.clearTimeout(this.touchTimeout);\n }\n }\n\n private windowTouchStartListener() {\n this.tooltip?.classList.remove('tooltip-show');\n }\n\n private showTooltip() {\n !this.hidden && this.tooltip?.classList.add('tooltip-show');\n }\n}\n"]}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
@use '../variables' as *;
|
|
2
2
|
@use '../mixins' as *;
|
|
3
3
|
|
|
4
|
-
:where(h1, h2, h3, h4, h5, h6,
|
|
4
|
+
:where(h1, h2, h3, h4, h5, h6),
|
|
5
|
+
.cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6 {
|
|
5
6
|
margin-top: 0;
|
|
6
7
|
margin-bottom: $cat-head-margin-bottom;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
// -- head styles
|
|
10
11
|
@each $key, $value in cat-token('size.font.head') {
|
|
11
|
-
h#{$key},
|
|
12
|
+
:where(h#{$key}),
|
|
12
13
|
.cat-h#{$key} {
|
|
13
14
|
@include cat-head($key);
|
|
14
15
|
}
|
|
@@ -4,7 +4,7 @@ import { f as firstTabbable } from './first-tabbable.js';
|
|
|
4
4
|
|
|
5
5
|
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
6
6
|
|
|
7
|
-
const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
|
|
7
|
+
const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
|
|
8
8
|
|
|
9
9
|
let nextUniqueId = 0;
|
|
10
10
|
const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
@@ -13,6 +13,7 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
13
13
|
this.__registerHost();
|
|
14
14
|
this.__attachShadow();
|
|
15
15
|
this.id = `cat-tooltip-${nextUniqueId++}`;
|
|
16
|
+
this.hidden = false;
|
|
16
17
|
/**
|
|
17
18
|
* The content of the tooltip.
|
|
18
19
|
*/
|
|
@@ -71,6 +72,9 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
71
72
|
(_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
|
|
72
73
|
}
|
|
73
74
|
}
|
|
75
|
+
componentWillRender() {
|
|
76
|
+
this.hidden = !this.content || this.disabled;
|
|
77
|
+
}
|
|
74
78
|
disconnectedCallback() {
|
|
75
79
|
var _a, _b, _c, _d, _e, _f;
|
|
76
80
|
if (isTouchDevice) {
|
|
@@ -86,11 +90,12 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
86
90
|
}
|
|
87
91
|
}
|
|
88
92
|
render() {
|
|
89
|
-
return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)),
|
|
93
|
+
return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
|
|
90
94
|
tooltip: true,
|
|
95
|
+
'tooltip-hidden': this.hidden,
|
|
91
96
|
'tooltip-round': this.round,
|
|
92
97
|
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
93
|
-
} }, this.content)))
|
|
98
|
+
} }, this.content)));
|
|
94
99
|
}
|
|
95
100
|
get isTabbable() {
|
|
96
101
|
return firstTabbable(this.trigger);
|
|
@@ -113,8 +118,7 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
113
118
|
showListener() {
|
|
114
119
|
window.clearTimeout(this.hideTimeout);
|
|
115
120
|
this.showTimeout = window.setTimeout(() => {
|
|
116
|
-
|
|
117
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
|
|
121
|
+
this.showTooltip();
|
|
118
122
|
}, this.showDelay);
|
|
119
123
|
}
|
|
120
124
|
hideListener() {
|
|
@@ -127,8 +131,7 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
127
131
|
touchStartListener(event) {
|
|
128
132
|
event.stopPropagation();
|
|
129
133
|
this.touchTimeout = window.setTimeout(() => {
|
|
130
|
-
|
|
131
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
|
|
134
|
+
this.showTooltip();
|
|
132
135
|
}, this.longTouchDuration);
|
|
133
136
|
}
|
|
134
137
|
touchEndListener() {
|
|
@@ -140,6 +143,10 @@ const CatTooltip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
|
|
|
140
143
|
var _a;
|
|
141
144
|
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
|
|
142
145
|
}
|
|
146
|
+
showTooltip() {
|
|
147
|
+
var _a;
|
|
148
|
+
!this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
|
|
149
|
+
}
|
|
143
150
|
static get style() { return catTooltipCss; }
|
|
144
151
|
}, [1, "cat-tooltip", {
|
|
145
152
|
"content": [1],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["./src/utils/is-touch-screen.ts","./src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","./src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.tooltip {\n position: absolute;\n @include cat-body('s', 500);\n background-color: cat-token('color.ui.background.tooltip');\n border-radius: cat-border-radius('m');\n color: cat-token('color.ui.font.tooltip');\n transition: opacity cat-token('time.transition.m') linear, visibility cat-token('time.transition.m') linear;\n visibility: hidden;\n opacity: 0;\n box-shadow: $-box-shadow;\n z-index: $cat-tooltip-z-index;\n max-width: $-max-width;\n\n &-show {\n opacity: 1;\n visibility: visible;\n }\n}\n\n// ----- round\n\n.tooltip-round {\n border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n padding: 0.375rem 0.5rem;\n\n &.tooltip-round {\n padding: 0.375rem 0.75rem;\n }\n}\n\n.tooltip-m {\n padding: 0.75rem;\n\n &.tooltip-round {\n padding: 0.75rem 1rem;\n }\n}\n\n.tooltip-l {\n padding: 1rem;\n\n &.tooltip-round {\n padding: 1rem 1.5rem;\n }\n}\n\n// ----- trigger\n\n.tooltip-trigger {\n display: inline-block;\n\n &:focus {\n outline: none;\n }\n}\n","import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private triggerElement?: HTMLElement;\n private trigger?: FocusableElement;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: Placement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideListener();\n }\n\n componentDidLoad(): void {\n this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n if (!this.isTabbable) {\n this.trigger?.setAttribute('tabindex', '0');\n }\n if (this.trigger && this.tooltip) {\n autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n }\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n <slot />\n </div>\n {this.content && !this.disabled && (\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n class={{\n tooltip: true,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n {this.content}\n </div>\n )}\n </Host>\n );\n }\n\n private get isTabbable() {\n return firstTabbable(this.trigger);\n }\n\n private update() {\n if (this.trigger && this.tooltip) {\n computePosition(this.trigger, this.tooltip, {\n placement: this.placement,\n middleware: [offset(CatTooltip.OFFSET), flip()]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.showTimeout = window.setTimeout(() => {\n this.tooltip?.classList.add('tooltip-show');\n }, this.showDelay);\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.hideTimeout = window.setTimeout(() => {\n this.tooltip?.classList.remove('tooltip-show');\n }, this.hideDelay);\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n this.touchTimeout = window.setTimeout(() => {\n this.tooltip?.classList.add('tooltip-show');\n }, this.longTouchDuration);\n }\n\n private touchEndListener() {\n if (this.touchTimeout) {\n window.clearTimeout(this.touchTimeout);\n }\n }\n\n private windowTouchStartListener() {\n this.tooltip?.classList.remove('tooltip-show');\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"cat-tooltip.js","mappings":"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","names":["CatTooltip","isTouchScreen"],"sources":["./src/utils/is-touch-screen.ts","./src/components/cat-tooltip/cat-tooltip.scss?tag=cat-tooltip&encapsulation=shadow","./src/components/cat-tooltip/cat-tooltip.tsx"],"sourcesContent":["const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n\nexport default isTouchDevice;\n","@use 'variables' as *;\n@use 'mixins' as *;\n\n$-max-width: 20rem;\n$-box-shadow: rgb(0 0 0 / 8%) 0 1px 8px 0;\n\n:host {\n display: contents;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.tooltip {\n position: absolute;\n @include cat-body('s', 500);\n background-color: cat-token('color.ui.background.tooltip');\n border-radius: cat-border-radius('m');\n color: cat-token('color.ui.font.tooltip');\n transition: opacity cat-token('time.transition.m') linear, visibility cat-token('time.transition.m') linear;\n visibility: hidden;\n opacity: 0;\n box-shadow: $-box-shadow;\n z-index: $cat-tooltip-z-index;\n max-width: $-max-width;\n\n &-hidden {\n @include cat-visually-hidden;\n }\n\n &-show {\n opacity: 1;\n visibility: visible;\n }\n}\n\n// ----- round\n\n.tooltip-round {\n border-radius: 10rem;\n}\n\n// ----- size\n\n.tooltip-s {\n padding: 0.375rem 0.5rem;\n\n &.tooltip-round {\n padding: 0.375rem 0.75rem;\n }\n}\n\n.tooltip-m {\n padding: 0.75rem;\n\n &.tooltip-round {\n padding: 0.75rem 1rem;\n }\n}\n\n.tooltip-l {\n padding: 1rem;\n\n &.tooltip-round {\n padding: 1rem 1.5rem;\n }\n}\n\n// ----- trigger\n\n.tooltip-trigger {\n display: inline-block;\n\n &:focus {\n outline: none;\n }\n}\n","import { Component, h, Host, Listen, Prop } from '@stencil/core';\nimport { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport isTouchScreen from '../../utils/is-touch-screen';\nimport firstTabbable from '../../utils/first-tabbable';\nimport { FocusableElement } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private triggerElement?: HTMLElement;\n private trigger?: FocusableElement;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private hidden = false;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: Placement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideListener();\n }\n\n componentDidLoad(): void {\n this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;\n if (!this.isTabbable) {\n this.trigger?.setAttribute('tabindex', '0');\n }\n\n if (this.trigger && this.tooltip) {\n autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n }\n }\n\n componentWillRender(): void {\n this.hidden = !this.content || this.disabled;\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n <slot />\n </div>\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n aria-hidden={this.hidden}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.hidden,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n {this.content}\n </div>\n </Host>\n );\n }\n\n private get isTabbable() {\n return firstTabbable(this.trigger);\n }\n\n private update() {\n if (this.trigger && this.tooltip) {\n computePosition(this.trigger, this.tooltip, {\n placement: this.placement,\n middleware: [offset(CatTooltip.OFFSET), flip()]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.showTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.showDelay);\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.hideTimeout = window.setTimeout(() => {\n this.tooltip?.classList.remove('tooltip-show');\n }, this.hideDelay);\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n this.touchTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.longTouchDuration);\n }\n\n private touchEndListener() {\n if (this.touchTimeout) {\n window.clearTimeout(this.touchTimeout);\n }\n }\n\n private windowTouchStartListener() {\n this.tooltip?.classList.remove('tooltip-show');\n }\n\n private showTooltip() {\n !this.hidden && this.tooltip?.classList.add('tooltip-show');\n }\n}\n"],"version":3}
|
|
@@ -6448,13 +6448,14 @@ CatToggle.style = catToggleCss;
|
|
|
6448
6448
|
|
|
6449
6449
|
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
6450
6450
|
|
|
6451
|
-
const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
|
|
6451
|
+
const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:rgb(var(--cat-bg-tooltip, 0, 0, 0));border-radius:var(--cat-border-radius-m, 0.25rem);color:rgb(var(--cat-font-color-tooltip, 255, 255, 255));transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
|
|
6452
6452
|
|
|
6453
6453
|
let nextUniqueId = 0;
|
|
6454
6454
|
const CatTooltip = class {
|
|
6455
6455
|
constructor(hostRef) {
|
|
6456
6456
|
registerInstance(this, hostRef);
|
|
6457
6457
|
this.id = `cat-tooltip-${nextUniqueId++}`;
|
|
6458
|
+
this.hidden = false;
|
|
6458
6459
|
/**
|
|
6459
6460
|
* The content of the tooltip.
|
|
6460
6461
|
*/
|
|
@@ -6513,6 +6514,9 @@ const CatTooltip = class {
|
|
|
6513
6514
|
(_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
|
|
6514
6515
|
}
|
|
6515
6516
|
}
|
|
6517
|
+
componentWillRender() {
|
|
6518
|
+
this.hidden = !this.content || this.disabled;
|
|
6519
|
+
}
|
|
6516
6520
|
disconnectedCallback() {
|
|
6517
6521
|
var _a, _b, _c, _d, _e, _f;
|
|
6518
6522
|
if (isTouchDevice) {
|
|
@@ -6528,11 +6532,12 @@ const CatTooltip = class {
|
|
|
6528
6532
|
}
|
|
6529
6533
|
}
|
|
6530
6534
|
render() {
|
|
6531
|
-
return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)),
|
|
6535
|
+
return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
|
|
6532
6536
|
tooltip: true,
|
|
6537
|
+
'tooltip-hidden': this.hidden,
|
|
6533
6538
|
'tooltip-round': this.round,
|
|
6534
6539
|
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
6535
|
-
} }, this.content)))
|
|
6540
|
+
} }, this.content)));
|
|
6536
6541
|
}
|
|
6537
6542
|
get isTabbable() {
|
|
6538
6543
|
return firstTabbable(this.trigger);
|
|
@@ -6555,8 +6560,7 @@ const CatTooltip = class {
|
|
|
6555
6560
|
showListener() {
|
|
6556
6561
|
window.clearTimeout(this.hideTimeout);
|
|
6557
6562
|
this.showTimeout = window.setTimeout(() => {
|
|
6558
|
-
|
|
6559
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
|
|
6563
|
+
this.showTooltip();
|
|
6560
6564
|
}, this.showDelay);
|
|
6561
6565
|
}
|
|
6562
6566
|
hideListener() {
|
|
@@ -6569,8 +6573,7 @@ const CatTooltip = class {
|
|
|
6569
6573
|
touchStartListener(event) {
|
|
6570
6574
|
event.stopPropagation();
|
|
6571
6575
|
this.touchTimeout = window.setTimeout(() => {
|
|
6572
|
-
|
|
6573
|
-
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show');
|
|
6576
|
+
this.showTooltip();
|
|
6574
6577
|
}, this.longTouchDuration);
|
|
6575
6578
|
}
|
|
6576
6579
|
touchEndListener() {
|
|
@@ -6582,6 +6585,10 @@ const CatTooltip = class {
|
|
|
6582
6585
|
var _a;
|
|
6583
6586
|
(_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
|
|
6584
6587
|
}
|
|
6588
|
+
showTooltip() {
|
|
6589
|
+
var _a;
|
|
6590
|
+
!this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
|
|
6591
|
+
}
|
|
6585
6592
|
};
|
|
6586
6593
|
CatTooltip.OFFSET = 4;
|
|
6587
6594
|
CatTooltip.style = catTooltipCss;
|