@ukic/canary-web-components 3.0.0-canary.38 → 3.0.0-canary.39
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/ic-button_3.cjs.entry.js +1 -1
- package/dist/cjs/ic-data-table.cjs.entry.js +1 -1
- package/dist/cjs/ic-table-of-contents.cjs.entry.js +1 -1
- package/dist/cjs/{ic-tooltip-45dc07ec.js → ic-tooltip-4b81627a.js} +5 -3
- package/dist/cjs/ic-tooltip-4b81627a.js.map +1 -0
- package/dist/components/ic-tooltip2.js +5 -3
- package/dist/components/ic-tooltip2.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/{p-d6fc16c6.entry.js → p-1252016e.entry.js} +2 -2
- package/dist/core/p-87d94ab4.js +2 -0
- package/dist/core/p-87d94ab4.js.map +1 -0
- package/dist/core/{p-123457de.entry.js → p-8cdeec15.entry.js} +2 -2
- package/dist/core/{p-5d4dbca4.entry.js → p-af0c8259.entry.js} +2 -2
- package/dist/esm/ic-button_3.entry.js +1 -1
- package/dist/esm/ic-data-table.entry.js +1 -1
- package/dist/esm/ic-table-of-contents.entry.js +1 -1
- package/dist/esm/{ic-tooltip-84b47c9a.js → ic-tooltip-f5db3b1c.js} +6 -4
- package/dist/esm/ic-tooltip-f5db3b1c.js.map +1 -0
- package/dist/types/components.d.ts +19 -0
- package/dist/types/home/runner/work/ic-ui-kit/ic-ui-kit/packages/canary-web-components/.stencil/web-components/src/components/ic-tooltip/ic-tooltip.d.ts +5 -0
- package/hydrate/index.js +4 -2
- package/hydrate/index.mjs +4 -2
- package/package.json +3 -3
- package/dist/cjs/ic-tooltip-45dc07ec.js.map +0 -1
- package/dist/core/p-e7ff9e3e.js +0 -2
- package/dist/core/p-e7ff9e3e.js.map +0 -1
- package/dist/esm/ic-tooltip-84b47c9a.js.map +0 -1
- /package/dist/core/{p-d6fc16c6.entry.js.map → p-1252016e.entry.js.map} +0 -0
- /package/dist/core/{p-123457de.entry.js.map → p-8cdeec15.entry.js.map} +0 -0
- /package/dist/core/{p-5d4dbca4.entry.js.map → p-af0c8259.entry.js.map} +0 -0
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const icButton = require('./ic-button-06b199b6.js');
|
|
6
6
|
const icLoadingIndicator = require('./ic-loading-indicator-de861ce1.js');
|
|
7
|
-
const icTooltip = require('./ic-tooltip-
|
|
7
|
+
const icTooltip = require('./ic-tooltip-4b81627a.js');
|
|
8
8
|
require('./index-d337cd8a.js');
|
|
9
9
|
require('./helpers-78710f2c.js');
|
|
10
10
|
require('./popper-16968c2e.js');
|
|
@@ -10,7 +10,7 @@ require('./ic-loading-indicator-de861ce1.js');
|
|
|
10
10
|
require('./ic-button-06b199b6.js');
|
|
11
11
|
require('./ic-link-5f1f7247.js');
|
|
12
12
|
require('./ic-pagination-bar-d838fc0f.js');
|
|
13
|
-
require('./ic-tooltip-
|
|
13
|
+
require('./ic-tooltip-4b81627a.js');
|
|
14
14
|
require('./ic-text-field-cb25739b.js');
|
|
15
15
|
require('./helpers-78710f2c.js');
|
|
16
16
|
require('./OpenInNew-add95b7b.js');
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-d337cd8a.js');
|
|
6
6
|
require('./ic-typography-84727538.js');
|
|
7
7
|
const helpers = require('./helpers-0c415f50.js');
|
|
8
|
-
require('./ic-tooltip-
|
|
8
|
+
require('./ic-tooltip-4b81627a.js');
|
|
9
9
|
require('./ic-section-container-b071e8b8.js');
|
|
10
10
|
require('./ic-top-navigation-0817d67f.js');
|
|
11
11
|
require('./ic-navigation-item-e20278b3.js');
|
|
@@ -10,6 +10,7 @@ const IcTooltipStyle0 = icTooltipCss;
|
|
|
10
10
|
const Tooltip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
|
+
this.icTooltipShow = index.createEvent(this, "icTooltipShow", 7);
|
|
13
14
|
this.delayedHideEvents = ["mouseleave"];
|
|
14
15
|
this.instantHideEvents = ["focusout"];
|
|
15
16
|
this.mouseOverTool = false;
|
|
@@ -85,6 +86,7 @@ const Tooltip = class {
|
|
|
85
86
|
]
|
|
86
87
|
: []),
|
|
87
88
|
] }, this.popperProps));
|
|
89
|
+
this.icTooltipShow.emit();
|
|
88
90
|
}
|
|
89
91
|
else {
|
|
90
92
|
console.warn(`Tooltip can't display without prop 'label' set`);
|
|
@@ -221,10 +223,10 @@ const Tooltip = class {
|
|
|
221
223
|
}
|
|
222
224
|
render() {
|
|
223
225
|
const { label, maxLines, silent, theme } = this;
|
|
224
|
-
return (index.h(index.Host, { key: '
|
|
226
|
+
return (index.h(index.Host, { key: 'dcc3fc6fecd4fac015314e3c54a157e1ebcc8543', class: {
|
|
225
227
|
"ic-tooltip": true,
|
|
226
228
|
[`ic-theme-${theme}`]: theme !== "inherit",
|
|
227
|
-
}, "aria-label": helpers.isSafari && label }, index.h("div", { key: '
|
|
229
|
+
}, "aria-label": helpers.isSafari && label }, index.h("div", { key: '23dc0e2551660c34ed8ff5b3b36701c5d4f127ab', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, index.h("ic-typography", { key: 'bf3af7125778c6ccf999bed608ea30ee0c514ff0', maxLines: maxLines, variant: "caption" }, label), index.h("div", { key: '8be3d855caed5f9340f2e813262ab671ec476912', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), index.h("slot", { key: '167fb4e4126037dca13e7a8c27f67f2ed5dd0907' })));
|
|
228
230
|
}
|
|
229
231
|
get el() { return index.getElement(this); }
|
|
230
232
|
static get watchers() { return {
|
|
@@ -237,4 +239,4 @@ Tooltip.style = IcTooltipStyle0;
|
|
|
237
239
|
|
|
238
240
|
exports.Tooltip = Tooltip;
|
|
239
241
|
|
|
240
|
-
//# sourceMappingURL=ic-tooltip-
|
|
242
|
+
//# sourceMappingURL=ic-tooltip-4b81627a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"ic-tooltip-4b81627a.js","mappings":"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","names":["createPopper","onComponentRequiredPropUndefined","h","Host","isSafari"],"sources":["../web-components/src/components/ic-tooltip/ic-tooltip.css?tag=ic-tooltip&encapsulation=shadow","../web-components/src/components/ic-tooltip/ic-tooltip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-tooltip: z-index of tooltip\n */\n\n:host(.ic-tooltip) {\n width: max-content;\n height: max-content;\n\n --ic-tooltip-background: var(--ic-color-background-primary-dark);\n --ic-tooltip-text: var(--ic-color-text-primary-dark);\n --ic-tooltip-border: var(--ic-color-border-neutral-grey-light);\n}\n\n:host(.ic-tooltip) .ic-tooltip-container {\n background-color: var(--ic-tooltip-background);\n text-align: center;\n padding: var(--ic-space-xxxs) var(--ic-space-xs);\n border-radius: var(--ic-border-radius);\n border: var(--ic-border-width) solid var(--ic-tooltip-border);\n position: absolute;\n max-width: 20rem;\n display: none;\n z-index: var(--ic-z-index-tooltip);\n box-shadow: var(--ic-elevation-overlay);\n width: max-content;\n}\n\n:host(.ic-tooltip) ic-typography {\n --ic-typography-color: var(--ic-tooltip-text);\n}\n\n:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed))\n .ic-tooltip-container,\n:host(.tooltip-disabled) .ic-tooltip-container {\n display: none !important;\n}\n\n:host(.tooltip-long-label-navigation-item-side-nav-expanded)\n .ic-tooltip-container[data-show] {\n display: block !important;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow,\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n position: absolute;\n background: inherit;\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow {\n visibility: hidden;\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-tooltip) .ic-tooltip-arrow::before {\n visibility: visible;\n content: \"\";\n border: var(--ic-border-width) solid var(--ic-tooltip-border);\n width: 100%;\n height: 100%;\n}\n\n:host(.ic-tooltip) .ic-tooltip-container[data-show] {\n display: block;\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow {\n height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"top\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 0 var(--ic-border-radius) var(--ic-border-radius);\n left: 0;\n top: var(--ic-space-xxxs);\n border-top: 0;\n transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow {\n top: calc(-1 * var(--ic-space-xxs));\n height: var(--ic-space-xxxs);\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"bottom\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) var(--ic-border-radius) 0 0;\n left: 0;\n top: var(--ic-space-1px);\n border-bottom: 0;\n transform: translateX(var(--tooltip-arrow-translate));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow {\n width: var(--ic-space-xxxs);\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"left\"]\n > .ic-tooltip-arrow::before {\n border-radius: 0 var(--ic-border-radius) var(--ic-border-radius) 0;\n border-left: 0;\n top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow {\n width: var(--ic-space-xxxs);\n left: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-tooltip)\n .ic-tooltip-container[data-popper-placement^=\"right\"]\n > .ic-tooltip-arrow::before {\n border-radius: var(--ic-border-radius) 0 0 var(--ic-border-radius);\n border-right: 0;\n top: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-tooltip-in-container) {\n display: inline-block;\n}\n\n@media screen and (max-width: 576px) {\n :host(.ic-tooltip) .ic-tooltip-container {\n max-width: 18.875rem;\n }\n}\n\n@media (forced-colors: active) {\n :host(.ic-tooltip) .ic-tooltip-container,\n :host(.ic-tooltip) .ic-tooltip-arrow::before {\n border: var(--ic-border-hc);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n State,\n Watch,\n} from \"@stencil/core\";\nimport { Instance, Options, createPopper } from \"@popperjs/core\";\nimport { IcTooltipPlacements } from \"./ic-tooltip.types\";\nimport {\n isSafari,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tooltip\",\n styleUrl: \"ic-tooltip.css\",\n shadow: true,\n})\nexport class Tooltip {\n private arrow: HTMLDivElement;\n private delayedHideEvents = [\"mouseleave\"];\n private containerContentArea: HTMLDivElement | null;\n private instantHideEvents = [\"focusout\"];\n private mouseOverTool: boolean = false;\n private persistTooltip = false;\n private popperInstance: Instance;\n private showEvents = [\n !this.disableHover && \"mouseenter\",\n !this.disableHover && \"focusin\",\n !this.disableClick && \"click\",\n ];\n private toolTip: HTMLDivElement;\n\n @Element() el: HTMLIcTooltipElement;\n\n /**\n * If `true`, the tooltip will not be displayed on click, it will require hover or using the display method.\n */\n @Prop() disableClick?: boolean = false;\n\n @Watch(\"disableClick\")\n watchDisableClickHandler(): void {\n if (this.disableClick) {\n this.hide();\n }\n this.updateTooltipEvents();\n }\n\n /**\n * If `true`, the tooltip will not be displayed on hover, it will require a click.\n */\n @Prop() disableHover?: boolean = false;\n\n @Watch(\"disableHover\")\n watchDisableHoverHandler(): void {\n if (this.disableHover) {\n this.hide();\n }\n this.updateTooltipEvents();\n }\n\n /**\n * Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n */\n @Prop() fixedPositioning: boolean = false;\n\n /**\n * The number of lines to display before truncating the text.\n */\n @Prop() maxLines?: number;\n\n /**\n * The position of the tooltip in relation to the parent element.\n */\n @Prop() placement?: IcTooltipPlacements = \"bottom\";\n\n /**\n * @internal Sets the tooltip to aria-hidden, when used as part of components that are already announced.\n */\n @Prop() silent?: boolean = false;\n\n /**\n * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.\n */\n @Prop({ reflect: true }) target?: string;\n\n /**\n * Sets the tooltip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /**\n * The text to display on the tooltip.\n */\n @Prop() label!: string;\n @Watch(\"label\")\n watchLabelHandler(): void {\n if (this.toolTip?.hasAttribute(\"data-show\") && this.popperInstance) {\n this.popperInstance.update();\n }\n }\n\n @State() popperProps: Partial<Options> = {};\n\n /**\n * Emitted when the tooltip becomes visible.\n */\n @Event() icTooltipShow: EventEmitter<void>;\n\n /**\n * @internal This method allows props to be added to the PopperJS createPopper instance outside of tooltip\n * @param props object - createPopper props set externally\n */\n @Method()\n async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n this.popperProps = props;\n }\n\n disconnectedCallback(): void {\n this.manageEventListeners(\"remove\");\n if (this.popperInstance !== undefined) {\n this.popperInstance.destroy();\n }\n }\n\n componentDidLoad(): void {\n this.manageEventListeners(\"add\");\n\n // Display tooltips correctly within drawer and dialog components\n let container: HTMLElement | null;\n\n if ((this.el.getRootNode() as ShadowRoot).host) {\n container = (this.el.getRootNode() as ShadowRoot).host.closest(\n \"ic-dialog, ic-drawer\"\n );\n } else {\n container = this.el.closest(\"ic-dialog, ic-drawer\");\n }\n this.containerContentArea =\n container?.shadowRoot?.querySelector(\".content-area\") ?? null;\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tooltip\"\n );\n }\n\n componentDidRender(): void {\n const typographyEl = this.el.shadowRoot?.querySelector(\n \".ic-tooltip-container > ic-typography\"\n );\n this.maxLines &&\n this.maxLines > 0 &&\n typographyEl?.setAttribute(\n \"style\",\n `--truncation-max-lines: ${this.maxLines}`\n );\n }\n /**\n * Method to programmatically show/hide the tooltip without needing to interact with an anchor element\n * @param show Whether to show or hide the tooltip\n * @param persistTooltip Whether the tooltip should stay on the screen when actions are performed that would previously dismiss the tooltip, such as on hover\n */\n @Method()\n async displayTooltip(show: boolean, persistTooltip?: boolean): Promise<void> {\n this.persistTooltip = !!persistTooltip;\n show ? this.show() : this.hide();\n }\n\n /**\n * @internal Method to return if tooltip is currently visible.\n */\n @Method()\n async isTooltipVisible(): Promise<boolean> {\n return Promise.resolve(this.toolTip.hasAttribute(\"data-show\"));\n }\n\n private show = () => {\n if (this.label) {\n this.toolTip.setAttribute(\"data-show\", \"\");\n\n if (this.containerContentArea) {\n this.el.classList.add(\"ic-tooltip-in-container\");\n }\n\n this.popperInstance = createPopper(this.el, this.toolTip, {\n strategy: this.fixedPositioning ? \"fixed\" : \"absolute\",\n placement: this.placement,\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 10],\n },\n },\n {\n name: \"arrow\",\n options: {\n element: this.arrow,\n },\n },\n {\n name: \"eventListeners\",\n options: { scroll: false, resize: false },\n },\n ...(this.containerContentArea\n ? [\n {\n name: \"preventOverflow\",\n options: {\n boundary: this.containerContentArea,\n padding: 8,\n },\n },\n {\n name: \"flip\",\n options: {\n boundary: this.containerContentArea,\n },\n },\n ]\n : []),\n ],\n ...this.popperProps,\n });\n this.icTooltipShow.emit();\n } else {\n console.warn(`Tooltip can't display without prop 'label' set`);\n }\n };\n\n private hide = () => {\n if (this.toolTip !== undefined) {\n this.toolTip.removeAttribute(\"data-show\");\n this.persistTooltip = false;\n }\n if (this.popperInstance !== undefined) {\n this.popperInstance.destroy();\n }\n };\n\n private checkCloseTooltip = () => {\n setTimeout(() => {\n if (!this.mouseOverTool && !this.persistTooltip) {\n this.hide();\n }\n }, 100);\n };\n\n private mouseEnterTooltip = () => {\n this.mouseOverTool = true;\n };\n\n private mouseLeaveTooltip = () => {\n this.mouseOverTool = false;\n this.checkCloseTooltip();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && !this.persistTooltip) {\n this.hide();\n }\n };\n\n private manageEventListeners = (action: \"add\" | \"remove\") => {\n const method =\n action === \"add\" ? \"addEventListener\" : \"removeEventListener\";\n\n this.showEvents.forEach((event) => {\n if (event) {\n this.el[method](event, this.show);\n if (this.toolTip !== undefined) {\n this.toolTip[method](event, this.mouseEnterTooltip);\n }\n }\n });\n\n if (!this.persistTooltip) {\n this.instantHideEvents.forEach((event) => {\n this.el[method](event, this.hide);\n });\n }\n\n this.delayedHideEvents.forEach((event) => {\n this.el[method](event, this.checkCloseTooltip);\n if (this.toolTip !== undefined) {\n this.toolTip[method](event, this.mouseLeaveTooltip);\n }\n });\n\n document[method](\"keydown\", this.handleKeyDown as EventListener);\n };\n\n private updateTooltipEvents = () => {\n this.manageEventListeners(\"remove\");\n this.showEvents = [\n !this.disableHover && \"mouseenter\",\n !this.disableHover && \"focusin\",\n !this.disableClick && \"click\",\n ];\n this.manageEventListeners(\"add\");\n };\n\n render() {\n const { label, maxLines, silent, theme } = this;\n return (\n <Host\n class={{\n \"ic-tooltip\": true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-label={isSafari && label} // accessible name needs to be in light dom to be announced by VoiceOver. Replace in v4 as aria-label on element with no role is not well-supported\n >\n <div\n ref={(el) => (this.toolTip = el as HTMLDivElement)}\n role=\"tooltip\"\n class=\"ic-tooltip-container\"\n aria-hidden={`${silent}`}\n >\n <ic-typography maxLines={maxLines} variant=\"caption\">\n {label}\n </ic-typography>\n <div\n ref={(el) => (this.arrow = el as HTMLDivElement)}\n class=\"ic-tooltip-arrow\"\n ></div>\n </div>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
|
|
1
|
+
import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { o as onComponentRequiredPropUndefined, j as isSafari } from './helpers.js';
|
|
3
3
|
import { d as defineCustomElement$1 } from './ic-typography2.js';
|
|
4
4
|
|
|
@@ -1801,6 +1801,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
1801
1801
|
super();
|
|
1802
1802
|
this.__registerHost();
|
|
1803
1803
|
this.__attachShadow();
|
|
1804
|
+
this.icTooltipShow = createEvent(this, "icTooltipShow", 7);
|
|
1804
1805
|
this.delayedHideEvents = ["mouseleave"];
|
|
1805
1806
|
this.instantHideEvents = ["focusout"];
|
|
1806
1807
|
this.mouseOverTool = false;
|
|
@@ -1876,6 +1877,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
1876
1877
|
]
|
|
1877
1878
|
: []),
|
|
1878
1879
|
] }, this.popperProps));
|
|
1880
|
+
this.icTooltipShow.emit();
|
|
1879
1881
|
}
|
|
1880
1882
|
else {
|
|
1881
1883
|
console.warn(`Tooltip can't display without prop 'label' set`);
|
|
@@ -2012,10 +2014,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
2012
2014
|
}
|
|
2013
2015
|
render() {
|
|
2014
2016
|
const { label, maxLines, silent, theme } = this;
|
|
2015
|
-
return (h(Host, { key: '
|
|
2017
|
+
return (h(Host, { key: 'dcc3fc6fecd4fac015314e3c54a157e1ebcc8543', class: {
|
|
2016
2018
|
"ic-tooltip": true,
|
|
2017
2019
|
[`ic-theme-${theme}`]: theme !== "inherit",
|
|
2018
|
-
}, "aria-label": isSafari && label }, h("div", { key: '
|
|
2020
|
+
}, "aria-label": isSafari && label }, h("div", { key: '23dc0e2551660c34ed8ff5b3b36701c5d4f127ab', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: 'bf3af7125778c6ccf999bed608ea30ee0c514ff0', maxLines: maxLines, variant: "caption" }, label), h("div", { key: '8be3d855caed5f9340f2e813262ab671ec476912', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: '167fb4e4126037dca13e7a8c27f67f2ed5dd0907' })));
|
|
2019
2021
|
}
|
|
2020
2022
|
get el() { return this; }
|
|
2021
2023
|
static get watchers() { return {
|