@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/js/components/collapsible-side/collapsible-side.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/26fdbf0179.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\" part=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n          \n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\" part=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        if (this.shadowRoot) {\n            this.shadowRoot.appendChild(template.content.cloneNode(true));\n        }\n    }\n    connectedCallback() {\n        if (!this.shadowRoot)\n            return;\n        const container = this.shadowRoot.querySelector('.container');\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        if (!sideMenu || !sideMenuContent || !mainContent || !button)\n            return;\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css')) {\n            const styles = this.shadowRoot.querySelector('.styles');\n            if (styles) {\n                styles.insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n            }\n        }\n        // Set side nav title\n        if (!this.hasAttribute('data-title')) {\n            this.setAttribute('data-title', 'configuration');\n        }\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');\n        if (titleElement) {\n            titleElement.classList.add('h4', 'main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', 'true');\n        }\n        if (this.hasAttribute('inline')) {\n            container.classList.add('inline');\n        }\n        if (this.hasAttribute('menu-right')) {\n            sideMenu.classList.add('menu-right');\n        }\n        // Open the menu\n        button.addEventListener('click', () => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', 'true');\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () {\n                    sideMenuContent.classList.add('closed');\n                }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () {\n                    sideMenu.classList.remove('pe-none');\n                }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', () => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () {\n                        sideMenuContent.classList.add('closed');\n                    }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n        const sideMenuParentGroups = this.querySelectorAll('.parent');\n        const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');\n        sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {\n            parentLink.addEventListener('click', () => {\n                if (!parentLink || !parentLink.parentElement)\n                    return false; // make sure elements exist\n                if (parentLink.parentElement.classList.contains('reveal')) {\n                    parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent\n                }\n                else {\n                    // remove other reveals and add reveal to this one\n                    sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {\n                        parentGroup.classList.remove('reveal');\n                    });\n                    parentLink.parentElement.classList.add('reveal');\n                }\n            });\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","template","container","sideMenu","sideMenuContent","mainContent","button","styles","titleElement","sideMenuParentGroups","sideMenuParentGroupsTopLinks","parentLink","parentGroup"],"mappings":"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"}
+{"version":3,"file":"collapsible-side.component.min.js","sources":["collapsible-side.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'collapsible side menu',\n});\nclass iamCollapsibleSideMenu extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/collapsible-side.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\n      <div class=\"container\" part=\"container\">\n\n        <div class=\"side-menu\" part=\"side-menu\">\n          <button class=\"btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse\" part=\"btn\">Open or close Collapsible menu</button>\n          \n          <div class=\"side-menu-content closed\" part=\"side-menu-content\">\n            <slot name=\"menu\"></slot>\n          </div>\n        </div>\n\n        <div class=\"main-content\" part=\"main-content\">\n          <slot></slot>\n        </div>\n\n      </div>\n    `;\n        if (this.shadowRoot) {\n            this.shadowRoot.appendChild(template.content.cloneNode(true));\n        }\n    }\n    connectedCallback() {\n        if (!this.shadowRoot)\n            return;\n        const container = this.shadowRoot.querySelector('.container');\n        const sideMenu = this.shadowRoot.querySelector('.side-menu');\n        const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');\n        const mainContent = this.shadowRoot.querySelector('.main-content');\n        const button = this.shadowRoot.querySelector('.side-menu > .btn');\n        if (!sideMenu || !sideMenuContent || !mainContent || !button)\n            return;\n        // Load external CSS if needed\n        if (this.hasAttribute('data-css')) {\n            const styles = this.shadowRoot.querySelector('.styles');\n            if (styles) {\n                styles.insertAdjacentHTML('beforeend', `@import \"${this.getAttribute('data-css')}\";`);\n            }\n        }\n        // Set side nav title\n        if (!this.hasAttribute('data-title')) {\n            this.setAttribute('data-title', 'configuration');\n        }\n        sideMenuContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        mainContent.insertAdjacentHTML('afterbegin', `<span class=\"h3\">${this.getAttribute('data-title')}</span>`);\n        const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)');\n        if (titleElement) {\n            titleElement.classList.add('h4', 'main-content__title');\n        }\n        if (this.hasAttribute('open') && window.innerWidth > 992) {\n            sideMenu.classList.add('open');\n            button.setAttribute('aria-expanded', 'true');\n        }\n        if (this.hasAttribute('inline')) {\n            container.classList.add('inline');\n        }\n        if (this.hasAttribute('menu-right')) {\n            sideMenu.classList.add('menu-right');\n        }\n        // Open the menu\n        button.addEventListener('click', () => {\n            if (!sideMenu.classList.contains('open')) {\n                sideMenuContent.classList.remove('closed');\n                setTimeout(function () {\n                    sideMenu.classList.add('open');\n                    button.setAttribute('aria-expanded', 'true');\n                }, 100);\n            }\n            else {\n                sideMenu.classList.remove('open');\n                button.removeAttribute('aria-expanded');\n                setTimeout(function () {\n                    sideMenuContent.classList.add('closed');\n                }, 1000); // Delay until its close so the animation is broken\n                // While the menu is closing dont allow the hover to re-open it until its fully closed.\n                sideMenu.classList.add('pe-none');\n                setTimeout(function () {\n                    sideMenu.classList.remove('pe-none');\n                }, 1000);\n            }\n        });\n        // Mimic hover event on desktop so that we can control when classes are set and which order\n        sideMenu.addEventListener('mouseenter', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n                sideMenu.classList.add('hover');\n            }\n        });\n        sideMenu.addEventListener('mousemove', () => {\n            if (window.innerWidth > 992) {\n                if (!sideMenu.classList.contains('open'))\n                    sideMenuContent.classList.remove('closed');\n            }\n        });\n        sideMenu.addEventListener('mouseleave', () => {\n            if (window.innerWidth > 992) {\n                sideMenu.classList.remove('hover');\n                if (!sideMenu.classList.contains('open'))\n                    setTimeout(function () {\n                        sideMenuContent.classList.add('closed');\n                    }, 1000); // Delay until its close so the animation is broken\n            }\n        });\n        const sideMenuParentGroups = this.querySelectorAll('.parent');\n        const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');\n        sideMenuParentGroupsTopLinks === null || sideMenuParentGroupsTopLinks === void 0 ? void 0 : sideMenuParentGroupsTopLinks.forEach((parentLink) => {\n            parentLink.addEventListener('click', () => {\n                if (!parentLink || !parentLink.parentElement)\n                    return false; // make sure elements exist\n                if (parentLink.parentElement.classList.contains('reveal')) {\n                    parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent\n                }\n                else {\n                    // remove other reveals and add reveal to this one\n                    sideMenuParentGroups === null || sideMenuParentGroups === void 0 ? void 0 : sideMenuParentGroups.forEach((parentGroup) => {\n                        parentGroup.classList.remove('reveal');\n                    });\n                    parentLink.parentElement.classList.add('reveal');\n                }\n            });\n        });\n    }\n}\nexport default iamCollapsibleSideMenu;\n"],"names":["iamCollapsibleSideMenu","template","container","sideMenu","sideMenuContent","mainContent","button","styles","titleElement","sideMenuParentGroups","sideMenuParentGroupsTopLinks","parentLink","parentGroup"],"mappings":"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"}

package/assets/js/components/config/config.component.js

@@ -0,0 +1,532 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
+import { trackComponentRegistered } from '../_global.js';
+trackComponentRegistered('iam-config');
+class iamConfig extends HTMLElement {
+    constructor() {
+        var _a, _b;
+        super();
+        this.getBucketsData = (data) => {
+            if (!data)
+                return [];
+            const buckets = [];
+            // TODO: check local storage first
+            data.forEach(bucket => {
+                var _a, _b;
+                if (typeof ((_a = bucket.attributes) === null || _a === void 0 ? void 0 : _a.criteria) == "object" && Array.isArray((_b = bucket.attributes) === null || _b === void 0 ? void 0 : _b.criteria)) {
+                    buckets.push(bucket);
+                }
+            });
+            return buckets;
+        };
+        this.createBuckets = (buckets) => {
+            console.log(buckets);
+            const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
+            if (!buckets)
+                return false;
+            buckets.forEach((bucket) => {
+                this.createBucket(bucket);
+            });
+            return true;
+        };
+        this.createBucket = (bucket) => {
+            const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
+            const bucketElement = document.createElement('div');
+            bucketElement.innerHTML = this.addBucketHTML(bucket);
+            //bucketElement.setAttribute('data-bucket',bucket.id);
+            bucketElement.classList.add('bucket__wrapper');
+            bucketsContainer === null || bucketsContainer === void 0 ? void 0 : bucketsContainer.insertAdjacentElement('beforeend', bucketElement);
+            //this.addButtonEvents(bucketElement,true);
+            this.createEditBucketsEvents(bucketElement);
+            const criteriaContainer = bucketElement.querySelector('.criteria--container');
+            if (bucket.attributes) {
+                bucket.attributes.criteria.forEach((criteria) => {
+                    var _a, _b, _c;
+                    const criteriaForm = document.createElement('form');
+                    criteriaForm.classList.add('criteria');
+                    criteriaForm.innerHTML = this.addCriteriaHTML(criteria.attributes);
+                    // TODO add to HTML
+                    (_a = criteriaForm.querySelector('[name="attribute"]')) === null || _a === void 0 ? void 0 : _a.value = criteria.attributes.attribute;
+                    (_b = criteriaForm.querySelector('[name="rule"]')) === null || _b === void 0 ? void 0 : _b.value = criteria.attributes.rule;
+                    (_c = criteriaForm.querySelector('[name="match"]')) === null || _c === void 0 ? void 0 : _c.value = criteria.attributes.match;
+                    criteriaContainer === null || criteriaContainer === void 0 ? void 0 : criteriaContainer.appendChild(criteriaForm);
+                    // TODO add buttons
+                    // TODO add events
+                });
+                this.createForms(bucket.attributes.items, bucket.id);
+            }
+            return bucketElement;
+        };
+        this.addCriteriaHTML = (attributes) => {
+            return /*HTML*/ `<label>
+      <span class="visually-hidden">Attribute</span>
+      ${this.createCriteriaDropdown(attributes.attribute)}
+    </label>
+    <label>
+      <span class="visually-hidden">Rule</span>
+      <select name="rule" class="mt-0 select--sm">
+        <option value="set">is not empty</option>
+        <option value="empty">is empty</option>
+        <option value="equals">equals</option>
+        <option value="not">is not</option>
+        <option value="greater">greater than</option>
+        <option value="less">less than</option>
+      </select>
+    </label>
+    <label>
+      <span class="visually-hidden">Match</span>
+      <input type="text" name="match" class="mt-0 input--sm" /> <!-- TODO Add datalist or transform into select -->
+    </label>
+    <div class="btn__group">
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-plus" type="button" data-direction="add" title="Delete">Add</button>
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
+    </div>`;
+        };
+        this.addBucketHTML = (bucket) => {
+            var _a, _b, _c;
+            return /*HTML*/ `<label>
+        <span class="visually-hidden">Name</span>
+        <input type="text" name="bucket" value="${(_b = (_a = bucket.attributes) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ''}"/>
+      </label>
+      <div class="btn__group text-end"><button class="btn btn-compact btn-sm mt-0 btn-secondary fa-pen-to-square" data-expand title="Expand to see more options">Edit</button>${this.buttonHTML}</div>
+      <div class="criteria--container">
+      </div>
+      <div data-bucket="${(_c = bucket.id) !== null && _c !== void 0 ? _c : ''}" class="bucket">
+      </div>`;
+        };
+        this.createCriteriaDropdown = (attribute) => {
+            const form = this.querySelector('form');
+            const formData = new FormData(form);
+            const formDataObj = Object.fromEntries(formData.entries());
+            let optionsHtml = '';
+            Object.keys(formDataObj).forEach(function (key) {
+                optionsHtml += `<option value="${key}" ${key == attribute ? ' selected="selected"' : ''}>${key}</option>`;
+            });
+            return `<select name="attributes[criteria]" class="mt-0 select--sm">
+      <option value=""></option>
+      ${optionsHtml}
+    </select>`;
+        };
+        this.createEditBucketsEvents = (bucket) => {
+            this.addButtonEvents(bucket, true);
+            const expandButton = bucket === null || bucket === void 0 ? void 0 : bucket.querySelector('[data-expand]');
+            expandButton === null || expandButton === void 0 ? void 0 : expandButton.addEventListener('click', () => {
+                bucket.classList.toggle('bucket--expanded');
+            });
+        };
+        this.createForms = (data, bucketId = "any") => {
+            data.forEach(item => {
+                var _a;
+                if (typeof ((_a = item.attributes) === null || _a === void 0 ? void 0 : _a.criteria) == "undefined") {
+                    const formElement = this.createForm(item, bucketId);
+                    Object.keys(item.attributes).forEach(function (key) {
+                        if (formElement.querySelector(`[name="${key}"]`)) {
+                            const element = formElement.querySelector(`[name="${key}"]`);
+                            if (element.matches('select[data-import]') && !element.querySelector(`option[value="${item.attributes[key]}"]`)) {
+                                const optionElement = document.createElement('option');
+                                optionElement.value = item.attributes[key];
+                                optionElement.innerHTML = item.attributes[key];
+                                element.appendChild(optionElement);
+                            }
+                            element.value = item.attributes[key];
+                        }
+                    });
+                }
+            });
+        };
+        this.checkCriteria = (attributes, bucket) => {
+            if (attributes[bucket])
+                return true;
+            return false;
+        };
+        this.checkBuckets = (attributes) => {
+            const anyContainer = this.shadowRoot.querySelector('#any'); // TODO: rename
+            let container = anyContainer;
+            if (!this.hasAttribute('data-buckets'))
+                return container;
+            let buckets = [];
+            let addedToBucket = false;
+            // If data attribute set
+            buckets = this.getAttribute('data-buckets').split(',');
+            // TODO: If importing the config from a json file
+            buckets.forEach((bucket) => {
+                const addToBucket = !addedToBucket ? this.checkCriteria(attributes, bucket) : false;
+                if (addToBucket) {
+                    addedToBucket = true;
+                    container = this.shadowRoot.querySelector(`[data-bucket="${bucket}"]`);
+                }
+            });
+            return container;
+        };
+        this.createForm = (item, bucketId = "any") => {
+            var _a;
+            const anyContainer = this.shadowRoot.querySelector(`#items [data-bucket="${bucketId}"]`); // TODO: rename
+            //const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
+            //const container = this.checkBuckets(item.attributes); TODO: re-enable
+            const container = anyContainer;
+            const formElement = (_a = this.querySelector(`form`)) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
+            //formTemplate.setAttribute('id', item.id);
+            // TODO check if it matches a bucket
+            container === null || container === void 0 ? void 0 : container.insertAdjacentElement('beforeend', formElement);
+            //const formElement = container?.querySelector(`[id="${item.id}"]`);
+            formElement === null || formElement === void 0 ? void 0 : formElement.addEventListener('submit', (event) => {
+                event.preventDefault();
+            });
+            this.addButtons(formElement);
+            return formElement;
+        };
+        this.getCurrentIds = () => {
+            var _a;
+            const idsArr = [];
+            Array.from((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('#items form')).forEach((form) => {
+                idsArr.push(parseInt(form.getAttribute('id')));
+            });
+            return idsArr;
+        };
+        this.generateId = () => {
+            return Math.max(...this.getCurrentIds()) + 1;
+        };
+        this.addButtonEvents = (element, scrollIntoView = true) => {
+            const upButton = element === null || element === void 0 ? void 0 : element.querySelector('[data-direction="up"]');
+            const downButton = element === null || element === void 0 ? void 0 : element.querySelector('[data-direction="down"]');
+            const deleteButton = element === null || element === void 0 ? void 0 : element.querySelector('[data-direction="delete"]');
+            upButton === null || upButton === void 0 ? void 0 : upButton.addEventListener('click', () => {
+                if (element === null || element === void 0 ? void 0 : element.previousElementSibling) {
+                    element === null || element === void 0 ? void 0 : element.parentNode.insertBefore(element, element.previousElementSibling);
+                    if (scrollIntoView)
+                        element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: "instant", block: "center" });
+                }
+            });
+            downButton === null || downButton === void 0 ? void 0 : downButton.addEventListener('click', () => {
+                if (element.nextElementSibling) {
+                    element === null || element === void 0 ? void 0 : element.parentNode.insertBefore(element, element.nextElementSibling.nextElementSibling);
+                }
+                else {
+                    element === null || element === void 0 ? void 0 : element.parentNode.insertAdjacentElement('beforeend', element);
+                }
+                if (scrollIntoView)
+                    element === null || element === void 0 ? void 0 : element.scrollIntoView({ behavior: "instant", block: "center" });
+            });
+            deleteButton === null || deleteButton === void 0 ? void 0 : deleteButton.addEventListener('click', () => {
+                element.remove();
+            });
+        };
+        this.addButtons = (form) => {
+            form === null || form === void 0 ? void 0 : form.insertAdjacentHTML('beforeend', `<div class="btn__group">${this.buttonHTML}</div>`);
+            this.addButtonEvents(form);
+        };
+        this.attachShadow({ mode: 'open' });
+        const assetLocation = document.body.hasAttribute('data-assets-location')
+            ? document.body.getAttribute('data-assets-location')
+            : '/assets';
+        const loadCSS = `@import "${assetLocation}/css/components/config.component.css";`;
+        const template = document.createElement('template');
+        template.innerHTML = /* HTML */ `
+      <style>
+        ${loadCSS}
+      </style>
+      <div id="wrapper">
+        <div id="items">
+          <div id="buckets"></div>  
+          <div id="any" data-bucket="any"></div>
+        </div>
+        <div class="admin-panel">
+          <button class="btn btn-action fa-plus" command="add-bucket">Add bucket</button>
+          <button class="btn btn-action fa-plus" command="add-item">Add ${(_a = this.getAttribute('data-item-name')) !== null && _a !== void 0 ? _a : 'item'}</button> <!-- Changes to open a model if we want to validate the add form first -->
+
+        </div>
+        <button id="save" class="btn btn-sm btn-primary fa-floppy-disk" >Save items</button>
+      </div>
+    `;
+        (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(template.content.cloneNode(true));
+    }
+    importData(ajaxURL) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Setup controller vars if not already set
+            if (!window.controller)
+                window.controller = [];
+            // Abort if controller already present for this url
+            if (window.controller[ajaxURL])
+                window.controller[ajaxURL].abort();
+            // Create a new controller so it can be aborted if new fetch made
+            window.controller[ajaxURL] = new AbortController();
+            const { signal } = window.controller[ajaxURL];
+            try {
+                return yield fetch(ajaxURL, {
+                    signal: signal,
+                    method: 'get',
+                    credentials: 'same-origin',
+                    headers: new Headers({
+                        'Content-Type': 'application/json',
+                        Accept: 'application/json',
+                        'X-Requested-With': 'XMLHttpRequest',
+                        'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
+                    }),
+                })
+                    .then((response) => response.json())
+                    .then((response) => {
+                    const returnData = response['data'] ? response['data'] : response;
+                    return returnData;
+                });
+            }
+            catch (error) {
+                //console.log(error);
+                return 'There has been a problem. Please try again in a few moments.';
+            }
+        });
+    }
+    importAttributeData(comonponent) {
+        return __awaiter(this, void 0, void 0, function* () {
+        });
+    }
+    connectedCallback() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e;
+            this.buttonHTML = /* HTML */ `
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-trash" type="button" data-direction="delete" title="Delete">Delete</button>
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-down" type="button" data-direction="down" title="Move down">Down</button>
+    <button class="btn btn-compact btn-sm mt-0 btn-secondary fa-chevron-up" type="button" data-direction="up" title="Move up">Up</button>
+    `;
+            const dataImportUrl = this.getAttribute('data-import');
+            const getBucketsData = this.getBucketsData;
+            const createBuckets = this.createBuckets;
+            const createForms = this.createForms;
+            const createForm = this.createForm;
+            const itemsContainer = this.shadowRoot.querySelector('#items'); // TODO: rename
+            const anyContainer = this.shadowRoot.querySelector('#any'); // TODO: rename
+            const bucketsContainer = this.shadowRoot.querySelector('#buckets'); // TODO: rename
+            const editBuckets = this.shadowRoot.querySelector('#editBuckets'); // TODO: rename
+            const saveButton = this.shadowRoot.querySelector('#save');
+            const addButton = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[data-add-item]');
+            const addForm = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#addForm');
+            const editBucketsDialog = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#editBucketsDialog');
+            const editBucketsForm = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('#editBucketsForm');
+            const editBucketsFormSubmit = (_e = this.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('#editBucketsForm .btn-primary');
+            const addBucketButton = this === null || this === void 0 ? void 0 : this.shadowRoot.querySelector('[command="add-bucket"]');
+            const addItemButton = this === null || this === void 0 ? void 0 : this.shadowRoot.querySelector('[command="add-item"]');
+            const templateForm = this === null || this === void 0 ? void 0 : this.querySelector('form');
+            let editBucketsOriginalState = '';
+            let buckets = [];
+            // Prevent the template form from submitting anything
+            templateForm === null || templateForm === void 0 ? void 0 : templateForm.addEventListener('submit', (event) => {
+                event.preventDefault();
+            });
+            // TODO: add this to an on change event on the select
+            Array.from(this.querySelectorAll('select[data-import]')).forEach((select) => __awaiter(this, void 0, void 0, function* () {
+                const ajaxURL = select.getAttribute('data-import');
+                this.importData(ajaxURL).then((data) => {
+                    if (typeof data == 'string')
+                        return data;
+                    data.forEach(item => {
+                        const optionElement = document.createElement('option');
+                        optionElement.value = item.id;
+                        optionElement.innerHTML = item.attributes.name;
+                        select.appendChild(optionElement);
+                    });
+                    return true;
+                });
+            }));
+            // #region import data
+            // TODO load from web storage if its newer
+            const storedData = localStorage.getItem(`config-${this.getAttribute('data-name')}`);
+            //const buckets = this.getBucketsData(); // TODO: load from local storage
+            if (storedData) {
+                //createForms(JSON.parse(storedData), buckets);
+            }
+            else if (dataImportUrl) {
+                const dataImport = yield this.importData(dataImportUrl).then((data) => {
+                    if (typeof data == 'string')
+                        return data;
+                    const buckets = getBucketsData(data);
+                    if (buckets) {
+                        createBuckets(buckets);
+                    }
+                    createForms(data); // any bucket
+                    return true;
+                });
+            }
+            // #endregion
+            // #region Add buckets to edit modal
+            /*
+              editBucketsForm?.addEventListener('submit', (event) => {
+        
+                event.stopPropagation();
+                event.preventDefault();
+        
+                if(event.submitter == editBucketsFormSubmit){
+        
+                  // Clear what is there already
+                  //anyContainer?.innerHTML = '';
+        
+                  Array.from(itemsContainer?.querySelectorAll('form')).forEach((formElement:HTMLElement, index):void => {
+        
+                    anyContainer?.insertAdjacentElement('beforeend',formElement);
+                  });
+        
+                  // Empty the buckets
+                  bucketsContainer?.innerHTML = '';
+        
+                  // Load the new bucket data then recreate them
+                  const buckets = [];
+                  Array.from(editBuckets?.querySelectorAll('[data-bucket]')).forEach((editBucketElement:HTMLElement, index):void => {
+        
+                    bucketsContainer?.insertAdjacentHTML('beforeend',`<div class="bucket" data-bucket="${editBucketElement.getAttribute('data-bucket')}"></div>`);
+        
+                    const bucket = {}
+        
+                    bucket.id = editBucketElement.getAttribute('data-bucket');
+                    bucket.attributes = {};
+        
+                    bucket.attributes.name = editBucketElement.querySelector('[name="bucket"]')?.value;
+        
+                    //const formData = new FormData(editBucketElement);
+                    //const formDataObj = Object.fromEntries(formData.entries());
+                    // TODO cycle through the criteria forms
+        
+                    buckets.push(bucket);
+                  });
+                  
+        
+                  console.log(buckets);
+                  // this.createBuckets(buckets); TODO: re-enable
+        
+                  /*
+                  // Move items back into buckets
+                  Array.from(itemsContainer?.querySelectorAll('form')).forEach((formElement:HTMLElement, index):void => {
+        
+                    const formData = new FormData(formElement);
+                    const formDataObj = Object.fromEntries(formData.entries());
+                    const newContainer = this.checkBuckets(formDataObj);
+        
+                    if(newContainer != anyContainer){
+                      newContainer?.insertAdjacentElement('beforeend',formElement);
+                    }
+                  });
+                
+                  
+                  editBucketsOriginalState = editBuckets.innerHTML;
+                }
+        
+                editBucketsDialog?.close();
+              });
+        */
+            /*
+              
+              addBucketButton?.addEventListener('click', (event) => {
+        
+                const editBucket = document.createElement('div');
+                editBucket.classList.add('bucket--edit');
+                editBucket.innerHTML = this.addBucketHTML();
+        
+                editBuckets?.insertAdjacentElement('beforeend', editBucket)
+        
+                this.addButtonEvents(editBucket,false);
+                const expandButton = editBucket?.querySelector('[data-expand]');
+        
+                expandButton?.addEventListener('click',() => {
+        
+                  editBucket.classList.toggle('bucket--expanded');
+                });
+              });
+        
+            */
+            // #endregion
+            // #region add data
+            addItemButton === null || addItemButton === void 0 ? void 0 : addItemButton.addEventListener("click", (event) => {
+                const form = this.createForm({});
+                form === null || form === void 0 ? void 0 : form.scrollIntoView({ behavior: "instant", block: "center" });
+                // TODO scroll into view
+            });
+            addBucketButton === null || addBucketButton === void 0 ? void 0 : addBucketButton.addEventListener("click", (event) => {
+                const bucket = this.createBucket({});
+                bucket === null || bucket === void 0 ? void 0 : bucket.scrollIntoView({ behavior: "instant", block: "center" });
+            });
+            // #endregion
+            // #region update values
+            this.shadowRoot.addEventListener('change', (event) => {
+                const container = event.target.closest('[data-bucket]');
+                if (!container)
+                    return false;
+                const attribute = event.target.name;
+                const value = event.target.value;
+                const attributes = {};
+                attributes[attribute] = value;
+                const newContainer = this.checkBuckets(attributes);
+                if (newContainer != container) {
+                    const form = event.target.closest(`form`);
+                    // TODO a confirmation modal
+                    newContainer === null || newContainer === void 0 ? void 0 : newContainer.insertAdjacentElement('beforeend', form);
+                    form === null || form === void 0 ? void 0 : form.scrollIntoView({ behavior: "instant", block: "center" });
+                }
+            });
+            // #endregion
+            // #region save data
+            saveButton === null || saveButton === void 0 ? void 0 : saveButton.addEventListener('click', (event) => {
+                event.preventDefault();
+                // TODO validation
+                const entries = [];
+                // Save buckets data
+                Array.from(itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.querySelectorAll('.bucket__wrapper')).forEach((bucketElement, index) => {
+                    const bucket = {};
+                    bucket.attributes = {};
+                    bucket.id = bucketElement === null || bucketElement === void 0 ? void 0 : bucketElement.querySelector('[name="bucket"]').value;
+                    bucket.type = 'bucket';
+                    bucket.attributes.index = index;
+                    const criteria = [];
+                    // TODO populate criteria
+                    Array.from(bucketElement === null || bucketElement === void 0 ? void 0 : bucketElement.querySelectorAll('.criteria--container form')).forEach((formElement, criteriaIndex) => {
+                        const item = {};
+                        //item.id = formElement.getAttribute('id');
+                        item.type = 'criteria';
+                        item.index = criteriaIndex;
+                        const formData = new FormData(formElement);
+                        const formDataObj = Object.fromEntries(formData.entries());
+                        item.attributes = formDataObj;
+                        criteria.push(item);
+                    });
+                    bucket.attributes.criteria = criteria;
+                    const items = [];
+                    Array.from(bucketElement === null || bucketElement === void 0 ? void 0 : bucketElement.querySelectorAll('[data-bucket] form')).forEach((formElement, itemIndex) => {
+                        const item = {};
+                        //item.id = formElement.getAttribute('id');
+                        item.type = 'item';
+                        item.index = itemIndex;
+                        const formData = new FormData(formElement);
+                        const formDataObj = Object.fromEntries(formData.entries());
+                        item.attributes = formDataObj;
+                        items.push(item);
+                    });
+                    bucket.attributes.items = items;
+                    entries.push(bucket);
+                });
+                Array.from(itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.querySelectorAll('[data-bucket="any"] form')).forEach((formElement, index) => {
+                    const entry = {};
+                    //entry.id = formElement.getAttribute('id');
+                    entry.type = 'item';
+                    entry.index = index;
+                    const formData = new FormData(formElement);
+                    const formDataObj = Object.fromEntries(formData.entries());
+                    entry.attributes = formDataObj;
+                    entries.push(entry);
+                });
+                const entriesJson = JSON.stringify(entries);
+                console.log(entries);
+                // TODO add toast message
+                // TODO save locally for now but when pushing to endpoint the web storage file should get deleted
+                //localStorage.setItem(`config-${this.getAttribute('data-name')}`, entriesJson);
+                //const bucketsJson = JSON.stringify(buckets);
+                //localStorage.setItem(`config-buckets-${this.getAttribute('data-name')}`, bucketsJson);
+            });
+            // #endregion
+        });
+    }
+}
+export default iamConfig;