@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/scripts/Libraries/Ripple.js

@@ -1,24 +1,8 @@
-const LibRipple = ({ currentTarget, layerX, layerY }) => {
-    const container = currentTarget
+import { Controller, LibStimulus } from './Stimulus.js'
+import { showRipple } from 'winduum/src/utilities/ripple/index.js'
 
-    if (container.querySelector('.lib-ripple') === null) {
-        container.insertAdjacentHTML('beforeend', "<div class='lib-ripple'></div>")
+LibStimulus.register('lib-ripple', class extends Controller {
+    async show(event) {
+        showRipple(event)
     }
-
-    const ink = container.querySelector('.lib-ripple')
-
-    ink.classList.remove('animation')
-
-    if (ink.clientWidth === 0 && ink.clientHeight === 0) {
-        const d = Math.max(container.offsetWidth, container.offsetHeight)
-
-        ink.style.width = d + 'px'
-        ink.style.height = d + 'px'
-    }
-
-    ink.style.top = layerY - (ink.clientHeight / 2) + 'px'
-    ink.style.left = layerX - (ink.clientWidth / 2) + 'px'
-    ink.classList.add('animation')
-}
-
-export default LibRipple
+})

package/src/scripts/Libraries/Stimulus.js

@@ -1,12 +1,56 @@
 import { Application, Controller } from '@hotwired/stimulus'
-import loadStimulus from '../Utils/Functions/loadStimulus.js'
+import { dataset } from '@newlogic-digital/utils-js'
+
+function initActions(parent, selectors) {
+    if (!parent) return
+
+    selectors.forEach(([selector, action]) => {
+        parent.querySelectorAll(selector).forEach((element) => {
+            dataset(element, 'action').add(action)
+        })
+    })
+}
+
+function initControllers(parent, selectors) {
+    if (!parent) return
+
+    selectors.forEach((selector) => {
+        [...parent.getElementsByClassName(selector)].forEach((element) => {
+            dataset(element, 'controller').add(selector)
+        })
+    })
+}
+
+function initStimulus(element, { controllers, actions } = {
+    controllers: ['ui-control', 'ui-text', 'ui-check'],
+    actions: [['.ui-btn', 'click->lib-ripple#show'], ['.ui-check', 'change->ui-check#validate']]
+}) {
+    initControllers(element, controllers)
+    initActions(element, actions)
+}
 
 const LibStimulus = new Application(document.documentElement)
 
-const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
+const getController = (...arg) => LibStimulus.getControllerForElementAndIdentifier(...arg)
+
+const delegateController = (name, method, event = {}, selector) => {
+    const controller = getController(document.querySelector(selector || `.${name}`), name)
+
+    if (controller) return method ? controller[method](event) : controller
+}
+
+LibStimulus.start().then(() => initStimulus(document.body))
+
+LibStimulus.register('controller', class extends Controller {
+    delegate(event) {
+        delegateController(event.params.name, event.params.method, event, event.params.selector)
+    }
 
-LibStimulus.start().then(() => loadStimulus(document.body))
+    load({ currentTarget, params }) {
+        dataset(currentTarget, 'controller').add(params.name)
+    }
+})
 
-window.LibStimulus = { default: LibStimulus, Controller, loadStimulus }
+window.LibStimulus = { default: LibStimulus, Controller, initStimulus, delegateController }
 
-export { LibStimulus, Controller, loadStimulus, getController }
+export { LibStimulus, Controller, initStimulus, getController, delegateController }

package/src/scripts/Libraries/Swup.js

@@ -1,35 +1,25 @@
+import { dialogSelector } from 'winduum/src/components/dialog/index.js'
+import { delegateController } from './Stimulus.js'
 import Swup from 'swup'
-import { getController, loadStimulus } from './Stimulus.js'
-import { closeDialog } from 'winduum/src/libraries/dialog.js'
-import LibAnchor from './Anchor.js'
-import LibCookieConsent from './CookieConsent.js'
-import replaceTag from '../Utils/Functions/replaceTag.js'
+import initAfter from '../Utils/initAfter.js'
 
 const LibSwup = new Swup({
-    containers: ['#l-main', '#l-header'].filter(element => document.querySelector(element)),
-    linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
+    containers: ['.l-main', '.l-header'].filter(element => document.querySelector(element)),
+    ignoreVisit: (url, { el }) => el?.closest('[data-no-swup], [data-naja]'),
+    animationSelector: '.swup-transition'
 })
 
-LibSwup.on('clickLink', async({ target }) => {
+LibSwup.hooks.on('animation:out:start', async () => {
     document.body.classList.remove('overflow-hidden')
 
-    if (document.querySelector('.lib-drawer[data-state~="active"]') !== null) {
-        /** @type {LibDrawer} */
-        const LibDrawer = getController(document.body, 'lib-drawer')
-        LibDrawer.hide()
-    }
-
-    if (document.querySelector('.lib-dialog') !== null) {
-        await closeDialog()
-    }
-
-    if (window.location.href === target.closest('a').href) {
-        document.documentElement.scroll({ top: 0 })
-    }
+    delegateController('c-drawer', 'close')
+    delegateController('lib-dialog', 'close', {
+        currentTarget: dialogSelector('.c-dialog')
+    }, 'body')
 })
 
-LibSwup.on('animationOutDone', () => {
-    document.documentElement.scroll({ top: 0, behavior: 'instant' })
+LibSwup.hooks.before('scroll:top', (visit, { options }) => {
+    if (visit.from.url !== visit.to.url) (options.behavior = 'instant')
 })
 
 /** @var {Array} dataLayer */
@@ -39,26 +29,49 @@ LibSwup.on('animationOutDone', () => {
 /** @var {Object} retargetingConf */
 /** @var {Object} conversionConf */
 /** @var {Function} fbq */
-LibSwup.on('contentReplaced', () => {
-    const content = new DOMParser().parseFromString(LibSwup.cache.getCurrentPage().originalContent, 'text/html')
+LibSwup.hooks.on('content:replace', (visit, { page }) => {
+    const content = new DOMParser().parseFromString(page.html, 'text/html')
 
-    replaceTag(content)
+    content.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
 
-    LibAnchor.init()
-    LibCookieConsent.init()
+        replaceTag ? (replaceTag.outerHTML = element.outerHTML) : placement.insertAdjacentHTML('beforeend', element.outerHTML)
+    })
 
-    LibSwup.options.containers.forEach(selector => {
-        loadStimulus(document.querySelector(selector))
+    LibSwup.options.containers.forEach((selector) => {
+        initAfter(document.querySelector(selector))
     })
 
     window.dataLayer && window.dataLayer.push({
         event: 'page_view'
     })
 
-    window.rc?.retargetingHit && window.rc.retargetingHit(window.retargetingConf)
-    window.rc?.conversionHit && window.rc.conversionHit(window.conversionConf)
+    window.rc?.retargetingHit && window.rc.retargetingHit(window.retargetingConf ?? {})
+    window.rc?.conversionHit && window.rc.conversionHit(window.conversionConf ?? {})
 
     window.fbq && window.fbq('track', 'PageView')
 })
 
+LibSwup.hooks.on('cache:set', (visit, { page }) => {
+    LibSwup.cache.update(page.url, { created: Date.now(), ttl: 1000 * 60 })
+})
+
+LibSwup.hooks.before('page:load', () => {
+    // noinspection JSCheckFunctionSignatures
+    LibSwup.cache.prune((url, { created, ttl }) => Date.now() > created + ttl)
+})
+
+document.addEventListener('click', ({ target }) => {
+    const noSwup = target.closest('[data-no-swup]')
+
+    if (!noSwup) return
+
+    if (noSwup.classList.contains('ui-btn')) {
+        noSwup.classList.add('loading')
+    } else {
+        noSwup.classList.add('cursor-wait')
+    }
+})
+
 export default LibSwup

package/src/scripts/Libraries/Toaster.js

@@ -0,0 +1,55 @@
+import { Controller, LibStimulus } from '../Libraries/Stimulus.js'
+
+export const insertToaster = async (element, options) => {
+    if (!document.querySelector('.c-toaster')) {
+        element.insertAdjacentHTML('beforeend', `<ol class="c-toaster ${options?.classes ?? ''}" data-lib-toaster-target="toaster"></ol>`)
+    }
+}
+
+export const insertToast = async (element, options) => {
+    const { showToast } = await import('winduum/src/components/toaster/index.js')
+
+    element.insertAdjacentHTML('beforeend', `
+        <li class="c-toast ${options.classes ?? ''}" role="status" aria-live="assertive" aria-atomic="true" data-controller="c-toast">
+            <div class="c-toast-content border-main/10">
+                <div class="flex-col gap-0.5">
+                    <div class="ui-title empty:hidden">${options.title ?? ''}</div>
+                    <div class="ui-title sm font-normal empty:hidden text-main/70">${options.text ?? ''}</div>
+                </div>
+                <button class="ui-btn sm circle muted ml-auto accent-main -mr-1" data-action="c-toast#close">
+                    <svg class="size-4">
+                        <use href="#icon-x-mark"></use>
+                    </svg>
+                </button>
+            </div>
+        </li>
+    `)
+
+    await showToast(element.children[element.children.length - 1], {
+        autoHide: false,
+        ...options?.show
+    })
+}
+
+LibStimulus.register('lib-toaster', class extends Controller {
+    static targets = ['toaster', 'show']
+
+    async show({ params }) {
+        await insertToaster(document.querySelector('dialog[open]') || document.body)
+        await insertToast(this.toasterTarget, params)
+    }
+
+    async showTargetConnected(element) {
+        await this.show({
+            params: JSON.parse(element.innerHTML)
+        })
+    }
+})
+
+LibStimulus.register('c-toast', class extends Controller {
+    async close() {
+        const { closeToast } = await import('winduum/src/components/toaster/index.js')
+
+        await closeToast(this.element)
+    }
+})

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 { validateField } from 'winduum/src/components/form/index.js'
+
+LibStimulus.register('ui-check', class extends Controller {
+    async validate({ currentTarget }) {
+        validateField(currentTarget)
+    }
+})

package/src/scripts/Ui/Control.js

@@ -0,0 +1,194 @@
+import cdn from '../Utils/cdn.js'
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { importStyle } from '@newlogic-digital/utils-js'
+import { validateField } from 'winduum/src/components/form/index.js'
+
+LibStimulus.register('ui-control', class extends Controller {
+    static targets = ['number']
+
+    static values = {
+        dateOptions: {
+            default: {},
+            type: Object
+        },
+        dateDisabled: {
+            default: [],
+            type: Array
+        }
+    }
+
+    async connect() {
+        validateField(this.element, { validate: false })
+
+        this.element.addEventListener('change', () => validateField(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.match(/(required|placeholder)/)).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"]')
+
+            if (input.id) {
+                inputText.id = input.id + '-datepicker'
+            }
+
+            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 }) => {
+                    input.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="me-auto"><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('.ms-auto')) {
+                this.element.insertAdjacentHTML('beforeend', '<div class="ms-auto"></div>')
+            }
+
+            this.element.querySelector('.ms-auto').insertAdjacentHTML('beforeend', `
+                <div class="flex flex-col gap-0 justify-center -space-y-1 -me-0.5" data-ui-control-target="number">
+                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepUp">
+                        <svg class="size-4"><use href="#icon-angle-up-solid"></use></svg>
+                    </button>
+                    <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepDown">
+                        <svg class="size-4"><use href="#icon-angle-down-solid"></use></svg>
+                    </button>
+                </div>
+            `)
+        }
+    }
+
+    stepUp() {
+        this.element.querySelector('input:not([hidden])').stepUp()
+        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
+    }
+
+    stepDown() {
+        this.element.querySelector('input:not([hidden])').stepDown()
+        this.element.querySelector('input:not([hidden])').dispatchEvent(new Event('change', { bubbles: true }))
+    }
+
+    showPicker() {
+        this.element.querySelector('input:not([hidden])').showPicker()
+    }
+
+    showDatepicker() {
+        this.datepicker.$el.focus()
+    }
+})

package/src/scripts/Ui/ControlSelect.js

@@ -0,0 +1,25 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { dataset } from '@newlogic-digital/utils-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]) {
+            option.forEach((option) => {
+                if (option.dataset.disabled) {
+                    return
+                }
+
+                dataset(option, 'action').add('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

@@ -2,22 +2,20 @@ import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 
 LibStimulus.register('ui-text', class extends Controller {
     connect() {
-        this.element.querySelectorAll('table').forEach(table => {
-            this.wrap(table, new DOMParser().parseFromString('<div class="elm_text_table"></div>', 'text/html').body.firstChild)
+        function wrap(element, wrapper) {
+            element.parentNode.insertBefore(wrapper, element)
+            wrapper.appendChild(element)
+        }
+
+        this.element.querySelectorAll('table').forEach((table) => {
+            wrap(table, new DOMParser().parseFromString('<div class="overflow-x-auto max-w-full"></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') {
+        this.element.querySelectorAll('iframe').forEach((iframe) => {
+            if (iframe.width && iframe.height) {
                 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/+.js

@@ -1,3 +1,3 @@
-import './Functions/+.js'
-export { default as cdn } from './cdn.js'
-import './global.js'
+export { default as cdn } from './cdn.js'
+export { default as initAfter } from './initAfter.js'
+import './utilities.js'

package/src/scripts/Utils/cdn.js

@@ -1,7 +1,5 @@
 export default {
     recaptcha: 'https://www.google.com/recaptcha/enterprise.js?render={apikey}',
     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.3.3/dist/css/datepicker.min.css',
-    datepickerLang: 'https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.3/js/i18n/locales/{lang}.min.js'
+    datepickerLang: `https://cdn.jsdelivr.net/npm/air-datepicker@3.3.5/locale/${document.documentElement.lang}.js/+esm`
 }

package/src/scripts/Utils/initAfter.js

@@ -0,0 +1,11 @@
+import { replaceScripts } from '@newlogic-digital/utils-js'
+import { initStimulus } from '../Libraries/Stimulus.js'
+import { initCookieConsent } from '../Libraries/CookieConsent.js'
+import { initNaja } from './naja.js'
+
+export default function initAfter(element) {
+    initStimulus(element)
+    initNaja(element)
+    replaceScripts(element)
+    initCookieConsent(element)
+}

package/src/scripts/Utils/naja.js

@@ -0,0 +1,41 @@
+import naja from 'naja'
+
+export const initNaja = (element, bindUI = true, selectors = 'button, [role="button"]') => {
+    bindUI && naja.uiHandler.bindUI(element)
+
+    element.querySelectorAll(`:where(${selectors})${naja.uiHandler.selector}`).forEach((element) => {
+        if (element.form && element.type === 'submit') return
+
+        element.addEventListener('click', (event) => {
+            naja.uiHandler.processInteraction(element, element.dataset.najaMethod ?? 'GET', element.dataset.najaUrl, element.dataset.najaData, {}, event)
+        })
+    })
+}
+
+export const NajaFormValidityExtension = {
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', (event) => {
+            const { element } = event.detail
+
+            if (element?.form && !element.form.reportValidity()) {
+                event.preventDefault()
+            }
+        })
+    }
+}
+
+export const NajaRecaptchaExtension = {
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', (event) => {
+            const { element } = event.detail
+
+            if (
+                (element.form ?? element)?.dataset?.controller?.includes('lib-recaptcha')
+                && !event.detail?.originalEvent?.detail?.recaptchaExecuted
+            ) {
+                event.preventDefault()
+                return false
+            }
+        })
+    }
+}

package/src/scripts/Utils/utilities.js

@@ -0,0 +1,8 @@
+import { Controller, LibStimulus } from '../Libraries/Stimulus.js'
+
+LibStimulus.register('utils', class extends Controller {
+    darkMode() {
+        document.documentElement.classList.toggle('dark')
+        localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+    }
+})

package/src/scripts/main.js

@@ -1,6 +1,7 @@
-import './Utils/global.js'
 import './Libraries/+.js'
 import './Layout/+.js'
 import './Sections/+.js'
 import './Components/+.js'
 import './Ui/+.js'
+import './Utils/utilities.js'
+import.meta.glob('/src/assets/**')

package/src/styles/Components/+.css

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

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

@@ -1 +1,3 @@
+@import "Content.css";
+@import "CookieConsent.css";
 @import "Default.css";

package/src/styles/Components/Dialog/Content.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/dialog/content.css";
+@import "winduum/src/components/dialog/content-props.css";

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

@@ -0,0 +1,17 @@
+.c-dialog-cookieconsent {
+  .c-dialog-content {
+    max-width: 32rem;
+  }
+
+  &.center {
+    .c-dialog-content {
+      max-width: 26rem;
+      text-align: center;
+
+      & .ui-image {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+}