@activecollab/components 1.0.383 → 1.0.384
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/dist/cjs/components/Input/Input.js +3 -2
- package/dist/cjs/components/Input/Input.js.map +1 -1
- package/dist/cjs/components/Input/InputHours.js.map +1 -1
- package/dist/cjs/components/Input/Styles.js +6 -2
- package/dist/cjs/components/Input/Styles.js.map +1 -1
- package/dist/cjs/components/Input/types.js.map +1 -1
- package/dist/esm/components/Input/Input.d.ts +1 -0
- package/dist/esm/components/Input/Input.d.ts.map +1 -1
- package/dist/esm/components/Input/Input.js +3 -2
- package/dist/esm/components/Input/Input.js.map +1 -1
- package/dist/esm/components/Input/InputHours.d.ts +1 -1
- package/dist/esm/components/Input/InputHours.d.ts.map +1 -1
- package/dist/esm/components/Input/InputHours.js.map +1 -1
- package/dist/esm/components/Input/Styles.d.ts.map +1 -1
- package/dist/esm/components/Input/Styles.js +6 -2
- package/dist/esm/components/Input/Styles.js.map +1 -1
- package/dist/esm/components/Input/types.d.ts +1 -1
- package/dist/esm/components/Input/types.d.ts.map +1 -1
- package/dist/esm/components/Input/types.js.map +1 -1
- package/dist/index.js +9 -4
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
10
|
var _Styles = require("./Styles");
|
|
11
11
|
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
|
|
12
|
-
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
|
|
12
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "inputClassName", "wrapperClick"];
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -31,6 +31,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
31
31
|
startAdornment = _ref.startAdornment,
|
|
32
32
|
endAdornment = _ref.endAdornment,
|
|
33
33
|
wrapRef = _ref.wrapRef,
|
|
34
|
+
inputClassName = _ref.inputClassName,
|
|
34
35
|
wrapperClick = _ref.wrapperClick,
|
|
35
36
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
36
37
|
var intInputRef = (0, _react.useRef)(null);
|
|
@@ -53,7 +54,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
53
54
|
type: type,
|
|
54
55
|
$size: size,
|
|
55
56
|
disabled: disabled,
|
|
56
|
-
className: "c-input",
|
|
57
|
+
className: (0, _classnames.default)("c-input", inputClassName),
|
|
57
58
|
"aria-invalid": invalid,
|
|
58
59
|
"data-form-type": "other"
|
|
59
60
|
}, rest)), endAdornment);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","rest","intInputRef","useRef","handleRef","useForkRef","handleWrapperClick","useCallback","current","focus","classnames","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n wrapperClick,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className
|
|
1
|
+
{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","inputClassName","wrapperClick","rest","intInputRef","useRef","handleRef","useForkRef","handleWrapperClick","useCallback","current","focus","classnames","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n inputClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n inputClassName,\n wrapperClick,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className={classnames(\"c-input\", inputClassName)}\n aria-invalid={invalid}\n data-form-type=\"other\"\n {...rest}\n />\n {endAdornment}\n </StyledInputWrapper>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;AAAA;AAOA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBzC,IAAMA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAClD,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAMI,kBAAkB,GAAG,IAAAC,kBAAW,EAAC,YAAM;IAAA;IAC3C,wBAAAL,WAAW,CAACM,OAAO,yDAAnB,qBAAqBC,KAAK,EAAE;IAC5BT,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,6BAAC,0BAAkB;IACjB,KAAK,EAAEN,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAE,IAAAmB,mBAAU,EAAC,iBAAiB,EAAEpB,SAAS,CAAE;IACpD,OAAO,EAAEgB,kBAAmB;IAC5B,GAAG,EAAER;EAAQ,GAEZF,cAAc,eACf,6BAAC,mBAAW;IACV,GAAG,EAAEQ,SAAU;IACf,IAAI,EAAEZ,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAE,IAAAiB,mBAAU,EAAC,SAAS,EAAEX,cAAc,CAAE;IACjD,gBAAcJ,OAAQ;IACtB,kBAAe;EAAO,GAClBM,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAAC;AAEFX,KAAK,CAACyB,WAAW,GAAG,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputHours.js","names":["InputHours","React","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","rest","inputRef","useRef","handleRef","useForkRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n extends Omit<EditableHoursProps, \"
|
|
1
|
+
{"version":3,"file":"InputHours.js","names":["InputHours","React","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","validateTimeInput","incrementOnlySelected","minuteIncrement","className","rest","inputRef","useRef","handleRef","useForkRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n extends Omit<EditableHoursProps, \"weight\" | \"variant\">,\n Omit<InputProps, \"value\"> {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n (\n {\n value,\n onCancel,\n onSave,\n onEnterKeyPress,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n return (\n <HoursWrapper\n value={value}\n onCancel={onCancel}\n onSave={onSave}\n onEnterKeyPress={onEnterKeyPress}\n incrementOnlySelected={incrementOnlySelected}\n minuteIncrement={minuteIncrement}\n allowEmptyValue={allowEmptyValue}\n withLeadingZero={withLeadingZero}\n validation={validation}\n >\n <Input\n ref={handleRef}\n className={className}\n placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n {...rest}\n />\n </HoursWrapper>\n );\n }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxC,IAAMA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CACxC,gBAcEC,GAAG,EACA;EAAA,IAbDC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGC,wBAAiB;IAAA,6BAC9BC,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,IAAMC,SAAS,GAAG,IAAAC,mBAAU,EAAChB,GAAG,EAAEa,QAAQ,CAAC;EAE3C,oBACE,6BAAC,0BAAY;IACX,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,MAAM,EAAEC,MAAO;IACf,eAAe,EAAEC,eAAgB;IACjC,qBAAqB,EAAEK,qBAAsB;IAC7C,eAAe,EAAEC,eAAgB;IACjC,eAAe,EAAEL,eAAgB;IACjC,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAEC;EAAW,gBAEvB,6BAAC,YAAK;IACJ,GAAG,EAAEQ,SAAU;IACf,SAAS,EAAEJ,SAAU;IACrB,WAAW,EAAEL,eAAe,GAAG,OAAO,GAAG;EAAO,GAC5CM,IAAI,EACR,CACW;AAEnB,CAAC,CACF;AAAC;AAEFf,UAAU,CAACoB,WAAW,GAAG,YAAY"}
|
|
@@ -13,10 +13,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
13
13
|
var StyledInputWrapper = _styledComponents.default.div.withConfig({
|
|
14
14
|
displayName: "Styles__StyledInputWrapper",
|
|
15
15
|
componentId: "sc-ce8kcp-0"
|
|
16
|
-
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
16
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
17
17
|
return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.$size === "big" && (0, _styledComponents.css)(["height:40px;"]);
|
|
20
|
+
}, function (props) {
|
|
21
|
+
return props.$size === "biggest" && (0, _styledComponents.css)(["height:48px;"]);
|
|
20
22
|
}, function (props) {
|
|
21
23
|
return props.$disabled && (0, _styledComponents.css)(["cursor:default;opacity:50%;"]);
|
|
22
24
|
}, function (props) {
|
|
@@ -29,8 +31,10 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
29
31
|
var StyledInput = _styledComponents.default.input.withConfig({
|
|
30
32
|
displayName: "Styles__StyledInput",
|
|
31
33
|
componentId: "sc-ce8kcp-1"
|
|
32
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", ""], function (props) {
|
|
34
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
33
35
|
return props.$size === "big" && (0, _styledComponents.css)(["font-size:1rem;"]);
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.$size === "biggest" && (0, _styledComponents.css)(["font-size:1.25rem;font-weight:500;"]);
|
|
34
38
|
}, function (props) {
|
|
35
39
|
return props.disabled && (0, _styledComponents.css)(["cursor:default;"]);
|
|
36
40
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AAQlC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAyC;AAAA;AAQlC,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2TAexCC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,QACvBC,qBAAG,qCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,mBAEF;AAAA,GAEC,UAACF,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,kCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChB,CAACH,KAAK,CAACI,QAAQ,QACfF,qBAAG,iEAKF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,SAAS,IAChBH,KAAK,CAACI,QAAQ,QACdF,qBAAG,qCAEF;AAAA,EACJ;AAAC;AAEFP,kBAAkB,CAACU,WAAW,GAAG,oBAAoB;AAO9C,IAAMC,WAAW,GAAGV,yBAAM,CAACW,KAAK;EAAA;EAAA;AAAA,ySAkBnC,UAACP,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,QACrBC,qBAAG,sBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,QACzBC,qBAAG,yCAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,QACdN,qBAAG,sBAEF;AAAA,GACD,UAACF,KAAK;EAAA,OACNA,KAAK,CAACS,QAAQ,QACdP,qBAAG,uBAEF;AAAA,EACJ;AAAC;AAEFI,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\";\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\n"],"mappings":""}
|
|
@@ -9,6 +9,7 @@ export interface InputProps extends Omit<InputNativeProps, "size" | "ref"> {
|
|
|
9
9
|
endAdornment?: ReactNode;
|
|
10
10
|
wrapRef?: Ref<HTMLDivElement>;
|
|
11
11
|
wrapperClick?: () => void;
|
|
12
|
+
inputClassName?: string;
|
|
12
13
|
}
|
|
13
14
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
14
15
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACxE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EACT,GAAG,EAGH,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,aAAK,gBAAgB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,KAAK,CAAC;IACxE,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,qFAmDjB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
|
|
3
|
+
var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "inputClassName", "wrapperClick"];
|
|
4
4
|
import React, { useCallback, useRef } from "react";
|
|
5
5
|
import classnames from "classnames";
|
|
6
6
|
import { StyledInput, StyledInputWrapper } from "./Styles";
|
|
@@ -20,6 +20,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
20
20
|
startAdornment = _ref.startAdornment,
|
|
21
21
|
endAdornment = _ref.endAdornment,
|
|
22
22
|
wrapRef = _ref.wrapRef,
|
|
23
|
+
inputClassName = _ref.inputClassName,
|
|
23
24
|
wrapperClick = _ref.wrapperClick,
|
|
24
25
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
25
26
|
var intInputRef = useRef(null);
|
|
@@ -42,7 +43,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
42
43
|
type: type,
|
|
43
44
|
$size: size,
|
|
44
45
|
disabled: disabled,
|
|
45
|
-
className: "c-input",
|
|
46
|
+
className: classnames("c-input", inputClassName),
|
|
46
47
|
"aria-invalid": invalid,
|
|
47
48
|
"data-form-type": "other"
|
|
48
49
|
}, rest)), endAdornment);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n wrapperClick,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className
|
|
1
|
+
{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","inputClassName","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n ReactNode,\n Ref,\n useCallback,\n useRef,\n InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n /** Velicina inputa koja definse font-size i border radius */\n size?: InputSize;\n invalid?: boolean;\n startAdornment?: ReactNode;\n endAdornment?: ReactNode;\n wrapRef?: Ref<HTMLDivElement>;\n wrapperClick?: () => void;\n inputClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className = \"\",\n style,\n type = \"text\",\n disabled = false,\n size = \"regular\",\n invalid = false,\n startAdornment,\n endAdornment,\n wrapRef,\n inputClassName,\n wrapperClick,\n ...rest\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, intInputRef);\n\n const handleWrapperClick = useCallback(() => {\n intInputRef.current?.focus();\n wrapperClick && wrapperClick();\n }, [wrapperClick]);\n\n return (\n <StyledInputWrapper\n $size={size}\n $invalid={invalid}\n $disabled={disabled}\n style={style}\n className={classnames(\"c-input-wrapper\", className)}\n onClick={handleWrapperClick}\n ref={wrapRef}\n >\n {startAdornment}\n <StyledInput\n ref={handleRef}\n type={type}\n $size={size}\n disabled={disabled}\n className={classnames(\"c-input\", inputClassName)}\n aria-invalid={invalid}\n data-form-type=\"other\"\n {...rest}\n />\n {endAdornment}\n </StyledInputWrapper>\n );\n }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAgB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMqB,SAAS,GAAGjB,UAAU,CAACG,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGvB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAqB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BN,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEN,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEc,kBAAmB;IAC5B,GAAG,EAAEN;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,SAAS,EAAEgB,cAAc,CAAE;IACjD,gBAAcJ,OAAQ;IACtB,kBAAe;EAAO,GAClBM,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACoB,WAAW,GAAG,OAAO"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import type { InputProps } from "./Input";
|
|
3
3
|
import type { EditableHoursProps } from "../EditableHours";
|
|
4
|
-
export interface InputHoursProps extends Omit<EditableHoursProps, "
|
|
4
|
+
export interface InputHoursProps extends Omit<EditableHoursProps, "weight" | "variant">, Omit<InputProps, "value"> {
|
|
5
5
|
}
|
|
6
6
|
export declare const InputHours: React.ForwardRefExoticComponent<InputHoursProps & React.RefAttributes<HTMLInputElement>>;
|
|
7
7
|
//# sourceMappingURL=InputHours.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputHours.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,
|
|
1
|
+
{"version":3,"file":"InputHours.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputHours.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,GAAG,SAAS,CAAC,EACpD,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC;CAAG;AAEhC,eAAO,MAAM,UAAU,0FAyCtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputHours.js","names":["React","useRef","useForkRef","validateTimeInput","Input","HoursWrapper","InputHours","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","rest","inputRef","handleRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n extends Omit<EditableHoursProps, \"
|
|
1
|
+
{"version":3,"file":"InputHours.js","names":["React","useRef","useForkRef","validateTimeInput","Input","HoursWrapper","InputHours","forwardRef","ref","value","onCancel","onSave","onEnterKeyPress","allowEmptyValue","withLeadingZero","validation","incrementOnlySelected","minuteIncrement","className","rest","inputRef","handleRef","displayName"],"sources":["../../../../src/components/Input/InputHours.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { validateTimeInput } from \"../../utils\";\nimport { Input } from \"./Input\";\nimport { HoursWrapper } from \"../HoursWrapper\";\nimport type { InputProps } from \"./Input\";\nimport type { EditableHoursProps } from \"../EditableHours\";\n\nexport interface InputHoursProps\n extends Omit<EditableHoursProps, \"weight\" | \"variant\">,\n Omit<InputProps, \"value\"> {}\n\nexport const InputHours = React.forwardRef<HTMLInputElement, InputHoursProps>(\n (\n {\n value,\n onCancel,\n onSave,\n onEnterKeyPress,\n allowEmptyValue,\n withLeadingZero = true,\n validation = validateTimeInput,\n incrementOnlySelected = false,\n minuteIncrement = 1,\n className,\n ...rest\n },\n ref\n ) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const handleRef = useForkRef(ref, inputRef);\n\n return (\n <HoursWrapper\n value={value}\n onCancel={onCancel}\n onSave={onSave}\n onEnterKeyPress={onEnterKeyPress}\n incrementOnlySelected={incrementOnlySelected}\n minuteIncrement={minuteIncrement}\n allowEmptyValue={allowEmptyValue}\n withLeadingZero={withLeadingZero}\n validation={validation}\n >\n <Input\n ref={handleRef}\n className={className}\n placeholder={withLeadingZero ? \"00:00\" : \"0:00\"}\n {...rest}\n />\n </HoursWrapper>\n );\n }\n);\n\nInputHours.displayName = \"InputHours\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAQ9C,OAAO,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CACxC,gBAcEC,GAAG,EACA;EAAA,IAbDC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,eAAe,QAAfA,eAAe;IACfC,eAAe,QAAfA,eAAe;IAAA,4BACfC,eAAe;IAAfA,eAAe,qCAAG,IAAI;IAAA,uBACtBC,UAAU;IAAVA,UAAU,gCAAGZ,iBAAiB;IAAA,6BAC9Ba,qBAAqB;IAArBA,qBAAqB,sCAAG,KAAK;IAAA,4BAC7BC,eAAe;IAAfA,eAAe,qCAAG,CAAC;IACnBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,QAAQ,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAC/C,IAAMoB,SAAS,GAAGnB,UAAU,CAACM,GAAG,EAAEY,QAAQ,CAAC;EAE3C,oBACE,oBAAC,YAAY;IACX,KAAK,EAAEX,KAAM;IACb,QAAQ,EAAEC,QAAS;IACnB,MAAM,EAAEC,MAAO;IACf,eAAe,EAAEC,eAAgB;IACjC,qBAAqB,EAAEI,qBAAsB;IAC7C,eAAe,EAAEC,eAAgB;IACjC,eAAe,EAAEJ,eAAgB;IACjC,eAAe,EAAEC,eAAgB;IACjC,UAAU,EAAEC;EAAW,gBAEvB,oBAAC,KAAK;IACJ,GAAG,EAAEM,SAAU;IACf,SAAS,EAAEH,SAAU;IACrB,WAAW,EAAEJ,eAAe,GAAG,OAAO,GAAG;EAAO,GAC5CK,IAAI,EACR,CACW;AAEnB,CAAC,CACF;AAEDb,UAAU,CAACgB,WAAW,GAAG,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAyCvB,CAAC"}
|
|
@@ -4,10 +4,12 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export var StyledInputWrapper = styled.div.withConfig({
|
|
5
5
|
displayName: "Styles__StyledInputWrapper",
|
|
6
6
|
componentId: "sc-ce8kcp-0"
|
|
7
|
-
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
7
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
8
8
|
return props.$size === "small" && css(["border-radius:6px;height:24px;"]);
|
|
9
9
|
}, function (props) {
|
|
10
10
|
return props.$size === "big" && css(["height:40px;"]);
|
|
11
|
+
}, function (props) {
|
|
12
|
+
return props.$size === "biggest" && css(["height:48px;"]);
|
|
11
13
|
}, function (props) {
|
|
12
14
|
return props.$disabled && css(["cursor:default;opacity:50%;"]);
|
|
13
15
|
}, function (props) {
|
|
@@ -19,8 +21,10 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
|
|
|
19
21
|
export var StyledInput = styled.input.withConfig({
|
|
20
22
|
displayName: "Styles__StyledInput",
|
|
21
23
|
componentId: "sc-ce8kcp-1"
|
|
22
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", ""], function (props) {
|
|
24
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
23
25
|
return props.$size === "big" && css(["font-size:1rem;"]);
|
|
26
|
+
}, function (props) {
|
|
27
|
+
return props.$size === "biggest" && css(["font-size:1.25rem;font-weight:500;"]);
|
|
24
28
|
}, function (props) {
|
|
25
29
|
return props.disabled && css(["cursor:default;"]);
|
|
26
30
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAQxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n $size?: InputSize;\n $invalid?: boolean;\n $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n align-items: center;\n background-color: var(--input-background-color);\n border-color: var(--color-theme-500);\n border-radius: 8px;\n border-style: solid;\n border-width: 1px;\n cursor: text;\n display: flex;\n height: 32px;\n padding-block: 4px;\n padding-inline: 4px;\n transition: all 0.3s ease;\n width: 360px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$size === \"small\" &&\n css`\n border-radius: 6px;\n height: 24px;\n `}\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n height: 48px;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n cursor: default;\n opacity: 50%;\n `}\n\n ${(props) =>\n !props.$disabled &&\n !props.$invalid &&\n css`\n &:focus-within,\n &:hover {\n border-color: var(--color-primary);\n }\n `}\n\n ${(props) =>\n !props.$disabled &&\n props.$invalid &&\n css`\n border-color: var(--red-alert);\n `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n $size?: InputSize;\n $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n background-color: var(--input-background-color);\n border: none;\n color: var(--color-theme-900);\n /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n font-size: 0.875rem;\n font-weight: 400;\n letter-spacing: 0.02em;\n margin-block: 0;\n margin-inline: 4px;\n outline: none;\n padding: 0;\n width: 100%;\n\n &::placeholder {\n color: var(--color-theme-transparent-500);\n }\n\n ${(props) =>\n props.$size === \"big\" &&\n css`\n font-size: 1rem;\n `}\n\n ${(props) =>\n props.$size === \"biggest\" &&\n css`\n font-size: 1.25rem;\n font-weight: 500;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n cursor: default;\n `}\n ${(props) =>\n props.$loading &&\n css`\n cursor: progress;\n `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAQxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,2TAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAEC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAOrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,ySAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,wCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare type InputSize = "small" | "regular" | "big";
|
|
1
|
+
export declare type InputSize = "small" | "regular" | "big" | "biggest";
|
|
2
2
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,oBAAY,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\";\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\n"],"mappings":""}
|
package/dist/index.js
CHANGED
|
@@ -11399,10 +11399,12 @@
|
|
|
11399
11399
|
var StyledInputWrapper = styled__default["default"].div.withConfig({
|
|
11400
11400
|
displayName: "Styles__StyledInputWrapper",
|
|
11401
11401
|
componentId: "sc-ce8kcp-0"
|
|
11402
|
-
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
11402
|
+
})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
11403
11403
|
return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
|
|
11404
11404
|
}, function (props) {
|
|
11405
11405
|
return props.$size === "big" && styled.css(["height:40px;"]);
|
|
11406
|
+
}, function (props) {
|
|
11407
|
+
return props.$size === "biggest" && styled.css(["height:48px;"]);
|
|
11406
11408
|
}, function (props) {
|
|
11407
11409
|
return props.$disabled && styled.css(["cursor:default;opacity:50%;"]);
|
|
11408
11410
|
}, function (props) {
|
|
@@ -11414,8 +11416,10 @@
|
|
|
11414
11416
|
var StyledInput$2 = styled__default["default"].input.withConfig({
|
|
11415
11417
|
displayName: "Styles__StyledInput",
|
|
11416
11418
|
componentId: "sc-ce8kcp-1"
|
|
11417
|
-
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", ""], function (props) {
|
|
11419
|
+
})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", ""], function (props) {
|
|
11418
11420
|
return props.$size === "big" && styled.css(["font-size:1rem;"]);
|
|
11421
|
+
}, function (props) {
|
|
11422
|
+
return props.$size === "biggest" && styled.css(["font-size:1.25rem;font-weight:500;"]);
|
|
11419
11423
|
}, function (props) {
|
|
11420
11424
|
return props.disabled && styled.css(["cursor:default;"]);
|
|
11421
11425
|
}, function (props) {
|
|
@@ -11423,7 +11427,7 @@
|
|
|
11423
11427
|
});
|
|
11424
11428
|
StyledInput$2.displayName = "StyledInput";
|
|
11425
11429
|
|
|
11426
|
-
var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
|
|
11430
|
+
var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "inputClassName", "wrapperClick"];
|
|
11427
11431
|
var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
11428
11432
|
var _ref$className = _ref.className,
|
|
11429
11433
|
className = _ref$className === void 0 ? "" : _ref$className,
|
|
@@ -11439,6 +11443,7 @@
|
|
|
11439
11443
|
startAdornment = _ref.startAdornment,
|
|
11440
11444
|
endAdornment = _ref.endAdornment,
|
|
11441
11445
|
wrapRef = _ref.wrapRef,
|
|
11446
|
+
inputClassName = _ref.inputClassName,
|
|
11442
11447
|
wrapperClick = _ref.wrapperClick,
|
|
11443
11448
|
rest = _objectWithoutProperties(_ref, _excluded$N);
|
|
11444
11449
|
var intInputRef = React.useRef(null);
|
|
@@ -11461,7 +11466,7 @@
|
|
|
11461
11466
|
type: type,
|
|
11462
11467
|
$size: size,
|
|
11463
11468
|
disabled: disabled,
|
|
11464
|
-
className: "c-input",
|
|
11469
|
+
className: classNames__default["default"]("c-input", inputClassName),
|
|
11465
11470
|
"aria-invalid": invalid,
|
|
11466
11471
|
"data-form-type": "other"
|
|
11467
11472
|
}, rest)), endAdornment);
|