@citygross/components 0.8.146 → 0.8.147

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.
Files changed (11) hide show
  1. package/build/@types/components/FormElements/Input/Input.d.ts +5 -1
  2. package/build/@types/components/FormElements/Input/Input.styles.d.ts +8 -0
  3. package/build/cjs/components/src/components/FormElements/Input/Input.js +17 -8
  4. package/build/cjs/components/src/components/FormElements/Input/Input.js.map +1 -1
  5. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js +16 -3
  6. package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  7. package/build/es/components/src/components/FormElements/Input/Input.js +18 -9
  8. package/build/es/components/src/components/FormElements/Input/Input.js.map +1 -1
  9. package/build/es/components/src/components/FormElements/Input/Input.styles.js +15 -4
  10. package/build/es/components/src/components/FormElements/Input/Input.styles.js.map +1 -1
  11. package/package.json +2 -2
package/build/@types/components/FormElements/Input/Input.d.ts CHANGED
@@ -1,7 +1,11 @@
1
1
  import React from 'react';
2
2
  import { TFormElement } from '../FormElement.types';
3
3
  export declare type TInput = {
4
+ clearFunction?: () => void;
5
+ hideLabel?: boolean;
6
+ icon?: React.ReactElement;
4
7
  label: string;
8
+ paddingLeft?: number;
5
9
  unit?: string;
6
10
  } & TFormElement & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
7
- export declare const Input: ({ error, errorLabel, label, size, unit, ...props }: TInput) => JSX.Element;
11
+ export declare const Input: ({ clearFunction, hideLabel, icon, error, errorLabel, label, paddingLeft, size, unit, ...props }: TInput) => JSX.Element;
package/build/@types/components/FormElements/Input/Input.styles.d.ts CHANGED
@@ -1,4 +1,12 @@
1
+ export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
1
2
  export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
3
  export declare const InputElement: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
4
+ paddingLeft?: number | undefined;
5
+ } & {
3
6
  sizeAttributes: Omit<import("../FormElement.types").TFormElementSizeAttributes, "iconSize">;
4
7
  } & Pick<import("../FormElement.types").TFormElement, "error">, never>;
8
+ declare type TAbsoluteContainer = {
9
+ right?: boolean;
10
+ };
11
+ export declare const AbsoluteContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TAbsoluteContainer, never>;
12
+ export {};
package/build/cjs/components/src/components/FormElements/Input/Input.js CHANGED
@@ -8,26 +8,35 @@ var formElement = require('../../../helpers/form-element.js');
8
8
  var FormElement_styles = require('../FormElement.styles.js');
9
9
  var Input_styles = require('./Input.styles.js');
10
10
  var FormElement_types = require('../FormElement.types.js');
11
- var typography = require('@citygross/typography');
12
11
  var designTokens = require('@citygross/design-tokens');
12
+ var icons = require('@citygross/icons');
13
+ var typography = require('@citygross/typography');
14
+ var CgButton = require('../../CgButton/CgButton.js');
15
+ var ScreenReader = require('../../ScreenReader/ScreenReader.js');
16
+ var CgButton_types = require('../../CgButton/CgButton.types.js');
13
17
 
14
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
19
 
16
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
21
 
18
22
  var Input = function (_a) {
19
- var _b;
20
- var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _c = _a.size, size = _c === void 0 ? FormElement_types.EFormElementSize.large : _c, unit = _a.unit, props = _tslib.__rest(_a, ["error", "errorLabel", "label", "size", "unit"]);
23
+ var _b, _c, _d;
24
+ var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? FormElement_types.EFormElementSize.large : _e, unit = _a.unit, props = _tslib.__rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
21
25
  var id = props.id, required = props.required;
22
26
  var sizeAttributes = formElement.getSizeAttributes(size);
23
27
  var errorId = "".concat(id, "-error");
24
28
  return (React__default["default"].createElement(FormElement_styles.Wrapper, null,
25
- React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
29
+ hideLabel ? (React__default["default"].createElement(ScreenReader.ScreenReader, { string: label })) : (React__default["default"].createElement(FormElement_styles.Label, { htmlFor: id },
26
30
  label,
27
- required ? ' *' : ''),
28
- React__default["default"].createElement(Input_styles.InputContainer, null,
29
- React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
30
- unit && React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
31
+ required ? ' *' : '')),
32
+ React__default["default"].createElement(Input_styles.InputWrapper, null,
33
+ React__default["default"].createElement(Input_styles.InputContainer, null,
34
+ icon && (React__default["default"].createElement(Input_styles.AbsoluteContainer, null, icon)),
35
+ React__default["default"].createElement(Input_styles.InputElement, _tslib.__assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
36
+ clearFunction && (React__default["default"].createElement(Input_styles.AbsoluteContainer, { right: true },
37
+ React__default["default"].createElement(CgButton.CgButton, { circle: true, onClick: clearFunction, size: CgButton_types.EButtonSize.small, variant: CgButton_types.EButtonVariant.ghost },
38
+ React__default["default"].createElement(icons.Icons.Cross, { height: (_b = designTokens.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
39
+ unit && React__default["default"].createElement(typography.BodyText, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
31
40
  error && errorLabel && (React__default["default"].createElement(FormElement_styles.ErrorLabel, { id: errorId }, errorLabel))));
32
41
  };
33
42
 
package/build/cjs/components/src/components/FormElements/Input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/cjs/components/src/components/FormElements/Input/Input.styles.js CHANGED
@@ -10,14 +10,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
10
10
 
11
11
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
12
 
13
- var InputContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
13
+ var InputWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
14
14
  var _b;
15
15
  var theme = _a.theme;
16
16
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
17
17
  });
18
- var InputElement = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), FormElement_styles.sharedFormElementStyles);
19
- var templateObject_1, templateObject_2;
18
+ var InputContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
19
+ var InputElement = styled__default["default"].input(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), FormElement_styles.sharedFormElementStyles, function (_a) {
20
+ var paddingLeft = _a.paddingLeft;
21
+ return paddingLeft && "padding-left: ".concat(paddingLeft, "px;");
22
+ });
23
+ var AbsoluteContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 50%;\n ", "\n transform: translateY(-50%);\n\n button {\n pointer-events: auto;\n }\n\n svg {\n display: block;\n }\n"], ["\n pointer-events: none;\n position: absolute;\n top: 50%;\n ", "\n transform: translateY(-50%);\n\n button {\n pointer-events: auto;\n }\n\n svg {\n display: block;\n }\n"])), function (_a) {
24
+ var _b, _c;
25
+ var right = _a.right, theme = _a.theme;
26
+ return right
27
+ ? "right: ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2, "px;")
28
+ : "left: ".concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs2, "px;");
29
+ });
30
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
20
31
 
32
+ exports.AbsoluteContainer = AbsoluteContainer;
21
33
  exports.InputContainer = InputContainer;
22
34
  exports.InputElement = InputElement;
35
+ exports.InputWrapper = InputWrapper;
23
36
  //# sourceMappingURL=Input.styles.js.map
package/build/cjs/components/src/components/FormElements/Input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Input/Input.js CHANGED
@@ -2,24 +2,33 @@ import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
2
2
  import React from 'react';
3
3
  import { getSizeAttributes } from '../../../helpers/form-element.js';
4
4
  import { Wrapper, Label, ErrorLabel } from '../FormElement.styles.js';
5
- import { InputContainer, InputElement } from './Input.styles.js';
5
+ import { InputWrapper, InputContainer, AbsoluteContainer, InputElement } from './Input.styles.js';
6
6
  import { EFormElementSize } from '../FormElement.types.js';
7
- import { BodyText } from '@citygross/typography';
8
7
  import { theme } from '@citygross/design-tokens';
8
+ import { Icons } from '@citygross/icons';
9
+ import { BodyText } from '@citygross/typography';
10
+ import { CgButton } from '../../CgButton/CgButton.js';
11
+ import { ScreenReader } from '../../ScreenReader/ScreenReader.js';
12
+ import { EButtonSize, EButtonVariant } from '../../CgButton/CgButton.types.js';
9
13
 
10
14
  var Input = function (_a) {
11
- var _b;
12
- var error = _a.error, errorLabel = _a.errorLabel, label = _a.label, _c = _a.size, size = _c === void 0 ? EFormElementSize.large : _c, unit = _a.unit, props = __rest(_a, ["error", "errorLabel", "label", "size", "unit"]);
15
+ var _b, _c, _d;
16
+ var clearFunction = _a.clearFunction, hideLabel = _a.hideLabel, icon = _a.icon, error = _a.error, errorLabel = _a.errorLabel, label = _a.label, paddingLeft = _a.paddingLeft, _e = _a.size, size = _e === void 0 ? EFormElementSize.large : _e, unit = _a.unit, props = __rest(_a, ["clearFunction", "hideLabel", "icon", "error", "errorLabel", "label", "paddingLeft", "size", "unit"]);
13
17
  var id = props.id, required = props.required;
14
18
  var sizeAttributes = getSizeAttributes(size);
15
19
  var errorId = "".concat(id, "-error");
16
20
  return (React.createElement(Wrapper, null,
17
- React.createElement(Label, { htmlFor: id },
21
+ hideLabel ? (React.createElement(ScreenReader, { string: label })) : (React.createElement(Label, { htmlFor: id },
18
22
  label,
19
- required ? ' *' : ''),
20
- React.createElement(InputContainer, null,
21
- React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, sizeAttributes: sizeAttributes }, props)),
22
- unit && React.createElement(BodyText, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, unit)),
23
+ required ? ' *' : '')),
24
+ React.createElement(InputWrapper, null,
25
+ React.createElement(InputContainer, null,
26
+ icon && (React.createElement(AbsoluteContainer, null, icon)),
27
+ React.createElement(InputElement, __assign({ "aria-describedby": error && errorLabel ? errorId : undefined, "aria-invalid": !!error, error: error, paddingLeft: paddingLeft, sizeAttributes: sizeAttributes }, props)),
28
+ clearFunction && (React.createElement(AbsoluteContainer, { right: true },
29
+ React.createElement(CgButton, { circle: true, onClick: clearFunction, size: EButtonSize.small, variant: EButtonVariant.ghost },
30
+ React.createElement(Icons.Cross, { height: (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm, width: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm }))))),
31
+ unit && React.createElement(BodyText, { color: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, unit)),
23
32
  error && errorLabel && (React.createElement(ErrorLabel, { id: errorId }, errorLabel))));
24
33
  };
25
34
 
package/build/es/components/src/components/FormElements/Input/Input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/FormElements/Input/Input.styles.js CHANGED
@@ -2,13 +2,24 @@ import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
  import { sharedFormElementStyles } from '../FormElement.styles.js';
4
4
 
5
- var InputContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
5
+ var InputWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", "px;\n"], ["\n display: flex;\n align-items: center;\n gap: ", "px;\n"])), function (_a) {
6
6
  var _b;
7
7
  var theme = _a.theme;
8
8
  return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
9
9
  });
10
- var InputElement = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), sharedFormElementStyles);
11
- var templateObject_1, templateObject_2;
10
+ var InputContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
11
+ var InputElement = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), sharedFormElementStyles, function (_a) {
12
+ var paddingLeft = _a.paddingLeft;
13
+ return paddingLeft && "padding-left: ".concat(paddingLeft, "px;");
14
+ });
15
+ var AbsoluteContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n pointer-events: none;\n position: absolute;\n top: 50%;\n ", "\n transform: translateY(-50%);\n\n button {\n pointer-events: auto;\n }\n\n svg {\n display: block;\n }\n"], ["\n pointer-events: none;\n position: absolute;\n top: 50%;\n ", "\n transform: translateY(-50%);\n\n button {\n pointer-events: auto;\n }\n\n svg {\n display: block;\n }\n"])), function (_a) {
16
+ var _b, _c;
17
+ var right = _a.right, theme = _a.theme;
18
+ return right
19
+ ? "right: ".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2, "px;")
20
+ : "left: ".concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xs2, "px;");
21
+ });
22
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
12
23
 
13
- export { InputContainer, InputElement };
24
+ export { AbsoluteContainer, InputContainer, InputElement, InputWrapper };
14
25
  //# sourceMappingURL=Input.styles.js.map
package/build/es/components/src/components/FormElements/Input/Input.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Input.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.8.146",
3
+ "version": "0.8.147",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "719c6517bbbb49d6be9199dd320ff2ad8dade523"
77
+ "gitHead": "3c7b3f52ee6cbe9858c17d83db8a00fa7a9fdb0d"
78
78
  }