@newlogic-digital/ui 3.2.0 → 3.3.0

package/src/scripts/Ui/Input.js

@@ -1,62 +1,20 @@
 import cdn from '../Utils/cdn.js'
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
-import { importStyle } from '../Utils/Functions/+.js'
+import { importStyle, checkValidity } from '../Utils/Functions/+.js'
 
 LibStimulus.register('ui-input', class extends Controller {
     async connect() {
-        const element = this.element
+        checkValidity(this.element, { validate: false })
 
-        this.validate(element, false)
+        this.element.addEventListener('change', () => checkValidity(this.element))
 
-        element.addEventListener('change', () => {
-            this.validate(element, true)
-        })
+        this.typeNumber(this.element)
 
-        this.typeNumber(element)
+        this.typeFile(this.element)
 
-        this.typeFile(element)
+        await this.typeDatetime(this.element)
 
-        await this.typeDatetime(element)
-
-        await this.typeColor(element)
-    }
-
-    validate(element, validate) {
-        const input = element.querySelectorAll('input, textarea')
-
-        input.forEach(input => {
-            let validationMessage = input.validationMessage
-
-            if (typeof input.dataset.validationMessage !== 'undefined') {
-                validationMessage = input.dataset.validationMessage
-            }
-
-            if (input.outerHTML.match(/(data-novalidate|readonly|hidden|data-state="invalid")/) === null && validate) {
-                element._removeDataValue('state', 'valid invalid active')
-
-                if (element.querySelector('[class^="icon"][class*="valid"]') !== null) {
-                    element.querySelector('[class^="icon"][class*="valid"]').remove()
-                }
-
-                if (input.checkValidity()) {
-                    element._addDataValue('state', 'valid')
-                } else {
-                    element._addDataValue('state', 'invalid')
-
-                    if (element.querySelector('[class^="icon"][class*="valid"]') === null) {
-                        const icon = element.querySelector('.icon-r')
-                        const elm = icon || element
-                        const where = icon ? 'afterend' : 'beforeend'
-
-                        elm.insertAdjacentHTML(where, `<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 (input.value !== '') {
-                element._addDataValue('state', 'active')
-            }
-        })
+        await this.typeColor(this.element)
     }
 
     typeNumber(element) {
@@ -80,7 +38,7 @@ LibStimulus.register('ui-input', class extends Controller {
                 const num = parseInt(input.value === '' ? 0 : input.value) + parseInt(input.step === '' ? 1 : input.step)
 
                 if (num <= input.max || input.max === '') {
-                    input.value = num
+                    input.value = num.toString()
                     input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
             })
@@ -90,7 +48,7 @@ LibStimulus.register('ui-input', class extends Controller {
                 const num = parseInt(input.value) - parseInt(input.step === '' ? 1 : input.step)
 
                 if (num >= input.min || input.min === '') {
-                    input.value = num
+                    input.value = num.toString()
                     input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
             })
@@ -119,7 +77,7 @@ LibStimulus.register('ui-input', class extends Controller {
             const hidden = element.querySelector('[type="hidden"]')
 
             if (datetime && hidden.value.indexOf(':') !== -1) {
-                hidden.setAttribute('data-time', hidden.value.substr(hidden.value.indexOf(':') - 2, hidden.value.length))
+                hidden.setAttribute('data-time', hidden.value.substring(hidden.value.indexOf(':') - 2, hidden.value.length))
             }
 
             const datepicker = new Datepicker(element.querySelector('[type="text"]'), Object.assign({
@@ -205,7 +163,7 @@ LibStimulus.register('ui-input', class extends Controller {
                         datepicker.element.focus()
                     })
 
-                    footer.querySelector('[data-ok]').addEventListener('click', e => {
+                    footer.querySelector('[data-ok]').addEventListener('click', () => {
                         if (hidden.value === '') {
                             footer.querySelector('.today-btn').click()
                         }
@@ -236,20 +194,16 @@ LibStimulus.register('ui-input', class extends Controller {
 
     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>')
 
-            await importStyle(cdn.pickr_css)
-
-            let Pickr = (await import('@simonwep/pickr')).default
-
-            if (typeof Pickr.default !== 'undefined') {
-                Pickr = Pickr.default
-            }
-
-            const input = element.querySelector('input')
             input.setAttribute('maxlength', '9')
             input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
 
@@ -278,8 +232,8 @@ LibStimulus.register('ui-input', class extends Controller {
                 input.dispatchEvent(new Event('change', { bubbles: true }))
             })
 
-            input.addEventListener('change', e => {
-                pickr.setColor(e.target.value)
+            input.addEventListener('change', ({ target }) => {
+                pickr.setColor(target.value)
             })
         }
     }

package/src/scripts/Ui/Select.js

@@ -1,34 +1,7 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { checkValidity } from '../Utils/Functions/+.js'
 
 LibStimulus.register('ui-select', class extends Controller {
-    validate(element, select) {
-        element._removeDataValue('state', 'invalid valid focus')
-
-        if (element.querySelector('[class^="icon"][class*="valid"]') !== null) {
-            element.querySelector('[class^="icon"][class*="valid"]').remove()
-        }
-
-        let validationMessage = select.validationMessage
-
-        if (typeof select.dataset.validationMessage !== 'undefined') {
-            validationMessage = select.dataset.validationMessage
-        }
-
-        if (select.checkValidity()) {
-            element._addDataValue('state', 'valid')
-        } else {
-            element._addDataValue('state', 'invalid')
-
-            if (element.querySelector('[class^="icon"][class*="valid"]') === null) {
-                const icon = element.querySelector('.icon-r')
-                const elm = icon || element
-                const where = icon ? 'afterend' : 'beforeend'
-
-                elm.insertAdjacentHTML(where, `<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>`)
-            }
-        }
-    }
-
     connect() {
         const element = this.element
         const select = element.querySelector('select')
@@ -44,8 +17,8 @@ LibStimulus.register('ui-select', class extends Controller {
             element.addEventListener('blur', function e() {
                 element._removeDataValue('state', 'focus')
                 element.removeEventListener('blur', e)
-            }, true)
-        }, true)
+            })
+        })
 
         element.addEventListener('click', e => {
             if ((element._hasDataValue('state', 'focus') && e.timeStamp === 0) || e.target.tagName === 'OPTION') {
@@ -54,13 +27,8 @@ LibStimulus.register('ui-select', class extends Controller {
         })
 
         select.addEventListener('change', () => {
-            this.validate(element, select)
-
-            if (select.value === '') {
-                element._removeDataValue('state', 'active')
-            } else {
-                element._addDataValue('state', 'active')
-            }
+            checkValidity(element)
+            this.valueCheck(select)
         })
 
         if (option[0] !== null) {
@@ -72,10 +40,14 @@ LibStimulus.register('ui-select', class extends Controller {
             })
         }
 
+        this.valueCheck(select)
+    }
+
+    valueCheck(select) {
         if (select.value === '') {
-            element._removeDataValue('state', 'active')
+            this.element._removeDataValue('state', 'active')
         } else {
-            element._addDataValue('state', 'active')
+            this.element._addDataValue('state', 'active')
         }
     }
 })

package/src/scripts/Ui/Text.js

@@ -2,13 +2,11 @@ import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 
 LibStimulus.register('ui-text', class extends Controller {
     connect() {
-        const element = this.element
-
-        Array.from(element.querySelectorAll('table')).forEach(table => {
+        this.element.querySelectorAll('table').forEach(table => {
             this.wrap(table, new DOMParser().parseFromString('<div class="elm_text_table"></div>', 'text/html').body.firstChild)
         })
 
-        Array.from(element.querySelectorAll('iframe')).forEach(iframe => {
+        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') {

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

@@ -1,3 +1,4 @@
+export { default as checkValidity } from './checkValidity.js'
 import './dataValue.js'
 export { default as importScript } from './importScript.js'
 export { default as importStyle } from './importStyle.js'

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

@@ -0,0 +1,44 @@
+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/inView.js

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

package/src/scripts/Utils/cdn.js

@@ -1,7 +1,7 @@
 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',
-    pickr_css: '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.0/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'
 }

package/src/scripts/Utils/global.js

@@ -1,15 +1,13 @@
+!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('Error during service worker registration:', e)
-            })
+            navigator.serviceWorker.register('/sw.js').catch(e => console.error(e))
         } else {
-            navigator.serviceWorker.getRegistrations().then(registrations => {
-                if (registrations.length > 0) {
-                    for (const registration of registrations) {
-                        registration.unregister()
-                    }
+            navigator.serviceWorker.getRegistrations().then(async registrations => {
+                for (const registration of registrations) {
+                    await registration.unregister()
                 }
             })
         }

package/src/styles/Components/+.css

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

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

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

package/src/styles/{Ui/Dropdown.css → Components/Dropdown/Default.css}

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

package/src/styles/Libraries/+.css

@@ -2,7 +2,6 @@
 @import "Dialog.css";
 @import "Drawer.css";
 @import "Hint.css";
-@import "Lazysizes.css";
 @import "NativeSlider.css";
 @import "Ripple.css";
 @import "Tabs.css";

package/src/styles/Libraries/Drawer.css

@@ -26,7 +26,7 @@
     -ms-overflow-style: none;
 
     &:--state-active {
-      scroll-snap-type: x mandatory;
+      scroll-snap-type: x proximity;
     }
 
     &::-webkit-scrollbar {

package/src/styles/Libraries/Hint.css

@@ -41,7 +41,7 @@
     will-change: transform;
     backface-visibility: hidden;
 
-    @nest :is(:hover, :focus)& {
+    @nest :is(:hover, :focus-visible)& {
       visibility: visible;
       opacity: 1;
       transition-delay: 100ms;
@@ -82,6 +82,7 @@
     line-height: 0.875rem;
     white-space: nowrap;
     box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--lib-hint-bg) / 0.15);
+    font-weight: var(--font-normal);
 
     @nest .lib-hint-light& {
       box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--color-dark) / 0.15);
@@ -120,7 +121,7 @@
       left: calc(50% - 0.375rem);
       margin-bottom: -0.6875rem;
 
-      @nest :is(:hover, :focus)& {
+      @nest :is(:hover, :focus-visible)& {
         transform: translateY(-0.5rem);
       }
     }
@@ -128,7 +129,7 @@
     &::after {
       transform: translateX(-50%);
 
-      @nest :is(:hover, :focus)& {
+      @nest :is(:hover, :focus-visible)& {
         transform: translateX(-50%) translateY(-0.5rem);
       }
     }

package/src/styles/Libraries/NativeSlider.css

@@ -45,6 +45,14 @@
   height: 0.75rem;
   border: 0.125rem solid rgb(var(--color-current));
   border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+
+  &::after {
+    position: absolute;
+    inset: -0.5rem;
+    content: "";
+  }
 
   &[data-state*="active"] {
     background-color: rgb(var(--color-current));

package/src/styles/Libraries/Tippy.css

@@ -9,7 +9,7 @@
     background-color: rgb(var(--color-background));
     background-clip: padding-box;
     border: 1px solid rgb(0 8 16 / 0.05);
-    color: rgb(var(--color-current));
+    color: rgb(var(--color-default));
     box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 0.08);
     border-radius: var(--radius);
     left: 0.1875rem;

package/src/styles/Ui/+.css

@@ -1,7 +1,6 @@
 @import "Badge.css";
 @import "Btn.css";
 @import "Checkbox.css";
-@import "Dropdown.css";
 @import "Heading.css";
 @import "Icon.css";
 @import "Image.css";

package/src/styles/Ui/Badge.css

@@ -29,7 +29,7 @@
   line-height: var(--ui-badge-size);
   transition: var(--transition-opacity);
 
-  @nest .no-touch &:is([href]:hover, button:hover) {
+  @nest .no-touch &:is([href], button):is(:hover, :focus-visible) {
     opacity: var(--ui-badge-hover-opacity);
   }
 

package/src/styles/Ui/Btn.css

@@ -32,12 +32,13 @@
   height: var(--ui-btn-height);
   padding: var(--ui-btn-py) var(--ui-btn-px);
   border-radius: var(--ui-btn-radius);
-  transition: var(--transition-opacity), var(--transition-background);
+  transition: var(--transition-opacity), var(--transition-background), var(--transition-color);
   background-color: var(--ui-btn-bg);
   color: var(--ui-btn-color);
 
-  @nest .dark &.bg-default {
+  @nest .dark &.accent-dark {
     --ui-btn-color: rgb(var(--color-dark));
+    --color-accent: var(--color-light);
   }
 
   &:--theme-light {
@@ -59,7 +60,7 @@
     opacity: 0;
     transition: var(--transition-opacity);
 
-    @nest .no-touch :is(:hover, :focus)&, :is(:--state-active)& {
+    @nest .no-touch :is(:hover, :focus-visible)&, :is(:--state-active)& {
       opacity: var(--ui-btn-hover-opacity);
     }
   }
@@ -97,8 +98,16 @@
     }
   }
 
+  &:--type-text {
+    @nest :not(:hover, :focus-visible, :--state-active)& {
+      --ui-btn-color: currentColor;
+
+      background-color: transparent;
+    }
+  }
+
   &:--type-outline {
-    --ui-btn-color: currentColor;
+    --ui-btn-color: rgb(var(--color-current));
     --ui-btn-hover-opacity: 0.1;
 
     background-color: transparent;
@@ -130,6 +139,11 @@
     border-radius: 50%;
   }
 
+  &:--size-sm {
+    --ui-btn-height: 2.25rem;
+    --ui-btn-px: 1rem;
+  }
+
   &:--size-lg {
     --ui-btn-icon-size: 1.5rem;
     --ui-btn-height: 3rem;
@@ -138,7 +152,11 @@
 
   &:--state-loading {
     pointer-events: none;
-    color: var(--ui-btn-bg);
+    color: transparent;
+
+    & > * {
+      opacity: 0;
+    }
 
     &::before {
       z-index: 1;
@@ -155,7 +173,7 @@
       margin-top: -0.625rem;
       left: 50%;
       top: 50%;
-      opacity: 1;
+      opacity: 1 !important;
     }
   }
 

package/src/styles/Ui/Checkbox.css

@@ -12,9 +12,12 @@
   --ui-checkbox-radius: 0.375rem;
   --ui-checkbox-icon: var(--icon-check);
   --ui-checkbox-icon-size: 1.125rem;
+  --ui-checkbox-validity-size: 0.875rem;
+  --ui-checkbox-validity-offset: 0.375rem;
 
   transition: var(--transition-color);
   display: inline-flex;
+  flex-wrap: wrap;
   align-self: flex-start;
   position: relative;
   user-select: none;
@@ -22,6 +25,11 @@
   z-index: 1;
   color: var(--ui-checkbox-color);
 
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   @nest .text-light & {
     --ui-checkbox-border-color-raw: var(--color-light);
   }
@@ -39,6 +47,15 @@
     --ui-checkbox-color: rgb(var(--color-error));
   }
 
+  & em {
+    display: block;
+    width: 100%;
+    font-size: var(--ui-checkbox-validity-size);
+    color: rgb(var(--color-error));
+    font-style: normal;
+    margin-top: var(--ui-checkbox-validity-offset);
+  }
+
   & input {
     position: relative;
     display: inline-flex;
@@ -80,7 +97,7 @@
       }
     }
 
-    &:focus, &:hover {
+    &:is(:hover, :focus-visible) {
       --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
       --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
       --ui-checkbox-border-opacity: 0.75;
@@ -111,6 +128,15 @@
         transform: scale(1);
       }
     }
+
+    &[required] {
+      & + * {
+        &::after {
+          color: rgb(var(--color-error));
+          content: " *";
+        }
+      }
+    }
   }
 
   & a {
@@ -118,7 +144,7 @@
     transition: var(--transition-opacity);
     color: rgb(var(--color-accent));
 
-    @nest .no-touch &[href]:hover {
+    @nest .no-touch &[href]:is(:hover, :focus-visible) {
       opacity: 0.8;
     }
   }

package/src/styles/Ui/Heading.css

@@ -1,9 +1,10 @@
 .ui-heading {
   --ui-heading-size: 1.5rem;
+  --ui-heading-weight: var(--font-bold);
   --ui-heading-size-line: 0.5rem;
 
   display: block;
-  font-weight: var(--font-bold);
+  font-weight: var(--ui-heading-weight);
   font-size: var(--ui-heading-size);
   line-height: calc(var(--ui-heading-size) + var(--ui-heading-size-line));
 

package/src/styles/Ui/Icon.css

@@ -14,7 +14,7 @@
   & > * {
     transition: var(--transition-opacity);
 
-    @nest .no-touch :is([href]:hover, button:hover)& {
+    @nest .no-touch :is([href], button):is(:hover, :focus-visible)& {
       opacity: var(--ui-icon-hover-opacity);
     }
   }
@@ -27,7 +27,7 @@
   align-items: center;
   transition: var(--transition-opacity), var(--transition-color);
 
-  @nest .no-touch &:is([href]:hover, button:hover) {
+  @nest .no-touch &:is([href], button):is(:hover, :focus-visible) {
     opacity: var(--ui-icon-hover-opacity);
   }
 }

package/src/styles/Ui/Image.css

@@ -1,18 +1,12 @@
 .ui-image {
   position: relative;
+  display: block;
 
   &:not(.bg-transparent) {
     background-color: rgb(var(--color-background-100));
   }
 
-  &::before {
-    content: "";
-    display: block;
-  }
-
   & > * {
-    position: absolute;
-    inset: 0;
     width: 100%;
     height: 100%;
   }