@stamcat/craftsman 0.0.42 → 0.0.43
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/package.json +1 -1
- package/src/components/Input/InputWrapper.d.ts +1 -0
- package/src/components/Input/InputWrapper.esm.js +8 -5
- package/src/components/InputPhone/InputPhone.css +1 -1
- package/src/components/InputPhone/InputPhone.esm.js +4 -0
- package/src/components/InputPhone/InputPhone.scss +1 -1
package/package.json
CHANGED
|
@@ -6,6 +6,7 @@ export type LabeledInput = {
|
|
|
6
6
|
required?: boolean;
|
|
7
7
|
endAdornment?: React.ReactNode;
|
|
8
8
|
preAdornment?: React.ReactNode;
|
|
9
|
+
onLabelClick?: React.MouseEventHandler<HTMLLabelElement>;
|
|
9
10
|
};
|
|
10
11
|
export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
|
|
11
12
|
export declare const InputWrapper: React.FC<InputWrapperProps>;
|
|
@@ -4,16 +4,19 @@ import './Input.css';/* empty css */
|
|
|
4
4
|
import t from "clsx";
|
|
5
5
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Input/InputWrapper.tsx
|
|
7
|
-
var i = ({ label: i, labelPosition: a = "top", required: o = !1, error: s, className: c, style: l, children: u, value: d, defaultValue: f }) => /* @__PURE__ */ r("div", {
|
|
7
|
+
var i = ({ label: i, labelPosition: a = "top", required: o = !1, error: s, className: c, style: l, children: u, value: d, defaultValue: f, onLabelClick: p }) => /* @__PURE__ */ r("div", {
|
|
8
8
|
"data-label-position": a,
|
|
9
9
|
"data-required": o,
|
|
10
10
|
"data-has-input": !e(d) || !e(f),
|
|
11
11
|
className: t("input-wrapper", c),
|
|
12
12
|
style: l,
|
|
13
|
-
children: [e(i) ? u : /* @__PURE__ */ r("label", {
|
|
14
|
-
|
|
15
|
-
children:
|
|
16
|
-
|
|
13
|
+
children: [e(i) ? u : /* @__PURE__ */ r("label", {
|
|
14
|
+
onClick: p,
|
|
15
|
+
children: [a !== "hidden" && /* @__PURE__ */ n("div", {
|
|
16
|
+
className: "input-label",
|
|
17
|
+
children: i
|
|
18
|
+
}), u]
|
|
19
|
+
}), !e(s) && /* @__PURE__ */ n("div", {
|
|
17
20
|
className: "input-error",
|
|
18
21
|
children: s
|
|
19
22
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cf-base;@layer cf-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:
|
|
1
|
+
@layer cf-base;@layer cf-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:unset}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}
|
|
@@ -16,6 +16,10 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultC
|
|
|
16
16
|
error: d,
|
|
17
17
|
required: l,
|
|
18
18
|
style: f,
|
|
19
|
+
onLabelClick: (e) => {
|
|
20
|
+
let t = _.current, n = e.target;
|
|
21
|
+
!t || n === t || n.closest("button") || (e.preventDefault(), t.focus());
|
|
22
|
+
},
|
|
19
23
|
children: /* @__PURE__ */ i(a, {
|
|
20
24
|
defaultCountry: u,
|
|
21
25
|
...m,
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
user-select: none;
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
|
|
46
|
+
background-color: unset; //var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
&--hide-dropdown {
|