@evergis/uilib-gl 1.0.88 → 1.0.89

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.
@@ -1,5 +1,8 @@
1
1
  /// <reference types="react" />
2
- export declare const ColorBtnWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
2
  export declare const ColorBtn: import("styled-components").StyledComponent<import("react").FC<import("../../molecules/ColorButton").IColorButtonProps>, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const ColorBtnWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
4
+ small?: boolean | undefined;
5
+ }, never>;
6
+ export declare const ColorBtnHex: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
4
7
  export declare const CompareColorButtonGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
8
  export declare const ComparedColorButton: import("styled-components").StyledComponent<import("react").FC<import("../../molecules/ColorButton").IColorButtonProps>, import("styled-components").DefaultTheme, {}, never>;
@@ -9,6 +9,8 @@ export interface IColorPickerContainer {
9
9
  disabled?: boolean;
10
10
  error?: boolean;
11
11
  kind?: string;
12
+ small?: boolean;
13
+ withHex?: boolean;
12
14
  }
13
15
  export interface IColorPickerProps extends Omit<IColorButtonProps, "value" | "onChange"> {
14
16
  value: Color;
@@ -23,6 +25,8 @@ export interface IColorPickerProps extends Omit<IColorButtonProps, "value" | "on
23
25
  tooltipProps?: ITooltipProps;
24
26
  withSave?: boolean;
25
27
  root?: HTMLElement | null;
28
+ small?: boolean;
29
+ withHex?: boolean;
26
30
  }
27
31
  export interface IColorPickerHSVA {
28
32
  h: number;
@@ -17451,69 +17451,89 @@ const AnchorContainer = /*#__PURE__*/styled.div.attrs(props => ({
17451
17451
  }))`
17452
17452
  width: ${_ref => {
17453
17453
  let {
17454
- kind
17454
+ kind,
17455
+ small,
17456
+ withHex
17455
17457
  } = _ref;
17456
- return kind ? "4rem" : "2rem";
17458
+ return withHex ? "auto" : kind ? "4rem" : small ? "0.875rem" : "2rem";
17459
+ }};
17460
+ height: ${_ref2 => {
17461
+ let {
17462
+ small
17463
+ } = _ref2;
17464
+ return small ? "0.875rem" : "2.15rem";
17465
+ }};
17466
+ padding: ${_ref3 => {
17467
+ let {
17468
+ withHex
17469
+ } = _ref3;
17470
+ return withHex ? "0 0.25rem" : "0";
17457
17471
  }};
17458
- height: 2.15rem;
17459
17472
  display: flex;
17460
17473
  gap: 0.25rem;
17461
17474
  flex-shrink: 0;
17462
17475
  align-items: center;
17463
17476
  cursor: pointer;
17464
- border-radius: ${_ref2 => {
17477
+ border-radius: ${_ref4 => {
17465
17478
  let {
17466
17479
  theme: {
17467
17480
  borderRadius
17468
17481
  }
17469
- } = _ref2;
17482
+ } = _ref4;
17470
17483
  return borderRadius.medium;
17471
17484
  }};
17472
17485
  box-sizing: border-box;
17473
- border: 0.0625rem ${_ref3 => {
17474
- let {
17475
- disabled
17476
- } = _ref3;
17477
- return disabled ? "dashed" : "solid";
17478
- }}
17479
- ${_ref4 => {
17486
+ border: ${_ref5 => {
17480
17487
  let {
17488
+ small,
17489
+ disabled,
17481
17490
  isOpen,
17482
17491
  error,
17483
17492
  theme: {
17484
17493
  colorPicker
17485
17494
  }
17486
- } = _ref4;
17487
- return isOpen ? colorPicker.activeBorderColor : error ? colorPicker.errorBorderColor : colorPicker.borderColor;
17495
+ } = _ref5;
17496
+ return small ? "none" : `0.0625rem ${disabled ? "dashed" : "solid"} ${isOpen ? colorPicker.activeBorderColor : error ? colorPicker.errorBorderColor : colorPicker.borderColor}`;
17488
17497
  }};
17489
17498
 
17490
17499
  &:hover {
17491
- transition: border-color ${transition.hover};
17492
- border-color: ${_ref5 => {
17500
+ ${_ref6 => {
17493
17501
  let {
17502
+ small
17503
+ } = _ref6;
17504
+ return !small && `transition: border-color ${transition.hover};`;
17505
+ }}
17506
+ border-color: ${_ref7 => {
17507
+ let {
17508
+ small,
17494
17509
  isOpen,
17495
17510
  theme: {
17496
17511
  colorPicker
17497
17512
  }
17498
- } = _ref5;
17499
- return isOpen ? colorPicker.activeBorderColor : colorPicker.hoverBorderColor;
17513
+ } = _ref7;
17514
+ return small ? "transparent" : isOpen ? colorPicker.activeBorderColor : colorPicker.hoverBorderColor;
17500
17515
  }};
17501
17516
  }
17502
17517
 
17503
17518
  &:active {
17504
- transition: border-color ${transition.press};
17505
- border-color: ${_ref6 => {
17519
+ border-color: ${_ref8 => {
17506
17520
  let {
17521
+ small,
17507
17522
  theme: {
17508
17523
  colorPicker
17509
17524
  }
17510
- } = _ref6;
17511
- return colorPicker.activeBorderColor;
17525
+ } = _ref8;
17526
+ return small ? "transparent" : colorPicker.activeBorderColor;
17512
17527
  }};
17513
17528
  }
17514
17529
 
17515
17530
  &[disabled] {
17516
- border-style: dashed;
17531
+ border-style: ${_ref9 => {
17532
+ let {
17533
+ small
17534
+ } = _ref9;
17535
+ return small ? "none" : "dashed";
17536
+ }};
17517
17537
  pointer-events: none;
17518
17538
  }
17519
17539
 
@@ -17545,18 +17565,45 @@ const ApplyButtonsContainer = styled.div`
17545
17565
  margin-top: 0.5rem;
17546
17566
  `;
17547
17567
 
17568
+ const ColorBtn = /*#__PURE__*/styled(ColorButton)`
17569
+ border-radius: 0.25rem;
17570
+ padding: 0;
17571
+ `;
17548
17572
  const ColorBtnWrapper = styled.div`
17549
17573
  display: flex;
17550
17574
  align-items: center;
17551
17575
  justify-content: center;
17552
- width: 2rem;
17553
- height: 2rem;
17576
+ width: ${_ref => {
17577
+ let {
17578
+ small
17579
+ } = _ref;
17580
+ return small ? "1.25rem" : "2rem";
17581
+ }};
17582
+ height: ${_ref2 => {
17583
+ let {
17584
+ small
17585
+ } = _ref2;
17586
+ return small ? "1.25rem" : "2rem";
17587
+ }};
17588
+
17589
+ ${ColorBtn} {
17590
+ width: ${_ref3 => {
17591
+ let {
17592
+ small
17593
+ } = _ref3;
17594
+ return small ? "0.875rem" : "1.5rem";
17595
+ }};
17596
+ height: ${_ref4 => {
17597
+ let {
17598
+ small
17599
+ } = _ref4;
17600
+ return small ? "0.875rem" : "1.5rem";
17601
+ }};
17602
+ }
17554
17603
  `;
17555
- const ColorBtn = /*#__PURE__*/styled(ColorButton)`
17556
- width: 1.5rem;
17557
- height: 1.5rem;
17558
- border-radius: 0.25rem;
17559
- padding: 0;
17604
+ const ColorBtnHex = styled.span`
17605
+ font-size: 0.75rem;
17606
+ user-select: none;
17560
17607
  `;
17561
17608
  const CompareColorButtonGroup = styled.div`
17562
17609
  margin-left: 0.5rem;
@@ -17566,13 +17613,16 @@ const CompareColorButtonGroup = styled.div`
17566
17613
  cursor: default;
17567
17614
  border-bottom-left-radius: 0;
17568
17615
  border-bottom-right-radius: 0;
17616
+
17569
17617
  span {
17570
17618
  border-bottom: none;
17571
17619
  }
17572
17620
  }
17621
+
17573
17622
  &:last-child {
17574
17623
  border-top-left-radius: 0;
17575
17624
  border-top-right-radius: 0;
17625
+
17576
17626
  span {
17577
17627
  border-top: none;
17578
17628
  }
@@ -17604,6 +17654,8 @@ const ColorPickerComponent = _ref => {
17604
17654
  tooltipProps,
17605
17655
  withSave = true,
17606
17656
  root,
17657
+ small,
17658
+ withHex,
17607
17659
  ...props
17608
17660
  } = _ref;
17609
17661
  const [isOpen, setIsOpen] = useState(false);
@@ -17716,12 +17768,17 @@ const ColorPickerComponent = _ref => {
17716
17768
  kind: kind,
17717
17769
  isOpen: isOpen,
17718
17770
  disabled: disabled,
17719
- className: className
17771
+ className: className,
17772
+ small: small,
17773
+ withHex: withHex
17720
17774
  }, React.createElement(ColorBtnWrapper, {
17721
- onClick: togglePopup
17775
+ onClick: togglePopup,
17776
+ small: small
17722
17777
  }, React.createElement(ColorBtn, Object.assign({
17723
17778
  color: value.toString()
17724
- }, props))), kind && (tooltipProps ? React.createElement(Tooltip, Object.assign({
17779
+ }, props))), withHex && React.createElement(ColorBtnHex, {
17780
+ onClick: togglePopup
17781
+ }, value.toString("hex").slice(1, 7)), kind && (tooltipProps ? React.createElement(Tooltip, Object.assign({
17725
17782
  arrow: true,
17726
17783
  placement: "top",
17727
17784
  delay: [300, 300]