@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/popover/popover.js

@@ -0,0 +1,565 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../shared/utils/tracking";
+import { isNestedInIfxComponent } from "../../shared/utils/dom-utils";
+import { detectFramework } from "../../shared/utils/framework-detection";
+export class Popover {
+    el;
+    popoverVisible = false;
+    computedArrowPosition = {};
+    /** Title text displayed in the popover header */
+    popoverTitle = '';
+    /** Body text displayed in the popover content */
+    text = '';
+    /** Position of the popover relative to the trigger element */
+    position = 'auto';
+    /** Whether the popover is disabled */
+    disabled = false;
+    /** Whether the popover is initially open */
+    open = false;
+    /** Accessible label for the popover */
+    ariaLabelText = null;
+    /** Emitted when the popover is opened */
+    ifxOpen;
+    /** Fired when the component is closed. */
+    ifxClose;
+    static GAP = 12;
+    popoverEl;
+    triggerEl;
+    lastOpenTrigger = null;
+    openChanged(newValue) {
+        this.popoverVisible = newValue;
+        if (!this.popoverEl)
+            return;
+        if (newValue) {
+            this.popoverEl.style.visibility = 'hidden';
+            this.popoverEl.style.display = 'flex';
+            this.positionPopover();
+            this.popoverEl.style.visibility = 'visible';
+        }
+        else {
+            this.popoverEl.style.display = 'none';
+            this.popoverEl.style.visibility = '';
+        }
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent('ifx-popover', await framework);
+        }
+        this.popoverEl = this.el.shadowRoot.querySelector('.popover');
+        this.setupTriggerElement();
+        this.popoverVisible = this.open;
+        if (this.open) {
+            this.popoverEl.style.visibility = 'hidden';
+            this.popoverEl.style.display = 'flex';
+            this.positionPopover();
+            this.popoverEl.style.visibility = 'visible';
+            this.ifxOpen.emit({ trigger: this.lastOpenTrigger });
+        }
+        // Outside click closing disabled by design
+    }
+    setupTriggerElement() {
+        this.cleanupTriggerListeners();
+        const slotElements = Array.from(this.el.children);
+        this.triggerEl = slotElements[0] || this.el;
+        this.triggerEl.addEventListener('click', this.onClick);
+    }
+    disconnectedCallback() {
+        this.cleanupTriggerListeners();
+    }
+    cleanupTriggerListeners() {
+        if (!this.triggerEl)
+            return;
+        this.triggerEl.removeEventListener('click', this.onClick);
+    }
+    getViewportSpace(triggerRect) {
+        return {
+            above: triggerRect.top,
+            below: window.innerHeight - triggerRect.bottom,
+            left: triggerRect.left,
+            right: window.innerWidth - triggerRect.right
+        };
+    }
+    resetPositioningStyles() {
+        if (!this.popoverEl)
+            return;
+        this.popoverEl.style.top = '';
+        this.popoverEl.style.bottom = '';
+        this.popoverEl.style.left = '';
+        this.popoverEl.style.right = '';
+        this.popoverEl.style.transform = '';
+        this.popoverEl.style.visibility = '';
+    }
+    positionPopover() {
+        if (!this.popoverEl || !this.triggerEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const popoverRect = this.popoverEl.getBoundingClientRect();
+        const space = this.getViewportSpace(triggerRect);
+        let position = this.position;
+        if (position === 'auto') {
+            position = this.getBestPosition(triggerRect, popoverRect, space);
+        }
+        else {
+            position = this.validateAndAdjustPosition(position, popoverRect, space);
+        }
+        this.resetPositioningStyles();
+        const { popoverStyle, arrowStyle } = this.calculatePosition(triggerRect, popoverRect, position);
+        Object.assign(this.popoverEl.style, popoverStyle);
+        this.computedArrowPosition = arrowStyle;
+        this.popoverEl.setAttribute('data-placement', position);
+    }
+    getBestPosition(triggerRect, popoverRect, space) {
+        const gap = Popover.GAP;
+        const fitsV = (s) => s >= popoverRect.height + gap;
+        const fitsH = (s) => s >= popoverRect.width + gap;
+        const overhang = (popoverRect.width - triggerRect.width) / 2;
+        const canCenter = triggerRect.left - overhang >= 0 && triggerRect.right + overhang <= window.innerWidth;
+        const canStart = triggerRect.left + popoverRect.width <= window.innerWidth;
+        const align = (side) => canCenter ? side : canStart ? `${side}-start` : `${side}-end`;
+        if (fitsV(space.above))
+            return align('top');
+        if (fitsV(space.below))
+            return align('bottom');
+        if (fitsH(space.right))
+            return 'right';
+        if (fitsH(space.left))
+            return 'left';
+        return space.below >= space.above ? align('bottom') : align('top');
+    }
+    validateAndAdjustPosition(desiredPosition, popoverRect, space) {
+        const gap = Popover.GAP;
+        switch (desiredPosition) {
+            case 'top':
+            case 'top-start':
+            case 'top-end':
+                if (space.above >= popoverRect.height + gap)
+                    return desiredPosition;
+                if (space.below >= popoverRect.height + gap)
+                    return 'bottom';
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                return 'bottom';
+            case 'bottom':
+            case 'bottom-start':
+            case 'bottom-end':
+                if (space.below >= popoverRect.height + gap)
+                    return desiredPosition;
+                if (space.above >= popoverRect.height + gap)
+                    return 'top';
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                return 'top';
+            case 'left':
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                if (space.below >= popoverRect.height + gap)
+                    return 'bottom';
+                if (space.above >= popoverRect.height + gap)
+                    return 'top';
+                return 'right';
+            case 'right':
+                if (space.right >= popoverRect.width + gap)
+                    return 'right';
+                if (space.left >= popoverRect.width + gap)
+                    return 'left';
+                if (space.below >= popoverRect.height + gap)
+                    return 'bottom';
+                if (space.above >= popoverRect.height + gap)
+                    return 'top';
+                return 'left';
+            default:
+                return 'bottom';
+        }
+    }
+    calculatePosition(triggerRect, popoverRect, position) {
+        const gap = Popover.GAP;
+        const popoverStyle = {
+            position: 'absolute',
+            zIndex: '1000'
+        };
+        let arrowStyle = {};
+        switch (position) {
+            case 'top-start':
+                popoverStyle.left = `0px`;
+                popoverStyle.bottom = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    top: `100%`,
+                    left: '12px'
+                };
+                break;
+            case 'top-end':
+                popoverStyle.right = `0px`;
+                popoverStyle.bottom = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    top: `100%`,
+                    right: '12px'
+                };
+                break;
+            case 'top':
+                popoverStyle.left = `${(triggerRect.width / 2) - (popoverRect.width / 2)}px`;
+                popoverStyle.bottom = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    top: `100%`,
+                    left: '50%',
+                    transform: 'translateX(-50%)'
+                };
+                break;
+            case 'bottom-start':
+                popoverStyle.left = `0px`;
+                popoverStyle.top = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    bottom: `100%`,
+                    left: '12px',
+                    transform: 'rotate(180deg)'
+                };
+                break;
+            case 'bottom-end':
+                popoverStyle.right = `0px`;
+                popoverStyle.top = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    bottom: `100%`,
+                    right: '12px',
+                    transform: 'rotate(180deg)'
+                };
+                break;
+            case 'bottom':
+                popoverStyle.left = `${(triggerRect.width / 2) - (popoverRect.width / 2)}px`;
+                popoverStyle.top = `${triggerRect.height + gap}px`;
+                arrowStyle = {
+                    bottom: `100%`,
+                    left: '50%',
+                    transform: 'translateX(-50%) rotate(180deg)'
+                };
+                break;
+            case 'left':
+                popoverStyle.right = `${triggerRect.width + gap}px`;
+                popoverStyle.top = `${(triggerRect.height / 2) - (popoverRect.height / 2)}px`;
+                arrowStyle = {
+                    top: '50%',
+                    right: '-10px',
+                    transform: 'translateY(-50%) rotate(-90deg)'
+                };
+                break;
+            case 'right':
+                popoverStyle.left = `${triggerRect.width + gap}px`;
+                popoverStyle.top = `${(triggerRect.height / 2) - (popoverRect.height / 2)}px`;
+                arrowStyle = {
+                    top: '50%',
+                    left: '-10px',
+                    transform: 'translateY(-50%) rotate(90deg)'
+                };
+                break;
+        }
+        return { popoverStyle, arrowStyle };
+    }
+    positionChanged() {
+        if (this.popoverVisible) {
+            setTimeout(() => this.positionPopover(), 0);
+        }
+    }
+    /** Programmatically show the popover */
+    async show() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this.popoverEl.style.visibility = 'hidden';
+        this.popoverEl.style.display = 'flex';
+        this.positionPopover();
+        this.popoverEl.style.visibility = 'visible';
+        this.popoverVisible = true;
+        this.lastOpenTrigger = this.triggerEl || null;
+        this.ifxOpen.emit({ trigger: this.lastOpenTrigger });
+    }
+    /** Programmatically hide the popover */
+    async hide() {
+        this.open = false;
+        this.popoverVisible = false;
+        if (this.popoverEl) {
+            this.popoverEl.style.display = 'none';
+            this.popoverEl.style.visibility = '';
+        }
+        this.ifxClose.emit();
+    }
+    /** Programmatically toggle the popover visibility */
+    async toggle() {
+        if (this.popoverVisible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    onClick = (event) => {
+        event.stopPropagation();
+        this.lastOpenTrigger = this.triggerEl || event.currentTarget || null;
+        this.toggle();
+    };
+    onCloseClick = (event) => {
+        event.stopPropagation();
+        this.hide();
+    };
+    render() {
+        const popoverClass = {
+            'popover': true,
+            'visible': this.popoverVisible,
+            'popover--disabled': this.disabled
+        };
+        const arrowStyles = {
+            position: 'absolute',
+            ...this.computedArrowPosition
+        };
+        return (h("div", { key: '15f774e912b5427966231688385aff04da526869', class: "popover__container", "aria-label": this.ariaLabelText }, h("slot", { key: 'e5fd47a126d1c6c1be11fb1394fac65fff574f1e' }), h("div", { key: '4daa2535f92158e4dd26fe4ff3a16e19f0ee903d', class: popoverClass, role: "dialog", "aria-modal": "false" }, h("button", { key: 'dbdb04f3e229a8f15d713e00f8c17c9d338be9ff', "aria-label": "Close Popover", class: "popover-close", onClick: this.onCloseClick }, h("ifx-icon", { key: 'bd29a9fc230343d57ff4d0ed1a92a841ce037a07', icon: "cross16" })), h("div", { key: 'dc87a2c432d63b78a91cf88a415a246f7212473a', class: "popover-content" }, this.popoverTitle && h("div", { key: '78ddd6bad89ee21bea5cfec3675057fd9847c5e7', class: "popover-title" }, this.popoverTitle), this.text && h("div", { key: '0c1a856d0603d268e19eaa60fe8e50d916046a21', class: "popover-text" }, this.text), h("slot", { key: '3e5d4d7e80a1bb382ce2f041d4310338974a3d86', name: "content" })), h("svg", { key: 'cf61e03de9b1ba8d1c89e0ae54403678178142bf', class: "popover-arrow-svg", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", style: arrowStyles }, h("path", { key: '1c25f8f94aacd59b4b6c5fe90e52fbb5bd6cf909', d: "M6 8L0 0L12 0L6 8Z", fill: "currentColor" })))));
+    }
+    static get is() { return "ifx-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "popoverTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text displayed in the popover header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-title",
+                "defaultValue": "''"
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Body text displayed in the popover content"
+                },
+                "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": "Position of the popover relative to the trigger element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'auto'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover is initially open"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "popoverVisible": {},
+            "computedArrowPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxOpen",
+                "name": "ifxOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the popover is opened"
+                },
+                "complexType": {
+                    "original": "{ trigger: HTMLElement | null }",
+                    "resolved": "{ trigger: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "ifxClose",
+                "name": "ifxClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the component is closed."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically show the popover",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hide the popover",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically toggle the popover visibility",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }, {
+                "propName": "position",
+                "methodName": "positionChanged"
+            }];
+    }
+}

package/dist/collection/components/progress-bar/progress-bar.css

@@ -0,0 +1,38 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+
+.progress-bar {
+  height: 16px;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 20px;
+  border-radius: 1px;
+  width: 100%;
+  overflow: hidden;
+  background-color: #eeeded;
+  font-family: var(--ifx-font-family);
+}
+.progress-bar.s {
+  height: 4px;
+}
+.progress-bar .label {
+  font-style: normal;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #ffffff;
+}
+.progress-bar .progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: fit-content;
+  height: 100%;
+  background-color: #0A8276;
+  transition: width 0.2s ease;
+}