@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
|
@@ -183,7 +183,7 @@ const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormContr
|
|
|
183
183
|
"form-control--is-select": isSelect,
|
|
184
184
|
});
|
|
185
185
|
const LabelTag = hasContenteditableControl ? "div" : "label";
|
|
186
|
-
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: '
|
|
186
|
+
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" })))))));
|
|
187
187
|
}
|
|
188
188
|
get el() { return this; }
|
|
189
189
|
static get watchers() { return {
|
|
@@ -157,7 +157,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
157
157
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
158
158
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
159
159
|
});
|
|
160
|
-
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
|
|
160
|
+
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 })))));
|
|
161
161
|
}
|
|
162
162
|
get el() { return this; }
|
|
163
163
|
static get style() { return swirlResourceListItemCss; }
|
|
@@ -69,9 +69,9 @@ const SwirlShellNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlS
|
|
|
69
69
|
const tooltipContent = this.description
|
|
70
70
|
? `${this.label} ${this.description}`
|
|
71
71
|
: this.label;
|
|
72
|
-
return (h(Host, { key: 'a2007f2d997b7bdeb29eb196f968bbdc5b948b6d' }, h("swirl-tooltip", { key: '
|
|
72
|
+
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", {
|
|
73
73
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
74
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '
|
|
74
|
+
}), 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" }))))));
|
|
75
75
|
}
|
|
76
76
|
get el() { return this; }
|
|
77
77
|
static get style() { return swirlShellNavigationItemCss; }
|
|
@@ -44,10 +44,10 @@ const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRo
|
|
|
44
44
|
const iconType = this.isVisible
|
|
45
45
|
? "<swirl-icon-expand-less></swirl-icon-expand-less"
|
|
46
46
|
: "<swirl-icon-expand-more></swirl-icon-expand-more";
|
|
47
|
-
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: '
|
|
47
|
+
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: {
|
|
48
48
|
"table-row-group__rows-container": true,
|
|
49
49
|
"table-row-group__rows-container--is-hidden": this.isVisible,
|
|
50
|
-
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '
|
|
50
|
+
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '374eca0c47041a641c8b8f020872bfa57548aa5b' }))));
|
|
51
51
|
}
|
|
52
52
|
get el() { return this; }
|
|
53
53
|
static get style() { return swirlTableRowGroupCss; }
|
|
@@ -3,7 +3,7 @@ import { b as arrow, c as computePosition, o as offset, s as shift, f as flip, a
|
|
|
3
3
|
import { c as classNames } from './index2.js';
|
|
4
4
|
import { t as getPixelsFromRemToken } from './utils.js';
|
|
5
5
|
|
|
6
|
-
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:
|
|
6
|
+
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}}";
|
|
7
7
|
|
|
8
8
|
const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
@@ -15,7 +15,6 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
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 = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
80
79
|
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 = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
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 = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
125
127
|
if (!Boolean(referenceElement)) {
|
|
126
128
|
return;
|
|
127
129
|
}
|
|
130
|
+
this.popperEl?.showPopover();
|
|
128
131
|
this.reposition();
|
|
129
132
|
this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
130
133
|
});
|
|
@@ -135,6 +138,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
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 = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
|
|
|
142
146
|
"tooltip--active": this.active,
|
|
143
147
|
"tooltip--visible": this.visible,
|
|
144
148
|
});
|
|
145
|
-
return (h(Host, { key: '
|
|
149
|
+
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: {
|
|
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 && (h("span", { key: '
|
|
157
|
+
} }, 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: {
|
|
155
158
|
...this.arrowStyles,
|
|
156
159
|
visibility: this.visible ? "visible" : "hidden",
|
|
157
160
|
} })))));
|
|
@@ -799,7 +799,7 @@ const SwirlResourceListItem = class {
|
|
|
799
799
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
800
800
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
801
801
|
});
|
|
802
|
-
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
|
|
802
|
+
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 })))));
|
|
803
803
|
}
|
|
804
804
|
get el() { return getElement(this); }
|
|
805
805
|
};
|
|
@@ -177,7 +177,7 @@ const SwirlFormControl = class {
|
|
|
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
|
get el() { return getElement(this); }
|
|
183
183
|
static get watchers() { return {
|
|
@@ -62,9 +62,9 @@ const SwirlShellNavigationItem = class {
|
|
|
62
62
|
const tooltipContent = this.description
|
|
63
63
|
? `${this.label} ${this.description}`
|
|
64
64
|
: this.label;
|
|
65
|
-
return (h(Host, { key: 'a2007f2d997b7bdeb29eb196f968bbdc5b948b6d' }, h("swirl-tooltip", { key: '
|
|
65
|
+
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", {
|
|
66
66
|
"shell-navigation-item__badge--dot": this.badgeLabel === "",
|
|
67
|
-
}), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))), showIsNewTag && (h("swirl-tag", { key: '
|
|
67
|
+
}), 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" }))))));
|
|
68
68
|
}
|
|
69
69
|
get el() { return getElement(this); }
|
|
70
70
|
};
|
|
@@ -39,10 +39,10 @@ const SwirlTableRowGroup = class {
|
|
|
39
39
|
const iconType = this.isVisible
|
|
40
40
|
? "<swirl-icon-expand-less></swirl-icon-expand-less"
|
|
41
41
|
: "<swirl-icon-expand-more></swirl-icon-expand-more";
|
|
42
|
-
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: '
|
|
42
|
+
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: {
|
|
43
43
|
"table-row-group__rows-container": true,
|
|
44
44
|
"table-row-group__rows-container--is-hidden": this.isVisible,
|
|
45
|
-
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '
|
|
45
|
+
}, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '374eca0c47041a641c8b8f020872bfa57548aa5b' }))));
|
|
46
46
|
}
|
|
47
47
|
get el() { return getElement(this); }
|
|
48
48
|
};
|
|
@@ -3,7 +3,7 @@ import { b as arrow, c as computePosition, o as offset, s as shift, f as flip, a
|
|
|
3
3
|
import { c as classnames } from './index-orsBiyT_.js';
|
|
4
4
|
import { n as getPixelsFromRemToken } from './utils-Dn2SWlGn.js';
|
|
5
5
|
|
|
6
|
-
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:
|
|
6
|
+
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}}";
|
|
7
7
|
|
|
8
8
|
const SwirlTooltip = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -13,7 +13,6 @@ const SwirlTooltip = class {
|
|
|
13
13
|
this.intent = "default";
|
|
14
14
|
this.maxWidth = "17.5rem";
|
|
15
15
|
this.position = "top";
|
|
16
|
-
this.positioning = "absolute";
|
|
17
16
|
this.trigger = ["focus", "hover"];
|
|
18
17
|
this.visible = false;
|
|
19
18
|
this.onKeydown = (event) => {
|
|
@@ -78,7 +77,7 @@ const SwirlTooltip = class {
|
|
|
78
77
|
flip(),
|
|
79
78
|
],
|
|
80
79
|
placement: this.position,
|
|
81
|
-
strategy:
|
|
80
|
+
strategy: "fixed",
|
|
82
81
|
};
|
|
83
82
|
};
|
|
84
83
|
}
|
|
@@ -111,6 +110,9 @@ const SwirlTooltip = class {
|
|
|
111
110
|
this.reposition();
|
|
112
111
|
}
|
|
113
112
|
componentDidLoad() {
|
|
113
|
+
if (this.positioning !== undefined) {
|
|
114
|
+
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.');
|
|
115
|
+
}
|
|
114
116
|
this.updateOptions();
|
|
115
117
|
}
|
|
116
118
|
async show() {
|
|
@@ -123,6 +125,7 @@ const SwirlTooltip = class {
|
|
|
123
125
|
if (!Boolean(referenceElement)) {
|
|
124
126
|
return;
|
|
125
127
|
}
|
|
128
|
+
this.popperEl?.showPopover();
|
|
126
129
|
this.reposition();
|
|
127
130
|
this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
|
|
128
131
|
});
|
|
@@ -133,6 +136,7 @@ const SwirlTooltip = class {
|
|
|
133
136
|
this.showTimeout = undefined;
|
|
134
137
|
}
|
|
135
138
|
this.visible = false;
|
|
139
|
+
this.popperEl?.hidePopover();
|
|
136
140
|
this.disableAutoUpdate?.();
|
|
137
141
|
}
|
|
138
142
|
render() {
|
|
@@ -140,16 +144,15 @@ const SwirlTooltip = class {
|
|
|
140
144
|
"tooltip--active": this.active,
|
|
141
145
|
"tooltip--visible": this.visible,
|
|
142
146
|
});
|
|
143
|
-
return (h(Host, { key: '
|
|
147
|
+
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: {
|
|
144
148
|
top: Boolean(this.actualPosition)
|
|
145
149
|
? `${this.actualPosition?.y}px`
|
|
146
150
|
: "",
|
|
147
151
|
left: Boolean(this.actualPosition)
|
|
148
152
|
? `${this.actualPosition?.x}px`
|
|
149
153
|
: "",
|
|
150
|
-
position: this.positioning,
|
|
151
154
|
maxWidth: this.maxWidth,
|
|
152
|
-
} }, this.visible && (h("span", { key: '
|
|
155
|
+
} }, 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: {
|
|
153
156
|
...this.arrowStyles,
|
|
154
157
|
visibility: this.visible ? "visible" : "hidden",
|
|
155
158
|
} })))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,h as o,H as i,d as e}from"./p-Dj_4Fda9.js";import{b as s,c as a,o as r,s as n,f as l,a as p}from"./p-CLsTbQHn.js";import{c as h}from"./p-orsBiyT_.js";import{n as c}from"./p-Dn2SWlGn.js";const d=class{constructor(o){t(this,o),this.active=!0,this.delay=200,this.intent="default",this.maxWidth="17.5rem",this.position="top",this.trigger=["focus","hover"],this.visible=!1,this.onKeydown=t=>{"Escape"===t.code&&this.hide()},this.onFocusIn=()=>{this.trigger.includes("focus")&&this.show()},this.onFocusOut=()=>{this.trigger.includes("focus")&&this.hide()},this.reposition=async()=>{const t=this.el.children[0];if(!Boolean(t)||!Boolean(this.popperEl))return;const o=[...this.options.middleware.filter((t=>t&&"arrow"!==t.name)),s({element:this.arrowElement,padding:12})];this.actualPosition=await a(t,this.popperEl,{...this.options,middleware:o});const i=this.actualPosition.middlewareData.arrow?.x,e=this.actualPosition.middlewareData.arrow?.y;this.arrowStyles={left:Boolean(i)?i+"px":void 0,top:Boolean(e)?e+"px":void 0}},this.showWithDelay=()=>{this.active&&(Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.showTimeout=setTimeout((()=>{this.show()}),this.delay))},this.updateOptions=()=>{const t=c("--s-space-12"),o=c("--s-space-8"),i=c("--s-space-16");this.options={middleware:[r(t),n({padding:{top:o,bottom:o,left:i,right:i}}),l()],placement:this.position,strategy:"fixed"}}}watchPosition(){this.updateOptions()}onMouseEnter(){this.trigger.includes("hover")&&this.showWithDelay()}onMouseLeave(){this.trigger.includes("hover")&&this.hide()}onWindowResize(){this.active&&this.reposition()}onWindowScroll(){this.active&&this.visible&&this.reposition()}componentWillLoad(){this.reposition()}componentDidLoad(){void 0!==this.positioning&&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.'),this.updateOptions()}async show(){this.active&&(this.visible=!0,requestAnimationFrame((()=>{const t=this.el.children[0];Boolean(t)&&(this.popperEl?.showPopover(),this.reposition(),this.disableAutoUpdate=p(t,this.popperEl,this.reposition.bind(this)))})))}async hide(){Boolean(this.showTimeout)&&(clearTimeout(this.showTimeout),this.showTimeout=void 0),this.visible=!1,this.popperEl?.hidePopover(),this.disableAutoUpdate?.()}render(){const t=h("tooltip",`tooltip--actual-placement-${this.actualPosition?.placement}`,`tooltip--intent-${this.intent}`,{"tooltip--active":this.active,"tooltip--visible":this.visible});return o(i,{key:"48ab3278a67c7d1d262b217e02592c5cd9cf69f1",onKeydown:this.onKeydown},o("span",{key:"3eab41bc1f7fd5d1ae140789b2d5bd1104f81340",class:t},o("span",{key:"e19d18cacb63cbe946ee52ce11f387e28aaeb3c2",class:"tooltip__reference","aria-describedby":"tooltip",onFocusout:this.onFocusOut,onClick:this.hide,onFocusin:this.onFocusIn},o("slot",{key:"0579888c5ee02a3efe15d22277006aa896554940"})),o("span",{key:"b816e2464f8c8353bbee9597ce4e1b9f6babe07d",class:"tooltip__popper",popover:"manual",ref:t=>this.popperEl=t,style:{top:Boolean(this.actualPosition)?`${this.actualPosition?.y}px`:"",left:Boolean(this.actualPosition)?`${this.actualPosition?.x}px`:"",maxWidth:this.maxWidth}},this.visible&&o("span",{key:"50a16fd107c4580da7183cd36916790945aacc82",class:"tooltip__bubble",id:"tooltip",part:"tooltip__bubble",role:"tooltip"},o("span",{key:"0d71bca889cb4bd8169e7cc890ffaa4d7e71b68e",class:"tooltip__content",innerHTML:this.content})),o("span",{key:"dcae7a9101b96ca1d6258eb285e6b309d3e4b989",class:"tooltip__arrow",ref:t=>this.arrowElement=t,style:{...this.arrowStyles,visibility:this.visible?"visible":"hidden"}}))))}get el(){return e(this)}static get watchers(){return{position:["watchPosition"]}}};d.style=":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}}";export{d as swirl_tooltip}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,h as r,H as t,d as l}from"./p-Dj_4Fda9.js";import{c as s}from"./p-orsBiyT_.js";import{j as e,k as n}from"./p-Dn2SWlGn.js";const i=class{constructor(r){o(this,r),this.fontSize="default",this.labelPosition="inside",this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.labelId=`form-control-label-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{this.inputValue=this.inputEl?.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus=!1},this.onKeyDown=o=>{"Tab"===o.key&&setTimeout((()=>{e(n(),this.el)||(this.hasFocus=!1)}))},this.onLabelClick=()=>{Boolean(this.inputEl.getAttribute("contenteditable"))&&this.inputEl.focus()}}componentWillLoad(){this.inputEl=this.el.firstElementChild,this.associateDescriptionWithInputElement(),this.associateLabelWithInputElement(),this.setInputElementDisabledState(),this.setInputElementReadonlyState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}componentDidRender(){this.checkInputValue()}watchDescription(){this.associateDescriptionWithInputElement()}watchErrorMessage(){this.associateDescriptionWithInputElement()}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementReadonlyState(){Boolean(this.inputEl)&&(this.readonly?this.inputEl.setAttribute("readonly","true"):this.inputEl.removeAttribute("readonly"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline||"outside"===this.labelPosition?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){if(!Boolean(this.inputEl))return;let o=this.label;this.secondaryLabel&&(o+=` ${this.secondaryLabel}`),this.inputEl.setAttribute("label",o)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(o.stopPropagation(),this.hasFocus=!1))}associateLabelWithInputElement(){Boolean(this.inputEl.getAttribute("contenteditable"))&&(this.inputEl.setAttribute("aria-labelledby",this.labelId),this.inputEl.setAttribute("aria-describedby",this.descriptionId))}associateDescriptionWithInputElement(){Boolean(this.inputEl)&&(Boolean(this.description)||Boolean(this.errorMessage)?Boolean(this.inputEl.getAttribute("contenteditable"))?this.inputEl.setAttribute("aria-describedby",this.descriptionId):this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId):(this.inputEl.removeAttribute("aria-describedby"),this.inputEl.removeAttribute("swirl-aria-describedby")))}render(){const o=Boolean(this.errorMessage),l=Boolean(this.description)&&!o,e=Boolean(this.inputEl.getAttribute("contenteditable")),n=Boolean(this.el.querySelector('[slot="prefix"]')),i=Boolean(this.icon),c=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue)||e&&Boolean(this.inputEl.innerHTML),a=Boolean(this.inputEl.getAttribute("show-character-counter")),f=Boolean(this.inputEl.getAttribute("placeholder"))||Boolean(this.inputEl.placeholder),m=s("form-control",`form-control--font-size-${this.fontSize}`,`form-control--label-position-${this.labelPosition}`,{"form-control--disabled":this.disabled,"form-control--readonly":this.readonly,"form-control--has-character-counter":a,"form-control--has-focus":this.hasFocus,"form-control--has-placeholder":f,"form-control--has-prefix":n,"form-control--has-icon":i,"form-control--has-value":c,"form-control--hide-label":this.hideLabel,"form-control--inline":this.inline,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName}),d=e?"div":"label";return r(t,{key:"5d0c6f34f0a5e091572badf875c331f2950d2c61",onFocusin:this.onFocusIn,onFocusout:this.onFocusOut,onKeyDown:this.onKeyDown},r("div",{key:"0da20c4144a3e16915f01ce479be0930881283c3",class:m,role:"group"},r("span",{key:"207e74fd91682c0badd35dec00f38cc24f6fbfda",class:"form-control__controls"},r("span",{key:"c924c7af99f42e86c38967f94f2ec2ce1adda03e",class:"form-control__prefix"},r("slot",{key:"f9e1846ac14c9f5abbc1d81ec54883a6f111dcf0",name:"prefix"})),r(d,{key:"cf048cebee46418130e22a953bb36ca7611c9eb8",class:"form-control__label",onClick:this.onLabelClick},i&&r("span",{key:"e0fde25c920b12d8389f4855638c2565e546695a",class:"form-control__icon"},r("swirl-icon",{key:"64d5f602368b330926d8325e3690cee440c4c180",glyph:this.icon,size:20})),r("span",{key:"c02bce9518e6396f928a6174d02e3c3535adefd9",class:"form-control__label-text",id:this.labelId},this.label,this.secondaryLabel&&"outside"===this.labelPosition&&r("span",{key:"72506a8b0f98719edb72150e4dbf646ea5614a3d",class:"form-control__secondary-label"},this.secondaryLabel),this.tooltip&&r("span",{key:"d3deeecc715dd27b75b4b6b5964efc28a3d0f4ac",class:"form-control__tooltip"},r("swirl-tooltip",{key:"83492212fd1552e2a3433aeff0939250de46ea5c",content:this.tooltip,position:"top"},r("swirl-icon-help",{key:"459954ea26f99ebb82d9eeaba76fa6e0e89e6787",size:16,tabindex:"0"})))),r("span",{key:"054dd62caec198416b3850f6ca6c2d82f14d33e4",class:"form-control__input"},r("slot",{key:"e3b0565ade84b1a353f62dbbc07da4d7a9c8a53a"})))),l&&r("span",{key:"062ba490fb15586d0cf81e1513472d6688033073",class:"form-control__description",id:this.descriptionId},this.description),r("span",{key:"8285e8e6ab09294c5097441c9c7faff859fdb40b","aria-live":"polite"},o&&r("span",{key:"41a803de4a5883c20225a119c4090501179c15e8",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{key:"1e3b7bcb8b8a098e10f3c15b4010b5cda6adaaf6",message:this.errorMessage,size:"s"})))))}get el(){return l(this)}static get watchers(){return{description:["watchDescription"],errorMessage:["watchErrorMessage"],disabled:["setInputElementDisabledState"],readonly:["setInputElementReadonlyState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};i.style='.sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder):not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control--font-size-sm.sc-swirl-form-control .form-control__description.sc-swirl-form-control{font-size:var(--s-font-size-sm)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder).form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select:not(.form-control--label-position-outside) .form-control__label-text.sc-swirl-form-control{position:absolute;top:0;bottom:0;display:flex;align-items:center;height:auto;pointer-events:auto}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select.form-control--font-size-base .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.form-control--font-size-base.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control{display:flex;align-items:center}}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:none;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control{display:flex;position:relative;padding:var(--s-space-4);z-index:10}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control:hover{cursor:default}.form-control__label-text.sc-swirl-form-control .form-control__tooltip.sc-swirl-form-control swirl-tooltip.sc-swirl-form-control::after{content:"";position:absolute;inset:calc(-1 * var(--s-space-4))}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control,.form-control--readonly.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-default);background-color:var(--s-surface-raised-default)}.form-control--disabled.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control,.form-control--readonly.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-default)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2);background-color:var(--swirl-form-control-label-background-color)}.form-control__secondary-label.sc-swirl-form-control{font-weight:var(--s-font-weight-normal);color:var(--s-text-subdued);margin-left:var(--s-space-4)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);text-align:start;white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url(\'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z" fill="%236E6E6E"/></svg>\');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__icon.sc-swirl-form-control{position:absolute;top:0px;bottom:0px;margin:auto;display:flex;align-items:center;justify-content:center;width:var(--s-space-20)}.form-control--has-icon.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control--has-icon.sc-swirl-form-control .form-control__input.sc-swirl-form-control{margin-left:calc(var(--s-space-20) + var(--s-space-12))}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}';export{i as swirl_form_control}
|