@itwin/itwinui-react 3.0.4 → 3.0.5
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/CHANGELOG.md +7 -0
- package/cjs/core/Alert/Alert.js +46 -106
- package/cjs/core/Avatar/Avatar.js +21 -58
- package/cjs/core/AvatarGroup/AvatarGroup.js +26 -64
- package/cjs/core/Backdrop/Backdrop.js +8 -16
- package/cjs/core/Badge/Badge.js +22 -39
- package/cjs/core/Breadcrumbs/Breadcrumbs.js +61 -138
- package/cjs/core/ButtonGroup/ButtonGroup.js +32 -68
- package/cjs/core/Buttons/Button.js +11 -57
- package/cjs/core/Buttons/DropdownButton.js +15 -49
- package/cjs/core/Buttons/IconButton.js +13 -53
- package/cjs/core/Buttons/IdeasButton.js +8 -20
- package/cjs/core/Buttons/SplitButton.js +43 -103
- package/cjs/core/Carousel/Carousel.js +54 -78
- package/cjs/core/Carousel/CarouselContext.js +4 -4
- package/cjs/core/Carousel/CarouselDot.js +12 -23
- package/cjs/core/Carousel/CarouselDotsList.js +92 -153
- package/cjs/core/Carousel/CarouselNavigation.js +41 -84
- package/cjs/core/Carousel/CarouselSlide.js +26 -49
- package/cjs/core/Carousel/CarouselSlider.js +47 -66
- package/cjs/core/Checkbox/Checkbox.js +32 -88
- package/cjs/core/ColorPicker/ColorBuilder.js +174 -292
- package/cjs/core/ColorPicker/ColorInputPanel.js +246 -411
- package/cjs/core/ColorPicker/ColorPalette.js +23 -47
- package/cjs/core/ColorPicker/ColorPicker.js +53 -87
- package/cjs/core/ColorPicker/ColorPickerContext.js +9 -11
- package/cjs/core/ColorPicker/ColorSwatch.js +15 -40
- package/cjs/core/ComboBox/ComboBox.js +280 -402
- package/cjs/core/ComboBox/ComboBoxEndIcon.js +12 -28
- package/cjs/core/ComboBox/ComboBoxInput.js +131 -207
- package/cjs/core/ComboBox/ComboBoxInputContainer.js +12 -35
- package/cjs/core/ComboBox/ComboBoxMenu.js +43 -87
- package/cjs/core/ComboBox/ComboBoxMenuItem.js +21 -73
- package/cjs/core/ComboBox/ComboBoxMultipleContainer.js +7 -13
- package/cjs/core/ComboBox/helpers.js +43 -47
- package/cjs/core/DatePicker/DatePicker.js +333 -569
- package/cjs/core/Dialog/Dialog.js +36 -65
- package/cjs/core/Dialog/DialogBackdrop.js +27 -47
- package/cjs/core/Dialog/DialogButtonBar.js +3 -3
- package/cjs/core/Dialog/DialogContent.js +18 -26
- package/cjs/core/Dialog/DialogContext.js +5 -5
- package/cjs/core/Dialog/DialogDragContext.js +8 -8
- package/cjs/core/Dialog/DialogMain.js +116 -183
- package/cjs/core/Dialog/DialogTitleBar.js +20 -67
- package/cjs/core/Dialog/DialogTitleBarTitle.js +3 -3
- package/cjs/core/Divider/Divider.js +8 -14
- package/cjs/core/DropdownMenu/DropdownMenu.js +46 -80
- package/cjs/core/ExpandableBlock/ExpandableBlock.js +101 -206
- package/cjs/core/Fieldset/Fieldset.js +14 -25
- package/cjs/core/FileUpload/FileEmptyCard.js +17 -43
- package/cjs/core/FileUpload/FileUpload.js +42 -88
- package/cjs/core/FileUpload/FileUploadCard.js +84 -169
- package/cjs/core/FileUpload/FileUploadTemplate.js +16 -51
- package/cjs/core/Flex/Flex.js +77 -93
- package/cjs/core/Footer/Footer.js +64 -103
- package/cjs/core/Footer/FooterItem.js +3 -3
- package/cjs/core/Footer/FooterList.js +3 -3
- package/cjs/core/Footer/FooterSeparator.js +5 -8
- package/cjs/core/Header/Header.js +22 -67
- package/cjs/core/Header/HeaderBasicButton.js +13 -24
- package/cjs/core/Header/HeaderBreadcrumbs.js +14 -38
- package/cjs/core/Header/HeaderButton.js +22 -76
- package/cjs/core/Header/HeaderDropdownButton.js +20 -48
- package/cjs/core/Header/HeaderLogo.js +11 -42
- package/cjs/core/Header/HeaderSplitButton.js +21 -66
- package/cjs/core/Icon/Icon.js +18 -32
- package/cjs/core/InformationPanel/InformationPanel.js +42 -77
- package/cjs/core/InformationPanel/InformationPanelBody.js +4 -6
- package/cjs/core/InformationPanel/InformationPanelContent.js +8 -20
- package/cjs/core/InformationPanel/InformationPanelHeader.js +14 -34
- package/cjs/core/InformationPanel/InformationPanelWrapper.js +4 -6
- package/cjs/core/Input/Input.js +10 -18
- package/cjs/core/InputGrid/InputGrid.js +8 -17
- package/cjs/core/InputGroup/InputGroup.js +25 -72
- package/cjs/core/InputWithDecorations/InputWithDecorations.js +23 -51
- package/cjs/core/Label/Label.js +11 -32
- package/cjs/core/LabeledInput/LabeledInput.js +20 -70
- package/cjs/core/LabeledSelect/LabeledSelect.js +28 -77
- package/cjs/core/LabeledTextarea/LabeledTextarea.js +7 -13
- package/cjs/core/LinkAction/LinkAction.js +3 -3
- package/cjs/core/List/List.js +3 -3
- package/cjs/core/List/ListItem.js +35 -55
- package/cjs/core/Menu/Menu.js +53 -66
- package/cjs/core/Menu/MenuDivider.js +4 -4
- package/cjs/core/Menu/MenuExtraContent.js +4 -4
- package/cjs/core/Menu/MenuItem.js +92 -168
- package/cjs/core/Menu/MenuItemSkeleton.js +19 -54
- package/cjs/core/Modal/Modal.js +11 -38
- package/cjs/core/Modal/ModalButtonBar.js +4 -7
- package/cjs/core/Modal/ModalContent.js +3 -3
- package/cjs/core/NonIdealState/ErrorPage.js +131 -187
- package/cjs/core/NonIdealState/NonIdealState.js +12 -77
- package/cjs/core/NotificationMarker/NotificationMarker.js +8 -29
- package/cjs/core/Overlay/Overlay.d.ts +20 -24
- package/cjs/core/Overlay/Overlay.js +50 -64
- package/cjs/core/Popover/Popover.js +87 -157
- package/cjs/core/ProgressIndicators/ProgressLinear.js +11 -49
- package/cjs/core/ProgressIndicators/ProgressRadial.js +19 -51
- package/cjs/core/Radio/Radio.js +12 -54
- package/cjs/core/RadioTiles/RadioTile.js +14 -80
- package/cjs/core/RadioTiles/RadioTileGroup.js +9 -16
- package/cjs/core/SearchBox/SearchBox.js +104 -221
- package/cjs/core/Select/Select.js +141 -276
- package/cjs/core/Select/SelectTag.js +9 -21
- package/cjs/core/Select/SelectTagContainer.js +14 -30
- package/cjs/core/SideNavigation/SideNavigation.js +29 -138
- package/cjs/core/SideNavigation/SidenavButton.js +8 -30
- package/cjs/core/SideNavigation/SidenavSubmenu.js +9 -23
- package/cjs/core/SideNavigation/SidenavSubmenuHeader.js +10 -29
- package/cjs/core/SkipToContentLink/SkipToContentLink.js +8 -20
- package/cjs/core/Slider/Slider.js +195 -376
- package/cjs/core/Slider/Thumb.js +57 -108
- package/cjs/core/Slider/Track.js +55 -83
- package/cjs/core/StatusMessage/StatusMessage.js +12 -34
- package/cjs/core/Stepper/Stepper.js +21 -80
- package/cjs/core/Stepper/StepperStep.js +36 -109
- package/cjs/core/Stepper/WorkflowDiagram.js +15 -38
- package/cjs/core/Stepper/WorkflowDiagramStep.js +11 -39
- package/cjs/core/Surface/Surface.js +54 -94
- package/cjs/core/Table/SubRowExpander.js +15 -37
- package/cjs/core/Table/Table.js +419 -763
- package/cjs/core/Table/TableCell.js +63 -113
- package/cjs/core/Table/TablePaginator.js +136 -312
- package/cjs/core/Table/TableRowMemoized.js +64 -137
- package/cjs/core/Table/actionHandlers/expandHandler.js +12 -12
- package/cjs/core/Table/actionHandlers/filterHandler.js +17 -25
- package/cjs/core/Table/actionHandlers/index.js +14 -56
- package/cjs/core/Table/actionHandlers/resizeHandler.js +13 -13
- package/cjs/core/Table/actionHandlers/selectHandler.js +98 -128
- package/cjs/core/Table/cells/DefaultCell.js +13 -48
- package/cjs/core/Table/cells/EditableCell.js +46 -75
- package/cjs/core/Table/cells/index.js +6 -16
- package/cjs/core/Table/columns/actionColumn.js +67 -97
- package/cjs/core/Table/columns/expanderColumn.js +32 -46
- package/cjs/core/Table/columns/index.js +11 -41
- package/cjs/core/Table/columns/selectionColumn.js +29 -57
- package/cjs/core/Table/filters/BaseFilter.js +13 -24
- package/cjs/core/Table/filters/DateRangeFilter/DatePickerInput.js +52 -120
- package/cjs/core/Table/filters/DateRangeFilter/DateRangeFilter.js +60 -120
- package/cjs/core/Table/filters/FilterButtonBar.js +16 -39
- package/cjs/core/Table/filters/FilterToggle.js +26 -62
- package/cjs/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +36 -58
- package/cjs/core/Table/filters/TextFilter/TextFilter.js +28 -40
- package/cjs/core/Table/filters/customFilterFunctions.js +14 -16
- package/cjs/core/Table/filters/defaultFilterFunctions.js +81 -86
- package/cjs/core/Table/filters/index.js +11 -35
- package/cjs/core/Table/filters/tableFilters.js +32 -44
- package/cjs/core/Table/filters/types.js +2 -2
- package/cjs/core/Table/hooks/index.js +19 -67
- package/cjs/core/Table/hooks/useColumnDragAndDrop.js +86 -101
- package/cjs/core/Table/hooks/useExpanderCell.js +25 -33
- package/cjs/core/Table/hooks/useResizeColumns.js +290 -362
- package/cjs/core/Table/hooks/useScrollToRow.js +38 -46
- package/cjs/core/Table/hooks/useSelectionCell.js +10 -17
- package/cjs/core/Table/hooks/useStickyColumns.js +62 -64
- package/cjs/core/Table/hooks/useSubRowFiltering.js +88 -95
- package/cjs/core/Table/hooks/useSubRowSelection.js +31 -32
- package/cjs/core/Table/index.js +18 -78
- package/cjs/core/Table/utils.js +40 -42
- package/cjs/core/Tabs/Tabs.js +232 -417
- package/cjs/core/Tag/Tag.js +15 -42
- package/cjs/core/Tag/TagContainer.js +11 -23
- package/cjs/core/Textarea/Textarea.js +6 -11
- package/cjs/core/ThemeProvider/ThemeContext.js +4 -4
- package/cjs/core/ThemeProvider/ThemeProvider.js +52 -105
- package/cjs/core/Tile/Tile.js +230 -410
- package/cjs/core/TimePicker/TimePicker.js +234 -458
- package/cjs/core/Toast/Toast.js +107 -204
- package/cjs/core/Toast/Toaster.js +77 -102
- package/cjs/core/ToggleSwitch/ToggleSwitch.js +23 -66
- package/cjs/core/Tooltip/Tooltip.js +91 -137
- package/cjs/core/TransferList/TransferList.js +103 -177
- package/cjs/core/Tree/Tree.js +129 -204
- package/cjs/core/Tree/TreeContext.js +9 -9
- package/cjs/core/Tree/TreeNode.js +104 -207
- package/cjs/core/Tree/TreeNodeExpander.js +12 -26
- package/cjs/core/Typography/Anchor.js +3 -3
- package/cjs/core/Typography/Blockquote.js +10 -18
- package/cjs/core/Typography/Code.js +3 -3
- package/cjs/core/Typography/Kbd.js +21 -30
- package/cjs/core/Typography/Text.js +13 -26
- package/cjs/core/VisuallyHidden/VisuallyHidden.js +8 -14
- package/cjs/core/utils/color/ColorValue.js +453 -535
- package/cjs/core/utils/color/index.js +4 -4
- package/cjs/core/utils/components/AutoclearingHiddenLiveRegion.js +13 -20
- package/cjs/core/utils/components/Box.js +3 -3
- package/cjs/core/utils/components/ButtonBase.js +20 -38
- package/cjs/core/utils/components/FocusTrap.js +38 -47
- package/cjs/core/utils/components/InputContainer.js +19 -58
- package/cjs/core/utils/components/InputFlexContainer.js +8 -24
- package/cjs/core/utils/components/MiddleTextTruncation.js +22 -32
- package/cjs/core/utils/components/Portal.js +20 -22
- package/cjs/core/utils/components/Resizer.js +196 -253
- package/cjs/core/utils/components/VirtualScroll.js +223 -304
- package/cjs/core/utils/components/WithCSSTransition.js +32 -49
- package/cjs/core/utils/components/index.js +14 -14
- package/cjs/core/utils/functions/colors.js +22 -25
- package/cjs/core/utils/functions/date.js +10 -10
- package/cjs/core/utils/functions/dev.js +14 -13
- package/cjs/core/utils/functions/dom.js +17 -24
- package/cjs/core/utils/functions/focusable.js +17 -26
- package/cjs/core/utils/functions/import.js +23 -46
- package/cjs/core/utils/functions/index.js +13 -13
- package/cjs/core/utils/functions/numbers.js +9 -9
- package/cjs/core/utils/functions/polymorphic.js +30 -43
- package/cjs/core/utils/functions/react.js +24 -26
- package/cjs/core/utils/functions/supports.js +4 -5
- package/cjs/core/utils/hooks/index.js +17 -17
- package/cjs/core/utils/hooks/useContainerWidth.js +19 -26
- package/cjs/core/utils/hooks/useControlledState.js +12 -21
- package/cjs/core/utils/hooks/useDragAndDrop.js +87 -110
- package/cjs/core/utils/hooks/useEventListener.js +22 -22
- package/cjs/core/utils/hooks/useGlobals.js +27 -33
- package/cjs/core/utils/hooks/useId.js +8 -10
- package/cjs/core/utils/hooks/useIntersection.js +24 -30
- package/cjs/core/utils/hooks/useIsClient.js +9 -9
- package/cjs/core/utils/hooks/useIsomorphicLayoutEffect.js +5 -6
- package/cjs/core/utils/hooks/useLatestRef.js +9 -9
- package/cjs/core/utils/hooks/useMediaQuery.js +31 -31
- package/cjs/core/utils/hooks/useMergedRefs.js +16 -15
- package/cjs/core/utils/hooks/useOverflow.js +57 -70
- package/cjs/core/utils/hooks/useResizeObserver.js +17 -22
- package/cjs/core/utils/hooks/useSafeContext.js +9 -9
- package/cjs/core/utils/icons/StatusIconMap.js +12 -28
- package/cjs/core/utils/icons/Svg.js +3 -3
- package/cjs/core/utils/icons/SvgCalendar.js +7 -12
- package/cjs/core/utils/icons/SvgCaretDownSmall.js +7 -12
- package/cjs/core/utils/icons/SvgCaretRightSmall.js +7 -12
- package/cjs/core/utils/icons/SvgCaretUpSmall.js +7 -12
- package/cjs/core/utils/icons/SvgCheckmark.js +7 -10
- package/cjs/core/utils/icons/SvgCheckmarkSmall.js +7 -12
- package/cjs/core/utils/icons/SvgChevronLeft.js +7 -12
- package/cjs/core/utils/icons/SvgChevronLeftDouble.js +7 -12
- package/cjs/core/utils/icons/SvgChevronRight.js +7 -12
- package/cjs/core/utils/icons/SvgChevronRightDouble.js +7 -12
- package/cjs/core/utils/icons/SvgClose.js +7 -12
- package/cjs/core/utils/icons/SvgCloseSmall.js +7 -12
- package/cjs/core/utils/icons/SvgColumnManager.js +7 -12
- package/cjs/core/utils/icons/SvgDocument.js +7 -10
- package/cjs/core/utils/icons/SvgFilter.js +7 -10
- package/cjs/core/utils/icons/SvgFilterHollow.js +7 -12
- package/cjs/core/utils/icons/SvgImportantSmall.js +7 -12
- package/cjs/core/utils/icons/SvgInfoCircular.js +7 -12
- package/cjs/core/utils/icons/SvgMore.js +7 -12
- package/cjs/core/utils/icons/SvgMoreVertical.js +7 -12
- package/cjs/core/utils/icons/SvgNew.js +7 -12
- package/cjs/core/utils/icons/SvgSearch.js +7 -12
- package/cjs/core/utils/icons/SvgSmileyHappy.js +7 -12
- package/cjs/core/utils/icons/SvgSortDown.js +7 -12
- package/cjs/core/utils/icons/SvgSortUp.js +7 -12
- package/cjs/core/utils/icons/SvgStatusError.js +7 -12
- package/cjs/core/utils/icons/SvgStatusSuccess.js +7 -12
- package/cjs/core/utils/icons/SvgStatusWarning.js +7 -12
- package/cjs/core/utils/icons/SvgSwap.js +7 -12
- package/cjs/core/utils/icons/SvgUpload.js +7 -12
- package/cjs/core/utils/icons/index.js +34 -34
- package/cjs/core/utils/index.js +10 -10
- package/cjs/core/utils/props.js +2 -2
- package/cjs/core/utils/types.js +2 -2
- package/cjs/index.js +229 -949
- package/cjs/react-table/react-table.js +2 -2
- package/cjs/styles.js +412 -425
- package/esm/core/Alert/Alert.js +39 -106
- package/esm/core/Avatar/Avatar.js +14 -42
- package/esm/core/AvatarGroup/AvatarGroup.js +20 -58
- package/esm/core/Backdrop/Backdrop.js +2 -10
- package/esm/core/Badge/Badge.js +16 -31
- package/esm/core/Breadcrumbs/Breadcrumbs.js +55 -135
- package/esm/core/ButtonGroup/ButtonGroup.js +25 -61
- package/esm/core/Buttons/Button.js +5 -45
- package/esm/core/Buttons/DropdownButton.js +7 -37
- package/esm/core/Buttons/IconButton.js +5 -40
- package/esm/core/Buttons/IdeasButton.js +2 -12
- package/esm/core/Buttons/SplitButton.js +34 -101
- package/esm/core/Carousel/Carousel.js +43 -72
- package/esm/core/Carousel/CarouselDot.js +6 -17
- package/esm/core/Carousel/CarouselDotsList.js +85 -147
- package/esm/core/Carousel/CarouselNavigation.js +32 -68
- package/esm/core/Carousel/CarouselSlide.js +19 -41
- package/esm/core/Carousel/CarouselSlider.js +41 -65
- package/esm/core/Checkbox/Checkbox.js +25 -78
- package/esm/core/ColorPicker/ColorBuilder.js +167 -280
- package/esm/core/ColorPicker/ColorInputPanel.js +237 -395
- package/esm/core/ColorPicker/ColorPalette.js +14 -35
- package/esm/core/ColorPicker/ColorPicker.js +46 -79
- package/esm/core/ColorPicker/ColorPickerContext.js +5 -7
- package/esm/core/ColorPicker/ColorSwatch.js +7 -24
- package/esm/core/ComboBox/ComboBox.js +267 -396
- package/esm/core/ComboBox/ComboBoxEndIcon.js +5 -18
- package/esm/core/ComboBox/ComboBoxInput.js +125 -197
- package/esm/core/ComboBox/ComboBoxInputContainer.js +5 -20
- package/esm/core/ComboBox/ComboBoxMenu.js +37 -77
- package/esm/core/ComboBox/ComboBoxMenuItem.js +14 -61
- package/esm/core/ComboBox/ComboBoxMultipleContainer.js +2 -6
- package/esm/core/ComboBox/helpers.js +38 -38
- package/esm/core/DatePicker/DatePicker.js +326 -555
- package/esm/core/Dialog/Dialog.js +24 -53
- package/esm/core/Dialog/DialogBackdrop.js +19 -39
- package/esm/core/Dialog/DialogContent.js +12 -20
- package/esm/core/Dialog/DialogContext.js +1 -1
- package/esm/core/Dialog/DialogDragContext.js +4 -4
- package/esm/core/Dialog/DialogMain.js +107 -177
- package/esm/core/Dialog/DialogTitleBar.js +10 -45
- package/esm/core/Divider/Divider.js +2 -8
- package/esm/core/DropdownMenu/DropdownMenu.js +40 -75
- package/esm/core/ExpandableBlock/ExpandableBlock.js +92 -193
- package/esm/core/Fieldset/Fieldset.js +8 -19
- package/esm/core/FileUpload/FileEmptyCard.js +8 -19
- package/esm/core/FileUpload/FileUpload.js +36 -72
- package/esm/core/FileUpload/FileUploadCard.js +76 -153
- package/esm/core/FileUpload/FileUploadTemplate.js +9 -37
- package/esm/core/Flex/Flex.js +71 -87
- package/esm/core/Footer/Footer.js +55 -86
- package/esm/core/Footer/FooterSeparator.js +1 -1
- package/esm/core/Header/Header.js +14 -55
- package/esm/core/Header/HeaderBasicButton.js +7 -15
- package/esm/core/Header/HeaderBreadcrumbs.js +8 -32
- package/esm/core/Header/HeaderButton.js +14 -62
- package/esm/core/Header/HeaderDropdownButton.js +13 -42
- package/esm/core/Header/HeaderLogo.js +5 -36
- package/esm/core/Header/HeaderSplitButton.js +14 -61
- package/esm/core/Icon/Icon.js +12 -26
- package/esm/core/InformationPanel/InformationPanel.js +36 -71
- package/esm/core/InformationPanel/InformationPanelContent.js +3 -17
- package/esm/core/InformationPanel/InformationPanelHeader.js +8 -32
- package/esm/core/InformationPanel/InformationPanelWrapper.js +1 -3
- package/esm/core/Input/Input.js +4 -12
- package/esm/core/InputGrid/InputGrid.js +2 -11
- package/esm/core/InputGroup/InputGroup.js +16 -57
- package/esm/core/InputWithDecorations/InputWithDecorations.js +11 -42
- package/esm/core/Label/Label.js +5 -26
- package/esm/core/LabeledInput/LabeledInput.js +10 -63
- package/esm/core/LabeledSelect/LabeledSelect.js +18 -67
- package/esm/core/LabeledTextarea/LabeledTextarea.js +2 -8
- package/esm/core/List/ListItem.js +28 -46
- package/esm/core/Menu/Menu.js +48 -64
- package/esm/core/Menu/MenuDivider.js +1 -1
- package/esm/core/Menu/MenuExtraContent.js +1 -1
- package/esm/core/Menu/MenuItem.js +84 -164
- package/esm/core/Menu/MenuItemSkeleton.js +12 -43
- package/esm/core/Modal/Modal.js +6 -33
- package/esm/core/NonIdealState/ErrorPage.js +123 -173
- package/esm/core/NonIdealState/NonIdealState.js +6 -65
- package/esm/core/NotificationMarker/NotificationMarker.js +2 -20
- package/esm/core/Overlay/Overlay.d.ts +20 -24
- package/esm/core/Overlay/Overlay.js +45 -55
- package/esm/core/Popover/Popover.js +80 -172
- package/esm/core/ProgressIndicators/ProgressLinear.js +5 -40
- package/esm/core/ProgressIndicators/ProgressRadial.js +14 -40
- package/esm/core/Radio/Radio.js +6 -45
- package/esm/core/RadioTiles/RadioTile.js +8 -62
- package/esm/core/RadioTiles/RadioTileGroup.js +3 -10
- package/esm/core/SearchBox/SearchBox.js +97 -214
- package/esm/core/Select/Select.js +130 -265
- package/esm/core/Select/SelectTag.js +3 -15
- package/esm/core/Select/SelectTagContainer.js +7 -20
- package/esm/core/SideNavigation/SideNavigation.js +21 -118
- package/esm/core/SideNavigation/SidenavButton.js +2 -24
- package/esm/core/SideNavigation/SidenavSubmenu.js +3 -14
- package/esm/core/SideNavigation/SidenavSubmenuHeader.js +4 -20
- package/esm/core/SkipToContentLink/SkipToContentLink.js +2 -11
- package/esm/core/Slider/Slider.js +187 -340
- package/esm/core/Slider/Thumb.js +50 -97
- package/esm/core/Slider/Track.js +49 -74
- package/esm/core/StatusMessage/StatusMessage.js +5 -23
- package/esm/core/Stepper/Stepper.js +14 -70
- package/esm/core/Stepper/StepperStep.js +29 -92
- package/esm/core/Stepper/WorkflowDiagram.js +8 -21
- package/esm/core/Stepper/WorkflowDiagramStep.js +4 -22
- package/esm/core/Surface/Surface.js +48 -84
- package/esm/core/Table/SubRowExpander.js +9 -31
- package/esm/core/Table/Table.js +408 -763
- package/esm/core/Table/TableCell.js +53 -87
- package/esm/core/Table/TablePaginator.js +125 -306
- package/esm/core/Table/TableRowMemoized.js +58 -129
- package/esm/core/Table/actionHandlers/expandHandler.js +10 -10
- package/esm/core/Table/actionHandlers/filterHandler.js +15 -23
- package/esm/core/Table/actionHandlers/index.js +1 -5
- package/esm/core/Table/actionHandlers/resizeHandler.js +11 -11
- package/esm/core/Table/actionHandlers/selectHandler.js +95 -122
- package/esm/core/Table/cells/DefaultCell.js +7 -42
- package/esm/core/Table/cells/EditableCell.js +41 -70
- package/esm/core/Table/columns/actionColumn.js +55 -85
- package/esm/core/Table/columns/expanderColumn.js +25 -39
- package/esm/core/Table/columns/selectionColumn.js +23 -51
- package/esm/core/Table/filters/BaseFilter.js +7 -15
- package/esm/core/Table/filters/DateRangeFilter/DatePickerInput.js +42 -107
- package/esm/core/Table/filters/DateRangeFilter/DateRangeFilter.js +52 -110
- package/esm/core/Table/filters/FilterButtonBar.js +9 -28
- package/esm/core/Table/filters/FilterToggle.js +18 -51
- package/esm/core/Table/filters/NumberRangeFilter/NumberRangeFilter.js +28 -50
- package/esm/core/Table/filters/TextFilter/TextFilter.js +20 -32
- package/esm/core/Table/filters/customFilterFunctions.js +12 -14
- package/esm/core/Table/filters/defaultFilterFunctions.js +79 -84
- package/esm/core/Table/filters/tableFilters.js +25 -34
- package/esm/core/Table/hooks/useColumnDragAndDrop.js +81 -88
- package/esm/core/Table/hooks/useExpanderCell.js +20 -26
- package/esm/core/Table/hooks/useResizeColumns.js +287 -353
- package/esm/core/Table/hooks/useScrollToRow.js +34 -42
- package/esm/core/Table/hooks/useSelectionCell.js +6 -10
- package/esm/core/Table/hooks/useStickyColumns.js +59 -61
- package/esm/core/Table/hooks/useSubRowFiltering.js +83 -90
- package/esm/core/Table/hooks/useSubRowSelection.js +27 -28
- package/esm/core/Table/index.js +1 -5
- package/esm/core/Table/utils.js +38 -40
- package/esm/core/Tabs/Tabs.js +226 -401
- package/esm/core/Tag/Tag.js +8 -35
- package/esm/core/Tag/TagContainer.js +5 -17
- package/esm/core/Textarea/Textarea.js +1 -6
- package/esm/core/ThemeProvider/ThemeProvider.js +44 -101
- package/esm/core/Tile/Tile.js +218 -386
- package/esm/core/TimePicker/TimePicker.js +228 -448
- package/esm/core/Toast/Toast.js +99 -193
- package/esm/core/Toast/Toaster.js +69 -82
- package/esm/core/ToggleSwitch/ToggleSwitch.js +17 -60
- package/esm/core/Tooltip/Tooltip.js +86 -151
- package/esm/core/TransferList/TransferList.js +93 -157
- package/esm/core/Tree/Tree.js +122 -196
- package/esm/core/Tree/TreeContext.js +5 -5
- package/esm/core/Tree/TreeNode.js +96 -195
- package/esm/core/Tree/TreeNodeExpander.js +5 -16
- package/esm/core/Typography/Blockquote.js +4 -12
- package/esm/core/Typography/Kbd.js +15 -24
- package/esm/core/Typography/Text.js +7 -20
- package/esm/core/VisuallyHidden/VisuallyHidden.js +2 -8
- package/esm/core/utils/color/ColorValue.js +449 -524
- package/esm/core/utils/components/AutoclearingHiddenLiveRegion.js +7 -11
- package/esm/core/utils/components/ButtonBase.js +13 -31
- package/esm/core/utils/components/FocusTrap.js +32 -41
- package/esm/core/utils/components/InputContainer.js +11 -50
- package/esm/core/utils/components/InputFlexContainer.js +2 -15
- package/esm/core/utils/components/MiddleTextTruncation.js +17 -27
- package/esm/core/utils/components/Portal.js +12 -12
- package/esm/core/utils/components/Resizer.js +191 -249
- package/esm/core/utils/components/VirtualScroll.js +218 -297
- package/esm/core/utils/components/WithCSSTransition.js +26 -43
- package/esm/core/utils/functions/colors.js +19 -19
- package/esm/core/utils/functions/date.js +8 -8
- package/esm/core/utils/functions/dev.js +12 -11
- package/esm/core/utils/functions/dom.js +14 -17
- package/esm/core/utils/functions/focusable.js +15 -24
- package/esm/core/utils/functions/import.js +2 -4
- package/esm/core/utils/functions/numbers.js +7 -7
- package/esm/core/utils/functions/polymorphic.js +23 -32
- package/esm/core/utils/functions/react.js +19 -21
- package/esm/core/utils/functions/supports.js +1 -2
- package/esm/core/utils/hooks/useContainerWidth.js +13 -16
- package/esm/core/utils/hooks/useControlledState.js +8 -17
- package/esm/core/utils/hooks/useDragAndDrop.js +80 -99
- package/esm/core/utils/hooks/useEventListener.js +18 -18
- package/esm/core/utils/hooks/useGlobals.js +21 -27
- package/esm/core/utils/hooks/useId.js +3 -4
- package/esm/core/utils/hooks/useIntersection.js +19 -25
- package/esm/core/utils/hooks/useIsClient.js +5 -5
- package/esm/core/utils/hooks/useIsomorphicLayoutEffect.js +1 -2
- package/esm/core/utils/hooks/useLatestRef.js +5 -5
- package/esm/core/utils/hooks/useMediaQuery.js +25 -23
- package/esm/core/utils/hooks/useMergedRefs.js +12 -11
- package/esm/core/utils/hooks/useOverflow.js +51 -63
- package/esm/core/utils/hooks/useResizeObserver.js +12 -17
- package/esm/core/utils/hooks/useSafeContext.js +5 -5
- package/esm/core/utils/icons/StatusIconMap.js +4 -8
- package/esm/core/utils/icons/SvgCalendar.js +2 -7
- package/esm/core/utils/icons/SvgCaretDownSmall.js +2 -7
- package/esm/core/utils/icons/SvgCaretRightSmall.js +2 -7
- package/esm/core/utils/icons/SvgCaretUpSmall.js +2 -7
- package/esm/core/utils/icons/SvgCheckmark.js +2 -5
- package/esm/core/utils/icons/SvgCheckmarkSmall.js +2 -7
- package/esm/core/utils/icons/SvgChevronLeft.js +2 -7
- package/esm/core/utils/icons/SvgChevronLeftDouble.js +2 -7
- package/esm/core/utils/icons/SvgChevronRight.js +2 -7
- package/esm/core/utils/icons/SvgChevronRightDouble.js +2 -7
- package/esm/core/utils/icons/SvgClose.js +2 -7
- package/esm/core/utils/icons/SvgCloseSmall.js +2 -7
- package/esm/core/utils/icons/SvgColumnManager.js +2 -7
- package/esm/core/utils/icons/SvgDocument.js +2 -5
- package/esm/core/utils/icons/SvgFilter.js +2 -5
- package/esm/core/utils/icons/SvgFilterHollow.js +2 -7
- package/esm/core/utils/icons/SvgImportantSmall.js +2 -7
- package/esm/core/utils/icons/SvgInfoCircular.js +2 -7
- package/esm/core/utils/icons/SvgMore.js +2 -7
- package/esm/core/utils/icons/SvgMoreVertical.js +2 -7
- package/esm/core/utils/icons/SvgNew.js +2 -7
- package/esm/core/utils/icons/SvgSearch.js +2 -7
- package/esm/core/utils/icons/SvgSmileyHappy.js +2 -7
- package/esm/core/utils/icons/SvgSortDown.js +2 -7
- package/esm/core/utils/icons/SvgSortUp.js +2 -7
- package/esm/core/utils/icons/SvgStatusError.js +2 -7
- package/esm/core/utils/icons/SvgStatusSuccess.js +2 -7
- package/esm/core/utils/icons/SvgStatusWarning.js +2 -7
- package/esm/core/utils/icons/SvgSwap.js +2 -7
- package/esm/core/utils/icons/SvgUpload.js +2 -7
- package/esm/index.js +3 -21
- package/esm/styles.js +414 -425
- package/package.json +2 -2
- package/styles.css +6 -6
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
3
|
-
exports.ColorValue =
|
|
4
|
-
exports.isHsvColor =
|
|
5
|
-
exports.isHslColor =
|
|
6
|
-
exports.isRgbColor =
|
|
7
|
-
void 0;
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ColorValue = exports.isHsvColor = exports.isHslColor = exports.isRgbColor = void 0;
|
|
8
4
|
/*---------------------------------------------------------------------------------------------
|
|
9
5
|
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
10
6
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
11
7
|
*--------------------------------------------------------------------------------------------*/
|
|
12
|
-
const numbers_js_1 = require(
|
|
8
|
+
const numbers_js_1 = require("../functions/numbers.js");
|
|
13
9
|
// portions adapted from Three.js Copyright © 2010-2017 three.js authors
|
|
14
10
|
const scratchBytes = new Uint8Array(4);
|
|
15
11
|
const scratchUInt32 = new Uint32Array(scratchBytes.buffer);
|
|
@@ -17,27 +13,21 @@ const scratchUInt32 = new Uint32Array(scratchBytes.buffer);
|
|
|
17
13
|
* isRgbValue type guard.
|
|
18
14
|
*/
|
|
19
15
|
const isRgbColor = (value) => {
|
|
20
|
-
|
|
21
|
-
typeof value !== 'string' && 'r' in value && 'g' in value && 'b' in value
|
|
22
|
-
);
|
|
16
|
+
return (typeof value !== 'string' && 'r' in value && 'g' in value && 'b' in value);
|
|
23
17
|
};
|
|
24
18
|
exports.isRgbColor = isRgbColor;
|
|
25
19
|
/**
|
|
26
20
|
* isHslValue type guard.
|
|
27
21
|
*/
|
|
28
22
|
const isHslColor = (value) => {
|
|
29
|
-
|
|
30
|
-
typeof value !== 'string' && 'h' in value && 's' in value && 'l' in value
|
|
31
|
-
);
|
|
23
|
+
return (typeof value !== 'string' && 'h' in value && 's' in value && 'l' in value);
|
|
32
24
|
};
|
|
33
25
|
exports.isHslColor = isHslColor;
|
|
34
26
|
/**
|
|
35
27
|
* isHsvValue type guard.
|
|
36
28
|
*/
|
|
37
29
|
const isHsvColor = (value) => {
|
|
38
|
-
|
|
39
|
-
typeof value !== 'string' && 'h' in value && 's' in value && 'v' in value
|
|
40
|
-
);
|
|
30
|
+
return (typeof value !== 'string' && 'h' in value && 's' in value && 'v' in value);
|
|
41
31
|
};
|
|
42
32
|
exports.isHsvColor = isHsvColor;
|
|
43
33
|
/**
|
|
@@ -52,547 +42,475 @@ exports.isHsvColor = isHsvColor;
|
|
|
52
42
|
* @public
|
|
53
43
|
*/
|
|
54
44
|
class ColorValue {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Create a new ColorValue.
|
|
62
|
-
* @param val value to use.
|
|
63
|
-
*
|
|
64
|
-
* If a string, must be in one of the following forms:
|
|
65
|
-
* *"rgb(255,0,0)"*
|
|
66
|
-
* *"rgba(255,0,0,.2)"*
|
|
67
|
-
* *"rgb(100%,0%,0%)"*
|
|
68
|
-
* *"hsl(120,50%,50%)"*
|
|
69
|
-
* *"#rrggbb"*
|
|
70
|
-
*/
|
|
71
|
-
static create(val) {
|
|
72
|
-
if (!val) {
|
|
73
|
-
return ColorValue.fromTbgr(0);
|
|
45
|
+
constructor(tbgr, hue) {
|
|
46
|
+
scratchUInt32[0] = tbgr; // Force to be a 32-bit unsigned integer
|
|
47
|
+
this._tbgr = scratchUInt32[0];
|
|
48
|
+
this._hue = hue;
|
|
74
49
|
}
|
|
75
|
-
|
|
76
|
-
|
|
50
|
+
/**
|
|
51
|
+
* Create a new ColorValue.
|
|
52
|
+
* @param val value to use.
|
|
53
|
+
*
|
|
54
|
+
* If a string, must be in one of the following forms:
|
|
55
|
+
* *"rgb(255,0,0)"*
|
|
56
|
+
* *"rgba(255,0,0,.2)"*
|
|
57
|
+
* *"rgb(100%,0%,0%)"*
|
|
58
|
+
* *"hsl(120,50%,50%)"*
|
|
59
|
+
* *"#rrggbb"*
|
|
60
|
+
*/
|
|
61
|
+
static create(val) {
|
|
62
|
+
if (!val) {
|
|
63
|
+
return ColorValue.fromTbgr(0);
|
|
64
|
+
}
|
|
65
|
+
if ((0, exports.isRgbColor)(val)) {
|
|
66
|
+
return ColorValue.fromRGB(val);
|
|
67
|
+
}
|
|
68
|
+
if ((0, exports.isHslColor)(val)) {
|
|
69
|
+
return ColorValue.fromHSL(val);
|
|
70
|
+
}
|
|
71
|
+
if ((0, exports.isHsvColor)(val)) {
|
|
72
|
+
return ColorValue.fromHSV(val);
|
|
73
|
+
}
|
|
74
|
+
if (typeof val === 'string') {
|
|
75
|
+
return ColorValue.fromString(val, ColorValue.fromTbgr(0));
|
|
76
|
+
}
|
|
77
|
+
return ColorValue.fromTbgr(0);
|
|
77
78
|
}
|
|
78
|
-
|
|
79
|
-
|
|
79
|
+
/**
|
|
80
|
+
* Convert this ColorValue to an unsigned 32 bit integer representing the 0xTTBBGGRR value
|
|
81
|
+
*/
|
|
82
|
+
toTbgr() {
|
|
83
|
+
return this._tbgr;
|
|
80
84
|
}
|
|
81
|
-
|
|
82
|
-
|
|
85
|
+
/**
|
|
86
|
+
* Create a ColorValue from its 0xTTBBGGRR representation.
|
|
87
|
+
*/
|
|
88
|
+
static fromTbgr(tbgr) {
|
|
89
|
+
return new ColorValue(tbgr);
|
|
83
90
|
}
|
|
84
|
-
|
|
85
|
-
|
|
91
|
+
/**
|
|
92
|
+
* Create a ColorValue from Red, Green, Blue, Transparency values. All inputs should be integers between 0-255.
|
|
93
|
+
*/
|
|
94
|
+
static fromRgbt(red, green, blue, transparency) {
|
|
95
|
+
return this.fromTbgr(this.computeTbgrFromComponents(red, green, blue, transparency));
|
|
86
96
|
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
*/
|
|
98
|
-
static fromTbgr(tbgr) {
|
|
99
|
-
return new ColorValue(tbgr);
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Create a ColorValue from Red, Green, Blue, Transparency values. All inputs should be integers between 0-255.
|
|
103
|
-
*/
|
|
104
|
-
static fromRgbt(red, green, blue, transparency) {
|
|
105
|
-
return this.fromTbgr(
|
|
106
|
-
this.computeTbgrFromComponents(red, green, blue, transparency),
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
/**
|
|
110
|
-
* Compute the 0xTTBBGGRR value corresponding to the specified Red, Green, Blue, Transparency components.
|
|
111
|
-
* All inputs should be integers between 0-255.
|
|
112
|
-
*/
|
|
113
|
-
static computeTbgrFromComponents(red, green, blue, transparency) {
|
|
114
|
-
scratchBytes[0] = red;
|
|
115
|
-
scratchBytes[1] = green;
|
|
116
|
-
scratchBytes[2] = blue;
|
|
117
|
-
scratchBytes[3] = transparency || 0;
|
|
118
|
-
return scratchUInt32[0];
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Create a ColorValue from a string representation. The following representations are supported:
|
|
122
|
-
* *"rgb(255,0,0)"*
|
|
123
|
-
* *"rgba(255,0,0,.2)"*
|
|
124
|
-
* *"rgb(100%,0%,0%)"*
|
|
125
|
-
* *"hsl(120,50%,50%)"*
|
|
126
|
-
* *"#rrggbb"*
|
|
127
|
-
* NOTE: If defaultColorIfNotParsed is not defined and string is invalid then error is thrown.
|
|
128
|
-
* This allows component builders to know if they received bad input from user.
|
|
129
|
-
*/
|
|
130
|
-
static fromString(val, defaultColorIfNotParsed) {
|
|
131
|
-
const [tbgr, hue] = this.computeTbgrFromString(
|
|
132
|
-
val,
|
|
133
|
-
defaultColorIfNotParsed?.toTbgr(),
|
|
134
|
-
);
|
|
135
|
-
return new ColorValue(tbgr, hue);
|
|
136
|
-
}
|
|
137
|
-
/** Create a ColorValue from hue, saturation, lightness values. */
|
|
138
|
-
static fromHSL(hsl) {
|
|
139
|
-
const alpha = hsl.a ?? 1;
|
|
140
|
-
return new ColorValue(
|
|
141
|
-
this.computeTbgrFromHSL(
|
|
142
|
-
hsl.h / 360,
|
|
143
|
-
hsl.s / 100,
|
|
144
|
-
hsl.l / 100,
|
|
145
|
-
Math.round((1 - alpha) * 255),
|
|
146
|
-
),
|
|
147
|
-
hsl.h,
|
|
148
|
-
);
|
|
149
|
-
}
|
|
150
|
-
/** Create a ColorValue from an RgbColor */
|
|
151
|
-
static fromRGB(rgb) {
|
|
152
|
-
const alpha = rgb.a ?? 1;
|
|
153
|
-
return ColorValue.fromRgbt(
|
|
154
|
-
rgb.r,
|
|
155
|
-
rgb.g,
|
|
156
|
-
rgb.b,
|
|
157
|
-
Math.round((1 - alpha) * 255),
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
/**
|
|
161
|
-
* Create a ColorValue from an HsvColor
|
|
162
|
-
*/
|
|
163
|
-
static fromHSV(hsv) {
|
|
164
|
-
const alpha = hsv.a ?? 1;
|
|
165
|
-
const transparency = Math.round((1 - alpha) * 255);
|
|
166
|
-
// Check for simple case first.
|
|
167
|
-
if (!hsv.s || hsv.h === -1) {
|
|
168
|
-
// hue must be undefined, have no color only white
|
|
169
|
-
const white = 0xff & Math.floor((255.0 * hsv.v) / 100.0 + 0.5 + 3.0e-14);
|
|
170
|
-
return ColorValue.fromRgbt(white, white, white, 0);
|
|
97
|
+
/**
|
|
98
|
+
* Compute the 0xTTBBGGRR value corresponding to the specified Red, Green, Blue, Transparency components.
|
|
99
|
+
* All inputs should be integers between 0-255.
|
|
100
|
+
*/
|
|
101
|
+
static computeTbgrFromComponents(red, green, blue, transparency) {
|
|
102
|
+
scratchBytes[0] = red;
|
|
103
|
+
scratchBytes[1] = green;
|
|
104
|
+
scratchBytes[2] = blue;
|
|
105
|
+
scratchBytes[3] = transparency || 0;
|
|
106
|
+
return scratchUInt32[0];
|
|
171
107
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
108
|
+
/**
|
|
109
|
+
* Create a ColorValue from a string representation. The following representations are supported:
|
|
110
|
+
* *"rgb(255,0,0)"*
|
|
111
|
+
* *"rgba(255,0,0,.2)"*
|
|
112
|
+
* *"rgb(100%,0%,0%)"*
|
|
113
|
+
* *"hsl(120,50%,50%)"*
|
|
114
|
+
* *"#rrggbb"*
|
|
115
|
+
* NOTE: If defaultColorIfNotParsed is not defined and string is invalid then error is thrown.
|
|
116
|
+
* This allows component builders to know if they received bad input from user.
|
|
117
|
+
*/
|
|
118
|
+
static fromString(val, defaultColorIfNotParsed) {
|
|
119
|
+
const [tbgr, hue] = this.computeTbgrFromString(val, defaultColorIfNotParsed?.toTbgr());
|
|
120
|
+
return new ColorValue(tbgr, hue);
|
|
177
121
|
}
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
dsaturation /= 100;
|
|
183
|
-
const p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
|
|
184
|
-
const q =
|
|
185
|
-
0xff &
|
|
186
|
-
Math.floor(dvalue * (1.0 - dsaturation * hueFractpart) * 255.0 + 0.5);
|
|
187
|
-
const t =
|
|
188
|
-
0xff &
|
|
189
|
-
Math.floor(
|
|
190
|
-
dvalue * (1.0 - dsaturation * (1.0 - hueFractpart)) * 255.0 + 0.5,
|
|
191
|
-
);
|
|
192
|
-
const v = 0xff & Math.floor(dvalue * 255 + 0.5);
|
|
193
|
-
let r = 0,
|
|
194
|
-
b = 0,
|
|
195
|
-
g = 0;
|
|
196
|
-
switch (hueIntpart) {
|
|
197
|
-
case 0:
|
|
198
|
-
r = v;
|
|
199
|
-
g = t;
|
|
200
|
-
b = p;
|
|
201
|
-
break; // reddish
|
|
202
|
-
case 1:
|
|
203
|
-
(r = q), (g = v);
|
|
204
|
-
b = p;
|
|
205
|
-
break; // yellowish
|
|
206
|
-
case 2:
|
|
207
|
-
(r = p), (g = v);
|
|
208
|
-
b = t;
|
|
209
|
-
break; // greenish
|
|
210
|
-
case 3:
|
|
211
|
-
(r = p), (g = q);
|
|
212
|
-
b = v;
|
|
213
|
-
break; // cyanish
|
|
214
|
-
case 4:
|
|
215
|
-
(r = t), (g = p);
|
|
216
|
-
b = v;
|
|
217
|
-
break; // bluish
|
|
218
|
-
case 5:
|
|
219
|
-
(r = v), (g = p);
|
|
220
|
-
b = q;
|
|
221
|
-
break; // magenta-ish
|
|
122
|
+
/** Create a ColorValue from hue, saturation, lightness values. */
|
|
123
|
+
static fromHSL(hsl) {
|
|
124
|
+
const alpha = hsl.a ?? 1;
|
|
125
|
+
return new ColorValue(this.computeTbgrFromHSL(hsl.h / 360, hsl.s / 100, hsl.l / 100, Math.round((1 - alpha) * 255)), hsl.h);
|
|
222
126
|
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
}
|
|
228
|
-
/**
|
|
229
|
-
* Compute the 0xTTBBGGRR value corresponding to a string representation of a color. The following representations are supported:
|
|
230
|
-
* *"rgb(255,0,0)"*
|
|
231
|
-
* *"rgba(255,0,0,.2)"*
|
|
232
|
-
* *"rgb(100%,0%,0%)"*
|
|
233
|
-
* *"hsl(120,50%,50%)"*
|
|
234
|
-
* *"#rrggbb"*
|
|
235
|
-
*/
|
|
236
|
-
static computeTbgrFromString(val, defaultColorIfNotParsed) {
|
|
237
|
-
val = val.toLowerCase();
|
|
238
|
-
let m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(val);
|
|
239
|
-
if (m) {
|
|
240
|
-
// rgb / hsl
|
|
241
|
-
let color;
|
|
242
|
-
const name = m[1];
|
|
243
|
-
const components = m[2];
|
|
244
|
-
const hasPercent = (str) => str[str.length - 1] === '%';
|
|
245
|
-
const floatOrPercent = (str) => {
|
|
246
|
-
const v = parseFloat(str);
|
|
247
|
-
return (
|
|
248
|
-
255 *
|
|
249
|
-
(0, numbers_js_1.getBoundedValue)(hasPercent(str) ? v / 100 : v, 0, 1)
|
|
250
|
-
);
|
|
251
|
-
};
|
|
252
|
-
const intOrPercent = (str) => {
|
|
253
|
-
const v = hasPercent(str)
|
|
254
|
-
? (parseFloat(str) / 100) * 255
|
|
255
|
-
: parseInt(str, 10);
|
|
256
|
-
return (0, numbers_js_1.getBoundedValue)(v, 0, 255);
|
|
257
|
-
};
|
|
258
|
-
switch (name) {
|
|
259
|
-
case 'rgb':
|
|
260
|
-
case 'rgba':
|
|
261
|
-
color =
|
|
262
|
-
/^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(
|
|
263
|
-
components,
|
|
264
|
-
);
|
|
265
|
-
if (color) {
|
|
266
|
-
// rgb(255,0,0) rgba(255,0,0,0.5)
|
|
267
|
-
return [
|
|
268
|
-
this.computeTbgrFromComponents(
|
|
269
|
-
intOrPercent(color[1]),
|
|
270
|
-
intOrPercent(color[2]),
|
|
271
|
-
intOrPercent(color[3]),
|
|
272
|
-
typeof color[4] === 'string'
|
|
273
|
-
? 255 - floatOrPercent(color[4])
|
|
274
|
-
: 0,
|
|
275
|
-
),
|
|
276
|
-
undefined,
|
|
277
|
-
];
|
|
278
|
-
}
|
|
279
|
-
break;
|
|
280
|
-
case 'hsl':
|
|
281
|
-
case 'hsla':
|
|
282
|
-
color =
|
|
283
|
-
/^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(
|
|
284
|
-
components,
|
|
285
|
-
);
|
|
286
|
-
if (color) {
|
|
287
|
-
// hsl(120,50%,50%) hsla(120,50%,50%,0.5)
|
|
288
|
-
const h = parseFloat(color[1]);
|
|
289
|
-
const s = parseInt(color[2], 10) / 100;
|
|
290
|
-
const l = parseInt(color[3], 10) / 100;
|
|
291
|
-
const t =
|
|
292
|
-
typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0;
|
|
293
|
-
return [this.computeTbgrFromHSL(h / 360, s, l, t), h];
|
|
294
|
-
}
|
|
295
|
-
break;
|
|
296
|
-
}
|
|
297
|
-
// eslint-disable-next-line no-cond-assign
|
|
298
|
-
} else if ((m = /^\#([A-Fa-f\d]+)$/.exec(val))) {
|
|
299
|
-
// hex color
|
|
300
|
-
const hex = m[1];
|
|
301
|
-
const size = hex.length;
|
|
302
|
-
if (size === 3) {
|
|
303
|
-
// #ff0
|
|
304
|
-
return [
|
|
305
|
-
this.computeTbgrFromComponents(
|
|
306
|
-
parseInt(hex.charAt(0) + hex.charAt(0), 16),
|
|
307
|
-
parseInt(hex.charAt(1) + hex.charAt(1), 16),
|
|
308
|
-
parseInt(hex.charAt(2) + hex.charAt(2), 16),
|
|
309
|
-
0,
|
|
310
|
-
),
|
|
311
|
-
undefined,
|
|
312
|
-
];
|
|
313
|
-
}
|
|
314
|
-
if (size === 6) {
|
|
315
|
-
// #ff0000
|
|
316
|
-
return [
|
|
317
|
-
this.computeTbgrFromComponents(
|
|
318
|
-
parseInt(hex.charAt(0) + hex.charAt(1), 16),
|
|
319
|
-
parseInt(hex.charAt(2) + hex.charAt(3), 16),
|
|
320
|
-
parseInt(hex.charAt(4) + hex.charAt(5), 16),
|
|
321
|
-
0,
|
|
322
|
-
),
|
|
323
|
-
undefined,
|
|
324
|
-
];
|
|
325
|
-
}
|
|
326
|
-
if (size === 8) {
|
|
327
|
-
// #ff0000ff
|
|
328
|
-
return [
|
|
329
|
-
this.computeTbgrFromComponents(
|
|
330
|
-
parseInt(hex.charAt(0) + hex.charAt(1), 16),
|
|
331
|
-
parseInt(hex.charAt(2) + hex.charAt(3), 16),
|
|
332
|
-
parseInt(hex.charAt(4) + hex.charAt(5), 16),
|
|
333
|
-
255 - parseInt(hex.charAt(6) + hex.charAt(7), 16),
|
|
334
|
-
),
|
|
335
|
-
undefined,
|
|
336
|
-
];
|
|
337
|
-
}
|
|
127
|
+
/** Create a ColorValue from an RgbColor */
|
|
128
|
+
static fromRGB(rgb) {
|
|
129
|
+
const alpha = rgb.a ?? 1;
|
|
130
|
+
return ColorValue.fromRgbt(rgb.r, rgb.g, rgb.b, Math.round((1 - alpha) * 255));
|
|
338
131
|
}
|
|
339
|
-
|
|
340
|
-
|
|
132
|
+
/**
|
|
133
|
+
* Create a ColorValue from an HsvColor
|
|
134
|
+
*/
|
|
135
|
+
static fromHSV(hsv) {
|
|
136
|
+
const alpha = hsv.a ?? 1;
|
|
137
|
+
const transparency = Math.round((1 - alpha) * 255);
|
|
138
|
+
// Check for simple case first.
|
|
139
|
+
if (!hsv.s || hsv.h === -1) {
|
|
140
|
+
// hue must be undefined, have no color only white
|
|
141
|
+
const white = 0xff & Math.floor((255.0 * hsv.v) / 100.0 + 0.5 + 3.0e-14);
|
|
142
|
+
return ColorValue.fromRgbt(white, white, white, 0);
|
|
143
|
+
}
|
|
144
|
+
let dhue = hsv.h, dsaturation = hsv.s, dvalue = hsv.v;
|
|
145
|
+
if (dhue === 360) {
|
|
146
|
+
dhue = 0.0;
|
|
147
|
+
}
|
|
148
|
+
dhue /= 60; // hue is now [0..6]
|
|
149
|
+
const hueIntpart = Math.floor(dhue); // convert double -> int
|
|
150
|
+
const hueFractpart = dhue - hueIntpart;
|
|
151
|
+
dvalue /= 100;
|
|
152
|
+
dsaturation /= 100;
|
|
153
|
+
const p = 0xff & Math.floor(dvalue * (1.0 - dsaturation) * 255.0 + 0.5);
|
|
154
|
+
const q = 0xff &
|
|
155
|
+
Math.floor(dvalue * (1.0 - dsaturation * hueFractpart) * 255.0 + 0.5);
|
|
156
|
+
const t = 0xff &
|
|
157
|
+
Math.floor(dvalue * (1.0 - dsaturation * (1.0 - hueFractpart)) * 255.0 + 0.5);
|
|
158
|
+
const v = 0xff & Math.floor(dvalue * 255 + 0.5);
|
|
159
|
+
let r = 0, b = 0, g = 0;
|
|
160
|
+
switch (hueIntpart) {
|
|
161
|
+
case 0:
|
|
162
|
+
r = v;
|
|
163
|
+
g = t;
|
|
164
|
+
b = p;
|
|
165
|
+
break; // reddish
|
|
166
|
+
case 1:
|
|
167
|
+
(r = q), (g = v);
|
|
168
|
+
b = p;
|
|
169
|
+
break; // yellowish
|
|
170
|
+
case 2:
|
|
171
|
+
(r = p), (g = v);
|
|
172
|
+
b = t;
|
|
173
|
+
break; // greenish
|
|
174
|
+
case 3:
|
|
175
|
+
(r = p), (g = q);
|
|
176
|
+
b = v;
|
|
177
|
+
break; // cyanish
|
|
178
|
+
case 4:
|
|
179
|
+
(r = t), (g = p);
|
|
180
|
+
b = v;
|
|
181
|
+
break; // bluish
|
|
182
|
+
case 5:
|
|
183
|
+
(r = v), (g = p);
|
|
184
|
+
b = q;
|
|
185
|
+
break; // magenta-ish
|
|
186
|
+
}
|
|
187
|
+
return new ColorValue(ColorValue.computeTbgrFromComponents(r, g, b, transparency), hsv.h);
|
|
341
188
|
}
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
189
|
+
/**
|
|
190
|
+
* Compute the 0xTTBBGGRR value corresponding to a string representation of a color. The following representations are supported:
|
|
191
|
+
* *"rgb(255,0,0)"*
|
|
192
|
+
* *"rgba(255,0,0,.2)"*
|
|
193
|
+
* *"rgb(100%,0%,0%)"*
|
|
194
|
+
* *"hsl(120,50%,50%)"*
|
|
195
|
+
* *"#rrggbb"*
|
|
196
|
+
*/
|
|
197
|
+
static computeTbgrFromString(val, defaultColorIfNotParsed) {
|
|
198
|
+
val = val.toLowerCase();
|
|
199
|
+
let m = /^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(val);
|
|
200
|
+
if (m) {
|
|
201
|
+
// rgb / hsl
|
|
202
|
+
let color;
|
|
203
|
+
const name = m[1];
|
|
204
|
+
const components = m[2];
|
|
205
|
+
const hasPercent = (str) => str[str.length - 1] === '%';
|
|
206
|
+
const floatOrPercent = (str) => {
|
|
207
|
+
const v = parseFloat(str);
|
|
208
|
+
return 255 * (0, numbers_js_1.getBoundedValue)(hasPercent(str) ? v / 100 : v, 0, 1);
|
|
209
|
+
};
|
|
210
|
+
const intOrPercent = (str) => {
|
|
211
|
+
const v = hasPercent(str)
|
|
212
|
+
? (parseFloat(str) / 100) * 255
|
|
213
|
+
: parseInt(str, 10);
|
|
214
|
+
return (0, numbers_js_1.getBoundedValue)(v, 0, 255);
|
|
215
|
+
};
|
|
216
|
+
switch (name) {
|
|
217
|
+
case 'rgb':
|
|
218
|
+
case 'rgba':
|
|
219
|
+
color =
|
|
220
|
+
/^(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
|
|
221
|
+
if (color) {
|
|
222
|
+
// rgb(255,0,0) rgba(255,0,0,0.5)
|
|
223
|
+
return [
|
|
224
|
+
this.computeTbgrFromComponents(intOrPercent(color[1]), intOrPercent(color[2]), intOrPercent(color[3]), typeof color[4] === 'string'
|
|
225
|
+
? 255 - floatOrPercent(color[4])
|
|
226
|
+
: 0),
|
|
227
|
+
undefined,
|
|
228
|
+
];
|
|
229
|
+
}
|
|
230
|
+
break;
|
|
231
|
+
case 'hsl':
|
|
232
|
+
case 'hsla':
|
|
233
|
+
color =
|
|
234
|
+
/^(\d*\.?\d+)\s*,\s*(\d+)\%\s*,\s*(\d+)\%\s*(?:,\s*(\d*\.?\d+)\s*)?$/.exec(components);
|
|
235
|
+
if (color) {
|
|
236
|
+
// hsl(120,50%,50%) hsla(120,50%,50%,0.5)
|
|
237
|
+
const h = parseFloat(color[1]);
|
|
238
|
+
const s = parseInt(color[2], 10) / 100;
|
|
239
|
+
const l = parseInt(color[3], 10) / 100;
|
|
240
|
+
const t = typeof color[4] === 'string' ? 255 - floatOrPercent(color[4]) : 0;
|
|
241
|
+
return [this.computeTbgrFromHSL(h / 360, s, l, t), h];
|
|
242
|
+
}
|
|
243
|
+
break;
|
|
244
|
+
}
|
|
245
|
+
// eslint-disable-next-line no-cond-assign
|
|
246
|
+
}
|
|
247
|
+
else if ((m = /^\#([A-Fa-f\d]+)$/.exec(val))) {
|
|
248
|
+
// hex color
|
|
249
|
+
const hex = m[1];
|
|
250
|
+
const size = hex.length;
|
|
251
|
+
if (size === 3) {
|
|
252
|
+
// #ff0
|
|
253
|
+
return [
|
|
254
|
+
this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(0), 16), parseInt(hex.charAt(1) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(2), 16), 0),
|
|
255
|
+
undefined,
|
|
256
|
+
];
|
|
257
|
+
}
|
|
258
|
+
if (size === 6) {
|
|
259
|
+
// #ff0000
|
|
260
|
+
return [
|
|
261
|
+
this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 0),
|
|
262
|
+
undefined,
|
|
263
|
+
];
|
|
264
|
+
}
|
|
265
|
+
if (size === 8) {
|
|
266
|
+
// #ff0000ff
|
|
267
|
+
return [
|
|
268
|
+
this.computeTbgrFromComponents(parseInt(hex.charAt(0) + hex.charAt(1), 16), parseInt(hex.charAt(2) + hex.charAt(3), 16), parseInt(hex.charAt(4) + hex.charAt(5), 16), 255 - parseInt(hex.charAt(6) + hex.charAt(7), 16)),
|
|
269
|
+
undefined,
|
|
270
|
+
];
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
if (defaultColorIfNotParsed) {
|
|
274
|
+
return [defaultColorIfNotParsed, undefined];
|
|
275
|
+
}
|
|
276
|
+
throw new Error('unable to parse string into ColorValue');
|
|
368
277
|
}
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
static getAlpha(tbgr) {
|
|
381
|
-
scratchUInt32[0] = tbgr;
|
|
382
|
-
return 255 - scratchBytes[3];
|
|
383
|
-
}
|
|
384
|
-
/**
|
|
385
|
-
* Convert this ColorValue to a string in the form "#rrggbb" or "#rrggbbaa" where values are hex digits of the respective colors
|
|
386
|
-
*/
|
|
387
|
-
toHexString(includeAlpha) {
|
|
388
|
-
if (includeAlpha) {
|
|
389
|
-
let value = this.getRgb(includeAlpha);
|
|
390
|
-
if (value < 0) {
|
|
391
|
-
value = 0xffffffff + value + 1;
|
|
392
|
-
}
|
|
393
|
-
return `#${`00000000${value.toString(16)}`.slice(-8)}`;
|
|
278
|
+
/**
|
|
279
|
+
* Get the r,g,b,t values encoded in an 0xTTBBGGRR value. Values will be integers between 0-255.
|
|
280
|
+
*/
|
|
281
|
+
static getColors(tbgr) {
|
|
282
|
+
scratchUInt32[0] = tbgr;
|
|
283
|
+
return {
|
|
284
|
+
b: scratchBytes[2],
|
|
285
|
+
g: scratchBytes[1],
|
|
286
|
+
r: scratchBytes[0],
|
|
287
|
+
t: scratchBytes[3],
|
|
288
|
+
};
|
|
394
289
|
}
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
290
|
+
/**
|
|
291
|
+
* Get the RGB value of the 0xTTBBGGRR color as a number in 0xRRGGBB or 0xRRGGBBAA format
|
|
292
|
+
*/
|
|
293
|
+
getRgb(includeAlpha) {
|
|
294
|
+
scratchUInt32[0] = this._tbgr;
|
|
295
|
+
if (includeAlpha) {
|
|
296
|
+
return ((scratchBytes[0] << 24) +
|
|
297
|
+
(scratchBytes[1] << 16) +
|
|
298
|
+
(scratchBytes[2] << 8) +
|
|
299
|
+
(255 - scratchBytes[3]));
|
|
300
|
+
}
|
|
301
|
+
return (scratchBytes[0] << 16) + (scratchBytes[1] << 8) + scratchBytes[2];
|
|
302
|
+
}
|
|
303
|
+
/**
|
|
304
|
+
* Get the alpha value for this ColorDef. Will be between 0-255
|
|
305
|
+
*/
|
|
306
|
+
getAlpha() {
|
|
307
|
+
return ColorValue.getAlpha(this._tbgr);
|
|
308
|
+
}
|
|
309
|
+
/**
|
|
310
|
+
* Extract the alpha value from a 0xTTBBGGRR color.
|
|
311
|
+
*/
|
|
312
|
+
static getAlpha(tbgr) {
|
|
313
|
+
scratchUInt32[0] = tbgr;
|
|
314
|
+
return 255 - scratchBytes[3];
|
|
315
|
+
}
|
|
316
|
+
/**
|
|
317
|
+
* Convert this ColorValue to a string in the form "#rrggbb" or "#rrggbbaa" where values are hex digits of the respective colors
|
|
318
|
+
*/
|
|
319
|
+
toHexString(includeAlpha) {
|
|
320
|
+
if (includeAlpha) {
|
|
321
|
+
let value = this.getRgb(includeAlpha);
|
|
322
|
+
if (value < 0) {
|
|
323
|
+
value = 0xffffffff + value + 1;
|
|
324
|
+
}
|
|
325
|
+
return `#${`00000000${value.toString(16)}`.slice(-8)}`;
|
|
326
|
+
}
|
|
327
|
+
return `#${`000000${this.getRgb().toString(16)}`.slice(-6)}`;
|
|
328
|
+
}
|
|
329
|
+
/**
|
|
330
|
+
* Compute the 0xTTBBGGRR color corresponding to the specified hue, saturation, lightness values.
|
|
331
|
+
*/
|
|
332
|
+
static computeTbgrFromHSL(
|
|
401
333
|
/** 0-1 */
|
|
402
|
-
h,
|
|
334
|
+
h,
|
|
403
335
|
/** 0-1 */
|
|
404
|
-
s,
|
|
336
|
+
s,
|
|
405
337
|
/** 0-1 */
|
|
406
|
-
l,
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
338
|
+
l, transparency = 0) {
|
|
339
|
+
const torgb = (p1, q1, t) => {
|
|
340
|
+
if (t < 0) {
|
|
341
|
+
t += 1;
|
|
342
|
+
}
|
|
343
|
+
if (t > 1) {
|
|
344
|
+
t -= 1;
|
|
345
|
+
}
|
|
346
|
+
if (t < 1 / 6) {
|
|
347
|
+
return p1 + (q1 - p1) * 6 * t;
|
|
348
|
+
}
|
|
349
|
+
if (t < 1 / 2) {
|
|
350
|
+
return q1;
|
|
351
|
+
}
|
|
352
|
+
if (t < 2 / 3) {
|
|
353
|
+
return p1 + (q1 - p1) * 6 * (2 / 3 - t);
|
|
354
|
+
}
|
|
355
|
+
return p1;
|
|
356
|
+
};
|
|
357
|
+
const hue2rgb = (p1, q1, t) => Math.round(torgb(p1, q1, t) * 255);
|
|
358
|
+
const modulo = (n, m) => ((n % m) + m) % m;
|
|
359
|
+
// h,s,l ranges are in 0.0 - 1.0
|
|
360
|
+
h = modulo(h, 1);
|
|
361
|
+
s = (0, numbers_js_1.getBoundedValue)(s, 0, 1);
|
|
362
|
+
l = (0, numbers_js_1.getBoundedValue)(l, 0, 1);
|
|
363
|
+
if (s === 0) {
|
|
364
|
+
l *= 255;
|
|
365
|
+
return this.computeTbgrFromComponents(l, l, l, transparency);
|
|
366
|
+
}
|
|
367
|
+
const p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
|
|
368
|
+
const q = 2 * l - p;
|
|
369
|
+
return this.computeTbgrFromComponents(hue2rgb(q, p, h + 1 / 3), hue2rgb(q, p, h), hue2rgb(q, p, h - 1 / 3), transparency);
|
|
370
|
+
}
|
|
371
|
+
/**
|
|
372
|
+
* Return HslColor from this ColorValue
|
|
373
|
+
*/
|
|
374
|
+
toHslColor() {
|
|
375
|
+
return {
|
|
376
|
+
...ColorValue.toHsl(this._tbgr),
|
|
377
|
+
...(this._hue != undefined && { h: this._hue }),
|
|
378
|
+
};
|
|
379
|
+
}
|
|
380
|
+
/** Create an HslColor from this ColorValue */
|
|
381
|
+
static toHsl(tbgr) {
|
|
382
|
+
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
383
|
+
const red = r / 255;
|
|
384
|
+
const green = g / 255;
|
|
385
|
+
const blue = b / 255;
|
|
386
|
+
const cMin = Math.min(red, green, blue);
|
|
387
|
+
const cMax = Math.max(red, green, blue);
|
|
388
|
+
const delta = cMax - cMin;
|
|
389
|
+
let hue = 0;
|
|
390
|
+
let saturation = 0;
|
|
391
|
+
if (0 === delta) {
|
|
392
|
+
hue = 0;
|
|
393
|
+
}
|
|
394
|
+
else if (red === cMax) {
|
|
395
|
+
hue = ((green - blue) / delta) % 6;
|
|
396
|
+
}
|
|
397
|
+
else if (green === cMax) {
|
|
398
|
+
hue = (blue - red) / delta + 2;
|
|
399
|
+
}
|
|
400
|
+
else {
|
|
401
|
+
hue = (red - green) / delta + 4;
|
|
402
|
+
}
|
|
403
|
+
hue = Math.round(hue * 60);
|
|
404
|
+
if (hue < 0) {
|
|
405
|
+
hue += 360;
|
|
406
|
+
}
|
|
407
|
+
let lightness = (cMax + cMin) / 2;
|
|
408
|
+
saturation = 0 === delta ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
|
|
409
|
+
// round values to 1 decimal place
|
|
410
|
+
saturation = Number((saturation * 100).toFixed(1));
|
|
411
|
+
lightness = Number((lightness * 100).toFixed(1));
|
|
412
|
+
return {
|
|
413
|
+
h: hue,
|
|
414
|
+
s: saturation,
|
|
415
|
+
l: lightness,
|
|
416
|
+
a: this.getAlpha(tbgr) / 255,
|
|
417
|
+
};
|
|
436
418
|
}
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
transparency,
|
|
444
|
-
);
|
|
445
|
-
}
|
|
446
|
-
/**
|
|
447
|
-
* Return HslColor from this ColorValue
|
|
448
|
-
*/
|
|
449
|
-
toHslColor() {
|
|
450
|
-
return {
|
|
451
|
-
...ColorValue.toHsl(this._tbgr),
|
|
452
|
-
...(this._hue != undefined && { h: this._hue }),
|
|
453
|
-
};
|
|
454
|
-
}
|
|
455
|
-
/** Create an HslColor from this ColorValue */
|
|
456
|
-
static toHsl(tbgr) {
|
|
457
|
-
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
458
|
-
const red = r / 255;
|
|
459
|
-
const green = g / 255;
|
|
460
|
-
const blue = b / 255;
|
|
461
|
-
const cMin = Math.min(red, green, blue);
|
|
462
|
-
const cMax = Math.max(red, green, blue);
|
|
463
|
-
const delta = cMax - cMin;
|
|
464
|
-
let hue = 0;
|
|
465
|
-
let saturation = 0;
|
|
466
|
-
if (0 === delta) {
|
|
467
|
-
hue = 0;
|
|
468
|
-
} else if (red === cMax) {
|
|
469
|
-
hue = ((green - blue) / delta) % 6;
|
|
470
|
-
} else if (green === cMax) {
|
|
471
|
-
hue = (blue - red) / delta + 2;
|
|
472
|
-
} else {
|
|
473
|
-
hue = (red - green) / delta + 4;
|
|
419
|
+
/**
|
|
420
|
+
* Create an RgbColor from this ColorValue
|
|
421
|
+
*/
|
|
422
|
+
toRgbColor() {
|
|
423
|
+
const { r, g, b } = ColorValue.getColors(this._tbgr);
|
|
424
|
+
return { r, g, b, a: this.getAlpha() / 255 };
|
|
474
425
|
}
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
426
|
+
/**
|
|
427
|
+
* Return HsvColor from this ColorValue
|
|
428
|
+
*/
|
|
429
|
+
toHsvColor() {
|
|
430
|
+
return {
|
|
431
|
+
...ColorValue.toHsv(this._tbgr),
|
|
432
|
+
...(this._hue != undefined && { h: this._hue }),
|
|
433
|
+
};
|
|
478
434
|
}
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
let hue = 0;
|
|
519
|
-
if (0 === delta) {
|
|
520
|
-
hue = 0;
|
|
521
|
-
} else if (red === cMax) {
|
|
522
|
-
hue = ((green - blue) / delta) % 6;
|
|
523
|
-
} else if (green === cMax) {
|
|
524
|
-
hue = (blue - red) / delta + 2;
|
|
525
|
-
} else {
|
|
526
|
-
hue = (red - green) / delta + 4;
|
|
435
|
+
/**
|
|
436
|
+
* Create an HsvColor from this ColorValue
|
|
437
|
+
*/
|
|
438
|
+
static toHsv(tbgr) {
|
|
439
|
+
const { r, g, b } = ColorValue.getColors(tbgr);
|
|
440
|
+
const red = r / 255;
|
|
441
|
+
const green = g / 255;
|
|
442
|
+
const blue = b / 255;
|
|
443
|
+
const cMin = Math.min(red, green, blue);
|
|
444
|
+
const cMax = Math.max(red, green, blue);
|
|
445
|
+
const delta = cMax - cMin;
|
|
446
|
+
let hue = 0;
|
|
447
|
+
if (0 === delta) {
|
|
448
|
+
hue = 0;
|
|
449
|
+
}
|
|
450
|
+
else if (red === cMax) {
|
|
451
|
+
hue = ((green - blue) / delta) % 6;
|
|
452
|
+
}
|
|
453
|
+
else if (green === cMax) {
|
|
454
|
+
hue = (blue - red) / delta + 2;
|
|
455
|
+
}
|
|
456
|
+
else {
|
|
457
|
+
hue = (red - green) / delta + 4;
|
|
458
|
+
}
|
|
459
|
+
hue = Math.round(hue * 60);
|
|
460
|
+
if (hue < 0) {
|
|
461
|
+
hue += 360;
|
|
462
|
+
}
|
|
463
|
+
let brightness = cMax;
|
|
464
|
+
let saturation = cMax === 0 ? 0 : delta / cMax;
|
|
465
|
+
// round values to 1 decimal place
|
|
466
|
+
saturation = Number((saturation * 100).toFixed(1));
|
|
467
|
+
brightness = Number((brightness * 100).toFixed(1));
|
|
468
|
+
return {
|
|
469
|
+
h: hue,
|
|
470
|
+
s: saturation,
|
|
471
|
+
v: brightness,
|
|
472
|
+
a: this.getAlpha(tbgr) / 255,
|
|
473
|
+
};
|
|
527
474
|
}
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
475
|
+
/** True if the value of this ColorValue is the same as another ColorValue. */
|
|
476
|
+
equals(other) {
|
|
477
|
+
return this._tbgr === other._tbgr;
|
|
531
478
|
}
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
return {
|
|
538
|
-
h: hue,
|
|
539
|
-
s: saturation,
|
|
540
|
-
v: brightness,
|
|
541
|
-
a: this.getAlpha(tbgr) / 255,
|
|
542
|
-
};
|
|
543
|
-
}
|
|
544
|
-
/** True if the value of this ColorValue is the same as another ColorValue. */
|
|
545
|
-
equals(other) {
|
|
546
|
-
return this._tbgr === other._tbgr;
|
|
547
|
-
}
|
|
548
|
-
static getFormattedColorNumber(value, precision = 1) {
|
|
549
|
-
if (0 === precision) {
|
|
550
|
-
Math.round(value).toString();
|
|
479
|
+
static getFormattedColorNumber(value, precision = 1) {
|
|
480
|
+
if (0 === precision) {
|
|
481
|
+
Math.round(value).toString();
|
|
482
|
+
}
|
|
483
|
+
return Number(value.toFixed(precision)).toString();
|
|
551
484
|
}
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
alpha,
|
|
562
|
-
2,
|
|
563
|
-
)})`;
|
|
485
|
+
/** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
|
|
486
|
+
toRgbString(includeAlpha) {
|
|
487
|
+
const rgb = this.toRgbColor();
|
|
488
|
+
const rgbString = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
|
|
489
|
+
if (includeAlpha) {
|
|
490
|
+
const alpha = rgb.a ?? 1;
|
|
491
|
+
return `rgba(${rgbString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
492
|
+
}
|
|
493
|
+
return `rgb(${rgbString})`;
|
|
564
494
|
}
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
|
|
575
|
-
if (includeAlpha) {
|
|
576
|
-
const alpha = hsl.a ?? 1;
|
|
577
|
-
return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(
|
|
578
|
-
alpha,
|
|
579
|
-
2,
|
|
580
|
-
)})`;
|
|
495
|
+
/** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */
|
|
496
|
+
toHslString(includeAlpha) {
|
|
497
|
+
const hsl = this.toHslColor();
|
|
498
|
+
const hslString = `${ColorValue.getFormattedColorNumber(this._hue ?? hsl.h)}, ${ColorValue.getFormattedColorNumber(hsl.s)}%, ${ColorValue.getFormattedColorNumber(hsl.l)}%`;
|
|
499
|
+
if (includeAlpha) {
|
|
500
|
+
const alpha = hsl.a ?? 1;
|
|
501
|
+
return `hsla(${hslString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
502
|
+
}
|
|
503
|
+
return `hsl(${hslString})`;
|
|
581
504
|
}
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
alpha,
|
|
592
|
-
2,
|
|
593
|
-
)})`;
|
|
505
|
+
/** Convert this ColorValue to a string in the form "hsv(h,s,v) or hsva(h,s,v,a)" - i.e hsv(120,50%,50%). */
|
|
506
|
+
toHsvString(includeAlpha) {
|
|
507
|
+
const hsv = this.toHsvColor();
|
|
508
|
+
const hsvString = `${this._hue ?? hsv.h}, ${hsv.s}%, ${hsv.v}%`;
|
|
509
|
+
if (includeAlpha) {
|
|
510
|
+
const alpha = hsv.a ?? 1;
|
|
511
|
+
return `hsva(${hsvString}, ${ColorValue.getFormattedColorNumber(alpha, 2)})`;
|
|
512
|
+
}
|
|
513
|
+
return `hsv(${hsvString})`;
|
|
594
514
|
}
|
|
595
|
-
return `hsv(${hsvString})`;
|
|
596
|
-
}
|
|
597
515
|
}
|
|
598
516
|
exports.ColorValue = ColorValue;
|