@newlogic-digital/ui 3.0.3 → 3.2.0

package/src/scripts/Libraries/Anchor.js

@@ -1,60 +1,35 @@
 const LibAnchor = {
     animation: (element) => {
-        let offset;
-        let attr = "data-offset";
+        const offset = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('scroll-padding-top'))
 
-        if (window.innerWidth > 960) {
-            offset = 0;
-            if (element.getAttribute(attr) !== null) {
-                if (isNaN(parseInt(element.getAttribute(attr)))) {
-                    offset = document.querySelector(element.getAttribute(attr)).offsetHeight;
-                } else {
-                    offset = parseInt(element.getAttribute(attr));
-                }
-            }
-        }
-
-        document.documentElement.scroll({top: element.offsetTop - offset, behavior: "smooth"});
+        document.documentElement.scroll({ top: element.offsetTop - offset, behavior: 'smooth' })
     },
     action: (element) => {
-        let href = element.getAttribute("href");
-
-        if (href === null) {
-            href = element.getAttribute("data-action-href");
-        }
-
-        let id = document.querySelector("[id=" + href.replace('#', '') + "]");
-        let options = element.getAttribute("data-action-options");
+        const href = element.href ? element.getAttribute('href') : element.getAttribute('data-action-href')
+        const data = element.dataset.libAnhor ? element.dataset.libAnhor : ''
+        const target = document.querySelector(`[id="${href.replace('#', '')}"]`)
 
-        if (options === null) {
-            options = "";
-        }
-
-        if (id !== null) {
-            if (!(options.indexOf("mobile") > -1 && window.innerWidth > 960)) {
-
-                LibAnchor.animation(id);
+        if (target !== null) {
+            if (!(data.includes('mobile') && window.innerWidth > 960)) {
+                LibAnchor.animation(target)
+            }
 
-                if (options.indexOf("hash") > -1) {
-                    window.location.hash = id;
-                }
+            if (!data.includes('silent')) {
+                window.location.hash = target.id
             }
         }
     },
     init: () => {
-        let selector = [...document.querySelectorAll("[id]")];
+        const selector = document.querySelectorAll('[id]')
 
         if (selector[0] !== null) {
-
-            selector.forEach((element) => {
-                if (window.location.hash && element.getAttribute("id") === window.location.hash.replace('#', '')) {
-                    LibAnchor.animation(element);
+            selector.forEach(element => {
+                if (window.location.hash && element.getAttribute('id') === window.location.hash.replace('#', '')) {
+                    LibAnchor.animation(element)
                 }
-            });
+            })
         }
     }
-};
-
-LibAnchor.init();
+}
 
-export default LibAnchor;
+export default LibAnchor

package/src/scripts/Libraries/CookieConsent.js

@@ -1,82 +1,67 @@
 const LibCookieConsent = {
+    setItem: (key, value) => {
+        localStorage.setItem(key, value)
+    },
+    getItem: (key) => {
+        return localStorage.getItem(key)
+    },
     init: () => {
-        if (localStorage.getItem('cookieconsent') === "approve") {
-            let type = localStorage.getItem('cookieconsent_type');
-            if (type !== null) {
-                if (type === "performance") {
-                    LibCookieConsent.append("performance");
-                } else if (type === "marketing") {
-                    LibCookieConsent.append("all");
-                }
-            } else {
-                LibCookieConsent.append("all");
-            }
-        } else if (localStorage.getItem('cookieconsent') === null) {
-            LibCookieConsent.append("all");
+        const type = LibCookieConsent.getItem('lib-cookieconsent')
+
+        if (type !== null) {
+            JSON.parse(type).forEach(type => LibCookieConsent.append(type))
         }
     },
-    set: (type, callback) => {
-        if (type === "approve") {
-            localStorage.setItem("cookieconsent", "approve");
-            LibCookieConsent.append("all");
-
-        } else if (type === "performance") {
-            localStorage.setItem("cookieconsent", "approve");
-            localStorage.setItem("cookieconsent_type", "performance");
-            LibCookieConsent.append("performance");
+    set: (type) => {
+        LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify(type))
+        LibCookieConsent.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
 
-        } else if (type === "marketing") {
-            localStorage.setItem("cookieconsent", "approve");
-            localStorage.setItem("cookieconsent_type", "marketing");
-            LibCookieConsent.append("all");
-
-        } else if (type === "decline") {
-            localStorage.setItem("cookieconsent", "decline");
-            localStorage.removeItem("cookieconsent_type");
-            LibCookieConsent.remove();
-
-            if (callback) {
-                callback();
-            }
+        if (type.length > 0) {
+            type.forEach(type => LibCookieConsent.append(type))
+        } else {
+            LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify([]))
+            LibCookieConsent.remove()
         }
     },
     remove: () => {
-        document.cookie.split(";").forEach(function(c) {
-            document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
-        });
+        document.cookie.split(';').forEach(c => {
+            document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
+        })
     },
     append: (type) => {
-        [...document.querySelectorAll("[data-lib-cookieconsent]")].map((elm) => {
-            if (type === "all" || elm.getAttribute("data-lib-cookieconsent") === type) {
-                let script = document.createElement("script");
-                let delay = 0;
+        document.querySelectorAll('[data-lib-cookieconsent]').forEach(elm => {
+            if (type === 'all' || elm.getAttribute('data-lib-cookieconsent') === type) {
+                const script = document.createElement('script')
+                let delay = 0
 
-                [...elm.attributes].forEach((attribute) => {
+                ;[...elm.attributes].forEach((attribute) => {
                     if (attribute.specified) {
-                        if (attribute.name.indexOf("data-lib-cookieconsent") === -1 && attribute.name.indexOf("type") === -1) {
-                            script.setAttribute(attribute.name, attribute.value);
+                        if (attribute.name.indexOf('data-lib-cookieconsent') === -1 && attribute.name.indexOf('type') === -1) {
+                            script.setAttribute(attribute.name, attribute.value)
                         }
                     }
-                });
+                })
 
-                script.innerHTML = elm.innerHTML;
+                script.innerHTML = elm.innerHTML
 
-                if (elm.getAttribute("data-lib-cookieconsent-delay")) {
-                    delay = parseInt(elm.getAttribute("data-lib-cookieconsent-delay"));
+                if (elm.getAttribute('data-lib-cookieconsent-delay')) {
+                    delay = parseInt(elm.getAttribute('data-lib-cookieconsent-delay'))
                 }
 
                 setTimeout(() => {
-                    if (elm.closest("body") !== null) {
-                        document.body.appendChild(script);
-                    } else if (elm.closest("head") !== null) {
-                        document.head.appendChild(script);
+                    if (elm.closest('body') !== null) {
+                        document.body.appendChild(script)
+                    } else if (elm.closest('head') !== null) {
+                        document.head.appendChild(script)
                     }
 
-                    elm.remove();
-                }, delay);
+                    elm.remove()
+                }, delay)
             }
         })
     }
-};
+}
+
+LibCookieConsent.init()
 
-export default LibCookieConsent;
+export default LibCookieConsent

package/src/scripts/Libraries/Dialog.js

@@ -1,74 +1,75 @@
+import { loadStimulus } from './Stimulus.js'
+
 const LibDialog = {
-    show: (content, callback) => {
-        if (document.querySelector(".lib-dialog > [class^='c-dialog']") !== null) {
-            document.querySelector(".lib-dialog > [class^='c-dialog']").remove();
-        }
+    show: async(content) => {
+        return new Promise(resolve => {
+            if (document.querySelector('.lib-dialog > [class^="c-dialog"]') !== null) {
+                document.querySelector('.lib-dialog > [class^="c-dialog"]').remove()
+            }
 
-        if (document.querySelector(".lib-dialog") === null) {
-            document.body.insertAdjacentHTML("beforeend", `<div class="lib-dialog"></div>`);
-        }
+            if (document.querySelector('.lib-dialog') === null) {
+                document.body.insertAdjacentHTML('beforeend', '<div class="lib-dialog"></div>')
+            }
 
-        document.querySelector(".lib-dialog").insertAdjacentHTML("beforeend", content);
-        document.querySelector(".lib-dialog").style["display"] = "flex";
+            document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
+            document.querySelector('.lib-dialog').style.display = 'flex'
 
-        function outerHeight(el) {
-            return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom);
-        }
+            function outerHeight(el) {
+                return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom)
+            }
 
-        if (outerHeight(document.querySelector(".lib-dialog > [class^='c-dialog']")) > window.innerHeight) {
-            let offset = window.innerWidth - document.body.clientWidth;
+            if (outerHeight(document.querySelector('.lib-dialog > [class^="c-dialog"]')) > window.innerHeight) {
+                const offset = window.innerWidth - document.body.clientWidth
 
-            document.documentElement.style["padding-right"] = offset;
-            document.documentElement.classList.add("is-overflow-hidden");
+                document.documentElement.style.paddingRight = `${offset}px`
+                document.documentElement.classList.add('overflow-hidden')
 
-            if (document.querySelector("#l-header") !== null) {
-                document.querySelector("#l-header").style["right"] = offset;
+                if (document.querySelector('#l-header') !== null) {
+                    document.querySelector('#l-header').style.right = `${offset}px`
+                }
             }
-        }
 
-        if (callback) {
-            callback();
-        }
+            loadStimulus(document.querySelector('.lib-dialog'))
 
-        document.querySelector(".lib-dialog").addEventListener("mousedown", (e) => {
-            if (e.target.classList.contains("lib-dialog")) {
-                document.documentElement.addEventListener("mouseup", function e() {
-                    LibDialog.hide();
-                    document.documentElement.removeEventListener("mouseup", e);
-                });
-            }
-        }, true);
+            resolve()
+
+            document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
+                if (e.target.classList.contains('lib-dialog')) {
+                    document.documentElement.addEventListener('mouseup', function e() {
+                        LibDialog.hide()
+                        document.documentElement.removeEventListener('mouseup', e)
+                    })
+                }
+            }, true)
+        })
     },
-    hide: (callback) => {
-        if (document.querySelector(".lib-dialog") !== null) {
-            document.querySelector(".lib-dialog")._addDataValue("state", "hiding");
-        }
+    hide: async() => {
+        return new Promise(resolve => {
+            if (document.querySelector('.lib-dialog') !== null) {
+                document.querySelector('.lib-dialog')._addDataValue('state', 'hiding')
+            }
 
-        setTimeout(function () {
-            if (document.querySelector(".lib-dialog") !== null) {
-                document.querySelector(".lib-dialog").style["display"] = "none";
-                document.documentElement.classList.remove("is-overflow-hidden");
+            setTimeout(() => {
+                if (document.querySelector('.lib-dialog') !== null) {
+                    document.querySelector('.lib-dialog').style.display = 'none'
+                    document.documentElement.classList.remove('overflow-hidden')
 
-                if (document.querySelector("#l-header") !== null) {
-                    document.querySelector("#l-header").style["right"] = "";
-                }
+                    if (document.querySelector('#l-header') !== null) {
+                        document.querySelector('#l-header').style.right = ''
+                    }
 
-                document.querySelector(".lib-dialog").remove();
-            }
+                    document.querySelector('.lib-dialog').remove()
+                }
 
-            if (callback) {
-                callback();
-            }
-        }, 300);
+                resolve()
+            }, 300)
+        })
     },
-    action: (element, url, callback) => {
-        fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}}).then((response) => {
-            return response.json();
+    action: async(element, url) => {
+        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => response.json()).then(({ dialog }) => {
+            LibDialog.show(dialog)
         })
-        .then((data) => {
-            LibDialog.show(data["dialog"], callback);
-        });
     }
-};
+}
 
-export default LibDialog;
+export default LibDialog

package/src/scripts/Libraries/Drawer.js

@@ -1,39 +1,39 @@
-import { LibStimulus, Controller } from "./Stimulus.js";
+import { LibStimulus, Controller } from './Stimulus.js'
 
-LibStimulus.register("lib-drawer", class extends Controller {
+LibStimulus.register('lib-drawer', class extends Controller {
     init() {
-        setTimeout(() => this.queryTarget("nav").classList.add("is-transition"), 50);
-        this.queryTarget("nav").addEventListener("click", (e) => {
-            if (e.target === this.queryTarget("nav")) {
-                this.hide();
+        setTimeout(() => this.queryTarget('nav').classList.add('is-transition'), 50)
+        this.queryTarget('nav').addEventListener('click', ({ target }) => {
+            if (target === this.queryTarget('nav')) {
+                this.hide()
             }
         })
     }
 
     show() {
-        this.queryTarget("nav").scrollLeft = 0;
-        this.queryTarget("nav").style.setProperty('--drawerOpacity', `1`);
-        this.queryTarget("nav").classList.add("is-opacity");
-        this.queryTarget("nav")._addDataValue("state", "active");
-        document.documentElement.classList.add("is-lib-drawer-active");
+        this.queryTarget('nav').scrollLeft = 0
+        this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '1')
+        this.queryTarget('nav').classList.add('is-opacity')
+        this.queryTarget('nav')._addDataValue('state', 'active')
+        document.documentElement.classList.add('overflow-hidden')
     }
 
     hide() {
-        this.queryTarget("nav")._removeDataValue("state", "active");
-        this.queryTarget("nav").classList.add("is-opacity");
-        this.queryTarget("nav").style.setProperty('--drawerOpacity', `0`);
-        document.documentElement.classList.remove("is-lib-drawer-active");
+        this.queryTarget('nav')._removeDataValue('state', 'active')
+        this.queryTarget('nav').classList.add('is-opacity')
+        this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '0')
+        document.documentElement.classList.remove('overflow-hidden')
     }
 
-    scroll(e) {
-        if (e.target.scrollLeft > 1) {
-            this.queryTarget("nav").classList.remove("is-opacity");
-            this.queryTarget("nav").style.setProperty('--drawerOpacity', `${Math.abs((e.target.scrollLeft / this.queryTarget("nav").children[0].clientWidth) - 1)}`);
+    scroll({ target }) {
+        if (target.scrollLeft > 1) {
+            this.queryTarget('nav').classList.remove('is-opacity')
+            this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.queryTarget('nav').children[0].clientWidth) - 1)}`)
         }
 
-        if (e.target.scrollLeft === this.queryTarget("nav").children[0].clientWidth) {
-            this.queryTarget("nav")._removeDataValue("state", "active");
-            document.documentElement.classList.remove("is-lib-drawer-active");
+        if (target.scrollLeft === this.queryTarget('nav').children[0].clientWidth) {
+            this.queryTarget('nav')._removeDataValue('state', 'active')
+            document.documentElement.classList.remove('overflow-hidden')
         }
     }
-});
+})

package/src/scripts/Libraries/Form.js

@@ -0,0 +1,37 @@
+import { LibStimulus, Controller, getController } from './Stimulus.js'
+
+LibStimulus.register('lib-form', class extends Controller {
+    connect() {
+        this.element.setAttribute('novalidate', '')
+        this.element.addEventListener('submit', e => this.validate(this.element, e))
+    }
+
+    validate(element, e) {
+        if (element.reportValidity() === false) {
+            e.preventDefault()
+            e.stopPropagation()
+        }
+
+        element.querySelectorAll('.ui-input').forEach(element => {
+            getController(element, 'ui-input').validate(element, true)
+        })
+
+        element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
+            getController(select.parentNode, 'ui-select').validate(select.parentNode, select)
+        })
+
+        element.querySelectorAll('[data-controller="ui-checkbox"] input:not([type="hidden"])').forEach(input => {
+            input.parentNode._removeDataValue('state', 'valid invalid')
+
+            if (input.checkValidity()) {
+                input.parentNode._addDataValue('state', 'valid')
+            } else {
+                input.parentNode._addDataValue('state', 'invalid')
+            }
+        })
+    }
+
+    submitForm({ currentTarget }) {
+        currentTarget.form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+    }
+})