@newlogic-digital/ui 3.5.0 → 3.7.5

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,32 +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-controller="lib-drawer" data-action="scroll->lib-drawer#scroll" inert>
-                        <div class="l_nav">
-                            <div class="l_nav_head"></div>
-                            <div class="l_nav_body"></div>
-                        </div>
-                    </div>
-                `)
+LibStimulus.register('l-header', class extends Controller {
+    static targets = ['logo', 'nav']
 
-                const layoutNav = document.querySelector('#l-nav')
-                const logo = this.element.querySelector('.l_header_logo').outerHTML
-                const nav = this.element.querySelector('.l_header_nav').outerHTML
+    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>
+            `)
 
-                layoutNav.querySelector('.l_nav_head').insertAdjacentHTML('beforeend', logo)
-                layoutNav.querySelector('.l_nav_body').insertAdjacentHTML('beforeend', nav)
-            }
-        }
+            const drawerContentElement = document.querySelector('.l-nav .c-drawer-content')
 
-        showDrawer () {
-            /** @type {LibDrawer} */
-            const LibDrawer = getController(document.querySelector('[data-controller~="lib-drawer"]'), 'lib-drawer')
-            LibDrawer.show()
+            drawerContentElement.insertAdjacentHTML('beforeend', this.logoTarget.outerHTML)
+            drawerContentElement.insertAdjacentHTML('beforeend', this.navTarget.outerHTML)
         }
     }
-)
+})

package/src/scripts/Libraries/+.js

@@ -1,12 +1,10 @@
-export { default as CookieConsent } from './CookieConsent.js'
+import './CookieConsent.js'
 import './Dialog.js'
-import './Drawer.js'
 import './Form.js'
 import './Naja.js'
 import './ReCaptcha.js'
+import './Reveal.js'
 import './Ripple.js'
-import './Script.js'
-import './Slider.js'
 import './Stimulus.js'
 export { default as Swup } from './Swup.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,47 +1,28 @@
-import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
-import { insertDialog, closeDialog, fetchDialog, dialogSelector } from 'winduum/src/libraries/dialog.js'
-import { replaceScript } from '../Utils/Functions/+.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.classList.add('loading', 'cursor-wait')
-
-        await fetchDialog({
-            url: params.url,
-            insertOptions: {
-                remove: params.remove ?? true,
-                append: params.append ?? false
-            }
-        }).then(() => {
-            loadStimulus(dialogSelector('.lib-dialog'))
-            replaceScript(dialogSelector('.lib-dialog'))
-        })
-
-        currentTarget.classList.remove('loading', 'cursor-wait')
+    async close({ currentTarget, params }) {
+        await closeDialog(currentTarget.closest('dialog'), { remove: params.remove ?? true })
     }
 
-    async close ({ currentTarget, params }) {
-        await closeDialog(currentTarget.closest('dialog'), { 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,26 +1,13 @@
 import { LibStimulus, Controller } from './Stimulus.js'
-import { inputValidity } 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))
+    connect() {
+        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"]').classList.add('loading')
-        }
-
-        this.element.querySelectorAll('.ui-control, .ui-check, .ui-switch').forEach(element => {
-            console.log(element)
-            inputValidity(element, { message: true })
-        })
+    async validate(event) {
+        validateForm(event)
     }
 })

package/src/scripts/Libraries/Naja.js

@@ -1,33 +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 get ({ params }) {
-        await naja.makeRequest('GET', params.url, params.data ? JSON.parse(params.data) : null, { history: params.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 {
@@ -9,34 +8,18 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         action: String
     }
 
-    connect () {
+    connect() {
         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 ({ params }) {
-        if (this.element.reportValidity() === false) {
-            return false
-        }
-
-        arguments[0].preventDefault()
-
-        await this.execute()
-
-        if (!params.naja) {
-            this.element.submit()
-        } else {
-            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)
+    }
+})

package/src/scripts/Libraries/Ripple.js

@@ -1,8 +1,8 @@
 import { Controller, LibStimulus } from './Stimulus.js'
-import { showRipple } from 'winduum/src/libraries/ripple.js'
+import { showRipple } from 'winduum/src/utilities/ripple/index.js'
 
 LibStimulus.register('lib-ripple', class extends Controller {
-    async show (e) {
-        showRipple(e)
+    async show(event) {
+        showRipple(event)
     }
 })

package/src/scripts/Libraries/Stimulus.js

@@ -1,11 +1,56 @@
 import { Application, Controller } from '@hotwired/stimulus'
-import loadStimulus from '../Utils/Functions/loadStimulus.js'
+import { dataset } from '@newlogic-digital/utils-js'
+
+function initActions(parent, selectors) {
+    if (!parent) return
+
+    selectors.forEach(([selector, action]) => {
+        parent.querySelectorAll(selector).forEach((element) => {
+            dataset(element, 'action').add(action)
+        })
+    })
+}
+
+function initControllers(parent, selectors) {
+    if (!parent) return
+
+    selectors.forEach((selector) => {
+        [...parent.getElementsByClassName(selector)].forEach((element) => {
+            dataset(element, 'controller').add(selector)
+        })
+    })
+}
+
+function initStimulus(element, { controllers, actions } = {
+    controllers: ['ui-control', 'ui-text', 'ui-check'],
+    actions: [['.ui-btn', 'click->lib-ripple#show'], ['.ui-check', 'change->ui-check#validate']]
+}) {
+    initControllers(element, controllers)
+    initActions(element, actions)
+}
 
 const LibStimulus = new Application(document.documentElement)
-const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
 
-LibStimulus.start().then(() => loadStimulus(document.body))
+const getController = (...arg) => LibStimulus.getControllerForElementAndIdentifier(...arg)
+
+const delegateController = (name, method, event = {}, selector) => {
+    const controller = getController(document.querySelector(selector || `.${name}`), name)
+
+    if (controller) return method ? controller[method](event) : controller
+}
+
+LibStimulus.start().then(() => initStimulus(document.body))
+
+LibStimulus.register('controller', class extends Controller {
+    delegate(event) {
+        delegateController(event.params.name, event.params.method, event, event.params.selector)
+    }
+
+    load({ currentTarget, params }) {
+        dataset(currentTarget, 'controller').add(params.name)
+    }
+})
 
-window.LibStimulus = { default: LibStimulus, Controller, loadStimulus }
+window.LibStimulus = { default: LibStimulus, Controller, initStimulus, delegateController }
 
-export { LibStimulus, Controller, loadStimulus, getController }
+export { LibStimulus, Controller, initStimulus, getController, delegateController }