@newlogic-digital/ui 3.7.5 → 4.2.0

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)
-    }
-})

package/src/scripts/Ui/Control.js

@@ -1,194 +0,0 @@
-import cdn from '../Utils/cdn.js'
-import { LibStimulus, Controller } from '../Libraries/Stimulus.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']
-
-    static values = {
-        dateOptions: {
-            default: {},
-            type: Object
-        },
-        dateDisabled: {
-            default: [],
-            type: Array
-        }
-    }
-
-    async connect() {
-        validateField(this.element, { validate: false })
-
-        this.element.addEventListener('change', () => validateField(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.match(/(required|placeholder)/)).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"]')
-
-            if (input.id) {
-                inputText.id = input.id + '-datepicker'
-            }
-
-            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 }) => {
-                    input.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="me-auto"><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('.ms-auto')) {
-                this.element.insertAdjacentHTML('beforeend', '<div class="ms-auto"></div>')
-            }
-
-            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#stepDown">
-                        <svg class="size-4"><use href="#icon-angle-down-solid"></use></svg>
-                    </button>
-                </div>
-            `)
-        }
-    }
-
-    stepUp() {
-        this.element.querySelector('input:not([hidden])').stepUp()
-        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
-    }
-
-    stepDown() {
-        this.element.querySelector('input:not([hidden])').stepDown()
-        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
-    }
-
-    showPicker() {
-        this.element.querySelector('input:not([hidden])').showPicker()
-    }
-
-    showDatepicker() {
-        this.datepicker.$el.focus()
-    }
-})

package/src/scripts/Ui/ControlSelect.js

@@ -1,25 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { dataset } from '@newlogic-digital/utils-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]) {
-            option.forEach((option) => {
-                if (option.dataset.disabled) {
-                    return
-                }
-
-                dataset(option, 'action').add('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="overflow-x-auto max-w-full"></div>', 'text/html').body.firstChild)
-        })
-
-        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 +0,0 @@
-export { default as cdn } from './cdn.js'
-export { default as initAfter } from './initAfter.js'
-import './utilities.js'

package/src/scripts/Utils/cdn.js

@@ -1,5 +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',
-    datepickerLang: `https://cdn.jsdelivr.net/npm/air-datepicker@3.3.5/locale/${document.documentElement.lang}.js/+esm`
-}

package/src/scripts/Utils/initAfter.js

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

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

@@ -1,8 +0,0 @@
-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/styles/Components/+.css

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-.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,2 +0,0 @@
-@import "winduum/src/components/dialog/default.css";
-@import "winduum/src/components/dialog/default-props.css";

package/src/styles/Components/Drawer.css

@@ -1,18 +0,0 @@
-@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 +0,0 @@
-@import "winduum/src/components/field/index.css";

package/src/styles/Components/Popover.css

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

package/src/styles/Components/Toaster.css

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

package/src/styles/Layout/+.css

@@ -1,3 +0,0 @@
-@import "Header.css";
-@import "Main.css";
-@import "Nav.css";

package/src/styles/Layout/Header.css

@@ -1,18 +0,0 @@
-:root {
-  --l-header-height: 4rem;
-  --l-scroll-padding-top: calc(var(--l-header-height) + 1rem);
-}
-
-.l-header {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-20);
-  padding-inline: 2rem calc(2rem + var(--c-dialog-scrollbar-width, 0rem));
-  background-color: var(--color-dark);
-  color: var(--color-light);
-  height: var(--l-header-height);
-
-  .dark & {
-    background-color: var(--color-body-secondary);
-  }
-}