@cloudscape-design/components 3.0.657 → 3.0.659
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/code-editor/status-bar.d.ts +1 -1
- package/code-editor/status-bar.d.ts.map +1 -1
- package/code-editor/status-bar.js +9 -26
- package/code-editor/status-bar.js.map +1 -1
- package/code-editor/styles.css.js +33 -32
- package/code-editor/styles.scoped.css +156 -137
- package/code-editor/styles.selectors.js +33 -32
- package/code-editor/tab-button.d.ts +1 -0
- package/code-editor/tab-button.d.ts.map +1 -1
- package/code-editor/tab-button.js +3 -3
- package/code-editor/tab-button.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/popover/index.d.ts +3 -2
- package/popover/index.d.ts.map +1 -1
- package/popover/index.js +8 -4
- package/popover/index.js.map +1 -1
- package/popover/interfaces.d.ts +6 -0
- package/popover/interfaces.d.ts.map +1 -1
- package/popover/interfaces.js.map +1 -1
- package/popover/internal.d.ts +1 -0
- package/popover/internal.d.ts.map +1 -1
- package/popover/internal.js +4 -0
- package/popover/internal.js.map +1 -1
|
@@ -20,6 +20,6 @@ interface StatusBarProps {
|
|
|
20
20
|
onPreferencesOpen: () => void;
|
|
21
21
|
onHeightChange?: (height: number | null) => void;
|
|
22
22
|
}
|
|
23
|
-
export declare
|
|
23
|
+
export declare function StatusBar({ languageLabel, cursorPosition, paneStatus, onErrorPaneToggle, onWarningPaneToggle, onTabFocus, onTabBlur, errorsTabRef, warningsTabRef, isTabFocused, paneId, onPreferencesOpen, i18nStrings, errorCount, warningCount, isRefresh, }: StatusBarProps): JSX.Element;
|
|
24
24
|
export {};
|
|
25
25
|
//# sourceMappingURL=status-bar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../src/code-editor/status-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../src/code-editor/status-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAqB,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEvD,UAAU,cAAc;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,UAAU,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IAEnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAEpD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,SAAS,CAAC,EACxB,aAAa,EACb,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,MAAM,EACN,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,SAAS,GACV,EAAE,cAAc,eAgFhB"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { __rest } from "tslib";
|
|
2
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
3
|
import React from 'react';
|
|
@@ -8,28 +7,23 @@ import LiveRegion from '../internal/components/live-region/index';
|
|
|
8
7
|
import { TabButton } from './tab-button';
|
|
9
8
|
import { InternalButton } from '../button/internal';
|
|
10
9
|
import { useInternalI18n } from '../i18n/context.js';
|
|
11
|
-
import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
12
10
|
import { getStatusButtonId } from './util';
|
|
13
|
-
function
|
|
11
|
+
export function StatusBar({ languageLabel, cursorPosition, paneStatus, onErrorPaneToggle, onWarningPaneToggle, onTabFocus, onTabBlur, errorsTabRef, warningsTabRef, isTabFocused, paneId, onPreferencesOpen, i18nStrings, errorCount, warningCount, isRefresh, }) {
|
|
14
12
|
const i18n = useInternalI18n('code-editor');
|
|
15
13
|
const errorText = `${i18n('i18nStrings.errorsTab', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorsTab)}: ${errorCount}`;
|
|
16
14
|
const warningText = `${i18n('i18nStrings.warningsTab', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningsTab)}: ${warningCount}`;
|
|
17
|
-
const errorButtonId =
|
|
18
|
-
const warningButtonId =
|
|
19
|
-
// Virtual status bar is inaccessible for screen readers and keyboard interactions.
|
|
15
|
+
const errorButtonId = getStatusButtonId({ paneId, paneStatus: 'error' });
|
|
16
|
+
const warningButtonId = getStatusButtonId({ paneId, paneStatus: 'warning' });
|
|
20
17
|
return (React.createElement("div", { className: clsx(styles['status-bar'], {
|
|
21
18
|
[styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
React.createElement("div", { className: clsx(styles['status-bar__left'], {
|
|
25
|
-
[styles['status-bar__left-virtual']]: isVirtual,
|
|
26
|
-
}), ref: leftBarRef },
|
|
19
|
+
}) },
|
|
20
|
+
React.createElement("div", { className: clsx(styles['status-bar__left']) },
|
|
27
21
|
React.createElement("span", { className: styles['status-bar__language-mode'] }, languageLabel),
|
|
28
22
|
React.createElement("span", { className: styles['status-bar__cursor-position'] }, cursorPosition),
|
|
29
|
-
React.createElement("div", { role: "tablist" },
|
|
30
|
-
React.createElement(TabButton, { id: errorButtonId,
|
|
23
|
+
React.createElement("div", { className: styles['tab-list'], role: "tablist" },
|
|
24
|
+
React.createElement(TabButton, { id: errorButtonId, count: errorCount, text: errorText, className: styles['tab-button--errors'], iconName: "status-negative", disabled: errorCount === 0, active: paneStatus === 'error', onClick: onErrorPaneToggle, onFocus: onTabFocus, onBlur: onTabBlur, ref: errorsTabRef, ariaLabel: errorText, paneId: paneId, isRefresh: isRefresh }),
|
|
31
25
|
React.createElement("span", { className: styles['tab-button--divider'] }),
|
|
32
|
-
React.createElement(TabButton, { id: warningButtonId,
|
|
26
|
+
React.createElement(TabButton, { id: warningButtonId, count: warningCount, text: warningText, className: styles['tab-button--warnings'], iconName: "status-warning", disabled: warningCount === 0, active: paneStatus === 'warning', onClick: onWarningPaneToggle, onFocus: onTabFocus, onBlur: onTabBlur, ref: warningsTabRef, tabIndex: paneStatus === 'error' && isTabFocused ? -1 : undefined, ariaHidden: paneStatus === 'error' && isTabFocused ? true : undefined, ariaLabel: warningText, paneId: paneId, isRefresh: isRefresh })),
|
|
33
27
|
React.createElement(LiveRegion, { assertive: true },
|
|
34
28
|
React.createElement("span", null,
|
|
35
29
|
errorText,
|
|
@@ -37,20 +31,9 @@ function InternalStatusBar({ languageLabel, cursorPosition, paneStatus, onErrorP
|
|
|
37
31
|
React.createElement("span", null, warningText))),
|
|
38
32
|
React.createElement("div", { className: styles['status-bar__right'] },
|
|
39
33
|
React.createElement("div", { className: styles['status-bar__cog-button'] },
|
|
40
|
-
React.createElement(InternalButton, {
|
|
34
|
+
React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "settings", iconAlt: "Settings", ariaLabel: i18n('i18nStrings.preferencesButtonAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.preferencesButtonAriaLabel), onClick: onPreferencesOpen, __nativeAttributes: {
|
|
41
35
|
tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,
|
|
42
36
|
'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,
|
|
43
37
|
} })))));
|
|
44
38
|
}
|
|
45
|
-
export const StatusBar = (_a) => {
|
|
46
|
-
var { errorsTabRef, warningsTabRef } = _a, restProps = __rest(_a, ["errorsTabRef", "warningsTabRef"]);
|
|
47
|
-
// create a virtual status bar, in order to calculate the width with full tab button text
|
|
48
|
-
// and decide if tab button text needs to be reduced
|
|
49
|
-
const [realWidth, statusLeftBarRef] = useContainerQuery(rect => rect.contentBoxWidth);
|
|
50
|
-
const [virtualWidth, virtualStatusLeftBarRef] = useContainerQuery(rect => rect.contentBoxWidth);
|
|
51
|
-
const minifyCounters = virtualWidth !== null && realWidth !== null && virtualWidth > realWidth;
|
|
52
|
-
return (React.createElement(React.Fragment, null,
|
|
53
|
-
React.createElement(InternalStatusBar, Object.assign({}, restProps, { isVirtual: false, leftBarRef: statusLeftBarRef, errorsTabRef: errorsTabRef, warningsTabRef: warningsTabRef, minifyCounters: minifyCounters })),
|
|
54
|
-
React.createElement(InternalStatusBar, Object.assign({}, restProps, { isVirtual: true, leftBarRef: virtualStatusLeftBarRef, minifyCounters: false }))));
|
|
55
|
-
};
|
|
56
39
|
//# sourceMappingURL=status-bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../src/code-editor/status-bar.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';\nimport styles from './styles.css.js';\nimport LiveRegion from '../internal/components/live-region/index';\nimport { TabButton } from './tab-button';\nimport { InternalButton } from '../button/internal';\nimport { CodeEditorProps } from './interfaces';\nimport { useInternalI18n } from '../i18n/context.js';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { getStatusButtonId, PaneStatus } from './util';\n\ninterface StatusBarProps {\n languageLabel: string;\n cursorPosition?: string;\n paneStatus: PaneStatus;\n isTabFocused: boolean;\n paneId?: string;\n i18nStrings?: CodeEditorProps.I18nStrings;\n errorCount: number;\n warningCount: number;\n isRefresh: boolean;\n\n errorsTabRef?: React.RefObject<HTMLButtonElement>;\n warningsTabRef?: React.RefObject<HTMLButtonElement>;\n\n onErrorPaneToggle: () => void;\n onWarningPaneToggle: () => void;\n onTabFocus?: React.FocusEventHandler<HTMLButtonElement>;\n onTabBlur?: React.FocusEventHandler<HTMLButtonElement>;\n onPreferencesOpen: () => void;\n onHeightChange?: (height: number | null) => void;\n}\n\ntype InternalStatusBarProps = StatusBarProps & {\n leftBarRef: React.Ref<HTMLDivElement>;\n isVirtual: boolean;\n minifyCounters: boolean;\n};\n\nfunction InternalStatusBar({\n languageLabel,\n cursorPosition,\n paneStatus,\n onErrorPaneToggle,\n onWarningPaneToggle,\n onTabFocus,\n onTabBlur,\n errorsTabRef,\n warningsTabRef,\n isTabFocused,\n paneId,\n onPreferencesOpen,\n i18nStrings,\n errorCount,\n warningCount,\n leftBarRef,\n isVirtual,\n minifyCounters,\n isRefresh,\n}: InternalStatusBarProps) {\n const i18n = useInternalI18n('code-editor');\n const errorText = `${i18n('i18nStrings.errorsTab', i18nStrings?.errorsTab)}: ${errorCount}`;\n const warningText = `${i18n('i18nStrings.warningsTab', i18nStrings?.warningsTab)}: ${warningCount}`;\n const errorButtonId = !isVirtual ? getStatusButtonId({ paneId, paneStatus: 'error' }) : undefined;\n const warningButtonId = !isVirtual ? getStatusButtonId({ paneId, paneStatus: 'warning' }) : undefined;\n\n // Virtual status bar is inaccessible for screen readers and keyboard interactions.\n\n return (\n <div\n className={clsx(styles['status-bar'], {\n [styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',\n [styles['status-bar-virtual']]: isVirtual,\n })}\n aria-hidden={isVirtual}\n >\n <div\n className={clsx(styles['status-bar__left'], {\n [styles['status-bar__left-virtual']]: isVirtual,\n })}\n ref={leftBarRef}\n >\n <span className={styles['status-bar__language-mode']}>{languageLabel}</span>\n <span className={styles['status-bar__cursor-position']}>{cursorPosition}</span>\n\n <div role=\"tablist\">\n <TabButton\n id={errorButtonId}\n text={minifyCounters ? ` ${errorCount}` : errorText}\n className={styles['tab-button--errors']}\n iconName=\"status-negative\"\n disabled={errorCount === 0 || isVirtual}\n active={paneStatus === 'error'}\n onClick={onErrorPaneToggle}\n onFocus={onTabFocus}\n onBlur={onTabBlur}\n ref={errorsTabRef}\n ariaLabel={errorText}\n paneId={paneId}\n isRefresh={isRefresh}\n />\n <span className={styles['tab-button--divider']}></span>\n <TabButton\n id={warningButtonId}\n text={minifyCounters ? ` ${warningCount}` : warningText}\n className={styles['tab-button--warnings']}\n iconName=\"status-warning\"\n disabled={warningCount === 0 || isVirtual}\n active={paneStatus === 'warning'}\n onClick={onWarningPaneToggle}\n onFocus={onTabFocus}\n onBlur={onTabBlur}\n ref={warningsTabRef}\n tabIndex={paneStatus === 'error' && isTabFocused ? -1 : undefined}\n ariaHidden={paneStatus === 'error' && isTabFocused ? true : undefined}\n ariaLabel={warningText}\n paneId={paneId}\n isRefresh={isRefresh}\n />\n </div>\n <LiveRegion assertive={true}>\n <span>{errorText} </span>\n <span>{warningText}</span>\n </LiveRegion>\n </div>\n\n <div className={styles['status-bar__right']}>\n <div className={styles['status-bar__cog-button']}>\n <InternalButton\n disabled={isVirtual}\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"settings\"\n iconAlt=\"Settings\"\n ariaLabel={i18n('i18nStrings.preferencesButtonAriaLabel', i18nStrings?.preferencesButtonAriaLabel)}\n onClick={onPreferencesOpen}\n __nativeAttributes={{\n tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,\n 'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,\n }}\n />\n </div>\n </div>\n </div>\n );\n}\n\nexport const StatusBar = ({ errorsTabRef, warningsTabRef, ...restProps }: StatusBarProps) => {\n // create a virtual status bar, in order to calculate the width with full tab button text\n // and decide if tab button text needs to be reduced\n const [realWidth, statusLeftBarRef] = useContainerQuery(rect => rect.contentBoxWidth);\n const [virtualWidth, virtualStatusLeftBarRef] = useContainerQuery(rect => rect.contentBoxWidth);\n\n const minifyCounters = virtualWidth !== null && realWidth !== null && virtualWidth > realWidth;\n\n return (\n <>\n <InternalStatusBar\n {...restProps}\n isVirtual={false}\n leftBarRef={statusLeftBarRef}\n errorsTabRef={errorsTabRef}\n warningsTabRef={warningsTabRef}\n minifyCounters={minifyCounters}\n />\n <InternalStatusBar {...restProps} isVirtual={true} leftBarRef={virtualStatusLeftBarRef} minifyCounters={false} />\n </>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"status-bar.js","sourceRoot":"","sources":["../../../src/code-editor/status-bar.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';\nimport styles from './styles.css.js';\nimport LiveRegion from '../internal/components/live-region/index';\nimport { TabButton } from './tab-button';\nimport { InternalButton } from '../button/internal';\nimport { CodeEditorProps } from './interfaces';\nimport { useInternalI18n } from '../i18n/context.js';\nimport { getStatusButtonId, PaneStatus } from './util';\n\ninterface StatusBarProps {\n languageLabel: string;\n cursorPosition?: string;\n paneStatus: PaneStatus;\n isTabFocused: boolean;\n paneId?: string;\n i18nStrings?: CodeEditorProps.I18nStrings;\n errorCount: number;\n warningCount: number;\n isRefresh: boolean;\n\n errorsTabRef?: React.RefObject<HTMLButtonElement>;\n warningsTabRef?: React.RefObject<HTMLButtonElement>;\n\n onErrorPaneToggle: () => void;\n onWarningPaneToggle: () => void;\n onTabFocus?: React.FocusEventHandler<HTMLButtonElement>;\n onTabBlur?: React.FocusEventHandler<HTMLButtonElement>;\n onPreferencesOpen: () => void;\n onHeightChange?: (height: number | null) => void;\n}\n\nexport function StatusBar({\n languageLabel,\n cursorPosition,\n paneStatus,\n onErrorPaneToggle,\n onWarningPaneToggle,\n onTabFocus,\n onTabBlur,\n errorsTabRef,\n warningsTabRef,\n isTabFocused,\n paneId,\n onPreferencesOpen,\n i18nStrings,\n errorCount,\n warningCount,\n isRefresh,\n}: StatusBarProps) {\n const i18n = useInternalI18n('code-editor');\n const errorText = `${i18n('i18nStrings.errorsTab', i18nStrings?.errorsTab)}: ${errorCount}`;\n const warningText = `${i18n('i18nStrings.warningsTab', i18nStrings?.warningsTab)}: ${warningCount}`;\n const errorButtonId = getStatusButtonId({ paneId, paneStatus: 'error' });\n const warningButtonId = getStatusButtonId({ paneId, paneStatus: 'warning' });\n\n return (\n <div\n className={clsx(styles['status-bar'], {\n [styles['status-bar-with-hidden-pane']]: paneStatus === 'hidden',\n })}\n >\n <div className={clsx(styles['status-bar__left'])}>\n <span className={styles['status-bar__language-mode']}>{languageLabel}</span>\n <span className={styles['status-bar__cursor-position']}>{cursorPosition}</span>\n\n <div className={styles['tab-list']} role=\"tablist\">\n <TabButton\n id={errorButtonId}\n count={errorCount}\n text={errorText}\n className={styles['tab-button--errors']}\n iconName=\"status-negative\"\n disabled={errorCount === 0}\n active={paneStatus === 'error'}\n onClick={onErrorPaneToggle}\n onFocus={onTabFocus}\n onBlur={onTabBlur}\n ref={errorsTabRef}\n ariaLabel={errorText}\n paneId={paneId}\n isRefresh={isRefresh}\n />\n\n <span className={styles['tab-button--divider']}></span>\n\n <TabButton\n id={warningButtonId}\n count={warningCount}\n text={warningText}\n className={styles['tab-button--warnings']}\n iconName=\"status-warning\"\n disabled={warningCount === 0}\n active={paneStatus === 'warning'}\n onClick={onWarningPaneToggle}\n onFocus={onTabFocus}\n onBlur={onTabBlur}\n ref={warningsTabRef}\n tabIndex={paneStatus === 'error' && isTabFocused ? -1 : undefined}\n ariaHidden={paneStatus === 'error' && isTabFocused ? true : undefined}\n ariaLabel={warningText}\n paneId={paneId}\n isRefresh={isRefresh}\n />\n </div>\n <LiveRegion assertive={true}>\n <span>{errorText} </span>\n <span>{warningText}</span>\n </LiveRegion>\n </div>\n\n <div className={styles['status-bar__right']}>\n <div className={styles['status-bar__cog-button']}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"settings\"\n iconAlt=\"Settings\"\n ariaLabel={i18n('i18nStrings.preferencesButtonAriaLabel', i18nStrings?.preferencesButtonAriaLabel)}\n onClick={onPreferencesOpen}\n __nativeAttributes={{\n tabIndex: paneStatus !== 'hidden' && isTabFocused ? -1 : undefined,\n 'aria-hidden': paneStatus !== 'hidden' && isTabFocused ? true : undefined,\n }}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -1,37 +1,38 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"code-editor-refresh": "awsui_code-editor-
|
|
5
|
-
"code-editor": "awsui_code-
|
|
6
|
-
"pane": "
|
|
7
|
-
"pane__close-container": "awsui_pane__close-
|
|
8
|
-
"pane__list": "
|
|
9
|
-
"pane__table": "
|
|
10
|
-
"pane__item": "
|
|
11
|
-
"pane__cell": "
|
|
12
|
-
"pane__item--highlighted": "awsui_pane__item--
|
|
13
|
-
"pane__location": "
|
|
14
|
-
"pane__description": "
|
|
15
|
-
"focus-lock": "awsui_focus-
|
|
16
|
-
"editor": "
|
|
17
|
-
"editor-refresh": "awsui_editor-
|
|
18
|
-
"status-bar": "awsui_status-
|
|
19
|
-
"status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-
|
|
20
|
-
"status-bar__left": "awsui_status-
|
|
21
|
-
"status-
|
|
22
|
-
"status-
|
|
23
|
-
"status-
|
|
24
|
-
"status-
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"tab-button": "awsui_tab-
|
|
28
|
-
"tab-button--
|
|
29
|
-
"tab-button--
|
|
30
|
-
"tab-button--
|
|
31
|
-
"tab-button--
|
|
32
|
-
"tab-button--
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
4
|
+
"code-editor-refresh": "awsui_code-editor-refresh_1gl9c_1l3ke_102",
|
|
5
|
+
"code-editor": "awsui_code-editor_1gl9c_1l3ke_102",
|
|
6
|
+
"pane": "awsui_pane_1gl9c_1l3ke_432",
|
|
7
|
+
"pane__close-container": "awsui_pane__close-container_1gl9c_1l3ke_443",
|
|
8
|
+
"pane__list": "awsui_pane__list_1gl9c_1l3ke_448",
|
|
9
|
+
"pane__table": "awsui_pane__table_1gl9c_1l3ke_455",
|
|
10
|
+
"pane__item": "awsui_pane__item_1gl9c_1l3ke_461",
|
|
11
|
+
"pane__cell": "awsui_pane__cell_1gl9c_1l3ke_461",
|
|
12
|
+
"pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_1l3ke_475",
|
|
13
|
+
"pane__location": "awsui_pane__location_1gl9c_1l3ke_496",
|
|
14
|
+
"pane__description": "awsui_pane__description_1gl9c_1l3ke_496",
|
|
15
|
+
"focus-lock": "awsui_focus-lock_1gl9c_1l3ke_511",
|
|
16
|
+
"editor": "awsui_editor_1gl9c_1l3ke_562",
|
|
17
|
+
"editor-refresh": "awsui_editor-refresh_1gl9c_1l3ke_590",
|
|
18
|
+
"status-bar": "awsui_status-bar_1gl9c_1l3ke_595",
|
|
19
|
+
"status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_1l3ke_604",
|
|
20
|
+
"status-bar__left": "awsui_status-bar__left_1gl9c_1l3ke_608",
|
|
21
|
+
"status-bar__right": "awsui_status-bar__right_1gl9c_1l3ke_615",
|
|
22
|
+
"status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_1l3ke_619",
|
|
23
|
+
"status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_1l3ke_619",
|
|
24
|
+
"status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_1l3ke_625",
|
|
25
|
+
"tab-list": "awsui_tab-list_1gl9c_1l3ke_630",
|
|
26
|
+
"tab-button": "awsui_tab-button_1gl9c_1l3ke_635",
|
|
27
|
+
"tab-button--refresh": "awsui_tab-button--refresh_1gl9c_1l3ke_668",
|
|
28
|
+
"tab-button--warnings": "awsui_tab-button--warnings_1gl9c_1l3ke_671",
|
|
29
|
+
"tab-button--active": "awsui_tab-button--active_1gl9c_1l3ke_680",
|
|
30
|
+
"tab-button--disabled": "awsui_tab-button--disabled_1gl9c_1l3ke_696",
|
|
31
|
+
"tab-button--divider": "awsui_tab-button--divider_1gl9c_1l3ke_729",
|
|
32
|
+
"tab-button--errors": "awsui_tab-button--errors_1gl9c_1l3ke_736",
|
|
33
|
+
"count": "awsui_count_1gl9c_1l3ke_745",
|
|
34
|
+
"text": "awsui_text_1gl9c_1l3ke_748",
|
|
35
|
+
"loading-screen": "awsui_loading-screen_1gl9c_1l3ke_762",
|
|
36
|
+
"error-screen": "awsui_error-screen_1gl9c_1l3ke_763"
|
|
36
37
|
};
|
|
37
38
|
|