@dktunited-techoff/techoff-suite-ui 1.5.5 → 1.5.7
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/esm/components/TsCheckbox/TsCheckbox.css +1 -0
- package/esm/components/TsInput/TsInput/TsInput.css +7 -2
- package/esm/components/TsInput/TsInput/TsInput.js +5 -4
- package/esm/components/TsInput/TsInput/TsInput.js.map +1 -1
- package/esm/components/TsInput/TsInput/TsInput.tsx +9 -7
- package/lib/components/TsCheckbox/TsCheckbox.css +1 -0
- package/lib/components/TsInput/TsInput/TsInput.css +7 -2
- package/lib/components/TsInput/TsInput/TsInput.js +5 -4
- package/lib/components/TsInput/TsInput/TsInput.js.map +1 -1
- package/lib/components/TsInput/TsInput/TsInput.tsx +9 -7
- package/package.json +1 -1
- package/src/components/TsCheckbox/TsCheckbox.css +1 -0
- package/src/components/TsInput/TsInput/TsInput.css +7 -2
- package/src/components/TsInput/TsInput/TsInput.tsx +9 -7
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
.ts-input {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
.ts-input-container {
|
|
2
5
|
position: relative;
|
|
3
6
|
width: 100%;
|
|
4
7
|
}
|
|
5
|
-
input {
|
|
8
|
+
.ts-input-container input {
|
|
6
9
|
width: 100%;
|
|
7
10
|
height: 32px;
|
|
8
|
-
padding: 0 10px;
|
|
9
11
|
border: 1px solid #949494;
|
|
10
12
|
font-weight: 600;
|
|
11
13
|
}
|
|
@@ -18,6 +20,9 @@ input:disabled {
|
|
|
18
20
|
input:focus {
|
|
19
21
|
border: 1.5px solid #3643ba;
|
|
20
22
|
}
|
|
23
|
+
.ts-input--padding-0 input {
|
|
24
|
+
padding: 0 10px;
|
|
25
|
+
}
|
|
21
26
|
.ts-input--padding-1 input {
|
|
22
27
|
padding: 0 30px 0 10px;
|
|
23
28
|
}
|
|
@@ -4,10 +4,11 @@ import './TsInput.css';
|
|
|
4
4
|
export const TsInput = ({ icon, label, value, onChange, ...props }) => {
|
|
5
5
|
// #########
|
|
6
6
|
// Rendering
|
|
7
|
-
return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
|
|
7
|
+
return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
|
|
8
8
|
label && React.createElement("div", { className: "ts-input-label" }, label),
|
|
9
|
-
React.createElement("
|
|
10
|
-
|
|
11
|
-
React.createElement(
|
|
9
|
+
React.createElement("div", { className: "ts-input-container" },
|
|
10
|
+
React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
|
|
11
|
+
icon && (React.createElement("div", { className: "ts-input-icon" },
|
|
12
|
+
React.createElement(TsIcon, { name: icon, size: "16" }))))));
|
|
12
13
|
};
|
|
13
14
|
//# sourceMappingURL=TsInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAC,oBAAoB;YACjC,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -7,14 +7,16 @@ export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps
|
|
|
7
7
|
// #########
|
|
8
8
|
// Rendering
|
|
9
9
|
return (
|
|
10
|
-
<div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
|
|
10
|
+
<div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
|
|
11
11
|
{label && <div className="ts-input-label">{label}</div>}
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
<div className="ts-input-container">
|
|
13
|
+
<input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
|
|
14
|
+
{icon && (
|
|
15
|
+
<div className="ts-input-icon">
|
|
16
|
+
<TsIcon name={icon} size="16" />
|
|
17
|
+
</div>
|
|
18
|
+
)}
|
|
19
|
+
</div>
|
|
18
20
|
</div>
|
|
19
21
|
);
|
|
20
22
|
};
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
.ts-input {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
.ts-input-container {
|
|
2
5
|
position: relative;
|
|
3
6
|
width: 100%;
|
|
4
7
|
}
|
|
5
|
-
input {
|
|
8
|
+
.ts-input-container input {
|
|
6
9
|
width: 100%;
|
|
7
10
|
height: 32px;
|
|
8
|
-
padding: 0 10px;
|
|
9
11
|
border: 1px solid #949494;
|
|
10
12
|
font-weight: 600;
|
|
11
13
|
}
|
|
@@ -18,6 +20,9 @@ input:disabled {
|
|
|
18
20
|
input:focus {
|
|
19
21
|
border: 1.5px solid #3643ba;
|
|
20
22
|
}
|
|
23
|
+
.ts-input--padding-0 input {
|
|
24
|
+
padding: 0 10px;
|
|
25
|
+
}
|
|
21
26
|
.ts-input--padding-1 input {
|
|
22
27
|
padding: 0 30px 0 10px;
|
|
23
28
|
}
|
|
@@ -7,11 +7,12 @@ require("./TsInput.css");
|
|
|
7
7
|
const TsInput = ({ icon, label, value, onChange, ...props }) => {
|
|
8
8
|
// #########
|
|
9
9
|
// Rendering
|
|
10
|
-
return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : ''}` },
|
|
10
|
+
return (React.createElement("div", { className: `ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}` },
|
|
11
11
|
label && React.createElement("div", { className: "ts-input-label" }, label),
|
|
12
|
-
React.createElement("
|
|
13
|
-
|
|
14
|
-
React.createElement(
|
|
12
|
+
React.createElement("div", { className: "ts-input-container" },
|
|
13
|
+
React.createElement("input", { type: "text", value: value, onChange: e => onChange(e.target.value), ...props }),
|
|
14
|
+
icon && (React.createElement("div", { className: "ts-input-icon" },
|
|
15
|
+
React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }))))));
|
|
15
16
|
};
|
|
16
17
|
exports.TsInput = TsInput;
|
|
17
18
|
//# sourceMappingURL=TsInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"TsInput.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,gDAA6C;AAE7C,yBAAuB;AAEhB,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAClF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EAAE;QAC/E,KAAK,IAAI,6BAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAO;QACvD,6BAAK,SAAS,EAAC,oBAAoB;YACjC,+BAAO,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI;YACtF,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,eAAe;gBAC5B,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5B,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,OAAO,WAgBlB"}
|
|
@@ -7,14 +7,16 @@ export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps
|
|
|
7
7
|
// #########
|
|
8
8
|
// Rendering
|
|
9
9
|
return (
|
|
10
|
-
<div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
|
|
10
|
+
<div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
|
|
11
11
|
{label && <div className="ts-input-label">{label}</div>}
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
<div className="ts-input-container">
|
|
13
|
+
<input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
|
|
14
|
+
{icon && (
|
|
15
|
+
<div className="ts-input-icon">
|
|
16
|
+
<TsIcon name={icon} size="16" />
|
|
17
|
+
</div>
|
|
18
|
+
)}
|
|
19
|
+
</div>
|
|
18
20
|
</div>
|
|
19
21
|
);
|
|
20
22
|
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
.ts-input {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
.ts-input-container {
|
|
2
5
|
position: relative;
|
|
3
6
|
width: 100%;
|
|
4
7
|
}
|
|
5
|
-
input {
|
|
8
|
+
.ts-input-container input {
|
|
6
9
|
width: 100%;
|
|
7
10
|
height: 32px;
|
|
8
|
-
padding: 0 10px;
|
|
9
11
|
border: 1px solid #949494;
|
|
10
12
|
font-weight: 600;
|
|
11
13
|
}
|
|
@@ -18,6 +20,9 @@ input:disabled {
|
|
|
18
20
|
input:focus {
|
|
19
21
|
border: 1.5px solid #3643ba;
|
|
20
22
|
}
|
|
23
|
+
.ts-input--padding-0 input {
|
|
24
|
+
padding: 0 10px;
|
|
25
|
+
}
|
|
21
26
|
.ts-input--padding-1 input {
|
|
22
27
|
padding: 0 30px 0 10px;
|
|
23
28
|
}
|
|
@@ -7,14 +7,16 @@ export const TsInput = ({ icon, label, value, onChange, ...props }: TsInputProps
|
|
|
7
7
|
// #########
|
|
8
8
|
// Rendering
|
|
9
9
|
return (
|
|
10
|
-
<div className={`ts-input ${icon ? 'ts-input--padding-1' : ''}`}>
|
|
10
|
+
<div className={`ts-input ${icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}>
|
|
11
11
|
{label && <div className="ts-input-label">{label}</div>}
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
<div className="ts-input-container">
|
|
13
|
+
<input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
|
|
14
|
+
{icon && (
|
|
15
|
+
<div className="ts-input-icon">
|
|
16
|
+
<TsIcon name={icon} size="16" />
|
|
17
|
+
</div>
|
|
18
|
+
)}
|
|
19
|
+
</div>
|
|
18
20
|
</div>
|
|
19
21
|
);
|
|
20
22
|
};
|