@limetech/lime-elements 37.1.0-next.2 → 37.1.0-next.21
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/cjs/{checkbox.template-5603ad4a.js → checkbox.template-df6fc114.js} +4 -4
- package/dist/cjs/checkbox.template-df6fc114.js.map +1 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js +9 -1
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-action-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-button.cjs.entry.js +3 -52
- package/dist/cjs/limel-button.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-checkbox.cjs.entry.js +3 -2
- package/dist/cjs/limel-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-circular-progress_2.cjs.entry.js +7 -1
- package/dist/cjs/limel-circular-progress_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-collapsible-section.cjs.entry.js +10 -0
- package/dist/cjs/limel-collapsible-section.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-color-picker-palette.cjs.entry.js +2 -2
- package/dist/cjs/limel-color-picker-palette.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-color-picker.cjs.entry.js +2 -2
- package/dist/cjs/limel-color-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-dock-button.cjs.entry.js +8 -2
- package/dist/cjs/limel-dock-button.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-form.cjs.entry.js +15 -2
- package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-icon-button.cjs.entry.js +7 -0
- package/dist/cjs/limel-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-icon.cjs.entry.js +90 -8
- package/dist/cjs/limel-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-list_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-list_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-portal.cjs.entry.js +15 -14
- package/dist/cjs/limel-portal.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-slider.cjs.entry.js +136 -127
- package/dist/cjs/limel-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-switch.cjs.entry.js +23 -10
- package/dist/cjs/limel-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-table.cjs.entry.js +9 -1
- package/dist/cjs/limel-table.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-tooltip_2.cjs.entry.js +16 -14
- package/dist/cjs/limel-tooltip_2.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/make-enter-clickable-59460fd6.js +80 -0
- package/dist/cjs/make-enter-clickable-59460fd6.js.map +1 -0
- package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css +1 -7
- package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js +11 -3
- package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js.map +1 -1
- package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js +1 -1
- package/dist/collection/components/action-bar/action-bar.js +1 -2
- package/dist/collection/components/action-bar/action-bar.js.map +1 -1
- package/dist/collection/components/action-bar/action-bar.types.js.map +1 -1
- package/dist/collection/components/button/button.js +1 -1
- package/dist/collection/components/button/button.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.js +18 -1
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.template.js +3 -3
- package/dist/collection/components/checkbox/checkbox.template.js.map +1 -1
- package/dist/collection/components/collapsible-section/collapsible-section.js +11 -1
- package/dist/collection/components/collapsible-section/collapsible-section.js.map +1 -1
- package/dist/collection/components/color-picker/color-picker-palette.css +46 -21
- package/dist/collection/components/color-picker/color-picker-palette.js +1 -1
- package/dist/collection/components/color-picker/color-picker-palette.js.map +1 -1
- package/dist/collection/components/color-picker/color-picker.css +29 -21
- package/dist/collection/components/color-picker/color-picker.js +1 -1
- package/dist/collection/components/color-picker/color-picker.js.map +1 -1
- package/dist/collection/components/dock/dock-button/dock-button.js +8 -2
- package/dist/collection/components/dock/dock-button/dock-button.js.map +1 -1
- package/dist/collection/components/form/fields/schema-field.js +13 -1
- package/dist/collection/components/form/fields/schema-field.js.map +1 -1
- package/dist/collection/components/form/form.css +4 -0
- package/dist/collection/components/form/widgets/select.js +1 -0
- package/dist/collection/components/form/widgets/select.js.map +1 -1
- package/dist/collection/components/icon/icon.js +1 -1
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.js +7 -0
- package/dist/collection/components/icon-button/icon-button.js.map +1 -1
- package/dist/collection/components/linear-progress/linear-progress.js +9 -3
- package/dist/collection/components/linear-progress/linear-progress.js.map +1 -1
- package/dist/collection/components/list/list.js +1 -1
- package/dist/collection/components/list/list.js.map +1 -1
- package/dist/collection/components/portal/portal.js +41 -20
- package/dist/collection/components/portal/portal.js.map +1 -1
- package/dist/collection/components/slider/slider.js +140 -131
- package/dist/collection/components/slider/slider.js.map +1 -1
- package/dist/collection/components/switch/switch.css +22 -1
- package/dist/collection/components/switch/switch.js +50 -10
- package/dist/collection/components/switch/switch.js.map +1 -1
- package/dist/collection/components/table/table.css +43 -30
- package/dist/collection/components/table/table.js +8 -0
- package/dist/collection/components/table/table.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip-content.css +1 -1
- package/dist/collection/components/tooltip/tooltip.css +3 -2
- package/dist/collection/components/tooltip/tooltip.js +41 -16
- package/dist/collection/components/tooltip/tooltip.js.map +1 -1
- package/dist/collection/global/{icon-cache.js → icon-cache/cache-storage-icon-cache.js} +4 -9
- package/dist/collection/global/icon-cache/cache-storage-icon-cache.js.map +1 -0
- package/dist/collection/global/icon-cache/factory.js +16 -0
- package/dist/collection/global/icon-cache/factory.js.map +1 -0
- package/dist/collection/global/icon-cache/in-memory-icon-cache.js +73 -0
- package/dist/collection/global/icon-cache/in-memory-icon-cache.js.map +1 -0
- package/dist/collection/util/make-enter-clickable.js +73 -0
- package/dist/collection/util/make-enter-clickable.js.map +1 -0
- package/dist/esm/{checkbox.template-a5d8a2bc.js → checkbox.template-c2d0fa10.js} +4 -4
- package/dist/esm/checkbox.template-c2d0fa10.js.map +1 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-action-bar-item_2.entry.js +10 -2
- package/dist/esm/limel-action-bar-item_2.entry.js.map +1 -1
- package/dist/esm/limel-action-bar.entry.js.map +1 -1
- package/dist/esm/limel-button.entry.js +2 -51
- package/dist/esm/limel-button.entry.js.map +1 -1
- package/dist/esm/limel-checkbox.entry.js +3 -2
- package/dist/esm/limel-checkbox.entry.js.map +1 -1
- package/dist/esm/limel-circular-progress_2.entry.js +7 -1
- package/dist/esm/limel-circular-progress_2.entry.js.map +1 -1
- package/dist/esm/limel-collapsible-section.entry.js +11 -1
- package/dist/esm/limel-collapsible-section.entry.js.map +1 -1
- package/dist/esm/limel-color-picker-palette.entry.js +2 -2
- package/dist/esm/limel-color-picker-palette.entry.js.map +1 -1
- package/dist/esm/limel-color-picker.entry.js +2 -2
- package/dist/esm/limel-color-picker.entry.js.map +1 -1
- package/dist/esm/limel-dock-button.entry.js +8 -2
- package/dist/esm/limel-dock-button.entry.js.map +1 -1
- package/dist/esm/limel-form.entry.js +15 -2
- package/dist/esm/limel-form.entry.js.map +1 -1
- package/dist/esm/limel-icon-button.entry.js +7 -0
- package/dist/esm/limel-icon-button.entry.js.map +1 -1
- package/dist/esm/limel-icon.entry.js +90 -8
- package/dist/esm/limel-icon.entry.js.map +1 -1
- package/dist/esm/limel-list_2.entry.js +1 -1
- package/dist/esm/limel-list_2.entry.js.map +1 -1
- package/dist/esm/limel-portal.entry.js +15 -14
- package/dist/esm/limel-portal.entry.js.map +1 -1
- package/dist/esm/limel-slider.entry.js +136 -127
- package/dist/esm/limel-slider.entry.js.map +1 -1
- package/dist/esm/limel-switch.entry.js +24 -11
- package/dist/esm/limel-switch.entry.js.map +1 -1
- package/dist/esm/limel-table.entry.js +9 -1
- package/dist/esm/limel-table.entry.js.map +1 -1
- package/dist/esm/limel-tooltip_2.entry.js +16 -14
- package/dist/esm/limel-tooltip_2.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/make-enter-clickable-0473e94a.js +77 -0
- package/dist/esm/make-enter-clickable-0473e94a.js.map +1 -0
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/{p-c6d57502.entry.js → p-0d823554.entry.js} +2 -2
- package/dist/lime-elements/p-0d823554.entry.js.map +1 -0
- package/dist/lime-elements/p-15e3028f.entry.js +2 -0
- package/dist/lime-elements/p-15e3028f.entry.js.map +1 -0
- package/dist/lime-elements/{p-9c1db0e7.entry.js → p-3bb15bdf.entry.js} +2 -2
- package/dist/lime-elements/p-3bb15bdf.entry.js.map +1 -0
- package/dist/lime-elements/p-4607900f.entry.js +2 -0
- package/dist/lime-elements/p-4607900f.entry.js.map +1 -0
- package/dist/lime-elements/{p-71210c65.entry.js → p-55dcbc35.entry.js} +2 -2
- package/dist/lime-elements/{p-71210c65.entry.js.map → p-55dcbc35.entry.js.map} +1 -1
- package/dist/lime-elements/p-7cfc8998.js +2 -0
- package/dist/lime-elements/p-7cfc8998.js.map +1 -0
- package/dist/lime-elements/{p-bb1b12bb.entry.js → p-88e4eba7.entry.js} +8 -8
- package/dist/lime-elements/p-88e4eba7.entry.js.map +1 -0
- package/dist/lime-elements/{p-eae4f1ed.entry.js → p-8f08ca13.entry.js} +2 -2
- package/dist/lime-elements/p-8f08ca13.entry.js.map +1 -0
- package/dist/lime-elements/{p-7d159ddf.entry.js → p-95769bf5.entry.js} +2 -2
- package/dist/lime-elements/p-95769bf5.entry.js.map +1 -0
- package/dist/lime-elements/p-addb4c84.entry.js +2 -0
- package/dist/lime-elements/p-addb4c84.entry.js.map +1 -0
- package/dist/lime-elements/p-b714596f.entry.js.map +1 -1
- package/dist/lime-elements/p-c3e428ff.entry.js +2 -0
- package/dist/lime-elements/p-c3e428ff.entry.js.map +1 -0
- package/dist/lime-elements/{p-0f1a9472.entry.js → p-c6f8ea40.entry.js} +6 -6
- package/dist/lime-elements/p-c6f8ea40.entry.js.map +1 -0
- package/dist/lime-elements/p-d028b08d.js +2 -0
- package/dist/lime-elements/p-d028b08d.js.map +1 -0
- package/dist/lime-elements/{p-42f06b16.entry.js → p-d5298b7e.entry.js} +2 -2
- package/dist/lime-elements/p-d5298b7e.entry.js.map +1 -0
- package/dist/lime-elements/p-d8826406.entry.js +2 -0
- package/dist/lime-elements/p-d8826406.entry.js.map +1 -0
- package/dist/lime-elements/{p-be492c93.entry.js → p-d9d4b3bf.entry.js} +2 -2
- package/dist/lime-elements/{p-be492c93.entry.js.map → p-d9d4b3bf.entry.js.map} +1 -1
- package/dist/lime-elements/p-db30704e.entry.js +2 -0
- package/dist/lime-elements/p-db30704e.entry.js.map +1 -0
- package/dist/lime-elements/p-e0a0065f.entry.js +2 -0
- package/dist/lime-elements/p-e0a0065f.entry.js.map +1 -0
- package/dist/lime-elements/{p-a4c39571.entry.js → p-f1b0951f.entry.js} +5 -5
- package/dist/lime-elements/p-f1b0951f.entry.js.map +1 -0
- package/dist/types/components/action-bar/action-bar-item/action-bar-item.d.ts +3 -0
- package/dist/types/components/action-bar/action-bar.d.ts +0 -1
- package/dist/types/components/action-bar/action-bar.types.d.ts +12 -6
- package/dist/types/components/checkbox/checkbox.d.ts +17 -0
- package/dist/types/components/checkbox/checkbox.template.d.ts +1 -0
- package/dist/types/components/collapsible-section/collapsible-section.d.ts +3 -0
- package/dist/types/components/dock/dock-button/dock-button.d.ts +1 -0
- package/dist/types/components/icon-button/icon-button.d.ts +2 -0
- package/dist/types/components/linear-progress/linear-progress.d.ts +1 -0
- package/dist/types/components/list/list.d.ts +2 -1
- package/dist/types/components/portal/portal.d.ts +8 -3
- package/dist/types/components/slider/slider.d.ts +13 -11
- package/dist/types/components/switch/switch.d.ts +19 -1
- package/dist/types/components/tooltip/tooltip.d.ts +13 -6
- package/dist/types/components.d.ts +129 -29
- package/dist/types/global/{icon-cache.d.ts → icon-cache/cache-storage-icon-cache.d.ts} +2 -4
- package/dist/types/global/icon-cache/factory.d.ts +4 -0
- package/dist/types/global/icon-cache/in-memory-icon-cache.d.ts +15 -0
- package/dist/types/util/make-enter-clickable.d.ts +7 -0
- package/package.json +10 -10
- package/dist/cjs/checkbox.template-5603ad4a.js.map +0 -1
- package/dist/collection/global/icon-cache.js.map +0 -1
- package/dist/collection/util/makeEnterClickable.js +0 -51
- package/dist/collection/util/makeEnterClickable.js.map +0 -1
- package/dist/esm/checkbox.template-a5d8a2bc.js.map +0 -1
- package/dist/lime-elements/p-0f1a9472.entry.js.map +0 -1
- package/dist/lime-elements/p-149f2418.entry.js +0 -2
- package/dist/lime-elements/p-149f2418.entry.js.map +0 -1
- package/dist/lime-elements/p-42f06b16.entry.js.map +0 -1
- package/dist/lime-elements/p-7d159ddf.entry.js.map +0 -1
- package/dist/lime-elements/p-8be4072e.entry.js +0 -2
- package/dist/lime-elements/p-8be4072e.entry.js.map +0 -1
- package/dist/lime-elements/p-908640f6.entry.js +0 -2
- package/dist/lime-elements/p-908640f6.entry.js.map +0 -1
- package/dist/lime-elements/p-9c1db0e7.entry.js.map +0 -1
- package/dist/lime-elements/p-9ceb4364.entry.js +0 -2
- package/dist/lime-elements/p-9ceb4364.entry.js.map +0 -1
- package/dist/lime-elements/p-a4c39571.entry.js.map +0 -1
- package/dist/lime-elements/p-b2d4f3f0.js +0 -2
- package/dist/lime-elements/p-b2d4f3f0.js.map +0 -1
- package/dist/lime-elements/p-b3ff8fef.entry.js +0 -2
- package/dist/lime-elements/p-b3ff8fef.entry.js.map +0 -1
- package/dist/lime-elements/p-bb1b12bb.entry.js.map +0 -1
- package/dist/lime-elements/p-c018e82f.entry.js +0 -2
- package/dist/lime-elements/p-c018e82f.entry.js.map +0 -1
- package/dist/lime-elements/p-c6d57502.entry.js.map +0 -1
- package/dist/lime-elements/p-de4cb1ac.entry.js +0 -2
- package/dist/lime-elements/p-de4cb1ac.entry.js.map +0 -1
- package/dist/lime-elements/p-eae4f1ed.entry.js.map +0 -1
- package/dist/types/util/makeEnterClickable.d.ts +0 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-232e9616.js';
|
|
2
2
|
import { c as createRandomString } from './random-string-812b1c35.js';
|
|
3
3
|
|
|
4
|
-
const tooltipCss = "
|
|
4
|
+
const tooltipCss = ":host(limel-tooltip){position:absolute;pointer-events:none}";
|
|
5
5
|
|
|
6
6
|
const DEFAULT_MAX_LENGTH = 50;
|
|
7
7
|
const Tooltip = class {
|
|
@@ -21,11 +21,13 @@ const Tooltip = class {
|
|
|
21
21
|
this.label = undefined;
|
|
22
22
|
this.helperLabel = undefined;
|
|
23
23
|
this.maxlength = DEFAULT_MAX_LENGTH;
|
|
24
|
+
this.openDirection = 'top';
|
|
24
25
|
this.open = undefined;
|
|
25
26
|
this.portalId = createRandomString();
|
|
26
27
|
this.tooltipId = createRandomString();
|
|
27
28
|
}
|
|
28
29
|
connectedCallback() {
|
|
30
|
+
this.ownerElement = this.getOwnerElement();
|
|
29
31
|
this.setOwnerAriaLabel();
|
|
30
32
|
this.addListeners();
|
|
31
33
|
}
|
|
@@ -34,26 +36,26 @@ const Tooltip = class {
|
|
|
34
36
|
}
|
|
35
37
|
render() {
|
|
36
38
|
const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
|
|
37
|
-
return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection:
|
|
39
|
+
return (h("div", { class: "trigger-anchor" }, h("limel-portal", { openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
|
|
38
40
|
'z-index': tooltipZIndex,
|
|
39
41
|
'pointer-events': 'none',
|
|
40
|
-
} }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
|
|
42
|
+
}, anchor: this.ownerElement }, h("limel-tooltip-content", { label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
|
|
41
43
|
}
|
|
42
44
|
setOwnerAriaLabel() {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
var _a;
|
|
46
|
+
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', this.tooltipId);
|
|
45
47
|
}
|
|
46
48
|
addListeners() {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
var _a, _b, _c;
|
|
50
|
+
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', this.showTooltip);
|
|
51
|
+
(_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', this.hideTooltip);
|
|
52
|
+
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.addEventListener('click', this.hideTooltip);
|
|
51
53
|
}
|
|
52
54
|
removeListeners() {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
var _a, _b, _c;
|
|
56
|
+
(_a = this.ownerElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', this.showTooltip);
|
|
57
|
+
(_b = this.ownerElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', this.hideTooltip);
|
|
58
|
+
(_c = this.ownerElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.hideTooltip);
|
|
57
59
|
}
|
|
58
60
|
getOwnerElement() {
|
|
59
61
|
let element = this.host;
|
|
@@ -68,7 +70,7 @@ const Tooltip = class {
|
|
|
68
70
|
};
|
|
69
71
|
Tooltip.style = tooltipCss;
|
|
70
72
|
|
|
71
|
-
const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
|
|
73
|
+
const tooltipContentCss = ":host(limel-tooltip-content){animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
|
|
72
74
|
|
|
73
75
|
const TooltipContent = class {
|
|
74
76
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-tooltip.limel-tooltip-content.entry.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip-content.scss?tag=limel-tooltip-content&encapsulation=shadow","./src/components/tooltip/tooltip-content.tsx"],"sourcesContent":["/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n.trigger-anchor {\n position: relative;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment.\n * A good practice is to just place them next to each other like below:\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n * @private\n */\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /**\n * ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n */\n @Prop({ reflect: true })\n public elementId!: string;\n\n /**\n * Short descriptive text of the owner element.\n */\n @Prop({ reflect: true })\n public label!: string;\n\n /**\n * Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n */\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /**\n * The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n @State()\n private open: boolean;\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n private portalId: string;\n private tooltipId: string;\n private showTooltipTimeoutHandle: number;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n }\n\n public connectedCallback() {\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render() {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection=\"bottom-start\"\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n const owner = this.getOwnerElement();\n owner?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n const owner = this.getOwnerElement();\n owner?.addEventListener('mouseover', this.showTooltip);\n owner?.addEventListener('mouseout', this.hideTooltip);\n owner?.addEventListener('click', this.hideTooltip);\n }\n\n private removeListeners() {\n const owner = this.getOwnerElement();\n owner?.removeEventListener('mouseover', this.showTooltip);\n owner?.removeEventListener('mouseout', this.hideTooltip);\n owner?.removeEventListener('click', this.hideTooltip);\n }\n\n private showTooltip = () => {\n const tooltipDelay = 500;\n this.showTooltipTimeoutHandle = window.setTimeout(() => {\n this.open = true;\n }, tooltipDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.showTooltipTimeoutHandle);\n this.open = false;\n };\n\n private getOwnerElement(): HTMLElement | undefined {\n let element: Node = this.host;\n\n do {\n element = element.parentNode;\n } while (\n element &&\n element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n element.nodeType !== Node.DOCUMENT_NODE\n );\n\n return (element as ShadowRoot)?.getElementById(this.elementId);\n }\n}\n",":host {\n animation: display-tooltip 0.2s ease;\n display: flex;\n\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: rgb(var(--contrast-1300));\n box-shadow: var(--shadow-depth-16);\n}\n\ntext {\n font-size: 0.875rem; // 14px\n line-height: 1.25;\n display: flex;\n column-gap: 1rem;\n\n &.has-column-layout {\n display: table-cell;\n width: fit-content;\n max-width: min(var(--tooltip-max-width-of-text), 80vw);\n .label {\n padding-bottom: 0.5rem;\n }\n .helper-label {\n padding-bottom: 0.25rem;\n }\n }\n}\n\n.label {\n color: rgb(var(--contrast-200));\n}\n\n.helper-label {\n color: rgb(var(--contrast-800));\n\n &:empty {\n display: none;\n }\n}\n\n@keyframes display-tooltip {\n 0% {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.94);\n }\n 100% {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n * @private\n */\n@Component({\n tag: 'limel-tooltip-content',\n shadow: true,\n styleUrl: 'tooltip-content.scss',\n})\nexport class TooltipContent {\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n label!: string;\n\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n helperLabel?: string;\n\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n maxlength?: number;\n\n public render() {\n let isLabelsTextLong = false;\n if (this.helperLabel && this.maxlength) {\n isLabelsTextLong =\n this.label.length + this.helperLabel.length > this.maxlength;\n }\n\n const props: any = {};\n if (this.maxlength) {\n props.style = {\n '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',\n };\n }\n\n return [\n <text class={{ 'has-column-layout': isLabelsTextLong }} {...props}>\n <div class=\"label\">{this.label}</div>\n <div class=\"helper-label\">{this.helperLabel}</div>\n </text>,\n ];\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-tooltip.limel-tooltip-content.entry.js","mappings":"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","names":[],"sources":["./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip-content.scss?tag=limel-tooltip-content&encapsulation=shadow","./src/components/tooltip/tooltip-content.tsx"],"sourcesContent":["/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n // Absolutely positioning ensures that this invisible element\n // does not occupy visible space in the UI.\n // Without this, `limel-tooltip` could in many cases\n // mess up the layout, where it is used.\n // For example, inside a `grid` or `flex` section,\n // every instance of the tooltip would take some space,\n // creating gaps and empty holes.\n position: absolute;\n pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /**\n * ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n */\n @Prop({ reflect: true })\n public elementId!: string;\n\n /**\n * Short descriptive text of the owner element.\n */\n @Prop({ reflect: true })\n public label!: string;\n\n /**\n * Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n */\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /**\n * The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n /**\n * Decides the tooltip's location in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top';\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n @State()\n private open: boolean;\n\n private portalId: string;\n private tooltipId: string;\n private showTooltipTimeoutHandle: number;\n private ownerElement: HTMLElement;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n }\n\n public connectedCallback() {\n this.ownerElement = this.getOwnerElement();\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render(): JSX.Element {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection={this.openDirection}\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n anchor={this.ownerElement}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.addEventListener('click', this.hideTooltip);\n }\n\n private removeListeners() {\n this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.removeEventListener('click', this.hideTooltip);\n }\n\n private showTooltip = () => {\n const tooltipDelay = 500;\n this.showTooltipTimeoutHandle = window.setTimeout(() => {\n this.open = true;\n }, tooltipDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.showTooltipTimeoutHandle);\n this.open = false;\n };\n\n private getOwnerElement(): HTMLElement | undefined {\n let element: Node = this.host;\n\n do {\n element = element.parentNode;\n } while (\n element &&\n element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n element.nodeType !== Node.DOCUMENT_NODE\n );\n\n return (element as ShadowRoot)?.getElementById(this.elementId);\n }\n}\n",":host(limel-tooltip-content) {\n animation: display-tooltip 0.2s ease;\n display: flex;\n\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: rgb(var(--contrast-1300));\n box-shadow: var(--shadow-depth-16);\n}\n\ntext {\n font-size: 0.875rem; // 14px\n line-height: 1.25;\n display: flex;\n column-gap: 1rem;\n\n &.has-column-layout {\n display: table-cell;\n width: fit-content;\n max-width: min(var(--tooltip-max-width-of-text), 80vw);\n .label {\n padding-bottom: 0.5rem;\n }\n .helper-label {\n padding-bottom: 0.25rem;\n }\n }\n}\n\n.label {\n color: rgb(var(--contrast-200));\n}\n\n.helper-label {\n color: rgb(var(--contrast-800));\n\n &:empty {\n display: none;\n }\n}\n\n@keyframes display-tooltip {\n 0% {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.94);\n }\n 100% {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n * @private\n */\n@Component({\n tag: 'limel-tooltip-content',\n shadow: true,\n styleUrl: 'tooltip-content.scss',\n})\nexport class TooltipContent {\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n label!: string;\n\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n helperLabel?: string;\n\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n maxlength?: number;\n\n public render() {\n let isLabelsTextLong = false;\n if (this.helperLabel && this.maxlength) {\n isLabelsTextLong =\n this.label.length + this.helperLabel.length > this.maxlength;\n }\n\n const props: any = {};\n if (this.maxlength) {\n props.style = {\n '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',\n };\n }\n\n return [\n <text class={{ 'has-column-layout': isLabelsTextLong }} {...props}>\n <div class=\"label\">{this.label}</div>\n <div class=\"helper-label\">{this.helperLabel}</div>\n </text>,\n ];\n }\n}\n"],"version":3}
|
package/dist/esm/loader.js
CHANGED
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-
|
|
14
|
+
return bootstrapLazy([["limel-color-picker",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[8],"searcher":[8],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[520],"format":[513],"language":[520],"formatter":[16],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[8],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-file",[[1,"limel-file",{"value":[8],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[8],"isDraggingOverDropZone":[32]}]]],["limel-info-tile",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[8],"progress":[16]}]]],["limel-snackbar",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[8],"show":[64]}]]],["limel-tab-panel",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog",[[1,"limel-dialog",{"heading":[8],"fullscreen":[516],"open":[1540],"closingActions":[520,"closing-actions"]}]]],["limel-progress-flow",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[8]}]]],["limel-banner",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[8]}]]],["limel-slider",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-switch",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"helperText":[513,"helper-text"],"fieldId":[32]}]]],["limel-code-editor",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container",[[1,"limel-flex-container",{"direction":[520],"justify":[520],"align":[520],"reverse":[516]}]]],["limel-form",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid",[[1,"limel-grid"]]],["limel-icon",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-header",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-flatpickr-adapter",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[8],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[8],"formatter":[16]}]]],["limel-action-bar-item_2",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[8],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-button",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["limel-list_2",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]],["limel-input-field",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}]]],["limel-icon-button",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner",[[1,"limel-spinner",{"size":[520],"limeBranded":[4,"lime-branded"]}]]],["limel-portal",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["limel-menu_2",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[8],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-tooltip_2",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]],["limel-helper-line",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { f as forceUpdate } from './index-232e9616.js';
|
|
2
|
+
|
|
3
|
+
const eventHandlers = new WeakMap();
|
|
4
|
+
class EnterClickable {
|
|
5
|
+
constructor(element) {
|
|
6
|
+
this.element = element;
|
|
7
|
+
this.isActive = false;
|
|
8
|
+
this.hasJustReleasedEnter = true;
|
|
9
|
+
this.handleKeyDown = (event) => {
|
|
10
|
+
var _a;
|
|
11
|
+
if (event.key === 'Enter' && !this.isActive) {
|
|
12
|
+
this.isActive = true;
|
|
13
|
+
if ((_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
|
|
14
|
+
forceUpdate(this.element);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
this.handleKeyUp = (event) => {
|
|
19
|
+
var _a;
|
|
20
|
+
if (event.key === 'Enter' && this.isActive) {
|
|
21
|
+
this.isActive = false;
|
|
22
|
+
this.hasJustReleasedEnter = true;
|
|
23
|
+
if ((_a = this.element) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
|
|
24
|
+
forceUpdate(this.element);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
this.handleClick = (event) => {
|
|
29
|
+
if (!this.isActive) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
if (this.hasJustReleasedEnter) {
|
|
33
|
+
this.hasJustReleasedEnter = false;
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
event.stopImmediatePropagation();
|
|
37
|
+
};
|
|
38
|
+
this.callbacks = {
|
|
39
|
+
keydownHandler: this.handleKeyDown.bind(this),
|
|
40
|
+
keyupHandler: this.handleKeyUp.bind(this),
|
|
41
|
+
clickHandler: this.handleClick.bind(this),
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
enable() {
|
|
45
|
+
this.element.addEventListener('keydown', this.callbacks.keydownHandler);
|
|
46
|
+
this.element.addEventListener('keyup', this.callbacks.keyupHandler);
|
|
47
|
+
this.element.addEventListener('click', this.callbacks.clickHandler, true);
|
|
48
|
+
}
|
|
49
|
+
disable() {
|
|
50
|
+
this.element.removeEventListener('keydown', this.callbacks.keydownHandler);
|
|
51
|
+
this.element.removeEventListener('keyup', this.callbacks.keyupHandler);
|
|
52
|
+
this.element.removeEventListener('click', this.callbacks.clickHandler, true);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Overrides the default browser behavior for clickable elements
|
|
57
|
+
* When focused and pressing down enter, avoids calling onClick repeatedly
|
|
58
|
+
* @param {HTMLElement} element the clickable element
|
|
59
|
+
*/
|
|
60
|
+
function makeEnterClickable(element) {
|
|
61
|
+
if (!eventHandlers.has(element)) {
|
|
62
|
+
const enterClickable = new EnterClickable(element);
|
|
63
|
+
enterClickable.enable();
|
|
64
|
+
eventHandlers.set(element, enterClickable);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
function removeEnterClickable(element) {
|
|
68
|
+
const enterClickable = eventHandlers.get(element);
|
|
69
|
+
if (enterClickable) {
|
|
70
|
+
enterClickable.disable();
|
|
71
|
+
eventHandlers.delete(element);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export { makeEnterClickable as m, removeEnterClickable as r };
|
|
76
|
+
|
|
77
|
+
//# sourceMappingURL=make-enter-clickable-0473e94a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"make-enter-clickable-0473e94a.js","mappings":"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","names":[],"sources":["./src/util/make-enter-clickable.ts"],"sourcesContent":["import { forceUpdate } from '@stencil/core';\n\nconst eventHandlers: WeakMap<HTMLElement, EnterClickable> = new WeakMap();\n\nclass EnterClickable {\n private isActive = false;\n private hasJustReleasedEnter = true;\n\n constructor(private element: HTMLElement) {}\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && !this.isActive) {\n this.isActive = true;\n\n if (this.element?.shadowRoot) {\n forceUpdate(this.element);\n }\n }\n };\n\n private handleKeyUp = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && this.isActive) {\n this.isActive = false;\n this.hasJustReleasedEnter = true;\n\n if (this.element?.shadowRoot) {\n forceUpdate(this.element);\n }\n }\n };\n\n private handleClick = (event: MouseEvent) => {\n if (!this.isActive) {\n return;\n }\n\n if (this.hasJustReleasedEnter) {\n this.hasJustReleasedEnter = false;\n\n return;\n }\n\n event.stopImmediatePropagation();\n };\n\n private callbacks: CallBacks = {\n keydownHandler: this.handleKeyDown.bind(this),\n keyupHandler: this.handleKeyUp.bind(this),\n clickHandler: this.handleClick.bind(this),\n };\n\n public enable() {\n this.element.addEventListener('keydown', this.callbacks.keydownHandler);\n this.element.addEventListener('keyup', this.callbacks.keyupHandler);\n this.element.addEventListener(\n 'click',\n this.callbacks.clickHandler,\n true\n );\n }\n\n public disable() {\n this.element.removeEventListener(\n 'keydown',\n this.callbacks.keydownHandler\n );\n this.element.removeEventListener('keyup', this.callbacks.keyupHandler);\n this.element.removeEventListener(\n 'click',\n this.callbacks.clickHandler,\n true\n );\n }\n}\n\n/**\n * Overrides the default browser behavior for clickable elements\n * When focused and pressing down enter, avoids calling onClick repeatedly\n * @param {HTMLElement} element the clickable element\n */\nexport function makeEnterClickable(element: HTMLElement) {\n if (!eventHandlers.has(element)) {\n const enterClickable = new EnterClickable(element);\n enterClickable.enable();\n eventHandlers.set(element, enterClickable);\n }\n}\n\nexport function removeEnterClickable(element: HTMLElement) {\n const enterClickable: EnterClickable = eventHandlers.get(element);\n if (enterClickable) {\n enterClickable.disable();\n eventHandlers.delete(element);\n }\n}\n\ninterface CallBacks {\n keydownHandler: (arg: KeyboardEvent) => void;\n keyupHandler: (arg: KeyboardEvent) => void;\n clickHandler: (arg: MouseEvent) => void;\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-
|
|
1
|
+
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-4607900f",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-0edcca0b",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-d419c102",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],helperText:[513,"helper-text"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],value:[8],searcher:[8],multiple:[4],delimiter:[513],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],badgeIcons:[516,"badge-icons"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-5afea754",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-add09e7d",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[520],format:[513],language:[520],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-6762616d",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-b9698f79",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[8],options:[16],multiple:[4],menuOpen:[32]}]]],["p-cf61ac34",[[1,"limel-file",{value:[8],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[8],isDraggingOverDropZone:[32]}]]],["p-b70f517e",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[8],progress:[16]}]]],["p-550cae4a",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[8],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-8f08ca13",[[1,"limel-table",{data:[16],columns:[16],mode:[1],layout:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"],aggregates:[16],selectable:[4],selection:[16]}]]],["p-addb4c84",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-9f5250a0",[[1,"limel-dialog",{heading:[8],fullscreen:[516],open:[1540],closingActions:[520,"closing-actions"]}]]],["p-4fc7e0df",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-af374a0c",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[8]}]]],["p-5fb4402e",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-9a5745e5",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[8]}]]],["p-f1b0951f",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-88e4eba7",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-94cb40fb",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-dd14b927",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[520],justify:[520],align:[520],reverse:[516]}]]],["p-d9d4b3bf",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-e0a0065f",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-95769bf5",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-0d823554",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-95ed1b9b",[[1,"limel-badge",{label:[520]}]]],["p-bc23beb6",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-c6f8ea40",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-455edb30",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-1bdc524d",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-7972528a",[[1,"limel-flatpickr-adapter",{value:[16],type:[8],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[8],formatter:[16]}]]],["p-db30704e",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-32127a17",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],inputType:[513,"input-type"],maxItems:[514,"max-items"],required:[516],searchLabel:[513,"search-label"],emptyInputOnBlur:[516,"empty-input-on-blur"],clearAllButton:[4,"clear-all-button"],leadingIcon:[513,"leading-icon"],delimiter:[513],language:[8],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-d8826406",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-3bb15bdf",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-55dcbc35",[[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[8],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}]]],["p-ce1fca54",[[1,"limel-input-field",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],prefix:[513],suffix:[513],required:[516],value:[513],trailingIcon:[513,"trailing-icon"],leadingIcon:[513,"leading-icon"],pattern:[513],type:[513],formatNumber:[516,"format-number"],step:[520],max:[514],min:[514],maxlength:[514],minlength:[514],completions:[16],showLink:[516,"show-link"],isFocused:[32],isModified:[32],showCompletions:[32]}]]],["p-c3e428ff",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-552fd521",[[1,"limel-spinner",{size:[520],limeBranded:[4,"lime-branded"]}]]],["p-d5298b7e",[[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-b897fe1f",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[8],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-8d44ea19",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-15e3028f",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}]]],["p-1754c5ae",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","value","label","helperText","tooltipLabel","required","readonly","isOpen","actions","accessibleLabel","layout","openDirection","overflowCutoff","dockItems","dockFooterItems","expanded","allowResize","mobileBreakPoint","useMobileLayout","disabled","searchLabel","leadingIcon","emptyResultMessage","searcher","multiple","delimiter","actionPosition","actionScrollBehavior","badgeIcons","items","textValue","loading","chips","primary","icon","invalid","placeholder","type","format","language","formatter","formattedValue","internalFormat","showPortal","selectedButtonId","menuOpen","accept","isDraggingOverDropZone","prefix","suffix","badge","link","progress","message","timeout","actionText","dismissible","multiline","show","tabs","data","columns","mode","pageSize","totalRows","sorting","activeRow","movableColumns","page","emptyMessage","aggregates","selectable","selection","header","heading","fullscreen","open","closingActions","flowItems","close","factor","unit","valuemax","valuemin","step","percentageClass","lineNumbers","fold","lint","colorScheme","random","config","direction","justify","align","reverse","schema","propsFactory","transformErrors","errors","fieldId","size","name","item","canScrollLeft","canScrollRight","checked","indeterminate","modified","subheading","supportingText","inputElement","isVisible","inputType","maxItems","emptyInputOnBlur","clearAllButton","editMode","blurred","inputChipIndexSelected","getEditMode","setFocus","emptyInput","outlined","loadingFailed","justLoaded","maxValue","displayPercentageColors","iconSize","maxLinesSecondaryText","allowClicksElement","trailingIcon","pattern","formatNumber","max","min","maxlength","minlength","completions","showLink","isFocused","isModified","showCompletions","elevated","limeBranded","gridLayout","contentCollection","length","maxLength","helperTextId","position","containerId","containerStyle","parent","inheritParentWidth","visible","elementId","helperLabel"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","options","bootstrapLazy","value","label","helperText","tooltipLabel","required","readonly","isOpen","actions","accessibleLabel","layout","openDirection","overflowCutoff","dockItems","dockFooterItems","expanded","allowResize","mobileBreakPoint","useMobileLayout","disabled","searchLabel","leadingIcon","emptyResultMessage","searcher","multiple","delimiter","actionPosition","actionScrollBehavior","badgeIcons","items","textValue","loading","chips","primary","icon","invalid","placeholder","type","format","language","formatter","formattedValue","internalFormat","showPortal","selectedButtonId","menuOpen","accept","isDraggingOverDropZone","prefix","suffix","badge","link","progress","message","timeout","actionText","dismissible","multiline","show","tabs","data","columns","mode","pageSize","totalRows","sorting","activeRow","movableColumns","page","emptyMessage","aggregates","selectable","selection","header","heading","fullscreen","open","closingActions","flowItems","close","factor","unit","valuemax","valuemin","step","percentageClass","fieldId","lineNumbers","fold","lint","colorScheme","random","config","direction","justify","align","reverse","schema","propsFactory","transformErrors","errors","size","name","item","canScrollLeft","canScrollRight","checked","indeterminate","modified","subheading","supportingText","inputElement","isVisible","inputType","maxItems","emptyInputOnBlur","clearAllButton","editMode","blurred","inputChipIndexSelected","getEditMode","setFocus","emptyInput","outlined","loadingFailed","justLoaded","maxValue","displayPercentageColors","iconSize","maxLinesSecondaryText","allowClicksElement","trailingIcon","pattern","formatNumber","max","min","maxlength","minlength","completions","showLink","isFocused","isModified","showCompletions","elevated","limeBranded","position","containerId","containerStyle","parent","inheritParentWidth","visible","anchor","gridLayout","contentCollection","elementId","helperLabel","length","maxLength","helperTextId"],"sources":["./node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r,c as o,h as a}from"./p-3075aa67.js";const l=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const c=["lighter","light","default","dark","darker"];function e(r,o){return`--color-${r}-${o}`}function g(r,o){return`rgb(var(${e(r,o)}))`}const t='.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{transition:border-radius 0.2s ease;border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:"";display:block;padding-top:100%}.swatch.hue{font-family:"Source Code Pro", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:"Source Code Pro", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill=\'rgba(186,186,192,0.16)\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}.picker-trigger{border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}';const n=class{constructor(t){r(this,t);this.change=o(this,"change",7);this.renderSwatches=()=>l.map((r=>c.map(this.renderSwatch(r))));this.renderSwatch=r=>o=>{const l=e(r,o);const c={swatch:true,[l]:true,"swatch--selected":this.value===g(r,o)};return a("div",{class:c,onClick:this.handleClick(r,o),tabindex:"0"})};this.handleChange=r=>{r.stopPropagation();this.change.emit(r.detail)};this.handleClick=(r,o)=>a=>{const l=g(r,o);a.stopPropagation();this.change.emit(l)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined}render(){const r=this.value?{"--background":this.value}:{};return[a("div",{class:"color-picker-palette"},this.renderSwatches()),a("div",{class:"chosen-color-name"},a("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),a("div",{class:"chosen-color-preview",style:r}))]}};n.style=t;export{n as limel_color_picker_palette};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r,c as o,h as a}from"./p-3075aa67.js";const l=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const c=["lighter","light","default","dark","darker"];function e(r,o){return`--color-${r}-${o}`}function t(r,o){return`rgb(var(${e(r,o)}))`}const g='.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{transition:border-radius 0.2s ease;border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:"";display:block;padding-top:100%}.swatch.hue{font-family:"Source Code Pro", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:"Source Code Pro", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.brand-colors-tips{transition:opacity 0.2s ease 0.4s;opacity:0;font-size:0.875rem;padding-left:2.75rem;margin-bottom:2.5rem}.brand-colors .brand-colors-tips{opacity:1}@media (prefers-color-scheme: light){.brand-colors .--color-glaucous-default,.brand-colors .--color-gray-dark{border-radius:50%}}@media (prefers-color-scheme: dark){.brand-colors .--color-red-light,.brand-colors .--color-magenta-default,.brand-colors .--color-sky-light,.brand-colors .--color-teal-light,.brand-colors .--color-green-light,.brand-colors .--color-amber-light,.brand-colors .--color-amber-default,.brand-colors .--color-coral-light,.brand-colors .--color-gray-light{border-radius:50%}}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill=\'rgba(186,186,192,0.16)\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}';const n=class{constructor(g){r(this,g);this.change=o(this,"change",7);this.renderSwatches=()=>l.map((r=>c.map(this.renderSwatch(r))));this.renderSwatch=r=>o=>{const l=e(r,o);const c={swatch:true,[l]:true,"swatch--selected":this.value===t(r,o)};return a("button",{class:c,onClick:this.handleClick(r,o)})};this.handleChange=r=>{r.stopPropagation();this.change.emit(r.detail)};this.handleClick=(r,o)=>a=>{const l=t(r,o);a.stopPropagation();this.change.emit(l)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined}render(){const r=this.value?{"--background":this.value}:{};return[a("div",{class:"color-picker-palette"},this.renderSwatches()),a("div",{class:"chosen-color-name"},a("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),a("div",{class:"chosen-color-preview",style:r}))]}};n.style=g;export{n as limel_color_picker_palette};
|
|
2
|
+
//# sourceMappingURL=p-0d823554.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getCssColor","colorPickerPaletteCss","Palette","this","renderSwatches","map","renderSwatch","colorName","classList","swatch","value","h","class","onClick","handleClick","handleChange","event","stopPropagation","change","emit","detail","render","background","label","helperText","onChange","required","style"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n 'red',\n 'pink',\n 'magenta',\n 'purple',\n 'violet',\n 'indigo',\n 'blue',\n 'sky',\n 'cyan',\n 'teal',\n 'green',\n 'lime',\n 'grass',\n 'yellow',\n 'amber',\n 'orange',\n 'coral',\n 'brown',\n 'gray',\n 'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\nexport function getColorName(color: string, brightness: string): string {\n return `--color-${color}-${brightness}`;\n}\n\nexport function getCssColor(color: string, brightness: string): string {\n return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n display: grid;\n gap: 0.25rem;\n grid-auto-flow: column;\n grid-template-columns: repeat(20, 1fr);\n grid-template-rows: repeat(4, 1fr) auto;\n margin: 1rem;\n}\n\n.chosen-color-name {\n box-sizing: border-box;\n padding: 1rem;\n display: grid;\n grid-template-columns: 1fr auto;\n gap: 0.5rem;\n}\n\n.chosen-color-preview {\n border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n // colors in shared_input-select-picker.scss\n border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n border: none;\n aspect-ratio: 1;\n\n @include mixins.visualize-keyboard-focus();\n\n // We could use the `@include mixins.is-flat-clickable();` mixin\n // But its `background-color` arguments would interfere with the\n // styles here. So we just copy/pasted the useful parts of the mixin here\n transition: color 0.2s ease, background-color 0.2s ease,\n box-shadow 0.2s ease, transform 0.1s ease-out;\n\n &:hover {\n box-shadow: var(--button-shadow-hovered);\n }\n\n &:active {\n box-shadow: var(--button-shadow-pressed);\n\n transform: translate3d(0, 0.08rem, 0);\n }\n cursor: pointer;\n\n &:focus-visible {\n box-shadow: var(--shadow-depth-8-focused),\n 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n }\n}\n\n.swatch--selected {\n border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /**\n * Color value that is manually typed by the user\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Label of the input field\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * Helper text of the input field\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` if a value is required\n */\n @Prop({ reflect: true })\n public required: boolean;\n\n /**\n * Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"],"mappings":"6CAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAEpDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAEgBC,EAAYF,EAAeC,GACvC,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,CC/BA,MAAME,EAAwB,gtc,MCYjBC,EAAO,M,wDAiDRC,KAAAC,eAAiB,IACdT,EAAOU,KAAKP,GACRF,EAAaS,IAAIF,KAAKG,aAAaR,MAI1CK,KAAAG,aAAgBR,GAAmBC,IACvC,MAAMQ,EAAYV,EAAaC,EAAOC,GACtC,MAAMS,EAAY,CACdC,OAAQ,KACRF,CAACA,GAAY,KACb,mBAAoBJ,KAAKO,QAAUV,EAAYF,EAAOC,IAG1D,OACIY,EAAA,UACIC,MAAOJ,EACPK,QAASV,KAAKW,YAAYhB,EAAOC,IACnC,EAIFI,KAAAY,aAAgBC,IACpBA,EAAMC,kBACNd,KAAKe,OAAOC,KAAKH,EAAMI,OAAO,EAG1BjB,KAAAW,YACJ,CAAChB,EAAeC,IAAwBiB,IACpC,MAAMN,EAAQV,EAAYF,EAAOC,GACjCiB,EAAMC,kBACNd,KAAKe,OAAOC,KAAKT,EAAM,E,4FAjDxBW,SACH,MAAMC,EAAanB,KAAKO,MAAQ,CAAE,eAAgBP,KAAKO,OAAU,GAEjE,MAAO,CACHC,EAAA,OAAKC,MAAM,wBAAwBT,KAAKC,kBACxCO,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIY,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBd,MAAOP,KAAKO,MACZe,SAAUtB,KAAKY,aACfW,SAAUvB,KAAKuB,WAEnBf,EAAA,OAAKC,MAAM,uBAAuBe,MAAOL,K"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as i,g as e}from"./p-3075aa67.js";import{c as s}from"./p-3ccdc4a3.js";const o=":host(limel-tooltip){position:absolute;pointer-events:none}";const l=50;const n=class{constructor(i){t(this,i);this.showTooltip=()=>{const t=500;this.showTooltipTimeoutHandle=window.setTimeout((()=>{this.open=true}),t)};this.hideTooltip=()=>{clearTimeout(this.showTooltipTimeoutHandle);this.open=false};this.elementId=undefined;this.label=undefined;this.helperLabel=undefined;this.maxlength=l;this.openDirection="top";this.open=undefined;this.portalId=s();this.tooltipId=s()}connectedCallback(){this.ownerElement=this.getOwnerElement();this.setOwnerAriaLabel();this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return i("div",{class:"trigger-anchor"},i("limel-portal",{openDirection:this.openDirection,visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"},anchor:this.ownerElement},i("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){var t;(t=this.ownerElement)===null||t===void 0?void 0:t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){var t,i,e;(t=this.ownerElement)===null||t===void 0?void 0:t.addEventListener("mouseover",this.showTooltip);(i=this.ownerElement)===null||i===void 0?void 0:i.addEventListener("mouseout",this.hideTooltip);(e=this.ownerElement)===null||e===void 0?void 0:e.addEventListener("click",this.hideTooltip)}removeListeners(){var t,i,e;(t=this.ownerElement)===null||t===void 0?void 0:t.removeEventListener("mouseover",this.showTooltip);(i=this.ownerElement)===null||i===void 0?void 0:i.removeEventListener("mouseout",this.hideTooltip);(e=this.ownerElement)===null||e===void 0?void 0:e.removeEventListener("click",this.hideTooltip)}getOwnerElement(){let t=this.host;do{t=t.parentNode}while(t&&t.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&t.nodeType!==Node.DOCUMENT_NODE);return t===null||t===void 0?void 0:t.getElementById(this.elementId)}get host(){return e(this)}};n.style=o;const a=":host(limel-tooltip-content){animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";const h=class{constructor(i){t(this,i);this.label=undefined;this.helperLabel=undefined;this.maxlength=undefined}render(){let t=false;if(this.helperLabel&&this.maxlength){t=this.label.length+this.helperLabel.length>this.maxlength}const e={};if(this.maxlength){e.style={"--tooltip-max-width-of-text":`${this.maxlength}`+"ch"}}return[i("text",Object.assign({class:{"has-column-layout":t}},e),i("div",{class:"label"},this.label),i("div",{class:"helper-label"},this.helperLabel))]}};h.style=a;export{n as limel_tooltip,h as limel_tooltip_content};
|
|
2
|
+
//# sourceMappingURL=p-15e3028f.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["tooltipCss","DEFAULT_MAX_LENGTH","Tooltip","constructor","hostRef","this","showTooltip","tooltipDelay","showTooltipTimeoutHandle","window","setTimeout","open","hideTooltip","clearTimeout","portalId","createRandomString","tooltipId","connectedCallback","ownerElement","getOwnerElement","setOwnerAriaLabel","addListeners","disconnectedCallback","removeListeners","render","tooltipZIndex","getComputedStyle","host","getPropertyValue","h","class","openDirection","visible","containerId","containerStyle","anchor","label","helperLabel","maxlength","role","id","_a","setAttribute","addEventListener","_b","_c","removeEventListener","element","parentNode","nodeType","Node","DOCUMENT_FRAGMENT_NODE","DOCUMENT_NODE","getElementById","elementId","tooltipContentCss","TooltipContent","isLabelsTextLong","length","props","style","Object","assign"],"sources":["./src/components/tooltip/tooltip.scss?tag=limel-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx","./src/components/tooltip/tooltip-content.scss?tag=limel-tooltip-content&encapsulation=shadow","./src/components/tooltip/tooltip-content.tsx"],"sourcesContent":["/**\n * @prop --tooltip-z-index: z-index of the tooltip.\n */\n\n:host(limel-tooltip) {\n // Absolutely positioning ensures that this invisible element\n // does not occupy visible space in the UI.\n // Without this, `limel-tooltip` could in many cases\n // mess up the layout, where it is used.\n // For example, inside a `grid` or `flex` section,\n // every instance of the tooltip would take some space,\n // creating gaps and empty holes.\n position: absolute;\n pointer-events: none;\n}\n","import { Component, h, Prop, Element, State } from '@stencil/core';\nimport { JSX } from 'react';\nimport { createRandomString } from '../../util/random-string';\nimport { OpenDirection } from '../menu/menu.types';\n\nconst DEFAULT_MAX_LENGTH = 50;\n\n/**\n * A tooltip can be used to display a descriptive text for any element.\n * The displayed content must be a brief and supplemental string of text,\n * identifying the element or describing its function for the user,\n * helping them better understand unfamiliar objects that aren't described\n * directly in the UI.\n *\n * ## Interaction\n * The tooltip appears after a slight delay, when the element is hovered;\n * and disappears as soon as the cursor leaves the element.\n * Therefore, users cannot interact with the tip, but if the trigger element\n * itself is interactive, it will remain interactible even with a tooltip bound\n * to it.\n *\n * :::note\n * In order to display the tooltip, the tooltip element and its trigger element\n * must be within the same document or document fragment (the same shadowRoot).\n * Often, it's easiest to just place them next to each other like in the example\n * below, but if you need to, you can place them differently.\n *\n * ```html\n * <limel-button icon=\"search\" id=\"tooltip-example\" />\n * <limel-tooltip label=\"Search\" elementId=\"tooltip-example\" />\n * ```\n * :::\n *\n * ## Usage\n * - Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\n * Use them only when they add significant value.\n * - A good tip is concise, helpful, and informative.\n * Don't explain the obvious or simply repeat what is already on the screen.\n * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).\n * - If the tip is essential to the primary tasks that the user is performing,\n * such as warnings or important notes, include the information directly in the\n * interface instead.\n * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),\n * use that, not a tooltip.\n * - Make sure to use the tooltip on an element that users naturally and\n * effortlessly recognize can be hovered.\n * @exampleComponent limel-example-tooltip-basic\n * @exampleComponent limel-example-tooltip-max-character\n * @exampleComponent limel-example-tooltip-composite\n */\n@Component({\n tag: 'limel-tooltip',\n shadow: true,\n styleUrl: 'tooltip.scss',\n})\nexport class Tooltip {\n /**\n * ID of the owner element that the tooltip should describe.\n * Must be a child within the same document fragment as the tooltip element\n * itself.\n */\n @Prop({ reflect: true })\n public elementId!: string;\n\n /**\n * Short descriptive text of the owner element.\n */\n @Prop({ reflect: true })\n public label!: string;\n\n /**\n * Additional helper text for the element.\n * Example usage can be a keyboard shortcut to activate the function of the\n * owner element.\n */\n @Prop({ reflect: true })\n public helperLabel?: string;\n\n /**\n * The maximum amount of characters before rendering 'label' and\n * 'helperLabel' in two rows.\n */\n @Prop({ reflect: true })\n public maxlength?: number = DEFAULT_MAX_LENGTH;\n\n /**\n * Decides the tooltip's location in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top';\n\n @Element()\n private host: HTMLLimelTooltipElement;\n\n @State()\n private open: boolean;\n\n private portalId: string;\n private tooltipId: string;\n private showTooltipTimeoutHandle: number;\n private ownerElement: HTMLElement;\n\n public constructor() {\n this.portalId = createRandomString();\n this.tooltipId = createRandomString();\n }\n\n public connectedCallback() {\n this.ownerElement = this.getOwnerElement();\n this.setOwnerAriaLabel();\n this.addListeners();\n }\n\n public disconnectedCallback() {\n this.removeListeners();\n }\n\n public render(): JSX.Element {\n const tooltipZIndex = getComputedStyle(this.host).getPropertyValue(\n '--tooltip-z-index'\n );\n\n return (\n <div class=\"trigger-anchor\">\n <limel-portal\n openDirection={this.openDirection}\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{\n 'z-index': tooltipZIndex,\n 'pointer-events': 'none',\n }}\n anchor={this.ownerElement}\n >\n <limel-tooltip-content\n label={this.label}\n helperLabel={this.helperLabel}\n maxlength={this.maxlength}\n role=\"tooltip\"\n aria-hidden={!this.open}\n id={this.tooltipId}\n />\n </limel-portal>\n </div>\n );\n }\n\n private setOwnerAriaLabel() {\n this.ownerElement?.setAttribute('aria-describedby', this.tooltipId);\n }\n\n private addListeners() {\n this.ownerElement?.addEventListener('mouseover', this.showTooltip);\n this.ownerElement?.addEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.addEventListener('click', this.hideTooltip);\n }\n\n private removeListeners() {\n this.ownerElement?.removeEventListener('mouseover', this.showTooltip);\n this.ownerElement?.removeEventListener('mouseout', this.hideTooltip);\n this.ownerElement?.removeEventListener('click', this.hideTooltip);\n }\n\n private showTooltip = () => {\n const tooltipDelay = 500;\n this.showTooltipTimeoutHandle = window.setTimeout(() => {\n this.open = true;\n }, tooltipDelay);\n };\n\n private hideTooltip = () => {\n clearTimeout(this.showTooltipTimeoutHandle);\n this.open = false;\n };\n\n private getOwnerElement(): HTMLElement | undefined {\n let element: Node = this.host;\n\n do {\n element = element.parentNode;\n } while (\n element &&\n element.nodeType !== Node.DOCUMENT_FRAGMENT_NODE &&\n element.nodeType !== Node.DOCUMENT_NODE\n );\n\n return (element as ShadowRoot)?.getElementById(this.elementId);\n }\n}\n",":host(limel-tooltip-content) {\n animation: display-tooltip 0.2s ease;\n display: flex;\n\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n background-color: rgb(var(--contrast-1300));\n box-shadow: var(--shadow-depth-16);\n}\n\ntext {\n font-size: 0.875rem; // 14px\n line-height: 1.25;\n display: flex;\n column-gap: 1rem;\n\n &.has-column-layout {\n display: table-cell;\n width: fit-content;\n max-width: min(var(--tooltip-max-width-of-text), 80vw);\n .label {\n padding-bottom: 0.5rem;\n }\n .helper-label {\n padding-bottom: 0.25rem;\n }\n }\n}\n\n.label {\n color: rgb(var(--contrast-200));\n}\n\n.helper-label {\n color: rgb(var(--contrast-800));\n\n &:empty {\n display: none;\n }\n}\n\n@keyframes display-tooltip {\n 0% {\n opacity: 0;\n transform: translate3d(0, 0, 0) scale(0.94);\n }\n 100% {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * This component is used internally by `limel-tooltip`.\n * @private\n */\n@Component({\n tag: 'limel-tooltip-content',\n shadow: true,\n styleUrl: 'tooltip-content.scss',\n})\nexport class TooltipContent {\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n label!: string;\n\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n helperLabel?: string;\n\n /**\n * Read more in tooltip.tsx\n */\n @Prop({ reflect: true })\n maxlength?: number;\n\n public render() {\n let isLabelsTextLong = false;\n if (this.helperLabel && this.maxlength) {\n isLabelsTextLong =\n this.label.length + this.helperLabel.length > this.maxlength;\n }\n\n const props: any = {};\n if (this.maxlength) {\n props.style = {\n '--tooltip-max-width-of-text': `${this.maxlength}` + 'ch',\n };\n }\n\n return [\n <text class={{ 'has-column-layout': isLabelsTextLong }} {...props}>\n <div class=\"label\">{this.label}</div>\n <div class=\"helper-label\">{this.helperLabel}</div>\n </text>,\n ];\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAa,8DCKnB,MAAMC,EAAqB,G,MAkDdC,EAAO,MA+ChBC,YAAAC,G,UA6DQC,KAAAC,YAAc,KAClB,MAAMC,EAAe,IACrBF,KAAKG,yBAA2BC,OAAOC,YAAW,KAC9CL,KAAKM,KAAO,IAAI,GACjBJ,EAAa,EAGZF,KAAAO,YAAc,KAClBC,aAAaR,KAAKG,0BAClBH,KAAKM,KAAO,KAAK,E,wFAzFOV,E,mBAMU,M,oBAclCI,KAAKS,SAAWC,IAChBV,KAAKW,UAAYD,G,CAGdE,oBACHZ,KAAKa,aAAeb,KAAKc,kBACzBd,KAAKe,oBACLf,KAAKgB,c,CAGFC,uBACHjB,KAAKkB,iB,CAGFC,SACH,MAAMC,EAAgBC,iBAAiBrB,KAAKsB,MAAMC,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,gBACIE,cAAe1B,KAAK0B,cACpBC,QAAS3B,KAAKM,KACdsB,YAAa5B,KAAKS,SAClBoB,eAAgB,CACZ,UAAWT,EACX,iBAAkB,QAEtBU,OAAQ9B,KAAKa,cAEbW,EAAA,yBACIO,MAAO/B,KAAK+B,MACZC,YAAahC,KAAKgC,YAClBC,UAAWjC,KAAKiC,UAChBC,KAAK,UAAS,eACAlC,KAAKM,KACnB6B,GAAInC,KAAKW,a,CAOrBI,oB,OACJqB,EAAApC,KAAKa,gBAAY,MAAAuB,SAAA,SAAAA,EAAEC,aAAa,mBAAoBrC,KAAKW,U,CAGrDK,e,WACJoB,EAAApC,KAAKa,gBAAY,MAAAuB,SAAA,SAAAA,EAAEE,iBAAiB,YAAatC,KAAKC,cACtDsC,EAAAvC,KAAKa,gBAAY,MAAA0B,SAAA,SAAAA,EAAED,iBAAiB,WAAYtC,KAAKO,cACrDiC,EAAAxC,KAAKa,gBAAY,MAAA2B,SAAA,SAAAA,EAAEF,iBAAiB,QAAStC,KAAKO,Y,CAG9CW,kB,WACJkB,EAAApC,KAAKa,gBAAY,MAAAuB,SAAA,SAAAA,EAAEK,oBAAoB,YAAazC,KAAKC,cACzDsC,EAAAvC,KAAKa,gBAAY,MAAA0B,SAAA,SAAAA,EAAEE,oBAAoB,WAAYzC,KAAKO,cACxDiC,EAAAxC,KAAKa,gBAAY,MAAA2B,SAAA,SAAAA,EAAEC,oBAAoB,QAASzC,KAAKO,Y,CAejDO,kBACJ,IAAI4B,EAAgB1C,KAAKsB,KAEzB,EAAG,CACCoB,EAAUA,EAAQC,U,OAElBD,GACAA,EAAQE,WAAaC,KAAKC,wBAC1BJ,EAAQE,WAAaC,KAAKE,eAG9B,OAAQL,IAAsB,MAAtBA,SAAO,SAAPA,EAAwBM,eAAehD,KAAKiD,U,uCC1L5D,MAAMC,EAAoB,kvB,MCWbC,EAAc,M,kGAmBhBhC,SACH,IAAIiC,EAAmB,MACvB,GAAIpD,KAAKgC,aAAehC,KAAKiC,UAAW,CACpCmB,EACIpD,KAAK+B,MAAMsB,OAASrD,KAAKgC,YAAYqB,OAASrD,KAAKiC,S,CAG3D,MAAMqB,EAAa,GACnB,GAAItD,KAAKiC,UAAW,CAChBqB,EAAMC,MAAQ,CACV,8BAA+B,GAAGvD,KAAKiC,YAAc,K,CAI7D,MAAO,CACHT,EAAA,OAAAgC,OAAAC,OAAA,CAAMhC,MAAO,CAAE,oBAAqB2B,IAAwBE,GACxD9B,EAAA,OAAKC,MAAM,SAASzB,KAAK+B,OACzBP,EAAA,OAAKC,MAAM,gBAAgBzB,KAAKgC,c"}
|