@sula-tech/webcomponents 0.17.9 → 0.17.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sula-avatar_30.cjs.entry.js +8 -1
- package/dist/cjs/sula-avatar_30.cjs.entry.js.map +1 -1
- package/dist/cjs/webcomponents.cjs.js +1 -1
- package/dist/collection/components/sula-tooltip/sula-tooltip.js +48 -1
- package/dist/collection/components/sula-tooltip/sula-tooltip.js.map +1 -1
- package/dist/components/sula-tooltip.js +10 -1
- package/dist/components/sula-tooltip.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sula-avatar_30.entry.js +8 -1
- package/dist/esm/sula-avatar_30.entry.js.map +1 -1
- package/dist/esm/webcomponents.js +1 -1
- package/dist/types/components/sula-tooltip/sula-tooltip.d.ts +8 -1
- package/dist/types/components.d.ts +20 -0
- package/dist/webcomponents/{p-f678a5a9.entry.js → p-704409eb.entry.js} +13 -8
- package/dist/webcomponents/p-704409eb.entry.js.map +1 -0
- package/dist/webcomponents/webcomponents.esm.js +3 -1
- package/package.json +1 -1
- package/dist/webcomponents/p-f678a5a9.entry.js.map +0 -1
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["sula-avatar_30.cjs",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-menu",{"menuTitle":[1,"menu-title"],"image":[1],"items":[1040],"collapsed":[32],"previewExpanded":[32],"selectedItem":[32]},null,{"items":["syncSelectedItemFromItems"]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-toggle",{"selected":[1028],"buttonDisabled":[1028,"button-disabled"],"icon":[1]}],[1,"sula-tooltip",{"text":[1],"position":[1],"focused":[4],"trigger":[1],"isVisible":[32]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
|
|
21
|
+
return index.bootstrapLazy([["sula-avatar_30.cjs",[[1,"sula-modal",{"opened":[1028],"blockBodyScroll":[1028,"block-body-scroll"],"closeOnClickOutside":[1028,"close-on-click-outside"],"type":[1],"headerIcon":[1,"header-icon"],"modalTitle":[1,"modal-title"],"promoImage":[1,"promo-image"],"subTitle":[1,"sub-title"],"primaryButtonText":[1,"primary-button-text"],"secondaryButtonText":[1,"secondary-button-text"],"slotOverflow":[1,"slot-overflow"],"isAnimating":[32],"shouldRender":[32]},null,{"opened":["handleOpenedChange"]}],[1,"sula-chip",{"text":[1025],"appearance":[1025],"disabled":[1028],"items":[1040],"selected":[1028],"isFocused":[32],"showItems":[32]},[[4,"click","handleDocumentClick"]]],[1,"sula-dropdown",{"label":[1025],"disabled":[1028],"items":[1040],"value":[1040],"searchable":[516],"menuMaxHeight":[2,"menu-max-height"],"contentMaxHeight":[2,"content-max-height"],"customContent":[516,"custom-content"],"closeOnSelect":[4,"close-on-select"],"showContent":[1540,"show-content"],"selectedItem":[32],"isFocused":[32],"searchTerm":[32],"filteredItems":[32],"openUpward":[32]},[[4,"click","handleDocumentClick"],[9,"resize","handleWindowResize"]],{"value":["handleValueChange"],"showContent":["handleShowContentChange"]}],[1,"sula-avatar",{"size":[1],"imageUrl":[1,"image-url"],"text":[1],"icon":[1]}],[1,"sula-badge",{"status":[1025],"size":[1025],"type":[1025],"text":[1025],"icon":[1025],"hasSlotContent":[32]}],[1,"sula-breadcrumb",{"items":[1040]}],[1,"sula-checkbox",{"type":[1025],"label":[1025],"subTitle":[1025,"sub-title"],"disabled":[1028],"checked":[1028],"isFocus":[32]}],[1,"sula-menu",{"menuTitle":[1,"menu-title"],"image":[1],"items":[1040],"collapsed":[32],"previewExpanded":[32],"selectedItem":[32]},null,{"items":["syncSelectedItemFromItems"]}],[1,"sula-progress-bar",{"appearance":[1025],"state":[1025],"topLabel":[1025,"top-label"],"bottomLabel":[1025,"bottom-label"],"progress":[1026],"showProgress":[1028,"show-progress"]},null,{"progress":["validateProgress"]}],[1,"sula-search-bar",{"value":[1025],"searchBarStyle":[1025,"search-bar-style"],"placeholder":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"isFocused":[32],"textValue":[32]}],[1,"sula-segmented-control",{"items":[1040],"type":[1025],"size":[1025],"color":[1025]}],[1,"sula-tag",{"label":[1025],"icon":[1025],"iconStatus":[1025,"icon-status"],"size":[1025],"appearance":[1025],"fontWeight":[1025,"font-weight"]}],[1,"sula-textfield",{"value":[1025],"type":[1],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"icon":[1],"maskPattern":[1,"mask-pattern"],"maskPatternSwitchMaxLength":[2,"mask-pattern-switch-max-length"],"inputIsOpen":[32],"textValue":[32],"showPassword":[32],"inputIsFocused":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"],"maskPattern":["watchMaskPatternHandler"],"maskPatternSwitchMaxLength":["watchMaskPatternSwitchMaxLengthHandler"]}],[1,"sula-tiles",{"type":[1],"size":[1],"ellipsis":[4],"icon":[1],"text":[1],"subText":[1,"sub-text"],"disabled":[4]}],[1,"sula-timeline-list",{"sulaTimelineList":[1040,"sula-timeline-list"]}],[1,"sula-toggle",{"selected":[1028],"buttonDisabled":[1028,"button-disabled"],"icon":[1]}],[1,"sula-tooltip",{"text":[1],"position":[1],"icon":[1],"iconClass":[1,"icon-class"],"focused":[4],"trigger":[1],"isVisible":[32]}],[1,"sula-radio-button",{"checked":[1028],"label":[1025],"disabled":[1028],"radioIsFocus":[32]}],[1,"sula-switch",{"type":[1025],"active":[1028],"disabled":[1028],"label":[1025],"subTitle":[1025,"sub-title"],"responsive":[4],"isFocus":[32]}],[4,"sula-table",{"density":[1],"equalWidth":[4,"equal-width"],"fullWidth":[4,"full-width"]}],[4,"sula-table-body"],[4,"sula-table-cell"],[4,"sula-table-head-cell"],[4,"sula-table-header"],[4,"sula-table-row"],[1,"sula-textarea",{"value":[1025],"status":[1025],"label":[1],"placeholder":[1],"disabled":[1028],"helpText":[1,"help-text"],"maxLength":[2,"max-length"],"rows":[2],"isActive":[32],"textValue":[32],"textareaIsFocused":[32],"labelPadding":[32]},[[4,"click","handleClick"]],{"value":["watchValueHandler"]}],[1,"sula-button",{"text":[1025],"icon":[1025],"leftIcon":[1025,"left-icon"],"rightIcon":[1025,"right-icon"],"appearance":[1025],"type":[1025],"size":[1025],"status":[1025],"loading":[1028],"buttonDisabled":[1028,"button-disabled"],"fullWidth":[1028,"full-width"]}],[1,"sula-loader",{"size":[1],"animationInstance":[32]}],[1,"sula-menu-select-list",{"items":[1040],"fullWidth":[4,"full-width"],"maxHeight":[2,"max-height"],"selectedValue":[16,"selected-value"]}],[0,"sula-icon",{"icon":[1],"customClass":[1,"custom-class"]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
|
@@ -8,7 +8,14 @@ export class SulaTooltip {
|
|
|
8
8
|
* Tooltip position relative to trigger
|
|
9
9
|
*/
|
|
10
10
|
this.position = SulaTooltipPosition.Top;
|
|
11
|
+
/**
|
|
12
|
+
* Icon class used as the tooltip trigger (Phosphor icon name)
|
|
13
|
+
*/
|
|
11
14
|
this.icon = 'ph ph-info';
|
|
15
|
+
/**
|
|
16
|
+
* Extra classes applied to the trigger icon
|
|
17
|
+
*/
|
|
18
|
+
this.iconClass = 'text-icon-primary text-[18px] leading-none';
|
|
12
19
|
/**
|
|
13
20
|
* When true, renders a focus ring (21.5×21.5px, 1px border) around the icon.
|
|
14
21
|
*/
|
|
@@ -99,7 +106,7 @@ export class SulaTooltip {
|
|
|
99
106
|
const hostClass = isParentMode
|
|
100
107
|
? 'absolute inset-0 pointer-events-none overflow-visible'
|
|
101
108
|
: 'inline-block relative';
|
|
102
|
-
return (h(Host, { key: '
|
|
109
|
+
return (h(Host, { key: 'dc4fca825571660a011396d3aed49d352cce454c', class: hostClass }, !isParentMode && (h("div", { key: 'e5aa79e7f1b593e8e48dc79d34555c0459821fe3', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '22f5af2cf26b56e69b2df859353e4a9f1665e2b5', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: this.iconClass }))), this.displayText && (h("div", { key: '5eb97ccaa53f6e721c042a69f89d52b31a556bf4', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '92e5e8f5dde7bc6d6ef6563a5d21ee29af37596f', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
|
|
103
110
|
}
|
|
104
111
|
static get is() { return "sula-tooltip"; }
|
|
105
112
|
static get encapsulation() { return "shadow"; }
|
|
@@ -160,6 +167,46 @@ export class SulaTooltip {
|
|
|
160
167
|
"reflect": false,
|
|
161
168
|
"defaultValue": "SulaTooltipPosition.Top"
|
|
162
169
|
},
|
|
170
|
+
"icon": {
|
|
171
|
+
"type": "string",
|
|
172
|
+
"attribute": "icon",
|
|
173
|
+
"mutable": false,
|
|
174
|
+
"complexType": {
|
|
175
|
+
"original": "string",
|
|
176
|
+
"resolved": "string",
|
|
177
|
+
"references": {}
|
|
178
|
+
},
|
|
179
|
+
"required": false,
|
|
180
|
+
"optional": false,
|
|
181
|
+
"docs": {
|
|
182
|
+
"tags": [],
|
|
183
|
+
"text": "Icon class used as the tooltip trigger (Phosphor icon name)"
|
|
184
|
+
},
|
|
185
|
+
"getter": false,
|
|
186
|
+
"setter": false,
|
|
187
|
+
"reflect": false,
|
|
188
|
+
"defaultValue": "'ph ph-info'"
|
|
189
|
+
},
|
|
190
|
+
"iconClass": {
|
|
191
|
+
"type": "string",
|
|
192
|
+
"attribute": "icon-class",
|
|
193
|
+
"mutable": false,
|
|
194
|
+
"complexType": {
|
|
195
|
+
"original": "string",
|
|
196
|
+
"resolved": "string",
|
|
197
|
+
"references": {}
|
|
198
|
+
},
|
|
199
|
+
"required": false,
|
|
200
|
+
"optional": false,
|
|
201
|
+
"docs": {
|
|
202
|
+
"tags": [],
|
|
203
|
+
"text": "Extra classes applied to the trigger icon"
|
|
204
|
+
},
|
|
205
|
+
"getter": false,
|
|
206
|
+
"setter": false,
|
|
207
|
+
"reflect": false,
|
|
208
|
+
"defaultValue": "'text-icon-primary text-[18px] leading-none'"
|
|
209
|
+
},
|
|
163
210
|
"focused": {
|
|
164
211
|
"type": "boolean",
|
|
165
212
|
"attribute": "focused",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sula-tooltip.js","sourceRoot":"","sources":["../../../src/components/sula-tooltip/sula-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErF,MAAM,eAAe,GAAG,GAAG,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAaE;;WAEG;QACK,aAAQ,GAAwB,mBAAmB,CAAC,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"sula-tooltip.js","sourceRoot":"","sources":["../../../src/components/sula-tooltip/sula-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Instance as PopperInstance } from '@popperjs/core';\nimport { SulaTooltipPosition, SulaTooltipTrigger } from './model/sula-tooltip.model';\n\nconst MAX_TEXT_LENGTH = 300;\n\n@Component({\n tag: 'sula-tooltip',\n styleUrl: 'sula-tooltip.scss',\n shadow: true,\n})\nexport class SulaTooltip {\n @Element() el: HTMLElement;\n\n /**\n * Tooltip hint text — max 300 characters\n */\n @Prop() text: string;\n\n /**\n * Tooltip position relative to trigger\n */\n @Prop() position: SulaTooltipPosition = SulaTooltipPosition.Top;\n\n /**\n * Icon class used as the tooltip trigger (Phosphor icon name)\n */\n @Prop() icon: string = 'ph ph-info';\n\n /**\n * Extra classes applied to the trigger icon\n */\n @Prop() iconClass: string = 'text-icon-primary text-[18px] leading-none';\n\n /**\n * When true, renders a focus ring (21.5×21.5px, 1px border) around the icon.\n */\n @Prop() focused: boolean = false;\n\n /**\n * Trigger mode.\n * - `'icon'` (default): the built-in info icon is the hover target.\n * - `'parent'`: the icon is hidden; the component stretches to fill the\n * parent element (which **must** have `position: relative`) and the hint\n * appears on hover of that parent.\n */\n @Prop() trigger: SulaTooltipTrigger = SulaTooltipTrigger.Icon;\n\n @State() isVisible: boolean = false;\n\n private parentEl: HTMLElement | null = null;\n private hintEl: HTMLElement | null = null;\n private triggerEl: HTMLElement | null = null;\n private arrowEl: HTMLElement | null = null;\n private popperInstance: PopperInstance | null = null;\n\n componentDidLoad() {\n if (this.trigger === SulaTooltipTrigger.Parent) {\n this.parentEl = this.el.parentElement;\n if (this.parentEl) {\n this.parentEl.addEventListener('mouseenter', this.handleMouseEnter);\n this.parentEl.addEventListener('mouseleave', this.handleMouseLeave);\n }\n }\n this.initPopper();\n }\n\n disconnectedCallback() {\n if (this.parentEl) {\n this.parentEl.removeEventListener('mouseenter', this.handleMouseEnter);\n this.parentEl.removeEventListener('mouseleave', this.handleMouseLeave);\n this.parentEl = null;\n }\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n private initPopper() {\n const reference =\n this.trigger === SulaTooltipTrigger.Parent ? this.el.parentElement : this.triggerEl;\n if (!reference || !this.hintEl) return;\n\n if (this.popperInstance) {\n this.popperInstance.destroy();\n }\n\n this.popperInstance = createPopper(reference, this.hintEl, {\n placement: this.position as any,\n strategy: 'fixed',\n modifiers: [\n { name: 'offset', options: { offset: [0, 8] } },\n { name: 'arrow', options: { element: this.arrowEl } },\n { name: 'preventOverflow', options: { padding: 8 } },\n { name: 'flip' },\n ],\n });\n }\n\n private get displayText(): string {\n if (!this.text) return '';\n return this.text.length > MAX_TEXT_LENGTH\n ? this.text.slice(0, MAX_TEXT_LENGTH)\n : this.text;\n }\n\n private getIconClasses() {\n const baseClasses = 'relative w-[22px] h-[22px] box-border flex items-center justify-center rounded-full cursor-pointer transition-all opacity-100 border border-solid bg-transparent';\n const borderColor = this.focused\n ? 'border-feedback-informational'\n : 'border-transparent';\n\n return `${baseClasses} ${borderColor}`;\n }\n\n private getHintClasses() {\n const baseClasses =\n 'hint-bubble fixed z-50 px-12 py-8 bg-neutral-neutral-8 text-neutral-neutral-1 text-sm rounded pointer-events-none leading-normal shadow-[0_4px_16px_rgba(0,0,0,0.24)] max-w-[200px] break-words';\n const visibilityClasses = this.isVisible ? 'opacity-100 visible' : 'opacity-0 invisible';\n return `${baseClasses} ${visibilityClasses} transition-opacity duration-200`;\n }\n\n private handleMouseEnter = () => {\n this.isVisible = true;\n this.popperInstance?.update();\n };\n\n private handleMouseLeave = () => {\n this.isVisible = false;\n };\n\n render() {\n const isParentMode = this.trigger === SulaTooltipTrigger.Parent;\n const hostClass = isParentMode\n ? 'absolute inset-0 pointer-events-none overflow-visible'\n : 'inline-block relative';\n\n return (\n <Host class={hostClass}>\n {!isParentMode && (\n <div\n class={this.getIconClasses()}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n role=\"button\"\n aria-label=\"Tooltip trigger\"\n ref={(el) => (this.triggerEl = el as HTMLElement)}\n >\n <sula-icon class=\"flex items-center justify-center w-full h-full leading-[0]\" icon={this.icon} customClass={this.iconClass}></sula-icon>\n </div>\n )}\n\n {this.displayText && (\n <div class={this.getHintClasses()} role=\"tooltip\" ref={(el) => (this.hintEl = el as HTMLElement)}>\n {this.displayText}\n <div class=\"tooltip-arrow\" data-popper-arrow ref={(el) => (this.arrowEl = el as HTMLElement)}></div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1815,7 +1815,14 @@ const SulaTooltip$1 = /*@__PURE__*/ proxyCustomElement(class SulaTooltip extends
|
|
|
1815
1815
|
* Tooltip position relative to trigger
|
|
1816
1816
|
*/
|
|
1817
1817
|
this.position = SulaTooltipPosition.Top;
|
|
1818
|
+
/**
|
|
1819
|
+
* Icon class used as the tooltip trigger (Phosphor icon name)
|
|
1820
|
+
*/
|
|
1818
1821
|
this.icon = 'ph ph-info';
|
|
1822
|
+
/**
|
|
1823
|
+
* Extra classes applied to the trigger icon
|
|
1824
|
+
*/
|
|
1825
|
+
this.iconClass = 'text-icon-primary text-[18px] leading-none';
|
|
1819
1826
|
/**
|
|
1820
1827
|
* When true, renders a focus ring (21.5×21.5px, 1px border) around the icon.
|
|
1821
1828
|
*/
|
|
@@ -1906,13 +1913,15 @@ const SulaTooltip$1 = /*@__PURE__*/ proxyCustomElement(class SulaTooltip extends
|
|
|
1906
1913
|
const hostClass = isParentMode
|
|
1907
1914
|
? 'absolute inset-0 pointer-events-none overflow-visible'
|
|
1908
1915
|
: 'inline-block relative';
|
|
1909
|
-
return (h(Host, { key: '
|
|
1916
|
+
return (h(Host, { key: 'dc4fca825571660a011396d3aed49d352cce454c', class: hostClass }, !isParentMode && (h("div", { key: 'e5aa79e7f1b593e8e48dc79d34555c0459821fe3', class: this.getIconClasses(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, role: "button", "aria-label": "Tooltip trigger", ref: (el) => (this.triggerEl = el) }, h("sula-icon", { key: '22f5af2cf26b56e69b2df859353e4a9f1665e2b5', class: "flex items-center justify-center w-full h-full leading-[0]", icon: this.icon, customClass: this.iconClass }))), this.displayText && (h("div", { key: '5eb97ccaa53f6e721c042a69f89d52b31a556bf4', class: this.getHintClasses(), role: "tooltip", ref: (el) => (this.hintEl = el) }, this.displayText, h("div", { key: '92e5e8f5dde7bc6d6ef6563a5d21ee29af37596f', class: "tooltip-arrow", "data-popper-arrow": true, ref: (el) => (this.arrowEl = el) })))));
|
|
1910
1917
|
}
|
|
1911
1918
|
get el() { return this; }
|
|
1912
1919
|
static get style() { return sulaTooltipCss; }
|
|
1913
1920
|
}, [1, "sula-tooltip", {
|
|
1914
1921
|
"text": [1],
|
|
1915
1922
|
"position": [1],
|
|
1923
|
+
"icon": [1],
|
|
1924
|
+
"iconClass": [1, "icon-class"],
|
|
1916
1925
|
"focused": [4],
|
|
1917
1926
|
"trigger": [1],
|
|
1918
1927
|
"isVisible": [32]
|