@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/table-advanced-version/filter-type-group/filter-search/filter-search.js

@@ -0,0 +1,216 @@
+import { h, } from "@stencil/core";
+export class FilterSearch {
+    host;
+    /** Display name/label for this filter input */
+    filterName;
+    /** Disables the filter and prevents user interaction */
+    disabled = false;
+    /** Current filter text/value */
+    filterValue;
+    /** Unique key/identifier for this filter */
+    filterKey;
+    showDeleteIcon = false;
+    /** Layout context for the filter */
+    filterOrientation = "sidebar"; //topbar
+    /** Placeholder text shown when input is empty */
+    placeholder;
+    /** Emitted when the filter/search value changes */
+    ifxFilterSearchChange;
+    valueChanged(newValue) {
+        this.host.setAttribute("value", newValue.toString());
+    }
+    handleFilterSearchChange(event) {
+        // Check if a search filter with the same filterName already exists
+        const existingFilter = this.host.parentElement.querySelector(`ifx-filter-search[filter-name="${this.filterName}"]`);
+        if (existingFilter && existingFilter !== this.host) {
+            throw new Error(`A search filter with the name '${this.filterName}' already exists.`);
+        }
+        // // Check if the filterName is 'search' and the filter is not the search component
+        // if (this.filterName === 'search' && this.filterKey !== 'text') {
+        //   throw new Error("The filter name 'search' is reserved for the search component.");
+        // }
+        this.filterValue = event.detail;
+        this.showDeleteIcon = this.filterValue !== "";
+        this.ifxFilterSearchChange.emit({
+            filterName: this.filterName,
+            filterValue: this.filterValue,
+            filterKey: this.filterKey,
+        }); // Emitting filterKey along with other properties
+    }
+    render() {
+        return (h("div", { key: '1721c6c72eb1a2afb0cd081f7bbf5a840b04c422', class: `${this.filterOrientation === "sidebar"
+                ? "sidebar-filter-search-wrapper"
+                : "topbar-filter-search-wrapper"}` }, h("div", { key: '2aead7b1c5726ced761bf0e50fcf4ef7f2a3594b', class: "filter-name" }, this.filterName), h("ifx-search-field", { key: '4cdc4f07da9c650c70af36ab877a98213376c685', placeholder: this.placeholder, "show-delete-icon": this.showDeleteIcon, disabled: this.disabled, value: this.filterValue })));
+    }
+    static get is() { return "ifx-filter-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["filter-search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["filter-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "filterName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display name/label for this filter input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the filter and prevents user interaction"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "filterValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current filter text/value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-value"
+            },
+            "filterKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique key/identifier for this filter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-key"
+            },
+            "filterOrientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout context for the filter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-orientation",
+                "defaultValue": "\"sidebar\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text shown when input is empty"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showDeleteIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxFilterSearchChange",
+                "name": "ifxFilterSearchChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the filter/search value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "ifxInput",
+                "method": "handleFilterSearchChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.css

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  font-family: var(--ifx-font-family);
+}
+
+.filter-type-group {
+  width: 260px;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.filter-type-group > ::slotted(*) {
+  margin-bottom: 8px;
+}

package/dist/collection/components/table-advanced-version/filter-type-group/filter-type-group.js

@@ -0,0 +1,231 @@
+import { Host, h, } from "@stencil/core";
+export class IfxFilterTypeGroup {
+    el;
+    selectedOptions = [];
+    /** Emitted when a sidebar filter is updated */
+    ifxSidebarFilterChange;
+    /** Toggles the Show/hide filter button */
+    showSidebarFiltersButton = true;
+    /** Notifies the parent table about the button visibility configuration. */
+    ifxShowSidebarFiltersButtonChange;
+    componentWillLoad() {
+        this.ifxShowSidebarFiltersButtonChange.emit(this.showSidebarFiltersButton);
+    }
+    /** Emits visibility changes made after initialization, including Storybook updates. */
+    handleButtonVisibilityChange(value) {
+        this.ifxShowSidebarFiltersButtonChange.emit(value);
+    }
+    /* If the component is ever removed and then reattached to the DOM,
+  connectedCallback ensures that the event listeners are properly set up again */
+    connectedCallback() {
+        this.el.addEventListener("ifxFilterAccordionChange", this.handleAccordionChange);
+        this.el.addEventListener("ifxFilterSearchChange", this.handleSearchChange);
+        window.addEventListener("ifxResetFiltersEvent", this.handleResetEvent);
+        window.addEventListener("ifxUpdateSidebarFilter", this.handleUpdateSidebarFilter);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifxFilterAccordionChange", this.handleAccordionChange);
+        this.el.removeEventListener("ifxFilterSearchChange", this.handleSearchChange);
+        window.removeEventListener("ifxResetFiltersEvent", this.handleResetEvent);
+    }
+    handleResetEvent = () => {
+        const accordionSlot = this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');
+        const filterAccordionSlottedElements = accordionSlot.assignedElements({ flatten: true });
+        filterAccordionSlottedElements.forEach((accordionElement) => {
+            const ifxLists = accordionElement.querySelectorAll("ifx-list");
+            ifxLists.forEach((ifxListElement) => {
+                ifxListElement.resetTrigger = !ifxListElement.resetTrigger;
+            });
+        });
+        const filterSearchSlot = this.el.shadowRoot.querySelector('slot[name="filter-search"]');
+        const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });
+        filterSearchSlottedElements.forEach((filterSearchWrapper) => {
+            const filterSearch = filterSearchWrapper.querySelector("ifx-filter-search");
+            const searchField = filterSearch.shadowRoot.querySelectorAll("ifx-search-field");
+            if (searchField.length > 0) {
+                searchField.forEach((searchFieldElement) => {
+                    searchFieldElement.value = "";
+                });
+            }
+        });
+        this.selectedOptions = [];
+        // Emit the change to inform any parent components that the filters have been reset
+        this.ifxSidebarFilterChange.emit(this.selectedOptions);
+    };
+    handleUpdateSidebarFilter = (event) => {
+        const { filterName } = event.detail;
+        const accordionSlot = this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');
+        const filterAccordionSlottedElements = accordionSlot
+            ? accordionSlot.assignedElements({ flatten: true })
+            : [];
+        filterAccordionSlottedElements.forEach((accordionElement) => {
+            const ifxLists = accordionElement.querySelectorAll("ifx-list");
+            ifxLists.forEach((ifxListElement) => {
+                if (ifxListElement.getAttribute("name") === filterName) {
+                    ifxListElement.resetTrigger = !ifxListElement.resetTrigger;
+                }
+            });
+        });
+        // Clear the search bar within the filter-search slot
+        const searchSlot = this.el.shadowRoot.querySelector('slot[name="filter-search"]');
+        const filterSearchSlottedElements = searchSlot
+            ? searchSlot.assignedNodes({ flatten: true })
+            : [];
+        filterSearchSlottedElements.forEach((searchElement) => {
+            if (searchElement.nodeType === Node.ELEMENT_NODE) {
+                // Identify the ifx-filter-search component within the slot
+                const filterSearchComponent = searchElement;
+                const searchField = filterSearchComponent.firstElementChild;
+                if (searchField) {
+                    searchField.setAttribute("value", "");
+                    searchField.dispatchEvent(new CustomEvent("ifxInput", {
+                        bubbles: true,
+                        composed: true,
+                        detail: "",
+                    })); // Trigger ifxInput event to reset
+                }
+            }
+        });
+        const newSelectedOptions = this.selectedOptions.map((option) => {
+            if (option.filterGroupName === filterName) {
+                return { ...option, selectedItems: [], value: "" };
+            }
+            return option;
+        });
+        this.selectedOptions = newSelectedOptions;
+        this.ifxSidebarFilterChange.emit(this.selectedOptions);
+    };
+    handleAccordionChange = (event) => {
+        this.handleFilterChange(event);
+    };
+    handleSearchChange = (event) => {
+        // Call handleFilterChange with the created CustomEvent object
+        this.handleFilterChange(event);
+    };
+    handleFilterChange = (event) => {
+        // Create a new array to hold the new state
+        const newSelectedOptions = [...this.selectedOptions];
+        // Check the type of the event
+        if (event.type === "ifxFilterSearchChange") {
+            // Handle the ifxFilterSearchChange event
+            const { filterName, filterValue } = event.detail;
+            // Find the existing filter with the same filterName
+            const existingOptionIndex = newSelectedOptions.findIndex((option) => typeof option !== "string" && option.filterGroupName === filterName);
+            if (existingOptionIndex !== -1) {
+                // If an existing filter is found, update its value
+                newSelectedOptions[existingOptionIndex].value = filterValue;
+            }
+            else {
+                // If no existing filter is found, append the new filter
+                newSelectedOptions.push({
+                    filterGroupName: filterName,
+                    value: filterValue,
+                });
+            }
+        }
+        else if (event.type === "ifxFilterAccordionChange") {
+            const { filterGroupName, selectedItems } = event.detail;
+            // Find the existing filter group with the same filterGroupName
+            const existingOptionIndex = newSelectedOptions.findIndex((option) => option.filterGroupName === filterGroupName);
+            if (existingOptionIndex !== -1) {
+                // If an existing filter group is found, update its selectedItems
+                newSelectedOptions[existingOptionIndex] = {
+                    filterGroupName,
+                    selectedItems,
+                };
+            }
+            else {
+                // If no existing filter group is found, append the new filter group
+                newSelectedOptions.push({ filterGroupName, selectedItems });
+            }
+        }
+        // Update the state with the new selected options
+        this.selectedOptions = newSelectedOptions;
+        // Emit the entire selectedOptions array
+        this.ifxSidebarFilterChange.emit(this.selectedOptions);
+    };
+    render() {
+        return (h(Host, { key: '0230e86f6892cb8d4632401d1060984731a0c001' }, h("div", { key: 'e7f3e67996cb6921932a20e3f798c33f586b78e5', class: "filter-type-group" }, h("slot", { key: 'c607c9eb7783e79c834fb7a8ee9ea7b9afea5821', name: "filter-search" }), h("slot", { key: '899d03aa346ddece0fdb33b5c1ca5663807c1a37', name: "filter-accordion" }))));
+    }
+    static get is() { return "ifx-filter-type-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["filter-type-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["filter-type-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showSidebarFiltersButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the Show/hide filter button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-sidebar-filters-button",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxSidebarFilterChange",
+                "name": "ifxSidebarFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a sidebar filter is updated"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxShowSidebarFiltersButtonChange",
+                "name": "ifxShowSidebarFiltersButtonChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Notifies the parent table about the button visibility configuration."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "showSidebarFiltersButton",
+                "methodName": "handleButtonVisibilityChange"
+            }];
+    }
+}

package/dist/collection/components/table-advanced-version/filter-type-group/utils.js

@@ -0,0 +1,12 @@
+// utils.ts
+export function getInitiallySelectedItems(el) {
+    return Array.from(el.querySelectorAll("ifx-list-entry"))
+        .filter((entry) => entry.getAttribute("value") === "true")
+        .map((entry) => {
+        return {
+            label: entry.getAttribute("label"),
+            value: entry.getAttribute("value"),
+            type: entry.getAttribute("type"),
+        };
+    });
+}

package/dist/collection/components/table-advanced-version/iconButtonCellRenderer.js

@@ -0,0 +1,69 @@
+export class IconButtonCellRenderer {
+    eGui;
+    eIconButton;
+    eventListener;
+    init(params) {
+        this.createIconButton(params);
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.updateIconButton(params);
+        return true;
+    }
+    createIconButton(params) {
+        const config = params.data[params.colDef.field];
+        const options = params.colDef.cellRendererParams || {};
+        this.eGui = document.createElement("div");
+        this.eIconButton = document.createElement("ifx-icon-button");
+        if (this.hasRequiredKeys(config)) {
+            this.setIconButtonAttributes(config);
+            this.eGui.appendChild(this.eIconButton);
+            this.attachEventListener(options, params);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    updateIconButton(params) {
+        const config = params.data[params.colDef.field];
+        const options = params.colDef.cellRendererParams || {};
+        if (this.hasRequiredKeys(config)) {
+            this.setIconButtonAttributes(config);
+            this.detachEventListener();
+            this.attachEventListener(options, params);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    setIconButtonAttributes(config) {
+        this.eIconButton.setAttribute("disabled", config.disabled.toString());
+        this.eIconButton.setAttribute("variant", config.variant);
+        this.eIconButton.setAttribute("shape", config.shape);
+        this.eIconButton.setAttribute("size", config.size);
+        this.eIconButton.setAttribute("target", config.target);
+        this.eIconButton.setAttribute("href", config.href);
+        this.eIconButton.setAttribute("icon", config.icon);
+    }
+    attachEventListener(options, params) {
+        this.eventListener = (event) => {
+            if (options.onIconButtonClick) {
+                options.onIconButtonClick(params, event);
+            }
+        };
+        this.eIconButton.addEventListener("click", this.eventListener);
+    }
+    detachEventListener() {
+        if (this.eventListener) {
+            this.eIconButton.removeEventListener("click", this.eventListener);
+        }
+    }
+    hasRequiredKeys(config) {
+        return (config &&
+            config.variant !== "" &&
+            config.size !== "" &&
+            config.shape !== "");
+    }
+}

package/dist/collection/components/table-advanced-version/interfaces.js

@@ -0,0 +1,17 @@
+export const ButtonKeys = ['disabled', 'variant', 'size', 'target', 'href', 'theme', 'type', 'fullWidth', 'text'];
+export const IconButtonKeys = [
+    "disabled",
+    "variant",
+    "size",
+    "target",
+    "href",
+    "shape",
+    "icon",
+];
+export const StatusKeys = [
+    "color",
+    "label",
+    "border",
+];
+export const CheckboxKeys = ['disabled', 'error', 'size', 'checked', 'indeterminate'];
+export const TooltipKeys = ['text', 'position', 'value'];

package/dist/collection/components/table-advanced-version/linkCellRenderer.js

@@ -0,0 +1,50 @@
+export class LinkCellRenderer {
+    eGui;
+    eLink;
+    init(params) {
+        this.createLink(params);
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.updateLink(params);
+        return true;
+    }
+    createLink(params) {
+        const field = params.colDef?.field;
+        const config = (params.value ?? params.data?.[field]);
+        this.eGui = document.createElement("div");
+        this.eLink = document.createElement("ifx-link");
+        if (this.hasRequiredKeys(config)) {
+            this.setLinkAttributes(config);
+            this.eGui.appendChild(this.eLink);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    updateLink(params) {
+        const field = params.colDef?.field;
+        const config = (params.value ?? params.data?.[field]);
+        if (this.hasRequiredKeys(config)) {
+            this.setLinkAttributes(config);
+        }
+        else {
+            this.eGui.textContent = config ? String(config) : "";
+        }
+    }
+    setLinkAttributes(config) {
+        this.eLink.setAttribute("disabled", config.disabled?.toString());
+        this.eLink.setAttribute("variant", config.variant);
+        this.eLink.setAttribute("size", config.size);
+        this.eLink.setAttribute("target", config.target);
+        this.eLink.setAttribute("href", config.href);
+        if (config.download)
+            this.eLink.setAttribute("download", config.download);
+        this.eLink.textContent = config.text || "";
+    }
+    hasRequiredKeys(config) {
+        return !!(config && config.text && config.variant && config.size);
+    }
+}

package/dist/collection/components/table-advanced-version/list/list-entry/list-entry.css

@@ -0,0 +1,7 @@
+.list-entry {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  align-self: stretch;
+  font-family: var(--ifx-font-family);
+}