@newlogic-digital/ui 3.2.0 → 3.4.2

package/src/scripts/Libraries/Stimulus.js

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

package/src/scripts/Libraries/Swup.js

@@ -1,7 +1,7 @@
 import Swup from 'swup'
 import { getController, loadStimulus } from './Stimulus.js'
+import { closeDialog } from 'winduum/src/libraries/dialog.js'
 import LibAnchor from './Anchor.js'
-import LibDialog from './Dialog.js'
 import LibCookieConsent from './CookieConsent.js'
 import replaceTag from '../Utils/Functions/replaceTag.js'
 
@@ -10,15 +10,21 @@ const LibSwup = new Swup({
     linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
 })
 
-LibSwup.on('clickLink', async() => {
+LibSwup.on('clickLink', async({ target }) => {
     document.body.classList.remove('overflow-hidden')
 
     if (document.querySelector('.lib-drawer[data-state~="active"]') !== null) {
-        getController(document.body, 'lib-drawer').hide()
+        /** @type {LibDrawer} */
+        const LibDrawer = getController(document.body, 'lib-drawer')
+        LibDrawer.hide()
     }
 
     if (document.querySelector('.lib-dialog') !== null) {
-        await LibDialog.hide()
+        await closeDialog()
+    }
+
+    if (window.location.href === target.closest('a').href) {
+        document.documentElement.scroll({ top: 0 })
     }
 })
 
@@ -26,47 +32,33 @@ LibSwup.on('animationOutDone', () => {
     document.documentElement.scroll({ top: 0, behavior: 'instant' })
 })
 
+/** @var {Array} dataLayer */
+/** @var {Function} rc */
+/** @var {Function} retargetingHit */
+/** @var {Function} conversionHit */
+/** @var {Object} retargetingConf */
+/** @var {Object} conversionConf */
+/** @var {Function} fbq */
 LibSwup.on('contentReplaced', () => {
     const content = new DOMParser().parseFromString(LibSwup.cache.getCurrentPage().originalContent, 'text/html')
 
     replaceTag(content)
 
     LibAnchor.init()
+    LibCookieConsent.init()
 
     LibSwup.options.containers.forEach(selector => {
         loadStimulus(document.querySelector(selector))
     })
 
-    if (typeof window.fbq !== 'undefined') {
-        window.fbq('track', 'PageView')
-    }
-
-    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
-                    })
-                }
-            }
-        })
-    }
+    window.dataLayer && window.dataLayer.push({
+        event: 'page_view'
+    })
 
-    if (typeof window.dataLayer !== 'undefined') {
-        window.dataLayer.push({
-            event: 'VirtualPageview',
-            virtualPageURL: window.location.pathname + window.location.search,
-            virtualPageTitle: document.title
-        })
-    }
+    window.rc?.retargetingHit && window.rc.retargetingHit(window.retargetingConf)
+    window.rc?.conversionHit && window.rc.conversionHit(window.conversionConf)
 
-    if (typeof LibCookieConsent !== 'undefined') {
-        LibCookieConsent.init()
-    }
+    window.fbq && window.fbq('track', 'PageView')
 })
 
 export default LibSwup

package/src/scripts/Libraries/Tabs.js

@@ -1,13 +1,13 @@
 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.addEventListener('click', () => {
+            arguments[0].preventDefault()
 
-            selector.closest('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach(elm => elm._removeDataValue('state', 'active'))
+            selector.closest('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach(element => element._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(element => {
+                element._removeDataValue('state', 'active')
             })
 
             element.querySelector('[data-lib-tabs-area]').children[index]._addDataValue('state', 'active')

package/src/scripts/Libraries/Tippy.js

@@ -27,7 +27,7 @@ export default class LibTippy {
                 options.content = document.querySelector('#' + template).innerHTML
             } else {
                 options.content = `
-                  <div class="ui-dropdown">
+                  <div class="c-dropdown">
                     <div class="wrp_dropdown_body">
                       ${element.getAttribute('aria-label')}
                     </div>
@@ -99,12 +99,14 @@ export default class LibTippy {
             element.addEventListener(event, async function e() {
                 if (self.template.startsWith('/') && self.options.content === '') {
                     element.style.cursor = 'wait'
+                    element._addDataValue('state', 'loading')
 
                     fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
                         return response.json()
                     }).then(async(data) => {
                         self.options.content = data.content
                         element.style.cursor = ''
+                        element._removeDataValue('state', 'loading')
                         await self.init(element, self.options, self.template)
                         element.removeEventListener(event, e)
                     })

package/src/scripts/Ui/+.js

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

package/src/scripts/Ui/Checkbox.js

@@ -1,19 +1,10 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { checkValidity } from '../Utils/Functions/+.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')
-        }
-    }
-
+['ui-checkbox', 'ui-radio'].forEach(identifier => LibStimulus.register(identifier, class extends Controller {
     connect() {
         const input = this.element.querySelector('input:not([type="hidden"])')
 
-        input.addEventListener('change', () => this.validate(input))
+        input.addEventListener('change', () => checkValidity(this.element))
     }
-})
+}))

package/src/scripts/Ui/Input.js

@@ -1,62 +1,20 @@
 import cdn from '../Utils/cdn.js'
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { importStyle } from '../Utils/Functions/+.js'
+import { importStyle, checkValidity } from '../Utils/Functions/+.js'
 
 LibStimulus.register('ui-input', class extends Controller {
     async connect() {
-        const element = this.element
+        checkValidity(this.element, { validate: false })
 
-        this.validate(element, false)
+        this.element.addEventListener('change', () => checkValidity(this.element))
 
-        element.addEventListener('change', () => {
-            this.validate(element, true)
-        })
+        this.typeNumber(this.element)
 
-        this.typeNumber(element)
+        this.typeFile(this.element)
 
-        this.typeFile(element)
+        await this.typeDatetime(this.element)
 
-        await this.typeDatetime(element)
-
-        await this.typeColor(element)
-    }
-
-    validate(element, validate) {
-        const input = element.querySelectorAll('input, textarea')
-
-        input.forEach(input => {
-            let validationMessage = input.validationMessage
-
-            if (typeof input.dataset.validationMessage !== 'undefined') {
-                validationMessage = input.dataset.validationMessage
-            }
-
-            if (input.outerHTML.match(/(data-novalidate|readonly|hidden|data-state="invalid")/) === null && validate) {
-                element._removeDataValue('state', 'valid invalid active')
-
-                if (element.querySelector('[class^="icon"][class*="valid"]') !== null) {
-                    element.querySelector('[class^="icon"][class*="valid"]').remove()
-                }
-
-                if (input.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>`)
-                    }
-                }
-            }
-
-            if (input.value !== '') {
-                element._addDataValue('state', 'active')
-            }
-        })
+        await this.typeColor(this.element)
     }
 
     typeNumber(element) {
@@ -80,7 +38,7 @@ LibStimulus.register('ui-input', class extends Controller {
                 const num = parseInt(input.value === '' ? 0 : input.value) + parseInt(input.step === '' ? 1 : input.step)
 
                 if (num <= input.max || input.max === '') {
-                    input.value = num
+                    input.value = num.toString()
                     input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
             })
@@ -90,7 +48,7 @@ LibStimulus.register('ui-input', class extends Controller {
                 const num = parseInt(input.value) - parseInt(input.step === '' ? 1 : input.step)
 
                 if (num >= input.min || input.min === '') {
-                    input.value = num
+                    input.value = num.toString()
                     input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
             })
@@ -101,7 +59,7 @@ LibStimulus.register('ui-input', class extends Controller {
         const date = element.querySelector('[type^="date"]')
 
         if (date !== null && !document.documentElement.classList.contains('mobile')) {
-            const lang = await import(`/* @vite-ignore */ https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/js/i18n/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.min.js`)
+            const lang = await import(/* @vite-ignore */ cdn.datepickerLang.replace('{lang}', document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang))
             const { Datepicker } = await import('vanillajs-datepicker')
 
             await importStyle(cdn.datepicker)
@@ -119,7 +77,7 @@ LibStimulus.register('ui-input', class extends Controller {
             const hidden = element.querySelector('[type="hidden"]')
 
             if (datetime && hidden.value.indexOf(':') !== -1) {
-                hidden.setAttribute('data-time', hidden.value.substr(hidden.value.indexOf(':') - 2, hidden.value.length))
+                hidden.setAttribute('data-time', hidden.value.substring(hidden.value.indexOf(':') - 2, hidden.value.length))
             }
 
             const datepicker = new Datepicker(element.querySelector('[type="text"]'), Object.assign({
@@ -205,7 +163,7 @@ LibStimulus.register('ui-input', class extends Controller {
                         datepicker.element.focus()
                     })
 
-                    footer.querySelector('[data-ok]').addEventListener('click', e => {
+                    footer.querySelector('[data-ok]').addEventListener('click', () => {
                         if (hidden.value === '') {
                             footer.querySelector('.today-btn').click()
                         }
@@ -236,20 +194,16 @@ LibStimulus.register('ui-input', class extends Controller {
 
     async typeColor(element) {
         if (element.querySelector('[type="color"]') !== null) {
+            const Pickr = (await import('@simonwep/pickr')).default
+            const input = element.querySelector('input')
+
+            await importStyle(cdn.pickrCss)
+
             element.setAttribute('data-type', 'color')
             element.querySelector('[type="color"]').setAttribute('inputmode', 'none')
             element.querySelector('[type="color"]').setAttribute('type', 'text')
             element.insertAdjacentHTML('afterbegin', '<span class="color"></span>')
 
-            await importStyle(cdn.pickr_css)
-
-            let Pickr = (await import('@simonwep/pickr')).default
-
-            if (typeof Pickr.default !== 'undefined') {
-                Pickr = Pickr.default
-            }
-
-            const input = element.querySelector('input')
             input.setAttribute('maxlength', '9')
             input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
 
@@ -278,8 +232,8 @@ LibStimulus.register('ui-input', class extends Controller {
                 input.dispatchEvent(new Event('change', { bubbles: true }))
             })
 
-            input.addEventListener('change', e => {
-                pickr.setColor(e.target.value)
+            input.addEventListener('change', ({ target }) => {
+                pickr.setColor(target.value)
             })
         }
     }

package/src/scripts/Ui/Select.js

@@ -1,34 +1,7 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { checkValidity } from '../Utils/Functions/+.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>`)
-            }
-        }
-    }
-
     connect() {
         const element = this.element
         const select = element.querySelector('select')
@@ -44,8 +17,8 @@ LibStimulus.register('ui-select', class extends Controller {
             element.addEventListener('blur', function e() {
                 element._removeDataValue('state', 'focus')
                 element.removeEventListener('blur', e)
-            }, true)
-        }, true)
+            })
+        })
 
         element.addEventListener('click', e => {
             if ((element._hasDataValue('state', 'focus') && e.timeStamp === 0) || e.target.tagName === 'OPTION') {
@@ -54,13 +27,8 @@ LibStimulus.register('ui-select', class extends Controller {
         })
 
         select.addEventListener('change', () => {
-            this.validate(element, select)
-
-            if (select.value === '') {
-                element._removeDataValue('state', 'active')
-            } else {
-                element._addDataValue('state', 'active')
-            }
+            checkValidity(element)
+            this.valueCheck(select)
         })
 
         if (option[0] !== null) {
@@ -72,10 +40,14 @@ LibStimulus.register('ui-select', class extends Controller {
             })
         }
 
+        this.valueCheck(select)
+    }
+
+    valueCheck(select) {
         if (select.value === '') {
-            element._removeDataValue('state', 'active')
+            this.element._removeDataValue('state', 'active')
         } else {
-            element._addDataValue('state', 'active')
+            this.element._addDataValue('state', 'active')
         }
     }
 })

package/src/scripts/Ui/Text.js

@@ -2,13 +2,11 @@ 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.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 => {
+        this.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') {

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

@@ -1,6 +1,6 @@
+export { default as checkValidity } from './checkValidity.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/checkValidity.js

@@ -0,0 +1,44 @@
+export default function checkValidity(element, options = {}) {
+    const { validate, message } = Object.assign({ validate: true, message: false }, options)
+    const selectors = element.querySelectorAll('input, textarea, select')
+
+    selectors.forEach(selector => {
+        const isInput = element.classList.contains('ui-input')
+        const isSelect = element.classList.contains('ui-select')
+        const validationMessage = selector.dataset.validationMessage ?? selector.validationMessage
+        const validityElement = element.closest('.ui-input-group')?.querySelector('em') ?? element.querySelector('em')
+
+        if (!selector.outerHTML.match(/(data-novalidate|readonly|hidden)/) && validate) {
+            element._removeDataValue('state', 'valid invalid active')
+
+            if ((isInput || isSelect) && element.querySelector('[class^="icon"][class*="valid"]') !== null) {
+                element.querySelector('[class^="icon"][class*="valid"]').remove()
+            }
+
+            if (selector.checkValidity()) {
+                element._addDataValue('state', 'valid')
+
+                if (validityElement) {
+                    validityElement.remove()
+                }
+            } else {
+                element._addDataValue('state', 'invalid')
+
+                if (!validityElement && message) {
+                    (element.closest('.ui-input-group') ?? element).insertAdjacentHTML('beforeend', `<em>${validationMessage}</em>`)
+                }
+
+                if ((isInput || isSelect) && element.querySelector('[class^="icon"][class*="valid"]') === null) {
+                    const icon = element.querySelector('.icon-r')
+                    const where = icon || element
+
+                    where.insertAdjacentHTML(icon ? 'afterend' : 'beforeend', `<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>`)
+                }
+            }
+        }
+
+        if (isInput && selector.value !== '') {
+            element._addDataValue('state', 'active')
+        }
+    })
+}

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

@@ -1,3 +1,5 @@
+import naja from 'naja'
+
 const dynamicControllers = ['ui-input', 'ui-select', 'ui-text', 'ui-checkbox', 'ui-radio', 'c-cookieconsent', 'c-form-cookieconsent']
 const dynamicActions = [['.ui-btn', 'click->lib#ripple']]
 
@@ -33,7 +35,8 @@ function loadActions(parent, selectors) {
     }
 }
 
-export default function loadStimulus(selector) {
+export default function loadStimulus(selector, najaLoad = true) {
     loadControllers(selector, dynamicControllers)
     loadActions(selector, dynamicActions)
+    najaLoad && naja.uiHandler.bindUI(selector)
 }

package/src/scripts/Utils/cdn.js

@@ -1,7 +1,7 @@
 export default {
     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',
+    pickrCss: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.2/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'
+    datepicker: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.3/dist/css/datepicker.min.css',
+    datepickerLang: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.3/js/i18n/locales/{lang}.min.js'
 }

package/src/scripts/Utils/global.js

@@ -1,15 +1,13 @@
+!CSS.supports('selector(:has(*))') && (async() => (await import('css-has-pseudo/browser')).default(document))()
+
 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)
-            })
+            navigator.serviceWorker.register('/sw.js').catch(e => console.error(e))
         } else {
-            navigator.serviceWorker.getRegistrations().then(registrations => {
-                if (registrations.length > 0) {
-                    for (const registration of registrations) {
-                        registration.unregister()
-                    }
+            navigator.serviceWorker.getRegistrations().then(async registrations => {
+                for (const registration of registrations) {
+                    await registration.unregister()
                 }
             })
         }

package/src/styles/Components/+.css

@@ -1,4 +1,4 @@
 @import "CookieConsent.css";
 @import "Dialog/+.css";
+@import "Dropdown/+.css";
 @import "Form/+.css";
-@import "Item/+.css";