@bikdotai/bik-component-library 0.0.805-beta.8 → 0.0.805-beta.9
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/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/types.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.js +1 -1
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.styled.js +3 -3
- package/dist/cjs/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/cjs/components/avatar/AvatarHelper.js +1 -1
- package/dist/cjs/components/avatar/AvatarHelper.js.map +1 -1
- package/dist/cjs/components/bik-layout/BikSidebar.js.map +1 -1
- package/dist/cjs/components/button/Button.js +1 -1
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/Button.styled.js +1 -1
- package/dist/cjs/components/button/Button.styled.js.map +1 -1
- package/dist/cjs/components/button/themes.js +1 -1
- package/dist/cjs/components/button/themes.js.map +1 -1
- package/dist/cjs/components/country-code-picker/CountryCodePicker.js.map +1 -1
- package/dist/cjs/components/country-code-picker/CountryPicker.js.map +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/cjs/components/dropdown/DropdownPopover/index.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js +5 -6
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/description/Description.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/description/Description.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +7 -7
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js +4 -8
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.style.js +6 -10
- package/dist/cjs/components/dropdown-button/DropdownButton.style.js.map +1 -1
- package/dist/cjs/components/fab-menu/FABMenu.js.map +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/icon-button/IconButton.js +1 -1
- package/dist/cjs/components/icon-button/IconButton.js.map +1 -1
- package/dist/cjs/components/icon-button/IconButton.styled.js +3 -3
- package/dist/cjs/components/icon-button/IconButton.styled.js.map +1 -1
- package/dist/cjs/components/icon-button/theme.js +1 -1
- package/dist/cjs/components/icon-button/theme.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/input/Input.styled.js +1 -1
- package/dist/cjs/components/input/Input.styled.js.map +1 -1
- package/dist/cjs/components/list-item/ListItem.js +1 -1
- package/dist/cjs/components/list-item/ListItem.js.map +1 -1
- package/dist/cjs/components/list-item/ListItem.styled.js +1 -1
- package/dist/cjs/components/list-item/ListItem.styled.js.map +1 -1
- package/dist/cjs/components/list-item/themes.js +1 -1
- package/dist/cjs/components/list-item/themes.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuItem.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuList.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MenuList.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +30 -33
- package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.js.map +1 -1
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/Tag.styled.js.map +1 -1
- package/dist/cjs/components/tag/model.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNewPanel.js.map +1 -1
- package/dist/cjs/constants/Theme.js +1 -1
- package/dist/cjs/constants/Theme.js.map +1 -1
- package/dist/cjs/icons/Arrows/Chevron/ChevronUp.js +1 -1
- package/dist/cjs/icons/Arrows/Chevron/ChevronUp.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/src/components/BikGiftedChat/GiftedChat/types.d.ts +2 -2
- package/dist/cjs/src/components/avatar/Avatar.d.ts +2 -3
- package/dist/cjs/src/components/avatar/AvatarHelper.d.ts +4 -5
- package/dist/cjs/src/components/bik-layout/index.d.ts +0 -2
- package/dist/cjs/src/components/button/Button.styled.d.ts +1 -1
- package/dist/cjs/src/components/button/model.d.ts +3 -3
- package/dist/cjs/src/components/button/themes.d.ts +2 -2
- package/dist/cjs/src/components/country-code-picker/CountryCodePicker.d.ts +1 -1
- package/dist/cjs/src/components/country-code-picker/CountryPicker.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/description/Description.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts +1 -2
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts +1 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +0 -1
- package/dist/cjs/src/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts +0 -2
- package/dist/cjs/src/components/dropdown/hooks/useDropdown.d.ts +0 -2
- package/dist/cjs/src/components/dropdown/type.d.ts +1 -2
- package/dist/cjs/src/components/dropdown-button/DropdownButton.d.ts +1 -3
- package/dist/cjs/src/components/dropdown-button/DropdownButton.style.d.ts +2 -9
- package/dist/cjs/src/components/fab-menu/FABMenu.d.ts +1 -1
- package/dist/cjs/src/components/feature-announcements/types/feature.types.d.ts +1 -1
- package/dist/cjs/src/components/icon-button/IconButton.styled.d.ts +1 -3
- package/dist/cjs/src/components/icon-button/model.d.ts +1 -12
- package/dist/cjs/src/components/input/Input.model.d.ts +1 -2
- package/dist/cjs/src/components/input/Input.styled.d.ts +1 -16
- package/dist/cjs/src/components/list-item/List.model.d.ts +1 -1
- package/dist/cjs/src/components/list-item/ListItem.styled.d.ts +1 -1
- package/dist/cjs/src/components/list-item/themes.d.ts +2 -2
- package/dist/cjs/src/components/multi-level-dropdown/GroupedMenuList.d.ts +0 -1
- package/dist/cjs/src/components/multi-level-dropdown/MenuItem.d.ts +0 -1
- package/dist/cjs/src/components/multi-level-dropdown/MenuList.d.ts +0 -1
- package/dist/cjs/src/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +3 -13
- package/dist/cjs/src/components/multi-level-dropdown/type.d.ts +0 -1
- package/dist/cjs/src/components/tag/Tag.d.ts +1 -1
- package/dist/cjs/src/components/tag/Tag.stories.d.ts +5 -5
- package/dist/cjs/src/components/tag/Tag.styled.d.ts +1 -3
- package/dist/cjs/src/components/tag/model.d.ts +1 -5
- package/dist/cjs/src/components/whats-new/WhatsNew.d.ts +0 -2
- package/dist/cjs/src/components/whats-new/WhatsNew.types.d.ts +0 -2
- package/dist/cjs/src/constants/Theme.d.ts +0 -6
- package/dist/cjs/src/icons/Arrows/Chevron/ChevronUp.d.ts +2 -1
- package/dist/cjs/src/index.d.ts +0 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/types.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.js +1 -1
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.styled.js +6 -6
- package/dist/esm/components/avatar/Avatar.styled.js.map +1 -1
- package/dist/esm/components/avatar/AvatarHelper.js +1 -1
- package/dist/esm/components/avatar/AvatarHelper.js.map +1 -1
- package/dist/esm/components/bik-layout/BikSidebar.js.map +1 -1
- package/dist/esm/components/button/Button.js +1 -1
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/Button.styled.js +1 -1
- package/dist/esm/components/button/Button.styled.js.map +1 -1
- package/dist/esm/components/button/themes.js +1 -1
- package/dist/esm/components/button/themes.js.map +1 -1
- package/dist/esm/components/country-code-picker/CountryCodePicker.js.map +1 -1
- package/dist/esm/components/country-code-picker/CountryPicker.js.map +1 -1
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.js +1 -1
- package/dist/esm/components/dropdown/DropdownPopover/index.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js +2 -3
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js +2 -6
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js.map +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/esm/components/dropdown-button/DropdownButton.style.js +4 -8
- package/dist/esm/components/dropdown-button/DropdownButton.style.js.map +1 -1
- package/dist/esm/components/fab-menu/FABMenu.js.map +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/esm/components/icon-button/IconButton.js +1 -1
- package/dist/esm/components/icon-button/IconButton.js.map +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.js.map +1 -1
- package/dist/esm/components/icon-button/theme.js +1 -1
- package/dist/esm/components/icon-button/theme.js.map +1 -1
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.styled.js +1 -1
- package/dist/esm/components/input/Input.styled.js.map +1 -1
- package/dist/esm/components/list-item/ListItem.js +1 -1
- package/dist/esm/components/list-item/ListItem.js.map +1 -1
- package/dist/esm/components/list-item/ListItem.styled.js +1 -1
- package/dist/esm/components/list-item/ListItem.styled.js.map +1 -1
- package/dist/esm/components/list-item/themes.js +1 -1
- package/dist/esm/components/list-item/themes.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuItem.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuList.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MenuList.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js.map +1 -1
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +29 -32
- package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map +1 -1
- package/dist/esm/components/tag/Tag.js +1 -1
- package/dist/esm/components/tag/Tag.js.map +1 -1
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/Tag.styled.js.map +1 -1
- package/dist/esm/components/tag/model.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNew.js +1 -1
- package/dist/esm/components/whats-new/WhatsNew.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js +1 -1
- package/dist/esm/components/whats-new/WhatsNewPanel.js.map +1 -1
- package/dist/esm/constants/Theme.js +1 -1
- package/dist/esm/constants/Theme.js.map +1 -1
- package/dist/esm/icons/Arrows/Chevron/ChevronUp.js +1 -1
- package/dist/esm/icons/Arrows/Chevron/ChevronUp.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/src/components/BikGiftedChat/GiftedChat/types.d.ts +2 -2
- package/dist/esm/src/components/avatar/Avatar.d.ts +2 -3
- package/dist/esm/src/components/avatar/AvatarHelper.d.ts +4 -5
- package/dist/esm/src/components/bik-layout/index.d.ts +0 -2
- package/dist/esm/src/components/button/Button.styled.d.ts +1 -1
- package/dist/esm/src/components/button/model.d.ts +3 -3
- package/dist/esm/src/components/button/themes.d.ts +2 -2
- package/dist/esm/src/components/country-code-picker/CountryCodePicker.d.ts +1 -1
- package/dist/esm/src/components/country-code-picker/CountryPicker.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/description/Description.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts +1 -2
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts +1 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts +0 -1
- package/dist/esm/src/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts +0 -2
- package/dist/esm/src/components/dropdown/hooks/useDropdown.d.ts +0 -2
- package/dist/esm/src/components/dropdown/type.d.ts +1 -2
- package/dist/esm/src/components/dropdown-button/DropdownButton.d.ts +1 -3
- package/dist/esm/src/components/dropdown-button/DropdownButton.style.d.ts +2 -9
- package/dist/esm/src/components/fab-menu/FABMenu.d.ts +1 -1
- package/dist/esm/src/components/feature-announcements/types/feature.types.d.ts +1 -1
- package/dist/esm/src/components/icon-button/IconButton.styled.d.ts +1 -3
- package/dist/esm/src/components/icon-button/model.d.ts +1 -12
- package/dist/esm/src/components/input/Input.model.d.ts +1 -2
- package/dist/esm/src/components/input/Input.styled.d.ts +1 -16
- package/dist/esm/src/components/list-item/List.model.d.ts +1 -1
- package/dist/esm/src/components/list-item/ListItem.styled.d.ts +1 -1
- package/dist/esm/src/components/list-item/themes.d.ts +2 -2
- package/dist/esm/src/components/multi-level-dropdown/GroupedMenuList.d.ts +0 -1
- package/dist/esm/src/components/multi-level-dropdown/MenuItem.d.ts +0 -1
- package/dist/esm/src/components/multi-level-dropdown/MenuList.d.ts +0 -1
- package/dist/esm/src/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +3 -13
- package/dist/esm/src/components/multi-level-dropdown/type.d.ts +0 -1
- package/dist/esm/src/components/tag/Tag.d.ts +1 -1
- package/dist/esm/src/components/tag/Tag.stories.d.ts +5 -5
- package/dist/esm/src/components/tag/Tag.styled.d.ts +1 -3
- package/dist/esm/src/components/tag/model.d.ts +1 -5
- package/dist/esm/src/components/whats-new/WhatsNew.d.ts +0 -2
- package/dist/esm/src/components/whats-new/WhatsNew.types.d.ts +0 -2
- package/dist/esm/src/constants/Theme.d.ts +0 -6
- package/dist/esm/src/icons/Arrows/Chevron/ChevronUp.d.ts +2 -1
- package/dist/esm/src/index.d.ts +0 -1
- package/package.json +2 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.js +0 -2
- package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.js.map +0 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Popup.js +0 -2
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Popup.js.map +0 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +0 -294
- package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js.map +0 -1
- package/dist/cjs/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js +0 -2
- package/dist/cjs/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js.map +0 -1
- package/dist/cjs/components/dual-icon-button/DualIconButton.js +0 -2
- package/dist/cjs/components/dual-icon-button/DualIconButton.js.map +0 -1
- package/dist/cjs/components/dual-icon-button/DualIconButton.styled.js +0 -26
- package/dist/cjs/components/dual-icon-button/DualIconButton.styled.js.map +0 -1
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/BikSidebarV2.d.ts +0 -33
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SidebarV2.model.d.ts +0 -27
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts +0 -13
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SidebarV2Styles.d.ts +0 -44
- package/dist/cjs/src/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts +0 -3
- package/dist/cjs/src/components/dual-icon-button/DualIconButton.d.ts +0 -3
- package/dist/cjs/src/components/dual-icon-button/DualIconButton.styled.d.ts +0 -7
- package/dist/cjs/src/components/dual-icon-button/index.d.ts +0 -2
- package/dist/cjs/src/components/dual-icon-button/model.d.ts +0 -12
- package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js +0 -2
- package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js.map +0 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js +0 -2
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Popup.js.map +0 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +0 -294
- package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js.map +0 -1
- package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js +0 -2
- package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js.map +0 -1
- package/dist/esm/components/dual-icon-button/DualIconButton.js +0 -2
- package/dist/esm/components/dual-icon-button/DualIconButton.js.map +0 -1
- package/dist/esm/components/dual-icon-button/DualIconButton.styled.js +0 -26
- package/dist/esm/components/dual-icon-button/DualIconButton.styled.js.map +0 -1
- package/dist/esm/src/components/bik-layout/BikSidebarV2/BikSidebarV2.d.ts +0 -33
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SidebarV2.model.d.ts +0 -27
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SidebarV2Popup.d.ts +0 -13
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SidebarV2Styles.d.ts +0 -44
- package/dist/esm/src/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts +0 -3
- package/dist/esm/src/components/dual-icon-button/DualIconButton.d.ts +0 -3
- package/dist/esm/src/components/dual-icon-button/DualIconButton.styled.d.ts +0 -7
- package/dist/esm/src/components/dual-icon-button/index.d.ts +0 -2
- package/dist/esm/src/components/dual-icon-button/model.d.ts +0 -12
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as s}from"react";import{
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as s}from"react";import{AvatarStyle as i}from"./Avatar.styled.js";import{SIZE as o,AVATAR_BACKGROUND as r,AVATAR_TYPES as a,AVATAR_SIZE_MAP as n}from"./AvatarHelper.js";import{BodyTiny as c,TitleSmall as l,TitleMedium as d}from"../TypographyStyle.js";import{COLORS as h}from"../../constants/Theme.js";import p from"../../assets/icons/bik_livechat.svg.js";import m from"../../assets/icons/email-channel.svg.js";import g from"../../assets/icons/facebook_channel.svg.js";import u from"../../assets/icons/gmail.svg.js";import b from"../../assets/icons/instagram-channel.svg.js";import A from"../../assets/icons/task.svg.js";import I from"../../assets/icons/whatsapp_color.svg.js";const y={[o.SMALL]:16,[o.MEDIUM]:20,[o.INBOX]:24,[o.LARGE]:32},S={[r.LIGHT]:h.content.secondary,[r.WHITE]:h.content.secondary,[r.DARK]:h.surface.standard};var f;!function(t){t.INSTAGRAM="instagram",t.MESSENGER="messenger",t.WHATSAPP="whatsapp",t.GMAIL="gmail",t.LIVECHAT="livechat",t.GOOGLE_BUSINESS_CHAT="gbm",t.SHOPIFY="shopify",t.FACEBOOK="facebook",t.EMAIL="email",t.SMTP="smtp",t.FACEBOOK_CATALOG="facebook-catalog",t.TASKS="tasks",t.BIK_LIVECHAT="livechat"}(f||(f={}));const E=r=>{const[E,j]=s(!1),v=()=>{const t=(r.name||"").split(".").join(" ").split(" ").map((t=>t.charAt(0).toUpperCase())).slice(0,2).join("");return r.size===o.SMALL?e(c,Object.assign({style:{color:S[r.background]}},{children:t})):r.size===o.MEDIUM||r.size===o.INBOX?e(l,Object.assign({style:{color:S[r.background]}},{children:t})):r.size===o.LARGE?e(d,Object.assign({style:{color:S[r.background]}},{children:t})):void 0};return t("div",Object.assign({style:{position:"relative"}},{children:[t(i,Object.assign({type:r.type===a.IMAGE&&(E||!r.photoUrl)&&r.useNameFallback&&r.name?a.INITIALS:r.type,size:r.size,background:r.background},{children:[r.type===a.IMAGE&&(r.useNameFallback&&(!r.photoUrl||E)&&r.name?e("div",{children:v()}):r.useNameFallback&&r.photoUrl&&!E?e("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl,onError:()=>{j(!0)}}):e("img",{alt:"",width:n[r.size],height:n[r.size],style:{borderRadius:(null==r?void 0:r.borderRadius)||"50%",objectFit:"contain"},src:r.photoUrl})),r.type===a.INITIALS&&e("div",{children:v()}),r.type===a.ICON&&r.icon&&e(r.icon,{width:y[r.size],height:y[r.size],color:S[r.background]})]})),r.inboxSettings&&e("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:14,height:14,borderRadius:(null==r?void 0:r.borderRadius)||"50%",display:"flex",justifyContent:"center",backgroundColor:r.inboxSettings.isSelected?r.inboxSettings.isComments?h.content.primary:h.background.brandLight:r.inboxSettings.isComments?h.content.primary:h.surface.standard,alignItems:"center"}},{children:(()=>{switch(r.channelName){case f.EMAIL:case f.SMTP:return e(m,{width:11,height:11});case f.FACEBOOK:case f.FACEBOOK_CATALOG:case f.MESSENGER:return e(g,{width:11,height:11});case f.INSTAGRAM:return e(b,{width:11,height:11});case f.WHATSAPP:return e(I,{width:11,height:11});case f.GMAIL:return e(u,{width:11,height:11});case f.TASKS:return e(A,{width:11,height:11});case f.BIK_LIVECHAT:return e(p,{width:11,height:11})}})()})),r.status&&e("div",Object.assign({style:{position:"absolute",left:y[r.size]+"px",top:y[r.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:h.surface.standard,alignItems:"center"}},{children:r.status?e("div",{style:{backgroundColor:"ONLINE"===r.status?h.special.whatsapp.brand:h.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null}))]}))};export{y as AVATAR_SIZE_VS_ICON_SIZE_MAP,E as Avatar,S as BACKGROUND_VS_TEXT_COLOR_MAP,f as MESSAGE_CHANNELS};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","EXTRA_SMALL","SMALL","MEDIUM","LARGE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","LIGHT","COLORS","content","secondary","WHITE","DARK","surface","standard","BRAND","background","inverseLight","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","name","split","join","map","e","charAt","toUpperCase","slice","color","size","_jsx","TitleMedium","Object","assign","style","children","TitleSmall","BodyTiny","_jsxs","position","AvatarStyle","type","AVATAR_TYPES","IMAGE","photoUrl","useNameFallback","INITIALS","alt","width","AVATAR_SIZE_MAP","height","borderRadius","objectFit","src","onError","ICON","icon","inboxSettings","left","top","display","justifyContent","backgroundColor","isSelected","isComments","primary","brandLight","alignItems","getChannelIcon","channelName","EMAIL","SMTP","EmailIcon","FACEBOOK","FACEBOOK_CATALOG","MESSENGER","FacebookIcon","INSTAGRAM","InstagramIcon","WHATSAPP","WhatsappIcon","GMAIL","GmailIcon","TASKS","TaskIcon","BIK_LIVECHAT","BikLivechatIcon","status","special","whatsapp","brand","inactive"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM || props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","SMALL","MEDIUM","INBOX","LARGE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","LIGHT","COLORS","content","secondary","WHITE","DARK","surface","standard","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","name","split","join","map","e","charAt","toUpperCase","slice","size","_jsx","BodyTiny","Object","assign","style","color","background","TitleSmall","TitleMedium","_jsxs","position","children","AvatarStyle","type","AVATAR_TYPES","IMAGE","photoUrl","useNameFallback","INITIALS","alt","width","AVATAR_SIZE_MAP","height","borderRadius","objectFit","src","onError","ICON","icon","inboxSettings","left","top","display","justifyContent","backgroundColor","isSelected","isComments","primary","brandLight","alignItems","getChannelIcon","channelName","EMAIL","SMTP","EmailIcon","FACEBOOK","FACEBOOK_CATALOG","MESSENGER","FacebookIcon","INSTAGRAM","InstagramIcon","WHATSAPP","WhatsappIcon","GMAIL","GmailIcon","TASKS","TaskIcon","BIK_LIVECHAT","BikLivechatIcon","status","special","whatsapp","brand","inactive"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import r from"styled-components";import{AVATAR_SIZE_MAP as
|
|
2
|
-
width: ${r=>
|
|
3
|
-
height: ${r=>
|
|
1
|
+
import r from"styled-components";import{AVATAR_SIZE_MAP as e,AVATAR_TYPES as o,AVATAR_BACKGROUND as t}from"./AvatarHelper.js";import{COLORS as n}from"../../constants/Theme.js";const s=r.div`
|
|
2
|
+
width: ${r=>e[r.size]+"px"};
|
|
3
|
+
height: ${r=>e[r.size]+"px"};
|
|
4
4
|
display: flex;
|
|
5
5
|
justify-content: center;
|
|
6
6
|
align-items: center;
|
|
7
|
-
background-color: ${r=>r.type===
|
|
8
|
-
border: ${r=>r.background===
|
|
7
|
+
background-color: ${r=>r.type===o.IMAGE?"null":r.background===t.LIGHT?n.background.base:r.background===t.WHITE?n.surface.standard:n.background.inverse};
|
|
8
|
+
border: ${r=>r.background===t.LIGHT||r.background===t.WHITE?"1px solid "+n.stroke.primary:0};
|
|
9
9
|
border-radius: 50%;
|
|
10
|
-
`;export{
|
|
10
|
+
`;export{s as AvatarStyle};
|
|
11
11
|
//# sourceMappingURL=Avatar.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t:
|
|
1
|
+
{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","div","props","AVATAR_SIZE_MAP","size","type","AVATAR_TYPES","IMAGE","background","AVATAR_BACKGROUND","LIGHT","COLORS","base","WHITE","surface","standard","inverse","stroke","primary"],"mappings":"gLASaA,MAAAA,EAAcC,EAAOC,GAIhC;UACSC,GAAUC,EAAgBD,EAAME,MAAQ;WACvCF,GAAUC,EAAgBD,EAAME,MAAQ;;;;qBAI9BF,GACpBA,EAAMG,OAASC,EAAaC,MACzB,OACAL,EAAMM,aAAeC,EAAkBC,MACvCC,EAAOH,WAAWI,KAClBV,EAAMM,aAAeC,EAAkBI,MACvCF,EAAOG,QAAQC,SACfJ,EAAOH,WAAWQ;WACXd,GACVA,EAAMM,aAAeC,EAAkBC,OACvCR,EAAMM,aAAeC,EAAkBI,MACpC,aAAeF,EAAOM,OAAOC,QAC7B;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var I,L,A;!function(I){I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON"}(I||(I={})),function(I){I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX"}(L||(L={})),function(I){I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE"}(A||(A={}));const M={[L.SMALL]:24,[L.MEDIUM]:40,[L.LARGE]:64,[L.INBOX]:30};export{A as AVATAR_BACKGROUND,M as AVATAR_SIZE_MAP,I as AVATAR_TYPES,L as SIZE};
|
|
2
2
|
//# sourceMappingURL=AvatarHelper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\
|
|
1
|
+
{"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\tSMALL = 'SMALL',\n\tMEDIUM = 'MEDIUM',\n\tLARGE = 'LARGE',\n\tINBOX = 'INBOX',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.SMALL]: 24,\n\t[SIZE.MEDIUM]: 40,\n\t[SIZE.LARGE]: 64,\n\t[SIZE.INBOX]: 30,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP","SMALL","MEDIUM","LARGE","INBOX"],"mappings":"IAAYA,EAMAC,EAOAC,GAbZ,SAAYF,GACXA,EAAA,MAAA,QACAA,EAAA,SAAA,WACAA,EAAA,KAAA,MACA,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACXA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,MAAA,OACA,CALD,CAAYA,IAAAA,EAKX,CAAA,IAED,SAAYC,GACXA,EAAA,MAAA,QACAA,EAAA,KAAA,OACAA,EAAA,MAAA,OACA,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAEM,MAAMC,EAAkB,CAC9B,CAACF,EAAKG,OAAQ,GACd,CAACH,EAAKI,QAAS,GACf,CAACJ,EAAKK,OAAQ,GACd,CAACL,EAAKM,OAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BikSidebar.js","sources":["../../../../src/components/bik-layout/BikSidebar.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './Sidebar.model';\nimport { SidebarPopup } from './SidebarPopup';\nimport {\n\tMainSideBarMenuWrapper,\n\tSibeBarMenuItem,\n\tSideBarContainer,\n} from './SidebarStyles';\nimport { SimpleSidebar } from './SimpleSidebar';\n\nexport interface MenuItem {\n\tkey: string | number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' | 'popup' | string | undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarProps {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItem[];\n\tactiveMainMenu: MenuItem;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItem) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarMenuItemProps {\n\toption: MenuItem;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItem) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItem) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItem | undefined;\n\thoveredComp: MenuItem | undefined;\n\tpopupMenu: MenuItem | undefined;\n}\n\nexport const BikSidebar: React.FC<BikSidebarProps> = (bikSidebarProps) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarProps;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItem>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItem>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItem>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst [autoCloseTimer, setAutoCloseTimer] = useState<NodeJS.Timeout | null>(\n\t\tnull,\n\t);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky || menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItem) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItem) => {\n\t\tclearRemnantTimers();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') || option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t\tinitiateAutoClose();\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (targetElement: HTMLElement) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerStickyElements = targetElement.querySelectorAll('div');\n\t\tlet innerStickyElement = null as HTMLElement | null;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tinnerStickyElements.forEach((element) => {\n\t\t\tif (element.className.includes('sticky')) {\n\t\t\t\tinnerStickyElement = element;\n\t\t\t}\n\t\t});\n\t\tif (innerStickyElement) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst initiateAutoClose = () => {\n\t\tclearRemnantTimers();\n\t\tconst timer = setTimeout(() => setHoveredComp(undefined), 10000); // 10-second delay\n\t\tsetAutoCloseTimer(timer);\n\t};\n\n\tconst clearRemnantTimers = () => {\n\t\tclearTimeout(autoCloseTimer!);\n\t};\n\n\treturn (\n\t\t<SideBarContainer>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarMenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarPopup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setPopupMenu(undefined)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebar\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={() => clearRemnantTimers()}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => {\n\t\t\t\t\t\t\t\t\t\tclearRemnantTimers();\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 92 : 88}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarProps.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarMenuItem>\n\t\t\t\t\t\t<div className=\"main--sidebar\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tclassName={`sidebar-menu-item ${\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu'\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu-int'\n\t\t\t\t\t\t\t\t\t\t: 'sticky-menu-three'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarProps.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</SibeBarMenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarMenuWrapper>\n\t\t</SideBarContainer>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon, hoverStateIcon, isHovered } =\n\t\ticonComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\tconst HoverIcon = hoverStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon width={20} height={20} />\n\t\t\t) : isHovered ? (\n\t\t\t\t<HoverIcon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t) : (\n\t\t\t\t<Icon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarMenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tsetHoveredComp,\n\tsetPopupMenu,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n}) => {\n\treturn (\n\t\t<SibeBarMenuItem>\n\t\t\t<div\n\t\t\t\tid={option.displayName?.split(' ')?.join('') || option.key.toString()}\n\t\t\t\tclassName=\"main--sidebar\"\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tif (!option?.children?.length) {\n\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\t// do nothing\n\t\t\t\t}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<div className={`new-tag ${option.isLastSticky ? 'tag-sticky' : ''}`}>\n\t\t\t\t\t\tNEW\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`locked--channel ${\n\t\t\t\t\t\t\toption.isLastSticky ? 'tag-sticky' : ''\n\t\t\t\t\t\t} ${option.is2ndLastSticky ? 'tag-sticky-2' : ''}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tclassName={`sidebar-menu-item \n\t\t\t\t\t${mainActiveMenu?.key === option.key ? 'main-menu-active-class' : ''} \n\t\t\t\t\t${option.isLastSticky ? 'sticky-menu-int' : ''} \n\t\t\t\t\t${option.is2ndLastSticky ? 'sticky-menu' : ''} \n\t\t\t\t\t${option.key === hoveredComp?.key ? 'sidebar-menu-item-hover' : ''} \n\t\t\t\t\t${option.isNew ? 'new-menu-item' : ''}`}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key || option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"menu-item-container\">\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={`menu-item-text ${\n\t\t\t\t\t\t\t\toption?.key === mainActiveMenu?.key\n\t\t\t\t\t\t\t\t\t? 'active-menu-item-text'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.displayName}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</SibeBarMenuItem>\n\t);\n};\n"],"names":["BikSidebar","bikSidebarProps","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","autoCloseTimer","setAutoCloseTimer","numberOfStickyOptions","useMemo","filter","menu","is2ndLastSticky","isLastSticky","length","useEffect","onClickMainMenuLogic","useCallback","option","layout","undefined","path","_a","children","setTimeout","setHandleHoverForFullLayout","clearRemnantTimers","top","determineElementTop","targetElement","document","getElementById","_b","displayName","split","join","key","toString","topValue","calculateTopSideBarPosition","initiateAutoClose","targetRect","getBoundingClientRect","innerStickyElements","querySelectorAll","innerStickyElement","window","innerHeight","forEach","element","className","includes","distanceToBottom","bottom","handleResize","newTop","determineSideMenuTopWhileResize","addEventListener","removeEventListener","openSideMenuElement","openSideMenuElementHeight","height","currentId","sideMenuRect","divBoxTop","popupHeight","timer","clearTimeout","_jsxs","SideBarContainer","_jsx","Object","assign","onClick","onKeyDown","BikIcon","MainSideBarMenuWrapper","style","map","index","Fragment","NavigationHyperlink","href","EachSidebarMenuItem","_Fragment","SidebarPopup","menuList","onClickingPopupMenu","popupMenuSelected","onMouseLeaveOnMenu","SimpleSidebar","activeMenu","onMouseEnterOnMenu","left","postion","header","theme","showAccessUpgradePanel","onMenuClick","menuSelected","reDirect","onUpgrade","onboardingPercentage","SibeBarMenuItem","id","CircularProgressBar","percentage","width","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","hoverStateIcon","isHovered","Icon","HoverIcon","color","COLORS","surface","standard","_ref","onMouseEnter","onMouseOver","onMouseLeave","onFocus","isNew","isLocked","LockedIcon","_d","_c","_e","activeIcon","hoverIcon","_f"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BikSidebar.js","sources":["../../../../src/components/bik-layout/BikSidebar.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './Sidebar.model';\nimport { SidebarPopup } from './SidebarPopup';\nimport {\n\tMainSideBarMenuWrapper,\n\tSibeBarMenuItem,\n\tSideBarContainer,\n} from './SidebarStyles';\nimport { SimpleSidebar } from './SimpleSidebar';\n\nexport interface MenuItem {\n\tkey: string | number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' | 'popup' | string | undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarProps {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItem[];\n\tactiveMainMenu: MenuItem;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItem) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarMenuItemProps {\n\toption: MenuItem;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItem) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItem) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItem | undefined;\n\thoveredComp: MenuItem | undefined;\n\tpopupMenu: MenuItem | undefined;\n}\n\nexport const BikSidebar: React.FC<BikSidebarProps> = (bikSidebarProps) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarProps;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItem>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItem>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItem>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst [autoCloseTimer, setAutoCloseTimer] = useState<NodeJS.Timeout | null>(\n\t\tnull,\n\t);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky || menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItem) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItem) => {\n\t\tclearRemnantTimers();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') || option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t\tinitiateAutoClose();\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (targetElement: HTMLElement) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerStickyElements = targetElement.querySelectorAll('div');\n\t\tlet innerStickyElement = null as HTMLElement | null;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tinnerStickyElements.forEach((element) => {\n\t\t\tif (element.className.includes('sticky')) {\n\t\t\t\tinnerStickyElement = element;\n\t\t\t}\n\t\t});\n\t\tif (innerStickyElement) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst initiateAutoClose = () => {\n\t\tclearRemnantTimers();\n\t\tconst timer = setTimeout(() => setHoveredComp(undefined), 10000); // 10-second delay\n\t\tsetAutoCloseTimer(timer);\n\t};\n\n\tconst clearRemnantTimers = () => {\n\t\tclearTimeout(autoCloseTimer!);\n\t};\n\n\treturn (\n\t\t<SideBarContainer>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarMenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarPopup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setPopupMenu(undefined)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebar\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={() => clearRemnantTimers()}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => {\n\t\t\t\t\t\t\t\t\t\tclearRemnantTimers();\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 92 : 88}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>\n\t\t\t\t\t</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarProps.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarMenuItem>\n\t\t\t\t\t\t<div className=\"main--sidebar\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tclassName={`sidebar-menu-item ${\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu'\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu-int'\n\t\t\t\t\t\t\t\t\t\t: 'sticky-menu-three'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarProps.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</SibeBarMenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarMenuWrapper>\n\t\t</SideBarContainer>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon, hoverStateIcon, isHovered } =\n\t\ticonComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\tconst HoverIcon = hoverStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon width={20} height={20} />\n\t\t\t) : isHovered ? (\n\t\t\t\t<HoverIcon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t) : (\n\t\t\t\t<Icon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarMenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tsetHoveredComp,\n\tsetPopupMenu,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n}) => {\n\treturn (\n\t\t<SibeBarMenuItem>\n\t\t\t<div\n\t\t\t\tid={option.displayName?.split(' ')?.join('') || option.key.toString()}\n\t\t\t\tclassName=\"main--sidebar\"\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tif (!option?.children?.length) {\n\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<div className={`new-tag ${option.isLastSticky ? 'tag-sticky' : ''}`}>\n\t\t\t\t\t\tNEW\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`locked--channel ${\n\t\t\t\t\t\t\toption.isLastSticky ? 'tag-sticky' : ''\n\t\t\t\t\t\t} ${option.is2ndLastSticky ? 'tag-sticky-2' : ''}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tclassName={`sidebar-menu-item \n\t\t\t\t\t${mainActiveMenu?.key === option.key ? 'main-menu-active-class' : ''} \n\t\t\t\t\t${option.isLastSticky ? 'sticky-menu-int' : ''} \n\t\t\t\t\t${option.is2ndLastSticky ? 'sticky-menu' : ''} \n\t\t\t\t\t${option.key === hoveredComp?.key ? 'sidebar-menu-item-hover' : ''} \n\t\t\t\t\t${option.isNew ? 'new-menu-item' : ''}`}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key || option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"menu-item-container\">\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={`menu-item-text ${\n\t\t\t\t\t\t\t\toption?.key === mainActiveMenu?.key\n\t\t\t\t\t\t\t\t\t? 'active-menu-item-text'\n\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.displayName}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</SibeBarMenuItem>\n\t);\n};\n"],"names":["BikSidebar","bikSidebarProps","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","autoCloseTimer","setAutoCloseTimer","numberOfStickyOptions","useMemo","filter","menu","is2ndLastSticky","isLastSticky","length","useEffect","onClickMainMenuLogic","useCallback","option","layout","undefined","path","_a","children","setTimeout","setHandleHoverForFullLayout","clearRemnantTimers","top","determineElementTop","targetElement","document","getElementById","_b","displayName","split","join","key","toString","topValue","calculateTopSideBarPosition","initiateAutoClose","targetRect","getBoundingClientRect","innerStickyElements","querySelectorAll","innerStickyElement","window","innerHeight","forEach","element","className","includes","distanceToBottom","bottom","handleResize","newTop","determineSideMenuTopWhileResize","addEventListener","removeEventListener","openSideMenuElement","openSideMenuElementHeight","height","currentId","sideMenuRect","divBoxTop","popupHeight","timer","clearTimeout","_jsxs","SideBarContainer","_jsx","Object","assign","onClick","onKeyDown","BikIcon","MainSideBarMenuWrapper","style","map","index","Fragment","NavigationHyperlink","href","EachSidebarMenuItem","_Fragment","SidebarPopup","menuList","onClickingPopupMenu","popupMenuSelected","onMouseLeaveOnMenu","SimpleSidebar","activeMenu","onMouseEnterOnMenu","left","postion","header","theme","showAccessUpgradePanel","onMenuClick","menuSelected","reDirect","onUpgrade","onboardingPercentage","SibeBarMenuItem","id","CircularProgressBar","percentage","width","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","hoverStateIcon","isHovered","Icon","HoverIcon","color","COLORS","surface","standard","_ref","onMouseEnter","onMouseOver","onMouseLeave","onFocus","isNew","isLocked","LockedIcon","_d","_c","_e","activeIcon","hoverIcon","_f"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as n,Fragment as i}from"react/jsx-runtime";import o,{forwardRef as s,useCallback as a}from"react";import{Spinner as r}from"../spinner/Spinner.js";import{Button as c,ButtonCustomDashedBorder as l}from"./Button.styled.js";import{getButtonIconColor as d,SpinnerColorMap as m,GetButtonTextComponent as b}from"./themes.js";const u=s(((s,u)=>{var{version:g,id:h,buttonType:p="primary",size:v="small",buttonText:j,disabled:y,IconComponent:C,LeadingIcon:I,TrailingIcon:x,isLoading:N,inverse:z,onClick:O,matchParentWidth:T,subtitle:f,darkMode:k,activated:L,error:S,buttonTextColor:W,buttonFontSize:B,customIconColor:E,buttonColor:M,LeadingIconStyles:P}=s,F=t(s,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles"]);const _=b(v,p,y),w=d(v,p,z,y,N,k),q=a((()=>{const t="chip"===v
|
|
1
|
+
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as n,Fragment as i}from"react/jsx-runtime";import o,{forwardRef as s,useCallback as a}from"react";import{Spinner as r}from"../spinner/Spinner.js";import{Button as c,ButtonCustomDashedBorder as l}from"./Button.styled.js";import{getButtonIconColor as d,SpinnerColorMap as m,GetButtonTextComponent as b}from"./themes.js";const u=s(((s,u)=>{var{version:g,id:h,buttonType:p="primary",size:v="small",buttonText:j,disabled:y,IconComponent:C,LeadingIcon:I,TrailingIcon:x,isLoading:N,inverse:z,onClick:O,matchParentWidth:T,subtitle:f,darkMode:k,activated:L,error:S,buttonTextColor:W,buttonFontSize:B,customIconColor:E,buttonColor:M,LeadingIconStyles:P}=s,F=t(s,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles"]);const _=b(v,p,y),w=d(v,p,z,y,N,k),q=a((()=>{const t="chip"===v?16:20;return{height:t,width:t,color:E||w,style:{display:"block"},className:"icon"}}),[v,E,w]);return e(c,Object.assign({"data-test":F["data-test"],version:g,onClick:N?()=>{}:O,ref:u,id:h,disabled:y,size:v,buttonType:p,isLoading:N,inverse:z,matchParentWidth:T,darkMode:k,activated:L,error:S,buttonColor:M},F,{children:n("div",Object.assign({className:"button-container"},{children:[p.startsWith("dash")&&e(l,{}),e("div",Object.assign({className:"overlay-container"},{children:N&&e(r,{className:"spinner",size:"small",color:m(p,z)})})),C&&e("div",Object.assign({className:"icon-component"},{children:o.createElement(C,q())})),I&&e("div",Object.assign({className:"icon-leading",style:Object.assign({zIndex:1},P)},{children:o.createElement(I,q())})),j?n(_,Object.assign({className:"text",style:{color:W,fontSize:B}},{children:[j,e("div",Object.assign({className:"text-subtitle"},{children:f}))]})):e(i,{}),x&&e("div",Object.assign({className:"icon-trailing",style:{zIndex:1}},{children:o.createElement(x,q())}))]}))}))}));u.displayName="Button";export{u as Button};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip'
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","_a","ref","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","__rest","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","height","width","color","style","display","className","_jsx","Sc","children","_jsxs","Object","assign","startsWith","Spinner","SpinnerColorMap","React","createElement","zIndex","fontSize","_Fragment","displayName"],"mappings":"qYAWO,MAAMA,EAASC,GACrB,CACCC,EAyBAC,SAzBAC,QACCA,EAAOC,GACPA,EAAEC,WACFA,EAAa,UAASC,KACtBA,EAAO,QAAOC,WACdA,EAAUC,SACVA,EAAQC,cACRA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,UACZA,EAASC,QACTA,EAAOC,QACPA,EAAOC,iBACPA,EAAgBC,SAChBA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,EAAKC,gBACLA,EAAeC,eACfA,EAAcC,gBACdA,EAAeC,YACfA,EAAWC,kBACXA,KACGC,EAvBJC,EAAAzB,EAAA,CAAA,UAAA,KAAA,aAAA,OAAA,aAAA,WAAA,gBAAA,cAAA,eAAA,YAAA,UAAA,UAAA,mBAAA,WAAA,WAAA,YAAA,QAAA,kBAAA,iBAAA,kBAAA,cAAA,sBA2BA,MAAM0B,EAAoBC,EACzBtB,EACAD,EACAG,GAGKqB,EAAYC,EACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,GAGKc,EAAeC,GAAY,KAChC,MAAMC,EAAoB,SAAT3B,EAAkB,GAAK,GACxC,MAAO,CACN4B,OAAQD,EACRE,MAAOF,EACPG,MAAOd,GAAoCO,EAC3CQ,MAAO,CAAEC,QAAS,SAClBC,UAAW,OACX,GACC,CAACjC,EAAMgB,EAAiBO,IAE3B,OACCW,EAACC,6BACWhB,EAAK,aAChBtB,QAASA,EACTW,QACCF,EACG,OAGAE,EAEJZ,IAAKA,EACLE,GAAIA,EACJI,SAAUA,EACVF,KAAMA,EACND,WAAYA,EACZO,UAAWA,EACXC,QAASA,EACTE,iBAAkBA,EAClBE,SAAUA,EACVC,UAAWA,EACXC,MAAOA,EACPI,YAAaA,GACTE,EAEJ,CAAAiB,SAAAC,EAAA,MAAAC,OAAAC,OAAA,CAAKN,UAAU,+BACblC,EAAWyC,WAAW,SAAWN,EAACC,EAA2B,CAAA,GAC9DD,EAAA,MAAAI,OAAAC,OAAA,CAAKN,UAAU,+BACb3B,GACA4B,EAACO,EACA,CAAAR,UAAU,UACVjC,KAAK,QACL8B,MAAOY,EAAgB3C,EAAYQ,QAIrCJ,GACA+B,EAAK,MAAAI,OAAAC,OAAA,CAAAN,UAAU,4BACbU,EAAMC,cAAczC,EAAesB,QAGrCrB,GACA8B,uBACCD,UAAU,eACVF,MAASO,OAAAC,OAAA,CAAAM,OAAQ,GAAM3B,IAAiB,CAAAkB,SAEvCO,EAAMC,cAAcxC,EAAaqB,QAGnCxB,EACAoC,EAAChB,EACAiB,OAAAC,OAAA,CAAAN,UAAU,OACVF,MAAO,CACND,MAAOhB,EACPgC,SAAU/B,IAGV,CAAAqB,SAAA,CAAAnC,EACDiC,EAAK,MAAAI,OAAAC,OAAA,CAAAN,UAAU,iBAAe,CAAAG,SAAE1B,SAGjCwB,EAAKa,EAAA,CAAA,GAEL1C,GACA6B,EAAA,MAAAI,OAAAC,OAAA,CAAKN,UAAU,gBAAgBF,MAAO,CAAEc,OAAQ,IAC9C,CAAAT,SAAAO,EAAMC,cAAcvC,EAAcoB,cAI3B,IAKfhC,EAAOuD,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import c from"@emotion/styled/base";import{jsxs as t,Fragment as d,jsx as n}from"react/jsx-runtime";import{COLORS as b}from"../../constants/Theme.js";import{getBackgroundColor as H,getPadding as l,getBorder as X,getColor as i,getDashedBorderStyling as e,getClickEffect as x,generateDisabledStyling as I,getDisabledTextColor as G,getHoverButtonBackgroundCustom as R,getHoverButtonBackground as g,getHoverButtonTextDecorationStyle as o,generateInverseHoverBackground as u,getLoadingBorder as y,getLoadingButtonBackgroundCustom as m,getLoadingBackground as a}from"./themes.js";const Z=c("button","production"===process.env.NODE_ENV?{target:"exlualr0"}:{target:"exlualr0",label:"Button"})("all:unset;outline:none;cursor:pointer;display:flex;gap:8.83px;border-radius:",(c=>"text"==c.buttonType?"0":"4px"),";overflow:hidden;",(c=>c.matchParentWidth?"flex-grow: 1;":"")," background-color:",(c=>H(c.buttonType,c.size,c.inverse,c.darkMode,c.buttonColor)),";",(c=>{var t;return c.buttonType.startsWith("dash")?`.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${c.matchParentWidth?"justify-content: center;":""}\n\t\t\t\t\tpadding: ${l(c.buttonType,c.size)};\n\t\t\t\t}`:`padding: ${l(c.buttonType,c.size)};\n\t${X(null!==(t=c.version)&&void 0!==t?t:"1.0",c.buttonType,c.size,c.inverse,c.error)}`})," .icon-component{height:",(c=>"chip"===c.size||"xs"===c.size?"16px":"20px"),";width:",(c=>"chip"===c.size||"xs"===c.size?"16px":"20px"),";}.icon-trailing{height:",(c=>"chip"===c.size||"xs"===c.size?"16px":"20px"),";width:",(c=>"chip"===c.size||"xs"===c.size?"16px":"20px"),";}.text{color:",(c=>i(c.buttonType,c.size,c.inverse,c.darkMode)),";}.icon-leading{height:",(c=>"chip"===c.size||"xs"===c.size?"16px":"20px"),";width:",(c=>"chip"===c.size||"xs"===c.size?"16px":"20px"),";}",(c=>e(c.buttonType,c.size,c.isLoading?b.stroke.brandLightAlt:c.error?b.stroke.negative.vibrant:void 0))," .overlay-container{display:none;}",(c=>!c.disabled&&!c.isLoading&&c.activated&&("dashBold"==c.buttonType||"dashRegular"==c.buttonType)&&`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${c.matchParentWidth?"justify-content: center;":""}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t.text {\n\t\t\tcolor: ${b.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${b.background.brand};\n\t\t}\n\t\t\n\t}\n\t${x(c.buttonType,c.size,c.inverse)}\n\t${e(c.buttonType,c.size,b.content.brand)}\n\t`)," :disabled{cursor:",(c=>"text"===c.buttonType?"auto":"not-allowed"),";",(c=>e(c.buttonType,c.size,b.stroke.primary)),";.overlay-container{display:none!important;}",(c=>I(c.buttonType,c.size,c.inverse))," .text{color:",(c=>G(c.inverse)),"!important;}}",(c=>!c.disabled&&!c.isLoading&&`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${c.matchParentWidth?"justify-content: center;":""}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${"chip"===c.size&&`.text {\n\t\t\t\t\t\tcolor: ${b.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${b.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t}\n\n\n\t\t\t${x(c.buttonType,c.size,c.inverse)}\n\t\t\t${e(c.buttonType,c.size,b.content.brand)}\n\t\t}`)," ",(c=>c.isLoading?`\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${y(c.buttonType,c.size,c.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${c.buttonColor?`background-color: ${m(c.buttonColor,15)};`:""}\n\t\t\tpadding: ${l(c.buttonType,c.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${a(c.buttonType,c.size,c.inverse,c.buttonColor)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`:`:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${c.matchParentWidth?"justify-content: center;":""}\n\t\t\t\tpadding: ${l(c.buttonType,c.size)};\n\t\t\t\t{${c.buttonColor?`background-color: ${R(c.buttonColor,15)}`:""}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${g(c.buttonType,c.inverse)}\n\t\t\t\t}\n\t\t\t\t${"chip"===c.size&&"text"!==c.buttonType?c.darkMode?`background-color: ${b.stroke.primary};`:`background-color: ${b.surface.hovered};`:""}\n\t\t\t\t${"special"===c.buttonType?`background-color: ${b.background.brandLight};`:"secondaryGray"===c.buttonType?`background-color: ${b.surface.hovered};`:""}\n\t\t\t\t${"primary"!==c.buttonType||"chip"===c.size||"xs"===c.size||c.inverse||c.buttonColor?"":`background-color: ${b.background.inverse};`}\n\t\t\t}\n\t\t\t${"text"===c.buttonType?o(c.buttonType,c.disabled):""}\n\t\t\t${c.inverse?u(c.buttonType,c.disabled):""}\n\t\t}`)," .button-container{display:flex;gap:8.33px;",(c=>c.matchParentWidth?"margin: auto;":""),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvQyIsImZpbGUiOiJCdXR0b24uc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4LCBGcmFnbWVudCBhcyBfRnJhZ21lbnQsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmltcG9ydCB7IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nLCBnZW5lcmF0ZUludmVyc2VIb3ZlckJhY2tncm91bmQsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0Qm9yZGVyLCBnZXRDbGlja0VmZmVjdCwgZ2V0Q29sb3IsIGdldERhc2hlZEJvcmRlclN0eWxpbmcsIGdldERpc2FibGVkVGV4dENvbG9yLCBnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmQsIGdldEhvdmVyQnV0dG9uQmFja2dyb3VuZEN1c3RvbSwgZ2V0SG92ZXJCdXR0b25UZXh0RGVjb3JhdGlvblN0eWxlLCBnZXRMb2FkaW5nQmFja2dyb3VuZCwgZ2V0TG9hZGluZ0JvcmRlciwgZ2V0TG9hZGluZ0J1dHRvbkJhY2tncm91bmRDdXN0b20sIGdldFBhZGRpbmcsIH0gZnJvbSAnLi90aGVtZXMnO1xyXG5leHBvcnQgY29uc3QgQnV0dG9uID0gc3R5bGVkLmJ1dHRvbiBgXG5cdGFsbDogdW5zZXQ7XG5cdG91dGxpbmU6IG5vbmU7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiA4LjgzcHg7XG5cdGJvcmRlci1yYWRpdXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYnV0dG9uVHlwZSA9PSAndGV4dCcgPyAnMCcgOiAnNHB4Jyl9O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHQkeyhwcm9wcykgPT4gKHByb3BzLm1hdGNoUGFyZW50V2lkdGggPyBgZmxleC1ncm93OiAxO2AgOiAnJyl9XG5cdGJhY2tncm91bmQtY29sb3I6ICR7KHByb3BzKSA9PiBnZXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSwgcHJvcHMuZGFya01vZGUsIHByb3BzLmJ1dHRvbkNvbG9yKX07XG5cblx0JHsocHJvcHMpID0+IHtcclxuICAgIHZhciBfYTtcclxuICAgIHJldHVybiBwcm9wcy5idXR0b25UeXBlLnN0YXJ0c1dpdGgoJ2Rhc2gnKVxyXG4gICAgICAgID8gYC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0XHRcdFx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0XHRcdFx0XHQke3Byb3BzLm1hdGNoUGFyZW50V2lkdGggPyAnanVzdGlmeS1jb250ZW50OiBjZW50ZXI7JyA6ICcnfVxuXHRcdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdH1gXHJcbiAgICAgICAgOiBgcGFkZGluZzogJHtnZXRQYWRkaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUpfTtcblx0JHtnZXRCb3JkZXIoKF9hID0gcHJvcHMudmVyc2lvbikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJzEuMCcsIHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UsIHByb3BzLmVycm9yKX1gO1xyXG59fVxuXG5cdC5pY29uLWNvbXBvbmVudCB7XG5cdFx0aGVpZ2h0OiAkeyhwcm9wcykgPT4gcHJvcHMuc2l6ZSA9PT0gJ2NoaXAnIHx8IHByb3BzLnNpemUgPT09ICd4cycgPyAnMTZweCcgOiAnMjBweCd9O1xuXHRcdHdpZHRoOiAkeyhwcm9wcykgPT4gcHJvcHMuc2l6ZSA9PT0gJ2NoaXAnIHx8IHByb3BzLnNpemUgPT09ICd4cycgPyAnMTZweCcgOiAnMjBweCd9O1xuXHR9XG5cblx0Lmljb24tdHJhaWxpbmcge1xuXHRcdGhlaWdodDogJHsocHJvcHMpID0+IHByb3BzLnNpemUgPT09ICdjaGlwJyB8fCBwcm9wcy5zaXplID09PSAneHMnID8gJzE2cHgnIDogJzIwcHgnfTtcblx0XHR3aWR0aDogJHsocHJvcHMpID0+IHByb3BzLnNpemUgPT09ICdjaGlwJyB8fCBwcm9wcy5zaXplID09PSAneHMnID8gJzE2cHgnIDogJzIwcHgnfTtcblx0fVxuXG5cdC50ZXh0IHtcblx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldENvbG9yKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UsIHByb3BzLmRhcmtNb2RlKX07XG5cdH1cblxuXHQuaWNvbi1sZWFkaW5nIHtcblx0XHRoZWlnaHQ6ICR7KHByb3BzKSA9PiBwcm9wcy5zaXplID09PSAnY2hpcCcgfHwgcHJvcHMuc2l6ZSA9PT0gJ3hzJyA/ICcxNnB4JyA6ICcyMHB4J307XG5cdFx0d2lkdGg6ICR7KHByb3BzKSA9PiBwcm9wcy5zaXplID09PSAnY2hpcCcgfHwgcHJvcHMuc2l6ZSA9PT0gJ3hzJyA/ICcxNnB4JyA6ICcyMHB4J307XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gZ2V0RGFzaGVkQm9yZGVyU3R5bGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pc0xvYWRpbmdcclxuICAgID8gQ09MT1JTLnN0cm9rZS5icmFuZExpZ2h0QWx0XHJcbiAgICA6IHByb3BzLmVycm9yXHJcbiAgICAgICAgPyBDT0xPUlMuc3Ryb2tlLm5lZ2F0aXZlLnZpYnJhbnRcclxuICAgICAgICA6IHVuZGVmaW5lZCl9XG5cblx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBub25lO1xuXHR9XG5cblx0JHsocHJvcHMpID0+ICFwcm9wcy5kaXNhYmxlZCAmJlxyXG4gICAgIXByb3BzLmlzTG9hZGluZyAmJlxyXG4gICAgcHJvcHMuYWN0aXZhdGVkICYmXHJcbiAgICAocHJvcHMuYnV0dG9uVHlwZSA9PSAnZGFzaEJvbGQnIHx8IHByb3BzLmJ1dHRvblR5cGUgPT0gJ2Rhc2hSZWd1bGFyJykgJiZcclxuICAgIGBcblx0LmJ1dHRvbi1jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0JHtwcm9wcy5tYXRjaFBhcmVudFdpZHRoID8gJ2p1c3RpZnktY29udGVudDogY2VudGVyOycgOiAnJ31cblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDtcblx0XHR9XG5cdFx0JHtgLnRleHQge1xuXHRcdFx0Y29sb3I6ICR7Q09MT1JTLmNvbnRlbnQuYnJhbmR9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdC5pY29uIHtcblx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kfTtcblx0XHR9XG5cdFx0YH1cblx0fVxuXHQke2dldENsaWNrRWZmZWN0KHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRgfVxuXG5cdDpkaXNhYmxlZCB7XG5cdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDtcblx0XHR9XG5cdFx0Y3Vyc29yOiAkeyhwcm9wcykgPT4gcHJvcHMuYnV0dG9uVHlwZSA9PT0gJ3RleHQnID8gJ2F1dG8nIDogJ25vdC1hbGxvd2VkJ307XG5cdFx0JHsocHJvcHMpID0+IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0RGlzYWJsZWRUZXh0Q29sb3IocHJvcHMuaW52ZXJzZSl9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdCR7KHByb3BzKSA9PiBnZXREYXNoZWRCb3JkZXJTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIENPTE9SUy5zdHJva2UucHJpbWFyeSl9XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gIXByb3BzLmRpc2FibGVkICYmXHJcbiAgICAhcHJvcHMuaXNMb2FkaW5nICYmXHJcbiAgICBgOmFjdGl2ZSB7XG5cdFx0XHRcdC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdCR7cHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnIDogJyd9XG5cdFx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0XHRkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmXHJcbiAgICAgICAgYC50ZXh0IHtcblx0XHRcdFx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmludmVyc2VMaWdodH0gIWltcG9ydGFudDtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0Lmljb24ge1xuXHRcdFx0XHRcdFx0Y29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZUxpZ2h0fTtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0YH1cblx0XHRcdFx0fVxuXG5cblx0XHRcdCR7Z2V0Q2xpY2tFZmZlY3QocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSl9XG5cdFx0XHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRcdH1gfVxuXG5cdCR7KHByb3BzKSA9PiBcclxuLy8gZG8gbm90IGxvYWQgaG92ZXIgc3R5bGVzIGZvciBsb2FkaW5nIHN0YXRlIGFuZCBhbHNvIGFjdGl2ZSBzdGF0ZVxyXG4hcHJvcHMuaXNMb2FkaW5nXHJcbiAgICA/IGA6bm90KDphY3RpdmUpOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcblx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHQuYnV0dG9uLWNvbnRhaW5lciB7XG5cdFx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdCR7cHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnIDogJyd9XG5cdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdHske3Byb3BzLmJ1dHRvbkNvbG9yXHJcbiAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmRDdXN0b20ocHJvcHMuYnV0dG9uQ29sb3IsIDE1KX1gXHJcbiAgICAgICAgOiAnJ319XG5cdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdFx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHRcdFx0dG9wOiAwO1xuXHRcdFx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdFx0XHRcdCR7Z2V0SG92ZXJCdXR0b25CYWNrZ3JvdW5kKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLmludmVyc2UpfVxuXHRcdFx0XHR9XG5cdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmIHByb3BzLmJ1dHRvblR5cGUgIT09ICd0ZXh0J1xyXG4gICAgICAgID8gcHJvcHMuZGFya01vZGVcclxuICAgICAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3Ryb2tlLnByaW1hcnl9O2BcclxuICAgICAgICAgICAgOiBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3VyZmFjZS5ob3ZlcmVkfTtgXHJcbiAgICAgICAgOiAnJ31cblx0XHRcdFx0JHtwcm9wcy5idXR0b25UeXBlID09PSAnc3BlY2lhbCdcclxuICAgICAgICA/IGBiYWNrZ3JvdW5kLWNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kTGlnaHR9O2BcclxuICAgICAgICA6IHByb3BzLmJ1dHRvblR5cGUgPT09ICdzZWNvbmRhcnlHcmF5J1xyXG4gICAgICAgICAgICA/IGBiYWNrZ3JvdW5kLWNvbG9yOiAke0NPTE9SUy5zdXJmYWNlLmhvdmVyZWR9O2BcclxuICAgICAgICAgICAgOiAnJ31cblx0XHRcdFx0JHtwcm9wcy5idXR0b25UeXBlID09PSAncHJpbWFyeScgJiZcclxuICAgICAgICBwcm9wcy5zaXplICE9PSAnY2hpcCcgJiZcclxuICAgICAgICBwcm9wcy5zaXplICE9PSAneHMnICYmXHJcbiAgICAgICAgIXByb3BzLmludmVyc2UgJiZcclxuICAgICAgICAhcHJvcHMuYnV0dG9uQ29sb3JcclxuICAgICAgICA/IGBiYWNrZ3JvdW5kLWNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmludmVyc2V9O2BcclxuICAgICAgICA6ICcnfVxuXHRcdFx0fVxuXHRcdFx0JHtwcm9wcy5idXR0b25UeXBlID09PSAndGV4dCdcclxuICAgICAgICA/IGdldEhvdmVyQnV0dG9uVGV4dERlY29yYXRpb25TdHlsZShwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5kaXNhYmxlZClcclxuICAgICAgICA6ICcnfVxuXHRcdFx0JHtwcm9wcy5pbnZlcnNlXHJcbiAgICAgICAgPyBnZW5lcmF0ZUludmVyc2VIb3ZlckJhY2tncm91bmQocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuZGlzYWJsZWQpXHJcbiAgICAgICAgOiAnJ31cblx0XHR9YFxyXG4gICAgOiBgXG5cdFx0XHRjdXJzb3I6IG5vdC1hbGxvd2VkO1xuXHRcdFx0cGFkZGluZzogMDtcblx0XHQke2dldExvYWRpbmdCb3JkZXIocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSl9XG5cblx0XHQuYnV0dG9uLWNvbnRhaW5lciB7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHQudGV4dCB7XG5cdFx0XHRcdG9wYWNpdHk6IDA7XG5cdFx0XHR9XG5cdFx0XHQke3Byb3BzLmJ1dHRvbkNvbG9yXHJcbiAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRMb2FkaW5nQnV0dG9uQmFja2dyb3VuZEN1c3RvbShwcm9wcy5idXR0b25Db2xvciwgMTUpfTtgXHJcbiAgICAgICAgOiAnJ31cblx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHQub3ZlcmxheS1jb250YWluZXIge1xuXHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRcdFx0XHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0XHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdFx0XHRwYWRkaW5nOiAwO1xuXHRcdFx0XHR0b3A6IDA7XG5cdFx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRoZWlnaHQ6IDEwMCU7XG5cdFx0XHRcdCR7Z2V0TG9hZGluZ0JhY2tncm91bmQocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSwgcHJvcHMuYnV0dG9uQ29sb3IpfVxuXHRcdFx0XHQuc3Bpbm5lciB7XG5cdFx0XHRcdFx0bGluZS1oZWlnaHQ6IDA7XG5cdFx0XHRcdH1cblx0XHRcdH1cblx0XHR9YH1cblxuXHRcdC5idXR0b24tY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGdhcDogOC4zM3B4O1xuXHRcdCR7KHByb3BzKSA9PiAocHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdtYXJnaW46IGF1dG87JyA6ICcnKX1cblx0fVxuYDtcclxuZXhwb3J0IGNvbnN0IEJ1dHRvbkN1c3RvbURhc2hlZEJvcmRlciA9ICgpID0+IHtcclxuICAgIHJldHVybiAoX2pzeHMoX0ZyYWdtZW50LCB7IGNoaWxkcmVuOiBbX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogXCJsaW5lLXRvcFwiIH0pLCBfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBcImxpbmUtbGVmdFwiIH0pLCBfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBcImxpbmUtYm90dG9tXCIgfSksIF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IFwibGluZS1yaWdodFwiIH0pXSB9KSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPUJ1dHRvbi5zdHlsZWQuanMubWFwIl19 */")),J=()=>t(d,{children:[n("div",{className:"line-top"}),n("div",{className:"line-left"}),n("div",{className:"line-bottom"}),n("div",{className:"line-right"})]});export{Z as Button,J as ButtonCustomDashedBorder};
|
|
1
|
+
import t from"@emotion/styled/base";import{jsxs as c,Fragment as d,jsx as n}from"react/jsx-runtime";import{COLORS as b}from"../../constants/Theme.js";import{getBackgroundColor as l,getPadding as X,getBorder as H,getColor as i,getDashedBorderStyling as G,getClickEffect as R,generateDisabledStyling as x,getDisabledTextColor as e,getHoverButtonBackgroundCustom as o,getHoverButtonBackground as g,getHoverButtonTextDecorationStyle as y,generateInverseHoverBackground as I,getLoadingBorder as m,getLoadingButtonBackgroundCustom as u,getLoadingBackground as a}from"./themes.js";const p=t("button","production"===process.env.NODE_ENV?{target:"exlualr0"}:{target:"exlualr0",label:"Button"})("all:unset;cursor:pointer;display:flex;gap:8.83px;border-radius:",(t=>"text"==t.buttonType?"0":"4px"),";overflow:hidden;",(t=>t.matchParentWidth?"flex-grow: 1;":"")," background-color:",(t=>l(t.buttonType,t.size,t.inverse,t.darkMode,t.buttonColor)),";",(t=>{var c;return t.buttonType.startsWith("dash")?`.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\t\tpadding: ${X(t.buttonType,t.size)};\n\t\t\t\t}`:`padding: ${X(t.buttonType,t.size)};\n\t${H(null!==(c=t.version)&&void 0!==c?c:"1.0",t.buttonType,t.size,t.inverse,t.error)}`})," .icon-component{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}.icon-trailing{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}.text{color:",(t=>i(t.buttonType,t.size,t.inverse,t.darkMode)),";}.icon-leading{height:",(t=>"chip"===t.size?"16px":"20px"),";width:",(t=>"chip"===t.size?"16px":"20px"),";}",(t=>G(t.buttonType,t.size,t.isLoading?b.stroke.brandLightAlt:t.error?b.stroke.negative.vibrant:void 0))," .overlay-container{display:none;}",(t=>!t.disabled&&!t.isLoading&&t.activated&&("dashBold"==t.buttonType||"dashRegular"==t.buttonType)&&`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${t.matchParentWidth?"justify-content: center;":""}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t.text {\n\t\t\tcolor: ${b.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${b.background.brand};\n\t\t}\n\t\t\n\t}\n\t${R(t.buttonType,t.size,t.inverse)}\n\t${G(t.buttonType,t.size,b.content.brand)}\n\t`)," :disabled{cursor:",(t=>"text"===t.buttonType?"auto":"not-allowed"),";",(t=>G(t.buttonType,t.size,b.stroke.primary)),";.overlay-container{display:none!important;}",(t=>x(t.buttonType,t.size,t.inverse))," .text{color:",(t=>e(t.inverse)),"!important;}}",(t=>!t.disabled&&!t.isLoading&&`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${"chip"===t.size&&`.text {\n\t\t\t\t\t\tcolor: ${b.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${b.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t}\n\n\n\t\t\t${R(t.buttonType,t.size,t.inverse)}\n\t\t\t${G(t.buttonType,t.size,b.content.brand)}\n\t\t}`)," ",(t=>t.isLoading?`\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${m(t.buttonType,t.size,t.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${t.buttonColor?`background-color: ${u(t.buttonColor,15)};`:""}\n\t\t\tpadding: ${X(t.buttonType,t.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${a(t.buttonType,t.size,t.inverse,t.buttonColor)}\n\t\t\t\t.spinner {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: calc(50% - 14px);\n\t\t\t\t\tleft: calc(50% - 7px);\n\t\t\t\t}\n\n\t\t\t}\n\t\t}`:`:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${t.matchParentWidth?"justify-content: center;":""}\n\t\t\t\tpadding: ${X(t.buttonType,t.size)};\n\t\t\t\t{${t.buttonColor?`background-color: ${o(t.buttonColor,15)}`:""}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${g(t.buttonType,t.inverse)}\n\t\t\t\t}\n\t\t\t\t${"chip"===t.size&&"text"!==t.buttonType?t.darkMode?`background-color: ${b.stroke.primary};`:`background-color: ${b.surface.hovered};`:""}\n\t\t\t\t${"primary"!==t.buttonType||"chip"===t.size||t.inverse||t.buttonColor?"":`background-color: ${b.background.inverse};`}\n\t\t\t}\n\t\t\t${"text"===t.buttonType?y(t.buttonType,t.disabled):""}\n\t\t\t${t.inverse?I(t.buttonType,t.disabled):""}\n\t\t}`)," .button-container{display:flex;gap:8.33px;",(t=>t.matchParentWidth?"margin: auto;":""),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJ1dHRvbi5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlvQyIsImZpbGUiOiJCdXR0b24uc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4LCBGcmFnbWVudCBhcyBfRnJhZ21lbnQsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmltcG9ydCB7IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nLCBnZW5lcmF0ZUludmVyc2VIb3ZlckJhY2tncm91bmQsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0Qm9yZGVyLCBnZXRDbGlja0VmZmVjdCwgZ2V0Q29sb3IsIGdldERhc2hlZEJvcmRlclN0eWxpbmcsIGdldERpc2FibGVkVGV4dENvbG9yLCBnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmQsIGdldEhvdmVyQnV0dG9uQmFja2dyb3VuZEN1c3RvbSwgZ2V0SG92ZXJCdXR0b25UZXh0RGVjb3JhdGlvblN0eWxlLCBnZXRMb2FkaW5nQmFja2dyb3VuZCwgZ2V0TG9hZGluZ0JvcmRlciwgZ2V0TG9hZGluZ0J1dHRvbkJhY2tncm91bmRDdXN0b20sIGdldFBhZGRpbmcsIH0gZnJvbSAnLi90aGVtZXMnO1xyXG5leHBvcnQgY29uc3QgQnV0dG9uID0gc3R5bGVkLmJ1dHRvbiBgXG5cdGFsbDogdW5zZXQ7XG5cdGN1cnNvcjogcG9pbnRlcjtcblx0ZGlzcGxheTogZmxleDtcblx0Z2FwOiA4LjgzcHg7XG5cdGJvcmRlci1yYWRpdXM6ICR7KHByb3BzKSA9PiAocHJvcHMuYnV0dG9uVHlwZSA9PSAndGV4dCcgPyAnMCcgOiAnNHB4Jyl9O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHQkeyhwcm9wcykgPT4gKHByb3BzLm1hdGNoUGFyZW50V2lkdGggPyBgZmxleC1ncm93OiAxO2AgOiAnJyl9XG5cdGJhY2tncm91bmQtY29sb3I6ICR7KHByb3BzKSA9PiBnZXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSwgcHJvcHMuZGFya01vZGUsIHByb3BzLmJ1dHRvbkNvbG9yKX07XG5cblx0JHsocHJvcHMpID0+IHtcclxuICAgIHZhciBfYTtcclxuICAgIHJldHVybiBwcm9wcy5idXR0b25UeXBlLnN0YXJ0c1dpdGgoJ2Rhc2gnKVxyXG4gICAgICAgID8gYC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0XHRcdFx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0XHRcdFx0XHQke3Byb3BzLm1hdGNoUGFyZW50V2lkdGggPyAnanVzdGlmeS1jb250ZW50OiBjZW50ZXI7JyA6ICcnfVxuXHRcdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdH1gXHJcbiAgICAgICAgOiBgcGFkZGluZzogJHtnZXRQYWRkaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUpfTtcblx0JHtnZXRCb3JkZXIoKF9hID0gcHJvcHMudmVyc2lvbikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJzEuMCcsIHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UsIHByb3BzLmVycm9yKX1gO1xyXG59fVxuXG5cdC5pY29uLWNvbXBvbmVudCB7XG5cdFx0aGVpZ2h0OiAkeyhwcm9wcykgPT4gKHByb3BzLnNpemUgPT09ICdjaGlwJyA/ICcxNnB4JyA6ICcyMHB4Jyl9O1xuXHRcdHdpZHRoOiAkeyhwcm9wcykgPT4gKHByb3BzLnNpemUgPT09ICdjaGlwJyA/ICcxNnB4JyA6ICcyMHB4Jyl9O1xuXHR9XG5cblx0Lmljb24tdHJhaWxpbmcge1xuXHRcdGhlaWdodDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0XHR3aWR0aDogJHsocHJvcHMpID0+IChwcm9wcy5zaXplID09PSAnY2hpcCcgPyAnMTZweCcgOiAnMjBweCcpfTtcblx0fVxuXG5cdC50ZXh0IHtcblx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldENvbG9yKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UsIHByb3BzLmRhcmtNb2RlKX07XG5cdH1cblxuXHQuaWNvbi1sZWFkaW5nIHtcblx0XHRoZWlnaHQ6ICR7KHByb3BzKSA9PiAocHJvcHMuc2l6ZSA9PT0gJ2NoaXAnID8gJzE2cHgnIDogJzIwcHgnKX07XG5cdFx0d2lkdGg6ICR7KHByb3BzKSA9PiAocHJvcHMuc2l6ZSA9PT0gJ2NoaXAnID8gJzE2cHgnIDogJzIwcHgnKX07XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gZ2V0RGFzaGVkQm9yZGVyU3R5bGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pc0xvYWRpbmdcclxuICAgID8gQ09MT1JTLnN0cm9rZS5icmFuZExpZ2h0QWx0XHJcbiAgICA6IHByb3BzLmVycm9yXHJcbiAgICAgICAgPyBDT0xPUlMuc3Ryb2tlLm5lZ2F0aXZlLnZpYnJhbnRcclxuICAgICAgICA6IHVuZGVmaW5lZCl9XG5cblx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBub25lO1xuXHR9XG5cblx0JHsocHJvcHMpID0+ICFwcm9wcy5kaXNhYmxlZCAmJlxyXG4gICAgIXByb3BzLmlzTG9hZGluZyAmJlxyXG4gICAgcHJvcHMuYWN0aXZhdGVkICYmXHJcbiAgICAocHJvcHMuYnV0dG9uVHlwZSA9PSAnZGFzaEJvbGQnIHx8IHByb3BzLmJ1dHRvblR5cGUgPT0gJ2Rhc2hSZWd1bGFyJykgJiZcclxuICAgIGBcblx0LmJ1dHRvbi1jb250YWluZXIge1xuXHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0JHtwcm9wcy5tYXRjaFBhcmVudFdpZHRoID8gJ2p1c3RpZnktY29udGVudDogY2VudGVyOycgOiAnJ31cblx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDtcblx0XHR9XG5cdFx0JHtgLnRleHQge1xuXHRcdFx0Y29sb3I6ICR7Q09MT1JTLmNvbnRlbnQuYnJhbmR9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdC5pY29uIHtcblx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmJyYW5kfTtcblx0XHR9XG5cdFx0YH1cblx0fVxuXHQke2dldENsaWNrRWZmZWN0KHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRgfVxuXG5cdDpkaXNhYmxlZCB7XG5cdFx0Lm92ZXJsYXktY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IG5vbmUgIWltcG9ydGFudDtcblx0XHR9XG5cdFx0Y3Vyc29yOiAkeyhwcm9wcykgPT4gcHJvcHMuYnV0dG9uVHlwZSA9PT0gJ3RleHQnID8gJ2F1dG8nIDogJ25vdC1hbGxvd2VkJ307XG5cdFx0JHsocHJvcHMpID0+IGdlbmVyYXRlRGlzYWJsZWRTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIHByb3BzLmludmVyc2UpfVxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0RGlzYWJsZWRUZXh0Q29sb3IocHJvcHMuaW52ZXJzZSl9ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHRcdCR7KHByb3BzKSA9PiBnZXREYXNoZWRCb3JkZXJTdHlsaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUsIENPTE9SUy5zdHJva2UucHJpbWFyeSl9XG5cdH1cblxuXHQkeyhwcm9wcykgPT4gIXByb3BzLmRpc2FibGVkICYmXHJcbiAgICAhcHJvcHMuaXNMb2FkaW5nICYmXHJcbiAgICBgOmFjdGl2ZSB7XG5cdFx0XHRcdC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0XHRcdCR7cHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnIDogJyd9XG5cdFx0XHRcdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRcdFx0XHRcdHdpZHRoOiAxMDAlO1xuXHRcdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0XHRkaXNwbGF5OiBub25lICFpbXBvcnRhbnQ7XG5cdFx0XHRcdFx0fVxuXHRcdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmXHJcbiAgICAgICAgYC50ZXh0IHtcblx0XHRcdFx0XHRcdGNvbG9yOiAke0NPTE9SUy5iYWNrZ3JvdW5kLmludmVyc2VMaWdodH0gIWltcG9ydGFudDtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0Lmljb24ge1xuXHRcdFx0XHRcdFx0Y29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZUxpZ2h0fTtcblx0XHRcdFx0XHR9XG5cdFx0XHRcdFx0YH1cblx0XHRcdFx0fVxuXG5cblx0XHRcdCR7Z2V0Q2xpY2tFZmZlY3QocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgcHJvcHMuaW52ZXJzZSl9XG5cdFx0XHQke2dldERhc2hlZEJvcmRlclN0eWxpbmcocHJvcHMuYnV0dG9uVHlwZSwgcHJvcHMuc2l6ZSwgQ09MT1JTLmNvbnRlbnQuYnJhbmQpfVxuXHRcdH1gfVxuXG5cdCR7KHByb3BzKSA9PiBcclxuLy8gZG8gbm90IGxvYWQgaG92ZXIgc3R5bGVzIGZvciBsb2FkaW5nIHN0YXRlIGFuZCBhbHNvIGFjdGl2ZSBzdGF0ZVxyXG4hcHJvcHMuaXNMb2FkaW5nXHJcbiAgICA/IGA6bm90KDphY3RpdmUpOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcblx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHQuYnV0dG9uLWNvbnRhaW5lciB7XG5cdFx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdCR7cHJvcHMubWF0Y2hQYXJlbnRXaWR0aCA/ICdqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsnIDogJyd9XG5cdFx0XHRcdHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplKX07XG5cdFx0XHRcdHske3Byb3BzLmJ1dHRvbkNvbG9yXHJcbiAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRIb3ZlckJ1dHRvbkJhY2tncm91bmRDdXN0b20ocHJvcHMuYnV0dG9uQ29sb3IsIDE1KX1gXHJcbiAgICAgICAgOiAnJ319XG5cdFx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHRcdFx0cG9zaXRpb246IGFic29sdXRlO1xuXHRcdFx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHRcdFx0dG9wOiAwO1xuXHRcdFx0XHRcdGxlZnQ6IDA7XG5cdFx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdFx0XHRcdCR7Z2V0SG92ZXJCdXR0b25CYWNrZ3JvdW5kKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLmludmVyc2UpfVxuXHRcdFx0XHR9XG5cdFx0XHRcdCR7cHJvcHMuc2l6ZSA9PT0gJ2NoaXAnICYmIHByb3BzLmJ1dHRvblR5cGUgIT09ICd0ZXh0J1xyXG4gICAgICAgID8gcHJvcHMuZGFya01vZGVcclxuICAgICAgICAgICAgPyBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3Ryb2tlLnByaW1hcnl9O2BcclxuICAgICAgICAgICAgOiBgYmFja2dyb3VuZC1jb2xvcjogJHtDT0xPUlMuc3VyZmFjZS5ob3ZlcmVkfTtgXHJcbiAgICAgICAgOiAnJ31cblx0XHRcdFx0JHtwcm9wcy5idXR0b25UeXBlID09PSAncHJpbWFyeScgJiZcclxuICAgICAgICBwcm9wcy5zaXplICE9PSAnY2hpcCcgJiZcclxuICAgICAgICAhcHJvcHMuaW52ZXJzZSAmJlxyXG4gICAgICAgICFwcm9wcy5idXR0b25Db2xvclxyXG4gICAgICAgID8gYGJhY2tncm91bmQtY29sb3I6ICR7Q09MT1JTLmJhY2tncm91bmQuaW52ZXJzZX07YFxyXG4gICAgICAgIDogJyd9XG5cdFx0XHR9XG5cdFx0XHQke3Byb3BzLmJ1dHRvblR5cGUgPT09ICd0ZXh0J1xyXG4gICAgICAgID8gZ2V0SG92ZXJCdXR0b25UZXh0RGVjb3JhdGlvblN0eWxlKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLmRpc2FibGVkKVxyXG4gICAgICAgIDogJyd9XG5cdFx0XHQke3Byb3BzLmludmVyc2VcclxuICAgICAgICA/IGdlbmVyYXRlSW52ZXJzZUhvdmVyQmFja2dyb3VuZChwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5kaXNhYmxlZClcclxuICAgICAgICA6ICcnfVxuXHRcdH1gXHJcbiAgICA6IGBcblx0XHRcdGN1cnNvcjogbm90LWFsbG93ZWQ7XG5cdFx0XHRwYWRkaW5nOiAwO1xuXHRcdCR7Z2V0TG9hZGluZ0JvcmRlcihwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pbnZlcnNlKX1cblxuXHRcdC5idXR0b24tY29udGFpbmVyIHtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0XHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdFx0XHR3aWR0aDogMTAwJTtcblx0XHRcdC50ZXh0IHtcblx0XHRcdFx0b3BhY2l0eTogMDtcblx0XHRcdH1cblx0XHRcdCR7cHJvcHMuYnV0dG9uQ29sb3JcclxuICAgICAgICA/IGBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldExvYWRpbmdCdXR0b25CYWNrZ3JvdW5kQ3VzdG9tKHByb3BzLmJ1dHRvbkNvbG9yLCAxNSl9O2BcclxuICAgICAgICA6ICcnfVxuXHRcdFx0cGFkZGluZzogJHtnZXRQYWRkaW5nKHByb3BzLmJ1dHRvblR5cGUsIHByb3BzLnNpemUpfTtcblx0XHRcdC5vdmVybGF5LWNvbnRhaW5lciB7XG5cdFx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHRcdHBhZGRpbmc6IDA7XG5cdFx0XHRcdHBhZGRpbmctdG9wOiAxcHg7XG5cdFx0XHRcdHRvcDogMDtcblx0XHRcdFx0bGVmdDogMDtcblx0XHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0XHRcdGhlaWdodDogMTAwJTtcblx0XHRcdFx0JHtnZXRMb2FkaW5nQmFja2dyb3VuZChwcm9wcy5idXR0b25UeXBlLCBwcm9wcy5zaXplLCBwcm9wcy5pbnZlcnNlLCBwcm9wcy5idXR0b25Db2xvcil9XG5cdFx0XHRcdC5zcGlubmVyIHtcblx0XHRcdFx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0XHRcdFx0dG9wOiBjYWxjKDUwJSAtIDE0cHgpO1xuXHRcdFx0XHRcdGxlZnQ6IGNhbGMoNTAlIC0gN3B4KTtcblx0XHRcdFx0fVxuXG5cdFx0XHR9XG5cdFx0fWB9XG5cblx0XHQuYnV0dG9uLWNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRnYXA6IDguMzNweDtcblx0XHQkeyhwcm9wcykgPT4gKHByb3BzLm1hdGNoUGFyZW50V2lkdGggPyAnbWFyZ2luOiBhdXRvOycgOiAnJyl9XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBCdXR0b25DdXN0b21EYXNoZWRCb3JkZXIgPSAoKSA9PiB7XHJcbiAgICByZXR1cm4gKF9qc3hzKF9GcmFnbWVudCwgeyBjaGlsZHJlbjogW19qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IFwibGluZS10b3BcIiB9KSwgX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogXCJsaW5lLWxlZnRcIiB9KSwgX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogXCJsaW5lLWJvdHRvbVwiIH0pLCBfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBcImxpbmUtcmlnaHRcIiB9KV0gfSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1CdXR0b24uc3R5bGVkLmpzLm1hcCJdfQ== */")),Z=()=>c(d,{children:[n("div",{className:"line-top"}),n("div",{className:"line-left"}),n("div",{className:"line-bottom"}),n("div",{className:"line-right"})]});export{p as Button,Z as ButtonCustomDashedBorder};
|
|
2
2
|
//# sourceMappingURL=Button.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","_styled","process","env","NODE_ENV","target","label","props","buttonType","matchParentWidth","getBackgroundColor","size","inverse","darkMode","buttonColor","startsWith","getPadding","getBorder","_a","version","error","getColor","getDashedBorderStyling","isLoading","COLORS","stroke","brandLightAlt","negative","vibrant","undefined","disabled","activated","content","brand","background","getClickEffect","primary","generateDisabledStyling","getDisabledTextColor","inverseLight","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","surface","hovered","brandLight","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","_jsxs","_Fragment","children","_jsx","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t\twidth: ${(props) => (props.size === 'chip' ? '16px' : '20px')};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\ttop: calc(50% - 14px);\n\t\t\t\t\tleft: calc(50% - 7px);\n\t\t\t\t}\n\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","_styled","process","env","NODE_ENV","target","label","props","buttonType","matchParentWidth","getBackgroundColor","size","inverse","darkMode","buttonColor","startsWith","getPadding","getBorder","_a","version","error","getColor","getDashedBorderStyling","isLoading","COLORS","stroke","brandLightAlt","negative","vibrant","undefined","disabled","activated","content","brand","background","getClickEffect","primary","generateDisabledStyling","getDisabledTextColor","inverseLight","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","surface","hovered","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","_jsxs","_Fragment","children","_jsx","className"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("
|
|
1
|
+
import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return o||(e?t.background.warning.vibrant:t.background.inverseLight);case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(t,r)=>{if("text"===t)return"0px";if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},u=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t?a:"small"===t?o:i:"small"===t?r:n,b=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,g=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",h=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)-e,o=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(o,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},x=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)+e,o=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(o,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`},y=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",m=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,k=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",$=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",v=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},f=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight} !important;`:`background-color: ${t.background.brandLight};`:void 0,w=(r,n,e,a)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?a?`background-color: ${x(a,50)};`:`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",L=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",I=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,M=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{u as GetButtonTextComponent,I as SpinnerColorMap,$ as generateDisabledStyling,k as generateInverseHoverBackground,c as getBackgroundColor,g as getBorder,b as getBorderColor,M as getButtonIconColor,f as getClickEffect,d as getColor,v as getDashedBorderStyling,s as getDisabledTextColor,y as getHoverButtonBackground,h as getHoverButtonBackgroundCustom,m as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,w as getLoadingBackground,L as getLoadingBorder,x as getLoadingButtonBackgroundCustom,p as getPadding};
|
|
2
2
|
//# sourceMappingURL=themes.js.map
|