@nys-cui/cui-formpill 0.1.0

package/README.md

@@ -0,0 +1,93 @@
+# cui-formpill
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://nyssc.svc.ny.gov/DTF/ui/cui2-components/cui-formpill.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](https://nyssc.svc.ny.gov/DTF/ui/cui2-components/cui-formpill/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

package/cui.jsonc

@@ -0,0 +1,6 @@
+{
+    "name": "CUI2 FORMPILL",
+    "mode": "component",
+    "src": "src",
+    "entry": "cui-formpill.js"
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "@nys-cui/cui-formpill",
+    "description": "A Formpill/Filtering component for use in Core UI 2",
+    "author": {
+        "name": "New York State Department of Tax and Finance"
+    },
+    "main": "./dist/js/cui-formpill.js",
+    "type": "module",
+    "version": "0.1.0",
+    "scripts": {
+        "clean": "rm -rf ./dist",
+        "build": "npm run clean && cui --dep",
+        "postinstall": "node -e \"console.log('Post-Installing cui-help: %s', Date())\" && npm run build"
+    },
+    "dependencies": {
+        "@nys-cui/cui-popover": "^0.1.0"
+    }
+}

package/src/cui-formpill-popover.js

@@ -0,0 +1,15 @@
+import CUI_POPOVER from '@nys-cui/cui-popover';
+
+export default class CUI_ADDFILTER_POPOVER extends CUI_POPOVER {
+
+    constructor() {
+        super();
+    }
+
+    
+
+    connectedCallback() {
+        super.connectedCallback();
+    }
+
+}

package/src/cui-formpill.js

@@ -0,0 +1,1080 @@
+import POPOVER_FORMPILL from './cui-formpill-popover.js';
+
+class CUI_FORMPILL_PILL extends HTMLElement {
+
+    constructor() {
+        super();
+
+        this.attachShadow({ mode: 'open' });
+
+        this._state = {};
+
+        this.oPropsToStateNames = {
+            "text": "sText",
+            "value1": "sValue1",
+            "value2": "sValue2",
+            "value3": "sValue3",
+            "values": "asValues"
+        }
+
+        this._state.sPosition = 'bottom-center'
+
+    }
+
+    get state() {
+
+        return this._state;
+    }
+
+
+    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 {
+            return {
+                'fieldName': this._state.sValue1,
+                'value': this._state.sValue2
+            }
+        }
+    }
+
+    setState(props) {
+        // Need to map props to state variable names if we want to keep them prefixed. 
+        this._state = Object.assign(this._state, this.normalizeProps(props));
+
+        this.render();
+    }
+
+    clearSlottedElements(slotName) {
+        let aSlottedElements = this.querySelectorAll("[slot = " + slotName + "]");
+        if (aSlottedElements && aSlottedElements.length > 0) {
+            for (let i = 0; i < aSlottedElements.length; i++) {
+                let dElement = aSlottedElements[i];
+                this.removeChild(dElement);
+            }
+        }
+    }
+
+    normalizeProps(props) {
+        let updatedProps = {};
+
+        for (const [key, value] of Object.entries(props)) {
+            if (this.oPropsToStateNames[key]) {
+                updatedProps[this.oPropsToStateNames[key]] = value;
+            }
+        }
+
+        return updatedProps;
+    }
+
+    get template() {
+
+        let sTemplate = `<slot name="filter"></slot> `;
+
+        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._initialState = this._state;
+        this.render();
+    }
+
+
+    reset() {
+        this._state = this._initialState;
+
+        this.render();
+    }
+
+    render() {
+
+        this.clearSlottedElements('filter');
+
+        this.shadowRoot.innerHTML = `${this.template}`;
+
+        this.part = 'cui-formpill';
+
+        let filter = document.createElement('div');
+        filter.part = 'filter';
+        filter.slot = 'filter';
+
+        let removeButton = document.createElement('button');
+        removeButton.textContent = '×'
+        removeButton.classList.add('pill-remove');
+        removeButton.part = 'pill-remove';
+
+        const formPill = document.createElement("div");
+        formPill.classList.add("form-pill")
+        formPill.part = "form-pill";
+        filter.appendChild(formPill);
+
+        this.append(filter);
+
+        const title = document.createElement('div');
+        title.classList.add('pill-title');
+        title.innerText = this._state.sText;
+
+        formPill.appendChild(title);
+
+        formPill.appendChild(removeButton);
+
+        const myEvent = new CustomEvent("pill_removed", {
+            detail: { 'state': this._state },
+            bubbles: true,
+            cancelable: true,
+            composed: false,
+        });
+
+        removeButton.addEventListener('click', (e) => {
+            this.remove();
+
+            this.dispatchEvent(myEvent)
+        })
+
+    }
+
+
+}
+
+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._state.bMenuDisplayed = false;
+
+        this._state.aMenuContents = [];
+
+        this._state.sHtmlContent = null;
+
+        this.dLabelContents;
+
+        this._state.configData = null;
+
+        this._state.adPills = [];
+
+        this._state.criteriaList = null;
+
+        this.oPropsToStateNames = {
+            "text": "sTextContent",
+            "label": "sLabelContent",
+            "contents": "aMenuContents",
+            "componentKey": "sComponentKey",
+            "position": "sPosition",
+            "iconbase": "sIconBasePath",
+            "accessibleHideLabel": "bAccessibleHideLabel",
+            "html": "sHtmlContent",
+            "config": "configData",
+            "addTitle": "sAddTitle",
+            "updateTitle": "sUpdateTitle"
+
+        }
+
+        this.cValidator = new VALIDATOR();
+    }
+
+    get sFieldLayout() {
+        return ` 
+        <div class="cui-field" part="outer-wrapper">          
+        <div class="cui-label " part="label-wrapper">
+            <slot name="labelContents"></slot>                
+        </div>
+        <slot name="pill-container"></slot>
+        <slot name="menu-trigger"></slot>
+        </div>`;
+    }
+
+    setState(props) {
+        // Need to map props to state variable names if we want to keep them prefixed. 
+        this._state = Object.assign(this._state, this.normalizeProps(props));
+
+        if (this._connected) {
+            this.render();
+        }
+    }
+
+    get label() {
+
+        if (this.dLabelContents) {
+
+            return this.dLabelContents.textContent;
+
+        }
+
+        return null;
+    }
+
+    get value() {
+
+        let values = [];
+
+        for (let pill of this.querySelectorAll('cui-formpill-pill')) {
+            values.push(pill.contents);
+        }
+
+        return values;
+    }
+
+    normalizeProps(props) {
+        let updatedProps = {};
+
+        for (const [key, value] of Object.entries(props)) {
+            if (this.oPropsToStateNames[key]) {
+                updatedProps[this.oPropsToStateNames[key]] = value;
+            }
+        }
+
+        return updatedProps;
+    }
+
+    connectedCallback() {
+        // Call above setting connected to avoid second render. 
+        this._connected = true;
+
+        //Set initial menu object based on children.
+
+        var match = window.matchMedia || window.msMatchMedia;
+
+        if (match) {
+            var mq = match("(pointer:coarse)");
+            this.bMobile = mq.matches;
+        }
+
+        //Set initial menu object based on children.
+        this._state.sTextContent = (this.getAttribute('text')) ? this.getAttribute('text') : null;
+        this._state.sLabel = (this.getAttribute('label')) ? this.getAttribute('label') : "";
+        this._state.sAddTitle = (this.getAttribute('addTitle')) ? this.getAttribute('addTitle') : "Add";
+        this._state.sUpdateTitle = (this.getAttribute('updateTitle')) ? this.getAttribute('updateTitle') : "Update";
+        this._state.sIconBasePath = (this.getAttribute('iconbase')) ? this.getAttribute('iconbase') : null;
+        this._state.sComponentKey = (this.getAttribute('componentKey')) ? this.getAttribute('componentKey') : "";
+        this._state.bAccessibleHideLabel = this.hasAttribute('accessiblehidelabel') ? true : false;
+        this._state.sPosition = (this.getAttribute('position')) ? this.getAttribute('position') : "bottom-center";
+
+        //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 = { ...this._state };
+        }
+
+        this._state.fGlobalBodyClick = this.globalBodyClick.bind(this);
+
+        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() {
+        this.clearShadowDom(this.shadowRoot);
+        this.clearSlottedElements("menu-trigger");
+        this.clearSlottedElements("labelContents");
+        this.clearSlottedElements("pill-container");
+
+        this.shadowRoot.innerHTML = `${this.sFieldLayout} `;
+
+        let adSlots = this.shadowRoot.querySelectorAll('slot');
+
+        if (adSlots.length) {
+
+            for (let dSlot of adSlots) {
+                let dNode = dSlot.assignedNodes()[0];
+
+                if (dNode) {
+                    let sSlotName = dNode.getAttribute("slot");
+
+                    if (sSlotName && sSlotName.toLowerCase() === "labelcontents") {
+                        this.dLabelContents = dNode;
+                    }
+
+                }
+
+            }
+
+        }
+
+        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"
+        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])
+            }
+        }
+
+        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._state.dTriggerElem = dTriggerElem;
+        this.appendChild(label)
+        this.appendChild(pillDiv)
+        this.appendChild(this._state.dTriggerElem);
+
+        window.addEventListener('resize', (e) => {
+            this.windowResize(e);
+            window.removeEventListener('resize', this.windowResize())
+        });
+
+
+    }
+
+    menuTriggerOnClick(formpill = null) {
+        if (this._state.bMenuDisplayed) {
+            this.hidePopover();
+        } else if (formpill !== null) {
+            this.displayPillPopover(formpill);
+        }
+        else {
+            this.displayPopover(); 1
+        }
+    }
+
+    globalBodyClick(evt) {
+        if (this._state.dMenuPopover && !this._state.dMenuPopover.contains(evt.target)) {
+            this.hidePopover();
+        }
+    }
+
+    async createPopover(dTriggerElem, isPillPopover = false) {
+        if (this._state.bMenuDisplayed == true) {
+            return;
+        }
+
+        this._state.bMenuDisplayed = true;
+
+        let dMenuPopover = document.createElement('cui-formpill-popover');
+        if (!this.bMobile) {
+            dMenuPopover.classList.add("button-menu");
+        }
+
+        dMenuPopover.zIndex = 900;
+        dMenuPopover.for = dTriggerElem;
+        dMenuPopover.appendLocation = document.body;
+        dMenuPopover.includeArrow = true;
+
+        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');
+
+        } else {
+            dPopoverContent = document.createElement('div');
+            dPopoverContent.classList.add('popover-contents');
+        }
+
+        dPopoverContent.slot = "popover-contents";
+        dPopoverContent.classList.add('popover-contents');
+        let dPopoverBody = document.createElement('div');
+        dPopoverBody.classList.add("popover-body");
+
+        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");
+
+        if (isPillPopover === true) {
+            dPopoverTitle.textContent = this._state.sUpdateTitle;
+            dPopoverFooter.innerHTML = this.pillFooter
+        } else {
+            dPopoverTitle.textContent = this._state.sAddTitle;
+            dPopoverFooter.innerHTML = this.footer
+        }
+
+        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._state.dTriggerElem);
+        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');
+                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
+                        }
+                        items.push(lbValue);
+                    }
+                    this._state.criteriaList = items;
+                } else {
+                    for (let item of this._state.criteriaList) {
+                        items.push(item);
+                    }
+                }
+                
+                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)
+
+            }
+            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._state.fGlobalBodyClick, false);
+        });
+
+
+    }
+
+    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);
+                }
+
+                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)
+
+                this.handleCriteriaChange(dPopoverBody, dPopoverFooter, pill, true)
+
+            }
+        }
+        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._state.fGlobalBodyClick, false);
+        });
+
+
+    }
+
+    handleCriteriaChange(dPopoverBody, dPopoverFooter, pill = null, isPill = false) {
+        let selectedValue;
+
+        if (pill && isPill) {
+            selectedValue = pill._state.sValue1;
+            let selectedItem = this._state.configData.filterCriteria.items.find(item => item.value === selectedValue);
+
+            let controls = selectedItem.controls;
+            if (controls.options && controls.value) {
+
+                this.method = document.createElement('cui-listbox');
+                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);
+
+                if (controls.value.control === 'text') {
+                    this.dValueField = document.createElement('cui-text');
+                }
+                if (controls.value.control === 'date') {
+                    this.dValueField = document.createElement('cui-date');
+                }
+
+                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);
+
+            } 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 (pill._state.sValue2.indexOf(',') == -1) {
+                    this.dValueField.setAttribute('value', pill._state.sValue2)
+                }
+                else {
+                    this.dValueField.setAttribute('multiple', '');
+                    let aValues = pill._state.sValue2.split(',');
+                    this.dValueField.setAttribute('value', aValues)
+                }
+
+                this.dValueField.setAttribute('required', '');
+                this.dValueField.setAttribute('componentKey', 'contextHeaderValue');
+                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');
+                    }
+
+                    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);
+
+                }
+                let pillValues = pill._state.asValues.split(',');
+                for (let i = 0; i < pillValues.length; i++) {
+                    this.adFields[i].setAttribute('value', pillValues[i])
+
+                }
+            }
+        } else {
+
+
+            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');
+                        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);
+                        }
+
+                    } 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)
+                        }
+                        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');
+                            }
+
+                            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.");
+                }
+            })
+        }
+
+    }
+
+    handleAddUpdate(dButton, dPopoverBody, sFor, pill = null) {
+        dButton.addEventListener('click', (e) => {
+            let validatedFields = this.validateRegion(dPopoverBody);
+
+            if (validatedFields) {
+                let formPill;
+                if (sFor === 'add') {
+                    formPill = document.createElement('cui-formpill-pill');
+                    this._state.adPills.push(formPill);
+                } else {
+                    formPill = pill;
+                }
+
+                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;
+                            if (!this._state.criteriaList.some(item => item.value === removedValue)) {
+                                this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
+                            }
+
+                            const myEvent = new CustomEvent("pill-removed", {
+                                detail: { pill: e.detail }
+                            });
+                            this.dispatchEvent(myEvent);
+                        });
+                    }
+
+                    if (sFor === 'update') {
+                        const myEvent = new CustomEvent("pill-updated", {
+                            detail: { pill: formPill }
+                        });
+                        this.dispatchEvent(myEvent);
+                    }
+
+                } 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}`
+
+                    }
+                    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;
+                        });
+
+                        // Join the labels with a comma
+                        pillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}: ${labels.join(', ')}`;
+
+                    }
+
+                    if (sFor === 'update') {
+                        formPill.setState({
+                            'value1': this.criteria.value, 'value2': this.dValueField.value,
+                            'text': pillText
+                        });
+                    }
+
+                    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;
+                            if (!this._state.criteriaList.some(item => item.value === removedValue)) {
+                                this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
+                            }
+
+
+                            const myEvent = new CustomEvent("pill-removed", {
+                                detail: { pill: e.detail }
+                            });
+                            this.dispatchEvent(myEvent);
+                        });
+
+
+                    }
+
+                    if (sFor === 'update') {
+                        const myEvent = new CustomEvent("pill-updated", {
+                            detail: { pill: formPill }
+                        });
+                        this.dispatchEvent(myEvent);
+                    }
+                } else if (this.adFields.length > 0) {
+
+                    let curValue = this.criteria.value;
+                    let values = [];
+                    for (let curField of this.adFields) {
+                        values.push(curField.value)
+                    }
+
+                    formPill.setAttribute('value1', this.criteria.value)
+                    formPill.setAttribute('values', values)
+
+                    let sPillText = `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}:  ${values}`
+
+                    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 ? "..." : ""))
+
+                    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;
+                            if (!this._state.criteriaList.some(item => item.value === removedValue)) {
+                                this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
+                            }
+
+
+                            const myEvent = new CustomEvent("pill-removed", {
+                                detail: { pill: e.detail }
+                            });
+                            this.dispatchEvent(myEvent);
+                        });
+                    }
+
+                    if (sFor === 'update') {
+                        const myEvent = new CustomEvent("pill-updated", {
+                            detail: { pill: formPill }
+                        });
+                        this.dispatchEvent(myEvent);
+                    }
+                }
+
+
+                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();
+            }
+        })
+
+    }
+
+    validateRegion(dRegion) {
+        let validationResult = this.cValidator.validateRegion(dRegion);
+
+
+        if (validationResult == true) {
+            this._removeScreenValidationMessage();
+            return true;
+        }
+        else {
+            this._setScreenValidationMessage();
+            return false;
+        }
+    }
+
+    _setScreenValidationMessage() {
+        let messageText = "Please correct the highlighted errors shown below before continuing.";
+        if (this.messages) {
+            this.messages.add({ "text": messageText, "type": "error" });
+        }
+    }
+
+    _removeScreenValidationMessage() {
+        let messageText = "Please correct the highlighted errors shown below before continuing.";
+        if (this.messages) {
+            this.messages.remove({ "text": messageText });
+        }
+    }
+
+    /**
+     * 
+     * @param {*} event 
+     */
+    windowResize(event) {
+
+        if (this._state.bMenuDisplayed == true) {
+            this.hidePopover();
+        }
+
+    }
+
+    /**
+     * 
+     * @returns 
+     */
+    hidePopover() {
+        if (this._state.bMenuDisplayed == false) {
+            return;
+        }
+
+        if (this._state.dMenuPopover) {
+            this._state.dMenuPopover.state.bOpen = false;
+            this._state.dMenuPopover.parentNode.removeChild(this._state.dMenuPopover)
+            this._state.dMenuPopover = null;
+        }
+
+        document.body.removeEventListener('click', this._state.fGlobalBodyClick);
+
+        this._state.bMenuDisplayed = false;
+    }
+
+    disconnectedCallback() {
+        this.hidePopover();
+        // closeBtn.removeEventListener('click', (e));
+        document.body.removeEventListener('click', this._state.fGlobalBodyClick);
+    }
+
+    // Utility function function to clear all elements from shadow root. 
+    clearShadowDom(dShadowRoot) {
+        while (dShadowRoot.lastChild) {
+            dShadowRoot.removeChild(dShadowRoot.lastChild);
+        }
+    }
+
+    clearSlottedElements(slotName) {
+        let aSlottedElements = this.querySelectorAll("[slot = " + slotName + "]");
+        if (aSlottedElements && aSlottedElements.length > 0) {
+            for (let i = 0; i < aSlottedElements.length; i++) {
+                let dElement = aSlottedElements[i];
+                this.removeChild(dElement);
+            }
+        }
+    }
+}
+
+export { CUI_FORMPILL, POPOVER_FORMPILL }