@newlogic-digital/ui 3.3.0 → 3.5.0

package/src/scripts/Libraries/Tippy.js

@@ -2,7 +2,7 @@ import { loadStimulus, importStyle } from '../Utils/Functions/+.js'
 import cdn from '../Utils/cdn.js'
 
 export default class LibTippy {
-    async init(element, options, template) {
+    async init (element, options, template) {
         const tippy = (await import('tippy.js')).default
         const { roundArrow } = await import('tippy.js')
 
@@ -14,7 +14,6 @@ export default class LibTippy {
 
         if (this.type.includes('dropdown')) {
             this.options.placement = 'bottom-end'
-            this.options.arrow = false
             this.options.maxWidth = 'none'
         }
 
@@ -28,7 +27,7 @@ export default class LibTippy {
             } else {
                 options.content = `
                   <div class="c-dropdown">
-                    <div class="wrp_dropdown_body">
+                    <div class="c_dropdown_body">
                       ${element.getAttribute('aria-label')}
                     </div>
                   </div>
@@ -36,16 +35,16 @@ export default class LibTippy {
             }
         }
 
-        if (typeof element.dataset.libTippySlot !== 'undefined') {
+        if (element.dataset.libTippySlot) {
             for (const [key, value] of Object.entries(JSON.parse(element.dataset.libTippySlot))) {
-                options.content = options.content.replaceAll(`{${key}}`, value).replaceAll(`%7B${key}%7B`, value)
+                options.content = options.content.replaceAll(`{${key}}`, value.toString()).replaceAll(`%7B${key}%7B`, value.toString())
             }
         }
 
         tippy(element, options)
     }
 
-    constructor(element, attributes = ['tooltip', '']) {
+    constructor (element, attributes = ['tooltip', '']) {
         const self = this
 
         this.options = {
@@ -55,29 +54,22 @@ export default class LibTippy {
             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
+                    document.documentElement.classList.add('max-md:is-body-overlay')
                 }
 
-                instance.popper.querySelector('.tippy-box').setAttribute('data-name', name)
+                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('m:is-body-overlay'), 50)
+                    setTimeout(() => document.documentElement.classList.remove('max-md:is-body-overlay'), 50)
                 }
             }
         }
@@ -96,17 +88,18 @@ export default class LibTippy {
         this.options.showOnCreate = true
 
         this.options.trigger !== 'manual' && this.options.trigger.split(' ').forEach(event => {
-            element.addEventListener(event, async function e() {
+            element.addEventListener(event, async function e () {
                 if (self.template.startsWith('/') && self.options.content === '') {
                     element.style.cursor = 'wait'
-                    element._addDataValue('state', 'loading')
+                    element.classList.add('loading')
 
                     fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
                         return response.json()
-                    }).then(async(data) => {
+                    }).then(async data => {
                         self.options.content = data.content
                         element.style.cursor = ''
-                        element._removeDataValue('state', 'loading')
+                        element.classList.remove('loading')
+
                         await self.init(element, self.options, self.template)
                         element.removeEventListener(event, e)
                     })
@@ -118,3 +111,7 @@ export default class LibTippy {
         })
     }
 }
+
+export function hideTippy () {
+    document.querySelectorAll('[data-controller~="lib-tippy"][aria-expanded="true"]').forEach(element => element?._tippy?.hide())
+}

package/src/scripts/Ui/+.js

@@ -1,4 +1,4 @@
-import './Checkbox.js'
-import './Input.js'
-import './Select.js'
+import './Check.js'
+import './Control.js'
+import './ControlSelect.js'
 import './Text.js'

package/src/scripts/Ui/Check.js

@@ -0,0 +1,8 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { inputValidity } from '../Utils/Functions/+.js'
+
+LibStimulus.register('ui-check', class extends Controller {
+    validity ({ currentTarget }) {
+        inputValidity(currentTarget)
+    }
+})

package/src/scripts/Ui/Control.js

@@ -0,0 +1,186 @@
+import cdn from '../Utils/cdn.js'
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { importStyle, inputStep, inputValidity } from '../Utils/Functions/+.js'
+
+LibStimulus.register('ui-control', class extends Controller {
+    static targets = ['number']
+
+    static values = {
+        dateOptions: {
+            default: {},
+            type: Object
+        },
+        dateDisabled: {
+            default: [],
+            type: Array
+        }
+    }
+
+    async connect () {
+        inputValidity(this.element, { validate: false })
+
+        this.element.addEventListener('change', () => inputValidity(this.element))
+
+        if (this.element.querySelector('select')) {
+            return
+        }
+
+        this.typeNumber()
+
+        await this.typeDate()
+
+        await this.typeColor()
+    }
+
+    async typeDate () {
+        const input = this.element.querySelector('[type^="date"], [type="month"]')
+
+        if (input) {
+            const AirDatepicker = (await import('air-datepicker')).default
+            const localeUrl = cdn.datepickerLang
+            const locale = (await import(/* @vite-ignore */ localeUrl)).default.default
+            const minDate = input.min ?? ''
+            const maxDate = input.max ?? ''
+            const timepicker = input.type === 'datetime-local'
+            const monthView = input.type === 'month'
+                ? {
+                    view: 'months',
+                    minView: 'months',
+                    dateFormat: 'MMMM yyyy',
+                    altFieldDateFormat: 'yyyy-MM'
+                }
+                : {}
+            const attributes = [...input.attributes].filter(({ name }) => name !== 'type').map(({ name, value }) => `${name}="${value}"`).join(' ')
+
+            input.setAttribute('type', 'hidden')
+
+            input.insertAdjacentHTML('afterend', `<input type="text" inputmode="none" ${attributes}>`)
+
+            const inputText = this.element.querySelector('[type="text"]')
+
+            inputText.addEventListener('keydown', e => {
+                const key = e.key.toLowerCase()
+
+                if (key !== 'backspace' && key !== 'tab') {
+                    e.preventDefault()
+                } else if (key === 'backspace') {
+                    this.datepicker.clear()
+                    inputText.dispatchEvent(new Event('change', { bubbles: true }))
+                }
+            })
+
+            this.datepicker = new AirDatepicker(inputText, {
+                locale,
+                timepicker,
+                minDate,
+                maxDate,
+                startDate: input.value,
+                selectedDates: input.value,
+                altField: input,
+                autoClose: true,
+                container: this.element,
+                minutesStep: 5,
+                altFieldDateFormat: 'yyyy-MM-dd',
+                buttons: ['today', 'clear'],
+                ...monthView,
+                ...this.dateOptionsValue,
+                onRenderCell: ({ date, cellType }) => {
+                    if (cellType === 'day' && this.dateDisabledValue.includes(this.datepicker.formatDate(date, 'yyyy-MM-dd'))) {
+                        return {
+                            disabled: true
+                        }
+                    }
+                },
+                onShow: () => {
+                    this.datepicker.$datepicker.querySelectorAll('.air-datepicker-button').forEach(element => {
+                        element.setAttribute('type', 'button')
+                        element.setAttribute('tabindex', '-1')
+                    })
+                },
+                onSelect: ({ date }) => {
+                    inputText.dispatchEvent(new Event('change', { bubbles: true }))
+                }
+            })
+        }
+    }
+
+    async typeColor () {
+        if (this.element.querySelector('[type="color"]') !== null) {
+            const Pickr = (await import('@simonwep/pickr')).default
+            const input = this.element.querySelector('input')
+
+            await importStyle(cdn.pickrCss)
+
+            input.setAttribute('inputmode', 'none')
+            input.setAttribute('type', 'text')
+            input.setAttribute('maxlength', '9')
+            input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
+
+            this.element.insertAdjacentHTML('afterbegin', '<div class="icon-l"><div class="color"></div></div>')
+
+            const pickr = new Pickr({
+                el: input,
+                useAsButton: true,
+                theme: 'nano',
+                position: 'bottom-start',
+                components: {
+                    preview: true,
+                    opacity: true,
+                    hue: true,
+                    interaction: {
+                        hex: true,
+                        rgba: true,
+                        input: true
+                    }
+                }
+            }).on('init', pickr => {
+                pickr.setColor(input.value)
+            }).on('change', color => {
+                input.value = color.toHEXA().toString()
+                this.element.querySelector('.color').style['background-color'] = color.toHEXA().toString()
+            }).on('hide', pickr => {
+                pickr.applyColor()
+                input.dispatchEvent(new Event('change', { bubbles: true }))
+            })
+
+            input.addEventListener('change', ({ target }) => {
+                pickr.setColor(target.value)
+            })
+        }
+    }
+
+    typeNumber () {
+        if (this.element.querySelector('[type="number"]') && !this.hasNumberTarget) {
+            if (!this.element.querySelector('.icon-r')) {
+                this.element.insertAdjacentHTML('beforeend', '<div class="icon-r"></div>')
+            }
+
+            this.element.querySelector('.icon-r').insertAdjacentHTML('beforeend', `
+                <div class="flex flex-col gap-0 justify-center -space-y-1" data-ui-control-target="number">
+                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#increase">
+                        <svg class="sq-4"><use href="#icon-angle-up"></use></svg>
+                    </button>
+                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#decrease">
+                        <svg class="sq-4"><use href="#icon-angle-down"></use></svg>
+                    </button>
+                </div>
+            `)
+        }
+    }
+
+    increase () {
+        inputStep(this.element.querySelector('input[type="number"]'), true)
+    }
+
+    decrease () {
+        inputStep(this.element.querySelector('input[type="number"]'), false)
+    }
+
+    showPicker () {
+        this.element.querySelector('input:not([hidden])').showPicker()
+    }
+
+    showDatepicker () {
+        this.datepicker.$el.focus()
+    }
+})

package/src/scripts/Ui/ControlSelect.js

@@ -0,0 +1,24 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('ui-control-select', class extends Controller {
+    connect () {
+        this.select = this.element.querySelector('select')
+        const option = this.element.querySelectorAll('[data-option]')
+
+        if (option[0] !== null) {
+            option.forEach(option => {
+                if (option.dataset.disabled) {
+                    return
+                }
+
+                option.setAttribute('data-action', 'click->ui-control-select#choose keydown.enter->ui-control-select#choose')
+            })
+        }
+    }
+
+    choose ({ currentTarget }) {
+        this.select.value = currentTarget.dataset.option
+        this.select.dispatchEvent(new Event('change', { bubbles: true }))
+        document.activeElement.blur()
+    }
+})

package/src/scripts/Ui/Text.js

@@ -1,23 +1,21 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 
 LibStimulus.register('ui-text', class extends Controller {
-    connect() {
+    connect () {
+        function wrap (element, wrapper) {
+            element.parentNode.insertBefore(wrapper, element)
+            wrapper.appendChild(element)
+        }
+
         this.element.querySelectorAll('table').forEach(table => {
-            this.wrap(table, new DOMParser().parseFromString('<div class="elm_text_table"></div>', 'text/html').body.firstChild)
+            wrap(table, new DOMParser().parseFromString('<div class="c_text_table"></div>', 'text/html').body.firstChild)
         })
 
         this.element.querySelectorAll('iframe').forEach(iframe => {
-            if (iframe.src.match(/youtube\.com/i)) {
-                this.wrap(iframe, new DOMParser().parseFromString(`<div class="elm_text_video" style="max-width: ${iframe.width.includes('%') ? iframe.width : iframe.width + 'px'}"></div>`, 'text/html').body.firstChild)
-            } else if (iframe.width && iframe.style.aspectRatio !== 'undefined') {
+            if (iframe.width && iframe.style.aspectRatio !== 'undefined') {
                 iframe.style.aspectRatio = iframe.width + '/' + iframe.height
                 iframe.style.height = 'auto'
             }
         })
     }
-
-    wrap(el, wrapper) {
-        el.parentNode.insertBefore(wrapper, el)
-        wrapper.appendChild(el)
-    }
 })

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

@@ -1,7 +1,7 @@
-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 inView } from './inView.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,4 +1,4 @@
-export default function importScript(url) {
+export default function importScript (url) {
     return new Promise((resolve, reject) => {
         if (document.querySelector(`script[src="${url}"]`) === null) {
             const script = document.createElement('script')

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

@@ -1,4 +1,4 @@
-export default function importStyle(url) {
+export default function importStyle (url) {
     return new Promise((resolve, reject) => {
         if (document.querySelector(`link[href="${url}"]`) === null) {
             const style = document.createElement('link')

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

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

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

@@ -0,0 +1,4 @@
+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,12 +1,8 @@
-export default function replaceTag(documentElement) {
+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/cdn.js

@@ -1,7 +1,6 @@
 export default {
     recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
-    seamless: 'https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@2.1.6/lib/bundle.min.js',
-    pickrCss: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.0/dist/themes/nano.min.css',
+    pickrCss: 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.2/dist/themes/nano.min.css',
     tippy: 'https://cdn.jsdelivr.net/combine/npm/tippy.js@6.3.7/dist/tippy.css,npm/tippy.js@6.3.1/dist/svg-arrow.css,npm/tippy.js@6.3.7/themes/light-border.css,npm/tippy.js@6.3.7/animations/scale.css',
-    datepicker: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css'
+    datepickerLang: `https://cdn.jsdelivr.net/npm/air-datepicker@3.3.5/locale/${document.documentElement.lang}.js/+esm`
 }

package/src/scripts/Utils/global.js

@@ -1,4 +1,4 @@
-!CSS.supports('selector(:has(*))') && (async() => (await import('css-has-pseudo/browser')).default(document))()
+!CSS.supports('selector(:has(*))') && (async () => (await import('css-has-pseudo/browser')).default(document))()
 
 if ('serviceWorker' in navigator && location.protocol === 'https:') {
     window.addEventListener('load', () => {

package/src/styles/Components/+.css

@@ -1,4 +1,4 @@
 @import "CookieConsent.css";
 @import "Dialog/+.css";
 @import "Dropdown/+.css";
-@import "Form/+.css";
+@import "Field.css";

package/src/styles/Components/CookieConsent.css

@@ -3,7 +3,7 @@
   inset: 0;
   display: none;
   z-index: var(--z-50);
-  background-color: rgb(var(--color-dark) / 0.75);
+  background-color: rgb(var(--color-dark-rgb) / 75%);
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -20,51 +20,48 @@
     animation: 0.5s ease 0s backwards 1 fade-in;
   }
 
-  &:--state-active {
+  &.active {
     display: flex;
   }
 
-  & .wrp {
+  > .c {
     max-width: 32rem;
     width: calc(100% - 2rem);
-    border-radius: var(--radius);
-    padding: 2rem;
+    border-radius: var(--rounded-2xl);
+    padding: 1rem;
+    background-color: var(--color-body-primary);
 
-    @nest :--type-center& {
-      max-width: 26rem;
-      text-align: center;
-
-      & .ui-image {
-        margin-left: auto;
-        margin-right: auto;
-      }
+    @media (--media-md) {
+      padding: 2rem;
     }
 
-    & .wrp_c_head {
+    > .c_head {
       margin-bottom: 1rem;
 
-      @media (--media-t) {
+      @media (--media-md) {
         margin-bottom: 1.5rem;
       }
     }
 
-    & .wrp_c_body {
-      & .ui-text {
-        --ui-text-size: 0.875rem;
-      }
-    }
-
-    & .wrp_c_foot {
+    > .c_foot {
       display: flex;
       align-items: center;
       margin-top: 1.5rem;
 
-      @media (--media-t) {
+      @media (--media-md) {
         margin-top: 2rem;
       }
+    }
+  }
+
+  &.is-center {
+    > .c {
+      max-width: 27rem;
+      text-align: center;
 
-      & .ui-link {
-        font-weight: var(--font-normal);
+      & .ui-image {
+        margin-left: auto;
+        margin-right: auto;
       }
     }
   }