@newlogic-digital/ui 3.5.0 → 3.7.5

package/src/scripts/Libraries/Swup.js

@@ -1,55 +1,25 @@
+import { dialogSelector } from 'winduum/src/components/dialog/index.js'
+import { delegateController } from './Stimulus.js'
 import Swup from 'swup'
-import { closeDialog } from 'winduum/src/libraries/dialog.js'
-import { hideTippy } from './Tippy.js'
-import { getController, loadStimulus } from './Stimulus.js'
-import LibCookieConsent from './CookieConsent.js'
-import { replaceTag, replaceScript } from '../Utils/Functions/+.js'
-
-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')
-    }
-})
+import initAfter from '../Utils/initAfter.js'
 
 const LibSwup = new Swup({
-    containers: ['#l-main', '#l-header'].filter(element => document.querySelector(element)),
-    linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
+    containers: ['.l-main', '.l-header'].filter(element => document.querySelector(element)),
+    ignoreVisit: (url, { el }) => el?.closest('[data-no-swup], [data-naja]'),
+    animationSelector: '.swup-transition'
 })
 
-LibSwup.on('clickLink', async ({ target }) => {
+LibSwup.hooks.on('animation:out:start', async () => {
     document.body.classList.remove('overflow-hidden')
 
-    const LibDrawerSelector = document.querySelector('.lib-drawer.active')
-    const LibDialogSelector = document.querySelector('.lib-dialog')
-
-    hideTippy()
-
-    if (LibDrawerSelector) {
-        /** @type {LibDrawer} */
-        const LibDrawer = getController(LibDrawerSelector, 'lib-drawer')
-
-        LibDrawer.hide()
-    }
-
-    if (LibDialogSelector) {
-        await closeDialog(LibDialogSelector)
-    }
-
-    if (window.location.href === target.closest('a').href) {
-        document.documentElement.scroll({ top: 0, behavior: 'smooth' })
-    }
+    delegateController('c-drawer', 'close')
+    delegateController('lib-dialog', 'close', {
+        currentTarget: dialogSelector('.c-dialog')
+    }, 'body')
 })
 
-LibSwup.on('animationOutDone', () => {
-    document.documentElement.scroll({ top: 0, behavior: 'instant' })
+LibSwup.hooks.before('scroll:top', (visit, { options }) => {
+    if (visit.from.url !== visit.to.url) (options.behavior = 'instant')
 })
 
 /** @var {Array} dataLayer */
@@ -59,34 +29,49 @@ LibSwup.on('animationOutDone', () => {
 /** @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)
+LibSwup.hooks.on('content:replace', (visit, { page }) => {
+    const content = new DOMParser().parseFromString(page.html, 'text/html')
 
-    if (window.location.hash) {
-        document.documentElement.scroll({ top: document.querySelector(`${window.location.hash}`)?.offsetTop, behavior: 'smooth' })
-    }
+    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
 
-    LibCookieConsent.init()
+        replaceTag ? (replaceTag.outerHTML = element.outerHTML) : placement.insertAdjacentHTML('beforeend', element.outerHTML)
+    })
 
-    LibSwup.options.containers.forEach(selector => {
-        loadStimulus(document.querySelector(selector))
-        replaceScript(document.querySelector(selector))
+    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.rc?.retargetingHit && window.rc.retargetingHit(window.retargetingConf ?? {})
+    window.rc?.conversionHit && window.rc.conversionHit(window.conversionConf ?? {})
 
     window.fbq && window.fbq('track', 'PageView')
 })
 
-LibSwup.options.cache && setInterval(() => {
-    LibSwup.cache.empty()
-}, 90 * 1000)
+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

@@ -0,0 +1,55 @@
+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/Check.js

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

package/src/scripts/Ui/Control.js

@@ -1,6 +1,7 @@
 import cdn from '../Utils/cdn.js'
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { importStyle, inputStep, inputValidity } from '../Utils/Functions/+.js'
+import { importStyle } from '@newlogic-digital/utils-js'
+import { validateField } from 'winduum/src/components/form/index.js'
 
 LibStimulus.register('ui-control', class extends Controller {
     static targets = ['number']
@@ -16,10 +17,10 @@ LibStimulus.register('ui-control', class extends Controller {
         }
     }
 
-    async connect () {
-        inputValidity(this.element, { validate: false })
+    async connect() {
+        validateField(this.element, { validate: false })
 
-        this.element.addEventListener('change', () => inputValidity(this.element))
+        this.element.addEventListener('change', () => validateField(this.element))
 
         if (this.element.querySelector('select')) {
             return
@@ -32,7 +33,7 @@ LibStimulus.register('ui-control', class extends Controller {
         await this.typeColor()
     }
 
-    async typeDate () {
+    async typeDate() {
         const input = this.element.querySelector('[type^="date"], [type="month"]')
 
         if (input) {
@@ -44,13 +45,14 @@ LibStimulus.register('ui-control', class extends Controller {
             const timepicker = input.type === 'datetime-local'
             const monthView = input.type === 'month'
                 ? {
-                    view: 'months',
-                    minView: 'months',
-                    dateFormat: 'MMMM yyyy',
-                    altFieldDateFormat: 'yyyy-MM'
-                }
+                        view: 'months',
+                        minView: 'months',
+                        dateFormat: 'MMMM yyyy',
+                        altFieldDateFormat: 'yyyy-MM'
+                    }
                 : {}
-            const attributes = [...input.attributes].filter(({ name }) => name !== 'type').map(({ name, value }) => `${name}="${value}"`).join(' ')
+
+            const attributes = [...input.attributes].filter(({ name }) => name.match(/(required|placeholder)/)).map(({ name, value }) => `${name}="${value}"`).join(' ')
 
             input.setAttribute('type', 'hidden')
 
@@ -58,7 +60,11 @@ LibStimulus.register('ui-control', class extends Controller {
 
             const inputText = this.element.querySelector('[type="text"]')
 
-            inputText.addEventListener('keydown', e => {
+            if (input.id) {
+                inputText.id = input.id + '-datepicker'
+            }
+
+            inputText.addEventListener('keydown', (e) => {
                 const key = e.key.toLowerCase()
 
                 if (key !== 'backspace' && key !== 'tab') {
@@ -92,19 +98,19 @@ LibStimulus.register('ui-control', class extends Controller {
                     }
                 },
                 onShow: () => {
-                    this.datepicker.$datepicker.querySelectorAll('.air-datepicker-button').forEach(element => {
+                    this.datepicker.$datepicker.querySelectorAll('.air-datepicker-button').forEach((element) => {
                         element.setAttribute('type', 'button')
                         element.setAttribute('tabindex', '-1')
                     })
                 },
                 onSelect: ({ date }) => {
-                    inputText.dispatchEvent(new Event('change', { bubbles: true }))
+                    input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
             })
         }
     }
 
-    async typeColor () {
+    async typeColor() {
         if (this.element.querySelector('[type="color"]') !== null) {
             const Pickr = (await import('@simonwep/pickr')).default
             const input = this.element.querySelector('input')
@@ -116,7 +122,7 @@ LibStimulus.register('ui-control', class extends Controller {
             input.setAttribute('maxlength', '9')
             input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
 
-            this.element.insertAdjacentHTML('afterbegin', '<div class="icon-l"><div class="color"></div></div>')
+            this.element.insertAdjacentHTML('afterbegin', '<div class="me-auto"><div class="color"></div></div>')
 
             const pickr = new Pickr({
                 el: input,
@@ -133,12 +139,12 @@ LibStimulus.register('ui-control', class extends Controller {
                         input: true
                     }
                 }
-            }).on('init', pickr => {
+            }).on('init', (pickr) => {
                 pickr.setColor(input.value)
-            }).on('change', color => {
+            }).on('change', (color) => {
                 input.value = color.toHEXA().toString()
                 this.element.querySelector('.color').style['background-color'] = color.toHEXA().toString()
-            }).on('hide', pickr => {
+            }).on('hide', (pickr) => {
                 pickr.applyColor()
                 input.dispatchEvent(new Event('change', { bubbles: true }))
             })
@@ -149,38 +155,40 @@ LibStimulus.register('ui-control', class extends Controller {
         }
     }
 
-    typeNumber () {
+    typeNumber() {
         if (this.element.querySelector('[type="number"]') && !this.hasNumberTarget) {
-            if (!this.element.querySelector('.icon-r')) {
-                this.element.insertAdjacentHTML('beforeend', '<div class="icon-r"></div>')
+            if (!this.element.querySelector('.ms-auto')) {
+                this.element.insertAdjacentHTML('beforeend', '<div class="ms-auto"></div>')
             }
 
-            this.element.querySelector('.icon-r').insertAdjacentHTML('beforeend', `
-                <div class="flex flex-col gap-0 justify-center -space-y-1" data-ui-control-target="number">
-                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#increase">
-                        <svg class="sq-4"><use href="#icon-angle-up"></use></svg>
+            this.element.querySelector('.ms-auto').insertAdjacentHTML('beforeend', `
+                <div class="flex flex-col gap-0 justify-center -space-y-1 -me-0.5" data-ui-control-target="number">
+                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepUp">
+                        <svg class="size-4"><use href="#icon-angle-up-solid"></use></svg>
                     </button>
-                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#decrease">
-                        <svg class="sq-4"><use href="#icon-angle-down"></use></svg>
+                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepDown">
+                        <svg class="size-4"><use href="#icon-angle-down-solid"></use></svg>
                     </button>
                 </div>
             `)
         }
     }
 
-    increase () {
-        inputStep(this.element.querySelector('input[type="number"]'), true)
+    stepUp() {
+        this.element.querySelector('input:not([hidden])').stepUp()
+        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
     }
 
-    decrease () {
-        inputStep(this.element.querySelector('input[type="number"]'), false)
+    stepDown() {
+        this.element.querySelector('input:not([hidden])').stepDown()
+        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
     }
 
-    showPicker () {
+    showPicker() {
         this.element.querySelector('input:not([hidden])').showPicker()
     }
 
-    showDatepicker () {
+    showDatepicker() {
         this.datepicker.$el.focus()
     }
 })

package/src/scripts/Ui/ControlSelect.js

@@ -1,22 +1,23 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { dataset } from '@newlogic-digital/utils-js'
 
 LibStimulus.register('ui-control-select', class extends Controller {
-    connect () {
+    connect() {
         this.select = this.element.querySelector('select')
         const option = this.element.querySelectorAll('[data-option]')
 
-        if (option[0] !== null) {
-            option.forEach(option => {
+        if (option[0]) {
+            option.forEach((option) => {
                 if (option.dataset.disabled) {
                     return
                 }
 
-                option.setAttribute('data-action', 'click->ui-control-select#choose keydown.enter->ui-control-select#choose')
+                dataset(option, 'action').add('click->ui-control-select#choose', 'keydown.enter->ui-control-select#choose')
             })
         }
     }
 
-    choose ({ currentTarget }) {
+    choose({ currentTarget }) {
         this.select.value = currentTarget.dataset.option
         this.select.dispatchEvent(new Event('change', { bubbles: true }))
         document.activeElement.blur()

package/src/scripts/Ui/Text.js

@@ -1,18 +1,18 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 
 LibStimulus.register('ui-text', class extends Controller {
-    connect () {
-        function wrap (element, wrapper) {
+    connect() {
+        function wrap(element, wrapper) {
             element.parentNode.insertBefore(wrapper, element)
             wrapper.appendChild(element)
         }
 
-        this.element.querySelectorAll('table').forEach(table => {
-            wrap(table, new DOMParser().parseFromString('<div class="c_text_table"></div>', 'text/html').body.firstChild)
+        this.element.querySelectorAll('table').forEach((table) => {
+            wrap(table, new DOMParser().parseFromString('<div class="overflow-x-auto max-w-full"></div>', 'text/html').body.firstChild)
         })
 
-        this.element.querySelectorAll('iframe').forEach(iframe => {
-            if (iframe.width && iframe.style.aspectRatio !== 'undefined') {
+        this.element.querySelectorAll('iframe').forEach((iframe) => {
+            if (iframe.width && iframe.height) {
                 iframe.style.aspectRatio = iframe.width + '/' + iframe.height
                 iframe.style.height = 'auto'
             }

package/src/scripts/Utils/+.js

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

package/src/scripts/Utils/cdn.js

@@ -1,6 +1,5 @@
 export default {
     recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
     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',
     datepickerLang: `https://cdn.jsdelivr.net/npm/air-datepicker@3.3.5/locale/${document.documentElement.lang}.js/+esm`
 }

package/src/scripts/Utils/initAfter.js

@@ -0,0 +1,11 @@
+import { replaceScripts } from '@newlogic-digital/utils-js'
+import { initStimulus } from '../Libraries/Stimulus.js'
+import { initCookieConsent } from '../Libraries/CookieConsent.js'
+import { initNaja } from './naja.js'
+
+export default function initAfter(element) {
+    initStimulus(element)
+    initNaja(element)
+    replaceScripts(element)
+    initCookieConsent(element)
+}

package/src/scripts/Utils/naja.js

@@ -0,0 +1,41 @@
+import naja from 'naja'
+
+export const initNaja = (element, bindUI = true, selectors = 'button, [role="button"]') => {
+    bindUI && naja.uiHandler.bindUI(element)
+
+    element.querySelectorAll(`:where(${selectors})${naja.uiHandler.selector}`).forEach((element) => {
+        if (element.form && element.type === 'submit') return
+
+        element.addEventListener('click', (event) => {
+            naja.uiHandler.processInteraction(element, element.dataset.najaMethod ?? 'GET', element.dataset.najaUrl, element.dataset.najaData, {}, event)
+        })
+    })
+}
+
+export const NajaFormValidityExtension = {
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', (event) => {
+            const { element } = event.detail
+
+            if (element?.form && !element.form.reportValidity()) {
+                event.preventDefault()
+            }
+        })
+    }
+}
+
+export const NajaRecaptchaExtension = {
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', (event) => {
+            const { element } = event.detail
+
+            if (
+                (element.form ?? element)?.dataset?.controller?.includes('lib-recaptcha')
+                && !event.detail?.originalEvent?.detail?.recaptchaExecuted
+            ) {
+                event.preventDefault()
+                return false
+            }
+        })
+    }
+}

package/src/scripts/Utils/utilities.js

@@ -0,0 +1,8 @@
+import { Controller, LibStimulus } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('utils', class extends Controller {
+    darkMode() {
+        document.documentElement.classList.toggle('dark')
+        localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+    }
+})

package/src/scripts/main.js

@@ -1,6 +1,7 @@
-import './Utils/global.js'
 import './Libraries/+.js'
 import './Layout/+.js'
 import './Sections/+.js'
 import './Components/+.js'
 import './Ui/+.js'
+import './Utils/utilities.js'
+import.meta.glob('/src/assets/**')

package/src/styles/Components/+.css

@@ -1,4 +1,5 @@
-@import "CookieConsent.css";
 @import "Dialog/+.css";
-@import "Dropdown/+.css";
+@import "Drawer.css";
 @import "Field.css";
+@import "Popover.css";
+@import "Toaster.css";

package/src/styles/Components/Dialog/+.css

@@ -1 +1,3 @@
+@import "Content.css";
+@import "CookieConsent.css";
 @import "Default.css";

package/src/styles/Components/Dialog/Content.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/dialog/content.css";
+@import "winduum/src/components/dialog/content-props.css";

package/src/styles/Components/Dialog/CookieConsent.css

@@ -0,0 +1,17 @@
+.c-dialog-cookieconsent {
+  .c-dialog-content {
+    max-width: 32rem;
+  }
+
+  &.center {
+    .c-dialog-content {
+      max-width: 26rem;
+      text-align: center;
+
+      & .ui-image {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+}

package/src/styles/Components/Dialog/Default.css

@@ -1,26 +1,2 @@
-@import "winduum/src/components/dialog.css";
-
-.c-dialog {
-  &.sm {
-    --c-dialog-width: 30rem;
-  }
-
-  &.lg {
-    --c-dialog-width: 50rem;
-  }
-
-  &.scrollable {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    & .c_dialog_body {
-      flex: 1 1 auto;
-      overflow: auto;
-      margin: var(--c-dialog-py) calc(var(--c-dialog-px) * -1);
-      padding: 0 var(--c-dialog-px);
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-}
+@import "winduum/src/components/dialog/default.css";
+@import "winduum/src/components/dialog/default-props.css";

package/src/styles/Components/Drawer.css

@@ -0,0 +1,18 @@
+@import "winduum/src/components/drawer/default-props.css";
+@import "winduum/src/components/drawer/default.css";
+@import "winduum/src/components/drawer/content-props.css";
+@import "winduum/src/components/drawer/content.css";
+
+.c-drawer {
+  --c-drawer-content-width: min(calc(100vw - 2rem), 22rem);
+  --c-drawer-content-height: 100dvh;
+
+  &:not(.active) {
+    opacity: 0;
+  }
+}
+
+.c-drawer-content {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}

package/src/styles/Components/Field.css

@@ -1 +1 @@
-@import "winduum/src/components/field.css";
+@import "winduum/src/components/field/index.css";

package/src/styles/Components/Popover.css

@@ -0,0 +1 @@
+@import "winduum/src/components/popover/index.css";

package/src/styles/Components/Toaster.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/toaster/index.css";
+@import "winduum/src/components/toast/index.css";