@longline/aqua-ui 1.0.166 → 1.0.168
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/controls/View/ScrollingContent.js +1 -1
- package/controls/View/View.d.ts +2 -1
- package/controls/View/View.js +2 -2
- package/inputs/Input/InputWrapper.d.ts +1 -0
- package/inputs/Input/InputWrapper.js +4 -3
- package/inputs/Textarea/Textarea.d.ts +4 -4
- package/inputs/Textarea/Textarea.js +5 -5
- package/package.json +1 -1
|
@@ -17,6 +17,6 @@ var ScrollingContentBase = function (props) {
|
|
|
17
17
|
overflowY: "auto",
|
|
18
18
|
} }, !props.ghost && props.children));
|
|
19
19
|
};
|
|
20
|
-
var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height:
|
|
20
|
+
var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n"], ["\n position: relative;\n height: 100%;\n"])));
|
|
21
21
|
export { ScrollingContent };
|
|
22
22
|
var templateObject_1;
|
package/controls/View/View.d.ts
CHANGED
|
@@ -22,7 +22,8 @@ interface IProps {
|
|
|
22
22
|
/**
|
|
23
23
|
* By default, content is ellipsized to one line. If `height` is set,
|
|
24
24
|
* content is allowed to grow, and a scrollbar is added. Height is in
|
|
25
|
-
* CSS units, e.g. `300px` or `30vh`.
|
|
25
|
+
* CSS units, e.g. `300px` or `30vh`. Use a `height` of `0` to force
|
|
26
|
+
* scrolling.
|
|
26
27
|
*/
|
|
27
28
|
height?: string;
|
|
28
29
|
/**
|
package/controls/View/View.js
CHANGED
|
@@ -37,9 +37,9 @@ var ViewBase = function (props) {
|
|
|
37
37
|
: React.createElement(EllipsizedContent, { ghost: props.ghost, children: props.children })),
|
|
38
38
|
props.hint && React.createElement(HintContent, null, props.hint)));
|
|
39
39
|
};
|
|
40
|
-
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position:
|
|
40
|
+
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"])));
|
|
41
41
|
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]; });
|
|
42
|
-
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 ", "\n z-index: 0; // for :before\n
|
|
42
|
+
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"
|
|
43
43
|
/**
|
|
44
44
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
|
45
45
|
* and its children are its value. Optionally, a hint can be shown at the
|
|
@@ -43,17 +43,18 @@ var InputWrapperBase = function (props) {
|
|
|
43
43
|
}
|
|
44
44
|
return (React.createElement("div", { className: props.className, onClick: props.onClick },
|
|
45
45
|
icon && !props.ghost && props.iconPosition == 'left' && icon,
|
|
46
|
-
React.createElement(
|
|
46
|
+
React.createElement(Content, null, props.children),
|
|
47
47
|
icon && !props.ghost && props.iconPosition == 'right' && icon,
|
|
48
48
|
props.onToggleReveal && React.createElement(Reveal, { revealed: props.revealed, onClick: props.onToggleReveal }),
|
|
49
49
|
props.onClear && React.createElement(Clear, { onClick: props.onClear }),
|
|
50
50
|
React.createElement(Unit, null, props.unit)));
|
|
51
51
|
};
|
|
52
52
|
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
|
-
var
|
|
53
|
+
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 outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n pointer-events: none;\n "])), p.theme.colors.primary[2]); }, 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 "]))); });
|
|
54
55
|
var InputWrapper = function (_a) {
|
|
55
56
|
var _b = _a.iconPosition, iconPosition = _b === void 0 ? 'left' : _b, props = __rest(_a, ["iconPosition"]);
|
|
56
57
|
return React.createElement(InputWrapperStyled, __assign({ iconPosition: iconPosition }, props));
|
|
57
58
|
};
|
|
58
59
|
export { InputWrapper };
|
|
59
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
60
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -40,13 +40,13 @@ interface IProps {
|
|
|
40
40
|
*/
|
|
41
41
|
fluid?: boolean;
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
43
|
+
* Minimum height in CSS units.
|
|
44
44
|
*/
|
|
45
|
-
|
|
45
|
+
minHeight?: string;
|
|
46
46
|
/**
|
|
47
|
-
*
|
|
47
|
+
* If set, fill vertical height available.
|
|
48
48
|
*/
|
|
49
|
-
|
|
49
|
+
flex?: boolean;
|
|
50
50
|
/**
|
|
51
51
|
* Is the Textarea in an error state?
|
|
52
52
|
* @default false
|
|
@@ -41,20 +41,20 @@ var TextareaBase = function (props) {
|
|
|
41
41
|
textareaRef.current.requestFullscreen();
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
|
-
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent },
|
|
45
|
-
React.createElement("textarea", { className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled,
|
|
44
|
+
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
|
|
45
|
+
React.createElement("textarea", { className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
|
|
46
46
|
props.fullscreen &&
|
|
47
47
|
React.createElement(FullscreenToggle, { onClick: toggleFullscreen },
|
|
48
48
|
React.createElement("use", { xlinkHref: SVG.Icons.Fullscreen }))));
|
|
49
49
|
};
|
|
50
50
|
var FullscreenToggle = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 12px;\n top: 12px;\n width: 16px;\n height: 16px;\n cursor: pointer;\n fill: ", ";\n"], ["\n position: absolute;\n right: 12px;\n top: 12px;\n width: 16px;\n height: 16px;\n cursor: pointer;\n fill: ", ";\n"])), function (p) { return p.theme.colors.primary[3]; });
|
|
51
|
-
var TextareaStyled = styled(TextareaBase)(
|
|
51
|
+
var TextareaStyled = styled(TextareaBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n // No resize grip\n resize: ", "; \n\n // Height\n ", "\n ", "\n ", "\n \n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n color: ", ";\n border: none;\n outline: none;\n background: ", ";\n\n // Font:\n font: ", ";\n ", "\n text-align: left;\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Define colors for selected text.\n &::selection {\n background-color: ", ";\n color: ", ";\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n } \n\n // Make sure HTML5 validation does not show up. \n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n"], ["\n position: relative;\n // No resize grip\n resize: ", "; \n\n // Height\n ", "\n ", "\n ", "\n \n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n color: ", ";\n border: none;\n outline: none;\n background: ", ";\n\n // Font:\n font: ", ";\n ", "\n text-align: left;\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Define colors for selected text.\n &::selection {\n background-color: ", ";\n color: ", ";\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n } \n\n // Make sure HTML5 validation does not show up. \n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n"
|
|
52
52
|
/**
|
|
53
53
|
* `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
|
|
54
54
|
* it can be contained in a `Form.Field`. A (vertical) resizer can be added
|
|
55
55
|
* using `resizable`, and a fullscreen toggle is added using `fullscreen`.
|
|
56
56
|
*/
|
|
57
|
-
])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", "
|
|
57
|
+
])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", ";"], ["min-height: ", ";"])), p.minHeight); }, function (p) { return p.flex && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["min-height: 100%;"], ["min-height: 100%;"]))); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return (p.disabled || p.transparent || p.ghost) ? 'transparent' : p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.monospaced && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["font: ", ";"], ["font: ", ";"])), p.theme.font.dataLarge); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; });
|
|
58
58
|
/**
|
|
59
59
|
* `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
|
|
60
60
|
* it can be contained in a `Form.Field`. A (vertical) resizer can be added
|
|
@@ -62,4 +62,4 @@ var TextareaStyled = styled(TextareaBase)(templateObject_5 || (templateObject_5
|
|
|
62
62
|
*/
|
|
63
63
|
var Textarea = function (props) { return React.createElement(TextareaStyled, __assign({}, props)); };
|
|
64
64
|
export { Textarea };
|
|
65
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
65
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|