@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.
Files changed (163) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +103 -99
  3. package/lib/internal/scss/progress-bar/styles.scss +39 -25
  4. package/lib/internal/scss/radio-group/analytics-metadata/styles.scss +8 -0
  5. package/lib/internal/template/alert/styles.css.js +27 -27
  6. package/lib/internal/template/alert/styles.scoped.css +50 -50
  7. package/lib/internal/template/alert/styles.selectors.js +27 -27
  8. package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
  9. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +32 -32
  10. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  11. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  12. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  13. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  14. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
  15. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  16. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
  17. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +30 -30
  18. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +87 -87
  19. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +30 -30
  20. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  21. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
  22. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  23. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
  24. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
  25. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
  26. package/lib/internal/template/attribute-editor/index.d.ts.map +1 -1
  27. package/lib/internal/template/attribute-editor/index.js +2 -2
  28. package/lib/internal/template/attribute-editor/index.js.map +1 -1
  29. package/lib/internal/template/attribute-editor/interfaces.d.ts +8 -0
  30. package/lib/internal/template/attribute-editor/interfaces.d.ts.map +1 -1
  31. package/lib/internal/template/attribute-editor/interfaces.js.map +1 -1
  32. package/lib/internal/template/attribute-editor/internal.d.ts.map +1 -1
  33. package/lib/internal/template/attribute-editor/internal.js +9 -6
  34. package/lib/internal/template/attribute-editor/internal.js.map +1 -1
  35. package/lib/internal/template/attribute-editor/styles.css.js +15 -15
  36. package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
  37. package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
  38. package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
  39. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
  40. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
  41. package/lib/internal/template/button/styles.css.js +22 -22
  42. package/lib/internal/template/button/styles.scoped.css +256 -256
  43. package/lib/internal/template/button/styles.selectors.js +22 -22
  44. package/lib/internal/template/button-dropdown/item-element/styles.css.js +16 -16
  45. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +27 -27
  46. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +16 -16
  47. package/lib/internal/template/checkbox/styles.css.js +3 -3
  48. package/lib/internal/template/checkbox/styles.scoped.css +11 -11
  49. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  50. package/lib/internal/template/content-layout/styles.css.js +14 -14
  51. package/lib/internal/template/content-layout/styles.scoped.css +27 -27
  52. package/lib/internal/template/content-layout/styles.selectors.js +14 -14
  53. package/lib/internal/template/flashbar/styles.css.js +50 -50
  54. package/lib/internal/template/flashbar/styles.scoped.css +187 -187
  55. package/lib/internal/template/flashbar/styles.selectors.js +50 -50
  56. package/lib/internal/template/header/analytics/use-table-integration.d.ts +2 -1
  57. package/lib/internal/template/header/analytics/use-table-integration.d.ts.map +1 -1
  58. package/lib/internal/template/header/analytics/use-table-integration.js +8 -1
  59. package/lib/internal/template/header/analytics/use-table-integration.js.map +1 -1
  60. package/lib/internal/template/header/interfaces.d.ts +2 -2
  61. package/lib/internal/template/header/interfaces.d.ts.map +1 -1
  62. package/lib/internal/template/header/interfaces.js.map +1 -1
  63. package/lib/internal/template/help-panel/styles.css.js +6 -6
  64. package/lib/internal/template/help-panel/styles.scoped.css +73 -73
  65. package/lib/internal/template/help-panel/styles.selectors.js +6 -6
  66. package/lib/internal/template/icon/generated/icons.d.ts +1 -0
  67. package/lib/internal/template/icon/generated/icons.d.ts.map +1 -1
  68. package/lib/internal/template/icon/generated/icons.js +3 -0
  69. package/lib/internal/template/icon/generated/icons.js.map +1 -1
  70. package/lib/internal/template/icon/interfaces.d.ts +1 -1
  71. package/lib/internal/template/icon/interfaces.d.ts.map +1 -1
  72. package/lib/internal/template/icon/interfaces.js.map +1 -1
  73. package/lib/internal/template/icon-provider/interfaces.d.ts +1 -0
  74. package/lib/internal/template/icon-provider/interfaces.d.ts.map +1 -1
  75. package/lib/internal/template/icon-provider/interfaces.js.map +1 -1
  76. package/lib/internal/template/input/styles.css.js +13 -13
  77. package/lib/internal/template/input/styles.scoped.css +65 -65
  78. package/lib/internal/template/input/styles.selectors.js +13 -13
  79. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  80. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +20 -20
  81. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +48 -48
  82. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +20 -20
  83. package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
  84. package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
  85. package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
  86. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  87. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  88. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  89. package/lib/internal/template/internal/environment.js +2 -2
  90. package/lib/internal/template/internal/environment.json +2 -2
  91. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +4 -0
  92. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  93. package/lib/internal/template/internal/generated/custom-css-properties/index.js +102 -98
  94. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  95. package/lib/internal/template/internal/generated/styles/tokens.d.ts +50 -75
  96. package/lib/internal/template/internal/generated/styles/tokens.js +50 -75
  97. package/lib/internal/template/internal/generated/theming/index.cjs +305 -461
  98. package/lib/internal/template/internal/generated/theming/index.js +305 -461
  99. package/lib/internal/template/link/styles.css.js +20 -20
  100. package/lib/internal/template/link/styles.scoped.css +103 -103
  101. package/lib/internal/template/link/styles.selectors.js +20 -20
  102. package/lib/internal/template/progress-bar/index.d.ts +1 -1
  103. package/lib/internal/template/progress-bar/index.d.ts.map +1 -1
  104. package/lib/internal/template/progress-bar/index.js +2 -2
  105. package/lib/internal/template/progress-bar/index.js.map +1 -1
  106. package/lib/internal/template/progress-bar/interfaces.d.ts +19 -0
  107. package/lib/internal/template/progress-bar/interfaces.d.ts.map +1 -1
  108. package/lib/internal/template/progress-bar/interfaces.js.map +1 -1
  109. package/lib/internal/template/progress-bar/internal.d.ts +2 -1
  110. package/lib/internal/template/progress-bar/internal.d.ts.map +1 -1
  111. package/lib/internal/template/progress-bar/internal.js +7 -3
  112. package/lib/internal/template/progress-bar/internal.js.map +1 -1
  113. package/lib/internal/template/progress-bar/styles.css.js +19 -19
  114. package/lib/internal/template/progress-bar/styles.d.ts +16 -0
  115. package/lib/internal/template/progress-bar/styles.d.ts.map +1 -0
  116. package/lib/internal/template/progress-bar/styles.js +33 -0
  117. package/lib/internal/template/progress-bar/styles.js.map +1 -0
  118. package/lib/internal/template/progress-bar/styles.scoped.css +56 -56
  119. package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
  120. package/lib/internal/template/radio-group/analytics-metadata/interfaces.d.ts +1 -0
  121. package/lib/internal/template/radio-group/analytics-metadata/interfaces.d.ts.map +1 -1
  122. package/lib/internal/template/radio-group/analytics-metadata/interfaces.js.map +1 -1
  123. package/lib/internal/template/radio-group/analytics-metadata/styles.css.js +6 -0
  124. package/lib/internal/template/radio-group/analytics-metadata/styles.scoped.css +7 -0
  125. package/lib/internal/template/radio-group/analytics-metadata/styles.selectors.js +7 -0
  126. package/lib/internal/template/radio-group/index.d.ts.map +1 -1
  127. package/lib/internal/template/radio-group/index.js +2 -0
  128. package/lib/internal/template/radio-group/index.js.map +1 -1
  129. package/lib/internal/template/radio-group/internal.d.ts.map +1 -1
  130. package/lib/internal/template/radio-group/internal.js +2 -1
  131. package/lib/internal/template/radio-group/internal.js.map +1 -1
  132. package/lib/internal/template/radio-group/styles.css.js +10 -10
  133. package/lib/internal/template/radio-group/styles.scoped.css +22 -22
  134. package/lib/internal/template/radio-group/styles.selectors.js +10 -10
  135. package/lib/internal/template/s3-resource-selector/index.d.ts.map +1 -1
  136. package/lib/internal/template/s3-resource-selector/index.js +2 -2
  137. package/lib/internal/template/s3-resource-selector/index.js.map +1 -1
  138. package/lib/internal/template/s3-resource-selector/interfaces.d.ts +8 -0
  139. package/lib/internal/template/s3-resource-selector/interfaces.d.ts.map +1 -1
  140. package/lib/internal/template/s3-resource-selector/interfaces.js.map +1 -1
  141. package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts +3 -0
  142. package/lib/internal/template/s3-resource-selector/s3-in-context/index.d.ts.map +1 -1
  143. package/lib/internal/template/s3-resource-selector/s3-in-context/index.js +8 -2
  144. package/lib/internal/template/s3-resource-selector/s3-in-context/index.js.map +1 -1
  145. package/lib/internal/template/slider/styles.css.js +26 -26
  146. package/lib/internal/template/slider/styles.scoped.css +86 -86
  147. package/lib/internal/template/slider/styles.selectors.js +26 -26
  148. package/lib/internal/template/spinner/styles.css.js +13 -13
  149. package/lib/internal/template/spinner/styles.scoped.css +39 -39
  150. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  151. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  152. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  153. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  154. package/lib/internal/template/text-content/styles.css.js +1 -1
  155. package/lib/internal/template/text-content/styles.scoped.css +66 -66
  156. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  157. package/lib/internal/template/textarea/styles.css.js +5 -5
  158. package/lib/internal/template/textarea/styles.scoped.css +41 -41
  159. package/lib/internal/template/textarea/styles.selectors.js +5 -5
  160. package/lib/internal/template/toggle/styles.css.js +10 -10
  161. package/lib/internal/template/toggle/styles.scoped.css +23 -23
  162. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  163. package/package.json +1 -1
@@ -1 +1 @@
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 ...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 />\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"]}
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,EAejB;QAfiB,EAClC,KAAK,GAAG,CAAC,EACT,MAAM,GAAG,aAAa,EACtB,OAAO,GAAG,YAAY,EACtB,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,KAAK,OAEY,EADd,IAAI,cAd2B,4LAenC,CADQ;IAEP,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,aAAa,EAAE;QAC5D,KAAK,EAAE,EAAE,OAAO,EAAE;KACnB,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,aAAa,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAEzD,MAAM,OAAO,GAAG,GAAG,aAAa,QAAQ,CAAC;IACzC,MAAM,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC;IACtC,MAAM,iBAAiB,GAAG,MAAM,KAAK,aAAa,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,WAAW,CAAC,8BAA8B,CAAC,CAAC;IAErE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO,QAAQ,CAAC,CAAC,KAAgC,EAAE,EAAE;YACnD,iBAAiB,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;QACjC,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEhC,IAAI,SAAS,IAAI,gBAAgB,EAAE,CAAC;QAClC,QAAQ,CACN,aAAa,EACb,oPAAoP,CACrP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,IAAI,MAAM,CAAC,OAAO,CAAC,CAAC,EAC7E,GAAG,EAAE,iBAAiB;QAEtB,6BAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS;YAC/D,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,SAAS,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,IAC/E,KAAK,CACF;YACL,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,EAAE,aAAa,IACnE,WAAW,CACF,CACb;YACD,iCACG,iBAAiB,CAAC,CAAC,CAAC,CACnB;gBACE,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,WAAW,CAAC,OAAO,EAAE,cAAc,CAAC,EACpD,eAAe,EAAE,WAAW,CAC1B,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACvC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,EAC7C,eAAe,CAChB,EACD,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,GACZ;gBACF,oBAAC,kBAAkB,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC;oBACtD,KAAK;oBACL,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;oBACnB,cAAc,CACI,CACpB,CACJ,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,IAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC;gBACxD,oBAAC,WAAW,IACV,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;wBACZ,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;oBAC9C,CAAC,GACD,CACiB,CACtB,CACG,CACF;QACL,cAAc,IAAI,CACjB,oBAAC,SAAS,IACR,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,EAAE,EAAE,gBAAgB,IAEnB,cAAc,CACL,CACb,CACG,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC","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;CACjD;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D"}
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;AAUhD,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;CAC1B;AACD,eAAO,MAAM,QAAQ,GAAI,kEAAkE,aAAa,gBA0BvG,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"}
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":"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","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';\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}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby, ariaDescribedby }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\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 />\n <span aria-hidden=\"true\" className={styles['percentage-container']}>\n <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\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
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/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 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": "awsui_progress_11huc_19ekg_189",
5
- "result-state": "awsui_result-state_11huc_19ekg_203",
6
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_19ekg_1",
7
- "root": "awsui_root_11huc_19ekg_225",
8
- "with-result-button": "awsui_with-result-button_11huc_19ekg_257",
9
- "result-text": "awsui_result-text_11huc_19ekg_261",
10
- "result-container-error": "awsui_result-container-error_11huc_19ekg_265",
11
- "result-container-success": "awsui_result-container-success_11huc_19ekg_265",
12
- "result-button": "awsui_result-button_11huc_19ekg_269",
13
- "word-wrap": "awsui_word-wrap_11huc_19ekg_275",
14
- "label-flash": "awsui_label-flash_11huc_19ekg_280",
15
- "label-key-value": "awsui_label-key-value_11huc_19ekg_284",
16
- "flash": "awsui_flash_11huc_19ekg_292",
17
- "progress-container": "awsui_progress-container_11huc_19ekg_296",
18
- "percentage-container": "awsui_percentage-container_11huc_19ekg_303",
19
- "percentage": "awsui_percentage_11huc_19ekg_303",
20
- "complete": "awsui_complete_11huc_19ekg_349",
21
- "progress-in-flash": "awsui_progress-in-flash_11huc_19ekg_362",
22
- "additional-info": "awsui_additional-info_11huc_19ekg_375"
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
- .awsui_progress_11huc_19ekg_189:not(#\9)::-webkit-progress-value {
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
- .awsui_progress_11huc_19ekg_189:not(#\9)::-webkit-progress-value {
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 .awsui_progress_11huc_19ekg_189:not(#\9)::-webkit-progress-value, .awsui-mode-entering .awsui_progress_11huc_19ekg_189:not(#\9)::-webkit-progress-value {
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-state_11huc_19ekg_203:not(#\9) {
207
- animation: awsui_awsui-motion-fade-in_11huc_19ekg_1 var(--motion-duration-transition-show-paced-0w35xp, 180ms) var(--motion-easing-transition-show-paced-ufdgkj, ease-out);
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-in_11huc_19ekg_1 {
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-state_11huc_19ekg_203:not(#\9) {
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-state_11huc_19ekg_203:not(#\9), .awsui-mode-entering .awsui_result-state_11huc_19ekg_203:not(#\9) {
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
- .awsui_root_11huc_19ekg_225:not(#\9) {
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-button_11huc_19ekg_257:not(#\9) {
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-text_11huc_19ekg_261:not(#\9) {
264
+ .awsui_result-text_11huc_7glv4_261:not(#\9) {
265
265
  /* used in test-utils */
266
266
  }
267
267
 
268
- .awsui_result-container-error_11huc_19ekg_265:not(#\9), .awsui_result-container-success_11huc_19ekg_265:not(#\9) {
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-button_11huc_19ekg_269:not(#\9) {
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-wrap_11huc_19ekg_275:not(#\9) {
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-flash_11huc_19ekg_280:not(#\9) {
283
+ .awsui_label-flash_11huc_7glv4_280:not(#\9) {
284
284
  color: inherit;
285
285
  font-weight: 700;
286
286
  }
287
- .awsui_label-key-value_11huc_19ekg_284:not(#\9) {
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
- .awsui_flash_11huc_19ekg_292:not(#\9) {
295
+ .awsui_flash_11huc_7glv4_292:not(#\9) {
296
296
  color: inherit;
297
297
  }
298
298
 
299
- .awsui_progress-container_11huc_19ekg_296:not(#\9) {
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-container_11huc_19ekg_303:not(#\9) {
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
- .awsui_percentage_11huc_19ekg_303:not(#\9) {
316
+ .awsui_percentage_11huc_7glv4_303:not(#\9) {
317
317
  /* used in test-utils */
318
318
  }
319
319
 
320
- .awsui_progress_11huc_19ekg_189:not(#\9) {
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
- .awsui_progress_11huc_19ekg_189:not(#\9)::-webkit-progress-bar {
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
- .awsui_progress_11huc_19ekg_189:not(#\9)::-webkit-progress-value {
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
- .awsui_progress_11huc_19ekg_189.awsui_complete_11huc_19ekg_349:not(#\9)::-webkit-progress-value {
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
- .awsui_progress_11huc_19ekg_189:not(#\9)::-moz-progress-bar {
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
- .awsui_progress_11huc_19ekg_189.awsui_progress-in-flash_11huc_19ekg_362:not(#\9) {
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
- .awsui_progress_11huc_19ekg_189.awsui_progress-in-flash_11huc_19ekg_362:not(#\9)::-moz-progress-bar {
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
- .awsui_progress_11huc_19ekg_189.awsui_progress-in-flash_11huc_19ekg_362:not(#\9)::-webkit-progress-bar {
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
- .awsui_progress_11huc_19ekg_189.awsui_progress-in-flash_11huc_19ekg_362:not(#\9)::-webkit-progress-value {
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-info_11huc_19ekg_375:not(#\9) {
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": "awsui_progress_11huc_19ekg_189",
6
- "result-state": "awsui_result-state_11huc_19ekg_203",
7
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_19ekg_1",
8
- "root": "awsui_root_11huc_19ekg_225",
9
- "with-result-button": "awsui_with-result-button_11huc_19ekg_257",
10
- "result-text": "awsui_result-text_11huc_19ekg_261",
11
- "result-container-error": "awsui_result-container-error_11huc_19ekg_265",
12
- "result-container-success": "awsui_result-container-success_11huc_19ekg_265",
13
- "result-button": "awsui_result-button_11huc_19ekg_269",
14
- "word-wrap": "awsui_word-wrap_11huc_19ekg_275",
15
- "label-flash": "awsui_label-flash_11huc_19ekg_280",
16
- "label-key-value": "awsui_label-key-value_11huc_19ekg_284",
17
- "flash": "awsui_flash_11huc_19ekg_292",
18
- "progress-container": "awsui_progress-container_11huc_19ekg_296",
19
- "percentage-container": "awsui_percentage-container_11huc_19ekg_303",
20
- "percentage": "awsui_percentage_11huc_19ekg_303",
21
- "complete": "awsui_complete_11huc_19ekg_349",
22
- "progress-in-flash": "awsui_progress-in-flash_11huc_19ekg_362",
23
- "additional-info": "awsui_additional-info_11huc_19ekg_375"
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
 
@@ -12,6 +12,7 @@ export interface GeneratedAnalyticsMetadataRadioGroupComponent {
12
12
  label: string | LabelIdentifier;
13
13
  properties: {
14
14
  value: string;
15
+ valueLabel: string;
15
16
  };
16
17
  }
17
18
  //# sourceMappingURL=interfaces.d.ts.map
@@ -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;KACf,CAAC;CACH"}
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"]}
@@ -0,0 +1,6 @@
1
+
2
+ import './styles.scoped.css';
3
+ export default {
4
+ "selected": "awsui_selected_1m93f_14fvl_5"
5
+ };
6
+
@@ -0,0 +1,7 @@
1
+ /*
2
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
+ SPDX-License-Identifier: Apache-2.0
4
+ */
5
+ .awsui_selected_1m93f_14fvl_5:not(#\9) {
6
+ /* used in analytics metadata */
7
+ }