udp-stencil-component-library 1.0.0

package/dist/collection/components/my-component/UI/grid/grid-primary-bar/grid-primary-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-primary-bar.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/grid-primary-bar/grid-primary-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAChD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,eAAe,MAAM,2CAA2C,CAAC;AACxE,OAAO,gBAAgB,MAAM,0BAA0B,CAAC;AACxD,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAOhD,MAAM,OAAO,cAAc;IAL3B;QAOU,wBAAmB,GAAa,EAAE,CAAC;QACnC,iBAAY,GAAa,EAAE,CAAC;QAC5B,kBAAa,GAAU,EAAE,CAAC;QAkB1B,8BAAyB,GAAY,IAAI,CAAC;QAC1C,4BAAuB,GAAY,IAAI,CAAC;QACxC,oBAAe,GAAY,IAAI,CAAC;QAChC,sBAAiB,GAAY,KAAK,CAAC;QACnC,eAAU,GAAY,KAAK,CAAC;QAC5B,uBAAkB,GAAY,KAAK,CAAC;QAGpC,yBAAoB,GAAY,IAAI,CAAC;QAEpC,yBAAoB,GAAU,EAAE,CAAC;QACjC,eAAU,GAAY,IAAI,CAAC;KAqLrC;IAnLC,gBAAgB;QACd,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;QACtC,IAAI,CAAC,UAAU,GAAG,WAAW,IAAI,IAAI,CAAC;IACxC,CAAC;IAGD,QAAQ;QACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAC7D,CAAC;IAED,gBAAgB;QACd,uCAAuC;QACvC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACtE,CAAC;IAED,oBAAoB;QAClB,mDAAmD;QACnD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzE,CAAC;IAEO,uBAAuB;QAC7B,IAAI,OAAO,GAAG;YACZ;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,WAAW;gBACpB,KAAK,EAAE,WAAW;gBAClB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,mBAAmB;aACvC;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,mBAAmB;aACvC;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,UAAU;gBACnB,KAAK,EAAE,UAAU;gBACjB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,sBAAsB;aAC1C;YACD;gBACE,IAAI,EAAE,eAAe;gBACrB,OAAO,EAAE,QAAQ;gBACjB,KAAK,EAAE,QAAQ;gBACf,OAAO,EAAE,IAAI,CAAC,oBAAoB;gBAClC,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,2BAA2B;aAC/C;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,SAAS;gBAChB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,kBAAkB;aACtC;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,cAAc;gBACvB,KAAK,EAAE,cAAc;gBACrB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,gBAAgB;aACpC;SACF,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;gBACnB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,QAAQ;gBACjB,KAAK,EAAE,QAAQ;gBACf,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,wBAAwB;gBACvC,YAAY,EAAE,IAAI,CAAC,iBAAiB;aACrC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE;gBACzC,IAAI,EAAE,gBAAgB;gBACtB,OAAO,EAAE,UAAU;gBACnB,KAAK,EAAE,UAAU;gBACjB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,mBAAmB;aACvC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAsB,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC;QACjF,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,OAAO,CAAC,IAAI,CAAC;gBACX,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,cAAc;gBACvB,KAAK,EAAE,cAAc;gBACrB,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,KAAK;gBAChB,aAAa,EAAE,iBAAiB;gBAChC,YAAY,EAAE,IAAI,CAAC,0BAA0B;aAC9C,CAAC,CAAC;QACL,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAGD,0BAA0B;QACxB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,YAAY;YACrB,4DAAK,KAAK,EAAC,eAAe;gBACxB;oBACE,yEAAkB,OAAO,EAAC,IAAI;wBAAE,IAAI,CAAC,KAAK;4BAAqB;oBAAC,GAAG,CAC/D,CACF;YACN,4DAAK,KAAK,EAAC,gBAAgB;gBACzB;oBACE,8DAAa,CACT;gBAEL,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBACnC,MAAM,YAAY,GAAG,CAAC,KAAkB,EAAE,EAAE;wBAC1C,IAAI,GAAG,CAAC,YAAY,EAAE,CAAC;4BACrB,GAAG,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;wBAC1B,CAAC;6BAAM,CAAC;4BACN,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,wCAAwC,CAAC,CAAC;wBACpE,CAAC;oBACH,CAAC,CAAC;oBAEF,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;wBACjE,OAAO,CACL,8CACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,GAAG,CAAC,OAAO,EACpB,aAAa,EAAE,GAAG,CAAC,aAAa;4BAE/B,GAAG,CAAC,IAAI,IAAI,SAAG,KAAK,EAAE,GAAG,CAAC,IAAI,GAAM;4BACpC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,gBAAO,GAAG,CAAC,KAAK,CAAQ,CAAC,CAAC,CAAC,IAAI,CAC3F,CAC1C,CAAC;oBACJ,CAAC;oBACD,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC;gBACD,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,kBAAkB,IAAI,CACrD,sEAAe,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,MAAM,IACvH,IAAI,CAAC,iBAAiB,IAAI,iEAAU,QAAQ,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAE,KAAK,GAAI,CAC5E,CACjB,CACG,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Watch } from '@stencil/core';\nimport Save16 from '@carbon/icons/es/save/16';\nimport Close16 from '@carbon/icons/es/close/16';\nimport List16 from '@carbon/icons/es/list/16';\nimport Download16 from '@carbon/icons/es/download/16';\nimport Settings16 from '@carbon/icons/es/settings/16';\nimport Star16 from '@carbon/icons/es/star/16';\nimport AdvancedQuery16 from '@carbon/icons/es/ibm-watson--discovery/16';\nimport DataEnrichment16 from '@carbon/icons/es/idea/16';\nimport Renew16 from '@carbon/icons/es/renew/16';\n\n@Component({\n  tag: 'grid-primary-bar',\n  styleUrl: 'grid-primary-bar.css',\n  shadow: true,\n})\nexport class GridPrimaryBar {\n  @Prop() title: string;\n  @Prop() hiddenActionButtons: string[] = [];\n  @Prop() hiddenLabels: string[] = [];\n  @Prop() actionButtons: any[] = [];\n  @Prop() customSaveViewClick?: (event?: MouseEvent) => void;\n  @Prop() customSizeToFitClick?: (event?: MouseEvent) => void;\n  @Prop() customExportClick?: (event?: MouseEvent) => void;\n  @Prop() primaryActionClick?: (event?: MouseEvent) => void;\n  @Prop() customColumnViewClick?: (event?: MouseEvent) => void;\n  @Prop() customFitColumnClick?: (event?: MouseEvent) => void;\n  @Prop() customFilterViewClick?: (event?: MouseEvent) => void;\n  @Prop() customClearClick?: (event?: MouseEvent) => void;\n  @Prop() customRefreshClick?: (event?: MouseEvent) => void;\n  @Prop() customExpandClick?: (event?: MouseEvent) => void;\n  @Prop() customShowViewClick?: (event?: MouseEvent) => void;\n  @Prop() customShowHotlistClick?: (event?: MouseEvent) => void;\n  @Prop() customShowCustomSearchClick?: (event?: MouseEvent) => void;\n  @Prop() customToggleServerClientClick?: (event?: MouseEvent) => void;\n  @Prop() customAdvancedSearchClick?: (event?: MouseEvent) => void;\n  @Prop() customInsightsClick?: (event?: MouseEvent) => void;\n  @Prop() customShowGridOptionsClick?: (event?: MouseEvent) => void;\n  @Prop() showAdvancedSearchFeature: boolean = true;\n  @Prop() showFilterColumnFeature: boolean = true;\n  @Prop() showGridOptions: boolean = true;\n  @Prop() showHotlistButton: boolean = false;\n  @Prop() hideExport: boolean = false;\n  @Prop() showInsightsAction: boolean = false;\n  @Prop() primaryActionLabel: string;\n  @Prop() primaryActionIcon: string;\n  @Prop() enableAdvancedSearch: boolean = true;\n\n  @State() defaultActionButtons: any[] = [];\n  @State() showLabels: boolean = true;\n\n  checkWindowWidth() {\n    const windowWidth = window.innerWidth;\n    this.showLabels = windowWidth >= 1000;\n  }\n\n  @Watch('window:resize')\n  onResize() {\n    this.checkWindowWidth();\n  }\n\n  componentWillLoad() {\n    this.checkWindowWidth();\n    this.defaultActionButtons = this.initializeActionButtons();\n  }\n\n  componentDidLoad() {\n    // Add event listener for window resize\n    window.addEventListener('resize', this.checkWindowWidth.bind(this));\n  }\n\n  disconnectedCallback() {\n    // Remove event listener when component is unloaded\n    window.removeEventListener('resize', this.checkWindowWidth.bind(this));\n  }\n\n  private initializeActionButtons() {\n    let buttons = [\n      {\n        icon: Save16,\n        tooltip: 'Save View',\n        label: 'Save View',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customSaveViewClick,\n      },\n      {\n        icon: Star16,\n        tooltip: 'Views',\n        label: 'Views',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customShowViewClick,\n      },\n      {\n        icon: List16,\n        tooltip: 'Hotlists',\n        label: 'Hotlists',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customShowHotlistClick,\n      },\n      {\n        icon: AdvancedQuery16,\n        tooltip: 'Search',\n        label: 'Search',\n        visible: this.enableAdvancedSearch,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customShowCustomSearchClick,\n      },\n      {\n        icon: Renew16,\n        tooltip: 'Refresh',\n        label: 'Refresh',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customRefreshClick,\n      },\n      {\n        icon: Close16,\n        tooltip: 'Clear Search',\n        label: 'Clear Search',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customClearClick,\n      },\n    ];\n\n    if (!this.hideExport) {\n      buttons.splice(3, 0, {\n        icon: Download16,\n        tooltip: 'Export',\n        label: 'Export',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'size-to-fit-icon-class',\n        clickHandler: this.customExportClick,\n      });\n    }\n\n    if (this.showInsightsAction) {\n      buttons.splice(this.hideExport ? 3 : 4, 0, {\n        icon: DataEnrichment16,\n        tooltip: 'Insights',\n        label: 'Insights',\n        visible: true,\n        showLabel: true,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customInsightsClick,\n      });\n    }\n\n    if (!this.showHotlistButton) {\n      buttons = buttons.filter((btn: { label: string }) => btn.label !== 'Hotlists');\n    }\n\n    if (this.showGridOptions) {\n      buttons.push({\n        icon: Settings16,\n        tooltip: 'Grid Options',\n        label: 'Grid Options',\n        visible: true,\n        showLabel: false,\n        iconClassName: 'save-icon-class',\n        clickHandler: this.customShowGridOptionsClick,\n      });\n    }\n\n    return buttons;\n  }\n\n  @Watch('enableAdvancedSearch')\n  handleAdvancedSearchToggle() {\n    this.defaultActionButtons = this.initializeActionButtons();\n  }\n\n  render() {\n    return (\n      <div class=\"header-bar\">\n        <div class=\"title-section\">\n          <div>\n            <unity-typography variant=\"h4\">{this.title} </unity-typography>{' '}\n          </div>\n        </div>\n        <div class=\"button-section\">\n          <div>\n            <slot></slot>\n          </div>\n\n          {this.defaultActionButtons.map(btn => {\n            const clickHandler = (event?: MouseEvent) => {\n              if (btn.clickHandler) {\n                btn.clickHandler(event);\n              } else {\n                console.log(`${btn.label} Clicked but no custom handler defined`);\n              }\n            };\n\n            if (!this.hiddenActionButtons.includes(btn.label) && btn.visible) {\n              return (\n                <stencil-icon-button-grid-action-header\n                  showLabel={this.showLabels}\n                  secondary={btn.secondary}\n                  icon={btn.icon}\n                  onClick={clickHandler}\n                  tooltip={btn.tooltip}\n                  iconClassName={btn.iconClassName}\n                >\n                  {btn.icon && <i class={btn.icon}></i>}\n                  {btn.label.toLowerCase() === 'save' || (!this.hiddenLabels.includes(btn.label) && btn.showLabel) ? <span>{btn.label}</span> : null}\n                </stencil-icon-button-grid-action-header>\n              );\n            }\n            return null;\n          })}\n          {this.primaryActionClick && this.primaryActionLabel && (\n            <custom-button label={this.primaryActionLabel} onClick={(event: MouseEvent) => this.primaryActionClick(event)} size=\"tall\">\n              {this.primaryActionIcon && <udp-icon iconName={this.primaryActionIcon} darkIcon={false} />}\n            </custom-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/hotlists/udp-hotlist-form/udp-hotlist-form.css

@@ -0,0 +1,14 @@
+.submit-button {
+    margin-top: 18px;
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 24px;
+    gap: 8px;
+}
+
+.wrapper {
+    border-bottom: 1px solid #d9d9d9;
+    padding-bottom: 16px;
+    margin-bottom: 10px;
+    width: 480px;
+}

package/dist/collection/components/my-component/UI/grid/hotlists/udp-hotlist-form/udp-hotlist-form.js

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+export class UdpHotlistForm {
+    constructor() {
+        this.name = '';
+        this.isPrivate = false;
+        this.handleNameChange = (event) => {
+            this.name = event.target.value;
+        };
+        this.handlePrivateChange = () => {
+            this.isPrivate = !this.isPrivate;
+        };
+        // Refreshes the page
+        //   handleSubmit = () => {
+        //     // Now passing columnState as well
+        //     this.handleFormSubmit(this.name, this.isPrivate, this.columnState);
+        //   };
+        this.handleSubmit = (event) => {
+            event.preventDefault();
+            this.handleFormSubmit(this.name, this.isPrivate, this.columnState);
+        };
+        // Handling custom button click
+        this.onCustomButtonClick = () => {
+            this.handleFormSubmit(this.name, this.isPrivate, this.columnState);
+        };
+    }
+    //   handleCancelClick = () => {
+    //     console.log('Cancel button clicked');
+    //   }
+    render() {
+        return (h("div", { key: '4406c17493bdf00955164aadde67fbb004c4071f', class: "wrapper" }, h("form", { key: 'd8b1d3b70c20249cb3a7e9ebe5204ef96da39b2e', class: "save-form", onSubmit: this.handleSubmit }, h("text-field", { key: '2eff0f797e16a60449398594968d16e4a9970f1e', label: "Hotlist Name", placeholder: "Create a name for your Hotlist", value: this.name, onChange: (event) => this.handleNameChange(event) }), h("stencil-toggle", { key: '424db494c2638b1f64f22dc6de73d90b03ec09dd', label: "Private", checked: this.isPrivate, onToggledChange: this.handlePrivateChange }), h("div", { key: '3f03ebcdc91e52498b363f09592697fdaa6c1779', class: "submit-button" }, h("custom-button", { key: '6c85342b793356d20aec239b63164c078f597e3c', variant: 'outline', type: "submit", onCustomClick: this.handleCancelClick }, "Cancel"), h("custom-button", { key: '00a6650b0a07a2b1acad795b44fa7b1251822151', disabled: !this.name, type: "submit", onCustomClick: this.onCustomButtonClick }, "Create List")))));
+    }
+    static get is() { return "udp-hotlist-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-hotlist-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-hotlist-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "refetchViews": {
+                "type": "unknown",
+                "attribute": "refetch-views",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleFormSubmit": {
+                "type": "unknown",
+                "attribute": "handle-form-submit",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, isPrivate: boolean, columnState: any) => void",
+                    "resolved": "(name: string, isPrivate: boolean, columnState: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "handleCancelClick": {
+                "type": "unknown",
+                "attribute": "handle-cancel-click",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "name": {},
+            "isPrivate": {},
+            "columnState": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=udp-hotlist-form.js.map

package/dist/collection/components/my-component/UI/grid/hotlists/udp-hotlist-form/udp-hotlist-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-hotlist-form.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/grid/hotlists/udp-hotlist-form/udp-hotlist-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOnE,MAAM,OAAO,cAAc;IAL3B;QAWW,SAAI,GAAW,EAAE,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QAIpC,qBAAgB,GAAG,CAAC,KAAK,EAAE,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACjC,CAAC,CAAC;QAEF,wBAAmB,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC;QAEJ,qBAAqB;QACrB,2BAA2B;QAC3B,yCAAyC;QACzC,0EAA0E;QAC1E,OAAO;QAGP,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACrE,CAAC,CAAC;QAEF,+BAA+B;QAC/B,wBAAmB,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACrE,CAAC,CAAC;KA0CH;IAvCD,gCAAgC;IAChC,4CAA4C;IAC5C,MAAM;IAEJ,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,SAAS;YACjB,6DAAM,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAChD,mEACA,KAAK,EAAC,cAAc,EACpB,WAAW,EAAC,gCAAgC,EAC5C,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,GACxC;gBACd,uEACA,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,eAAe,EAAE,IAAI,CAAC,mBAAmB,GACvB;gBAErB,4DAAK,KAAK,EAAC,eAAe;oBAC1B,sEACK,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,IAAI,CAAC,iBAAiB,aAEvB;oBAChB,sEACE,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,EACpB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,IAAI,CAAC,mBAAmB,kBAEzB,CACb,CAEF,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State, Element } from '@stencil/core';\n\n@Component({\n  tag: 'udp-hotlist-form',\n  styleUrl: 'udp-hotlist-form.css',\n  shadow: true,\n})\nexport class UdpHotlistForm {\n  @Element() el: HTMLElement;\n  @Prop() refetchViews: () => void;\n  @Prop() handleFormSubmit: (name: string, isPrivate: boolean, columnState: any) => void;\n  @Prop() handleCancelClick: () => void;\n\n  @State() name: string = '';\n  @State() isPrivate: boolean = false;\n  // Add a state or prop for columnState\n  @State() columnState: any; // Adjust this according to your needs\n\n  handleNameChange = (event) => {\n    this.name = event.target.value;\n  };\n\n  handlePrivateChange = () => {\n    this.isPrivate = !this.isPrivate;\n  };\n\n// Refreshes the page\n//   handleSubmit = () => {\n//     // Now passing columnState as well\n//     this.handleFormSubmit(this.name, this.isPrivate, this.columnState);\n//   };\n\n\nhandleSubmit = (event: Event) => {\n    event.preventDefault();\n    this.handleFormSubmit(this.name, this.isPrivate, this.columnState);\n  };\n\n  // Handling custom button click\n  onCustomButtonClick = () => {\n    this.handleFormSubmit(this.name, this.isPrivate, this.columnState);\n  };\n\n\n//   handleCancelClick = () => {\n//     console.log('Cancel button clicked');\n//   }\n\n  render() {\n    return (\n      <div class=\"wrapper\" >\n         <form class=\"save-form\" onSubmit={this.handleSubmit}>\n            <text-field\n            label=\"Hotlist Name\"\n            placeholder=\"Create a name for your Hotlist\"\n            value={this.name}\n            onChange={(event: any) => this.handleNameChange(event)}\n            ></text-field>\n            <stencil-toggle\n            label=\"Private\"\n            checked={this.isPrivate}\n            onToggledChange={this.handlePrivateChange}\n            ></stencil-toggle>\n         {/* <button type=\"submit\">Save List</button> */}\n         <div class=\"submit-button\" >\n         <custom-button\n              variant='outline'\n              type=\"submit\"\n              onCustomClick={this.handleCancelClick}>\n              Cancel\n            </custom-button>\n            <custom-button\n              disabled={!this.name}\n              type=\"submit\"\n              onCustomClick={this.onCustomButtonClick}>\n              Create List\n            </custom-button>\n         </div>\n\n      </form>\n      </div>\n    );\n  }\n}\n\n\n"]}

package/dist/collection/components/my-component/UI/grid/new-grid/ag-grid-base.js

@@ -0,0 +1,163 @@
+import { h } from "@stencil/core";
+import { createGrid, ClientSideRowModelModule, ModuleRegistry, ValidationModule, themeQuartz, PaginationModule, AllCommunityModule } from "ag-grid-community-v33";
+ModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule, PaginationModule, AllCommunityModule]);
+const myTheme = themeQuartz.withParams({
+    backgroundColor: '#FFE8E0',
+    foregroundColor: '#361008CC',
+    browserColorScheme: 'light',
+}, 'light-red');
+export class AgGridBase {
+    constructor() {
+        this.headerConfig = {};
+        this.gridHeight = '40vh';
+        this.onGridReady = (e) => {
+            this.gridApi = e.api;
+            this.gridReady.emit(this.gridApi);
+        };
+    }
+    componentDidLoad() {
+        const gridOptions = Object.assign({ onGridReady: this.onGridReady, theme: myTheme, pagination: true, defaultColDef: {
+                sortable: true,
+                filter: true
+            } }, this.gridConfig);
+        createGrid(this.el.querySelector('#myNewGrid'), gridOptions);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.gridApi) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    async getGridApi() {
+        return this.gridApi;
+    }
+    render() {
+        return (h("div", { key: '3225b5efed5e344bce9c7d09c87bee4f4d3123ef' }, h("grid-header", { key: 'fdcf6ba4cc5568923177c7ed240fffc1c61bb012', headerConfig: this.headerConfig }), h("div", { key: 'ef5d8b8d0fe5838ac930e637f4fe1dfc035c24bd', id: "myNewGrid", style: {
+                height: this.gridHeight,
+            } })));
+    }
+    static get is() { return "ag-grid-base"; }
+    static get properties() {
+        return {
+            "gridConfig": {
+                "type": "unknown",
+                "attribute": "grid-config",
+                "mutable": false,
+                "complexType": {
+                    "original": "GridOptions",
+                    "resolved": "GridOptions<any>",
+                    "references": {
+                        "GridOptions": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::GridOptions"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "headerConfig": {
+                "type": "unknown",
+                "attribute": "header-config",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderConfig",
+                    "resolved": "HeaderConfig",
+                    "references": {
+                        "HeaderConfig": {
+                            "location": "import",
+                            "path": "./interfaces/grid",
+                            "id": "src/components/my-component/UI/grid/new-grid/interfaces/grid.ts::HeaderConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "gridHeight": {
+                "type": "string",
+                "attribute": "grid-height",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'40vh'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "gridReady",
+                "name": "gridReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GridApi",
+                    "resolved": "GridApi<any>",
+                    "references": {
+                        "GridApi": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::GridApi"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getGridApi": {
+                "complexType": {
+                    "signature": "() => Promise<GridApi>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GridApi": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::GridApi"
+                        }
+                    },
+                    "return": "Promise<GridApi<any>>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=ag-grid-base.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/ag-grid-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ag-grid-base.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/new-grid/ag-grid-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,UAAU,EAAe,wBAAwB,EAAE,cAAc,EAAE,gBAAgB,EAAE,WAAW,EAAE,gBAAgB,EAA2B,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGxM,cAAc,CAAC,eAAe,CAAC,CAAC,wBAAwB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAEnH,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CACpC;IACE,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,WAAW;IAC5B,kBAAkB,EAAE,OAAO;CAC5B,EACD,WAAW,CACZ,CAAC;AAMF,MAAM,OAAO,UAAU;IAJvB;QAQU,iBAAY,GAAiB,EAAE,CAAC;QAChC,eAAU,GAAW,MAAM,CAAC;QA6B5B,gBAAW,GAAG,CAAC,CAAiB,EAAE,EAAE;YAC1C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC;YACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpC,CAAC,CAAC;KAeH;IA1CC,gBAAgB;QACd,MAAM,WAAW,mBACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,OAAO,EACd,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI;aACb,IACE,IAAI,CAAC,UAAU,CACnB,CAAC;QAEF,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAgB,EAAE,WAAW,CAAC,CAAC;IAC9E,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,EAAE,CAAC;IAC1B,CAAC;IAGD,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAOD,MAAM;QACJ,OAAO,CACL;YACE,oEAAa,YAAY,EAAE,IAAI,CAAC,YAAY,GAAI;YAChD,4DACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI,CAAC,UAAU;iBACxB,GACI,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Method, EventEmitter, Event } from '@stencil/core';\nimport { createGrid, GridOptions, ClientSideRowModelModule, ModuleRegistry, ValidationModule, themeQuartz, PaginationModule, GridApi, GridReadyEvent, AllCommunityModule } from 'ag-grid-community-v33';\nimport { HeaderConfig } from './interfaces/grid';\n\nModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule, PaginationModule, AllCommunityModule]);\n\nconst myTheme = themeQuartz.withParams(\n  {\n    backgroundColor: '#FFE8E0',\n    foregroundColor: '#361008CC',\n    browserColorScheme: 'light',\n  },\n  'light-red',\n);\n\n@Component({\n  tag: 'ag-grid-base',\n  shadow: false,\n})\nexport class AgGridBase {\n  @Element() el!: HTMLElement;\n\n  @Prop() gridConfig!: GridOptions;\n  @Prop() headerConfig: HeaderConfig = {};\n  @Prop() gridHeight: string = '40vh';\n  @Event() gridReady!: EventEmitter<GridApi>;\n\n  private gridApi!: GridApi;\n\n  componentDidLoad() {\n    const gridOptions: GridOptions = {\n      onGridReady: this.onGridReady,\n      theme: myTheme,\n      pagination: true,\n      defaultColDef: {\n        sortable: true,\n        filter: true\n      },\n      ...this.gridConfig,\n    };\n\n    createGrid(this.el.querySelector('#myNewGrid') as HTMLElement, gridOptions);\n  }\n\n  disconnectedCallback() {\n    this.gridApi?.destroy();\n  }\n\n  @Method()\n  async getGridApi(): Promise<GridApi> {\n    return this.gridApi;\n  }\n\n  private onGridReady = (e: GridReadyEvent) => {\n    this.gridApi = e.api;\n    this.gridReady.emit(this.gridApi);\n  };\n\n  render() {\n    return (\n      <div>\n        <grid-header headerConfig={this.headerConfig} />\n        <div\n          id=\"myNewGrid\"\n          style={{\n            height: this.gridHeight,\n          }}\n        ></div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/new-grid/api-method-grid.js

@@ -0,0 +1,136 @@
+import { h } from "@stencil/core";
+import { apiMethodDataSource } from "./datasources/apiMethodDatasource";
+export class ApiMethodGrid {
+    constructor() {
+        this.columnDefs = [];
+    }
+    handleApiMethodGridReady(event) {
+        this.gridApi = event.detail;
+        this.apiMethodGridReady.emit(this.gridApi);
+        this.updateDataSource();
+    }
+    updateDataSource() {
+        if (this.apiMethodId) {
+            this.dataSource = apiMethodDataSource(this.apiMethodId, this.customSearchObject);
+        }
+    }
+    render() {
+        return h("server-side-grid", { key: 'd30ec80826584a1bbab9d65a9758df23f97d4ce7', onServerSideGridReady: e => this.handleApiMethodGridReady(e), dataSource: this.dataSource, columnDefs: this.columnDefs });
+    }
+    static get is() { return "api-method-grid"; }
+    static get properties() {
+        return {
+            "apiMethodId": {
+                "type": "string",
+                "attribute": "api-method-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "columnDefs": {
+                "type": "unknown",
+                "attribute": "column-defs",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<ColDef>",
+                    "resolved": "ColDef<any, any>[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "ColDef": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::ColDef"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "customSearchObject": {
+                "type": "unknown",
+                "attribute": "custom-search-object",
+                "mutable": false,
+                "complexType": {
+                    "original": "Search",
+                    "resolved": "Search",
+                    "references": {
+                        "Search": {
+                            "location": "import",
+                            "path": "./interfaces/searchObject",
+                            "id": "src/components/my-component/UI/grid/new-grid/interfaces/searchObject.ts::Search"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dataSource": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "apiMethodGridReady",
+                "name": "apiMethodGridReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GridApi",
+                    "resolved": "GridApi<any>",
+                    "references": {
+                        "GridApi": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::GridApi"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "apiMethodId",
+                "methodName": "updateDataSource"
+            }, {
+                "propName": "customSearchObject",
+                "methodName": "updateDataSource"
+            }];
+    }
+}
+//# sourceMappingURL=api-method-grid.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/api-method-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-method-grid.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/new-grid/api-method-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAQxE,MAAM,OAAO,aAAa;IAL1B;QAOU,eAAU,GAAkB,EAAE,CAAC;KA0BxC;IAjBS,wBAAwB,CAAC,KAA2B;QAC1D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC3C,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAID,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACnF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,yEAAkB,qBAAqB,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC;IACrJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/my-component/UI/grid/new-grid/client-side-grid.js

@@ -0,0 +1,123 @@
+// src/components/client-grid/client-grid.tsx
+import { h } from "@stencil/core";
+export class ClientSideGrid {
+    constructor() {
+        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 is() { return "client-side-grid"; }
+    static get properties() {
+        return {
+            "rowData": {
+                "type": "unknown",
+                "attribute": "row-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<object>",
+                    "resolved": "object[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "columnDefs": {
+                "type": "unknown",
+                "attribute": "column-defs",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<ColDef>",
+                    "resolved": "ColDef<any, any>[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "ColDef": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::ColDef"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "gridReady",
+                "name": "gridReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GridApi",
+                    "resolved": "GridApi<any>",
+                    "references": {
+                        "GridApi": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::GridApi"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "rowData",
+                "methodName": "updateRowData"
+            }, {
+                "propName": "columnDefs",
+                "methodName": "updateColumnDefs"
+            }];
+    }
+}
+//# sourceMappingURL=client-side-grid.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/client-side-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-side-grid.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/new-grid/client-side-grid.tsx"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,cAAc;IAJ3B;QAKU,YAAO,GAAkB,EAAE,CAAC;QAC5B,eAAU,GAAkB,EAAE,CAAC;QAwB/B,iBAAY,GAAgB;YAClC,YAAY,EAAE,YAAY;SAC3B,CAAC;QAEM,iBAAY,GAAG;YACrB,KAAK,EAAE,aAAa;SACrB,CAAC;KAKH;IA7BC,aAAa;QACX,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAA2B;QACjD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAUD,MAAM;QACJ,OAAO,qEAAc,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,GAAI,CAAC;IACrI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}