@newlogic-digital/ui 3.0.1 → 3.1.0

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;
+    })
+}

package/src/scripts/Libraries/Tippy.js

@@ -0,0 +1,118 @@
+import { loadStimulus, importStyle } from '../Utils/Functions/+.js'
+import cdn from '../Utils/cdn.js'
+
+export default class LibTippy {
+    async init(element, options, template) {
+        const tippy = (await import('tippy.js')).default
+        const { roundArrow } = await import('tippy.js')
+
+        await importStyle(cdn.tippy)
+
+        if (typeof element._tippy !== 'undefined') {
+            return false
+        }
+
+        if (this.type.includes('dropdown')) {
+            this.options.placement = 'bottom-end'
+            this.options.arrow = false
+            this.options.maxWidth = 'none'
+        }
+
+        if (this.type.includes('arrow')) {
+            options.arrow = roundArrow
+        }
+
+        if (!template.startsWith('/')) {
+            if (template !== '') {
+                options.content = document.querySelector('#' + template).innerHTML
+            } else {
+                options.content = `
+                  <div class="ui-dropdown">
+                    <div class="wrp_dropdown_body">
+                      ${element.getAttribute('aria-label')}
+                    </div>
+                  </div>
+                `
+            }
+        }
+
+        if (typeof element.dataset.libTippySlot !== 'undefined') {
+            for (const [key, value] of Object.entries(JSON.parse(element.dataset.libTippySlot))) {
+                options.content = options.content.replaceAll(`{${key}}`, value).replaceAll(`%7B${key}%7B`, value)
+            }
+        }
+
+        tippy(element, options)
+    }
+
+    constructor(element, attributes = ['tooltip', '']) {
+        const self = this
+
+        this.options = {
+            content: '',
+            placement: 'bottom',
+            trigger: 'mouseenter focus',
+            interactive: true,
+            appendTo: 'parent',
+            arrow: false,
+            theme: 'light-border',
+            animation: 'scale',
+            inertia: true,
+            allowHTML: true,
+            onShow: (instance) => {
+                let name = this.template
+
+                if (this.type.includes('-full')) {
+                    instance.popper.classList.add('is-full')
+                    document.documentElement.classList.add('m:is-body-overlay')
+                }
+
+                if (typeof name === 'undefined') {
+                    name = this.type
+                }
+
+                instance.popper.querySelector('.tippy-box').setAttribute('data-name', name)
+
+                loadStimulus(instance.popper.querySelector('.tippy-content'))
+            },
+            onHide: () => {
+                if (this.type.includes('-full')) {
+                    setTimeout(() => document.documentElement.classList.remove('m:is-body-overlay'), 50)
+                }
+            }
+        }
+
+        this.type = attributes[0]
+        this.template = attributes[1]
+
+        if (this.type.includes('dropdown')) {
+            this.options.trigger = 'click'
+        }
+
+        if (typeof element.dataset.tippyTrigger !== 'undefined') {
+            this.options.trigger = element.dataset.tippyTrigger
+        }
+
+        this.options.showOnCreate = true
+
+        this.options.trigger !== 'manual' && this.options.trigger.split(' ').forEach(event => {
+            element.addEventListener(event, async function e() {
+                if (self.template.startsWith('/') && self.options.content === '') {
+                    element.style.cursor = 'wait'
+
+                    fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
+                        return response.json()
+                    }).then(async(data) => {
+                        self.options.content = data.content
+                        element.style.cursor = ''
+                        await self.init(element, self.options, self.template)
+                        element.removeEventListener(event, e)
+                    })
+                } else {
+                    await self.init(element, self.options, self.template)
+                    element.removeEventListener(event, e)
+                }
+            })
+        })
+    }
+}

package/src/scripts/Ui/+.js

@@ -1,3 +1,5 @@
-import './Input.js';
-import './Select.js';
-import './Wsw.js';
+import './Checkbox.js'
+import './Input.js'
+import './Radio.js'
+import './Select.js'
+import './Text.js'

package/src/scripts/Ui/Checkbox.js

@@ -0,0 +1,19 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('ui-checkbox', class extends Controller {
+    validate(element) {
+        element.parentNode._removeDataValue('state', 'valid invalid')
+
+        if (element.checkValidity()) {
+            element.parentNode._addDataValue('state', 'valid')
+        } else {
+            element.parentNode._addDataValue('state', 'invalid')
+        }
+    }
+
+    connect() {
+        const input = this.element.querySelector('input:not([type="hidden"])')
+
+        input.addEventListener('change', () => this.validate(input))
+    }
+})