@formixru/b2b-ui 1.0.0

package/src/components/input/index.js

@@ -0,0 +1,85 @@
+export const init = async ($b) => {
+    if ($b.imask) {
+        $b.imask.destroy();
+        delete $b.imask;
+    }
+
+    if ($b.type === 'tel') {
+        const { default: IMask } = await import('imask');
+
+        const mask = [
+            {
+                mask: '+7 000 000-00-00',
+                startsWith: ['7'],
+                country: 'RU',
+            },
+            {
+                mask: '000000000000',
+                startsWith: [''],
+                country: 'Unknown',
+                prepareChar(value, masked) {
+                    // Меняем 8 на 7 при вводе первого символа или при вставке телефонного номера
+                    const ruNumberLength = 11;
+                    if (
+                        value === '8' &&
+                        (value === $b.value || $b.value.replaceAll(/\D/g, '').length === ruNumberLength) &&
+                        masked._value.length === 0
+                    ) {
+                        return '7';
+                    }
+                    return value;
+                },
+            },
+        ];
+
+        if (window.TEL_ADD_MASKS) {
+            for (const item of [...window.TEL_ADD_MASKS].reverse()) {
+                mask.unshift(item);
+            }
+        }
+
+        $b.imask = new IMask($b, {
+            mask,
+            dispatch(appended, dynamicMasked) {
+                const number = (dynamicMasked.value + appended).replaceAll(/\D/g, '');
+                let mask = dynamicMasked.compiledMasks.find(({ startsWith }) =>
+                    startsWith.some((n) => number.indexOf(n) === 0),
+                );
+                if (number.length >= 3 && mask.country === 'Unknown') {
+                    mask = dynamicMasked.compiledMasks.find(({ country }) => country === 'RU');
+                }
+                if (window.TEL_FLAGS && window.TEL_FLAGS.show) {
+                    if (mask.country === 'Unknown' || number.length < 3) {
+                        Object.assign($b.style, {
+                            backgroundImage: ``,
+                            backgroundPosition: '',
+                            backgroundRepeat: '',
+                            backgroundSize: '',
+                        });
+                    } else {
+                        Object.assign($b.style, {
+                            backgroundImage: `url(${window.TEL_FLAGS.path.replace(/\/$/, '')}/${mask.country}.svg)`,
+                            backgroundPosition: 'right 12px center',
+                            backgroundRepeat: 'no-repeat',
+                            backgroundSize: '20px',
+                        });
+                    }
+                } else {
+                    Object.assign($b.style, {
+                        backgroundImage: ``,
+                        backgroundPosition: '',
+                        backgroundRepeat: '',
+                        backgroundSize: '',
+                    });
+                }
+                return mask;
+            },
+        });
+    }
+
+    $b.addEventListener('input', () => {
+        if ($b.classList.contains('input_error')) {
+            $b.classList.remove('input_error');
+        }
+    });
+};

package/src/components/input/index.scss

@@ -0,0 +1,87 @@
+@use '../../variables' as *;
+
+$b: '.input';
+
+#{$b} {
+    appearance: none;
+    background-color: $input-bg;
+    border: $input-border-width solid $input-filled-border-color;
+    border-radius: $input-radius;
+    color: $input-color;
+    display: block;
+    height: $input-height;
+    padding: $input-padding-y $input-padding-x;
+    transition-duration: var(--duration-micro-s);
+    transition-property: background-color, border-color, color;
+    transition-timing-function: var(--easing-standard);
+    width: 100%;
+
+    @include font($input-font);
+
+    &:placeholder-shown {
+        border-color: $input-border-color;
+    }
+
+    &[type='number'] {
+        @media (--tablet-landscape-up) {
+            appearance: textfield;
+        }
+
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            @media (--tablet-landscape-up) {
+                appearance: none;
+            }
+        }
+    }
+
+    &::placeholder {
+        color: $input-placeholder-color;
+    }
+
+    &:disabled {
+        background-color: $input-disabled-bg;
+        border-color: $input-disabled-border-color;
+        color: $input-disabled-color;
+
+        &::placeholder {
+            color: $input-disabled-placeholder-color;
+        }
+    }
+
+    &:focus-visible {
+        background-color: $input-active-bg;
+        border-color: $input-active-border-color;
+        color: $input-active-color;
+        outline: $input-border-width solid $input-active-outline-color;
+    }
+
+    &_small {
+        height: $input-small-height;
+        padding: $input-small-padding-y $input-small-padding-x;
+
+        @include font($input-small-font);
+    }
+
+    &_textarea {
+        min-height: $input-textarea-min-height;
+        resize: vertical;
+
+        @include font($input-textarea-font);
+
+        &#{$b}_small {
+            min-height: $input-textarea-small-min-height;
+        }
+    }
+
+    &_error {
+        background-color: $input-error-bg;
+        border-color: $input-error-border-color;
+        color: $input-error-color;
+
+        &:placeholder-shown,
+        &:focus-visible {
+            border-color: $input-error-border-color;
+        }
+    }
+}

package/src/components/link/index.scss

@@ -0,0 +1,266 @@
+@use '../../variables' as *;
+
+$b: '.link';
+
+@mixin transform($property: color) {
+    transition-duration: var(--duration-micro-s);
+    transition-property: $property;
+    transition-timing-function: var(--easing-standard);
+}
+
+@mixin link($color: $link-color, $active-color: $link-active-color) {
+    cursor: default;
+    text-decoration: none;
+
+    @include transform;
+
+    &:any-link,
+    &:enabled {
+        color: $color;
+        cursor: pointer;
+
+        &:hover,
+        &:focus-visible {
+            color: $active-color;
+        }
+    }
+}
+
+#{$b} {
+    @include link;
+
+    &_solid:any-link,
+    &_solid:enabled {
+        &:not(#{$b}_partial),
+        & #{$b}__text {
+            @include ul-solid($link-color);
+        }
+
+        &:hover,
+        &:focus-visible {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-solid($link-active-color);
+            }
+        }
+    }
+
+    &_dashed:any-link,
+    &_dashed:enabled {
+        &:not(#{$b}_partial),
+        & #{$b}__text {
+            @include ul-dashed($link-color);
+        }
+
+        &:hover,
+        &:focus-visible {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dashed($link-active-color);
+            }
+        }
+    }
+
+    &_dotted:any-link,
+    &_dotted:enabled {
+        &:not(#{$b}_partial),
+        & #{$b}__text {
+            @include ul-dotted($link-color);
+        }
+
+        &:hover,
+        &:focus-visible {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dotted($link-active-color);
+            }
+        }
+    }
+
+    &_alt {
+        &:any-link,
+        &:enabled {
+            color: $link-alt-color;
+
+            &:hover,
+            &:focus-visible {
+                color: $link-alt-active-color;
+            }
+        }
+
+        &#{$b}_solid:any-link,
+        &#{$b}_solid:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-solid($link-alt-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-solid($link-alt-active-color);
+                }
+            }
+        }
+
+        &#{$b}_dashed:any-link,
+        &#{$b}_dashed:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dashed($link-alt-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-dashed($link-alt-active-color);
+                }
+            }
+        }
+
+        &#{$b}_dotted:any-link,
+        &#{$b}_dotted:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dotted($link-alt-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-dotted($link-alt-active-color);
+                }
+            }
+        }
+    }
+
+    &_grey {
+        &:any-link,
+        &:enabled {
+            color: $link-grey-color;
+
+            &:hover,
+            &:focus-visible {
+                color: $link-grey-active-color;
+            }
+        }
+
+        &#{$b}_solid:any-link,
+        &#{$b}_solid:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-solid($link-grey-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-solid($link-grey-active-color);
+                }
+            }
+        }
+
+        &#{$b}_dashed:any-link,
+        &#{$b}_dashed:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dashed($link-grey-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-dashed($link-grey-active-color);
+                }
+            }
+        }
+
+        &#{$b}_dotted:any-link,
+        &#{$b}_dotted:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dotted($link-grey-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-dotted($link-grey-active-color);
+                }
+            }
+        }
+    }
+
+    &_inverted {
+        &:any-link,
+        &:enabled {
+            color: $link-inverted-color;
+
+            &:hover,
+            &:focus-visible {
+                color: $link-inverted-active-color;
+            }
+        }
+
+        &#{$b}_solid:any-link,
+        &#{$b}_solid:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-solid($link-inverted-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-solid($link-inverted-active-color);
+                }
+            }
+        }
+
+        &#{$b}_dashed:any-link,
+        &#{$b}_dashed:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dashed($link-inverted-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-dashed($link-inverted-active-color);
+                }
+            }
+        }
+
+        &#{$b}_dotted:any-link,
+        &#{$b}_dotted:enabled {
+            &:not(#{$b}_partial),
+            & #{$b}__text {
+                @include ul-dotted($link-inverted-color);
+            }
+
+            &:hover,
+            &:focus-visible {
+                &:not(#{$b}_partial),
+                & #{$b}__text {
+                    @include ul-dotted($link-inverted-active-color);
+                }
+            }
+        }
+    }
+
+    &__text {
+    }
+
+    &__icon {
+        fill: currentcolor;
+    }
+}

package/src/components/loader/index.js

@@ -0,0 +1,65 @@
+let loaderTimeout;
+
+export const clearLoaderTimeout = () => {
+    clearTimeout(loaderTimeout);
+};
+
+export const show = (delay) => {
+    if (!document.querySelector('.loader')) {
+        document.body.insertAdjacentHTML(
+            'beforeend',
+            `
+                <div class="loader">
+                    <div class="loader__dots">
+                        <div class="loader__dot loader__dot_1"></div>
+                        <div class="loader__dot loader__dot_2"></div>
+                        <div class="loader__dot loader__dot_3"></div>
+                    </div>
+                </div>
+            `,
+        );
+    }
+    const $b = document.querySelector('.loader');
+    clearLoaderTimeout();
+    return new Promise((resolve) => {
+        loaderTimeout = setTimeout(
+            () => {
+                if (!$b.classList.contains('loader_active')) {
+                    $b.classList.add('loader_active');
+                }
+                resolve();
+            },
+            delay === undefined ? window.__FORMIX__LOADER__DELAY || 500 : delay,
+        );
+    });
+};
+
+export const hide = (delay) => {
+    const $b = document.querySelector('.loader');
+    clearLoaderTimeout();
+    return new Promise((resolve) => {
+        loaderTimeout = setTimeout(
+            () => {
+                if ($b.classList.contains('loader_active')) {
+                    $b.classList.remove('loader_active');
+                }
+                resolve();
+            },
+            delay === undefined ? window.__FORMIX__LOADER__DELAY || 500 : delay,
+        );
+    });
+};
+
+window.showLoader = (delay) => {
+    show(delay);
+};
+
+window.hideLoader = (delay) => {
+    hide(delay);
+};
+
+window.addEventListener('pageshow', (event) => {
+    if (event.persisted && document.querySelector('.loader_active')) {
+        hide(0);
+    }
+});

package/src/components/loader/index.scss

@@ -0,0 +1,99 @@
+@use '../../variables' as *;
+
+@keyframes loader {
+    0% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+$b: '.loader';
+
+#{$b} {
+    align-items: center;
+    background-color: $loader-bg;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    top: 0;
+    transform: translateX(-100%);
+    transition-duration: var(--duration-leave-s);
+    transition-property: opacity;
+    transition-timing-function: var(--easing-acceleration);
+    width: 100%;
+    z-index: 1000;
+
+    &_active {
+        opacity: 1;
+        transform: translateX(0);
+        transition-duration: var(--duration-enter-s);
+        transition-timing-function: var(--easing-deceleration);
+    }
+
+    &__dots {
+        align-items: center;
+        display: flex;
+    }
+
+    &__dot {
+        animation-duration: 1000ms;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        animation-name: loader;
+        animation-timing-function: var(--easing-standard);
+        background-color: $loader-color;
+        border-radius: 50%;
+        height: 4px * 6;
+        width: 4px * 6;
+
+        @media (--tablet-landscape-up) {
+            height: 4px * 8;
+            width: 4px * 8;
+        }
+
+        &_1 {
+        }
+
+        &_2 {
+            animation-delay: 100ms;
+            margin: 0 4px * 2;
+
+            @media (--tablet-landscape-up) {
+                margin: 0 4px * 3;
+            }
+        }
+
+        &_3 {
+            animation-delay: 200ms;
+        }
+    }
+
+    &__message {
+        color: $loader-label-color;
+        margin-left: 4px * 4;
+        margin-right: 4px * 4;
+        margin-top: 4px * 4;
+        text-align: center;
+
+        @include font($loader-label-mobile-font);
+
+        @media (--tablet-landscape-up) {
+            margin-left: 4px * 8;
+            margin-right: 4px * 8;
+            margin-top: 4px * 6;
+
+            @include font($loader-label-desktop-font);
+        }
+    }
+}

package/src/components/nobr/index.scss

@@ -0,0 +1,5 @@
+@use '../../variables' as *;
+
+.nobr {
+    white-space: nowrap;
+}

package/src/components/overlay/index.js

@@ -0,0 +1,82 @@
+import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
+
+import { mm } from '../../helpers/mm.js';
+
+export const show = () => {
+    if (!document.querySelector('.overlay')) {
+        document.body.insertAdjacentHTML('beforeend', '<div class="overlay"></div>');
+    }
+    return new Promise((resolve) => {
+        const overlay = document.querySelector('.overlay');
+        overlay.classList.add('overlay_active');
+        overlay.addEventListener(
+            'transitionend',
+            () => {
+                resolve();
+            },
+            { once: true },
+        );
+    });
+};
+
+export const hide = () => {
+    return new Promise((resolve) => {
+        const overlay = document.querySelector('.overlay');
+        overlay.classList.remove('overlay_active');
+        overlay.addEventListener(
+            'transitionend',
+            () => {
+                resolve();
+            },
+            { once: true },
+        );
+    });
+};
+
+const defaultBlockingSelectors = ['.dialog', '.sidebar'];
+
+export const disableScroll = () => {
+    const scrollbarWidth = getScrollbarWidth();
+    document.body.style = `
+        overflow: hidden;
+        margin-right: ${scrollbarWidth}px;
+    `;
+
+    if (mm('desktop-up') && window.__FORMIX__OVERLAY__FIXED_ELEMENTS?.length > 0) {
+        const fixedElements = [...document.querySelectorAll(window.__FORMIX__OVERLAY__FIXED_ELEMENTS.join(','))];
+
+        for (const element of fixedElements) {
+            element.style = `
+                width: calc(100% - ${scrollbarWidth}px);
+            `;
+        }
+    }
+};
+
+export const enableScroll = () => {
+    const blockingSelements = [
+        ...document.querySelectorAll(defaultBlockingSelectors.join(',')),
+        ...(window.__FORMIX__OVERLAY__BLOCKING_ELEMENTS?.length > 0
+            ? document.querySelectorAll(window.__FORMIX__OVERLAY__BLOCKING_ELEMENTS.join(','))
+            : []),
+    ];
+
+    const hasVisibleBlockingElements = blockingSelements.some((el) => !el.hidden);
+
+    if (!hasVisibleBlockingElements) {
+        document.body.style = `
+            overflow: '';
+            margin-right: '';
+        `;
+
+        if (mm('desktop-up') && window.__FORMIX__OVERLAY__FIXED_ELEMENTS?.length > 0) {
+            const fixedElements = [...document.querySelectorAll(window.__FORMIX__OVERLAY__FIXED_ELEMENTS.join(','))];
+
+            for (const element of fixedElements) {
+                element.style = `
+                    width: '';
+                `;
+            }
+        }
+    }
+};