@newlogic-digital/ui 3.3.0 → 3.5.0

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

package/src/scripts/Ui/Input.js

@@ -1,259 +0,0 @@
-import cdn from '../Utils/cdn.js'
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { importStyle, checkValidity } from '../Utils/Functions/+.js'
-
-LibStimulus.register('ui-input', class extends Controller {
-    async connect() {
-        checkValidity(this.element, { validate: false })
-
-        this.element.addEventListener('change', () => checkValidity(this.element))
-
-        this.typeNumber(this.element)
-
-        this.typeFile(this.element)
-
-        await this.typeDatetime(this.element)
-
-        await this.typeColor(this.element)
-    }
-
-    typeNumber(element) {
-        if (element.querySelector('[type="number"]') !== null) {
-            if (element.querySelector('.icon') === null) {
-                element.insertAdjacentHTML('beforeend', '<span class="icon icon-angle-down" data-action="minus"></span><span class="icon icon-angle-up" data-action="plus"></span>')
-            }
-
-            element.querySelector('[type="number"]').addEventListener('keydown', e => {
-                if ([46, 8, 9, 27, 13, 190].indexOf(e.keyCode) !== -1 || e.keyCode === 16 || (e.keyCode === 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 39)) {
-                    return
-                }
-
-                if (((e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
-                    e.preventDefault()
-                }
-            })
-
-            element.querySelector('[data-action="plus"]').addEventListener('click', () => {
-                const input = this.element.querySelector('input')
-                const num = parseInt(input.value === '' ? 0 : input.value) + parseInt(input.step === '' ? 1 : input.step)
-
-                if (num <= input.max || input.max === '') {
-                    input.value = num.toString()
-                    input.dispatchEvent(new Event('change', { bubbles: true }))
-                }
-            })
-
-            element.querySelector('[data-action="minus"]').addEventListener('click', () => {
-                const input = this.element.querySelector('input')
-                const num = parseInt(input.value) - parseInt(input.step === '' ? 1 : input.step)
-
-                if (num >= input.min || input.min === '') {
-                    input.value = num.toString()
-                    input.dispatchEvent(new Event('change', { bubbles: true }))
-                }
-            })
-        }
-    }
-
-    async typeDatetime(element) {
-        const date = element.querySelector('[type^="date"]')
-
-        if (date !== null && !document.documentElement.classList.contains('mobile')) {
-            const lang = await import(`/* @vite-ignore */ https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/js/i18n/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.min.js`)
-            const { Datepicker } = await import('vanillajs-datepicker')
-
-            await importStyle(cdn.datepicker)
-
-            Object.assign(Datepicker.locales, lang.default)
-
-            const datetime = date.getAttribute('type') === 'datetime-local'
-            const required = date.getAttribute('required') !== null
-            const placeholder = date.getAttribute('placeholder') !== null
-            let currentDate; let currentTime = null
-
-            date.setAttribute('type', 'hidden')
-            element.insertAdjacentHTML('beforeend', `<input type="text" inputmode="none" ${required ? 'required' : ''} ${placeholder ? `placeholder="${date.getAttribute('placeholder')}"` : ''}>`)
-
-            const hidden = element.querySelector('[type="hidden"]')
-
-            if (datetime && hidden.value.indexOf(':') !== -1) {
-                hidden.setAttribute('data-time', hidden.value.substring(hidden.value.indexOf(':') - 2, hidden.value.length))
-            }
-
-            const datepicker = new Datepicker(element.querySelector('[type="text"]'), Object.assign({
-                autohide: !datetime,
-                language: document.documentElement.lang,
-                format: 'dd.mm.yyyy',
-                clearBtn: true,
-                todayBtn: true,
-                todayBtnMode: 1,
-                minDate: Datepicker.parseDate(hidden.getAttribute('min'), 'yyyy-mm-dd'),
-                maxDate: Datepicker.parseDate(hidden.getAttribute('max'), 'yyyy-mm-dd')
-            }, JSON.parse(element.getAttribute('data-lib-datepicker'))))
-            datepicker.setDate(Datepicker.parseDate(hidden.value, 'yyyy-mm-dd'))
-
-            if (datetime && hidden.value) {
-                element.insertAdjacentHTML('afterbegin', `<span class="input" ${placeholder ? 'placeholder' : ''}><span>${datepicker.getDate('dd.mm.yyyy') + '</span>&nbsp;' + hidden.dataset.time}</span>`)
-            }
-
-            if (datetime) {
-                datepicker.element.addEventListener('keydown', e => {
-                    if (e.key === 'Backspace' || e.key === 'Delete') {
-                        datepicker.setDate({ clear: true })
-                    } else {
-                        e.preventDefault()
-                    }
-                })
-            }
-
-            datepicker.element.addEventListener('changeDate', () => {
-                if (typeof hidden.dataset.time !== 'undefined') {
-                    if (typeof datepicker.getDate('yyyy-mm-dd') !== 'undefined') {
-                        hidden.value = datepicker.getDate('yyyy-mm-dd') + 'T' + hidden.dataset.time
-
-                        const value = '<span>' + datepicker.getDate('dd.mm.yyyy') + '</span>&nbsp;' + hidden.dataset.time
-
-                        if (element.querySelector('.input') === null) {
-                            element.insertAdjacentHTML('afterbegin', `<span class="input" ${placeholder ? 'placeholder' : ''}>${value}</span>`)
-                        } else {
-                            element.querySelector('.input').innerHTML = value
-                        }
-                    } else {
-                        hidden.value = ''
-                        element.querySelector('.input').textContent = ''
-                    }
-                } else if (datepicker.getDate()) {
-                    hidden.value = datepicker.getDate('yyyy-mm-dd')
-                } else {
-                    hidden.value = ''
-                }
-
-                hidden.dispatchEvent(new Event('change', { bubbles: true }))
-            })
-
-            datepicker.element.addEventListener('show', element => {
-                const footer = element.detail.datepicker.picker.element.querySelector('.datepicker-footer')
-                currentDate = datepicker.getDate('yyyy-mm-dd')
-
-                this.element._addDataValue('state', 'active')
-
-                if (footer.querySelector('[type="time"]') === null && datetime) {
-                    let time = hidden.dataset.time
-
-                    if (typeof time === 'undefined') {
-                        time = new Date().toLocaleTimeString('de', { hour: '2-digit', minute: '2-digit' })
-                        hidden.setAttribute('data-time', time)
-                    }
-
-                    currentTime = time
-
-                    footer.querySelector('.datepicker-controls').insertAdjacentHTML('beforeend', `<input type="time" value="${time}" aria-label="Text"><button type="button" data-ok class="button ok-btn" style="width: auto;">Ok</button>`)
-
-                    footer.querySelector('[type="time"]').addEventListener('change', e => {
-                        hidden.setAttribute('data-time', e.target.value)
-                    })
-
-                    footer.querySelector('[type="time"]').addEventListener('mousedown', e =>
-                        e.stopPropagation()
-                    )
-
-                    footer.querySelector('[type="time"]').addEventListener('blur', e => {
-                        e.stopPropagation()
-                        e.preventDefault()
-                        datepicker.element.focus()
-                    })
-
-                    footer.querySelector('[data-ok]').addEventListener('click', () => {
-                        if (hidden.value === '') {
-                            footer.querySelector('.today-btn').click()
-                        }
-
-                        datepicker.element.focus()
-                        datepicker.hide()
-                    })
-                } else if (datetime) {
-                    currentTime = hidden.dataset.time
-                }
-            })
-
-            datepicker.element.addEventListener('hide', element => {
-                if (hidden.value === '') {
-                    this.element._removeDataValue('state', 'active')
-                } else {
-                    if (datetime) {
-                        element.detail.datepicker.picker.element.querySelector('[type="time"]').dispatchEvent(new Event('change', { bubbles: true }))
-
-                        if (currentDate !== datepicker.getDate('yyyy-mm-dd') || currentTime.toString() !== hidden.dataset.time.toString()) {
-                            datepicker.element.dispatchEvent(new Event('changeDate', { bubbles: true }))
-                        }
-                    }
-                }
-            })
-        }
-    }
-
-    async typeColor(element) {
-        if (element.querySelector('[type="color"]') !== null) {
-            const Pickr = (await import('@simonwep/pickr')).default
-            const input = element.querySelector('input')
-
-            await importStyle(cdn.pickrCss)
-
-            element.setAttribute('data-type', 'color')
-            element.querySelector('[type="color"]').setAttribute('inputmode', 'none')
-            element.querySelector('[type="color"]').setAttribute('type', 'text')
-            element.insertAdjacentHTML('afterbegin', '<span class="color"></span>')
-
-            input.setAttribute('maxlength', '9')
-            input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
-
-            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()
-                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)
-            })
-        }
-    }
-
-    typeFile(element) {
-        if (element.querySelector('[type="file"]') !== null) {
-            element.setAttribute('data-type', 'file')
-            element.insertAdjacentHTML('beforeend', `<span class="icon icon-paper-clip">${element.querySelector('input').title}</span><span data-placeholder="${element.querySelector('input').placeholder}"></span>`)
-            element.querySelector('input').addEventListener('change', e => {
-                const placeholder = element.querySelector('span:not(.icon)')
-
-                if (e.target.getAttribute('multiple') === null) {
-                    placeholder.removeAttribute('data-placeholder')
-                    placeholder.textContent = e.target.value.replace(/.*(\/|\\)/, '')
-                } else {
-                    const files = e.target.files
-                    placeholder.removeAttribute('data-placeholder')
-                    placeholder.textContent = Object.keys(files).length === 1 ? e.target.value.replace(/.*(\/|\\)/, '') : `${Object.keys(files).length} soubory`
-                }
-            })
-        }
-    }
-})

package/src/scripts/Ui/Select.js

@@ -1,53 +0,0 @@
-import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { checkValidity } from '../Utils/Functions/+.js'
-
-LibStimulus.register('ui-select', class extends Controller {
-    connect() {
-        const element = this.element
-        const select = element.querySelector('select')
-        const option = element.querySelectorAll('[data-option]')
-
-        element.addEventListener('click', () => {
-            if (!element._hasDataValue('state', 'focus')) {
-                element._addDataValue('state', 'focus')
-            } else {
-                element._removeDataValue('state', 'focus')
-            }
-
-            element.addEventListener('blur', function e() {
-                element._removeDataValue('state', 'focus')
-                element.removeEventListener('blur', e)
-            })
-        })
-
-        element.addEventListener('click', e => {
-            if ((element._hasDataValue('state', 'focus') && e.timeStamp === 0) || e.target.tagName === 'OPTION') {
-                element._removeDataValue('state', 'focus')
-            }
-        })
-
-        select.addEventListener('change', () => {
-            checkValidity(element)
-            this.valueCheck(select)
-        })
-
-        if (option[0] !== null) {
-            option.forEach(option => {
-                option.addEventListener('click', () => {
-                    select.value = option.getAttribute('data-option')
-                    select.dispatchEvent(new Event('change', { bubbles: true }))
-                })
-            })
-        }
-
-        this.valueCheck(select)
-    }
-
-    valueCheck(select) {
-        if (select.value === '') {
-            this.element._removeDataValue('state', 'active')
-        } else {
-            this.element._addDataValue('state', 'active')
-        }
-    }
-})

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

@@ -1,44 +0,0 @@
-export default function checkValidity(element, options = {}) {
-    const { validate, message } = Object.assign({ validate: true, message: false }, options)
-    const selectors = element.querySelectorAll('input, textarea, select')
-
-    selectors.forEach(selector => {
-        const isInput = element.classList.contains('ui-input')
-        const isSelect = element.classList.contains('ui-select')
-        const validationMessage = selector.dataset.validationMessage ?? selector.validationMessage
-        const validityElement = element.closest('.ui-input-group')?.querySelector('em') ?? element.querySelector('em')
-
-        if (!selector.outerHTML.match(/(data-novalidate|readonly|hidden)/) && validate) {
-            element._removeDataValue('state', 'valid invalid active')
-
-            if ((isInput || isSelect) && element.querySelector('[class^="icon"][class*="valid"]') !== null) {
-                element.querySelector('[class^="icon"][class*="valid"]').remove()
-            }
-
-            if (selector.checkValidity()) {
-                element._addDataValue('state', 'valid')
-
-                if (validityElement) {
-                    validityElement.remove()
-                }
-            } else {
-                element._addDataValue('state', 'invalid')
-
-                if (!validityElement && message) {
-                    (element.closest('.ui-input-group') ?? element).insertAdjacentHTML('beforeend', `<em>${validationMessage}</em>`)
-                }
-
-                if ((isInput || isSelect) && element.querySelector('[class^="icon"][class*="valid"]') === null) {
-                    const icon = element.querySelector('.icon-r')
-                    const where = icon || element
-
-                    where.insertAdjacentHTML(icon ? 'afterend' : 'beforeend', `<div class="icon-r icon-invalid text-error lib-hint-top lib-hint-error" tabindex="0" aria-label="${validationMessage}"><svg><use href="#icon-exclamation-circle"></use></svg></div>`)
-                }
-            }
-        }
-
-        if (isInput && selector.value !== '') {
-            element._addDataValue('state', 'active')
-        }
-    })
-}

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

@@ -1,52 +0,0 @@
-Element.prototype._addDataValue = function(key, value) {
-    key = `data-${key}`
-
-    let attribute = this.getAttribute(key)
-
-    if (attribute === null) {
-        this.setAttribute(key, value)
-    } else {
-        value = value.split(' ')
-        attribute = attribute.split(' ')
-
-        value.map(value => !attribute.includes(value) && attribute.push(value))
-
-        this.setAttribute(key, attribute.join(' '))
-    }
-}
-
-Element.prototype._removeDataValue = function(key, value) {
-    const result = []
-
-    key = `data-${key}`
-
-    const attribute = this.getAttribute(key)
-
-    if (attribute === null) return
-
-    attribute.split(' ').map(attribute => !value.split(' ').includes(attribute) && result.push(attribute))
-
-    if (result.length !== 0) {
-        this.setAttribute(key, result.join(' '))
-    } else {
-        this.removeAttribute(key)
-    }
-}
-
-Element.prototype._hasDataValue = function(key, value) {
-    key = `data-${key}`
-
-    const attribute = this.getAttribute(key)
-
-    if (attribute === null) return false
-    return attribute.split(' ').includes(value)
-}
-
-Element.prototype._getDataValue = function(key) {
-    key = `data-${key}`
-
-    const attribute = this.getAttribute(key)
-
-    if (attribute === null) return ''
-    return attribute
-}

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

@@ -1,24 +0,0 @@
-export default function inView(element, options = {}) {
-    let inView = false
-
-    return new Promise((resolve) => {
-        if (typeof IntersectionObserver === 'undefined') {
-            resolve()
-            return false
-        }
-
-        if (!options.rootMargin) {
-            options.rootMargin = '100px'
-        }
-
-        const observer = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting && inView === false) {
-                inView = entries[0].isIntersecting
-                observer.disconnect()
-                resolve()
-            }
-        }, options || {})
-
-        observer.observe(element)
-    })
-}

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

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

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

@@ -1,31 +0,0 @@
-.c-form-cookieconsent {
-  & .wrp_form_head {
-    margin-bottom: 1rem;
-  }
-
-  & .wrp_form_body {
-    display: flex;
-    flex-direction: row;
-    margin: 0 0 1.75rem;
-    line-height: 1.5;
-
-    @media (--media-m) {
-      flex-direction: column;
-    }
-
-    & .ui-radio {
-      &:not(:last-of-type) {
-        margin-right: 1rem;
-
-        @media (--media-m) {
-          margin-right: auto;
-          margin-bottom: 0.75rem;
-        }
-      }
-    }
-  }
-
-  & .wrp_form_foot {
-    margin-top: 2rem;
-  }
-}