udp-stencil-component-library 1.0.0

package/dist/components/api-method-grid.js.map

@@ -0,0 +1 @@
+{"file":"api-method-grid.js","mappings":"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","names":["ApiMethodGrid","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/grid/new-grid/datasources/apiMethodDatasource.ts","src/components/my-component/UI/grid/new-grid/api-method-grid.tsx"],"sourcesContent":["import { FilterOperators } from '../../../../../../udp-utilities/grid/models/udp-models';\nimport { executeQueryAdHoc } from '../../../../../../udp-utilities/api-udp/apiUtils';\nimport { ConfigService } from 'src/udp-utilities/api-config';\nimport { Search } from '../interfaces/searchObject';\n\nexport const apiMethodDataSource = (apiMethodId: string, customSearchObject: Search) => {\n  return {\n    async getRows(params) {\n      const { startRow, endRow, filterModel, sortModel } = params.request;\n\n      const pageSize = endRow - startRow; // Dynamic page size from grid\n      const pageNumber = Math.floor(startRow / pageSize) + 1;\n      const searchObject: Search = {\n        pageNumber: pageNumber,\n        pageSize: pageSize,\n        filterElements: [],\n        filterGroups: [],\n        orderElements: [],\n        groupingType: '',\n        groupProperty: [],\n        groupOperationList: [],\n        eagerLoad: false,\n        logicalSearchOperator: 1,\n        ...customSearchObject,\n      };\n\n      //1. convert ag grid sort model to udp search object\n      if (Array.isArray(sortModel) && sortModel.length > 0) {\n        const orderElements = searchObject.orderElements || [];\n        sortModel.forEach(sortItem => {\n          if (sortItem && sortItem.colId) {\n            const formattedPropertyName = sortItem.colId.charAt(0).toUpperCase() + sortItem.colId.slice(1);\n            const element = orderElements.find(element => element.sortColumn === formattedPropertyName);\n            if (element) {\n              element.sortDirection = sortItem.sort.toUpperCase();\n            } else {\n              orderElements.push({\n                sortColumn: formattedPropertyName,\n                sortDirection: sortItem.sort.toUpperCase(),\n              });\n            }\n          }\n        });\n      }\n\n      //2. convert ag grid filter model to udp search object\n      if (Object.keys(filterModel).length) {\n        const filterElements = searchObject.filterElements || [];\n        Object.keys(filterModel).forEach(key => {\n          const filterItem = filterModel[key];\n          const formattedPropertyName = key.charAt(0).toUpperCase() + key.slice(1);\n          const element = filterElements.find(element => element.searchField === formattedPropertyName);\n          if (element) {\n            element.searchValue = filterItem.filter;\n            element.searchOperator = FilterOperators[filterItem.type];\n          } else {\n            filterElements.push({\n              searchField: formattedPropertyName,\n              searchValue: filterItem.filter,\n              searchOperator: FilterOperators[filterItem.type],\n              searchValueType: 1,\n              groupId: 1,\n            });\n          }\n        });\n      }\n\n      const response = await executeQueryAdHoc(\n        searchObject,\n        apiMethodId,\n        ConfigService.integrationV1ApiUrl,\n        false\n      ).catch(e => {\n        console.log(e);\n      });\n\n      const rowData = response;\n\n      if (!rowData || rowData.pageList.length === 0) {\n        params.success({\n          rowData: [],\n          rowCount: 0,\n        });\n      } else {\n        params.success({\n          rowData: rowData.pageList,\n          rowCount: parseInt(rowData.total),\n        });\n      }\n    },\n  };\n};\n","import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { GridApi, IServerSideDatasource, ColDef } from 'ag-grid-community-v33';\nimport { apiMethodDataSource } from './datasources/apiMethodDatasource';\nimport { Search } from './interfaces/searchObject';\n\n@Component({\n  tag: 'api-method-grid',\n  shadow: false,\n})\n\nexport class ApiMethodGrid {\n  @Prop() apiMethodId: string;\n  @Prop() columnDefs: Array<ColDef> = [];\n  @Prop() customSearchObject: Search;\n\n  @State() dataSource: IServerSideDatasource;\n\n  @Event() apiMethodGridReady!: EventEmitter<GridApi>;\n\n  private gridApi!: GridApi;\n\n  private handleApiMethodGridReady(event: CustomEvent<GridApi>) {\n    this.gridApi = event.detail;\n    this.apiMethodGridReady.emit(this.gridApi);\n    this.updateDataSource();\n  }\n\n  @Watch('apiMethodId')\n  @Watch('customSearchObject')\n  updateDataSource() {\n    if (this.apiMethodId) {\n      this.dataSource = apiMethodDataSource(this.apiMethodId, this.customSearchObject);\n    }\n  }\n\n  render() {\n    return <server-side-grid onServerSideGridReady={e => this.handleApiMethodGridReady(e)} dataSource={this.dataSource} columnDefs={this.columnDefs}/>;\n  }\n}\n"],"version":3}

package/dist/components/app-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AppBar extends Components.AppBar, HTMLElement {}
+export const AppBar: {
+    prototype: AppBar;
+    new (): AppBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/app-bar.js

@@ -0,0 +1,9 @@
+import { A as AppBar$1, d as defineCustomElement$1 } from './p-BR5QkT_5.js';
+
+const AppBar = AppBar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AppBar, defineCustomElement };
+//# sourceMappingURL=app-bar.js.map
+
+//# sourceMappingURL=app-bar.js.map

package/dist/components/app-bar.js.map

@@ -0,0 +1 @@
+{"file":"app-bar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/chart-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ChartContainer extends Components.ChartContainer, HTMLElement {}
+export const ChartContainer: {
+    prototype: ChartContainer;
+    new (): ChartContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/chart-container.js

@@ -0,0 +1,9 @@
+import { C as ChartContainer$1, d as defineCustomElement$1 } from './p-BEwTqpWE.js';
+
+const ChartContainer = ChartContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChartContainer, defineCustomElement };
+//# sourceMappingURL=chart-container.js.map
+
+//# sourceMappingURL=chart-container.js.map

package/dist/components/chart-container.js.map

@@ -0,0 +1 @@
+{"file":"chart-container.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/chart-kpi.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ChartKpi extends Components.ChartKpi, HTMLElement {}
+export const ChartKpi: {
+    prototype: ChartKpi;
+    new (): ChartKpi;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/chart-kpi.js

@@ -0,0 +1,9 @@
+import { C as ChartKpi$1, d as defineCustomElement$1 } from './p-TrvRIo8e.js';
+
+const ChartKpi = ChartKpi$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChartKpi, defineCustomElement };
+//# sourceMappingURL=chart-kpi.js.map
+
+//# sourceMappingURL=chart-kpi.js.map

package/dist/components/chart-kpi.js.map

@@ -0,0 +1 @@
+{"file":"chart-kpi.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/check-box-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CheckBoxGroup extends Components.CheckBoxGroup, HTMLElement {}
+export const CheckBoxGroup: {
+    prototype: CheckBoxGroup;
+    new (): CheckBoxGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/check-box-group.js

@@ -0,0 +1,9 @@
+import { C as CheckboxGroup, d as defineCustomElement$1 } from './p-BU706xtx.js';
+
+const CheckBoxGroup = CheckboxGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { CheckBoxGroup, defineCustomElement };
+//# sourceMappingURL=check-box-group.js.map
+
+//# sourceMappingURL=check-box-group.js.map

package/dist/components/check-box-group.js.map

@@ -0,0 +1 @@
+{"file":"check-box-group.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/check-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CheckBox extends Components.CheckBox, HTMLElement {}
+export const CheckBox: {
+    prototype: CheckBox;
+    new (): CheckBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/check-box.js

@@ -0,0 +1,9 @@
+import { C as Checkbox, d as defineCustomElement$1 } from './p-cJ5N3THn.js';
+
+const CheckBox = Checkbox;
+const defineCustomElement = defineCustomElement$1;
+
+export { CheckBox, defineCustomElement };
+//# sourceMappingURL=check-box.js.map
+
+//# sourceMappingURL=check-box.js.map

package/dist/components/check-box.js.map

@@ -0,0 +1 @@
+{"file":"check-box.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/chip-section.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ChipSection extends Components.ChipSection, HTMLElement {}
+export const ChipSection: {
+    prototype: ChipSection;
+    new (): ChipSection;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/chip-section.js

@@ -0,0 +1,177 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$5 } from './p-B0DDn0I9.js';
+import { d as defineCustomElement$4 } from './p-BmbhN5rI.js';
+import { d as defineCustomElement$3 } from './p-CpGuVcRn.js';
+import { d as defineCustomElement$2 } from './p-DkppmXNM.js';
+
+const chipSectionCss = ".wrapper{display:flex;gap:8px;flex-wrap:no-wrap;align-items:center;flex-grow:1;width:100%;}.chipHolder{display:flex;gap:8px;flex-wrap:no-wrap;align-items:center;flex:1 1 auto;overflow:scroll}.chipHolder::-webkit-scrollbar{display:none}.viewChip{background-color:var(--primary-color);color:white;max-width:150px;transition:opacity 0.3s ease}.filterChipMenuIcon{background:grey;padding:8px;color:#3f51b5;}.additionalFilterChip{}.KPI{margin-left:auto;display:flex;gap:8px;color:grey;width:auto}.kpiValue{color:black;font-size:1.1em}.kpiItem{display:flex;justify-content:center;width:max-content}.kpiLabel{width:max-content;margin-right:8px;}.clickedChip{background-color:var(--primary-color);color:white;max-width:150px}";
+
+const ChipSection$1 = /*@__PURE__*/ proxyCustomElement(class ChipSection extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Props
+        this.filterChips = [];
+        this.viewChips = [];
+        this.menuItems = [];
+        this.additionalFilterChips = [];
+        this.hideKpiSection = false;
+        this.kpiValues = [];
+        this.maxKPIsDisplayed = 4;
+        this.anchorEl = null;
+        this.chipsReceived = false;
+        this.selectedFilterChip = null;
+        // Helper Functions
+        this.abbrNum = (number, decPlaces) => {
+            if (typeof number === 'string' && !isNaN(Number(number))) {
+                number = Number(number);
+            }
+            else if (typeof number !== 'number') {
+                throw new Error('The input must be a number or a string that can be converted to a number.');
+            }
+            if (typeof decPlaces !== 'number') {
+                return null;
+            }
+            decPlaces = Math.pow(10, decPlaces);
+            let abbrev = ['k', 'm', 'b', 't'];
+            for (let i = abbrev.length - 1; i >= 0; i--) {
+                let size = Math.pow(10, (i + 1) * 3);
+                if (size <= number) {
+                    number = Math.round((number * decPlaces) / size) / decPlaces;
+                    if (number === 1000 && i < abbrev.length - 1) {
+                        number = 1;
+                        i++;
+                    }
+                    number += abbrev[i];
+                    break;
+                }
+            }
+            return number;
+        };
+        this.isEmpty = (array) => Array.isArray(array) && array.length === 0;
+        this.abbreviateLabel = (label) => {
+            const maxLength = 10;
+            if (label.length > maxLength) {
+                const newLabel = label.slice(0, maxLength - 3) + '...';
+                return newLabel;
+            }
+            else {
+                return null;
+            }
+        };
+        this.handleFilterChipToggle = (chip) => {
+            this.selectedFilterChip = chip; // <-- changed here
+            if (typeof chip.onToggle === 'function') {
+                chip.onToggle();
+            }
+        };
+        this.handleFilterChipUntoggle = () => {
+            if (this.selectedFilterChip) {
+                // if the user wants extra functionality when the filter chip is untoggled, call the function
+                if (typeof this.selectedFilterChip.onUntoggle === 'function') {
+                    this.selectedFilterChip.onUntoggle();
+                }
+                this.selectedFilterChip = null; // <-- changed here
+            }
+        };
+    }
+    // Watchers and lifecycle methods
+    filterChipsChanged(newValue) {
+        if (!this.chipsReceived && newValue.length > 0) {
+            this.allFilterChips = newValue;
+            this.visibleFilterChips = newValue;
+        }
+    }
+    componentWillLoad() {
+        // Equivalent to useEffect
+        console.log("componentWillLoad in ChipSection", this.filterChips);
+        if (!this.chipsReceived && this.filterChips.length > 0) {
+            this.allFilterChips = this.filterChips;
+            this.visibleFilterChips = this.filterChips;
+        }
+    }
+    componentDidLoad() {
+        console.log("componentDidLoad in ChipSection");
+        this.chipSectionContainer = this.el.shadowRoot.querySelector('#chipSectionContainer');
+        this.viewChipsContainer = this.el.shadowRoot.querySelector('#viewChipsContainer');
+        this.filterChipsContainer = this.el.shadowRoot.querySelector('#filterChipsContainer');
+        this.additionalFilterChipsContainer = this.el.shadowRoot.querySelector('#additionalFilterChipsContainer');
+        this.kpiContainer = this.el.shadowRoot.querySelector('#kpiContainer');
+    }
+    handleClick(ev) {
+        console.log("Click event", ev);
+    }
+    render() {
+        console.log("Rendering ChipSection", this.visibleFilterChips);
+        return (h("div", { key: 'eab24a4db26da44f6ffc280c0939f8295d9ebb57', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '02895ced71cdb97a9a3379ed5b395b9a4df9547c', class: "chipHolder" }, h("div", { key: '8e42568a37786f3c26bcced865a94eb9eb84e230', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: '883a0a2e647eadb58e925e3d220548b5e12fcbbe', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '0611e3f4229953a55027a8f6dbc77e47135855cc', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
+            if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
+                console.log('returning null...');
+                return null;
+            }
+            return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
+        })), h("div", { key: '68a897298440f6a06f2f159ecb302432ab3cd74d', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '954cd87ff319be6985b16d528d61a05409268990', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "filterChips": ["filterChipsChanged"]
+    }; }
+    static get style() { return chipSectionCss; }
+}, [1, "chip-section", {
+        "filterChips": [16, "filter-chips"],
+        "viewChips": [16, "view-chips"],
+        "menuItems": [16, "menu-items"],
+        "additionalFilterChips": [16, "additional-filter-chips"],
+        "hideKpiSection": [4, "hide-kpi-section"],
+        "kpiValues": [16, "kpi-values"],
+        "maxKPIsDisplayed": [2, "max-k-p-is-displayed"],
+        "handleDelete": [16, "handle-delete"],
+        "allFilterChips": [32],
+        "visibleFilterChips": [32],
+        "anchorEl": [32],
+        "chipsReceived": [32],
+        "selectedFilterChip": [32]
+    }, [[2, "click", "handleClick"]], {
+        "filterChips": ["filterChipsChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["chip-section", "stencil-chip", "udp-dynamic-container-with-menu", "udp-pop-over", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "chip-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ChipSection$1);
+            }
+            break;
+        case "stencil-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "udp-dynamic-container-with-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "udp-pop-over":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ChipSection = ChipSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChipSection, defineCustomElement };
+//# sourceMappingURL=chip-section.js.map
+
+//# sourceMappingURL=chip-section.js.map

package/dist/components/chip-section.js.map

@@ -0,0 +1 @@
+{"file":"chip-section.js","mappings":"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","names":["ChipSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/udp-utilities/layout/udp-dynamic-container-with-menu/chip-section/chip-section.css?tag=chip-section&encapsulation=shadow","src/udp-utilities/layout/udp-dynamic-container-with-menu/chip-section/chip-section.tsx"],"sourcesContent":[".wrapper {\n    display: flex;\n    gap: 8px; /* You might need to adjust the spacing based on your theme.spacing */\n    flex-wrap: no-wrap;\n    /* background-color: #9fa8da80;  */\n    align-items: center;\n    flex-grow: 1;\n    width: 100%;\n    /* width: 500px; */\n  }\n  \n  .chipHolder {\n    display: flex;\n    gap: 8px;\n    flex-wrap: no-wrap;\n    align-items: center;\n    flex: 1 1 auto; /* Shorthand to allow the item to grow and shrink */\n    overflow: scroll;\n}\n\n  \n  .chipHolder::-webkit-scrollbar {\n    display: none;\n  }\n  \n  .viewChip {\n    background-color: var(--primary-color);\n    color: white;\n    max-width: 150px;\n    transition: opacity 0.3s ease;\n  }\n  \n  .filterChipMenuIcon {\n    background: grey; /* Change this to your theme.palette.common.grey */\n    padding: 8px; /* theme.spacing */\n    color: #3f51b5; /* theme.palette.primary.main */\n  }\n  \n  .additionalFilterChip {\n    /* Additional styles for your additional filter chip */\n  }\n  \n  .KPI {\n    margin-left: auto;\n    display: flex;\n    gap: 8px; /* theme.spacing */\n    color: grey;\n    width: auto;\n  }\n  \n  .kpiValue {\n    color: black;\n    font-size: 1.1em;\n  }\n  \n  .kpiItem {\n    display: flex;\n    justify-content: center;\n    width: max-content;\n  }\n  \n  .kpiLabel {\n    width: max-content;\n    margin-right: 8px; /* theme.spacing */\n  }\n  \n  .clickedChip {\n    background-color: var(--primary-color);\n    color: white;\n    max-width: 150px;\n  }\n  ","import { Component, h, Prop, State, Element, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'chip-section',\n  styleUrl: 'chip-section.css',\n  shadow: true\n})\nexport class ChipSection {\n  @Element() el: HTMLElement;\n\n  // Props\n  @Prop() filterChips: Array<any> = [];\n  @Prop() viewChips: Array<any> = [];\n  @Prop() menuItems: Array<any> = [];\n  @Prop() additionalFilterChips: Array<any> = [];\n  @Prop() hideKpiSection: boolean = false;\n  @Prop() kpiValues: Array<any> = [];\n  @Prop() maxKPIsDisplayed: number = 4;\n  @Prop() handleDelete: Function;\n\n  // States\n  @State() allFilterChips: Array<any>;\n  @State() visibleFilterChips: Array<any>;\n  @State() anchorEl: any = null;\n  @State() chipsReceived: boolean = false;\n  @State() selectedFilterChip: any = null;\n\n  chipSectionContainer!: HTMLElement;\n  viewChipsContainer!: HTMLElement;\n  filterChipsContainer!: HTMLElement;\n  additionalFilterChipsContainer!: HTMLElement;\n  kpiContainer!: HTMLElement;\n\n  // Watchers and lifecycle methods\n  @Watch('filterChips')\n  filterChipsChanged(newValue: any) {\n    if (!this.chipsReceived && newValue.length > 0) {\n      this.allFilterChips = newValue;\n      this.visibleFilterChips = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    // Equivalent to useEffect\n    console.log(\"componentWillLoad in ChipSection\", this.filterChips);\n    if (!this.chipsReceived && this.filterChips.length > 0) {\n      this.allFilterChips = this.filterChips;\n      this.visibleFilterChips = this.filterChips;\n    }\n  }\n\n  \n  componentDidLoad() {\n    console.log(\"componentDidLoad in ChipSection\");\n    this.chipSectionContainer = this.el.shadowRoot!.querySelector('#chipSectionContainer') as HTMLElement;\n    this.viewChipsContainer = this.el.shadowRoot!.querySelector('#viewChipsContainer') as HTMLElement;\n    this.filterChipsContainer = this.el.shadowRoot!.querySelector('#filterChipsContainer') as HTMLElement;\n    this.additionalFilterChipsContainer = this.el.shadowRoot!.querySelector('#additionalFilterChipsContainer') as HTMLElement;\n    this.kpiContainer = this.el.shadowRoot!.querySelector('#kpiContainer') as HTMLElement;\n  }\n\n  // Helper Functions\n    abbrNum =  (number, decPlaces) => {\n        if (typeof number === 'string' && !isNaN(Number(number))) {\n          number = Number(number);\n        } else if (typeof number !== 'number') {\n          throw new Error(\n            'The input must be a number or a string that can be converted to a number.'\n          );\n        }\n    \n        if (typeof decPlaces !== 'number') {\n          return null;\n        }\n    \n        decPlaces = Math.pow(10, decPlaces);\n        let abbrev = ['k', 'm', 'b', 't'];\n    \n        for (let i = abbrev.length - 1; i >= 0; i--) {\n          let size = Math.pow(10, (i + 1) * 3);\n    \n          if (size <= number) {\n            number = Math.round((number * decPlaces) / size) / decPlaces;\n    \n            if (number === 1000 && i < abbrev.length - 1) {\n              number = 1;\n              i++;\n            }\n    \n            number += abbrev[i];\n            break;\n          }\n        }\n    \n        return number;\n      };\n\n\n  isEmpty = (array) => Array.isArray(array) && array.length === 0;\n\n\n  abbreviateLabel = (label) => {\n    const maxLength = 10;\n\n    if (label.length > maxLength) {\n      const newLabel = label.slice(0, maxLength - 3) + '...';\n      return newLabel;\n    } else {\n      return null;\n    }\n  };\n\n  handleFilterChipToggle = (chip) => {\n    this.selectedFilterChip = chip; // <-- changed here\n  \n    if (typeof chip.onToggle === 'function') {\n      chip.onToggle();\n    }\n  };\n  \n  handleFilterChipUntoggle = () => {\n    if (this.selectedFilterChip) {\n      // if the user wants extra functionality when the filter chip is untoggled, call the function\n      if (typeof this.selectedFilterChip.onUntoggle === 'function') {\n        this.selectedFilterChip.onUntoggle();\n      }\n  \n      this.selectedFilterChip = null; // <-- changed here\n    }\n  };\n  \n\n  @Listen('click', { capture: true })\n  handleClick(ev) {\n    console.log(\"Click event\", ev);\n  }\n\n  render() {\n    console.log(\"Rendering ChipSection\", this.visibleFilterChips);\n    return (\n        <div class=\"wrapper\" id=\"chipSectionContainer\">\n          <div class=\"chipHolder\">\n          \n            {/* Your View Chips */}\n            <div id=\"viewChipsContainer\">\n              {this.viewChips.map((chip, index) => (\n                <stencil-chip\n                  onOnDelete={() => this.handleDelete('view', index)}\n                  text={chip.label}\n                  class=\"viewChip\"\n                ></stencil-chip>\n              ))}\n            </div>\n  \n            {/* Dynamic filter chip container */}\n            <udp-dynamic-container-with-menu id=\"filterChipsContainer\"  menuItems={this.menuItems} >\n  {this.selectedFilterChip && (\n    <stencil-chip\n      onOnDelete={this.handleFilterChipUntoggle}\n      text={this.selectedFilterChip.label}\n      class=\"viewChip\"\n    ></stencil-chip>\n  )}\n{console.log('filtering here...', this.filterChips)}\n  {this.filterChips.map((chip) => {\n    if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {\n      console.log('returning null...')\n      return null;\n    }\n    return (\n      <stencil-chip\n        text={`${chip.label} ${chip.value}`}\n        class=\"filterChip\"\n        onClick={() => this.handleFilterChipToggle(chip)}\n      ></stencil-chip>\n    );\n  })}\n\n</udp-dynamic-container-with-menu>\n  \n            {/* {this.filterChips.map((chip, index) => {\n              if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {\n                return null;\n              }\n              return (\n                <stencil-chip\n                  text={`${chip.label} ${chip.value}`}\n                  class=\"filterChip\"\n                  onClick={() => this.handleFilterChipToggle(chip)}\n                ></stencil-chip>\n              );\n            })} */}\n  \n            {/* Your Additional Filter Chips */}\n            <div id=\"additionalFilterChipsContainer\">\n              {this.additionalFilterChips.map((chip, index) => (\n                <stencil-chip\n                  onOnDelete={() => this.handleDelete('additionalFilter', index)}\n                  text={chip.label}\n                  class=\"additionalFilterChip\"\n                ></stencil-chip>\n              ))}\n            </div>\n  \n            {/* KPI Section */}\n            {!this.hideKpiSection && (\n              <div class=\"KPI\" id=\"kpiContainer\">\n                {this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (\n                  <div class=\"kpiItem\">\n                    <span class=\"kpiLabel\">{this.abbreviateLabel(kpi.label) || kpi.label}</span>\n                    <span class=\"kpiValue\">{this.abbrNum(kpi.value, 1)}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      );\n  }\n  \n\n}\n"],"version":3}

package/dist/components/client-side-grid.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ClientSideGrid extends Components.ClientSideGrid, HTMLElement {}
+export const ClientSideGrid: {
+    prototype: ClientSideGrid;
+    new (): ClientSideGrid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/client-side-grid.js

@@ -0,0 +1,77 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$3 } from './p-Cx9slDra.js';
+import { d as defineCustomElement$2 } from './p-DmqHs2sO.js';
+
+const ClientSideGrid$1 = /*@__PURE__*/ proxyCustomElement(class ClientSideGrid extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.gridReady = createEvent(this, "gridReady");
+        this.rowData = [];
+        this.columnDefs = [];
+        this.clientConfig = {
+            rowModelType: 'clientSide',
+        };
+        this.headerConfig = {
+            title: 'Client-Side',
+        };
+    }
+    updateRowData() {
+        if (this.gridApi) {
+            this.gridApi.setGridOption('rowData', this.rowData);
+        }
+    }
+    updateColumnDefs() {
+        if (this.gridApi) {
+            this.gridApi.setGridOption('columnDefs', this.columnDefs);
+        }
+    }
+    handleGridReady(event) {
+        this.gridApi = event.detail;
+        this.gridReady.emit(this.gridApi);
+    }
+    render() {
+        return h("ag-grid-base", { key: '6426821528231af2197dde5ac545069bdb01602f', gridConfig: this.clientConfig, headerConfig: this.headerConfig, onGridReady: e => this.handleGridReady(e) });
+    }
+    static get watchers() { return {
+        "rowData": ["updateRowData"],
+        "columnDefs": ["updateColumnDefs"]
+    }; }
+}, [0, "client-side-grid", {
+        "rowData": [16, "row-data"],
+        "columnDefs": [16, "column-defs"]
+    }, undefined, {
+        "rowData": ["updateRowData"],
+        "columnDefs": ["updateColumnDefs"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["client-side-grid", "ag-grid-base", "grid-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "client-side-grid":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ClientSideGrid$1);
+            }
+            break;
+        case "ag-grid-base":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "grid-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ClientSideGrid = ClientSideGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ClientSideGrid, defineCustomElement };
+//# sourceMappingURL=client-side-grid.js.map
+
+//# sourceMappingURL=client-side-grid.js.map

package/dist/components/client-side-grid.js.map

@@ -0,0 +1 @@
+{"file":"client-side-grid.js","mappings":";;;;MAQaA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAJ3B,IAAA,WAAA,GAAA;;;;AAKU,QAAA,IAAO,CAAA,OAAA,GAAkB,EAAE;AAC3B,QAAA,IAAU,CAAA,UAAA,GAAkB,EAAE;QAwB9B,IAAA,CAAA,YAAY,GAAgB;AAClC,YAAA,YAAY,EAAE,YAAY;SAC3B;QAEO,IAAA,CAAA,YAAY,GAAG;AACrB,YAAA,KAAK,EAAE,aAAa;SACrB;AAKF;IA7BC,aAAa,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC;;;IAKvD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC;;;AAIrD,IAAA,eAAe,CAAC,KAA2B,EAAA;AACjD,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAWnC,MAAM,GAAA;AACJ,QAAA,OAAO,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAA,CAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ClientSideGrid","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/grid/new-grid/client-side-grid.tsx"],"sourcesContent":["// src/components/client-grid/client-grid.tsx\nimport { Component, h, Prop, Watch, Event, EventEmitter } from '@stencil/core';\nimport { GridOptions, GridApi, ColDef } from 'ag-grid-community-v33';\n\n@Component({\n  tag: 'client-side-grid',\n  shadow: false,\n})\nexport class ClientSideGrid {\n  @Prop() rowData: Array<object> = [];\n  @Prop() columnDefs: Array<ColDef> = [];\n  @Event() gridReady!: EventEmitter<GridApi>;\n\n  private gridApi!: GridApi;\n\n  @Watch('rowData')\n  updateRowData() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', this.rowData);\n    }\n  }\n\n  @Watch('columnDefs')\n  updateColumnDefs() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('columnDefs', this.columnDefs);\n    }\n  }\n\n  private handleGridReady(event: CustomEvent<GridApi>) {\n    this.gridApi = event.detail;\n    this.gridReady.emit(this.gridApi);\n  }\n\n  private clientConfig: GridOptions = {\n    rowModelType: 'clientSide',\n  };\n\n  private headerConfig = {\n    title: 'Client-Side',\n  };\n\n  render() {\n    return <ag-grid-base gridConfig={this.clientConfig} headerConfig={this.headerConfig} onGridReady={e => this.handleGridReady(e)} />;\n  }\n}\n"],"version":3}

package/dist/components/color-preview.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface ColorPreview extends Components.ColorPreview, HTMLElement {}
+export const ColorPreview: {
+    prototype: ColorPreview;
+    new (): ColorPreview;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/color-preview.js

@@ -0,0 +1,50 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { d as defineCustomElement$2 } from './p-DkppmXNM.js';
+
+const colorPreviewCss = ".sc-color-preview-h{display:block;padding:2rem}.container.sc-color-preview{display:flex;flex-direction:column;gap:2rem}.theme-section.sc-color-preview,.status-section.sc-color-preview{display:flex;flex-wrap:wrap;gap:2rem}.theme-section.sc-color-preview>div.sc-color-preview{width:100%;display:flex;gap:2rem;flex-wrap:wrap}.color-section.sc-color-preview{min-width:300px;flex:1}.color-grid.sc-color-preview{display:grid;gap:1rem;margin-top:1rem}.color-box.sc-color-preview{padding:1rem;border-radius:var(--border-radius);min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-family);font-size:0.875rem;box-shadow:var(--elevation-01)}";
+
+const ColorPreview$1 = /*@__PURE__*/ proxyCustomElement(class ColorPreview extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    renderColorBox(varName, textVarName) {
+        return (h("div", { class: "color-box", style: { backgroundColor: `var(${varName})`, color: textVarName ? `var(${textVarName})` : '#000' } }, varName));
+    }
+    renderColorSection(title, prefix, includeContrast = true) {
+        return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color`, includeContrast ? `--${prefix}-contrast-text` : undefined), this.renderColorBox(`--${prefix}-color-dark`, includeContrast ? `--${prefix}-contrast-text` : undefined), this.renderColorBox(`--${prefix}-color-light`, includeContrast ? `--${prefix}-contrast-text` : undefined), this.renderColorBox(`--${prefix}-color-hint`, includeContrast ? `--${prefix}-contrast-text` : undefined))));
+    }
+    renderStatusSection(title, prefix) {
+        return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
+    }
+    render() {
+        return (h("div", { key: 'd01b1d9d8d29689b1e43b86ac4c42a64a7a9da45', class: "container" }, h("unity-typography", { key: '0b9979d9df0b9064a7dc80495aef1e0d8488d4df', variant: "h2" }, "Unity Theme"), h("div", { key: '41b57a42358e717cf2cd175a42adfb91bff9df9f', class: "theme-section" }, h("div", { key: 'd1f6feef42e188bde02e733efc722b73167d9021', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '683b42813f0264336cebc3fa167fb8991c6bf5ca', variant: "h2" }, "SAP Theme"), h("div", { key: '7fb6ea73a69371a2291b288b3dbff5d37144a5e5', class: "theme-section" }, h("div", { key: '8564e3f21ccb5b830543dfd6ef5ee722a25670bc', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '32d1d3ad99d817516f7e432845ab8847b60624d1', variant: "h2" }, "Status Colors"), h("div", { key: '482466c493bfc603be017f0dfbcaec6305b1da35', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
+    }
+    static get style() { return colorPreviewCss; }
+}, [2, "color-preview"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["color-preview", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "color-preview":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ColorPreview$1);
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const ColorPreview = ColorPreview$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ColorPreview, defineCustomElement };
+//# sourceMappingURL=color-preview.js.map
+
+//# sourceMappingURL=color-preview.js.map

package/dist/components/color-preview.js.map

@@ -0,0 +1 @@
+{"file":"color-preview.js","mappings":"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","names":["ColorPreview","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/theme/color-preview/color-preview.css?tag=color-preview&encapsulation=scoped","src/theme/color-preview/color-preview.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: 2rem;\n}\n\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n}\n\n.theme-section,\n.status-section {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2rem;\n}\n\n.theme-section > div {\n  width: 100%;\n  display: flex;\n  gap: 2rem;\n  flex-wrap: wrap;\n}\n\n.color-section {\n  min-width: 300px;\n  flex: 1;\n}\n\n.color-grid {\n  display: grid;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.color-box {\n  padding: 1rem;\n  border-radius: var(--border-radius);\n  min-height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  font-family: var(--font-family);\n  font-size: 0.875rem;\n  box-shadow: var(--elevation-01);\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'color-preview',\n  styleUrl: 'color-preview.css',\n  shadow: false, // Change this from true to false\n  scoped: true  // Add this line\n})\nexport class ColorPreview {\n  private renderColorBox(varName: string, textVarName?: string) {\n    return (\n      <div class=\"color-box\" style={{ backgroundColor: `var(${varName})`, color: textVarName ? `var(${textVarName})` : '#000' }}>\n        {varName}\n      </div>\n    );\n  }\n\n  private renderColorSection(title: string, prefix: string, includeContrast = true) {\n    return (\n      <div class=\"color-section\">\n        <unity-typography variant=\"h4\">{title}</unity-typography>\n        <div class=\"color-grid\">\n          {this.renderColorBox(`--${prefix}-color`, includeContrast ? `--${prefix}-contrast-text` : undefined)}\n          {this.renderColorBox(`--${prefix}-color-dark`, includeContrast ? `--${prefix}-contrast-text` : undefined)}\n          {this.renderColorBox(`--${prefix}-color-light`, includeContrast ? `--${prefix}-contrast-text` : undefined)}\n          {this.renderColorBox(`--${prefix}-color-hint`, includeContrast ? `--${prefix}-contrast-text` : undefined)}\n        </div>\n      </div>\n    );\n  }\n\n  private renderStatusSection(title: string, prefix: string) {\n    return (\n      <div class=\"color-section\">\n        <unity-typography variant=\"h4\">{title}</unity-typography>\n        <div class=\"color-grid\">\n          {this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`)}\n          {this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`)}\n          {this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`)}\n          {this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`)}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <unity-typography variant=\"h2\">Unity Theme</unity-typography>\n        <div class=\"theme-section\">\n          <div class=\"unity-theme\">\n            {this.renderColorSection('Primary Colors', 'primary')}\n            {this.renderColorSection('Secondary Colors', 'secondary')}\n          </div>\n        </div>\n\n        <unity-typography variant=\"h2\">SAP Theme</unity-typography>\n        <div class=\"theme-section\">\n          <div class=\"sap-theme\">\n            {this.renderColorSection('Primary Colors', 'primary')}\n            {this.renderColorSection('Secondary Colors', 'secondary')}\n          </div>\n        </div>\n\n        <unity-typography variant=\"h2\">Status Colors</unity-typography>\n        <div class=\"status-section\">\n          {this.renderStatusSection('Success', 'success')}\n          {this.renderStatusSection('Error', 'error')}\n          {this.renderStatusSection('Warning', 'warning')}\n          {this.renderStatusSection('Info', 'info')}\n          {this.renderStatusSection('Note', 'note')}\n        </div>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/custom-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CustomButton extends Components.CustomButton, HTMLElement {}
+export const CustomButton: {
+    prototype: CustomButton;
+    new (): CustomButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/custom-button.js

@@ -0,0 +1,9 @@
+import { C as CustomButton$1, d as defineCustomElement$1 } from './p-DpLtIIwx.js';
+
+const CustomButton = CustomButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CustomButton, defineCustomElement };
+//# sourceMappingURL=custom-button.js.map
+
+//# sourceMappingURL=custom-button.js.map

package/dist/components/custom-button.js.map

@@ -0,0 +1 @@
+{"file":"custom-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/date-time-renderer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DateTimeRenderer extends Components.DateTimeRenderer, HTMLElement {}
+export const DateTimeRenderer: {
+    prototype: DateTimeRenderer;
+    new (): DateTimeRenderer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/date-time-renderer.js

@@ -0,0 +1,9 @@
+import { D as DateTimeRenderer$1, d as defineCustomElement$1 } from './p-7300SNnv.js';
+
+const DateTimeRenderer = DateTimeRenderer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DateTimeRenderer, defineCustomElement };
+//# sourceMappingURL=date-time-renderer.js.map
+
+//# sourceMappingURL=date-time-renderer.js.map

package/dist/components/date-time-renderer.js.map

@@ -0,0 +1 @@
+{"file":"date-time-renderer.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/edit-view-form-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EditViewFormDialog extends Components.EditViewFormDialog, HTMLElement {}
+export const EditViewFormDialog: {
+    prototype: EditViewFormDialog;
+    new (): EditViewFormDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;