@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/cjs/ifx-indicator.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+
+const indicatorCss = () => `:host{display:inline-flex;font-family:var(--ifx-font-family)}.indicator__container{font-family:var(--ifx-font-family)}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0a8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0a8276;font-family:var(--ifx-font-family)}.indicator__container .number__container .number__wrapper{font-family:var(--ifx-font-family);padding:0 4px;color:#ffffff;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#ffffff}.indicator__container .number__container.inverted .number__wrapper{color:#0a8276}`;
+
+const Indicator = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    filteredNumber;
+    /** Renders the indicator with an inverted color scheme for dark backgrounds. */
+    inverted = false;
+    /** Provide a short, descriptive text that explains the indicator's meaning or value. */
+    ariaLabelText;
+    /** Sets variant of the Indicator */
+    variant = 'number';
+    /** Numeric value to display when using the 'number' variant */
+    number = 0;
+    handleNumber() {
+        this.filteredNumber =
+            !isNaN(this.number) && this.number > 99 ? "99+" : this.number;
+    }
+    componentWillLoad() {
+        this.handleNumber();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-indicator", await framework);
+        }
+    }
+    componentWillUpdate() {
+        this.handleNumber();
+    }
+    render() {
+        return (index.h("div", { key: 'ef280addc9bbfbc744105b141368da9b547fc4f4', "aria-label-text": this.ariaLabelText, class: 'indicator__container' }, this.variant === 'number' &&
+            index.h("div", { key: 'b3fad711714ee0f4455f1866df1f516a98171a60', class: `number__container ${this.inverted ? 'inverted' : ""}` }, index.h("div", { key: '5471e2548156876d5da9de3a603d5bc28e437124', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && index.h("div", { key: '3fb361c0c3d98174ce7f14f2971105661a8e053b', class: `dot__wrapper` })));
+    }
+};
+Indicator.style = indicatorCss();
+
+exports.ifx_indicator = Indicator;

package/dist/cjs/ifx-link.cjs.entry.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var domUtils = require('./dom-utils-BdvOgC2b.js');
+var tracking = require('./tracking-BPjaTlNR.js');
+var urlUtils = require('./url-utils-CPE59br4.js');
+
+const linkCss = () => `:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0a8276;gap:8px;font-family:var(--ifx-font-family)}.link:visited{color:#06534b}.link:hover{cursor:pointer}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:1px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0a8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0a8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#bfbbbb}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0a8276}.link.title:active{color:#08665C}.link.title:visited{color:#06534b}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0a8276}.link.menu:active{color:#08665C}.link.menu:visited{color:#06534b}.link.small{font-size:0.875rem;line-height:1.25rem}.link.medium{font-size:1rem;line-height:1.5rem}.link.large{font-size:1.125rem;line-height:1.625rem}.link.extraLarge{font-size:1.25rem;line-height:1.75rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#bfbbbb;cursor:default;pointer-events:none}`;
+
+const Link = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * URL the link navigates to.
+     * @default undefined
+     */
+    href = undefined;
+    /**
+     * Target window for the link.
+     * @default "_self"
+     */
+    target = "_self";
+    /**
+     * Visual style variant of the link.
+     * @default "bold"
+     */
+    variant = "bold";
+    /**
+     * Font size of the link.
+     * @default "m"
+     */
+    size = "m";
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Optional filename or download hint for the linked resource.
+     * @default undefined
+     */
+    download;
+    /**
+     * Accessible label announced by assistive technologies.
+     * @default undefined
+     */
+    ariaLabelText;
+    internalHref = "";
+    internalTarget = "";
+    internalVariant = "";
+    setInternalStates() {
+        if (this.href) {
+            this.internalHref = this.href.trim();
+        }
+        else {
+            this.internalHref = undefined;
+        }
+        this.internalTarget = this.target.trim();
+        this.internalVariant = this.variant.trim().toLowerCase();
+    }
+    componentWillRender() {
+        this.setInternalStates();
+    }
+    async componentDidLoad() {
+        if (!domUtils.isNestedInIfxComponent(this.el)) {
+            const framework = tracking.detectFramework();
+            tracking.trackComponent("ifx-link", await framework);
+        }
+    }
+    render() {
+        return (index.h("a", { key: 'c692c2dc355a47c3ddd712efb76a271c6bff0e39', tabindex: "0", "aria-label": this.ariaLabelText, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : urlUtils.sanitizeHref(this.internalHref), download: this.download, target: this.internalTarget, class: this.linkClassNames() }, index.h("slot", { key: '8d36ec29095299c00ec3dd180c4f37b70149e624' })));
+    }
+    getSizeClass() {
+        const small = this.size === "s" ? "small" : null;
+        const medium = this.size === "m" ? "medium" : null;
+        const large = this.size === "l" ? "large" : null;
+        const extraLarge = this.size === "xl" ? "extraLarge" : null;
+        if (small) {
+            return small;
+        }
+        else if (medium) {
+            return medium;
+        }
+        else if (large) {
+            return large;
+        }
+        else if (extraLarge && this.internalVariant === "underlined") {
+            return "large";
+        }
+        else if (extraLarge && this.internalVariant !== "underlined") {
+            return extraLarge;
+        }
+        else
+            return "";
+    }
+    getVariantClass() {
+        const bold = this.internalVariant === "bold" ? "bold" : null;
+        const title = this.internalVariant === "title" ? "title" : null;
+        const underlined = this.internalVariant === "underlined" ? "underlined" : null;
+        const menu = this.internalVariant === "menu" ? "menu" : null;
+        if (bold) {
+            return bold;
+        }
+        else if (title) {
+            return title;
+        }
+        else if (underlined) {
+            return underlined;
+        }
+        else if (menu) {
+            return menu;
+        }
+        else
+            return bold;
+    }
+    linkClassNames() {
+        return index$1.classNames("link", "primary", this.getVariantClass(), this.getSizeClass(), this.disabled ? "disabled" : "");
+    }
+};
+Link.style = linkCss();
+
+exports.ifx_link = Link;

package/dist/cjs/ifx-list-entry.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const listEntryCss = () => `.list-entry{display:flex;align-items:center;margin-top:8px;align-self:stretch;font-family:var(--ifx-font-family)}`;
+
+const ListEntry = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxListEntryChange = index.createEvent(this, "ifxListEntryChange", 7);
+    }
+    get host() { return index.getElement(this); }
+    value;
+    label;
+    type;
+    ifxListEntryChange;
+    valueChanged(newValue) {
+        if (newValue) {
+            this.host.setAttribute("value", "true");
+        }
+        else {
+            this.host.removeAttribute("value");
+        }
+    }
+    handleFilterEntryChange(event) {
+        this.value = event.detail;
+        this.ifxListEntryChange.emit({
+            label: this.label,
+            value: this.value,
+            type: this.type,
+        });
+    }
+    render() {
+        return (index.h("div", { key: 'ce0db5a0d6c4c961d855981097b6bc75241e43b4', class: "wrapper" }, this.type === "checkbox" ? (index.h("div", { class: "list-entry" }, index.h("ifx-checkbox", { size: "s", checked: this.value }, this.label))) : (index.h("div", { class: "list-entry" }, index.h("ifx-radio-button", { size: "s", checked: this.value }, this.label)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+ListEntry.style = listEntryCss();
+
+exports.ifx_list_entry = ListEntry;

package/dist/cjs/ifx-list.cjs.entry.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var index = require('./index-BiOrxEib.js');
+
+const listCss = () => `.link-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;font-family:var(--ifx-font-family)}`;
+
+const List = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ifxListUpdate = index.createEvent(this, "ifxListUpdate", 7);
+    }
+    get el() { return index.getElement(this); }
+    expanded = false;
+    showMore = false;
+    selectedCount = 0;
+    totalItems = 0;
+    /** Unique name/identifier for the list */
+    name = "";
+    /** Max number of items displayed before collapsing/truncating */
+    maxVisibleItems = 6;
+    /** Selection type for list entries */
+    type = "checkbox"; //default value
+    /** External, mutable flag to trigger a programmic reset */
+    resetTrigger;
+    internalResetTrigger = false;
+    /** Emitted when the list's items or selections are updated */
+    ifxListUpdate;
+    observer;
+    handleTypeChange(newType) {
+        this.updateListEntriesType(newType);
+    }
+    resetTriggerChanged(newValue) {
+        if (newValue) {
+            this.reset();
+            this.resetTrigger = false; // Resetting the trigger after the action is performed
+        }
+    }
+    componentWillLoad() {
+        this.setupListenersAndObservers();
+        this.initializeList();
+    }
+    disconnectedCallback() {
+        this.cleanupListenersAndObservers();
+    }
+    reset() {
+        this.resetListEntries();
+        this.expanded = false;
+        this.showMore = false;
+        this.selectedCount = 0;
+        this.ifxListUpdate.emit({ name: this.name, selectedItems: [] });
+    }
+    render() {
+        return this.renderList();
+    }
+    // Refactored methods for clarity and maintainability
+    setupListenersAndObservers() {
+        this.el.addEventListener("ifxListEntryChange", this.handleCheckedChange);
+        this.observer = new MutationObserver(this.handleMutation);
+        this.observer.observe(this.el, { childList: true });
+    }
+    cleanupListenersAndObservers() {
+        this.el.removeEventListener("ifxListEntryChange", this.handleCheckedChange);
+        this.observer?.disconnect();
+    }
+    initializeList() {
+        this.selectedCount = this.getSelectedItems(this.el).length;
+        this.totalItems = this.getTotalItems();
+        this.updateListEntriesType(this.type);
+        this.checkRadioButtonConstraint();
+    }
+    updateListEntriesType(newType) {
+        const listEntries = Array.from(this.el.querySelectorAll("ifx-list-entry"));
+        listEntries.forEach((entry) => entry.setAttribute("type", newType));
+    }
+    resetListEntries() {
+        const listEntries = Array.from(this.el.querySelectorAll("ifx-list-entry"));
+        listEntries.forEach((entry) => {
+            entry.value = false;
+            entry.setAttribute("value", "false");
+        });
+    }
+    handleMutation = () => {
+        const newTotalItems = this.getTotalItems();
+        if (newTotalItems !== this.totalItems) {
+            this.totalItems = newTotalItems;
+            this.handleCheckedChange();
+        }
+        this.updateListEntriesType(this.type);
+    };
+    checkRadioButtonConstraint() {
+        if (this.type === "radio-button" && this.selectedCount > 1) {
+            this.resetListEntries(); // Reset all and let the user select again
+            this.selectedCount = 0;
+        }
+    }
+    getTotalItems() {
+        return this.el.querySelectorAll("ifx-list-entry").length;
+    }
+    toggleShowMore = (event) => {
+        event.stopPropagation();
+        this.showMore = !this.showMore;
+    };
+    getSelectedItems(el) {
+        return Array.from(el.querySelectorAll("ifx-list-entry"))
+            .filter((entry) => entry.getAttribute("value") === "true")
+            .map((entry) => ({
+            label: entry.getAttribute("label"),
+            value: entry.getAttribute("value"),
+            type: entry.getAttribute("type"),
+            element: entry,
+        }));
+    }
+    handleCheckedChange = (event) => {
+        // If the type of the changed entry is 'radio-button' and its value is true, deselect all other radio buttons
+        if (event && event.detail.type === "radio-button" && event.detail.value) {
+            const otherRadioButtons = Array.from(this.el.querySelectorAll("ifx-list-entry")).filter((entry) => entry.getAttribute("type") === "radio-button" &&
+                entry !== event.target);
+            otherRadioButtons.forEach((radioButton) => radioButton.setAttribute("value", "false"));
+        }
+        const selectedItems = this.getSelectedItems(this.el);
+        this.selectedCount = selectedItems.length;
+        this.ifxListUpdate.emit({ name: this.name, selectedItems });
+    };
+    renderList() {
+        const listEntries = Array.from(this.el.querySelectorAll("ifx-list-entry"));
+        const visibleItems = this.showMore
+            ? listEntries
+            : listEntries.slice(0, this.maxVisibleItems);
+        const remainingItems = listEntries.length - visibleItems.length;
+        return (index.h("div", { class: "list-wrapper" }, visibleItems.map((entry) => (index.h("slot", { name: entry.getAttribute("slot") }))), (remainingItems > 0 || this.showMore) && (index.h("div", { class: "link-wrapper", onClick: this.toggleShowMore }, index.h("ifx-icon", { key: this.showMore.toString(), icon: this.showMore ? "chevron-up-16" : "chevron-down-16" }), index.h("ifx-link", { size: "s", href: "", target: "_blank", variant: "underlined", disabled: false }, this.showMore ? "Show less" : `Show ${remainingItems} more`)))));
+    }
+    static get watchers() { return {
+        "type": [{
+                "handleTypeChange": 0
+            }],
+        "resetTrigger": [{
+                "resetTriggerChanged": 0
+            }]
+    }; }
+};
+List.style = listCss();
+
+exports.ifx_list = List;