@infineon/design-system 0.0.0-stage → 41.11.0

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

@@ -0,0 +1,32 @@
+export class CheckboxHeaderRenderer {
+    eGui;
+    eCheckbox;
+    params;
+    init(params) {
+        this.params = params;
+        this.createHeader();
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.params = { ...this.params, ...params };
+        return true;
+    }
+    createHeader() {
+        this.eGui = document.createElement("div");
+        this.eGui.style.display = "flex";
+        this.eGui.style.alignItems = "center";
+        this.eGui.style.justifyContent = "center";
+        this.eCheckbox = document.createElement("ifx-checkbox");
+        this.eCheckbox.setAttribute("size", "s");
+        this.eCheckbox.setAttribute("checked", "false");
+        this.eCheckbox.addEventListener("ifxChange", (event) => {
+            const checked = event.detail;
+            if (this.params.onSelectAll) {
+                this.params.onSelectAll(checked);
+            }
+        });
+        this.eGui.appendChild(this.eCheckbox);
+    }
+}

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

@@ -0,0 +1,15 @@
+export class CustomLoadingOverlay {
+    eGui;
+    init(_params) {
+        this.eGui = document.createElement("div");
+        this.eGui.innerHTML = `<div class="ag-overlay-loading-center" role="presentation">
+<ifx-spinner></ifx-spinner>
+            </div>`;
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(_params) {
+        return false;
+    }
+}

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

@@ -0,0 +1,17 @@
+export class CustomNoRowsOverlay {
+    eGui;
+    init(params) {
+        this.eGui = document.createElement("div");
+        this.eGui.innerHTML = `
+            <div role="presentation" class="ag-overlay-loading-center" >
+               ${params.noRowsMessageFunc()}
+            </div>
+        `;
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(_params) {
+        return false;
+    }
+}

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

@@ -0,0 +1,64 @@
+/* filter-bar.scss */
+:host {
+  display: block;
+  width: 100%;
+  font-family: var(--ifx-font-family);
+}
+
+.search-container {
+  display: flex;
+  width: calc(100% - 48px); /* Adjust width to account for padding */
+  padding-left: 24px;
+  padding-right: 24px;
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.components-container {
+  display: flex;
+  width: calc(100% - 48px); /* Adjust width to account for padding */
+  padding-left: 24px;
+  padding-right: 24px;
+  flex-direction: row;
+  align-items: flex-end;
+  align-content: flex-end;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.filter-slot-wrapper {
+  flex-grow: 1;
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */
+  .filter-buttons-wrapper {
+    order: 3; /* Keeps the button at the end/new row */
+    width: 100%; /* Takes full width to allow centering */
+    display: flex; /* Enables flexbox properties */
+    justify-content: center; /* Centers the button horizontally */
+    padding-top: 16px; /* Adds space above the button, adjust as needed */
+  }
+}
+@media (min-width: 720px) and (max-width: 1024px) {
+  .filter-slot-wrapper {
+    flex-basis: calc((100% - 16px) / 2);
+    max-width: calc((100% - 16px) / 2);
+  }
+}
+@media (min-width: 1025px) {
+  .filter-slot-wrapper {
+    flex-basis: auto;
+    max-width: 200px;
+  }
+  ::slotted([slot=filter-search]) {
+    max-width: 828px;
+  }
+}
+::slotted([slot=filter-search]) {
+  flex-grow: 1;
+  flex-basis: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,195 @@
+// FilterBar.tsx
+import { Host, h, } from "@stencil/core";
+export class FilterBar {
+    el;
+    selectedOptions = [];
+    /** Emitted when a topbar filter changes */
+    ifxTopbarFilterChange;
+    showAllFilters = false;
+    /** Maximum number of filters to show in the topbar before collapsing */
+    maxShownFilters = 4; // Default to 4, can be overridden by parent component
+    visibleSlots;
+    /** Controls "More / Less filters" Buttons */
+    async showMoreFilters(showMore) {
+        this.showAllFilters = showMore;
+        this.updateVisibleSlots();
+    }
+    /* 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("ifxFilterSelect", this.handleTopbarFilterChange);
+        this.el.addEventListener("ifxFilterSearchChange", this.handleSearchChange);
+        window.addEventListener("ifxResetFiltersEvent", this.handleResetEvent);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener("ifxFilterSelect", this.handleTopbarFilterChange);
+        this.el.removeEventListener("ifxFilterSearchChange", this.handleSearchChange);
+        window.removeEventListener("ifxResetFiltersEvent", this.handleResetEvent);
+    }
+    componentWillLoad() {
+        this.updateVisibleSlots();
+    }
+    // Modify updateVisibleSlots to use showAllFilters to determine the number of slots
+    updateVisibleSlots() {
+        this.visibleSlots = this.showAllFilters
+            ? Number.MAX_SAFE_INTEGER
+            : this.maxShownFilters;
+    }
+    handleFilterButtonsClick = (all) => {
+        this.showMoreFilters(all);
+    };
+    handleResetEvent = () => {
+        const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name="filter-search"]');
+        if (filterSearchSlot instanceof HTMLSlotElement) {
+            // Ensure it's treated as HTMLSlotElement
+            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.ifxTopbarFilterChange.emit(this.selectedOptions);
+    };
+    handleSearchChange = (event) => {
+        this.handleTopbarFilterChange(event);
+    };
+    handleTopbarFilterChange = (event) => {
+        const newSelectedOptions = [...this.selectedOptions];
+        if (event.type === "ifxFilterSearchChange") {
+            const { filterName, filterValue } = event.detail;
+            const existingOptionIndex = newSelectedOptions.findIndex((option) => option.filterName === filterName);
+            if (existingOptionIndex !== -1) {
+                // If an existing filter is found, update its value
+                newSelectedOptions[existingOptionIndex].filterValues = [filterValue];
+            }
+            else {
+                newSelectedOptions.push({
+                    filterName: filterName,
+                    filterValues: [filterValue],
+                    type: "text",
+                });
+            }
+        }
+        else if (event.type === "ifxFilterSelect") {
+            const { filterName, filterValues, type } = event.detail;
+            const existingOptionIndex = newSelectedOptions.findIndex((option) => option.filterName === filterName);
+            if (existingOptionIndex !== -1) {
+                newSelectedOptions[existingOptionIndex].filterValues = filterValues;
+                newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items
+            }
+            else {
+                newSelectedOptions.push({
+                    filterName: filterName,
+                    filterValues: filterValues,
+                    type: type,
+                });
+            }
+        }
+        this.selectedOptions = newSelectedOptions;
+        this.ifxTopbarFilterChange.emit(this.selectedOptions);
+    };
+    render() {
+        const safeVisibleSlots = Math.max(0, this.visibleSlots);
+        const actualNumberOfComponents = this.el.querySelectorAll("ifx-set-filter").length;
+        // Calculate slotsToShow safely
+        const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);
+        const slots = Array.from({ length: slotsToShow }, (_, i) => (h("div", { class: "filter-slot-wrapper" }, h("slot", { name: `filter-component-${i + 1}` }))));
+        return (h(Host, { key: 'fbdda1a578fe87df4c80b44fd07b62a20da83387' }, h("div", { key: '9d489cd102877435c2d03f88204543de53d784dc', class: "search-container" }, h("slot", { key: '72473788101d4215c21538783e33e4277b3cd8e9', name: "filter-search" }), " "), h("div", { key: '7246f13e02dbc31a62a918693c5d4892fd6e0995', class: "components-container" }, slots.length > 0 ? slots : h("slot", { name: "filter-component" }), this.showMoreFilters && (h("div", { key: '4195082e13de758ac97a0dae5d296d7c204b0a3c', class: "filter-buttons-wrapper", onClick: () => this.handleFilterButtonsClick(!this.showAllFilters) }, h("ifx-button", { key: '93ee70d28b44e37679be84b433dfa0ba77bb845e', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false" }, h("ifx-icon", { key: 'af709bfcda7e80e65d6fe57082a2187276d1e10c', icon: "filter-16" }), this.showAllFilters ? "Less filters" : "More filters"))))));
+    }
+    static get is() { return "ifx-filter-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["filter-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["filter-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "maxShownFilters": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of filters to show in the topbar before collapsing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-shown-filters",
+                "defaultValue": "4"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedOptions": {},
+            "showAllFilters": {},
+            "visibleSlots": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxTopbarFilterChange",
+                "name": "ifxTopbarFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a topbar filter changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "showMoreFilters": {
+                "complexType": {
+                    "signature": "(showMore: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "showMore",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Controls \"More / Less filters\" Buttons",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,70 @@
+.header {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  font-family: var(--ifx-font-family);
+}
+
+.text-and-icon {
+  display: flex;
+  padding: 12px 16px 12px 20px;
+  align-items: center;
+  gap: 16px;
+  flex: 1 0 0;
+}
+
+.header.expanded {
+  border-left: 3px solid #0a8276;
+}
+
+.text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+  color: #1d1d1d;
+  font-family: var(--ifx-font-family);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.hidden {
+  display: none;
+}
+
+.accordion {
+  border-bottom: 1px solid #eeeded;
+}
+
+.filter-accordion-container {
+  display: flex;
+  padding: 8px 16px 16px 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  border-left: 3px solid #0a8276;
+}
+
+::slotted(ifx-filter-entry:nth-child(n+7)) {
+  display: none;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--ifx-font-family);
+}
+
+.show-more ::slotted(ifx-filter-entry:nth-child(n+7)) {
+  display: block;
+}
+
+.show-more .show-more-link {
+  display: none;
+}

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

@@ -0,0 +1,124 @@
+import { h, } from "@stencil/core";
+import { getInitiallySelectedItems } from "../utils";
+export class FilterAccordion {
+    initialized = false;
+    el;
+    expanded = false;
+    /** Max number of items to display before truncating/collapsing the list */
+    maxVisibleItems;
+    count = 0;
+    totalItems = 0;
+    /** Identifier/label for the filter group */
+    filterGroupName = "";
+    /** Emitted when the filter accordion`s state or selection changes */
+    ifxFilterAccordionChange;
+    componentWillLoad() {
+        this.el.addEventListener("ifxListUpdate", this.handleCheckedChange);
+    }
+    componentDidLoad() {
+        if (!this.initialized) {
+            const selectedItems = getInitiallySelectedItems(this.el);
+            this.count = selectedItems.length;
+            this.initialized = true; // Prevent further execution in future calls
+        }
+    }
+    handleCheckedChange = (event) => {
+        const selectedItems = event.detail.selectedItems;
+        this.count = selectedItems.length;
+        this.ifxFilterAccordionChange.emit({
+            filterGroupName: this.filterGroupName,
+            selectedItems,
+        });
+    };
+    disconnectedCallback() {
+        this.el.removeEventListener("ifxListUpdate", this.handleCheckedChange);
+    }
+    toggleAccordion = (event) => {
+        event.stopPropagation();
+        this.expanded = !this.expanded;
+    };
+    render() {
+        return (h("div", { key: '16c2b36c5afcae7576d83e37d1ae89b54dd08558', class: `accordion ${this.expanded ? "expanded" : ""}` }, h("div", { key: 'f1ffd403cdc35c563a4b2c8c6419ed4c3d206dae', class: `header ${this.expanded ? "expanded" : ""}`, onClick: this.toggleAccordion }, h("div", { key: '762557b757d22758790db924715d880631009915', class: `text-and-icon ${this.expanded ? "expanded" : ""}` }, h("div", { key: '4156441a8e1de2041b1e53f5b75b31d2f4026b26', class: "text" }, h("span", { key: '59f19fac72ccfa6506b9308386e12a5789d2a8e9' }, this.filterGroupName), h("ifx-indicator", { key: 'd4a2e2fa72f4f9b03f091eca1831681b8c2d0056', variant: "number", number: this.count })), h("ifx-icon", { key: '1e130e0f5e10df759e3203bc6b52a80407b8ea41', class: this.expanded ? "" : "hidden", icon: "minus-16", onClick: this.toggleAccordion }), h("ifx-icon", { key: '548beeb37a1ff352c417311a9f0ebda0500adcd2', class: this.expanded ? "hidden" : "", icon: "plus-16", onClick: this.toggleAccordion }))), this.expanded && (h("div", { key: 'dc187cb6f90f862345de8d7fc9977ca3b63d4e68', class: "filter-accordion-container" }, h("slot", { key: '47088c1788c976524fd7b0d5f0ae1c059b799861', name: "list" })))));
+    }
+    static get is() { return "ifx-filter-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["filter-accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["filter-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "maxVisibleItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max number of items to display before truncating/collapsing the list"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible-items"
+            },
+            "filterGroupName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"\"",
+                    "resolved": "\"\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier/label for the filter group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-group-name",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "count": {},
+            "totalItems": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxFilterAccordionChange",
+                "name": "ifxFilterAccordionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the filter accordion`s state or selection changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,30 @@
+.sidebar-filter-search-wrapper {
+  display: flex;
+  padding: 12px 16px 16px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 4px;
+  font-family: var(--ifx-font-family);
+  background: #eeeded;
+}
+
+.topbar-filter-search-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 4px;
+  font-family: var(--ifx-font-family);
+}
+
+.topbar-filter-search-wrapper ifx-search-field {
+  width: 100%; /* Ensure ifx-search-field takes up full width */
+}
+
+.filter-name {
+  font-family: var(--ifx-font-family);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 600;
+}