@newlogic-digital/ui 3.5.0 → 3.7.5

package/src/scripts/Libraries/Slider.js

@@ -1,160 +0,0 @@
-const defaultOptions = {
-    behavior: 'smooth',
-    init: {
-        pauseSelector: [],
-        paginationSelector: null,
-        paginationItemClass: null,
-        progressSelector: null,
-        counterMinSelector: null,
-        counterMaxSelector: null,
-        autoplay: false
-    }
-}
-
-export const prevSlide = (selector) => {
-    selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth, behavior: defaultOptions.behavior })
-}
-
-export const nextSlide = (selector) => {
-    selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: defaultOptions.behavior })
-}
-
-export const selectSlide = (selector, selected = 0) => {
-    const position = selector.scrollLeft / selector.children[0].clientWidth
-
-    if (position - selected <= 0) {
-        selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth * (selected - 1 - position), behavior: defaultOptions.behavior })
-    } else {
-        selector.scroll({ left: selector.scrollLeft - selector.children[0].clientWidth * (position - selected + 1), behavior: defaultOptions.behavior })
-    }
-}
-
-export const initSlider = (selector, options = defaultOptions.init) => {
-    let isDown; let paused; let startX; let scrollLeft = null
-
-    function isElementInViewport (element) {
-        const rect = element.getBoundingClientRect()
-        const sliderRect = selector.getBoundingClientRect()
-
-        return (
-            rect.left >= sliderRect.left &&
-            rect.right <= sliderRect.right
-        )
-    }
-
-    function setProgressValue () {
-        if (options.progressSelector) {
-            options.progressSelector.value = ((selector.scrollLeft + selector.clientWidth) / selector.scrollWidth * 100).toFixed(2)
-        }
-    }
-
-    if (!selector.classList.contains('is-fade')) {
-        const grabbing = () => {
-            isDown = false
-            paused = false
-            selector.classList.remove('is-grabbing')
-            selector.scrollLeft = selector.scrollLeft - 1
-        }
-
-        selector.addEventListener('mouseleave', grabbing)
-
-        selector.addEventListener('mouseup', grabbing)
-
-        selector.addEventListener('mousedown', ({ pageX }) => {
-            isDown = true
-            paused = true
-            startX = pageX - selector.offsetLeft
-            scrollLeft = selector.scrollLeft
-        })
-
-        selector.addEventListener('mousemove', e => {
-            if (!isDown) return
-            e.preventDefault()
-            const x = e.pageX - selector.offsetLeft
-            const walk = (x - startX) * 1.25
-
-            selector.classList.add('is-grabbing')
-            selector.scrollLeft = scrollLeft - walk
-
-            selector.ondragstart = dragEvent => dragEvent.preventDefault()
-        })
-    }
-
-    const itemsCount = selector.clientWidth > selector.children[0].clientWidth
-        ? [...selector.children].reduce((item, children) =>
-            (selector.scrollWidth - selector.clientWidth > item.itemsWidth + children.clientWidth / 2)
-                ? { itemsWidth: item.itemsWidth + children.clientWidth, count: item.count + 1 }
-                : item, { itemsWidth: 0, count: 0 }).count + 1
-        : Math.ceil((selector.scrollWidth) / selector.children[0].clientWidth)
-
-    if (options.counterMinSelector) {
-        options.counterMinSelector.textContent = 1
-    }
-
-    if (options.counterMaxSelector) {
-        options.counterMaxSelector.textContent = itemsCount
-    }
-
-    if (options.paginationSelector) {
-        options.paginationSelector.insertAdjacentHTML('beforeend', [...Array(itemsCount)].map((_, i) => `
-            <div class="${options.paginationItemClass ?? ''}${i === 0 ? ' active' : ''}"></div>
-        `).join(''))
-
-        ;[...options.paginationSelector.children].forEach((children) => {
-            children.addEventListener('click', ({ currentTarget }) => {
-                selectSlide(selector, [...options.paginationSelector.children].indexOf(currentTarget) + 1)
-            })
-        })
-    }
-
-    setProgressValue()
-
-    selector.addEventListener('scroll', () => {
-        const activeSlide = parseInt((selector.scrollLeft / selector.children[0].clientWidth).toFixed(0))
-
-        for (const children of [...selector.children]) {
-            if (isElementInViewport(children)) {
-                children.classList.add('active')
-            } else {
-                children.classList.remove('active')
-            }
-        }
-
-        if (options.paginationSelector) {
-            [...options.paginationSelector.children].forEach(children => children.classList.remove('active'))
-
-            options.paginationSelector.children[activeSlide].classList.add('active')
-        }
-
-        setProgressValue()
-
-        if (options.counterMinSelector) {
-            options.counterMinSelector.textContent = activeSlide + 1
-        }
-    }, { passive: true })
-
-    if (options.progressSelector) {
-        options.progressSelector.addEventListener('click', ({ clientX, target }) => {
-            selector.scrollLeft = (selector.scrollWidth / 100) * (clientX - target.offsetLeft) / target.clientWidth * 100
-        })
-    }
-
-    ;[...options.pauseSelector, options.progressSelector, options.paginationSelector, selector].forEach(element => {
-        if (typeof element !== 'undefined' && element !== null) {
-            element.addEventListener('mouseenter', () => (paused = true))
-            element.addEventListener('mouseleave', () => (paused = false))
-        }
-    })
-
-    if (options.autoplay && !isNaN(options.autoplay)) {
-        setInterval(() => {
-            if (!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: options.behavior })
-                }
-            }
-        }, options.autoplay)
-    }
-}

package/src/scripts/Libraries/Tippy.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +0,0 @@
-export default function replaceTag (documentElement) {
-    documentElement.querySelectorAll('[data-lib-replace-tag]').forEach(element => {
-        const replaceTag = document.querySelector(`[data-lib-replace-tag=${element.dataset.libReplaceTag}]`)
-        const placement = element.closest('head') ? document.head : replaceTag.parentElement
-
-        replaceTag ? (replaceTag.outerHTML = element.outerHTML) : placement.insertAdjacentHTML('beforeend', element.outerHTML)
-    })
-}

package/src/scripts/Utils/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,68 +0,0 @@
-.c-cookieconsent {
-  position: fixed;
-  inset: 0;
-  display: none;
-  z-index: var(--z-50);
-  background-color: rgb(var(--color-dark-rgb) / 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;
-  }
-
-  &.active {
-    display: flex;
-  }
-
-  > .c {
-    max-width: 32rem;
-    width: calc(100% - 2rem);
-    border-radius: var(--rounded-2xl);
-    padding: 1rem;
-    background-color: var(--color-body-primary);
-
-    @media (--media-md) {
-      padding: 2rem;
-    }
-
-    > .c_head {
-      margin-bottom: 1rem;
-
-      @media (--media-md) {
-        margin-bottom: 1.5rem;
-      }
-    }
-
-    > .c_foot {
-      display: flex;
-      align-items: center;
-      margin-top: 1.5rem;
-
-      @media (--media-md) {
-        margin-top: 2rem;
-      }
-    }
-  }
-
-  &.is-center {
-    > .c {
-      max-width: 27rem;
-      text-align: center;
-
-      & .ui-image {
-        margin-left: auto;
-        margin-right: auto;
-      }
-    }
-  }
-}

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

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

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

@@ -1,8 +0,0 @@
-.c-dropdown {
-  padding: 0.875rem 0.75rem;
-  max-width: 16rem;
-  display: flex;
-  background-color: rgb(var(--color-body-rgb));
-  border-radius: var(--rounded);
-  box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 8%);
-}

package/src/styles/Libraries/Dialog.css

@@ -1 +0,0 @@
-@import "winduum/src/libraries/dialog.css";

package/src/styles/Libraries/Drawer.css

@@ -1,64 +0,0 @@
-.lib-drawer {
-  --lib-drawer-opacity: 0;
-
-  z-index: var(--z-30);
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: row;
-
-  & > div {
-    scroll-snap-align: end;
-  }
-
-  &[data-action*="scroll"] {
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    user-select: none;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &.active {
-      scroll-snap-type: x proximity;
-    }
-
-    &::-webkit-scrollbar {
-      width: 0;
-      height: 0;
-    }
-  }
-
-  &::before {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background-color: rgb(var(--color-dark-rgb) / 50%);
-    content: "";
-    opacity: var(--lib-drawer-opacity);
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    min-width: 100vw;
-    scroll-snap-align: end;
-  }
-
-  &.is-opacity {
-    &::before {
-      transition: var(--transition-opacity);
-    }
-  }
-
-  &:not(.active) {
-    pointer-events: none;
-
-    &::before {
-      opacity: 0;
-    }
-  }
-}