@cloudscape-design/components 3.0.1121 → 3.0.1122
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/alert/styles.css.js +27 -27
- package/alert/styles.scoped.css +50 -50
- package/alert/styles.selectors.js +27 -27
- package/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +32 -32
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +7 -7
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/visual-refresh/styles.css.js +86 -86
- package/app-layout/visual-refresh/styles.scoped.css +258 -258
- package/app-layout/visual-refresh/styles.selectors.js +86 -86
- package/app-layout/visual-refresh-toolbar/drawer/styles.css.js +27 -27
- package/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
- package/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +27 -27
- package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
- package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
- package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
- package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
- package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
- package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
- package/attribute-editor/styles.css.js +15 -15
- package/attribute-editor/styles.scoped.css +28 -28
- package/attribute-editor/styles.selectors.js +15 -15
- package/breadcrumb-group/item/styles.css.js +7 -7
- package/breadcrumb-group/item/styles.scoped.css +28 -28
- package/breadcrumb-group/item/styles.selectors.js +7 -7
- package/button/styles.css.js +22 -22
- package/button/styles.scoped.css +256 -256
- package/button/styles.selectors.js +22 -22
- package/button-dropdown/item-element/styles.css.js +16 -16
- package/button-dropdown/item-element/styles.scoped.css +27 -27
- package/button-dropdown/item-element/styles.selectors.js +16 -16
- package/checkbox/styles.css.js +3 -3
- package/checkbox/styles.scoped.css +11 -11
- package/checkbox/styles.selectors.js +3 -3
- package/content-layout/styles.css.js +14 -14
- package/content-layout/styles.scoped.css +27 -27
- package/content-layout/styles.selectors.js +14 -14
- package/flashbar/styles.css.js +50 -50
- package/flashbar/styles.scoped.css +187 -187
- package/flashbar/styles.selectors.js +50 -50
- package/help-panel/styles.css.js +6 -6
- package/help-panel/styles.scoped.css +73 -73
- package/help-panel/styles.selectors.js +6 -6
- package/input/index.d.ts.map +1 -1
- package/input/index.js +1 -1
- package/input/interfaces.d.ts +47 -0
- package/input/interfaces.d.ts.map +1 -1
- package/input/interfaces.js.map +1 -1
- package/input/internal-do-not-use-core.js +3 -2
- package/input/internal-do-not-use-core.js.map +1 -1
- package/input/internal.d.ts.map +1 -1
- package/input/internal.js +3 -2
- package/input/internal.js.map +1 -1
- package/input/styles.css.js +13 -13
- package/input/styles.d.ts +2 -0
- package/input/styles.d.ts.map +1 -0
- package/input/styles.js +42 -0
- package/input/styles.js.map +1 -0
- package/input/styles.scoped.css +66 -49
- package/input/styles.selectors.js +13 -13
- package/internal/base-component/styles.scoped.css +1 -1
- package/internal/components/drag-handle-wrapper/styles.css.js +20 -20
- package/internal/components/drag-handle-wrapper/styles.scoped.css +48 -48
- package/internal/components/drag-handle-wrapper/styles.selectors.js +20 -20
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +38 -38
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/components/token-list/styles.css.js +10 -10
- package/internal/components/token-list/styles.scoped.css +25 -25
- package/internal/components/token-list/styles.selectors.js +10 -10
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/generated/custom-css-properties/index.d.ts +12 -0
- package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/internal/generated/custom-css-properties/index.js +98 -86
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/link/styles.css.js +20 -20
- package/link/styles.scoped.css +103 -103
- package/link/styles.selectors.js +20 -20
- package/package.json +1 -1
- package/radio-group/styles.css.js +10 -10
- package/radio-group/styles.scoped.css +22 -22
- package/radio-group/styles.selectors.js +10 -10
- package/select/parts/filter.d.ts +1 -1
- package/select/parts/filter.d.ts.map +1 -1
- package/slider/styles.css.js +26 -26
- package/slider/styles.scoped.css +86 -86
- package/slider/styles.selectors.js +26 -26
- package/spinner/styles.css.js +13 -13
- package/spinner/styles.scoped.css +39 -39
- package/spinner/styles.selectors.js +13 -13
- package/tag-editor/styles.css.js +3 -3
- package/tag-editor/styles.scoped.css +13 -13
- package/tag-editor/styles.selectors.js +3 -3
- package/text-content/styles.css.js +1 -1
- package/text-content/styles.scoped.css +66 -66
- package/text-content/styles.selectors.js +1 -1
- package/toggle/styles.css.js +10 -10
- package/toggle/styles.scoped.css +23 -23
- package/toggle/styles.selectors.js +10 -10
|
@@ -10,7 +10,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
|
10
10
|
import InternalInput from './internal';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
const Input = React.forwardRef((_a, ref) => {
|
|
13
|
-
var { value, type = 'text', step, inputMode, autoComplete = true, spellcheck, disabled, readOnly, disableBrowserAutocorrect, onKeyDown, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, placeholder, autoFocus, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, warning, controlId, clearAriaLabel, nativeInputAttributes } = _a, rest = __rest(_a, ["value", "type", "step", "inputMode", "autoComplete", "spellcheck", "disabled", "readOnly", "disableBrowserAutocorrect", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "placeholder", "autoFocus", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "invalid", "warning", "controlId", "clearAriaLabel", "nativeInputAttributes"]);
|
|
13
|
+
var { value, type = 'text', step, inputMode, autoComplete = true, spellcheck, disabled, readOnly, disableBrowserAutocorrect, onKeyDown, onKeyUp, onChange, onBlur, onFocus, ariaRequired, name, placeholder, autoFocus, ariaLabel, ariaLabelledby, ariaDescribedby, invalid, warning, controlId, clearAriaLabel, nativeInputAttributes, style } = _a, rest = __rest(_a, ["value", "type", "step", "inputMode", "autoComplete", "spellcheck", "disabled", "readOnly", "disableBrowserAutocorrect", "onKeyDown", "onKeyUp", "onChange", "onBlur", "onFocus", "ariaRequired", "name", "placeholder", "autoFocus", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "invalid", "warning", "controlId", "clearAriaLabel", "nativeInputAttributes", "style"]);
|
|
14
14
|
const baseComponentProps = useBaseComponent('Input', {
|
|
15
15
|
props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },
|
|
16
16
|
});
|
|
@@ -51,7 +51,8 @@ const Input = React.forwardRef((_a, ref) => {
|
|
|
51
51
|
warning,
|
|
52
52
|
controlId,
|
|
53
53
|
clearAriaLabel,
|
|
54
|
-
nativeInputAttributes
|
|
54
|
+
nativeInputAttributes,
|
|
55
|
+
style }), { className: clsx(styles.root, baseProps.className), __inheritFormFieldProps: true, __injectAnalyticsComponentMetadata: true })));
|
|
55
56
|
});
|
|
56
57
|
applyDisplayName(Input, 'Input');
|
|
57
58
|
export default Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EA6Ba,EACb,GAAwB,EACxB,EAAE;QA/BF,EACE,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,EACd,qBAAqB,EACrB,KAAK,OAEM,EADR,IAAI,cA5BT,+WA6BC,CADQ;IAIT,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,yBAAyB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;KACrG,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,CAAC,GAAG,IAAsC;;YAC7C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,MAAM;;YACJ,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,QAAQ,kDAER,SAAS,GACT,kBAAkB,KACrB,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,yBAAyB;QACzB,IAAI;QACJ,SAAS;QACT,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,UAAU;QACV,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,OAAO;QACP,SAAS;QACT,cAAc;QACd,qBAAqB;QACrB,KAAK,OAEP,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,uBAAuB,EAAE,IAAI,EAC7B,kCAAkC,EAAE,IAAI,IACxC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { InputProps } from './interfaces';\nimport InternalInput from './internal';\n\nimport styles from './styles.css.js';\n\nexport { InputProps };\n\nconst Input = React.forwardRef(\n (\n {\n value,\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n spellcheck,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n ariaRequired,\n name,\n placeholder,\n autoFocus,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n nativeInputAttributes,\n style,\n ...rest\n }: InputProps,\n ref: Ref<InputProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Input', {\n props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },\n });\n const baseProps = getBaseProps(rest);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters<HTMLElement['focus']>) {\n inputRef.current?.focus(...args);\n },\n select() {\n inputRef.current?.select();\n },\n }),\n [inputRef]\n );\n\n return (\n <InternalInput\n ref={inputRef}\n {...{\n ...baseProps,\n ...baseComponentProps,\n autoComplete,\n ariaLabel,\n ariaRequired,\n autoFocus,\n disabled,\n disableBrowserAutocorrect,\n name,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n placeholder,\n readOnly,\n type,\n step,\n inputMode,\n spellcheck,\n value,\n ariaDescribedby,\n ariaLabelledby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n nativeInputAttributes,\n style,\n }}\n className={clsx(styles.root, baseProps.className)}\n __inheritFormFieldProps={true}\n __injectAnalyticsComponentMetadata={true}\n />\n );\n }\n);\n\napplyDisplayName(Input, 'Input');\nexport default Input;\n"]}
|
package/input/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAW3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAA6B,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAK9F,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAW3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAA6B,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AAK9F,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM9F,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C,8BAA8B,CAAC,EAAE,YAAY,CAAC;CAC/C;;AAiMD,wBAA+C"}
|
package/input/internal.js
CHANGED
|
@@ -13,10 +13,11 @@ import { useFormFieldContext } from '../internal/context/form-field-context';
|
|
|
13
13
|
import { fireKeyboardEvent, fireNonCancelableEvent } from '../internal/events';
|
|
14
14
|
import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
|
|
15
15
|
import WithNativeAttributes from '../internal/utils/with-native-attributes';
|
|
16
|
+
import { getInputStyles } from './styles';
|
|
16
17
|
import { convertAutoComplete, useSearchProps } from './utils';
|
|
17
18
|
import styles from './styles.css.js';
|
|
18
19
|
function InternalInput(_a, ref) {
|
|
19
|
-
var { type = 'text', step, inputMode, autoComplete = true, ariaLabel, clearAriaLabel: clearAriaLabelOverride, name, value, placeholder, autoFocus, disabled, readOnly, disableBrowserAutocorrect, spellcheck, __noBorderRadius, __leftIcon, __leftIconVariant = 'subtle', __onLeftIconClick, ariaRequired, __rightIcon, __onRightIconClick, onKeyDown, onKeyUp, onChange, __onDelayedInput, __onBlurWithDetail, onBlur, onFocus, nativeInputAttributes, __internalRootRef, __inheritFormFieldProps, __injectAnalyticsComponentMetadata, __skipNativeAttributesWarnings } = _a, rest = __rest(_a, ["type", "step", "inputMode", "autoComplete", "ariaLabel", "clearAriaLabel", "name", "value", "placeholder", "autoFocus", "disabled", "readOnly", "disableBrowserAutocorrect", "spellcheck", "__noBorderRadius", "__leftIcon", "__leftIconVariant", "__onLeftIconClick", "ariaRequired", "__rightIcon", "__onRightIconClick", "onKeyDown", "onKeyUp", "onChange", "__onDelayedInput", "__onBlurWithDetail", "onBlur", "onFocus", "nativeInputAttributes", "__internalRootRef", "__inheritFormFieldProps", "__injectAnalyticsComponentMetadata", "__skipNativeAttributesWarnings"]);
|
|
20
|
+
var { type = 'text', step, inputMode, autoComplete = true, ariaLabel, clearAriaLabel: clearAriaLabelOverride, name, value, placeholder, autoFocus, disabled, readOnly, disableBrowserAutocorrect, spellcheck, __noBorderRadius, __leftIcon, __leftIconVariant = 'subtle', __onLeftIconClick, ariaRequired, __rightIcon, __onRightIconClick, onKeyDown, onKeyUp, onChange, __onDelayedInput, __onBlurWithDetail, onBlur, onFocus, nativeInputAttributes, __internalRootRef, __inheritFormFieldProps, __injectAnalyticsComponentMetadata, __skipNativeAttributesWarnings, style } = _a, rest = __rest(_a, ["type", "step", "inputMode", "autoComplete", "ariaLabel", "clearAriaLabel", "name", "value", "placeholder", "autoFocus", "disabled", "readOnly", "disableBrowserAutocorrect", "spellcheck", "__noBorderRadius", "__leftIcon", "__leftIconVariant", "__onLeftIconClick", "ariaRequired", "__rightIcon", "__onRightIconClick", "onKeyDown", "onKeyUp", "onChange", "__onDelayedInput", "__onBlurWithDetail", "onBlur", "onFocus", "nativeInputAttributes", "__internalRootRef", "__inheritFormFieldProps", "__injectAnalyticsComponentMetadata", "__skipNativeAttributesWarnings", "style"]);
|
|
20
21
|
const baseProps = getBaseProps(rest);
|
|
21
22
|
const i18n = useInternalI18n('input');
|
|
22
23
|
const fireDelayedInput = useDebounceCallback((value) => fireNonCancelableEvent(__onDelayedInput, { value }));
|
|
@@ -102,7 +103,7 @@ function InternalInput(_a, ref) {
|
|
|
102
103
|
: copyAnalyticsMetadataAttribute(rest))),
|
|
103
104
|
__leftIcon && (React.createElement("span", { onClick: __onLeftIconClick, className: styles['input-icon-left'] },
|
|
104
105
|
React.createElement(InternalIcon, { name: __leftIcon, variant: disabled || readOnly ? 'disabled' : __leftIconVariant }))),
|
|
105
|
-
React.createElement(WithNativeAttributes, Object.assign({}, attributes, { tag: "input", componentName: "Input", nativeAttributes: nativeInputAttributes, skipWarnings: __skipNativeAttributesWarnings, ref: mergedRef })),
|
|
106
|
+
React.createElement(WithNativeAttributes, Object.assign({}, attributes, { tag: "input", componentName: "Input", nativeAttributes: nativeInputAttributes, skipWarnings: __skipNativeAttributesWarnings, ref: mergedRef, style: getInputStyles(style) })),
|
|
106
107
|
__rightIcon && (React.createElement("span", Object.assign({ className: styles['input-icon-right'] }, (__rightIcon === 'close'
|
|
107
108
|
? getAnalyticsMetadataAttribute({
|
|
108
109
|
action: 'clearInput',
|
package/input/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport {\n copyAnalyticsMetadataAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireKeyboardEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport WithNativeAttributes, { SkipWarnings } from '../internal/utils/with-native-attributes';\nimport {\n GeneratedAnalyticsMetadataInputClearInput,\n GeneratedAnalyticsMetadataInputComponent,\n} from './analytics-metadata/interfaces';\nimport { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';\nimport { convertAutoComplete, useSearchProps } from './utils';\n\nimport styles from './styles.css.js';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n Omit<InputProps, 'type'>,\n InputAutoCorrect,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n type?: InputProps['type'] | 'visualSearch';\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __onRightIconClick?: () => void;\n\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n __inheritFormFieldProps?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n __skipNativeAttributesWarnings?: SkipWarnings;\n}\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n clearAriaLabel: clearAriaLabelOverride,\n name,\n value,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n spellcheck,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n ariaRequired,\n\n __rightIcon,\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n nativeInputAttributes,\n __internalRootRef,\n __inheritFormFieldProps,\n __injectAnalyticsComponentMetadata,\n __skipNativeAttributesWarnings,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('input');\n const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n const handleChange = (value: string) => {\n fireDelayedInput(value);\n fireNonCancelableEvent(onChange, { value });\n };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n const formFieldContext = useFormFieldContext(rest);\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps\n ? formFieldContext\n : rest;\n\n const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n 'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n name,\n placeholder,\n autoFocus,\n id: controlId,\n className: clsx(\n styles.input,\n type && styles[`input-type-${type}`],\n __rightIcon && styles['input-has-icon-right'],\n __leftIcon && styles['input-has-icon-left'],\n __noBorderRadius && styles['input-has-no-border-radius'],\n {\n [styles['input-readonly']]: readOnly,\n [styles['input-invalid']]: invalid,\n [styles['input-warning']]: warning && !invalid,\n }\n ),\n autoComplete: convertAutoComplete(autoComplete),\n disabled,\n readOnly,\n type,\n step,\n inputMode,\n spellCheck: spellcheck,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value ?? '',\n onChange: onChange && (event => handleChange(event.target.value)),\n onBlur: e => {\n fireNonCancelableEvent(onBlur);\n fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n },\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n };\n\n if (type === 'number') {\n // Chrome and Safari have a weird built-in behavior of letting focused\n // number inputs be controlled by scrolling on them. However, they don't\n // lock the browser's scroll, so it's very easy to accidentally increment\n // the input while scrolling down the page.\n attributes.onWheel = event => event.currentTarget.blur();\n }\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n // ensure aria properties are string literal \"true\"\n if (ariaRequired) {\n attributes['aria-required'] = 'true';\n }\n if (invalid) {\n attributes['aria-invalid'] = 'true';\n }\n\n const mergedRef = useMergeRefs(ref, inputRef);\n\n // type = \"visualSearch\" renders a type=\"text' input\n if (attributes.type === 'visualSearch') {\n attributes.type = 'text';\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataInputComponent = {\n name: 'awsui.Input',\n label: 'input',\n properties: {\n value: value || '',\n },\n };\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles['input-container'])}\n ref={__internalRootRef}\n dir={type === 'email' ? 'ltr' : undefined}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : copyAnalyticsMetadataAttribute(rest))}\n >\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <WithNativeAttributes\n {...attributes}\n tag=\"input\"\n componentName=\"Input\"\n nativeAttributes={nativeInputAttributes}\n skipWarnings={__skipNativeAttributesWarnings}\n ref={mergedRef}\n />\n {__rightIcon && (\n <span\n className={styles['input-icon-right']}\n {...(__rightIcon === 'close'\n ? getAnalyticsMetadataAttribute({\n action: 'clearInput',\n } as Partial<GeneratedAnalyticsMetadataInputClearInput>)\n : {})}\n >\n <InternalButton\n // Used for test utils\n className={styles['input-button-right']}\n variant=\"inline-icon-pointer-target\"\n formAction=\"none\"\n iconName={__rightIcon}\n onClick={__onRightIconClick}\n ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n disabled={disabled}\n />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport {\n copyAnalyticsMetadataAttribute,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { fireKeyboardEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport WithNativeAttributes, { SkipWarnings } from '../internal/utils/with-native-attributes';\nimport {\n GeneratedAnalyticsMetadataInputClearInput,\n GeneratedAnalyticsMetadataInputComponent,\n} from './analytics-metadata/interfaces';\nimport { BaseChangeDetail, BaseInputProps, InputAutoCorrect, InputProps } from './interfaces';\nimport { getInputStyles } from './styles';\nimport { convertAutoComplete, useSearchProps } from './utils';\n\nimport styles from './styles.css.js';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n Omit<InputProps, 'type'>,\n InputAutoCorrect,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n type?: InputProps['type'] | 'visualSearch';\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __onRightIconClick?: () => void;\n\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n __inheritFormFieldProps?: boolean;\n __injectAnalyticsComponentMetadata?: boolean;\n __skipNativeAttributesWarnings?: SkipWarnings;\n}\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n clearAriaLabel: clearAriaLabelOverride,\n name,\n value,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n spellcheck,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n ariaRequired,\n\n __rightIcon,\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n nativeInputAttributes,\n __internalRootRef,\n __inheritFormFieldProps,\n __injectAnalyticsComponentMetadata,\n __skipNativeAttributesWarnings,\n style,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('input');\n const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n const handleChange = (value: string) => {\n fireDelayedInput(value);\n fireNonCancelableEvent(onChange, { value });\n };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n const formFieldContext = useFormFieldContext(rest);\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps\n ? formFieldContext\n : rest;\n\n const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n 'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n name,\n placeholder,\n autoFocus,\n id: controlId,\n className: clsx(\n styles.input,\n type && styles[`input-type-${type}`],\n __rightIcon && styles['input-has-icon-right'],\n __leftIcon && styles['input-has-icon-left'],\n __noBorderRadius && styles['input-has-no-border-radius'],\n {\n [styles['input-readonly']]: readOnly,\n [styles['input-invalid']]: invalid,\n [styles['input-warning']]: warning && !invalid,\n }\n ),\n autoComplete: convertAutoComplete(autoComplete),\n disabled,\n readOnly,\n type,\n step,\n inputMode,\n spellCheck: spellcheck,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value ?? '',\n onChange: onChange && (event => handleChange(event.target.value)),\n onBlur: e => {\n fireNonCancelableEvent(onBlur);\n fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n },\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n };\n\n if (type === 'number') {\n // Chrome and Safari have a weird built-in behavior of letting focused\n // number inputs be controlled by scrolling on them. However, they don't\n // lock the browser's scroll, so it's very easy to accidentally increment\n // the input while scrolling down the page.\n attributes.onWheel = event => event.currentTarget.blur();\n }\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n // ensure aria properties are string literal \"true\"\n if (ariaRequired) {\n attributes['aria-required'] = 'true';\n }\n if (invalid) {\n attributes['aria-invalid'] = 'true';\n }\n\n const mergedRef = useMergeRefs(ref, inputRef);\n\n // type = \"visualSearch\" renders a type=\"text' input\n if (attributes.type === 'visualSearch') {\n attributes.type = 'text';\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataInputComponent = {\n name: 'awsui.Input',\n label: 'input',\n properties: {\n value: value || '',\n },\n };\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles['input-container'])}\n ref={__internalRootRef}\n dir={type === 'email' ? 'ltr' : undefined}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : copyAnalyticsMetadataAttribute(rest))}\n >\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <WithNativeAttributes\n {...attributes}\n tag=\"input\"\n componentName=\"Input\"\n nativeAttributes={nativeInputAttributes}\n skipWarnings={__skipNativeAttributesWarnings}\n ref={mergedRef}\n style={getInputStyles(style)}\n />\n {__rightIcon && (\n <span\n className={styles['input-icon-right']}\n {...(__rightIcon === 'close'\n ? getAnalyticsMetadataAttribute({\n action: 'clearInput',\n } as Partial<GeneratedAnalyticsMetadataInputClearInput>)\n : {})}\n >\n <InternalButton\n // Used for test utils\n className={styles['input-button-right']}\n variant=\"inline-icon-pointer-target\"\n formAction=\"none\"\n iconName={__rightIcon}\n onClick={__onRightIconClick}\n ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n disabled={disabled}\n />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
|
package/input/styles.css.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"input": "
|
|
6
|
-
"input-readonly": "awsui_input-
|
|
7
|
-
"input-invalid": "awsui_input-
|
|
8
|
-
"input-has-icon-left": "awsui_input-has-icon-
|
|
9
|
-
"input-warning": "awsui_input-
|
|
10
|
-
"input-type-search": "awsui_input-type-
|
|
11
|
-
"input-has-icon-right": "awsui_input-has-icon-
|
|
12
|
-
"input-has-no-border-radius": "awsui_input-has-no-border-
|
|
13
|
-
"input-container": "awsui_input-
|
|
14
|
-
"input-icon-left": "awsui_input-icon-
|
|
15
|
-
"input-icon-right": "awsui_input-icon-
|
|
16
|
-
"input-button-right": "awsui_input-button-
|
|
4
|
+
"root": "awsui_root_2rhyz_1ok4u_145",
|
|
5
|
+
"input": "awsui_input_2rhyz_1ok4u_149",
|
|
6
|
+
"input-readonly": "awsui_input-readonly_2rhyz_1ok4u_203",
|
|
7
|
+
"input-invalid": "awsui_input-invalid_2rhyz_1ok4u_266",
|
|
8
|
+
"input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1ok4u_275",
|
|
9
|
+
"input-warning": "awsui_input-warning_2rhyz_1ok4u_278",
|
|
10
|
+
"input-type-search": "awsui_input-type-search_2rhyz_1ok4u_290",
|
|
11
|
+
"input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1ok4u_303",
|
|
12
|
+
"input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1ok4u_306",
|
|
13
|
+
"input-container": "awsui_input-container_2rhyz_1ok4u_313",
|
|
14
|
+
"input-icon-left": "awsui_input-icon-left_2rhyz_1ok4u_318",
|
|
15
|
+
"input-icon-right": "awsui_input-icon-right_2rhyz_1ok4u_325",
|
|
16
|
+
"input-button-right": "awsui_input-button-right_2rhyz_1ok4u_331"
|
|
17
17
|
};
|
|
18
18
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/input/styles.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,kBAiDxD"}
|
package/input/styles.js
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { SYSTEM } from '../internal/environment';
|
|
4
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
5
|
+
export function getInputStyles(style) {
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
|
|
7
|
+
let properties = {};
|
|
8
|
+
if ((style === null || style === void 0 ? void 0 : style.root) && SYSTEM === 'core') {
|
|
9
|
+
properties = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius, borderWidth: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderWidth, fontSize: (_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.fontSize, fontWeight: (_d = style === null || style === void 0 ? void 0 : style.root) === null || _d === void 0 ? void 0 : _d.fontWeight, paddingBlock: (_e = style === null || style === void 0 ? void 0 : style.root) === null || _e === void 0 ? void 0 : _e.paddingBlock, paddingInline: (_f = style === null || style === void 0 ? void 0 : style.root) === null || _f === void 0 ? void 0 : _f.paddingInline }, (((_g = style === null || style === void 0 ? void 0 : style.root) === null || _g === void 0 ? void 0 : _g.backgroundColor) && {
|
|
10
|
+
[customCssProps.styleBackgroundDefault]: (_h = style.root.backgroundColor) === null || _h === void 0 ? void 0 : _h.default,
|
|
11
|
+
[customCssProps.styleBackgroundDisabled]: (_j = style.root.backgroundColor) === null || _j === void 0 ? void 0 : _j.disabled,
|
|
12
|
+
[customCssProps.styleBackgroundHover]: (_k = style.root.backgroundColor) === null || _k === void 0 ? void 0 : _k.hover,
|
|
13
|
+
[customCssProps.styleBackgroundFocus]: (_l = style.root.backgroundColor) === null || _l === void 0 ? void 0 : _l.focus,
|
|
14
|
+
[customCssProps.styleBackgroundReadonly]: (_m = style.root.backgroundColor) === null || _m === void 0 ? void 0 : _m.readonly,
|
|
15
|
+
})), (((_o = style === null || style === void 0 ? void 0 : style.root) === null || _o === void 0 ? void 0 : _o.borderColor) && {
|
|
16
|
+
[customCssProps.styleBorderColorDefault]: (_p = style.root.borderColor) === null || _p === void 0 ? void 0 : _p.default,
|
|
17
|
+
[customCssProps.styleBorderColorDisabled]: (_q = style.root.borderColor) === null || _q === void 0 ? void 0 : _q.disabled,
|
|
18
|
+
[customCssProps.styleBorderColorHover]: (_r = style.root.borderColor) === null || _r === void 0 ? void 0 : _r.hover,
|
|
19
|
+
[customCssProps.styleBorderColorFocus]: (_s = style.root.borderColor) === null || _s === void 0 ? void 0 : _s.focus,
|
|
20
|
+
[customCssProps.styleBorderColorReadonly]: (_t = style.root.borderColor) === null || _t === void 0 ? void 0 : _t.readonly,
|
|
21
|
+
})), (((_u = style === null || style === void 0 ? void 0 : style.root) === null || _u === void 0 ? void 0 : _u.boxShadow) && {
|
|
22
|
+
[customCssProps.styleBoxShadowDefault]: (_v = style.root.boxShadow) === null || _v === void 0 ? void 0 : _v.default,
|
|
23
|
+
[customCssProps.styleBoxShadowDisabled]: (_w = style.root.boxShadow) === null || _w === void 0 ? void 0 : _w.disabled,
|
|
24
|
+
[customCssProps.styleBoxShadowHover]: (_x = style.root.boxShadow) === null || _x === void 0 ? void 0 : _x.hover,
|
|
25
|
+
[customCssProps.styleBoxShadowFocus]: (_y = style.root.boxShadow) === null || _y === void 0 ? void 0 : _y.focus,
|
|
26
|
+
[customCssProps.styleBoxShadowReadonly]: (_z = style.root.boxShadow) === null || _z === void 0 ? void 0 : _z.readonly,
|
|
27
|
+
})), (((_0 = style === null || style === void 0 ? void 0 : style.root) === null || _0 === void 0 ? void 0 : _0.color) && {
|
|
28
|
+
[customCssProps.styleColorDefault]: (_1 = style.root.color) === null || _1 === void 0 ? void 0 : _1.default,
|
|
29
|
+
[customCssProps.styleColorDisabled]: (_2 = style.root.color) === null || _2 === void 0 ? void 0 : _2.disabled,
|
|
30
|
+
[customCssProps.styleColorHover]: (_3 = style.root.color) === null || _3 === void 0 ? void 0 : _3.hover,
|
|
31
|
+
[customCssProps.styleColorFocus]: (_4 = style.root.color) === null || _4 === void 0 ? void 0 : _4.focus,
|
|
32
|
+
[customCssProps.styleColorReadonly]: (_5 = style.root.color) === null || _5 === void 0 ? void 0 : _5.readonly,
|
|
33
|
+
})), ((style === null || style === void 0 ? void 0 : style.placeholder) && {
|
|
34
|
+
[customCssProps.stylePlaceholderColor]: (_6 = style.placeholder) === null || _6 === void 0 ? void 0 : _6.color,
|
|
35
|
+
[customCssProps.stylePlaceholderFontSize]: (_7 = style.placeholder) === null || _7 === void 0 ? void 0 : _7.fontSize,
|
|
36
|
+
[customCssProps.stylePlaceholderFontWeight]: (_8 = style.placeholder) === null || _8 === void 0 ? void 0 : _8.fontWeight,
|
|
37
|
+
[customCssProps.stylePlaceholderFontStyle]: (_9 = style.placeholder) === null || _9 === void 0 ? void 0 : _9.fontStyle,
|
|
38
|
+
}));
|
|
39
|
+
return properties;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/input/styles.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { InputProps } from './interfaces';\n\nexport function getInputStyles(style: InputProps['style']) {\n let properties = {};\n\n if (style?.root && SYSTEM === 'core') {\n properties = {\n borderRadius: style?.root?.borderRadius,\n borderWidth: style?.root?.borderWidth,\n fontSize: style?.root?.fontSize,\n fontWeight: style?.root?.fontWeight,\n paddingBlock: style?.root?.paddingBlock,\n paddingInline: style?.root?.paddingInline,\n ...(style?.root?.backgroundColor && {\n [customCssProps.styleBackgroundDefault]: style.root.backgroundColor?.default,\n [customCssProps.styleBackgroundDisabled]: style.root.backgroundColor?.disabled,\n [customCssProps.styleBackgroundHover]: style.root.backgroundColor?.hover,\n [customCssProps.styleBackgroundFocus]: style.root.backgroundColor?.focus,\n [customCssProps.styleBackgroundReadonly]: style.root.backgroundColor?.readonly,\n }),\n ...(style?.root?.borderColor && {\n [customCssProps.styleBorderColorDefault]: style.root.borderColor?.default,\n [customCssProps.styleBorderColorDisabled]: style.root.borderColor?.disabled,\n [customCssProps.styleBorderColorHover]: style.root.borderColor?.hover,\n [customCssProps.styleBorderColorFocus]: style.root.borderColor?.focus,\n [customCssProps.styleBorderColorReadonly]: style.root.borderColor?.readonly,\n }),\n ...(style?.root?.boxShadow && {\n [customCssProps.styleBoxShadowDefault]: style.root.boxShadow?.default,\n [customCssProps.styleBoxShadowDisabled]: style.root.boxShadow?.disabled,\n [customCssProps.styleBoxShadowHover]: style.root.boxShadow?.hover,\n [customCssProps.styleBoxShadowFocus]: style.root.boxShadow?.focus,\n [customCssProps.styleBoxShadowReadonly]: style.root.boxShadow?.readonly,\n }),\n ...(style?.root?.color && {\n [customCssProps.styleColorDefault]: style.root.color?.default,\n [customCssProps.styleColorDisabled]: style.root.color?.disabled,\n [customCssProps.styleColorHover]: style.root.color?.hover,\n [customCssProps.styleColorFocus]: style.root.color?.focus,\n [customCssProps.styleColorReadonly]: style.root.color?.readonly,\n }),\n ...(style?.placeholder && {\n [customCssProps.stylePlaceholderColor]: style.placeholder?.color,\n [customCssProps.stylePlaceholderFontSize]: style.placeholder?.fontSize,\n [customCssProps.stylePlaceholderFontWeight]: style.placeholder?.fontWeight,\n [customCssProps.stylePlaceholderFontStyle]: style.placeholder?.fontStyle,\n }),\n };\n\n return properties;\n }\n}\n"]}
|
package/input/styles.scoped.css
CHANGED
|
@@ -142,11 +142,11 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
145
|
+
.awsui_root_2rhyz_1ok4u_145:not(#\9) {
|
|
146
146
|
/* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
.
|
|
149
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9) {
|
|
150
150
|
border-collapse: separate;
|
|
151
151
|
border-spacing: 0;
|
|
152
152
|
box-sizing: border-box;
|
|
@@ -178,141 +178,158 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
178
178
|
-moz-osx-font-smoothing: auto;
|
|
179
179
|
padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
|
|
180
180
|
padding-inline: var(--space-field-horizontal-0aq2ch, 12px);
|
|
181
|
-
color: var(--color-text-body-default-vvtq8u, #0f141a);
|
|
181
|
+
color: var(--awsui-style-color-default-b75yp7, var(--color-text-body-default-vvtq8u, #0f141a));
|
|
182
182
|
inline-size: 100%;
|
|
183
183
|
cursor: text;
|
|
184
184
|
box-sizing: border-box;
|
|
185
|
-
background-color: var(--color-background-input-default-ifz5bb, #ffffff);
|
|
185
|
+
background-color: var(--awsui-style-background-default-b75yp7, var(--color-background-input-default-ifz5bb, #ffffff));
|
|
186
186
|
border-start-start-radius: var(--border-radius-input-7q0str, 8px);
|
|
187
187
|
border-start-end-radius: var(--border-radius-input-7q0str, 8px);
|
|
188
188
|
border-end-start-radius: var(--border-radius-input-7q0str, 8px);
|
|
189
189
|
border-end-end-radius: var(--border-radius-input-7q0str, 8px);
|
|
190
|
-
border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-default-317xk5, #8c8c94);
|
|
191
|
-
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-default-317xk5, #8c8c94);
|
|
190
|
+
border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-default-b75yp7, var(--color-border-input-default-317xk5, #8c8c94));
|
|
191
|
+
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-default-b75yp7, var(--color-border-input-default-317xk5, #8c8c94));
|
|
192
|
+
box-shadow: var(--awsui-style-box-shadow-default-b75yp7);
|
|
192
193
|
font-size: var(--font-size-body-m-a7nh2n, 14px);
|
|
193
194
|
line-height: var(--line-height-body-m-2mh3ke, 20px);
|
|
194
195
|
block-size: var(--size-vertical-input-p1d7xx, 32px);
|
|
195
196
|
}
|
|
196
|
-
.
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
197
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):hover {
|
|
198
|
+
border-color: var(--awsui-style-border-color-hover-b75yp7, var(--awsui-style-border-color-default-b75yp7, var(--color-border-input-default-317xk5, #8c8c94)));
|
|
199
|
+
color: var(--awsui-style-color-hover-b75yp7, var(--awsui-style-border-color-default-b75yp7, var(--color-text-body-default-vvtq8u, #0f141a)));
|
|
200
|
+
background-color: var(--awsui-style-background-hover-b75yp7, var(--awsui-style-background-default-b75yp7, var(--color-background-input-default-ifz5bb, #ffffff)));
|
|
201
|
+
box-shadow: var(--awsui-style-box-shadow-hover-b75yp7, --awsui-style-box-shadow-default-b75yp7);
|
|
202
|
+
}
|
|
203
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-readonly_2rhyz_1ok4u_203:not(#\9) {
|
|
204
|
+
background-color: var(--awsui-style-background-readonly-b75yp7, var(--awsui-style-background-default-b75yp7, var(--color-background-input-default-ifz5bb, #ffffff)));
|
|
205
|
+
border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-readonly-b75yp7, var(--awsui-style-border-color-default-b75yp7, var(--color-border-input-disabled-zgnzvk, #ebebf0)));
|
|
206
|
+
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-readonly-b75yp7, var(--awsui-style-border-color-default-b75yp7, var(--color-border-input-disabled-zgnzvk, #ebebf0)));
|
|
207
|
+
color: var(--awsui-style-color-readonly-b75yp7, var(--awsui-style-color-default-b75yp7, var(--color-text-body-default-vvtq8u, #0f141a)));
|
|
208
|
+
box-shadow: var(--awsui-style-box-shadow-readonly-b75yp7);
|
|
200
209
|
}
|
|
201
|
-
.
|
|
202
|
-
color: var(--color-text-input-placeholder-dclg8u, #656871);
|
|
203
|
-
font-
|
|
210
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9)::-webkit-input-placeholder {
|
|
211
|
+
color: var(--awsui-style-placeholder-color-b75yp7, var(--color-text-input-placeholder-dclg8u, #656871));
|
|
212
|
+
font-size: var(--awsui-style-placeholder-font-size-b75yp7);
|
|
213
|
+
font-style: var(--awsui-style-placeholder-font-style-b75yp7, italic);
|
|
214
|
+
font-weight: var(--awsui-style-placeholder-font-weight-b75yp7);
|
|
204
215
|
-webkit-user-select: none;
|
|
205
216
|
user-select: none;
|
|
206
217
|
}
|
|
207
|
-
.
|
|
208
|
-
color: var(--color-text-input-placeholder-dclg8u, #656871);
|
|
209
|
-
font-
|
|
218
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9)::-moz-placeholder {
|
|
219
|
+
color: var(--awsui-style-placeholder-color-b75yp7, var(--color-text-input-placeholder-dclg8u, #656871));
|
|
220
|
+
font-size: var(--awsui-style-placeholder-font-size-b75yp7);
|
|
221
|
+
font-style: var(--awsui-style-placeholder-font-style-b75yp7, italic);
|
|
222
|
+
font-weight: var(--awsui-style-placeholder-font-weight-b75yp7);
|
|
210
223
|
opacity: 1;
|
|
211
224
|
}
|
|
212
|
-
.
|
|
213
|
-
color: var(--color-text-input-placeholder-dclg8u, #656871);
|
|
214
|
-
font-
|
|
225
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):-moz-placeholder {
|
|
226
|
+
color: var(--awsui-style-placeholder-color-b75yp7, var(--color-text-input-placeholder-dclg8u, #656871));
|
|
227
|
+
font-size: var(--awsui-style-placeholder-font-size-b75yp7);
|
|
228
|
+
font-style: var(--awsui-style-placeholder-font-style-b75yp7, italic);
|
|
229
|
+
font-weight: var(--awsui-style-placeholder-font-weight-b75yp7);
|
|
215
230
|
opacity: 1;
|
|
216
231
|
}
|
|
217
|
-
.
|
|
232
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):focus {
|
|
218
233
|
outline: 2px dotted transparent;
|
|
219
|
-
border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-focused-4z0pgn, #006ce0);
|
|
220
|
-
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-focused-4z0pgn, #006ce0);
|
|
234
|
+
border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-focus-b75yp7, var(--color-border-input-focused-4z0pgn, #006ce0));
|
|
235
|
+
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-focus-b75yp7, var(--color-border-input-focused-4z0pgn, #006ce0));
|
|
221
236
|
border-start-start-radius: var(--border-radius-input-7q0str, 8px);
|
|
222
237
|
border-start-end-radius: var(--border-radius-input-7q0str, 8px);
|
|
223
238
|
border-end-start-radius: var(--border-radius-input-7q0str, 8px);
|
|
224
239
|
border-end-end-radius: var(--border-radius-input-7q0str, 8px);
|
|
225
|
-
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0);
|
|
240
|
+
box-shadow: var(--awsui-style-box-shadow-focus-b75yp7, 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0));
|
|
241
|
+
color: var(--awsui-style-color-focus-b75yp7, var(--color-text-body-default-vvtq8u, #0f141a));
|
|
242
|
+
background-color: var(--awsui-style-background-focus-b75yp7, var(--color-background-input-default-ifz5bb, #ffffff));
|
|
226
243
|
}
|
|
227
|
-
.
|
|
228
|
-
background-color: var(--color-background-input-disabled-dihaja, #ebebf0);
|
|
229
|
-
border-block: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-disabled-zgnzvk, #ebebf0);
|
|
230
|
-
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--color-border-input-disabled-zgnzvk, #ebebf0);
|
|
231
|
-
color: var(--color-text-input-disabled-wh1f3y, #b4b4bb);
|
|
232
|
-
cursor: auto;
|
|
244
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):disabled {
|
|
245
|
+
background-color: var(--awsui-style-background-disabled-b75yp7, var(--color-background-input-disabled-dihaja, #ebebf0));
|
|
246
|
+
border-block: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-disabled-b75yp7, var(--color-border-input-disabled-zgnzvk, #ebebf0));
|
|
247
|
+
border-inline: var(--border-width-field-2xc78x, 1px) solid var(--awsui-style-border-color-disabled-b75yp7, var(--color-border-input-disabled-zgnzvk, #ebebf0));
|
|
248
|
+
color: var(--awsui-style-color-disabled-b75yp7, var(--color-text-input-disabled-wh1f3y, #b4b4bb));
|
|
233
249
|
cursor: default;
|
|
250
|
+
box-shadow: var(--awsui-style-box-shadow-disabled-b75yp7);
|
|
234
251
|
}
|
|
235
|
-
.
|
|
252
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):disabled::-webkit-input-placeholder {
|
|
236
253
|
color: var(--color-text-input-placeholder-disabled-wg87og, #b4b4bb);
|
|
237
254
|
-webkit-user-select: none;
|
|
238
255
|
user-select: none;
|
|
239
256
|
}
|
|
240
|
-
.
|
|
257
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):disabled::-moz-placeholder {
|
|
241
258
|
color: var(--color-text-input-placeholder-disabled-wg87og, #b4b4bb);
|
|
242
259
|
opacity: 1;
|
|
243
260
|
}
|
|
244
|
-
.
|
|
261
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):disabled:-moz-placeholder {
|
|
245
262
|
color: var(--color-text-input-placeholder-disabled-wg87og, #b4b4bb);
|
|
246
263
|
opacity: 1;
|
|
247
264
|
}
|
|
248
|
-
.
|
|
265
|
+
.awsui_input_2rhyz_1ok4u_149:not(#\9):invalid {
|
|
249
266
|
box-shadow: none;
|
|
250
267
|
}
|
|
251
|
-
.
|
|
268
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-invalid_2rhyz_1ok4u_266:not(#\9) {
|
|
252
269
|
color: var(--color-text-status-error-ksqavh, #db0000);
|
|
253
270
|
border-color: var(--color-text-status-error-ksqavh, #db0000);
|
|
254
271
|
padding-inline-start: calc(var(--space-field-horizontal-0aq2ch, 12px) - (var(--border-invalid-width-3xd6e1, 8px) - var(--border-width-field-2xc78x, 1px)));
|
|
255
272
|
border-inline-start-width: var(--border-invalid-width-3xd6e1, 8px);
|
|
256
273
|
}
|
|
257
|
-
.
|
|
274
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-invalid_2rhyz_1ok4u_266:not(#\9):focus {
|
|
258
275
|
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-9jjf96, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
|
|
259
276
|
}
|
|
260
|
-
.
|
|
277
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-invalid_2rhyz_1ok4u_266.awsui_input-has-icon-left_2rhyz_1ok4u_275:not(#\9) {
|
|
261
278
|
padding-inline-start: calc(var(--space-field-icon-offset-ikwzwx, 36px) - (var(--border-invalid-width-3xd6e1, 8px) - var(--border-width-field-2xc78x, 1px)));
|
|
262
279
|
}
|
|
263
|
-
.
|
|
280
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-warning_2rhyz_1ok4u_278:not(#\9) {
|
|
264
281
|
color: var(--color-text-status-warning-6meo06, #855900);
|
|
265
282
|
border-color: var(--color-text-status-warning-6meo06, #855900);
|
|
266
283
|
padding-inline-start: calc(var(--space-field-horizontal-0aq2ch, 12px) - (var(--border-invalid-width-3xd6e1, 8px) - var(--border-width-field-2xc78x, 1px)));
|
|
267
284
|
border-inline-start-width: var(--border-invalid-width-3xd6e1, 8px);
|
|
268
285
|
}
|
|
269
|
-
.
|
|
286
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-warning_2rhyz_1ok4u_278:not(#\9):focus {
|
|
270
287
|
box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-9jjf96, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
|
|
271
288
|
}
|
|
272
|
-
.
|
|
289
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-warning_2rhyz_1ok4u_278.awsui_input-has-icon-left_2rhyz_1ok4u_275:not(#\9) {
|
|
273
290
|
padding-inline-start: calc(var(--space-field-icon-offset-ikwzwx, 36px) - (var(--border-invalid-width-3xd6e1, 8px) - var(--border-width-field-2xc78x, 1px)));
|
|
274
291
|
}
|
|
275
|
-
.
|
|
292
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-type-search_2rhyz_1ok4u_290:not(#\9) {
|
|
276
293
|
box-sizing: border-box;
|
|
277
294
|
-webkit-appearance: none;
|
|
278
295
|
}
|
|
279
|
-
.
|
|
296
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-type-search_2rhyz_1ok4u_290:not(#\9)::-webkit-search-decoration {
|
|
280
297
|
-webkit-appearance: none;
|
|
281
298
|
}
|
|
282
|
-
.
|
|
299
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-type-search_2rhyz_1ok4u_290:not(#\9)::-webkit-search-cancel-button {
|
|
283
300
|
display: none;
|
|
284
301
|
}
|
|
285
|
-
.
|
|
302
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-has-icon-left_2rhyz_1ok4u_275:not(#\9) {
|
|
286
303
|
padding-inline-start: var(--space-field-icon-offset-ikwzwx, 36px);
|
|
287
304
|
}
|
|
288
|
-
.
|
|
305
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-has-icon-right_2rhyz_1ok4u_303:not(#\9) {
|
|
289
306
|
padding-inline-end: var(--space-field-icon-offset-ikwzwx, 36px);
|
|
290
307
|
}
|
|
291
|
-
.
|
|
308
|
+
.awsui_input_2rhyz_1ok4u_149.awsui_input-has-no-border-radius_2rhyz_1ok4u_306:not(#\9) {
|
|
292
309
|
border-start-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
|
|
293
310
|
border-start-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
|
|
294
311
|
border-end-start-radius: var(--border-radius-dropdown-fgc2a1, 8px);
|
|
295
312
|
border-end-end-radius: var(--border-radius-dropdown-fgc2a1, 8px);
|
|
296
313
|
}
|
|
297
314
|
|
|
298
|
-
.awsui_input-
|
|
315
|
+
.awsui_input-container_2rhyz_1ok4u_313:not(#\9) {
|
|
299
316
|
display: flex;
|
|
300
317
|
position: relative;
|
|
301
318
|
}
|
|
302
319
|
|
|
303
|
-
.awsui_input-icon-
|
|
320
|
+
.awsui_input-icon-left_2rhyz_1ok4u_318:not(#\9) {
|
|
304
321
|
position: absolute;
|
|
305
322
|
pointer-events: none;
|
|
306
323
|
inset-inline-start: var(--space-field-horizontal-0aq2ch, 12px);
|
|
307
324
|
inset-block-start: calc(50% - var(--line-height-body-m-2mh3ke, 20px) / 2);
|
|
308
325
|
}
|
|
309
326
|
|
|
310
|
-
.awsui_input-icon-
|
|
327
|
+
.awsui_input-icon-right_2rhyz_1ok4u_325:not(#\9) {
|
|
311
328
|
position: absolute;
|
|
312
329
|
inset-block-start: calc(calc(50% - var(--line-height-body-m-2mh3ke, 20px) / 2) - var(--space-xxxs-pajhad, 2px));
|
|
313
330
|
inset-inline-end: calc(var(--space-field-horizontal-0aq2ch, 12px) - var(--space-xxs-hwfkai, 4px));
|
|
314
331
|
}
|
|
315
332
|
|
|
316
|
-
.awsui_input-button-
|
|
333
|
+
.awsui_input-button-right_2rhyz_1ok4u_331:not(#\9) {
|
|
317
334
|
/* used in test-utils */
|
|
318
335
|
}
|
|
@@ -2,18 +2,18 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"input": "
|
|
7
|
-
"input-readonly": "awsui_input-
|
|
8
|
-
"input-invalid": "awsui_input-
|
|
9
|
-
"input-has-icon-left": "awsui_input-has-icon-
|
|
10
|
-
"input-warning": "awsui_input-
|
|
11
|
-
"input-type-search": "awsui_input-type-
|
|
12
|
-
"input-has-icon-right": "awsui_input-has-icon-
|
|
13
|
-
"input-has-no-border-radius": "awsui_input-has-no-border-
|
|
14
|
-
"input-container": "awsui_input-
|
|
15
|
-
"input-icon-left": "awsui_input-icon-
|
|
16
|
-
"input-icon-right": "awsui_input-icon-
|
|
17
|
-
"input-button-right": "awsui_input-button-
|
|
5
|
+
"root": "awsui_root_2rhyz_1ok4u_145",
|
|
6
|
+
"input": "awsui_input_2rhyz_1ok4u_149",
|
|
7
|
+
"input-readonly": "awsui_input-readonly_2rhyz_1ok4u_203",
|
|
8
|
+
"input-invalid": "awsui_input-invalid_2rhyz_1ok4u_266",
|
|
9
|
+
"input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1ok4u_275",
|
|
10
|
+
"input-warning": "awsui_input-warning_2rhyz_1ok4u_278",
|
|
11
|
+
"input-type-search": "awsui_input-type-search_2rhyz_1ok4u_290",
|
|
12
|
+
"input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1ok4u_303",
|
|
13
|
+
"input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1ok4u_306",
|
|
14
|
+
"input-container": "awsui_input-container_2rhyz_1ok4u_313",
|
|
15
|
+
"input-icon-left": "awsui_input-icon-left_2rhyz_1ok4u_318",
|
|
16
|
+
"input-icon-right": "awsui_input-icon-right_2rhyz_1ok4u_325",
|
|
17
|
+
"input-button-right": "awsui_input-button-right_2rhyz_1ok4u_331"
|
|
18
18
|
};
|
|
19
19
|
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"direction-button-wrapper": "awsui_direction-button-
|
|
5
|
-
"direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-
|
|
6
|
-
"direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-
|
|
7
|
-
"direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-
|
|
8
|
-
"direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-
|
|
9
|
-
"drag-handle-entry": "awsui_drag-handle-
|
|
10
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
11
|
-
"drag-handle-exit": "awsui_drag-handle-
|
|
12
|
-
"awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-
|
|
13
|
-
"direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-
|
|
14
|
-
"direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-
|
|
15
|
-
"direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-
|
|
16
|
-
"direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-
|
|
17
|
-
"contents": "
|
|
18
|
-
"portal-overlay": "awsui_portal-
|
|
19
|
-
"portal-overlay-contents": "awsui_portal-overlay-
|
|
20
|
-
"drag-handle": "awsui_drag-
|
|
21
|
-
"direction-button-wrapper-hidden": "awsui_direction-button-wrapper-
|
|
22
|
-
"direction-button": "awsui_direction-
|
|
23
|
-
"direction-button-disabled": "awsui_direction-button-
|
|
4
|
+
"direction-button-wrapper": "awsui_direction-button-wrapper_155yk_1fgav_169",
|
|
5
|
+
"direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_1fgav_189",
|
|
6
|
+
"direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_1fgav_189",
|
|
7
|
+
"direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_1fgav_189",
|
|
8
|
+
"direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_1fgav_189",
|
|
9
|
+
"drag-handle-entry": "awsui_drag-handle-entry_155yk_1fgav_1",
|
|
10
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_1fgav_1",
|
|
11
|
+
"drag-handle-exit": "awsui_drag-handle-exit_155yk_1fgav_1",
|
|
12
|
+
"awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_1fgav_1",
|
|
13
|
+
"direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_1fgav_229",
|
|
14
|
+
"direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_1fgav_233",
|
|
15
|
+
"direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_1fgav_237",
|
|
16
|
+
"direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_1fgav_248",
|
|
17
|
+
"contents": "awsui_contents_155yk_1fgav_259",
|
|
18
|
+
"portal-overlay": "awsui_portal-overlay_155yk_1fgav_263",
|
|
19
|
+
"portal-overlay-contents": "awsui_portal-overlay-contents_155yk_1fgav_271",
|
|
20
|
+
"drag-handle": "awsui_drag-handle_155yk_1fgav_275",
|
|
21
|
+
"direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_1fgav_288",
|
|
22
|
+
"direction-button": "awsui_direction-button_155yk_1fgav_169",
|
|
23
|
+
"direction-button-disabled": "awsui_direction-button-disabled_155yk_1fgav_331"
|
|
24
24
|
};
|
|
25
25
|
|