@useinsider/ab-components 0.0.11 → 0.0.13

package/dist/ab-components.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"ab-components.umd.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue","../src/components/NumberInput/NumberInput.vue","../src/components/Toggle/Toggle.vue","../src/utils/preventXSS.ts","../src/components/Tooltip/Tooltip.vue","../src/components/Box/DefaultBox.vue","../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nimport { Icon } from '@/index';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n    variant: 'solid' | 'ghost' | 'text' | 'outline';\n    color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    leftIconName?: IconNames;\n    rightIconName?: IconNames;\n    loadingStatus?: boolean;\n    successStatus?: boolean;\n    label?: string;\n    disabled?: boolean;\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    fill: false,\n    size: 'default',\n});\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n    if (props.disabled) {\n        return;\n    }\n\n    emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n    if (props.loadingStatus) {\n        return 'loading-circle';\n    } else if (props.successStatus) {\n        return 'line-check-natural';\n    }\n\n    return props.leftIconName;\n});\n</script>\n\n<template>\n    <button\n        :class=\"[\n            styles.button,\n            styles[`button__${variant}`],\n            styles[`button__${variant}-${color}`],\n            styles[`button__size_${size}`],\n            { [styles.fill]: fill },\n        ]\"\n        :disabled=\"props.disabled\"\n        @click=\"onClick\">\n        <Icon\n            v-if=\"leftIcon\"\n            :name=\"leftIcon\" />\n        <span\n            v-if=\"label\"\n            :class=\"styles.button__label\">\n            {{ label }}\n        </span>\n        <Icon\n            v-if=\"rightIconName\"\n            :name=\"rightIconName\" />\n    </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n    clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n    mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n        el.clickOutsideEvent = (event: Event) => {\n            const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n                return element && (element === event.target || element.contains(event.target as Node))\n            });\n\n            if (!isClickInside) {\n                binding.value.handler(); // Close handler\n            }\n        };\n\n        document.addEventListener('click', el.clickOutsideEvent);\n    },\n    unmounted(el: ClickOutsideElement) {\n        if (el.clickOutsideEvent) {\n            document.removeEventListener('click', el.clickOutsideEvent);\n        }\n    },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n    let searchIndex = 0;\n    for (const char of choiceValue) {\n        if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n            searchIndex++;\n        }\n        if (searchIndex === searchTerm.length) {\n            return true;\n        }\n    }\n    return false;\n};\n\n\nexport const fuzzySearch = <T>(\n    choices: T[],\n    key: keyof T,\n    searchTerm: string,\n): T[] => {\n    if (!searchTerm.trim()) {\n        return choices;\n    }\n\n    const normalizedSearchTerm = searchTerm.toLowerCase();\n\n    return choices\n        .filter(choice => {\n            const value = String(choice[key]);\n\n            return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n        })\n        .sort((a, b) => {\n            const aValue =  String(a[key]).toLowerCase();\n            const bValue = String(b[key]).toLowerCase();\n\n            if (aValue === normalizedSearchTerm) return -1;\n            if (bValue === normalizedSearchTerm) return 1;\n\n            if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n                return -1;\n            if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n                return 1;\n\n            return aValue.length - bValue.length;\n        });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted, reactive, watch } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n    text: string;\n    value: string;\n}\n\ninterface DropdownProps {\n    id: string;\n    label?: string;\n    modelValue?: string;\n    menuHeight?: number;\n    placeholder?: string;\n    addable?: boolean;\n    addButtonText?: string;\n    searchable?: boolean;\n    searchPlaceHolder?: string;\n    items: MenuItem[];\n    validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n    (e: 'update:modelValue', value: string): void;\n    (e: 'add-error', error: string): void;\n    (e: 'item-added', item: MenuItem): void;\n    (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n    menuHeight: 154,\n    searchBar: false,\n    addItem: false,\n    modelValue: '',\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(false);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = reactive([...props.items]);\nconst allItems = reactive([...props.items]);\n\nconst calculateMenuPosition = () => {\n    if (!dropdownRef.value) {\n        return;\n    }\n\n    const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n    const viewportHeight = window.innerHeight;\n    const bottom = top + dropdownRef.value.offsetHeight;\n    const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n    menuPosition.value = {\n        x: left + window.scrollX,\n        y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n        width,\n        shouldOpenUp,\n        height: props.menuHeight,\n    };\n};\n\nconst toggleMenu = () => {\n    calculateMenuPosition();\n    isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n    errorMessage.value = null;\n    searchQuery.value = '';\n    filteredItems.splice(0, filteredItems.length, ...allItems);\n};\n\nconst closeMenu = () => {\n    isOpen.value = false;\n\n    resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n    selectedItem.value = item;\n\n    emit('select-item', item);\n    emit('update:modelValue', item.value);\n\n    closeMenu();\n};\n\nconst addItem = () => {\n    const query = searchQuery.value.trim();\n    const error = props.validateAddItem(query, allItems);\n\n    if (error) {\n        errorMessage.value = error;\n\n        emit('add-error', error);\n\n        return;\n    }\n\n    const newItem: MenuItem = {\n        text: query,\n        value: query,\n    };\n\n    allItems.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    const results = fuzzySearch<MenuItem>(allItems, 'text', searchQuery.value);\n\n    filteredItems.splice(0, filteredItems.length, ...results);\n};\n\nconst onFocusSearch = () => {\n    errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n    top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n    left: `${menuPosition.value.x}px`,\n    width: `${menuPosition.value.width}px`,\n    height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n    calculateMenuPosition();\n\n    if (props.modelValue) {\n        const defaultItem = allItems.find(item => item.value === props.modelValue);\n\n        if (defaultItem) {\n            selectedItem.value = defaultItem;\n        }\n    }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n\nwatch(\n    () => props.items,\n    newItems => {\n        allItems.splice(0, allItems.length, ...newItems);\n        filteredItems.splice(0, filteredItems.length, ...newItems);\n    },\n    { deep: true }\n);\n</script>\n\n<template>\n    <div\n        ref=\"dropdownRef\"\n        :class=\"styles.dropdown\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.dropdown__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <button\n            :class=\"[\n                styles.dropdown__valueContent, {\n                    [styles['dropdown__valueContent--open']]: isOpen,\n                },\n            ]\"\n            @click=\"toggleMenu\">\n            <span :class=\"styles.dropdown__value\">\n                {{ selectedValue }}\n            </span>\n            <span\n                v-if=\"placeholder && !selectedValue\"\n                :class=\"styles.dropdown__placeholder\">\n                {{ placeholder }}\n            </span>\n            <svg\n                fill=\"none\"\n                height=\"17\"\n                viewBox=\"0 0 16 17\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                :class=\"styles.dropdown__arrowIcon\">\n                <path\n                    d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n                    fill=\"#91949F\" />\n            </svg>\n        </button>\n    </div>\n\n    <div\n        v-if=\"isOpen\"\n        ref=\"menuRef\"\n        :class=\"styles.menu\"\n        :style=\"menuStyle\"\n        v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n        @click.prevent>\n        <div\n            v-if=\"props.searchable\"\n            :class=\"styles.menu__searchContainer\">\n            <div :class=\"styles.menu__searchInputWrap\">\n                <input\n                    type=\"text\"\n                    :class=\"[\n                        styles.menu__searchInput, {\n                            [styles['menu__searchInput--error']]: errorMessage,\n                        },\n                    ]\"\n                    :placeholder=\"searchPlaceHolder\"\n                    v-model=\"searchQuery\"\n                    @focus=\"onFocusSearch\"\n                    @input=\"onSearch\">\n                <p\n                    v-if=\"errorMessage\"\n                    :class=\"styles.menu__errorMessage\">\n                    {{ errorMessage }}\n                </p>\n            </div>\n            <button\n                v-if=\"props.addable\"\n                :class=\"styles.menu__addButton\"\n                @click=\"addItem\">\n                {{ addButtonText }}\n            </button>\n        </div>\n        <ul :class=\"styles.menu__itemContainer\">\n            <li\n                v-for=\"(item, index) in filteredItems\"\n                :key=\"`${item.value}-${index}`\"\n                :class=\"[\n                    styles.menu__item, {\n                        [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n                    },\n                ]\"\n                @click=\"selectItem(item)\">\n                {{ item.text }}\n            </li>\n        </ul>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/types/generated/svgIconName';\n\nexport interface IconProps {\n    name: IconNames;\n    size?: 16 | 24;\n    color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n    size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n    <svg\n        class=\"icon\"\n        :fill=\"color || 'currentColor'\"\n        :height=\"iconSize\"\n        :width=\"iconSize\">\n        <use :xlink:href=\"`#${name}`\" />\n    </svg>\n</template>\n\n<style scoped>\n.icon {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n    variant?: 'default' | 'warning' | 'alert' | 'success';\n    text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n    variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n    switch (props.variant) {\n        case 'alert': return 'filled-error-box';\n        case 'warning': return 'line-caution-triangle';\n        case 'success': return 'line-check-natural';\n\n        default: return 'filled-info-circle';\n    }\n});\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.container,\n            styles[`container__${variant}`],\n        ]\">\n        <Icon\n            :name=\"IconName\"\n            :size=\"24\" />\n        <span :class=\"styles.container__text\">{{ text }}</span>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue';\nimport { Icon } from '@/index';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport styles from './SegmentButton.module.scss';\n\nexport interface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\nexport interface SegmentButtonProps {\n    color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    align?: 'vertical' | 'horizontal';\n    disabled?: boolean;\n    segments: SegmentType[];\n    fill?: boolean;\n    modelValue?: string;\n}\n\ninterface SegmentButtonEmits {\n    'update:modelValue': [value: string];\n    click: [value: SegmentType['value']];\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    size: 'default',\n    align: 'horizontal',\n});\n\nconst emit = defineEmits<SegmentButtonEmits>();\nconst selected = ref<string>(props.modelValue || '');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n    emit('update:modelValue', segment.value);\n    emit('click', segment.value);\n};\n\nwatch(() => props.modelValue, newValue => {\n    selected.value = newValue || '';\n});\n\nconst filteredSegments = ref<SegmentType[]>([...props.segments]);\n\nwatch(() => props.segments, newSegments => {\n    filteredSegments.value = [...newSegments];\n\n    if (!newSegments.some(segment => segment.value === selected.value)) {\n        selected.value = '';\n        emit('update:modelValue', '');\n    }\n}, { deep: true });\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.segmentGroup,\n            styles[`segmentGroup--${align}`],\n            { [styles.fill]: fill },\n        ]\">\n        <button\n            v-for=\"(segment, index) in filteredSegments\"\n            :key=\"`${segment.value}-${index}`\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === selected,\n                },\n            ]\"\n            :disabled=\"segment.disabled || props.disabled\"\n            @click=\"setSelect(segment)\">\n            <Icon\n                v-if=\"segment.icon\"\n                :name=\"segment.icon\" />\n            <span\n                v-if=\"segment.label\"\n                :class=\"styles.button__label\">\n                {{ segment.label }}\n            </span>\n        </button>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue?: string;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    maxHeight?: number;\n    error?: string;\n    multiline?: boolean;\n    autoGrow?: boolean;\n    counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    maxHeight: undefined,\n    error: '',\n    multiline: false,\n    autoGrow: false,\n    modelValue: '',\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [Props['modelValue']];\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n    if (props.autoGrow && textareaRef.value) {\n        textareaRef.value.style.height = '';\n\n        const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n        textareaRef.value.style.height = `${newHeight}px`;\n    }\n};\n\nconst handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n    emit('input', event);\n    emit('update:modelValue', target.value);\n\n    autoGrow();\n};\n\nonMounted(() => {\n    autoGrow();\n});\n</script>\n\n<template>\n    <div :class=\"styles.wrapper\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <template v-if=\"multiline\">\n            <textarea\n                :id=\"id\"\n                ref=\"textareaRef\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\" />\n        </template>\n        <template v-else>\n            <input\n                :id=\"id\"\n                type=\"text\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\">\n        </template>\n\n        <div :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport styles from './NumberInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue?: number;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    error?: string;\n    errorStatus?: boolean;\n    counter?: boolean;\n    min?: number;\n    max?: number;\n    size?: 'default' | 'small';\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    min: undefined,\n    max: undefined,\n    error: '',\n    modelValue: undefined,\n    size: 'default',\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [Props['modelValue']];\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst applyMinMax = (value: string): string => {\n    if (value === '') {\n        return value;\n    }\n\n    const numericValue = Number(value);\n\n    if (typeof props.min === 'number' && numericValue < props.min) {\n        return props.min?.toString();\n    } else if (typeof props.max === 'number' && numericValue > props.max) {\n        return props.max?.toString();\n    }\n\n    return numericValue.toString();\n};\n\nconst handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n    const sanitizedValue = applyMinMax(target.value);\n\n    target.value = sanitizedValue;\n\n    emit('input', event);\n    emit('update:modelValue', Number(sanitizedValue));\n};\n</script>\n\n<template>\n    <div :class=\"[styles.wrapper, styles[`wrapper__size_${size}`]]\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <input\n            :id=\"id\"\n            type=\"number\"\n            :class=\"[\n                styles.wrapper__field, {\n                    [styles['wrapper--error']]: error || errorStatus,\n                },\n            ]\"\n            :max=\"max\"\n            :maxlength=\"maxLength\"\n            :min=\"min\"\n            :name=\"name\"\n            :placeholder=\"placeholder\"\n            :value=\"modelValue\"\n            @blur=\"emit('blur', $event)\"\n            @change=\"$emit('change', $event)\"\n            @focus=\"emit('focus', $event)\"\n            @input=\"handleInput\"\n            @paste=\"emit('paste', $event)\">\n\n        <div\n            v-if=\"counter || error\"\n            :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport styles from './Toggle.module.scss';\n\ninterface ToggleProps {\n    id: string;\n    name: string;\n    checked?: boolean;\n    disabled?: boolean;\n}\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n    checked: false,\n    disabled: false,\n});\n\nconst emit = defineEmits<{\n    click: [checked: boolean];\n}>();\n\nconst onClick = () => {\n    emit('click', !props.checked);\n};\n</script>\n\n<template>\n    <fieldset\n        :class=\"[\n            styles.wrapper,\n            {\n                [styles.wrapper_checked]: checked,\n                [styles.wrapper_disabled]: disabled,\n            },\n        ]\">\n        <input\n            :id=\"id\"\n            type=\"checkbox\"\n            :checked=\"checked\"\n            :class=\"styles.wrapper__input\"\n            :disabled=\"disabled\"\n            :name=\"name\"\n            @click=\"onClick\">\n        <label\n            :class=\"styles.wrapper__label\"\n            :for=\"id\" />\n    </fieldset>\n</template>\n","export function preventXSS (html = '') {\n    if (typeof(html) === 'string') {\n        return html.replace(/<\\/style>/gi, '')\n            .replace(/<(.*?) on(.*?)=['\"](.*?)>/gi, '')\n            .replace(/(<meta |<style|<\\/*script)(.*?)>/gi, '')\n            .replace(/(<([^>]+)>)/ig, '')\n            .replace(/<(.*?) (href|src)=\"j(.*)a(.*)v(.*)a(.*)s(.*)c(.*)r(.*)i(.*)p(.*)t(.*):(.*?)>/gi, '');\n    }\n    return html;\n}\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, type StyleValue } from 'vue';\nimport { Box, Icon } from '@/index';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport { preventXSS } from '@/utils/preventXSS';\nimport styles from './Tooltip.module.scss';\n\ntype TriangleAlignment = 'start' | 'center' | 'end' | 'top';\n\nexport interface TooltipProps {\n    id: string;\n    text: string;\n    staticPosition?: (\n        'top center'\n        | 'top left'\n        | 'top right'\n        | 'bottom center'\n        | 'bottom left'\n        | 'bottom right'\n        | 'right center'\n        | 'right top'\n        | 'right bottom'\n        | 'left center'\n        | 'left top'\n        | 'left bottom'\n    );\n    dynamicPosition?: boolean;\n    absolutePositionStatus?: boolean;\n    offsetX?: number;\n    offsetY?: number;\n    maxHeight?: number;\n    status?: boolean;\n    preventXss?: boolean;\n    iconName?: IconNames;\n    absoluteTriangleAlignment?: TriangleAlignment;\n    absoluteTrianglePosition?: 'top' | 'bottom';\n    absolutePosition?: StyleValue;\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n    offsetX: 4,\n    offsetY: 4,\n    staticPosition: 'top center',\n    maxHeight: 320,\n    status: true,\n    iconName: undefined,\n    absoluteTriangleAlignment: 'center',\n    absoluteTrianglePosition: 'top',\n    position: 'bottom',\n    align: 'end',\n    absolutePositionStatus: false,\n});\n\nconst tooltipIconRef = ref<HTMLElement | null>(null);\nconst dynamicPositionTriangle = ref('center');\nconst dynamicPositionAlignment = ref('bottom');\nconst dynamicPositionTrianglePosition = ref<TriangleAlignment>('center');\nconst dynamicPositionInitialized = ref(false);\nconst animationClass = ref('');\nconst mouseEnterWrapper = ref(false);\nconst mouseEnterIcon = ref(false);\nconst lastEnteredElement = ref('');\nconst displayClass = ref('d-n');\nconst scrollAreaRef = ref<Document | HTMLElement | null>(null);\nconst tooltipRootRef = ref<HTMLElement | null>(null);\nconst tooltipPopupRef = ref<HTMLElement | null>(null);\nconst position = computed(() => props.staticPosition.split(' ')[0]);\nconst alignment = computed(() => props.staticPosition.split(' ')[1]);\nconst topClass = computed(() => (props.iconName ? 'mt-1' : 'mt-0'));\nconst secureText = computed(() => (props.preventXss ? preventXSS(props.text) : props.text));\n\nconst trianglePosition = computed(() => {\n    if (props.absolutePositionStatus) {\n        return props.absoluteTrianglePosition;\n    }\n\n    if (props.dynamicPosition && dynamicPositionInitialized.value) {\n        return dynamicPositionAlignment.value === 'bottom' ? 'top' : 'bottom';\n    }\n\n    if (position.value === 'top') {\n        return 'bottom';\n    }\n\n    if (position.value === 'bottom') {\n        return 'top';\n    }\n\n    if (position.value === 'left') {\n        return 'right';\n    }\n\n    if (position.value === 'right') {\n        return 'left';\n    }\n\n    return 'bottom';\n});\n\nconst visibilityClass = computed(() => {\n    if (props.absolutePositionStatus) {\n        return '';\n    }\n\n    if (\n        (mouseEnterWrapper.value && mouseEnterIcon.value)\n        || (lastEnteredElement.value === 'icon' && mouseEnterWrapper.value)\n    ) {\n        return 'opa-1';\n    }\n\n    return 'opa-0';\n});\n\nconst triangleAlignment = computed<TriangleAlignment>(() => {\n    if (props.absolutePositionStatus) {\n        return props.absoluteTriangleAlignment;\n    }\n\n    if (props.dynamicPosition && dynamicPositionInitialized.value) {\n        if (dynamicPositionTriangle.value === 'center') {\n            return 'center';\n        }\n\n        if (dynamicPositionTriangle.value === 'end') {\n            return 'end';\n        }\n\n        if (dynamicPositionTriangle.value === 'start') {\n            return 'start';\n        }\n\n        return dynamicPositionTrianglePosition.value;\n    }\n\n    if (alignment.value === 'center') {\n        return 'center';\n    }\n\n    if (alignment.value === 'left' || alignment.value === 'top') {\n        return 'start';\n    }\n\n    if (alignment.value === 'right' || alignment.value === 'bottom') {\n        return 'end';\n    }\n\n    return 'center';\n});\n\nconst staticPositionClass = computed(() => {\n    if (props.absolutePositionStatus) {\n        return '';\n    }\n\n    if (props.dynamicPosition && dynamicPositionInitialized.value) {\n        return styles[`wrapper__box_${dynamicPositionAlignment.value}-${dynamicPositionTriangle.value}`];\n    }\n\n    return styles[`wrapper__box_${position.value}-${triangleAlignment.value}`];\n});\n\nconst offsetStyle = computed(() => {\n    if (props.offsetX === 0 && props.offsetY === 0) {\n        return {};\n    }\n\n    if (props.dynamicPosition) {\n        const marginDirection = dynamicPositionAlignment.value === 'bottom' ? 'top' : 'bottom';\n\n        return {\n            [`margin-${marginDirection}`]: `${props.offsetY}px`,\n        };\n    }\n\n    if (trianglePosition.value === 'top' || trianglePosition.value === 'bottom') {\n        return {\n            [`margin-${trianglePosition.value}`]: `${props.offsetY}px`,\n        };\n    }\n\n    return { [`margin-${trianglePosition.value}`]: `${props.offsetX}px` };\n});\n\nconst getDynamicPosition = (\n    target: HTMLElement | null | undefined,\n    parent: HTMLElement | null | undefined,\n    nested = false\n) => {\n    if (!target || !tooltipRootRef.value) {\n        return { left: false, right: false, top: false, bottom: false, center: false };\n    }\n\n    const customRect = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 };\n    const tooltipElementHeight = tooltipRootRef.value.clientHeight;\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const targetHeight = target.clientHeight;\n    const targetWidth = target.clientWidth || 264;\n    const parentRectangle = parent?.getBoundingClientRect() || customRect;\n    const parentXOffset = nested ? parentRectangle?.right : parentRectangle?.left;\n    const parentYOffset = nested ? parentRectangle?.top : parentRectangle?.bottom;\n    const hasSpaceOnRight = (\n        (parentXOffset + parentRectangle.width) + targetWidth + props.offsetX\n    ) < windowWidth;\n    const hasSpaceOnLeft = ((parentXOffset + (parentRectangle.width / 2))\n        - (targetWidth + props.offsetX)) > 10;\n    const hasSpaceOnBottom = (parentYOffset + targetHeight) < (windowHeight - props.offsetY);\n    const hasSpaceOnTop = (parentYOffset - (targetHeight + tooltipElementHeight + props.offsetY)) > 0;\n    let hasSpaceOnCenter = false;\n\n    if (props.iconName) {\n        hasSpaceOnCenter = (parentRectangle.right + (targetWidth / 2) < windowWidth)\n            && (parentRectangle.left - ((targetWidth + props.offsetX) / 2) >= 10);\n    }\n\n    return {\n        left: hasSpaceOnLeft,\n        right: hasSpaceOnRight,\n        bottom: hasSpaceOnBottom,\n        top: hasSpaceOnTop,\n        center: hasSpaceOnCenter,\n    };\n};\n\nconst handleDynamicPosition = () => {\n    nextTick(() => {\n        dynamicPositionInitialized.value = true;\n\n        const { bottom, left, right, top, center } = getDynamicPosition(\n            tooltipPopupRef.value,\n            tooltipPopupRef.value?.parentNode as HTMLElement\n        );\n\n        if (center) {\n            dynamicPositionTriangle.value = 'center';\n            dynamicPositionAlignment.value = bottom && !top ? 'bottom' : 'top';\n\n            return;\n        }\n\n        // Means that every direction has an available space\n        if (bottom && left && right && top) {\n            dynamicPositionTriangle.value = 'center';\n            dynamicPositionAlignment.value = 'top';\n\n            return;\n        }\n\n        if (top && !bottom) {\n            if (right && left) {\n                dynamicPositionTriangle.value = 'center';\n                dynamicPositionAlignment.value = 'top';\n\n                return;\n            }\n\n            if (right && !left) {\n                dynamicPositionTriangle.value = 'start';\n                dynamicPositionAlignment.value = 'top';\n\n                return;\n            }\n\n            if (!right && left) {\n                dynamicPositionTriangle.value = 'end';\n                dynamicPositionAlignment.value = 'top';\n\n                return;\n            }\n        }\n\n        if (bottom && top) {\n            if (!right && left) {\n                dynamicPositionTriangle.value = 'end';\n                dynamicPositionAlignment.value = 'top';\n                dynamicPositionTrianglePosition.value = 'end';\n\n                return;\n            }\n\n            if (right && !left) {\n                dynamicPositionTriangle.value = 'start';\n                dynamicPositionAlignment.value = 'top';\n                dynamicPositionTrianglePosition.value = 'start';\n\n                return;\n            }\n        }\n\n        if (bottom && !top) {\n            if (right && left) {\n                dynamicPositionTriangle.value = 'center';\n                dynamicPositionAlignment.value = 'bottom';\n                dynamicPositionTrianglePosition.value = 'top';\n\n                return;\n            }\n\n            if (!right && left) {\n                dynamicPositionTriangle.value = 'end';\n                dynamicPositionAlignment.value = 'bottom';\n                dynamicPositionTrianglePosition.value = 'top';\n\n                return;\n            }\n\n            if (right && !left) {\n                dynamicPositionTriangle.value = 'start';\n                dynamicPositionAlignment.value = 'bottom';\n                dynamicPositionTrianglePosition.value = 'top';\n            }\n        }\n    });\n};\n\nconst isScrollable = (el: HTMLElement): boolean => {\n    const hasScrollableContent = el.scrollHeight > el.clientHeight;\n    const overflowYStyle = window.getComputedStyle(el).overflowY;\n    const isOverflowScroll = ['auto', 'scroll'].includes(overflowYStyle);\n\n    return hasScrollableContent && isOverflowScroll;\n};\n\nconst getScrollableParent = (element: HTMLElement | null): Document | HTMLElement | null => {\n    const isComment = element?.nodeType === Node.COMMENT_NODE;\n    const isDocument = element?.nodeType === Node.DOCUMENT_NODE;\n\n    if (!element || isComment || isDocument) {\n        return document;\n    }\n\n    if (isScrollable(element)) {\n        return element;\n    }\n\n    return getScrollableParent(element);\n};\n\nconst killDynamicPositioning = () => {\n    scrollAreaRef.value?.removeEventListener('scroll', handleDynamicPosition);\n    window?.removeEventListener('resize', handleDynamicPosition);\n};\n\nconst initDynamicPositioning = () => {\n    nextTick(() => {\n        scrollAreaRef.value = getScrollableParent(tooltipRootRef.value);\n        scrollAreaRef.value?.addEventListener('scroll', handleDynamicPosition);\n        window?.addEventListener('resize', handleDynamicPosition);\n    });\n};\n\nconst onMouseEnterWrapper = () => {\n    lastEnteredElement.value = 'wrapper';\n    displayClass.value = 'd-b';\n\n    mouseEnterWrapper.value = true;\n};\n\nconst onMouseEnterIcon = () => {\n    lastEnteredElement.value = 'icon';\n    displayClass.value = 'd-b';\n\n    mouseEnterIcon.value = true;\n};\n\nconst onMouseLeaveIcon = () => {\n    mouseEnterIcon.value = false;\n};\n\nconst onMouseLeaveWrapper = () => {\n    lastEnteredElement.value = '';\n    mouseEnterWrapper.value = false;\n    mouseEnterIcon.value = false;\n};\n\nconst mouseLeave = () => {\n    onMouseLeaveWrapper();\n\n    if (props.dynamicPosition) {\n        if (dynamicPositionAlignment.value === 'bottom') {\n            animationClass.value = 'bottom-leave';\n        } else if (dynamicPositionAlignment.value === 'top') {\n            animationClass.value = 'top-leave';\n        }\n    } else if (position.value === 'top') {\n        animationClass.value = 'top-leave';\n    } else if (position.value === 'bottom') {\n        animationClass.value = 'bottom-leave';\n    } else if (position.value === 'left') {\n        animationClass.value = 'left-leave';\n    } else if (position.value === 'right') {\n        animationClass.value = 'right-leave';\n    }\n\n    setTimeout(() => {\n        animationClass.value = '';\n        displayClass.value = 'd-n';\n    }, props.absolutePositionStatus ? 0 : 250);\n};\n\nconst addAnimationClass = () => {\n    onMouseEnterWrapper();\n    handleDynamicPosition();\n\n    if (props.dynamicPosition) {\n        if (dynamicPositionAlignment.value === 'bottom') {\n            animationClass.value = 'top-entrance';\n        } else if (dynamicPositionAlignment.value === 'top') {\n            animationClass.value = 'bottom-entrance';\n        }\n    } else if (position.value === 'top') {\n        animationClass.value = 'bottom-entrance';\n    } else if (position.value === 'bottom') {\n        animationClass.value = 'top-entrance';\n    } else if (position.value === 'left') {\n        animationClass.value = 'right-entrance';\n    } else if (position.value === 'right') {\n        animationClass.value = 'left-entrance';\n    }\n\n    setTimeout(() => {\n        animationClass.value = '';\n    }, 250);\n};\n\nonMounted(() => {\n    if (props.dynamicPosition) {\n        initDynamicPositioning();\n    }\n});\n\nonBeforeUnmount(() => {\n    killDynamicPositioning();\n});\n</script>\n\n<template>\n    <div\n        :id=\"id\"\n        ref=\"tooltipRootRef\"\n        :class=\"styles.wrapper\"\n        @mouseenter=\"addAnimationClass\"\n        @mouseleave=\"mouseLeave\">\n        <Icon\n            v-if=\"iconName\"\n            ref=\"tooltipIconRef\"\n            :class=\"styles.wrapper__icon\"\n            :name=\"iconName\"\n            @mouseenter=\"onMouseEnterIcon\"\n            @mouseleave=\"onMouseLeaveIcon\" />\n        <div\n            v-else\n            :class=\"styles.wrapper__icon\"\n            @mouseenter=\"onMouseEnterIcon\"\n            @mouseleave=\"onMouseEnterIcon\">\n            <slot name=\"triggerElement\" />\n        </div>\n        <div\n            v-if=\"status\"\n            ref=\"tooltipPopupRef\"\n            :class=\"[styles.wrapper__box, staticPositionClass, visibilityClass, displayClass]\"\n            :style=\"absolutePosition\">\n            <Box\n                border-triangle\n                :border-triangle-align=\"triangleAlignment\"\n                :border-triangle-position=\"trianglePosition\"\n                :class=\"[styles['wrapper__box-content'], topClass, animationClass]\"\n                :style=\"offsetStyle\">\n                <div\n                    :class=\"styles.wrapper__text\"\n                    :style=\"{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }\">\n                    <div v-html=\"secureText\" />\n                    <slot name=\"contentSlot\" />\n                </div>\n            </Box>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport styles from './Box.module.scss';\n\nexport interface Props {\n    border?: string;\n    borderRadius?: string;\n    borderTriangle?: boolean;\n    borderTriangleAlign?: 'start' | 'center' | 'end';\n    borderTrianglePosition?: 'top' | 'right' | 'left' | 'bottom';\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    borderRadius: 'bor-r-1',\n    borderTriangle: false,\n    borderTriangleAlign: 'center',\n    borderTrianglePosition: 'top',\n});\n\nconst emit = defineEmits<{\n    click: [];\n}>();\n\nconst trianglePosition = computed(\n    () => (props.borderTriangle ? styles[`box_${props.borderTrianglePosition}-${props.borderTriangleAlign}`] : '')\n);\n\nfunction trigger (): void {\n    emit('click');\n}\n</script>\n\n<template>\n    <div\n        :class=\"[styles.box, trianglePosition, border, borderRadius]\"\n        @click=\"trigger\">\n        <slot />\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport DefaultBox from './DefaultBox.vue';\nimport FlipBox from './FlipBox.vue';\n\nconst boxes = {\n    default: DefaultBox,\n    flip: FlipBox,\n} as const;\n\nwithDefaults(defineProps<{\n    type?: keyof typeof boxes;\n    borderTriangle?: boolean;\n    borderTriangleAlign?: 'start' | 'center' | 'end' | 'top';\n    borderTrianglePosition?: 'top' | 'right' | 'left' | 'bottom';\n    boxSpacing?: string;\n}>(), {\n    borderTriangle: false,\n    boxSpacing: '',\n    type: 'default',\n});\n</script>\n\n<template>\n    <component\n        :is=\"boxes[type]\"\n        :border-triangle=\"borderTriangle\"\n        :border-triangle-align=\"borderTriangleAlign\"\n        :border-triangle-position=\"borderTrianglePosition\"\n        :box-spacing=\"boxSpacing\">\n        <slot />\n        <slot name=\"front\" />\n        <slot name=\"reverse\" />\n    </component>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","a","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","reactive","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","results","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","watch","newItems","iconSize","IconName","selected","setSelect","segment","newValue","filteredSegments","newSegments","textareaRef","autoGrow","newHeight","handleInput","target","applyMinMax","numericValue","_b","sanitizedValue","preventXSS","html","tooltipIconRef","dynamicPositionTriangle","dynamicPositionAlignment","dynamicPositionTrianglePosition","dynamicPositionInitialized","animationClass","mouseEnterWrapper","mouseEnterIcon","lastEnteredElement","displayClass","scrollAreaRef","tooltipRootRef","tooltipPopupRef","position","alignment","topClass","secureText","trianglePosition","visibilityClass","triangleAlignment","staticPositionClass","styles","offsetStyle","getDynamicPosition","parent","nested","customRect","tooltipElementHeight","windowWidth","windowHeight","targetHeight","targetWidth","parentRectangle","parentXOffset","parentYOffset","hasSpaceOnRight","hasSpaceOnLeft","hasSpaceOnBottom","hasSpaceOnTop","hasSpaceOnCenter","handleDynamicPosition","nextTick","right","center","isScrollable","hasScrollableContent","overflowYStyle","isOverflowScroll","getScrollableParent","isComment","isDocument","killDynamicPositioning","initDynamicPositioning","onMouseEnterWrapper","onMouseEnterIcon","onMouseLeaveIcon","onMouseLeaveWrapper","mouseLeave","addAnimationClass","onBeforeUnmount","trigger","boxes","DefaultBox","FlipBox"],"mappings":"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"}
+{"version":3,"file":"ab-components.umd.js","sources":["../src/components/Button/Button.vue","../src/directives/clickOutside.ts","../src/utils/search.ts","../src/components/Dropdown/DropdownMenu.vue","../src/components/Icon/Icon.vue","../src/components/OnPageMessage/OnPageMessage.vue","../src/components/SegmentButton/SegmentButton.vue","../src/components/TextInput/TextInput.vue","../src/components/NumberInput/NumberInput.vue","../src/components/Toggle/Toggle.vue","../src/utils/preventXSS.ts","../src/components/Tooltip/Tooltip.vue","../src/components/Box/DefaultBox.vue","../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\nimport { Icon } from '@/index';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport styles from './Button.module.scss';\n\ninterface ButtonProps {\n    variant: 'solid' | 'ghost' | 'text' | 'outline';\n    color: 'primary' | 'subtle-primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    leftIconName?: IconNames;\n    rightIconName?: IconNames;\n    loadingStatus?: boolean;\n    successStatus?: boolean;\n    label?: string;\n    disabled?: boolean;\n    fill?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    fill: false,\n    size: 'default',\n});\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent];\n}>();\n\nconst onClick = (event: MouseEvent) => {\n    if (props.disabled) {\n        return;\n    }\n\n    emit('click', event);\n};\n\nconst leftIcon = computed<IconNames | undefined>(() => {\n    if (props.loadingStatus) {\n        return 'loading-circle';\n    } else if (props.successStatus) {\n        return 'line-check-natural';\n    }\n\n    return props.leftIconName;\n});\n</script>\n\n<template>\n    <button\n        :class=\"[\n            styles.button,\n            styles[`button__${variant}`],\n            styles[`button__${variant}-${color}`],\n            styles[`button__size_${size}`],\n            { [styles.fill]: fill },\n        ]\"\n        :disabled=\"props.disabled\"\n        @click=\"onClick\">\n        <Icon\n            v-if=\"leftIcon\"\n            :name=\"leftIcon\" />\n        <span\n            v-if=\"label\"\n            :class=\"styles.button__label\">\n            {{ label }}\n        </span>\n        <Icon\n            v-if=\"rightIconName\"\n            :name=\"rightIconName\" />\n    </button>\n</template>\n","import type { DirectiveBinding } from 'vue';\n\ninterface ClickOutsideElement extends HTMLElement {\n    clickOutsideEvent?: (event: Event) => void;\n}\n\nexport default {\n    mounted(el: ClickOutsideElement, binding: DirectiveBinding<{ handler: () => void; exclude?: HTMLElement[] }>) {\n        el.clickOutsideEvent = (event: Event) => {\n            const isClickInside = [el, ...(binding.value.exclude || [])].some(element => {\n                return element && (element === event.target || element.contains(event.target as Node))\n            });\n\n            if (!isClickInside) {\n                binding.value.handler(); // Close handler\n            }\n        };\n\n        document.addEventListener('click', el.clickOutsideEvent);\n    },\n    unmounted(el: ClickOutsideElement) {\n        if (el.clickOutsideEvent) {\n            document.removeEventListener('click', el.clickOutsideEvent);\n        }\n    },\n};","const isFuzzyMatch = (choiceValue: string, searchTerm: string): boolean => {\n    let searchIndex = 0;\n    for (const char of choiceValue) {\n        if (char.toLowerCase() === searchTerm[searchIndex]?.toLowerCase()) {\n            searchIndex++;\n        }\n        if (searchIndex === searchTerm.length) {\n            return true;\n        }\n    }\n    return false;\n};\n\n\nexport const fuzzySearch = <T>(\n    choices: T[],\n    key: keyof T,\n    searchTerm: string,\n): T[] => {\n    if (!searchTerm.trim()) {\n        return choices;\n    }\n\n    const normalizedSearchTerm = searchTerm.toLowerCase();\n\n    return choices\n        .filter(choice => {\n            const value = String(choice[key]);\n\n            return isFuzzyMatch(value.toLowerCase(), normalizedSearchTerm)\n        })\n        .sort((a, b) => {\n            const aValue =  String(a[key]).toLowerCase();\n            const bValue = String(b[key]).toLowerCase();\n\n            if (aValue === normalizedSearchTerm) return -1;\n            if (bValue === normalizedSearchTerm) return 1;\n\n            if (aValue.startsWith(normalizedSearchTerm) && !bValue.startsWith(normalizedSearchTerm))\n                return -1;\n            if (!aValue.startsWith(normalizedSearchTerm) && bValue.startsWith(normalizedSearchTerm))\n                return 1;\n\n            return aValue.length - bValue.length;\n        });\n};\n","<script lang=\"ts\" setup>\nimport { ref, computed, type StyleValue, onMounted, reactive, watch } from 'vue';\nimport clickOutside from '@/directives/clickOutside';\nimport { fuzzySearch } from '@/utils/search';\nimport styles from './Dropdown.module.scss';\n\nconst vClickOutside = clickOutside;\n\ninterface MenuItem {\n    text: string;\n    value: string;\n}\n\ninterface DropdownProps {\n    id: string;\n    label?: string;\n    modelValue?: string;\n    menuHeight?: number;\n    placeholder?: string;\n    addable?: boolean;\n    addButtonText?: string;\n    searchable?: boolean;\n    searchPlaceHolder?: string;\n    items: MenuItem[];\n    validateAddItem?: (item: string, items: MenuItem[]) => string | null;\n}\n\ninterface Emits {\n    (e: 'update:modelValue', value: string): void;\n    (e: 'add-error', error: string): void;\n    (e: 'item-added', item: MenuItem): void;\n    (e: 'select-item', item: MenuItem): void;\n}\n\nconst props = withDefaults(defineProps<DropdownProps>(), {\n    menuHeight: 154,\n    searchBar: false,\n    addItem: false,\n    modelValue: '',\n    validateAddItem: () => null,\n});\n\nconst emit = defineEmits<Emits>();\nconst dropdownRef = ref<HTMLDivElement>();\nconst menuRef = ref<HTMLDivElement>();\nconst isOpen = ref(false);\nconst selectedItem = ref<MenuItem | null>(null);\nconst searchQuery = ref('');\nconst errorMessage = ref<string | null>(null);\nconst menuPosition = ref({ x: 0, y: 0, width: 0, shouldOpenUp: false, height: props.menuHeight });\nconst filteredItems = reactive([...props.items]);\nconst allItems = reactive([...props.items]);\n\nconst calculateMenuPosition = () => {\n    if (!dropdownRef.value) {\n        return;\n    }\n\n    const { offsetTop: top, offsetLeft: left, offsetWidth: width } = dropdownRef.value;\n    const viewportHeight = window.innerHeight;\n    const bottom = top + dropdownRef.value.offsetHeight;\n    const shouldOpenUp = bottom + props.menuHeight > viewportHeight;\n\n    menuPosition.value = {\n        x: left + window.scrollX,\n        y: shouldOpenUp ? top + window.scrollY : bottom + window.scrollY,\n        width,\n        shouldOpenUp,\n        height: props.menuHeight,\n    };\n};\n\nconst toggleMenu = () => {\n    calculateMenuPosition();\n    isOpen.value = !isOpen.value;\n};\n\nconst resetSettings = () => {\n    errorMessage.value = null;\n    searchQuery.value = '';\n    filteredItems.splice(0, filteredItems.length, ...allItems);\n};\n\nconst closeMenu = () => {\n    isOpen.value = false;\n\n    resetSettings();\n};\n\nconst selectItem = (item: MenuItem) => {\n    selectedItem.value = item;\n\n    emit('select-item', item);\n    emit('update:modelValue', item.value);\n\n    closeMenu();\n};\n\nconst addItem = () => {\n    const query = searchQuery.value.trim();\n    const error = props.validateAddItem(query, allItems);\n\n    if (error) {\n        errorMessage.value = error;\n\n        emit('add-error', error);\n\n        return;\n    }\n\n    const newItem: MenuItem = {\n        text: query,\n        value: query,\n    };\n\n    allItems.push(newItem);\n    resetSettings();\n\n    emit('item-added', newItem);\n};\n\nconst onSearch = () => {\n    const results = fuzzySearch<MenuItem>(allItems, 'text', searchQuery.value);\n\n    filteredItems.splice(0, filteredItems.length, ...results);\n};\n\nconst onFocusSearch = () => {\n    errorMessage.value = '';\n};\n\nconst menuStyle = computed<Partial<StyleValue>>(() => ({\n    top: menuPosition.value.shouldOpenUp ? `${menuPosition.value.y - 10}px` : `${menuPosition.value.y}px`,\n    left: `${menuPosition.value.x}px`,\n    width: `${menuPosition.value.width}px`,\n    height: `${props.menuHeight}px`,\n}));\n\nonMounted(() => {\n    calculateMenuPosition();\n\n    if (props.modelValue) {\n        const defaultItem = allItems.find(item => item.value === props.modelValue);\n\n        if (defaultItem) {\n            selectedItem.value = defaultItem;\n        }\n    }\n});\n\nconst selectedValue = computed(() => (selectedItem.value ? selectedItem.value.text : ''));\n\nwatch(\n    () => props.items,\n    newItems => {\n        allItems.splice(0, allItems.length, ...newItems);\n        filteredItems.splice(0, filteredItems.length, ...newItems);\n    },\n    { deep: true }\n);\n</script>\n\n<template>\n    <div\n        ref=\"dropdownRef\"\n        :class=\"styles.dropdown\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.dropdown__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <button\n            :class=\"[\n                styles.dropdown__valueContent, {\n                    [styles['dropdown__valueContent--open']]: isOpen,\n                },\n            ]\"\n            @click=\"toggleMenu\">\n            <span :class=\"styles.dropdown__value\">\n                {{ selectedValue }}\n            </span>\n            <span\n                v-if=\"placeholder && !selectedValue\"\n                :class=\"styles.dropdown__placeholder\">\n                {{ placeholder }}\n            </span>\n            <svg\n                fill=\"none\"\n                height=\"17\"\n                viewBox=\"0 0 16 17\"\n                width=\"16\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                :class=\"styles.dropdown__arrowIcon\">\n                <path\n                    d=\"M8 11.2021L4.5359 6.70215L11.4641 6.70215L8 11.2021Z\"\n                    fill=\"#91949F\" />\n            </svg>\n        </button>\n    </div>\n\n    <div\n        v-if=\"isOpen\"\n        ref=\"menuRef\"\n        :class=\"styles.menu\"\n        :style=\"menuStyle\"\n        v-click-outside=\"{ handler: closeMenu, exclude: [dropdownRef, menuRef] }\"\n        @click.prevent>\n        <div\n            v-if=\"props.searchable\"\n            :class=\"styles.menu__searchContainer\">\n            <div :class=\"styles.menu__searchInputWrap\">\n                <input\n                    type=\"text\"\n                    :class=\"[\n                        styles.menu__searchInput, {\n                            [styles['menu__searchInput--error']]: errorMessage,\n                        },\n                    ]\"\n                    :placeholder=\"searchPlaceHolder\"\n                    v-model=\"searchQuery\"\n                    @focus=\"onFocusSearch\"\n                    @input=\"onSearch\">\n                <p\n                    v-if=\"errorMessage\"\n                    :class=\"styles.menu__errorMessage\">\n                    {{ errorMessage }}\n                </p>\n            </div>\n            <button\n                v-if=\"props.addable\"\n                :class=\"styles.menu__addButton\"\n                @click=\"addItem\">\n                {{ addButtonText }}\n            </button>\n        </div>\n        <ul :class=\"styles.menu__itemContainer\">\n            <li\n                v-for=\"(item, index) in filteredItems\"\n                :key=\"`${item.value}-${index}`\"\n                :class=\"[\n                    styles.menu__item, {\n                        [styles['menu__item--active']]: selectedItem && item.value === selectedItem.value,\n                    },\n                ]\"\n                @click=\"selectItem(item)\">\n                {{ item.text }}\n            </li>\n        </ul>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { IconNames } from '@/types/generated/svgIconName';\n\nexport interface IconProps {\n    name: IconNames;\n    size?: 16 | 24;\n    color?: string;\n}\n\nconst props = withDefaults(defineProps<IconProps>(), {\n    size: 16,\n});\n\nconst iconSize = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));\n</script>\n\n<template>\n    <svg\n        class=\"icon\"\n        :fill=\"color || 'currentColor'\"\n        :height=\"iconSize\"\n        :width=\"iconSize\">\n        <use :xlink:href=\"`#${name}`\" />\n    </svg>\n</template>\n\n<style scoped>\n.icon {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport Icon from '@/components/Icon/Icon.vue';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport styles from './OnPageMessage.module.scss';\n\ninterface OnPageMessageProps {\n    variant?: 'default' | 'warning' | 'alert' | 'success';\n    text: string;\n}\n\nconst props = withDefaults(defineProps<OnPageMessageProps>(), {\n    variant: 'default',\n});\n\nconst IconName = computed<IconNames>(() => {\n    switch (props.variant) {\n        case 'alert': return 'filled-error-box';\n        case 'warning': return 'line-caution-triangle';\n        case 'success': return 'line-check-natural';\n\n        default: return 'filled-info-circle';\n    }\n});\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.container,\n            styles[`container__${variant}`],\n        ]\">\n        <Icon\n            :name=\"IconName\"\n            :size=\"24\" />\n        <span :class=\"styles.container__text\">{{ text }}</span>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, watch } from 'vue';\nimport { Icon } from '@/index';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport styles from './SegmentButton.module.scss';\n\nexport interface SegmentType {\n    value: string;\n    label: string;\n    disabled?: boolean;\n    icon?: IconNames;\n}\n\nexport interface SegmentButtonProps {\n    color: 'primary' | 'secondary' | 'danger' | 'warning' | 'smart';\n    size?: 'default' | 'small';\n    align?: 'vertical' | 'horizontal';\n    disabled?: boolean;\n    segments: SegmentType[];\n    fill?: boolean;\n    modelValue?: string;\n}\n\ninterface SegmentButtonEmits {\n    'update:modelValue': [value: string];\n    click: [value: SegmentType['value']];\n}\n\nconst props = withDefaults(defineProps<SegmentButtonProps>(), {\n    loadingStatus: false,\n    successStatus: false,\n    disabled: false,\n    size: 'default',\n    align: 'horizontal',\n});\n\nconst emit = defineEmits<SegmentButtonEmits>();\nconst selected = ref<string>(props.modelValue || '');\n\nconst setSelect = (segment: SegmentType) => {\n    if (props.disabled || segment.disabled) {\n        return;\n    }\n\n    selected.value = segment.value;\n    emit('update:modelValue', segment.value);\n    emit('click', segment.value);\n};\n\nwatch(() => props.modelValue, newValue => {\n    selected.value = newValue || '';\n});\n\nconst filteredSegments = ref<SegmentType[]>([...props.segments]);\n\nwatch(() => props.segments, newSegments => {\n    filteredSegments.value = [...newSegments];\n\n    if (!newSegments.some(segment => segment.value === selected.value)) {\n        selected.value = '';\n        emit('update:modelValue', '');\n    }\n}, { deep: true });\n</script>\n\n<template>\n    <div\n        :class=\"[\n            styles.segmentGroup,\n            styles[`segmentGroup--${align}`],\n            { [styles.fill]: fill },\n        ]\">\n        <button\n            v-for=\"(segment, index) in filteredSegments\"\n            :key=\"`${segment.value}-${index}`\"\n            :class=\"[\n                styles.button,\n                styles[`button--${color}`],\n                styles[`button__size_${size}`],\n                styles.fill,\n                {\n                    [styles[`button--selected`]]: segment.value === selected,\n                },\n            ]\"\n            :disabled=\"segment.disabled || props.disabled\"\n            @click=\"setSelect(segment)\">\n            <Icon\n                v-if=\"segment.icon\"\n                :name=\"segment.icon\" />\n            <span\n                v-if=\"segment.label\"\n                :class=\"styles.button__label\">\n                {{ segment.label }}\n            </span>\n        </button>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\nimport styles from './TextInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue?: string;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    maxHeight?: number;\n    error?: string;\n    multiline?: boolean;\n    autoGrow?: boolean;\n    counter?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    maxHeight: undefined,\n    error: '',\n    multiline: false,\n    autoGrow: false,\n    modelValue: '',\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [Props['modelValue']];\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\n\nconst autoGrow = () => {\n    if (props.autoGrow && textareaRef.value) {\n        textareaRef.value.style.height = '';\n\n        const newHeight = Math.min(textareaRef.value.scrollHeight, props.maxHeight || textareaRef.value.scrollHeight);\n\n        textareaRef.value.style.height = `${newHeight}px`;\n    }\n};\n\nconst handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n    emit('input', event);\n    emit('update:modelValue', target.value);\n\n    autoGrow();\n};\n\nonMounted(() => {\n    autoGrow();\n});\n</script>\n\n<template>\n    <div :class=\"styles.wrapper\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <template v-if=\"multiline\">\n            <textarea\n                :id=\"id\"\n                ref=\"textareaRef\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :style=\"maxHeight ? { maxHeight: `${maxHeight}px` } : undefined\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\" />\n        </template>\n        <template v-else>\n            <input\n                :id=\"id\"\n                type=\"text\"\n                :class=\"[\n                    styles.wrapper__field, {\n                        [styles['wrapper--error']]: error,\n                    },\n                ]\"\n                :maxlength=\"maxLength\"\n                :name=\"name\"\n                :placeholder=\"placeholder\"\n                :value=\"modelValue\"\n                @blur=\"emit('blur', $event)\"\n                @change=\"$emit('change', $event)\"\n                @focus=\"emit('focus', $event)\"\n                @input=\"handleInput\"\n                @paste=\"emit('paste', $event)\">\n        </template>\n\n        <div :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport styles from './NumberInput.module.scss';\n\nexport interface Props {\n    id: string;\n    name: string;\n    modelValue?: number;\n    label?: string;\n    placeholder?: string;\n    maxLength?: number;\n    error?: string;\n    errorStatus?: boolean;\n    counter?: boolean;\n    min?: number;\n    max?: number;\n    size?: 'default' | 'small';\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    label: '',\n    placeholder: '',\n    maxLength: undefined,\n    min: undefined,\n    max: undefined,\n    error: '',\n    modelValue: undefined,\n    size: 'default',\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [Props['modelValue']];\n    input: [event: Event];\n    change: [event: Event];\n    paste: [event: ClipboardEvent];\n    focus: [event: FocusEvent];\n    blur: [event: FocusEvent];\n}>();\n\nconst applyMinMax = (value: string): string => {\n    if (value === '') {\n        return value;\n    }\n\n    const numericValue = Number(value);\n\n    if (typeof props.min === 'number' && numericValue < props.min) {\n        return props.min?.toString();\n    } else if (typeof props.max === 'number' && numericValue > props.max) {\n        return props.max?.toString();\n    }\n\n    return numericValue.toString();\n};\n\nconst handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n    const sanitizedValue = applyMinMax(target.value);\n\n    target.value = sanitizedValue;\n\n    emit('input', event);\n    emit('update:modelValue', Number(sanitizedValue));\n};\n</script>\n\n<template>\n    <div :class=\"[styles.wrapper, styles[`wrapper__size_${size}`]]\">\n        <label\n            v-if=\"label\"\n            :class=\"styles.wrapper__label\"\n            :for=\"id\">\n            {{ label }}\n        </label>\n        <input\n            :id=\"id\"\n            type=\"number\"\n            :class=\"[\n                styles.wrapper__field, {\n                    [styles['wrapper--error']]: error || errorStatus,\n                },\n            ]\"\n            :max=\"max\"\n            :maxlength=\"maxLength\"\n            :min=\"min\"\n            :name=\"name\"\n            :placeholder=\"placeholder\"\n            :value=\"modelValue\"\n            @blur=\"emit('blur', $event)\"\n            @change=\"$emit('change', $event)\"\n            @focus=\"emit('focus', $event)\"\n            @input=\"handleInput\"\n            @paste=\"emit('paste', $event)\">\n\n        <div\n            v-if=\"counter || error\"\n            :class=\"styles.wrapper__bottom\">\n            <div\n                v-if=\"error\"\n                :class=\"styles.wrapper__errorMessage\">\n                {{ error }}\n            </div>\n            <div\n                v-if=\"counter\"\n                :class=\"styles.wrapper__counter\">\n                {{ modelValue?.toString().length || 0 }}\n            </div>\n        </div>\n    </div>\n</template>\n","<script lang=\"ts\" setup>\nimport styles from './Toggle.module.scss';\n\ninterface ToggleProps {\n    id: string;\n    name: string;\n    checked?: boolean;\n    disabled?: boolean;\n}\n\nconst props = withDefaults(defineProps<ToggleProps>(), {\n    checked: false,\n    disabled: false,\n});\n\nconst emit = defineEmits<{\n    click: [checked: boolean];\n}>();\n\nconst onClick = () => {\n    emit('click', !props.checked);\n};\n</script>\n\n<template>\n    <fieldset\n        :class=\"[\n            styles.wrapper,\n            {\n                [styles.wrapper_checked]: checked,\n                [styles.wrapper_disabled]: disabled,\n            },\n        ]\">\n        <input\n            :id=\"id\"\n            type=\"checkbox\"\n            :checked=\"checked\"\n            :class=\"styles.wrapper__input\"\n            :disabled=\"disabled\"\n            :name=\"name\"\n            @click=\"onClick\">\n        <label\n            :class=\"styles.wrapper__label\"\n            :for=\"id\" />\n    </fieldset>\n</template>\n","export function preventXSS (html = '') {\n    if (typeof(html) === 'string') {\n        return html.replace(/<\\/style>/gi, '')\n            .replace(/<(.*?) on(.*?)=['\"](.*?)>/gi, '')\n            .replace(/(<meta |<style|<\\/*script)(.*?)>/gi, '')\n            .replace(/(<([^>]+)>)/ig, '')\n            .replace(/<(.*?) (href|src)=\"j(.*)a(.*)v(.*)a(.*)s(.*)c(.*)r(.*)i(.*)p(.*)t(.*):(.*?)>/gi, '');\n    }\n    return html;\n}\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, type StyleValue } from 'vue';\nimport { Box, Icon } from '@/index';\nimport type { IconNames } from '@/types/generated/svgIconName';\nimport { preventXSS } from '@/utils/preventXSS';\nimport styles from './Tooltip.module.scss';\n\ntype TriangleAlignment = 'start' | 'center' | 'end' | 'top';\n\nexport interface TooltipProps {\n    id: string;\n    text: string;\n    staticPosition?: (\n        'top center'\n        | 'top left'\n        | 'top right'\n        | 'bottom center'\n        | 'bottom left'\n        | 'bottom right'\n        | 'right center'\n        | 'right top'\n        | 'right bottom'\n        | 'left center'\n        | 'left top'\n        | 'left bottom'\n    );\n    dynamicPosition?: boolean;\n    absolutePositionStatus?: boolean;\n    offsetX?: number;\n    offsetY?: number;\n    maxHeight?: number;\n    status?: boolean;\n    preventXss?: boolean;\n    iconName?: IconNames;\n    absoluteTriangleAlignment?: TriangleAlignment;\n    absoluteTrianglePosition?: 'top' | 'bottom';\n    absolutePosition?: StyleValue;\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n    offsetX: 4,\n    offsetY: 4,\n    staticPosition: 'top center',\n    maxHeight: 320,\n    status: true,\n    iconName: undefined,\n    absoluteTriangleAlignment: 'center',\n    absoluteTrianglePosition: 'top',\n    position: 'bottom',\n    align: 'end',\n    absolutePositionStatus: false,\n});\n\nconst tooltipIconRef = ref<HTMLElement | null>(null);\nconst dynamicPositionTriangle = ref('center');\nconst dynamicPositionAlignment = ref('bottom');\nconst dynamicPositionTrianglePosition = ref<TriangleAlignment>('center');\nconst dynamicPositionInitialized = ref(false);\nconst animationClass = ref('');\nconst mouseEnterWrapper = ref(false);\nconst mouseEnterIcon = ref(false);\nconst lastEnteredElement = ref('');\nconst displayClass = ref('d-n');\nconst scrollAreaRef = ref<Document | HTMLElement | ParentNode | null>(null);\nconst tooltipRootRef = ref<HTMLElement | null>(null);\nconst tooltipPopupRef = ref<HTMLElement | null>(null);\nconst position = computed(() => props.staticPosition.split(' ')[0]);\nconst alignment = computed(() => props.staticPosition.split(' ')[1]);\nconst topClass = computed(() => (props.iconName ? 'mt-1' : 'mt-0'));\nconst secureText = computed(() => (props.preventXss ? preventXSS(props.text) : props.text));\n\nconst trianglePosition = computed(() => {\n    if (props.absolutePositionStatus) {\n        return props.absoluteTrianglePosition;\n    }\n\n    if (props.dynamicPosition && dynamicPositionInitialized.value) {\n        return dynamicPositionAlignment.value === 'bottom' ? 'top' : 'bottom';\n    }\n\n    if (position.value === 'top') {\n        return 'bottom';\n    }\n\n    if (position.value === 'bottom') {\n        return 'top';\n    }\n\n    if (position.value === 'left') {\n        return 'right';\n    }\n\n    if (position.value === 'right') {\n        return 'left';\n    }\n\n    return 'bottom';\n});\n\nconst visibilityClass = computed(() => {\n    if (props.absolutePositionStatus) {\n        return '';\n    }\n\n    if (\n        (mouseEnterWrapper.value && mouseEnterIcon.value)\n        || (lastEnteredElement.value === 'icon' && mouseEnterWrapper.value)\n    ) {\n        return 'opa-1';\n    }\n\n    return 'opa-0';\n});\n\nconst triangleAlignment = computed<TriangleAlignment>(() => {\n    if (props.absolutePositionStatus) {\n        return props.absoluteTriangleAlignment;\n    }\n\n    if (props.dynamicPosition && dynamicPositionInitialized.value) {\n        if (dynamicPositionTriangle.value === 'center') {\n            return 'center';\n        }\n\n        if (dynamicPositionTriangle.value === 'end') {\n            return 'end';\n        }\n\n        if (dynamicPositionTriangle.value === 'start') {\n            return 'start';\n        }\n\n        return dynamicPositionTrianglePosition.value;\n    }\n\n    if (alignment.value === 'center') {\n        return 'center';\n    }\n\n    if (alignment.value === 'left' || alignment.value === 'top') {\n        return 'start';\n    }\n\n    if (alignment.value === 'right' || alignment.value === 'bottom') {\n        return 'end';\n    }\n\n    return 'center';\n});\n\nconst staticPositionClass = computed(() => {\n    if (props.absolutePositionStatus) {\n        return '';\n    }\n\n    if (props.dynamicPosition && dynamicPositionInitialized.value) {\n        return styles[`wrapper__box_${dynamicPositionAlignment.value}-${dynamicPositionTriangle.value}`];\n    }\n\n    return styles[`wrapper__box_${position.value}-${triangleAlignment.value}`];\n});\n\nconst offsetStyle = computed(() => {\n    if (props.offsetX === 0 && props.offsetY === 0) {\n        return {};\n    }\n\n    if (props.dynamicPosition) {\n        const marginDirection = dynamicPositionAlignment.value === 'bottom' ? 'top' : 'bottom';\n\n        return {\n            [`margin-${marginDirection}`]: `${props.offsetY}px`,\n        };\n    }\n\n    if (trianglePosition.value === 'top' || trianglePosition.value === 'bottom') {\n        return {\n            [`margin-${trianglePosition.value}`]: `${props.offsetY}px`,\n        };\n    }\n\n    return { [`margin-${trianglePosition.value}`]: `${props.offsetX}px` };\n});\n\nconst getDynamicPosition = (\n    target: HTMLElement | null | undefined,\n    parent: HTMLElement | null | undefined,\n    nested = false\n) => {\n    if (!target || !tooltipRootRef.value) {\n        return { left: false, right: false, top: false, bottom: false, center: false };\n    }\n\n    const customRect = { left: 0, right: 0, top: 0, bottom: 0, width: 0, height: 0 };\n    const tooltipElementHeight = tooltipRootRef.value.clientHeight;\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const targetHeight = target.clientHeight;\n    const targetWidth = target.clientWidth || 264;\n    const parentRectangle = parent?.getBoundingClientRect() || customRect;\n    const parentXOffset = nested ? parentRectangle?.right : parentRectangle?.left;\n    const parentYOffset = nested ? parentRectangle?.top : parentRectangle?.bottom;\n    const hasSpaceOnRight = (\n        (parentXOffset + parentRectangle.width) + targetWidth + props.offsetX\n    ) < windowWidth;\n    const hasSpaceOnLeft = ((parentXOffset + (parentRectangle.width / 2))\n        - (targetWidth + props.offsetX)) > 10;\n    const hasSpaceOnBottom = (parentYOffset + targetHeight) < (windowHeight - props.offsetY);\n    const hasSpaceOnTop = (parentYOffset - (targetHeight + tooltipElementHeight + props.offsetY)) > 0;\n    let hasSpaceOnCenter = false;\n\n    if (props.iconName) {\n        hasSpaceOnCenter = (parentRectangle.right + (targetWidth / 2) < windowWidth)\n            && (parentRectangle.left - ((targetWidth + props.offsetX) / 2) >= 10);\n    }\n\n    return {\n        left: hasSpaceOnLeft,\n        right: hasSpaceOnRight,\n        bottom: hasSpaceOnBottom,\n        top: hasSpaceOnTop,\n        center: hasSpaceOnCenter,\n    };\n};\n\nconst handleDynamicPosition = () => {\n    nextTick(() => {\n        dynamicPositionInitialized.value = true;\n\n        const { bottom, left, right, top, center } = getDynamicPosition(\n            tooltipPopupRef.value,\n            tooltipPopupRef.value?.parentNode as HTMLElement\n        );\n\n        if (center) {\n            dynamicPositionTriangle.value = 'center';\n            dynamicPositionAlignment.value = bottom && !top ? 'bottom' : 'top';\n\n            return;\n        }\n\n        // Means that every direction has an available space\n        if (bottom && left && right && top) {\n            dynamicPositionTriangle.value = 'center';\n            dynamicPositionAlignment.value = 'top';\n\n            return;\n        }\n\n        if (top && !bottom) {\n            if (right && left) {\n                dynamicPositionTriangle.value = 'center';\n                dynamicPositionAlignment.value = 'top';\n\n                return;\n            }\n\n            if (right && !left) {\n                dynamicPositionTriangle.value = 'start';\n                dynamicPositionAlignment.value = 'top';\n\n                return;\n            }\n\n            if (!right && left) {\n                dynamicPositionTriangle.value = 'end';\n                dynamicPositionAlignment.value = 'top';\n\n                return;\n            }\n        }\n\n        if (bottom && top) {\n            if (!right && left) {\n                dynamicPositionTriangle.value = 'end';\n                dynamicPositionAlignment.value = 'top';\n                dynamicPositionTrianglePosition.value = 'end';\n\n                return;\n            }\n\n            if (right && !left) {\n                dynamicPositionTriangle.value = 'start';\n                dynamicPositionAlignment.value = 'top';\n                dynamicPositionTrianglePosition.value = 'start';\n\n                return;\n            }\n        }\n\n        if (bottom && !top) {\n            if (right && left) {\n                dynamicPositionTriangle.value = 'center';\n                dynamicPositionAlignment.value = 'bottom';\n                dynamicPositionTrianglePosition.value = 'top';\n\n                return;\n            }\n\n            if (!right && left) {\n                dynamicPositionTriangle.value = 'end';\n                dynamicPositionAlignment.value = 'bottom';\n                dynamicPositionTrianglePosition.value = 'top';\n\n                return;\n            }\n\n            if (right && !left) {\n                dynamicPositionTriangle.value = 'start';\n                dynamicPositionAlignment.value = 'bottom';\n                dynamicPositionTrianglePosition.value = 'top';\n            }\n        }\n    });\n};\n\nconst isScrollable = (el: HTMLElement | ParentNode): boolean => {\n    if (!(el instanceof HTMLElement)) {\n        return false;\n    }\n\n    const hasScrollableContent = el.scrollHeight > el.clientHeight;\n    const overflowYStyle = window.getComputedStyle(el).overflowY;\n    const isOverflowScroll = ['auto', 'scroll'].includes(overflowYStyle);\n\n    return hasScrollableContent && isOverflowScroll;\n};\n\nconst getScrollableParent = (element: HTMLElement | ParentNode | null): HTMLElement | ParentNode | null => {\n    const isComment = element?.nodeType === Node.COMMENT_NODE;\n    const isDocument = element?.nodeType === Node.DOCUMENT_NODE;\n\n    if (!element || isComment || isDocument) {\n        return document;\n    }\n\n    if (isScrollable(element)) {\n        return element;\n    }\n\n    return getScrollableParent(element.parentNode);\n};\n\nconst killDynamicPositioning = () => {\n    scrollAreaRef.value?.removeEventListener('scroll', handleDynamicPosition);\n    window?.removeEventListener('resize', handleDynamicPosition);\n};\n\nconst initDynamicPositioning = () => {\n    nextTick(() => {\n        scrollAreaRef.value = getScrollableParent(tooltipRootRef.value);\n        scrollAreaRef.value?.addEventListener('scroll', handleDynamicPosition);\n        window?.addEventListener('resize', handleDynamicPosition);\n    });\n};\n\nconst onMouseEnterWrapper = () => {\n    lastEnteredElement.value = 'wrapper';\n    displayClass.value = 'd-b';\n\n    mouseEnterWrapper.value = true;\n};\n\nconst onMouseEnterIcon = () => {\n    lastEnteredElement.value = 'icon';\n    displayClass.value = 'd-b';\n\n    mouseEnterIcon.value = true;\n};\n\nconst onMouseLeaveIcon = () => {\n    mouseEnterIcon.value = false;\n};\n\nconst onMouseLeaveWrapper = () => {\n    lastEnteredElement.value = '';\n    mouseEnterWrapper.value = false;\n    mouseEnterIcon.value = false;\n};\n\nconst mouseLeave = () => {\n    onMouseLeaveWrapper();\n\n    if (props.dynamicPosition) {\n        if (dynamicPositionAlignment.value === 'bottom') {\n            animationClass.value = 'bottom-leave';\n        } else if (dynamicPositionAlignment.value === 'top') {\n            animationClass.value = 'top-leave';\n        }\n    } else if (position.value === 'top') {\n        animationClass.value = 'top-leave';\n    } else if (position.value === 'bottom') {\n        animationClass.value = 'bottom-leave';\n    } else if (position.value === 'left') {\n        animationClass.value = 'left-leave';\n    } else if (position.value === 'right') {\n        animationClass.value = 'right-leave';\n    }\n\n    setTimeout(() => {\n        animationClass.value = '';\n        displayClass.value = 'd-n';\n    }, props.absolutePositionStatus ? 0 : 250);\n};\n\nconst addAnimationClass = () => {\n    onMouseEnterWrapper();\n    handleDynamicPosition();\n\n    if (props.dynamicPosition) {\n        if (dynamicPositionAlignment.value === 'bottom') {\n            animationClass.value = 'top-entrance';\n        } else if (dynamicPositionAlignment.value === 'top') {\n            animationClass.value = 'bottom-entrance';\n        }\n    } else if (position.value === 'top') {\n        animationClass.value = 'bottom-entrance';\n    } else if (position.value === 'bottom') {\n        animationClass.value = 'top-entrance';\n    } else if (position.value === 'left') {\n        animationClass.value = 'right-entrance';\n    } else if (position.value === 'right') {\n        animationClass.value = 'left-entrance';\n    }\n\n    setTimeout(() => {\n        animationClass.value = '';\n    }, 250);\n};\n\nonMounted(() => {\n    if (props.dynamicPosition) {\n        initDynamicPositioning();\n    }\n});\n\nonBeforeUnmount(() => {\n    killDynamicPositioning();\n});\n</script>\n\n<template>\n    <div\n        :id=\"id\"\n        ref=\"tooltipRootRef\"\n        :class=\"styles.wrapper\"\n        @mouseenter=\"addAnimationClass\"\n        @mouseleave=\"mouseLeave\">\n        <Icon\n            v-if=\"iconName\"\n            ref=\"tooltipIconRef\"\n            :class=\"styles.wrapper__icon\"\n            :name=\"iconName\"\n            @mouseenter=\"onMouseEnterIcon\"\n            @mouseleave=\"onMouseLeaveIcon\" />\n        <div\n            v-else\n            :class=\"styles.wrapper__icon\"\n            @mouseenter=\"onMouseEnterIcon\"\n            @mouseleave=\"onMouseEnterIcon\">\n            <slot name=\"triggerElement\" />\n        </div>\n        <div\n            v-if=\"status\"\n            ref=\"tooltipPopupRef\"\n            :class=\"[styles.wrapper__box, staticPositionClass, visibilityClass, displayClass]\"\n            :style=\"absolutePosition\">\n            <Box\n                border-triangle\n                :border-triangle-align=\"triangleAlignment\"\n                :border-triangle-position=\"trianglePosition\"\n                :class=\"[styles['wrapper__box-content'], topClass, animationClass]\"\n                :style=\"offsetStyle\">\n                <div\n                    :class=\"styles.wrapper__text\"\n                    :style=\"{ maxHeight: `${maxHeight}px`, overflowY: 'auto' }\">\n                    <div v-html=\"secureText\" />\n                    <slot name=\"contentSlot\" />\n                </div>\n            </Box>\n        </div>\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport styles from './Box.module.scss';\n\nexport interface Props {\n    border?: string;\n    borderRadius?: string;\n    borderTriangle?: boolean;\n    borderTriangleAlign?: 'start' | 'center' | 'end';\n    borderTrianglePosition?: 'top' | 'right' | 'left' | 'bottom';\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n    borderRadius: 'bor-r-1',\n    borderTriangle: false,\n    borderTriangleAlign: 'center',\n    borderTrianglePosition: 'top',\n});\n\nconst emit = defineEmits<{\n    click: [];\n}>();\n\nconst trianglePosition = computed(\n    () => (props.borderTriangle ? styles[`box_${props.borderTrianglePosition}-${props.borderTriangleAlign}`] : '')\n);\n\nfunction trigger (): void {\n    emit('click');\n}\n</script>\n\n<template>\n    <div\n        :class=\"[styles.box, trianglePosition, border, borderRadius]\"\n        @click=\"trigger\">\n        <slot />\n    </div>\n</template>\n","<script setup lang=\"ts\">\nimport DefaultBox from './DefaultBox.vue';\nimport FlipBox from './FlipBox.vue';\n\nconst boxes = {\n    default: DefaultBox,\n    flip: FlipBox,\n} as const;\n\nwithDefaults(defineProps<{\n    type?: keyof typeof boxes;\n    borderTriangle?: boolean;\n    borderTriangleAlign?: 'start' | 'center' | 'end' | 'top';\n    borderTrianglePosition?: 'top' | 'right' | 'left' | 'bottom';\n    boxSpacing?: string;\n}>(), {\n    borderTriangle: false,\n    boxSpacing: '',\n    type: 'default',\n});\n</script>\n\n<template>\n    <component\n        :is=\"boxes[type]\"\n        :border-triangle=\"borderTriangle\"\n        :border-triangle-align=\"borderTriangleAlign\"\n        :border-triangle-position=\"borderTrianglePosition\"\n        :box-spacing=\"boxSpacing\">\n        <slot />\n        <slot name=\"front\" />\n        <slot name=\"reverse\" />\n    </component>\n</template>\n"],"names":["props","__props","emit","__emit","onClick","event","leftIcon","computed","clickOutside","el","binding","element","isFuzzyMatch","choiceValue","searchTerm","searchIndex","char","_a","fuzzySearch","choices","key","normalizedSearchTerm","choice","value","a","b","aValue","bValue","vClickOutside","dropdownRef","ref","menuRef","isOpen","selectedItem","searchQuery","errorMessage","menuPosition","filteredItems","reactive","allItems","calculateMenuPosition","top","left","width","viewportHeight","bottom","shouldOpenUp","toggleMenu","resetSettings","closeMenu","selectItem","item","addItem","query","error","newItem","onSearch","results","onFocusSearch","menuStyle","onMounted","defaultItem","selectedValue","watch","newItems","iconSize","IconName","selected","setSelect","segment","newValue","filteredSegments","newSegments","textareaRef","autoGrow","newHeight","handleInput","target","applyMinMax","numericValue","_b","sanitizedValue","preventXSS","html","tooltipIconRef","dynamicPositionTriangle","dynamicPositionAlignment","dynamicPositionTrianglePosition","dynamicPositionInitialized","animationClass","mouseEnterWrapper","mouseEnterIcon","lastEnteredElement","displayClass","scrollAreaRef","tooltipRootRef","tooltipPopupRef","position","alignment","topClass","secureText","trianglePosition","visibilityClass","triangleAlignment","staticPositionClass","styles","offsetStyle","getDynamicPosition","parent","nested","customRect","tooltipElementHeight","windowWidth","windowHeight","targetHeight","targetWidth","parentRectangle","parentXOffset","parentYOffset","hasSpaceOnRight","hasSpaceOnLeft","hasSpaceOnBottom","hasSpaceOnTop","hasSpaceOnCenter","handleDynamicPosition","nextTick","right","center","isScrollable","hasScrollableContent","overflowYStyle","isOverflowScroll","getScrollableParent","isComment","isDocument","killDynamicPositioning","initDynamicPositioning","onMouseEnterWrapper","onMouseEnterIcon","onMouseLeaveIcon","onMouseLeaveWrapper","mouseLeave","addAnimationClass","onBeforeUnmount","trigger","boxes","DefaultBox","FlipBox"],"mappings":"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"}

package/dist/icons.svg

@@ -1,4 +1,14 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none !important">
+  <symbol width="24" height="25" viewBox="0 0 24 25" id="icon-info-box-error">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M12 22.2022C17.5228 22.2022 22 17.725 22 12.2021C22 6.6793 17.5228 2.20215 12 2.20215C6.47715 2.20215 2 6.6793 2 12.2021C2 17.725 6.47715 22.2022 12 22.2022ZM24 12.2021C24 18.8296 18.6274 24.2022 12 24.2022C5.37258 24.2022 0 18.8296 0 12.2021C0 5.57473 5.37258 0.202148 12 0.202148C18.6274 0.202148 24 5.57473 24 12.2021Z" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M15.5355 8.66661C15.9261 9.05713 15.9261 9.6903 15.5355 10.0808L13.4142 12.2021L15.5355 14.3235C15.9261 14.714 15.9261 15.3472 15.5355 15.7377C15.145 16.1282 14.5118 16.1282 14.1213 15.7377L12 13.6164L9.87868 15.7377C9.48815 16.1282 8.85499 16.1282 8.46447 15.7377C8.07394 15.3472 8.07394 14.714 8.46447 14.3235L10.5858 12.2021L8.46447 10.0808C8.07394 9.6903 8.07394 9.05713 8.46447 8.66661C8.85499 8.27608 9.48816 8.27608 9.87868 8.66661L12 10.7879L14.1213 8.66661C14.5118 8.27608 15.145 8.27608 15.5355 8.66661Z" />
+  </symbol>
+  <symbol width="16" height="17" viewBox="0 0 16 17" id="icon-tooltip-info">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M16 8.20215C16 12.6204 12.4183 16.2021 8 16.2021C3.58172 16.2021 0 12.6204 0 8.20215C0 3.78387 3.58172 0.202148 8 0.202148C12.4183 0.202148 16 3.78387 16 8.20215ZM8 5.20215C8.55228 5.20215 9 4.75443 9 4.20215C9 3.64986 8.55228 3.20215 8 3.20215C7.44772 3.20215 7 3.64986 7 4.20215C7 4.75443 7.44772 5.20215 8 5.20215ZM7 7.20215C7 6.64986 7.44772 6.20215 8 6.20215C8.55228 6.20215 9 6.64986 9 7.20215V12.2021C9 12.7544 8.55228 13.2021 8 13.2021C7.44772 13.2021 7 12.7544 7 12.2021V7.20215Z" />
+  </symbol>
   <symbol viewBox="0 0 24 24" data-token-name="filled-info-circle" id="filled-info-circle">
     <path fill-rule="evenodd" clip-rule="evenodd"
       d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zm-10 0a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0v-4zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z">

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import { CreateComponentPublicInstanceWithMixins } from 'vue';
 import { DefineComponent } from 'vue';
 import { GlobalComponents } from 'vue';
 import { GlobalDirectives } from 'vue';
-import { IconNames } from '../../types/generated/svgIconName';
 import { PublicProps } from 'vue';
 import { StyleValue } from 'vue';
 import { VNodeProps } from 'vue';
@@ -238,6 +237,13 @@ export declare const Icon: DefineComponent<IconProps, {}, {}, {}, {}, ComponentO
 size: 16 | 24;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, SVGSVGElement>;
 
+/**
+ * Automatically generated icon types.
+ *
+ * NOTE: This file was auto-generated from 'icons.svg'
+ */
+declare type IconNames = 'icon-tooltip-info' | 'filled-info-circle' | 'line-caution-triangle' | 'filled-error-box' | 'filled-info-circle' | 'line-check-natural' | 'loading-circle' | 'icon-smart';
+
 declare interface IconProps {
     name: IconNames;
     size?: 16 | 24;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/ab-components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "files": [
     "dist"
@@ -17,7 +17,7 @@
       "import": "./dist/ab-components.es.js"
     },
     "./style.css": "./dist/ab-components.css",
-    "./icons": "./dist/icons.svg"
+    "./icons.svg": "./dist/icons.svg"
   },
   "types": "./dist/index.d.ts",
   "scripts": {