@newlogic-digital/ui 3.0.3 → 3.2.0

package/src/scripts/Ui/Select.js

@@ -1,54 +1,81 @@
-import {LibStimulus, Controller} from "../Libraries/Stimulus.js";
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('ui-select', class extends Controller {
+    validate(element, select) {
+        element._removeDataValue('state', 'invalid valid focus')
+
+        if (element.querySelector('[class^="icon"][class*="valid"]') !== null) {
+            element.querySelector('[class^="icon"][class*="valid"]').remove()
+        }
+
+        let validationMessage = select.validationMessage
+
+        if (typeof select.dataset.validationMessage !== 'undefined') {
+            validationMessage = select.dataset.validationMessage
+        }
+
+        if (select.checkValidity()) {
+            element._addDataValue('state', 'valid')
+        } else {
+            element._addDataValue('state', 'invalid')
+
+            if (element.querySelector('[class^="icon"][class*="valid"]') === null) {
+                const icon = element.querySelector('.icon-r')
+                const elm = icon || element
+                const where = icon ? 'afterend' : 'beforeend'
+
+                elm.insertAdjacentHTML(where, `<div class="icon-r icon-invalid text-error lib-hint-top lib-hint-error" tabindex="0" aria-label="${validationMessage}"><svg><use href="#icon-exclamation-circle"></use></svg></div>`)
+            }
+        }
+    }
 
-LibStimulus.register("ui-select", class extends Controller {
     connect() {
-        let self = this, element = self.element,
-            select = element.querySelector("select"),
-            option = [...element.querySelectorAll("[data-option]")];
-
-        element.addEventListener("click", () => {
-            console.log(element._hasDataValue("state", "focus"));
-            if (!element._hasDataValue("state", "focus")) {
-                element._addDataValue("state", "focus");
+        const element = this.element
+        const select = element.querySelector('select')
+        const option = element.querySelectorAll('[data-option]')
+
+        element.addEventListener('click', () => {
+            if (!element._hasDataValue('state', 'focus')) {
+                element._addDataValue('state', 'focus')
             } else {
-                element._removeDataValue("state", "focus");
+                element._removeDataValue('state', 'focus')
             }
 
-            element.addEventListener("blur", function e() {
-                element._removeDataValue("state", "focus");
-                element.removeEventListener("blur", e);
-            }, true);
-        }, true);
-
-        select.addEventListener("change", () => {
-            element._removeDataValue("state", "invalid valid");
+            element.addEventListener('blur', function e() {
+                element._removeDataValue('state', 'focus')
+                element.removeEventListener('blur', e)
+            }, true)
+        }, true)
 
-            if (select.checkValidity()) {
-                element._addDataValue("state", "valid");
-            } else {
-                element._addDataValue("state", "invalid");
+        element.addEventListener('click', e => {
+            if ((element._hasDataValue('state', 'focus') && e.timeStamp === 0) || e.target.tagName === 'OPTION') {
+                element._removeDataValue('state', 'focus')
             }
+        })
+
+        select.addEventListener('change', () => {
+            this.validate(element, select)
 
-            if (select.value === "") {
-                element._removeDataValue("state", "active");
+            if (select.value === '') {
+                element._removeDataValue('state', 'active')
             } else {
-                element._addDataValue("state", "active");
+                element._addDataValue('state', 'active')
             }
-        });
+        })
 
         if (option[0] !== null) {
-            option.map((option) => {
-                option.addEventListener("click", () => {
-                    select.value = option.getAttribute("data-option");
-                    select.dispatchEvent(new Event('change', { 'bubbles': true }));
-                });
-            });
+            option.forEach(option => {
+                option.addEventListener('click', () => {
+                    select.value = option.getAttribute('data-option')
+                    select.dispatchEvent(new Event('change', { bubbles: true }))
+                })
+            })
         }
 
-        if (select.value === "") {
-            element._removeDataValue("state", "active");
+        if (select.value === '') {
+            element._removeDataValue('state', 'active')
         } else {
-            element._addDataValue("state", "active");
+            element._addDataValue('state', 'active')
         }
     }
-});
+})

package/src/scripts/Ui/Text.js

@@ -0,0 +1,25 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('ui-text', class extends Controller {
+    connect() {
+        const element = this.element
+
+        Array.from(element.querySelectorAll('table')).forEach(table => {
+            this.wrap(table, new DOMParser().parseFromString('<div class="elm_text_table"></div>', 'text/html').body.firstChild)
+        })
+
+        Array.from(element.querySelectorAll('iframe')).forEach(iframe => {
+            if (iframe.src.match(/youtube\.com/i)) {
+                this.wrap(iframe, new DOMParser().parseFromString(`<div class="elm_text_video" style="max-width: ${iframe.width.includes('%') ? iframe.width : iframe.width + 'px'}"></div>`, 'text/html').body.firstChild)
+            } else if (iframe.width && iframe.style.aspectRatio !== 'undefined') {
+                iframe.style.aspectRatio = iframe.width + '/' + iframe.height
+                iframe.style.height = 'auto'
+            }
+        })
+    }
+
+    wrap(el, wrapper) {
+        el.parentNode.insertBefore(wrapper, el)
+        wrapper.appendChild(el)
+    }
+})

package/src/scripts/Utils/+.js

@@ -0,0 +1,3 @@
+import './Functions/+.js'
+export { default as cdn } from './cdn.js'
+import './global.js'

package/src/scripts/Utils/Functions/+.js

@@ -1,6 +1,6 @@
-export { default as bodyLoaded } from './bodyLoaded.js';
-import './dataValue.js';
-export { default as importScript } from './importScript.js';
-export { default as importStyle } from './importStyle.js';
-export { default as inView } from './inView.js';
-export { default as loadStimulus } from './loadStimulus.js';
+import './dataValue.js'
+export { default as importScript } from './importScript.js'
+export { default as importStyle } from './importStyle.js'
+export { default as inView } from './inView.js'
+export { default as loadStimulus } from './loadStimulus.js'
+export { default as replaceTag } from './replaceTag.js'

package/src/scripts/Utils/Functions/dataValue.js

@@ -1,49 +1,52 @@
 Element.prototype._addDataValue = function(key, value) {
-    key = `data-${key}`;
+    key = `data-${key}`
 
-    let attribute = this.getAttribute(key);
+    let attribute = this.getAttribute(key)
 
     if (attribute === null) {
-        this.setAttribute(key, value);
+        this.setAttribute(key, value)
     } else {
-        value = value.split(" ");
-        attribute = attribute.split(" ");
+        value = value.split(' ')
+        attribute = attribute.split(' ')
 
-        value.map(value => {
-            !attribute.includes(value) && attribute.push(value)
-        });
+        value.map(value => !attribute.includes(value) && attribute.push(value))
 
-        this.setAttribute(key, attribute.join(" "));
+        this.setAttribute(key, attribute.join(' '))
     }
 }
 
 Element.prototype._removeDataValue = function(key, value) {
-    let result = [];
+    const result = []
 
-    key = `data-${key}`;
+    key = `data-${key}`
 
-    let attribute = this.getAttribute(key);
+    const attribute = this.getAttribute(key)
 
-    if (attribute === null) {
-        return;
-    }
+    if (attribute === null) return
 
-    attribute.split(" ").map(attribute => {
-        !value.split(" ").includes(attribute) && result.push(attribute)
-    });
+    attribute.split(' ').map(attribute => !value.split(' ').includes(attribute) && result.push(attribute))
 
     if (result.length !== 0) {
-        this.setAttribute(key, result.join(" "));
+        this.setAttribute(key, result.join(' '))
     } else {
-        this.removeAttribute(key);
+        this.removeAttribute(key)
     }
 }
 
 Element.prototype._hasDataValue = function(key, value) {
-    key = `data-${key}`;
+    key = `data-${key}`
 
-    let attribute = this.getAttribute(key);
+    const attribute = this.getAttribute(key)
+
+    if (attribute === null) return false
+    return attribute.split(' ').includes(value)
+}
 
-    if (attribute === null) return false;
-    return attribute.split(" ").includes(value);
-}
+Element.prototype._getDataValue = function(key) {
+    key = `data-${key}`
+
+    const attribute = this.getAttribute(key)
+
+    if (attribute === null) return ''
+    return attribute
+}

package/src/scripts/Utils/Functions/importScript.js

@@ -1,19 +1,17 @@
-function importScript(url) {
+export default function importScript(url) {
     return new Promise((resolve, reject) => {
         if (document.querySelector(`script[src="${url}"]`) === null) {
-            const script = document.createElement('script');
+            const script = document.createElement('script')
 
-            script._importScript = new Promise((load, error) => {
-                script.src = url;
-                script.onload = () => {load(); resolve()};
-                script.onerror = () => {error(); reject()};
-            });
+            script._importScript = new Promise((resolve, reject) => {
+                script.src = url
+                script.onload = resolve
+                script.onerror = reject
+            }).then(resolve).catch(reject)
 
-            document.head.appendChild(script);
+            document.head.appendChild(script)
         } else {
-            document.querySelector(`script[src="${url}"]`)._importScript.then(resolve);
+            document.querySelector(`script[src="${url}"]`)._importScript.then(resolve)
         }
     })
 }
-
-export default importScript;

package/src/scripts/Utils/Functions/importStyle.js

@@ -1,5 +1,18 @@
-export default function importStyle (url) {
-    if (document.querySelector(`link[href="${url}"]`) === null) {
-        document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" href="${url}" />`);
-    }
-}
+export default function importStyle(url) {
+    return new Promise((resolve, reject) => {
+        if (document.querySelector(`link[href="${url}"]`) === null) {
+            const style = document.createElement('link')
+
+            style._importStyle = new Promise((resolve, reject) => {
+                style.href = url
+                style.rel = 'stylesheet'
+                style.onload = resolve
+                style.onerror = reject
+            }).then(resolve).catch(reject)
+
+            document.head.prepend(style)
+        } else {
+            document.querySelector(`link[href="${url}"]`)._importStyle.then(resolve)
+        }
+    })
+}

package/src/scripts/Utils/Functions/inView.js

@@ -1,27 +1,25 @@
-export default function inView(element, callback, options) {
-    let inView = false;
+export default function inView(element, options) {
+    let inView = false
 
-    if (typeof IntersectionObserver === "undefined" && callback) {
-        callback();
-        return false;
-    }
+    return new Promise((resolve) => {
+        if (typeof IntersectionObserver === 'undefined') {
+            resolve()
+            return false
+        }
 
-    if (typeof options === "undefined") {
-        options = {};
-    }
+        if (typeof options === 'undefined') {
+            options = {}
+        }
 
-    if (typeof options.rootMargin === "undefined") {
-        options.rootMargin = "100px";
-    }
+        if (typeof options.rootMargin === 'undefined') {
+            options.rootMargin = '100px'
+        }
 
-    new IntersectionObserver(
-        entries => {
+        new IntersectionObserver(entries => {
             if (entries[0].isIntersecting && inView === false) {
-                inView = entries[0].isIntersecting;
-                if (callback) {
-                    callback()
-                }
+                inView = entries[0].isIntersecting
+                resolve()
             }
-        }, options
-    ).observe(element);
-}
+        }, options).observe(element)
+    })
+}

package/src/scripts/Utils/Functions/loadStimulus.js

@@ -1,37 +1,39 @@
-let dynamicControllers = ["ui-input", "ui-select", "ui-wsw", "c-cookieconsent", "c-form-cookieconsent"];
-let dynamicActions = [[`a[href^="#"]`, "click->lib#anchor"], [`.ui-btn`, "click->lib#ripple"]];
+const dynamicControllers = ['ui-input', 'ui-select', 'ui-text', 'ui-checkbox', 'ui-radio', 'c-cookieconsent', 'c-form-cookieconsent']
+const dynamicActions = [['.ui-btn', 'click->lib#ripple']]
+
+if (!('scrollBehavior' in document.documentElement.style)) {
+    dynamicActions.push(['a[href^="#"]', 'click->lib#anchor'])
+}
 
 function loadControllers(parent, selectors) {
     if (parent !== null) {
-        selectors.forEach((selector) => {
-            [...parent.getElementsByClassName(selector)].filter((element) => {
-                if (element.getAttribute("data-controller") === null) {
-                    element.setAttribute("data-controller", element.className.split(" ")[0]);
+        selectors.forEach(selector => {
+            [...parent.getElementsByClassName(selector)].forEach(element => {
+                if (element.getAttribute('data-controller') === null) {
+                    element.setAttribute('data-controller', selector)
                 }
-            });
-        });
+            })
+        })
     }
 }
 
 function loadActions(parent, selectors) {
     if (parent !== null) {
-        selectors.forEach((selector) => {
-            [...parent.querySelectorAll(selector[0])].filter((element) => {
-                let attribute = element.getAttribute("data-action");
+        selectors.forEach(selector => {
+            parent.querySelectorAll(selector[0]).forEach(element => {
+                const attribute = element.getAttribute('data-action')
 
                 if (attribute === null) {
-                    element.setAttribute("data-action", selector[1]);
+                    element.setAttribute('data-action', selector[1])
                 } else if (attribute.indexOf(selector[1]) === -1) {
-                    element.setAttribute("data-action", `${attribute} ${selector[1]}`);
+                    element.setAttribute('data-action', `${attribute} ${selector[1]}`)
                 }
-            });
-        });
+            })
+        })
     }
 }
 
-function loadStimulus(selector) {
-    loadControllers(selector, dynamicControllers);
-    loadActions(selector, dynamicActions);
+export default function loadStimulus(selector) {
+    loadControllers(selector, dynamicControllers)
+    loadActions(selector, dynamicActions)
 }
-
-export default loadStimulus;

package/src/scripts/Utils/Functions/replaceTag.js

@@ -0,0 +1,12 @@
+export default function replaceTag(documentElement) {
+    documentElement.querySelectorAll('[data-lib-replace-tag]').forEach(element => {
+        const replaceTag = document.querySelector(`[data-lib-replace-tag=${element.dataset.libReplaceTag}]`)
+        const placement = element.closest('head') ? document.head : replaceTag.parentElement
+
+        replaceTag ? (replaceTag.outerHTML = element.outerHTML) : placement.insertAdjacentHTML('beforeend', element.outerHTML)
+
+        if (element.tagName === 'SCRIPT') {
+            document.querySelector(`[data-lib-replace-tag=${element.dataset.libReplaceTag}]`)._addDataValue('controller', 'lib-script')
+        }
+    })
+}

package/src/scripts/Utils/cdn.js

@@ -1,5 +1,7 @@
 export default {
-    "recaptcha": "https://www.google.com/recaptcha/api.js?render={apikey}",
-    "seamless": "https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.2.3/dist/es5/seamless.min.js",
-    "pickr_css": "https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/themes/nano.min.css"
-}
+    recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
+    seamless: 'https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@2.1.6/lib/bundle.min.js',
+    pickr_css: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/themes/nano.min.css',
+    tippy: 'https://cdn.jsdelivr.net/combine/npm/tippy.js@6.3.7/dist/tippy.css,npm/tippy.js@6.3.1/dist/svg-arrow.css,npm/tippy.js@6.3.7/themes/light-border.css,npm/tippy.js@6.3.7/animations/scale.css',
+    datepicker: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css'
+}

package/src/scripts/Utils/global.js

@@ -1,40 +1,17 @@
-if ('serviceWorker' in navigator && location.protocol === "https:") {
-    window.addEventListener('load', function () {
-        if (!document.documentElement.classList.contains("no-sw")) {
-            navigator.serviceWorker.register('/sw.js').catch(function (e) {
-                console.error('Error during service worker registration:', e);
-            });
+if ('serviceWorker' in navigator && location.protocol === 'https:') {
+    window.addEventListener('load', () => {
+        if (!document.documentElement.classList.contains('no-sw')) {
+            navigator.serviceWorker.register('/sw.js').catch(e => {
+                console.error('Error during service worker registration:', e)
+            })
         } else {
-            navigator.serviceWorker.getRegistrations().then(function (registrations) {
+            navigator.serviceWorker.getRegistrations().then(registrations => {
                 if (registrations.length > 0) {
-                    for (let registration of registrations) {
+                    for (const registration of registrations) {
                         registration.unregister()
                     }
                 }
-            });
+            })
         }
-    });
+    })
 }
-
-if (document.body.classList.contains("is-body-preload")) {
-    document.body.classList.remove("is-body-preload");
-    setTimeout(function () {
-        document.body.classList.add("is-body-loaded");
-    }, 300);
-}
-
-if (document.querySelector("[data-loadcss]") !== null) {
-    if (typeof document.fonts !== "undefined") {
-        document.fonts.ready.then(function () {
-            document.documentElement.classList.add("wf-active");
-        });
-
-        setTimeout(() => {
-            if (!document.documentElement.classList.contains("wf-active")) {
-                document.documentElement.classList.add("wf-active");
-            }
-        }, 500);
-    } else {
-        document.documentElement.classList.add("wf-active");
-    }
-}

package/src/scripts/main.js

@@ -1,6 +1,6 @@
-import "./Utils/global.js";
-import "./Libraries/+.js";
-import "./Layout/+.js";
-import "./Sections/+.js";
-import "./Components/+.js";
-import "./Ui/+.js";
+import './Utils/global.js'
+import './Libraries/+.js'
+import './Layout/+.js'
+import './Sections/+.js'
+import './Components/+.js'
+import './Ui/+.js'