@megafon/ui-core 9.0.0-alpha.2 → 9.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/Accordion/Accordion.css +1 -1
- package/dist/es/components/Accordion/Accordion.d.ts +3 -1
- package/dist/es/components/Accordion/Accordion.js +3 -3
- package/dist/es/components/Avatar/Avatar.css +1 -1
- package/dist/es/components/Avatar/Avatar.d.ts +1 -1
- package/dist/es/components/Badges/CounterBadge/CounterBadge.js +1 -2
- package/dist/es/components/Badges/InfoBadge/InfoBadge.css +1 -0
- package/dist/es/components/Badges/InfoBadge/InfoBadge.d.ts +52 -0
- package/dist/es/components/Badges/InfoBadge/InfoBadge.js +226 -0
- package/dist/es/components/Badges/PriceBadge/PriceBadge.d.ts +1 -0
- package/dist/es/components/Badges/PriceBadge/PriceBadge.js +53 -13
- package/dist/es/components/Badges/PromoBadge/PromoBadge.css +1 -1
- package/dist/es/components/Badges/PromoBadge/PromoBadge.d.ts +1 -11
- package/dist/es/components/Badges/PromoBadge/PromoBadge.js +6 -16
- package/dist/es/components/Badges/StatusBadge/StatusBadge.css +1 -1
- package/dist/es/components/Badges/StatusBadge/StatusBadge.js +16 -7
- package/dist/es/components/Badges/TimerBadge/TimerBadge.d.ts +2 -0
- package/dist/es/components/Badges/TimerBadge/TimerBadge.js +6 -2
- package/dist/es/components/Buttons/Button/Button.css +1 -0
- package/dist/es/components/{Button → Buttons/Button}/Button.d.ts +5 -0
- package/dist/es/components/{Button → Buttons/Button}/Button.js +38 -12
- package/dist/es/components/Buttons/ButtonClose/ButtonClose.css +1 -0
- package/dist/es/components/Buttons/ButtonClose/ButtonClose.d.ts +34 -0
- package/dist/es/components/Buttons/ButtonClose/ButtonClose.js +69 -0
- package/dist/es/components/Calendar/components/_Month/Month.js +2 -6
- package/dist/es/components/Carousel/Carousel.css +1 -1
- package/dist/es/components/Carousel/Carousel.d.ts +9 -0
- package/dist/es/components/Carousel/Carousel.js +14 -2
- package/dist/es/components/Checkbox/Checkbox.css +1 -1
- package/dist/es/components/Checkbox/Checkbox.js +3 -2
- package/dist/es/components/Chips/Chips/Chip.css +1 -1
- package/dist/es/components/Chips/Chips/Chip.d.ts +9 -1
- package/dist/es/components/Chips/Chips/Chip.js +12 -7
- package/dist/es/components/Chips/Chips/Chips.d.ts +16 -1
- package/dist/es/components/Chips/Chips/Chips.js +28 -6
- package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.css +1 -1
- package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.d.ts +12 -4
- package/dist/es/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.js +55 -47
- package/dist/es/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.d.ts +10 -1
- package/dist/es/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.js +12 -7
- package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.css +1 -1
- package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.d.ts +7 -0
- package/dist/es/components/Chips/ChipsSuggest/ChipSuggest.js +7 -0
- package/dist/es/components/Chips/ChipsSuggest/ChipsSuggest.d.ts +4 -2
- package/dist/es/components/Chips/ChipsSuggest/ChipsSuggest.js +3 -0
- package/dist/es/components/ContentArea/ContentArea.css +1 -1
- package/dist/es/components/ContentArea/ContentArea.d.ts +3 -2
- package/dist/es/components/ContentArea/ContentArea.js +5 -0
- package/dist/es/components/ContentView/ContentView.css +1 -1
- package/dist/es/components/ContentView/ContentView.d.ts +15 -4
- package/dist/es/components/ContentView/ContentView.js +17 -4
- package/dist/es/components/Counter/Counter.css +1 -1
- package/dist/es/components/Counter/Counter.d.ts +2 -0
- package/dist/es/components/Counter/Counter.js +6 -3
- package/dist/es/components/Dropdown/Dropdown.css +1 -1
- package/dist/es/components/Dropdown/Dropdown.d.ts +6 -2
- package/dist/es/components/Dropdown/Dropdown.js +31 -22
- package/dist/es/components/ErrorLoad/ErrorLoad.css +1 -1
- package/dist/es/components/ErrorLoad/ErrorLoad.d.ts +1 -1
- package/dist/es/components/ErrorLoad/ErrorLoad.js +2 -4
- package/dist/es/components/Link/Link.css +1 -0
- package/dist/es/components/Link/Link.d.ts +1 -0
- package/dist/es/components/Link/Link.js +4 -2
- package/dist/es/components/ListData/ListData.css +1 -1
- package/dist/es/components/ListData/ListData.d.ts +9 -1
- package/dist/es/components/ListData/ListData.js +20 -14
- package/dist/es/components/ListData/components/ListDataSortable.css +1 -1
- package/dist/es/components/ListData/components/ListDataSortable.js +1 -3
- package/dist/es/components/Modal/Modal.css +1 -1
- package/dist/es/components/Modal/Modal.d.ts +23 -9
- package/dist/es/components/Modal/Modal.js +34 -23
- package/dist/es/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/es/components/Modal/_ModalContent/ModalContent.js +37 -39
- package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.css +1 -1
- package/dist/es/components/Modal/_ModalMobile/ModalMobile.css +1 -0
- package/dist/es/components/Modal/{_ModalMobileBottom/ModalMobileBottom.d.ts → _ModalMobile/ModalMobile.d.ts} +6 -5
- package/dist/es/components/Modal/{_ModalMobileBottom/ModalMobileBottom.js → _ModalMobile/ModalMobile.js} +35 -26
- package/dist/es/components/Modal/mocks.js +0 -1
- package/dist/es/components/Modal/types.d.ts +1 -2
- package/dist/es/components/NavArrow/NavArrow.css +1 -1
- package/dist/es/components/NavArrow/NavArrow.js +4 -4
- package/dist/es/components/Notification/Notification.css +1 -1
- package/dist/es/components/Notification/Notification.d.ts +0 -11
- package/dist/es/components/Notification/Notification.js +19 -38
- package/dist/es/components/Pagination/Pagination.css +1 -1
- package/dist/es/components/Pagination/Pagination.d.ts +1 -3
- package/dist/es/components/Pagination/Pagination.js +4 -13
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.css +1 -1
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.d.ts +1 -2
- package/dist/es/components/Pagination/components/PaginationButton/PaginationButton.js +0 -2
- package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.css +1 -1
- package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts +1 -3
- package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.js +5 -16
- package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.d.ts +1 -2
- package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.js +4 -4
- package/dist/es/components/Pagination/types.d.ts +1 -11
- package/dist/es/components/Pagination/types.js +1 -4
- package/dist/es/components/Pagination/usePagination.d.ts +2 -2
- package/dist/es/components/Pagination/usePagination.js +11 -29
- package/dist/es/components/Parameter/Parameter.d.ts +0 -3
- package/dist/es/components/Parameter/Parameter.js +3 -4
- package/dist/es/components/RadioButton/RadioButton.css +1 -1
- package/dist/es/components/Row/Row.css +1 -1
- package/dist/es/components/Row/Row.js +6 -4
- package/dist/es/components/ScrollBar/ScrollBar.d.ts +2 -0
- package/dist/es/components/ScrollBar/ScrollBar.js +6 -1
- package/dist/es/components/Search/Search.css +1 -1
- package/dist/es/components/Search/Search.d.ts +2 -2
- package/dist/es/components/Search/Search.js +72 -68
- package/dist/es/components/Select/Select.css +1 -1
- package/dist/es/components/Select/Select.d.ts +11 -20
- package/dist/es/components/Select/Select.js +40 -88
- package/dist/es/components/Select/reducer/selectReducer.js +1 -1
- package/dist/es/components/Selector/Selector.css +1 -1
- package/dist/es/components/Sliders/Slider/Slider.css +1 -1
- package/dist/es/components/Sliders/Slider/Slider.d.ts +12 -0
- package/dist/es/components/Sliders/Slider/Slider.js +26 -7
- package/dist/es/components/Sliders/SliderRange/SliderRange.css +1 -1
- package/dist/es/components/Sliders/SliderRange/SliderRange.d.ts +3 -0
- package/dist/es/components/Sliders/SliderRange/SliderRange.js +4 -1
- package/dist/es/components/Sliders/SliderRatio/SliderRatio.css +1 -1
- package/dist/es/components/Sliders/components/SliderScale/SliderScale.css +1 -1
- package/dist/es/components/Sliders/components/SliderScale/SliderScale.d.ts +6 -0
- package/dist/es/components/Sliders/components/SliderScale/SliderScale.js +8 -1
- package/dist/es/components/Sliders/helpers.d.ts +1 -0
- package/dist/es/components/Sliders/helpers.js +7 -0
- package/dist/es/components/Snackbar/Snackbar.css +1 -1
- package/dist/es/components/Snackbar/Snackbar.js +20 -21
- package/dist/es/components/Stepper/Stepper.css +1 -0
- package/dist/es/components/Stepper/Stepper.d.ts +52 -0
- package/dist/es/components/Stepper/Stepper.js +159 -0
- package/dist/es/components/Stepper/StepperItem.css +1 -0
- package/dist/es/components/Stepper/StepperItem.d.ts +57 -0
- package/dist/es/components/Stepper/StepperItem.js +101 -0
- package/dist/es/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/es/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/es/components/Stepper/img/separator.png +0 -0
- package/dist/es/components/Switcher/Switcher.css +1 -1
- package/dist/es/components/Switcher/Switcher.d.ts +5 -0
- package/dist/es/components/Switcher/Switcher.js +22 -10
- package/dist/es/components/Tabs/Tabs.css +1 -1
- package/dist/es/components/Tabs/Tabs.d.ts +2 -0
- package/dist/es/components/Tabs/Tabs.js +64 -55
- package/dist/es/components/TextField/TextField.css +1 -1
- package/dist/es/components/TextField/TextField.d.ts +2 -2
- package/dist/es/components/TextField/TextField.js +16 -9
- package/dist/es/components/Tooltip/Tooltip.css +1 -1
- package/dist/es/components/Tooltip/Tooltip.d.ts +9 -0
- package/dist/es/components/Tooltip/Tooltip.js +22 -17
- package/dist/es/components/UploadForm/UploadField/UploadField.css +1 -1
- package/dist/es/components/UploadForm/UploadField/UploadField.d.ts +4 -1
- package/dist/es/components/UploadForm/UploadField/UploadField.js +8 -2
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +3 -1
- package/dist/es/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +30 -5
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.d.ts +3 -1
- package/dist/es/components/UploadForm/UploadFileItem/UploadFileItem.js +9 -6
- package/dist/es/components/UploadForm/UploadFileItem/components/_UploadFileItemIcon/UploadFileItemIcon.js +6 -0
- package/dist/es/hooks/useResolution.js +15 -23
- package/dist/es/index.d.ts +6 -3
- package/dist/es/index.js +6 -3
- package/dist/lib/components/Accordion/Accordion.css +1 -1
- package/dist/lib/components/Accordion/Accordion.d.ts +3 -1
- package/dist/lib/components/Accordion/Accordion.js +3 -3
- package/dist/lib/components/Avatar/Avatar.css +1 -1
- package/dist/lib/components/Avatar/Avatar.d.ts +1 -1
- package/dist/lib/components/Badges/CounterBadge/CounterBadge.js +1 -2
- package/dist/lib/components/Badges/InfoBadge/InfoBadge.css +1 -0
- package/dist/lib/components/Badges/InfoBadge/InfoBadge.d.ts +52 -0
- package/dist/lib/components/Badges/InfoBadge/InfoBadge.js +235 -0
- package/dist/lib/components/Badges/PriceBadge/PriceBadge.d.ts +1 -0
- package/dist/lib/components/Badges/PriceBadge/PriceBadge.js +54 -13
- package/dist/lib/components/Badges/PromoBadge/PromoBadge.css +1 -1
- package/dist/lib/components/Badges/PromoBadge/PromoBadge.d.ts +1 -11
- package/dist/lib/components/Badges/PromoBadge/PromoBadge.js +7 -17
- package/dist/lib/components/Badges/StatusBadge/StatusBadge.css +1 -1
- package/dist/lib/components/Badges/StatusBadge/StatusBadge.js +16 -7
- package/dist/lib/components/Badges/TimerBadge/TimerBadge.d.ts +2 -0
- package/dist/lib/components/Badges/TimerBadge/TimerBadge.js +6 -2
- package/dist/lib/components/Buttons/Button/Button.css +1 -0
- package/dist/lib/components/{Button → Buttons/Button}/Button.d.ts +5 -0
- package/dist/lib/components/{Button → Buttons/Button}/Button.js +38 -12
- package/dist/lib/components/Buttons/ButtonClose/ButtonClose.css +1 -0
- package/dist/lib/components/Buttons/ButtonClose/ButtonClose.d.ts +34 -0
- package/dist/lib/components/Buttons/ButtonClose/ButtonClose.js +78 -0
- package/dist/lib/components/Calendar/components/_Month/Month.js +2 -6
- package/dist/lib/components/Carousel/Carousel.css +1 -1
- package/dist/lib/components/Carousel/Carousel.d.ts +9 -0
- package/dist/lib/components/Carousel/Carousel.js +15 -3
- package/dist/lib/components/Checkbox/Checkbox.css +1 -1
- package/dist/lib/components/Checkbox/Checkbox.js +3 -2
- package/dist/lib/components/Chips/Chips/Chip.css +1 -1
- package/dist/lib/components/Chips/Chips/Chip.d.ts +9 -1
- package/dist/lib/components/Chips/Chips/Chip.js +13 -8
- package/dist/lib/components/Chips/Chips/Chips.d.ts +16 -1
- package/dist/lib/components/Chips/Chips/Chips.js +28 -6
- package/dist/lib/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.css +1 -1
- package/dist/lib/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.d.ts +12 -4
- package/dist/lib/components/Chips/Chips/components/ChipsDropdown/ChipsDropdown.js +55 -47
- package/dist/lib/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.d.ts +10 -1
- package/dist/lib/components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel.js +11 -6
- package/dist/lib/components/Chips/ChipsSuggest/ChipSuggest.css +1 -1
- package/dist/lib/components/Chips/ChipsSuggest/ChipSuggest.d.ts +7 -0
- package/dist/lib/components/Chips/ChipsSuggest/ChipSuggest.js +8 -1
- package/dist/lib/components/Chips/ChipsSuggest/ChipsSuggest.d.ts +4 -2
- package/dist/lib/components/Chips/ChipsSuggest/ChipsSuggest.js +3 -0
- package/dist/lib/components/ContentArea/ContentArea.css +1 -1
- package/dist/lib/components/ContentArea/ContentArea.d.ts +3 -2
- package/dist/lib/components/ContentArea/ContentArea.js +5 -0
- package/dist/lib/components/ContentView/ContentView.css +1 -1
- package/dist/lib/components/ContentView/ContentView.d.ts +15 -4
- package/dist/lib/components/ContentView/ContentView.js +17 -4
- package/dist/lib/components/Counter/Counter.css +1 -1
- package/dist/lib/components/Counter/Counter.d.ts +2 -0
- package/dist/lib/components/Counter/Counter.js +6 -3
- package/dist/lib/components/Dropdown/Dropdown.css +1 -1
- package/dist/lib/components/Dropdown/Dropdown.d.ts +6 -2
- package/dist/lib/components/Dropdown/Dropdown.js +31 -22
- package/dist/lib/components/ErrorLoad/ErrorLoad.css +1 -1
- package/dist/lib/components/ErrorLoad/ErrorLoad.d.ts +1 -1
- package/dist/lib/components/ErrorLoad/ErrorLoad.js +2 -4
- package/dist/lib/components/Link/Link.css +1 -0
- package/dist/lib/components/Link/Link.d.ts +1 -0
- package/dist/lib/components/Link/Link.js +2 -1
- package/dist/lib/components/ListData/ListData.css +1 -1
- package/dist/lib/components/ListData/ListData.d.ts +9 -1
- package/dist/lib/components/ListData/ListData.js +20 -14
- package/dist/lib/components/ListData/components/ListDataSortable.css +1 -1
- package/dist/lib/components/ListData/components/ListDataSortable.js +1 -3
- package/dist/lib/components/Modal/Modal.css +1 -1
- package/dist/lib/components/Modal/Modal.d.ts +23 -9
- package/dist/lib/components/Modal/Modal.js +35 -24
- package/dist/lib/components/Modal/_ModalContent/ModalContent.css +1 -1
- package/dist/lib/components/Modal/_ModalContent/ModalContent.js +37 -39
- package/dist/lib/components/Modal/_ModalDesktop/ModalDesktop.css +1 -1
- package/dist/lib/components/Modal/_ModalMobile/ModalMobile.css +1 -0
- package/dist/lib/components/Modal/{_ModalMobileBottom/ModalMobileBottom.d.ts → _ModalMobile/ModalMobile.d.ts} +6 -5
- package/dist/lib/components/Modal/{_ModalMobileBottom/ModalMobileBottom.js → _ModalMobile/ModalMobile.js} +34 -25
- package/dist/lib/components/Modal/mocks.js +0 -1
- package/dist/lib/components/Modal/types.d.ts +1 -2
- package/dist/lib/components/NavArrow/NavArrow.css +1 -1
- package/dist/lib/components/NavArrow/NavArrow.js +4 -4
- package/dist/lib/components/Notification/Notification.css +1 -1
- package/dist/lib/components/Notification/Notification.d.ts +0 -11
- package/dist/lib/components/Notification/Notification.js +18 -37
- package/dist/lib/components/Pagination/Pagination.css +1 -1
- package/dist/lib/components/Pagination/Pagination.d.ts +1 -3
- package/dist/lib/components/Pagination/Pagination.js +4 -13
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css +1 -1
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.d.ts +1 -2
- package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.js +0 -2
- package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.css +1 -1
- package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts +1 -3
- package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.js +5 -16
- package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.d.ts +1 -2
- package/dist/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.js +4 -4
- package/dist/lib/components/Pagination/types.d.ts +1 -11
- package/dist/lib/components/Pagination/types.js +1 -6
- package/dist/lib/components/Pagination/usePagination.d.ts +2 -2
- package/dist/lib/components/Pagination/usePagination.js +11 -29
- package/dist/lib/components/Parameter/Parameter.d.ts +0 -3
- package/dist/lib/components/Parameter/Parameter.js +3 -4
- package/dist/lib/components/RadioButton/RadioButton.css +1 -1
- package/dist/lib/components/Row/Row.css +1 -1
- package/dist/lib/components/Row/Row.js +5 -3
- package/dist/lib/components/ScrollBar/ScrollBar.d.ts +2 -0
- package/dist/lib/components/ScrollBar/ScrollBar.js +6 -1
- package/dist/lib/components/Search/Search.css +1 -1
- package/dist/lib/components/Search/Search.d.ts +2 -2
- package/dist/lib/components/Search/Search.js +72 -68
- package/dist/lib/components/Select/Select.css +1 -1
- package/dist/lib/components/Select/Select.d.ts +11 -20
- package/dist/lib/components/Select/Select.js +40 -88
- package/dist/lib/components/Select/reducer/selectReducer.js +1 -1
- package/dist/lib/components/Selector/Selector.css +1 -1
- package/dist/lib/components/Sliders/Slider/Slider.css +1 -1
- package/dist/lib/components/Sliders/Slider/Slider.d.ts +12 -0
- package/dist/lib/components/Sliders/Slider/Slider.js +25 -6
- package/dist/lib/components/Sliders/SliderRange/SliderRange.css +1 -1
- package/dist/lib/components/Sliders/SliderRange/SliderRange.d.ts +3 -0
- package/dist/lib/components/Sliders/SliderRange/SliderRange.js +4 -1
- package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css +1 -1
- package/dist/lib/components/Sliders/components/SliderScale/SliderScale.css +1 -1
- package/dist/lib/components/Sliders/components/SliderScale/SliderScale.d.ts +6 -0
- package/dist/lib/components/Sliders/components/SliderScale/SliderScale.js +9 -2
- package/dist/lib/components/Sliders/helpers.d.ts +1 -0
- package/dist/lib/components/Sliders/helpers.js +8 -1
- package/dist/lib/components/Snackbar/Snackbar.css +1 -1
- package/dist/lib/components/Snackbar/Snackbar.js +20 -21
- package/dist/lib/components/Stepper/Stepper.css +1 -0
- package/dist/lib/components/Stepper/Stepper.d.ts +52 -0
- package/dist/lib/components/Stepper/Stepper.js +168 -0
- package/dist/lib/components/Stepper/StepperItem.css +1 -0
- package/dist/lib/components/Stepper/StepperItem.d.ts +57 -0
- package/dist/lib/components/Stepper/StepperItem.js +110 -0
- package/dist/lib/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/lib/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/lib/components/Stepper/img/separator.png +0 -0
- package/dist/lib/components/Switcher/Switcher.css +1 -1
- package/dist/lib/components/Switcher/Switcher.d.ts +5 -0
- package/dist/lib/components/Switcher/Switcher.js +21 -9
- package/dist/lib/components/Tabs/Tabs.css +1 -1
- package/dist/lib/components/Tabs/Tabs.d.ts +2 -0
- package/dist/lib/components/Tabs/Tabs.js +64 -55
- package/dist/lib/components/TextField/TextField.css +1 -1
- package/dist/lib/components/TextField/TextField.d.ts +2 -2
- package/dist/lib/components/TextField/TextField.js +16 -9
- package/dist/lib/components/Tooltip/Tooltip.css +1 -1
- package/dist/lib/components/Tooltip/Tooltip.d.ts +9 -0
- package/dist/lib/components/Tooltip/Tooltip.js +23 -18
- package/dist/lib/components/UploadForm/UploadField/UploadField.css +1 -1
- package/dist/lib/components/UploadForm/UploadField/UploadField.d.ts +4 -1
- package/dist/lib/components/UploadForm/UploadField/UploadField.js +8 -2
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.css +1 -1
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.d.ts +3 -1
- package/dist/lib/components/UploadForm/UploadField/components/_UploadFieldDropArea/UploadFieldDropArea.js +30 -5
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.css +1 -1
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.d.ts +3 -1
- package/dist/lib/components/UploadForm/UploadFileItem/UploadFileItem.js +9 -6
- package/dist/lib/components/UploadForm/UploadFileItem/components/_UploadFileItemIcon/UploadFileItemIcon.js +6 -0
- package/dist/lib/hooks/useResolution.js +15 -23
- package/dist/lib/index.d.ts +6 -3
- package/dist/lib/index.js +32 -11
- package/package.json +5 -5
- package/styles/base.scss +54 -0
- package/styles/colors.css +14 -0
- package/dist/es/components/Button/Button.css +0 -1
- package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.css +0 -1
- package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.css +0 -1
- package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.d.ts +0 -8
- package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.js +0 -56
- package/dist/lib/components/Button/Button.css +0 -1
- package/dist/lib/components/Modal/_ModalMobileBottom/ModalMobileBottom.css +0 -1
- package/dist/lib/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.css +0 -1
- package/dist/lib/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.d.ts +0 -8
- package/dist/lib/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.js +0 -65
|
@@ -21,7 +21,9 @@ var TimerIcon = function TimerIcon(props) {
|
|
|
21
21
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
22
22
|
fillRule: "evenodd",
|
|
23
23
|
clipRule: "evenodd",
|
|
24
|
-
d: "M10
|
|
24
|
+
d: "M10.006 3.998c3.857 0 7 3.127 7 6.985 0 3.857-3.143 6.984-7 6.984s-7-3.127-7.001-6.984c0-3.858 3.143-6.985 7-6.985zM10 7.004a.5.5 0 00-.5.5v3.501H7a.5.5 0 000 1h3a.5.5 0 00.5-.5v-4a.5.5 0 00-.5-.5z"
|
|
25
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
26
|
+
d: "M14.594 3.124a.514.514 0 01.715 0l2.15 2.105a.487.487 0 010 .7.515.515 0 01-.714 0l-2.15-2.105a.487.487 0 010-.7zM4.92 3.109a.515.515 0 01.716.005.487.487 0 01-.005.698l-2.165 2.09a.514.514 0 01-.715-.004.487.487 0 01.005-.7l2.164-2.09z"
|
|
25
27
|
}));
|
|
26
28
|
};
|
|
27
29
|
var SECONDS_IN_HOUR = 3600;
|
|
@@ -42,6 +44,8 @@ var TimerBadge = function TimerBadge(_ref) {
|
|
|
42
44
|
countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
|
|
43
45
|
_ref$expirationDateTe = _ref.expirationDateText,
|
|
44
46
|
expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
|
|
47
|
+
_ref$countdownEndText = _ref.countdownEndText,
|
|
48
|
+
countdownEndText = _ref$countdownEndText === void 0 ? 'Время действия истекло' : _ref$countdownEndText,
|
|
45
49
|
className = _ref.className,
|
|
46
50
|
dataAttrs = _ref.dataAttrs;
|
|
47
51
|
var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
|
|
@@ -83,7 +87,7 @@ var TimerBadge = function TimerBadge(_ref) {
|
|
|
83
87
|
className: cn('icon')
|
|
84
88
|
})), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
|
|
85
89
|
className: cn('text')
|
|
86
|
-
}), isTimeExpired ?
|
|
90
|
+
}), isTimeExpired ? countdownEndText : /*#__PURE__*/React.createElement(_Timer["default"], {
|
|
87
91
|
additionalText: hasPrefix ? additionalText : undefined,
|
|
88
92
|
showCountdown: showCountdown,
|
|
89
93
|
expirationDate: expirationDate,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid transparent;border-radius:30px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stcWhite);cursor:pointer;display:inline-block;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;outline:none;overflow:hidden;padding:0 31px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-button:focus{outline:none}.mfui-9-button svg{display:block;-webkit-transition:fill .3s;transition:fill .3s}.mfui-9-button_size-all_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-all_extra-small .mfui-9-button__icon,.mfui-9-button_size-all_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-all_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-all_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-all_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-all_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-all_small .mfui-9-button__icon,.mfui-9-button_size-all_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-all_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-all_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-all_medium .mfui-9-button__icon,.mfui-9-button_size-all_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-all_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-all_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-all_large .mfui-9-button__icon,.mfui-9-button_size-all_large .mfui-9-button__icon-arrow,.mfui-9-button_size-all_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-all_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-all_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-all_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-all_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-all_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-all_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-all_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-all_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}@media screen and (min-width:1024px){.mfui-9-button_size-desktop_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-desktop_extra-small .mfui-9-button__icon,.mfui-9-button_size-desktop_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-desktop_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-desktop_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-desktop_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-desktop_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-desktop_small .mfui-9-button__icon,.mfui-9-button_size-desktop_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-desktop_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-desktop_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-desktop_medium .mfui-9-button__icon,.mfui-9-button_size-desktop_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-desktop_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-desktop_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-desktop_large .mfui-9-button__icon,.mfui-9-button_size-desktop_large .mfui-9-button__icon-arrow,.mfui-9-button_size-desktop_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-desktop_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-desktop_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-desktop_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-desktop_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-desktop_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-desktop_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-desktop_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-desktop_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}@media screen and (min-width:1280px){.mfui-9-button_size-wide_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-wide_extra-small .mfui-9-button__icon,.mfui-9-button_size-wide_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-wide_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-wide_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-wide_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-wide_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-wide_small .mfui-9-button__icon,.mfui-9-button_size-wide_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-wide_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-wide_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-wide_medium .mfui-9-button__icon,.mfui-9-button_size-wide_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-wide_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-wide_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-wide_large .mfui-9-button__icon,.mfui-9-button_size-wide_large .mfui-9-button__icon-arrow,.mfui-9-button_size-wide_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-wide_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-wide_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-wide_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-wide_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-wide_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-wide_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-wide_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-wide_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-button_size-tablet_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-tablet_extra-small .mfui-9-button__icon,.mfui-9-button_size-tablet_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-tablet_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-tablet_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-tablet_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-tablet_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-tablet_small .mfui-9-button__icon,.mfui-9-button_size-tablet_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-tablet_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-tablet_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-tablet_medium .mfui-9-button__icon,.mfui-9-button_size-tablet_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-tablet_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-tablet_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-tablet_large .mfui-9-button__icon,.mfui-9-button_size-tablet_large .mfui-9-button__icon-arrow,.mfui-9-button_size-tablet_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-tablet_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-tablet_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-tablet_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-tablet_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-tablet_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-tablet_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-tablet_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-tablet_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}@media screen and (max-width:767px){.mfui-9-button_size-mobile_extra-small{border-radius:8px;font-size:12px;height:24px;line-height:14px;min-width:24px;padding:0 15px}.mfui-9-button_size-mobile_extra-small .mfui-9-button__icon,.mfui-9-button_size-mobile_extra-small .mfui-9-button__icon-arrow,.mfui-9-button_size-mobile_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:20px;width:20px}.mfui-9-button_size-mobile_extra-small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{margin-right:2px}.mfui-9-button_size-mobile_extra-small .mfui-9-button__icon-arrow{margin-left:0}.mfui-9-button_size-mobile_small{border-radius:12px;height:40px;min-width:40px;padding:0 23px}.mfui-9-button_size-mobile_small .mfui-9-button__icon,.mfui-9-button_size-mobile_small .mfui-9-button__icon-arrow{height:20px;width:20px}.mfui-9-button_size-mobile_small.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-mobile_medium{border-radius:16px;height:52px;min-width:52px}.mfui-9-button_size-mobile_medium .mfui-9-button__icon,.mfui-9-button_size-mobile_medium .mfui-9-button__icon-arrow,.mfui-9-button_size-mobile_medium.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-mobile_large{border-radius:16px;height:60px;min-width:60px}.mfui-9-button_size-mobile_large .mfui-9-button__icon,.mfui-9-button_size-mobile_large .mfui-9-button__icon-arrow,.mfui-9-button_size-mobile_large.mfui-9-button_content-type_icon-text .mfui-9-button__icon{height:32px;width:32px}.mfui-9-button_size-mobile_extra-small.mfui-9-buttonhas-arrow{padding:0 7px}.mfui-9-button_size-mobile_extra-small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:12px}.mfui-9-button_size-mobile_large.mfui-9-buttonhas-arrow,.mfui-9-button_size-mobile_medium.mfui-9-buttonhas-arrow{padding:0 23px}.mfui-9-button_size-mobile_large.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-mobile_medium.mfui-9-buttonhas-arrow .mfui-9-button__content,.mfui-9-button_size-mobile_small.mfui-9-buttonhas-arrow .mfui-9-button__content{padding-left:16px}.mfui-9-button_size-mobile_large.mfui-9-button_has-subtext{height:60px}.mfui-9-button_has-subtext .mfui-9-button__inner{height:100%}.mfui-9-button_type_text{border:none;padding:0}}.mfui-9-button:hover{text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-button:hover svg{-webkit-transition:fill .3s;transition:fill .3s}.mfui-9-button_disabled{cursor:default}.mfui-9-button__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:inherit;justify-content:center;vertical-align:top;width:100%}.mfui-9-button__text{margin-bottom:2px}.mfui-9-button__subtext{font-size:12px;line-height:14px}.mfui-9-button__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-button__content_ellipsis{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;width:inherit}.mfui-9-button__content_ellipsis .mfui-9-button__subtext,.mfui-9-button__content_ellipsis .mfui-9-button__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-button__content_show-loader{visibility:hidden}.mfui-9-button__preloader{position:absolute}.mfui-9-button__icon-arrow{height:32px;margin-left:4px;width:32px}.mfui-9-button__text-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.mfui-9-button__text-content .mfui-9-button__text{margin-bottom:0}.mfui-9-button_content-type_icon{padding:0}.mfui-9-button_content-type_icon-text .mfui-9-button__icon,.mfui-9-button_content-type_icon-text:not(.mfui-9-button_type_text) .mfui-9-button__text{margin-right:4px}.mfui-9-button_type_text.mfui-9-button_theme_green{background-color:transparent;color:var(--brandGreen);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_green svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover{color:var(--buttonHoverGreen)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover svg{fill:var(--buttonHoverGreen)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_green:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_purple{background-color:transparent;color:var(--brandPurple);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_purple svg{fill:var(--brandPurple)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover{color:var(--buttonHoverPurple)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover svg{fill:var(--buttonHoverPurple)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_white{background-color:transparent;color:var(--stcWhite);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_white svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover{color:var(--buttonHoverGrey)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover svg{fill:var(--buttonHoverGrey)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_black{background-color:transparent;color:var(--stcBlack);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_black svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black{--stcBlack7:#818181}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):hover{color:var(--stcBlack7)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):hover svg{fill:var(--stcBlack7)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_black:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_text.mfui-9-button_theme_danger{background-color:transparent;color:var(--fury);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.mfui-9-button_type_text.mfui-9-button_theme_danger svg{fill:var(--fury)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):hover{color:var(--fury80)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):hover svg{fill:var(--fury80)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):active{color:var(--buttonDown)}.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_danger:not(.mfui-9-button_loading):active svg{fill:var(--buttonDown)}.mfui-9-button_type_primary.mfui-9-button_theme_green{background-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_green svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverGreen)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green:not(.mfui-9-button_loading):active{background-color:var(--buttonDown)}.mfui-9-button_type_primary.mfui-9-button_theme_green-soft{background-color:var(--brandGreen20);border:1px solid rgba(0,185,86,.2);color:var(--brandGreen)}.mfui-9-button_type_primary.mfui-9-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverGreenSoft)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_purple{background-color:var(--brandPurple);color:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_purple svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverPurple)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active{background-color:var(--buttonDown)}.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft{background-color:var(--brandPurple20);border:1px solid rgba(115,25,130,.2);color:var(--brandPurple)}.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft svg{fill:var(--brandPurple)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverPurpleSoft)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_purple-soft:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_white{background-color:var(--stcWhite);color:var(--stcBlack)}.mfui-9-button_type_primary.mfui-9-button_theme_white svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover{background-color:var(--buttonHoverGrey);color:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_white:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_primary.mfui-9-button_theme_gray{background-color:var(--spbSky0);color:var(--content)}.mfui-9-button_type_primary.mfui-9-button_theme_gray svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):hover{background-color:var(--spbSky1)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):hover svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):active{background-color:var(--spbSky2)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_gray:not(.mfui-9-button_loading):active svg{fill:var(--content)}.mfui-9-button_type_primary.mfui-9-button_theme_base{background-color:var(--base);color:var(--content)}.mfui-9-button_type_primary.mfui-9-button_theme_base svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):hover{background-color:var(--spbSky1)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):hover svg{fill:var(--content)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):active{background-color:var(--buttonDown);color:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_theme_base:not(.mfui-9-button_loading):active svg{fill:var(--stcWhite)}.mfui-9-button_type_outline.mfui-9-button_theme_green{background-color:transparent;border:1px solid var(--brandGreen);color:var(--brandGreen)}.mfui-9-button_type_outline.mfui-9-button_theme_green svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green:not(.mfui-9-button_loading):hover{background-color:var(--brandGreen7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green:not(.mfui-9-button_loading):active{background-color:var(--brandGreen14)}.mfui-9-button_type_outline.mfui-9-button_theme_green-soft{background-color:transparent;color:var(--brandGreen)}.mfui-9-button_type_outline.mfui-9-button_theme_green-soft svg{fill:var(--brandGreen)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green-soft{--brandGreen7:rgba(0,185,86,.07);--brandGreen14:rgba(0,185,86,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):hover{background-color:var(--brandGreen7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_green-soft:not(.mfui-9-button_loading):active{background-color:var(--brandGreen14)}.mfui-9-button_type_outline.mfui-9-button_theme_purple{background-color:transparent;border:1px solid var(--brandPurple);color:var(--brandPurple)}.mfui-9-button_type_outline.mfui-9-button_theme_purple svg{fill:var(--brandPurple)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_purple{--brandPurple7:rgba(115,25,130,.07);--brandPurple14:rgba(115,25,130,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_purple:not(.mfui-9-button_loading):hover{background-color:var(--brandPurple7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_purple:not(.mfui-9-button_loading):active{background-color:var(--brandPurple14)}.mfui-9-button_type_outline.mfui-9-button_theme_white{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite)}.mfui-9-button_type_outline.mfui-9-button_theme_white svg{fill:var(--stcWhite)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white{--stcWhite7:hsla(0,0%,100%,.07);--stcWhite14:hsla(0,0%,100%,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white:not(.mfui-9-button_loading):hover{background-color:var(--stcWhite7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white:not(.mfui-9-button_loading):active{background-color:var(--stcWhite14)}.mfui-9-button_type_outline.mfui-9-button_theme_black{background-color:transparent;border:1px solid var(--stcBlack);color:var(--stcBlack)}.mfui-9-button_type_outline.mfui-9-button_theme_black svg{fill:var(--stcBlack)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_black{--stcBlack7:rgba(51,51,51,.07);--stcBlack14:rgba(51,51,51,.14)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_black:not(.mfui-9-button_loading):hover{background-color:var(--stcBlack7)}.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_black:not(.mfui-9-button_loading):active{background-color:var(--stcBlack14)}.mfui-9-button_full-width{display:block;width:100%}@media screen and (max-width:767px){.mfui-9-button_full-width-mobile{display:block;width:100%}}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_primary.mfui-9-button_disabled{background-color:var(--spbSky1);border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_primary.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_primary.mfui-9-button_disabled svg{fill:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled{background-color:transparent;border:1px solid var(--stcWhite);color:var(--stcWhite50)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_theme_white.mfui-9-button_disabled svg{fill:var(--stcWhite50)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_disabled{background-color:transparent;border:1px solid var(--spbSky2);color:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_outline.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_outline.mfui-9-button_disabled svg{fill:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_disabled{color:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_disabled svg{fill:var(--spbSky3)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:active,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:hover,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled{background-color:transparent;color:var(--stcWhite)}.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:active svg,.mfui-9-button.mfui-9-button_no-touch.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled:hover svg,.mfui-9-button.mfui-9-button_type_text.mfui-9-button_theme_white.mfui-9-button_disabled svg{fill:var(--stcWhite)}
|
|
@@ -14,6 +14,8 @@ export declare const ButtonThemes: {
|
|
|
14
14
|
readonly WHITE: "white";
|
|
15
15
|
readonly BLACK: "black";
|
|
16
16
|
readonly DANGER: "danger";
|
|
17
|
+
readonly GRAY: "gray";
|
|
18
|
+
readonly BASE: "base";
|
|
17
19
|
};
|
|
18
20
|
type ButtonThemesType = (typeof ButtonThemes)[keyof typeof ButtonThemes];
|
|
19
21
|
export declare const ButtonSizes: {
|
|
@@ -43,6 +45,7 @@ export interface IButtonProps extends Omit<ButtonLinkCommonAttributes, 'classNam
|
|
|
43
45
|
inner?: Record<string, string>;
|
|
44
46
|
loader?: Record<string, string>;
|
|
45
47
|
text?: Record<string, string>;
|
|
48
|
+
subtext?: Record<string, string>;
|
|
46
49
|
arrow?: Record<string, string>;
|
|
47
50
|
};
|
|
48
51
|
/** Тема компонента */
|
|
@@ -85,6 +88,8 @@ export interface IButtonProps extends Omit<ButtonLinkCommonAttributes, 'classNam
|
|
|
85
88
|
buttonRef?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
|
|
86
89
|
/** Обрезать текст при недостаточной ширине и добавлять многоточие */
|
|
87
90
|
ellipsis?: boolean;
|
|
91
|
+
/** Дополнительный текст */
|
|
92
|
+
subtext?: string;
|
|
88
93
|
children?: React.ReactNode;
|
|
89
94
|
/** Обработчик клика по кнопке */
|
|
90
95
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
@@ -12,9 +12,11 @@ require("core-js/modules/es.symbol.js");
|
|
|
12
12
|
require("core-js/modules/es.array.concat.js");
|
|
13
13
|
require("core-js/modules/es.array.index-of.js");
|
|
14
14
|
require("core-js/modules/es.array.is-array.js");
|
|
15
|
+
require("core-js/modules/es.array.some.js");
|
|
16
|
+
require("core-js/modules/es.object.to-string.js");
|
|
15
17
|
var React = _interopRequireWildcard(require("react"));
|
|
16
18
|
var _uiHelpers = require("@megafon/ui-helpers");
|
|
17
|
-
var _Preloader = _interopRequireWildcard(require("
|
|
19
|
+
var _Preloader = _interopRequireWildcard(require("../../Preloader/Preloader"));
|
|
18
20
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
19
21
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
20
22
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
@@ -30,7 +32,7 @@ var Arrow = function Arrow(props) {
|
|
|
30
32
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
31
33
|
viewBox: "0 0 40 40"
|
|
32
34
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
33
|
-
d: "
|
|
35
|
+
d: "M19.996 10.594a1.972 1.972 0 012.79-.032l7.633 7.465a2.759 2.759 0 010 3.946l-7.634 7.465a1.972 1.972 0 11-2.756-2.822l4.732-4.628H10.223a1.973 1.973 0 010-3.947H24.79l-4.761-4.657a1.974 1.974 0 01-.033-2.79z"
|
|
34
36
|
}));
|
|
35
37
|
};
|
|
36
38
|
var ButtonTypes = exports.ButtonTypes = {
|
|
@@ -45,7 +47,9 @@ var ButtonThemes = exports.ButtonThemes = {
|
|
|
45
47
|
PURPLE_SOFT: 'purple-soft',
|
|
46
48
|
WHITE: 'white',
|
|
47
49
|
BLACK: 'black',
|
|
48
|
-
DANGER: 'danger'
|
|
50
|
+
DANGER: 'danger',
|
|
51
|
+
GRAY: 'gray',
|
|
52
|
+
BASE: 'base'
|
|
49
53
|
};
|
|
50
54
|
var ButtonSizes = exports.ButtonSizes = {
|
|
51
55
|
EXTRA_SMALL: 'extra-small',
|
|
@@ -97,19 +101,25 @@ var Button = function Button(_a) {
|
|
|
97
101
|
showArrow = _a$showArrow === void 0 ? false : _a$showArrow,
|
|
98
102
|
icon = _a.icon,
|
|
99
103
|
disabled = _a.disabled,
|
|
104
|
+
subtext = _a.subtext,
|
|
100
105
|
children = _a.children,
|
|
101
106
|
_a$ellipsis = _a.ellipsis,
|
|
102
107
|
ellipsis = _a$ellipsis === void 0 ? false : _a$ellipsis,
|
|
103
108
|
onClick = _a.onClick,
|
|
104
109
|
dataAttrs = _a.dataAttrs,
|
|
105
110
|
buttonRef = _a.buttonRef,
|
|
106
|
-
rest = __rest(_a, ["classes", "className", "theme", "type", "href", "download", "target", "rel", "actionType", "sizeAll", "sizeWide", "sizeDesktop", "sizeTablet", "sizeMobile", "fullWidth", "fullWidthMobile", "showLoader", "showArrow", "icon", "disabled", "children", "ellipsis", "onClick", "dataAttrs", "buttonRef"]);
|
|
111
|
+
rest = __rest(_a, ["classes", "className", "theme", "type", "href", "download", "target", "rel", "actionType", "sizeAll", "sizeWide", "sizeDesktop", "sizeTablet", "sizeMobile", "fullWidth", "fullWidthMobile", "showLoader", "showArrow", "icon", "disabled", "subtext", "children", "ellipsis", "onClick", "dataAttrs", "buttonRef"]);
|
|
107
112
|
var _React$useState = React.useState(false),
|
|
108
113
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
109
114
|
isTouch = _React$useState2[0],
|
|
110
115
|
setTouch = _React$useState2[1];
|
|
111
116
|
var ElementType = href ? 'a' : 'button';
|
|
112
117
|
var displayArrow = showArrow && !icon;
|
|
118
|
+
var sizesArray = [sizeAll, sizeWide, sizeDesktop, sizeTablet, sizeMobile];
|
|
119
|
+
var onlyLargeSize = !sizesArray.some(function (size) {
|
|
120
|
+
return size === ButtonSizes.SMALL || size === ButtonSizes.EXTRA_SMALL || size === ButtonSizes.MEDIUM;
|
|
121
|
+
});
|
|
122
|
+
var displaySubtext = onlyLargeSize && !!subtext && !!children && !showArrow && !icon && type !== ButtonTypes.TEXT;
|
|
113
123
|
var handleClick = React.useCallback(function (e) {
|
|
114
124
|
if (disabled) {
|
|
115
125
|
e.preventDefault();
|
|
@@ -118,7 +128,10 @@ var Button = function Button(_a) {
|
|
|
118
128
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
119
129
|
}, [disabled, onClick]);
|
|
120
130
|
var currentTheme = React.useMemo(function () {
|
|
121
|
-
|
|
131
|
+
if (type === ButtonTypes.PRIMARY && theme === ButtonThemes.BLACK || type !== ButtonTypes.PRIMARY && theme === ButtonThemes.BASE) {
|
|
132
|
+
return ButtonThemes.GREEN;
|
|
133
|
+
}
|
|
134
|
+
return theme;
|
|
122
135
|
}, [type, theme]);
|
|
123
136
|
var loaderWhite = React.useMemo(function () {
|
|
124
137
|
return type === ButtonTypes.PRIMARY && theme === ButtonThemes.GREEN || type === ButtonTypes.PRIMARY && theme === ButtonThemes.PURPLE || type === ButtonTypes.OUTLINE && theme === ButtonThemes.WHITE || type === ButtonTypes.TEXT && theme === ButtonThemes.WHITE;
|
|
@@ -133,6 +146,22 @@ var Button = function Button(_a) {
|
|
|
133
146
|
return _Preloader.PreloaderColors.DEFAULT;
|
|
134
147
|
}
|
|
135
148
|
}, [type, theme, loaderWhite]);
|
|
149
|
+
var renderedTextContent = React.useMemo(function () {
|
|
150
|
+
if (!children) {
|
|
151
|
+
return null;
|
|
152
|
+
}
|
|
153
|
+
var renderedText = /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
|
|
154
|
+
className: cn('text')
|
|
155
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children);
|
|
156
|
+
if (displaySubtext) {
|
|
157
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
158
|
+
className: cn('text-content')
|
|
159
|
+
}, renderedText, /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
|
|
160
|
+
className: cn('subtext')
|
|
161
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtext)), subtext));
|
|
162
|
+
}
|
|
163
|
+
return renderedText;
|
|
164
|
+
}, [children, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text, displaySubtext, subtext]);
|
|
136
165
|
var renderedContent = React.useMemo(function () {
|
|
137
166
|
if (!children && !icon) {
|
|
138
167
|
return null;
|
|
@@ -144,14 +173,10 @@ var Button = function Button(_a) {
|
|
|
144
173
|
}, contentClassName)
|
|
145
174
|
}), icon && /*#__PURE__*/React.createElement("div", {
|
|
146
175
|
className: cn('icon')
|
|
147
|
-
}, icon),
|
|
148
|
-
className: cn('text', {
|
|
149
|
-
ellipsis: ellipsis
|
|
150
|
-
})
|
|
151
|
-
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text)), children), displayArrow && /*#__PURE__*/React.createElement(Arrow, (0, _extends2["default"])({
|
|
176
|
+
}, icon), renderedTextContent, displayArrow && /*#__PURE__*/React.createElement(Arrow, (0, _extends2["default"])({
|
|
152
177
|
className: cn('icon-arrow')
|
|
153
178
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow))));
|
|
154
|
-
}, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.
|
|
179
|
+
}, [children, icon, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.content, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow, ellipsis, showLoader, contentClassName, renderedTextContent, displayArrow]);
|
|
155
180
|
var contentType = React.useMemo(function () {
|
|
156
181
|
switch (true) {
|
|
157
182
|
case icon && !children:
|
|
@@ -208,7 +233,8 @@ var Button = function Button(_a) {
|
|
|
208
233
|
loading: showLoader,
|
|
209
234
|
'no-touch': !isTouch,
|
|
210
235
|
'content-type': contentType,
|
|
211
|
-
'has-arrow': displayArrow
|
|
236
|
+
'has-arrow': displayArrow,
|
|
237
|
+
'has-subtext': displaySubtext
|
|
212
238
|
}, classNameValue),
|
|
213
239
|
href: href,
|
|
214
240
|
download: !!href && download,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-button-close{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:transparent;border:none;border-radius:8px;cursor:pointer;height:44px;justify-content:center;outline:none;overflow:hidden;text-decoration:none;width:44px;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mfui-9-button-close:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-button-close:focus{outline:none}.mfui-9-button-close__inner{position:relative;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-button-close__inner:before{border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:background-color,color,opacity;transition-property:background-color,color,opacity;width:100%}.mfui-9-button-close_size_small .mfui-9-button-close__inner{border-radius:8px}.mfui-9-button-close_size_small .mfui-9-button-close__icon{height:24px;min-width:24px}.mfui-9-button-close_size_medium .mfui-9-button-close__inner{border-radius:12px}.mfui-9-button-close_size_medium .mfui-9-button-close__icon{height:32px;min-width:32px}.mfui-9-button-close_theme_white .mfui-9-button-close__inner{background-color:var(--spbSky0)}.mfui-9-button-close_theme_white .mfui-9-button-close__inner svg{fill:var(--spbSky3)}.mfui-9-button-close_theme_white:hover .mfui-9-button-close__inner{background-color:var(--spbSky1)}.mfui-9-button-close_theme_white:active .mfui-9-button-close__inner{background-color:var(--spbSky2)}.mfui-9-button-close_theme_gray .mfui-9-button-close__inner{background-color:var(--base)}.mfui-9-button-close_theme_gray .mfui-9-button-close__inner svg{fill:var(--spbSky3)}.mfui-9-button-close_theme_gray:hover .mfui-9-button-close__inner{background-color:var(--spbSky1)}.mfui-9-button-close_theme_gray:active .mfui-9-button-close__inner{background-color:var(--spbSky2)}.mfui-9-button-close_theme_soft .mfui-9-button-close__inner svg{opacity:.5;fill:var(--content)}.mfui-9-button-close_theme_soft .mfui-9-button-close__inner:before{background-color:var(--content);opacity:.05}.mfui-9-button-close_theme_soft:hover .mfui-9-button-close__inner:before{background-color:var(--content);opacity:.1}.mfui-9-button-close_theme_soft:active .mfui-9-button-close__inner:before{background-color:var(--content);opacity:.2}.mfui-9-button-close_theme_color .mfui-9-button-close__inner{background-color:var(--stcWhite20)}.mfui-9-button-close_theme_color .mfui-9-button-close__inner svg{fill:var(--stcWhite)}.mfui-9-button-close_theme_color:hover .mfui-9-button-close__inner{background-color:var(--stcWhite50)}.mfui-9-button-close_theme_color:active .mfui-9-button-close__inner{background:hsla(0,0%,100%,.8)}.mfui-9-button-close_theme_black .mfui-9-button-close__inner:before{background-color:var(--base);opacity:.1}.mfui-9-button-close_theme_black .mfui-9-button-close__inner svg{fill:var(--spbSky3)}.mfui-9-button-close_theme_black:hover .mfui-9-button-close__inner:before{background-color:var(--base);opacity:.2}.mfui-9-button-close_theme_black:active .mfui-9-button-close__inner:before{background-color:var(--base);opacity:.5}.mfui-9-button-close_theme_black:active .mfui-9-button-close__inner svg{fill:var(--base)}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import './ButtonClose.scss';
|
|
3
|
+
export declare const ButtonCloseThemes: {
|
|
4
|
+
readonly WHITE: "white";
|
|
5
|
+
readonly GRAY: "gray";
|
|
6
|
+
readonly SOFT: "soft";
|
|
7
|
+
readonly COLOR: "color";
|
|
8
|
+
readonly BLACK: "black";
|
|
9
|
+
};
|
|
10
|
+
type ButtonCloseThemesType = (typeof ButtonCloseThemes)[keyof typeof ButtonCloseThemes];
|
|
11
|
+
export declare const ButtonCloseSizes: {
|
|
12
|
+
readonly SMALL: "small";
|
|
13
|
+
readonly MEDIUM: "medium";
|
|
14
|
+
};
|
|
15
|
+
type ButtonCloseSizesType = (typeof ButtonCloseSizes)[keyof typeof ButtonCloseSizes];
|
|
16
|
+
type ButtonCloseAttributes = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof React.ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
17
|
+
export interface IButtonCloseProps extends Omit<ButtonCloseAttributes, 'className'> {
|
|
18
|
+
/** Дополнительный класс корневого элемента */
|
|
19
|
+
className?: string | string[];
|
|
20
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
|
21
|
+
dataAttrs?: Record<string, string>;
|
|
22
|
+
/** Тема компонента */
|
|
23
|
+
theme?: ButtonCloseThemesType;
|
|
24
|
+
/** Размер компонента */
|
|
25
|
+
size?: ButtonCloseSizesType;
|
|
26
|
+
/** Отключение кнопки */
|
|
27
|
+
disabled?: boolean;
|
|
28
|
+
/** Ссылка на элемент */
|
|
29
|
+
buttonRef?: React.Ref<HTMLButtonElement>;
|
|
30
|
+
/** Обработчик клика по кнопке */
|
|
31
|
+
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
|
32
|
+
}
|
|
33
|
+
declare const ButtonClose: React.FC<IButtonCloseProps>;
|
|
34
|
+
export default ButtonClose;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.ButtonCloseThemes = exports.ButtonCloseSizes = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
require("core-js/modules/es.symbol.js");
|
|
10
|
+
require("core-js/modules/es.array.index-of.js");
|
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
15
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
16
|
+
var __rest = void 0 && (void 0).__rest || function (s, e) {
|
|
17
|
+
var t = {};
|
|
18
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
19
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
20
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
21
|
+
}
|
|
22
|
+
return t;
|
|
23
|
+
};
|
|
24
|
+
var CancelIcon = function CancelIcon(props) {
|
|
25
|
+
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
26
|
+
viewBox: "0 0 32 32"
|
|
27
|
+
}, props), /*#__PURE__*/React.createElement("path", {
|
|
28
|
+
d: "M9.405 9.402a1.558 1.558 0 012.201 0l4.348 4.344 4.337-4.333a1.555 1.555 0 112.201 2.2l-4.338 4.331 4.339 4.335a1.555 1.555 0 11-2.201 2.2l-4.34-4.336-4.348 4.346a1.554 1.554 0 11-2.2-2.2l4.348-4.344L9.405 11.6a1.554 1.554 0 010-2.2z"
|
|
29
|
+
}));
|
|
30
|
+
};
|
|
31
|
+
var ButtonCloseThemes = exports.ButtonCloseThemes = {
|
|
32
|
+
WHITE: 'white',
|
|
33
|
+
GRAY: 'gray',
|
|
34
|
+
SOFT: 'soft',
|
|
35
|
+
COLOR: 'color',
|
|
36
|
+
BLACK: 'black'
|
|
37
|
+
};
|
|
38
|
+
var ButtonCloseSizes = exports.ButtonCloseSizes = {
|
|
39
|
+
SMALL: 'small',
|
|
40
|
+
MEDIUM: 'medium'
|
|
41
|
+
};
|
|
42
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-9-button-close');
|
|
43
|
+
var ButtonClose = function ButtonClose(_a) {
|
|
44
|
+
var _a$className = _a.className,
|
|
45
|
+
className = _a$className === void 0 ? '' : _a$className,
|
|
46
|
+
_a$theme = _a.theme,
|
|
47
|
+
theme = _a$theme === void 0 ? 'white' : _a$theme,
|
|
48
|
+
_a$size = _a.size,
|
|
49
|
+
size = _a$size === void 0 ? 'small' : _a$size,
|
|
50
|
+
disabled = _a.disabled,
|
|
51
|
+
onClick = _a.onClick,
|
|
52
|
+
dataAttrs = _a.dataAttrs,
|
|
53
|
+
buttonRef = _a.buttonRef,
|
|
54
|
+
rest = __rest(_a, ["className", "theme", "size", "disabled", "onClick", "dataAttrs", "buttonRef"]);
|
|
55
|
+
var handleClick = React.useCallback(function (e) {
|
|
56
|
+
if (disabled) {
|
|
57
|
+
e.preventDefault();
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
61
|
+
}, [disabled, onClick]);
|
|
62
|
+
return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({
|
|
63
|
+
type: "button",
|
|
64
|
+
className: cn({
|
|
65
|
+
size: size,
|
|
66
|
+
theme: theme,
|
|
67
|
+
disabled: disabled
|
|
68
|
+
}, className),
|
|
69
|
+
onClick: handleClick,
|
|
70
|
+
disabled: disabled,
|
|
71
|
+
ref: buttonRef
|
|
72
|
+
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), rest), /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
className: cn('inner')
|
|
74
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
75
|
+
className: cn('icon')
|
|
76
|
+
}, /*#__PURE__*/React.createElement(CancelIcon, null))));
|
|
77
|
+
};
|
|
78
|
+
var _default = exports["default"] = ButtonClose;
|
|
@@ -20,18 +20,14 @@ var ArrowLeft = function ArrowLeft(props) {
|
|
|
20
20
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
21
21
|
viewBox: "0 0 20 20"
|
|
22
22
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
23
|
-
d: "
|
|
24
|
-
fillRule: "evenodd",
|
|
25
|
-
clipRule: "evenodd"
|
|
23
|
+
d: "M8.202 10.465a.609.609 0 010-.907l2.547-2.371c.44-.41 1.251-.1 1.251.476v4.679c0 .575-.811.879-1.25.47l-2.548-2.347z"
|
|
26
24
|
}));
|
|
27
25
|
};
|
|
28
26
|
var ArrowRight = function ArrowRight(props) {
|
|
29
27
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
30
28
|
viewBox: "0 0 20 20"
|
|
31
29
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
32
|
-
d: "
|
|
33
|
-
fillRule: "evenodd",
|
|
34
|
-
clipRule: "evenodd"
|
|
30
|
+
d: "M11.798 9.535a.61.61 0 010 .907L9.25 12.813c-.44.41-1.251.1-1.251-.476V7.658c0-.576.811-.879 1.25-.47l2.548 2.347z"
|
|
35
31
|
}));
|
|
36
32
|
};
|
|
37
33
|
var formatDate = function formatDate(date, pattern) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-carousel,.mfui-9-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-9-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-9-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-9-carousel__swiper_gradient:after,.mfui-9-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-9-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-carousel,.mfui-9-carousel__swiper{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.mfui-9-carousel__swiper{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-20px 0 -25px;overflow:hidden;padding:20px 0 25px}@media screen and (min-width:1024px){.mfui-9-carousel__swiper{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-48px;margin-right:-48px;padding-left:48px;padding-right:48px}}@media screen and (max-width:767px){.mfui-9-carousel__swiper_default-inner-indents{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}}.mfui-9-carousel__swiper_gradient:after,.mfui-9-carousel__swiper_gradient:before{bottom:0;content:"";position:absolute;top:0;width:var(--gap);z-index:5}.mfui-9-carousel__swiper_gradient:before{background:-webkit-gradient(linear,right top,left top,from(rgba(var(--gradientColorRGB),0)),to(var(--gradientColor)));background:linear-gradient(270deg,rgba(var(--gradientColorRGB),0) 0,var(--gradientColor) 100%);left:0}.mfui-9-carousel__swiper_gradient:after{background:-webkit-gradient(linear,right top,left top,from(var(--gradientColor)),to(rgba(var(--gradientColorRGB),0)));background:linear-gradient(270deg,var(--gradientColor) 0,rgba(var(--gradientColorRGB),0) 100%);right:0}.mfui-9-carousel__swiper_gradient-color_default{--gradientColor:var(--background);--gradientColorRGB:var(--background-rgb)}.mfui-9-carousel__swiper_gradient-color_green{--gradientColor:var(--brandGreen);--gradientColorRGB:var(--brandGreen-rgb)}.mfui-9-carousel__swiper_gradient-color_black{--gradientColor:var(--stcBlack);--gradientColorRGB:var(--stcBlack-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky0{--gradientColor:var(--spbSky0);--gradientColorRGB:var(--spbSky0-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky1{--gradientColor:var(--spbSky1);--gradientColorRGB:var(--spbSky1-rgb)}.mfui-9-carousel__swiper_gradient-color_spbSky2{--gradientColor:var(--spbSky2);--gradientColorRGB:var(--spbSky2-rgb)}.mfui-9-carousel .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1}.mfui-9-carousel__slide{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width:1024px){.mfui-9-carousel__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}}.mfui-9-carousel__slide:focus{outline:none}@media screen and (min-width:1024px){.mfui-9-carousel .swiper-slide-visible{opacity:1;-webkit-transition:opacity .4s;transition:opacity .4s}}.mfui-9-carousel__arrow{position:absolute;top:50%;-webkit-transform:translateY(calc(-50% - 20px));transform:translateY(calc(-50% - 20px));z-index:6}@media screen and (max-width:1023px){.mfui-9-carousel__arrow{display:none}}.mfui-9-carousel__arrow_prev{right:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_prev{right:calc(100% + 20px)}}.mfui-9-carousel__arrow_next{left:calc(100% + 12px)}@media screen and (min-width:1280px){.mfui-9-carousel__arrow_next{left:calc(100% + 20px)}}.mfui-9-carousel__arrow_locked{display:none}.mfui-9-carousel .swiper-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;justify-self:center;-webkit-box-ordinal-group:3;-ms-flex-order:2;border-radius:12px;order:2;padding-top:32px;width:100%}.mfui-9-carousel .swiper-pagination.swiper-pagination-lock{display:none}.mfui-9-carousel .swiper-pagination-bullet{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:8px;justify-content:center;-webkit-transition:all .5s,background-color .3s;transition:all .5s,background-color .3s;width:8px}.mfui-9-carousel .swiper-pagination-bullet:before{border-radius:50%;content:"";display:block;height:100%;-webkit-transition:border-radius .5s;transition:border-radius .5s;width:100%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet:before{background-color:var(--stcWhite50)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet:before{background-color:var(--spbSky2)}.mfui-9-carousel .swiper-pagination-bullet-active{cursor:default;-webkit-transform:scaleX(2.3);transform:scaleX(2.3)}.mfui-9-carousel .swiper-pagination-bullet-active:before{border-radius:40%}.mfui-9-carousel_nav-theme_green .swiper-pagination-bullet-active:before{background-color:var(--base)}.mfui-9-carousel_nav-theme_light .swiper-pagination-bullet-active:before{background-color:var(--brandGreen)}.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_prev{right:calc(100% - 20px)}@media screen and (min-width:1280px){.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_prev{right:calc(100% - 20px)}}.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_next{left:calc(100% - 20px)}@media screen and (min-width:1280px){.mfui-9-carousel_arrow-position_inside .mfui-9-carousel__arrow_next{left:calc(100% - 20px)}}
|
|
@@ -22,10 +22,15 @@ declare const GradientTheme: {
|
|
|
22
22
|
readonly SPB_SKY_1: "spbSky1";
|
|
23
23
|
readonly SPB_SKY_2: "spbSky2";
|
|
24
24
|
};
|
|
25
|
+
export declare const ArrowPosition: {
|
|
26
|
+
readonly OUTSIDE: "outside";
|
|
27
|
+
readonly INSIDE: "inside";
|
|
28
|
+
};
|
|
25
29
|
type SlidesPerViewType = (typeof SlidesPerView)[keyof typeof SlidesPerView];
|
|
26
30
|
type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
|
|
27
31
|
type EffectThemeType = (typeof EffectTheme)[keyof typeof EffectTheme];
|
|
28
32
|
type GradientThemeType = (typeof GradientTheme)[keyof typeof GradientTheme];
|
|
33
|
+
type ArrowPositionType = (typeof ArrowPosition)[keyof typeof ArrowPosition];
|
|
29
34
|
export type SlidesSettingsType = {
|
|
30
35
|
[key: number]: {
|
|
31
36
|
slidesPerView: number | SlidesPerViewType;
|
|
@@ -84,6 +89,8 @@ export interface ICarouselProps {
|
|
|
84
89
|
disableArrows?: boolean;
|
|
85
90
|
/** Тема стрелок */
|
|
86
91
|
arrowTheme?: ArrowThemeType;
|
|
92
|
+
/** Позиционирование стрелок */
|
|
93
|
+
arrowPosition?: ArrowPositionType;
|
|
87
94
|
/** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
|
|
88
95
|
noSwipingSelector?: string;
|
|
89
96
|
/** Свайп к слайду, по которому произведен клик */
|
|
@@ -100,6 +107,8 @@ export interface ICarouselProps {
|
|
|
100
107
|
gradient?: boolean;
|
|
101
108
|
/** Цвет градиента */
|
|
102
109
|
gradientColor?: GradientThemeType;
|
|
110
|
+
/** Отключить переключение слайдов при фокусе на дочерних элементах */
|
|
111
|
+
disableChildFocusPropagation?: boolean;
|
|
103
112
|
children?: React.ReactNode;
|
|
104
113
|
}
|
|
105
114
|
declare const Carousel: React.FC<ICarouselProps>;
|
|
@@ -4,7 +4,7 @@ function _typeof3(o) { "@babel/helpers - typeof"; return _typeof3 = "function" =
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports["default"] = exports.NavTheme = exports.EffectTheme = void 0;
|
|
7
|
+
exports["default"] = exports.NavTheme = exports.EffectTheme = exports.ArrowPosition = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
@@ -136,6 +136,10 @@ var GradientTheme = {
|
|
|
136
136
|
SPB_SKY_1: 'spbSky1',
|
|
137
137
|
SPB_SKY_2: 'spbSky2'
|
|
138
138
|
};
|
|
139
|
+
var ArrowPosition = exports.ArrowPosition = {
|
|
140
|
+
OUTSIDE: 'outside',
|
|
141
|
+
INSIDE: 'inside'
|
|
142
|
+
};
|
|
139
143
|
var getAutoPlayConfig = function getAutoPlayConfig(delay) {
|
|
140
144
|
return {
|
|
141
145
|
delay: delay,
|
|
@@ -193,6 +197,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
193
197
|
disableArrows = _ref$disableArrows === void 0 ? false : _ref$disableArrows,
|
|
194
198
|
_ref$arrowTheme = _ref.arrowTheme,
|
|
195
199
|
arrowTheme = _ref$arrowTheme === void 0 ? _NavArrow.Theme.PURPLE : _ref$arrowTheme,
|
|
200
|
+
arrowPosition = _ref.arrowPosition,
|
|
196
201
|
noSwipingSelector = _ref.noSwipingSelector,
|
|
197
202
|
children = _ref.children,
|
|
198
203
|
pagination = _ref.pagination,
|
|
@@ -205,7 +210,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
205
210
|
_ref$gradient = _ref.gradient,
|
|
206
211
|
gradient = _ref$gradient === void 0 ? false : _ref$gradient,
|
|
207
212
|
_ref$gradientColor = _ref.gradientColor,
|
|
208
|
-
gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor
|
|
213
|
+
gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor,
|
|
214
|
+
_ref$disableChildFocu = _ref.disableChildFocusPropagation,
|
|
215
|
+
disableChildFocusPropagation = _ref$disableChildFocu === void 0 ? false : _ref$disableChildFocu;
|
|
209
216
|
var _React$useState = React.useState(),
|
|
210
217
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
211
218
|
swiperInstance = _React$useState2[0],
|
|
@@ -318,6 +325,9 @@ var Carousel = function Carousel(_ref) {
|
|
|
318
325
|
var handleSlideFocus = function handleSlideFocus(index) {
|
|
319
326
|
return function (e) {
|
|
320
327
|
var _a;
|
|
328
|
+
if (disableChildFocusPropagation && e.target !== e.currentTarget) {
|
|
329
|
+
return;
|
|
330
|
+
}
|
|
321
331
|
if (loop) {
|
|
322
332
|
// for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
|
|
323
333
|
// because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
|
|
@@ -374,7 +384,8 @@ var Carousel = function Carousel(_ref) {
|
|
|
374
384
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
375
385
|
ref: rootRef,
|
|
376
386
|
className: cn({
|
|
377
|
-
'nav-theme': navTheme
|
|
387
|
+
'nav-theme': navTheme,
|
|
388
|
+
'arrow-position': arrowPosition
|
|
378
389
|
}, [className, rootClass]),
|
|
379
390
|
onClick: handleRootClick,
|
|
380
391
|
style: gradientStyles
|
|
@@ -418,6 +429,7 @@ var Carousel = function Carousel(_ref) {
|
|
|
418
429
|
return /*#__PURE__*/React.createElement(SwiperSlide, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
|
|
419
430
|
key: i,
|
|
420
431
|
className: cn('slide', slideClass),
|
|
432
|
+
tabIndex: disableChildFocusPropagation ? 0 : undefined,
|
|
421
433
|
onFocus: handleSlideFocus(i),
|
|
422
434
|
onMouseDown: disableFocusOnSlideClick
|
|
423
435
|
}), child);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-checkbox_bottom-margin{margin-bottom:12px}.mfui-9-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-9-checkbox_single .mfui-9-checkbox__inner{padding-left:32px}.mfui-9-checkbox__label{cursor:pointer;display:inline}.mfui-9-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-9-checkbox__custom-input:focus{outline:none}.mfui-9-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{border:none}.mfui-9-checkbox_checked .mfui-9-checkbox__icon{opacity:1}.mfui-9-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-9-checkbox_font-size_regular .mfui-9-checkbox__inner{padding-top:3px}.mfui-9-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-9-checkbox_font-size_small .mfui-9-checkbox__inner{padding-top:6px}.mfui-9-checkbox_color_dark .mfui-9-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_light{color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-checkbox_disabled .mfui-9-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-checkbox_disabled .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_disabled.mfui-9-checkbox_color_light .mfui-9-checkbox__label{color:var(--stcWhite50)}.mfui-9-checkbox_checked.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-9-checkbox_error .mfui-9-checkbox__custom-input{border-color:var(--fury)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-checkbox_bottom-margin{margin-bottom:12px}.mfui-9-checkbox__inner{display:inline-block;min-height:32px;padding-left:38px;position:relative;vertical-align:top}.mfui-9-checkbox_single .mfui-9-checkbox__inner{padding-left:32px}.mfui-9-checkbox__label{cursor:pointer;display:inline}.mfui-9-checkbox__input{height:0;left:0;opacity:0;position:absolute;top:0;width:0;z-index:-1}.mfui-9-checkbox__custom-input{display:-webkit-box;display:-ms-flexbox;display:flex;left:6px;position:absolute;top:6px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:2px solid;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;height:20px;justify-content:center;-webkit-transition:border-color,background-color;transition:border-color,background-color;-webkit-transition-duration:.3s;transition-duration:.3s;width:20px}.mfui-9-checkbox__custom-input:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-checkbox__custom-input:focus{outline:none}.mfui-9-checkbox__icon{display:block;height:100%;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-checkbox__extra-content{display:inline-block;left:8px;margin-right:-20px;margin-top:-2px;position:relative;vertical-align:middle}.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{border:none}.mfui-9-checkbox_checked .mfui-9-checkbox__icon{opacity:1}.mfui-9-checkbox_font-size_regular{font-size:15px;line-height:24px}.mfui-9-checkbox_font-size_regular .mfui-9-checkbox__inner{padding-top:3px}.mfui-9-checkbox_font-size_small{font-size:12px;line-height:18px}.mfui-9-checkbox_font-size_small .mfui-9-checkbox__inner{padding-top:6px}.mfui-9-checkbox_color_dark .mfui-9-checkbox__custom-input{border-color:var(--spbSky2)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{border-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--brandGreen);border-color:var(--brandGreen)}.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGreen)}.mfui-9-checkbox_color_light{color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--stcWhite)}.mfui-9-checkbox_color_light .mfui-9-checkbox__label_no-touch:hover .mfui-9-checkbox__custom-input{background-color:var(--buttonHoverGrey);border-color:var(--buttonHoverGrey)}.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__custom-input{background-color:var(--stcWhite);border-color:var(--brandGreen);color:var(--stcWhite)}.mfui-9-checkbox_disabled .mfui-9-checkbox__label{color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky1);border-color:var(--spbSky2)}.mfui-9-checkbox_disabled .mfui-9-checkbox__icon{fill:var(--stcWhite)}.mfui-9-checkbox_disabled.mfui-9-checkbox_color_light .mfui-9-checkbox__label{color:var(--stcWhite50)}.mfui-9-checkbox_checked.mfui-9-checkbox_disabled .mfui-9-checkbox__custom-input{background-color:var(--spbSky2)}.mfui-9-checkbox_error .mfui-9-checkbox__custom-input{border-color:var(--fury)}.mfui-9-checkbox_color_dark .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_dark.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input,.mfui-9-checkbox_color_light.mfui-9-checkbox_checked .mfui-9-checkbox__label:active .mfui-9-checkbox__custom-input{background-color:var(--buttonDown);border-color:var(--buttonDown)}
|
|
@@ -17,7 +17,7 @@ var CheckedIcon = function CheckedIcon(props) {
|
|
|
17
17
|
return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
|
|
18
18
|
viewBox: "0 0 20 20"
|
|
19
19
|
}, props), /*#__PURE__*/React.createElement("path", {
|
|
20
|
-
d: "
|
|
20
|
+
d: "M6.805 9.324l2.26 2.26 4.383-4.334a.935.935 0 011.323-.01.936.936 0 01-.025 1.323L9.693 13.56a.936.936 0 01-1.319.013l-2.908-2.909a.935.935 0 01.017-1.322.935.935 0 011.322-.017z"
|
|
21
21
|
}));
|
|
22
22
|
};
|
|
23
23
|
var CHANGE_KEY = 'change';
|
|
@@ -81,9 +81,10 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
81
81
|
onChange: handleChange,
|
|
82
82
|
disabled: disabled
|
|
83
83
|
})), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
|
|
84
|
-
tabIndex: 0,
|
|
84
|
+
tabIndex: disabled ? -1 : 0,
|
|
85
85
|
role: "checkbox",
|
|
86
86
|
"aria-checked": isChecked,
|
|
87
|
+
"aria-disabled": disabled,
|
|
87
88
|
className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
|
|
88
89
|
onKeyDown: handleChange
|
|
89
90
|
}), /*#__PURE__*/React.createElement(CheckedIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-9-chip:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-chip:focus{outline:none}.mfui-9-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip{padding:4px 12px}}.mfui-9-chip:hover{background-color:var(--spbSky1)}.mfui-9-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-chip__counter{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-9-chip__counter{margin-left:4px}}.mfui-9-chip__icon,.mfui-9-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip__icon svg,.mfui-9-chip__icon-arrow svg{display:block;height:100%;width:100%}.mfui-9-chip__icon{margin-right:6px}@media screen and (max-width:767px){.mfui-9-chip__icon{margin-right:4px}}.mfui-9-chip_theme_gray{background-color:var(--spbSky1)}.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky2)}.mfui-9-chip_disabled,.mfui-9-chip_disabled:hover{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-9-chip_disabled svg,.mfui-9-chip_disabled:hover svg{fill:var(--spbSky3)}.mfui-9-chip_disabled .mfui-9-chip__counter,.mfui-9-chip_disabled:hover .mfui-9-chip__counter{color:var(--spbSky2)}.mfui-9-chip_disabled.mfui-9-chip_theme_gray,.mfui-9-chip_disabled.mfui-9-chip_theme_gray:hover{background-color:var(--spbSky1)}.mfui-9-chip_checked,.mfui-9-chip_checked:hover{background-color:var(--night);color:var(--stcWhite)}.mfui-9-chip_checked svg,.mfui-9-chip_checked:hover svg{fill:var(--stcWhite)}.mfui-9-chip_checked .mfui-9-chip__counter,.mfui-9-chip_checked:hover .mfui-9-chip__counter{color:var(--stcWhite)}.mfui-9-chip_checked.mfui-9-chip_color_black,.mfui-9-chip_checked.mfui-9-chip_color_black:hover{background-color:var(--content);color:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black svg,.mfui-9-chip_checked.mfui-9-chip_color_black:hover svg{fill:var(--base)}.mfui-9-chip_checked.mfui-9-chip_color_black .mfui-9-chip__counter,.mfui-9-chip_checked.mfui-9-chip_color_black:hover .mfui-9-chip__counter{color:var(--base)}.mfui-9-chip_with-icon{padding-left:16px}@media screen and (max-width:767px){.mfui-9-chip_with-icon{padding-left:8px}}
|
|
@@ -6,6 +6,11 @@ export declare const ChipColors: {
|
|
|
6
6
|
readonly BLACK: "black";
|
|
7
7
|
};
|
|
8
8
|
export type ChipColorsType = (typeof ChipColors)[keyof typeof ChipColors];
|
|
9
|
+
export declare const ChipThemes: {
|
|
10
|
+
readonly WHITE: "white";
|
|
11
|
+
readonly GRAY: "gray";
|
|
12
|
+
};
|
|
13
|
+
export type ChipsThemeType = (typeof ChipThemes)[keyof typeof ChipThemes];
|
|
9
14
|
export declare const ChipArrow: {
|
|
10
15
|
readonly UP: "up";
|
|
11
16
|
readonly DOWN: "down";
|
|
@@ -16,8 +21,10 @@ export interface IChipProps {
|
|
|
16
21
|
id: ChipIdType;
|
|
17
22
|
/** Заголовок */
|
|
18
23
|
title?: string;
|
|
19
|
-
/**
|
|
24
|
+
/** Цвет активного элемента компонента */
|
|
20
25
|
color?: ChipColorsType;
|
|
26
|
+
/** Цвета неактивных элементов компонента */
|
|
27
|
+
theme?: ChipsThemeType;
|
|
21
28
|
/** Отображение в отмеченном (зажатом) состоянии */
|
|
22
29
|
checked?: boolean;
|
|
23
30
|
/** Отключенное состояние */
|
|
@@ -41,6 +48,7 @@ export interface IChipProps {
|
|
|
41
48
|
inner?: string;
|
|
42
49
|
icon?: string;
|
|
43
50
|
counter?: string;
|
|
51
|
+
arrow?: string;
|
|
44
52
|
};
|
|
45
53
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
46
54
|
dataAttrs?: {
|