@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;
|
package/dist/uilib-gl.esm.js
CHANGED
|
@@ -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: ${
|
|
17477
|
+
border-radius: ${_ref4 => {
|
|
17465
17478
|
let {
|
|
17466
17479
|
theme: {
|
|
17467
17480
|
borderRadius
|
|
17468
17481
|
}
|
|
17469
|
-
} =
|
|
17482
|
+
} = _ref4;
|
|
17470
17483
|
return borderRadius.medium;
|
|
17471
17484
|
}};
|
|
17472
17485
|
box-sizing: border-box;
|
|
17473
|
-
border:
|
|
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
|
-
} =
|
|
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
|
-
|
|
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
|
-
} =
|
|
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
|
-
|
|
17505
|
-
border-color: ${_ref6 => {
|
|
17519
|
+
border-color: ${_ref8 => {
|
|
17506
17520
|
let {
|
|
17521
|
+
small,
|
|
17507
17522
|
theme: {
|
|
17508
17523
|
colorPicker
|
|
17509
17524
|
}
|
|
17510
|
-
} =
|
|
17511
|
-
return colorPicker.activeBorderColor;
|
|
17525
|
+
} = _ref8;
|
|
17526
|
+
return small ? "transparent" : colorPicker.activeBorderColor;
|
|
17512
17527
|
}};
|
|
17513
17528
|
}
|
|
17514
17529
|
|
|
17515
17530
|
&[disabled] {
|
|
17516
|
-
border-style:
|
|
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:
|
|
17553
|
-
|
|
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
|
|
17556
|
-
|
|
17557
|
-
|
|
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))),
|
|
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]
|