@newlogic-digital/ui 3.0.4 → 3.1.0

package/src/scripts/Libraries/NativeSlider.js

@@ -1,137 +1,137 @@
-const LibNativeSlider = function(selector, parent) {
-    let self = {
-        behavior: "auto",
+export default function LibNativeSlider(selector, parent) {
+    const self = {
+        behavior: 'auto',
         ref: {
-            nav: parent.querySelector("[data-lib-ns-nav]"),
-            select: parent.querySelectorAll("[data-lib-ns-nav-item]"),
-            progress: parent.querySelector("[data-lib-ns-progress]"),
-            counterMin: parent.querySelector(`[data-lib-ns-counter="min"]`),
-            counterMax: parent.querySelector(`[data-lib-ns-counter="max"]`),
-            prev: parent.querySelector("[data-lib-ns-prev]"),
-            next: parent.querySelector("[data-lib-ns-next]")
+            nav: parent.querySelector('[data-lib-ns-nav]'),
+            select: parent.querySelectorAll('[data-lib-ns-nav-item]'),
+            progress: parent.querySelector('[data-lib-ns-progress]'),
+            counterMin: parent.querySelector('[data-lib-ns-counter="min"]'),
+            counterMax: parent.querySelector('[data-lib-ns-counter="max"]'),
+            prev: parent.querySelector('[data-lib-ns-prev]'),
+            next: parent.querySelector('[data-lib-ns-next]')
         }
     }
-        
-    if (!selector.classList.contains("is-fade")) {
-        self.behavior = "smooth";
-
-        let grabbing = () => {
-            self.isDown = false;
-            self.paused = false;
-            selector.classList.remove('is-grabbing');
-            selector.scrollLeft = selector.scrollLeft - 1;
-        };
-
-        selector.addEventListener('mouseleave', grabbing);
-
-        selector.addEventListener('mouseup', grabbing);
-
-        selector.addEventListener('mousedown', (e) => {
-            self.isDown = true;
-            self.startX = e.pageX - selector.offsetLeft;
-            self.scrollLeft = selector.scrollLeft;
-            self.paused = true;
-        });
-
-        selector.addEventListener('mousemove', (e) => {
-            if(!self.isDown) return;
-            e.preventDefault();
-            const x = e.pageX - selector.offsetLeft;
-            const walk = (x - self.startX) * 1.25;
-            selector.classList.add('is-grabbing');
-            selector.scrollLeft = self.scrollLeft - walk;
-
-            selector.ondragstart = (dragEvent) => {
-                dragEvent.preventDefault();
-            };
-        });
+
+    if (!selector.classList.contains('is-fade')) {
+        self.behavior = 'smooth'
+
+        if (!document.documentElement.classList.contains('safari')) {
+            const grabbing = () => {
+                self.isDown = false
+                self.paused = false
+                selector.classList.remove('is-grabbing')
+                selector.scrollLeft = selector.scrollLeft - 1
+            }
+
+            selector.addEventListener('mouseleave', grabbing)
+
+            selector.addEventListener('mouseup', grabbing)
+
+            selector.addEventListener('mousedown', e => {
+                self.isDown = true
+                self.startX = e.pageX - selector.offsetLeft
+                self.scrollLeft = selector.scrollLeft
+                self.paused = true
+            })
+
+            selector.addEventListener('mousemove', e => {
+                if (!self.isDown) return
+                e.preventDefault()
+                const x = e.pageX - selector.offsetLeft
+                const walk = (x - self.startX) * 1.25
+                selector.classList.add('is-grabbing')
+                selector.scrollLeft = self.scrollLeft - walk
+
+                selector.ondragstart = dragEvent => {
+                    dragEvent.preventDefault()
+                }
+            })
+        }
     }
 
     if (self.ref.counterMax !== null) {
-        self.counterMax = parseInt(((selector.scrollWidth - selector.clientWidth) / selector.children[0].clientWidth + 1).toFixed(0));
-        self.ref.counterMax.textContent = self.counterMax;
+        self.counterMax = parseInt(((selector.scrollWidth - selector.clientWidth) / selector.children[0].clientWidth + 1).toFixed(0))
+        self.ref.counterMax.textContent = self.counterMax
     }
 
     if (self.ref.nav !== null) {
-        self.ref.nav.insertAdjacentHTML("beforeend", [...Array(self.counterMax)].map((x,i) => `<div data-state="${i === 0 && 'active'}" aria-label="${i+1}" aria-current="step" data-lib-ns-nav-item="${i}"></div>`).join(""));
-        self.ref.select = parent.querySelectorAll("[data-lib-ns-nav-item]");
+        self.ref.nav.insertAdjacentHTML('beforeend', [...Array(self.counterMax)].map((x, i) => `<div data-state="${i === 0 && 'active'}" aria-label="${i + 1}" aria-current="step" data-lib-ns-nav-item="${i}"></div>`).join(''))
+        self.ref.select = parent.querySelectorAll('[data-lib-ns-nav-item]')
     }
 
-    if (typeof self.ref.select[0] !== "undefined") {
-        self.ref.select.forEach((elm) => {
-            elm.addEventListener("click", () => {
-                if (!elm._hasDataValue("state", "active")) {
-                    let position = selector.scrollLeft / selector.children[0].clientWidth,
-                        selected = elm.dataset["libNsNavItem"];
+    if (typeof self.ref.select[0] !== 'undefined') {
+        self.ref.select.forEach(elm => {
+            elm.addEventListener('click', () => {
+                if (!elm._hasDataValue('state', 'active')) {
+                    const position = selector.scrollLeft / selector.children[0].clientWidth
+                    const selected = elm.dataset.libNsNavItem
 
                     if (position - selected <= 0) {
-                        selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth * (selected - position), behavior: self.behavior });
+                        selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth * (selected - position), behavior: self.behavior })
                     } else {
-                        selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth * (position - selected), behavior: self.behavior });
+                        selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth * (position - selected), behavior: self.behavior })
                     }
                 }
-            });
-        });
+            })
+        })
     }
 
-    selector.addEventListener("scroll", () => {
+    selector.addEventListener('scroll', () => {
         if (self.ref.progress !== null) {
-            self.ref.progress.value = ((selector.scrollLeft + selector.clientWidth) / selector.scrollWidth * 100).toFixed(2);
+            self.ref.progress.value = ((selector.scrollLeft + selector.clientWidth) / selector.scrollWidth * 100).toFixed(2)
         }
 
-        let activeSlide = parseInt(((selector.scrollLeft / selector.children[0].clientWidth)+1).toFixed(0));
+        const activeSlide = parseInt(((selector.scrollLeft / selector.children[0].clientWidth) + 1).toFixed(0))
 
         if (self.ref.counterMin !== null) {
-            self.ref.counterMin.textContent = activeSlide;
+            self.ref.counterMin.textContent = activeSlide
         }
 
-        if (typeof self.ref.select[0] !== "undefined") {
-            self.ref.select.forEach((elm) => elm._removeDataValue("state", "active"));
+        if (typeof self.ref.select[0] !== 'undefined') {
+            self.ref.select.forEach(elm => elm._removeDataValue('state', 'active'))
 
-            self.ref.select[activeSlide-1]._addDataValue("state", "active");
+            self.ref.select[activeSlide - 1]._addDataValue('state', 'active')
         }
 
         if (Math.floor(selector.scrollLeft / selector.children[0].clientWidth) === selector.scrollLeft / selector.children[0].clientWidth) {
-            [...selector.children].forEach((elm, index) => {
-                elm._removeDataValue("state", "active");
+            [...selector.children].forEach(elm => {
+                elm._removeDataValue('state', 'active')
 
                 if (selector.scrollLeft === elm.offsetLeft - elm.parentNode.offsetLeft) {
-                    elm._addDataValue("state", "active");
+                    elm._addDataValue('state', 'active')
                 }
-            });
+            })
         }
-    }, { passive: true });
+    }, { passive: true })
 
     if (self.ref.progress !== null) {
-        self.ref.progress.addEventListener("click", (e) => {
-            selector.scrollLeft = (selector.scrollWidth / 100) * (e.clientX - e.target["offsetLeft"]) / e.target["clientWidth"] * 100;
-        });
+        self.ref.progress.addEventListener('click', e => {
+            selector.scrollLeft = (selector.scrollWidth / 100) * (e.clientX - e.target.offsetLeft) / e.target.clientWidth * 100
+        })
     }
 
     if (self.ref.prev !== null && self.ref.next !== null) {
-        self.ref.prev.addEventListener("click", () => selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth, behavior: self.behavior }));
+        self.ref.prev.addEventListener('click', () => selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth, behavior: self.behavior }))
 
-        self.ref.next.addEventListener("click", () => selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior }));
+        self.ref.next.addEventListener('click', () => selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior }))
     }
 
-    [self.ref.prev, self.ref.next, ...self.ref.select, self.ref.progress].map((elm) => {
-        if (typeof elm !== "undefined" && elm !== null) {
-            elm.addEventListener("mouseenter", () => self.paused = true);
-            elm.addEventListener("mouseleave", () => self.paused = false);
+    [self.ref.prev, self.ref.next, ...self.ref.select, self.ref.progress].forEach(elm => {
+        if (typeof elm !== 'undefined' && elm !== null) {
+            elm.addEventListener('mouseenter', () => (self.paused = true))
+            elm.addEventListener('mouseleave', () => (self.paused = false))
         }
     })
 
-    if (!isNaN(parseInt(selector.getAttribute("data-lib-ns")))) {
+    if (!isNaN(parseInt(selector.getAttribute('data-lib-ns')))) {
         setInterval(() => {
             if (!self.paused) {
                 if (selector.scrollLeft <= selector.children[0].clientWidth) {
-                    selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior });
+                    selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior })
                 } else {
-                    selector.scroll({ left: 0, behavior: self.behavior });
+                    selector.scroll({ left: 0, behavior: self.behavior })
                 }
             }
-        }, parseInt(selector.getAttribute("data-lib-ns")))
+        }, parseInt(selector.getAttribute('data-lib-ns')))
     }
-};
-
-export default LibNativeSlider;
+}

package/src/scripts/Libraries/ReCaptcha.js

@@ -1,25 +1,27 @@
-import { LibStimulus, Controller } from "./Stimulus.js";
-import importScript from "../Utils/Functions/importScript.js";
-import cdn from "../Utils/cdn.js";
+import { LibStimulus, Controller } from './Stimulus.js'
+import importScript from '../Utils/Functions/importScript.js'
+import cdn from '../Utils/cdn.js'
 
-LibStimulus.register("lib-recaptcha", class extends Controller {
+LibStimulus.register('lib-recaptcha', class extends Controller {
     connect() {
-        setTimeout(() => this.captcha(), 2500);
-
-        this.interval = setInterval(() => this.captcha(), 150000);
+        importScript(cdn.recaptcha.replace('{apikey}', this.data.get('api')))
     }
 
-    captcha() {
-        importScript(cdn.recaptcha.replace("{apikey}", this.data.get("api")).then(() => {
-            window.grecaptcha.ready(function () {
-                window.grecaptcha.execute(this.data.get("api"), {action: 'form'}).then(token => {
-                    this.element.querySelector(`[name="gtoken"]`).value = token;
-                });
-            });
-        }))
+    async execute() {
+        return new Promise(resolve => {
+            window.grecaptcha.enterprise.ready(() => {
+                window.grecaptcha.enterprise.execute(this.data.get('api'), { action: this.data.get('action') ? this.data.get('action') : 'form' }).then(token => {
+                    this.element.querySelector('[name="gtoken"]').value = token
+                    resolve()
+                })
+            })
+        })
     }
 
-    disconnect() {
-        clearInterval(this.interval);
+    async submit(e) {
+        e.preventDefault()
+
+        await this.execute()
+        this.element.submit()
     }
-});
+})

package/src/scripts/Libraries/Ripple.js

@@ -1,40 +1,24 @@
-function LibRipple(element, e) {
-    const init = function (container) {
-        if (container.querySelector(".lib-ripple-inner") === null) {
-            container.insertAdjacentHTML("beforeend", `<div class='lib-ripple-inner'></div>`);
-        }
+const LibRipple = ({ currentTarget, layerX, layerY }) => {
+    const container = currentTarget
 
-        let ink = container.querySelector(".lib-ripple-inner");
-
-        ink.classList.remove("animation");
-
-        if (ink.clientWidth === 0 && ink.clientHeight === 0) {
-            let d = Math.max(element.offsetWidth, element.offsetHeight);
-
-            ink.style["width"] = d + 'px';
-            ink.style["height"] = d + 'px';
-        }
+    if (container.querySelector('.lib-ripple') === null) {
+        container.insertAdjacentHTML('beforeend', "<div class='lib-ripple'></div>")
+    }
 
-        let x, y;
+    const ink = container.querySelector('.lib-ripple')
 
-        if (container === document.body) {
-            x = e.clientX - container.offsetLeft - (ink.clientWidth / 2);
-            y = e.clientY - container.offsetTop - (ink.clientHeight / 2);
-        } else {
-            x = e.pageX - container.offsetLeft - (ink.clientWidth / 2);
-            y = e.pageY - container.offsetTop - (ink.clientHeight / 2);
-        }
+    ink.classList.remove('animation')
 
-        ink.style["top"] = y + 'px';
-        ink.style["left"] = x + 'px';
-        ink.classList.add("animation");
-    };
+    if (ink.clientWidth === 0 && ink.clientHeight === 0) {
+        const d = Math.max(container.offsetWidth, container.offsetHeight)
 
-    if (element.getAttribute("data-action-ripple") === "body") {
-        init(document.body);
-    } else {
-        init(element);
+        ink.style.width = d + 'px'
+        ink.style.height = d + 'px'
     }
+
+    ink.style.top = layerY - (ink.clientHeight / 2) + 'px'
+    ink.style.left = layerX - (ink.clientWidth / 2) + 'px'
+    ink.classList.add('animation')
 }
 
-export default LibRipple;
+export default LibRipple

package/src/scripts/Libraries/Stimulus.js

@@ -1,46 +1,42 @@
-import { Application, Controller } from "stimulus";
-import loadStimulus from "../Utils/Functions/loadStimulus.js";
+import { Application, Controller as DefaultController } from '@hotwired/stimulus'
+import loadStimulus from '../Utils/Functions/loadStimulus.js'
 
-const LibStimulus = new Application(document.documentElement, {
-    controllerAttribute: "data-controller",
-    actionAttribute: "data-action",
-    targetAttribute: "data-ref"
-});
+const LibStimulus = new Application(document.documentElement)
 
-LibStimulus.getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier);
+const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
 
-Controller.prototype.getValue = function(value) {
-    return this[`${value}Value`]
-};
+class Controller extends DefaultController {
+    getValue(value) {
+        return this[`${value}Value`]
+    }
 
-Controller.prototype.setValue = function(type, value) {
-    this[`${type}Value`] = value;
-};
+    setValue(type, value) {
+        this[`${type}Value`] = value
+    }
 
-Controller.prototype.hasValue = function(type, value) {
-    return this.data.has(`${type}Value`, value);
-};
+    hasValue(value) {
+        return this.data.has(`${value}Value`)
+    }
 
-Controller.prototype.getClass = function(value) {
-    return this.data.get(`${value}Class`)
-};
+    getClass(value) {
+        return this.data.get(`${value}Class`)
+    }
 
-Controller.prototype.queryTarget = function(target) {
-    return this.targets.find(target)
-};
+    queryTarget(target) {
+        return this.targets.find(target)
+    }
 
-Controller.prototype.queryTargetAll = function(targets) {
-    return this.targets.findAll(targets)
-};
+    queryTargetAll(targets) {
+        return this.targets.findAll(targets)
+    }
 
-Controller.prototype.hasTarget = function(target) {
-    return this.targets.has(target)
-};
+    hasTarget(target) {
+        return this.targets.has(target)
+    }
+}
 
-LibStimulus.start().then(() => {
-    loadStimulus(document);
-});
+LibStimulus.start().then(() => loadStimulus(document.body))
 
-window.LibStimulus = LibStimulus;
+window.LibStimulus = { default: LibStimulus, Controller, loadStimulus }
 
-export { LibStimulus, Controller, loadStimulus };
+export { LibStimulus, Controller, loadStimulus, getController }

package/src/scripts/Libraries/Swup.js

@@ -1,82 +1,79 @@
-import Swup from 'swup';
-import {LibStimulus, loadStimulus} from "./Stimulus.js";
-import LibAnchor from "./Anchor.js";
-import LibDialog from "./Dialog.js";
-import LibCookieConsent from "./CookieConsent.js";
+import Swup from 'swup'
+import { getController, loadStimulus } from './Stimulus.js'
+import LibAnchor from './Anchor.js'
+import LibDialog from './Dialog.js'
+import LibCookieConsent from './CookieConsent.js'
 
 const LibSwup = new Swup({
-    containers: ['#l-main'],
-    linkSelector: `a[href^="${window.location.origin}"]:not([data-no-swup]):not([target="_blank"]), a[href^="/"]:not([data-no-swup]):not([target="_blank"]), a[href^="#"]:not([data-no-swup])`
-});
+    containers: ['#l-main', '#l-header'].filter(element => document.querySelector(element)),
+    linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
+})
 
-LibSwup.on('clickLink', () => {
-    document.body.classList.remove("is-overflow-hidden");
+LibSwup.on('clickLink', async() => {
+    document.body.classList.remove('overflow-hidden')
 
-    if (document.querySelector(".is-lib-drawer-active") !== null) {
-        LibStimulus.getController(document.body, "lib-drawer").hide()
+    if (document.querySelector('.lib-drawer[data-state~="active"]') !== null) {
+        getController(document.body, 'lib-drawer').hide()
     }
 
-    if (document.querySelector(".lib-dialog") !== null) {
-        LibDialog.hide();
+    if (document.querySelector('.lib-dialog') !== null) {
+        await LibDialog.hide()
     }
-});
+})
 
 LibSwup.on('animationOutDone', () => {
-    window.scrollTo(0, 0);
-});
+    document.documentElement.scroll({ top: 0, behavior: 'instant' })
+})
 
 LibSwup.on('contentReplaced', () => {
-    const content = new DOMParser().parseFromString(LibSwup.cache["getCurrentPage"]().originalContent, "text/html");
+    const content = new DOMParser().parseFromString(LibSwup.cache.getCurrentPage().originalContent, 'text/html')
 
-    [...content.head.querySelectorAll("[data-lib-swup-replace]")].forEach(element => {
-        let tag = document.querySelector(`[data-lib-swup-replace=${element.dataset.libSwupReplace}]`);
+    content.head.querySelectorAll('[data-lib-swup-replace]').forEach(element => {
+        const tag = document.querySelector(`[data-lib-swup-replace=${element.dataset.libSwupReplace}]`)
 
         if (tag !== null) {
             tag.outerHTML = element.outerHTML
         } else {
-            document.head.insertAdjacentHTML("beforeend", element.outerHTML);
+            document.head.insertAdjacentHTML('beforeend', element.outerHTML)
         }
-    });
+    })
 
-    LibSwup.options.containers.forEach((selector) => {
-        loadStimulus(document.querySelector(selector));
-    });
+    LibAnchor.init()
 
-    LibAnchor.init();
+    LibSwup.options.containers.forEach(selector => {
+        loadStimulus(document.querySelector(selector))
+    })
 
-    if (typeof window.fbq !== "undefined") {
-        window.fbq('track', 'PageView');
+    if (typeof window.fbq !== 'undefined') {
+        window.fbq('track', 'PageView')
     }
 
-    if (typeof gtag !== "undefined") {
-        let configs = [];
-        window.dataLayer.forEach(function (config) {
-            if (config[0] === "config") {
-                if (typeof config[1] !== "undefined" && !configs.includes(config[1])) {
-                    configs.push(config[1]);
+    if (typeof gtag !== 'undefined') {
+        const configs = []
+        window.dataLayer.forEach(function(config) {
+            if (config[0] === 'config') {
+                if (typeof config[1] !== 'undefined' && !configs.includes(config[1])) {
+                    configs.push(config[1])
                     window.gtag('config', config[1], {
-                        'page_title': document.title,
-                        'page_path': window.location.pathname + window.location.search
-                    });
+                        page_title: document.title,
+                        page_path: window.location.pathname + window.location.search
+                    })
                 }
             }
-        });
+        })
     }
 
-    if (typeof window.dataLayer !== "undefined") {
+    if (typeof window.dataLayer !== 'undefined') {
         window.dataLayer.push({
-            'event': 'VirtualPageview',
-            'virtualPageURL': window.location.pathname + window.location.search,
-            'virtualPageTitle': document.title
-        });
+            event: 'VirtualPageview',
+            virtualPageURL: window.location.pathname + window.location.search,
+            virtualPageTitle: document.title
+        })
     }
 
-    if (typeof LibCookieConsent !== "undefined") {
-        LibCookieConsent.init();
+    if (typeof LibCookieConsent !== 'undefined') {
+        LibCookieConsent.init()
     }
+})
 
-    document.body.classList.remove("is-body-preload");
-    document.body.classList.add("is-body-loaded");
-});
-
-export default LibSwup;
+export default LibSwup

package/src/scripts/Libraries/Tabs.js

@@ -1,22 +1,16 @@
-const LibTabs = function (element, callback) {
-    [...element.querySelector(`[data-lib-tabs-nav]`).querySelectorAll(`[data-lib-tabs-item="nav"]`)].forEach((selector, index) => {
-        selector.addEventListener("click", e => {
-            e.preventDefault();
+export default function LibTabs(element) {
+    element.querySelector('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach((selector, index) => {
+        selector.addEventListener('click', e => {
+            e.preventDefault()
 
-            [...selector.closest(`[data-lib-tabs-nav]`).querySelectorAll(`[data-lib-tabs-item="nav"]`)].forEach(elm => elm._removeDataValue("state", "active"));
-            selector._addDataValue("state", "active");
+            selector.closest('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach(elm => elm._removeDataValue('state', 'active'))
+            selector._addDataValue('state', 'active')
 
-            [...element.querySelector(`[data-lib-tabs-area]`).children].forEach(elm => {
-                elm._removeDataValue("state", "active");
-            });
+            ;[...element.querySelector('[data-lib-tabs-area]').children].forEach(elm => {
+                elm._removeDataValue('state', 'active')
+            })
 
-            element.querySelector(`[data-lib-tabs-area]`).children[index]._addDataValue("state", "active");
-
-            if (callback) {
-                callback(index);
-            }
+            element.querySelector('[data-lib-tabs-area]').children[index]._addDataValue('state', 'active')
         })
-    });
-};
-
-export default LibTabs;
+    })
+}