tuix-webcomponents 0.7.0 → 0.9.0
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/src/tuix-checkbox/TuixCheckbox.js +13 -2
- package/dist/src/tuix-checkbox/TuixCheckbox.js.map +1 -1
- package/dist/src/tuix-checkbox/TuixCheckbox.styles.js +26 -14
- package/dist/src/tuix-checkbox/TuixCheckbox.styles.js.map +1 -1
- package/dist/src/tuix-dropdown/TuixDropdown.styles.js +2 -8
- package/dist/src/tuix-dropdown/TuixDropdown.styles.js.map +1 -1
- package/dist/src/tuix-icon/TuixIcon.icons.js +6 -0
- package/dist/src/tuix-icon/TuixIcon.icons.js.map +1 -1
- package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts +2 -0
- package/dist/src/tuix-icon/enums/tuix-icon.enums.js +2 -0
- package/dist/src/tuix-icon/enums/tuix-icon.enums.js.map +1 -1
- package/dist/src/tuix-input/TuixInput.d.ts +1 -0
- package/dist/src/tuix-input/TuixInput.js +10 -2
- package/dist/src/tuix-input/TuixInput.js.map +1 -1
- package/dist/src/tuix-input/TuixInput.styles.js +34 -74
- package/dist/src/tuix-input/TuixInput.styles.js.map +1 -1
- package/dist/src/tuix-radio-button/TuixRadioButton.js +10 -1
- package/dist/src/tuix-radio-button/TuixRadioButton.js.map +1 -1
- package/dist/src/tuix-radio-button/TuixRadioButton.styles.js +23 -16
- package/dist/src/tuix-radio-button/TuixRadioButton.styles.js.map +1 -1
- package/dist/src/tuix-toggle-button/TuixToggleButton.js +10 -1
- package/dist/src/tuix-toggle-button/TuixToggleButton.js.map +1 -1
- package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js +31 -14
- package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js.map +1 -1
- package/dist/tsconfig.publish.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import { hexToRgb } from '../utils/hex-rgb';
|
|
|
6
6
|
const inputVars = {
|
|
7
7
|
gapX: '10px',
|
|
8
8
|
iconDesktopSize: '1.5rem',
|
|
9
|
-
|
|
9
|
+
iconMobileSize: '1rem',
|
|
10
10
|
paddingX: '1.25rem',
|
|
11
11
|
};
|
|
12
12
|
const rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);
|
|
@@ -50,56 +50,49 @@ export const hostStyles = css `
|
|
|
50
50
|
}
|
|
51
51
|
`;
|
|
52
52
|
export const inputComponentStyles = css `
|
|
53
|
+
.t-textarea-main-container {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
width: 100%;
|
|
57
|
+
height: 100%;
|
|
58
|
+
}
|
|
53
59
|
.t-input-container {
|
|
54
60
|
position: relative;
|
|
55
61
|
--t-padding-x-desktop-with-icon: calc(
|
|
56
62
|
${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +
|
|
57
63
|
${unsafeCSS(inputVars.gapX)}
|
|
58
64
|
);
|
|
59
|
-
--t-padding-x-
|
|
60
|
-
${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.
|
|
65
|
+
--t-padding-x-mobile-with-icon: calc(
|
|
66
|
+
${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconMobileSize)} +
|
|
61
67
|
${unsafeCSS(inputVars.gapX)}
|
|
62
68
|
);
|
|
69
|
+
--t-border-size: 1px;
|
|
70
|
+
}
|
|
71
|
+
.t-input-container.t-textarea-container {
|
|
72
|
+
height: 100%;
|
|
63
73
|
}
|
|
64
74
|
.t-input {
|
|
65
|
-
padding: 1rem ${unsafeCSS(inputVars.paddingX)};
|
|
75
|
+
padding: calc(1rem - var(--t-border-size)) ${unsafeCSS(inputVars.paddingX)};
|
|
66
76
|
border-radius: 4px;
|
|
67
77
|
font-family: 'Rubik', sans-serif;
|
|
68
78
|
cursor: var(--t-field-input-cursor);
|
|
69
79
|
width: 100%;
|
|
70
80
|
box-sizing: border-box;
|
|
71
81
|
}
|
|
82
|
+
.t-input.t-textarea {
|
|
83
|
+
height: 100%;
|
|
84
|
+
display: block;
|
|
85
|
+
}
|
|
72
86
|
.t-input.with-title {
|
|
73
|
-
padding-top: 1.5rem;
|
|
74
|
-
padding-bottom: 0.5rem;
|
|
87
|
+
padding-top: calc(1.5rem - var(--t-border-size));
|
|
88
|
+
padding-bottom: calc(0.5rem - var(--t-border-size));
|
|
75
89
|
}
|
|
76
90
|
.t-input.with-icon-right {
|
|
77
91
|
padding-right: var(--t-padding-x-desktop-with-icon);
|
|
78
92
|
}
|
|
79
|
-
@media only screen and (max-width: ${ScreenSizes.TABLET}px) {
|
|
80
|
-
.t-input {
|
|
81
|
-
padding-top: 0.875rem;
|
|
82
|
-
padding-bottom: 0.875rem;
|
|
83
|
-
}
|
|
84
|
-
.t-input.with-title {
|
|
85
|
-
padding-top: 1.375rem;
|
|
86
|
-
padding-bottom: 0.375rem;
|
|
87
|
-
}
|
|
88
|
-
.t-input.with-icon-right {
|
|
89
|
-
padding-right: var(--t-padding-x-tablet-with-icon);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
93
|
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
93
|
-
.t-input {
|
|
94
|
-
padding-top: 0.75rem;
|
|
95
|
-
padding-bottom: 0.75rem;
|
|
96
|
-
}
|
|
97
|
-
.t-input.with-title {
|
|
98
|
-
padding-top: 1.25rem;
|
|
99
|
-
padding-bottom: 0.25rem;
|
|
100
|
-
}
|
|
101
94
|
.t-input.with-icon-right {
|
|
102
|
-
padding-right: var(--t-padding-x-
|
|
95
|
+
padding-right: var(--t-padding-x-mobile-with-icon);
|
|
103
96
|
}
|
|
104
97
|
}
|
|
105
98
|
`;
|
|
@@ -108,26 +101,15 @@ export const inputFontStyles = css `
|
|
|
108
101
|
.t-input,
|
|
109
102
|
.t-title {
|
|
110
103
|
font-size: 1rem;
|
|
111
|
-
font-weight:
|
|
104
|
+
font-weight: 300;
|
|
112
105
|
line-height: 1.5rem;
|
|
113
106
|
}
|
|
114
|
-
@media only screen and (max-width: ${ScreenSizes.TABLET}px) {
|
|
115
|
-
.t-input::placeholder {
|
|
116
|
-
font-size: 0.875rem;
|
|
117
|
-
line-height: 1.25rem;
|
|
118
|
-
}
|
|
119
|
-
.t-input {
|
|
120
|
-
font-size: 1rem;
|
|
121
|
-
line-height: 1.25rem;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
107
|
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
125
|
-
.t-input
|
|
108
|
+
.t-input::placeholder,
|
|
109
|
+
.t-input,
|
|
110
|
+
.t-title {
|
|
126
111
|
font-size: 0.875rem;
|
|
127
|
-
line-height:
|
|
128
|
-
}
|
|
129
|
-
.t-input::placeholder {
|
|
130
|
-
line-height: 1rem;
|
|
112
|
+
line-height: 1.25rem;
|
|
131
113
|
}
|
|
132
114
|
}
|
|
133
115
|
`;
|
|
@@ -147,7 +129,7 @@ export const inputColorStyles = css `
|
|
|
147
129
|
}
|
|
148
130
|
.t-input[disabled]:disabled {
|
|
149
131
|
cursor: not-allowed;
|
|
150
|
-
border:
|
|
132
|
+
border: 1px solid var(--t-field-color-form);
|
|
151
133
|
color: var(--t-field-color-text-disabled);
|
|
152
134
|
}
|
|
153
135
|
.t-input.with-title::placeholder {
|
|
@@ -191,33 +173,11 @@ export const inputTitleStyles = css `
|
|
|
191
173
|
.t-input.with-title:focus + .t-title,
|
|
192
174
|
.t-input.with-title:not(:placeholder-shown) + .t-title {
|
|
193
175
|
font-size: 0.75rem;
|
|
194
|
-
font-weight:
|
|
176
|
+
font-weight: 300;
|
|
195
177
|
line-height: 1rem;
|
|
196
178
|
transform: translateY(0);
|
|
197
179
|
top: 0.5rem;
|
|
198
180
|
}
|
|
199
|
-
@media only screen and (max-width: ${ScreenSizes.TABLET}px) {
|
|
200
|
-
.t-title {
|
|
201
|
-
font-size: 0.875rem;
|
|
202
|
-
line-height: 1.25rem;
|
|
203
|
-
}
|
|
204
|
-
.t-input.with-title:focus + .t-title,
|
|
205
|
-
.t-input.with-title:not(:placeholder-shown) + .t-title {
|
|
206
|
-
top: 0.375rem;
|
|
207
|
-
}
|
|
208
|
-
.t-textarea-container .t-title {
|
|
209
|
-
top: 0.875rem;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
213
|
-
.t-input.with-title:focus + .t-title,
|
|
214
|
-
.t-input.with-title:not(:placeholder-shown) + .t-title {
|
|
215
|
-
top: 0.25rem;
|
|
216
|
-
}
|
|
217
|
-
.t-textarea-container .t-title {
|
|
218
|
-
top: 0.75rem;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
181
|
`;
|
|
222
182
|
export const inputIconStyles = css `
|
|
223
183
|
.t-input-container .t-icon-set-container {
|
|
@@ -269,10 +229,10 @@ export const inputIconStyles = css `
|
|
|
269
229
|
display: inline;
|
|
270
230
|
cursor: not-allowed;
|
|
271
231
|
}
|
|
272
|
-
@media only screen and (max-width: ${ScreenSizes.
|
|
232
|
+
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
273
233
|
.t-input-container .t-icon-set-container {
|
|
274
|
-
height: ${unsafeCSS(inputVars.
|
|
275
|
-
width: ${unsafeCSS(inputVars.
|
|
234
|
+
height: ${unsafeCSS(inputVars.iconMobileSize)};
|
|
235
|
+
width: ${unsafeCSS(inputVars.iconMobileSize)};
|
|
276
236
|
}
|
|
277
237
|
}
|
|
278
238
|
`;
|
|
@@ -283,12 +243,12 @@ export const inputSearchStyles = css `
|
|
|
283
243
|
.t-input[type='search'] + .t-title {
|
|
284
244
|
left: var(--t-padding-x-desktop-with-icon);
|
|
285
245
|
}
|
|
286
|
-
@media only screen and (max-width: ${ScreenSizes.
|
|
246
|
+
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
287
247
|
.t-input[type='search'] {
|
|
288
|
-
padding-left: var(--t-padding-x-
|
|
248
|
+
padding-left: var(--t-padding-x-mobile-with-icon);
|
|
289
249
|
}
|
|
290
250
|
.t-input[type='search'] + .t-title {
|
|
291
|
-
left: var(--t-padding-x-
|
|
251
|
+
left: var(--t-padding-x-mobile-with-icon);
|
|
292
252
|
}
|
|
293
253
|
}
|
|
294
254
|
input[type='search']::-webkit-search-decoration,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n gapX: '10px',\n iconDesktopSize: '1.5rem',\n iconTabletSize: '1rem',\n paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n :host {\n --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n --t-field-input-cursor: auto;\n }\n :host([dark]) {\n --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n --t-field-color-bg-validation: rgba(\n ${rgbDarkValidation.r},\n ${rgbDarkValidation.g},\n ${rgbDarkValidation.b},\n 0.2\n );\n --t-field-color-bg-error: rgba(\n ${rgbDarkError.r},\n ${rgbDarkError.g},\n ${rgbDarkError.b},\n 0.2\n );\n --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n }\n`;\n\nexport const inputComponentStyles = css`\n .t-input-container {\n position: relative;\n --t-padding-x-desktop-with-icon: calc(\n ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n ${unsafeCSS(inputVars.gapX)}\n );\n --t-padding-x-tablet-with-icon: calc(\n ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n ${unsafeCSS(inputVars.gapX)}\n );\n }\n .t-input {\n padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n border-radius: 4px;\n font-family: 'Rubik', sans-serif;\n cursor: var(--t-field-input-cursor);\n width: 100%;\n box-sizing: border-box;\n }\n .t-input.with-title {\n padding-top: 1.5rem;\n padding-bottom: 0.5rem;\n }\n .t-input.with-icon-right {\n padding-right: var(--t-padding-x-desktop-with-icon);\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-input {\n padding-top: 0.875rem;\n padding-bottom: 0.875rem;\n }\n .t-input.with-title {\n padding-top: 1.375rem;\n padding-bottom: 0.375rem;\n }\n .t-input.with-icon-right {\n padding-right: var(--t-padding-x-tablet-with-icon);\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n }\n .t-input.with-title {\n padding-top: 1.25rem;\n padding-bottom: 0.25rem;\n }\n .t-input.with-icon-right {\n padding-right: var(--t-padding-x-tablet-with-icon);\n }\n }\n`;\n\nexport const inputFontStyles = css`\n .t-input::placeholder,\n .t-input,\n .t-title {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5rem;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-input::placeholder {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n .t-input {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input {\n font-size: 0.875rem;\n line-height: 1rem;\n }\n .t-input::placeholder {\n line-height: 1rem;\n }\n }\n`;\n\nexport const inputColorStyles = css`\n .t-input {\n background-color: var(--t-field-color-form);\n border: 1px solid var(--t-field-color-form);\n color: var(--t-field-color-text);\n }\n .t-input-container:hover .t-input,\n .t-input:hover {\n border: 1px solid var(--t-field-color-stroke-hover);\n }\n .t-input:focus {\n border: 1px solid var(--t-field-color-stroke-focus);\n outline: 1px solid var(--t-field-color-stroke-focus);\n }\n .t-input[disabled]:disabled {\n cursor: not-allowed;\n border: none;\n color: var(--t-field-color-text-disabled);\n }\n .t-input.with-title::placeholder {\n color: transparent;\n }\n .t-input::placeholder,\n .t-input.with-title:focus::placeholder {\n color: var(--t-field-color-title);\n }\n .t-input.with-warning {\n border: 1px solid var(--t-field-color-stroke-validation);\n background-color: var(--t-field-color-bg-validation);\n }\n .t-input.with-error {\n border: 1px solid var(--t-field-color-stroke-error);\n background-color: var(--t-field-color-bg-error);\n }\n .t-input.with-loading {\n border: 1px solid var(--t-field-color-stroke-loading);\n }\n`;\n\nexport const inputTitleStyles = css`\n .t-title {\n position: absolute;\n top: 50%;\n left: 1.25rem;\n font-family: 'Rubik', sans-serif;\n color: var(--t-field-color-title);\n transform: translateY(-50%);\n transition-duration: 0.3s;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-textarea-container .t-title {\n top: 1rem;\n transform: none;\n }\n .t-input.with-title:focus + .t-title,\n .t-input.with-title:not(:placeholder-shown) + .t-title {\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1rem;\n transform: translateY(0);\n top: 0.5rem;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-title {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n .t-input.with-title:focus + .t-title,\n .t-input.with-title:not(:placeholder-shown) + .t-title {\n top: 0.375rem;\n }\n .t-textarea-container .t-title {\n top: 0.875rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input.with-title:focus + .t-title,\n .t-input.with-title:not(:placeholder-shown) + .t-title {\n top: 0.25rem;\n }\n .t-textarea-container .t-title {\n top: 0.75rem;\n }\n }\n`;\n\nexport const inputIconStyles = css`\n .t-input-container .t-icon-set-container {\n height: ${unsafeCSS(inputVars.iconDesktopSize)};\n width: ${unsafeCSS(inputVars.iconDesktopSize)};\n cursor: var(--t-field-input-cursor);\n }\n .t-icon-set-container.t-icon-click {\n cursor: pointer;\n }\n .t-input-container .t-icon-set-container.t-icon-right {\n position: absolute;\n top: 50%;\n right: ${unsafeCSS(inputVars.paddingX)};\n transform: translateY(-50%);\n }\n .t-input-container .t-icon-set-container.t-icon-left {\n position: absolute;\n top: 50%;\n left: ${unsafeCSS(inputVars.paddingX)};\n transform: translateY(-50%);\n }\n .t-icon-inactive {\n display: inline;\n }\n .t-icon-active {\n display: none;\n }\n .t-icon-disabled {\n display: none;\n }\n .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n display: none;\n }\n .t-input-container:hover .t-icon-set-container .t-icon-active,\n .t-input:hover ~ .t-icon-set-container .t-icon-active,\n .t-input:focus ~ .t-icon-set-container .t-icon-active {\n display: inline;\n }\n .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n display: none;\n }\n .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n display: none;\n }\n .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n display: inline;\n cursor: not-allowed;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-input-container .t-icon-set-container {\n height: ${unsafeCSS(inputVars.iconTabletSize)};\n width: ${unsafeCSS(inputVars.iconTabletSize)};\n }\n }\n`;\n\nexport const inputSearchStyles = css`\n .t-input[type='search'] {\n padding-left: var(--t-padding-x-desktop-with-icon);\n }\n .t-input[type='search'] + .t-title {\n left: var(--t-padding-x-desktop-with-icon);\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-input[type='search'] {\n padding-left: var(--t-padding-x-tablet-with-icon);\n }\n .t-input[type='search'] + .t-title {\n left: var(--t-padding-x-tablet-with-icon);\n }\n }\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n`;\n\nexport const inputDescriptionStyles = css`\n .t-input-description-container {\n margin-top: 0.5rem;\n font-family: 'Rubik', sans-serif;\n font-size: 0.75rem;\n line-height: 1rem;\n color: var(--t-field-color-description);\n display: flex;\n justify-content: space-between;\n }\n .t-input-description-container .t-letter-counter {\n align-self: flex-end;\n }\n .t-input-description-container .t-input-description {\n display: flex;\n gap: 0.5rem;\n }\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n gapX: '10px',\n iconDesktopSize: '1.5rem',\n iconMobileSize: '1rem',\n paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n :host {\n --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n --t-field-input-cursor: auto;\n }\n :host([dark]) {\n --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n --t-field-color-bg-validation: rgba(\n ${rgbDarkValidation.r},\n ${rgbDarkValidation.g},\n ${rgbDarkValidation.b},\n 0.2\n );\n --t-field-color-bg-error: rgba(\n ${rgbDarkError.r},\n ${rgbDarkError.g},\n ${rgbDarkError.b},\n 0.2\n );\n --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n }\n`;\n\nexport const inputComponentStyles = css`\n .t-textarea-main-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n }\n .t-input-container {\n position: relative;\n --t-padding-x-desktop-with-icon: calc(\n ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n ${unsafeCSS(inputVars.gapX)}\n );\n --t-padding-x-mobile-with-icon: calc(\n ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconMobileSize)} +\n ${unsafeCSS(inputVars.gapX)}\n );\n --t-border-size: 1px;\n }\n .t-input-container.t-textarea-container {\n height: 100%;\n }\n .t-input {\n padding: calc(1rem - var(--t-border-size)) ${unsafeCSS(inputVars.paddingX)};\n border-radius: 4px;\n font-family: 'Rubik', sans-serif;\n cursor: var(--t-field-input-cursor);\n width: 100%;\n box-sizing: border-box;\n }\n .t-input.t-textarea {\n height: 100%;\n display: block;\n }\n .t-input.with-title {\n padding-top: calc(1.5rem - var(--t-border-size));\n padding-bottom: calc(0.5rem - var(--t-border-size));\n }\n .t-input.with-icon-right {\n padding-right: var(--t-padding-x-desktop-with-icon);\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input.with-icon-right {\n padding-right: var(--t-padding-x-mobile-with-icon);\n }\n }\n`;\n\nexport const inputFontStyles = css`\n .t-input::placeholder,\n .t-input,\n .t-title {\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.5rem;\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input::placeholder,\n .t-input,\n .t-title {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n }\n`;\n\nexport const inputColorStyles = css`\n .t-input {\n background-color: var(--t-field-color-form);\n border: 1px solid var(--t-field-color-form);\n color: var(--t-field-color-text);\n }\n .t-input-container:hover .t-input,\n .t-input:hover {\n border: 1px solid var(--t-field-color-stroke-hover);\n }\n .t-input:focus {\n border: 1px solid var(--t-field-color-stroke-focus);\n outline: 1px solid var(--t-field-color-stroke-focus);\n }\n .t-input[disabled]:disabled {\n cursor: not-allowed;\n border: 1px solid var(--t-field-color-form);\n color: var(--t-field-color-text-disabled);\n }\n .t-input.with-title::placeholder {\n color: transparent;\n }\n .t-input::placeholder,\n .t-input.with-title:focus::placeholder {\n color: var(--t-field-color-title);\n }\n .t-input.with-warning {\n border: 1px solid var(--t-field-color-stroke-validation);\n background-color: var(--t-field-color-bg-validation);\n }\n .t-input.with-error {\n border: 1px solid var(--t-field-color-stroke-error);\n background-color: var(--t-field-color-bg-error);\n }\n .t-input.with-loading {\n border: 1px solid var(--t-field-color-stroke-loading);\n }\n`;\n\nexport const inputTitleStyles = css`\n .t-title {\n position: absolute;\n top: 50%;\n left: 1.25rem;\n font-family: 'Rubik', sans-serif;\n color: var(--t-field-color-title);\n transform: translateY(-50%);\n transition-duration: 0.3s;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-textarea-container .t-title {\n top: 1rem;\n transform: none;\n }\n .t-input.with-title:focus + .t-title,\n .t-input.with-title:not(:placeholder-shown) + .t-title {\n font-size: 0.75rem;\n font-weight: 300;\n line-height: 1rem;\n transform: translateY(0);\n top: 0.5rem;\n }\n`;\n\nexport const inputIconStyles = css`\n .t-input-container .t-icon-set-container {\n height: ${unsafeCSS(inputVars.iconDesktopSize)};\n width: ${unsafeCSS(inputVars.iconDesktopSize)};\n cursor: var(--t-field-input-cursor);\n }\n .t-icon-set-container.t-icon-click {\n cursor: pointer;\n }\n .t-input-container .t-icon-set-container.t-icon-right {\n position: absolute;\n top: 50%;\n right: ${unsafeCSS(inputVars.paddingX)};\n transform: translateY(-50%);\n }\n .t-input-container .t-icon-set-container.t-icon-left {\n position: absolute;\n top: 50%;\n left: ${unsafeCSS(inputVars.paddingX)};\n transform: translateY(-50%);\n }\n .t-icon-inactive {\n display: inline;\n }\n .t-icon-active {\n display: none;\n }\n .t-icon-disabled {\n display: none;\n }\n .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n display: none;\n }\n .t-input-container:hover .t-icon-set-container .t-icon-active,\n .t-input:hover ~ .t-icon-set-container .t-icon-active,\n .t-input:focus ~ .t-icon-set-container .t-icon-active {\n display: inline;\n }\n .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n display: none;\n }\n .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n display: none;\n }\n .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n display: inline;\n cursor: not-allowed;\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input-container .t-icon-set-container {\n height: ${unsafeCSS(inputVars.iconMobileSize)};\n width: ${unsafeCSS(inputVars.iconMobileSize)};\n }\n }\n`;\n\nexport const inputSearchStyles = css`\n .t-input[type='search'] {\n padding-left: var(--t-padding-x-desktop-with-icon);\n }\n .t-input[type='search'] + .t-title {\n left: var(--t-padding-x-desktop-with-icon);\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-input[type='search'] {\n padding-left: var(--t-padding-x-mobile-with-icon);\n }\n .t-input[type='search'] + .t-title {\n left: var(--t-padding-x-mobile-with-icon);\n }\n }\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n`;\n\nexport const inputDescriptionStyles = css`\n .t-input-description-container {\n margin-top: 0.5rem;\n font-family: 'Rubik', sans-serif;\n font-size: 0.75rem;\n line-height: 1rem;\n color: var(--t-field-color-description);\n display: flex;\n justify-content: space-between;\n }\n .t-input-description-container .t-letter-counter {\n align-self: flex-end;\n }\n .t-input-description-container .t-input-description {\n display: flex;\n gap: 0.5rem;\n }\n`;\n"]}
|
|
@@ -3,6 +3,7 @@ import { LitElement, html } from 'lit';
|
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
|
|
6
|
+
import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
|
|
6
7
|
import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles';
|
|
7
8
|
let TuixRadioButton = class TuixRadioButton extends LitElement {
|
|
8
9
|
constructor() {
|
|
@@ -47,7 +48,15 @@ let TuixRadioButton = class TuixRadioButton extends LitElement {
|
|
|
47
48
|
</div>
|
|
48
49
|
</div>
|
|
49
50
|
<div class="t-radio-button-label">
|
|
50
|
-
<slot name="label-${index}"
|
|
51
|
+
<slot name="label-${index}">
|
|
52
|
+
<tuix-text
|
|
53
|
+
size="${TextSize.Field1}"
|
|
54
|
+
color="${TextVariant.PRIMARY}"
|
|
55
|
+
?dark="${this.dark}"
|
|
56
|
+
>
|
|
57
|
+
${option}
|
|
58
|
+
</tuix-text>
|
|
59
|
+
</slot>
|
|
51
60
|
</div>
|
|
52
61
|
</label>`;
|
|
53
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TuixRadioButton.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAIlC,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAUE,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAA4B,EAAE,CAAC;QAGtC,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;QAGpC,mBAAc,GAAiC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"TuixRadioButton.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport {\n radioButtonContainerStyles,\n radioButtonInnerStyles,\n radioButtonLabelStyles,\n radioButtonStyles,\n radioHostStyles,\n} from './TuixRadioButton.styles';\nimport { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';\n\n@customElement('tuix-radio-button')\nexport class TuixRadioButton extends LitElement {\n static styles = [\n radioHostStyles,\n radioButtonContainerStyles,\n radioButtonStyles,\n radioButtonInnerStyles,\n radioButtonLabelStyles,\n ];\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n dark = false;\n\n @property({ type: Boolean, reflect: true })\n error = false;\n\n @property({ type: Array })\n options: TuixRadioButtonOption[] = [];\n\n @property({ type: String })\n labelSide = CheckboxLabelSide.RIGHT;\n\n @property({ type: String })\n selectedOption: TuixRadioButtonOption | null = null;\n\n private _onRadioButtonChange(event: InputEvent) {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n value: (event.target as HTMLInputElement).value,\n },\n bubbles: true,\n })\n );\n }\n\n private _getFullContainerClasses(): ClassInfo {\n return {\n 't-radio-button-full-container': true,\n 't-with-error': this.error && !this.disabled,\n 't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n 't-multiple-options': this.options.length > 1,\n };\n }\n\n private _formatTemplate(option: TuixRadioButtonOption, index: number) {\n return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n <div class=\"t-radio-button-container\">\n <input\n type=\"radio\"\n class=\"t-radio-button\"\n ?disabled=\"${this.disabled}\"\n .value=\"${option}\"\n name=\"tuix-radio-button\"\n ?checked=\"${this.selectedOption === option}\"\n @change=\"${this._onRadioButtonChange}\"\n />\n <div class=\"t-radio-button-checkmark\">\n <div class=\"t-radio-button-inner\"></div>\n </div>\n </div>\n <div class=\"t-radio-button-label\">\n <slot name=\"label-${index}\">\n <tuix-text\n size=\"${TextSize.Field1}\"\n color=\"${TextVariant.PRIMARY}\"\n ?dark=\"${this.dark}\"\n >\n ${option}\n </tuix-text>\n </slot>\n </div>\n </label>`;\n }\n\n render() {\n return html`${this.options.map((option, index) =>\n this._formatTemplate(option, index)\n )}`;\n }\n}\n"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
|
|
3
3
|
import { Palette } from '../utils/colors';
|
|
4
|
+
import { ScreenSizes } from '../utils/screenSizes.enum';
|
|
4
5
|
export const radioHostStyles = css `
|
|
5
6
|
${hostStyles}
|
|
6
7
|
:host {
|
|
@@ -12,6 +13,7 @@ export const radioButtonContainerStyles = css `
|
|
|
12
13
|
.t-radio-button-full-container {
|
|
13
14
|
display: flex;
|
|
14
15
|
justify-content: space-between;
|
|
16
|
+
align-items: center;
|
|
15
17
|
cursor: pointer;
|
|
16
18
|
-webkit-user-select: none;
|
|
17
19
|
-moz-user-select: none;
|
|
@@ -22,10 +24,12 @@ export const radioButtonContainerStyles = css `
|
|
|
22
24
|
cursor: not-allowed;
|
|
23
25
|
}
|
|
24
26
|
.t-radio-button-container {
|
|
27
|
+
--t-radio-button-size-box: 1.5rem;
|
|
28
|
+
--t-radio-button-shadow-width: 2px;
|
|
25
29
|
display: block;
|
|
26
30
|
position: relative;
|
|
27
|
-
height:
|
|
28
|
-
width:
|
|
31
|
+
height: var(--t-radio-button-size-box);
|
|
32
|
+
width: var(--t-radio-button-size-box);
|
|
29
33
|
}
|
|
30
34
|
.t-radio-button-container .t-radio-button {
|
|
31
35
|
position: absolute;
|
|
@@ -33,6 +37,12 @@ export const radioButtonContainerStyles = css `
|
|
|
33
37
|
height: 0;
|
|
34
38
|
width: 0;
|
|
35
39
|
}
|
|
40
|
+
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
41
|
+
.t-radio-button-container {
|
|
42
|
+
--t-radio-button-size-box: 1rem;
|
|
43
|
+
--t-radio-button-shadow-width: 1px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
36
46
|
`;
|
|
37
47
|
export const radioButtonStyles = css `
|
|
38
48
|
.t-radio-button-full-container.t-multiple-options {
|
|
@@ -46,32 +56,33 @@ export const radioButtonStyles = css `
|
|
|
46
56
|
top: 0;
|
|
47
57
|
left: 0;
|
|
48
58
|
display: flex;
|
|
49
|
-
height:
|
|
50
|
-
width:
|
|
51
|
-
border-radius: 0.25rem;
|
|
59
|
+
height: var(--t-radio-button-size-box);
|
|
60
|
+
width: var(--t-radio-button-size-box);
|
|
52
61
|
background-color: var(--t-bg-color-primary);
|
|
53
|
-
border:
|
|
62
|
+
border: 1px solid var(--t-stroke-color-grey);
|
|
54
63
|
box-sizing: border-box;
|
|
55
64
|
border-radius: 50%;
|
|
56
65
|
}
|
|
57
66
|
.t-radio-button-container
|
|
58
67
|
.t-radio-button:checked
|
|
59
68
|
~ .t-radio-button-checkmark {
|
|
60
|
-
border:
|
|
69
|
+
border: 1px solid var(--t-main-color-tuix);
|
|
61
70
|
}
|
|
62
71
|
.t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {
|
|
63
|
-
box-shadow: 0 0 0px
|
|
72
|
+
box-shadow: 0 0 0px var(--t-radio-button-shadow-width)
|
|
73
|
+
var(--t-stroke-color-focus);
|
|
64
74
|
}
|
|
65
75
|
.t-radio-button-full-container:hover
|
|
66
76
|
.t-radio-button-container
|
|
67
77
|
.t-radio-button-checkmark {
|
|
68
|
-
border:
|
|
78
|
+
border: 1px solid var(--t-main-color-tuix);
|
|
69
79
|
}
|
|
70
80
|
.t-radio-button-full-container.t-with-error
|
|
71
81
|
.t-radio-button-container
|
|
72
82
|
.t-radio-button-checkmark {
|
|
73
|
-
border:
|
|
83
|
+
border: 1px solid var(--t-text-color-error);
|
|
74
84
|
}
|
|
85
|
+
|
|
75
86
|
.t-radio-button-container
|
|
76
87
|
.t-radio-button:disabled
|
|
77
88
|
~ .t-radio-button-checkmark {
|
|
@@ -84,8 +95,8 @@ export const radioButtonInnerStyles = css `
|
|
|
84
95
|
.t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {
|
|
85
96
|
background-color: var(--t-main-color-tuix);
|
|
86
97
|
margin: auto;
|
|
87
|
-
height:
|
|
88
|
-
width:
|
|
98
|
+
height: calc(var(--t-radio-button-size-box) / 2 - 2px);
|
|
99
|
+
width: calc(var(--t-radio-button-size-box) / 2 - 2px);
|
|
89
100
|
border-radius: 50%;
|
|
90
101
|
display: none;
|
|
91
102
|
}
|
|
@@ -112,10 +123,6 @@ export const radioButtonInnerStyles = css `
|
|
|
112
123
|
export const radioButtonLabelStyles = css `
|
|
113
124
|
.t-radio-button-label {
|
|
114
125
|
display: block;
|
|
115
|
-
font-size: 1rem;
|
|
116
|
-
line-height: 1.5rem;
|
|
117
|
-
font-weight: 300;
|
|
118
|
-
font-family: 'Rubik', sans-serif;
|
|
119
126
|
color: var(--t-text-color-label);
|
|
120
127
|
margin-left: 0.625rem;
|
|
121
128
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TuixRadioButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"TuixRadioButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;IAC9B,UAAU;;;6CAG+B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;CAE1E,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA4BN,WAAW,CAAC,MAAM;;;;;;CAMxD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CnC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAaxC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const radioHostStyles = css`\n ${hostStyles}\n :host {\n --t-margin-between-radio-buttons: 1rem;\n --t-radio-button-inner-color-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n }\n`;\n\nexport const radioButtonContainerStyles = css`\n .t-radio-button-full-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n :host([disabled]) .t-radio-button-full-container {\n cursor: not-allowed;\n }\n .t-radio-button-container {\n --t-radio-button-size-box: 1.5rem;\n --t-radio-button-shadow-width: 2px;\n display: block;\n position: relative;\n height: var(--t-radio-button-size-box);\n width: var(--t-radio-button-size-box);\n }\n .t-radio-button-container .t-radio-button {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-radio-button-container {\n --t-radio-button-size-box: 1rem;\n --t-radio-button-shadow-width: 1px;\n }\n }\n`;\n\nexport const radioButtonStyles = css`\n .t-radio-button-full-container.t-multiple-options {\n margin-bottom: var(--t-margin-between-radio-buttons);\n }\n .t-radio-button-full-container:not(.t-with-label-left) {\n justify-content: flex-start;\n }\n .t-radio-button-container .t-radio-button-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: var(--t-radio-button-size-box);\n width: var(--t-radio-button-size-box);\n background-color: var(--t-bg-color-primary);\n border: 1px solid var(--t-stroke-color-grey);\n box-sizing: border-box;\n border-radius: 50%;\n }\n .t-radio-button-container\n .t-radio-button:checked\n ~ .t-radio-button-checkmark {\n border: 1px solid var(--t-main-color-tuix);\n }\n .t-radio-button-container .t-radio-button:focus ~ .t-radio-button-checkmark {\n box-shadow: 0 0 0px var(--t-radio-button-shadow-width)\n var(--t-stroke-color-focus);\n }\n .t-radio-button-full-container:hover\n .t-radio-button-container\n .t-radio-button-checkmark {\n border: 1px solid var(--t-main-color-tuix);\n }\n .t-radio-button-full-container.t-with-error\n .t-radio-button-container\n .t-radio-button-checkmark {\n border: 1px solid var(--t-text-color-error);\n }\n\n .t-radio-button-container\n .t-radio-button:disabled\n ~ .t-radio-button-checkmark {\n background-color: var(--t-bg-color-disabled);\n border: none;\n box-shadow: none;\n }\n`;\n\nexport const radioButtonInnerStyles = css`\n .t-radio-button-container .t-radio-button-checkmark .t-radio-button-inner {\n background-color: var(--t-main-color-tuix);\n margin: auto;\n height: calc(var(--t-radio-button-size-box) / 2 - 2px);\n width: calc(var(--t-radio-button-size-box) / 2 - 2px);\n border-radius: 50%;\n display: none;\n }\n .t-radio-button-container\n .t-radio-button:checked\n ~ .t-radio-button-checkmark\n .t-radio-button-inner {\n display: block;\n }\n :host([error])\n .t-radio-button-container\n .t-radio-button-checkmark\n .t-radio-button-inner {\n background-color: var(--t-text-color-error);\n }\n :host([disabled])\n .t-radio-button-container\n .t-radio-button-checkmark\n .t-radio-button-inner {\n background-color: var(--t-radio-button-inner-color-disabled);\n cursor: not-allowed;\n }\n`;\n\nexport const radioButtonLabelStyles = css`\n .t-radio-button-label {\n display: block;\n color: var(--t-text-color-label);\n margin-left: 0.625rem;\n }\n .t-radio-button-full-container.t-with-label-left {\n flex-direction: row-reverse;\n }\n .t-radio-button-full-container.t-with-label-left .t-radio-button-label {\n margin-right: 0.625rem;\n margin-left: 0;\n }\n`;\n"]}
|
|
@@ -3,6 +3,7 @@ import { LitElement, html } from 'lit';
|
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
|
|
6
|
+
import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
|
|
6
7
|
import { toggleButtonCheckmarkStyles, toggleButtonContainerStyles, toggleButtonHostStyles, toggleButtonInnerStyles, toggleButtonLabelStyles, } from './TuixToggleButton.styles';
|
|
7
8
|
let TuixToggleButton = class TuixToggleButton extends LitElement {
|
|
8
9
|
constructor() {
|
|
@@ -43,7 +44,15 @@ let TuixToggleButton = class TuixToggleButton extends LitElement {
|
|
|
43
44
|
</div>
|
|
44
45
|
</div>
|
|
45
46
|
<div class="t-toggle-button-label">
|
|
46
|
-
<slot
|
|
47
|
+
<slot>
|
|
48
|
+
<tuix-text
|
|
49
|
+
size="${TextSize.Field1}"
|
|
50
|
+
color="${TextVariant.PRIMARY}"
|
|
51
|
+
?dark="${this.dark}"
|
|
52
|
+
>
|
|
53
|
+
${this.label}
|
|
54
|
+
</tuix-text>
|
|
55
|
+
</slot>
|
|
47
56
|
</div>
|
|
48
57
|
</label>`;
|
|
49
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TuixToggleButton.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAUE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"TuixToggleButton.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAGnC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IAAhD;;QAUE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;IAgDtC,CAAC;IA9CS,qBAAqB,CAAC,KAAiB;QAC7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,OAAO;gBACjD,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,gCAAgC,EAAE,IAAI;YACtC,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;SAC/D,CAAC;IACJ,CAAC;IAES,MAAM;QACd,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;sBAKnD,IAAI,CAAC,OAAO;uBACX,IAAI,CAAC,QAAQ;qBACf,IAAI,CAAC,qBAAqB;;;;;;;;;oBAS3B,QAAQ,CAAC,MAAM;qBACd,WAAW,CAAC,OAAO;qBACnB,IAAI,CAAC,IAAI;;cAEhB,IAAI,CAAC,KAAK;;;;aAIX,CAAC;IACZ,CAAC;;AApEM,uBAAM,GAAG;IACd,sBAAsB;IACtB,2BAA2B;IAC3B,2BAA2B;IAC3B,uBAAuB;IACvB,uBAAuB;CACxB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACS;AAtBzB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAsE5B;SAtEY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';\nimport {\n toggleButtonCheckmarkStyles,\n toggleButtonContainerStyles,\n toggleButtonHostStyles,\n toggleButtonInnerStyles,\n toggleButtonLabelStyles,\n} from './TuixToggleButton.styles';\n\n@customElement('tuix-toggle-button')\nexport class TuixToggleButton extends LitElement {\n static styles = [\n toggleButtonHostStyles,\n toggleButtonContainerStyles,\n toggleButtonCheckmarkStyles,\n toggleButtonInnerStyles,\n toggleButtonLabelStyles,\n ];\n\n @property({ type: Boolean })\n checked = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n dark = false;\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n labelSide = CheckboxLabelSide.RIGHT;\n\n private _onToggleButtonChange(event: InputEvent) {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n value: (event.target as HTMLInputElement).checked,\n label: this.label,\n },\n bubbles: true,\n })\n );\n }\n\n private _getFullContainerClasses(): ClassInfo {\n return {\n 't-toggle-button-full-container': true,\n 't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n };\n }\n\n protected render() {\n return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n <div class=\"t-toggle-button-container\">\n <input\n type=\"checkbox\"\n class=\"t-toggle-button\"\n .checked=\"${this.checked}\"\n ?disabled=\"${this.disabled}\"\n @change=\"${this._onToggleButtonChange}\"\n />\n <div class=\"t-toggle-button-checkmark\">\n <div class=\"t-toggle-button-inner\"></div>\n </div>\n </div>\n <div class=\"t-toggle-button-label\">\n <slot>\n <tuix-text\n size=\"${TextSize.Field1}\"\n color=\"${TextVariant.PRIMARY}\"\n ?dark=\"${this.dark}\"\n >\n ${this.label}\n </tuix-text>\n </slot>\n </div>\n </label>`;\n }\n}\n"]}
|
|
@@ -2,23 +2,28 @@ import { css, unsafeCSS } from 'lit';
|
|
|
2
2
|
import { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';
|
|
3
3
|
import { Palette } from '../utils/colors';
|
|
4
4
|
import { DarkPalette } from '../utils/darkColors';
|
|
5
|
+
import { ScreenSizes } from '../utils/screenSizes.enum';
|
|
5
6
|
export const toggleButtonHostStyles = css `
|
|
6
7
|
${hostStyles}
|
|
7
8
|
:host {
|
|
8
9
|
--t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};
|
|
9
10
|
--t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};
|
|
10
11
|
--t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);
|
|
11
|
-
--t-toggle-inner-radio: 1rem;
|
|
12
12
|
}
|
|
13
13
|
:host([dark]) {
|
|
14
14
|
--t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};
|
|
15
|
-
--t-bg-color-disabled: ${unsafeCSS(DarkPalette.
|
|
15
|
+
--t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};
|
|
16
|
+
--t-bg-color-inner: ${unsafeCSS(DarkPalette.WHITE)};
|
|
17
|
+
}
|
|
18
|
+
:host([dark][disabled]) {
|
|
19
|
+
--t-bg-color-inner: ${unsafeCSS(DarkPalette.MAIN)};
|
|
16
20
|
}
|
|
17
21
|
`;
|
|
18
22
|
export const toggleButtonContainerStyles = css `
|
|
19
23
|
.t-toggle-button-full-container {
|
|
20
24
|
display: flex;
|
|
21
25
|
justify-content: space-between;
|
|
26
|
+
align-items: center;
|
|
22
27
|
cursor: pointer;
|
|
23
28
|
-webkit-user-select: none;
|
|
24
29
|
-moz-user-select: none;
|
|
@@ -29,10 +34,13 @@ export const toggleButtonContainerStyles = css `
|
|
|
29
34
|
cursor: not-allowed;
|
|
30
35
|
}
|
|
31
36
|
.t-toggle-button-container {
|
|
37
|
+
--t-toggle-button-size-box: 3rem;
|
|
38
|
+
--t-toggle-button-shadow-width: 2px;
|
|
39
|
+
--t-toggle-inner-radio: 1rem;
|
|
32
40
|
display: block;
|
|
33
41
|
position: relative;
|
|
34
|
-
height:
|
|
35
|
-
width:
|
|
42
|
+
height: calc(var(--t-toggle-button-size-box) / 2);
|
|
43
|
+
width: var(--t-toggle-button-size-box);
|
|
36
44
|
}
|
|
37
45
|
.t-toggle-button-container .t-toggle-button {
|
|
38
46
|
position: absolute;
|
|
@@ -43,6 +51,13 @@ export const toggleButtonContainerStyles = css `
|
|
|
43
51
|
.t-radio-button-full-container:not(.t-with-label-left) {
|
|
44
52
|
justify-content: flex-start;
|
|
45
53
|
}
|
|
54
|
+
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
55
|
+
.t-toggle-button-container {
|
|
56
|
+
--t-toggle-button-size-box: 2rem;
|
|
57
|
+
--t-toggle-button-shadow-width: 1px;
|
|
58
|
+
--t-toggle-inner-radio: 0.75rem;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
46
61
|
`;
|
|
47
62
|
export const toggleButtonCheckmarkStyles = css `
|
|
48
63
|
.t-toggle-button-container .t-toggle-button-checkmark {
|
|
@@ -50,8 +65,8 @@ export const toggleButtonCheckmarkStyles = css `
|
|
|
50
65
|
top: 0;
|
|
51
66
|
left: 0;
|
|
52
67
|
display: flex;
|
|
53
|
-
height:
|
|
54
|
-
width:
|
|
68
|
+
height: calc(var(--t-toggle-button-size-box) / 2);
|
|
69
|
+
width: var(--t-toggle-button-size-box);
|
|
55
70
|
border-radius: 0.75rem;
|
|
56
71
|
background-color: var(--t-bg-color-primary);
|
|
57
72
|
box-sizing: border-box;
|
|
@@ -69,7 +84,8 @@ export const toggleButtonCheckmarkStyles = css `
|
|
|
69
84
|
.t-toggle-button-container
|
|
70
85
|
.t-toggle-button:focus
|
|
71
86
|
~ .t-toggle-button-checkmark {
|
|
72
|
-
box-shadow: 0 0 0px
|
|
87
|
+
box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)
|
|
88
|
+
var(--t-stroke-color-focus);
|
|
73
89
|
}
|
|
74
90
|
.t-toggle-button-container
|
|
75
91
|
.t-toggle-button:disabled
|
|
@@ -80,8 +96,8 @@ export const toggleButtonCheckmarkStyles = css `
|
|
|
80
96
|
`;
|
|
81
97
|
export const toggleButtonInnerStyles = css `
|
|
82
98
|
.t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {
|
|
83
|
-
background-color: ${unsafeCSS(Palette.WHITE)};
|
|
84
|
-
margin: auto auto auto
|
|
99
|
+
background-color: var(--t-bg-color-inner, ${unsafeCSS(Palette.WHITE)});
|
|
100
|
+
margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);
|
|
85
101
|
height: var(--t-toggle-inner-radio);
|
|
86
102
|
width: var(--t-toggle-inner-radio);
|
|
87
103
|
border-radius: 50%;
|
|
@@ -92,16 +108,17 @@ export const toggleButtonInnerStyles = css `
|
|
|
92
108
|
.t-toggle-button:checked
|
|
93
109
|
~ .t-toggle-button-checkmark
|
|
94
110
|
.t-toggle-button-inner {
|
|
95
|
-
transform: translateX(
|
|
111
|
+
transform: translateX(
|
|
112
|
+
calc(
|
|
113
|
+
var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -
|
|
114
|
+
var(--t-toggle-button-shadow-width) * 4
|
|
115
|
+
)
|
|
116
|
+
);
|
|
96
117
|
}
|
|
97
118
|
`;
|
|
98
119
|
export const toggleButtonLabelStyles = css `
|
|
99
120
|
.t-toggle-button-label {
|
|
100
121
|
display: block;
|
|
101
|
-
font-size: 1rem;
|
|
102
|
-
line-height: 1.5rem;
|
|
103
|
-
font-weight: 300;
|
|
104
|
-
font-family: 'Rubik', sans-serif;
|
|
105
122
|
color: var(--t-text-color-label);
|
|
106
123
|
margin-left: 0.625rem;
|
|
107
124
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"TuixToggleButton.styles.js","sourceRoot":"","sources":["../../../src/tuix-toggle-button/TuixToggleButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;IACrC,UAAU;;4BAEc,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;6BAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;;4BAI/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;6BACjC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;0BACrC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC;;;0BAG5B,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC;;CAEpD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAgCP,WAAW,CAAC,MAAM;;;;;;;CAOxD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC7C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;gDAEM,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;CAmBvE,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAazC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { hostStyles } from '../tuix-checkbox/TuixCheckbox.styles';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\n\nexport const toggleButtonHostStyles = css`\n ${hostStyles}\n :host {\n --t-bg-color-primary: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-toggle-shadow-color-focus: rgba(142, 141, 208, 0.16);\n }\n :host([dark]) {\n --t-bg-color-primary: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n --t-bg-color-inner: ${unsafeCSS(DarkPalette.WHITE)};\n }\n :host([dark][disabled]) {\n --t-bg-color-inner: ${unsafeCSS(DarkPalette.MAIN)};\n }\n`;\n\nexport const toggleButtonContainerStyles = css`\n .t-toggle-button-full-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n :host([disabled]) .t-toggle-button-full-container {\n cursor: not-allowed;\n }\n .t-toggle-button-container {\n --t-toggle-button-size-box: 3rem;\n --t-toggle-button-shadow-width: 2px;\n --t-toggle-inner-radio: 1rem;\n display: block;\n position: relative;\n height: calc(var(--t-toggle-button-size-box) / 2);\n width: var(--t-toggle-button-size-box);\n }\n .t-toggle-button-container .t-toggle-button {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n }\n .t-radio-button-full-container:not(.t-with-label-left) {\n justify-content: flex-start;\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-toggle-button-container {\n --t-toggle-button-size-box: 2rem;\n --t-toggle-button-shadow-width: 1px;\n --t-toggle-inner-radio: 0.75rem;\n }\n }\n`;\n\nexport const toggleButtonCheckmarkStyles = css`\n .t-toggle-button-container .t-toggle-button-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: calc(var(--t-toggle-button-size-box) / 2);\n width: var(--t-toggle-button-size-box);\n border-radius: 0.75rem;\n background-color: var(--t-bg-color-primary);\n box-sizing: border-box;\n }\n .t-toggle-button-container\n .t-toggle-button:checked\n ~ .t-toggle-button-checkmark {\n background-color: var(--t-main-color-tuix);\n }\n .t-toggle-button-full-container:hover\n .t-toggle-button-container\n .t-toggle-button-checkmark {\n box-shadow: 0px 4px 4px 0px var(--t-toggle-shadow-color-focus);\n }\n .t-toggle-button-container\n .t-toggle-button:focus\n ~ .t-toggle-button-checkmark {\n box-shadow: 0 0 0px var(--t-toggle-button-shadow-width)\n var(--t-stroke-color-focus);\n }\n .t-toggle-button-container\n .t-toggle-button:disabled\n ~ .t-toggle-button-checkmark {\n background-color: var(--t-bg-color-disabled);\n box-shadow: none;\n }\n`;\n\nexport const toggleButtonInnerStyles = css`\n .t-toggle-button-container .t-toggle-button-checkmark .t-toggle-button-inner {\n background-color: var(--t-bg-color-inner, ${unsafeCSS(Palette.WHITE)});\n margin: auto auto auto calc(var(--t-toggle-button-shadow-width) * 2);\n height: var(--t-toggle-inner-radio);\n width: var(--t-toggle-inner-radio);\n border-radius: 50%;\n display: block;\n transition: 0.3s;\n }\n .t-toggle-button-container\n .t-toggle-button:checked\n ~ .t-toggle-button-checkmark\n .t-toggle-button-inner {\n transform: translateX(\n calc(\n var(--t-toggle-button-size-box) - var(--t-toggle-inner-radio) -\n var(--t-toggle-button-shadow-width) * 4\n )\n );\n }\n`;\n\nexport const toggleButtonLabelStyles = css`\n .t-toggle-button-label {\n display: block;\n color: var(--t-text-color-label);\n margin-left: 0.625rem;\n }\n .t-toggle-button-full-container.t-with-label-left {\n flex-direction: row-reverse;\n }\n .t-toggle-button-full-container.t-with-label-left .t-toggle-button-label {\n margin-right: 0.625rem;\n margin-left: 0;\n }\n`;\n"]}
|