@stamcat/craftsman 0.0.27-alpha.18 → 0.0.27-alpha.19
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/Components.esm.js +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.esm.js +1 -1
- package/src/components/DatePicker/DatePicker2.esm.js +1 -1
- package/src/components/DateTimePicker/DateTimePicker2.esm.js +2 -2
- package/src/components/InputPassword/InputPassword.esm.js +17 -15
- package/src/components/InputPhone/InputPhone.css +1 -1
- package/src/components/InputPhone/InputPhone.scss +1 -1
- package/src/components/InputPhone/InputPhone2.esm.js +1 -1
- package/src/components/Loader/Loader.esm.js +1 -1
- package/src/components/Modal/Modal.css +1 -0
- package/src/components/Modal/Modal.scss +148 -0
- package/src/components/Modal/Modal2.esm.js +53 -0
- package/src/components/Pagination/Pagination.css +1 -1
- package/src/components/Pagination/Pagination.scss +1 -0
- package/src/components/Pagination/Pagination2.esm.js +39 -41
- package/src/components/Textarea/Textarea.esm.js +15 -16
- package/src/components/TimePicker/TimePicker.css +1 -1
- package/src/components/TimePicker/TimePicker.scss +111 -133
- package/src/components/TimePicker/TimePicker2.esm.js +1 -1
- package/src/components/TimePicker/TimePickerDisplay.esm.js +1 -1
- package/src/components/Modal/Modal.esm.js +0 -53
- package/src/components/Modal/Modal.module.css +0 -1
- package/src/components/Modal/Modal.module.esm.js +0 -16
- package/src/components/Modal/Modal.module.scss +0 -147
package/Components.esm.js
CHANGED
|
@@ -7,7 +7,7 @@ import { RadioButton as a } from "./src/components/RadioButton/RadioButton.esm.j
|
|
|
7
7
|
import { Checkbox as o } from "./src/components/Checkbox/Checkbox.esm.js";
|
|
8
8
|
import { Textarea as s } from "./src/components/Textarea/Textarea.esm.js";
|
|
9
9
|
import { Text as c } from "./src/components/Text/Text2.esm.js";
|
|
10
|
-
import { Modal as l } from "./src/components/Modal/
|
|
10
|
+
import { Modal as l } from "./src/components/Modal/Modal2.esm.js";
|
|
11
11
|
import { Select as u } from "./src/components/Select/Select.esm.js";
|
|
12
12
|
import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js";
|
|
13
13
|
import { InputPhone as f } from "./src/components/InputPhone/InputPhone2.esm.js";
|
package/package.json
CHANGED
|
@@ -42,12 +42,12 @@ var h = i(), g = ({ label: i, id: g, labelPosition: _ = "top", required: v = !1,
|
|
|
42
42
|
};
|
|
43
43
|
return /* @__PURE__ */ o("div", {
|
|
44
44
|
ref: A,
|
|
45
|
-
className: "
|
|
45
|
+
className: "dateTimePicker",
|
|
46
46
|
onKeyDown: I,
|
|
47
47
|
children: /* @__PURE__ */ s(t, {
|
|
48
48
|
id: k,
|
|
49
49
|
onFocus: F,
|
|
50
|
-
className: a(x, "
|
|
50
|
+
className: a(x, "dateTimePicker_wrapper"),
|
|
51
51
|
label: i,
|
|
52
52
|
labelPosition: _,
|
|
53
53
|
error: y,
|
|
@@ -1,28 +1,30 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button as e } from "../Button/Button.esm.js";
|
|
3
3
|
import { Input as t } from "../Input/Input2.esm.js";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import n from "clsx";
|
|
5
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
6
|
+
import { useState as i } from "react";
|
|
7
|
+
import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
|
|
7
8
|
//#region src/components/InputPassword/InputPassword.tsx
|
|
8
|
-
var
|
|
9
|
+
var s = ({ visible: t, onToggle: n }) => /* @__PURE__ */ r(e, {
|
|
9
10
|
type: "button",
|
|
10
11
|
variant: "text",
|
|
11
|
-
onClick:
|
|
12
|
+
onClick: n,
|
|
12
13
|
"aria-label": t ? "Hide password" : "Show password",
|
|
13
14
|
"aria-pressed": t,
|
|
14
15
|
className: "input-view-toggle",
|
|
15
|
-
children:
|
|
16
|
-
}),
|
|
17
|
-
let [
|
|
18
|
-
return /* @__PURE__ */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
children: r(t ? a : o, { size: 16 })
|
|
17
|
+
}), c = ({ type: e = "password", className: a, ...o }) => {
|
|
18
|
+
let [c, l] = i(!1), u = c ? "text" : e;
|
|
19
|
+
return /* @__PURE__ */ r(t, {
|
|
20
|
+
className: n("inputPassword", a),
|
|
21
|
+
...o,
|
|
22
|
+
type: u,
|
|
23
|
+
endAdornment: /* @__PURE__ */ r(s, {
|
|
24
|
+
visible: c,
|
|
25
|
+
onToggle: () => l((e) => !e)
|
|
24
26
|
})
|
|
25
27
|
});
|
|
26
28
|
};
|
|
27
29
|
//#endregion
|
|
28
|
-
export {
|
|
30
|
+
export { c as InputPassword };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base{.
|
|
1
|
+
@layer craftsman-base{.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:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.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)}}
|
|
@@ -10,7 +10,7 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultC
|
|
|
10
10
|
let h = i(), g = s || h, _ = r.useRef(null);
|
|
11
11
|
return /* @__PURE__ */ n(e, {
|
|
12
12
|
id: g,
|
|
13
|
-
className: t("
|
|
13
|
+
className: t("inputPhone", p),
|
|
14
14
|
label: o,
|
|
15
15
|
labelPosition: c,
|
|
16
16
|
error: d,
|
|
@@ -7,7 +7,7 @@ import { jsx as r } from "react/jsx-runtime";
|
|
|
7
7
|
var i = (i) => {
|
|
8
8
|
let { type: a, color: o = "black", width: s, className: c, style: l, ...u } = i, d = e[a](o, s);
|
|
9
9
|
return /* @__PURE__ */ r("div", {
|
|
10
|
-
className: n(t[a], c),
|
|
10
|
+
className: n("loader", t[a], c),
|
|
11
11
|
style: {
|
|
12
12
|
...d,
|
|
13
13
|
...l
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.modal.wrapper,.modal .background{width:100%;height:100%;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}.modal.wrapper{z-index:1000;justify-content:center;align-items:center;display:flex}.modal .background{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}.modal .background[data-is-closing=true]{animation:.3s ease-in-out fadeOut}.modal .background[data-is-closing=false]{animation:.3s ease-in-out fadeIn}.modal .content{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}.modal .content[data-is-closing=true]{animation:.3s ease-in-out slideOut}.modal .content[data-is-closing=false]{animation:.3s ease-in-out slideIn}.modal .content.panel{height:100%;position:fixed;top:0;right:0}.modal .content.dialog{border-radius:8px}.modal .content>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}.modal .content>header>button:only-child{margin-left:auto}.modal .actionContainer{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}.modal .closeModal{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){.modal .content.panel,.modal .content.dialog{width:100%;height:100%}}@media (width>=660px){.modal .content.panel{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}.modal .content.dialog{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){.modal .content.dialog{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
@use "../../styles/global/components/modal";
|
|
2
|
+
@use "../../styles/utilities/_functions" as u;
|
|
3
|
+
|
|
4
|
+
@keyframes fadeIn {
|
|
5
|
+
from {
|
|
6
|
+
opacity: 0;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
to {
|
|
10
|
+
opacity: 1;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@keyframes fadeOut {
|
|
15
|
+
from {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
to {
|
|
20
|
+
opacity: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@keyframes slideIn {
|
|
25
|
+
from {
|
|
26
|
+
transform: translateY(100%);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
to {
|
|
30
|
+
transform: translateY(0);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes slideOut {
|
|
35
|
+
from {
|
|
36
|
+
transform: translateY(0);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
to {
|
|
40
|
+
transform: translateY(100%);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.modal {
|
|
44
|
+
&.wrapper {
|
|
45
|
+
@extend %modal-overlay;
|
|
46
|
+
z-index: 1000;
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
align-items: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.background {
|
|
53
|
+
@extend %modal-overlay;
|
|
54
|
+
z-index: 1001;
|
|
55
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
56
|
+
animation-fill-mode: forwards;
|
|
57
|
+
|
|
58
|
+
&[data-is-closing="true"] {
|
|
59
|
+
animation: fadeOut 0.3s ease-in-out;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&[data-is-closing="false"] {
|
|
63
|
+
animation: fadeIn 0.3s ease-in-out;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.content {
|
|
68
|
+
padding: #{u.width("gutter")};
|
|
69
|
+
z-index: 1002;
|
|
70
|
+
background-color: var(--white);
|
|
71
|
+
max-height: 80vh;
|
|
72
|
+
overflow-y: auto;
|
|
73
|
+
-webkit-overflow-scrolling: touch;
|
|
74
|
+
touch-action: pan-y;
|
|
75
|
+
animation-fill-mode: forwards;
|
|
76
|
+
|
|
77
|
+
&[data-is-closing="true"] {
|
|
78
|
+
animation: slideOut 0.3s ease-in-out;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&[data-is-closing="false"] {
|
|
82
|
+
animation: slideIn 0.3s ease-in-out;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&.panel {
|
|
86
|
+
position: fixed;
|
|
87
|
+
top: 0;
|
|
88
|
+
right: 0;
|
|
89
|
+
height: 100%;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.dialog {
|
|
93
|
+
border-radius: 8px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
> header {
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
width: 100%;
|
|
99
|
+
justify-content: space-between;
|
|
100
|
+
margin-bottom: #{u.width("gutter", 0.5)};
|
|
101
|
+
|
|
102
|
+
> button:only-child {
|
|
103
|
+
margin-left: auto;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.actionContainer {
|
|
109
|
+
margin-top: #{u.width("gutter", 2)};
|
|
110
|
+
background-color: var(--white);
|
|
111
|
+
height: fit-content;
|
|
112
|
+
display: flex;
|
|
113
|
+
gap: #{u.width("gutter")};
|
|
114
|
+
}
|
|
115
|
+
.closeModal {
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
height: 30px;
|
|
118
|
+
width: 30px;
|
|
119
|
+
border-radius: 50%;
|
|
120
|
+
padding: 0;
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
@include u.breakpoint(mobileOnly) {
|
|
126
|
+
.content.panel,
|
|
127
|
+
.content.dialog {
|
|
128
|
+
width: 100%;
|
|
129
|
+
height: 100%;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@include u.breakpoint(tablet) {
|
|
134
|
+
.content.panel {
|
|
135
|
+
width: #{u.width("column", 4)};
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.content.dialog {
|
|
139
|
+
width: #{u.width("column", 6)};
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@include u.breakpoint(desktop) {
|
|
144
|
+
.content.dialog {
|
|
145
|
+
width: #{u.width("column", 8)};
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Button as e } from "../Button/Button.esm.js";
|
|
3
|
+
import { color as t } from "../../styles/utilities/color.esm.js";
|
|
4
|
+
import './Modal.css';/* empty css */
|
|
5
|
+
import n from "clsx";
|
|
6
|
+
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
|
+
import o from "react";
|
|
8
|
+
import { LuX as s } from "react-icons/lu";
|
|
9
|
+
//#region src/components/Modal/Modal.tsx
|
|
10
|
+
var c = class extends o.PureComponent {
|
|
11
|
+
state = { isClosing: !1 };
|
|
12
|
+
onDismiss = () => {
|
|
13
|
+
this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
|
|
14
|
+
this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
|
|
15
|
+
}, 280));
|
|
16
|
+
};
|
|
17
|
+
onClickBackground = () => {
|
|
18
|
+
(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
|
|
19
|
+
};
|
|
20
|
+
render() {
|
|
21
|
+
let o = this.props.type || "dialog";
|
|
22
|
+
return this.props.visible ? /* @__PURE__ */ a("div", {
|
|
23
|
+
className: n("modal", "wrapper", this.props.className),
|
|
24
|
+
style: this.props.style,
|
|
25
|
+
children: [/* @__PURE__ */ a("div", {
|
|
26
|
+
className: n("content", o),
|
|
27
|
+
"data-is-closing": this.state.isClosing,
|
|
28
|
+
children: [
|
|
29
|
+
/* @__PURE__ */ a("header", { children: [this.props.header && /* @__PURE__ */ i(r, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ i(e, {
|
|
30
|
+
variant: "primary",
|
|
31
|
+
className: "closeModal",
|
|
32
|
+
onClick: this.onDismiss,
|
|
33
|
+
children: /* @__PURE__ */ i(s, {
|
|
34
|
+
fill: t("white"),
|
|
35
|
+
size: 18
|
|
36
|
+
})
|
|
37
|
+
})] }),
|
|
38
|
+
/* @__PURE__ */ i("section", { children: this.props.children }),
|
|
39
|
+
this.props.footer && /* @__PURE__ */ i("footer", {
|
|
40
|
+
className: "actionContainer",
|
|
41
|
+
children: this.props.footer
|
|
42
|
+
})
|
|
43
|
+
]
|
|
44
|
+
}), /* @__PURE__ */ i("div", {
|
|
45
|
+
className: "background",
|
|
46
|
+
"data-is-closing": this.state.isClosing,
|
|
47
|
+
onClick: this.onClickBackground
|
|
48
|
+
})]
|
|
49
|
+
}) : /* @__PURE__ */ i(r, {});
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
//#endregion
|
|
53
|
+
export { c as Modal };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base{.pagination{align-items:center;gap:calc(var(--w-gutter) * .25);display:inline-flex}.pagination .active{color:var(--gray700);border:1px solid;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}}
|
|
1
|
+
@layer craftsman-base{.pagination{align-items:center;gap:calc(var(--w-gutter) * .25);display:inline-flex}.pagination .active{color:var(--gray700);border:1px solid;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}}
|
|
@@ -1,61 +1,59 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { Button as e } from "../Button/Button.esm.js";
|
|
3
2
|
import './Pagination.css';/* empty css */
|
|
4
|
-
import
|
|
5
|
-
import { jsx as
|
|
3
|
+
import e from "clsx";
|
|
4
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
6
5
|
import "react";
|
|
7
6
|
//#region src/components/Pagination/Pagination.tsx
|
|
8
|
-
var
|
|
9
|
-
function
|
|
10
|
-
let n = Math.floor(
|
|
11
|
-
r = Math.max(0, i -
|
|
7
|
+
var r = ({ total: r, current: i, onChange: a, className: o, style: s, showPages: c = 5 }) => {
|
|
8
|
+
function l(e, t) {
|
|
9
|
+
let n = Math.floor(c / 2), r = Math.max(0, e - n), i = Math.min(t - 1, r + c - 1);
|
|
10
|
+
r = Math.max(0, i - c + 1);
|
|
12
11
|
let a = [];
|
|
13
12
|
for (let e = r; e <= i; e++) a.push(e);
|
|
14
13
|
return a;
|
|
15
14
|
}
|
|
16
|
-
let
|
|
17
|
-
return /* @__PURE__ */
|
|
18
|
-
className:
|
|
19
|
-
style:
|
|
15
|
+
let u = l(i, r), d = Math.floor(i / c), f = d > 0, p = (d + 1) * c < r, m = (d - 1) * c, h = (d + 1) * c;
|
|
16
|
+
return /* @__PURE__ */ n("nav", {
|
|
17
|
+
className: e("pagination", o),
|
|
18
|
+
style: s,
|
|
20
19
|
"aria-label": "Pagination",
|
|
21
20
|
children: [
|
|
22
|
-
/* @__PURE__ */
|
|
23
|
-
|
|
21
|
+
/* @__PURE__ */ t("button", {
|
|
22
|
+
className: "text",
|
|
24
23
|
value: 0,
|
|
25
|
-
onClick:
|
|
26
|
-
disabled:
|
|
24
|
+
onClick: a,
|
|
25
|
+
disabled: i === 0,
|
|
27
26
|
"aria-label": "First page",
|
|
28
27
|
children: "«"
|
|
29
28
|
}),
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
value:
|
|
33
|
-
onClick:
|
|
34
|
-
"aria-label": `Back ${
|
|
29
|
+
f && /* @__PURE__ */ t("button", {
|
|
30
|
+
className: "text",
|
|
31
|
+
value: m,
|
|
32
|
+
onClick: a,
|
|
33
|
+
"aria-label": `Back ${c} pages`,
|
|
35
34
|
children: "‹‹"
|
|
36
35
|
}),
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"aria-
|
|
43
|
-
"
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
"aria-label": `Forward ${l} pages`,
|
|
36
|
+
u.map((n) => /* @__PURE__ */ t("button", {
|
|
37
|
+
value: n,
|
|
38
|
+
onClick: a,
|
|
39
|
+
disabled: n === i,
|
|
40
|
+
"aria-label": `Page ${n + 1}`,
|
|
41
|
+
"aria-current": n === i ? "page" : void 0,
|
|
42
|
+
className: e("text", n === i ? "active" : void 0),
|
|
43
|
+
children: n + 1
|
|
44
|
+
}, n)),
|
|
45
|
+
p && /* @__PURE__ */ t("button", {
|
|
46
|
+
className: "text",
|
|
47
|
+
value: h,
|
|
48
|
+
onClick: a,
|
|
49
|
+
"aria-label": `Forward ${c} pages`,
|
|
52
50
|
children: "››"
|
|
53
51
|
}),
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
|
|
56
|
-
value:
|
|
57
|
-
onClick:
|
|
58
|
-
disabled:
|
|
52
|
+
/* @__PURE__ */ t("button", {
|
|
53
|
+
className: "text",
|
|
54
|
+
value: r - 1,
|
|
55
|
+
onClick: a,
|
|
56
|
+
disabled: i === r - 1,
|
|
59
57
|
"aria-label": "Last page",
|
|
60
58
|
children: "»"
|
|
61
59
|
})
|
|
@@ -63,4 +61,4 @@ var i = ({ total: i, current: a, onChange: o, className: s, style: c, showPages:
|
|
|
63
61
|
});
|
|
64
62
|
};
|
|
65
63
|
//#endregion
|
|
66
|
-
export {
|
|
64
|
+
export { r as Pagination };
|
|
@@ -1,24 +1,23 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
|
|
3
|
-
import t from "
|
|
4
|
-
import {
|
|
5
|
-
import { useId as r } from "react";
|
|
3
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
+
import { useId as n } from "react";
|
|
6
5
|
//#region src/components/Textarea/Textarea.tsx
|
|
7
|
-
var
|
|
8
|
-
let
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
-
label:
|
|
11
|
-
className:
|
|
12
|
-
labelPosition:
|
|
13
|
-
error:
|
|
14
|
-
required:
|
|
15
|
-
style:
|
|
16
|
-
children: /* @__PURE__ */
|
|
17
|
-
id:
|
|
6
|
+
var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, ...u }) => {
|
|
7
|
+
let d = n();
|
|
8
|
+
return /* @__PURE__ */ t(e, {
|
|
9
|
+
label: a,
|
|
10
|
+
className: c,
|
|
11
|
+
labelPosition: r,
|
|
12
|
+
error: o,
|
|
13
|
+
required: s,
|
|
14
|
+
style: l,
|
|
15
|
+
children: /* @__PURE__ */ t("textarea", {
|
|
16
|
+
id: i || d,
|
|
18
17
|
className: "input",
|
|
19
|
-
...
|
|
18
|
+
...u
|
|
20
19
|
})
|
|
21
20
|
});
|
|
22
21
|
};
|
|
23
22
|
//#endregion
|
|
24
|
-
export {
|
|
23
|
+
export { r as Textarea };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base{.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed{display:none}.timePicker{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.
|
|
1
|
+
@layer craftsman-base{.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}
|
|
@@ -88,161 +88,139 @@
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.timePicker {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
background-color: #{u.color("white")};
|
|
95
|
-
border: 1px solid #{u.color("gray400")};
|
|
96
|
-
border-radius: 8px;
|
|
97
|
-
z-index: 1;
|
|
98
|
-
&:before,
|
|
99
|
-
&:after {
|
|
100
|
-
position: absolute;
|
|
101
|
-
left: 0;
|
|
102
|
-
right: 0;
|
|
103
|
-
content: "";
|
|
104
|
-
display: block;
|
|
105
|
-
height: calc(50% - 32px / 2);
|
|
106
|
-
z-index: 1;
|
|
107
|
-
pointer-events: none;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
&:before {
|
|
111
|
-
top: -0.5px;
|
|
112
|
-
border-bottom: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
|
|
113
|
-
background: linear-gradient(
|
|
114
|
-
to top,
|
|
115
|
-
rgba(var(--background-site-rgb-value), 0.65) 0%,
|
|
116
|
-
rgba(var(--background-site-rgb-value), 1) 100%
|
|
117
|
-
);
|
|
91
|
+
// suppress the built-in clock popup — our custom wheel renders instead
|
|
92
|
+
.react-time-picker__clock {
|
|
93
|
+
display: none;
|
|
118
94
|
}
|
|
119
95
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
border-top: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
|
|
123
|
-
background: linear-gradient(
|
|
124
|
-
to bottom,
|
|
125
|
-
rgba(var(--background-site-rgb-value), 0.65) 0%,
|
|
126
|
-
rgba(var(--background-site-rgb-value), 1) 100%
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
&__wrapper {
|
|
130
|
-
// suppress the built-in clock popup — our custom wheel renders instead
|
|
131
|
-
.react-time-picker__clock {
|
|
132
|
-
display: none;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.timePicker__field {
|
|
136
|
-
position: relative;
|
|
96
|
+
.timePicker__field {
|
|
97
|
+
position: relative;
|
|
137
98
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
}
|
|
99
|
+
.input-view-toggle {
|
|
100
|
+
position: absolute;
|
|
101
|
+
right: 4px;
|
|
102
|
+
top: 50%;
|
|
103
|
+
transform: translateY(-50%);
|
|
104
|
+
padding: 4px;
|
|
105
|
+
line-height: 1;
|
|
146
106
|
}
|
|
147
107
|
}
|
|
108
|
+
|
|
148
109
|
&__display {
|
|
110
|
+
position: relative;
|
|
149
111
|
display: inline-flex;
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
background-color: white;
|
|
112
|
+
height: 160px;
|
|
113
|
+
background-color: #{u.color("white")};
|
|
153
114
|
border: 1px solid #{u.color("gray400")};
|
|
154
|
-
border-radius:
|
|
155
|
-
padding: #{u.width("gutter", 0.25)} 30px #{u.width("gutter", 0.25)} #{u.width("gutter", 0.5)};
|
|
156
|
-
position: relative;
|
|
115
|
+
border-radius: 8px;
|
|
157
116
|
z-index: 1;
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
117
|
+
&:before,
|
|
118
|
+
&:after {
|
|
119
|
+
position: absolute;
|
|
120
|
+
left: 0;
|
|
121
|
+
right: 0;
|
|
122
|
+
content: "";
|
|
123
|
+
display: block;
|
|
124
|
+
height: calc(50% - 32px / 2);
|
|
125
|
+
z-index: 1;
|
|
126
|
+
pointer-events: none;
|
|
162
127
|
}
|
|
163
|
-
|
|
164
|
-
|
|
128
|
+
|
|
129
|
+
&:before {
|
|
130
|
+
top: -0.5px;
|
|
131
|
+
border-bottom: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
|
|
132
|
+
background: linear-gradient(
|
|
133
|
+
to top,
|
|
134
|
+
rgba(var(--background-site-rgb-value), 0.65) 0%,
|
|
135
|
+
rgba(var(--background-site-rgb-value), 1) 100%
|
|
136
|
+
);
|
|
165
137
|
}
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
138
|
+
|
|
139
|
+
&:after {
|
|
140
|
+
bottom: -0.5px;
|
|
141
|
+
border-top: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
|
|
142
|
+
background: linear-gradient(
|
|
143
|
+
to bottom,
|
|
144
|
+
rgba(var(--background-site-rgb-value), 0.65) 0%,
|
|
145
|
+
rgba(var(--background-site-rgb-value), 1) 100%
|
|
146
|
+
);
|
|
169
147
|
}
|
|
170
|
-
}
|
|
171
148
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
149
|
+
.ios-picker {
|
|
150
|
+
height: 100%;
|
|
151
|
+
display: flex;
|
|
152
|
+
flex-direction: row;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: 6px;
|
|
155
|
+
padding: 0 12px;
|
|
156
|
+
line-height: 1;
|
|
157
|
+
font-size: 16px;
|
|
158
|
+
|
|
159
|
+
&--disabled {
|
|
160
|
+
pointer-events: none;
|
|
161
|
+
opacity: 0.5;
|
|
162
|
+
}
|
|
185
163
|
}
|
|
186
|
-
}
|
|
187
164
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
165
|
+
.ios-picker__scene {
|
|
166
|
+
min-width: 30px;
|
|
167
|
+
height: 100%;
|
|
168
|
+
overflow: hidden;
|
|
169
|
+
display: flex;
|
|
170
|
+
align-items: center;
|
|
171
|
+
touch-action: pan-x;
|
|
172
|
+
}
|
|
196
173
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
174
|
+
.ios-picker__viewport {
|
|
175
|
+
height: 32px;
|
|
176
|
+
width: 100%;
|
|
177
|
+
perspective: 1000px;
|
|
178
|
+
-webkit-user-select: none;
|
|
179
|
+
-moz-user-select: none;
|
|
180
|
+
-ms-user-select: none;
|
|
181
|
+
user-select: none;
|
|
182
|
+
-webkit-touch-callout: none;
|
|
183
|
+
-khtml-user-select: none;
|
|
184
|
+
-webkit-tap-highlight-color: transparent;
|
|
185
|
+
}
|
|
209
186
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
187
|
+
.ios-picker__viewport--perspective-left {
|
|
188
|
+
perspective-origin: calc(50% + 130px) 50%;
|
|
189
|
+
transform: translateX(27px);
|
|
190
|
+
}
|
|
214
191
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
192
|
+
.ios-picker__viewport--perspective-right {
|
|
193
|
+
perspective-origin: calc(50% - 130px) 50%;
|
|
194
|
+
transform: translateX(-27px);
|
|
195
|
+
}
|
|
219
196
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
197
|
+
.ios-picker__viewport--perspective-center {
|
|
198
|
+
perspective-origin: 50% 50%;
|
|
199
|
+
}
|
|
223
200
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
201
|
+
.ios-picker__container {
|
|
202
|
+
height: 100%;
|
|
203
|
+
width: 100%;
|
|
204
|
+
transform-style: preserve-3d;
|
|
205
|
+
will-change: transform;
|
|
206
|
+
}
|
|
230
207
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
208
|
+
.ios-picker__slide {
|
|
209
|
+
width: 100%;
|
|
210
|
+
height: 100%;
|
|
211
|
+
text-align: center;
|
|
212
|
+
display: flex;
|
|
213
|
+
align-items: center;
|
|
214
|
+
justify-content: center;
|
|
215
|
+
backface-visibility: hidden;
|
|
216
|
+
opacity: 0;
|
|
217
|
+
}
|
|
241
218
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
219
|
+
.ios-picker__label {
|
|
220
|
+
font-weight: 700;
|
|
221
|
+
white-space: nowrap;
|
|
222
|
+
pointer-events: none;
|
|
223
|
+
}
|
|
246
224
|
}
|
|
247
225
|
}
|
|
248
226
|
}
|
|
@@ -7,7 +7,7 @@ import "react";
|
|
|
7
7
|
var f = (e, t) => e ? t : void 0, p = (p) => {
|
|
8
8
|
let { value: m, onChange: h, locale: g, format: _, labels: v, visible: y = !1, floatingRef: b, style: x } = p, S = o(g), [C, w] = a(m), T = !r(m), E = s(_, n(S)), D = +(E === 12), O = E === 12 ? e(S) : null, k = +(C >= 12), A = E === 12 ? (C % 12 + 11) % 12 : C;
|
|
9
9
|
return y ? /* @__PURE__ */ d("div", {
|
|
10
|
-
className: "
|
|
10
|
+
className: "timePicker__display",
|
|
11
11
|
ref: b,
|
|
12
12
|
style: x,
|
|
13
13
|
children: [
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { Button as e } from "../Button/Button.esm.js";
|
|
3
|
-
import { color as t } from "../../styles/utilities/color.esm.js";
|
|
4
|
-
import n from "./Modal.module.esm.js";
|
|
5
|
-
import r from "clsx";
|
|
6
|
-
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
|
-
import s from "react";
|
|
8
|
-
import { LuX as c } from "react-icons/lu";
|
|
9
|
-
//#region src/components/Modal/Modal.tsx
|
|
10
|
-
var l = class extends s.PureComponent {
|
|
11
|
-
state = { isClosing: !1 };
|
|
12
|
-
onDismiss = () => {
|
|
13
|
-
this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
|
|
14
|
-
this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
|
|
15
|
-
}, 280));
|
|
16
|
-
};
|
|
17
|
-
onClickBackground = () => {
|
|
18
|
-
(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
|
|
19
|
-
};
|
|
20
|
-
render() {
|
|
21
|
-
let s = this.props.type || "dialog";
|
|
22
|
-
return this.props.visible ? /* @__PURE__ */ o("div", {
|
|
23
|
-
className: r([n.wrapper, this.props.className]),
|
|
24
|
-
style: this.props.style,
|
|
25
|
-
children: [/* @__PURE__ */ o("div", {
|
|
26
|
-
className: r(n.content, n[s]),
|
|
27
|
-
"data-is-closing": this.state.isClosing,
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(e, {
|
|
30
|
-
variant: "primary",
|
|
31
|
-
className: n.closeModal,
|
|
32
|
-
onClick: this.onDismiss,
|
|
33
|
-
children: /* @__PURE__ */ a(c, {
|
|
34
|
-
fill: t("white"),
|
|
35
|
-
size: 18
|
|
36
|
-
})
|
|
37
|
-
})] }),
|
|
38
|
-
/* @__PURE__ */ a("section", { children: this.props.children }),
|
|
39
|
-
this.props.footer && /* @__PURE__ */ a("footer", {
|
|
40
|
-
className: n.actionContainer,
|
|
41
|
-
children: this.props.footer
|
|
42
|
-
})
|
|
43
|
-
]
|
|
44
|
-
}), /* @__PURE__ */ a("div", {
|
|
45
|
-
className: n.background,
|
|
46
|
-
"data-is-closing": this.state.isClosing,
|
|
47
|
-
onClick: this.onClickBackground
|
|
48
|
-
})]
|
|
49
|
-
}) : /* @__PURE__ */ a(i, {});
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
//#endregion
|
|
53
|
-
export { l as Modal };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._wrapper_3m995_1,._background_3m995_1{width:100%;height:100%;position:fixed;inset:0}@keyframes _fadeIn_3m995_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_3m995_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_3m995_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideOut_3m995_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._wrapper_3m995_1{z-index:1000;justify-content:center;align-items:center;display:flex}._background_3m995_1{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}._background_3m995_1[data-is-closing=true]{animation:.3s ease-in-out _fadeOut_3m995_1}._background_3m995_1[data-is-closing=false]{animation:.3s ease-in-out _fadeIn_3m995_1}._content_3m995_62{padding:var(--w-gutter);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}._content_3m995_62[data-is-closing=true]{animation:.3s ease-in-out _slideOut_3m995_1}._content_3m995_62[data-is-closing=false]{animation:.3s ease-in-out _slideIn_3m995_1}._content_3m995_62._panel_3m995_78{height:100%;position:fixed;top:0;right:0}._content_3m995_62._dialog_3m995_84{border-radius:8px}._content_3m995_62>header{width:100%;margin-bottom:calc(var(--w-gutter) * .5);justify-content:space-between;display:inline-flex}._content_3m995_62>header>button:only-child{margin-left:auto}._actionContainer_3m995_97{margin-top:calc(var(--w-gutter) * 2);background-color:var(--white);gap:var(--w-gutter);height:fit-content;display:flex}._closeModal_3m995_105{border-radius:50%;justify-content:center;width:30px;height:30px;padding:0;text-decoration:none;display:inline-flex}@media (width>=0) and (width<=660px){._content_3m995_62._panel_3m995_78,._content_3m995_62._dialog_3m995_84{width:100%;height:100%}}@media (width>=660px){._content_3m995_62._panel_3m995_78{width:calc((var(--w-column) * 4) + (var(--w-gutter) * 3))}._content_3m995_62._dialog_3m995_84{width:calc((var(--w-column) * 6) + (var(--w-gutter) * 5))}}@media (width>=1040px){._content_3m995_62._dialog_3m995_84{width:calc((var(--w-column) * 8) + (var(--w-gutter) * 7))}}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import './Modal.module.css';//#region src/components/Modal/Modal.module.scss
|
|
2
|
-
var e = "_wrapper_3m995_1", t = "_background_3m995_1", n = "_fadeOut_3m995_1", r = "_fadeIn_3m995_1", i = "_content_3m995_62", a = "_slideOut_3m995_1", o = "_slideIn_3m995_1", s = "_panel_3m995_78", c = "_dialog_3m995_84", l = "_actionContainer_3m995_97", u = "_closeModal_3m995_105", d = {
|
|
3
|
-
wrapper: e,
|
|
4
|
-
background: t,
|
|
5
|
-
fadeOut: n,
|
|
6
|
-
fadeIn: r,
|
|
7
|
-
content: i,
|
|
8
|
-
slideOut: a,
|
|
9
|
-
slideIn: o,
|
|
10
|
-
panel: s,
|
|
11
|
-
dialog: c,
|
|
12
|
-
actionContainer: l,
|
|
13
|
-
closeModal: u
|
|
14
|
-
};
|
|
15
|
-
//#endregion
|
|
16
|
-
export { l as actionContainer, t as background, u as closeModal, i as content, d as default, c as dialog, r as fadeIn, n as fadeOut, s as panel, o as slideIn, a as slideOut, e as wrapper };
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
@use "../../styles/global/components/modal";
|
|
2
|
-
@use "../../styles/utilities/_functions" as u;
|
|
3
|
-
|
|
4
|
-
@keyframes fadeIn {
|
|
5
|
-
from {
|
|
6
|
-
opacity: 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
to {
|
|
10
|
-
opacity: 1;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@keyframes fadeOut {
|
|
15
|
-
from {
|
|
16
|
-
opacity: 1;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
to {
|
|
20
|
-
opacity: 0;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@keyframes slideIn {
|
|
25
|
-
from {
|
|
26
|
-
transform: translateY(100%);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
to {
|
|
30
|
-
transform: translateY(0);
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@keyframes slideOut {
|
|
35
|
-
from {
|
|
36
|
-
transform: translateY(0);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
to {
|
|
40
|
-
transform: translateY(100%);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.wrapper {
|
|
45
|
-
@extend %modal-overlay;
|
|
46
|
-
z-index: 1000;
|
|
47
|
-
display: flex;
|
|
48
|
-
justify-content: center;
|
|
49
|
-
align-items: center;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.background {
|
|
53
|
-
@extend %modal-overlay;
|
|
54
|
-
z-index: 1001;
|
|
55
|
-
background-color: rgba(0, 0, 0, 0.5);
|
|
56
|
-
animation-fill-mode: forwards;
|
|
57
|
-
|
|
58
|
-
&[data-is-closing="true"] {
|
|
59
|
-
animation: fadeOut 0.3s ease-in-out;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&[data-is-closing="false"] {
|
|
63
|
-
animation: fadeIn 0.3s ease-in-out;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.content {
|
|
68
|
-
padding: #{u.width("gutter")};
|
|
69
|
-
z-index: 1002;
|
|
70
|
-
background-color: var(--white);
|
|
71
|
-
max-height: 80vh;
|
|
72
|
-
overflow-y: auto;
|
|
73
|
-
-webkit-overflow-scrolling: touch;
|
|
74
|
-
touch-action: pan-y;
|
|
75
|
-
animation-fill-mode: forwards;
|
|
76
|
-
|
|
77
|
-
&[data-is-closing="true"] {
|
|
78
|
-
animation: slideOut 0.3s ease-in-out;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
&[data-is-closing="false"] {
|
|
82
|
-
animation: slideIn 0.3s ease-in-out;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
&.panel {
|
|
86
|
-
position: fixed;
|
|
87
|
-
top: 0;
|
|
88
|
-
right: 0;
|
|
89
|
-
height: 100%;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&.dialog {
|
|
93
|
-
border-radius: 8px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
> header {
|
|
97
|
-
display: inline-flex;
|
|
98
|
-
width: 100%;
|
|
99
|
-
justify-content: space-between;
|
|
100
|
-
margin-bottom: #{u.width("gutter", 0.5)};
|
|
101
|
-
|
|
102
|
-
> button:only-child {
|
|
103
|
-
margin-left: auto;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.actionContainer {
|
|
109
|
-
margin-top: #{u.width("gutter", 2)};
|
|
110
|
-
background-color: var(--white);
|
|
111
|
-
height: fit-content;
|
|
112
|
-
display: flex;
|
|
113
|
-
gap: #{u.width("gutter")};
|
|
114
|
-
}
|
|
115
|
-
.closeModal {
|
|
116
|
-
text-decoration: none;
|
|
117
|
-
height: 30px;
|
|
118
|
-
width: 30px;
|
|
119
|
-
border-radius: 50%;
|
|
120
|
-
padding: 0;
|
|
121
|
-
display: inline-flex;
|
|
122
|
-
justify-content: center;
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
@include u.breakpoint(mobileOnly) {
|
|
126
|
-
.content.panel,
|
|
127
|
-
.content.dialog {
|
|
128
|
-
width: 100%;
|
|
129
|
-
height: 100%;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
@include u.breakpoint(tablet) {
|
|
134
|
-
.content.panel {
|
|
135
|
-
width: #{u.width("column", 4)};
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.content.dialog {
|
|
139
|
-
width: #{u.width("column", 6)};
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
@include u.breakpoint(desktop) {
|
|
144
|
-
.content.dialog {
|
|
145
|
-
width: #{u.width("column", 8)};
|
|
146
|
-
}
|
|
147
|
-
}
|