@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/scripts/Components/CookieConsent.js

@@ -1,83 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import LibCookieConsent from '../Libraries/CookieConsent.js'
-
-LibStimulus.register('c-cookieconsent', class extends Controller {
-    connect() {
-        const selector = this.element
-
-        if (document.querySelector('.c-form-cookieconsent') !== null) {
-            return
-        }
-
-        if (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now()) {
-            setTimeout(() => {
-                selector._addDataValue('state', 'active')
-                selector.classList.add('is-animate')
-            }, 1500)
-        }
-
-        selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
-            this.hide(['performance', 'marketing'])
-        })
-
-        selector.querySelector('[data-lib-cookieconsent-decline]').addEventListener('click', () => {
-            this.hide([])
-        })
-    }
-
-    hide(type) {
-        LibCookieConsent.set(type)
-        this.element.classList.remove('is-animate')
-
-        setTimeout(() => {
-            this.element._removeDataValue('state', 'active')
-            this.element.remove()
-        }, 500)
-    }
-})
-LibStimulus.register('c-form-cookieconsent', class extends Controller {
-    connect() {
-        const selector = this.element
-        const type = LibCookieConsent.getItem('lib-cookieconsent')
-        const modal = document.querySelector('.c-cookieconsent')
-
-        if (modal) {
-            modal.classList.remove('is-animate')
-            modal._removeDataValue('state', 'active')
-        }
-
-        if (type !== null) {
-            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
-                input.checked = false
-            })
-
-            JSON.parse(type).forEach(type => {
-                if (selector.querySelector(`input[value="${type}"]`) !== null) {
-                    selector.querySelector(`input[value="${type}"]`).checked = true
-                }
-            })
-        }
-
-        selector.addEventListener('submit', e => {
-            e.preventDefault()
-
-            const type = []
-
-            this.element.querySelectorAll('input:not([disabled])').forEach(input => {
-                input.checked && type.push(input.value)
-            })
-
-            LibCookieConsent.set(type)
-            location.reload()
-        })
-    }
-
-    disconnect() {
-        const modal = document.querySelector('.c-cookieconsent')
-
-        if (modal && (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now())) {
-            modal._addDataValue('state', 'active')
-            modal.classList.add('is-animate')
-        }
-    }
-})

package/src/scripts/Layout/Main.js

@@ -1,47 +0,0 @@
-import { showRipple } from 'winduum/src/libraries/ripple.js'
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import LibAnchor from '../Libraries/Anchor.js'
-import LibTippy from '../Libraries/Tippy.js'
-import LibTabs from '../Libraries/Tabs.js'
-import LibNativeSlider from '../Libraries/NativeSlider.js'
-
-LibStimulus.register('lib', class extends Controller {
-    ripple(e) {
-        showRipple(e)
-    }
-
-    anchor({ currentTarget }) {
-        arguments[0].preventDefault()
-        LibAnchor.action(currentTarget)
-    }
-
-    darkMode() {
-        if (document.documentElement.classList.contains('dark')) {
-            localStorage.theme = 'light'
-            document.documentElement.classList.remove('dark')
-        } else {
-            localStorage.theme = 'dark'
-            document.documentElement.classList.add('dark')
-        }
-    }
-})
-
-LibStimulus.register('lib-tabs', class extends Controller {
-    connect() {
-        LibTabs(this.element)
-    }
-})
-
-LibStimulus.register('lib-ns', class extends Controller {
-    connect() {
-        LibNativeSlider(this.element.querySelector('[data-lib-ns]'), this.element)
-    }
-})
-
-LibStimulus.register('lib-tippy', class extends Controller {
-    connect() {
-        const attributes = this.element.getAttribute('data-lib-tippy')
-
-        new LibTippy(this.element, attributes !== null ? attributes.replace(/\s/g, '').split(',') : undefined)
-    }
-})

package/src/scripts/Libraries/Anchor.js

@@ -1,35 +0,0 @@
-const LibAnchor = {
-    animation: (element) => {
-        const offset = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('scroll-padding-top'))
-
-        document.documentElement.scroll({ top: element.offsetTop - offset, behavior: 'smooth' })
-    },
-    action: (element) => {
-        const href = element.href ? element.getAttribute('href') : element.getAttribute('data-action-href')
-        const data = element.dataset.libAnhor ? element.dataset.libAnhor : ''
-        const target = document.querySelector(`[id="${href.replace('#', '')}"]`)
-
-        if (target !== null) {
-            if (!(data.includes('mobile') && window.innerWidth > 960)) {
-                LibAnchor.animation(target)
-            }
-
-            if (!data.includes('silent')) {
-                window.location.hash = target.id
-            }
-        }
-    },
-    init: () => {
-        const selector = document.querySelectorAll('[id]')
-
-        if (selector[0] !== null) {
-            selector.forEach(element => {
-                if (window.location.hash && element.getAttribute('id') === window.location.hash.replace('#', '')) {
-                    LibAnchor.animation(element)
-                }
-            })
-        }
-    }
-}
-
-export default LibAnchor

package/src/scripts/Libraries/Drawer.js

@@ -1,45 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-
-LibStimulus.register('lib-drawer', class LibDrawer extends Controller {
-    static targets = ['nav']
-
-    init() {
-        setTimeout(() => this.navTarget.classList.add('is-transition'), 50)
-        this.navTarget.addEventListener('click', ({ target }) => {
-            if (target === this.navTarget) {
-                this.hide()
-            }
-        })
-    }
-
-    show() {
-        this.navTarget.scrollLeft = 0
-        this.navTarget.style.setProperty('--lib-drawer-opacity', '1')
-        this.navTarget.classList.add('is-opacity')
-        this.navTarget._addDataValue('state', 'active')
-        this.navTarget.setAttribute('aria-hidden', 'false')
-        this.navTarget.removeAttribute('inert')
-        document.documentElement.classList.add('overflow-hidden')
-    }
-
-    hide() {
-        this.navTarget.setAttribute('inert', '')
-        this.navTarget.setAttribute('aria-hidden', 'true')
-        this.navTarget._removeDataValue('state', 'active')
-        this.navTarget.classList.add('is-opacity')
-        this.navTarget.style.setProperty('--lib-drawer-opacity', '0')
-        document.documentElement.classList.remove('overflow-hidden')
-    }
-
-    scroll({ target }) {
-        if (target.scrollLeft > 1) {
-            this.navTarget.classList.remove('is-opacity')
-            this.navTarget.style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.navTarget.children[0].clientWidth) - 1)}`)
-        }
-
-        if (target.scrollLeft === this.navTarget.children[0].clientWidth) {
-            this.navTarget._removeDataValue('state', 'active')
-            document.documentElement.classList.remove('overflow-hidden')
-        }
-    }
-})

package/src/scripts/Libraries/NativeSlider.js

@@ -1,138 +0,0 @@
-export default function LibNativeSlider(selector, parent) {
-    const self = {
-        behavior: 'auto',
-        ref: {
-            nav: parent.querySelector('[data-lib-ns-nav]'),
-            select: parent.querySelectorAll('[data-lib-ns-nav-item]'),
-            progress: parent.querySelector('[data-lib-ns-progress]'),
-            counterMin: parent.querySelector('[data-lib-ns-counter="min"]'),
-            counterMax: parent.querySelector('[data-lib-ns-counter="max"]'),
-            prev: parent.querySelector('[data-lib-ns-prev]'),
-            next: parent.querySelector('[data-lib-ns-next]')
-        }
-    }
-
-    if (!selector.classList.contains('is-fade')) {
-        self.behavior = 'smooth'
-
-        if (!document.documentElement.classList.contains('safari')) {
-            const grabbing = () => {
-                self.isDown = false
-                self.paused = false
-                selector.classList.remove('is-grabbing')
-                selector.scrollLeft = selector.scrollLeft - 1
-            }
-
-            selector.addEventListener('mouseleave', grabbing)
-
-            selector.addEventListener('mouseup', grabbing)
-
-            selector.addEventListener('mousedown', e => {
-                self.isDown = true
-                self.startX = e.pageX - selector.offsetLeft
-                self.scrollLeft = selector.scrollLeft
-                self.paused = true
-            })
-
-            selector.addEventListener('mousemove', e => {
-                if (!self.isDown) return
-                e.preventDefault()
-                const x = e.pageX - selector.offsetLeft
-                const walk = (x - self.startX) * 1.25
-                selector.classList.add('is-grabbing')
-                selector.scrollLeft = self.scrollLeft - walk
-
-                selector.ondragstart = dragEvent => {
-                    dragEvent.preventDefault()
-                }
-            })
-        }
-    }
-
-    self.counterMax = parseInt(((selector.scrollWidth - selector.clientWidth) / selector.children[0].clientWidth + 1).toFixed(0))
-
-    if (self.ref.counterMax !== null) {
-        self.ref.counterMax.textContent = self.counterMax
-    }
-
-    if (self.ref.nav !== null) {
-        self.ref.nav.insertAdjacentHTML('beforeend', [...Array(self.counterMax)].map((x, i) => `<div data-state="${i === 0 && 'active'}" aria-label="${i + 1}" aria-current="step" data-lib-ns-nav-item="${i}"></div>`).join(''))
-        self.ref.select = parent.querySelectorAll('[data-lib-ns-nav-item]')
-    }
-
-    if (typeof self.ref.select[0] !== 'undefined') {
-        self.ref.select.forEach(elm => {
-            elm.addEventListener('click', () => {
-                if (!elm._hasDataValue('state', 'active')) {
-                    const position = selector.scrollLeft / selector.children[0].clientWidth
-                    const selected = elm.dataset.libNsNavItem
-
-                    if (position - selected <= 0) {
-                        selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth * (selected - position), behavior: self.behavior })
-                    } else {
-                        selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth * (position - selected), behavior: self.behavior })
-                    }
-                }
-            })
-        })
-    }
-
-    selector.addEventListener('scroll', () => {
-        if (self.ref.progress !== null) {
-            self.ref.progress.value = ((selector.scrollLeft + selector.clientWidth) / selector.scrollWidth * 100).toFixed(2)
-        }
-
-        const activeSlide = parseInt(((selector.scrollLeft / selector.children[0].clientWidth) + 1).toFixed(0))
-
-        if (self.ref.counterMin !== null) {
-            self.ref.counterMin.textContent = activeSlide
-        }
-
-        if (typeof self.ref.select[0] !== 'undefined') {
-            self.ref.select.forEach(elm => elm._removeDataValue('state', 'active'))
-
-            self.ref.select[activeSlide - 1]._addDataValue('state', 'active')
-        }
-
-        if (Math.floor(selector.scrollLeft / selector.children[0].clientWidth) === selector.scrollLeft / selector.children[0].clientWidth) {
-            [...selector.children].forEach(elm => {
-                elm._removeDataValue('state', 'active')
-
-                if (selector.scrollLeft === elm.offsetLeft - elm.parentNode.offsetLeft) {
-                    elm._addDataValue('state', 'active')
-                }
-            })
-        }
-    }, { passive: true })
-
-    if (self.ref.progress !== null) {
-        self.ref.progress.addEventListener('click', e => {
-            selector.scrollLeft = (selector.scrollWidth / 100) * (e.clientX - e.target.offsetLeft) / e.target.clientWidth * 100
-        })
-    }
-
-    if (self.ref.prev !== null && self.ref.next !== null) {
-        self.ref.prev.addEventListener('click', () => selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth, behavior: self.behavior }))
-
-        self.ref.next.addEventListener('click', () => selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior }))
-    }
-
-    [self.ref.prev, self.ref.next, ...self.ref.select, self.ref.progress].forEach(elm => {
-        if (typeof elm !== 'undefined' && elm !== null) {
-            elm.addEventListener('mouseenter', () => (self.paused = true))
-            elm.addEventListener('mouseleave', () => (self.paused = false))
-        }
-    })
-
-    if (!isNaN(parseInt(selector.getAttribute('data-lib-ns')))) {
-        setInterval(() => {
-            if (!self.paused) {
-                if (selector.scrollLeft < selector.children[0].clientWidth * (selector.children.length - 1)) {
-                    selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior })
-                } else {
-                    selector.scroll({ left: 0, behavior: self.behavior })
-                }
-            }
-        }, parseInt(selector.getAttribute('data-lib-ns')))
-    }
-}

package/src/scripts/Libraries/Script.js

@@ -1,19 +0,0 @@
-import { LibStimulus, Controller } from './Stimulus.js'
-
-LibStimulus.register('lib-script', class extends Controller {
-    connect() {
-        const element = this.element
-        const script = document.createElement('script')
-
-        ;[...element.attributes].forEach(attribute => {
-            if (attribute.specified && !attribute.name.includes('type') && !attribute.name.includes('data-controller')) {
-                script.setAttribute(attribute.name, attribute.value)
-            }
-        })
-
-        script.innerHTML = element.innerHTML
-
-        element.parentElement.appendChild(script)
-        element.remove()
-    }
-})

package/src/scripts/Libraries/Tabs.js

@@ -1,16 +0,0 @@
-export default function LibTabs(element) {
-    element.querySelector('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach((selector, index) => {
-        selector.addEventListener('click', () => {
-            arguments[0].preventDefault()
-
-            selector.closest('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach(element => element._removeDataValue('state', 'active'))
-            selector._addDataValue('state', 'active')
-
-            ;[...element.querySelector('[data-lib-tabs-area]').children].forEach(element => {
-                element._removeDataValue('state', 'active')
-            })
-
-            element.querySelector('[data-lib-tabs-area]').children[index]._addDataValue('state', 'active')
-        })
-    })
-}

package/src/scripts/Libraries/Tippy.js

@@ -1,120 +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.arrow = false
-            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="wrp_dropdown_body">
-                      ${element.getAttribute('aria-label')}
-                    </div>
-                  </div>
-                `
-            }
-        }
-
-        if (typeof element.dataset.libTippySlot !== 'undefined') {
-            for (const [key, value] of Object.entries(JSON.parse(element.dataset.libTippySlot))) {
-                options.content = options.content.replaceAll(`{${key}}`, value).replaceAll(`%7B${key}%7B`, value)
-            }
-        }
-
-        tippy(element, options)
-    }
-
-    constructor(element, attributes = ['tooltip', '']) {
-        const self = this
-
-        this.options = {
-            content: '',
-            placement: 'bottom',
-            trigger: 'mouseenter focus',
-            interactive: true,
-            appendTo: 'parent',
-            arrow: false,
-            theme: 'light-border',
-            animation: 'scale',
-            inertia: true,
-            allowHTML: true,
-            onShow: (instance) => {
-                let name = this.template
-
-                if (this.type.includes('-full')) {
-                    instance.popper.classList.add('is-full')
-                    document.documentElement.classList.add('m:is-body-overlay')
-                }
-
-                if (typeof name === 'undefined') {
-                    name = this.type
-                }
-
-                instance.popper.querySelector('.tippy-box').setAttribute('data-name', name)
-
-                loadStimulus(instance.popper.querySelector('.tippy-content'))
-            },
-            onHide: () => {
-                if (this.type.includes('-full')) {
-                    setTimeout(() => document.documentElement.classList.remove('m: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._addDataValue('state', '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._removeDataValue('state', '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)
-                }
-            })
-        })
-    }
-}

package/src/scripts/Ui/Checkbox.js

@@ -1,10 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { checkValidity } from '../Utils/Functions/+.js'
-
-['ui-checkbox', 'ui-radio'].forEach(identifier => LibStimulus.register(identifier, class extends Controller {
-    connect() {
-        const input = this.element.querySelector('input:not([type="hidden"])')
-
-        input.addEventListener('change', () => checkValidity(this.element))
-    }
-}))