@newlogic-digital/ui 3.7.5 → 4.0.0

package/src/scripts/Components/Drawer.js

@@ -1,60 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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 +0,0 @@
-import './Header.js'

package/src/scripts/Layout/Header.js

@@ -1,20 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('l-header', class extends Controller {
-    static targets = ['logo', 'nav']
-
-    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 drawerContentElement = document.querySelector('.l-nav .c-drawer-content')
-
-            drawerContentElement.insertAdjacentHTML('beforeend', this.logoTarget.outerHTML)
-            drawerContentElement.insertAdjacentHTML('beforeend', this.navTarget.outerHTML)
-        }
-    }
-})

package/src/scripts/Libraries/+.js

@@ -1,10 +0,0 @@
-import './CookieConsent.js'
-import './Dialog.js'
-import './Form.js'
-import './Naja.js'
-import './ReCaptcha.js'
-import './Reveal.js'
-import './Ripple.js'
-import './Stimulus.js'
-export { default as Swup } from './Swup.js'
-import './Toaster.js'

package/src/scripts/Libraries/CookieConsent.js

@@ -1,80 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-import { appendCookieConsent, setCookieConsent } from '@newlogic-digital/cookieconsent-js'
-import { showDialog, closeDialog } from 'winduum/src/components/dialog/index.js'
-
-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
-        }
-
-        if (!getCookieConsentItem() || parseInt(getCookieConsentItem('cookieconsent-js-expire')) < Date.now()) {
-            setTimeout(async () => {
-                await showDialog(this.element, { closable: false })
-            }, 1500)
-        } else {
-            this.element.remove()
-        }
-    }
-
-    async approve() {
-        await this.hide(['performance', 'marketing'])
-    }
-
-    async decline() {
-        await this.hide([])
-    }
-
-    async hide(type) {
-        await setCookieConsent(type)
-        initCookieConsent(document, type)
-        await closeDialog(this.element, { remove: true })
-    }
-})
-
-LibStimulus.register('c-form-cookieconsent', class extends Controller {
-    connect() {
-        document.querySelector('.c-dialog-cookieconsent')?.close()
-
-        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
-            }
-        })
-    }
-
-    async update() {
-        const type = []
-
-        this.element.querySelectorAll('input:not([disabled])').forEach((input) => {
-            input.checked && type.push(input.value)
-        })
-
-        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,28 +0,0 @@
-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 {
-    async show({ currentTarget, params }) {
-        const loadingClasses = (params.loadingClass ?? 'loading cursor-wait').split(' ')
-
-        currentTarget.classList.add(...loadingClasses)
-
-        await this.fetch(params.url, params)
-
-        currentTarget.classList.remove(...loadingClasses)
-    }
-
-    async close({ currentTarget, params }) {
-        await closeDialog(currentTarget.closest('dialog'), { remove: params.remove ?? true })
-    }
-
-    async fetch(url, options) {
-        const { content } = await fetchJson(url)
-
-        await insertDialog(content, options)
-
-        initAfter(dialogSelector('.c-dialog'))
-    }
-})

package/src/scripts/Libraries/Form.js

@@ -1,13 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-import { validateForm } from 'winduum/src/components/form/index.js'
-
-LibStimulus.register('lib-form', class extends Controller {
-    connect() {
-        this.element.noValidate = true
-        this.element.addEventListener('submit', this.validate)
-    }
-
-    async validate(event) {
-        validateForm(event)
-    }
-})

package/src/scripts/Libraries/Naja.js

@@ -1,37 +0,0 @@
-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 LibSwup from './Swup.js'
-
-LibStimulus.register('lib-naja', class extends Controller {
-    async initialize() {
-        naja.uiHandler.selector = '[data-naja]'
-
-        await initNaja(this.element, false)
-
-        if (naja.initialized) return
-
-        naja.uiHandler.addEventListener('interaction', ({ detail }) => {
-            detail.element.dispatchEvent(new CustomEvent('naja:interaction', { bubbles: true, cancelable: true }))
-        })
-
-        naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
-            detail.snippet.dispatchEvent(new CustomEvent('naja:afterUpdate', { bubbles: true, cancelable: true }))
-
-            initStimulus(detail.snippet)
-            initNaja(detail.snippet)
-            initCookieConsent(detail.snippet)
-
-            LibSwup.cache.clear()
-        })
-
-        naja.registerExtension(NajaRecaptchaExtension)
-        naja.registerExtension(NajaFormValidityExtension)
-        naja.initialize()
-    }
-})

package/src/scripts/Libraries/ReCaptcha.js

@@ -1,25 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-import { importScript } from '@newlogic-digital/utils-js'
-import cdn from '../Utils/cdn.js'
-
-LibStimulus.register('lib-recaptcha', class extends Controller {
-    static values = {
-        api: String,
-        action: String
-    }
-
-    connect() {
-        importScript(cdn.recaptcha.replace('{apikey}', this.apiValue))
-    }
-
-    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 } }))
-            })
-        })
-    }
-})

package/src/scripts/Libraries/Reveal.js

@@ -1,32 +0,0 @@
-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 +0,0 @@
-import { Controller, LibStimulus } from './Stimulus.js'
-import { showRipple } from 'winduum/src/utilities/ripple/index.js'
-
-LibStimulus.register('lib-ripple', class extends Controller {
-    async show(event) {
-        showRipple(event)
-    }
-})

package/src/scripts/Libraries/Stimulus.js

@@ -1,56 +0,0 @@
-import { Application, Controller } from '@hotwired/stimulus'
-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 = (...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, initStimulus, delegateController }
-
-export { LibStimulus, Controller, initStimulus, getController, delegateController }

package/src/scripts/Libraries/Swup.js

@@ -1,77 +0,0 @@
-import { dialogSelector } from 'winduum/src/components/dialog/index.js'
-import { delegateController } from './Stimulus.js'
-import Swup from 'swup'
-import initAfter from '../Utils/initAfter.js'
-
-const LibSwup = new Swup({
-    containers: ['.l-main', '.l-header'].filter(element => document.querySelector(element)),
-    ignoreVisit: (url, { el }) => el?.closest('[data-no-swup], [data-naja]'),
-    animationSelector: '.swup-transition'
-})
-
-LibSwup.hooks.on('animation:out:start', async () => {
-    document.body.classList.remove('overflow-hidden')
-
-    delegateController('c-drawer', 'close')
-    delegateController('lib-dialog', 'close', {
-        currentTarget: dialogSelector('.c-dialog')
-    }, 'body')
-})
-
-LibSwup.hooks.before('scroll:top', (visit, { options }) => {
-    if (visit.from.url !== visit.to.url) (options.behavior = 'instant')
-})
-
-/** @var {Array} dataLayer */
-/** @var {Function} rc */
-/** @var {Function} retargetingHit */
-/** @var {Function} conversionHit */
-/** @var {Object} retargetingConf */
-/** @var {Object} conversionConf */
-/** @var {Function} fbq */
-LibSwup.hooks.on('content:replace', (visit, { page }) => {
-    const content = new DOMParser().parseFromString(page.html, 'text/html')
-
-    content.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)
-    })
-
-    LibSwup.options.containers.forEach((selector) => {
-        initAfter(document.querySelector(selector))
-    })
-
-    window.dataLayer && window.dataLayer.push({
-        event: 'page_view'
-    })
-
-    window.rc?.retargetingHit && window.rc.retargetingHit(window.retargetingConf ?? {})
-    window.rc?.conversionHit && window.rc.conversionHit(window.conversionConf ?? {})
-
-    window.fbq && window.fbq('track', 'PageView')
-})
-
-LibSwup.hooks.on('cache:set', (visit, { page }) => {
-    LibSwup.cache.update(page.url, { created: Date.now(), ttl: 1000 * 60 })
-})
-
-LibSwup.hooks.before('page:load', () => {
-    // noinspection JSCheckFunctionSignatures
-    LibSwup.cache.prune((url, { created, ttl }) => Date.now() > created + ttl)
-})
-
-document.addEventListener('click', ({ target }) => {
-    const noSwup = target.closest('[data-no-swup]')
-
-    if (!noSwup) return
-
-    if (noSwup.classList.contains('ui-btn')) {
-        noSwup.classList.add('loading')
-    } else {
-        noSwup.classList.add('cursor-wait')
-    }
-})
-
-export default LibSwup

package/src/scripts/Libraries/Toaster.js

@@ -1,55 +0,0 @@
-import { Controller, LibStimulus } from '../Libraries/Stimulus.js'
-
-export const insertToaster = async (element, options) => {
-    if (!document.querySelector('.c-toaster')) {
-        element.insertAdjacentHTML('beforeend', `<ol class="c-toaster ${options?.classes ?? ''}" data-lib-toaster-target="toaster"></ol>`)
-    }
-}
-
-export const insertToast = async (element, options) => {
-    const { showToast } = await import('winduum/src/components/toaster/index.js')
-
-    element.insertAdjacentHTML('beforeend', `
-        <li class="c-toast ${options.classes ?? ''}" role="status" aria-live="assertive" aria-atomic="true" data-controller="c-toast">
-            <div class="c-toast-content border-main/10">
-                <div class="flex-col gap-0.5">
-                    <div class="ui-title empty:hidden">${options.title ?? ''}</div>
-                    <div class="ui-title sm font-normal empty:hidden text-main/70">${options.text ?? ''}</div>
-                </div>
-                <button class="ui-btn sm circle muted ml-auto accent-main -mr-1" data-action="c-toast#close">
-                    <svg class="size-4">
-                        <use href="#icon-x-mark"></use>
-                    </svg>
-                </button>
-            </div>
-        </li>
-    `)
-
-    await showToast(element.children[element.children.length - 1], {
-        autoHide: false,
-        ...options?.show
-    })
-}
-
-LibStimulus.register('lib-toaster', class extends Controller {
-    static targets = ['toaster', 'show']
-
-    async show({ params }) {
-        await insertToaster(document.querySelector('dialog[open]') || document.body)
-        await insertToast(this.toasterTarget, params)
-    }
-
-    async showTargetConnected(element) {
-        await this.show({
-            params: JSON.parse(element.innerHTML)
-        })
-    }
-})
-
-LibStimulus.register('c-toast', class extends Controller {
-    async close() {
-        const { closeToast } = await import('winduum/src/components/toaster/index.js')
-
-        await closeToast(this.element)
-    }
-})

package/src/scripts/Ui/+.js

@@ -1,4 +0,0 @@
-import './Check.js'
-import './Control.js'
-import './ControlSelect.js'
-import './Text.js'

package/src/scripts/Ui/Check.js

@@ -1,8 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { validateField } from 'winduum/src/components/form/index.js'
-
-LibStimulus.register('ui-check', class extends Controller {
-    async validate({ currentTarget }) {
-        validateField(currentTarget)
-    }
-})