@getflip/swirl-components 0.435.0 → 0.436.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +2 -8
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +1 -1
- package/dist/cjs/swirl-form-control.cjs.entry.js +1 -1
- package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +2 -2
- package/dist/cjs/swirl-table-row-group.cjs.entry.js +2 -2
- package/dist/cjs/swirl-tooltip.cjs.entry.js +9 -6
- package/dist/collection/components/swirl-form-control/swirl-form-control.js +1 -1
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +1 -1
- package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +2 -2
- package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js +2 -2
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.css +10 -2
- package/dist/collection/components/swirl-tooltip/swirl-tooltip.js +9 -7
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-form-control.js +1 -1
- package/dist/components/swirl-resource-list-item2.js +1 -1
- package/dist/components/swirl-shell-navigation-item.js +2 -2
- package/dist/components/swirl-table-row-group.js +2 -2
- package/dist/components/swirl-tooltip2.js +9 -6
- package/dist/esm/swirl-app-layout_5.entry.js +1 -1
- package/dist/esm/swirl-form-control.entry.js +1 -1
- package/dist/esm/swirl-shell-navigation-item.entry.js +2 -2
- package/dist/esm/swirl-table-row-group.entry.js +2 -2
- package/dist/esm/swirl-tooltip.entry.js +9 -6
- package/dist/swirl-components/p-460a10a6.entry.js +1 -0
- package/dist/swirl-components/p-55fd0793.entry.js +1 -0
- package/dist/swirl-components/{p-84903c22.entry.js → p-661bf0ca.entry.js} +1 -1
- package/dist/swirl-components/p-989ed4ed.entry.js +1 -0
- package/dist/swirl-components/p-c58d14ae.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components.d.ts +0 -6
- package/package.json +1 -1
- package/dist/swirl-components/p-13d33aa2.entry.js +0 -1
- package/dist/swirl-components/p-6e78cdee.entry.js +0 -1
- package/dist/swirl-components/p-a33b8b46.entry.js +0 -1
- package/dist/swirl-components/p-c7376c8c.entry.js +0 -1
package/components.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2026-02-
|
|
2
|
+
"timestamp": "2026-02-11T08:10:06",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.35.0",
|
|
@@ -81556,13 +81556,7 @@
|
|
|
81556
81556
|
"attr": "positioning",
|
|
81557
81557
|
"reflectToAttr": false,
|
|
81558
81558
|
"docs": "",
|
|
81559
|
-
"docsTags": [
|
|
81560
|
-
{
|
|
81561
|
-
"name": "default",
|
|
81562
|
-
"text": "\"absolute\""
|
|
81563
|
-
}
|
|
81564
|
-
],
|
|
81565
|
-
"default": "\"absolute\"",
|
|
81559
|
+
"docsTags": [],
|
|
81566
81560
|
"values": [
|
|
81567
81561
|
{
|
|
81568
81562
|
"value": "absolute",
|
|
@@ -801,7 +801,7 @@ const SwirlResourceListItem = class {
|
|
|
801
801
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
802
802
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
803
803
|
});
|
|
804
|
-
return (index.h(index.Host, { key: '6ff7583e30388db1c3b5335706fa90fcfab70f4b', role: hostRole }, index.h("div", { key: '76eb19d083fe8caee52b09c543532ba96e5937ad', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: '628892cb9e15365d68e6945c7d1153b993778484', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: 'f97aef8ba23556c0f796d2459818a314b73409b2', class: "resource-list-item__media" }, index.h("slot", { key: '26f0a4ce1978032a6234a145f896204cda19d13f', name: "media" }))), index.h("span", { key: 'd6e58c39f9d4157b6b6644180e65c6c829417184', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition
|
|
804
|
+
return (index.h(index.Host, { key: '6ff7583e30388db1c3b5335706fa90fcfab70f4b', role: hostRole }, index.h("div", { key: '76eb19d083fe8caee52b09c543532ba96e5937ad', class: className, role: containerRole, onClick: this.onClick }, index.h(Tag, { key: '628892cb9e15365d68e6945c7d1153b993778484', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (index.h("span", { key: 'f97aef8ba23556c0f796d2459818a314b73409b2', class: "resource-list-item__media" }, index.h("slot", { key: '26f0a4ce1978032a6234a145f896204cda19d13f', name: "media" }))), index.h("span", { key: 'd6e58c39f9d4157b6b6644180e65c6c829417184', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (index.h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (index.h("span", { key: '649731c17b4f3fd6145c2520532da0df0ade5a5b', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (index.h("span", { key: 'ec168ff79ad2a16a2e7e647e282eca27d0e5f5c4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'efc8c2347c715047e9fc37deccbfe004e30ece9d', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'cf32f9cb9c1aa3f8673c85ce1fe5ca91be87554e' }))))), showMeta && (index.h("span", { key: '6242181c13f3ff8179ddf427a97e5d073eb0f03c', class: "resource-list-item__meta" }, this.meta && (index.h("span", { key: 'b96ad60720e71557167207c225f10c003aae7fb1', class: "resource-list-item__meta-text" }, this.meta)), index.h("span", { key: '4a7e0e21e44e6d9f36f4ad050fb99b43fe5c8262', class: "resource-list-item__badges" }, index.h("slot", { key: '80d6b2bc95719d9bd883deb9e6eb9e0eaf1f90d3', name: "badges" })))), index.h("span", { key: '8ea3d3cf174da140998516e2a241fb26a7b663fc', class: "resource-list-item__control", onClick: this.onControlClick }, index.h("slot", { key: '1ebba3b29eabe1088f74a4cee2f7e885e42baa26', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '8aa3c4a4c1b302110b4277a8c5ef559d6f678432', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'b5846fb6a8a4cf1780fee1daec4367b96555ea7d', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (index.h("button", { key: '21a536ed40063064857be94a386aadea683454fc', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, index.h("swirl-icon-drag-handle", { key: '98ffc339304b083d473f51bfd73e0fddbc811cca', size: this.iconSize })))));
|
|
805
805
|
}
|
|
806
806
|
get el() { return index.getElement(this); }
|
|
807
807
|
};
|
|
@@ -179,7 +179,7 @@ const SwirlFormControl = class {
|
|
|
179
179
|
"form-control--is-select": isSelect,
|
|
180
180
|
});
|
|
181
181
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
182
|
-
return (index.h(index.Host, { key: '5d0c6f34f0a5e091572badf875c331f2950d2c61', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, index.h("div", { key: '0da20c4144a3e16915f01ce479be0930881283c3', class: className, role: "group" }, index.h("span", { key: '207e74fd91682c0badd35dec00f38cc24f6fbfda', class: "form-control__controls" }, index.h("span", { key: 'c924c7af99f42e86c38967f94f2ec2ce1adda03e', class: "form-control__prefix" }, index.h("slot", { key: 'f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0', name: "prefix" })), index.h(LabelTag, { key: 'cf048cebee46418130e22a953bb36ca7611c9eb8', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (index.h("span", { key: 'e0fde25c920b12d8389f4855638c2565e546695a', class: "form-control__icon" }, index.h("swirl-icon", { key: '64d5f602368b330926d8325e3690cee440c4c180', glyph: this.icon, size: 20 }))), index.h("span", { key: 'c02bce9518e6396f928a6174d02e3c3535adefd9', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (index.h("span", { key: '72506a8b0f98719edb72150e4dbf646ea5614a3d', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (index.h("span", { key: 'd3deeecc715dd27b75b4b6b5964efc28a3d0f4ac', class: "form-control__tooltip" }, index.h("swirl-tooltip", { key: '
|
|
182
|
+
return (index.h(index.Host, { key: '5d0c6f34f0a5e091572badf875c331f2950d2c61', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, index.h("div", { key: '0da20c4144a3e16915f01ce479be0930881283c3', class: className, role: "group" }, index.h("span", { key: '207e74fd91682c0badd35dec00f38cc24f6fbfda', class: "form-control__controls" }, index.h("span", { key: 'c924c7af99f42e86c38967f94f2ec2ce1adda03e', class: "form-control__prefix" }, index.h("slot", { key: 'f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0', name: "prefix" })), index.h(LabelTag, { key: 'cf048cebee46418130e22a953bb36ca7611c9eb8', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (index.h("span", { key: 'e0fde25c920b12d8389f4855638c2565e546695a', class: "form-control__icon" }, index.h("swirl-icon", { key: '64d5f602368b330926d8325e3690cee440c4c180', glyph: this.icon, size: 20 }))), index.h("span", { key: 'c02bce9518e6396f928a6174d02e3c3535adefd9', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (index.h("span", { key: '72506a8b0f98719edb72150e4dbf646ea5614a3d', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (index.h("span", { key: 'd3deeecc715dd27b75b4b6b5964efc28a3d0f4ac', class: "form-control__tooltip" }, index.h("swirl-tooltip", { key: '83492212fd1552e2a3433aeff0939250de46ea5c', content: this.tooltip, position: "top" }, index.h("swirl-icon-help", { key: '459954ea26f99ebb82d9eeaba76fa6e0e89e6787', size: 16, tabindex: "0" }))))), index.h("span", { key: '054dd62caec198416b3850f6ca6c2d82f14d33e4', class: "form-control__input" }, index.h("slot", { key: 'e3b0565ade84b1a353f62dbbc07da4d7a9c8a53a' })))), showDescription && (index.h("span", { key: '062ba490fb15586d0cf81e1513472d6688033073', class: "form-control__description", id: this.descriptionId }, this.description)), index.h("span", { key: '8285e8e6ab09294c5097441c9c7faff859fdb40b', "aria-live": "polite" }, showErrorMessage && (index.h("span", { key: '41a803de4a5883c20225a119c4090501179c15e8', class: "form-control__error-message", id: this.descriptionId }, index.h("swirl-inline-error", { key: '1e3b7bcb8b8a098e10f3c15b4010b5cda6adaaf6', message: this.errorMessage, size: "s" })))))));
|
|
183
183
|
}
|
|
184
184
|
get el() { return index.getElement(this); }
|
|
185
185
|
static get watchers() { return {
|
|
@@ -64,9 +64,9 @@ const SwirlShellNavigationItem = class {
|
|
|
64
64
|
const tooltipContent = this.description
|
|
65
65
|
? `${this.label} ${this.description}`
|
|
66
66
|
: this.label;
|
|
67
|
-
return (index.h(index.Host, { key: 'a2007f2d997b7bdeb29eb196f968bbdc5b948b6d' }, index.h("swirl-tooltip", { key: '
|
|
67
|
+
return (index.h(index.Host, { key: 'a2007f2d997b7bdeb29eb196f968bbdc5b948b6d' }, index.h("swirl-tooltip", { key: '729d37a55b8a7f9c7661672cb90b73d7854ffc10', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, index.h(Tag, { key: 'e2d088840a8c4a8b3a33552402aa624a2a688ddd', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, index.h("span", { key: 'c9f33c37e2903fb90ef2979a39d87c1a8d879fe7', class: "shell-navigation-item__icon" }, index.h("slot", { key: 'b40f54f0514d97a30beffc73b03ff3e0e043a417', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (index.h("span", { class: labelClassNames }, this.label)) : (index.h("div", { class: "shell-navigation-item__text-wrapper" }, index.h("span", { class: labelClassNames }, this.label), this.description && (index.h("span", { class: "shell-navigation-item__description" }, this.description))))) : (index.h("swirl-visually-hidden", null, index.h("span", { class: labelClassNames }, this.label))), hasBadge && (index.h("span", { key: '141f95d2edeac2332a982b411abed936a19c7824', class: "shell-navigation-item__badge-wrapper" }, index.h("swirl-badge", { key: '94902a355838c0c836f3418a6e5e9775f01c85fc', "aria-label": this.badgeLabel, class: index$1.classnames("shell-navigation-item__badge", {
|
|
68
68
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
69
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (index.h("swirl-tag", { key: '
|
|
69
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (index.h("swirl-tag", { key: '3a2a3ce16dc592bf5affed10e619ffca368832b3', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (index.h("swirl-badge", { key: 'ca9bdc96956f9940a81e70d3d29694a1cf1ab31e', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
70
70
|
}
|
|
71
71
|
get el() { return index.getElement(this); }
|
|
72
72
|
};
|
|
@@ -41,10 +41,10 @@ const SwirlTableRowGroup = class {
|
|
|
41
41
|
const iconType = this.isVisible
|
|
42
42
|
? "<swirl-icon-expand-less></swirl-icon-expand-less"
|
|
43
43
|
: "<swirl-icon-expand-more></swirl-icon-expand-more";
|
|
44
|
-
return (index.h(index.Host, { key: '63302f976640a67716b00ab104ae9bb0c06ae59d', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: 'da7a5d5aaee41e8cee2eae0c3afb403b279841c0', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: 'bd122faa515a2e10cb59bc8aab0999abea28ee3a', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), index.h("span", { key: 'a7a03ad0af48e8bb9596fa63151cd74fe6f60f9c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: 'bb49e1ff78c8d2a7f98bc3e136c3b0a587b4c30b', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: '
|
|
44
|
+
return (index.h(index.Host, { key: '63302f976640a67716b00ab104ae9bb0c06ae59d', class: "table-row-group", role: "rowgroup" }, index.h("div", { key: 'da7a5d5aaee41e8cee2eae0c3afb403b279841c0', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (index.h("swirl-button", { key: 'bd122faa515a2e10cb59bc8aab0999abea28ee3a', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), index.h("span", { key: 'a7a03ad0af48e8bb9596fa63151cd74fe6f60f9c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (index.h("span", { key: 'bb49e1ff78c8d2a7f98bc3e136c3b0a587b4c30b', class: "table-row-group__tooltip" }, index.h("swirl-tooltip", { key: 'adb3f9f43e8b27e658c698fbf2aa1194bde88bc9', content: this.tooltip, position: "top" }, index.h("swirl-icon-info", { key: '85d4d8beafe6e21a66354f0c541715e4d134bc35', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), index.h("div", { key: 'caef73a190f953793e7bc2c136a04b7d60117286', class: {
|
|
45
45
|
"table-row-group__rows-container": true,
|
|
46
46
|
"table-row-group__rows-container--is-hidden": this.isVisible,
|
|
47
|
-
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, index.h("slot", { key: '
|
|
47
|
+
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, index.h("slot", { key: '374eca0c47041a641c8b8f020872bfa57548aa5b' }))));
|
|
48
48
|
}
|
|
49
49
|
get el() { return index.getElement(this); }
|
|
50
50
|
};
|
|
@@ -5,7 +5,7 @@ var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
|
|
|
5
5
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
6
6
|
var utils = require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:
|
|
8
|
+
const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:fixed;display:none;opacity:0;border:none;padding:0;margin:0;background:transparent;overflow:visible}.tooltip__popper::backdrop{display:none}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);text-align:start;box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--intent-info .tooltip__bubble,.tooltip--intent-info .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
|
|
9
9
|
|
|
10
10
|
const SwirlTooltip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -15,7 +15,6 @@ const SwirlTooltip = class {
|
|
|
15
15
|
this.intent = "default";
|
|
16
16
|
this.maxWidth = "17.5rem";
|
|
17
17
|
this.position = "top";
|
|
18
|
-
this.positioning = "absolute";
|
|
19
18
|
this.trigger = ["focus", "hover"];
|
|
20
19
|
this.visible = false;
|
|
21
20
|
this.onKeydown = (event) => {
|
|
@@ -80,7 +79,7 @@ const SwirlTooltip = class {
|
|
|
80
79
|
floatingUi_dom.flip(),
|
|
81
80
|
],
|
|
82
81
|
placement: this.position,
|
|
83
|
-
strategy:
|
|
82
|
+
strategy: "fixed",
|
|
84
83
|
};
|
|
85
84
|
};
|
|
86
85
|
}
|
|
@@ -113,6 +112,9 @@ const SwirlTooltip = class {
|
|
|
113
112
|
this.reposition();
|
|
114
113
|
}
|
|
115
114
|
componentDidLoad() {
|
|
115
|
+
if (this.positioning !== undefined) {
|
|
116
|
+
console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.');
|
|
117
|
+
}
|
|
116
118
|
this.updateOptions();
|
|
117
119
|
}
|
|
118
120
|
async show() {
|
|
@@ -125,6 +127,7 @@ const SwirlTooltip = class {
|
|
|
125
127
|
if (!Boolean(referenceElement)) {
|
|
126
128
|
return;
|
|
127
129
|
}
|
|
130
|
+
this.popperEl?.showPopover();
|
|
128
131
|
this.reposition();
|
|
129
132
|
this.disableAutoUpdate = floatingUi_dom.autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
130
133
|
});
|
|
@@ -135,6 +138,7 @@ const SwirlTooltip = class {
|
|
|
135
138
|
this.showTimeout = undefined;
|
|
136
139
|
}
|
|
137
140
|
this.visible = false;
|
|
141
|
+
this.popperEl?.hidePopover();
|
|
138
142
|
this.disableAutoUpdate?.();
|
|
139
143
|
}
|
|
140
144
|
render() {
|
|
@@ -142,16 +146,15 @@ const SwirlTooltip = class {
|
|
|
142
146
|
"tooltip--active": this.active,
|
|
143
147
|
"tooltip--visible": this.visible,
|
|
144
148
|
});
|
|
145
|
-
return (index.h(index.Host, { key: '
|
|
149
|
+
return (index.h(index.Host, { key: '48ab3278a67c7d1d262b217e02592c5cd9cf69f1', onKeydown: this.onKeydown }, index.h("span", { key: '3eab41bc1f7fd5d1ae140789b2d5bd1104f81340', class: className }, index.h("span", { key: 'e19d18cacb63cbe946ee52ce11f387e28aaeb3c2', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, index.h("slot", { key: '0579888c5ee02a3efe15d22277006aa896554940' })), index.h("span", { key: 'b816e2464f8c8353bbee9597ce4e1b9f6babe07d', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
|
|
146
150
|
top: Boolean(this.actualPosition)
|
|
147
151
|
? `${this.actualPosition?.y}px`
|
|
148
152
|
: "",
|
|
149
153
|
left: Boolean(this.actualPosition)
|
|
150
154
|
? `${this.actualPosition?.x}px`
|
|
151
155
|
: "",
|
|
152
|
-
position: this.positioning,
|
|
153
156
|
maxWidth: this.maxWidth,
|
|
154
|
-
} }, this.visible && (index.h("span", { key: '
|
|
157
|
+
} }, this.visible && (index.h("span", { key: '50a16fd107c4580da7183cd36916790945aacc82', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '0d71bca889cb4bd8169e7cc890ffaa4d7e71b68e', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: 'dcae7a9101b96ca1d6258eb285e6b309d3e4b989', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
155
158
|
...this.arrowStyles,
|
|
156
159
|
visibility: this.visible ? "visible" : "hidden",
|
|
157
160
|
} })))));
|
|
@@ -177,7 +177,7 @@ export class SwirlFormControl {
|
|
|
177
177
|
"form-control--is-select": isSelect,
|
|
178
178
|
});
|
|
179
179
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
180
|
-
return (h(Host, { key: '5d0c6f34f0a5e091572badf875c331f2950d2c61', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '0da20c4144a3e16915f01ce479be0930881283c3', class: className, role: "group" }, h("span", { key: '207e74fd91682c0badd35dec00f38cc24f6fbfda', class: "form-control__controls" }, h("span", { key: 'c924c7af99f42e86c38967f94f2ec2ce1adda03e', class: "form-control__prefix" }, h("slot", { key: 'f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0', name: "prefix" })), h(LabelTag, { key: 'cf048cebee46418130e22a953bb36ca7611c9eb8', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: 'e0fde25c920b12d8389f4855638c2565e546695a', class: "form-control__icon" }, h("swirl-icon", { key: '64d5f602368b330926d8325e3690cee440c4c180', glyph: this.icon, size: 20 }))), h("span", { key: 'c02bce9518e6396f928a6174d02e3c3535adefd9', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '72506a8b0f98719edb72150e4dbf646ea5614a3d', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'd3deeecc715dd27b75b4b6b5964efc28a3d0f4ac', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '
|
|
180
|
+
return (h(Host, { key: '5d0c6f34f0a5e091572badf875c331f2950d2c61', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '0da20c4144a3e16915f01ce479be0930881283c3', class: className, role: "group" }, h("span", { key: '207e74fd91682c0badd35dec00f38cc24f6fbfda', class: "form-control__controls" }, h("span", { key: 'c924c7af99f42e86c38967f94f2ec2ce1adda03e', class: "form-control__prefix" }, h("slot", { key: 'f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0', name: "prefix" })), h(LabelTag, { key: 'cf048cebee46418130e22a953bb36ca7611c9eb8', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: 'e0fde25c920b12d8389f4855638c2565e546695a', class: "form-control__icon" }, h("swirl-icon", { key: '64d5f602368b330926d8325e3690cee440c4c180', glyph: this.icon, size: 20 }))), h("span", { key: 'c02bce9518e6396f928a6174d02e3c3535adefd9', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '72506a8b0f98719edb72150e4dbf646ea5614a3d', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'd3deeecc715dd27b75b4b6b5964efc28a3d0f4ac', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '83492212fd1552e2a3433aeff0939250de46ea5c', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '459954ea26f99ebb82d9eeaba76fa6e0e89e6787', size: 16, tabindex: "0" }))))), h("span", { key: '054dd62caec198416b3850f6ca6c2d82f14d33e4', class: "form-control__input" }, h("slot", { key: 'e3b0565ade84b1a353f62dbbc07da4d7a9c8a53a' })))), showDescription && (h("span", { key: '062ba490fb15586d0cf81e1513472d6688033073', class: "form-control__description", id: this.descriptionId }, this.description)), h("span", { key: '8285e8e6ab09294c5097441c9c7faff859fdb40b', "aria-live": "polite" }, showErrorMessage && (h("span", { key: '41a803de4a5883c20225a119c4090501179c15e8', class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '1e3b7bcb8b8a098e10f3c15b4010b5cda6adaaf6', message: this.errorMessage, size: "s" })))))));
|
|
181
181
|
}
|
|
182
182
|
static get is() { return "swirl-form-control"; }
|
|
183
183
|
static get encapsulation() { return "scoped"; }
|
|
@@ -150,7 +150,7 @@ export class SwirlResourceListItem {
|
|
|
150
150
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
151
151
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
152
152
|
});
|
|
153
|
-
return (h(Host, { key: '6ff7583e30388db1c3b5335706fa90fcfab70f4b', role: hostRole }, h("div", { key: '76eb19d083fe8caee52b09c543532ba96e5937ad', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '628892cb9e15365d68e6945c7d1153b993778484', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'f97aef8ba23556c0f796d2459818a314b73409b2', class: "resource-list-item__media" }, h("slot", { key: '26f0a4ce1978032a6234a145f896204cda19d13f', name: "media" }))), h("span", { key: 'd6e58c39f9d4157b6b6644180e65c6c829417184', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition
|
|
153
|
+
return (h(Host, { key: '6ff7583e30388db1c3b5335706fa90fcfab70f4b', role: hostRole }, h("div", { key: '76eb19d083fe8caee52b09c543532ba96e5937ad', class: className, role: containerRole, onClick: this.onClick }, h(Tag, { key: '628892cb9e15365d68e6945c7d1153b993778484', "aria-checked": ariaChecked, "aria-current": this.swirlAriaCurrent, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", style: { alignItems: this.alignItems }, href: href, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'f97aef8ba23556c0f796d2459818a314b73409b2', class: "resource-list-item__media" }, h("slot", { key: '26f0a4ce1978032a6234a145f896204cda19d13f', name: "media" }))), h("span", { key: 'd6e58c39f9d4157b6b6644180e65c6c829417184', class: "resource-list-item__label-container", style: labelContainerStyles }, this.labelTooltip ? (h("swirl-tooltip", { content: this.labelTooltip, position: this.labelTooltipPosition }, renderLabel())) : (renderLabel()), this.description && (h("span", { key: '649731c17b4f3fd6145c2520532da0df0ade5a5b', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description)))), this.selectable && (h("span", { key: 'ec168ff79ad2a16a2e7e647e282eca27d0e5f5c4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'efc8c2347c715047e9fc37deccbfe004e30ece9d', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'cf32f9cb9c1aa3f8673c85ce1fe5ca91be87554e' }))))), showMeta && (h("span", { key: '6242181c13f3ff8179ddf427a97e5d073eb0f03c', class: "resource-list-item__meta" }, this.meta && (h("span", { key: 'b96ad60720e71557167207c225f10c003aae7fb1', class: "resource-list-item__meta-text" }, this.meta)), h("span", { key: '4a7e0e21e44e6d9f36f4ad050fb99b43fe5c8262', class: "resource-list-item__badges" }, h("slot", { key: '80d6b2bc95719d9bd883deb9e6eb9e0eaf1f90d3', name: "badges" })))), h("span", { key: '8ea3d3cf174da140998516e2a241fb26a7b663fc', class: "resource-list-item__control", onClick: this.onControlClick }, h("slot", { key: '1ebba3b29eabe1088f74a4cee2f7e885e42baa26', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '8aa3c4a4c1b302110b4277a8c5ef559d6f678432', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: 'b5846fb6a8a4cf1780fee1daec4367b96555ea7d', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '21a536ed40063064857be94a386aadea683454fc', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '98ffc339304b083d473f51bfd73e0fddbc811cca', size: this.iconSize })))));
|
|
154
154
|
}
|
|
155
155
|
static get is() { return "swirl-resource-list-item"; }
|
|
156
156
|
static get encapsulation() { return "scoped"; }
|
package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js
CHANGED
|
@@ -61,9 +61,9 @@ export class SwirlShellNavigationItem {
|
|
|
61
61
|
const tooltipContent = this.description
|
|
62
62
|
? `${this.label} ${this.description}`
|
|
63
63
|
: this.label;
|
|
64
|
-
return (h(Host, { key: 'a2007f2d997b7bdeb29eb196f968bbdc5b948b6d' }, h("swirl-tooltip", { key: '
|
|
64
|
+
return (h(Host, { key: 'a2007f2d997b7bdeb29eb196f968bbdc5b948b6d' }, h("swirl-tooltip", { key: '729d37a55b8a7f9c7661672cb90b73d7854ffc10', active: this.hideLabel, content: tooltipContent, delay: 100, position: "right" }, h(Tag, { key: 'e2d088840a8c4a8b3a33552402aa624a2a688ddd', "aria-current": this.swirlAriaCurrent, class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button", title: !this.hideLabel ? this.label : undefined }, h("span", { key: 'c9f33c37e2903fb90ef2979a39d87c1a8d879fe7', class: "shell-navigation-item__icon" }, h("slot", { key: 'b40f54f0514d97a30beffc73b03ff3e0e043a417', name: "icon" })), !this.hideLabel ? (this.variant !== "default" ? (h("span", { class: labelClassNames }, this.label)) : (h("div", { class: "shell-navigation-item__text-wrapper" }, h("span", { class: labelClassNames }, this.label), this.description && (h("span", { class: "shell-navigation-item__description" }, this.description))))) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), hasBadge && (h("span", { key: '141f95d2edeac2332a982b411abed936a19c7824', class: "shell-navigation-item__badge-wrapper" }, h("swirl-badge", { key: '94902a355838c0c836f3418a6e5e9775f01c85fc', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
|
|
65
65
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
66
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '
|
|
66
|
+
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '3a2a3ce16dc592bf5affed10e619ffca368832b3', class: "shell-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "s", variant: "strong" })), showIsNewBadge && (h("swirl-badge", { key: 'ca9bdc96956f9940a81e70d3d29694a1cf1ab31e', class: "shell-navigation-item__is-new-badge", intent: "info", label: this.markAsNewLabel.toLocaleUpperCase(), size: "xs", variant: "dot" }))))));
|
|
67
67
|
}
|
|
68
68
|
static get is() { return "swirl-shell-navigation-item"; }
|
|
69
69
|
static get encapsulation() { return "shadow"; }
|
|
@@ -38,10 +38,10 @@ export class SwirlTableRowGroup {
|
|
|
38
38
|
const iconType = this.isVisible
|
|
39
39
|
? "<swirl-icon-expand-less></swirl-icon-expand-less"
|
|
40
40
|
: "<swirl-icon-expand-more></swirl-icon-expand-more";
|
|
41
|
-
return (h(Host, { key: '63302f976640a67716b00ab104ae9bb0c06ae59d', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'da7a5d5aaee41e8cee2eae0c3afb403b279841c0', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'bd122faa515a2e10cb59bc8aab0999abea28ee3a', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'a7a03ad0af48e8bb9596fa63151cd74fe6f60f9c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'bb49e1ff78c8d2a7f98bc3e136c3b0a587b4c30b', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '
|
|
41
|
+
return (h(Host, { key: '63302f976640a67716b00ab104ae9bb0c06ae59d', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'da7a5d5aaee41e8cee2eae0c3afb403b279841c0', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'bd122faa515a2e10cb59bc8aab0999abea28ee3a', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'a7a03ad0af48e8bb9596fa63151cd74fe6f60f9c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'bb49e1ff78c8d2a7f98bc3e136c3b0a587b4c30b', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'adb3f9f43e8b27e658c698fbf2aa1194bde88bc9', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: '85d4d8beafe6e21a66354f0c541715e4d134bc35', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'caef73a190f953793e7bc2c136a04b7d60117286', class: {
|
|
42
42
|
"table-row-group__rows-container": true,
|
|
43
43
|
"table-row-group__rows-container--is-hidden": this.isVisible,
|
|
44
|
-
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '
|
|
44
|
+
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '374eca0c47041a641c8b8f020872bfa57548aa5b' }))));
|
|
45
45
|
}
|
|
46
46
|
static get is() { return "swirl-table-row-group"; }
|
|
47
47
|
static get encapsulation() { return "shadow"; }
|
|
@@ -47,10 +47,18 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.tooltip__popper {
|
|
50
|
-
position:
|
|
51
|
-
z-index: var(--s-z-40);
|
|
50
|
+
position: fixed;
|
|
52
51
|
display: none;
|
|
53
52
|
opacity: 0;
|
|
53
|
+
border: none;
|
|
54
|
+
padding: 0;
|
|
55
|
+
margin: 0;
|
|
56
|
+
background: transparent;
|
|
57
|
+
overflow: visible;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.tooltip__popper::backdrop {
|
|
61
|
+
display: none;
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
.tooltip__bubble {
|
|
@@ -9,7 +9,6 @@ export class SwirlTooltip {
|
|
|
9
9
|
this.intent = "default";
|
|
10
10
|
this.maxWidth = "17.5rem";
|
|
11
11
|
this.position = "top";
|
|
12
|
-
this.positioning = "absolute";
|
|
13
12
|
this.trigger = ["focus", "hover"];
|
|
14
13
|
this.visible = false;
|
|
15
14
|
this.onKeydown = (event) => {
|
|
@@ -74,7 +73,7 @@ export class SwirlTooltip {
|
|
|
74
73
|
flip(),
|
|
75
74
|
],
|
|
76
75
|
placement: this.position,
|
|
77
|
-
strategy:
|
|
76
|
+
strategy: "fixed",
|
|
78
77
|
};
|
|
79
78
|
};
|
|
80
79
|
}
|
|
@@ -107,6 +106,9 @@ export class SwirlTooltip {
|
|
|
107
106
|
this.reposition();
|
|
108
107
|
}
|
|
109
108
|
componentDidLoad() {
|
|
109
|
+
if (this.positioning !== undefined) {
|
|
110
|
+
console.warn('[Swirl] The "positioning" prop of swirl-tooltip is deprecated and will be removed with the next major release. "fixed" is now the default positioning strategy.');
|
|
111
|
+
}
|
|
110
112
|
this.updateOptions();
|
|
111
113
|
}
|
|
112
114
|
async show() {
|
|
@@ -119,6 +121,7 @@ export class SwirlTooltip {
|
|
|
119
121
|
if (!Boolean(referenceElement)) {
|
|
120
122
|
return;
|
|
121
123
|
}
|
|
124
|
+
this.popperEl?.showPopover();
|
|
122
125
|
this.reposition();
|
|
123
126
|
this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
124
127
|
});
|
|
@@ -129,6 +132,7 @@ export class SwirlTooltip {
|
|
|
129
132
|
this.showTimeout = undefined;
|
|
130
133
|
}
|
|
131
134
|
this.visible = false;
|
|
135
|
+
this.popperEl?.hidePopover();
|
|
132
136
|
this.disableAutoUpdate?.();
|
|
133
137
|
}
|
|
134
138
|
render() {
|
|
@@ -136,16 +140,15 @@ export class SwirlTooltip {
|
|
|
136
140
|
"tooltip--active": this.active,
|
|
137
141
|
"tooltip--visible": this.visible,
|
|
138
142
|
});
|
|
139
|
-
return (h(Host, { key: '
|
|
143
|
+
return (h(Host, { key: '48ab3278a67c7d1d262b217e02592c5cd9cf69f1', onKeydown: this.onKeydown }, h("span", { key: '3eab41bc1f7fd5d1ae140789b2d5bd1104f81340', class: className }, h("span", { key: 'e19d18cacb63cbe946ee52ce11f387e28aaeb3c2', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '0579888c5ee02a3efe15d22277006aa896554940' })), h("span", { key: 'b816e2464f8c8353bbee9597ce4e1b9f6babe07d', class: "tooltip__popper", popover: "manual", ref: (el) => (this.popperEl = el), style: {
|
|
140
144
|
top: Boolean(this.actualPosition)
|
|
141
145
|
? `${this.actualPosition?.y}px`
|
|
142
146
|
: "",
|
|
143
147
|
left: Boolean(this.actualPosition)
|
|
144
148
|
? `${this.actualPosition?.x}px`
|
|
145
149
|
: "",
|
|
146
|
-
position: this.positioning,
|
|
147
150
|
maxWidth: this.maxWidth,
|
|
148
|
-
} }, this.visible && (h("span", { key: '
|
|
151
|
+
} }, this.visible && (h("span", { key: '50a16fd107c4580da7183cd36916790945aacc82', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '0d71bca889cb4bd8169e7cc890ffaa4d7e71b68e', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'dcae7a9101b96ca1d6258eb285e6b309d3e4b989', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
|
|
149
152
|
...this.arrowStyles,
|
|
150
153
|
visibility: this.visible ? "visible" : "hidden",
|
|
151
154
|
} })))));
|
|
@@ -318,8 +321,7 @@ export class SwirlTooltip {
|
|
|
318
321
|
},
|
|
319
322
|
"getter": false,
|
|
320
323
|
"setter": false,
|
|
321
|
-
"reflect": false
|
|
322
|
-
"defaultValue": "\"absolute\""
|
|
324
|
+
"reflect": false
|
|
323
325
|
},
|
|
324
326
|
"trigger": {
|
|
325
327
|
"type": "unknown",
|