@dr.pogodin/react-utils 1.43.27 → 1.43.29
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/build/development/shared/components/Input/index.js +25 -15
- package/build/development/shared/components/Input/index.js.map +1 -1
- package/build/development/shared/components/TextArea/index.js +5 -0
- package/build/development/shared/components/TextArea/index.js.map +1 -1
- package/build/development/style.css +2 -0
- package/build/development/web.bundle.js +2 -2
- package/build/production/shared/components/Input/index.js +6 -3
- package/build/production/shared/components/Input/index.js.map +1 -1
- package/build/production/shared/components/TextArea/index.js +3 -3
- package/build/production/shared/components/TextArea/index.js.map +1 -1
- package/build/production/style.css +1 -1
- package/build/production/style.css.map +1 -1
- package/build/production/web.bundle.js +1 -1
- package/build/production/web.bundle.js.map +1 -1
- package/build/types-code/shared/components/Input/index.d.ts +1 -1
- package/config/webpack/app-base.js +24 -8
- package/package.json +5 -5
- package/src/shared/components/Input/index.tsx +26 -14
- package/src/shared/components/Input/theme.scss +1 -0
- package/src/shared/components/TextArea/index.tsx +9 -1
- package/src/shared/components/selectors/NativeDropdown/theme.scss +1 -0
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
+
var _react = require("react");
|
|
8
9
|
var _reactThemes = _interopRequireDefault(require("@dr.pogodin/react-themes"));
|
|
9
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
11
|
const defaultTheme = {
|
|
@@ -29,21 +30,30 @@ const Input = ({
|
|
|
29
30
|
testId,
|
|
30
31
|
theme,
|
|
31
32
|
...rest
|
|
32
|
-
}) =>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
className: theme.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
33
|
+
}) => {
|
|
34
|
+
const localRef = (0, _react.useRef)(null);
|
|
35
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
36
|
+
className: theme.container,
|
|
37
|
+
onFocus: () => {
|
|
38
|
+
// TODO: It does not really work if a callback-style `ref` is passed in,
|
|
39
|
+
// we need a more complex logic to cover that case, but for now this serves
|
|
40
|
+
// the case we need it for.
|
|
41
|
+
if (typeof ref === 'object') ref?.current?.focus();else localRef.current?.focus();
|
|
42
|
+
},
|
|
43
|
+
children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
44
|
+
className: theme.label,
|
|
45
|
+
children: label
|
|
46
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
47
|
+
className: theme.input,
|
|
48
|
+
"data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
|
|
49
|
+
ref: ref ?? localRef
|
|
41
50
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
});
|
|
51
|
+
// TODO: Avoid the spreading later.
|
|
52
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
53
|
+
,
|
|
54
|
+
...rest
|
|
55
|
+
})]
|
|
56
|
+
});
|
|
57
|
+
};
|
|
48
58
|
var _default = exports.default = (0, _reactThemes.default)(Input, 'Input', defaultTheme);
|
|
49
59
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","Input","label","ref","testId","theme","rest","localRef","useRef","jsxs","className","container","onFocus","current","focus","children","undefined","jsx","input","process","env","NODE_ENV","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import { type FunctionComponent, type Ref, useRef } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'container' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const localRef = useRef<HTMLInputElement>(null);\n return (\n <span\n className={theme.container}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined ? null : <div className={theme.label}>{label}</div>}\n <input\n className={theme.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n />\n </span>\n );\n};\n\nexport default themed(Input, 'Input', defaultTheme);\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AAA8D,IAAAG,WAAA,GAAAH,OAAA;AAAA,MAAAI,YAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAa9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAgC,GAAGA,CAAC;EACxCC,KAAK;EACLC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAC/C,oBACE,IAAAT,WAAA,CAAAU,IAAA;IACEC,SAAS,EAAEL,KAAK,CAACM,SAAU;IAC3BC,OAAO,EAAEA,CAAA,KAAM;MACb;MACA;MACA;MACA,IAAI,OAAOT,GAAG,KAAK,QAAQ,EAAEA,GAAG,EAAEU,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,KAC9CP,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAAC;IAChC,CAAE;IAAAC,QAAA,GAEDb,KAAK,KAAKc,SAAS,GAAG,IAAI,gBAAG,IAAAjB,WAAA,CAAAkB,GAAA;MAAKP,SAAS,EAAEL,KAAK,CAACH,KAAM;MAAAa,QAAA,EAAEb;IAAK,CAAM,CAAC,eACxE,IAAAH,WAAA,CAAAkB,GAAA;MACEP,SAAS,EAAEL,KAAK,CAACa,KAAM;MACvB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGL,SAAS,GAAGZ,MAAO;MACxED,GAAG,EAAEA,GAAG,IAAII;;MAEZ;MACA;MAAA;MAAA,GACID;IAAI,CACT,CAAC;EAAA,CACE,CAAC;AAEX,CAAC;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEa,IAAAC,oBAAM,EAACxB,KAAK,EAAE,OAAO,EAAED,YAAY,CAAC","ignoreList":[]}
|
|
@@ -30,6 +30,7 @@ const TextArea = ({
|
|
|
30
30
|
}) => {
|
|
31
31
|
const hiddenAreaRef = (0, _react.useRef)(null);
|
|
32
32
|
const [height, setHeight] = (0, _react.useState)();
|
|
33
|
+
const textAreaRef = (0, _react.useRef)(null);
|
|
33
34
|
const [localValue, setLocalValue] = (0, _react.useState)(value ?? '');
|
|
34
35
|
if (value !== undefined && localValue !== value) setLocalValue(value);
|
|
35
36
|
|
|
@@ -60,6 +61,9 @@ const TextArea = ({
|
|
|
60
61
|
}, [localValue]);
|
|
61
62
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
62
63
|
className: theme.container,
|
|
64
|
+
onFocus: () => {
|
|
65
|
+
textAreaRef.current?.focus();
|
|
66
|
+
},
|
|
63
67
|
children: [label === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
64
68
|
className: theme.label,
|
|
65
69
|
children: label
|
|
@@ -99,6 +103,7 @@ const TextArea = ({
|
|
|
99
103
|
} : onChange,
|
|
100
104
|
onKeyDown: onKeyDown,
|
|
101
105
|
placeholder: placeholder,
|
|
106
|
+
ref: textAreaRef,
|
|
102
107
|
style: {
|
|
103
108
|
height
|
|
104
109
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","TextArea","disabled","label","onBlur","onChange","onKeyDown","placeholder","testId","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","useLayoutEffect","jsxs","className","container","children","jsx","textarea","hidden","readOnly","ref","tabIndex","process","env","NODE_ENV","e","target","style","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n type FocusEventHandler,\n type FunctionComponent,\n type KeyboardEventHandler,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';\n\ntype Props = {\n disabled?: boolean;\n label?: string;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n placeholder?: string;\n testId?: string;\n theme: Theme<ThemeKeyT>;\n value?: string;\n};\n\nconst TextArea: FunctionComponent<Props> = ({\n disabled,\n label,\n onBlur,\n onChange,\n onKeyDown,\n placeholder,\n testId,\n theme,\n value,\n}) => {\n const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n const [height, setHeight] = useState<number | undefined>();\n\n const [localValue, setLocalValue] = useState(value ?? '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n useEffect(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // Resizes the text area when its content is modified.\n //\n // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n // useEffect() it becomes visible how the content is modified first,\n // and then input height is incremented, if necessary).\n // See: https://github.com/birdofpreyru/react-utils/issues/313\n useLayoutEffect(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","TextArea","disabled","label","onBlur","onChange","onKeyDown","placeholder","testId","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","textAreaRef","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","useLayoutEffect","jsxs","className","container","onFocus","focus","children","jsx","textarea","hidden","readOnly","ref","tabIndex","process","env","NODE_ENV","e","target","style","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n type FocusEventHandler,\n type FunctionComponent,\n type KeyboardEventHandler,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';\n\ntype Props = {\n disabled?: boolean;\n label?: string;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n placeholder?: string;\n testId?: string;\n theme: Theme<ThemeKeyT>;\n value?: string;\n};\n\nconst TextArea: FunctionComponent<Props> = ({\n disabled,\n label,\n onBlur,\n onChange,\n onKeyDown,\n placeholder,\n testId,\n theme,\n value,\n}) => {\n const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n const [height, setHeight] = useState<number | undefined>();\n\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const [localValue, setLocalValue] = useState(value ?? '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n useEffect(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // Resizes the text area when its content is modified.\n //\n // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n // useEffect() it becomes visible how the content is modified first,\n // and then input height is incremented, if necessary).\n // See: https://github.com/birdofpreyru/react-utils/issues/313\n useLayoutEffect(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n\n return (\n <div\n className={theme.container}\n onFocus={() => {\n textAreaRef.current?.focus();\n }}\n >\n {label === undefined ? null : <div className={theme.label}>{label}</div>}\n <textarea\n className={`${theme.textarea} ${theme.hidden}`}\n\n // This text area is hidden underneath the primary one below,\n // and it is used for text measurements, to implement auto-scaling\n // of the primary textarea's height.\n readOnly\n ref={hiddenAreaRef}\n\n // The \"-1\" value of \"tabIndex\" removes this hidden text area from\n // the tab-focus-chain.\n tabIndex={-1}\n\n // NOTE: With empty string value (\"\") the scrolling height of this text\n // area is zero, thus collapsing <TextArea> height below the single line\n // input height. To avoid it we fallback to whitespace (\" \") character\n // here.\n value={localValue || ' '}\n />\n <textarea\n className={theme.textarea}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n disabled={disabled}\n onBlur={onBlur}\n\n // When value is \"undefined\" the text area is not-managed, and we should\n // manage it internally for the measurement / resizing functionality\n // to work.\n onChange={\n value === undefined\n ? (e) => {\n setLocalValue(e.target.value);\n } : onChange\n }\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={textAreaRef}\n style={{ height }}\n value={localValue}\n />\n </div>\n );\n};\n\nexport default themed(TextArea, 'TextArea', defaultTheme);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -328,6 +328,7 @@ body {
|
|
|
328
328
|
.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___label___K7JYKw,
|
|
329
329
|
.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___ad___ADu59e.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___hoc___FTP2bb.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___label___K7JYKw {
|
|
330
330
|
margin: 0 0.6em 0 1.5em;
|
|
331
|
+
pointer-events: none;
|
|
331
332
|
}
|
|
332
333
|
*.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W,
|
|
333
334
|
.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___context___xHyZo4.-dr-pogodin-react-utils___src-shared-components-selectors-NativeDropdown-theme___option___27pZ6W,
|
|
@@ -590,6 +591,7 @@ body {
|
|
|
590
591
|
.-dr-pogodin-react-utils___src-shared-components-Input-theme___context___X5WszA.-dr-pogodin-react-utils___src-shared-components-Input-theme___label___gfbdq-,
|
|
591
592
|
.-dr-pogodin-react-utils___src-shared-components-Input-theme___ad___8s7GCr.-dr-pogodin-react-utils___src-shared-components-Input-theme___hoc___TVlBYc.-dr-pogodin-react-utils___src-shared-components-Input-theme___label___gfbdq- {
|
|
592
593
|
margin: 0 0.6em 0 1.5em;
|
|
594
|
+
pointer-events: none;
|
|
593
595
|
}
|
|
594
596
|
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
|
|
595
597
|
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[4]!./src/shared/components/PageLayout/base-theme.scss ***!
|
|
@@ -136,7 +136,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-ext
|
|
|
136
136
|
\***********************************************/
|
|
137
137
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
138
138
|
|
|
139
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var
|
|
139
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _theme_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./theme.scss */ \"./src/shared/components/Input/theme.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input = ({\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const localRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"span\", {\n className: theme.container,\n onFocus: () => {\n var _ref$current, _localRef$current;\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();else (_localRef$current = localRef.current) === null || _localRef$current === void 0 || _localRef$current.focus();\n },\n children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n className: theme.label,\n children: label\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"input\", {\n className: theme.input,\n \"data-testid\": false ? 0 : testId,\n ref: ref !== null && ref !== void 0 ? ref : localRef\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n ,\n ...rest\n })]\n });\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(Input, 'Input', _theme_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/Input/index.tsx?\n}");
|
|
140
140
|
|
|
141
141
|
/***/ }),
|
|
142
142
|
|
|
@@ -226,7 +226,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _dr
|
|
|
226
226
|
\**************************************************/
|
|
227
227
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
228
228
|
|
|
229
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ \"./src/shared/components/TextArea/style.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\nconst TextArea = ({\n disabled,\n label,\n onBlur,\n onChange,\n onKeyDown,\n placeholder,\n testId,\n theme,\n value\n}) => {\n const hiddenAreaRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const [height, setHeight] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n const [localValue, setLocalValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value !== null && value !== void 0 ? value : '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // Resizes the text area when its content is modified.\n //\n // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n // useEffect() it becomes visible how the content is modified first,\n // and then input height is incremented, if necessary).\n // See: https://github.com/birdofpreyru/react-utils/issues/313\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n className: theme.container,\n children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n className: theme.label,\n children: label\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"textarea\", {\n className: `${theme.textarea} ${theme.hidden}`\n\n // This text area is hidden underneath the primary one below,\n // and it is used for text measurements, to implement auto-scaling\n // of the primary textarea's height.\n ,\n readOnly: true,\n ref: hiddenAreaRef\n\n // The \"-1\" value of \"tabIndex\" removes this hidden text area from\n // the tab-focus-chain.\n ,\n tabIndex: -1\n\n // NOTE: With empty string value (\"\") the scrolling height of this text\n // area is zero, thus collapsing <TextArea> height below the single line\n // input height. To avoid it we fallback to whitespace (\" \") character\n // here.\n ,\n value: localValue || ' '\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"textarea\", {\n className: theme.textarea,\n \"data-testid\": false ? 0 : testId,\n disabled: disabled,\n onBlur: onBlur\n\n // When value is \"undefined\" the text area is not-managed, and we should\n // manage it internally for the measurement / resizing functionality\n // to work.\n ,\n onChange: value === undefined ? e => {\n setLocalValue(e.target.value);\n } : onChange,\n onKeyDown: onKeyDown,\n placeholder: placeholder,\n style: {\n height\n },\n value: localValue\n })]\n });\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(TextArea, 'TextArea', _style_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/TextArea/index.tsx?\n}");
|
|
229
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dr.pogodin/react-themes */ \"@dr.pogodin/react-themes\");\n/* harmony import */ var _dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./style.scss */ \"./src/shared/components/TextArea/style.scss\");\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ \"./node_modules/react/jsx-runtime.js\");\n\n\n\n\nconst TextArea = ({\n disabled,\n label,\n onBlur,\n onChange,\n onKeyDown,\n placeholder,\n testId,\n theme,\n value\n}) => {\n const hiddenAreaRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const [height, setHeight] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();\n const textAreaRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);\n const [localValue, setLocalValue] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value !== null && value !== void 0 ? value : '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // Resizes the text area when its content is modified.\n //\n // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n // useEffect() it becomes visible how the content is modified first,\n // and then input height is incremented, if necessary).\n // See: https://github.com/birdofpreyru/react-utils/issues/313\n (0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(\"div\", {\n className: theme.container,\n onFocus: () => {\n var _textAreaRef$current;\n (_textAreaRef$current = textAreaRef.current) === null || _textAreaRef$current === void 0 || _textAreaRef$current.focus();\n },\n children: [label === undefined ? null : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"div\", {\n className: theme.label,\n children: label\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"textarea\", {\n className: `${theme.textarea} ${theme.hidden}`\n\n // This text area is hidden underneath the primary one below,\n // and it is used for text measurements, to implement auto-scaling\n // of the primary textarea's height.\n ,\n readOnly: true,\n ref: hiddenAreaRef\n\n // The \"-1\" value of \"tabIndex\" removes this hidden text area from\n // the tab-focus-chain.\n ,\n tabIndex: -1\n\n // NOTE: With empty string value (\"\") the scrolling height of this text\n // area is zero, thus collapsing <TextArea> height below the single line\n // input height. To avoid it we fallback to whitespace (\" \") character\n // here.\n ,\n value: localValue || ' '\n }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(\"textarea\", {\n className: theme.textarea,\n \"data-testid\": false ? 0 : testId,\n disabled: disabled,\n onBlur: onBlur\n\n // When value is \"undefined\" the text area is not-managed, and we should\n // manage it internally for the measurement / resizing functionality\n // to work.\n ,\n onChange: value === undefined ? e => {\n setLocalValue(e.target.value);\n } : onChange,\n onKeyDown: onKeyDown,\n placeholder: placeholder,\n ref: textAreaRef,\n style: {\n height\n },\n value: localValue\n })]\n });\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (_dr_pogodin_react_themes__WEBPACK_IMPORTED_MODULE_1___default()(TextArea, 'TextArea', _style_scss__WEBPACK_IMPORTED_MODULE_2__[\"default\"]));\n\n//# sourceURL=webpack://@dr.pogodin/react-utils/./src/shared/components/TextArea/index.tsx?\n}");
|
|
230
230
|
|
|
231
231
|
/***/ }),
|
|
232
232
|
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"X5WszA","ad":"_8s7GCr","hoc":"TVlBYc","container":"Cxx397","input":"M07d4s","label":"gfbdq-"};/**
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"X5WszA","ad":"_8s7GCr","hoc":"TVlBYc","container":"Cxx397","input":"M07d4s","label":"gfbdq-"};/**
|
|
2
2
|
* Themeable input field, based on the standard HTML `<input>` element.
|
|
3
3
|
* @param [props.label] Input label.
|
|
4
4
|
* @param [props.theme] _Ad hoc_ theme.
|
|
5
5
|
* @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
|
|
6
6
|
* @param [props...] Any other properties are passed to the underlying
|
|
7
7
|
* `<input>` element.
|
|
8
|
-
*/const Input=({label,ref,testId,theme,...rest})
|
|
8
|
+
*/const Input=({label,ref,testId,theme,...rest})=>{const localRef=(0,_react.useRef)(null);return/*#__PURE__*/(0,_jsxRuntime.jsxs)("span",{className:theme.container,onFocus:()=>{// TODO: It does not really work if a callback-style `ref` is passed in,
|
|
9
|
+
// we need a more complex logic to cover that case, but for now this serves
|
|
10
|
+
// the case we need it for.
|
|
11
|
+
if(typeof ref==="object")ref?.current?.focus();else localRef.current?.focus()},children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsx)("input",{className:theme.input,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,ref:ref??localRef// TODO: Avoid the spreading later.
|
|
9
12
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
10
|
-
,...rest})]});var _default=exports.default=(0,_reactThemes.default)(Input,"Input",defaultTheme);
|
|
13
|
+
,...rest})]})};var _default=exports.default=(0,_reactThemes.default)(Input,"Input",defaultTheme);
|
|
11
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","Input","label","ref","testId","theme","rest","localRef","useRef","jsxs","className","container","onFocus","current","focus","children","undefined","jsx","input","process","env","NODE_ENV","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import { type FunctionComponent, type Ref, useRef } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'container' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n label?: React.ReactNode;\n ref?: Ref<HTMLInputElement>;\n testId?: string;\n theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n label,\n ref,\n testId,\n theme,\n ...rest\n}) => {\n const localRef = useRef<HTMLInputElement>(null);\n return (\n <span\n className={theme.container}\n onFocus={() => {\n // TODO: It does not really work if a callback-style `ref` is passed in,\n // we need a more complex logic to cover that case, but for now this serves\n // the case we need it for.\n if (typeof ref === 'object') ref?.current?.focus();\n else localRef.current?.focus();\n }}\n >\n {label === undefined ? null : <div className={theme.label}>{label}</div>}\n <input\n className={theme.input}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n ref={ref ?? localRef}\n\n // TODO: Avoid the spreading later.\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...rest}\n />\n </span>\n );\n};\n\nexport default themed(Input, 'Input', defaultTheme);\n"],"mappings":"gLAAA,IAAAA,MAAA,CAAAC,OAAA,UAEA,IAAAC,YAAA,CAAAC,sBAAA,CAAAF,OAAA,8BAA8D,IAAAG,WAAA,CAAAH,OAAA,4BAAAI,YAAA,2GAa9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,KAAM,CAAAC,KAAgC,CAAGA,CAAC,CACxCC,KAAK,CACLC,GAAG,CACHC,MAAM,CACNC,KAAK,CACL,GAAGC,IACL,CAAC,GAAK,CACJ,KAAM,CAAAC,QAAQ,CAAG,GAAAC,aAAM,EAAmB,IAAI,CAAC,CAC/C,mBACE,GAAAT,WAAA,CAAAU,IAAA,UACEC,SAAS,CAAEL,KAAK,CAACM,SAAU,CAC3BC,OAAO,CAAEA,CAAA,GAAM,CACb;AACA;AACA;AACA,GAAI,MAAO,CAAAT,GAAG,GAAK,QAAQ,CAAEA,GAAG,EAAEU,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,IAC9C,CAAAP,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAC/B,CAAE,CAAAC,QAAA,EAEDb,KAAK,GAAKc,SAAS,CAAG,IAAI,cAAG,GAAAjB,WAAA,CAAAkB,GAAA,SAAKP,SAAS,CAAEL,KAAK,CAACH,KAAM,CAAAa,QAAA,CAAEb,KAAK,CAAM,CAAC,cACxE,GAAAH,WAAA,CAAAkB,GAAA,WACEP,SAAS,CAAEL,KAAK,CAACa,KAAM,CACvB,cAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,GAAK,YAAY,CAAGL,SAAS,CAAGZ,MAAO,CACxED,GAAG,CAAEA,GAAG,EAAII,QAEZ;AACA;AAAA,IACID,IAAI,CACT,CAAC,EACE,CAEV,CAAC,CAAC,IAAAgB,QAAA,CAAAC,OAAA,CAAAC,OAAA,CAEa,GAAAC,oBAAM,EAACxB,KAAK,CAAE,OAAO,CAAED,YAAY,CAAC","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"KVPc7g","ad":"z2GQ0Z","hoc":"_8R1Qdj","container":"dzMVIB","label":"Vw9EKL","textarea":"zd-OFg","hidden":"GiHBXI"};const TextArea=({disabled,label,onBlur,onChange,onKeyDown,placeholder,testId,theme,value})=>{const hiddenAreaRef=(0,_react.useRef)(null);const[height,setHeight]=(0,_react.useState)();const[localValue,setLocalValue]=(0,_react.useState)(value??"");if(value!==undefined&&localValue!==value)setLocalValue(value);// This resizes text area's height when its width is changed for any reason.
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=require("react");var _reactThemes=_interopRequireDefault(require("@dr.pogodin/react-themes"));var _jsxRuntime=require("react/jsx-runtime");const defaultTheme={"context":"KVPc7g","ad":"z2GQ0Z","hoc":"_8R1Qdj","container":"dzMVIB","label":"Vw9EKL","textarea":"zd-OFg","hidden":"GiHBXI"};const TextArea=({disabled,label,onBlur,onChange,onKeyDown,placeholder,testId,theme,value})=>{const hiddenAreaRef=(0,_react.useRef)(null);const[height,setHeight]=(0,_react.useState)();const textAreaRef=(0,_react.useRef)(null);const[localValue,setLocalValue]=(0,_react.useState)(value??"");if(value!==undefined&&localValue!==value)setLocalValue(value);// This resizes text area's height when its width is changed for any reason.
|
|
2
2
|
(0,_react.useEffect)(()=>{const el=hiddenAreaRef.current;if(!el)return undefined;const cb=()=>{setHeight(el.scrollHeight)};const observer=new ResizeObserver(cb);observer.observe(el);return()=>{observer.disconnect()}},[]);// Resizes the text area when its content is modified.
|
|
3
3
|
//
|
|
4
4
|
// NOTE: useLayoutEffect() instead of useEffect() makes difference here,
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
// useEffect() it becomes visible how the content is modified first,
|
|
7
7
|
// and then input height is incremented, if necessary).
|
|
8
8
|
// See: https://github.com/birdofpreyru/react-utils/issues/313
|
|
9
|
-
(0,_react.useLayoutEffect)(()=>{const el=hiddenAreaRef.current;if(el)setHeight(el.scrollHeight)},[localValue]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsx)("textarea",{className:`${theme.textarea} ${theme.hidden}`// This text area is hidden underneath the primary one below,
|
|
9
|
+
(0,_react.useLayoutEffect)(()=>{const el=hiddenAreaRef.current;if(el)setHeight(el.scrollHeight)},[localValue]);return/*#__PURE__*/(0,_jsxRuntime.jsxs)("div",{className:theme.container,onFocus:()=>{textAreaRef.current?.focus()},children:[label===undefined?null:/*#__PURE__*/(0,_jsxRuntime.jsx)("div",{className:theme.label,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsx)("textarea",{className:`${theme.textarea} ${theme.hidden}`// This text area is hidden underneath the primary one below,
|
|
10
10
|
// and it is used for text measurements, to implement auto-scaling
|
|
11
11
|
// of the primary textarea's height.
|
|
12
12
|
,readOnly:true,ref:hiddenAreaRef// The "-1" value of "tabIndex" removes this hidden text area from
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
,value:localValue||" "}),/*#__PURE__*/(0,_jsxRuntime.jsx)("textarea",{className:theme.textarea,"data-testid":process.env.NODE_ENV==="production"?undefined:testId,disabled:disabled,onBlur:onBlur// When value is "undefined" the text area is not-managed, and we should
|
|
19
19
|
// manage it internally for the measurement / resizing functionality
|
|
20
20
|
// to work.
|
|
21
|
-
,onChange:value===undefined?e=>{setLocalValue(e.target.value)}:onChange,onKeyDown:onKeyDown,placeholder:placeholder,style:{height},value:localValue})]})};var _default=exports.default=(0,_reactThemes.default)(TextArea,"TextArea",defaultTheme);
|
|
21
|
+
,onChange:value===undefined?e=>{setLocalValue(e.target.value)}:onChange,onKeyDown:onKeyDown,placeholder:placeholder,ref:textAreaRef,style:{height},value:localValue})]})};var _default=exports.default=(0,_reactThemes.default)(TextArea,"TextArea",defaultTheme);
|
|
22
22
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","TextArea","disabled","label","onBlur","onChange","onKeyDown","placeholder","testId","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","useLayoutEffect","jsxs","className","container","children","jsx","textarea","hidden","readOnly","ref","tabIndex","process","env","NODE_ENV","e","target","style","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n type FocusEventHandler,\n type FunctionComponent,\n type KeyboardEventHandler,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';\n\ntype Props = {\n disabled?: boolean;\n label?: string;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n placeholder?: string;\n testId?: string;\n theme: Theme<ThemeKeyT>;\n value?: string;\n};\n\nconst TextArea: FunctionComponent<Props> = ({\n disabled,\n label,\n onBlur,\n onChange,\n onKeyDown,\n placeholder,\n testId,\n theme,\n value,\n}) => {\n const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n const [height, setHeight] = useState<number | undefined>();\n\n const [localValue, setLocalValue] = useState(value ?? '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n useEffect(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // Resizes the text area when its content is modified.\n //\n // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n // useEffect() it becomes visible how the content is modified first,\n // and then input height is incremented, if necessary).\n // See: https://github.com/birdofpreyru/react-utils/issues/313\n useLayoutEffect(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n\n return (\n <div
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","require","_reactThemes","_interopRequireDefault","_jsxRuntime","defaultTheme","TextArea","disabled","label","onBlur","onChange","onKeyDown","placeholder","testId","theme","value","hiddenAreaRef","useRef","height","setHeight","useState","textAreaRef","localValue","setLocalValue","undefined","useEffect","el","current","cb","scrollHeight","observer","ResizeObserver","observe","disconnect","useLayoutEffect","jsxs","className","container","onFocus","focus","children","jsx","textarea","hidden","readOnly","ref","tabIndex","process","env","NODE_ENV","e","target","style","_default","exports","default","themed"],"sources":["../../../../../src/shared/components/TextArea/index.tsx"],"sourcesContent":["import {\n type ChangeEventHandler,\n type FocusEventHandler,\n type FunctionComponent,\n type KeyboardEventHandler,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './style.scss';\n\ntype ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';\n\ntype Props = {\n disabled?: boolean;\n label?: string;\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n placeholder?: string;\n testId?: string;\n theme: Theme<ThemeKeyT>;\n value?: string;\n};\n\nconst TextArea: FunctionComponent<Props> = ({\n disabled,\n label,\n onBlur,\n onChange,\n onKeyDown,\n placeholder,\n testId,\n theme,\n value,\n}) => {\n const hiddenAreaRef = useRef<HTMLTextAreaElement>(null);\n const [height, setHeight] = useState<number | undefined>();\n\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const [localValue, setLocalValue] = useState(value ?? '');\n if (value !== undefined && localValue !== value) setLocalValue(value);\n\n // This resizes text area's height when its width is changed for any reason.\n useEffect(() => {\n const el = hiddenAreaRef.current;\n if (!el) return undefined;\n\n const cb = () => {\n setHeight(el.scrollHeight);\n };\n const observer = new ResizeObserver(cb);\n observer.observe(el);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n // Resizes the text area when its content is modified.\n //\n // NOTE: useLayoutEffect() instead of useEffect() makes difference here,\n // as it helps to avoid visible \"content/height\" jumps (i.e. with just\n // useEffect() it becomes visible how the content is modified first,\n // and then input height is incremented, if necessary).\n // See: https://github.com/birdofpreyru/react-utils/issues/313\n useLayoutEffect(() => {\n const el = hiddenAreaRef.current;\n if (el) setHeight(el.scrollHeight);\n }, [localValue]);\n\n return (\n <div\n className={theme.container}\n onFocus={() => {\n textAreaRef.current?.focus();\n }}\n >\n {label === undefined ? null : <div className={theme.label}>{label}</div>}\n <textarea\n className={`${theme.textarea} ${theme.hidden}`}\n\n // This text area is hidden underneath the primary one below,\n // and it is used for text measurements, to implement auto-scaling\n // of the primary textarea's height.\n readOnly\n ref={hiddenAreaRef}\n\n // The \"-1\" value of \"tabIndex\" removes this hidden text area from\n // the tab-focus-chain.\n tabIndex={-1}\n\n // NOTE: With empty string value (\"\") the scrolling height of this text\n // area is zero, thus collapsing <TextArea> height below the single line\n // input height. To avoid it we fallback to whitespace (\" \") character\n // here.\n value={localValue || ' '}\n />\n <textarea\n className={theme.textarea}\n data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n disabled={disabled}\n onBlur={onBlur}\n\n // When value is \"undefined\" the text area is not-managed, and we should\n // manage it internally for the measurement / resizing functionality\n // to work.\n onChange={\n value === undefined\n ? (e) => {\n setLocalValue(e.target.value);\n } : onChange\n }\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={textAreaRef}\n style={{ height }}\n value={localValue}\n />\n </div>\n );\n};\n\nexport default themed(TextArea, 'TextArea', defaultTheme);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{text-rendering:auto}*{box-sizing:border-box}.Ah-Nsc.Wki41G.ye2BZo,.Szmbbz.ye2BZo,.ye2BZo{background:#eee;height:100%;left:0;opacity:.8;position:fixed;top:0;width:100%;z-index:998}.Ah-Nsc.Wki41G.ye2BZo:focus,.Szmbbz.ye2BZo:focus,.ye2BZo:focus{outline:none}.Ah-Nsc.Wki41G.gyZ4rc,.Szmbbz.gyZ4rc,.gyZ4rc{background:#fff;border-radius:.3em;box-shadow:0 0 14px 1px rgba(38,38,40,.15);left:50%;max-height:95vh;max-width:1024px;overflow:hidden;padding:.6em 1.2em;position:fixed;top:50%;transform:translate(-50%,-50%);width:480px;z-index:999}@media(max-width:1280px){.Ah-Nsc.Wki41G.gyZ4rc,.Szmbbz.gyZ4rc,.gyZ4rc{max-width:95vw}}._5fRFtF{overflow:hidden}.jKsMKG{inset:0;opacity:.2;position:fixed;z-index:1000}.R58zIg.O-Tp1i.oQKv0Y,._9Tod5r.oQKv0Y,.oQKv0Y{align-items:center;display:inline-flex;margin:.1em;position:relative}.R58zIg.O-Tp1i.YUPUNs,.YUPUNs,._9Tod5r.YUPUNs{margin:0 .6em 0 1.2em}.R58zIg.O-Tp1i.pNEyAA,._9Tod5r.pNEyAA,.pNEyAA{border:1px solid gray;border-radius:.3em;cursor:pointer;min-width:200px;outline:none;padding:.3em 3em .3em .6em;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.R58zIg.O-Tp1i.pNEyAA:focus,._9Tod5r.pNEyAA:focus,.pNEyAA:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.LD2Kzy,.R58zIg.O-Tp1i.LD2Kzy,._9Tod5r.LD2Kzy{cursor:pointer;outline:none;padding:0 .6em}.LD2Kzy:focus,.LD2Kzy:hover,.R58zIg.O-Tp1i.LD2Kzy:focus,.R58zIg.O-Tp1i.LD2Kzy:hover,._9Tod5r.LD2Kzy:focus,._9Tod5r.LD2Kzy:hover{background:#4169e1;color:#fff}.LP5azC,.R58zIg.O-Tp1i.LP5azC,._9Tod5r.LP5azC{background:#fff;border:1px solid gray;border-radius:0 0 .3em .3em;border-top:none;box-shadow:0 6px 12px 3px #d3d3d3;position:fixed;z-index:1001}.-wscve,.R58zIg.O-Tp1i.-wscve,._9Tod5r.-wscve{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);border-left:1px solid gray;border-radius:0 .3em .3em 0;bottom:0;padding:.3em .6em;position:absolute;right:0;top:0}.-wscve:after,.R58zIg.O-Tp1i.-wscve:after,._9Tod5r.-wscve:after{content:"▼"}.R58zIg.O-Tp1i.k2UDsV .-wscve,._9Tod5r.k2UDsV .-wscve,.k2UDsV .-wscve{border-radius:0 .3em 0 0}.R58zIg.O-Tp1i.k2UDsV .pNEyAA,._9Tod5r.k2UDsV .pNEyAA,.k2UDsV .pNEyAA{border-color:blue;border-radius:.3em .3em 0 0}.HWRvu4.k2UDsV .-wscve,.R58zIg.O-Tp1i.HWRvu4.k2UDsV .-wscve,._9Tod5r.HWRvu4.k2UDsV .-wscve{border-radius:0 0 .3em}.HWRvu4.k2UDsV .pNEyAA,.R58zIg.O-Tp1i.HWRvu4.k2UDsV .pNEyAA,._9Tod5r.HWRvu4.k2UDsV .pNEyAA{border-radius:0 0 .3em .3em}.HWRvu4.LP5azC,.R58zIg.O-Tp1i.HWRvu4.LP5azC,._9Tod5r.HWRvu4.LP5azC{border-bottom:none;border-radius:.3em .3em 0 0;border-top:1px solid gray;box-shadow:none}.ADu59e.FTP2bb.kI9A9U,.kI9A9U,.xHyZo4.kI9A9U{display:flex;flex:1;min-width:5.5em;overflow:hidden;position:relative}.ADu59e.FTP2bb.DubGkT,.DubGkT,.xHyZo4.DubGkT{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);border:1px solid gray;border-radius:0 .3em .3em 0;bottom:0;padding:.3em .6em;pointer-events:none;position:absolute;right:0;top:0}.ADu59e.FTP2bb.DubGkT:after,.DubGkT:after,.xHyZo4.DubGkT:after{content:"▼"}.ADu59e.FTP2bb.WtSZPd,.WtSZPd,.xHyZo4.WtSZPd{align-items:center;display:inline-flex;margin:.1em;position:relative}.ayMn7O+.ADu59e.FTP2bb.DubGkT,.ayMn7O+.DubGkT,.ayMn7O+.xHyZo4.DubGkT,:active+.ADu59e.FTP2bb.DubGkT,:active+.DubGkT,:active+.xHyZo4.DubGkT{background-image:linear-gradient(180deg,#d3d3d3,#fff 50%,#fff);border-bottom-right-radius:0}:focus+.ADu59e.FTP2bb.DubGkT,:focus+.DubGkT,:focus+.xHyZo4.DubGkT{border-color:blue blue blue gray}.ADu59e.FTP2bb.K7JYKw,.K7JYKw,.xHyZo4.K7JYKw{margin:0 .6em 0 1.5em}.ADu59e.FTP2bb._27pZ6W,._27pZ6W,.xHyZo4._27pZ6W{color:#000}.ADu59e.FTP2bb.clAKFJ,.clAKFJ,.xHyZo4.clAKFJ{display:none}.ADu59e.FTP2bb.N0Fc14,.N0Fc14,.xHyZo4.N0Fc14{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:1px solid gray;border-radius:.3em;color:inherit;cursor:pointer;display:inline-block;flex:1;font:inherit;max-width:100%;outline:none;padding:.3em 3.3em calc(.3em + 1px) 1.2em}.ADu59e.FTP2bb.N0Fc14:active,.N0Fc14:active,.xHyZo4.N0Fc14:active{background:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.ADu59e.FTP2bb.N0Fc14:focus,.N0Fc14:focus,.xHyZo4.N0Fc14:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.ADu59e.FTP2bb.N0Fc14.wL4umU,.N0Fc14.wL4umU,.xHyZo4.N0Fc14.wL4umU{color:gray}.AWNvRj,.HNliRC._2Ue-db.AWNvRj,.VMHfnP.AWNvRj{align-items:center;display:flex;gap:.6em}.HNliRC._2Ue-db.fUfIAd,.VMHfnP.fUfIAd,.fUfIAd{border:1px solid transparent;border-radius:.3em;cursor:pointer;outline:none;padding:0 .9em}.HNliRC._2Ue-db.fUfIAd:focus,.VMHfnP.fUfIAd:focus,.fUfIAd:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.HNliRC._2Ue-db.Wco-qk,.VMHfnP.Wco-qk,.Wco-qk{background:#fff;border:1px solid gray;cursor:default}.CZYtcC,.HNliRC._2Ue-db.CZYtcC,.VMHfnP.CZYtcC{align-items:center;background:#f5f5f5;border:1px solid gray;border-radius:.3em;display:flex;gap:.3em;padding:.3em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zH52sA[disabled]{cursor:not-allowed}.E1FNQT,.KM0v4f.E1FNQT,._3jm1-Q._0plpDL.E1FNQT{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);border:1px solid gray;border-radius:.3em;color:inherit;cursor:pointer;display:inline-block;font:inherit;margin:.1em;padding:.3em 1.2em;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.E1FNQT:visited,.KM0v4f.E1FNQT:visited,._3jm1-Q._0plpDL.E1FNQT:visited{color:inherit}.E1FNQT.MAe9O6,.E1FNQT:active,.KM0v4f.E1FNQT.MAe9O6,.KM0v4f.E1FNQT:active,._3jm1-Q._0plpDL.E1FNQT.MAe9O6,._3jm1-Q._0plpDL.E1FNQT:active{background-image:linear-gradient(180deg,#d3d3d3,#fff 50%,#fff);border-color:gray;box-shadow:inset 0 1px 3px 0 #d3d3d3}.E1FNQT:focus,.KM0v4f.E1FNQT:focus,._3jm1-Q._0plpDL.E1FNQT:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6;outline:none}.Br9IWV,.KM0v4f.Br9IWV,._3jm1-Q._0plpDL.Br9IWV{cursor:not-allowed;opacity:.33}.Br9IWV.MAe9O6,.Br9IWV:active,.KM0v4f.Br9IWV.MAe9O6,.KM0v4f.Br9IWV:active,._3jm1-Q._0plpDL.Br9IWV.MAe9O6,._3jm1-Q._0plpDL.Br9IWV:active{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);box-shadow:none}.A-f8qJ,.dNQcC6.A-f8qJ,.earXxa.qAPfQ6.A-f8qJ{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:1px solid gray;border-radius:.3em;cursor:pointer;font:inherit;height:1.5em;margin:0;outline:none;width:1.5em}.A-f8qJ:checked:after,.dNQcC6.A-f8qJ:checked:after,.earXxa.qAPfQ6.A-f8qJ:checked:after{background:#000;border-radius:.3em;content:"";display:block;height:1em;margin:.2em;width:1em}.A-f8qJ:focus,.dNQcC6.A-f8qJ:focus,.earXxa.qAPfQ6.A-f8qJ:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.A-f8qJ.N9bCb8:after,.dNQcC6.A-f8qJ.N9bCb8:after,.earXxa.qAPfQ6.A-f8qJ.N9bCb8:after{background:#000;border-radius:.2em;content:"";display:block;height:.2em;margin:.6em .2em;width:1em}.Kr0g3M,.dNQcC6.Kr0g3M,.earXxa.qAPfQ6.Kr0g3M{align-items:center;display:inline-flex;margin:.1em}._3dML-O,.dNQcC6._3dML-O,.earXxa.qAPfQ6._3dML-O{margin:0 .6em 0 1.5em}.EzQra1,.dNQcC6.EzQra1,.earXxa.qAPfQ6.EzQra1{opacity:.33}.EzQra1 .A-f8qJ,.dNQcC6.EzQra1 .A-f8qJ,.earXxa.qAPfQ6.EzQra1 .A-f8qJ{cursor:not-allowed!important}.Cxx397,.X5WszA.Cxx397,._8s7GCr.TVlBYc.Cxx397{align-items:center;display:inline-flex;margin:.1em}.M07d4s,.X5WszA.M07d4s,._8s7GCr.TVlBYc.M07d4s{border:1px solid gray;border-radius:.3em;cursor:text;font:inherit;outline:none;padding:.3em .3em calc(.3em + 1px)}.M07d4s:focus,.X5WszA.M07d4s:focus,._8s7GCr.TVlBYc.M07d4s:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.X5WszA.gfbdq-,._8s7GCr.TVlBYc.gfbdq-,.gfbdq-{margin:0 .6em 0 1.5em}.T3cuHB,.m3-mdC.J15Z4H.T3cuHB,.m4mL-M.T3cuHB{display:flex;min-height:100vh;overflow:hidden;width:100%}.m3-mdC.J15Z4H.pPlQO2,.m4mL-M.pPlQO2,.pPlQO2{overflow:hidden;padding:1.2em;width:1024px}.lqNh4h,.m3-mdC.J15Z4H.lqNh4h,.m4mL-M.lqNh4h{flex:1;overflow:hidden}@keyframes TJe-6j{0%{top:-.3em}to{top:.3em}}.XIxe9o.YOyORH._7zdld4,._7zdld4,.uIObt7._7zdld4{display:inline-block}.XIxe9o.YOyORH.dBrB4g,.dBrB4g,.uIObt7.dBrB4g{animation:TJe-6j .4s ease-in infinite alternate;background:#000;border-radius:.3em;display:inline-block;height:.6em;margin:0 .1em;position:relative;width:.6em}.XIxe9o.YOyORH.dBrB4g:first-child,.dBrB4g:first-child,.uIObt7.dBrB4g:first-child{animation-delay:-.2s}.XIxe9o.YOyORH.dBrB4g:last-child,.dBrB4g:last-child,.uIObt7.dBrB4g:last-child{animation-delay:.2s}@keyframes L4ubm-{0%{opacity:0}to{opacity:1}}.GdZucr.M9gywF,.M9gywF,._4xT7zE.zd-vnH.M9gywF{border:.6em solid gray;height:0;pointer-events:none;position:absolute;width:0}.GdZucr.f9gY8K,._4xT7zE.zd-vnH.f9gY8K,.f9gY8K{animation:L4ubm- .6s;background:gray;border-radius:.3em;color:#fff;display:inline-block;left:0;padding:0 .3em;position:absolute;top:0}.GdZucr._4qDBRM,._4qDBRM,._4xT7zE.zd-vnH._4qDBRM{display:inline-block}* .sXHM81,.r3ABzd.YKcPnR .sXHM81,.veKyYi .sXHM81{aspect-ratio:16/9;background:#f5f5f5;position:relative}* .SlV2zw,.r3ABzd.YKcPnR .SlV2zw,.veKyYi .SlV2zw{height:100%;position:absolute;width:100%}* .jTxmOX,._5a9XX1._7sH52O .jTxmOX,.dzIcLh .jTxmOX{position:absolute;text-align:center;top:40%;transform:translateY(50%);width:100%}.KVPc7g.dzMVIB,.dzMVIB,.z2GQ0Z._8R1Qdj.dzMVIB{margin:.1em;position:relative}.KVPc7g.Vw9EKL,.Vw9EKL,.z2GQ0Z._8R1Qdj.Vw9EKL{margin:0 .3em}.KVPc7g.zd-OFg,.z2GQ0Z._8R1Qdj.zd-OFg,.zd-OFg{background:#fff;border:1px solid gray;border-radius:.3em;box-sizing:border-box;font:inherit;height:0;outline:none;overflow:hidden;padding:.3em .3em calc(.3em + 1px);resize:none;width:100%}.KVPc7g.zd-OFg:focus,.z2GQ0Z._8R1Qdj.zd-OFg:focus,.zd-OFg:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.KVPc7g.zd-OFg::-moz-placeholder,.z2GQ0Z._8R1Qdj.zd-OFg::-moz-placeholder,.zd-OFg::-moz-placeholder{color:gray}.KVPc7g.zd-OFg::placeholder,.z2GQ0Z._8R1Qdj.zd-OFg::placeholder,.zd-OFg::placeholder{color:gray}.KVPc7g.zd-OFg:disabled,.z2GQ0Z._8R1Qdj.zd-OFg:disabled,.zd-OFg:disabled{border-color:hsla(0,0%,50%,.34);color:hsla(0,0%,50%,.34);cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.GiHBXI,.KVPc7g.GiHBXI,.z2GQ0Z._8R1Qdj.GiHBXI{opacity:0;position:absolute}
|
|
1
|
+
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{text-rendering:auto}*{box-sizing:border-box}.Ah-Nsc.Wki41G.ye2BZo,.Szmbbz.ye2BZo,.ye2BZo{background:#eee;height:100%;left:0;opacity:.8;position:fixed;top:0;width:100%;z-index:998}.Ah-Nsc.Wki41G.ye2BZo:focus,.Szmbbz.ye2BZo:focus,.ye2BZo:focus{outline:none}.Ah-Nsc.Wki41G.gyZ4rc,.Szmbbz.gyZ4rc,.gyZ4rc{background:#fff;border-radius:.3em;box-shadow:0 0 14px 1px rgba(38,38,40,.15);left:50%;max-height:95vh;max-width:1024px;overflow:hidden;padding:.6em 1.2em;position:fixed;top:50%;transform:translate(-50%,-50%);width:480px;z-index:999}@media(max-width:1280px){.Ah-Nsc.Wki41G.gyZ4rc,.Szmbbz.gyZ4rc,.gyZ4rc{max-width:95vw}}._5fRFtF{overflow:hidden}.jKsMKG{inset:0;opacity:.2;position:fixed;z-index:1000}.R58zIg.O-Tp1i.oQKv0Y,._9Tod5r.oQKv0Y,.oQKv0Y{align-items:center;display:inline-flex;margin:.1em;position:relative}.R58zIg.O-Tp1i.YUPUNs,.YUPUNs,._9Tod5r.YUPUNs{margin:0 .6em 0 1.2em}.R58zIg.O-Tp1i.pNEyAA,._9Tod5r.pNEyAA,.pNEyAA{border:1px solid gray;border-radius:.3em;cursor:pointer;min-width:200px;outline:none;padding:.3em 3em .3em .6em;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.R58zIg.O-Tp1i.pNEyAA:focus,._9Tod5r.pNEyAA:focus,.pNEyAA:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.LD2Kzy,.R58zIg.O-Tp1i.LD2Kzy,._9Tod5r.LD2Kzy{cursor:pointer;outline:none;padding:0 .6em}.LD2Kzy:focus,.LD2Kzy:hover,.R58zIg.O-Tp1i.LD2Kzy:focus,.R58zIg.O-Tp1i.LD2Kzy:hover,._9Tod5r.LD2Kzy:focus,._9Tod5r.LD2Kzy:hover{background:#4169e1;color:#fff}.LP5azC,.R58zIg.O-Tp1i.LP5azC,._9Tod5r.LP5azC{background:#fff;border:1px solid gray;border-radius:0 0 .3em .3em;border-top:none;box-shadow:0 6px 12px 3px #d3d3d3;position:fixed;z-index:1001}.-wscve,.R58zIg.O-Tp1i.-wscve,._9Tod5r.-wscve{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);border-left:1px solid gray;border-radius:0 .3em .3em 0;bottom:0;padding:.3em .6em;position:absolute;right:0;top:0}.-wscve:after,.R58zIg.O-Tp1i.-wscve:after,._9Tod5r.-wscve:after{content:"▼"}.R58zIg.O-Tp1i.k2UDsV .-wscve,._9Tod5r.k2UDsV .-wscve,.k2UDsV .-wscve{border-radius:0 .3em 0 0}.R58zIg.O-Tp1i.k2UDsV .pNEyAA,._9Tod5r.k2UDsV .pNEyAA,.k2UDsV .pNEyAA{border-color:blue;border-radius:.3em .3em 0 0}.HWRvu4.k2UDsV .-wscve,.R58zIg.O-Tp1i.HWRvu4.k2UDsV .-wscve,._9Tod5r.HWRvu4.k2UDsV .-wscve{border-radius:0 0 .3em}.HWRvu4.k2UDsV .pNEyAA,.R58zIg.O-Tp1i.HWRvu4.k2UDsV .pNEyAA,._9Tod5r.HWRvu4.k2UDsV .pNEyAA{border-radius:0 0 .3em .3em}.HWRvu4.LP5azC,.R58zIg.O-Tp1i.HWRvu4.LP5azC,._9Tod5r.HWRvu4.LP5azC{border-bottom:none;border-radius:.3em .3em 0 0;border-top:1px solid gray;box-shadow:none}.ADu59e.FTP2bb.kI9A9U,.kI9A9U,.xHyZo4.kI9A9U{display:flex;flex:1;min-width:5.5em;overflow:hidden;position:relative}.ADu59e.FTP2bb.DubGkT,.DubGkT,.xHyZo4.DubGkT{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);border:1px solid gray;border-radius:0 .3em .3em 0;bottom:0;padding:.3em .6em;pointer-events:none;position:absolute;right:0;top:0}.ADu59e.FTP2bb.DubGkT:after,.DubGkT:after,.xHyZo4.DubGkT:after{content:"▼"}.ADu59e.FTP2bb.WtSZPd,.WtSZPd,.xHyZo4.WtSZPd{align-items:center;display:inline-flex;margin:.1em;position:relative}.ayMn7O+.ADu59e.FTP2bb.DubGkT,.ayMn7O+.DubGkT,.ayMn7O+.xHyZo4.DubGkT,:active+.ADu59e.FTP2bb.DubGkT,:active+.DubGkT,:active+.xHyZo4.DubGkT{background-image:linear-gradient(180deg,#d3d3d3,#fff 50%,#fff);border-bottom-right-radius:0}:focus+.ADu59e.FTP2bb.DubGkT,:focus+.DubGkT,:focus+.xHyZo4.DubGkT{border-color:blue blue blue gray}.ADu59e.FTP2bb.K7JYKw,.K7JYKw,.xHyZo4.K7JYKw{margin:0 .6em 0 1.5em;pointer-events:none}.ADu59e.FTP2bb._27pZ6W,._27pZ6W,.xHyZo4._27pZ6W{color:#000}.ADu59e.FTP2bb.clAKFJ,.clAKFJ,.xHyZo4.clAKFJ{display:none}.ADu59e.FTP2bb.N0Fc14,.N0Fc14,.xHyZo4.N0Fc14{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:1px solid gray;border-radius:.3em;color:inherit;cursor:pointer;display:inline-block;flex:1;font:inherit;max-width:100%;outline:none;padding:.3em 3.3em calc(.3em + 1px) 1.2em}.ADu59e.FTP2bb.N0Fc14:active,.N0Fc14:active,.xHyZo4.N0Fc14:active{background:#fff;border-bottom-left-radius:0;border-bottom-right-radius:0}.ADu59e.FTP2bb.N0Fc14:focus,.N0Fc14:focus,.xHyZo4.N0Fc14:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.ADu59e.FTP2bb.N0Fc14.wL4umU,.N0Fc14.wL4umU,.xHyZo4.N0Fc14.wL4umU{color:gray}.AWNvRj,.HNliRC._2Ue-db.AWNvRj,.VMHfnP.AWNvRj{align-items:center;display:flex;gap:.6em}.HNliRC._2Ue-db.fUfIAd,.VMHfnP.fUfIAd,.fUfIAd{border:1px solid transparent;border-radius:.3em;cursor:pointer;outline:none;padding:0 .9em}.HNliRC._2Ue-db.fUfIAd:focus,.VMHfnP.fUfIAd:focus,.fUfIAd:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.HNliRC._2Ue-db.Wco-qk,.VMHfnP.Wco-qk,.Wco-qk{background:#fff;border:1px solid gray;cursor:default}.CZYtcC,.HNliRC._2Ue-db.CZYtcC,.VMHfnP.CZYtcC{align-items:center;background:#f5f5f5;border:1px solid gray;border-radius:.3em;display:flex;gap:.3em;padding:.3em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.zH52sA[disabled]{cursor:not-allowed}.E1FNQT,.KM0v4f.E1FNQT,._3jm1-Q._0plpDL.E1FNQT{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);border:1px solid gray;border-radius:.3em;color:inherit;cursor:pointer;display:inline-block;font:inherit;margin:.1em;padding:.3em 1.2em;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.E1FNQT:visited,.KM0v4f.E1FNQT:visited,._3jm1-Q._0plpDL.E1FNQT:visited{color:inherit}.E1FNQT.MAe9O6,.E1FNQT:active,.KM0v4f.E1FNQT.MAe9O6,.KM0v4f.E1FNQT:active,._3jm1-Q._0plpDL.E1FNQT.MAe9O6,._3jm1-Q._0plpDL.E1FNQT:active{background-image:linear-gradient(180deg,#d3d3d3,#fff 50%,#fff);border-color:gray;box-shadow:inset 0 1px 3px 0 #d3d3d3}.E1FNQT:focus,.KM0v4f.E1FNQT:focus,._3jm1-Q._0plpDL.E1FNQT:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6;outline:none}.Br9IWV,.KM0v4f.Br9IWV,._3jm1-Q._0plpDL.Br9IWV{cursor:not-allowed;opacity:.33}.Br9IWV.MAe9O6,.Br9IWV:active,.KM0v4f.Br9IWV.MAe9O6,.KM0v4f.Br9IWV:active,._3jm1-Q._0plpDL.Br9IWV.MAe9O6,._3jm1-Q._0plpDL.Br9IWV:active{background-image:linear-gradient(0deg,#d3d3d3,#fff 50%,#fff);box-shadow:none}.A-f8qJ,.dNQcC6.A-f8qJ,.earXxa.qAPfQ6.A-f8qJ{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:1px solid gray;border-radius:.3em;cursor:pointer;font:inherit;height:1.5em;margin:0;outline:none;width:1.5em}.A-f8qJ:checked:after,.dNQcC6.A-f8qJ:checked:after,.earXxa.qAPfQ6.A-f8qJ:checked:after{background:#000;border-radius:.3em;content:"";display:block;height:1em;margin:.2em;width:1em}.A-f8qJ:focus,.dNQcC6.A-f8qJ:focus,.earXxa.qAPfQ6.A-f8qJ:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.A-f8qJ.N9bCb8:after,.dNQcC6.A-f8qJ.N9bCb8:after,.earXxa.qAPfQ6.A-f8qJ.N9bCb8:after{background:#000;border-radius:.2em;content:"";display:block;height:.2em;margin:.6em .2em;width:1em}.Kr0g3M,.dNQcC6.Kr0g3M,.earXxa.qAPfQ6.Kr0g3M{align-items:center;display:inline-flex;margin:.1em}._3dML-O,.dNQcC6._3dML-O,.earXxa.qAPfQ6._3dML-O{margin:0 .6em 0 1.5em}.EzQra1,.dNQcC6.EzQra1,.earXxa.qAPfQ6.EzQra1{opacity:.33}.EzQra1 .A-f8qJ,.dNQcC6.EzQra1 .A-f8qJ,.earXxa.qAPfQ6.EzQra1 .A-f8qJ{cursor:not-allowed!important}.Cxx397,.X5WszA.Cxx397,._8s7GCr.TVlBYc.Cxx397{align-items:center;display:inline-flex;margin:.1em}.M07d4s,.X5WszA.M07d4s,._8s7GCr.TVlBYc.M07d4s{border:1px solid gray;border-radius:.3em;cursor:text;font:inherit;outline:none;padding:.3em .3em calc(.3em + 1px)}.M07d4s:focus,.X5WszA.M07d4s:focus,._8s7GCr.TVlBYc.M07d4s:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.X5WszA.gfbdq-,._8s7GCr.TVlBYc.gfbdq-,.gfbdq-{margin:0 .6em 0 1.5em;pointer-events:none}.T3cuHB,.m3-mdC.J15Z4H.T3cuHB,.m4mL-M.T3cuHB{display:flex;min-height:100vh;overflow:hidden;width:100%}.m3-mdC.J15Z4H.pPlQO2,.m4mL-M.pPlQO2,.pPlQO2{overflow:hidden;padding:1.2em;width:1024px}.lqNh4h,.m3-mdC.J15Z4H.lqNh4h,.m4mL-M.lqNh4h{flex:1;overflow:hidden}@keyframes TJe-6j{0%{top:-.3em}to{top:.3em}}.XIxe9o.YOyORH._7zdld4,._7zdld4,.uIObt7._7zdld4{display:inline-block}.XIxe9o.YOyORH.dBrB4g,.dBrB4g,.uIObt7.dBrB4g{animation:TJe-6j .4s ease-in infinite alternate;background:#000;border-radius:.3em;display:inline-block;height:.6em;margin:0 .1em;position:relative;width:.6em}.XIxe9o.YOyORH.dBrB4g:first-child,.dBrB4g:first-child,.uIObt7.dBrB4g:first-child{animation-delay:-.2s}.XIxe9o.YOyORH.dBrB4g:last-child,.dBrB4g:last-child,.uIObt7.dBrB4g:last-child{animation-delay:.2s}@keyframes L4ubm-{0%{opacity:0}to{opacity:1}}.GdZucr.M9gywF,.M9gywF,._4xT7zE.zd-vnH.M9gywF{border:.6em solid gray;height:0;pointer-events:none;position:absolute;width:0}.GdZucr.f9gY8K,._4xT7zE.zd-vnH.f9gY8K,.f9gY8K{animation:L4ubm- .6s;background:gray;border-radius:.3em;color:#fff;display:inline-block;left:0;padding:0 .3em;position:absolute;top:0}.GdZucr._4qDBRM,._4qDBRM,._4xT7zE.zd-vnH._4qDBRM{display:inline-block}* .sXHM81,.r3ABzd.YKcPnR .sXHM81,.veKyYi .sXHM81{aspect-ratio:16/9;background:#f5f5f5;position:relative}* .SlV2zw,.r3ABzd.YKcPnR .SlV2zw,.veKyYi .SlV2zw{height:100%;position:absolute;width:100%}* .jTxmOX,._5a9XX1._7sH52O .jTxmOX,.dzIcLh .jTxmOX{position:absolute;text-align:center;top:40%;transform:translateY(50%);width:100%}.KVPc7g.dzMVIB,.dzMVIB,.z2GQ0Z._8R1Qdj.dzMVIB{margin:.1em;position:relative}.KVPc7g.Vw9EKL,.Vw9EKL,.z2GQ0Z._8R1Qdj.Vw9EKL{margin:0 .3em}.KVPc7g.zd-OFg,.z2GQ0Z._8R1Qdj.zd-OFg,.zd-OFg{background:#fff;border:1px solid gray;border-radius:.3em;box-sizing:border-box;font:inherit;height:0;outline:none;overflow:hidden;padding:.3em .3em calc(.3em + 1px);resize:none;width:100%}.KVPc7g.zd-OFg:focus,.z2GQ0Z._8R1Qdj.zd-OFg:focus,.zd-OFg:focus{border-color:blue;box-shadow:0 0 3px 1px #add8e6}.KVPc7g.zd-OFg::-moz-placeholder,.z2GQ0Z._8R1Qdj.zd-OFg::-moz-placeholder,.zd-OFg::-moz-placeholder{color:gray}.KVPc7g.zd-OFg::placeholder,.z2GQ0Z._8R1Qdj.zd-OFg::placeholder,.zd-OFg::placeholder{color:gray}.KVPc7g.zd-OFg:disabled,.z2GQ0Z._8R1Qdj.zd-OFg:disabled,.zd-OFg:disabled{border-color:hsla(0,0%,50%,.34);color:hsla(0,0%,50%,.34);cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.GiHBXI,.KVPc7g.GiHBXI,.z2GQ0Z._8R1Qdj.GiHBXI{opacity:0;position:absolute}
|
|
2
2
|
/*# sourceMappingURL=style.css.map*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.css","mappings":"AAUA,2ZASE,SACA,aACA,eAJA,SACA,UAIA,wBAIF,8EAEE,cAGF,KACE,cAGF,MACE,gBAGF,aACE,YAGF,oDACE,WACA,aAGF,MACE,yBACA,iBC9CF,KACE,oBAGF,EACE,sBCJA,6CACE,gBACA,YACA,OACA,WACA,eACA,MACA,WACA,WCR0B,CDU1B,4EAGF,6CACE,gBAEA,mBADA,2CASA,SAPA,gBACA,gBEPQ,CFQR,gBACA,mBAEA,eACA,QAEA,+BAJA,YAKA,YEeF,yBF5BA,6CAgBI,gBGlCN,SACE,gBCDF,QACE,QACA,WACA,eACA,aCJF,8CASE,kBACE,oBACA,YACA,kBACA,+CAKF,qBACE,+CAGF,qBAtBO,mBAwBL,eACA,gBACA,aACA,2BACA,kBACA,gEACA,iEAEA,iBACE,+BACA,+CAIJ,cACE,aACA,eACA,CAIE,gIAGF,kBACE,WACA,+CAIJ,eACE,CAEA,qBACA,CA1DK,2BAyDL,gBACA,kCACA,eACA,aACA,+CAGF,4DACE,2BAjEK,4BAmEL,SACA,kBACA,kBACA,QACA,MACA,iEAEA,WACE,uEAKF,wBACE,uEAGF,iBACE,4BACA,4FASA,sBACE,4FAGF,2BACE,oEAKJ,kBACE,CA1GG,2BA4GH,CAFA,yBA1GG,CA4GH,eAMA,CClHN,6CAGE,YACE,OACA,gBACA,gBACA,kBACA,8CAGF,4DACE,sBACA,4BACA,SACA,kBACA,oBACA,kBACA,QACA,MACA,gEAEA,WACE,8CAIJ,kBACE,oBACA,YACA,kBACA,2IAGF,8DAEE,6BACA,mEAIA,gCACA,8CAGF,qBACE,iDAGF,wDACA,0DAEA,uBACE,CADF,oBACE,CADF,eACE,gBACA,sBACA,mBACA,cACA,eACA,qBACA,OACA,aACA,eACA,aACA,0CACA,mEAEA,eACE,4BACA,6BACA,gEAGF,iBACE,+BACA,mEAGF,WC1EF,8CACE,mBACA,aACA,SAGF,8CACE,6BACA,mBACA,eACA,aACA,eAEA,gEACE,kBACA,+BAIJ,8CAEE,gBADA,sBAEA,eAGF,8CACE,mBACA,mBACA,sBACA,mBACA,aACA,SACA,aACA,gECpCJ,kBACE,mBCMA,+CACE,6DACA,sBACA,mBACA,cACA,eACA,qBACA,aACA,YACA,mBACA,kBACA,qBACA,gEAEA,uEACE,cAGF,wIAEE,+DAEA,kBADA,oCACA,CAGF,iEAEE,kBADA,+BAEA,aAKJ,+CACE,mBACA,YAKA,wIAEE,6DACA,gBC/CJ,6CACE,6DACA,gBACA,sBACA,mBACA,eACA,aACA,aAEA,SADA,aAEA,YAGE,uFACE,gBACA,mBACA,WACA,cACA,WACA,YACA,UAIJ,+DACE,kBACA,+BAIA,oFACE,gBACA,mBACA,WACA,cACA,YACA,iBACA,UAKN,6CACE,mBACA,oBACA,YAGF,gDACE,sBAGF,6CACE,YAEA,qEACE,6BCxDJ,8CACE,mBACA,oBACA,YAGF,8CACE,sBACA,mBACA,YACA,aACA,aACA,mCAEA,gEACE,kBACA,+BAIJ,8CACE,sBCZF,6CACE,aACA,iBACA,gBACA,WAGF,6CACE,gBACA,cACA,YVNQ,CUSV,6CACE,OACA,gBC3BJ,kBACE,aACA,aAMA,gDACE,qBAGF,6CACE,gDACA,gBACA,mBACA,qBACA,YACA,cACA,kBACA,WAEA,sGACA,kGCvBJ,kBACE,aACA,cAMA,8CACE,uBAIA,QAAO,CAHP,oBACA,kBACA,OACA,CAOF,8CASE,qBARA,gBACA,mBACA,WACA,qBAIA,OAHA,eACA,kBACA,KAEA,CAGF,iDACE,qBC9BF,iDACE,kBACA,mBACA,kBAGF,iDACE,YACA,kBACA,WCTF,mDACE,kBACA,kBACA,QACA,0BACA,WCHF,8CACE,YACA,kBAGF,8CACE,cAGF,8CACE,gBACA,sBACA,mBACA,sBACA,aACA,SACA,aACA,gBACA,mCACA,YACA,WAEA,gEACE,kBACA,+BAGF,oGACE,WADF,qFACE,WAGF,yEACE,gCAEA,yBADA,mBAEA,gEAIJ,8CAGE,UACA","sources":["webpack://@dr.pogodin/react-utils/./src/styles/_global/reset.css","webpack://@dr.pogodin/react-utils/./src/styles/global.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/base-theme.scss","webpack://@dr.pogodin/react-utils/./src/styles/mixins.scss","webpack://@dr.pogodin/react-utils/./src/styles/_mixins/media.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/styles.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/Options/style.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/Switch/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/GenericLink/style.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Button/style.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Checkbox/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Input/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/PageLayout/base-theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Throbber/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/WithTooltip/default-theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/YouTubeVideo/base.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/YouTubeVideo/throbber.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/TextArea/style.scss"],"sourcesContent":["/* Eric Meyer's \"Reset CSS\" 2.0 */\n\n/* http://meyerweb.com/eric/tools/css/reset/\n v2.0 | 20110126\n License: none (public domain)\n*/\n\n/* Having all selectors at individual lines is unreadable in the case of this\n * style reset sheet. */\n/* stylelint-disable selector-list-comma-newline-after */\na, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,\nbody, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,\nem, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,\nheader, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu,\nnav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span,\nstrike, strong,sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr,\ntt, u, ul, var, video {\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol, ul {\n list-style: none;\n}\n\nblockquote, q {\n quotes: none;\n}\n\nblockquote::before, blockquote::after, q::before, q::after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n","/* Global styles. */\n\n@use \"_global/reset\";\n\nbody {\n text-rendering: auto;\n}\n\n* {\n box-sizing: border-box;\n}\n","@use \"styles/mixins\" as *;\n\n*,\n.context,\n.ad.hoc {\n &.overlay {\n background: #eee;\n height: 100%;\n left: 0;\n opacity: 0.8;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: $zIndexOfDefaultModalOverlay;\n\n &:focus { outline: none; }\n }\n\n &.container {\n background: #fff;\n box-shadow: 0 0 14px 1px rgb(38 38 40 / 15%);\n border-radius: 0.3em;\n max-height: 95vh;\n max-width: $screen-md;\n overflow: hidden;\n padding: 0.6em 1.2em;\n width: 480px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: $zIndexOfDefaultModalOverlay + 1;\n\n @include xs-to-lg {\n max-width: 95vw;\n }\n }\n}\n","/* Collection of standard mixins, being used all around. */\n@forward \"_mixins/fonts\";\n@forward \"_mixins/media\";\n@forward \"_mixins/typography\";\n\n$zIndexOfDefaultModalOverlay: 998;\n","/**\n * Mixins for different layout sizes: xs, sm, md, lg.\n * Breaking points are defined in _variables.scss\n * The range mixins A-to-B all means \"for the sizes from A to B, both\n * inclusive\", in particular it means that mixin A-to-lg is equivalent to\n * all sizes from A (inclusive) and larger.\n *\n * NOTE: For convenience, these mixins are sorted not alphabetically, but,\n * first, by increase of the first size; second, by increase of the second size.\n */\n\n/* Break points. */\n\n$screen-xs: 320px !default;\n$screen-sm: 495px !default;\n$screen-mm: 768px !default;\n$screen-md: 1024px !default;\n$screen-lg: 1280px !default;\n\n/* XS */\n\n@mixin xs {\n @media (max-width: #{$screen-xs}) {\n @content;\n }\n}\n\n@mixin xs-to-sm {\n @media (max-width: #{$screen-sm}) {\n @content;\n }\n}\n\n@mixin xs-to-mm {\n @media (max-width: #{$screen-mm}) {\n @content;\n }\n}\n\n@mixin xs-to-md {\n @media (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin xs-to-lg {\n @media (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n/* SM */\n\n@mixin sm {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-sm}) {\n @content;\n }\n}\n\n@mixin sm-to-mm {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-mm}) {\n @content;\n }\n}\n\n@mixin sm-to-md {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin sm-to-lg {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin sm-to-xl {\n @media (min-width: #{$screen-xs + 1px}) {\n @content;\n }\n}\n\n/* MM */\n\n@mixin mm {\n @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-mm}) {\n @content;\n }\n}\n\n@mixin mm-to-md {\n @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin mm-to-lg {\n @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin mm-to-xl {\n @media (min-width: #{$screen-sm + 1px}) {\n @content;\n }\n}\n\n/* MD */\n\n@mixin md {\n @media (min-width: #{$screen-mm + 1px}) and (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin md-to-lg {\n @media (min-width: #{$screen-mm + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin md-to-xl {\n @media (min-width: #{$screen-mm + 1px}) {\n @content;\n }\n}\n\n/* LG */\n\n@mixin lg {\n @media (min-width: #{$screen-md + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin lg-to-xl {\n @media (min-width: #{$screen-md + 1px}) {\n @content;\n }\n}\n\n/* XL */\n\n@mixin xl {\n @media (min-width: #{$screen-lg + 1px}) {\n @content;\n }\n}\n",".scrollingDisabledByModal {\n overflow: hidden;\n}\n",".overlay {\n inset: 0;\n opacity: 0.2;\n position: fixed;\n z-index: 1000;\n}\n","$border: 1px solid gray;\n\n*,\n.context,\n.ad.hoc {\n // The outermost dropdown container, holding together the label (if any),\n // and the select element with arrow. Note, that the dropdown option list,\n // when opened, exists completely outside the dropdown DOM hierarchy, and\n // is aligned into the correct position by JS.\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n position: relative;\n }\n\n // Styling of default label next to the dropdown (has no effect on custom\n // non-string label node, if provided).\n &.label {\n margin: 0 0.6em 0 1.2em;\n }\n\n &.dropdown {\n border: $border;\n border-radius: 0.3em;\n cursor: pointer;\n min-width: 200px;\n outline: none;\n padding: 0.3em 3.0em 0.3em 0.6em;\n position: relative;\n user-select: none;\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n }\n\n &.option {\n cursor: pointer;\n outline: none ;\n padding: 0 0.6em;\n\n &:focus {\n background: royalblue;\n color: white;\n }\n\n &:hover {\n background: royalblue;\n color: white;\n }\n }\n\n &.select {\n background: white;\n border: $border;\n border-radius: 0 0 0.3em 0.3em;\n border-top: none;\n box-shadow: 0 6px 12px 3px lightgray;\n position: fixed;\n z-index: 1001;\n }\n\n &.arrow {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n border-left: $border;\n border-radius: 0 0.3em 0.3em 0;\n bottom: 0;\n padding: 0.3em 0.6em;\n position: absolute;\n right: 0;\n top: 0;\n\n &::after {\n content: '▼';\n }\n }\n\n &.active {\n .arrow {\n border-radius: 0 0.3em 0 0;\n }\n\n .dropdown {\n border-color: blue;\n border-radius: 0.3em 0.3em 0 0;\n }\n }\n\n &.upward {\n &.active {\n // NOTE: Here StyleLint complains about order & specifity of selectors in\n // the compiled CSS, but it should have no effect on the actual styling.\n // stylelint-disable no-descending-specificity\n .arrow {\n border-radius: 0 0 0.3em;\n }\n\n .dropdown {\n border-radius: 0 0 0.3em 0.3em;\n }\n // stylelint-enable no-descending-specificity\n }\n\n &.select {\n border-bottom: none;\n border-top: $border;\n border-radius: 0.3em 0.3em 0 0;\n\n // NOTE: Here a normal (downward) shadow would weirdly cast over\n // the dropdown element, and other ways to cast the shadow result in\n // \"upward\" shadow, which is also weird. Thus, better no shadow at all\n // for the upward-opened dropdown.\n box-shadow: none;\n }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.dropdown {\n display: flex;\n flex: 1;\n min-width: 5.5em;\n overflow: hidden;\n position: relative;\n }\n\n &.arrow {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n border: 1px solid gray;\n border-radius: 0 0.3em 0.3em 0;\n bottom: 0;\n padding: 0.3em 0.6em;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 0;\n\n &::after {\n content: '▼';\n }\n }\n\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n position: relative;\n }\n\n .active + &.arrow,\n :active + &.arrow {\n background-image: linear-gradient(to bottom, lightgray, white 50%, white);\n border-bottom-right-radius: 0;\n }\n\n :focus + &.arrow {\n border-color: blue;\n border-left-color: gray;\n }\n\n &.label {\n margin: 0 0.6em 0 1.5em;\n }\n\n &.option { color: black; }\n &.hiddenOption { display: none; }\n\n &.select {\n appearance: none;\n background: white;\n border: 1px solid gray;\n border-radius: 0.3em;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n flex: 1;\n font: inherit;\n max-width: 100%;\n outline: none;\n padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;\n\n &:active {\n background: white;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n\n &.invalid { color: gray; }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.container {\n align-items: center;\n display: flex;\n gap: 0.6em;\n }\n\n &.option {\n border: 1px solid transparent;\n border-radius: 0.3em;\n cursor: pointer;\n outline: none;\n padding: 0 0.9em;\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n }\n\n &.selected {\n border: 1px solid gray;\n background: white;\n cursor: default;\n }\n\n &.options {\n align-items: center;\n background: whitesmoke;\n border: 1px solid gray;\n border-radius: 0.3em;\n display: flex;\n gap: 0.3em;\n padding: 0.3em;\n user-select: none;\n }\n}\n",".link[disabled] {\n cursor: not-allowed;\n}\n","/**\n * The default button theme.\n */\n\n*,\n.context,\n.ad.hoc {\n &.button {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n border: solid 1px gray;\n border-radius: 0.3em;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n font: inherit;\n margin: 0.1em;\n padding: 0.3em 1.2em;\n text-align: center;\n text-decoration: none;\n user-select: none;\n\n &:visited {\n color: inherit;\n }\n\n &.active,\n &:active {\n background-image: linear-gradient(to bottom, lightgray, white 50%, white);\n box-shadow: inset 0 1px 3px 0 lightgray;\n border-color: gray;\n }\n\n &:focus {\n box-shadow: 0 0 3px 1px lightblue;\n border-color: blue;\n outline: none;\n }\n }\n\n /* Additional styling of disabled buttons. */\n &.disabled {\n cursor: not-allowed;\n opacity: 0.33;\n\n // Note: this \"cancels out\" the active state styling of an active button,\n // which is defined above, thus ensuring a click on disabled button does\n // not alter its appearance (does not result in visual press).\n &.active,\n &:active {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n box-shadow: none;\n }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.checkbox {\n appearance: none;\n background: white;\n border: 1px solid gray;\n border-radius: 0.3em;\n cursor: pointer;\n font: inherit;\n height: 1.5em;\n outline: none;\n margin: 0;\n width: 1.5em;\n\n &:checked {\n &::after {\n background: black;\n border-radius: 0.3em;\n content: \"\";\n display: block;\n height: 1em;\n margin: 0.2em;\n width: 1em;\n }\n }\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n\n &.indeterminate {\n &::after {\n background: black;\n border-radius: 0.2em;\n content: \"\";\n display: block;\n height: 0.2em;\n margin: 0.6em 0.2em;\n width: 1em;\n }\n }\n }\n\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n }\n\n &.label {\n margin: 0 0.6em 0 1.5em;\n }\n\n &.disabled {\n opacity: 0.33;\n\n .checkbox {\n cursor: not-allowed !important;\n }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n }\n\n &.input {\n border: 1px solid gray;\n border-radius: 0.3em;\n cursor: text;\n font: inherit;\n outline: none;\n padding: 0.3em 0.3em calc(0.3em + 1px);\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n }\n\n &.label {\n margin: 0 0.6em 0 1.5em;\n }\n}\n","/**\n * Base theme: symmetric 3-columns layout, with the center column occupying all\n * screen up to mid screen size. For larger screen sizes the main column is\n * limited by the mid screen size, and the free space is filled with side\n * columns on left and right.\n */\n\n@use \"styles/mixins\" as *;\n\n*,\n.context,\n.ad.hoc {\n &.container {\n display: flex;\n min-height: 100vh;\n overflow: hidden;\n width: 100%;\n }\n\n &.mainPanel {\n overflow: hidden;\n padding: 1.2em;\n width: $screen-md;\n }\n\n &.sidePanel {\n flex: 1;\n overflow: hidden;\n }\n}\n","@keyframes bouncing {\n from { top: -0.3em; }\n to { top: 0.3em; }\n}\n\n*,\n.context,\n.ad.hoc {\n &.container {\n display: inline-block;\n }\n\n &.circle {\n animation: bouncing 0.4s ease-in infinite alternate;\n background: black;\n border-radius: 0.3em;\n display: inline-block;\n height: 0.6em;\n margin: 0 0.1em;\n position: relative;\n width: 0.6em;\n\n &:first-child { animation-delay: -0.2s; }\n &:last-child { animation-delay: 0.2s; }\n }\n}\n","@keyframes appearance {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n*,\n.ad.hoc,\n.context {\n &.arrow {\n border: 0.6em solid grey;\n pointer-events: none;\n position: absolute;\n width: 0;\n height: 0;\n }\n\n /*\n &.content { }\n */\n\n &.container {\n background: grey;\n border-radius: 0.3em;\n color: white;\n display: inline-block;\n padding: 0 0.3em;\n position: absolute;\n top: 0;\n left: 0;\n animation: appearance 0.6s;\n }\n\n &.wrapper {\n display: inline-block;\n }\n}\n","*,\n.context,\n.ad.hoc {\n .container {\n aspect-ratio: 16 / 9;\n background: whitesmoke;\n position: relative;\n }\n\n .video {\n height: 100%;\n position: absolute;\n width: 100%;\n }\n}\n","*,\n.context,\n.ad.hoc {\n .container {\n position: absolute;\n text-align: center;\n top: 40%;\n transform: translateY(50%);\n width: 100%;\n }\n}\n","@use \"sass:color\";\n\n*,\n.context,\n.ad.hoc {\n &.container {\n margin: 0.1em;\n position: relative;\n }\n\n &.label {\n margin: 0 0.3em;\n }\n\n &.textarea {\n background: white;\n border: 1px solid gray;\n border-radius: 0.3em;\n box-sizing: border-box;\n font: inherit;\n height: 0;\n outline: none;\n overflow: hidden;\n padding: 0.3em 0.3em calc(0.3em + 1px);\n resize: none;\n width: 100%;\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n\n &::placeholder {\n color: gray;\n }\n\n &:disabled {\n border-color: color.adjust($color: gray, $alpha: -0.66);\n cursor: not-allowed;\n color: color.adjust($color: gray, $alpha: -0.66);\n user-select: none;\n }\n }\n\n &.hidden {\n // NOTE: We hide it this way, as setting \"display: none\" will interfere\n // with measurements, making the hidden input height zero.\n opacity: 0;\n position: absolute;\n }\n}\n"],"names":[],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"style.css","mappings":"AAUA,2ZASE,SACA,aACA,eAJA,SACA,UAIA,wBAIF,8EAEE,cAGF,KACE,cAGF,MACE,gBAGF,aACE,YAGF,oDACE,WACA,aAGF,MACE,yBACA,iBC9CF,KACE,oBAGF,EACE,sBCJA,6CACE,gBACA,YACA,OACA,WACA,eACA,MACA,WACA,WCR0B,CDU1B,4EAGF,6CACE,gBAEA,mBADA,2CASA,SAPA,gBACA,gBEPQ,CFQR,gBACA,mBAEA,eACA,QAEA,+BAJA,YAKA,YEeF,yBF5BA,6CAgBI,gBGlCN,SACE,gBCDF,QACE,QACA,WACA,eACA,aCJF,8CASE,kBACE,oBACA,YACA,kBACA,+CAKF,qBACE,+CAGF,qBAtBO,mBAwBL,eACA,gBACA,aACA,2BACA,kBACA,gEACA,iEAEA,iBACE,+BACA,+CAIJ,cACE,aACA,eACA,CAIE,gIAGF,kBACE,WACA,+CAIJ,eACE,CAEA,qBACA,CA1DK,2BAyDL,gBACA,kCACA,eACA,aACA,+CAGF,4DACE,2BAjEK,4BAmEL,SACA,kBACA,kBACA,QACA,MACA,iEAEA,WACE,uEAKF,wBACE,uEAGF,iBACE,4BACA,4FASA,sBACE,4FAGF,2BACE,oEAKJ,kBACE,CA1GG,2BA4GH,CAFA,yBA1GG,CA4GH,eAMA,CClHN,6CAGE,YACE,OACA,gBACA,gBACA,kBACA,8CAGF,4DACE,sBACA,4BACA,SACA,kBACA,oBACA,kBACA,QACA,MACA,gEAEA,WACE,8CAIJ,kBACE,oBACA,YACA,kBACA,2IAGF,8DAEE,6BACA,mEAIA,gCACA,8CAGF,qBACE,oBACA,iDAGF,wDACA,0DAEA,uBACE,CADF,oBACE,CADF,eACE,gBACA,sBACA,mBACA,cACA,eACA,qBACA,OACA,aACA,eACA,aACA,0CACA,mEAEA,eACE,4BACA,6BACA,gEAGF,iBACE,+BACA,mEAGF,WC3EF,8CACE,mBACA,aACA,SAGF,8CACE,6BACA,mBACA,eACA,aACA,eAEA,gEACE,kBACA,+BAIJ,8CAEE,gBADA,sBAEA,eAGF,8CACE,mBACA,mBACA,sBACA,mBACA,aACA,SACA,aACA,gECpCJ,kBACE,mBCMA,+CACE,6DACA,sBACA,mBACA,cACA,eACA,qBACA,aACA,YACA,mBACA,kBACA,qBACA,gEAEA,uEACE,cAGF,wIAEE,+DAEA,kBADA,oCACA,CAGF,iEAEE,kBADA,+BAEA,aAKJ,+CACE,mBACA,YAKA,wIAEE,6DACA,gBC/CJ,6CACE,6DACA,gBACA,sBACA,mBACA,eACA,aACA,aAEA,SADA,aAEA,YAGE,uFACE,gBACA,mBACA,WACA,cACA,WACA,YACA,UAIJ,+DACE,kBACA,+BAIA,oFACE,gBACA,mBACA,WACA,cACA,YACA,iBACA,UAKN,6CACE,mBACA,oBACA,YAGF,gDACE,sBAGF,6CACE,YAEA,qEACE,6BCxDJ,8CACE,mBACA,oBACA,YAGF,8CACE,sBACA,mBACA,YACA,aACA,aACA,mCAEA,gEACE,kBACA,+BAIJ,8CACE,sBACA,oBCbF,6CACE,aACA,iBACA,gBACA,WAGF,6CACE,gBACA,cACA,YVNQ,CUSV,6CACE,OACA,gBC3BJ,kBACE,aACA,aAMA,gDACE,qBAGF,6CACE,gDACA,gBACA,mBACA,qBACA,YACA,cACA,kBACA,WAEA,sGACA,kGCvBJ,kBACE,aACA,cAMA,8CACE,uBAIA,QAAO,CAHP,oBACA,kBACA,OACA,CAOF,8CASE,qBARA,gBACA,mBACA,WACA,qBAIA,OAHA,eACA,kBACA,KAEA,CAGF,iDACE,qBC9BF,iDACE,kBACA,mBACA,kBAGF,iDACE,YACA,kBACA,WCTF,mDACE,kBACA,kBACA,QACA,0BACA,WCHF,8CACE,YACA,kBAGF,8CACE,cAGF,8CACE,gBACA,sBACA,mBACA,sBACA,aACA,SACA,aACA,gBACA,mCACA,YACA,WAEA,gEACE,kBACA,+BAGF,oGACE,WADF,qFACE,WAGF,yEACE,gCAEA,yBADA,mBAEA,gEAIJ,8CAGE,UACA","sources":["webpack://@dr.pogodin/react-utils/./src/styles/_global/reset.css","webpack://@dr.pogodin/react-utils/./src/styles/global.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/base-theme.scss","webpack://@dr.pogodin/react-utils/./src/styles/mixins.scss","webpack://@dr.pogodin/react-utils/./src/styles/_mixins/media.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Modal/styles.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/Options/style.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/CustomDropdown/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/NativeDropdown/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/selectors/Switch/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/GenericLink/style.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Button/style.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Checkbox/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Input/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/PageLayout/base-theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/Throbber/theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/WithTooltip/default-theme.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/YouTubeVideo/base.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/YouTubeVideo/throbber.scss","webpack://@dr.pogodin/react-utils/./src/shared/components/TextArea/style.scss"],"sourcesContent":["/* Eric Meyer's \"Reset CSS\" 2.0 */\n\n/* http://meyerweb.com/eric/tools/css/reset/\n v2.0 | 20110126\n License: none (public domain)\n*/\n\n/* Having all selectors at individual lines is unreadable in the case of this\n * style reset sheet. */\n/* stylelint-disable selector-list-comma-newline-after */\na, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,\nbody, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt,\nem, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,\nheader, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu,\nnav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span,\nstrike, strong,sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr,\ntt, u, ul, var, video {\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n font-size: 100%;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol, ul {\n list-style: none;\n}\n\nblockquote, q {\n quotes: none;\n}\n\nblockquote::before, blockquote::after, q::before, q::after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n","/* Global styles. */\n\n@use \"_global/reset\";\n\nbody {\n text-rendering: auto;\n}\n\n* {\n box-sizing: border-box;\n}\n","@use \"styles/mixins\" as *;\n\n*,\n.context,\n.ad.hoc {\n &.overlay {\n background: #eee;\n height: 100%;\n left: 0;\n opacity: 0.8;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: $zIndexOfDefaultModalOverlay;\n\n &:focus { outline: none; }\n }\n\n &.container {\n background: #fff;\n box-shadow: 0 0 14px 1px rgb(38 38 40 / 15%);\n border-radius: 0.3em;\n max-height: 95vh;\n max-width: $screen-md;\n overflow: hidden;\n padding: 0.6em 1.2em;\n width: 480px;\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: $zIndexOfDefaultModalOverlay + 1;\n\n @include xs-to-lg {\n max-width: 95vw;\n }\n }\n}\n","/* Collection of standard mixins, being used all around. */\n@forward \"_mixins/fonts\";\n@forward \"_mixins/media\";\n@forward \"_mixins/typography\";\n\n$zIndexOfDefaultModalOverlay: 998;\n","/**\n * Mixins for different layout sizes: xs, sm, md, lg.\n * Breaking points are defined in _variables.scss\n * The range mixins A-to-B all means \"for the sizes from A to B, both\n * inclusive\", in particular it means that mixin A-to-lg is equivalent to\n * all sizes from A (inclusive) and larger.\n *\n * NOTE: For convenience, these mixins are sorted not alphabetically, but,\n * first, by increase of the first size; second, by increase of the second size.\n */\n\n/* Break points. */\n\n$screen-xs: 320px !default;\n$screen-sm: 495px !default;\n$screen-mm: 768px !default;\n$screen-md: 1024px !default;\n$screen-lg: 1280px !default;\n\n/* XS */\n\n@mixin xs {\n @media (max-width: #{$screen-xs}) {\n @content;\n }\n}\n\n@mixin xs-to-sm {\n @media (max-width: #{$screen-sm}) {\n @content;\n }\n}\n\n@mixin xs-to-mm {\n @media (max-width: #{$screen-mm}) {\n @content;\n }\n}\n\n@mixin xs-to-md {\n @media (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin xs-to-lg {\n @media (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n/* SM */\n\n@mixin sm {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-sm}) {\n @content;\n }\n}\n\n@mixin sm-to-mm {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-mm}) {\n @content;\n }\n}\n\n@mixin sm-to-md {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin sm-to-lg {\n @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin sm-to-xl {\n @media (min-width: #{$screen-xs + 1px}) {\n @content;\n }\n}\n\n/* MM */\n\n@mixin mm {\n @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-mm}) {\n @content;\n }\n}\n\n@mixin mm-to-md {\n @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin mm-to-lg {\n @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin mm-to-xl {\n @media (min-width: #{$screen-sm + 1px}) {\n @content;\n }\n}\n\n/* MD */\n\n@mixin md {\n @media (min-width: #{$screen-mm + 1px}) and (max-width: #{$screen-md}) {\n @content;\n }\n}\n\n@mixin md-to-lg {\n @media (min-width: #{$screen-mm + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin md-to-xl {\n @media (min-width: #{$screen-mm + 1px}) {\n @content;\n }\n}\n\n/* LG */\n\n@mixin lg {\n @media (min-width: #{$screen-md + 1px}) and (max-width: #{$screen-lg}) {\n @content;\n }\n}\n\n@mixin lg-to-xl {\n @media (min-width: #{$screen-md + 1px}) {\n @content;\n }\n}\n\n/* XL */\n\n@mixin xl {\n @media (min-width: #{$screen-lg + 1px}) {\n @content;\n }\n}\n",".scrollingDisabledByModal {\n overflow: hidden;\n}\n",".overlay {\n inset: 0;\n opacity: 0.2;\n position: fixed;\n z-index: 1000;\n}\n","$border: 1px solid gray;\n\n*,\n.context,\n.ad.hoc {\n // The outermost dropdown container, holding together the label (if any),\n // and the select element with arrow. Note, that the dropdown option list,\n // when opened, exists completely outside the dropdown DOM hierarchy, and\n // is aligned into the correct position by JS.\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n position: relative;\n }\n\n // Styling of default label next to the dropdown (has no effect on custom\n // non-string label node, if provided).\n &.label {\n margin: 0 0.6em 0 1.2em;\n }\n\n &.dropdown {\n border: $border;\n border-radius: 0.3em;\n cursor: pointer;\n min-width: 200px;\n outline: none;\n padding: 0.3em 3.0em 0.3em 0.6em;\n position: relative;\n user-select: none;\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n }\n\n &.option {\n cursor: pointer;\n outline: none ;\n padding: 0 0.6em;\n\n &:focus {\n background: royalblue;\n color: white;\n }\n\n &:hover {\n background: royalblue;\n color: white;\n }\n }\n\n &.select {\n background: white;\n border: $border;\n border-radius: 0 0 0.3em 0.3em;\n border-top: none;\n box-shadow: 0 6px 12px 3px lightgray;\n position: fixed;\n z-index: 1001;\n }\n\n &.arrow {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n border-left: $border;\n border-radius: 0 0.3em 0.3em 0;\n bottom: 0;\n padding: 0.3em 0.6em;\n position: absolute;\n right: 0;\n top: 0;\n\n &::after {\n content: '▼';\n }\n }\n\n &.active {\n .arrow {\n border-radius: 0 0.3em 0 0;\n }\n\n .dropdown {\n border-color: blue;\n border-radius: 0.3em 0.3em 0 0;\n }\n }\n\n &.upward {\n &.active {\n // NOTE: Here StyleLint complains about order & specifity of selectors in\n // the compiled CSS, but it should have no effect on the actual styling.\n // stylelint-disable no-descending-specificity\n .arrow {\n border-radius: 0 0 0.3em;\n }\n\n .dropdown {\n border-radius: 0 0 0.3em 0.3em;\n }\n // stylelint-enable no-descending-specificity\n }\n\n &.select {\n border-bottom: none;\n border-top: $border;\n border-radius: 0.3em 0.3em 0 0;\n\n // NOTE: Here a normal (downward) shadow would weirdly cast over\n // the dropdown element, and other ways to cast the shadow result in\n // \"upward\" shadow, which is also weird. Thus, better no shadow at all\n // for the upward-opened dropdown.\n box-shadow: none;\n }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.dropdown {\n display: flex;\n flex: 1;\n min-width: 5.5em;\n overflow: hidden;\n position: relative;\n }\n\n &.arrow {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n border: 1px solid gray;\n border-radius: 0 0.3em 0.3em 0;\n bottom: 0;\n padding: 0.3em 0.6em;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 0;\n\n &::after {\n content: '▼';\n }\n }\n\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n position: relative;\n }\n\n .active + &.arrow,\n :active + &.arrow {\n background-image: linear-gradient(to bottom, lightgray, white 50%, white);\n border-bottom-right-radius: 0;\n }\n\n :focus + &.arrow {\n border-color: blue;\n border-left-color: gray;\n }\n\n &.label {\n margin: 0 0.6em 0 1.5em;\n pointer-events: none;\n }\n\n &.option { color: black; }\n &.hiddenOption { display: none; }\n\n &.select {\n appearance: none;\n background: white;\n border: 1px solid gray;\n border-radius: 0.3em;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n flex: 1;\n font: inherit;\n max-width: 100%;\n outline: none;\n padding: 0.3em 3.3em calc(0.3em + 1px) 1.2em;\n\n &:active {\n background: white;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n\n &.invalid { color: gray; }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.container {\n align-items: center;\n display: flex;\n gap: 0.6em;\n }\n\n &.option {\n border: 1px solid transparent;\n border-radius: 0.3em;\n cursor: pointer;\n outline: none;\n padding: 0 0.9em;\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n }\n\n &.selected {\n border: 1px solid gray;\n background: white;\n cursor: default;\n }\n\n &.options {\n align-items: center;\n background: whitesmoke;\n border: 1px solid gray;\n border-radius: 0.3em;\n display: flex;\n gap: 0.3em;\n padding: 0.3em;\n user-select: none;\n }\n}\n",".link[disabled] {\n cursor: not-allowed;\n}\n","/**\n * The default button theme.\n */\n\n*,\n.context,\n.ad.hoc {\n &.button {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n border: solid 1px gray;\n border-radius: 0.3em;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n font: inherit;\n margin: 0.1em;\n padding: 0.3em 1.2em;\n text-align: center;\n text-decoration: none;\n user-select: none;\n\n &:visited {\n color: inherit;\n }\n\n &.active,\n &:active {\n background-image: linear-gradient(to bottom, lightgray, white 50%, white);\n box-shadow: inset 0 1px 3px 0 lightgray;\n border-color: gray;\n }\n\n &:focus {\n box-shadow: 0 0 3px 1px lightblue;\n border-color: blue;\n outline: none;\n }\n }\n\n /* Additional styling of disabled buttons. */\n &.disabled {\n cursor: not-allowed;\n opacity: 0.33;\n\n // Note: this \"cancels out\" the active state styling of an active button,\n // which is defined above, thus ensuring a click on disabled button does\n // not alter its appearance (does not result in visual press).\n &.active,\n &:active {\n background-image: linear-gradient(to top, lightgray, white 50%, white);\n box-shadow: none;\n }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.checkbox {\n appearance: none;\n background: white;\n border: 1px solid gray;\n border-radius: 0.3em;\n cursor: pointer;\n font: inherit;\n height: 1.5em;\n outline: none;\n margin: 0;\n width: 1.5em;\n\n &:checked {\n &::after {\n background: black;\n border-radius: 0.3em;\n content: \"\";\n display: block;\n height: 1em;\n margin: 0.2em;\n width: 1em;\n }\n }\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n\n &.indeterminate {\n &::after {\n background: black;\n border-radius: 0.2em;\n content: \"\";\n display: block;\n height: 0.2em;\n margin: 0.6em 0.2em;\n width: 1em;\n }\n }\n }\n\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n }\n\n &.label {\n margin: 0 0.6em 0 1.5em;\n }\n\n &.disabled {\n opacity: 0.33;\n\n .checkbox {\n cursor: not-allowed !important;\n }\n }\n}\n","*,\n.context,\n.ad.hoc {\n &.container {\n align-items: center;\n display: inline-flex;\n margin: 0.1em;\n }\n\n &.input {\n border: 1px solid gray;\n border-radius: 0.3em;\n cursor: text;\n font: inherit;\n outline: none;\n padding: 0.3em 0.3em calc(0.3em + 1px);\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n }\n\n &.label {\n margin: 0 0.6em 0 1.5em;\n pointer-events: none;\n }\n}\n","/**\n * Base theme: symmetric 3-columns layout, with the center column occupying all\n * screen up to mid screen size. For larger screen sizes the main column is\n * limited by the mid screen size, and the free space is filled with side\n * columns on left and right.\n */\n\n@use \"styles/mixins\" as *;\n\n*,\n.context,\n.ad.hoc {\n &.container {\n display: flex;\n min-height: 100vh;\n overflow: hidden;\n width: 100%;\n }\n\n &.mainPanel {\n overflow: hidden;\n padding: 1.2em;\n width: $screen-md;\n }\n\n &.sidePanel {\n flex: 1;\n overflow: hidden;\n }\n}\n","@keyframes bouncing {\n from { top: -0.3em; }\n to { top: 0.3em; }\n}\n\n*,\n.context,\n.ad.hoc {\n &.container {\n display: inline-block;\n }\n\n &.circle {\n animation: bouncing 0.4s ease-in infinite alternate;\n background: black;\n border-radius: 0.3em;\n display: inline-block;\n height: 0.6em;\n margin: 0 0.1em;\n position: relative;\n width: 0.6em;\n\n &:first-child { animation-delay: -0.2s; }\n &:last-child { animation-delay: 0.2s; }\n }\n}\n","@keyframes appearance {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n*,\n.ad.hoc,\n.context {\n &.arrow {\n border: 0.6em solid grey;\n pointer-events: none;\n position: absolute;\n width: 0;\n height: 0;\n }\n\n /*\n &.content { }\n */\n\n &.container {\n background: grey;\n border-radius: 0.3em;\n color: white;\n display: inline-block;\n padding: 0 0.3em;\n position: absolute;\n top: 0;\n left: 0;\n animation: appearance 0.6s;\n }\n\n &.wrapper {\n display: inline-block;\n }\n}\n","*,\n.context,\n.ad.hoc {\n .container {\n aspect-ratio: 16 / 9;\n background: whitesmoke;\n position: relative;\n }\n\n .video {\n height: 100%;\n position: absolute;\n width: 100%;\n }\n}\n","*,\n.context,\n.ad.hoc {\n .container {\n position: absolute;\n text-align: center;\n top: 40%;\n transform: translateY(50%);\n width: 100%;\n }\n}\n","@use \"sass:color\";\n\n*,\n.context,\n.ad.hoc {\n &.container {\n margin: 0.1em;\n position: relative;\n }\n\n &.label {\n margin: 0 0.3em;\n }\n\n &.textarea {\n background: white;\n border: 1px solid gray;\n border-radius: 0.3em;\n box-sizing: border-box;\n font: inherit;\n height: 0;\n outline: none;\n overflow: hidden;\n padding: 0.3em 0.3em calc(0.3em + 1px);\n resize: none;\n width: 100%;\n\n &:focus {\n border-color: blue;\n box-shadow: 0 0 3px 1px lightblue;\n }\n\n &::placeholder {\n color: gray;\n }\n\n &:disabled {\n border-color: color.adjust($color: gray, $alpha: -0.66);\n cursor: not-allowed;\n color: color.adjust($color: gray, $alpha: -0.66);\n user-select: none;\n }\n }\n\n &.hidden {\n // NOTE: We hide it this way, as setting \"display: none\" will interfere\n // with measurements, making the hidden input height zero.\n opacity: 0;\n position: absolute;\n }\n}\n"],"names":[],"sourceRoot":""}
|