@newlogic-digital/ui 3.5.0 → 4.0.0

package/src/scripts/Libraries/Swup.js

@@ -1,92 +0,0 @@
-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')
-    }
-})
-
-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"])`
-})
-
-LibSwup.on('clickLink', async ({ target }) => {
-    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' })
-    }
-})
-
-LibSwup.on('animationOutDone', () => {
-    document.documentElement.scroll({ top: 0, behavior: 'instant' })
-})
-
-/** @var {Array} dataLayer */
-/** @var {Function} rc */
-/** @var {Function} retargetingHit */
-/** @var {Function} conversionHit */
-/** @var {Object} retargetingConf */
-/** @var {Object} conversionConf */
-/** @var {Function} fbq */
-LibSwup.on('contentReplaced', () => {
-    const content = new DOMParser().parseFromString(LibSwup.cache.getCurrentPage().originalContent, 'text/html')
-
-    replaceTag(content)
-
-    if (window.location.hash) {
-        document.documentElement.scroll({ top: document.querySelector(`${window.location.hash}`)?.offsetTop, behavior: 'smooth' })
-    }
-
-    LibCookieConsent.init()
-
-    LibSwup.options.containers.forEach(selector => {
-        loadStimulus(document.querySelector(selector))
-        replaceScript(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.options.cache && setInterval(() => {
-    LibSwup.cache.empty()
-}, 90 * 1000)
-
-export default LibSwup

package/src/scripts/Libraries/Tippy.js

@@ -1,117 +0,0 @@
-import { loadStimulus, importStyle } from '../Utils/Functions/+.js'
-import cdn from '../Utils/cdn.js'
-
-export default class LibTippy {
-    async init (element, options, template) {
-        const tippy = (await import('tippy.js')).default
-        const { roundArrow } = await import('tippy.js')
-
-        await importStyle(cdn.tippy)
-
-        if (typeof element._tippy !== 'undefined') {
-            return false
-        }
-
-        if (this.type.includes('dropdown')) {
-            this.options.placement = 'bottom-end'
-            this.options.maxWidth = 'none'
-        }
-
-        if (this.type.includes('arrow')) {
-            options.arrow = roundArrow
-        }
-
-        if (!template.startsWith('/')) {
-            if (template !== '') {
-                options.content = document.querySelector('#' + template).innerHTML
-            } else {
-                options.content = `
-                  <div class="c-dropdown">
-                    <div class="c_dropdown_body">
-                      ${element.getAttribute('aria-label')}
-                    </div>
-                  </div>
-                `
-            }
-        }
-
-        if (element.dataset.libTippySlot) {
-            for (const [key, value] of Object.entries(JSON.parse(element.dataset.libTippySlot))) {
-                options.content = options.content.replaceAll(`{${key}}`, value.toString()).replaceAll(`%7B${key}%7B`, value.toString())
-            }
-        }
-
-        tippy(element, options)
-    }
-
-    constructor (element, attributes = ['tooltip', '']) {
-        const self = this
-
-        this.options = {
-            content: '',
-            placement: 'bottom',
-            trigger: 'mouseenter focus',
-            interactive: true,
-            appendTo: 'parent',
-            arrow: false,
-            animation: 'scale',
-            inertia: true,
-            allowHTML: true,
-            onShow: (instance) => {
-                if (this.type.includes('-full')) {
-                    instance.popper.classList.add('is-full')
-                    document.documentElement.classList.add('max-md:is-body-overlay')
-                }
-
-                instance.popper.querySelector('.tippy-box').setAttribute('data-name', this.template ?? this.type)
-
-                loadStimulus(instance.popper.querySelector('.tippy-content'))
-            },
-            onHide: () => {
-                if (this.type.includes('-full')) {
-                    setTimeout(() => document.documentElement.classList.remove('max-md:is-body-overlay'), 50)
-                }
-            }
-        }
-
-        this.type = attributes[0]
-        this.template = attributes[1]
-
-        if (this.type.includes('dropdown')) {
-            this.options.trigger = 'click'
-        }
-
-        if (typeof element.dataset.tippyTrigger !== 'undefined') {
-            this.options.trigger = element.dataset.tippyTrigger
-        }
-
-        this.options.showOnCreate = true
-
-        this.options.trigger !== 'manual' && this.options.trigger.split(' ').forEach(event => {
-            element.addEventListener(event, async function e () {
-                if (self.template.startsWith('/') && self.options.content === '') {
-                    element.style.cursor = 'wait'
-                    element.classList.add('loading')
-
-                    fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
-                        return response.json()
-                    }).then(async data => {
-                        self.options.content = data.content
-                        element.style.cursor = ''
-                        element.classList.remove('loading')
-
-                        await self.init(element, self.options, self.template)
-                        element.removeEventListener(event, e)
-                    })
-                } else {
-                    await self.init(element, self.options, self.template)
-                    element.removeEventListener(event, e)
-                }
-            })
-        })
-    }
-}
-
-export function hideTippy () {
-    document.querySelectorAll('[data-controller~="lib-tippy"][aria-expanded="true"]').forEach(element => element?._tippy?.hide())
-}

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 { inputValidity } from '../Utils/Functions/+.js'
-
-LibStimulus.register('ui-check', class extends Controller {
-    validity ({ currentTarget }) {
-        inputValidity(currentTarget)
-    }
-})

package/src/scripts/Ui/Control.js

@@ -1,186 +0,0 @@
-import cdn from '../Utils/cdn.js'
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { importStyle, inputStep, inputValidity } from '../Utils/Functions/+.js'
-
-LibStimulus.register('ui-control', class extends Controller {
-    static targets = ['number']
-
-    static values = {
-        dateOptions: {
-            default: {},
-            type: Object
-        },
-        dateDisabled: {
-            default: [],
-            type: Array
-        }
-    }
-
-    async connect () {
-        inputValidity(this.element, { validate: false })
-
-        this.element.addEventListener('change', () => inputValidity(this.element))
-
-        if (this.element.querySelector('select')) {
-            return
-        }
-
-        this.typeNumber()
-
-        await this.typeDate()
-
-        await this.typeColor()
-    }
-
-    async typeDate () {
-        const input = this.element.querySelector('[type^="date"], [type="month"]')
-
-        if (input) {
-            const AirDatepicker = (await import('air-datepicker')).default
-            const localeUrl = cdn.datepickerLang
-            const locale = (await import(/* @vite-ignore */ localeUrl)).default.default
-            const minDate = input.min ?? ''
-            const maxDate = input.max ?? ''
-            const timepicker = input.type === 'datetime-local'
-            const monthView = input.type === 'month'
-                ? {
-                    view: 'months',
-                    minView: 'months',
-                    dateFormat: 'MMMM yyyy',
-                    altFieldDateFormat: 'yyyy-MM'
-                }
-                : {}
-            const attributes = [...input.attributes].filter(({ name }) => name !== 'type').map(({ name, value }) => `${name}="${value}"`).join(' ')
-
-            input.setAttribute('type', 'hidden')
-
-            input.insertAdjacentHTML('afterend', `<input type="text" inputmode="none" ${attributes}>`)
-
-            const inputText = this.element.querySelector('[type="text"]')
-
-            inputText.addEventListener('keydown', e => {
-                const key = e.key.toLowerCase()
-
-                if (key !== 'backspace' && key !== 'tab') {
-                    e.preventDefault()
-                } else if (key === 'backspace') {
-                    this.datepicker.clear()
-                    inputText.dispatchEvent(new Event('change', { bubbles: true }))
-                }
-            })
-
-            this.datepicker = new AirDatepicker(inputText, {
-                locale,
-                timepicker,
-                minDate,
-                maxDate,
-                startDate: input.value,
-                selectedDates: input.value,
-                altField: input,
-                autoClose: true,
-                container: this.element,
-                minutesStep: 5,
-                altFieldDateFormat: 'yyyy-MM-dd',
-                buttons: ['today', 'clear'],
-                ...monthView,
-                ...this.dateOptionsValue,
-                onRenderCell: ({ date, cellType }) => {
-                    if (cellType === 'day' && this.dateDisabledValue.includes(this.datepicker.formatDate(date, 'yyyy-MM-dd'))) {
-                        return {
-                            disabled: true
-                        }
-                    }
-                },
-                onShow: () => {
-                    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 }))
-                }
-            })
-        }
-    }
-
-    async typeColor () {
-        if (this.element.querySelector('[type="color"]') !== null) {
-            const Pickr = (await import('@simonwep/pickr')).default
-            const input = this.element.querySelector('input')
-
-            await importStyle(cdn.pickrCss)
-
-            input.setAttribute('inputmode', 'none')
-            input.setAttribute('type', 'text')
-            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>')
-
-            const pickr = new Pickr({
-                el: input,
-                useAsButton: true,
-                theme: 'nano',
-                position: 'bottom-start',
-                components: {
-                    preview: true,
-                    opacity: true,
-                    hue: true,
-                    interaction: {
-                        hex: true,
-                        rgba: true,
-                        input: true
-                    }
-                }
-            }).on('init', pickr => {
-                pickr.setColor(input.value)
-            }).on('change', color => {
-                input.value = color.toHEXA().toString()
-                this.element.querySelector('.color').style['background-color'] = color.toHEXA().toString()
-            }).on('hide', pickr => {
-                pickr.applyColor()
-                input.dispatchEvent(new Event('change', { bubbles: true }))
-            })
-
-            input.addEventListener('change', ({ target }) => {
-                pickr.setColor(target.value)
-            })
-        }
-    }
-
-    typeNumber () {
-        if (this.element.querySelector('[type="number"]') && !this.hasNumberTarget) {
-            if (!this.element.querySelector('.icon-r')) {
-                this.element.insertAdjacentHTML('beforeend', '<div class="icon-r"></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>
-                    </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>
-                </div>
-            `)
-        }
-    }
-
-    increase () {
-        inputStep(this.element.querySelector('input[type="number"]'), true)
-    }
-
-    decrease () {
-        inputStep(this.element.querySelector('input[type="number"]'), false)
-    }
-
-    showPicker () {
-        this.element.querySelector('input:not([hidden])').showPicker()
-    }
-
-    showDatepicker () {
-        this.datepicker.$el.focus()
-    }
-})

package/src/scripts/Ui/ControlSelect.js

@@ -1,24 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('ui-control-select', class extends Controller {
-    connect () {
-        this.select = this.element.querySelector('select')
-        const option = this.element.querySelectorAll('[data-option]')
-
-        if (option[0] !== null) {
-            option.forEach(option => {
-                if (option.dataset.disabled) {
-                    return
-                }
-
-                option.setAttribute('data-action', 'click->ui-control-select#choose keydown.enter->ui-control-select#choose')
-            })
-        }
-    }
-
-    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,21 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-
-LibStimulus.register('ui-text', class extends Controller {
-    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('iframe').forEach(iframe => {
-            if (iframe.width && iframe.style.aspectRatio !== 'undefined') {
-                iframe.style.aspectRatio = iframe.width + '/' + iframe.height
-                iframe.style.height = 'auto'
-            }
-        })
-    }
-})

package/src/scripts/Utils/+.js

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

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

@@ -1,7 +0,0 @@
-export { default as importScript } from './importScript.js'
-export { default as importStyle } from './importStyle.js'
-export { default as inputStep } from './inputStep.js'
-export { default as inputValidity } from './inputValidity.js'
-export { default as loadStimulus } from './loadStimulus.js'
-export { default as replaceScript } from './replaceScript.js'
-export { default as replaceTag } from './replaceTag.js'

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

@@ -1,17 +0,0 @@
-export default function importScript (url) {
-    return new Promise((resolve, reject) => {
-        if (document.querySelector(`script[src="${url}"]`) === null) {
-            const script = document.createElement('script')
-
-            script._importScript = new Promise((resolve, reject) => {
-                script.src = url
-                script.onload = resolve
-                script.onerror = reject
-            }).then(resolve).catch(reject)
-
-            document.head.appendChild(script)
-        } else {
-            document.querySelector(`script[src="${url}"]`)._importScript.then(resolve)
-        }
-    })
-}

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

@@ -1,18 +0,0 @@
-export default function importStyle (url) {
-    return new Promise((resolve, reject) => {
-        if (document.querySelector(`link[href="${url}"]`) === null) {
-            const style = document.createElement('link')
-
-            style._importStyle = new Promise((resolve, reject) => {
-                style.href = url
-                style.rel = 'stylesheet'
-                style.onload = resolve
-                style.onerror = reject
-            }).then(resolve).catch(reject)
-
-            document.head.prepend(style)
-        } else {
-            document.querySelector(`link[href="${url}"]`)._importStyle.then(resolve)
-        }
-    })
-}

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

@@ -1,9 +0,0 @@
-export default function inputStep (input, increase, callback) {
-    const value = parseInt(input.value === '' ? 0 : input.value)
-
-    if ((increase && (value < input.max || input.max === '')) || (!increase && (value > input.min || input.min === ''))) {
-        input.value = increase ? (value + 1).toString() : (value - 1).toString()
-        callback && callback()
-        input.dispatchEvent(new Event('change', { bubbles: true }))
-    }
-}

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

@@ -1,57 +0,0 @@
-export default function inputValidity (element, options = {}) {
-    const { validate, message, iconElements } = {
-        validate: true,
-        message: false,
-        iconElements: '.ui-control',
-        ...options
-    }
-
-    const selectors = element.querySelectorAll('input, textarea, select')
-
-    selectors.forEach(selector => {
-        if (selector.closest('.air-datepicker')) {
-            return
-        }
-
-        const validationMessage = selector.dataset.validationMessage ?? selector.validationMessage
-        const validityElement = element?.closest('.c-field')?.querySelector('.ui-info.validity')
-
-        if (!selector.outerHTML.match(/(data-novalidate|readonly|hidden)/) && validate) {
-            element.classList.remove('valid', 'invalid', 'active')
-
-            if (element.closest(iconElements) && element.querySelector('[class^="icon"] [class*="valid"]') !== null) {
-                element.querySelector('[class^="icon"] [class*="valid"]').remove()
-            }
-
-            if (selector.checkValidity()) {
-                element.classList.add('valid')
-
-                if (validityElement) {
-                    validityElement.remove()
-                }
-            } else {
-                element.classList.add('invalid')
-
-                if (!validityElement && message) {
-                    element?.closest('.c-field')?.insertAdjacentHTML('beforeend', `<div class="ui-info validity text-error">${validationMessage}</div>`)
-                }
-
-                if (element.closest(iconElements) && element.querySelector('[class^="icon"] [class*="valid"]') === null) {
-                    if (!element.querySelector('.icon-r')) {
-                        element.insertAdjacentHTML('beforeend', '<div class="icon-r"></div>')
-                    }
-
-                    element.querySelector('.icon-r').insertAdjacentHTML('afterbegin', `
-                        <div class="invalid lib-hint-top" tabindex="0" aria-label="${validationMessage}">
-                            <svg class="text-error"><use href="#icon-exclamation-circle"></use></svg>
-                        </div>
-                    `)
-                }
-            }
-        }
-
-        if (selector.value !== '') {
-            element.classList.add('active')
-        }
-    })
-}

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

@@ -1,42 +0,0 @@
-import naja from 'naja'
-
-const dynamicControllers = ['ui-control', 'ui-text', 'ui-check']
-const dynamicActions = [['.ui-btn', 'click->lib-ripple#show'], ['.ui-check', 'change->ui-check#validity']]
-
-function loadControllers (parent, selectors) {
-    if (parent !== null) {
-        selectors.forEach(selector => {
-            [...parent.getElementsByClassName(selector)].forEach(element => {
-                const attribute = element.getAttribute('data-controller')
-
-                if (attribute === null) {
-                    element.setAttribute('data-controller', selector)
-                } else {
-                    element.setAttribute('data-controller', `${attribute} ${selector}`)
-                }
-            })
-        })
-    }
-}
-
-function loadActions (parent, selectors) {
-    if (parent !== null) {
-        selectors.forEach(selector => {
-            parent.querySelectorAll(selector[0]).forEach(element => {
-                const attribute = element.getAttribute('data-action')
-
-                if (attribute === null) {
-                    element.setAttribute('data-action', selector[1])
-                } else if (attribute.indexOf(selector[1]) === -1) {
-                    element.setAttribute('data-action', `${attribute} ${selector[1]}`)
-                }
-            })
-        })
-    }
-}
-
-export default function loadStimulus (selector, najaLoad = true) {
-    loadControllers(selector, dynamicControllers)
-    loadActions(selector, dynamicActions)
-    najaLoad && naja.uiHandler.bindUI(selector)
-}

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

@@ -1,4 +0,0 @@
-export default function replaceScript (selector) {
-    selector.querySelectorAll('script:not([data-lib-cookieconsent])').forEach(script =>
-        script.setAttribute('data-controller', 'lib-script'))
-}

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

@@ -1,8 +0,0 @@
-export default function replaceTag (documentElement) {
-    documentElement.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)
-    })
-}

package/src/scripts/Utils/cdn.js

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

@@ -1,15 +0,0 @@
-!CSS.supports('selector(:has(*))') && (async () => (await import('css-has-pseudo/browser')).default(document))()
-
-if ('serviceWorker' in navigator && location.protocol === 'https:') {
-    window.addEventListener('load', () => {
-        if (!document.documentElement.classList.contains('no-sw')) {
-            navigator.serviceWorker.register('/sw.js').catch(e => console.error(e))
-        } else {
-            navigator.serviceWorker.getRegistrations().then(async registrations => {
-                for (const registration of registrations) {
-                    await registration.unregister()
-                }
-            })
-        }
-    })
-}

package/src/styles/Components/+.css

@@ -1,4 +0,0 @@
-@import "CookieConsent.css";
-@import "Dialog/+.css";
-@import "Dropdown/+.css";
-@import "Field.css";