udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/components/{p-y6ddPVSK.js.map → p-BO3Kzy6x.js.map}

@@ -1 +1 @@
-{"file":"p-y6ddPVSK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/map/udp-map/popups/map-popup.css?tag=add-map-feature-popup&encapsulation=shadow","src/components/my-component/UI/map/udp-map/popups/add-map-feature-popup.tsx"],"sourcesContent":["  \n  .popoverContent{\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-04);\n    padding: var(--spacing-04);\n    z-index: 1\n  }\n  .featureDetailsPopOverContent{\n    min-width: 300px;\n    z-index: 1\n  }\n  .data-row {\n    display: flex;\n    column-gap: var(--spacing-04);\n   }\n  .data-section {\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-02);\n  }\n  .key{\n    font-weight: bold;\n    color: var(--accent-color-two);\n  }\n  .header{\n    display: flex;\n    background-color: var(--accent-color-three);\n    color: var(--accent-color-two);\n    padding-left: var(--spacing-02);\n    margin-bottom: var(--spacing-04);\n  }\n  .closeButton{\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n  .options{\n    display: flex;\n    justify-content: flex-end;\n    column-gap: var(--spacing-04);\n  }\n  .mapType{\n    margin-bottom: var(--spacing-02);\n  }","import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'add-map-feature-popup',\n  styleUrl: 'map-popup.css',\n  shadow: true,\n})\nexport class AddMapFeaturePopUp {\n  @Prop() typeOptions: any[] = [\n    {\n      label: 'Point',\n      value: 'Point',\n    },\n    {\n      label: 'LineString',\n      value: 'LineString',\n    },\n    {\n      label: 'Polygon',\n      value: 'Polygon',\n    },\n  ];\n  @Prop() vectorLayerOptions: any[] = [];\n  @Prop() handleStartDrawingMapFeature;\n  @Prop() selectedLayer: any = null;\n  @Prop() selectedType: any = null;\n  @Prop() panelConfig?: {\n    getLayerOptionsFromLayerValues?: (layerValues: any[]) => any[];\n    getFeatureTypeOptionsFromLayerValue?: (layerValue: any) => any[];\n    hideLayerSelector?: boolean;\n  } = null;\n\n  @State() layerToAddOptions: any[] = [];\n  @State() drawingTypeOptions: any[] = null;\n\n  handleSetSelectedLayer = (e: any) => {\n    this.selectedLayer = e;\n  };\n  handleSetSelectedType = (e: any) => {\n    this.selectedType = e;\n  };\n\n  @Watch('panelConfig')\n  watchPanelConfig() {\n    if (this.panelConfig?.hideLayerSelector) {\n      this.selectedLayer = null;\n      this.layerToAddOptions = [];\n    } else {\n      this.getlayerOptions();\n    }\n  }\n\n  @Watch('selectedLayer')\n  @Watch('typeOptions')\n  updateDrawingTypeOptions() {\n    this.getDrawingTypeOptions();\n  }\n\n  getlayerOptions = () => {\n    if (this.panelConfig?.getLayerOptionsFromLayerValues) {\n      this.layerToAddOptions = this.panelConfig?.getLayerOptionsFromLayerValues(this.vectorLayerOptions);\n    } else {\n      this.layerToAddOptions = this.vectorLayerOptions.map(layer => {\n        return {\n          label: layer,\n          value: layer,\n        };\n      });\n    }\n  };\n\n  getDrawingTypeOptions = () => {\n    if (this.panelConfig?.getFeatureTypeOptionsFromLayerValue) {\n      this.drawingTypeOptions = this.panelConfig?.getFeatureTypeOptionsFromLayerValue(this.selectedLayer) ?? this.typeOptions;\n    } else {\n      this.drawingTypeOptions = this.typeOptions;\n    }\n  };\n\n  componentWillLoad() {\n    this.getlayerOptions();\n    this.getDrawingTypeOptions();\n  }\n\n  render() {\n    return (\n      <div class=\"popoverContent\">\n        {!this.panelConfig?.hideLayerSelector && (\n          <div>\n            <udp-selector\n              id={'layer'}\n              options={this.layerToAddOptions}\n              initialValue={this.selectedLayer}\n              label={'Layer'}\n              onChange={(e: CustomEvent) => {\n                this.handleSetSelectedLayer(e);\n              }}\n              large={false}\n            />\n            <div style={{ height: '12px' }}></div>\n          </div>\n        )}\n\n        <udp-selector\n          id={'type'}\n          options={this.drawingTypeOptions ?? []}\n          initialValue={this.selectedType}\n          label={'Type'}\n          onChange={(e: CustomEvent) => {\n            this.handleSetSelectedType(e);\n          }}\n          large={false}\n        />\n        <div style={{ height: '12px' }}></div>\n        <div class=\"formButton\">\n          <custom-button\n            label={<unity-typography variant=\"button\">{'Draw feature'}</unity-typography>}\n            onClick={() => this.handleStartDrawingMapFeature(this.selectedLayer, this.selectedType)}\n            variant={'outline'}\n            disabled={(this.selectedLayer === null && !this.panelConfig?.hideLayerSelector) || this.selectedType === null}\n          ></custom-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BO3Kzy6x.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/map/udp-map/popups/map-popup.css?tag=add-map-feature-popup&encapsulation=shadow","src/components/my-component/UI/map/udp-map/popups/add-map-feature-popup.tsx"],"sourcesContent":["  \n  .popoverContent{\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-04);\n    padding: var(--spacing-04);\n    z-index: 1\n  }\n  .featureDetailsPopOverContent{\n    min-width: 300px;\n    z-index: 1\n  }\n  .data-row {\n    display: flex;\n    column-gap: var(--spacing-04);\n   }\n  .data-section {\n    display: flex;\n    flex-direction: column;\n    column-gap: var(--spacing-02);\n  }\n  .key{\n    font-weight: bold;\n    color: var(--accent-color-two);\n  }\n  .header{\n    display: flex;\n    background-color: var(--accent-color-three);\n    color: var(--accent-color-two);\n    padding-left: var(--spacing-02);\n    margin-bottom: var(--spacing-04);\n  }\n  .closeButton{\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n  .options{\n    display: flex;\n    justify-content: flex-end;\n    column-gap: var(--spacing-04);\n  }\n  .mapType{\n    margin-bottom: var(--spacing-02);\n  }","import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'add-map-feature-popup',\n  styleUrl: 'map-popup.css',\n  shadow: true,\n})\nexport class AddMapFeaturePopUp {\n  @Prop() typeOptions: any[] = [\n    {\n      label: 'Point',\n      value: 'Point',\n    },\n    {\n      label: 'LineString',\n      value: 'LineString',\n    },\n    {\n      label: 'Polygon',\n      value: 'Polygon',\n    },\n  ];\n  @Prop() vectorLayerOptions: any[] = [];\n  @Prop() handleStartDrawingMapFeature;\n  @Prop() selectedLayer: any = null;\n  @Prop() selectedType: any = null;\n  @Prop() panelConfig?: {\n    getLayerOptionsFromLayerValues?: (layerValues: any[]) => any[];\n    getFeatureTypeOptionsFromLayerValue?: (layerValue: any) => any[];\n    hideLayerSelector?: boolean;\n  } = null;\n\n  @State() layerToAddOptions: any[] = [];\n  @State() drawingTypeOptions: any[] = null;\n\n  handleSetSelectedLayer = (e: any) => {\n    this.selectedLayer = e;\n  };\n  handleSetSelectedType = (e: any) => {\n    this.selectedType = e;\n  };\n\n  @Watch('panelConfig')\n  watchPanelConfig() {\n    if (this.panelConfig?.hideLayerSelector) {\n      this.selectedLayer = null;\n      this.layerToAddOptions = [];\n    } else {\n      this.getlayerOptions();\n    }\n  }\n\n  @Watch('selectedLayer')\n  @Watch('typeOptions')\n  updateDrawingTypeOptions() {\n    this.getDrawingTypeOptions();\n  }\n\n  getlayerOptions = () => {\n    if (this.panelConfig?.getLayerOptionsFromLayerValues) {\n      this.layerToAddOptions = this.panelConfig?.getLayerOptionsFromLayerValues(this.vectorLayerOptions);\n    } else {\n      this.layerToAddOptions = this.vectorLayerOptions.map(layer => {\n        return {\n          label: layer,\n          value: layer,\n        };\n      });\n    }\n  };\n\n  getDrawingTypeOptions = () => {\n    if (this.panelConfig?.getFeatureTypeOptionsFromLayerValue) {\n      this.drawingTypeOptions = this.panelConfig?.getFeatureTypeOptionsFromLayerValue(this.selectedLayer) ?? this.typeOptions;\n    } else {\n      this.drawingTypeOptions = this.typeOptions;\n    }\n  };\n\n  componentWillLoad() {\n    this.getlayerOptions();\n    this.getDrawingTypeOptions();\n  }\n\n  render() {\n    return (\n      <div class=\"popoverContent\">\n        {!this.panelConfig?.hideLayerSelector && (\n          <div>\n            <udp-selector\n              id={'layer'}\n              options={this.layerToAddOptions}\n              initialValue={this.selectedLayer}\n              label={'Layer'}\n              onChange={(e: CustomEvent) => {\n                this.handleSetSelectedLayer(e);\n              }}\n              large={false}\n            />\n            <div style={{ height: '12px' }}></div>\n          </div>\n        )}\n\n        <udp-selector\n          id={'type'}\n          options={this.drawingTypeOptions ?? []}\n          initialValue={this.selectedType}\n          label={'Type'}\n          onChange={(e: CustomEvent) => {\n            this.handleSetSelectedType(e);\n          }}\n          large={false}\n        />\n        <div style={{ height: '12px' }}></div>\n        <div class=\"formButton\">\n          <custom-button\n            label={<unity-typography variant=\"button\">{'Draw feature'}</unity-typography>}\n            onClick={() => this.handleStartDrawingMapFeature(this.selectedLayer, this.selectedType)}\n            variant={'outline'}\n            disabled={(this.selectedLayer === null && !this.panelConfig?.hideLayerSelector) || this.selectedType === null}\n          ></custom-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BY5RQ-T1.js

@@ -0,0 +1,16 @@
+import { i as iconMapping } from './p-CbHR7_dn.js';
+
+const getIconFromName = (iconName, iconType = 'carbon') => {
+    var _a;
+    if (!iconName || ((_a = iconName === null || iconName === void 0 ? void 0 : iconName.trim()) === null || _a === void 0 ? void 0 : _a.length) === 0)
+        return;
+    if (iconType === 'carbon') {
+        return iconMapping[iconName];
+    }
+    return null;
+};
+
+export { getIconFromName as g };
+//# sourceMappingURL=p-BY5RQ-T1.js.map
+
+//# sourceMappingURL=p-BY5RQ-T1.js.map

package/dist/components/p-BY5RQ-T1.js.map

@@ -0,0 +1 @@
+{"file":"p-BY5RQ-T1.js","mappings":";;AAEa,MAAA,eAAe,GAAG,CAAC,QAAgB,EAAE,QAAA,GAAmB,QAAQ,KAAI;;AAC/E,IAAA,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,EAAA,GAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,IAAI,EAAE,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,MAAK,CAAC;QAAE;AAEjD,IAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,QAAA,OAAO,WAAW,CAAC,QAAQ,CAAC;;AAE9B,IAAA,OAAO,IAAI;AACb;;;;","names":[],"sources":["src/components/my-component/UI/data-display/icons/iconUtils.ts"],"sourcesContent":["import iconMapping from './iconMapping';\n\nexport const getIconFromName = (iconName: string, iconType: string = 'carbon') => {\n  if (!iconName || iconName?.trim()?.length === 0) return;\n\n  if (iconType === 'carbon') {\n    return iconMapping[iconName];\n  }\n  return null;\n};\n"],"version":3}

package/dist/components/{p-ClToknIK.js → p-BbOHuqrJ.js}

@@ -11,7 +11,7 @@ import Renew16 from '@carbon/icons/es/renew/16';
 import { d as defineCustomElement$5 } from './p-DpLtIIwx.js';
 import { d as defineCustomElement$4 } from './p-B0Z1nz8S.js';
 import { d as defineCustomElement$3 } from './p-C-wDzVCk.js';
-import { d as defineCustomElement$2 } from './p-IlXn87Ki.js';
+import { d as defineCustomElement$2 } from './p-1Cv4cku0.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const gridPrimaryBarCss = ".header-bar{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--accent-color)}.title-section{flex:1;margin-left:16px;display:flex;gap:16px;align-items:center}.button-section{display:flex;gap:8px;align-items:center;padding-right:16px;padding-top:8px;padding-bottom:8px}";
@@ -152,7 +152,7 @@ const GridPrimaryBar = /*@__PURE__*/ proxyCustomElement(class GridPrimaryBar ext
         this.defaultActionButtons = this.initializeActionButtons();
     }
     render() {
-        return (h("div", { key: '356bfe545b354f6b9d689c23217727c3461c60ab', class: "header-bar" }, h("div", { key: 'f197a22c2acb2ff6a8de2df9b367b1904190b36a', class: "title-section" }, h("div", { key: '301d74f709afb690d6f6d02d4d2f7d4a776dcec5' }, h("unity-typography", { key: '78e2f59a9f5f375afeac4666a8cc8b47d11770ed', variant: "h4" }, this.title, " "), ' ')), h("div", { key: '15dc19c4c93587937ca291112371fa172314e143', class: "button-section" }, h("div", { key: '501e973e0aa47b2e6bb24aa99a10b9654d1a313b' }, h("slot", { key: 'd04a997b0bf46e56194e01c9a8444094c035ba88' })), this.defaultActionButtons.map(btn => {
+        return (h("div", { key: '2ad8f4d12090acb4021c546f4bc9c57ba5c44967', class: "header-bar" }, h("div", { key: '747497e1c5256f373e4e3b7b684c041eaad77218', class: "title-section" }, h("div", { key: '543ea337e8adce08bcf322da58344fa538dac5b2' }, h("unity-typography", { key: '4a98d271352f40274b60a8ec2faebb6637f8308e', variant: "h4" }, this.title, " "), ' ')), h("div", { key: '07250d3c352ba3c9fdb795b140d029a15874c556', class: "button-section" }, h("div", { key: '3d6375a1048e5911c1c14f418c70eeb855befcdf' }, h("slot", { key: '47531ac8ea37d798cd3f4736fa4e4195abc7139b' })), this.defaultActionButtons.map(btn => {
             const clickHandler = (event) => {
                 if (btn.clickHandler) {
                     btn.clickHandler(event);
@@ -165,7 +165,7 @@ const GridPrimaryBar = /*@__PURE__*/ proxyCustomElement(class GridPrimaryBar ext
                 return (h("stencil-icon-button-grid-action-header", { showLabel: this.showLabels, secondary: btn.secondary, icon: btn.icon, onClick: clickHandler, tooltip: btn.tooltip, iconClassName: btn.iconClassName }, btn.icon && h("i", { class: btn.icon }), btn.label.toLowerCase() === 'save' || (!this.hiddenLabels.includes(btn.label) && btn.showLabel) ? h("span", null, btn.label) : null));
             }
             return null;
-        }), this.primaryActionClick && this.primaryActionLabel && (h("custom-button", { key: '3d1c6432d3cb1afc41d1b5c4521eb48557e292d2', label: this.primaryActionLabel, onClick: (event) => this.primaryActionClick(event), size: "tall" }, this.primaryActionIcon && h("udp-icon", { key: 'd0442542aca3dcbf057818e72ed53adb20c458f4', iconName: this.primaryActionIcon, darkIcon: false }))))));
+        }), this.primaryActionClick && this.primaryActionLabel && (h("custom-button", { key: '6bd71e4db929effa85c531b98644347fa865100f', label: this.primaryActionLabel, onClick: (event) => this.primaryActionClick(event), size: "tall" }, this.primaryActionIcon && h("udp-icon", { key: 'df1c3549c67c0897a3231110fed289207590fba0', iconName: this.primaryActionIcon, darkIcon: false }))))));
     }
     static get watchers() { return {
         "window:resize": ["onResize"],
@@ -249,6 +249,6 @@ function defineCustomElement() {
 }
 
 export { GridPrimaryBar as G, defineCustomElement as d };
-//# sourceMappingURL=p-ClToknIK.js.map
+//# sourceMappingURL=p-BbOHuqrJ.js.map
 
-//# sourceMappingURL=p-ClToknIK.js.map
+//# sourceMappingURL=p-BbOHuqrJ.js.map

package/dist/components/{p-ClToknIK.js.map → p-BbOHuqrJ.js.map}

@@ -1 +1 @@
-{"file":"p-ClToknIK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/grid/grid-primary-bar/grid-primary-bar.css?tag=grid-primary-bar&encapsulation=shadow","src/components/my-component/UI/grid/grid-primary-bar/grid-primary-bar.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n.header-bar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    background: var(--accent-color);\n  }\n  \n  .title-section {\n    flex: 1;\n    margin-left: 16px;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n  }\n  \n  .button-section {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding-right: 16px;\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n  \n\n  /* Targeting by class added to grid-primary-bar */\n/* grid-primary-bar.custom-class {\n  overflow: hidden;\n} */\n\n/* .hydrated {\n  overflow: hidden;\n} */\n\n","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"],"version":3}
+{"file":"p-BbOHuqrJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/grid/grid-primary-bar/grid-primary-bar.css?tag=grid-primary-bar&encapsulation=shadow","src/components/my-component/UI/grid/grid-primary-bar/grid-primary-bar.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n.header-bar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    background: var(--accent-color);\n  }\n  \n  .title-section {\n    flex: 1;\n    margin-left: 16px;\n    display: flex;\n    gap: 16px;\n    align-items: center;\n  }\n  \n  .button-section {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    padding-right: 16px;\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n  \n\n  /* Targeting by class added to grid-primary-bar */\n/* grid-primary-bar.custom-class {\n  overflow: hidden;\n} */\n\n/* .hydrated {\n  overflow: hidden;\n} */\n\n","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"],"version":3}

package/dist/components/{p-CJsnV8uM.js → p-BfT3KUJC.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
 import { i as iconMapping } from './p-CbHR7_dn.js';
-import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$6 } from './p-D6Wo7quX.js';
 import { d as defineCustomElement$5 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$4 } from './p-C-wDzVCk.js';
 import { d as defineCustomElement$3 } from './p-Dri6DPsA.js';
-import { d as defineCustomElement$2 } from './p-DqPGCQm2.js';
+import { d as defineCustomElement$2 } from './p-s8qXxEgi.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const primaryActionHeaderCss = ":host{display:block;font-family:var(--font-family-base, sans-serif);background-color:var(--primary-action-header-background, #ffffff);color:var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));box-shadow:var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));height:var(--primary-action-header-height, 48px);padding:var(--primary-action-header-padding, 0 var(--spacing-04));box-sizing:border-box}.header-bar{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.title-section{flex-shrink:0;margin-right:var(--spacing-md, 16px)}.tabs{flex-grow:1;display:flex;justify-content:center;align-items:stretch;min-width:0}.tabs udp-tabs{width:100%;display:flex;justify-content:center}.tabs udp-tabs::part(tab-list){}.tabs udp-tabs button{padding:0 16px;margin:0 var(--spacing-xxs, 4px);height:100%;border:none;background-color:transparent;cursor:pointer;font-size:var(--font-size-sm, 0.875rem);color:var(--text-color-secondary, rgba(0, 0, 0, 0.6));text-transform:uppercase;font-weight:var(--font-weight-medium, 500);border-bottom:2px solid transparent;transition:color 0.3s ease, border-bottom-color 0.3s ease}.tabs udp-tabs button:hover{color:var(--primary-color-hover, var(--primary-color, #1976d2))}.tabs udp-tabs button.active{color:var(--primary-color, #1976d2);border-bottom:2px solid var(--primary-color, #1976d2)}.button-section{display:flex;align-items:center;flex-shrink:0;gap:var(--spacing-sm, 8px)}.button-section stencil-icon-button{color:var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)))}.button-section stencil-icon-button:hover{background-color:rgba(0,0,0,0.04)}.button-section custom-button{}";
@@ -128,6 +128,6 @@ function defineCustomElement() {
 }
 
 export { PrimaryActionHeader as P, defineCustomElement as d };
-//# sourceMappingURL=p-CJsnV8uM.js.map
+//# sourceMappingURL=p-BfT3KUJC.js.map
 
-//# sourceMappingURL=p-CJsnV8uM.js.map
+//# sourceMappingURL=p-BfT3KUJC.js.map

package/dist/components/{p-CJsnV8uM.js.map → p-BfT3KUJC.js.map}

@@ -1 +1 @@
-{"file":"p-CJsnV8uM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/primary-action-header/primary-action-header.css?tag=primary-action-header&encapsulation=shadow","src/components/my-component/UI/data-display/primary-action-header/primary-action-header.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n:host {\n  display: block;\n  font-family: var(--font-family-base, sans-serif); \n  background-color: var(--primary-action-header-background, #ffffff);\n  color: var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));\n  box-shadow: var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));\n  height: var(--primary-action-header-height, 48px);\n  padding: var(--primary-action-header-padding, 0 var(--spacing-04));\n  box-sizing: border-box;\n}\n\n.header-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.title-section {\n  flex-shrink: 0;\n  margin-right: var(--spacing-md, 16px);\n}\n\n/* Tabs are not fully supported yet - this is leftover from work Greg did with Mindscope */\n.tabs {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  min-width: 0;\n}\n\n.tabs udp-tabs {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.tabs udp-tabs::part(tab-list) {\n  /* This rule targets the 'tab-list' part within the udp-tabs component's shadow DOM. */\n  /* It's a placeholder for any specific styling needed for the tab list container itself. */\n  /* For example: display: flex; align-items: stretch; height: 100%; */\n}\n\n.tabs udp-tabs button {\n  padding: 0 16px;\n  margin: 0 var(--spacing-xxs, 4px);\n  height: 100%;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-color-secondary, rgba(0, 0, 0, 0.6));\n  text-transform: uppercase;\n  font-weight: var(--font-weight-medium, 500);\n  border-bottom: 2px solid transparent;\n  transition: color 0.3s ease, border-bottom-color 0.3s ease;\n}\n\n.tabs udp-tabs button:hover {\n  color: var(--primary-color-hover, var(--primary-color, #1976d2));\n}\n\n.tabs udp-tabs button.active {\n  color: var(--primary-color, #1976d2);\n  border-bottom: 2px solid var(--primary-color, #1976d2);\n}\n\n.button-section {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--spacing-sm, 8px);\n}\n\n.button-section stencil-icon-button {\n  color: var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)));\n}\n\n.button-section stencil-icon-button:hover {\n  background-color: rgba(0,0,0,0.04);\n}\n\n\n.button-section custom-button {\n  /* Styles for the primary action button */\n  /* You might want to use your design system's button styles here */\n  /* Example: margin-left: var(--spacing-sm, 8px); */\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport iconMapping from '../icons/iconMapping';\n\n@Component({\n  tag: 'primary-action-header',\n  styleUrl: 'primary-action-header.css',\n  shadow: true,\n})\nexport class PrimaryActionHeader {\n  @Prop() title: string;\n  @Prop() hiddenActionButtons: string[] = [];\n  @Prop() hiddenLabels: string[] = [];\n  @Prop() actionButtons: any[] = [];\n  @Prop() defaultActionButtons: 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() customExpandClick?: (event?: MouseEvent) => void;\n  @Prop() customShowViewClick?: (event?: MouseEvent) => void;\n  @Prop() activeTabIndex: number;\n  @Prop() selectTab: (index: number) => void;\n  @Prop() tabs: boolean = true;\n  @Prop() actionButtonLabel: string = '';\n  //   @State() activeTabIndex: number = 0;\n\n  getIconComponent(icon: string | Function, customIcon: Function) {\n    if (customIcon) {\n      return customIcon;\n    }\n\n    if (typeof icon === 'string') {\n      return iconMapping[icon];\n    }\n\n    return icon;\n  }\n\n  renderIcon(ActualIcon: any) {\n    if (ActualIcon && ActualIcon.elem === 'svg') {\n      return (\n        <svg {...ActualIcon.attrs}>\n          {ActualIcon.content.map((content: any, index: number) => {\n            return <path key={index} {...content.attrs} />;\n          })}\n        </svg>\n      );\n    }\n    return null;\n  }\n\n  //   selectTab(index: number) {\n  //     this.activeTabIndex = index;\n  //   }\n\n  render() {\n    console.log('active tab', this.activeTabIndex);\n\n    return (\n      <div class=\"header-bar\">\n        <div class=\"title-section\">\n          <unity-typography variant=\"h4\">{this.title}</unity-typography>\n        </div>\n\n        {/* IMPORTANT: NEED TO ADD A TABS COMPONENT SUPPORT - This is from work Greg did for mindscope demo */}\n        {this.tabs && (\n          <div class=\"tabs\">\n            <udp-tabs>\n              <button class={this.activeTabIndex === 0 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(0)}>\n                Demo Grid\n              </button>\n              <button class={this.activeTabIndex === 1 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(1)}>\n                Other Content\n              </button>\n            </udp-tabs>\n          </div>\n        )}\n\n        <div class=\"button-section\">\n          {this.defaultActionButtons.map(btn => {\n            // Determine the actual icon to use\n            const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);\n\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 secondary={btn.secondary} onClick={clickHandler} tooltip={btn.tooltip}>\n                  {/* Render icon directly */}\n                  {this.renderIcon(ActualIcon)}\n\n                  {/* Show label if it's not hidden and should be shown */}\n                  {!this.hiddenLabels.includes(btn.label) && btn.showLabel && <span>{btn.label}</span>}\n                </stencil-icon-button>\n              );\n            }\n            return null;\n          })}\n          {!this.actionButtonLabel && <div class=\"right-margin\" />}\n\n          {this.actionButtonLabel && (\n            <udp-button variant=\"contained\" color=\"secondary\" onClick={event => this.primaryActionClick(event.detail)}>\n              {this.actionButtonLabel}\n            </udp-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BfT3KUJC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/primary-action-header/primary-action-header.css?tag=primary-action-header&encapsulation=shadow","src/components/my-component/UI/data-display/primary-action-header/primary-action-header.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n:host {\n  display: block;\n  font-family: var(--font-family-base, sans-serif); \n  background-color: var(--primary-action-header-background, #ffffff);\n  color: var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));\n  box-shadow: var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));\n  height: var(--primary-action-header-height, 48px);\n  padding: var(--primary-action-header-padding, 0 var(--spacing-04));\n  box-sizing: border-box;\n}\n\n.header-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.title-section {\n  flex-shrink: 0;\n  margin-right: var(--spacing-md, 16px);\n}\n\n/* Tabs are not fully supported yet - this is leftover from work Greg did with Mindscope */\n.tabs {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  min-width: 0;\n}\n\n.tabs udp-tabs {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.tabs udp-tabs::part(tab-list) {\n  /* This rule targets the 'tab-list' part within the udp-tabs component's shadow DOM. */\n  /* It's a placeholder for any specific styling needed for the tab list container itself. */\n  /* For example: display: flex; align-items: stretch; height: 100%; */\n}\n\n.tabs udp-tabs button {\n  padding: 0 16px;\n  margin: 0 var(--spacing-xxs, 4px);\n  height: 100%;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-color-secondary, rgba(0, 0, 0, 0.6));\n  text-transform: uppercase;\n  font-weight: var(--font-weight-medium, 500);\n  border-bottom: 2px solid transparent;\n  transition: color 0.3s ease, border-bottom-color 0.3s ease;\n}\n\n.tabs udp-tabs button:hover {\n  color: var(--primary-color-hover, var(--primary-color, #1976d2));\n}\n\n.tabs udp-tabs button.active {\n  color: var(--primary-color, #1976d2);\n  border-bottom: 2px solid var(--primary-color, #1976d2);\n}\n\n.button-section {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--spacing-sm, 8px);\n}\n\n.button-section stencil-icon-button {\n  color: var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)));\n}\n\n.button-section stencil-icon-button:hover {\n  background-color: rgba(0,0,0,0.04);\n}\n\n\n.button-section custom-button {\n  /* Styles for the primary action button */\n  /* You might want to use your design system's button styles here */\n  /* Example: margin-left: var(--spacing-sm, 8px); */\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport iconMapping from '../icons/iconMapping';\n\n@Component({\n  tag: 'primary-action-header',\n  styleUrl: 'primary-action-header.css',\n  shadow: true,\n})\nexport class PrimaryActionHeader {\n  @Prop() title: string;\n  @Prop() hiddenActionButtons: string[] = [];\n  @Prop() hiddenLabels: string[] = [];\n  @Prop() actionButtons: any[] = [];\n  @Prop() defaultActionButtons: 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() customExpandClick?: (event?: MouseEvent) => void;\n  @Prop() customShowViewClick?: (event?: MouseEvent) => void;\n  @Prop() activeTabIndex: number;\n  @Prop() selectTab: (index: number) => void;\n  @Prop() tabs: boolean = true;\n  @Prop() actionButtonLabel: string = '';\n  //   @State() activeTabIndex: number = 0;\n\n  getIconComponent(icon: string | Function, customIcon: Function) {\n    if (customIcon) {\n      return customIcon;\n    }\n\n    if (typeof icon === 'string') {\n      return iconMapping[icon];\n    }\n\n    return icon;\n  }\n\n  renderIcon(ActualIcon: any) {\n    if (ActualIcon && ActualIcon.elem === 'svg') {\n      return (\n        <svg {...ActualIcon.attrs}>\n          {ActualIcon.content.map((content: any, index: number) => {\n            return <path key={index} {...content.attrs} />;\n          })}\n        </svg>\n      );\n    }\n    return null;\n  }\n\n  //   selectTab(index: number) {\n  //     this.activeTabIndex = index;\n  //   }\n\n  render() {\n    console.log('active tab', this.activeTabIndex);\n\n    return (\n      <div class=\"header-bar\">\n        <div class=\"title-section\">\n          <unity-typography variant=\"h4\">{this.title}</unity-typography>\n        </div>\n\n        {/* IMPORTANT: NEED TO ADD A TABS COMPONENT SUPPORT - This is from work Greg did for mindscope demo */}\n        {this.tabs && (\n          <div class=\"tabs\">\n            <udp-tabs>\n              <button class={this.activeTabIndex === 0 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(0)}>\n                Demo Grid\n              </button>\n              <button class={this.activeTabIndex === 1 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(1)}>\n                Other Content\n              </button>\n            </udp-tabs>\n          </div>\n        )}\n\n        <div class=\"button-section\">\n          {this.defaultActionButtons.map(btn => {\n            // Determine the actual icon to use\n            const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);\n\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 secondary={btn.secondary} onClick={clickHandler} tooltip={btn.tooltip}>\n                  {/* Render icon directly */}\n                  {this.renderIcon(ActualIcon)}\n\n                  {/* Show label if it's not hidden and should be shown */}\n                  {!this.hiddenLabels.includes(btn.label) && btn.showLabel && <span>{btn.label}</span>}\n                </stencil-icon-button>\n              );\n            }\n            return null;\n          })}\n          {!this.actionButtonLabel && <div class=\"right-margin\" />}\n\n          {this.actionButtonLabel && (\n            <udp-button variant=\"contained\" color=\"secondary\" onClick={event => this.primaryActionClick(event.detail)}>\n              {this.actionButtonLabel}\n            </udp-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BdWgc1UD.js → p-Bi8lqIP-.js}

@@ -1,12 +1,13 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DPon6DDX.js';
-import { g as getIconFromName, d as defineCustomElement$3 } from './p-IlXn87Ki.js';
-import { d as defineCustomElement$9 } from './p-hRee3qYx.js';
-import { d as defineCustomElement$8 } from './p-HrsHnWeG.js';
-import { d as defineCustomElement$7 } from './p-BYsLvu6g.js';
+import { g as getIconFromName } from './p-BY5RQ-T1.js';
+import { d as defineCustomElement$9 } from './p-D6Wo7quX.js';
+import { d as defineCustomElement$8 } from './p-6EzLtNtq.js';
+import { d as defineCustomElement$7 } from './p-CpMdhv3j.js';
 import { d as defineCustomElement$6 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$5 } from './p-C-wDzVCk.js';
 import { d as defineCustomElement$4 } from './p-Dri6DPsA.js';
-import { d as defineCustomElement$2 } from './p-BTIWOttf.js';
+import { d as defineCustomElement$3 } from './p-1Cv4cku0.js';
+import { d as defineCustomElement$2 } from './p-W_kxEzVl.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const listOptionsRendererCss = "/* Styles for list-options-renderer */\n\n:host {\n  padding: 0;\n  display: block;\n\n\n  .question-item-options-list-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-04, 16px);\n    padding: var(--spacing-04, 16px) 0;\n    /* background-color: var(--primary-color-alpha-15); */\n  }\n\n  .question-item-options-item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--spacing-04, 16px);\n    padding: var(--spacing-03, 16px);\n    width: 100%;\n    border-radius: var(--border-radius);\n    border: 1px solid var(--gray-03);\n    box-sizing: border-box;\n    box-shadow: var(--elevation-01);\n    background-color: var(--card-background-color, #fff);\n    margin: 0.3em 0;\n  }\n\n  .question-item-options-item-fields {\n    display: flex;\n    flex-direction: row;\n    gap: var(--spacing-04, 16px);\n    flex-grow: 1;\n  }\n\n  .list-options-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n/* \n.question-item-options-list-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: var(--border-radius);\n  gap: var(--spacing-03);\n}\n\n.question-item-options-list-single-item-container {\n}\n\n.question-item-options-text-field-list-item {\n  display: flex;\n  gap: var(--spacing-03);\n} */";
@@ -118,6 +119,6 @@ function defineCustomElement() {
 }
 
 export { ListOptionsRenderer as L, defineCustomElement as d };
-//# sourceMappingURL=p-BdWgc1UD.js.map
+//# sourceMappingURL=p-Bi8lqIP-.js.map
 
-//# sourceMappingURL=p-BdWgc1UD.js.map
+//# sourceMappingURL=p-Bi8lqIP-.js.map

package/dist/components/p-Bi8lqIP-.js.map

@@ -0,0 +1 @@
+{"file":"p-Bi8lqIP-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/list-options-renderer.css?tag=list-options-renderer&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-builder/udp-forms-builder-item/question_type_renderers/list-options-renderer.tsx"],"sourcesContent":["/* Styles for list-options-renderer */\n\n:host {\n  padding: 0;\n  display: block;\n\n\n  .question-item-options-list-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-04, 16px);\n    padding: var(--spacing-04, 16px) 0;\n    /* background-color: var(--primary-color-alpha-15); */\n  }\n\n  .question-item-options-item {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--spacing-04, 16px);\n    padding: var(--spacing-03, 16px);\n    width: 100%;\n    border-radius: var(--border-radius);\n    border: 1px solid var(--gray-03);\n    box-sizing: border-box;\n    box-shadow: var(--elevation-01);\n    background-color: var(--card-background-color, #fff);\n    margin: 0.3em 0;\n  }\n\n  .question-item-options-item-fields {\n    display: flex;\n    flex-direction: row;\n    gap: var(--spacing-04, 16px);\n    flex-grow: 1;\n  }\n\n  .list-options-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n/* \n.question-item-options-list-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: var(--border-radius);\n  gap: var(--spacing-03);\n}\n\n.question-item-options-list-single-item-container {\n}\n\n.question-item-options-text-field-list-item {\n  display: flex;\n  gap: var(--spacing-03);\n} */","import { Component, h, Prop, Host } from '@stencil/core';\nimport { UdpFormQuestion } from 'src/components/my-component/UI/forms/udp-forms/types'; // Using path that worked previously\n// We will need to import any components used like udp-icon, text-field, unity-typography etc.\n// This will require knowing their correct import paths or ensuring they are globally available.\nimport { getIconFromName } from '../../../../../data-display/icons/iconUtils';\n\n@Component({\n  tag: 'list-options-renderer',\n  styleUrl: 'list-options-renderer.css',\n  shadow: true,\n})\nexport class ListOptionsRenderer {\n  @Prop() question: UdpFormQuestion;\n  @Prop() isViewOnly: boolean;\n  @Prop() formSectionsDraft: any[][];\n  @Prop() sIndex: number;\n  @Prop() qIndex: number;\n  @Prop() lookupOptions: any[];\n  @Prop() onFormSectionsDraftChange: (updatedSections: any[][]) => void;\n  @Prop() getHandler: (fieldTypeId: number, handlerName: string) => any;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"question-item-options-list-container\">\n          <stencil-toggle\n            label=\"Use Lookup Options\"\n            disabled={this.isViewOnly}\n            checked={'lookupId' in this.question.fieldProperties}\n            labelPosition=\"right\"\n            onToggledChange={() => {\n              const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyToggleManualOrLookupOptions');\n              const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex);\n              this.onFormSectionsDraftChange(updated);\n              console.log(this.lookupOptions);\n            }}\n          ></stencil-toggle>\n\n          {/* Display lookup components if question is configured for lookup */}\n          {'lookupId' in this.question.fieldProperties && (\n            <div>\n              <udp-selector\n                label=\"Lookup Source\"\n                key=\"lookup-selector\"\n                initialValue={this.question.fieldProperties?.lookupId || ''}\n                options={this.lookupOptions}\n                disabled={this.isViewOnly}\n                required={true}\n                onChange={(e: CustomEvent) => {\n                  const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyLookupChange');\n                  const updated = handler(e.detail, this.formSectionsDraft, this.sIndex, this.qIndex);\n                  this.onFormSectionsDraftChange(updated);\n                }}\n              ></udp-selector>\n            </div>\n          )}\n\n          {/* Display lookup components if question is configured for manual options */}\n          {'items' in this.question.fieldProperties && (\n            <div>\n              <div class=\"list-options-header\">\n                <unity-typography variant=\"h6\">Configure Select Options</unity-typography>\n                {!this.isViewOnly && 'items' in this.question.fieldProperties && (\n                  <udp-button\n                    variant=\"text\"\n                    onClick={() => {\n                      const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyAddListItem');\n                      const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex, '', '');\n                      this.onFormSectionsDraftChange(updated);\n                    }}\n                    startIcon={<udp-icon iconName={'add'} darkIcon={true} />}\n                    title=\"Add an Option\"\n                  >\n                    Add an Option\n                  </udp-button>\n                )}\n              </div>\n              {this.question.fieldProperties?.items?.map((item, idx) => (\n                <div key={idx} class=\"question-item-options-item\">\n                  {/* <unity-typography variant={'h4'}>Option {idx + 1}.</unity-typography> */}\n                  <div class=\"question-item-options-item-fields\">\n                    <text-field\n                      label=\"Display Text\"\n                      value={item.display}\n                      disabled={this.isViewOnly}\n                      placeholder=\"Display Text\"\n                      required={true}\n                      onInput={e => {\n                        const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyListItemChange');\n                        const updated = handler(e, this.formSectionsDraft, this.sIndex, this.qIndex, idx, 'display');\n                        this.onFormSectionsDraftChange(updated);\n                      }}\n                    ></text-field>\n\n                    <text-field\n                      label=\"Option Value\"\n                      value={item.value}\n                      disabled={this.isViewOnly}\n                      placeholder=\"Option Value\"\n                      required={true}\n                      onInput={e => {\n                        const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyListItemChange');\n                        const updated = handler(e, this.formSectionsDraft, this.sIndex, this.qIndex, idx, 'value');\n                        this.onFormSectionsDraftChange(updated);\n                      }}\n                    ></text-field>\n                  </div>\n                  {this.question.fieldProperties.items.length > 1 && !this.isViewOnly && (\n                    <stencil-icon-button\n                      icon={getIconFromName('trashCan')}\n                      onClick={() => {\n                        const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyRemoveListItem');\n                        const updated = handler(this.formSectionsDraft, this.sIndex, this.qIndex, idx);\n                        this.onFormSectionsDraftChange(updated);\n                      }}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DNxY-i6k.js → p-BpD1NQKC.js}

@@ -3,11 +3,11 @@ import * as am5 from '@amcharts/amcharts5/index';
 import { p as parseValueToNumber, a as addAxisLabelsToXYChart } from './p-Dh0ptk6J.js';
 import * as am5xy from '@amcharts/amcharts5/xy';
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
-import { d as defineCustomElement$8 } from './p-BEwTqpWE.js';
+import { d as defineCustomElement$8 } from './p-CxOYMG-r.js';
 import { d as defineCustomElement$7 } from './p-TrvRIo8e.js';
-import { d as defineCustomElement$6 } from './p-hRee3qYx.js';
+import { d as defineCustomElement$6 } from './p-D6Wo7quX.js';
 import { d as defineCustomElement$5 } from './p-BGjVmQGN.js';
-import { d as defineCustomElement$4 } from './p-DeS7YSzc.js';
+import { d as defineCustomElement$4 } from './p-CMTLAuz8.js';
 import { d as defineCustomElement$3 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$2 } from './p-C-wDzVCk.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
@@ -256,6 +256,6 @@ function defineCustomElement() {
 }
 
 export { UdpDistributionChart as U, defineCustomElement as d };
-//# sourceMappingURL=p-DNxY-i6k.js.map
+//# sourceMappingURL=p-BpD1NQKC.js.map
 
-//# sourceMappingURL=p-DNxY-i6k.js.map
+//# sourceMappingURL=p-BpD1NQKC.js.map

package/dist/components/{p-DNxY-i6k.js.map → p-BpD1NQKC.js.map}

@@ -1 +1 @@
-{"file":"p-DNxY-i6k.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.css?tag=udp-distribution-chart&encapsulation=shadow","src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.tsx"],"sourcesContent":["","import { Component, Build, Prop, Element, h, Watch, State } from '@stencil/core';\n\nimport * as am5 from '@amcharts/amcharts5/index';\nimport { addAxisLabelsToXYChart } from '../chartUtils';\nimport * as am5xy from '@amcharts/amcharts5/xy';\nimport am5themes_Animated from '@amcharts/amcharts5/themes/Animated';\nimport { parseValueToNumber } from '../chartUtils';\n\nconst isNumberList = (obj: any): boolean => {\n  // Check if obj is an array\n  if (!Array.isArray(obj)) {\n    return false;\n  }\n\n  // Check if every element in the array is a number\n  return obj.every(element => typeof element === 'number');\n};\n\nconst generateMockData = (n: number, mean: number, stdDev: number): number[] => {\n  const randomNumbers: number[] = [];\n\n  for (let i = 0; i < n / 2; i++) {\n    const u1 = Math.random();\n    const u2 = Math.random();\n    const z0 = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);\n    const z1 = Math.sqrt(-2.0 * Math.log(u1)) * Math.sin(2.0 * Math.PI * u2);\n\n    randomNumbers.push(mean + z0 * stdDev);\n    randomNumbers.push(mean + z1 * stdDev);\n  }\n\n  // If n is odd, remove the last element to get exactly n elements\n  if (randomNumbers.length > n) {\n    randomNumbers.pop();\n  }\n\n  return randomNumbers;\n};\n\nfunction getHistogramData(source: number[]): { from: number; to: number; count: number }[] {\n  const maxCols = 10;\n  // Init\n  let data = [];\n  let min = Math.round(Math.min.apply(null, source));\n  let max = Math.max.apply(null, source);\n  let range = max - min;\n  let step = parseFloat((range / maxCols).toFixed(1));\n\n  // Create items\n  for (let i = 0; i < maxCols; i++) {\n    let from = min + i * step;\n    let to = min + (i + 1) * step;\n    data.push({\n      from: from,\n      to: to,\n      count: 0,\n    });\n  }\n\n  // Calculate range of the values\n  for (let i = 0; i < source.length; i++) {\n    let value = source[i];\n    let item = data.find(function (el) {\n      return value >= el.from && value <= el.to;\n    });\n    if (item) item.count++;\n  }\n  return data;\n}\n\n@Component({\n  tag: 'udp-distribution-chart',\n  styleUrl: 'udp-distribution-chart.css',\n  shadow: true,\n})\nexport class UdpDistributionChart {\n  @Element() el: HTMLElement;\n  @Prop() data: any[] = Build.isDev ? generateMockData(1000, 100, 10) : undefined;\n  @Prop() valueField: string;\n  @Prop() xAxisLabel: string;\n  @Prop() title: string = Build.isDev ? 'Test header' : undefined;\n  @Prop() subheader: string = Build.isDev ? 'Test SubHeader' : undefined;\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() kpis: { value: string; label: string }[] = Build.isDev\n    ? [\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n      ]\n    : undefined;\n  @Prop() xLabel: string = Build.isDev ? 'Test X Label' : undefined;\n  @Prop() yLabel: string = Build.isDev ? 'Test Y Label' : undefined;\n  @Prop() customWidth?: number; // Rather then setting a size you can set a custom width\n  @Prop() customHeight?: number; // Rather then setting a size you can set a custom height\n  @Prop() customCardWidth?: number; // Rather then setting a size you can set a custom card width\n  @Prop() customCardStyle?: {[key: string]: string} = {};\n  @Prop() kpisPosition: 'left' | 'top' = 'left';\n  @Prop() hideAdornment: boolean = false;\n\n  private chartId = 'udp-histogram';\n  private chartRoot: am5.Root;\n  @State() transformedData: { from: number; to: number; count: number }[];\n\n  @Watch('valueField')\n  @Watch('data')\n  @Watch('xLabel')\n  @Watch('yLabel')\n  transformData() {\n    if (!this.data || this.data.length === 0 || (this.valueField === null && !this.data.every(item => typeof item === 'number'))) return;\n\n    if (!this.data || this.data.length === 0) return;\n    let isolatedData;\n    if (this.valueField) isolatedData = this.data.map(row => parseValueToNumber(row[this.valueField]));\n    else isolatedData = this.data;\n    if (!isNumberList(isolatedData)) return;\n\n    this.transformedData = getHistogramData(isolatedData);\n  }\n\n  @Watch('transformedData')\n  async renderChart() {\n    // sometimes the element cannot be found right away so loop until it loads\n    if (this.el.shadowRoot.getElementById(this.chartId) == null) {\n      await setTimeout(this.renderChart, 50);\n    }\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n    this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));\n\n    this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);\n\n    // Create chart\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/\n    var chart = this.chartRoot.container.children.push(\n      am5xy.XYChart.new(this.chartRoot, {\n        panX: false,\n        panY: false,\n        wheelX: 'panX',\n        wheelY: 'zoomX',\n        layout: this.chartRoot.verticalLayout,\n      }),\n    );\n\n    // Add legend\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/\n    // var legend = chart.children.push(\n    //   am5.Legend.new(this.chartRoot, {\n    //     centerX: am5.p50,\n    //     x: am5.p50\n    //   })\n    // );\n\n    // Create axes\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/\n    var xAxis = chart.xAxes.push(\n      am5xy.CategoryAxis.new(this.chartRoot, {\n        categoryField: 'from',\n        renderer: am5xy.AxisRendererX.new(this.chartRoot, {\n          minGridDistance: 30,\n        }),\n        tooltip: am5.Tooltip.new(this.chartRoot, {}),\n      }),\n    );\n\n    xAxis.data.setAll(this.transformedData);\n    console.log(this.transformedData);\n    var yAxis = chart.yAxes.push(\n      am5xy.ValueAxis.new(this.chartRoot, {\n        maxPrecision: 0,\n        renderer: am5xy.AxisRendererY.new(this.chartRoot, {}),\n      }),\n    );\n\n    addAxisLabelsToXYChart(this.chartRoot, chart, this.xLabel, this.yLabel);\n\n    // Add series\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/\n    var series = chart.series.push(\n      am5xy.ColumnSeries.new(this.chartRoot, {\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: 'count',\n        categoryXField: 'from',\n      }),\n    );\n\n    series.columns.template.setAll({\n      tooltipText: `{from}-{to}`,\n      width: am5.percent(90),\n      tooltipY: 0,\n    });\n\n    series.bullets.push(function (x) {\n      return am5.Bullet.new(x, {\n        locationY: 0.5,\n        sprite: am5.Label.new(x, {\n          text: '{valueY}',\n          fill: x.interfaceColors.get('alternativeText'),\n          centerY: am5.p50,\n          centerX: am5.p50,\n          populateText: true,\n        }),\n      });\n    });\n\n    series.data.setAll(this.transformedData);\n    series.appear();\n\n    // Make stuff animate on load\n    // https://www.amcharts.com/docs/v5/concepts/animations/\n    chart.appear(1000, 100);\n  }\n\n  disconnectedCallback() {\n    // Clean up chart instance on component removal\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n  }\n  componentDidLoad() {\n    this.transformData();\n  }\n  render() {\n    return (\n      <chart-container\n        adjustChartWidthForKpis\n        chartId={this.chartId}\n        title={this.title}\n        subheader={this.subheader}\n        size={this.size}\n        kpis={this.kpis}\n        customWidth={this.customWidth}\n        customHeight={this.customHeight}\n        customCardWidth={this.customCardWidth}\n        customCardStyle={this.customCardStyle}\n        kpisPosition={this.kpisPosition}\n        hideAdornment={this.hideAdornment}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BpD1NQKC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.css?tag=udp-distribution-chart&encapsulation=shadow","src/components/my-component/UI/charts/udp-distribution-chart/udp-distribution-chart.tsx"],"sourcesContent":["","import { Component, Build, Prop, Element, h, Watch, State } from '@stencil/core';\n\nimport * as am5 from '@amcharts/amcharts5/index';\nimport { addAxisLabelsToXYChart } from '../chartUtils';\nimport * as am5xy from '@amcharts/amcharts5/xy';\nimport am5themes_Animated from '@amcharts/amcharts5/themes/Animated';\nimport { parseValueToNumber } from '../chartUtils';\n\nconst isNumberList = (obj: any): boolean => {\n  // Check if obj is an array\n  if (!Array.isArray(obj)) {\n    return false;\n  }\n\n  // Check if every element in the array is a number\n  return obj.every(element => typeof element === 'number');\n};\n\nconst generateMockData = (n: number, mean: number, stdDev: number): number[] => {\n  const randomNumbers: number[] = [];\n\n  for (let i = 0; i < n / 2; i++) {\n    const u1 = Math.random();\n    const u2 = Math.random();\n    const z0 = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);\n    const z1 = Math.sqrt(-2.0 * Math.log(u1)) * Math.sin(2.0 * Math.PI * u2);\n\n    randomNumbers.push(mean + z0 * stdDev);\n    randomNumbers.push(mean + z1 * stdDev);\n  }\n\n  // If n is odd, remove the last element to get exactly n elements\n  if (randomNumbers.length > n) {\n    randomNumbers.pop();\n  }\n\n  return randomNumbers;\n};\n\nfunction getHistogramData(source: number[]): { from: number; to: number; count: number }[] {\n  const maxCols = 10;\n  // Init\n  let data = [];\n  let min = Math.round(Math.min.apply(null, source));\n  let max = Math.max.apply(null, source);\n  let range = max - min;\n  let step = parseFloat((range / maxCols).toFixed(1));\n\n  // Create items\n  for (let i = 0; i < maxCols; i++) {\n    let from = min + i * step;\n    let to = min + (i + 1) * step;\n    data.push({\n      from: from,\n      to: to,\n      count: 0,\n    });\n  }\n\n  // Calculate range of the values\n  for (let i = 0; i < source.length; i++) {\n    let value = source[i];\n    let item = data.find(function (el) {\n      return value >= el.from && value <= el.to;\n    });\n    if (item) item.count++;\n  }\n  return data;\n}\n\n@Component({\n  tag: 'udp-distribution-chart',\n  styleUrl: 'udp-distribution-chart.css',\n  shadow: true,\n})\nexport class UdpDistributionChart {\n  @Element() el: HTMLElement;\n  @Prop() data: any[] = Build.isDev ? generateMockData(1000, 100, 10) : undefined;\n  @Prop() valueField: string;\n  @Prop() xAxisLabel: string;\n  @Prop() title: string = Build.isDev ? 'Test header' : undefined;\n  @Prop() subheader: string = Build.isDev ? 'Test SubHeader' : undefined;\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() kpis: { value: string; label: string }[] = Build.isDev\n    ? [\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n        { value: Math.round(Math.random() * 2000).toString(), label: 'YTD' },\n      ]\n    : undefined;\n  @Prop() xLabel: string = Build.isDev ? 'Test X Label' : undefined;\n  @Prop() yLabel: string = Build.isDev ? 'Test Y Label' : undefined;\n  @Prop() customWidth?: number; // Rather then setting a size you can set a custom width\n  @Prop() customHeight?: number; // Rather then setting a size you can set a custom height\n  @Prop() customCardWidth?: number; // Rather then setting a size you can set a custom card width\n  @Prop() customCardStyle?: {[key: string]: string} = {};\n  @Prop() kpisPosition: 'left' | 'top' = 'left';\n  @Prop() hideAdornment: boolean = false;\n\n  private chartId = 'udp-histogram';\n  private chartRoot: am5.Root;\n  @State() transformedData: { from: number; to: number; count: number }[];\n\n  @Watch('valueField')\n  @Watch('data')\n  @Watch('xLabel')\n  @Watch('yLabel')\n  transformData() {\n    if (!this.data || this.data.length === 0 || (this.valueField === null && !this.data.every(item => typeof item === 'number'))) return;\n\n    if (!this.data || this.data.length === 0) return;\n    let isolatedData;\n    if (this.valueField) isolatedData = this.data.map(row => parseValueToNumber(row[this.valueField]));\n    else isolatedData = this.data;\n    if (!isNumberList(isolatedData)) return;\n\n    this.transformedData = getHistogramData(isolatedData);\n  }\n\n  @Watch('transformedData')\n  async renderChart() {\n    // sometimes the element cannot be found right away so loop until it loads\n    if (this.el.shadowRoot.getElementById(this.chartId) == null) {\n      await setTimeout(this.renderChart, 50);\n    }\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n    this.chartRoot = am5.Root.new(this.el.shadowRoot.getElementById(this.chartId));\n\n    this.chartRoot.setThemes([am5themes_Animated.new(this.chartRoot)]);\n\n    // Create chart\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/\n    var chart = this.chartRoot.container.children.push(\n      am5xy.XYChart.new(this.chartRoot, {\n        panX: false,\n        panY: false,\n        wheelX: 'panX',\n        wheelY: 'zoomX',\n        layout: this.chartRoot.verticalLayout,\n      }),\n    );\n\n    // Add legend\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/\n    // var legend = chart.children.push(\n    //   am5.Legend.new(this.chartRoot, {\n    //     centerX: am5.p50,\n    //     x: am5.p50\n    //   })\n    // );\n\n    // Create axes\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/\n    var xAxis = chart.xAxes.push(\n      am5xy.CategoryAxis.new(this.chartRoot, {\n        categoryField: 'from',\n        renderer: am5xy.AxisRendererX.new(this.chartRoot, {\n          minGridDistance: 30,\n        }),\n        tooltip: am5.Tooltip.new(this.chartRoot, {}),\n      }),\n    );\n\n    xAxis.data.setAll(this.transformedData);\n    console.log(this.transformedData);\n    var yAxis = chart.yAxes.push(\n      am5xy.ValueAxis.new(this.chartRoot, {\n        maxPrecision: 0,\n        renderer: am5xy.AxisRendererY.new(this.chartRoot, {}),\n      }),\n    );\n\n    addAxisLabelsToXYChart(this.chartRoot, chart, this.xLabel, this.yLabel);\n\n    // Add series\n    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/\n    var series = chart.series.push(\n      am5xy.ColumnSeries.new(this.chartRoot, {\n        xAxis: xAxis,\n        yAxis: yAxis,\n        valueYField: 'count',\n        categoryXField: 'from',\n      }),\n    );\n\n    series.columns.template.setAll({\n      tooltipText: `{from}-{to}`,\n      width: am5.percent(90),\n      tooltipY: 0,\n    });\n\n    series.bullets.push(function (x) {\n      return am5.Bullet.new(x, {\n        locationY: 0.5,\n        sprite: am5.Label.new(x, {\n          text: '{valueY}',\n          fill: x.interfaceColors.get('alternativeText'),\n          centerY: am5.p50,\n          centerX: am5.p50,\n          populateText: true,\n        }),\n      });\n    });\n\n    series.data.setAll(this.transformedData);\n    series.appear();\n\n    // Make stuff animate on load\n    // https://www.amcharts.com/docs/v5/concepts/animations/\n    chart.appear(1000, 100);\n  }\n\n  disconnectedCallback() {\n    // Clean up chart instance on component removal\n    if (this.chartRoot) {\n      this.chartRoot.dispose();\n    }\n  }\n  componentDidLoad() {\n    this.transformData();\n  }\n  render() {\n    return (\n      <chart-container\n        adjustChartWidthForKpis\n        chartId={this.chartId}\n        title={this.title}\n        subheader={this.subheader}\n        size={this.size}\n        kpis={this.kpis}\n        customWidth={this.customWidth}\n        customHeight={this.customHeight}\n        customCardWidth={this.customCardWidth}\n        customCardStyle={this.customCardStyle}\n        kpisPosition={this.kpisPosition}\n        hideAdornment={this.hideAdornment}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BtOBW9_N.js

@@ -0,0 +1,142 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import Save from '@carbon/icons/es/save/20';
+import { u as useFormApi } from './p-CWAWWTnd.js';
+import { d as defineCustomElement$4 } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$3 } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$2 } from './p-vrP9HZiW.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpSaveDraftButtonCss = ".floating-save-button{position:fixed;top:5rem;right:2rem;z-index:1000;animation:slideInDown 0.3s ease-out}.inline-save-button{position:relative;display:inline-flex;align-items:center;margin-left:auto;}.floating-save-button.saving,.inline-save-button.saving{pointer-events:none}.saving-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(0, 0, 0, 0.8);color:white;border-radius:8px;font-size:0.9rem}.saved-state{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 1rem;background:rgba(34, 139, 34, 0.9);color:white;border-radius:8px;font-size:0.9rem;animation:fadeIn 0.3s ease-out}.inline-save-button .saving-state{padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.6);font-size:0.8rem}.inline-save-button .saved-state{padding:0.5rem 0.75rem;background:rgba(34, 139, 34, 0.8);font-size:0.8rem}.save-error-tooltip{position:absolute;top:100%;right:0;margin-top:0.5rem;background:#dc3545;color:white;padding:0.5rem 1rem;border-radius:8px;font-size:0.8rem;white-space:nowrap;box-shadow:0 4px 12px rgba(220, 53, 69, 0.3);animation:fadeIn 0.3s ease-out;z-index:1001}.save-error-tooltip::after{content:'';position:absolute;bottom:100%;right:1rem;border:6px solid transparent;border-bottom-color:#dc3545}.inline-save-button .save-error-tooltip{top:100%;bottom:auto;margin-top:0.5rem;margin-bottom:0}.inline-save-button .save-error-tooltip::after{top:-6px;border-top-color:transparent;border-bottom-color:#dc3545}@keyframes slideInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@media (max-width: 768px){.floating-save-button{bottom:1rem;right:1rem;top:auto;}.saving-state{padding:0.6rem 0.8rem;font-size:0.8rem}.inline-save-button .saving-state{padding:0.4rem 0.6rem;font-size:0.75rem}}.primary-icon{--icon-color:var(--primary-color, #1976d2)}.primary-icon::part(icon){fill:var(--icon-color) !important}.primary-icon udp-icon-button::part(icon),.primary-icon .icon{fill:var(--primary-color, #1976d2) !important}@media (prefers-reduced-motion: reduce){.floating-save-button,.save-error-tooltip{animation:none}}";
+
+const UdpSaveDraftButton = /*@__PURE__*/ proxyCustomElement(class UdpSaveDraftButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.isVisible = false;
+        this.isSaving = false;
+        this.saveError = null;
+        this.showSavedMessage = false;
+        this.shouldBeInline = false;
+        this.formApi = null;
+        this.handleSaveClick = async () => {
+            if (!this.formApi || this.isSaving) {
+                return;
+            }
+            if (typeof this.handleSave !== 'function') {
+                return;
+            }
+            const values = this.formApi.getValues();
+            try {
+                await this.handleSave(values);
+                this.formApi.reset(values);
+            }
+            catch (error) {
+                console.error('The onSave handler threw an error. The form will remain dirty.', error);
+            }
+        };
+    }
+    async componentDidLoad() {
+        this.formApi = await useFormApi(this.el);
+        this.checkForOverlap();
+        this.setupOverlapDetection();
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.checkOverlapTimeoutId) {
+            clearTimeout(this.checkOverlapTimeoutId);
+        }
+    }
+    handleWindowResize() {
+        this.debouncedOverlapCheck();
+    }
+    setupOverlapDetection() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.debouncedOverlapCheck();
+            });
+            const formContainer = this.el.closest('udp-forms-ui, .form-container, udp-container');
+            if (formContainer) {
+                this.resizeObserver.observe(formContainer);
+            }
+            const mainContent = document.querySelector('main, [role="main"]') || document.body;
+            if (mainContent) {
+                this.resizeObserver.observe(mainContent);
+            }
+        }
+    }
+    debouncedOverlapCheck() {
+        if (this.checkOverlapTimeoutId) {
+            clearTimeout(this.checkOverlapTimeoutId);
+        }
+        this.checkOverlapTimeoutId = setTimeout(() => {
+            this.checkForOverlap();
+        }, 100);
+    }
+    checkForOverlap() {
+        // This logic determines which style to apply.
+        // Using 1024px as the breakpoint to switch between floating and inline.
+        const minWidthNeeded = 1280;
+        this.shouldBeInline = window.innerWidth < minWidthNeeded;
+    }
+    render() {
+        if (!this.isVisible && !this.showSavedMessage) {
+            return null;
+        }
+        // Dynamically set the class based on screen size.
+        // This will toggle between your .floating-save-button and .inline-save-button styles.
+        const containerClass = this.shouldBeInline ? 'inline-save-button' : 'floating-save-button';
+        const isInlineMode = this.shouldBeInline;
+        return (h("div", { class: `${containerClass} ${this.isSaving ? 'saving' : ''} ${this.showSavedMessage ? 'saved' : ''}` }, this.isSaving ? (h("div", { class: "saving-state" }, h("unity-spinner", { size: "small" }), !isInlineMode && h("span", null, "Saving..."))) : this.isVisible ? (h("udp-icon-button", { icon: Save, onClick: this.handleSaveClick, tooltip: isInlineMode ? undefined : 'Save Changes', variant: "contained", color: isInlineMode ? 'inherit' : 'primary', iconColor: isInlineMode ? 'primary' : null, size: isInlineMode ? 'small' : 'medium' }, isInlineMode ? '' : 'Save Changes')) : (h("div", { class: "saved-state" }, !isInlineMode && h("span", null, "Saved"))), this.saveError && h("div", { class: "save-error-tooltip" }, this.saveError)));
+    }
+    get el() { return this; }
+    static get style() { return udpSaveDraftButtonCss; }
+}, [1, "udp-save-draft-button", {
+        "isVisible": [4, "is-visible"],
+        "isSaving": [4, "is-saving"],
+        "saveError": [1, "save-error"],
+        "showSavedMessage": [4, "show-saved-message"],
+        "handleSave": [16, "handle-save"],
+        "shouldBeInline": [32],
+        "formApi": [32]
+    }, [[9, "resize", "handleWindowResize"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-save-draft-button", "udp-ambient-tool-tip", "udp-badge", "udp-icon-button", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-save-draft-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpSaveDraftButton);
+            }
+            break;
+        case "udp-ambient-tool-tip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "udp-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "udp-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { UdpSaveDraftButton as U, defineCustomElement as d };
+//# sourceMappingURL=p-BtOBW9_N.js.map
+
+//# sourceMappingURL=p-BtOBW9_N.js.map

package/dist/components/p-BtOBW9_N.js.map

@@ -0,0 +1 @@
+{"file":"p-BtOBW9_N.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-save-draft-button/udp-save-draft-button.css?tag=udp-save-draft-button&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-save-draft-button/udp-save-draft-button.tsx"],"sourcesContent":["/* Single save button that moves between header and floating positions */\n\n/* Floating mode - positioned fixed in top-right, accounting for app bar */\n.floating-save-button {\n  position: fixed;\n  top: 5rem; /* Increased from 2rem to account for app bar height */\n  right: 2rem;\n  z-index: 1000;\n  animation: slideInDown 0.3s ease-out;\n}\n\n/* Inline mode - positioned relative for header placement */\n.inline-save-button {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  margin-left: auto; /* Push to right side of header */\n}\n\n/* Common styles for both modes */\n.floating-save-button.saving,\n.inline-save-button.saving {\n  pointer-events: none;\n}\n\n/* Saving state styling */\n.saving-state {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: rgba(0, 0, 0, 0.8);\n  color: white;\n  border-radius: 8px;\n  font-size: 0.9rem;\n}\n\n/* Saved state styling */\n.saved-state {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: rgba(34, 139, 34, 0.9); /* Forest green background */\n  color: white;\n  border-radius: 8px;\n  font-size: 0.9rem;\n  animation: fadeIn 0.3s ease-out;\n}\n\n/* Inline saving state - more compact */\n.inline-save-button .saving-state {\n  padding: 0.5rem 0.75rem;\n  background: rgba(0, 0, 0, 0.6);\n  font-size: 0.8rem;\n}\n\n/* Inline saved state - more compact */\n.inline-save-button .saved-state {\n  padding: 0.5rem 0.75rem;\n  background: rgba(34, 139, 34, 0.8);\n  font-size: 0.8rem;\n}\n\n/* Error tooltip positioning - for floating button (top-right) */\n.save-error-tooltip {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 0.5rem;\n  background: #dc3545;\n  color: white;\n  padding: 0.5rem 1rem;\n  border-radius: 8px;\n  font-size: 0.8rem;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);\n  animation: fadeIn 0.3s ease-out;\n  z-index: 1001;\n}\n\n.save-error-tooltip::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  right: 1rem;\n  border: 6px solid transparent;\n  border-bottom-color: #dc3545;\n}\n\n/* Inline mode error tooltip - position differently */\n.inline-save-button .save-error-tooltip {\n  top: 100%;\n  bottom: auto;\n  margin-top: 0.5rem;\n  margin-bottom: 0;\n}\n\n.inline-save-button .save-error-tooltip::after {\n  top: -6px;\n  border-top-color: transparent;\n  border-bottom-color: #dc3545;\n}\n\n/* Animations */\n@keyframes slideInDown {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .floating-save-button {\n    bottom: 1rem;\n    right: 1rem;\n    top: auto; /* Override fixed top position on small screens */\n  }\n\n  .saving-state {\n    padding: 0.6rem 0.8rem;\n    font-size: 0.8rem;\n  }\n\n  .inline-save-button .saving-state {\n    padding: 0.4rem 0.6rem;\n    font-size: 0.75rem;\n  }\n}\n\n/* Override icon color to primary when button is inherit color */\n.primary-icon {\n  --icon-color: var(--primary-color, #1976d2);\n}\n\n.primary-icon::part(icon) {\n  fill: var(--icon-color) !important;\n}\n\n/* Alternative approach using deep selector */\n.primary-icon udp-icon-button::part(icon),\n.primary-icon .icon {\n  fill: var(--primary-color, #1976d2) !important;\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .floating-save-button,\n  .save-error-tooltip {\n    animation: none;\n  }\n}\n","import { Component, Prop, h, State, Element, Listen } from '@stencil/core';\nimport Save from '@carbon/icons/es/save/20';\nimport { useFormApi } from '../../../form/useFormApi';\n\n@Component({\n  tag: 'udp-save-draft-button',\n  styleUrl: 'udp-save-draft-button.css',\n  shadow: true,\n})\nexport class UdpSaveDraftButton {\n  @Element() el: HTMLElement;\n\n  @Prop() isVisible: boolean = false;\n  @Prop() isSaving: boolean = false;\n  @Prop() saveError: string | null = null;\n  @Prop() showSavedMessage: boolean = false;\n  @Prop() handleSave: (values?: any) => void;\n\n  @State() shouldBeInline: boolean = false;\n  @State() private formApi: any | null = null;\n\n  private resizeObserver: ResizeObserver;\n  private checkOverlapTimeoutId: any;\n\n  async componentDidLoad() {\n    this.formApi = await useFormApi(this.el);\n    this.checkForOverlap();\n    this.setupOverlapDetection();\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    if (this.checkOverlapTimeoutId) {\n      clearTimeout(this.checkOverlapTimeoutId);\n    }\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.debouncedOverlapCheck();\n  }\n\n  private setupOverlapDetection() {\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        this.debouncedOverlapCheck();\n      });\n      const formContainer = this.el.closest('udp-forms-ui, .form-container, udp-container');\n      if (formContainer) {\n        this.resizeObserver.observe(formContainer);\n      }\n      const mainContent = document.querySelector('main, [role=\"main\"]') || document.body;\n      if (mainContent) {\n        this.resizeObserver.observe(mainContent);\n      }\n    }\n  }\n\n  private debouncedOverlapCheck() {\n    if (this.checkOverlapTimeoutId) {\n      clearTimeout(this.checkOverlapTimeoutId);\n    }\n    this.checkOverlapTimeoutId = setTimeout(() => {\n      this.checkForOverlap();\n    }, 100);\n  }\n\n  private checkForOverlap() {\n    // This logic determines which style to apply.\n    // Using 1024px as the breakpoint to switch between floating and inline.\n    const minWidthNeeded = 1280;\n    this.shouldBeInline = window.innerWidth < minWidthNeeded;\n  }\n\n  private handleSaveClick = async () => {\n    if (!this.formApi || this.isSaving) {\n      return;\n    }\n    if (typeof this.handleSave !== 'function') {\n      return;\n    }\n    const values = this.formApi.getValues();\n    try {\n      await this.handleSave(values);\n      this.formApi.reset(values);\n    } catch (error) {\n      console.error('The onSave handler threw an error. The form will remain dirty.', error);\n    }\n  };\n\n  render() {\n    if (!this.isVisible && !this.showSavedMessage) {\n      return null;\n    }\n\n    // Dynamically set the class based on screen size.\n    // This will toggle between your .floating-save-button and .inline-save-button styles.\n    const containerClass = this.shouldBeInline ? 'inline-save-button' : 'floating-save-button';\n    const isInlineMode = this.shouldBeInline;\n\n    return (\n      <div class={`${containerClass} ${this.isSaving ? 'saving' : ''} ${this.showSavedMessage ? 'saved' : ''}`}>\n        {this.isSaving ? (\n          <div class=\"saving-state\">\n            <unity-spinner size=\"small\" />\n            {!isInlineMode && <span>Saving...</span>}\n          </div>\n        ) : this.isVisible ? (\n          <udp-icon-button\n            icon={Save}\n            onClick={this.handleSaveClick}\n            tooltip={isInlineMode ? undefined : 'Save Changes'}\n            variant=\"contained\"\n            color={isInlineMode ? 'inherit' : 'primary'}\n            iconColor={isInlineMode ? 'primary' : null}\n            size={isInlineMode ? 'small' : 'medium'}\n          >\n            {isInlineMode ? '' : 'Save Changes'}\n          </udp-icon-button>\n        ) : (\n          <div class=\"saved-state\">\n            {!isInlineMode && <span>Saved</span>}\n          </div>\n        )}\n\n        {this.saveError && <div class=\"save-error-tooltip\">{this.saveError}</div>}\n      </div>\n    );\n  }\n}\n"],"version":3}