@infineon/infineon-design-system-stencil 21.7.3 → 21.7.4
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/ifx-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/ifx-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/components/tooltip/tooltip.css +8 -8
- package/dist/esm/ifx-tooltip.entry.js +1 -1
- package/dist/esm/ifx-tooltip.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-6bb5fb2c.entry.js → p-3acec2a9.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-6bb5fb2c.entry.js.map → p-3acec2a9.entry.js.map} +1 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-4e6795cb.js');
|
|
6
6
|
const popper = require('./popper-9a6aec9e.js');
|
|
7
7
|
|
|
8
|
-
const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:relative;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:center}.tooltip-dismissible{min-width:110px;width:auto}.tooltip-dismissible .close-button{cursor:pointer;position:relative;top:0px;order:2;padding-right:12px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{min-width:100px;width:auto;align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-
|
|
8
|
+
const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:relative;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:center}.tooltip-dismissible{min-width:110px;width:auto}.tooltip-dismissible .close-button{cursor:pointer;position:relative;top:0px;order:2;padding-right:12px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{min-width:100px;width:auto;align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}";
|
|
9
9
|
const IfxTooltipStyle0 = tooltipCss;
|
|
10
10
|
|
|
11
11
|
const Tooltip = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-tooltip.entry.cjs.js","mappings":"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","names":["createPopper","h"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n\n &.visible {\n display: flex !important;\n align-items: center;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n min-width: 110px;\n width: auto;\n\n .close-button {\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n top: 0px;\n //right: 0px;\n order: 2;\n padding-right: 12px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n min-width: 100px;\n width: auto;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -8px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -8px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -8px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -8px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -8px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -4px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -4px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n}","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <ifx-icon icon=\"cross16\" class=\"close-button\"></ifx-icon>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"version":3}
|
|
1
|
+
{"file":"ifx-tooltip.entry.cjs.js","mappings":"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","names":["createPopper","h"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n\n &.visible {\n display: flex !important;\n align-items: center;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n min-width: 110px;\n width: auto;\n\n .close-button {\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n top: 0px;\n //right: 0px;\n order: 2;\n padding-right: 12px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n min-width: 100px;\n width: auto;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -7px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -7px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -3px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -3px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n}","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <ifx-icon icon=\"cross16\" class=\"close-button\"></ifx-icon>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"version":3}
|
|
@@ -114,40 +114,40 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
[data-placement=top].tooltip-extended > .tooltip-arrow-svg, [data-placement=top].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=top].tooltip-compact > .tooltip-arrow-svg {
|
|
117
|
-
bottom: -
|
|
117
|
+
bottom: -7px;
|
|
118
118
|
left: 50%;
|
|
119
119
|
transform: rotate(180deg) translateX(-50%);
|
|
120
120
|
}
|
|
121
121
|
[data-placement=top-start].tooltip-extended > .tooltip-arrow-svg, [data-placement=top-start].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=top-start].tooltip-compact > .tooltip-arrow-svg {
|
|
122
|
-
bottom: -
|
|
122
|
+
bottom: -7px;
|
|
123
123
|
left: 10px;
|
|
124
124
|
transform: rotate(180deg);
|
|
125
125
|
}
|
|
126
126
|
[data-placement=top-end].tooltip-extended > .tooltip-arrow-svg, [data-placement=top-end].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=top-end].tooltip-compact > .tooltip-arrow-svg {
|
|
127
|
-
bottom: -
|
|
127
|
+
bottom: -7px;
|
|
128
128
|
right: 10px;
|
|
129
129
|
transform: rotate(180deg);
|
|
130
130
|
}
|
|
131
131
|
[data-placement=bottom].tooltip-extended > .tooltip-arrow-svg, [data-placement=bottom].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=bottom].tooltip-compact > .tooltip-arrow-svg {
|
|
132
|
-
top: -
|
|
132
|
+
top: -7px;
|
|
133
133
|
left: 50%;
|
|
134
134
|
transform: translateX(-50%);
|
|
135
135
|
}
|
|
136
136
|
[data-placement=bottom-start].tooltip-extended > .tooltip-arrow-svg, [data-placement=bottom-start].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=bottom-start].tooltip-compact > .tooltip-arrow-svg {
|
|
137
|
-
top: -
|
|
137
|
+
top: -7px;
|
|
138
138
|
left: 10px;
|
|
139
139
|
}
|
|
140
140
|
[data-placement=bottom-end].tooltip-extended > .tooltip-arrow-svg, [data-placement=bottom-end].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=bottom-end].tooltip-compact > .tooltip-arrow-svg {
|
|
141
|
-
top: -
|
|
141
|
+
top: -7px;
|
|
142
142
|
right: 10px;
|
|
143
143
|
}
|
|
144
144
|
[data-placement=left].tooltip-extended > .tooltip-arrow-svg, [data-placement=left].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=left].tooltip-compact > .tooltip-arrow-svg {
|
|
145
|
-
right: -
|
|
145
|
+
right: -3px;
|
|
146
146
|
top: 50%;
|
|
147
147
|
transform: rotate(90deg) translateY(-50%) translateX(-50%);
|
|
148
148
|
}
|
|
149
149
|
[data-placement=right].tooltip-extended > .tooltip-arrow-svg, [data-placement=right].tooltip-dismissible > .tooltip-arrow-svg, [data-placement=right].tooltip-compact > .tooltip-arrow-svg {
|
|
150
|
-
left: -
|
|
150
|
+
left: -3px;
|
|
151
151
|
top: 50%;
|
|
152
152
|
transform: rotate(270deg) translateY(-50%) translateX(50%);
|
|
153
153
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, g as getElement } from './index-77e9cc30.js';
|
|
2
2
|
import { c as createPopper } from './popper-1604923e.js';
|
|
3
3
|
|
|
4
|
-
const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:relative;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:center}.tooltip-dismissible{min-width:110px;width:auto}.tooltip-dismissible .close-button{cursor:pointer;position:relative;top:0px;order:2;padding-right:12px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{min-width:100px;width:auto;align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-
|
|
4
|
+
const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:relative;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:center}.tooltip-dismissible{min-width:110px;width:auto}.tooltip-dismissible .close-button{cursor:pointer;position:relative;top:0px;order:2;padding-right:12px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{min-width:100px;width:auto;align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}";
|
|
5
5
|
const IfxTooltipStyle0 = tooltipCss;
|
|
6
6
|
|
|
7
7
|
const Tooltip = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n\n &.visible {\n display: flex !important;\n align-items: center;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n min-width: 110px;\n width: auto;\n\n .close-button {\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n top: 0px;\n //right: 0px;\n order: 2;\n padding-right: 12px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n min-width: 100px;\n width: auto;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -8px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -8px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -8px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -8px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -8px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -4px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -4px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n}","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <ifx-icon icon=\"cross16\" class=\"close-button\"></ifx-icon>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"version":3}
|
|
1
|
+
{"file":"ifx-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n\n &.visible {\n display: flex !important;\n align-items: center;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n min-width: 110px;\n width: auto;\n\n .close-button {\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n top: 0px;\n //right: 0px;\n order: 2;\n padding-right: 12px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n min-width: 100px;\n width: auto;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -7px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -7px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -3px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -3px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n}","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <ifx-icon icon=\"cross16\" class=\"close-button\"></ifx-icon>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as a}from"./p-0a568ace.js";export{s as setNonce}from"./p-0a568ace.js";import{g as t}from"./p-e1255160.js";const n=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};n().then((async e=>{await t();return a(JSON.parse('[["p-24e3de31",[[1,"ifx-faq"]]],["p-82045203",[[1,"ifx-overview-table"]]],["p-50636094",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-16656439",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-5f91db78",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-7eabd619",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"searchEnabled":[4,"search-enabled"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-81753c6c",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-6e68c241",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-96ce1fa1",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-ca2257f9",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-d4eebcf2",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32],"active":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-58cb9546",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-af089024",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-d2c425ed",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-efd6574f",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-cd46a402",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-e8dbf10d",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-f0e368d7",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-e4afcbdf",[[1,"ifx-step",{"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[8,"stepper-state"],"error":[4]}]]],["p-2bb0a05c",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-ae765aab",[[1,"ifx-tag",{"icon":[1]}]]],["p-17a49a85",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-6bb5fb2c",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-75c3ac69",[[1,"ifx-badge"]]],["p-78909930",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-403270a1",[[1,"ifx-breadcrumb"]]],["p-1ee65393",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-d85429ff",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-b1885625",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-5b21c249",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-8f9a5a4e",[[1,"ifx-card-links"]]],["p-05e26da7",[[1,"ifx-card-overline"]]],["p-eb0ff186",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-bf3914a9",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-752c4944",[[1,"ifx-dropdown-header"]]],["p-cb0e6b02",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-9932d9de",[[1,"ifx-dropdown-separator"]]],["p-de30b11d",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-c631a215",[[1,"ifx-footer-column"]]],["p-1141e680",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-3902ac2f",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-99e40833",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-61f79648",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-7955a017",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-48f09601",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-5f708470",[[1,"ifx-sidebar-title"]]],["p-aa4a0163",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-6b90be34",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-8c378874",[[1,"ifx-stepper",{"showNumber":[4,"show-number"],"activeStep":[2,"active-step"],"variant":[1],"internalActiveStep":[32]},null,{"activeStep":["activeStepHandler"]}]]],["p-55a54dbb",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a555fcc5",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-dd16a832",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-c6657d48",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-bb3fe9bd",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-8f45a6d7",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-42afae6f",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-34cf5fef",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-886ac778",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-e13098a6",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-cff0f3bf",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-214c7bac",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as i,b as a}from"./p-0a568ace.js";export{s as setNonce}from"./p-0a568ace.js";import{g as t}from"./p-e1255160.js";const n=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};n().then((async e=>{await t();return a(JSON.parse('[["p-24e3de31",[[1,"ifx-faq"]]],["p-82045203",[[1,"ifx-overview-table"]]],["p-50636094",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-16656439",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-5f91db78",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-7eabd619",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"searchEnabled":[4,"search-enabled"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-81753c6c",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-6e68c241",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-96ce1fa1",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-ca2257f9",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-d4eebcf2",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32],"active":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-58cb9546",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-af089024",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-d2c425ed",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-efd6574f",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-cd46a402",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-e8dbf10d",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-f0e368d7",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-e4afcbdf",[[1,"ifx-step",{"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[8,"stepper-state"],"error":[4]}]]],["p-2bb0a05c",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-ae765aab",[[1,"ifx-tag",{"icon":[1]}]]],["p-17a49a85",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-3acec2a9",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-75c3ac69",[[1,"ifx-badge"]]],["p-78909930",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-403270a1",[[1,"ifx-breadcrumb"]]],["p-1ee65393",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-d85429ff",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-b1885625",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-5b21c249",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-8f9a5a4e",[[1,"ifx-card-links"]]],["p-05e26da7",[[1,"ifx-card-overline"]]],["p-eb0ff186",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-bf3914a9",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-752c4944",[[1,"ifx-dropdown-header"]]],["p-cb0e6b02",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-9932d9de",[[1,"ifx-dropdown-separator"]]],["p-de30b11d",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-c631a215",[[1,"ifx-footer-column"]]],["p-1141e680",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-3902ac2f",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-99e40833",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-61f79648",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-7955a017",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-48f09601",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-5f708470",[[1,"ifx-sidebar-title"]]],["p-aa4a0163",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-6b90be34",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-8c378874",[[1,"ifx-stepper",{"showNumber":[4,"show-number"],"activeStep":[2,"active-step"],"variant":[1],"internalActiveStep":[32]},null,{"activeStep":["activeStepHandler"]}]]],["p-55a54dbb",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a555fcc5",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-dd16a832",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-c6657d48",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-bb3fe9bd",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-8f45a6d7",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-42afae6f",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-34cf5fef",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-886ac778",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-e13098a6",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-cff0f3bf",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-214c7bac",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as t,h as o,g as i}from"./p-0a568ace.js";import{c as e}from"./p-e459974a.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:relative;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:center}.tooltip-dismissible{min-width:110px;width:auto}.tooltip-dismissible .close-button{cursor:pointer;position:relative;top:0px;order:2;padding-right:12px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{min-width:100px;width:auto;align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,h as o,g as i}from"./p-0a568ace.js";import{c as e}from"./p-e459974a.js";const s=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:relative;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:center}.tooltip-dismissible{min-width:110px;width:auto}.tooltip-dismissible .close-button{cursor:pointer;position:relative;top:0px;order:2;padding-right:12px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{min-width:100px;width:auto;align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}';const l=s;const a=class{constructor(o){t(this,o);this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.icon=undefined}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=e(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const i=window.scrollX;const e=t.top+o+t.height/2;const s=t.left+i+t.width/2;if(this.position==="auto"){if(e>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const i={"tooltip-compact":true,visible:this.tooltipVisible};const e={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"2d3224ee3bf11fd19168397e22a4f753d61e69d7","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"49bf84037bf729fcee53383df11fe78543c65cdc"}),this.variant.toLowerCase()==="dismissible"&&o("div",{class:t},o("ifx-icon",{icon:"cross16",class:"close-button"}),o("div",{class:"tooltip-dismissible-content"},this.header&&o("div",{class:"tooltip-dismissible-header"},this.header),o("div",{class:"tooltip-dismissible-body"},this.text)),o("svg",{class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{class:i},this.text,o("svg",{class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{class:e},o("slot",{name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{class:"tooltip-extended-content"},this.header&&o("div",{class:"tooltip-extended-header"},this.header),o("div",{class:"tooltip-extended-body"},this.text)),o("svg",{class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return i(this)}static get watchers(){return{position:["positionChanged"]}}};a.style=l;export{a as ifx_tooltip};
|
|
2
|
+
//# sourceMappingURL=p-3acec2a9.entry.js.map
|
package/dist/infineon-design-system-stencil/{p-6bb5fb2c.entry.js.map → p-3acec2a9.entry.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","this","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipVisible","tooltipEl","style","display","_b","update","onMouseLeave","onClick","variant","toLowerCase","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","position","determineBestPosition","internalPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","header","class","icon","text","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n\n &.visible {\n display: flex !important;\n align-items: center;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n min-width: 110px;\n width: auto;\n\n .close-button {\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n top: 0px;\n //right: 0px;\n order: 2;\n padding-right: 12px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n min-width: 100px;\n width: auto;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -8px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -8px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -8px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -8px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -8px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -8px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -4px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -4px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n}","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <ifx-icon icon=\"cross16\" class=\"close-button\"></ifx-icon>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","this","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipVisible","tooltipEl","style","display","_b","update","onMouseLeave","onClick","variant","toLowerCase","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","position","determineBestPosition","internalPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","header","class","icon","text","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: inline-flex;\n}\n\n.tooltip__container {\n display: inline-flex;\n flex-direction: column;\n position: relative;\n font-family: var(--ifx-font-family);\n\n}\n\n%tooltip-common {\n background-color: tokens.$ifxColorBaseBlack;\n border: 1px solid black;\n z-index: 1080;\n display: none;\n transition: opacity 0.3s;\n position: relative;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: tokens.$ifxColorBaseWhite;\n\n &.visible {\n display: flex !important;\n align-items: center;\n //min-width: 100px;\n //width: auto;\n }\n}\n\n\n\n.tooltip-dismissible {\n @extend %tooltip-common;\n min-width: 110px;\n width: auto;\n\n .close-button {\n //position: absolute;\n //top: tokens.$ifxSpace150;\n //right: tokens.$ifxSpace150;\n cursor: pointer;\n position: relative;\n top: 0px;\n //right: 0px;\n order: 2;\n padding-right: 12px;\n }\n\n .tooltip-dismissible-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n\n }\n\n .tooltip-dismissible-header,\n .tooltip-dismissible-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-dismissible-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-dismissible-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n.tooltip-compact {\n @extend %tooltip-common;\n padding: 4px 8px;\n text-align: center;\n flex-grow: 1;\n}\n\n\n.tooltip-extended {\n @extend %tooltip-common;\n min-width: 100px;\n width: auto;\n //padding-left: 36px; // Added this line, adjust as per your icon width\n //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n align-items: center;\n padding: tokens.$ifxSpace150;\n gap: 10px;\n\n .extended_icon {\n display: flex;\n align-self: flex-start;\n align-items: center;\n //padding-top: tokens.$ifxSpace150;\n cursor: pointer;\n }\n\n\n\n .tooltip-extended-content {\n display: flex;\n flex-direction: column;\n gap: tokens.$ifxSpace150;\n //padding: tokens.$ifxSpace150;\n flex-grow: 1;\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-wrap: anywhere;\n }\n\n .tooltip-extended-header,\n .tooltip-extended-body {\n font-size: 14px;\n font-style: normal;\n line-height: 20px;\n }\n\n .tooltip-extended-header {\n font-weight: tokens.$ifxFontWeightSemibold;\n }\n\n .tooltip-extended-body {\n font-weight: tokens.$ifxFontWeightRegular;\n }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n position: absolute;\n width: 8px;\n height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n // For 'top' placement\n &[data-placement=\"top\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 50%;\n transform: rotate(180deg) translateX(-50%);\n }\n\n // For 'top-start' placement\n &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n bottom: -7px;\n left: 10px; // Adjust as needed\n transform: rotate(180deg)\n }\n\n // For 'top-end' placement\n &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n bottom: -7px;\n right: 10px; // Adjust as needed\n transform: rotate(180deg);\n }\n\n // For 'bottom' placement\n &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 50%;\n transform: translateX(-50%);\n }\n\n // For 'bottom-start' placement\n &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n top: -7px;\n left: 10px; // Adjust as needed\n }\n\n // For 'bottom-end' placement\n &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n top: -7px;\n right: 10px; // Adjust as needed\n }\n\n // For 'left' placement\n &[data-placement=\"left\"]>.tooltip-arrow-svg {\n right: -3px;\n top: 50%;\n transform: rotate(90deg) translateY(-50%) translateX(-50%);\n }\n\n // For 'right' placement\n &[data-placement=\"right\"]>.tooltip-arrow-svg {\n left: -3px;\n top: 50%;\n transform: rotate(270deg) translateY(-50%) translateX(50%);\n }\n}\n\n\n.tooltip-compact {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-dismissible {\n @extend %tooltip-arrow-positions;\n}\n\n.tooltip-extended {\n @extend %tooltip-arrow-positions;\n}","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n\n@Component({\n tag: 'ifx-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n componentDidLoad() {\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <ifx-icon icon=\"cross16\" class=\"close-button\"></ifx-icon>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"],"mappings":"sFAAA,MAAMA,EAAa,0vHACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,yBAclBC,KAAAC,eAAsB,KA0GtBD,KAAAE,aAAe,K,SAEbC,EAAAH,KAAKC,kBAAc,MAAAE,SAAA,SAAAA,EAAEC,YAAYC,GAAOC,OAAAC,OAAAD,OAAAC,OAAA,GACnCF,GAAO,CACVG,UAAW,IACNH,EAAQG,UACX,CAAEC,KAAM,iBAAkBC,QAAS,WAKvCV,KAAKW,mBAGLX,KAAKY,eAAiB,KACtBZ,KAAKa,UAAUC,MAAMC,QAAU,SAG/BC,EAAAhB,KAAKC,kBAAc,MAAAe,SAAA,SAAAA,EAAEC,QAAQ,EAI/BjB,KAAAkB,aAAe,KACblB,KAAKY,eAAiB,MACtBZ,KAAKa,UAAUC,MAAMC,QAAU,MAAM,EAQvCf,KAAAmB,QAAU,K,MACR,GAAInB,KAAKoB,QAAQC,gBAAkB,cAAe,CAChDrB,KAAKW,mBACLX,KAAKY,gBAAkBZ,KAAKY,eAC5BZ,KAAKa,UAAUC,MAAMC,QAAUf,KAAKY,eAAiB,QAAU,QAC/DT,EAAAH,KAAKC,kBAAc,MAAAE,SAAA,SAAAA,EAAEc,Q,uBA1JU,M,YACV,G,UACF,G,cACoG,O,sBACS,O,aAE1E,U,oBAQ1D,iBAAAK,GACE,GAAGtB,KAAKoB,QAAQC,cAAcE,SAAW,GAAI,CAC3CvB,KAAKoB,QAAU,S,EAInB,gBAAAI,GACE,MAAMC,EAAczB,KAAK0B,GAAGC,WAAWC,cAAc,uBAAuBC,WAE5E,GAAG7B,KAAKoB,QAAQC,gBAAkB,WAAarB,KAAKoB,QAAQC,gBAAkB,WAAY,CACxFI,EAAYK,iBAAiB,aAAc9B,KAAKE,cAChDuB,EAAYK,iBAAiB,aAAc9B,KAAKkB,a,KAC7C,CACHO,EAAYK,iBAAiB,QAAS9B,KAAKmB,Q,EAI/C,gBAAAR,GACE,GAAIX,KAAKC,eAAgB,OAEzBD,KAAK+B,YAAc/B,KAAK0B,GAExB,GAAI1B,KAAKoB,QAAQC,gBAAkB,UAAW,CAC5CrB,KAAKa,UAAYb,KAAK0B,GAAGC,WAAWC,cAAc,mB,MAE/C,GAAI5B,KAAKoB,QAAQC,gBAAkB,cAAe,CACrDrB,KAAKa,UAAYb,KAAK0B,GAAGC,WAAWC,cAAc,uB,KAE/C,CACH5B,KAAKa,UAAYb,KAAK0B,GAAGC,WAAWC,cAAc,oB,CAIpD,MAAMI,EAAoBhC,KAAKiC,WAAa,OAASjC,KAAKkC,wBAA0BlC,KAAKiC,SAGzFjC,KAAKmC,iBAAmBH,EAExB,GAAIhC,KAAKa,WAAab,KAAK+B,YAAa,CAEtC/B,KAAKC,eAAiBmC,EAAapC,KAAK+B,YAAa/B,KAAKa,UAAW,CACnEwB,UAAWrC,KAAKmC,iBAChB3B,UAAW,CACT,CACEC,KAAM,SACNJ,QAAS,CACPiC,OAAQ,CAAC,EAAG,KAGhB,CACE7B,KAAM,QACNJ,QAAS,CACPkC,QAAS,yB,CASnBvC,KAAKa,UAAU2B,aAAa,iBAAkBR,E,CAKhD,qBAAAE,GAEE,MAAMO,EAAOzC,KAAK+B,YAAYW,wBAC9B,MAAMC,EAAUC,OAAOC,QACvB,MAAMC,EAAUF,OAAOG,QAEvB,MAAMC,EAAuBP,EAAKQ,IAAMN,EAAUF,EAAKS,OAAS,EAChE,MAAMC,EAAyBV,EAAKW,KAAON,EAAUL,EAAKY,MAAQ,EAElE,GAAIrD,KAAKiC,WAAa,OAAQ,CAC5B,GAAIe,EAAuBJ,OAAOU,YAAc,EAAG,CACjD,GAAIH,EAAyBP,OAAOW,WAAa,EAAG,CAClD,MAAO,S,KACF,CACL,MAAO,W,MAEJ,CACL,GAAIJ,EAAyBP,OAAOW,WAAa,EAAG,CAClD,MAAO,Y,KACF,CACL,MAAO,c,OAGN,CACL,OAAOvD,KAAKiC,Q,EAKhB,eAAAuB,CAAgBC,G,MACdzD,KAAKmC,iBAAmBsB,GACxBtD,EAAAH,KAAKC,kBAAc,MAAAE,SAAA,SAAAA,EAAEuD,UACrB1D,KAAKC,eAAiB,I,CAiCxB,oBAAA0D,G,OACExD,EAAAH,KAAKC,kBAAc,MAAAE,SAAA,SAAAA,EAAEuD,S,CAYvB,MAAAE,GACE,MAAMC,EAAqB,CACzB,sBAAuB,KACvBC,QAAW9D,KAAKY,gBAGlB,MAAMmD,EAAiB,CACrB,kBAAmB,KACnBD,QAAW9D,KAAKY,gBAGlB,MAAMoD,EAAkB,CACtB,mBAAoB,KACpBF,QAAW9D,KAAKY,gBAGlB,OACEqD,EAAA,OAAAC,IAAA,wDAAgB,0CAAyC,aAAalE,KAAKmE,OAAQC,MAAM,sBACvFH,EAAA,QAAAC,IAAA,6CAEClE,KAAKoB,QAAQC,gBAAkB,eAAiB4C,EAAA,OAAKG,MAAOP,GAC3DI,EAAA,YAAUI,KAAK,UAAUD,MAAM,iBAC/BH,EAAA,OAAKG,MAAM,+BACRpE,KAAKmE,QAAUF,EAAA,OAAKG,MAAM,8BAA8BpE,KAAKmE,QAC9DF,EAAA,OAAKG,MAAM,4BAA4BpE,KAAKsE,OAE9CL,EAAA,OAAKG,MAAM,oBAAoBf,MAAM,KAAKH,OAAO,IAAIqB,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACxFR,EAAA,QAAMS,GAAG,YAAYC,EAAE,qBAAqBH,KAAK,cAIpDxE,KAAKoB,QAAQC,gBAAkB,WAC9B4C,EAAA,OAAKG,MAAOL,GACT/D,KAAKsE,KACNL,EAAA,OAAKG,MAAM,oBAAoBf,MAAM,KAAKH,OAAO,IAAIqB,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACxFR,EAAA,QAAMS,GAAG,YAAYC,EAAE,qBAAqBH,KAAK,cAItDxE,KAAKoB,QAAQC,gBAAkB,YAC9B4C,EAAA,OAAKG,MAAOJ,GACVC,EAAA,QAAMxD,KAAK,QACRT,KAAKqE,KAAOJ,EAAA,OAAKG,MAAM,iBAAgBH,EAAA,YAAUI,KAAMrE,KAAKqE,QAC3DJ,EAAA,OAAKG,MAAM,gBAAgBK,MAAM,6BAA6BpB,MAAM,KAAKH,OAAO,KAAKsB,KAAK,OAAOD,QAAQ,aACvGN,EAAA,QAAMW,OAAO,OAAM,iBAAgB,QAAO,kBAAiB,QAAQD,EAAE,qFACrEV,EAAA,QAAMW,OAAO,OAAOD,EAAE,2EACtBV,EAAA,QAAMO,KAAK,OAAOG,EAAE,mDAI1BV,EAAA,OAAKG,MAAM,4BACRpE,KAAKmE,QAAUF,EAAA,OAAKG,MAAM,2BAA2BpE,KAAKmE,QAC3DF,EAAA,OAAKG,MAAM,yBAAyBpE,KAAKsE,OAE3CL,EAAA,OAAKG,MAAM,oBAAoBf,MAAM,KAAKH,OAAO,IAAIqB,QAAQ,WAAWC,KAAK,OAAOC,MAAM,8BACxFR,EAAA,QAAMS,GAAG,YAAYC,EAAE,qBAAqBH,KAAK,c"}
|
package/package.json
CHANGED