@cloudscape-design/components-themeable 3.0.1136 → 3.0.1138
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +103 -99
- package/lib/internal/scss/progress-bar/styles.scss +39 -25
- package/lib/internal/scss/radio-group/analytics-metadata/styles.scss +8 -0
- package/lib/internal/template/alert/styles.css.js +27 -27
- package/lib/internal/template/alert/styles.scoped.css +50 -50
- package/lib/internal/template/alert/styles.selectors.js +27 -27
- package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +32 -32
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
- package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
- package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +30 -30
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +87 -87
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +30 -30
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
- package/lib/internal/template/attribute-editor/index.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/index.js +2 -2
- package/lib/internal/template/attribute-editor/index.js.map +1 -1
- package/lib/internal/template/attribute-editor/interfaces.d.ts +8 -0
- package/lib/internal/template/attribute-editor/interfaces.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/interfaces.js.map +1 -1
- package/lib/internal/template/attribute-editor/internal.d.ts.map +1 -1
- package/lib/internal/template/attribute-editor/internal.js +9 -6
- package/lib/internal/template/attribute-editor/internal.js.map +1 -1
- package/lib/internal/template/attribute-editor/styles.css.js +15 -15
- package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
- package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
- package/lib/internal/template/button/styles.css.js +22 -22
- package/lib/internal/template/button/styles.scoped.css +256 -256
- package/lib/internal/template/button/styles.selectors.js +22 -22
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +16 -16
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +27 -27
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +16 -16
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +11 -11
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/content-layout/styles.css.js +14 -14
- package/lib/internal/template/content-layout/styles.scoped.css +27 -27
- package/lib/internal/template/content-layout/styles.selectors.js +14 -14
- package/lib/internal/template/flashbar/styles.css.js +50 -50
- package/lib/internal/template/flashbar/styles.scoped.css +187 -187
- package/lib/internal/template/flashbar/styles.selectors.js +50 -50
- package/lib/internal/template/header/analytics/use-table-integration.d.ts +2 -1
- package/lib/internal/template/header/analytics/use-table-integration.d.ts.map +1 -1
- package/lib/internal/template/header/analytics/use-table-integration.js +8 -1
- package/lib/internal/template/header/analytics/use-table-integration.js.map +1 -1
- package/lib/internal/template/header/interfaces.d.ts +2 -2
- package/lib/internal/template/header/interfaces.d.ts.map +1 -1
- package/lib/internal/template/header/interfaces.js.map +1 -1
- package/lib/internal/template/help-panel/styles.css.js +6 -6
- package/lib/internal/template/help-panel/styles.scoped.css +73 -73
- package/lib/internal/template/help-panel/styles.selectors.js +6 -6
- package/lib/internal/template/icon/generated/icons.d.ts +1 -0
- package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
- package/lib/internal/template/icon/generated/icons.js +3 -0
- package/lib/internal/template/icon/generated/icons.js.map +1 -1
- package/lib/internal/template/icon/interfaces.d.ts +1 -1
- package/lib/internal/template/icon/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon/interfaces.js.map +1 -1
- package/lib/internal/template/icon-provider/interfaces.d.ts +1 -0
- package/lib/internal/template/icon-provider/interfaces.d.ts.map +1 -1
- package/lib/internal/template/icon-provider/interfaces.js.map +1 -1
- package/lib/internal/template/input/styles.css.js +13 -13
- package/lib/internal/template/input/styles.scoped.css +65 -65
- package/lib/internal/template/input/styles.selectors.js +13 -13
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +20 -20
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +48 -48
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
- package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +4 -0
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/lib/internal/template/internal/generated/custom-css-properties/index.js +102 -98
- package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +50 -75
- package/lib/internal/template/internal/generated/styles/tokens.js +50 -75
- package/lib/internal/template/internal/generated/theming/index.cjs +305 -461
- package/lib/internal/template/internal/generated/theming/index.js +305 -461
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +103 -103
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/progress-bar/index.d.ts +1 -1
- package/lib/internal/template/progress-bar/index.d.ts.map +1 -1
- package/lib/internal/template/progress-bar/index.js +2 -2
- package/lib/internal/template/progress-bar/index.js.map +1 -1
- package/lib/internal/template/progress-bar/interfaces.d.ts +19 -0
- package/lib/internal/template/progress-bar/interfaces.d.ts.map +1 -1
- package/lib/internal/template/progress-bar/interfaces.js.map +1 -1
- package/lib/internal/template/progress-bar/internal.d.ts +2 -1
- package/lib/internal/template/progress-bar/internal.d.ts.map +1 -1
- package/lib/internal/template/progress-bar/internal.js +7 -3
- package/lib/internal/template/progress-bar/internal.js.map +1 -1
- package/lib/internal/template/progress-bar/styles.css.js +19 -19
- package/lib/internal/template/progress-bar/styles.d.ts +16 -0
- package/lib/internal/template/progress-bar/styles.d.ts.map +1 -0
- package/lib/internal/template/progress-bar/styles.js +33 -0
- package/lib/internal/template/progress-bar/styles.js.map +1 -0
- package/lib/internal/template/progress-bar/styles.scoped.css +56 -56
- package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
- package/lib/internal/template/radio-group/analytics-metadata/interfaces.d.ts +1 -0
- package/lib/internal/template/radio-group/analytics-metadata/interfaces.d.ts.map +1 -1
- package/lib/internal/template/radio-group/analytics-metadata/interfaces.js.map +1 -1
- package/lib/internal/template/radio-group/analytics-metadata/styles.css.js +6 -0
- package/lib/internal/template/radio-group/analytics-metadata/styles.scoped.css +7 -0
- package/lib/internal/template/radio-group/analytics-metadata/styles.selectors.js +7 -0
- package/lib/internal/template/radio-group/index.d.ts.map +1 -1
- package/lib/internal/template/radio-group/index.js +2 -0
- package/lib/internal/template/radio-group/index.js.map +1 -1
- package/lib/internal/template/radio-group/internal.d.ts.map +1 -1
- package/lib/internal/template/radio-group/internal.js +2 -1
- package/lib/internal/template/radio-group/internal.js.map +1 -1
- package/lib/internal/template/radio-group/styles.css.js +10 -10
- package/lib/internal/template/radio-group/styles.scoped.css +22 -22
- package/lib/internal/template/radio-group/styles.selectors.js +10 -10
- package/lib/internal/template/s3-resource-selector/index.d.ts.map +1 -1
- package/lib/internal/template/s3-resource-selector/index.js +2 -2
- package/lib/internal/template/s3-resource-selector/index.js.map +1 -1
- package/lib/internal/template/s3-resource-selector/interfaces.d.ts +8 -0
- package/lib/internal/template/s3-resource-selector/interfaces.d.ts.map +1 -1
- package/lib/internal/template/s3-resource-selector/interfaces.js.map +1 -1
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts +3 -0
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts.map +1 -1
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.js +8 -2
- package/lib/internal/template/s3-resource-selector/s3-in-context/index.js.map +1 -1
- package/lib/internal/template/slider/styles.css.js +26 -26
- package/lib/internal/template/slider/styles.scoped.css +86 -86
- package/lib/internal/template/slider/styles.selectors.js +26 -26
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +39 -39
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +66 -66
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/textarea/styles.css.js +5 -5
- package/lib/internal/template/textarea/styles.scoped.css +41 -41
- package/lib/internal/template/textarea/styles.selectors.js +5 -5
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +23 -23
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEtF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,mBAAmB,GAAG,IAAI,CAAC,CAAC,gDAAgD;AAIlF,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.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\n'use client';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { joinStrings } from '../internal/utils/strings';\nimport { throttle } from '../internal/utils/throttle';\nimport InternalLiveRegion from '../live-region/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { Progress, ResultState, SmallText } from './internal';\n\nimport styles from './styles.css.js';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n style,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar', {\n props: { variant },\n });\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-progress-bar-');\n\n const labelId = `${generatedName}-label`;\n const isInFlash = variant === 'flash';\n const isInProgressState = status === 'in-progress';\n\n const descriptionId = useUniqueId('progressbar-description-');\n const additionalInfoId = useUniqueId('progressbar-additional-info-');\n\n const [announcedValue, setAnnouncedValue] = useState('');\n const throttledAssertion = useMemo(() => {\n return throttle((value: ProgressBarProps['value']) => {\n setAnnouncedValue(`${value}%`);\n }, ASSERTION_FREQUENCY);\n }, []);\n\n useEffect(() => {\n throttledAssertion(value);\n }, [throttledAssertion, value]);\n\n if (isInFlash && resultButtonText) {\n warnOnce(\n 'ProgressBar',\n 'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n ref={__internalRootRef}\n >\n <div className={isInFlash ? styles['flash-container'] : undefined}>\n <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n {label}\n </div>\n {description && (\n <SmallText color={isInFlash ? 'inherit' : undefined} id={descriptionId}>\n {description}\n </SmallText>\n )}\n <div>\n {isInProgressState ? (\n <>\n <Progress\n value={value}\n ariaLabel={ariaLabel}\n ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n ariaDescribedby={joinStrings(\n description ? descriptionId : undefined,\n additionalInfo ? additionalInfoId : undefined,\n ariaDescribedby\n )}\n isInFlash={isInFlash}\n style={style}\n />\n <InternalLiveRegion hidden={true} tagName=\"span\" delay={0}>\n {label}\n {label ? ': ' : null}\n {announcedValue}\n </InternalLiveRegion>\n </>\n ) : (\n <InternalLiveRegion hidden={false} tagName=\"span\" delay={0}>\n <ResultState\n resultText={resultText}\n isInFlash={isInFlash}\n resultButtonText={resultButtonText}\n status={status}\n onClick={() => {\n fireNonCancelableEvent(onResultButtonClick);\n }}\n />\n </InternalLiveRegion>\n )}\n </div>\n </div>\n {additionalInfo && (\n <SmallText\n className={styles['additional-info']}\n color={isInFlash ? 'inherit' : undefined}\n id={additionalInfoId}\n >\n {additionalInfo}\n </SmallText>\n )}\n </div>\n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
|
|
@@ -68,9 +68,28 @@ export interface ProgressBarProps extends BaseComponentProps {
|
|
|
68
68
|
* Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.
|
|
69
69
|
*/
|
|
70
70
|
onResultButtonClick?: NonCancelableEventHandler;
|
|
71
|
+
/**
|
|
72
|
+
* @awsuiSystem core
|
|
73
|
+
*/
|
|
74
|
+
style?: ProgressBarProps.Style;
|
|
71
75
|
}
|
|
72
76
|
export declare namespace ProgressBarProps {
|
|
73
77
|
type Status = 'in-progress' | 'success' | 'error';
|
|
74
78
|
type Variant = 'standalone' | 'flash' | 'key-value';
|
|
79
|
+
interface Style {
|
|
80
|
+
progressBar?: {
|
|
81
|
+
backgroundColor?: string;
|
|
82
|
+
borderRadius?: string;
|
|
83
|
+
height?: string;
|
|
84
|
+
};
|
|
85
|
+
progressValue?: {
|
|
86
|
+
backgroundColor?: string;
|
|
87
|
+
};
|
|
88
|
+
progressPercentage?: {
|
|
89
|
+
color?: string;
|
|
90
|
+
fontSize?: string;
|
|
91
|
+
fontWeight?: string;
|
|
92
|
+
};
|
|
93
|
+
}
|
|
75
94
|
}
|
|
76
95
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAEhD;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;IAE3D,UAAiB,KAAK;QACpB,WAAW,CAAC,EAAE;YACZ,eAAe,CAAC,EAAE,MAAM,CAAC;YACzB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,eAAe,CAAC,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,kBAAkB,CAAC,EAAE;YACnB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;KACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n /**\n * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n */\n value?: number;\n\n /**\n * Specifies the status of the progress bar. You can set it to one of the following:\n *\n * - `\"in-progress\"` - Displays a progress bar.\n * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n * `resultText`, and a result button.\n */\n status?: ProgressBarProps.Status;\n\n /**\n * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n *\n * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n * Note that the result button isn't displayed when using this variant.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n * - `\"standalone\"` Use in all other cases. This is the default value.\n */\n variant?: ProgressBarProps.Variant;\n\n /**\n * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n * If `resultButtonText` is empty, the result button isn't displayed.\n *\n * Note: If you use the `flash` variant, the result button isn't displayed.\n * Add a button using the `action` property of the flashbar item instead.\n */\n resultButtonText?: string;\n\n /**\n * Adds an `aria-label` to the progress bar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the progress bar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the progress bar.\n */\n ariaDescribedby?: string;\n\n /**\n * Short description of the operation that appears at the top of the component.\n *\n * Make sure that you always provide a label for accessibility.\n */\n label?: React.ReactNode;\n\n /**\n * More detailed information about the operation that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Information that's displayed below the progress bar or status text.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Content that's displayed when `status` is set to `error` or `success`.\n */\n resultText?: React.ReactNode;\n\n /**\n * Called when the user clicks the result state button.\n *\n * Note: If you are using the `flash` variant, the result button isn't displayed.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n */\n onResultButtonClick?: NonCancelableEventHandler;\n}\n\nexport namespace ProgressBarProps {\n export type Status = 'in-progress' | 'success' | 'error';\n export type Variant = 'standalone' | 'flash' | 'key-value';\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n /**\n * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n */\n value?: number;\n\n /**\n * Specifies the status of the progress bar. You can set it to one of the following:\n *\n * - `\"in-progress\"` - Displays a progress bar.\n * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n * `resultText`, and a result button.\n */\n status?: ProgressBarProps.Status;\n\n /**\n * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n *\n * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n * Note that the result button isn't displayed when using this variant.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n * - `\"standalone\"` Use in all other cases. This is the default value.\n */\n variant?: ProgressBarProps.Variant;\n\n /**\n * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n * If `resultButtonText` is empty, the result button isn't displayed.\n *\n * Note: If you use the `flash` variant, the result button isn't displayed.\n * Add a button using the `action` property of the flashbar item instead.\n */\n resultButtonText?: string;\n\n /**\n * Adds an `aria-label` to the progress bar.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-labelledby` to the progress bar.\n */\n ariaLabelledby?: string;\n\n /**\n * Adds `aria-describedby` to the progress bar.\n */\n ariaDescribedby?: string;\n\n /**\n * Short description of the operation that appears at the top of the component.\n *\n * Make sure that you always provide a label for accessibility.\n */\n label?: React.ReactNode;\n\n /**\n * More detailed information about the operation that appears below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Information that's displayed below the progress bar or status text.\n */\n additionalInfo?: React.ReactNode;\n\n /**\n * Content that's displayed when `status` is set to `error` or `success`.\n */\n resultText?: React.ReactNode;\n\n /**\n * Called when the user clicks the result state button.\n *\n * Note: If you are using the `flash` variant, the result button isn't displayed.\n * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n */\n onResultButtonClick?: NonCancelableEventHandler;\n\n /**\n * @awsuiSystem core\n */\n style?: ProgressBarProps.Style;\n}\n\nexport namespace ProgressBarProps {\n export type Status = 'in-progress' | 'success' | 'error';\n export type Variant = 'standalone' | 'flash' | 'key-value';\n\n export interface Style {\n progressBar?: {\n backgroundColor?: string;\n borderRadius?: string;\n height?: string;\n };\n progressValue?: {\n backgroundColor?: string;\n };\n progressPercentage?: {\n color?: string;\n fontSize?: string;\n fontWeight?: string;\n };\n }\n}\n"]}
|
|
@@ -7,8 +7,9 @@ interface ProgressProps {
|
|
|
7
7
|
ariaLabel?: string;
|
|
8
8
|
ariaLabelledby?: string;
|
|
9
9
|
ariaDescribedby?: string;
|
|
10
|
+
style?: ProgressBarProps.Style;
|
|
10
11
|
}
|
|
11
|
-
export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: ProgressProps) => JSX.Element;
|
|
12
|
+
export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => JSX.Element;
|
|
12
13
|
interface SmallTextProps {
|
|
13
14
|
color?: BoxProps.Color;
|
|
14
15
|
id?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,GAAI,yEAAyE,aAAa,gBAuC9G,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,GAAI,oCAAoC,cAAc,gBAM3E,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,8DAA8D,gBAAgB,gBAqBzG,CAAC"}
|
|
@@ -5,18 +5,22 @@ import clsx from 'clsx';
|
|
|
5
5
|
import InternalBox from '../box/internal';
|
|
6
6
|
import { InternalButton } from '../button/internal';
|
|
7
7
|
import InternalStatusIndicator from '../status-indicator/internal';
|
|
8
|
+
import { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';
|
|
8
9
|
import styles from './styles.css.js';
|
|
9
10
|
const MAX_VALUE = 100;
|
|
10
11
|
const clamp = (value, lowerLimit, upperLimit) => {
|
|
11
12
|
return Math.max(Math.min(value, upperLimit), lowerLimit);
|
|
12
13
|
};
|
|
13
|
-
export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }) => {
|
|
14
|
+
export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }) => {
|
|
14
15
|
const roundedValue = Math.round(value);
|
|
15
16
|
const progressValue = clamp(roundedValue, 0, MAX_VALUE);
|
|
17
|
+
const progressBarStyles = getProgressStyles(style);
|
|
18
|
+
const progressValueStyles = getProgressValueStyles(style);
|
|
19
|
+
const progressPercentageStyles = getProgressPercentageStyles(style);
|
|
16
20
|
return (React.createElement("div", { className: styles['progress-container'] },
|
|
17
|
-
React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby }),
|
|
21
|
+
React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), max: MAX_VALUE, value: progressValue, "aria-label": ariaLabel, "aria-labelledby": !ariaLabel ? ariaLabelledby : undefined, "aria-describedby": ariaDescribedby, style: Object.assign(Object.assign({}, (progressBarStyles || {})), (progressValueStyles || {})) }),
|
|
18
22
|
React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
|
|
19
|
-
React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, `${progressValue}%`))));
|
|
23
|
+
React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined, nativeAttributes: progressPercentageStyles ? { style: progressPercentageStyles } : undefined }, `${progressValue}%`))));
|
|
20
24
|
};
|
|
21
25
|
export const SmallText = ({ color, children, className, id }) => {
|
|
22
26
|
return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color, id: id }, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAElG,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,UAAkB,EAAE,UAAkB,EAAE,EAAE;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;AAC3D,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,KAAK,EAAiB,EAAE,EAAE;IACjH,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;IAExD,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,wBAAwB,GAAG,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAEpE,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC;QAC1C,kCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,aAAa,IAAI,SAAS,IAAI,MAAM,CAAC,QAAQ,EAC7C,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CACzC,EACD,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,aAAa,gBACR,SAAS,qBAEJ,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,sBACtC,eAAe,EACjC,KAAK,kCACA,CAAC,iBAAiB,IAAI,EAAE,CAAC,GACzB,CAAC,mBAAmB,IAAI,EAAE,CAAC,IAEhC;QACF,6CAAkB,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;YAChE,oBAAC,WAAW,IACV,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,gBAAgB,EAAE,wBAAwB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,wBAAwB,EAAE,CAAC,CAAC,CAAC,SAAS,IAE3F,GAAG,aAAa,GAAG,CACR,CACT,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AASF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAkB,EAAE,EAAE;IAC9E,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,IAC/G,QAAQ,CACG,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAe,EAAE,EAAE;IAC1D,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;QACrC,oBAAC,cAAc,IAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,IAC/C,QAAQ,CACM,CACb,CACP,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,OAAO,EAAoB,EAAE,EAAE;IAC5G,MAAM,eAAe,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAE3C,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,MAAM,EAAE,CAAC;YAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAAG,UAAU,CAAQ,CACvD,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,MAAM,EAAE,CAAC;QAClD,8BAAM,SAAS,EAAE,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC;YACpE,oBAAC,uBAAuB,IAAC,IAAI,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;gBACvE,8BAAM,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,IAAG,UAAU,CAAQ,CACnC,CACrB;QACN,eAAe,IAAI,oBAAC,YAAY,IAAC,OAAO,EAAE,OAAO,IAAG,gBAAgB,CAAgB,CACjF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from './styles';\n\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n value: number;\n isInFlash: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n style?: ProgressBarProps.Style;\n}\n\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby, style }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n const progressBarStyles = getProgressStyles(style);\n const progressValueStyles = getProgressValueStyles(style);\n const progressPercentageStyles = getProgressPercentageStyles(style);\n\n return (\n <div className={styles['progress-container']}>\n <progress\n className={clsx(\n styles.progress,\n progressValue >= MAX_VALUE && styles.complete,\n isInFlash && styles['progress-in-flash']\n )}\n max={MAX_VALUE}\n value={progressValue}\n aria-label={ariaLabel}\n // Ensures aria-label takes precedence over aria-labelledby\n aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n aria-describedby={ariaDescribedby}\n style={{\n ...(progressBarStyles || {}),\n ...(progressValueStyles || {}),\n }}\n />\n <span aria-hidden=\"true\" className={styles['percentage-container']}>\n <InternalBox\n className={styles.percentage}\n variant=\"small\"\n color={isInFlash ? 'inherit' : undefined}\n nativeAttributes={progressPercentageStyles ? { style: progressPercentageStyles } : undefined}\n >\n {`${progressValue}%`}\n </InternalBox>\n </span>\n </div>\n );\n};\n\ninterface SmallTextProps {\n color?: BoxProps.Color;\n id?: string;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const SmallText = ({ color, children, className, id }: SmallTextProps) => {\n return (\n <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color} id={id}>\n {children}\n </InternalBox>\n );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n return (\n <div className={styles['result-button']}>\n <InternalButton formAction=\"none\" onClick={onClick}>\n {children}\n </InternalButton>\n </div>\n );\n};\n\ninterface ResultStateProps {\n isInFlash: boolean;\n resultText: React.ReactNode;\n resultButtonText?: string;\n status: ProgressBarProps.Status;\n onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n const hasResultButton = !!resultButtonText;\n\n if (isInFlash) {\n return (\n <div className={styles[`result-container-${status}`]}>\n <span className={styles['result-text']}>{resultText}</span>\n </div>\n );\n }\n\n return (\n <div className={styles[`result-container-${status}`]}>\n <span className={clsx(hasResultButton && styles['with-result-button'])}>\n <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n <span className={styles['result-text']}>{resultText}</span>\n </InternalStatusIndicator>\n </span>\n {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n </div>\n );\n};\n"]}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"progress": "
|
|
5
|
-
"result-state": "awsui_result-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"root": "
|
|
8
|
-
"with-result-button": "awsui_with-result-
|
|
9
|
-
"result-text": "awsui_result-
|
|
10
|
-
"result-container-error": "awsui_result-container-
|
|
11
|
-
"result-container-success": "awsui_result-container-
|
|
12
|
-
"result-button": "awsui_result-
|
|
13
|
-
"word-wrap": "awsui_word-
|
|
14
|
-
"label-flash": "awsui_label-
|
|
15
|
-
"label-key-value": "awsui_label-key-
|
|
16
|
-
"flash": "
|
|
17
|
-
"progress-container": "awsui_progress-
|
|
18
|
-
"percentage-container": "awsui_percentage-
|
|
19
|
-
"percentage": "
|
|
20
|
-
"complete": "
|
|
21
|
-
"progress-in-flash": "awsui_progress-in-
|
|
22
|
-
"additional-info": "awsui_additional-
|
|
4
|
+
"progress": "awsui_progress_11huc_7glv4_189",
|
|
5
|
+
"result-state": "awsui_result-state_11huc_7glv4_203",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_7glv4_1",
|
|
7
|
+
"root": "awsui_root_11huc_7glv4_225",
|
|
8
|
+
"with-result-button": "awsui_with-result-button_11huc_7glv4_257",
|
|
9
|
+
"result-text": "awsui_result-text_11huc_7glv4_261",
|
|
10
|
+
"result-container-error": "awsui_result-container-error_11huc_7glv4_265",
|
|
11
|
+
"result-container-success": "awsui_result-container-success_11huc_7glv4_265",
|
|
12
|
+
"result-button": "awsui_result-button_11huc_7glv4_269",
|
|
13
|
+
"word-wrap": "awsui_word-wrap_11huc_7glv4_275",
|
|
14
|
+
"label-flash": "awsui_label-flash_11huc_7glv4_280",
|
|
15
|
+
"label-key-value": "awsui_label-key-value_11huc_7glv4_284",
|
|
16
|
+
"flash": "awsui_flash_11huc_7glv4_292",
|
|
17
|
+
"progress-container": "awsui_progress-container_11huc_7glv4_296",
|
|
18
|
+
"percentage-container": "awsui_percentage-container_11huc_7glv4_303",
|
|
19
|
+
"percentage": "awsui_percentage_11huc_7glv4_303",
|
|
20
|
+
"complete": "awsui_complete_11huc_7glv4_349",
|
|
21
|
+
"progress-in-flash": "awsui_progress-in-flash_11huc_7glv4_362",
|
|
22
|
+
"additional-info": "awsui_additional-info_11huc_7glv4_375"
|
|
23
23
|
};
|
|
24
24
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
2
|
+
import { ProgressBarProps } from './interfaces';
|
|
3
|
+
export declare function getProgressStyles(style: ProgressBarProps['style']): {
|
|
4
|
+
[customCssProps.progressBarBackgroundColor]: string | undefined;
|
|
5
|
+
[customCssProps.progressBarBorderRadius]: string | undefined;
|
|
6
|
+
[customCssProps.progressBarHeight]: string | undefined;
|
|
7
|
+
} | undefined;
|
|
8
|
+
export declare function getProgressValueStyles(style: ProgressBarProps['style']): {
|
|
9
|
+
[customCssProps.progressValueBackgroundColor]: string | undefined;
|
|
10
|
+
} | undefined;
|
|
11
|
+
export declare function getProgressPercentageStyles(style: ProgressBarProps['style']): {
|
|
12
|
+
color: string | undefined;
|
|
13
|
+
fontSize: string | undefined;
|
|
14
|
+
fontWeight: string | undefined;
|
|
15
|
+
} | undefined;
|
|
16
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAM9D,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAAmC;IAC9E,CAAC,cAAc,CAAC,uBAAuB,CAAC,qBAAgC;IACxE,CAAC,cAAc,CAAC,iBAAiB,CAAC,qBAA0B;cAE/D;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAMnE,CAAC,cAAc,CAAC,4BAA4B,CAAC,qBAAqC;cAErF;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;;;;cAU3E"}
|
|
@@ -0,0 +1,33 @@
|
|
|
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 getProgressStyles(style) {
|
|
6
|
+
if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressBar)) {
|
|
7
|
+
return undefined;
|
|
8
|
+
}
|
|
9
|
+
return {
|
|
10
|
+
[customCssProps.progressBarBackgroundColor]: style.progressBar.backgroundColor,
|
|
11
|
+
[customCssProps.progressBarBorderRadius]: style.progressBar.borderRadius,
|
|
12
|
+
[customCssProps.progressBarHeight]: style.progressBar.height,
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
export function getProgressValueStyles(style) {
|
|
16
|
+
if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressValue)) {
|
|
17
|
+
return undefined;
|
|
18
|
+
}
|
|
19
|
+
return {
|
|
20
|
+
[customCssProps.progressValueBackgroundColor]: style.progressValue.backgroundColor,
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export function getProgressPercentageStyles(style) {
|
|
24
|
+
if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.progressPercentage)) {
|
|
25
|
+
return undefined;
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
color: style.progressPercentage.color,
|
|
29
|
+
fontSize: style.progressPercentage.fontSize,
|
|
30
|
+
fontWeight: style.progressPercentage.fontWeight,
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/progress-bar/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,iBAAiB,CAAC,KAAgC;IAChE,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,EAAE,CAAC;QAC7C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,eAAe;QAC9E,CAAC,cAAc,CAAC,uBAAuB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,YAAY;QACxE,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM;KAC7D,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,KAAgC;IACrE,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAA,EAAE,CAAC;QAC/C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,CAAC,cAAc,CAAC,4BAA4B,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe;KACnF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,2BAA2B,CAAC,KAAgC;IAC1E,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,kBAAkB,CAAA,EAAE,CAAC;QACpD,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,KAAK;QACrC,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,QAAQ;QAC3C,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,UAAU;KAChD,CAAC;AACJ,CAAC","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 { ProgressBarProps } from './interfaces';\n\nexport function getProgressStyles(style: ProgressBarProps['style']) {\n if (SYSTEM !== 'core' || !style?.progressBar) {\n return undefined;\n }\n\n return {\n [customCssProps.progressBarBackgroundColor]: style.progressBar.backgroundColor,\n [customCssProps.progressBarBorderRadius]: style.progressBar.borderRadius,\n [customCssProps.progressBarHeight]: style.progressBar.height,\n };\n}\n\nexport function getProgressValueStyles(style: ProgressBarProps['style']) {\n if (SYSTEM !== 'core' || !style?.progressValue) {\n return undefined;\n }\n\n return {\n [customCssProps.progressValueBackgroundColor]: style.progressValue.backgroundColor,\n };\n}\n\nexport function getProgressPercentageStyles(style: ProgressBarProps['style']) {\n if (SYSTEM !== 'core' || !style?.progressPercentage) {\n return undefined;\n }\n\n return {\n color: style.progressPercentage.color,\n fontSize: style.progressPercentage.fontSize,\n fontWeight: style.progressPercentage.fontWeight,\n };\n}\n"]}
|
|
@@ -186,27 +186,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
186
186
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
187
187
|
SPDX-License-Identifier: Apache-2.0
|
|
188
188
|
*/
|
|
189
|
-
.
|
|
189
|
+
.awsui_progress_11huc_7glv4_189:not(#\9)::-webkit-progress-value {
|
|
190
190
|
-webkit-transition: width var(--motion-duration-moderate-24bai8, 135ms) linear;
|
|
191
191
|
transition: width var(--motion-duration-moderate-24bai8, 135ms) linear;
|
|
192
192
|
}
|
|
193
193
|
@media (prefers-reduced-motion: reduce) {
|
|
194
|
-
.
|
|
194
|
+
.awsui_progress_11huc_7glv4_189:not(#\9)::-webkit-progress-value {
|
|
195
195
|
animation: none;
|
|
196
196
|
-webkit-transition: none;
|
|
197
197
|
transition: none;
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
|
-
.awsui-motion-disabled .
|
|
200
|
+
.awsui-motion-disabled .awsui_progress_11huc_7glv4_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_7glv4_189:not(#\9)::-webkit-progress-value {
|
|
201
201
|
animation: none;
|
|
202
202
|
-webkit-transition: none;
|
|
203
203
|
transition: none;
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
.awsui_result-
|
|
207
|
-
animation: awsui_awsui-motion-fade-
|
|
206
|
+
.awsui_result-state_11huc_7glv4_203:not(#\9) {
|
|
207
|
+
animation: awsui_awsui-motion-fade-in_11huc_7glv4_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
|
|
208
208
|
}
|
|
209
|
-
@keyframes awsui_awsui-motion-fade-
|
|
209
|
+
@keyframes awsui_awsui-motion-fade-in_11huc_7glv4_1 {
|
|
210
210
|
from {
|
|
211
211
|
opacity: 0.2;
|
|
212
212
|
}
|
|
@@ -215,17 +215,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
@media (prefers-reduced-motion: reduce) {
|
|
218
|
-
.awsui_result-
|
|
218
|
+
.awsui_result-state_11huc_7glv4_203:not(#\9) {
|
|
219
219
|
animation: none;
|
|
220
220
|
transition: none;
|
|
221
221
|
}
|
|
222
222
|
}
|
|
223
|
-
.awsui-motion-disabled .awsui_result-
|
|
223
|
+
.awsui-motion-disabled .awsui_result-state_11huc_7glv4_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_7glv4_203:not(#\9) {
|
|
224
224
|
animation: none;
|
|
225
225
|
transition: none;
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
-
.
|
|
228
|
+
.awsui_root_11huc_7glv4_225:not(#\9) {
|
|
229
229
|
border-collapse: separate;
|
|
230
230
|
border-spacing: 0;
|
|
231
231
|
box-sizing: border-box;
|
|
@@ -257,34 +257,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
257
257
|
-moz-osx-font-smoothing: auto;
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
-
.awsui_with-result-
|
|
260
|
+
.awsui_with-result-button_11huc_7glv4_257:not(#\9) {
|
|
261
261
|
padding-inline-end: var(--space-m-n2lypl, 16px);
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
-
.awsui_result-
|
|
264
|
+
.awsui_result-text_11huc_7glv4_261:not(#\9) {
|
|
265
265
|
/* used in test-utils */
|
|
266
266
|
}
|
|
267
267
|
|
|
268
|
-
.awsui_result-container-
|
|
268
|
+
.awsui_result-container-error_11huc_7glv4_265:not(#\9), .awsui_result-container-success_11huc_7glv4_265:not(#\9) {
|
|
269
269
|
/* used in test-utils */
|
|
270
270
|
}
|
|
271
271
|
|
|
272
|
-
.awsui_result-
|
|
272
|
+
.awsui_result-button_11huc_7glv4_269:not(#\9) {
|
|
273
273
|
display: inline-block;
|
|
274
274
|
margin-block: var(--space-scaled-xxs-jatbiv, 4px);
|
|
275
275
|
margin-inline: 0;
|
|
276
276
|
}
|
|
277
277
|
|
|
278
|
-
.awsui_word-
|
|
278
|
+
.awsui_word-wrap_11huc_7glv4_275:not(#\9) {
|
|
279
279
|
min-inline-size: 0;
|
|
280
280
|
word-break: break-word;
|
|
281
281
|
}
|
|
282
282
|
|
|
283
|
-
.awsui_label-
|
|
283
|
+
.awsui_label-flash_11huc_7glv4_280:not(#\9) {
|
|
284
284
|
color: inherit;
|
|
285
285
|
font-weight: 700;
|
|
286
286
|
}
|
|
287
|
-
.awsui_label-key-
|
|
287
|
+
.awsui_label-key-value_11huc_7glv4_284:not(#\9) {
|
|
288
288
|
font-size: var(--font-size-body-m-vv54cm, 14px);
|
|
289
289
|
line-height: var(--line-height-body-m-bedeoh, 22px);
|
|
290
290
|
font-weight: var(--font-display-label-weight-ise9n2, 400);
|
|
@@ -292,18 +292,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
292
292
|
margin-block-end: var(--space-scaled-xxxs-prgw5k, 2px);
|
|
293
293
|
}
|
|
294
294
|
|
|
295
|
-
.
|
|
295
|
+
.awsui_flash_11huc_7glv4_292:not(#\9) {
|
|
296
296
|
color: inherit;
|
|
297
297
|
}
|
|
298
298
|
|
|
299
|
-
.awsui_progress-
|
|
299
|
+
.awsui_progress-container_11huc_7glv4_296:not(#\9) {
|
|
300
300
|
display: flex;
|
|
301
301
|
align-items: center;
|
|
302
302
|
max-inline-size: 800px;
|
|
303
303
|
block-size: var(--line-height-body-m-bedeoh, 22px);
|
|
304
304
|
}
|
|
305
305
|
|
|
306
|
-
.awsui_percentage-
|
|
306
|
+
.awsui_percentage-container_11huc_7glv4_303:not(#\9) {
|
|
307
307
|
inline-size: 33px;
|
|
308
308
|
flex-shrink: 0;
|
|
309
309
|
white-space: nowrap;
|
|
@@ -313,68 +313,68 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
313
313
|
letter-spacing: var(--letter-spacing-body-s-egrcsd, normal);
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
.
|
|
316
|
+
.awsui_percentage_11huc_7glv4_303:not(#\9) {
|
|
317
317
|
/* used in test-utils */
|
|
318
318
|
}
|
|
319
319
|
|
|
320
|
-
.
|
|
320
|
+
.awsui_progress_11huc_7glv4_189:not(#\9) {
|
|
321
321
|
inline-size: 100%;
|
|
322
322
|
margin-inline-end: var(--space-s-4a5hs8, 12px);
|
|
323
323
|
min-inline-size: 0;
|
|
324
|
-
block-size: 4px;
|
|
324
|
+
block-size: var(--awsui-progress-bar-height-9t5olz, 4px);
|
|
325
325
|
border-block: 0;
|
|
326
326
|
border-inline: none;
|
|
327
327
|
box-sizing: border-box;
|
|
328
|
-
border-start-start-radius: 10px;
|
|
329
|
-
border-start-end-radius: 10px;
|
|
330
|
-
border-end-start-radius: 10px;
|
|
331
|
-
border-end-end-radius: 10px;
|
|
332
|
-
background-color: var(--color-background-progress-bar-layout-default-ydn5oo, #eaeded);
|
|
328
|
+
border-start-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
329
|
+
border-start-end-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
330
|
+
border-end-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
331
|
+
border-end-end-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
332
|
+
background-color: var(--awsui-progress-bar-background-color-9t5olz, var(--color-background-progress-bar-layout-default-ydn5oo, #eaeded));
|
|
333
333
|
}
|
|
334
|
-
.
|
|
335
|
-
block-size: 4px;
|
|
334
|
+
.awsui_progress_11huc_7glv4_189:not(#\9)::-webkit-progress-bar {
|
|
335
|
+
block-size: var(--awsui-progress-bar-height-9t5olz, 4px);
|
|
336
336
|
border-block: 0;
|
|
337
337
|
border-inline: none;
|
|
338
338
|
box-sizing: border-box;
|
|
339
|
-
border-start-start-radius: 10px;
|
|
340
|
-
border-start-end-radius: 10px;
|
|
341
|
-
border-end-start-radius: 10px;
|
|
342
|
-
border-end-end-radius: 10px;
|
|
343
|
-
background-color: var(--color-background-progress-bar-layout-default-ydn5oo, #eaeded);
|
|
339
|
+
border-start-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
340
|
+
border-start-end-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
341
|
+
border-end-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
342
|
+
border-end-end-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
343
|
+
background-color: var(--awsui-progress-bar-background-color-9t5olz, var(--color-background-progress-bar-layout-default-ydn5oo, #eaeded));
|
|
344
344
|
}
|
|
345
|
-
.
|
|
346
|
-
border-start-start-radius: 10px;
|
|
345
|
+
.awsui_progress_11huc_7glv4_189:not(#\9)::-webkit-progress-value {
|
|
346
|
+
border-start-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
347
347
|
border-start-end-radius: 0;
|
|
348
|
-
border-end-start-radius: 10px;
|
|
348
|
+
border-end-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
349
349
|
border-end-end-radius: 0;
|
|
350
|
-
background-color: var(--color-background-progress-bar-content-default-e6lde4, #0073bb);
|
|
350
|
+
background-color: var(--awsui-progress-value-background-color-9t5olz, var(--color-background-progress-bar-content-default-e6lde4, #0073bb));
|
|
351
351
|
}
|
|
352
|
-
.
|
|
353
|
-
border-start-start-radius: 10px;
|
|
354
|
-
border-start-end-radius: 10px;
|
|
355
|
-
border-end-start-radius: 10px;
|
|
356
|
-
border-end-end-radius: 10px;
|
|
352
|
+
.awsui_progress_11huc_7glv4_189.awsui_complete_11huc_7glv4_349:not(#\9)::-webkit-progress-value {
|
|
353
|
+
border-start-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
354
|
+
border-start-end-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
355
|
+
border-end-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
356
|
+
border-end-end-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
357
357
|
}
|
|
358
|
-
.
|
|
359
|
-
border-start-start-radius: 10px;
|
|
358
|
+
.awsui_progress_11huc_7glv4_189:not(#\9)::-moz-progress-bar {
|
|
359
|
+
border-start-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
360
360
|
border-start-end-radius: 0;
|
|
361
|
-
border-end-start-radius: 10px;
|
|
361
|
+
border-end-start-radius: var(--awsui-progress-bar-border-radius-9t5olz, 10px);
|
|
362
362
|
border-end-end-radius: 0;
|
|
363
|
-
background-color: var(--color-background-progress-bar-content-default-e6lde4, #0073bb);
|
|
363
|
+
background-color: var(--awsui-progress-value-background-color-9t5olz, var(--color-background-progress-bar-content-default-e6lde4, #0073bb));
|
|
364
364
|
}
|
|
365
|
-
.
|
|
366
|
-
background-color: var(--color-background-progress-bar-layout-in-flash-3zz9tl, rgba(255, 255, 255, 0.25));
|
|
365
|
+
.awsui_progress_11huc_7glv4_189.awsui_progress-in-flash_11huc_7glv4_362:not(#\9) {
|
|
366
|
+
background-color: var(--awsui-progress-bar-background-color-9t5olz, var(--color-background-progress-bar-layout-in-flash-3zz9tl, rgba(255, 255, 255, 0.25)));
|
|
367
367
|
}
|
|
368
|
-
.
|
|
369
|
-
background-color: var(--color-background-progress-bar-content-in-flash-35l1ep, rgba(255, 255, 255, 0.7));
|
|
368
|
+
.awsui_progress_11huc_7glv4_189.awsui_progress-in-flash_11huc_7glv4_362:not(#\9)::-moz-progress-bar {
|
|
369
|
+
background-color: var(--awsui-progress-value-background-color-9t5olz, var(--color-background-progress-bar-content-in-flash-35l1ep, rgba(255, 255, 255, 0.7)));
|
|
370
370
|
}
|
|
371
|
-
.
|
|
372
|
-
background-color: var(--color-background-progress-bar-layout-in-flash-3zz9tl, rgba(255, 255, 255, 0.25));
|
|
371
|
+
.awsui_progress_11huc_7glv4_189.awsui_progress-in-flash_11huc_7glv4_362:not(#\9)::-webkit-progress-bar {
|
|
372
|
+
background-color: var(--awsui-progress-bar-background-color-9t5olz, var(--color-background-progress-bar-layout-in-flash-3zz9tl, rgba(255, 255, 255, 0.25)));
|
|
373
373
|
}
|
|
374
|
-
.
|
|
375
|
-
background-color: var(--color-background-progress-bar-content-in-flash-35l1ep, rgba(255, 255, 255, 0.7));
|
|
374
|
+
.awsui_progress_11huc_7glv4_189.awsui_progress-in-flash_11huc_7glv4_362:not(#\9)::-webkit-progress-value {
|
|
375
|
+
background-color: var(--awsui-progress-value-background-color-9t5olz, var(--color-background-progress-bar-content-in-flash-35l1ep, rgba(255, 255, 255, 0.7)));
|
|
376
376
|
}
|
|
377
377
|
|
|
378
|
-
.awsui_additional-
|
|
378
|
+
.awsui_additional-info_11huc_7glv4_375:not(#\9) {
|
|
379
379
|
/* used in test-utils */
|
|
380
380
|
}
|
|
@@ -2,24 +2,24 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"progress": "
|
|
6
|
-
"result-state": "awsui_result-
|
|
7
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
8
|
-
"root": "
|
|
9
|
-
"with-result-button": "awsui_with-result-
|
|
10
|
-
"result-text": "awsui_result-
|
|
11
|
-
"result-container-error": "awsui_result-container-
|
|
12
|
-
"result-container-success": "awsui_result-container-
|
|
13
|
-
"result-button": "awsui_result-
|
|
14
|
-
"word-wrap": "awsui_word-
|
|
15
|
-
"label-flash": "awsui_label-
|
|
16
|
-
"label-key-value": "awsui_label-key-
|
|
17
|
-
"flash": "
|
|
18
|
-
"progress-container": "awsui_progress-
|
|
19
|
-
"percentage-container": "awsui_percentage-
|
|
20
|
-
"percentage": "
|
|
21
|
-
"complete": "
|
|
22
|
-
"progress-in-flash": "awsui_progress-in-
|
|
23
|
-
"additional-info": "awsui_additional-
|
|
5
|
+
"progress": "awsui_progress_11huc_7glv4_189",
|
|
6
|
+
"result-state": "awsui_result-state_11huc_7glv4_203",
|
|
7
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_7glv4_1",
|
|
8
|
+
"root": "awsui_root_11huc_7glv4_225",
|
|
9
|
+
"with-result-button": "awsui_with-result-button_11huc_7glv4_257",
|
|
10
|
+
"result-text": "awsui_result-text_11huc_7glv4_261",
|
|
11
|
+
"result-container-error": "awsui_result-container-error_11huc_7glv4_265",
|
|
12
|
+
"result-container-success": "awsui_result-container-success_11huc_7glv4_265",
|
|
13
|
+
"result-button": "awsui_result-button_11huc_7glv4_269",
|
|
14
|
+
"word-wrap": "awsui_word-wrap_11huc_7glv4_275",
|
|
15
|
+
"label-flash": "awsui_label-flash_11huc_7glv4_280",
|
|
16
|
+
"label-key-value": "awsui_label-key-value_11huc_7glv4_284",
|
|
17
|
+
"flash": "awsui_flash_11huc_7glv4_292",
|
|
18
|
+
"progress-container": "awsui_progress-container_11huc_7glv4_296",
|
|
19
|
+
"percentage-container": "awsui_percentage-container_11huc_7glv4_303",
|
|
20
|
+
"percentage": "awsui_percentage_11huc_7glv4_303",
|
|
21
|
+
"complete": "awsui_complete_11huc_7glv4_349",
|
|
22
|
+
"progress-in-flash": "awsui_progress-in-flash_11huc_7glv4_362",
|
|
23
|
+
"additional-info": "awsui_additional-info_11huc_7glv4_375"
|
|
24
24
|
};
|
|
25
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/radio-group/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,kEAAkE,CAAC;AAEnG,MAAM,WAAW,0CAA0C;IACzD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,6CAA6C;IAC5D,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/radio-group/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,kEAAkE,CAAC;AAEnG,MAAM,WAAW,0CAA0C;IACzD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,6CAA6C;IAC5D,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/radio-group/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nexport interface GeneratedAnalyticsMetadataRadioGroupSelect {\n action: 'click';\n detail: {\n label: string;\n position: string;\n value: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataRadioGroupComponent {\n name: 'awsui.RadioGroup';\n label: string | LabelIdentifier;\n properties: {\n value: string;\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/radio-group/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LabelIdentifier } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nexport interface GeneratedAnalyticsMetadataRadioGroupSelect {\n action: 'click';\n detail: {\n label: string;\n position: string;\n value: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataRadioGroupComponent {\n name: 'awsui.RadioGroup';\n label: string | LabelIdentifier;\n properties: {\n value: string;\n valueLabel: string;\n };\n}\n"]}
|