@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/table-basic-version/table.js

@@ -0,0 +1,318 @@
+import { Host, h } from "@stencil/core";
+import { AllCommunityModule, createGrid, ModuleRegistry, provideGlobalGridOptions, } from "ag-grid-community";
+import classNames from "classnames";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+import { CustomLoadingOverlay } from "./customLoadingOverlay";
+import { CustomNoRowsOverlay } from "./customNoRowsOverlay";
+export class Table {
+    gridOptions;
+    /** Column definitions for the table (array or JSON string). */
+    cols;
+    /** Row data for the table (array or JSON string). */
+    rows;
+    columnDefs = [];
+    rowData = [];
+    /** Row height preset (e.g. default, compact). */
+    rowHeight = "default";
+    /** Overall table height (e.g. fixed px value or 'auto'). */
+    tableHeight = "auto";
+    /** Visual style variant of the table (e.g. default, compact). */
+    variant = "default";
+    /** Position of the column values, either left or center. */
+    columnValuePosition = 'left';
+    uniqueKey;
+    host;
+    container;
+    gridApi;
+    gridInitialized = false;
+    componentWillLoad() {
+        ModuleRegistry.registerModules([AllCommunityModule]);
+        provideGlobalGridOptions({ theme: "legacy" });
+        this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
+        this.setColsAndRows(); //needed?
+        this.setGridOptions();
+    }
+    setGridOptions() {
+        this.gridOptions = {
+            rowHeight: this.rowHeight === "default" ? 40 : 32,
+            headerHeight: 40,
+            defaultColDef: {
+                resizable: true,
+                autoHeight: true,
+            },
+            suppressCellFocus: false,
+            enableCellTextSelection: true,
+            suppressDragLeaveHidesColumns: true,
+            suppressRowHoverHighlight: true,
+            onFirstDataRendered: this.onFirstDataRendered,
+            columnDefs: this.columnDefs,
+            rowData: this.rowData,
+            loadingOverlayComponent: CustomLoadingOverlay,
+            noRowsOverlayComponent: CustomNoRowsOverlay,
+            noRowsOverlayComponentParams: {
+                noRowsMessageFunc: () => "No rows found at: " + new Date().toLocaleTimeString(),
+            },
+            icons: {
+                sortAscending: '<ifx-icon icon="arrow-triangle-up-16"></ifx-icon>',
+                sortDescending: '<ifx-icon icon="arrow-triangle-down-16"></ifx-icon>',
+                sortUnSort: '<a class="unsort-icon-custom-color"><ifx-icon icon="arrow-triangle-vertikal-16"></ifx-icon></a>',
+            },
+            rowDragManaged: this.columnDefs.some((col) => col.dndSource === true)
+                ? true
+                : false,
+            animateRows: this.columnDefs.some((col) => col.dndSource === true)
+                ? true
+                : false,
+        };
+    }
+    setColsAndRows() {
+        if (typeof this.rows === "string" && typeof this.cols === "string") {
+            try {
+                if (this.cols) {
+                    this.columnDefs = JSON.parse(this.cols);
+                }
+                if (this.rows) {
+                    this.rowData = JSON.parse(this.rows);
+                }
+            }
+            catch (err) {
+                console.error("Failed to parse input:", err);
+            }
+        }
+        else if ((Array.isArray(this.rows) || typeof this.rows === "object") &&
+            (Array.isArray(this.cols) || typeof this.cols === "object")) {
+            this.columnDefs = this.cols;
+            this.rowData = this.rows;
+        }
+        else {
+            console.error("Unexpected value for cols and rows:", this.rows, this.cols);
+        }
+    }
+    getRowData() {
+        let rows = [];
+        if (typeof this.rows === "string") {
+            try {
+                if (this.rows) {
+                    rows = JSON.parse(this.rows);
+                }
+            }
+            catch (err) {
+                console.error("Failed to parse input:", err);
+            }
+        }
+        else if (Array.isArray(this.rows) || typeof this.rows === "object") {
+            rows = this.rows;
+        }
+        else {
+            console.error("Unexpected value for rows: ", this.rows);
+        }
+        return rows;
+    }
+    getColData() {
+        let cols = [];
+        if (typeof this.cols === "string") {
+            try {
+                if (this.cols) {
+                    cols = JSON.parse(this.cols);
+                }
+            }
+            catch (err) {
+                console.error("Failed to parse input:", err);
+            }
+        }
+        else if (Array.isArray(this.cols) || typeof this.cols === "object") {
+            cols = this.cols;
+        }
+        else {
+            console.error("Unexpected value for cols: ", this.cols);
+        }
+        return cols;
+    }
+    onFirstDataRendered(params) {
+        params.api.sizeColumnsToFit();
+    }
+    componentWillUpdate() {
+        this.setColsAndRows();
+        this.gridOptions.columnDefs = this.columnDefs;
+        this.gridOptions.rowData = this.rowData;
+        if (this.gridApi) {
+            this.gridApi.setGridOption("rowData", this.rowData);
+            this.gridApi.setGridOption("columnDefs", this.columnDefs);
+        }
+    }
+    async componentDidLoad() {
+        if (this.container && !this.gridInitialized) {
+            if (!isNestedInIfxComponent(this.host)) {
+                const framework = detectFramework();
+                trackComponent("ifx-basic-table", await framework);
+            }
+            this.gridApi = createGrid(this.container, this.gridOptions);
+            if (this.gridApi) {
+                this.gridApi.sizeColumnsToFit({
+                    defaultMinWidth: 100,
+                });
+                this.gridApi.setGridOption("columnDefs", this.getColData());
+                this.gridApi.setGridOption("rowData", this.getRowData());
+                this.gridInitialized = true;
+            }
+        }
+    }
+    getClassNames() {
+        return classNames(this.tableHeight === "auto" && "table-wrapper ag-root-wrapper-body", "table-wrapper");
+    }
+    getTableStyle() {
+        if (this.tableHeight !== "auto") {
+            return {
+                height: this.tableHeight,
+            };
+        }
+        return {};
+    }
+    render() {
+        return (h(Host, { key: 'f82dea92690d177da055ddcb41691d6f0e7441a0' }, h("div", { key: '01533aeeeca57df57193b522ed34efe3c3c9f70c', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '2dd588dd5b95fecee990c5c88b4c793dc32d258a', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === "zebra" ? "zebra" : ""} ${this.columnValuePosition === "center" ? "center" : "left"}`, style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+    }
+    static get is() { return "ifx-basic-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["table.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cols": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column definitions for the table (array or JSON string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols"
+            },
+            "rows": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[] | string",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row data for the table (array or JSON string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows"
+            },
+            "rowHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row height preset (e.g. default, compact)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-height",
+                "defaultValue": "\"default\""
+            },
+            "tableHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overall table height (e.g. fixed px value or 'auto')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-height",
+                "defaultValue": "\"auto\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style variant of the table (e.g. default, compact)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"default\""
+            },
+            "columnValuePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center'",
+                    "resolved": "\"center\" | \"left\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the column values, either left or center."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "column-value-position",
+                "defaultValue": "'left'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "gridOptions": {},
+            "columnDefs": {},
+            "rowData": {},
+            "uniqueKey": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/tabs/tab.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/tabs/tab.js

@@ -0,0 +1,240 @@
+import { h, } from "@stencil/core";
+export class IfxTab {
+    el;
+    /** Visible title text displayed in the tab header. */
+    header;
+    /** Disables the tab when true. */
+    disabled;
+    /** Icon displayed in the tab header. */
+    icon = '';
+    /** Position of the Icon relative to the header text. */
+    iconPosition = 'left';
+    /** Subline under the header, only for advanced variant. */
+    subline;
+    /** Subline position, either left or center. */
+    sublinePosition = 'left';
+    /** Text of the Advanced-Tab-Label */
+    label;
+    /** Number of the Advanced-Tab-Number */
+    number = 0;
+    /** Makes the tab header stick to the top of its scrolling oontainer */
+    positionSticky = false;
+    /** Emitted when tab header triggers a change (selection or property updates). */
+    tabHeaderChange;
+    componentWillUpdate() {
+        this.tabHeaderChange.emit(this.header);
+    }
+    render() {
+        return h("slot", { key: '4d6f00ec2248b1b76c45a6a8da46d039f356c6e8' });
+    }
+    static get is() { return "ifx-tab"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible title text displayed in the tab header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the tab when true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon displayed in the tab header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the Icon relative to the header text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'left'"
+            },
+            "subline": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subline under the header, only for advanced variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subline"
+            },
+            "sublinePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center'",
+                    "resolved": "\"center\" | \"left\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Subline position, either left or center."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subline-position",
+                "defaultValue": "'left'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the Advanced-Tab-Label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "number": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of the Advanced-Tab-Number"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "number",
+                "defaultValue": "0"
+            },
+            "positionSticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab header stick to the top of its scrolling oontainer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position-sticky",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabHeaderChange",
+                "name": "tabHeaderChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when tab header triggers a change (selection or property updates)."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}