@nys-cui/cui-formpill 0.2.9 → 0.2.20

package/src/cui-formpill.js

@@ -11,15 +11,18 @@ class CUI_FORMPILL_PILL extends HTMLElement {
         this._state = {};
 
         this.oPropsToStateNames = {
-            "text": "sText",
-            "value1": "sValue1",
-            "value2": "sValue2",
-            "value3": "sValue3",
-            "values": "asValues"
+            "label": "sLabel",
+            "value": "sValue",
+            "fields": "aoFieldValues",
+            "valueLabel": "sValueLabel",
+            "charLimit": 'iCharLimit'
         }
 
+        this._state.iCharLimit = 30;
         this._state.sPosition = 'bottom-center'
 
+        this.cValidator = new VALIDATOR();
+
     }
 
     get state() {
@@ -29,21 +32,13 @@ class CUI_FORMPILL_PILL extends HTMLElement {
 
 
     get contents() {
-        if (this._state.sValue3) {
-            return {
-                'fieldName': this._state.sValue1,
-                'operator': this._state.sValue2,
-                'value': this._state.sValue3
-            }
-        } else if (this._state.asValues) {
-            return {
-                'fieldName': this._state.sValue1,
-                'value': this._state.asValues.split(',')
-            }
-        } else {
+
+        if (this._state.aoFieldValues && this._state.sValue) {
             return {
-                'fieldName': this._state.sValue1,
-                'value': this._state.sValue2
+                'value': this._state.sValue,
+                'fields': this._state.aoFieldValues,
+                'label': this._state.sLabel,
+                'valueLabel': this._state.sValueLabel
             }
         }
     }
@@ -83,12 +78,8 @@ class CUI_FORMPILL_PILL extends HTMLElement {
         return sTemplate;
 
     }
+
     connectedCallback() {
-        this._state.sText = (this.getAttribute('text')) ? this.getAttribute('text') : "";
-        this._state.sValue1 = (this.getAttribute('value1')) ? this.getAttribute('value1') : null;
-        this._state.sValue2 = (this.getAttribute('value2')) ? this.getAttribute('value2') : null;
-        this._state.sValue3 = (this.getAttribute('value3')) ? this.getAttribute('value3') : null;
-        this._state.asValues = (this.getAttribute('values')) ? this.getAttribute('values') : null;
 
         this._connected = true;
         this.render();
@@ -127,7 +118,10 @@ class CUI_FORMPILL_PILL extends HTMLElement {
 
         const title = document.createElement('div');
         title.classList.add('pill-title');
-        title.innerText = this._state.sText;
+
+        let label = this._state.sLabel + ": " + this._state.sValueLabel;
+        label = label.slice(0, this._state.iCharLimit) + (label.length > this._state.iCharLimit ? "..." : "");
+        title.innerText = label;
 
         formPill.appendChild(title);
 
@@ -155,34 +149,29 @@ class CUI_FORMPILL_PILL extends HTMLElement {
             }
         }
     }
-
-
 }
 
 customElements.define('cui-formpill-pill', CUI_FORMPILL_PILL);
 
 class CUI_FORMPILL extends HTMLElement {
+
     constructor() {
         super();
         this._connected = false;
         this.attachShadow({ mode: 'open' });
 
         this._state = {};
-        this._initialState = null;
+        this._initialState = {};
 
         this._state.bMenuDisplayed = false;
 
-        this._state.aMenuContents = [];
-
         this._state.sHtmlContent = null;
 
         this.dLabelContents;
 
-        this._state.configData = null;
-
-        this._state.adPills = [];
+        this._state.aoConfig = null;
 
-        this._state.criteriaList = null;
+        this._state.sCriteriaList = new Set();
 
         this.oPropsToStateNames = {
             "text": "sTextContent",
@@ -193,17 +182,40 @@ class CUI_FORMPILL extends HTMLElement {
             "iconbase": "sIconBasePath",
             "accessibleHideLabel": "bAccessibleHideLabel",
             "html": "sHtmlContent",
-            "config": "configData",
+            "config": "aoConfig",
             "addTitle": "sAddTitle",
             "updateTitle": "sUpdateTitle",
-            "value": "aoValue"
+            "pills": "aoPills"
 
         }
 
         this.cValidator = new VALIDATOR();
+
     }
 
-    get sFieldLayout() {
+    get footer() {
+        return `<div class="grid button-row">
+        <div class="row">
+            <div class="col-full align-end">
+                <cui-button class="addBtn" text="Add" primary="true"></cui-button>
+                <cui-button class="resetBtn" text="Clear"></cui-button>
+            </div>
+        </div>
+    </div>`
+    }
+
+    get pillFooter() {
+        return `<div class="grid button-row">
+        <div class="row">
+            <div class="col-full align-end">
+                <cui-button class="updateBtn" text="Update" primary="true"></cui-button>
+                <cui-button class="resetBtn" text="Reset"></cui-button>
+            </div>
+        </div>
+    </div>`
+    }
+
+    get sShadowLayout() {
         return ` 
         <div class="cui-field" part="outer-wrapper">          
         <div class="cui-label " part="label-wrapper">
@@ -214,108 +226,110 @@ class CUI_FORMPILL extends HTMLElement {
         </div>`;
     }
 
-    setInitialState(state) {
-        for (let [k, v] of Object.entries(this._state)) {
-            switch (k) {
-                case "adPills":
-                    this._initialState[k] = [];
-                    for (let pill of v) {
-                        let copiedPill = document.createElement("cui-formpill-pill");
-                        if (!state) {
-                            for (const attrValue of structuredClone(pill.getAttributeNames()))
-                                copiedPill.setAttribute(attrValue, pill.getAttribute(attrValue));
-
-                        } else {
-
-                            for (const attrValue of structuredClone(pill.getAttributeNames()))
-                                copiedPill.setAttribute(attrValue, pill._state[pill.oPropsToStateNames[attrValue]]);
-
-                        }
-                        this._initialState[k].push(copiedPill);
-
-                    }
-                    break;
-
-                case "criteriaList":
-                    this._initialState[k] = structuredClone(v);
-                    break;
-
-                case "configData":
-                    this._initialState[k] = structuredClone(v);
-                    break;
-
-                default:
-                    this._initialState[k] = v;
-
-            }
-
-        }
+    get sLightLayout() {
+        return ` 
+        <label slot="labelContents" for="${this._state.sComponentKey}">${!this._state.bAccessibleHideLabel ? (this._state.sLabel + ":") : ""}</label>
+        <div class="pill-container" part="pill-container" slot="pill-container"></div>
+        <button id="button-menu-trigger" class="button-menu-trigger" title="${this._state.sLabel}" part="menu-trigger" slot="menu-trigger" type="button" aria-label="${this._state.sLabel} aria-controls="popover" aria-haspopup="true">
+            ${this._state.sIconBasePath ? `<cui-icon src="${this._state.sIconBasePath}" class="accessibleHideLabel"></cui-icon>` : `<div class="add-icon" part="add-icon">+</div>`}
+        ${!this._state.bAccessibleHideLabel ? this._state.sLabel : ""}
+        </button>`;
+    }
+
+    sPopoverLayout(forPill) {
+        return `
+      <cui-formpill-popover class="${!this.bMobile ? 'button-menu' : ''}" style="z-index:900">
+        <${!this.bMobile ? 'div' : 'dialog'} class="${this.bMobile ? 'dialog-popover-contents' : 'popover-contents'}" slot="popover-contents">
+          <div class="popover-body">
+            <div class="popover-header">
+              <h3>${forPill ? this._state.sUpdateTitle : this._state.sAddTitle}</h3>
+              <button class="close-button">×</button>
+            </div>
+            <div class="body-content"></div>
+            <div class="popover-footer">
+              ${forPill ? this.pillFooter : this.footer}
+            </div>
+          </div>
+        </${!this.bMobile ? 'div' : 'dialog'}>
+      </cui-formpill-popover>
+    `
     }
 
     setState(props, bOverrideInitialState = false) {
         // Need to map props to state variable names if we want to keep them prefixed. 
-        if (!this._initialState) this._initialState = {};
 
         this._state = Object.assign(this._state, this.normalizeProps(props));
 
-        if (this._connected) {
-            this.render();
+        if (bOverrideInitialState) {
+            this._initialState = this.updateState(this._state);
         }
 
-        if (bOverrideInitialState) {
-            if (this._connected) {
-                this.setInitialState(true);
-            } else {
-                this.setInitialState();
-            }
+        if (this._connected) {
+            this.render();
         }
     }
-    reset() {
 
-        for (const [k, v] of Object.entries(this._initialState)) {
-            switch (k) {
-                case "adPills":
-                    this._state[k] = [];
-                    for (const pill of v) {
-                        const myEvent = new CustomEvent("pill-removed", {
-                            detail: { pill: pill }
-                        });
-                        this.dispatchEvent(myEvent);
-                        let copiedPill = document.createElement("cui-formpill-pill");
-                        for (const attrValue of structuredClone(pill.getAttributeNames())) {
-                            copiedPill.setAttribute(attrValue, pill.getAttribute(attrValue));
+    updateState(state) {
+
+        let initialState = {};
+
+        for (let [key, vvalue] of Object.entries(state)) {
+            switch (key) {
+                case "aoPills":
+                    initialState[key] = [];
+                    for (let pill of vvalue) {
+                        // Clone the DOM node
+                        let dPillClone = null;
+                        if (pill.dPill) {
+                            dPillClone = pill.dPill.cloneNode(true);
                         }
-                        this._state[k].push(copiedPill);
 
+                        // Make a shallow copy of pill and remove dPill before deep cloning
+                        const tempPill = { ...pill };
+                        delete tempPill.dPill;
+
+                        // Deep clone the pill object without dPill
+                        let pillClone = structuredClone(tempPill);
+
+                        // Assign the cloned DOM node back
+                        if (dPillClone) {
+                            pillClone.dPill = dPillClone;
+                        }
+
+                        initialState[key].push(pillClone);
                     }
                     break;
-
-                case "criteriaList":
-                    this._state[k] = structuredClone(v);
+                default:
+                    initialState[key] = structuredClone(vvalue);
                     break;
+            }
+        }
 
-                case "configData":
-                    this._state[k] = structuredClone(v);
-                    break;
+        return initialState;
+    }
 
-                default:
-                    this._state[k] = v;
+    reset() {
+        if (this._initialState) {
+            this._state = this.updateState(this._initialState);
 
+            if (this._cMessageList) {
+                this._cMessageList.reset();
             }
 
-        }
+            if (this._state.dMenuPopover) {
+                this._state.dMenuPopover.state.bOpen = false;
+                document.body.removeChild(this._state.dMenuPopover)
+                this._state.dMenuPopover = null;
+                document.body.removeEventListener('click', this.fGlobalBodyClick);
+                this._state.bMenuDisplayed = false;
+            }
 
-        if (this._state.dMenuPopover) {
-            this._state.dMenuPopover.state.bOpen = false;
-            document.body.removeChild(this._state.dMenuPopover)
-            this._state.dMenuPopover = null;
-            document.body.removeEventListener('click', this.fGlobalBodyClick);
-            this._state.bMenuDisplayed = false;
-        }
 
+            this.render();
 
-        this.render(true);
+        }
     }
+
     get label() {
 
         if (this.dLabelContents) {
@@ -354,12 +368,10 @@ class CUI_FORMPILL extends HTMLElement {
         // Call above setting connected to avoid second render. 
         this._connected = true;
 
-        //Set initial menu object based on children.
-
-        var match = window.matchMedia || window.msMatchMedia;
-
+        //Checking media type to decide if it is in mobile device
+        let match = window.matchMedia || window.msMatchMedia;
         if (match) {
-            var mq = match("(pointer:coarse)");
+            let mq = match("(pointer:coarse)");
             this.bMobile = mq.matches;
         }
 
@@ -373,1034 +385,458 @@ class CUI_FORMPILL extends HTMLElement {
         this._state.bAccessibleHideLabel = this.hasAttribute('accessiblehidelabel') ? true : false;
         this._state.sPosition = (this.getAttribute('position')) ? this.getAttribute('position') : "bottom-center";
         this._state.aoValue = (this.getAttribute('value')) ? this.getAttribute('value') : [];
+        this._state.iCharLimit = (this.getAttribute('charLimit')) ? this.getAttribute('charLimit') : null;
+        this._state.isMultiple = (this.hasAttribute('isMultiple')) ? true : false;
 
-        //Set initial state only once at connection to page. At this point any initial data should have been passed to the field. 
-        if (!this._initialState || this._initialState == null) {
-            // Shallow clone for now unless it's determined we need a deep clone. 
-            this._initialState = {};
-        }
-
+        //Click Event listener for the window
         this.fGlobalBodyClick = this.globalBodyClick.bind(this);
 
-        this.setInitialState();
         this.render();
     }
 
-    get footer() {
-        return `<div class="grid button-row">
-        <div class="row">
-            <div class="col-full align-end">
-                <cui-button class="addBtn" text="Add" primary="true"></cui-button>
-                <cui-button class="resetBtn" text="Clear"></cui-button>
-            </div>
-        </div>
-    </div>`
-    }
-
-    get pillFooter() {
-        return `<div class="grid button-row">
-        <div class="row">
-            <div class="col-full align-end">
-                <cui-button class="updateBtn" text="Update" primary="true"></cui-button>
-                <cui-button class="resetBtn" text="Reset"></cui-button>
-            </div>
-        </div>
-    </div>`
-    }
 
-    render(reset = false) {
+    render() {
         this.clearShadowDom(this.shadowRoot);
         this.clearSlottedElements("menu-trigger");
         this.clearSlottedElements("labelContents");
         this.clearSlottedElements("pill-container");
 
-        this.shadowRoot.innerHTML = `${this.sFieldLayout} `;
-
-
-        if (this._state.adPills.length > 0) {
-            for (let pill of this._state.adPills) {
-
-                let removedValue = pill._state.sValue1;
-
-                const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
-
-
-                // Check if the item is already in criteriaList
-                if (!this._state.criteriaList.some(item => item.value === removedValue)) {
-                    // Find the item in configData.filterCriteria.items
-                    const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
-                    if (itemToAdd) {
-                        // Insert the item at the same position as in _initialState
-                        if (initialIndex !== -1) {
-                            this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
-                        } else {
-                            // If the item is not found in _initialState, default to adding at the end
-                            this._state.criteriaList.push(itemToAdd);
-                        }
-                    }
-                }
-            }
-        }
+        this.shadowRoot.innerHTML = `${this.sShadowLayout} `;
+        this.innerHTML = `${this.sLightLayout}`
 
+        this.dTrigger = this.querySelector('button.button-menu-trigger')
 
+        this.dTrigger.addEventListener('click', async (event) => {
+            this.menuTriggerOnClick();
+        });
 
-        this._state.adPills = [];
-
-        if (this._state.configData?.filterCriteria && !this._state.configData.filterCriteria.loadedPills) {
-            this._state.configData.filterCriteria.loadedPills = []
-        }
-
-        if (this._state.aoValue && this._state.aoValue.length > 0 && this._state.configData?.filterCriteria?.loadedPills && reset === false) {
-            this._state.configData.filterCriteria.loadedPills = []
-            for (let pill of this._state.aoValue) {
-                this._state.configData.filterCriteria.loadedPills.push(pill);
-            }
-            this.addPillfromJSON();
-
-        } else if (reset === true) {
-            if (this._state.configData?.filterCriteria?.loadedPills) {
-
-                this._state.configData.filterCriteria.loadedPills = []
-            }
-            this.addPillfromJSON();
-        }
-
+        window.addEventListener('resize', (e) => {
+            this.windowResize(e);
+            window.removeEventListener('resize', this.windowResize())
+        });
 
 
-        let adSlots = this.shadowRoot.querySelectorAll('slot');
+        //Load pills from state if they already exists.
+        if (this?._state?.aoPills?.length) {
+            for (let oPill of this._state.aoPills) {
 
-        if (adSlots.length) {
+                if (this?._state?.aoConfig?.items) {
 
-            for (let dSlot of adSlots) {
-                let dNode = dSlot.assignedNodes()[0];
+                    let oMatchedItem = this._state.aoConfig.items.find(item => item.value === oPill.value);
 
-                if (dNode) {
-                    let sSlotName = dNode.getAttribute("slot");
+                    let sLabel = oMatchedItem ? oMatchedItem.label : '';
 
-                    if (sSlotName && sSlotName.toLowerCase() === "labelcontents") {
-                        this.dLabelContents = dNode;
-                    }
+                    oPill.label = sLabel;
 
+                    let dPill = this.#createAndAppendPill(oPill, true);
+                    oPill.dPill = dPill;
                 }
 
+                this._state.sCriteriaList.add(oPill.value)
             }
-
         }
-
-        let label = document.createElement('label');
-        label.slot = 'labelContents';
-
-        label.setAttribute('for', this._state.sComponentKey)
-
-        let pillDiv = document.createElement('div');
-        pillDiv.classList.add('pill-container');
-        pillDiv.part = "pill-container"
-        pillDiv.slot = "pill-container"
-        this.appendChild(label);
-        this.appendChild(pillDiv);
-
-        let dTriggerElem = document.createElement('button');
-        if (this._state.adPills.length > 0) {
-
-            for (let i = 0; i < this._state.adPills.length; i++) {
-
-                pillDiv.append(this._state.adPills[i])
-                const customEvent = new CustomEvent('pill-created', { detail: { pill: this._state.adPills[i] } });
-                this.dispatchEvent(customEvent);
-                this._state.adPills[i].addEventListener('pill_removed', (e) => {
-                    let removedValue = e.detail.state.sValue1;
-                    // Find the index of the item in _initialState
-                    const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
-
-
-                    // Check if the item is already in criteriaList
-                    if (!this._state.criteriaList.some(item => item.value === removedValue)) {
-                        // Find the item in configData.filterCriteria.items
-                        const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
-                        if (itemToAdd) {
-                            // Insert the item at the same position as in _initialState
-                            if (initialIndex !== -1) {
-                                this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
-                            } else {
-                                // If the item is not found in _initialState, default to adding at the end
-                                this._state.criteriaList.push(itemToAdd);
-                            }
-                        }
-                    }
-
-
-                    const myEvent = new CustomEvent("pill-removed", {
-                        detail: { pill: e.detail }
-                    });
-                    let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
-
-                    if (index > 0) {
-                        this._state.adPills.splice(index, 1);
-
-                    } else if (index === 0) {
-                        this._state.adPills = [];
-                    }
-                    this.dispatchEvent(myEvent);
-                });
-                this.querySelectorAll('.pill-title')[pillDiv.children.length - 1].addEventListener('click', (e) => {
-                    this.menuTriggerOnClick(e.target.closest("cui-formpill-pill"));
-                });
-            }
-
-        }
-
-        dTriggerElem.title = this._state.sLabel;
-        dTriggerElem.setAttribute('aria-label', this._state.sLabel);
-
-        if (this._state.bAccessibleHideLabel) {
-            dTriggerElem.textContent = "";
-            label.textContent = "";
-        } else {
-            dTriggerElem.textContent = this._state.sLabel;
-            label.textContent = this._state.sLabel + ':';
-        }
-
-        dTriggerElem.setAttribute('aria-controls', 'menu2');
-        dTriggerElem.setAttribute('aria-haspopup', 'true');
-        dTriggerElem.classList.add("button-menu-trigger");
-        dTriggerElem.part = "menu-trigger"
-        dTriggerElem.slot = "menu-trigger";
-        dTriggerElem.type = "button";
-        dTriggerElem.addEventListener('click', async (event) => {
-            this.menuTriggerOnClick();
-        });
-
-        if (this._state.sIconBasePath) {
-            let icon = document.createElement('cui-icon');
-            icon.setAttribute("src", this._state.sIconBasePath)
-            icon.classList.add('accessibleHideLabel')
-            dTriggerElem.prepend(icon);
-        } else {
-            let addIconDiv = document.createElement('div');
-            addIconDiv.textContent = '+';
-            addIconDiv.classList.add('add-icon');
-            addIconDiv.part = 'add-icon';
-            dTriggerElem.prepend(addIconDiv);
-        }
-
-        this.dTriggerElem = dTriggerElem;
-        this.appendChild(this.dTriggerElem);
-
-        window.addEventListener('resize', (e) => {
-            this.windowResize(e);
-            window.removeEventListener('resize', this.windowResize())
-        });
-
-
     }
 
-    menuTriggerOnClick(formpill = null) {
+    menuTriggerOnClick(dFormPill = null) {
         if (this._state.bMenuDisplayed) {
             this.hidePopover();
-        } else if (formpill !== null) {
-            this.displayPillPopover(formpill);
-        }
-        else {
-            this.displayPopover(); 1
+        } else {
+            this.displayPopover(dFormPill);
         }
     }
 
     globalBodyClick(evt) {
-        if (this._state.dMenuPopover && !this._state.dMenuPopover.contains(evt.target)) {
+        if (!this.contains(evt.target) && this._state.dMenuPopover && !this._state.dMenuPopover.contains(evt.target)) {
             this.hidePopover();
         }
     }
 
-    async createPopover(dTriggerElem, isPillPopover = false) {
-        if (this._state.bMenuDisplayed == true) {
-            return;
-        }
+    displayPopover(dFormPill = null) {
 
-        this._state.bMenuDisplayed = true;
+        let dDefaultControl = document.createElement('cui-listbox')
+        dDefaultControl.setAttribute('label', 'Criteria');
+        dDefaultControl.setAttribute('required', 'true');
+        dDefaultControl.setAttribute('componentKey', 'critiria');
 
-        let dMenuPopover = document.createElement('cui-formpill-popover');
-        if (!this.bMobile) {
-            dMenuPopover.classList.add("button-menu");
-        }
+        this.dDefaultControl = dDefaultControl;
 
-        dMenuPopover.zIndex = 900;
-        dMenuPopover.for = dTriggerElem;
-        dMenuPopover.appendLocation = document.body;
-        dMenuPopover.includeArrow = true;
+        //Create dom based on the config Data
+        if (this._state.aoConfig?.items?.length) {
+            let aOptions = [];
+            for (let options of this._state.aoConfig.items) {
+                aOptions.push({ 'label': options.label, 'value': options.value })
+            }
 
-        this._state.dMenuPopover = dMenuPopover;
-        this._state.dMenuPopover.state.sPosition = this._state.sPosition;
-        this._state.dMenuPopover.state.bOpen = true;
-        let dPopoverContent = null;
-        if (this.bMobile) {
-            dPopoverContent = document.createElement('dialog');
-            dPopoverContent.classList.add('dialog-popover-contents');
+            let dItems = this.convertOptionsToChildElemsDOM(aOptions, dFormPill);
+            dDefaultControl.append(...dItems.childNodes)
 
-        } else {
-            dPopoverContent = document.createElement('div');
-            dPopoverContent.classList.add('popover-contents');
+            dDefaultControl.addEventListener('change', this.generateBodyContent.bind(this))
         }
 
-        dPopoverContent.slot = "popover-contents";
-        dPopoverContent.classList.add('popover-contents');
-        let dPopoverBody = document.createElement('div');
-        dPopoverBody.classList.add("popover-body");
+        if (dFormPill) {
+            let oPopoverContents = this.renderPopover(dDefaultControl, true, dFormPill)
 
-        let dPopoverHeader = document.createElement('div')
-        dPopoverHeader.classList.add('popover-header')
-
-        let dPopoverTitle = document.createElement('h3');
-
-        dPopoverHeader.appendChild(dPopoverTitle);
-
-        let closeButton = document.createElement('button');
-        closeButton.classList.add('close-button');
-        closeButton.textContent = '×'
-        dPopoverHeader.appendChild(closeButton);
-        closeButton.addEventListener('click', () => { this.hidePopover() })
-
-        let dPopoverFooter = document.createElement('div');
-        dPopoverFooter.classList.add("popover-footer");
+            //Set exisiting criteria value and make it readOnly
+            if (dDefaultControl.setState) {
+                dDefaultControl.setState({ readOnly: true, value: dFormPill.contents.value })
+            } else {
+                dDefaultControl.setAttribute('readOnly', true);
+                dDefaultControl.setAttribute('value', dFormPill.contents.value);
+            }
 
-        if (isPillPopover === true) {
-            dPopoverTitle.textContent = this._state.sUpdateTitle;
-            dPopoverFooter.innerHTML = this.pillFooter
+            //Set exisiting values if they exist in the pill
+            if (dFormPill?.contents?.fields) {
+                this.setExistingFieldValues(dFormPill.contents.fields, oPopoverContents, true)
+            }
         } else {
-            dPopoverTitle.textContent = this._state.sAddTitle;
-            dPopoverFooter.innerHTML = this.footer
+            this.renderPopover(dDefaultControl)
         }
 
-        let closeBtn = null;
-        if (this.bMobile) {
-
-            closeBtn = document.createElement('button');
-            closeBtn.classList.add('dialog-close');
-            closeBtn.setAttribute('id', 'dialog-close');
-            closeBtn.part = 'dialog-close';
-            let span = document.createElement('span');
-            span.part = 'dialog-close-span';
-            span.innerHTML = `&#215;`
-            closeBtn.appendChild(span)
-            let header = document.createElement('header');
-            header.appendChild(closeBtn)
-
-            dPopoverBody.appendChild(header)
-        }
-
-        dPopoverContent.addEventListener(
-            "eventAction",
-            (e) => {
-
-                if (e.target != this) {
-
-                    e.stopImmediatePropagation();
-
-                    let eventDetail = e.detail;
-                    eventDetail.target = this;
-
-                    // //target to detail
-
-                    const E_CONTROL_EVENT = new CustomEvent("eventAction", {
-                        bubbles: true,
-                        composed: true,
-                        detail: eventDetail
-                    });
-
-                    this.dispatchEvent(E_CONTROL_EVENT);
-                }
-
-            },
-            false
-        );
-
-        dPopoverBody.appendChild(dPopoverHeader)
-        dPopoverBody.appendChild(dPopoverFooter);
-        dPopoverContent.appendChild(dPopoverBody);
-        dMenuPopover.appendChild(dPopoverContent);
-
-        return [dPopoverBody, dPopoverContent, dMenuPopover, dPopoverFooter]
     }
 
-    async displayPopover() {
-
-        let adPopoverElements = await this.createPopover(this.dTriggerElem);
-        let dPopoverBody = adPopoverElements[0];
-        let dPopoverContent = adPopoverElements[1];
-        let dMenuPopover = adPopoverElements[2];
-        let dPopoverFooter = adPopoverElements[3];
+    generateBodyContent(evt) {
+        let controls = document.createElement('div');
 
-
-        this.criteria = null;
-        this.method = null;
-        this.dValueField = null;
-        this.field = null;
-        this.adFields = [];
-
-        if (this._state.configData) {
-            if (this._state.configData.filterCriteria) {
-                this.criteria = document.createElement('cui-listbox');
-                this.criteria.setAttribute('search', '');
-                let items = []
-
-                if (this._state.criteriaList === null) {
-                    for (let item of this._state.configData.filterCriteria.items) {
-                        let lbValue = { 'label': item.label, 'value': item.value };
-                        if (item.multiple) {
-                            lbValue.multiple = item.multiple
+        for (let item of this._state.aoConfig.items) {
+            if (item.value === evt.detail.data.value) {
+                let aoControls;
+                if (item?.template) {
+                    if (Object.hasOwn(this._state.aoConfig.templates, item.template)) {
+                        if (this._state.aoConfig.templates[item.template]?.controls) {
+                            aoControls = this._state.aoConfig.templates[item.template].controls
                         }
-                        items.push(lbValue);
-                    }
-                    this._state.criteriaList = items;
-                } else {
-                    for (let item of this._state.criteriaList) {
-                        items.push(item);
                     }
                 }
+                else if (item?.controls?.length) {
+                    aoControls = item.controls
+                }
 
-                this.criteria.setState({ 'items': items, 'label': `${(this._state.configData.filterCriteria.fieldLabel) ? this._state.configData.filterCriteria.fieldLabel : 'Criteria'}` })
-                this.criteria.setAttribute('required', '');
-                this.criteria.setAttribute('componentKey', 'contextHeaderCriteria');
-                dPopoverBody.insertBefore(this.criteria, dPopoverFooter)
-
-                this.handleCriteriaChange(dPopoverBody, dPopoverFooter)
-
+                if (aoControls.length) {
+                    let controld;
+                    for (const control of aoControls) {
+                        controld = this.convertJsonToDom(control);
+                        controls.appendChild(controld)
+                    }
+                }
             }
-            let dAddButton = dPopoverBody.querySelector('.addBtn');
-            this.handleAddUpdate(dAddButton, dPopoverBody, 'add')
-
-            dPopoverBody.querySelector('.resetBtn').addEventListener('click', (e) => {
-                this.criteria.setState({ 'value': '' })
-                this.criteria.messages.removeAll();
-            })
-
         }
 
-        window.requestAnimationFrame(() => {
-            dMenuPopover.append();
-            if (this.bMobile) {
-                dPopoverContent.showModal()
-                closeBtn.addEventListener('click', (e) => {
-                    dPopoverContent.close();
-                    this.hidePopover();
-                })
-            }
-            document.body.addEventListener('click', this.fGlobalBodyClick, false);
-        });
+        let dBody = this._state.dMenuPopover.querySelector('.body-content');
+        dBody.replaceChildren(...controls.childNodes)
 
+        let customEvent = new CustomEvent('filter-change', { detail: evt.detail });
+        this.dispatchEvent(customEvent);
 
     }
 
-    async displayPillPopover(pill) {
-
-        let adPopoverElements = await this.createPopover(pill, true);
-        let dPopoverBody = adPopoverElements[0];
-        let dPopoverContent = adPopoverElements[1];
-        let dMenuPopover = adPopoverElements[2];
-        let dPopoverFooter = adPopoverElements[3];
-
-        this.criteria = null;
-        this.method = null;
-        this.dValueField = null;
-        this.field = null;
-        this.adFields = [];
-        if (this._state.configData) {
-            if (this._state.configData.filterCriteria) {
-                this.criteria = document.createElement('cui-listbox');
-                let items = []
-
-                for (let item of this._state.configData.filterCriteria.items) {
-                    let lbValue = { 'label': item.label, 'value': item.value };
-                    items.push(lbValue);
-                }
+    setExistingFieldValues(oFields, oPopoverContents, initialLoad = false) {
+        let dFields = oPopoverContents?.dBody?.children;
 
-                this.criteria.setState({ 'items': items, 'label': `${(this._state.configData.filterCriteria.fieldLabel) ? this._state.configData.filterCriteria.fieldLabel : 'Criteria'}` })
-                this.criteria.setAttribute('value', pill._state.sValue1)
-                this.criteria.setAttribute('required', '');
-                this.criteria.setAttribute('readOnly', '');
-                this.criteria.setAttribute('componentKey', 'contextHeaderCriteria');
-                dPopoverBody.insertBefore(this.criteria, dPopoverFooter)
+        //If Update, assign existing values to the fields if they exists
+        for (let field of dFields) {
 
-                this.handleCriteriaChange(dPopoverBody, dPopoverFooter, pill, true)
+            let sPreferredKey = this.retrievePreferredKey(field);
 
+            if (sPreferredKey && oFields?.[sPreferredKey]) {
+                if (field.setState) {
+                    field.setState({ value: oFields[sPreferredKey] }, initialLoad)
+                } else {
+                    field.setAttribute('value', oFields[sPreferredKey])
+                }
             }
         }
-        let formPill = dMenuPopover.state.dFor;
-        let dUpdateButton = dPopoverBody.querySelector('.updateBtn');
-        this.handleAddUpdate(dUpdateButton, dPopoverBody, 'update', formPill)
-
-        dPopoverBody.querySelector('.resetBtn').addEventListener('click', (e) => {
-            this.hidePopover();
-            this.menuTriggerOnClick(formPill);
-        })
-
-        window.requestAnimationFrame(() => {
-            dMenuPopover.append();
-            if (this.bMobile) {
-                dPopoverContent.showModal()
-                closeBtn.addEventListener('click', (e) => {
-                    dPopoverContent.close();
-                    this.hidePopover();
-                })
-            }
-            document.body.addEventListener('click', this.fGlobalBodyClick, false);
-        });
-
+    }
 
+    retrievePreferredKey(dField) {
+        return (
+            dField.getAttribute('propertyKey') ||
+            dField.getAttribute('componentKey') ||
+            dField.getAttribute('id') ||
+            null
+        );
     }
 
-    handleCriteriaChange(dPopoverBody, dPopoverFooter, pill = null, isPill = false) {
-        let selectedValue;
+    renderPopover(dBodyContent, forPill = false, dFormPill) {
+        if (this._state.bMenuDisplayed == true) return;
 
-        if (pill && isPill) {
-            selectedValue = pill._state.sValue1;
-            let selectedItem = this._state.configData.filterCriteria.items.find(item => item.value === selectedValue);
+        let sLayout = this.sPopoverLayout(forPill);
 
-            let controls = selectedItem.controls;
-            if (controls.options && controls.value) {
+        let dContainer = document.createElement('div');
+        dContainer.innerHTML = sLayout;
 
-                this.method = document.createElement('cui-listbox');
-                if (controls.search) this.method.setAttribute('search', '');
-                this.method.setState({ 'items': controls.options, 'label': `${(controls.fieldLabel) ? controls.fieldLabel : 'Method'}` });
-                this.method.setAttribute('value', pill._state.sValue2)
-                this.method.setAttribute('required', '');
-                this.method.setAttribute('componentKey', 'contextHeaderMethod');
-                dPopoverBody.insertBefore(this.method, dPopoverFooter);
+        // Append to DOM
+        let dPopover = dContainer.firstElementChild;
+        dPopover.for = dFormPill ?? this.dTrigger;
+        this._state.dMenuPopover = dPopover
 
-                if (controls.value.control === 'text') {
-                    this.dValueField = document.createElement('cui-text');
-                }
-                if (controls.value.control === 'date') {
-                    this.dValueField = document.createElement('cui-date');
-                }
+        let dContent = dPopover.querySelector('[slot="popover-contents"]')
 
-                if (controls.value.validation) {
-                    this.dValueField.setAttribute('validation', controls.value.validation);
-                }
-
-                this.dValueField.setState({ 'label': `${(controls.value.fieldLabel) ? controls.value.fieldLabel : 'Value'}` })
-                this.dValueField.setAttribute('value', pill._state.sValue3)
-                this.dValueField.setAttribute('required', '');
-                this.dValueField.setAttribute('componentKey', 'contextHeaderValue');
-                dPopoverBody.insertBefore(this.dValueField, dPopoverFooter);
+        dContent.addEventListener("eventAction", (e) => {
 
-            } else if (controls.value && controls.value.options) {
-                this.dValueField = document.createElement('cui-listbox');
-                this.dValueField.setState({ 'items': controls.value.options, 'label': `${(controls.fieldLabel) ? controls.fieldLabel : 'Value'}` });
+            if (e.target != this) {
 
+                e.stopImmediatePropagation();
 
-                if (controls.value.multiple) {
-                    this.dValueField.setAttribute('multiple', true)
-                }
-                if (controls.value.codedesc) {
-                    this.dValueField.setAttribute('codedesc', true)
-                }
-                if (controls.value.search) {
-                    this.dValueField.setAttribute('search', true)
-                }
-                if (pill?._state?.sValue2) {
-                    if (pill._state.sValue2.indexOf(',') == -1) {
-                        this.dValueField.setAttribute('value', pill._state.sValue2)
-                    }
-                    else {
+                let eventDetail = e.detail;
+                eventDetail.targetPopover = dPopover;
+                eventDetail.target = this;
+                const E_CONTROL_EVENT = new CustomEvent("eventAction", {
+                    bubbles: true,
+                    composed: true,
+                    detail: eventDetail
+                });
 
-                        let aValues = pill._state.sValue2.split(',');
-                        this.dValueField.setAttribute('value', aValues)
-                    }
-                }
+                this.dispatchEvent(E_CONTROL_EVENT);
+            }
 
-                if (pill?._state?.asValues) {
-                    let aValues = pill._state.asValues.split(',');
-                    this.dValueField.setAttribute('value', aValues)
-                }
+        }, false);
 
+        //assign reemit for the relay events
+        if (this._state.aoConfig?.relayEvents?.length) {
+            this.relayEvents(this._state.aoConfig.relayEvents, dContent)
+        }
 
-                this.dValueField.setAttribute('required', '');
-                this.dValueField.setAttribute('componentKey', 'contextHeaderValue');
-                dPopoverBody.insertBefore(this.dValueField, dPopoverFooter);
-            } else if (controls.value && controls.value.control) {
+        let dBody = dPopover.querySelector('.body-content');
+        let dPopoverBody = dPopover.querySelector('.popover-body');
+        dPopoverBody.insertBefore(dBodyContent, dBody)
 
-                for (let i = 0; i < controls.value.control.length; i++) {
+        document.body.appendChild(dPopover);
 
-                    if (controls.value.control[i].type === "text") {
-                        this.field = document.createElement('cui-text');
+        if (this.bMobile) {
+            dContent.showModal();
+        }
 
-                    } else if (controls.value.control[i].type === "date") {
-                        this.field = document.createElement('cui-date');
-                    }
+        if (forPill) {
+            let dAddButton = dPopoverBody.querySelector('.updateBtn');
+            dAddButton.addEventListener('click', this.addUpdatePill(dFormPill));
 
-                    this.field.setState({ 'label': controls.value.control[i].label })
-                    if (controls.value.control[i].required) {
-                        this.field.setAttribute('required', '');
-                    }
+            // Add Reset listener
+            let dResetButton = dPopoverBody.querySelector('.resetBtn');
+            dResetButton.addEventListener('click', function () {
+                // Query all relevant elements
+                const keys = ['propertyKey', 'componentKey', 'id'];
+                const selector = keys.map(attr => `[${attr}]`).join(', ');
+                const elements = dBody.querySelectorAll(selector);
 
-                    if (controls.value.control[i].validation) {
-                        this.field.setAttribute('validation', controls.value.control[i].validation)
+                // Reset each element if it has a reset method
+                elements.forEach(element => {
+                    if (typeof element.reset === 'function') {
+                        element.reset();
                     }
+                });
+            }.bind(this));
 
-                    this.field.setAttribute('componentKey', controls.value.control[i].componentKey);
-                    dPopoverBody.insertBefore(this.field, dPopoverFooter);
-                    this.adFields.push(this.field);
-
-                }
-                let pillValues = pill._state.asValues.split(',');
-                for (let i = 0; i < pillValues.length; i++) {
-                    this.adFields[i].setAttribute('value', pillValues[i])
-
-                }
-            }
-
-            const customEvent = new CustomEvent('filter-change', { detail: { value: selectedItem.value, label: selectedItem.label } });
-            this.dispatchEvent(customEvent);
         } else {
 
+            let dAddButton = dPopoverBody.querySelector('.addBtn');
+            dAddButton.addEventListener('click', this.addUpdatePill());
 
-            this.criteria.addEventListener('change', (e) => {
-
-                const customEvent = new CustomEvent('filter-change', { detail: { value: this.criteria.value, label: this.criteria.label } });
-                this.dispatchEvent(customEvent);
-
-                let removeCriteriaSiblings = function (element) {
-                    Array.from(element.parentNode.children).filter(sibling => sibling !== element && (sibling.tagName.toLowerCase() === 'cui-listbox' || sibling.tagName.toLowerCase() === 'cui-text' || sibling.tagName.toLowerCase() === 'cui-date')).forEach(sibling => sibling.remove());
-                };
-                removeCriteriaSiblings(this.criteria);
-
-                selectedValue = e.detail.data.value;
-                let selectedItem = this._state.configData.filterCriteria.items.find(item => item.value === selectedValue);
-                if (selectedItem) {
-                    let controls = selectedItem.controls;
-
-                    if (controls.options && controls.value) {
-
-                        this.method = document.createElement('cui-listbox');
-                        if (controls.search) this.method.setAttribute("search", "");
-                        this.method.setState({ 'items': controls.options, 'label': `${(controls.fieldLabel) ? controls.fieldLabel : 'Method'}` });
-                        this.method.setAttribute('required', '');
-                        this.method.setAttribute('componentKey', 'contextHeaderMethod');
-                        dPopoverBody.insertBefore(this.method, dPopoverFooter);
-
-                        if (controls.value.control === 'text') {
-                            this.dValueField = document.createElement('cui-text');
-                            this.dValueField.setState({ 'label': `${(controls.value.fieldLabel) ? controls.value.fieldLabel : 'Value'}` })
-                            this.dValueField.setAttribute('required', '');
-                            this.dValueField.setAttribute('componentKey', 'contextHeaderValue');
-                            dPopoverBody.insertBefore(this.dValueField, dPopoverFooter);
-                        }
-                        if (controls.value.validation) {
-                            this.dValueField.setAttribute('validation', controls.value.validation);
-                        }
-
-                    } else if (controls.value && controls.value.options) {
-                        this.dValueField = document.createElement('cui-listbox');
-                        this.dValueField.setState({ 'items': controls.value.options, 'label': `${(controls.fieldLabel) ? controls.fieldLabel : 'Value'}` });
-                        this.dValueField.setAttribute('required', '');
-                        this.dValueField.setAttribute('componentKey', 'contextHeaderValue');
-                        if (controls.value.multiple) {
-                            this.dValueField.setAttribute('multiple', true)
-                        }
-                        if (controls.value.codedesc) {
-                            this.dValueField.setAttribute('codedesc', true)
-                        }
-                        if (controls.value.search) {
-                            this.dValueField.setAttribute('search', true)
-                        }
-                        dPopoverBody.insertBefore(this.dValueField, dPopoverFooter);
-                    } else if (controls.value && controls.value.control) {
-
-                        for (let i = 0; i < controls.value.control.length; i++) {
-                            if (controls.value.control[i].type === "text") {
-                                this.field = document.createElement('cui-text');
-
-                            } else if (controls.value.control[i].type === "date") {
-                                this.field = document.createElement('cui-date');
-                            }
-
-                            if (controls.value.control[i].validation) {
-                                this.field.setAttribute('validation', controls.value.control[i].validation)
-                            }
-
-                            this.field.setState({ 'label': controls.value.control[i].label })
-                            if (controls.value.control[i].required) {
-                                this.field.setAttribute('required', '');
-                            }
-                            this.field.setAttribute('componentKey', controls.value.control[i].componentKey);
-                            dPopoverBody.insertBefore(this.field, dPopoverFooter);
-                            this.adFields.push(this.field);
-
-                        }
-                    }
-                } else {
-                    console.log("No item found with the selected value.");
-                }
-            })
+            let dResetButton = dPopoverBody.querySelector('.resetBtn');
+            dResetButton.addEventListener('click', function () {
+                this.dDefaultControl.setState({ "value": "" })
+            }.bind(this));
         }
 
-    }
+        let closeBtn = dPopoverBody.querySelector('.close-button');
+        closeBtn.addEventListener('click', function () {
+            this.hidePopover();
+        }.bind(this));
 
-    handleAddUpdate(dButton, dPopoverBody, sFor, pill = null) {
-        dButton.addEventListener('click', (e) => {
-            let validatedFields = this.validateRegion(dPopoverBody);
+        this._state.bMenuDisplayed = true;
 
-            if (validatedFields) {
-                let formPill;
-                if (sFor === 'add') {
-                    formPill = document.createElement('cui-formpill-pill');
-                    this._state.adPills.push(formPill);
-                } else {
-                    formPill = pill;
-                }
+        document.body.addEventListener('click', this.fGlobalBodyClick, false);
 
-                if (this.method !== null && this.dValueField !== null) {
-                    let curValue = this.criteria.value;
-                    formPill.setAttribute('value1', this.criteria.value)
-                    formPill.setAttribute('value2', this.method.value)
-                    formPill.setAttribute('value3', this.dValueField.value)
-                    let pillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${this.dValueField.value}`
-                    if (sFor === 'update') {
-                        formPill.setState({
-                            'value1': this.criteria.value, 'value2': this.method.value, 'value3': this.dValueField.value,
-                            'text': `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${this.dValueField.value}`
-                        })
-                    }
-                    formPill.setAttribute('text', pillText.slice(0, 30) + (pillText.length > 30 ? "..." : ""))
-
-                    if (sFor === 'add') {
-                        let updatedList = this._state.criteriaList.filter(item => {
-                            if (item.multiple) {
-                                return true;
-                            }
-                            return item.value !== curValue;
-                        });
-
-                        this._state.criteriaList = updatedList;
-
-                        formPill.addEventListener('pill_removed', (e) => {
-                            let removedValue = e.detail.state.sValue1;
-                            // Find the index of the item in _initialState
-                            const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
-
-
-                            // Check if the item is already in criteriaList
-                            if (!this._state.criteriaList.some(item => item.value === removedValue)) {
-                                // Find the item in configData.filterCriteria.items
-                                const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
-                                if (itemToAdd) {
-                                    // Insert the item at the same position as in _initialState
-                                    if (initialIndex !== -1) {
-                                        this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
-                                    } else {
-                                        // If the item is not found in _initialState, default to adding at the end
-                                        this._state.criteriaList.push(itemToAdd);
-                                    }
-                                }
-                            }
+        return { 'dPopoverBody': dPopoverBody, 'dBody': dBody, 'dPopover': dPopover }
+    }
 
+    addUpdatePill(dFormPill = null) {
+        return function (e) {
 
+            let dPopoverBody = e.target.closest('.popover-body')
+            let bVlaidateFields = this.validateRegion(dPopoverBody);
+            
+            if (bVlaidateFields) {
+                let dCriteria = dPopoverBody.querySelector('cui-listbox');
+                
+                //Find Lable in the lIstbox item else null
+                let sCriteriaLabel = (dCriteria.item.find(item => item.value === dCriteria.value) || {}).label
+                let sCriteriaValue = dCriteria.value;
 
+                let dFields = dPopoverBody.querySelector('.body-content').children;
 
+                let sCriteriaValueLabel = "";
 
+                let oFields = {};
 
+                for (const field of dFields) {
 
-                            const myEvent = new CustomEvent("pill-removed", {
-                                detail: { pill: e.detail }
-                            });
+                    let sPreferredKey = this.retrievePreferredKey(field)
 
-                            let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+                    if (sPreferredKey) {
+                        if (field.hasAttribute('pillValue')) {
+                            if (sCriteriaValueLabel) sCriteriaValueLabel += ", "
 
-                            //if(index > 0){
-                            this._state.adPills.splice(index, 1);
+                            //check if listbox
+                            if (field.item && field.item.length) {
 
-                            //}else if(index === 0){
-                            //this._state.adPills = [];
-                            //}
+                                let aValues = field.value.split(',').map(v => v.trim());
 
-                            this.dispatchEvent(myEvent);
-                        });
-                    }
+                                let sLabel = aValues.map(sVal => {
+                                    let oItem = field.item.find(oItem => oItem.value === sVal);
+                                    return (oItem && oItem.label) || sVal;
+                                });
 
-                    if (sFor === 'update') {
-                        const myEvent = new CustomEvent("pill-updated", {
-                            detail: { pill: formPill }
-                        });
-                        this.dispatchEvent(myEvent);
+                                sCriteriaValueLabel += sLabel;
+                            } else {
+                                sCriteriaValueLabel += field.value;
+                            }
+                        }
+                        oFields[sPreferredKey] = field.value;
                     }
 
-                } else if (this.dValueField !== null) {
+                }
 
-                    let curValue = this.criteria.value;
-                    formPill.setAttribute('value1', curValue)
-                    let pillText;
-                    if (this.dValueField.value.indexOf(',') == -1) {
-                        formPill.setAttribute('value2', this.dValueField.value)
-                        pillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${this.dValueField._state.aItems.find(item => item.value === this.dValueField.value)?.label}`
+                if (dFormPill) {
+                    this.#updatePill(dFormPill, { "label": sCriteriaLabel, "value": sCriteriaValue, "valueLabel": sCriteriaValueLabel, "fields": oFields });
+                } else {
+                    this.#createAndAppendPill({ "label": sCriteriaLabel, "value": sCriteriaValue, "valueLabel": sCriteriaValueLabel, "fields": oFields });
 
-                    }
-                    else {
-                        let aValues = this.dValueField.value.split(',');
-                        formPill.setAttribute('value2', aValues)
+                }
 
-                        // Loop through each value in the array
-                        const labels = aValues.map(val => {
-                            // Find the corresponding label for each value
-                            const item = this.dValueField._state.aItems.find(item => item.value === val);
-                            return item?.label;
-                        });
+                this.hidePopover();
 
-                        // Join the labels with a comma
-                        pillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}: ${labels.join(', ')}`;
+                this._state.sCriteriaList.add(dCriteria.value)
+            }
 
-                    }
+        }.bind(this)
+    }
 
-                    if (sFor === 'update') {
-                        formPill.setState({
-                            'value1': this.criteria.value, 'value2': this.dValueField.value,
-                            'text': pillText
-                        });
-                    }
+    #createAndAppendPill(oState, isOnRender = false) {
 
-                    formPill.setAttribute('text', pillText.slice(0, 30) + (pillText.length > 30 ? "..." : ""))
+        let dPill = document.createElement('cui-formpill-pill');
 
-                    if (sFor === 'add') {
-                        let updatedList = this._state.criteriaList.filter(item => {
-                            if (item.multiple) {
-                                return true;
-                            }
-                            return item.value !== curValue;
-                        });
-
-                        this._state.criteriaList = updatedList;
-
-                        formPill.addEventListener('pill_removed', (e) => {
-                            let removedValue = e.detail.state.sValue1;
-                            // Find the index of the item in _initialState
-                            const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
-
-
-                            // Check if the item is already in criteriaList
-                            if (!this._state.criteriaList.some(item => item.value === removedValue)) {
-                                // Find the item in configData.filterCriteria.items
-                                const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
-                                if (itemToAdd) {
-                                    // Insert the item at the same position as in _initialState
-                                    if (initialIndex !== -1) {
-                                        this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
-                                    } else {
-                                        // If the item is not found in _initialState, default to adding at the end
-                                        this._state.criteriaList.push(itemToAdd);
-                                    }
-                                }
-                            }
-
-
-                            const myEvent = new CustomEvent("pill-removed", {
-                                detail: { pill: e.detail }
-                            });
+        if (this._state.iCharLimit) {
+            oState.charLimit = this._state.iCharLimit;
+        }
 
-                            let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+        dPill.setState(oState);
 
-                            //if(index > 0){
-                            this._state.adPills.splice(index, 1);
+        this.querySelector('.pill-container').append(dPill)
 
-                            //}else if(index === 0){
-                            //    this._state.adPills = [];
-                            //}
-                            this.dispatchEvent(myEvent);
-                        });
+        oState.dPill = dPill;
 
+        if (!isOnRender) {
+            if (!this._state.aoPills) {
+                this._state.aoPills = [{ ...oState }]
+            } else {
+                this._state.aoPills.push({ ...oState })
+            }
+        }
 
-                    }
+        this.#addClickEvtForPill(dPill);
+        this.#addRemoveEvt(dPill);
 
-                    if (sFor === 'update') {
-                        const myEvent = new CustomEvent("pill-updated", {
-                            detail: { pill: formPill }
-                        });
-                        this.dispatchEvent(myEvent);
-                    }
-                } else if (this.adFields.length > 0) {
+        return dPill;
+    }
 
-                    let curValue = this.criteria.value;
-                    let values = [];
-                    for (let curField of this.adFields) {
-                        values.push(curField.value)
-                    }
+    #updatePill(dPill, oState) {
 
-                    formPill.setAttribute('value1', this.criteria.value)
-                    formPill.setAttribute('values', values)
+        if (this._state.iCharLimit) {
+            oState.charLimit = this._state.iCharLimit;
+        }
 
-                    let sPillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${values}`
+        dPill.setState(oState);
 
-                    if (sFor === 'update') {
-                        formPill.setState({
-                            'value1': this.criteria.value, 'values': values.join(","),
-                            'text': `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${values.join(",")}`
-                        });
-                    }
-                    formPill.setAttribute('text', sPillText.slice(0, 30) + (sPillText.length > 30 ? "..." : ""))
+        for (let pill of this._state.aoPills) {
+            if (dPill === pill.dPill) {
+                oState.dPill = dPill;
+                pill = { ...oState };
+                console.log(pill);
 
-                    if (sFor === 'add') {
-                        let updatedList = this._state.criteriaList.filter(item => {
-                            if (item.multiple) {
-                                return true;
-                            }
-                            return item.value !== curValue;
-                        });
-
-                        this._state.criteriaList = updatedList;
-
-                        formPill.addEventListener('pill_removed', (e) => {
-                            let removedValue = e.detail.state.sValue1;
-                            // Find the index of the item in _initialState
-                            const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
-
-                            // Check if the item is already in criteriaList
-                            if (!this._state.criteriaList.some(item => item.value === removedValue)) {
-                                // Find the item in configData.filterCriteria.items
-                                const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
-                                if (itemToAdd) {
-                                    // Insert the item at the same position as in _initialState
-                                    if (initialIndex !== -1) {
-                                        this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
-                                    } else {
-                                        // If the item is not found in _initialState, default to adding at the end
-                                        this._state.criteriaList.push(itemToAdd);
-                                    }
-                                }
-                            }
+            }
+        }
 
+        this.#addClickEvtForPill(dPill);
 
-                            const myEvent = new CustomEvent("pill-removed", {
-                                detail: { pill: e.detail }
-                            });
-                            let index = this._state.adPills.findIndex(item => item._state == e.detail.state);
+        return dPill;
+    }
 
-                            //if(index > 0){
-                            this._state.adPills.splice(index, 1);
+    #addClickEvtForPill(dPill) {
+        dPill.querySelector('.pill-title').addEventListener('click', () => {
+            this.menuTriggerOnClick(dPill);
+        });
+    }
 
-                            //}else if(index === 0){
-                            //this._state.adPills = [];
-                            //}
+    #addRemoveEvt(dPill) {
+        // pill_removed
+        dPill.addEventListener('pill_removed', (e) => {
+            //Updated criteria list and reemit the event
 
-                            this.dispatchEvent(myEvent);
-                        });
-                    }
+            if (this._state.sCriteriaList.has(e.detail.state.sValue)) {
+                this._state.sCriteriaList.delete(e.detail.state.sValue);
 
-                    if (sFor === 'update') {
-                        const myEvent = new CustomEvent("pill-updated", {
-                            detail: { pill: formPill }
-                        });
-                        this.dispatchEvent(myEvent);
+                for (let i = 0; i < this._state.aoPills.length; i++) {
+                    let pill = this._state.aoPills[i];
+                    if (pill.dPill === dPill) {
+                        this._state.aoPills.splice(i, 1);
+                        break; // Exit the loop after deleting
                     }
                 }
-
-
-                this.querySelector('.pill-container').append(formPill);
-
-                if (sFor === 'add') {
-                    const customEvent = new CustomEvent('pill-created', { detail: { pill: formPill } });
-                    this.dispatchEvent(customEvent);
-
-                }
-
-
-                formPill.querySelector('.pill-title').addEventListener('click', (e) => {
-                    this.menuTriggerOnClick(formPill);
-                });
-
-                this.hidePopover();
             }
-        })
 
+        })
     }
 
-    addPillfromJSON() {
-        if (this._state?.configData?.filterCriteria?.loadedPills) {
-            for (let pill of this._state.configData.filterCriteria?.loadedPills) {
-                let formPill;
-                formPill = document.createElement('cui-formpill-pill');
-                this._state.adPills.push(formPill);
+    convertOptionsToChildElemsDOM(aOptions, dPill = null) {
 
-                for (const [k, v] of Object.entries(pill)) {
-                    formPill.setAttribute(k, v);
-                }
-                // 'text': `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${this.dValueField.value}`
-                let pillText;
-
-                if (pill.value2 != null && pill.value3 != null) {
-                    pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}:  ${pill.value3}`
-                } else if (pill.values != null) {
-                    const foundItem = this._state.configData.filterCriteria.items.find(item => item.value === pill.value1);
-                    if (foundItem) {
-                        const labelsArray = [];
-
-                        // Loop through each value in pill.values
-                        for (const val of pill.values) {
-                            const option = foundItem.controls.value.options.find(opt => opt.value === val);
-                            if (option) {
-                                labelsArray.push(option.label);
-                            } else {
-                                // If label not found, use the original value
-                                labelsArray.push(val);
-                            }
-                        }
-
-                        // Join the labels with commas
-                        const labelsString = labelsArray.join(', ');
+        let dContainer = document.createElement('div');
+        for (let options of aOptions) {
+            if (this._state.isMultiple || dPill?.state?.sValue === options.value || !this._state.sCriteriaList.has(options.value)) {
+                let item = document.createElement('cui-item')
+                item.setAttribute('label', options.label)
+                item.setAttribute('value', options.value)
+                dContainer.appendChild(item)
+            }
+        }
+        return dContainer;
+    }
 
-                        // Assign the label string to pillText
-                        pillText = `${foundItem.label}: ${labelsString}`;
-                    }
-                } else if (pill.value2 != null) {
-                    const foundItem = this._state.configData.filterCriteria.items.find(item => item.value === pill.value1);
-                    if (foundItem) {
-                        // Split value2 by commas and trim whitespace
-                        const values = pill.value2.split(',').map(v => v.trim());
-                        const labelsArray = [];
-
-                        // Loop through each value and find its label in options
-                        for (const val of values) {
-                            const option = foundItem.controls.value.options.find(opt => opt.value === val);
-                            if (option) {
-                                labelsArray.push(option.label);
-                            } else {
-                                // If label not found, use the original value
-                                labelsArray.push(val);
-                            }
-                        }
+    convertJsonToDom(controls) {
+        let dElement;
 
-                        // Join the found labels with commas
-                        const labelsString = labelsArray.join(', ');
+        if (controls?.renderAs) {
+            dElement = document.createElement(controls.renderAs);
 
-                        // Assign the label string to pillText
-                        pillText = `${foundItem.label}: ${labelsString}`;
+            if (controls?.attributes) {
+                for (let key in controls.attributes) {
+                    if (controls.attributes.hasOwnProperty(key)) {
+                        // Convert boolean to string if necessary
+                        let value = controls.attributes[key];
+                        let stringValue = (typeof value === 'boolean') ? value.toString() : value;
+                        // Set the attribute on the element
+                        dElement.setAttribute(key, stringValue);
                     }
                 }
+            }
 
-                formPill.setAttribute('text', pillText.slice(0, 30) + (pillText.length > 30 ? "..." : ""))
-                let items = [];
-                if (this._state.criteriaList === null) {
-                    for (let item of this._state.configData.filterCriteria.items) {
-                        let lbValue = { 'label': item.label, 'value': item.value };
-                        if (item.multiple) {
-                            lbValue.multiple = item.multiple
-                        }
-                        items.push(lbValue);
-                    }
-                    this._state.criteriaList = items;
-                } else {
-                    for (let item of this._state.criteriaList) {
-                        items.push(item);
-                    }
+            if (controls?.children?.length) {
+                let dChild
+                for (const child of controls.children) {
+                    dChild = this.convertJsonToDom(child)
+                    dElement.append(dChild)
                 }
-                let updatedList = this._state.criteriaList.filter(item => {
-                    if (item.multiple) {
-                        return true;
-                    }
-                    return item.value !== pill.value1;
-                });
-
-                this._state.criteriaList = updatedList;
+            }
 
+            if (controls?.relayEvents?.length) {
+                this.relayEvents(controls.relayEvents, dElement);
             }
         }
+
+        return dElement;
+    }
+
+    assignValueToFieldInPopover(oFields, dPopover) {
+        this.setExistingFieldValues(oFields, { 'dBody': dPopover.querySelector('.body-content') })
     }
 
     validateRegion(dRegion) {
@@ -1424,6 +860,31 @@ class CUI_FORMPILL extends HTMLElement {
         }
     }
 
+    relayEvents(asEvents, dElement) {
+        for (let event of asEvents) {
+
+            dElement.addEventListener(event, (e) => {
+
+                if (e.target != this) {
+
+                    e.stopImmediatePropagation();
+
+                    let eventDetail = e.detail;
+                    eventDetail.originalTarget = e.target;
+                    eventDetail.target = this;
+                    const E_CONTROL_EVENT = new CustomEvent(event, {
+                        bubbles: true,
+                        composed: true,
+                        detail: eventDetail
+                    });
+
+                    this.dispatchEvent(E_CONTROL_EVENT);
+                }
+
+            }, false);
+        }
+    }
+
     _removeScreenValidationMessage() {
         let messageText = "Please correct the highlighted errors shown below before continuing.";
         if (this.messages) {
@@ -1431,10 +892,6 @@ class CUI_FORMPILL extends HTMLElement {
         }
     }
 
-    /**
-     * 
-     * @param {*} event 
-     */
     windowResize(event) {
 
         if (this._state.bMenuDisplayed == true) {
@@ -1443,10 +900,6 @@ class CUI_FORMPILL extends HTMLElement {
 
     }
 
-    /**
-     * 
-     * @returns 
-     */
     hidePopover() {
         if (this._state.bMenuDisplayed == false) {
             return;