@newlogic-digital/ui 3.4.2 → 3.7.5

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 */ cdn.datepickerLang.replace('{lang}', document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang))
-            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/+.js

@@ -1,6 +0,0 @@
-export { default as checkValidity } from './checkValidity.js'
-import './dataValue.js'
-export { default as importScript } from './importScript.js'
-export { default as importStyle } from './importStyle.js'
-export { default as loadStimulus } from './loadStimulus.js'
-export { default as replaceTag } from './replaceTag.js'

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/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/loadStimulus.js

@@ -1,42 +0,0 @@
-import naja from 'naja'
-
-const dynamicControllers = ['ui-input', 'ui-select', 'ui-text', 'ui-checkbox', 'ui-radio', 'c-cookieconsent', 'c-form-cookieconsent']
-const dynamicActions = [['.ui-btn', 'click->lib#ripple']]
-
-if (!('scrollBehavior' in document.documentElement.style)) {
-    dynamicActions.push(['a[href^="#"]', 'click->lib#anchor'])
-}
-
-function loadControllers(parent, selectors) {
-    if (parent !== null) {
-        selectors.forEach(selector => {
-            [...parent.getElementsByClassName(selector)].forEach(element => {
-                if (element.getAttribute('data-controller') === null) {
-                    element.setAttribute('data-controller', 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/replaceTag.js

@@ -1,12 +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)
-
-        if (element.tagName === 'SCRIPT') {
-            document.querySelector(`[data-lib-replace-tag=${element.dataset.libReplaceTag}]`)._addDataValue('controller', 'lib-script')
-        }
-    })
-}

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/CookieConsent.css

@@ -1,71 +0,0 @@
-.c-cookieconsent {
-  position: fixed;
-  inset: 0;
-  display: none;
-  z-index: var(--z-50);
-  background-color: rgb(var(--color-dark) / 0.75);
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  @media print {
-    display: none !important;
-  }
-
-  &:not(.is-animate) {
-    animation: 0.5s ease 0s forwards 1 fade-out;
-  }
-
-  &.is-animate {
-    animation: 0.5s ease 0s backwards 1 fade-in;
-  }
-
-  &:--state-active {
-    display: flex;
-  }
-
-  & .wrp {
-    max-width: 32rem;
-    width: calc(100% - 2rem);
-    border-radius: var(--radius);
-    padding: 2rem;
-
-    @nest :--type-center& {
-      max-width: 26rem;
-      text-align: center;
-
-      & .ui-image {
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-
-    & .wrp_c_head {
-      margin-bottom: 1rem;
-
-      @media (--media-t) {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    & .wrp_c_body {
-      & .ui-text {
-        --ui-text-size: 0.875rem;
-      }
-    }
-
-    & .wrp_c_foot {
-      display: flex;
-      align-items: center;
-      margin-top: 1.5rem;
-
-      @media (--media-t) {
-        margin-top: 2rem;
-      }
-
-      & .ui-link {
-        font-weight: var(--font-normal);
-      }
-    }
-  }
-}

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

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

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

@@ -1,5 +0,0 @@
-.c-dropdown {
-  padding: 1.25rem 1.5rem;
-  overflow: hidden;
-  max-width: 22rem;
-}

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