udp-stencil-component-library 1.0.2 → 1.0.3

package/dist/components/{p-Akx0UDMW.js → p-BwPAbBUr.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-DPon6DDX.js';
 import { ModuleRegistry, ClientSideRowModelModule, ValidationModule, PaginationModule, AllCommunityModule, themeQuartz, createGrid } from 'ag-grid-community-v33';
-import { d as defineCustomElement$1 } from './p-ByM88ZWk.js';
+import { d as defineCustomElement$1 } from './p-jpt3zFdi.js';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule, PaginationModule, AllCommunityModule]);
 const myTheme = themeQuartz.withParams({
@@ -35,7 +35,7 @@ const AgGridBase = /*@__PURE__*/ proxyCustomElement(class AgGridBase extends H {
         return this.gridApi;
     }
     render() {
-        return (h("div", { key: 'b238a00d298f68a70183b1b919bac8ead632198d' }, h("grid-header", { key: 'eb29a176d36b8902b8f716aeaaff41bf69b8c2d5', headerConfig: this.headerConfig }), h("div", { key: '308b5401a3094b1060993496471d4c7403f60e26', id: "myNewGrid", style: {
+        return (h("div", { key: '27eb9cdaa0f1d15b932612cddd3ef58307b0f87d' }, h("grid-header", { key: 'e61b5726de062a47f65b5ba1f1980f4dcf3916fb', headerConfig: this.headerConfig }), h("div", { key: 'b629a0a3cdd114395435bae7ff75ed85deca995b', id: "myNewGrid", style: {
                 height: this.gridHeight,
             } })));
     }
@@ -66,6 +66,6 @@ function defineCustomElement() {
 }
 
 export { AgGridBase as A, defineCustomElement as d };
-//# sourceMappingURL=p-Akx0UDMW.js.map
+//# sourceMappingURL=p-BwPAbBUr.js.map
 
-//# sourceMappingURL=p-Akx0UDMW.js.map
+//# sourceMappingURL=p-BwPAbBUr.js.map

package/dist/components/{p-Akx0UDMW.js.map → p-BwPAbBUr.js.map}

@@ -1 +1 @@
-{"file":"p-Akx0UDMW.js","mappings":";;;;AAIA,cAAc,CAAC,eAAe,CAAC,CAAC,wBAAwB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AAElH,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CACpC;AACE,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,eAAe,EAAE,WAAW;AAC5B,IAAA,kBAAkB,EAAE,OAAO;CAC5B,EACD,WAAW,CACZ;MAMY,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAiB,EAAE;AAC/B,QAAA,IAAU,CAAA,UAAA,GAAW,MAAM;AA6B3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACnC,SAAC;AAeF;IA1CC,gBAAgB,GAAA;QACd,MAAM,WAAW,GACf,MAAA,CAAA,MAAA,CAAA,EAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,OAAO,EACd,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE;AACb,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,MAAM,EAAE;AACT,aAAA,EAAA,EACE,IAAI,CAAC,UAAU,CACnB;AAED,QAAA,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAgB,EAAE,WAAW,CAAC;;IAG7E,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,EAAE;;AAIzB,IAAA,MAAM,UAAU,GAAA;QACd,OAAO,IAAI,CAAC,OAAO;;IAQrB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,YAAY,EAAE,IAAI,CAAC,YAAY,EAAI,CAAA,EAChD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB,EACI,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/grid/new-grid/ag-grid-base.tsx"],"sourcesContent":["import { Component, h, Element, Prop, Method, EventEmitter, Event } from '@stencil/core';\nimport { createGrid, GridOptions, ClientSideRowModelModule, ModuleRegistry, ValidationModule, themeQuartz, PaginationModule, GridApi, GridReadyEvent, AllCommunityModule } from 'ag-grid-community-v33';\nimport { HeaderConfig } from './interfaces/grid';\n\nModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule, PaginationModule, AllCommunityModule]);\n\nconst myTheme = themeQuartz.withParams(\n  {\n    backgroundColor: '#FFE8E0',\n    foregroundColor: '#361008CC',\n    browserColorScheme: 'light',\n  },\n  'light-red',\n);\n\n@Component({\n  tag: 'ag-grid-base',\n  shadow: false,\n})\nexport class AgGridBase {\n  @Element() el!: HTMLElement;\n\n  @Prop() gridConfig!: GridOptions;\n  @Prop() headerConfig: HeaderConfig = {};\n  @Prop() gridHeight: string = '40vh';\n  @Event() gridReady!: EventEmitter<GridApi>;\n\n  private gridApi!: GridApi;\n\n  componentDidLoad() {\n    const gridOptions: GridOptions = {\n      onGridReady: this.onGridReady,\n      theme: myTheme,\n      pagination: true,\n      defaultColDef: {\n        sortable: true,\n        filter: true\n      },\n      ...this.gridConfig,\n    };\n\n    createGrid(this.el.querySelector('#myNewGrid') as HTMLElement, gridOptions);\n  }\n\n  disconnectedCallback() {\n    this.gridApi?.destroy();\n  }\n\n  @Method()\n  async getGridApi(): Promise<GridApi> {\n    return this.gridApi;\n  }\n\n  private onGridReady = (e: GridReadyEvent) => {\n    this.gridApi = e.api;\n    this.gridReady.emit(this.gridApi);\n  };\n\n  render() {\n    return (\n      <div>\n        <grid-header headerConfig={this.headerConfig} />\n        <div\n          id=\"myNewGrid\"\n          style={{\n            height: this.gridHeight,\n          }}\n        ></div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BwPAbBUr.js","mappings":";;;;AAIA,cAAc,CAAC,eAAe,CAAC,CAAC,wBAAwB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AAElH,MAAM,OAAO,GAAG,WAAW,CAAC,UAAU,CACpC;AACE,IAAA,eAAe,EAAE,SAAS;AAC1B,IAAA,eAAe,EAAE,WAAW;AAC5B,IAAA,kBAAkB,EAAE,OAAO;CAC5B,EACD,WAAW,CACZ;MAMY,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AAJvB,IAAA,WAAA,GAAA;;;;AAQU,QAAA,IAAY,CAAA,YAAA,GAAiB,EAAE;AAC/B,QAAA,IAAU,CAAA,UAAA,GAAW,MAAM;AA6B3B,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAiB,KAAI;AAC1C,YAAA,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG;YACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AACnC,SAAC;AAeF;IA1CC,gBAAgB,GAAA;QACd,MAAM,WAAW,GACf,MAAA,CAAA,MAAA,CAAA,EAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,OAAO,EACd,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE;AACb,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,MAAM,EAAE;AACT,aAAA,EAAA,EACE,IAAI,CAAC,UAAU,CACnB;AAED,QAAA,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,YAAY,CAAgB,EAAE,WAAW,CAAC;;IAG7E,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO,EAAE;;AAIzB,IAAA,MAAM,UAAU,GAAA;QACd,OAAO,IAAI,CAAC,OAAO;;IAQrB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,YAAY,EAAE,IAAI,CAAC,YAAY,EAAI,CAAA,EAChD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB,EACI,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/grid/new-grid/ag-grid-base.tsx"],"sourcesContent":["import { Component, h, Element, Prop, Method, EventEmitter, Event } from '@stencil/core';\nimport { createGrid, GridOptions, ClientSideRowModelModule, ModuleRegistry, ValidationModule, themeQuartz, PaginationModule, GridApi, GridReadyEvent, AllCommunityModule } from 'ag-grid-community-v33';\nimport { HeaderConfig } from './interfaces/grid';\n\nModuleRegistry.registerModules([ClientSideRowModelModule, ValidationModule, PaginationModule, AllCommunityModule]);\n\nconst myTheme = themeQuartz.withParams(\n  {\n    backgroundColor: '#FFE8E0',\n    foregroundColor: '#361008CC',\n    browserColorScheme: 'light',\n  },\n  'light-red',\n);\n\n@Component({\n  tag: 'ag-grid-base',\n  shadow: false,\n})\nexport class AgGridBase {\n  @Element() el!: HTMLElement;\n\n  @Prop() gridConfig!: GridOptions;\n  @Prop() headerConfig: HeaderConfig = {};\n  @Prop() gridHeight: string = '40vh';\n  @Event() gridReady!: EventEmitter<GridApi>;\n\n  private gridApi!: GridApi;\n\n  componentDidLoad() {\n    const gridOptions: GridOptions = {\n      onGridReady: this.onGridReady,\n      theme: myTheme,\n      pagination: true,\n      defaultColDef: {\n        sortable: true,\n        filter: true\n      },\n      ...this.gridConfig,\n    };\n\n    createGrid(this.el.querySelector('#myNewGrid') as HTMLElement, gridOptions);\n  }\n\n  disconnectedCallback() {\n    this.gridApi?.destroy();\n  }\n\n  @Method()\n  async getGridApi(): Promise<GridApi> {\n    return this.gridApi;\n  }\n\n  private onGridReady = (e: GridReadyEvent) => {\n    this.gridApi = e.api;\n    this.gridReady.emit(this.gridApi);\n  };\n\n  render() {\n    return (\n      <div>\n        <grid-header headerConfig={this.headerConfig} />\n        <div\n          id=\"myNewGrid\"\n          style={{\n            height: this.gridHeight,\n          }}\n        ></div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BzH4NpB-.js

@@ -0,0 +1,301 @@
+import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
+import { U as UdpFormsFieldTypeEnum } from './p-DtiAfg0X.js';
+import { f as fontOverrideMapping, o as overrideFont, d as defineCustomElement$5 } from './p-CL4gkS6u.js';
+import { g as getIconFromName } from './p-BY5RQ-T1.js';
+import { d as defineCustomElement$o } from './p-DpLtIIwx.js';
+import { d as defineCustomElement$n } from './p-Cdz5sX_v.js';
+import { d as defineCustomElement$m } from './p-Dx5ehH3t.js';
+import { d as defineCustomElement$l } from './p-BU3lEg0a.js';
+import { d as defineCustomElement$k } from './p-B3gbGwCE.js';
+import { d as defineCustomElement$j } from './p-ill5r6eV.js';
+import { d as defineCustomElement$i } from './p-26jyxB7s.js';
+import { d as defineCustomElement$h } from './p-D6Wo7quX.js';
+import { d as defineCustomElement$g } from './p-C2j9tPIU.js';
+import { d as defineCustomElement$f } from './p-DZaCCOXB.js';
+import { d as defineCustomElement$e } from './p-CpMdhv3j.js';
+import { d as defineCustomElement$d } from './p-BGjVmQGN.js';
+import { d as defineCustomElement$c } from './p-CMTLAuz8.js';
+import { d as defineCustomElement$b } from './p-ZeWoGdjP.js';
+import { d as defineCustomElement$a } from './p-C-wDzVCk.js';
+import { d as defineCustomElement$9 } from './p-DBtdo56U.js';
+import { d as defineCustomElement$8 } from './p-Cp1kbBGM.js';
+import { d as defineCustomElement$7 } from './p-DnMRLbBX.js';
+import { d as defineCustomElement$6 } from './p-vrP9HZiW.js';
+import { d as defineCustomElement$4 } from './p-BtOBW9_N.js';
+import { d as defineCustomElement$3 } from './p-W_kxEzVl.js';
+import { d as defineCustomElement$2 } from './p-Oil5iqFm.js';
+import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
+
+const udpFormsUiCss = ".background{background-color:var(--gray-01);height:100%;overflow-y:auto;overflow-x:hidden}.item{padding-bottom:var(--spacing-02);}.items{display:flex;flex-direction:column;gap:var(--spacing-05);padding-top:var(--spacing-02);padding-bottom:var(--spacing-02)}.footer{display:flex;flex-direction:row-reverse}.submit{background-color:var(--primary-color);box-sizing:border-box;border:none;color:white;padding:8px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.3s ease;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:48px;min-height:24px;}.submit:disabled{background-color:var(--gray-05);cursor:default}.submit-card{display:flex;flex-direction:row;justify-content:space-between}.form-section-content{margin-bottom:var(--spacing-05);background-color:white;padding:16px;display:flex;flex-direction:column;gap:var(--spacing-05)}.form-container{padding-top:var(--spacing-05);padding-bottom:var(--spacing-05)}.form-section-block{margin-bottom:var(--spacing-05)}.form-section-header{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--primary-color, #000);color:var(--primary-contrast-text, #FFF);padding:var(--spacing-04, 16px) var(--spacing-05, 24px);align-items:center;min-height:var(--spacing-10, 60px)}.form-section-text{margin-bottom:var(--spacing-03)}.center-div{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.finish-button{display:flex;flex-direction:column;justify-content:center}.form-renderer-header{padding:var(--spacing-05) var(--spacing-05);background-color:var(--primary-color-dark, #000);color:var(--primary-contrast-text, #FFF);display:flex;justify-content:space-between;align-items:center}.header-content{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-03)}.header-text{flex:1;min-width:0;}.header-save-button{display:block;}.floating-save-button{display:block;}@media (max-width: 768px){.header-content{flex-direction:column;align-items:stretch;gap:var(--spacing-02)}.header-text{margin-bottom:var(--spacing-02)}}@media (max-height: 600px){.header-save-button{display:block}.floating-save-button{display:none}}.auto-save-status{margin-top:var(--spacing-02);padding:var(--spacing-01) 0;font-size:12px;opacity:0.8}";
+
+const UdpFormsUi = /*@__PURE__*/ proxyCustomElement(class UdpFormsUi extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.initialValues = {};
+        this.submitSuccessful = false;
+        this.loading = false;
+        this.isSaving = false;
+        this.saveError = null;
+        this.showAutoSaveStatus = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.currentFormData = {};
+        this.userId = null;
+        this.isSubmitted = false;
+        this.isFormDirty = false;
+        this.showSavedMessage = false;
+        this.titleId = 'udp-forms-title';
+        this.descriptionId = 'udp-forms-description';
+    }
+    componentDidLoad() {
+        this.overrideStyles();
+    }
+    componentDidUpdate() {
+        this.overrideStyles();
+    }
+    disconnectedCallback() {
+        // Clean up timeout when component is destroyed
+        if (this.savedMessageTimeoutId) {
+            clearTimeout(this.savedMessageTimeoutId);
+        }
+    }
+    watchIsSaving(newValue, oldValue) {
+        console.log('isSaving watcher triggered:', { oldValue, newValue, saveError: this.saveError });
+        // When isSaving changes from true to false (save completed successfully)
+        if (oldValue === true && newValue === false && !this.saveError) {
+            console.log('Setting showSavedMessage to true');
+            this.showSavedMessage = true;
+            // Clear any existing timeout
+            if (this.savedMessageTimeoutId) {
+                clearTimeout(this.savedMessageTimeoutId);
+            }
+            // Hide the "Saved" message after 5 seconds
+            this.savedMessageTimeoutId = setTimeout(() => {
+                console.log('Hiding saved message after 5 seconds');
+                this.showSavedMessage = false;
+            }, 5000);
+        }
+    }
+    overrideStyles() {
+        var _a;
+        const shadowRoot = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelectorAll('unity-typography').forEach(element => {
+            var _a, _b, _c, _d;
+            const styleOverride = element.id === this.titleId ? (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.titleText : element.id === this.descriptionId ? (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.styleOverrides) === null || _d === void 0 ? void 0 : _d.paragraphText : {};
+            if ((styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.fontFamily) && fontOverrideMapping[styleOverride.fontFamily]) {
+                overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);
+            }
+            if (styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.variant) {
+                element.setAttribute('variant', styleOverride.variant);
+            }
+        });
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        if (!this.form) {
+            return h("div", null, "Loading...");
+        }
+        let questionNumber = 1;
+        const sectionSet = new Set();
+        this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));
+        // const orderedSectionNumbers = [...sectionSet].sort((a: number, b: number) => a - b);
+        const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];
+        const backgroundOverrides = {};
+        if ((_c = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c.backgroundImage) ;
+        else if ((_f = (_e = (_d = this.form) === null || _d === void 0 ? void 0 : _d.styleOverrides) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.backgroundColor) {
+            backgroundOverrides.backgroundColor = (_j = (_h = (_g = this.form) === null || _g === void 0 ? void 0 : _g.styleOverrides) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j.backgroundColor;
+        }
+        return (h("div", { class: 'background', style: backgroundOverrides }, h("udp-container", { maxWidth: "md" }, h("div", { class: "form-container" }, !this.submitSuccessful ? (h("stencil-form", { handleSubmit: this.handleSubmit, initialValues: this.initialValues, handleChange: this.handleChange, onDirtyChange: event => (this.isFormDirty = event.detail) }, h("div", null, h("div", { class: "form-section-block" }, h("div", { class: "form-renderer-header", style: Object.assign({}, (((_l = (_k = this.form) === null || _k === void 0 ? void 0 : _k.styleOverrides) === null || _l === void 0 ? void 0 : _l.headerBackgroundColor) && {
+                backgroundColor: this.form.styleOverrides.headerBackgroundColor,
+            })) }, h("unity-typography", { id: this.titleId, variant: 'h6', color: "inherit" }, this.form.name), this.showAutoSaveStatus && (h("div", { class: "auto-save-status" }, this.saveError && (h("unity-typography", { variant: "body", color: "secondary" }, this.saveError)))), h("udp-save-draft-button", { isVisible: this.isFormDirty && !this.isSubmitted && !!this.userId, isSaving: this.isSaving, saveError: this.saveError, showSavedMessage: this.showSavedMessage, handleSave: this.handleSave })), h("div", { class: "form-section-content" }, h("div", { class: "items" }, h("div", { class: "form-section-text" }, h("unity-typography", { id: this.descriptionId, variant: (_q = (_p = (_o = (_m = this.form) === null || _m === void 0 ? void 0 : _m.styleOverrides) === null || _o === void 0 ? void 0 : _o.paragraphText) === null || _p === void 0 ? void 0 : _p.variant) !== null && _q !== void 0 ? _q : 'body', color: "inherit" }, this.form.description))))), this.dynamicSections.map((section, sIndex) => {
+            return (h("div", { class: "form-section-block" }, h("div", { class: "form-section-header" }, h("div", { class: "form-section-header-title" }, h("unity-typography", { variant: "h6", color: "inherit" }, `${section.title}${section.sectionPositionSuffix > 1 ? ` (${section.sectionPositionSuffix})` : ''}`)), h("div", { class: "form-section-header-actions" }, section.sectionProperties.isRepeatable && section.isOriginalSection && !this.readonly && (h("stencil-icon-button", { icon: getIconFromName('add'), tooltip: "Repeat This Section", onClick: () => this.duplicateRepeatableSection(sIndex) })), !section.isOriginalSection && !this.readonly && (h("stencil-icon-button", { icon: getIconFromName('subtract'), tooltip: "Delete This Repeated Section", onClick: () => this.deleteRepeatableSection(sIndex) })))), h("div", { class: "form-section-content" }, h("div", { class: "items" }, h("div", { class: "form-section-text" }, h("unity-typography", { variant: "body", color: "inherit" }, section.sectionText)), h("div", null, section.formQuestions.map((question) => {
+                var _a, _b, _c;
+                const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);
+                const num = questionNumber;
+                // const processedSubmissionName = `${sectionProcessedName}-${question.name}`
+                if (!isHidden)
+                    questionNumber++;
+                return (h("div", { class: "item" }, h("udp-question", { styleOverrides: {
+                        helperText: (_a = this.form.styleOverrides) === null || _a === void 0 ? void 0 : _a.helperText,
+                        paragraphText: (_b = this.form.styleOverrides) === null || _b === void 0 ? void 0 : _b.paragraphText,
+                        questionText: (_c = this.form.styleOverrides) === null || _c === void 0 ? void 0 : _c.questionText,
+                    }, question: question, questionNumber: num, value: this.initialValues[question.processedSubmissionName], disabled: this.disabled, readonly: this.readonly, key: question.processedSubmissionName })));
+            }))))));
+        }), h("div", { class: "footer" }, h("input", { disabled: this.loading || this.disabled || this.readonly, type: "submit", value: "Submit", class: "submit", id: "udpRecord-udp-forms-renderer-Submit", onClick: () => {
+                console.log('Submit button clicked');
+                // Let the form handle the submit naturally
+            } }))))) : (
+        //if the form has been submit, display success message with a button to trigger the action associated to the form
+        h("div", { class: "center-div" }, h("udp-ambient-card", null, h("div", { class: "submit-card" }, h("unity-typography", null, "Thank you for your submission!"), h("div", { class: "finish-button" }, h("custom-button", { onClick: this.handleFinish }, "Finish"))))))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "isSaving": ["watchIsSaving"]
+    }; }
+    static get style() { return udpFormsUiCss; }
+}, [1, "udp-forms-ui", {
+        "form": [16],
+        "initialValues": [16, "initial-values"],
+        "submitSuccessful": [4, "submit-successful"],
+        "loading": [4],
+        "isSaving": [4, "is-saving"],
+        "saveError": [1, "save-error"],
+        "showAutoSaveStatus": [4, "show-auto-save-status"],
+        "disabled": [4],
+        "readonly": [4],
+        "handleSubmit": [16, "handle-submit"],
+        "handleChange": [16, "handle-change"],
+        "handleSave": [16, "handle-save"],
+        "handleAction": [16, "handle-action"],
+        "handleFinish": [16, "handle-finish"],
+        "currentFormData": [16, "current-form-data"],
+        "userId": [1, "user-id"],
+        "isSubmitted": [4, "is-submitted"],
+        "dynamicSections": [16, "dynamic-sections"],
+        "duplicateRepeatableSection": [8, "duplicate-repeatable-section"],
+        "deleteRepeatableSection": [8, "delete-repeatable-section"],
+        "isFormDirty": [32],
+        "showSavedMessage": [32]
+    }, undefined, {
+        "isSaving": ["watchIsSaving"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["udp-forms-ui", "custom-button", "file-upload", "numeric-field", "selectable-list", "signature-input", "stencil-field", "stencil-form", "stencil-icon-button", "tally-display", "text-area", "text-field", "udp-adornment", "udp-ambient-card", "udp-ambient-tool-tip", "udp-badge", "udp-container", "udp-date-selector", "udp-datetime-selector", "udp-icon-button", "udp-question", "udp-save-draft-button", "udp-selector", "udp-time-selector", "unity-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "udp-forms-ui":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, UdpFormsUi);
+            }
+            break;
+        case "custom-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "numeric-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "selectable-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "signature-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "stencil-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "stencil-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "stencil-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "tally-display":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "text-area":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "text-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "udp-adornment":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "udp-ambient-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "udp-ambient-tool-tip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "udp-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "udp-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "udp-date-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "udp-datetime-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "udp-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "udp-question":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "udp-save-draft-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "udp-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "udp-time-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "unity-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { UdpFormsUi as U, defineCustomElement as d };
+//# sourceMappingURL=p-BzH4NpB-.js.map
+
+//# sourceMappingURL=p-BzH4NpB-.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BzH4NpB-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.css?tag=udp-forms-ui&encapsulation=shadow","src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.tsx"],"sourcesContent":[".background {\n  background-color: var(--gray-01);\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n.item {\n  padding-bottom: var(--spacing-02);\n  /* margin-bottom: var(--spacing-05); */\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-05);\n  padding-top: var(--spacing-02);\n  padding-bottom: var(--spacing-02);\n}\n\n.footer {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.submit {\n  background-color: var(--primary-color);\n  box-sizing: border-box;\n  border: none;\n  color: white;\n  padding: 8px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  min-width: 48px;\n  min-height: 24px;\n  /* Default size */\n}\n\n.submit:disabled {\n  background-color: var(--gray-05);\n  cursor: default;\n}\n\n.submit-card {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n/* .form-section-content */\n.form-section-content {\n  margin-bottom: var(--spacing-05);\n  background-color: white;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-05);\n}\n\n.form-container {\n  padding-top: var(--spacing-05);\n  padding-bottom: var(--spacing-05);\n}\n\n.form-section-block {\n  margin-bottom: var(--spacing-05);\n}\n\n.form-section-header {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  background-color: var(--primary-color, #000);\n  color: var(--primary-contrast-text, #FFF);\n  padding: var(--spacing-04, 16px) var(--spacing-05, 24px);\n  align-items: center;\n  min-height: var(--spacing-10, 60px);\n}\n\n.form-section-text {\n  margin-bottom: var(--spacing-03);\n}\n\n.center-div {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.finish-button {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* .header */\n.form-renderer-header {\n  padding: var(--spacing-05) var(--spacing-05);\n  background-color: var(--primary-color-dark, #000);\n  color: var(--primary-contrast-text, #FFF);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.header-content {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--spacing-03);\n}\n\n.header-text {\n  flex: 1;\n  min-width: 0;\n  /* Allow text to shrink */\n}\n\n/* Save button visibility - JavaScript controlled */\n.header-save-button {\n  display: block;\n  /* Always available, component controls its own visibility */\n}\n\n.floating-save-button {\n  display: block;\n  /* Always available, component controls its own visibility */\n}\n\n/*\n * Save button visibility is now controlled by JavaScript-based overlap detection\n * in the udp-save-draft-button component. This provides real-time detection of\n * overlaps with form content, accounting for menu drawers and dynamic layouts.\n *\n * The component automatically switches between floating and inline modes based on\n * actual element positions and available space, not viewport breakpoints.\n */\n\n/* Mobile layout adjustments */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--spacing-02);\n  }\n\n  .header-text {\n    margin-bottom: var(--spacing-02);\n  }\n}\n\n/* Small height screens: Always use header button */\n@media (max-height: 600px) {\n  .header-save-button {\n    display: block;\n  }\n\n  .floating-save-button {\n    display: none;\n  }\n}\n\n.auto-save-status {\n  margin-top: var(--spacing-02);\n  padding: var(--spacing-01) 0;\n  font-size: 12px;\n  opacity: 0.8;\n}","import { Component, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { Guid, UdpForm, UdpFormQuestion } from '../types';\nimport { UdpFormsFieldTypeEnum } from '../enums';\nimport { fontOverrideMapping, overrideFont } from '../utils';\nimport { getIconFromName } from '../../../data-display/icons/iconUtils';\n\n@Component({\n  tag: 'udp-forms-ui',\n  styleUrl: 'udp-forms-ui.css',\n  shadow: true,\n})\nexport class UdpFormsUi {\n  @Prop() form: UdpForm;\n  @Prop() initialValues: { [name: string]: any } = {};\n  @Prop() submitSuccessful: boolean = false;\n  @Prop() loading: boolean = false;\n  @Prop() isSaving: boolean = false;\n  @Prop() saveError: string | null = null;\n  @Prop() showAutoSaveStatus: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() handleSubmit: (values: any) => Promise<void>;\n  @Prop() handleChange: (values: { [name: string]: any }) => void;\n  @Prop() handleSave: (values: { [name: string]: any }) => Promise<void>;\n  @Prop() handleAction: (actionId: Guid, params: Object) => void;\n  @Prop() handleFinish: () => void;\n  @Prop() currentFormData: { [name: string]: any } = {};\n  @Prop() userId: Guid | null = null;\n  @Prop() isSubmitted: boolean = false;\n  @Prop() dynamicSections: any[];\n  @Prop() duplicateRepeatableSection: any;\n  @Prop() deleteRepeatableSection: any;\n\n  @State() isFormDirty: boolean = false;\n  @State() showSavedMessage: boolean = false;\n\n  @Element() el: HTMLElement;\n\n  private savedMessageTimeoutId: any;\n\n  private titleId: string = 'udp-forms-title';\n  private descriptionId: string = 'udp-forms-description';\n\n  componentDidLoad() {\n    this.overrideStyles();\n  }\n\n  componentDidUpdate() {\n    this.overrideStyles();\n  }\n\n  disconnectedCallback() {\n    // Clean up timeout when component is destroyed\n    if (this.savedMessageTimeoutId) {\n      clearTimeout(this.savedMessageTimeoutId);\n    }\n  }\n\n  @Watch('isSaving')\n  watchIsSaving(newValue: boolean, oldValue: boolean) {\n    console.log('isSaving watcher triggered:', { oldValue, newValue, saveError: this.saveError });\n\n    // When isSaving changes from true to false (save completed successfully)\n    if (oldValue === true && newValue === false && !this.saveError) {\n      console.log('Setting showSavedMessage to true');\n      this.showSavedMessage = true;\n\n      // Clear any existing timeout\n      if (this.savedMessageTimeoutId) {\n        clearTimeout(this.savedMessageTimeoutId);\n      }\n\n      // Hide the \"Saved\" message after 5 seconds\n      this.savedMessageTimeoutId = setTimeout(() => {\n        console.log('Hiding saved message after 5 seconds');\n        this.showSavedMessage = false;\n      }, 5000);\n    }\n  }\n\n  overrideStyles() {\n    const shadowRoot = (this as any).el?.shadowRoot;\n    shadowRoot?.querySelectorAll('unity-typography').forEach(element => {\n      const styleOverride =\n        element.id === this.titleId ? this.form?.styleOverrides?.titleText : element.id === this.descriptionId ? this.form?.styleOverrides?.paragraphText : ({} as any);\n\n      if (styleOverride?.fontFamily && fontOverrideMapping[styleOverride.fontFamily]) {\n        overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);\n      }\n      if (styleOverride?.variant) {\n        element.setAttribute('variant', styleOverride.variant);\n      }\n    });\n  }\n\n  render() {\n    if (!this.form) {\n      return <div>Loading...</div>;\n    }\n\n    let questionNumber = 1;\n\n    const sectionSet = new Set();\n    this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));\n    // const orderedSectionNumbers = [...sectionSet].sort((a: number, b: number) => a - b);\n\n    const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];\n\n    const backgroundOverrides: { backgroundImage?: string | null; backgroundColor?: string | null } = {};\n    if (this.form?.styleOverrides?.background?.backgroundImage) {\n      // uncomment when we want to allow background images\n      //backgroundOverrides.backgroundImage = `url(${this.form?.styleOverrides?.background?.backgroundImage})`;\n    } else if (this.form?.styleOverrides?.background?.backgroundColor) {\n      backgroundOverrides.backgroundColor = this.form?.styleOverrides?.background?.backgroundColor;\n    }\n    return (\n      <div class={'background'} style={backgroundOverrides}>\n        <udp-container maxWidth=\"md\">\n          <div class=\"form-container\">\n            {!this.submitSuccessful ? (\n              <stencil-form\n                handleSubmit={this.handleSubmit}\n                initialValues={this.initialValues}\n                handleChange={this.handleChange}\n                onDirtyChange={event => (this.isFormDirty = event.detail)}\n              >\n                {/********** QUESTIONS *********/}\n                <div>\n                  {/* <div class=\"header\" style={this.form?.styleOverrides?.headerBackgroundColor ? { backgroundColor: this.form?.styleOverrides?.headerBackgroundColor } : ''}> */}\n                  <div class=\"form-section-block\">\n                    <div\n                      class=\"form-renderer-header\"\n                      style={{\n                        ...(this.form?.styleOverrides?.headerBackgroundColor && {\n                          backgroundColor: this.form.styleOverrides.headerBackgroundColor,\n                        }),\n                      }}\n                    >\n                      <unity-typography id={this.titleId} variant={'h6'} color=\"inherit\">\n                        {this.form.name}\n                      </unity-typography>\n\n                      {/* Auto-save status indicator for authenticated users */}\n                      {this.showAutoSaveStatus && (\n                        <div class=\"auto-save-status\">\n                          {/* {this.isSaving && (\n                              <unity-typography variant=\"body\" color=\"primary\">\n                                Saving...\n                              </unity-typography>\n                            )} */}\n                          {this.saveError && (\n                            <unity-typography variant=\"body\" color=\"secondary\">\n                              {this.saveError}\n                            </unity-typography>\n                          )}\n                        </div>\n                      )}\n                      <udp-save-draft-button\n                        isVisible={this.isFormDirty && !this.isSubmitted && !!this.userId}\n                        isSaving={this.isSaving}\n                        saveError={this.saveError}\n                        showSavedMessage={this.showSavedMessage}\n                        handleSave={this.handleSave}\n                      />\n                    </div>\n\n                    <div class=\"form-section-content\">\n                      <div class=\"items\">\n                        <div class=\"form-section-text\">\n                          <unity-typography id={this.descriptionId} variant={this.form?.styleOverrides?.paragraphText?.variant ?? 'body'} color=\"inherit\">\n                            {this.form.description}\n                          </unity-typography>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  {/* Save Button - moves between header and floating based on space */}\n                  {this.dynamicSections.map((section, sIndex) => {\n                    return (\n                      <div class=\"form-section-block\">\n                        <div class=\"form-section-header\">\n                          <div class=\"form-section-header-title\">\n                            <unity-typography variant=\"h6\" color=\"inherit\">\n                              {`${section.title}${section.sectionPositionSuffix > 1 ? ` (${section.sectionPositionSuffix})` : ''}`}\n                            </unity-typography>\n                          </div>\n                          <div class=\"form-section-header-actions\">\n                            {section.sectionProperties.isRepeatable && section.isOriginalSection && !this.readonly && (\n                              <stencil-icon-button icon={getIconFromName('add')} tooltip=\"Repeat This Section\" onClick={() => this.duplicateRepeatableSection(sIndex)} />\n                            )}\n                            {!section.isOriginalSection && !this.readonly && (\n                              <stencil-icon-button icon={getIconFromName('subtract')} tooltip=\"Delete This Repeated Section\" onClick={() => this.deleteRepeatableSection(sIndex)} />\n                            )}\n                          </div>\n                        </div>\n\n                        <div class=\"form-section-content\">\n                          <div class=\"items\">\n                            <div class=\"form-section-text\">\n                              <unity-typography variant=\"body\" color=\"inherit\">\n                                {section.sectionText}\n                              </unity-typography>\n                            </div>\n\n                            <div>\n                              {section.formQuestions.map((question: UdpFormQuestion) => {\n                                const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);\n                                const num: number = questionNumber;\n                                // const processedSubmissionName = `${sectionProcessedName}-${question.name}`\n                                if (!isHidden) questionNumber++;\n                                return (\n                                  <div class=\"item\">\n                                    <udp-question\n                                      styleOverrides={{\n                                        helperText: this.form.styleOverrides?.helperText,\n                                        paragraphText: this.form.styleOverrides?.paragraphText,\n                                        questionText: this.form.styleOverrides?.questionText,\n                                      }}\n                                      question={question}\n                                      questionNumber={num}\n                                      value={this.initialValues[question.processedSubmissionName]}\n                                      disabled={this.disabled}\n                                      readonly={this.readonly}\n                                      key={question.processedSubmissionName}\n                                    />\n                                  </div>\n                                );\n                              })}\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    );\n                  })}\n                  <div class=\"footer\">\n                    <input\n                      disabled={this.loading || this.disabled || this.readonly}\n                      type=\"submit\"\n                      value=\"Submit\"\n                      class=\"submit\"\n                      id=\"udpRecord-udp-forms-renderer-Submit\"\n                      onClick={() => {\n                        console.log('Submit button clicked');\n                        // Let the form handle the submit naturally\n                      }}\n                    />\n                  </div>\n                </div>\n              </stencil-form>\n            ) : (\n              //if the form has been submit, display success message with a button to trigger the action associated to the form\n              <div class=\"center-div\">\n                <udp-ambient-card>\n                  <div class=\"submit-card\">\n                    <unity-typography>Thank you for your submission!</unity-typography>\n                    <div class=\"finish-button\">\n                      <custom-button onClick={this.handleFinish}>Finish</custom-button>\n                    </div>\n                  </div>\n                </udp-ambient-card>\n              </div>\n            )}\n          </div>\n        </udp-container>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-CSunqYw8.js → p-C-E6e6mL.js}

@@ -2,20 +2,20 @@ import { p as proxyCustomElement, H, h } from './p-DPon6DDX.js';
 import { Close16, Checkmark16, Filter16, Layers16, Select_0116, Scalpel16, Renew16, OverflowMenuHorizontal16 } from '@carbon/icons/es';
 import { f as searchForLayerOptions } from './p-_3wImzvq.js';
 import { S as SelectFeatureInteractionId } from './p-CwN0FuAf.js';
-import { d as defineCustomElement$f } from './p-y6ddPVSK.js';
-import { d as defineCustomElement$e } from './p-BU706xtx.js';
+import { d as defineCustomElement$f } from './p-BO3Kzy6x.js';
+import { d as defineCustomElement$e } from './p-hWgAmNsF.js';
 import { d as defineCustomElement$d } from './p-DpLtIIwx.js';
-import { d as defineCustomElement$c } from './p-BUw3R0Ql.js';
-import { d as defineCustomElement$b } from './p-syf9yo9-.js';
-import { d as defineCustomElement$a } from './p-hRee3qYx.js';
+import { d as defineCustomElement$c } from './p-D9A5l8BE.js';
+import { d as defineCustomElement$b } from './p-8avkq8Fj.js';
+import { d as defineCustomElement$a } from './p-D6Wo7quX.js';
 import { d as defineCustomElement$9 } from './p-B0Z1nz8S.js';
-import { d as defineCustomElement$8 } from './p-BYsLvu6g.js';
+import { d as defineCustomElement$8 } from './p-CpMdhv3j.js';
 import { d as defineCustomElement$7 } from './p-ZeWoGdjP.js';
 import { d as defineCustomElement$6 } from './p-C-wDzVCk.js';
-import { d as defineCustomElement$5 } from './p-IlXn87Ki.js';
-import { d as defineCustomElement$4 } from './p-DWJbhjYR.js';
+import { d as defineCustomElement$5 } from './p-1Cv4cku0.js';
+import { d as defineCustomElement$4 } from './p-C1K2NBql.js';
 import { d as defineCustomElement$3 } from './p-CpGuVcRn.js';
-import { d as defineCustomElement$2 } from './p-BTIWOttf.js';
+import { d as defineCustomElement$2 } from './p-W_kxEzVl.js';
 import { d as defineCustomElement$1 } from './p-DkppmXNM.js';
 
 const mapToolbarCss = ".toolbarContainer{display:flex;justify-content:space-between;align-items:center;background:var(--accent-color);padding-left:var(--spacing-05)}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.secondaryButtons{display:flex;justify-content:flex-end;column-gap:var(--spacing-04);margin-top:var(--spacing-04);margin-bottom:var(--spacing-04)}.selectedFeaturesButtons{display:flex;column-gap:var(--spacing-04)}#addOption{margin-left:var(--spacing-04)}.title{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.labelButtons{white-space:nowrap}@media (min-width: 300px){.labelButtons{white-space:nowrap}}.buttons{display:flex;flex-direction:column}.popOversListContainer{display:flex;justify-content:space-evenly;padding:0}#addOptionButton{width:fit-content}";
@@ -184,22 +184,22 @@ const MapToolbar = /*@__PURE__*/ proxyCustomElement(class MapToolbar extends H {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'cb3661c34c4093779f7d006cbeaf018062a54994', class: "toolbarContainer" }, h("div", { key: 'fab01f7d699a215c479ebb5b74dc717ec08b3018', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && h("unity-typography", { key: 'd6bf4bc26a52e6f59ae7e8b03c368d986da94aad', variant: "h4" }, this.mapTitle)), h("div", { key: '92287f354c4c0d882915e6f2ff13cbe065d34f3c', class: "buttons" }, h("div", { key: '2c62c1e72cd38171eccf33d78c8facc9469ad3c0', class: "buttonContainer" }, h("div", { key: '47657600cb83585b41a9e37e1bafc406887e71b0', class: "secondaryButtons" }, this.filterPanel && (h("div", { key: 'c9b333edf9cc1ac1f0c2d76b1218061bbd91347c', id: "filterOption" }, h("div", { key: '991d24d97b03008f177a1b3c1f91de2dd19fda1d', id: "filterOptionButton" }, h("stencil-icon-button", { key: 'c4d9078b3c50f93f9dc66732d0e3e99604d1c6f3', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (h("div", { key: '4fd493891a6c8fef2a7c892cc155ad0ccb975c8b', id: "filterOptionDiv" }, h("udp-pop-over", { key: 'f15b35d592a94fe7ee0c14ab7ea3b3bd581329c7', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '94339d0d672e37ddccb24d074bc87910940177f9', innerHTML: this.filterPanel })))))), this.layerOptions && (h("div", { key: '6be1b312bcf144fe1e1a5e96985a783387719a86', id: "layerOption" }, h("div", { key: '9a6c86828ffe3e32c5fe22259749aee8f255d27a', id: "layerOptionButton" }, h("stencil-icon-button", { key: 'a8c4668a1be9c429085d09e9c126e5b75fd87d63', iconName: 'layersButton', iconClassName: 'iconButtonWrapper', tooltip: 'Layers', icon: Layers16, buttonId: 'layersButton', onClick: () => this.handleLayerOnclick(), count: (_a = this.visibleLayers) === null || _a === void 0 ? void 0 : _a.length })), h("div", { key: '0d44c00de66dcb120f170fab4544c61afcd4f959', id: "layerOptionDiv" }, this.layerAnchor && (h("udp-pop-over", { key: '6a232aefb8edd7a0856e086b2bb59d724f80c133', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, h("select-layer-popup", { key: '552b4bf53412003dcd4714b7fa75abbd5b42dd4d', enableTileSelection: this.enableTileSelection, tileOptions: this.tileOptions, handleMapTypeInputChange: this.handleMapTypeInputChange, handleSearchLayers: this.handleSearchLayers, filteredOptions: this.filteredOptions, visibleLayers: this.visibleLayers, updateSelectedLayers: this.updateSelectedLayers, selectedTile: this.selectedTile })))))), !this.readOnlyMap && this.selectedFeaturesActionPanel && (h("div", { key: 'cde340d42d79df5398687a3f5685ab5edac88a72', id: "bulkSelectOption" }, h("div", { key: 'dcded45a9dbe71c53b629998da835914331b25ea', id: "bulkSelectOptionButton" }, h("stencil-icon-button", { key: '03f64862f9b8466066a516406974e647c11cdd6c', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), h("div", { key: '362574ee975526b17d01a1b66987e9fd25cd1f64', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (h("udp-pop-over", { key: 'f921f211cec7f6ca3120f68ae7d6f91d6c06457b', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start' }, h("udp-menu-item", { key: '6c6d563c9286c758030df30a817cef0a85b4947f', label: 'Box', handleOnClick: () => {
+        return (h("div", { key: '63e5d1cb7f18737a5b47aaa69fa790a82ec252bd', class: "toolbarContainer" }, h("div", { key: 'a8a41fc82fa879f4bb2fd0d3f8946821c3877233', class: "title" }, this.mapTitle && this.mapTitle.length > 0 && h("unity-typography", { key: '611511d191f7925d689dbaa35f15755445e4c481', variant: "h4" }, this.mapTitle)), h("div", { key: 'cd480ea48aaf938152aacc9b93ecb724a2c69c70', class: "buttons" }, h("div", { key: 'a70762390bb1651a70c450d2177b8856ec304eab', class: "buttonContainer" }, h("div", { key: '288d03c64d94edfc6344f9e0121003282d402f39', class: "secondaryButtons" }, this.filterPanel && (h("div", { key: 'baab19506fb5eb82418710ced23dd4fa4a71a5e7', id: "filterOption" }, h("div", { key: 'b01155330204b492ec96cce4dd36b0e2bf6e9fa7', id: "filterOptionButton" }, h("stencil-icon-button", { key: '512087d384860edde5fc01dc367c312ce8577929', iconName: 'filterButton', iconClassName: 'iconButtonWrapper', tooltip: 'Filter', icon: Filter16, buttonId: 'filterButton', onClick: () => this.handleFilterOnclick() })), this.filterAnchor && (h("div", { key: 'dc75dd9d4553280a89340ea09a92d6b13ce9c7b0', id: "filterOptionDiv" }, h("udp-pop-over", { key: 'd9dd6bb0da4ca0327e217c5c822b33a1d3c51391', isOpen: this.filterAnchor ? true : false, anchorElement: this.filterAnchor, handleOnClose: () => this.handleCloseFilterPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: 'f1ca5a008e5bd96d875e36558075df6683af6b8c', innerHTML: this.filterPanel })))))), this.layerOptions && (h("div", { key: '24bcf338172287d1355b0c6677309227a8ab518f', id: "layerOption" }, h("div", { key: 'fa54c07b301197fdf53e4a6c6bd6ace8ad5ed2c8', id: "layerOptionButton" }, h("stencil-icon-button", { key: 'baa3d5a2303818f31dbbc26e3f0c5c5c7baeec58', iconName: 'layersButton', iconClassName: 'iconButtonWrapper', tooltip: 'Layers', icon: Layers16, buttonId: 'layersButton', onClick: () => this.handleLayerOnclick(), count: (_a = this.visibleLayers) === null || _a === void 0 ? void 0 : _a.length })), h("div", { key: '7893d2e0550f2976ff5d4f93577718a0eccae566', id: "layerOptionDiv" }, this.layerAnchor && (h("udp-pop-over", { key: '711aa8fa7437eb01256a85967ab43093dc99fe35', isOpen: this.layerAnchor ? true : false, anchorElement: this.layerAnchor, handleOnClose: () => this.handleCloseLayerPopover(), popoverPlacement: 'bottom-start', popoverMaxHeight: '500px' }, h("select-layer-popup", { key: '8fe4713951aed48303e7c85467043aaacd85dda2', enableTileSelection: this.enableTileSelection, tileOptions: this.tileOptions, handleMapTypeInputChange: this.handleMapTypeInputChange, handleSearchLayers: this.handleSearchLayers, filteredOptions: this.filteredOptions, visibleLayers: this.visibleLayers, updateSelectedLayers: this.updateSelectedLayers, selectedTile: this.selectedTile })))))), !this.readOnlyMap && this.selectedFeaturesActionPanel && (h("div", { key: '9610ea8f6d493509fd73a9b417d42072ef01ae3b', id: "bulkSelectOption" }, h("div", { key: '1c4b709732dbbc153c1b49557e14a522ac145c80', id: "bulkSelectOptionButton" }, h("stencil-icon-button", { key: 'f7ae982998e872d6ee62e0c85e40c679c7c0f7ed', iconName: 'selectButton', iconClassName: 'iconButtonWrapper', tooltip: 'Select', icon: Select_0116, buttonId: 'selectButton', onClick: () => this.handleSelectionBtnOnclick() })), h("div", { key: '78f12fa656f968d5b11440756f2dddc3fcb58c9f', id: "bulkSelectOptionDiv" }, this.bulkSelectionTypeAnchor && (h("udp-pop-over", { key: 'd186d719cda6987588ffaf6a8f37b53d93fc0978', isOpen: this.bulkSelectionTypeAnchor ? true : false, anchorElement: this.bulkSelectionTypeAnchor, handleOnClose: () => this.handleCloseBulkSelectionTypePopover(), popoverPlacement: 'bottom-start' }, h("udp-menu-item", { key: 'a4a5034892f0f314fb63012f54ba7f19867942bc', label: 'Box', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('box');
-            } }), h("udp-menu-item", { key: 'e91656c278be77923c1e0e597c77d140112ed601', label: 'Circle', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: 'cc338aaeb64cdd92b2af2b83bf5cc02f7e07977b', label: 'Circle', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('circle');
-            } }), h("udp-menu-item", { key: '7f7c8963113199e4654d6a905ff98deae79ec28b', label: 'Polygon', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: '415dad2a699ecad5bc15d47c65c1188f0c144a00', label: 'Polygon', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('polygon');
-            } }), h("udp-menu-item", { key: 'ac185e7185bb8bdea6571f82e0d46aafcd083d8d', label: 'Lasso', handleOnClick: () => {
+            } }), h("udp-menu-item", { key: 'b0f78211b6660188a6eda3a277500556b144408f', label: 'Lasso', handleOnClick: () => {
                 this.handleBulkSelectionTypeOnclick('lasso');
-            } })))))), !this.readOnlyMap && this.enableSplit && (h("div", { key: 'e88658354379a42d43d4637fbe519fcd56a33414', id: "splitOption" }, h("div", { key: '9431327ef5309cdab8850af74e01f2298e708bdd', id: "splitOptionButton" }, h("stencil-icon-button", { key: '112d434686b2b2883893fd6d602fe63b22f2bc51', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), h("div", { key: 'e4f9ca664278d951690f47501dfe74bca3394e0d', id: "splitOptionDiv" }, this.splitAnchor && (h("udp-pop-over", { key: '3e8db8b7ca9dca2e38d1e16b0a208ba2f948cfc3', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("split-line-popup", { key: '76a2f7875c4c1b71c79835f16f90fcb14acb05ee', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (h("stencil-icon-button", { key: '8c7da78de98bf11c902ad1a6f1c4a60ad50d61ae', iconName: 'refreshButton', iconClassName: 'iconButtonWrapper', tooltip: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh', icon: Renew16, buttonId: 'refreshButton', onClick: () => this.refreshEvent() })), !this.readOnlyMap && (this.enableDragBox || (this.addMultipleFeatures && this.enableAddNewFeature)) && (h("div", { key: 'c7b44fc819f2b22fa34bebdfd69f961c1b97f8dd', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'b0a3b11645aded91a81635a80cf3dfaffd7c8854', showLabel: true, icon: this.getButtonIcon(), onClick: () => {
+            } })))))), !this.readOnlyMap && this.enableSplit && (h("div", { key: '1fa922732a30bcc6a6a6619f3d269cac5014d25a', id: "splitOption" }, h("div", { key: 'abafc16be4b95112f3e49c2f4b3271fbe879a00c', id: "splitOptionButton" }, h("stencil-icon-button", { key: '206a3fe6944998884e2454e55ee93776c1c086ac', iconName: 'splitButton', iconClassName: 'splitButtonWrapper', tooltip: 'Split Linear Feature', icon: Scalpel16, buttonId: 'splitButton', onClick: () => this.handleSplitBtnOnclick() })), h("div", { key: '11b6b95d1d986ea403e649d1894b6dfaf88adda7', id: "splitOptionDiv" }, this.splitAnchor && (h("udp-pop-over", { key: '82afddb19c39dc93c2e17b6b1541b977d671cd35', isOpen: this.splitAnchor ? true : false, anchorElement: this.splitAnchor, handleOnClose: () => this.handleCloseSplitPopover(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("split-line-popup", { key: '0fecbd18cb81e44036b67f24986a4932c0e5adc3', vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, handleStartSplitting: this.handleStartSplitting })))))), this.refreshEvent && (h("stencil-icon-button", { key: '471393a16b8da86e548acc94213c72c317c59988', iconName: 'refreshButton', iconClassName: 'iconButtonWrapper', tooltip: (_b = this.refreshButtonTooltip) !== null && _b !== void 0 ? _b : 'Refresh', icon: Renew16, buttonId: 'refreshButton', onClick: () => this.refreshEvent() })), !this.readOnlyMap && (this.enableDragBox || (this.addMultipleFeatures && this.enableAddNewFeature)) && (h("div", { key: '1d7fda0edc28f80ce91e91f83345d44c084ebeae', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '999834f4bfd813d3ceb929c35b922a69f8f9fbf3', showLabel: true, icon: this.getButtonIcon(), onClick: () => {
                 if (this.enableDragBox) {
                     this.handleCancelBoxSelection();
                 }
                 if (this.enableAddNewFeature) {
                     this.handleAddNewFeature();
                 }
-            }, tooltip: this.getButtonText(), iconClassName: 'save-icon-class' }, h("unity-typography", { key: '495319ff1fcb280b9e999038807d156a50933be5', variant: "button" }, this.getButtonText())))), this.showSplitButton && (h("div", { key: 'bd028ded9900d3e34e2a6c3c3304738a0164f1b5', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: 'eefa8dffb5adab4acc72dbc08e77f040b2b8ca12', showLabel: true, icon: Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '7f7b49336b19ed7cb9688befd7acc402e58dee6a', variant: "button" }, 'Save Split')))), this.showSplitButton && (h("div", { key: '54a555464fc6c2e02053265a0f572517673293a5', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '65f8ebdfd71c6ee308a85515087d67ef74010f1e', showLabel: true, icon: Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '49cd8756f1a82e780e4b2d8365b5c28904f28bab', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (h("div", { key: '598b90fe3980b39ec59d4f4ae2682c69aa8de5f4', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '378b1e6aa3b90c868f57a594307e3f7cc39af4d2', showLabel: true, icon: Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '1ebd3e8b7b6b04153c3121e46f754140b876adb4', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (h("div", { key: '578d36fd52e2eea57b9b40e59d430a7b0eb2576f', class: "selectedFeaturesButtons labelButtons" }, h("div", { key: '8f89151b1134f52ae6cafde5df21e2f9edb53afc', id: "withSelectedOption" }, h("div", { key: 'fa3044d790982dda882bb13c56ed0e73f18c94a8', id: "withSelectedOptionButton" }, h("stencil-icon-button-grid-action-header", { key: '23784f3c2ef39e70322f2531923a90daa6602488', showLabel: true, icon: OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, h("unity-typography", { key: '71f7a1689f12f64081cbcbc992106dcd1f156c38', variant: "button" }, 'With Selected'))), h("div", { key: 'b12201cd228daf3be94c8d8331c53f7b2bf55491', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (h("udp-pop-over", { key: '86597960d2f1e0e319f54d3dd77d8a554e5ad0e9', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '3d81922352aa12a31d8d9745b7fa6e701b9966ca', innerHTML: this.selectedFeaturesActionPanel }))))), h("stencil-icon-button-grid-action-header", { key: '1ac985bec8d9f578eb4d32ee0e72fbeb153604e0', showLabel: true, icon: Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '84936479305026c5d531595c33d2fbe12759d75b', variant: "button" }, 'Cancel Selection'))))), h("div", { key: 'b6fbe722db0414b4a47312e7d17c79be3cda4050', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (h("div", { key: '928d8e3f5e8797024a7b076fa5c644f854e57cdd', id: "addOptionButton" }, h("custom-button", { key: '2d9637dabc12d0dfe889619fe7d83e19364c2eed', secondary: true, label: h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, h("udp-icon", { key: 'e8ae84b46c63e772797420adfd5752e94d1567cc', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (h("udp-pop-over", { key: 'b2e67de5518908e087bb5ec915ea724631d0a529', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("add-map-feature-popup", { key: 'e3e143076342e106afcd29a0508a3c9caaa599be', handleStartDrawingMapFeature: this.handleStartDrawingMapFeature, vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, selectedType: this.selectedTypeToAddFeature, panelConfig: this.addFeaturePanelConfig }))))))));
+            }, tooltip: this.getButtonText(), iconClassName: 'save-icon-class' }, h("unity-typography", { key: '0e41d8c14c9d4eece4b1fbcc407b8c0bd72e556b', variant: "button" }, this.getButtonText())))), this.showSplitButton && (h("div", { key: '1b1b7d98edab068c0215c0ebd549057688707b22', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '57f3fa7b17dd6ec52b32d1fb3295cbaa0cc6b4bb', showLabel: true, icon: Checkmark16, onClick: () => this.handleSaveSplit(), tooltip: 'Save Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '9b71c8dfb01f443f9ab9182b1d1720f3c1995a59', variant: "button" }, 'Save Split')))), this.showSplitButton && (h("div", { key: '43d8df6ab062b20746e93be9a1610cb3f28b0706', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '609fc625e58ddaf44dc8b928f379c9bf6daae23d', showLabel: true, icon: Close16, onClick: () => this.handleCancelSplit(), tooltip: 'Cancel Split', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '032929fea4ea88aa7f762dd5fe18a70359eec863', variant: "button" }, 'Cancel Split')))), !this.readOnlyMap && this.enableAddNewFeature && (h("div", { key: '87c0f6bc13fee9473dac179cd7c644bbaf014638', class: "labelButtons" }, h("stencil-icon-button-grid-action-header", { key: '48f85630b74d41d884d3e5b30acc26445f705aca', showLabel: true, icon: Close16, onClick: () => this.handleCancelAddNewFeature(), tooltip: 'Cancel Drawing', iconClassName: 'save-icon-class' }, h("unity-typography", { key: 'cb5952934a327268b2aa8de4416ba3543b178adb', variant: "button" }, 'Cancel Drawing')))), !this.readOnlyMap && this.withSelected && (h("div", { key: 'cd7e248942c6e8d1780ed9f3a271f2be1b9e7210', class: "selectedFeaturesButtons labelButtons" }, h("div", { key: 'b67ac423d87d55b3dab25b12d403e2e510f04af8', id: "withSelectedOption" }, h("div", { key: '00c1c477eedc5aaea81eed7d500500454c5f23ef', id: "withSelectedOptionButton" }, h("stencil-icon-button-grid-action-header", { key: '5820a749fb6e543c7910e0cd3656fed0678a9bc1', showLabel: true, icon: OverflowMenuHorizontal16, onClick: () => this.handleSelectionActionOnclick(), tooltip: 'With Selected', iconClassName: 'save-icon-class', count: this.selectedFeatureByBoxSelection.length }, h("unity-typography", { key: 'f327e07bfb489f48f143dbfae0ffebb5f9576e40', variant: "button" }, 'With Selected'))), h("div", { key: '36a130bcca1caee7c485127b9f74355146a825c1', id: "withSelectedOptionDiv" }, this.selectedFeaturesActionPanel && this.selectionActionAnchor && (h("udp-pop-over", { key: '28d20134ff2a727f9752034560850140688ee9a1', isOpen: this.selectionActionAnchor ? true : false, anchorElement: this.selectionActionAnchor, handleOnClose: () => this.handleCloseSelectionActionPopover(), popoverPlacement: 'bottom-start' }, h("div", { key: '19d6849f8ab4460b5345ae65b469aca1db069189', innerHTML: this.selectedFeaturesActionPanel }))))), h("stencil-icon-button-grid-action-header", { key: 'af786f6b09dc773997f4b6a09939f1cef1504d2e', showLabel: true, icon: Close16, onClick: () => this.unselectFeatures(), tooltip: 'Cancel selection', iconClassName: 'save-icon-class' }, h("unity-typography", { key: '629be3619fcb395a839770e37532d38d2412e381', variant: "button" }, 'Cancel Selection'))))), h("div", { key: 'b25d503b96afe55c1aa84d0cc4e389cd10db71fb', id: "addOption" }, this.enableAdd && !this.readOnlyMap && (h("div", { key: '335db1c9464c6c22d9454551ead0f9783525c3db', id: "addOptionButton" }, h("custom-button", { key: '4b27cb8c1bdd4e62f340de48dece96648f176319', secondary: true, label: h("unity-typography", { variant: "button" }, 'Add'), onClick: () => this.handleAddOnclick(), size: "tall" }, h("udp-icon", { key: '130c534ff13a81d3e4994718ff8e18eb19d59713', iconName: 'add32', darkIcon: false })))), this.addFeatureAnchor && (h("udp-pop-over", { key: 'c5d0d63c8a8d5e14683864d5851ca21b8a71fff3', isOpen: this.addFeatureAnchor ? true : false, anchorElement: this.addFeatureAnchor, handleOnClose: () => this.handleCloseAddMapFeature(), popoverPlacement: 'bottom-start', overflow: 'visible' }, h("add-map-feature-popup", { key: '168d45721040af9ec759aeda30839bd50bd76247', handleStartDrawingMapFeature: this.handleStartDrawingMapFeature, vectorLayerOptions: this.layerOptionsForPopup, selectedLayer: this.selectedLayerToAddFeature, selectedType: this.selectedTypeToAddFeature, panelConfig: this.addFeaturePanelConfig }))))))));
     }
     get mapToolbarElement() { return this; }
     static get watchers() { return {
@@ -352,6 +352,6 @@ function defineCustomElement() {
 }
 
 export { MapToolbar as M, defineCustomElement as d };
-//# sourceMappingURL=p-CSunqYw8.js.map
+//# sourceMappingURL=p-C-E6e6mL.js.map
 
-//# sourceMappingURL=p-CSunqYw8.js.map
+//# sourceMappingURL=p-C-E6e6mL.js.map