@longline/aqua-ui 1.0.180 → 1.0.181
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/containers/Form/elements/BoxWrapper.js +3 -1
- package/containers/Form/elements/SimpleWrapper.js +1 -1
- package/controls/Ghost/Ghost.d.ts +13 -0
- package/controls/Ghost/Ghost.js +20 -0
- package/controls/Ghost/index.d.ts +1 -0
- package/controls/Ghost/index.js +1 -0
- package/controls/View/View.js +3 -1
- package/inputs/Input/InputWrapper.js +3 -1
- package/package.json +1 -1
|
@@ -6,6 +6,7 @@ import * as React from 'react';
|
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
7
|
import { Label } from './Label';
|
|
8
8
|
import { Hint } from './Hint';
|
|
9
|
+
import { Ghost } from '../../../controls/Ghost';
|
|
9
10
|
//
|
|
10
11
|
// `BoxWrapper` exists to draw a box around the field, which gets focus when
|
|
11
12
|
// the field has focus. When the FieldWrapper is clicked, the field is given
|
|
@@ -26,12 +27,13 @@ var BoxWrapperBase = function (props) {
|
|
|
26
27
|
}
|
|
27
28
|
};
|
|
28
29
|
return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
|
|
30
|
+
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
|
|
29
31
|
props.label,
|
|
30
32
|
React.createElement(Control, null, props.children),
|
|
31
33
|
React.createElement(HintBackground, null, props.hint)));
|
|
32
34
|
};
|
|
33
35
|
var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
|
|
34
36
|
var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 23px;\n padding-bottom: 23px;\n flex: 1;\n overflow-x: hidden;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 23px;\n padding-bottom: 23px;\n flex: 1;\n overflow-x: hidden;\n"])));
|
|
35
|
-
var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n display: flex;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n display: flex;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
37
|
+
var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n display: flex;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n min-height: 80px;\n display: flex;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n } \n ", " {\n color: transparent;\n } \n ", " {\n visibility: hidden;\n }\n "], ["\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n } \n ", " {\n color: transparent;\n } \n ", " {\n visibility: hidden;\n }\n "])), Label, Hint, Control); }, function (p) { return p.weight && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
36
38
|
export { BoxWrapper };
|
|
37
39
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
@@ -12,6 +12,6 @@ var SimpleWrapperBase = function (props) {
|
|
|
12
12
|
props.children,
|
|
13
13
|
props.hint);
|
|
14
14
|
};
|
|
15
|
-
var SimpleWrapper = styled(SimpleWrapperBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 8px;\n position: relative;\n\n ", " {\n color: ", ";\n height: 20px;\n }\n\n ", " {\n color: ", ";\n margin-top: 2px;\n }\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", " \n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n margin-bottom: 8px;\n position: relative;\n\n ", " {\n color: ", ";\n height: 20px;\n }\n\n ", " {\n color: ", ";\n margin-top: 2px;\n }\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", " \n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), Label, function (p) { return p.theme.colors.font; }, Hint, function (p) { return p.error ? p.theme.colors.negative : p.theme.colors.font; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none; \n user-select: none; \n "], ["\n pointer-events: none; \n user-select: none; \n "]))); }, function (p) { return p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n
|
|
15
|
+
var SimpleWrapper = styled(SimpleWrapperBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 8px;\n position: relative;\n\n ", " {\n color: ", ";\n height: 20px;\n }\n\n ", " {\n color: ", ";\n margin-top: 2px;\n }\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", " \n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n margin-bottom: 8px;\n position: relative;\n\n ", " {\n color: ", ";\n height: 20px;\n }\n\n ", " {\n color: ", ";\n margin-top: 2px;\n }\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", " \n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), Label, function (p) { return p.theme.colors.font; }, Hint, function (p) { return p.error ? p.theme.colors.negative : p.theme.colors.font; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n pointer-events: none; \n user-select: none; \n "], ["\n pointer-events: none; \n user-select: none; \n "]))); }, function (p) { return p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return p.weight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
16
16
|
export { SimpleWrapper };
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { CSSProperties } from 'styled-components';
|
|
3
|
+
interface IProps {
|
|
4
|
+
/** @ignore */
|
|
5
|
+
className?: string;
|
|
6
|
+
/**
|
|
7
|
+
* CSS properties. Used to stretch Ghost to fill area available to it.
|
|
8
|
+
* e.g. `{ width: '50px', height: '50px' }`
|
|
9
|
+
*/
|
|
10
|
+
style?: CSSProperties;
|
|
11
|
+
}
|
|
12
|
+
declare const Ghost: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
|
|
13
|
+
export { Ghost };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import styled, { keyframes } from 'styled-components';
|
|
7
|
+
var GhostBase = function (props) {
|
|
8
|
+
return React.createElement("div", { className: props.className, style: props.style },
|
|
9
|
+
React.createElement(Gradient1, null),
|
|
10
|
+
React.createElement(Gradient2, null));
|
|
11
|
+
};
|
|
12
|
+
var COLOR1 = "#555555";
|
|
13
|
+
var COLOR2 = "#ACACAC";
|
|
14
|
+
var anim = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"], ["\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n"])));
|
|
15
|
+
var anim2 = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n"], ["\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n"])));
|
|
16
|
+
var Gradient1 = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n background: linear-gradient(-45deg, ", ", ", ");\n animation: ", " 4s infinite linear;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n background: linear-gradient(-45deg, ", ", ", ");\n animation: ", " 4s infinite linear;\n"])), COLOR1, COLOR2, anim2);
|
|
17
|
+
var Gradient2 = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n background: linear-gradient(-45deg, ", ", ", ");\n animation: ", " 4s infinite linear;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n opacity: 1;\n background: linear-gradient(-45deg, ", ", ", ");\n animation: ", " 4s infinite linear;\n"])), COLOR2, COLOR1, anim);
|
|
18
|
+
var Ghost = styled(GhostBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n min-width: 5px;\n min-height: 5px;\n border-radius: ", "px;\n overflow: hidden;\n pointer-events: none;\n"], ["\n position: relative;\n min-width: 5px;\n min-height: 5px;\n border-radius: ", "px;\n overflow: hidden;\n pointer-events: none;\n"])), function (p) { return p.theme.radius.normal; });
|
|
19
|
+
export { Ghost };
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Ghost';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Ghost';
|
package/controls/View/View.js
CHANGED
|
@@ -29,8 +29,10 @@ import styled, { css } from 'styled-components';
|
|
|
29
29
|
import { Label } from '../../containers/Form/elements/Label';
|
|
30
30
|
import { ScrollingContent } from './ScrollingContent';
|
|
31
31
|
import { EllipsizedContent } from './EllipsizedContent';
|
|
32
|
+
import { Ghost } from '../Ghost';
|
|
32
33
|
var ViewBase = function (props) {
|
|
33
34
|
return (React.createElement("div", { className: props.className },
|
|
35
|
+
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
|
|
34
36
|
React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
|
|
35
37
|
props.label,
|
|
36
38
|
" ",
|
|
@@ -42,7 +44,7 @@ var ViewBase = function (props) {
|
|
|
42
44
|
};
|
|
43
45
|
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 22px;\n bottom: 22px;\n left: 0;\n right: 0;\n padding-left: 12px;\n padding-right: 12px;\n"], ["\n position: absolute;\n top: 22px;\n bottom: 22px;\n left: 0;\n right: 0;\n padding-left: 12px;\n padding-right: 12px;\n"])));
|
|
44
46
|
var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"], ["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
45
|
-
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "], ["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n
|
|
47
|
+
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && !p.ghost && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "], ["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n pointer-events: none;\n user-select: none;\n ", ", ", ", ", " {\n visibility: hidden;\n } \n "], ["\n pointer-events: none;\n user-select: none;\n ", ", ", ", ", " {\n visibility: hidden;\n } \n "])), Label, HintContent, Content); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
46
48
|
var BadgeWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n"])));
|
|
47
49
|
var Badge = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 12px;\n width: 12px;\n display: flex;\n font-size: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n background: ", ";\n"], ["\n height: 12px;\n width: 12px;\n display: flex;\n font-size: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n background: ", ";\n"
|
|
48
50
|
/**
|
|
@@ -29,6 +29,7 @@ import styled, { css, useTheme } from 'styled-components';
|
|
|
29
29
|
import { Icon } from '../../controls/Icon';
|
|
30
30
|
import { Clear } from './Clear';
|
|
31
31
|
import { Reveal } from './Reveal';
|
|
32
|
+
import { Ghost } from '../../controls/Ghost';
|
|
32
33
|
var InputWrapperBase = function (props) {
|
|
33
34
|
var _a;
|
|
34
35
|
var theme = useTheme();
|
|
@@ -42,6 +43,7 @@ var InputWrapperBase = function (props) {
|
|
|
42
43
|
icon = (React.createElement(Icon, __assign({ size: 17, color: (_a = props.icon.color) !== null && _a !== void 0 ? _a : theme.colors.primary[3] }, props.icon)));
|
|
43
44
|
}
|
|
44
45
|
return (React.createElement("div", { className: props.className, onClick: props.onClick },
|
|
46
|
+
props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
|
|
45
47
|
icon && !props.ghost && props.iconPosition == 'left' && icon,
|
|
46
48
|
React.createElement(Content, null, props.children),
|
|
47
49
|
icon && !props.ghost && props.iconPosition == 'right' && icon,
|
|
@@ -51,7 +53,7 @@ var InputWrapperBase = function (props) {
|
|
|
51
53
|
};
|
|
52
54
|
var Unit = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n sup {\n vertical-align: baseline;\n font-size: xx-small;\n line-height: normal;\n } \n"], ["\n font: ", ";\n color: ", ";\n sup {\n vertical-align: baseline;\n font-size: xx-small;\n line-height: normal;\n } \n"])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.primary[2]; });
|
|
53
55
|
var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n flex: 1;\n overflow-x: hidden;\n"], ["\n position: relative;\n flex: 1;\n overflow-x: hidden;\n"])));
|
|
54
|
-
var InputWrapperStyled = styled(InputWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"], ["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"])), function (p) { return p.fluid && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["flex: 1"], ["flex: 1"]))); }, Content, function (p) { return p.flex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n "], ["\n height: 100%;\n "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.error && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "], ["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "])), p.theme.colors.negative, p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "], ["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n
|
|
56
|
+
var InputWrapperStyled = styled(InputWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"], ["\n // Position and size:\n position: relative;\n width: 250px;\n ", "\n box-sizing: border-box;\n z-index: 0;\n ", ";\n\n // Content: \n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 4px;\n\n ", " {\n ", "\n }\n\n // Appearance:\n transition: border-color ", "ms ease;\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n padding: 7px 11px 7px 11px;\n outline: none;\n cursor: ", ";\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n // Focus:\n &:focus-within {\n outline: solid 2px ", ";\n }\n\n // Error\n ", "\n\n // Disabled\n ", "\n\n // Ghost\n ", "\n\n // Transparent (borderless)\n ", "\n"])), function (p) { return p.fluid && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["flex: 1"], ["flex: 1"]))); }, Content, function (p) { return p.flex && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 100%;\n "], ["\n height: 100%;\n "]))); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.error && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "], ["\n outline: solid 2px ", ";\n &:focus-within {\n outline: solid 2px ", ";\n }\n &:hover {\n outline: solid 2px ", ";\n } \n box-shadow: none;\n "])), p.theme.colors.negative, p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "], ["\n outline: solid 2px ", ";\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n user-select: none;\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n user-select: none;\n ", " {\n visibility: hidden;\n }\n "], ["\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n user-select: none;\n ", " {\n visibility: hidden;\n }\n "])), Content); }, function (p) { return p.transparent && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border-width: 0px;\n outline: none !important;\n background-color: transparent;\n "], ["\n border-width: 0px;\n outline: none !important;\n background-color: transparent;\n "]))); });
|
|
55
57
|
var InputWrapper = function (_a) {
|
|
56
58
|
var _b = _a.iconPosition, iconPosition = _b === void 0 ? 'left' : _b, props = __rest(_a, ["iconPosition"]);
|
|
57
59
|
return React.createElement(InputWrapperStyled, __assign({ iconPosition: iconPosition }, props));
|