@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/tooltip/tooltip.js

@@ -0,0 +1,380 @@
+import { createPopper } from "@popperjs/core";
+import { h } from "@stencil/core";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+export class Tooltip {
+    el;
+    tooltipVisible = false;
+    /** Header text displayed at the top of the tooltip. */
+    header = "";
+    /** Main content text displayed inside the tooltip. */
+    text = "";
+    /** Preferred position of the tooltip relative to the trigger element. */
+    position = "auto";
+    internalPosition = "auto";
+    /** Accessible label for screen readers. */
+    ariaLabelText;
+    /** Visual style variant of the tooltip. */
+    variant = "compact";
+    /** Optional icon displayed in the tooltip. */
+    icon;
+    /** If true, appends the tooltip element to document.body for positioning. */
+    appendToBody = false;
+    tooltipContainer;
+    tooltipEl;
+    referenceEl;
+    popperInstance = null;
+    getVariant() {
+        const normalizedVariant = this.variant?.toLowerCase().trim();
+        if (normalizedVariant === 'compact' ||
+            normalizedVariant === 'dismissible' ||
+            normalizedVariant === 'extended') {
+            return normalizedVariant;
+        }
+        return 'compact';
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent('ifx-tooltip', await framework);
+        }
+        const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;
+        const variant = this.getVariant();
+        if (variant === 'compact' || variant === 'extended') {
+            slotElement.addEventListener('mouseenter', this.onMouseEnter);
+            slotElement.addEventListener('mouseleave', this.onMouseLeave);
+        }
+        else {
+            slotElement.addEventListener('click', this.onClick);
+        }
+    }
+    initializePopper() {
+        if (this.popperInstance)
+            return;
+        this.referenceEl = this.el;
+        let originalTooltipEl;
+        const variant = this.getVariant();
+        if (variant === 'compact') {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
+        }
+        else if (variant === 'dismissible') {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
+        }
+        else {
+            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
+        }
+        if (this.appendToBody && originalTooltipEl && !this.tooltipContainer) {
+            this.tooltipContainer = originalTooltipEl.cloneNode(true);
+            const computedStyle = window.getComputedStyle(originalTooltipEl);
+            Array.from(computedStyle).forEach(key => {
+                this.tooltipContainer.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
+            });
+            document.body.appendChild(this.tooltipContainer);
+            originalTooltipEl.style.visibility = 'hidden';
+            this.tooltipEl = this.tooltipContainer;
+        }
+        else if (this.appendToBody && this.tooltipContainer) {
+            this.tooltipEl = this.tooltipContainer;
+        }
+        else {
+            this.tooltipEl = originalTooltipEl;
+        }
+        let effectivePosition;
+        if (this.position === 'auto') {
+            effectivePosition = this.determineBestPosition();
+        }
+        else {
+            effectivePosition = this.position;
+        }
+        this.internalPosition = effectivePosition;
+        if (this.tooltipEl && this.referenceEl) {
+            this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
+                placement: this.internalPosition,
+                strategy: 'fixed',
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [0, 8],
+                        },
+                    },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            boundary: 'clippingParents',
+                            altBoundary: false,
+                            rootBoundary: 'viewport',
+                        },
+                    },
+                    {
+                        name: 'flip',
+                        enabled: this.position === 'auto',
+                        options: {
+                            fallbackPlacements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
+                            flipVariations: false,
+                        },
+                    },
+                    {
+                        name: 'computeStyles',
+                        options: {
+                            gpuAcceleration: false,
+                            adaptive: true,
+                        },
+                    },
+                ],
+            });
+        }
+        if (this.tooltipEl) {
+            this.tooltipEl.setAttribute('data-placement', this.internalPosition);
+        }
+    }
+    determineBestPosition() {
+        const rect = this.referenceEl.getBoundingClientRect();
+        const yOffset = window.scrollY;
+        const xOffset = window.scrollX;
+        const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
+        const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
+        if (verticalHalfwayPoint > window.innerHeight / 2) {
+            if (horizontalHalfwayPoint > window.innerWidth / 2) {
+                return 'top-end';
+            }
+            else {
+                return 'top-start';
+            }
+        }
+        else {
+            if (horizontalHalfwayPoint > window.innerWidth / 2) {
+                return 'bottom-end';
+            }
+            else {
+                return 'bottom-start';
+            }
+        }
+    }
+    positionChanged(newVal) {
+        this.internalPosition = newVal;
+        this.popperInstance?.destroy();
+        this.popperInstance = null; // Force re-initialization on next mouse enter
+    }
+    onMouseEnter = () => {
+        this.initializePopper();
+        this.tooltipVisible = true;
+        if (this.tooltipEl) {
+            this.tooltipEl.style.display = 'block';
+        }
+        this.popperInstance?.update();
+    };
+    onMouseLeave = () => {
+        this.tooltipVisible = false;
+        if (this.tooltipEl) {
+            this.tooltipEl.style.display = 'none';
+        }
+    };
+    disconnectedCallback() {
+        const slotElement = this.el.shadowRoot?.querySelector('.tooltip__container')?.firstChild;
+        if (slotElement) {
+            slotElement.removeEventListener('mouseenter', this.onMouseEnter);
+            slotElement.removeEventListener('mouseleave', this.onMouseLeave);
+            slotElement.removeEventListener('click', this.onClick);
+        }
+        this.popperInstance?.destroy();
+        if (this.tooltipContainer && this.tooltipContainer.parentNode) {
+            document.body.removeChild(this.tooltipContainer);
+        }
+    }
+    onClick = () => {
+        if (this.getVariant() === 'dismissible') {
+            this.initializePopper();
+            this.tooltipVisible = !this.tooltipVisible;
+            this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
+            this.popperInstance?.update();
+        }
+    };
+    onDismissClick = () => {
+        this.tooltipVisible = false;
+        this.tooltipEl.style.display = 'none';
+    };
+    render() {
+        const tooltipDismissible = {
+            "tooltip-dismissible": true,
+            visible: this.tooltipVisible,
+        };
+        const tooltipCompact = {
+            "tooltip-compact": true,
+            visible: this.tooltipVisible,
+        };
+        const tooltipExtended = {
+            "tooltip-extended": true,
+            visible: this.tooltipVisible,
+        };
+        return (h("div", { key: '9bf27bac66f598f51c1e30e27a6e10787160064c', "aria-label": this.ariaLabelText, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'd20fcd749e7d35cca65a592363600080b098d46e' }), this.getVariant() === 'dismissible' && (h("div", { key: '4a38c6ac152213456b088ec84f8bb6321037c40e', class: tooltipDismissible }, h("button", { key: '8201ab5b1d650cefb90ebbdfafa75aeb5cdcd0e6', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '5f214bc9ee9a35187703ba8a520ffd146524529d', icon: "cross16" })), h("div", { key: 'f653fd795afa4888f00c5daac7911d46882a0dad', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'f1eb33d83439723b581f95134f65e5414160ca1b', class: "tooltip-dismissible-header" }, this.header), h("div", { key: '00b599eb81849359c8bef7aa27655b890c63a43c', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'ef44cb3e7636f3f53ad3c206167d4699cfe14805', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c815a0a02b8e44ad3c2963bb546cc0d4ff3c7a5f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'compact' && (h("div", { key: '467347c7622a4e463eb0ab1de899bcf2e63e2871', class: tooltipCompact }, this.text, h("svg", { key: 'f38dcf83756ffb2bf5f0fdac3b9dc5178ebe445c', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '900f2b96ce647f566bbbbacfa0d8aa1b8d012f84', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'extended' && (h("div", { key: '62513e32ad9418c3f5d0015431e62a8ea82699e8', class: tooltipExtended }, h("slot", { key: 'd947b84184430e4e3abfd6ac1270a2ab07c77201', name: "icon" }, this.icon ? (h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon }))) : (h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("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" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" })))), h("div", { key: '58d52b35c0eeafaa1cdceb12f8bc8cb531313ade', class: "tooltip-extended-content" }, this.header && h("div", { key: '31b8e80497c10e662ac5da50665d09c4f1b7aee7', class: "tooltip-extended-header" }, this.header), h("div", { key: '777dac006f5554c30056a91901c2027acea21186', class: "tooltip-extended-body" }, this.text)), h("svg", { key: 'b6bdfb6860f70309569f68bb2b7830090636eb69', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cb12c1f69e4f3538f9679fcf47f470c7f142fb46', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))))));
+    }
+    static get is() { return "ifx-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header text displayed at the top of the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header",
+                "defaultValue": "\"\""
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main content text displayed inside the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text",
+                "defaultValue": "\"\""
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"bottom-start\" | \"top-start\" | \"left\" | \"bottom-end\" | \"top-end\" | \"right\" | \"bottom\" | \"top\" | \"auto\"",
+                    "resolved": "\"auto\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred position of the tooltip relative to the trigger element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "\"auto\""
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"compact\" | \"dismissible\" | \"extended\"",
+                    "resolved": "\"compact\" | \"dismissible\" | \"extended\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant of the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"compact\""
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon displayed in the tooltip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "appendToBody": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, appends the tooltip element to document.body for positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "append-to-body",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltipVisible": {},
+            "internalPosition": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "position",
+                "methodName": "positionChanged"
+            }];
+    }
+}

package/dist/collection/components/tree-view/tree-view-item.css

@@ -0,0 +1,112 @@
+.tree-item {
+  position: relative;
+  cursor: pointer;
+  list-style: none;
+}
+.tree-item.tree-item--expanded {
+  position: relative;
+}
+.tree-item.tree-item--has-children {
+  position: relative;
+}
+.tree-item.tree-item--has-children .tree-item__header > .tree-item__chevron-container {
+  display: flex;
+}
+.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header > .tree-item__chevron-container::after {
+  display: block;
+}
+.tree-item--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: #bfbbbb;
+}
+.tree-item__content {
+  display: flex;
+  flex-direction: row;
+}
+.tree-item__content:hover .tree-item__checkbox-container,
+.tree-item__content:hover .tree-item__header {
+  background-color: #f7f7f7;
+}
+.tree-item__checkbox-container {
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  padding: 4px;
+  background-color: #ffffff;
+}
+.tree-item__header {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  height: 20px;
+  padding-top: 4px;
+  padding-right: 16px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+}
+.tree-item__chevron-container {
+  display: none;
+  align-items: center;
+  margin-right: 8px;
+  height: 20px;
+}
+.tree-item__chevron-container::after {
+  --height-line-start: 28px;
+  display: none;
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: var(--height-line-start);
+  left: auto;
+  margin-left: 8px;
+  width: 1px;
+  height: calc(100% - var(--height-line-start));
+  background-color: #eeeded;
+}
+.tree-item--disabled .tree-item__chevron-container::after {
+  color: #eeeded;
+}
+.tree-item__chevron.chevron-down {
+  transform: rotate(90deg);
+}
+.tree-item__chevron.chevron-right {
+  transform: rotate(0);
+}
+.tree-item__label-icon-container {
+  display: flex;
+  align-items: center;
+}
+.tree-item__label-icon-container:focus {
+  outline: none;
+}
+.tree-item__label-icon-container:focus-visible {
+  outline: 2px solid #0a8276;
+  outline-offset: 2px;
+  border-radius: 1px;
+}
+.tree-item__icon-container {
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+.tree-item__icon-container ifx-icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.tree-item__icon-container ifx-icon.icon--hidden {
+  opacity: 0;
+}
+.tree-item__label {
+  padding-left: 8px;
+}
+.tree-item__children {
+  display: none;
+}
+.tree-item[aria-expanded=true] > .tree-item__children {
+  display: block;
+}