@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/icons.svg

@@ -1,32 +1,38 @@
-<svg hidden="">
-    <symbol id="icon-chevron-left" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+<svg class="hidden">
+    <symbol id="icon-chevron-left" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
     </symbol>
-    <symbol id="icon-chevron-right" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+    <symbol id="icon-chevron-right" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
     </symbol>
-    <symbol id="icon-angle-down" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
-        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" />
+    <symbol id="icon-exclamation-circle" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
     </symbol>
-    <symbol id="icon-angle-up" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor">
-        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" />
+    <symbol id="icon-x-mark" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </symbol>
+    <symbol id="icon-bars-3" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
     </symbol>
-    <symbol id="icon-exclamation-circle" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    <symbol id="icon-moon" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
     </symbol>
-    <symbol id="icon-x" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M6 18L18 6M6 6l12 12" />
+    <symbol id="icon-sun" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
     </symbol>
-    <symbol id="icon-menu" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+    <symbol id="icon-at-symbol" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
     </symbol>
-    <symbol id="icon-moon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+    <symbol id="icon-calendar" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
     </symbol>
-    <symbol id="icon-sun" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+    <symbol id="icon-clock" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
     </symbol>
-    <symbol id="icon-at-symbol" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
+    <symbol id="icon-angle-down-solid" viewBox="0 0 24 24">
+        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" />
+    </symbol>
+    <symbol id="icon-angle-up-solid" viewBox="0 0 24 24">
+        <path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" />
     </symbol>
 </svg>

package/src/scripts/Components/+.js

@@ -1 +1,2 @@
-import './CookieConsent.js'
+import './Drawer.js'
+import './Popover.js'

package/src/scripts/Components/Drawer.js

@@ -0,0 +1,60 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { showDrawer, closeDrawer, scrollDrawer } from 'winduum/src/components/drawer/index.js'
+
+LibStimulus.register('c-drawer', class extends Controller {
+    static values = {
+        inertMatch: {
+            type: String,
+            default: ':where(.c-drawer, .l-header)'
+        }
+    }
+
+    connect() {
+        this.scrollReset()
+        this.element.addEventListener('click', ({ target }) => {
+            if (target === this.element) this.close()
+        })
+    }
+
+    scrollReset() {
+        this.element.scroll({ left: this.element.scrollWidth, behavior: 'instant' })
+    }
+
+    scroll({ target }) {
+        scrollDrawer(target)
+    }
+
+    inert(inert) {
+        [...document.body.children].forEach((element) => {
+            if (!element.matches(this.inertMatchValue)) (element.inert = inert)
+        })
+    }
+
+    show() {
+        this.scrollReset()
+        this.element.classList.add('active')
+        showDrawer(this.element)
+        this.inert(true)
+    }
+
+    close() {
+        closeDrawer(this.element)
+    }
+
+    toggle({ currentTarget }) {
+        this.activeButton = currentTarget
+
+        if (!currentTarget.classList.contains('active')) {
+            currentTarget.classList.add('active')
+            this.show()
+        } else {
+            this.close()
+        }
+    }
+
+    dismiss() {
+        this.element.classList.remove('active')
+        this.activeButton?.classList?.remove('active')
+        this.inert(false)
+    }
+})

package/src/scripts/Components/Popover.js

@@ -0,0 +1,65 @@
+import { Controller, LibStimulus } from '../Libraries/Stimulus.js'
+import { dataset, fetchJson } from '@newlogic-digital/utils-js'
+import initAfter from '../Utils/initAfter.js'
+
+LibStimulus.register('c-popover', class extends Controller {
+    static values = {
+        url: String,
+        insertTo: String,
+        manual: Boolean
+    }
+
+    async toggle({ currentTarget, params }) {
+        const { togglePopover } = await import('winduum/src/components/popover/index.js')
+        const hasUrlValue = this.hasUrlValue && !this.popoverTarget
+
+        if (hasUrlValue) await this.fetch()
+
+        this.popoverTarget = document.getElementById(currentTarget.getAttribute('popovertarget'))
+
+        if (hasUrlValue) initAfter(this.popoverTarget)
+
+        await togglePopover(currentTarget, params)
+    }
+
+    async hide() {
+        if (this.popoverActionTarget.ariaExpanded !== 'true') return
+
+        const { hidePopover } = await import('winduum/src/components/popover/index.js')
+
+        await hidePopover(this.popoverActionTarget)
+    }
+
+    async dismiss({ target }) {
+        if (this.popoverActionTarget.ariaExpanded !== 'true') return
+
+        if (!this.popoverTarget.contains(target) && !this.popoverActionTarget.isEqualNode(target) && this.popoverActionTarget.ariaExpanded === 'true') {
+            await this.hide()
+        }
+    }
+
+    async fetch() {
+        this.popoverActionTarget.classList.add('loading', 'cursor-wait')
+
+        const { content } = await fetchJson(this.urlValue)
+
+        this.popoverActionTarget.classList.remove('loading', 'cursor-wait')
+
+        const insertElement = !this.hasInsertToValue ? this.popoverActionTarget : document.querySelector(this.insertToValue)
+        insertElement.insertAdjacentHTML(!this.hasInsertToValue ? 'afterend' : 'beforeend', content)
+
+        return content
+    }
+
+    connect() {
+        this.popoverActionTarget = this.element.querySelector('[popovertargetaction]')
+
+        if (!this.popoverActionTarget) return
+
+        ;(!this.hasManualValue || !this.manualValue) && dataset(this.popoverActionTarget, 'action').add(
+            `click->c-popover#${this.popoverActionTarget.getAttribute('popovertargetaction')}:prevent`,
+            'keydown.esc@window->c-popover#hide',
+            'click@window->c-popover#dismiss'
+        )
+    }
+})

package/src/scripts/Layout/+.js

@@ -1,2 +1 @@
 import './Header.js'
-import './Main.js'

package/src/scripts/Layout/Header.js

@@ -1,30 +1,20 @@
-import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 
-LibStimulus.register('l-header',
-    /** @property {LibDrawer} libDrawerOutlet */
-    class extends Controller {
-        connect() {
-            if (document.querySelector('#l-nav') === null) {
-                this.element.insertAdjacentHTML('afterend', `
-                    <div id="l-nav" class="lib-drawer" data-lib-drawer-target="nav" data-action="scroll->lib-drawer#scroll" inert aria-hidden="true">
-                        <div class="wrp_nav">
-                            <div class="wrp_nav_head"></div>
-                            <div class="wrp_nav_body"></div>
-                        </div>
-                    </div>
-                `)
+LibStimulus.register('l-header', class extends Controller {
+    static targets = ['logo', 'nav']
 
-                /** @type {LibDrawer} */
-                const LibDrawer = getController(document.body, 'lib-drawer')
-                LibDrawer.init()
+    connect() {
+        if (!document.querySelector('.l-nav')) {
+            this.element.insertAdjacentHTML('afterend', `
+                <div class="l-nav c-drawer" data-controller="c-drawer" data-action="scroll->c-drawer#scroll c-drawer:close->c-drawer#dismiss" inert>
+                    <div class="c-drawer-content"></div>
+                </div>
+            `)
 
-                const layoutNav = document.querySelector('#l-nav')
-                const logo = this.element.querySelector('.elm_header_logo').outerHTML
-                const nav = this.element.querySelector('.elm_header_nav').outerHTML
+            const drawerContentElement = document.querySelector('.l-nav .c-drawer-content')
 
-                layoutNav.querySelector('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
-                layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
-            }
+            drawerContentElement.insertAdjacentHTML('beforeend', this.logoTarget.outerHTML)
+            drawerContentElement.insertAdjacentHTML('beforeend', this.navTarget.outerHTML)
         }
     }
-)
+})

package/src/scripts/Libraries/+.js

@@ -1,14 +1,10 @@
-export { default as Anchor } from './Anchor.js'
-export { default as CookieConsent } from './CookieConsent.js'
+import './CookieConsent.js'
 import './Dialog.js'
-import './Drawer.js'
 import './Form.js'
 import './Naja.js'
-export { default as NativeSlider } from './NativeSlider.js'
 import './ReCaptcha.js'
-export { default as Ripple } from './Ripple.js'
-import './Script.js'
+import './Reveal.js'
+import './Ripple.js'
 import './Stimulus.js'
 export { default as Swup } from './Swup.js'
-export { default as Tabs } from './Tabs.js'
-export { default as Tippy } from './Tippy.js'
+import './Toaster.js'

package/src/scripts/Libraries/CookieConsent.js

@@ -1,67 +1,80 @@
-const LibCookieConsent = {
-    setItem: (key, value) => {
-        localStorage.setItem(key, value)
-    },
-    getItem: (key) => {
-        return localStorage.getItem(key)
-    },
-    init: () => {
-        const type = LibCookieConsent.getItem('lib-cookieconsent')
+import { LibStimulus, Controller } from './Stimulus.js'
+import { appendCookieConsent, setCookieConsent } from '@newlogic-digital/cookieconsent-js'
+import { showDialog, closeDialog } from 'winduum/src/components/dialog/index.js'
 
-        if (type !== null) {
-            JSON.parse(type).forEach(type => LibCookieConsent.append(type))
+export const getCookieConsentItem = (key = 'cookieconsent-js') => localStorage.getItem(key)
+
+export const initCookieConsent = (element = document, type = getCookieConsentItem() ?? []) => {
+    element.querySelectorAll('[data-lib-cookieconsent]').forEach((element) => {
+        if (type.includes(element.getAttribute('data-lib-cookieconsent'))) {
+            appendCookieConsent(element, {
+                ignoreAttributeName: /(type|data-lib-cookieconsent)/
+            })
+        }
+    })
+}
+
+LibStimulus.register('c-dialog-cookieconsent', class extends Controller {
+    async connect() {
+        initCookieConsent()
+
+        if (document.querySelector('.c-form-cookieconsent')) {
+            return
         }
-    },
-    set: (type) => {
-        LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify(type))
-        LibCookieConsent.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
 
-        if (type.length > 0) {
-            type.forEach(type => LibCookieConsent.append(type))
+        if (!getCookieConsentItem() || parseInt(getCookieConsentItem('cookieconsent-js-expire')) < Date.now()) {
+            setTimeout(async () => {
+                await showDialog(this.element, { closable: false })
+            }, 1500)
         } else {
-            LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify([]))
-            LibCookieConsent.remove()
+            this.element.remove()
         }
-    },
-    remove: () => {
-        document.cookie.split(';').forEach(c => {
-            document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/')
-        })
-    },
-    append: (type) => {
-        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) => {
-                    if (attribute.specified) {
-                        if (attribute.name.indexOf('data-lib-cookieconsent') === -1 && attribute.name.indexOf('type') === -1) {
-                            script.setAttribute(attribute.name, attribute.value)
-                        }
-                    }
-                })
+    async approve() {
+        await this.hide(['performance', 'marketing'])
+    }
 
-                script.innerHTML = elm.innerHTML
+    async decline() {
+        await this.hide([])
+    }
 
-                if (elm.getAttribute('data-lib-cookieconsent-delay')) {
-                    delay = parseInt(elm.getAttribute('data-lib-cookieconsent-delay'))
-                }
+    async hide(type) {
+        await setCookieConsent(type)
+        initCookieConsent(document, type)
+        await closeDialog(this.element, { remove: true })
+    }
+})
 
-                setTimeout(() => {
-                    if (elm.closest('body') !== null) {
-                        document.body.appendChild(script)
-                    } else if (elm.closest('head') !== null) {
-                        document.head.appendChild(script)
-                    }
+LibStimulus.register('c-form-cookieconsent', class extends Controller {
+    connect() {
+        document.querySelector('.c-dialog-cookieconsent')?.close()
 
-                    elm.remove()
-                }, delay)
+        this.element.querySelectorAll('input:not([disabled])').forEach((input) => {
+            input.checked = false
+        })
+
+        JSON.parse(getCookieConsentItem())?.forEach((type) => {
+            if (this.element.querySelector(`input[value="${type}"]`) !== null) {
+                this.element.querySelector(`input[value="${type}"]`).checked = true
             }
         })
     }
-}
 
-LibCookieConsent.init()
+    async update() {
+        const type = []
+
+        this.element.querySelectorAll('input:not([disabled])').forEach((input) => {
+            input.checked && type.push(input.value)
+        })
 
-export default LibCookieConsent
+        await setCookieConsent(type)
+        location.reload()
+    }
+
+    disconnect() {
+        if ((!getCookieConsentItem() || parseInt(getCookieConsentItem('cookieconsent-js-expire')) < Date.now())) {
+            document.querySelector('.c-dialog-cookieconsent')?.showModal()
+        }
+    }
+})

package/src/scripts/Libraries/Dialog.js

@@ -1,45 +1,28 @@
-import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
-import { insertDialog, closeDialog, fetchDialog, dialogSelector } from 'winduum/src/libraries/dialog.js'
+import { Controller, LibStimulus } from './../Libraries/Stimulus.js'
+import { insertDialog, closeDialog, dialogSelector } from 'winduum/src/components/dialog/index.js'
+import initAfter from '../Utils/initAfter.js'
+import { fetchJson } from '@newlogic-digital/utils-js'
 
 LibStimulus.register('lib-dialog', class extends Controller {
-    static values = {
-        open: String,
-        url: String
-    }
+    async show({ currentTarget, params }) {
+        const loadingClasses = (params.loadingClass ?? 'loading cursor-wait').split(' ')
+
+        currentTarget.classList.add(...loadingClasses)
+
+        await this.fetch(params.url, params)
 
-    async connect() {
-        if (this.hasOpenValue) {
-            if (this.hasUrlValue) {
-                await fetchDialog({
-                    url: this.urlValue, insertOptions: { remove: true }
-                })
-            } else {
-                await insertDialog(document.querySelector(this.openValue).innerHTML, {
-                    remove: true
-                })
-            }
-
-            loadStimulus(dialogSelector('.lib-dialog'))
-        }
+        currentTarget.classList.remove(...loadingClasses)
     }
 
-    async show({ currentTarget, params }) {
-        currentTarget._addDataValue('state', 'loading')
-        currentTarget.classList.add('cursor-wait')
-
-        await fetchDialog({
-            url: params.url,
-            insertOptions: {
-                remove: params.remove ?? true,
-                append: params.append ?? false
-            }
-        }).then(() => loadStimulus(dialogSelector('.lib-dialog')))
-
-        currentTarget._removeDataValue('state', 'loading')
-        currentTarget.classList.remove('cursor-wait')
+    async close({ currentTarget, params }) {
+        await closeDialog(currentTarget.closest('dialog'), { remove: params.remove ?? true })
     }
 
-    async hide({ params }) {
-        await closeDialog({ remove: params.remove ?? false })
+    async fetch(url, options) {
+        const { content } = await fetchJson(url)
+
+        await insertDialog(content, options)
+
+        initAfter(dialogSelector('.c-dialog'))
     }
 })

package/src/scripts/Libraries/Form.js

@@ -1,33 +1,13 @@
 import { LibStimulus, Controller } from './Stimulus.js'
-import { checkValidity } from '../Utils/Functions/+.js'
+import { validateForm } from 'winduum/src/components/form/index.js'
 
 LibStimulus.register('lib-form', class extends Controller {
     connect() {
-        this.element.setAttribute('novalidate', '')
-        this.element.addEventListener('submit', e => this.validation(e))
+        this.element.noValidate = true
+        this.element.addEventListener('submit', this.validate)
     }
 
-    validation(e) {
-        if (this.element.checkValidity() === false) {
-            e.preventDefault()
-            e.stopPropagation()
-
-            this.element.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
-            this.element.querySelector(':invalid').focus()
-        } else {
-            this.element.querySelector('[type="submit"]')._addDataValue('state', 'loading')
-        }
-
-        this.element.querySelectorAll('.ui-input, [data-controller="ui-checkbox"], [data-controller="ui-radio"]').forEach(element => {
-            checkValidity(element, { message: true })
-        })
-
-        this.element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
-            checkValidity(select.closest('.ui-select'), { message: true })
-        })
-    }
-
-    submitForm({ currentTarget }) {
-        currentTarget.form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+    async validate(event) {
+        validateForm(event)
     }
 })

package/src/scripts/Libraries/Naja.js

@@ -1,35 +1,37 @@
+import { Controller, LibStimulus, initStimulus } from './Stimulus.js'
+import { initCookieConsent } from './CookieConsent.js'
+import {
+    initNaja,
+    NajaRecaptchaExtension,
+    NajaFormValidityExtension
+} from '../Utils/naja.js'
 import naja from 'naja'
-import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
+import LibSwup from './Swup.js'
 
 LibStimulus.register('lib-naja', class extends Controller {
-    async connect() {
-        naja.uiHandler.addEventListener('interaction', ({ detail }) => {
-            const element = detail.element
+    async initialize() {
+        naja.uiHandler.selector = '[data-naja]'
 
-            detail.options.target = element
+        await initNaja(this.element, false)
 
-            element.dispatchEvent(new CustomEvent('naja-interaction', { bubbles: true, cancelable: true }))
+        if (naja.initialized) return
 
-            if (element?.form && !element.form.reportValidity()) {
-                arguments[0].preventDefault()
-            }
+        naja.uiHandler.addEventListener('interaction', ({ detail }) => {
+            detail.element.dispatchEvent(new CustomEvent('naja:interaction', { bubbles: true, cancelable: true }))
         })
 
         naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
-            detail?.options.target.dispatchEvent(new CustomEvent('naja-afterUpdate', { bubbles: true, cancelable: true }))
+            detail.snippet.dispatchEvent(new CustomEvent('naja:afterUpdate', { bubbles: true, cancelable: true }))
 
-            loadStimulus(document.body, false)
-        })
+            initStimulus(detail.snippet)
+            initNaja(detail.snippet)
+            initCookieConsent(detail.snippet)
 
-        naja.uiHandler.selector = '[data-naja]'
-        naja.initialize({
-            history: false
+            LibSwup.cache.clear()
         })
-    }
-
-    async fetch({ currentTarget }) {
-        arguments[0].preventDefault()
 
-        await naja.makeRequest('GET', currentTarget.dataset.actionUrl, null, { history: false })
+        naja.registerExtension(NajaRecaptchaExtension)
+        naja.registerExtension(NajaFormValidityExtension)
+        naja.initialize()
     }
 })

package/src/scripts/Libraries/ReCaptcha.js

@@ -1,6 +1,5 @@
 import { LibStimulus, Controller } from './Stimulus.js'
-import naja from 'naja'
-import importScript from '../Utils/Functions/importScript.js'
+import { importScript } from '@newlogic-digital/utils-js'
 import cdn from '../Utils/cdn.js'
 
 LibStimulus.register('lib-recaptcha', class extends Controller {
@@ -13,35 +12,14 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         importScript(cdn.recaptcha.replace('{apikey}', this.apiValue))
     }
 
-    async execute() {
-        return new Promise(resolve => {
-            window.grecaptcha.enterprise.ready(() => {
-                window.grecaptcha.enterprise.execute(this.apiValue, { action: this.actionValue ?? 'form' }).then(token => {
-                    this.element.querySelector('[name="gtoken"]').value = token
-                    resolve()
-                })
+    execute(event) {
+        if (event?.detail?.recaptchaExecuted) return
+
+        window.grecaptcha.enterprise.ready(() => {
+            window.grecaptcha.enterprise.execute(this.apiValue, { action: this.actionValue ?? 'form' }).then((token) => {
+                this.element.gtoken.value = token
+                this.element.dispatchEvent(new CustomEvent('submit', { cancelable: true, detail: { recaptchaExecuted: true } }))
             })
         })
     }
-
-    async submit() {
-        if (this.element.reportValidity() === false) {
-            return false
-        }
-
-        arguments[0].preventDefault()
-
-        await this.execute()
-        this.element.submit()
-    }
-
-    async submitFetch() {
-        if (this.element.reportValidity() === false) {
-            return false
-        }
-
-        arguments[0].preventDefault()
-        await this.execute()
-        await naja.makeRequest(this.element.method, this.element.action, new FormData(this.element), { history: 'replace' })
-    }
 })

package/src/scripts/Libraries/Reveal.js

@@ -0,0 +1,32 @@
+import { Controller, LibStimulus } from './Stimulus.js'
+import { dataset } from '@newlogic-digital/utils-js'
+
+LibStimulus.register('lib-reveal', class extends Controller {
+    static targets = ['item']
+
+    intersectionObserver() {
+        this.observer = new IntersectionObserver((entries, observer) => {
+            entries.forEach((entry) => {
+                if (entry.intersectionRatio > 0.1 && !entry.target.classList.contains('in')) {
+                    entry.target.classList.add('in')
+
+                    if (entry.target.dataset.controllerNameParam) {
+                        dataset(entry.target, 'controller').add(entry.target.dataset.controllerNameParam)
+                    }
+                }
+            })
+        }, {
+            threshold: 0.1
+        })
+    }
+
+    itemTargetConnected(element) {
+        if (!this.observer) this.intersectionObserver()
+
+        this.observer?.observe(element)
+    }
+
+    itemTargetDisconnected(element) {
+        this.observer?.unobserve(element)
+    }
+})