@cloudscape-design/components-themeable 3.0.188 → 3.0.190

package/lib/internal/template/flashbar/styles.selectors.js

@@ -2,38 +2,48 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "flash-refresh": "awsui_flash-refresh_1q84n_1nqzz_93",
-  "enter": "awsui_enter_1q84n_1nqzz_93",
-  "flash-body": "awsui_flash-body_1q84n_1nqzz_108",
-  "flash-message": "awsui_flash-message_1q84n_1nqzz_108",
-  "flash-header": "awsui_flash-header_1q84n_1nqzz_108",
-  "flash-content": "awsui_flash-content_1q84n_1nqzz_109",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_1nqzz_110",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_1nqzz_111",
-  "flash-icon": "awsui_flash-icon_1q84n_1nqzz_134",
-  "entering": "awsui_entering_1q84n_1nqzz_147",
-  "entered": "awsui_entered_1q84n_1nqzz_168",
-  "exiting": "awsui_exiting_1q84n_1nqzz_273",
-  "flashbar": "awsui_flashbar_1q84n_1nqzz_295",
-  "flash": "awsui_flash_1q84n_1nqzz_93",
-  "flash-list": "awsui_flash-list_1q84n_1nqzz_352",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_1nqzz_388",
-  "flash-text": "awsui_flash-text_1q84n_1nqzz_394",
-  "dismiss-button": "awsui_dismiss-button_1q84n_1nqzz_111",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_1nqzz_435",
-  "flash-list-item": "awsui_flash-list-item_1q84n_1nqzz_435",
-  "action-button": "awsui_action-button_1q84n_1nqzz_110",
-  "flash-type-success": "awsui_flash-type-success_1q84n_1nqzz_448",
-  "flash-type-error": "awsui_flash-type-error_1q84n_1nqzz_452",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_1nqzz_456",
-  "flash-type-info": "awsui_flash-type-info_1q84n_1nqzz_460",
-  "stack": "awsui_stack_1q84n_1nqzz_464",
-  "expanded": "awsui_expanded_1q84n_1nqzz_469",
-  "collapsed": "awsui_collapsed_1q84n_1nqzz_483",
-  "item": "awsui_item_1q84n_1nqzz_489",
-  "visual-refresh": "awsui_visual-refresh_1q84n_1nqzz_499",
-  "flash-items": "awsui_flash-items_1q84n_1nqzz_505",
-  "toggle": "awsui_toggle_1q84n_1nqzz_512",
-  "icon": "awsui_icon_1q84n_1nqzz_575"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_kpz6p_93",
+  "enter": "awsui_enter_1q84n_kpz6p_93",
+  "flash-body": "awsui_flash-body_1q84n_kpz6p_107",
+  "flash-message": "awsui_flash-message_1q84n_kpz6p_107",
+  "flash-header": "awsui_flash-header_1q84n_kpz6p_107",
+  "flash-content": "awsui_flash-content_1q84n_kpz6p_108",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_kpz6p_109",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_kpz6p_110",
+  "flash-icon": "awsui_flash-icon_1q84n_kpz6p_133",
+  "entering": "awsui_entering_1q84n_kpz6p_146",
+  "entered": "awsui_entered_1q84n_kpz6p_167",
+  "exiting": "awsui_exiting_1q84n_kpz6p_272",
+  "stack": "awsui_stack_1q84n_kpz6p_294",
+  "animation-running": "awsui_animation-running_1q84n_kpz6p_294",
+  "item": "awsui_item_1q84n_kpz6p_294",
+  "flash-list-item": "awsui_flash-list-item_1q84n_kpz6p_295",
+  "toggle": "awsui_toggle_1q84n_kpz6p_296",
+  "collapsed": "awsui_collapsed_1q84n_kpz6p_316",
+  "animation-ready": "awsui_animation-ready_1q84n_kpz6p_316",
+  "expanded-only": "awsui_expanded-only_1q84n_kpz6p_316",
+  "expanded": "awsui_expanded_1q84n_kpz6p_316",
+  "flash": "awsui_flash_1q84n_kpz6p_93",
+  "status": "awsui_status_1q84n_kpz6p_401",
+  "header": "awsui_header_1q84n_kpz6p_401",
+  "item-count": "awsui_item-count_1q84n_kpz6p_402",
+  "button": "awsui_button_1q84n_kpz6p_403",
+  "type-count": "awsui_type-count_1q84n_kpz6p_424",
+  "count-number": "awsui_count-number_1q84n_kpz6p_427",
+  "visual-refresh": "awsui_visual-refresh_1q84n_kpz6p_437",
+  "icon": "awsui_icon_1q84n_kpz6p_486",
+  "spaced-bottom": "awsui_spaced-bottom_1q84n_kpz6p_524",
+  "flashbar": "awsui_flashbar_1q84n_kpz6p_532",
+  "flash-refresh": "awsui_flash-refresh_1q84n_kpz6p_572",
+  "flash-list": "awsui_flash-list_1q84n_kpz6p_295",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_kpz6p_604",
+  "flash-text": "awsui_flash-text_1q84n_kpz6p_631",
+  "dismiss-button": "awsui_dismiss-button_1q84n_kpz6p_110",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_kpz6p_672",
+  "action-button": "awsui_action-button_1q84n_kpz6p_109",
+  "flash-type-success": "awsui_flash-type-success_1q84n_kpz6p_685",
+  "flash-type-error": "awsui_flash-type-error_1q84n_kpz6p_689",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_kpz6p_693",
+  "flash-type-info": "awsui_flash-type-info_1q84n_kpz6p_697"
 };
   

package/lib/internal/template/flashbar/utils.d.ts

@@ -0,0 +1,17 @@
+import { FlashbarProps, FlashType } from './interfaces';
+import { IconProps } from '../icon/interfaces';
+export declare const FOCUS_THROTTLE_DELAY = 2000;
+export interface StackableItem extends FlashbarProps.MessageDefinition {
+    expandedIndex: number;
+    collapsedIndex?: number;
+}
+export declare function getItemType(item: FlashbarProps.MessageDefinition): "progress" | FlashbarProps.Type;
+export declare function getVisibleCollapsedItems(items: ReadonlyArray<FlashbarProps.MessageDefinition>, desiredLength: number): ReadonlyArray<StackableItem>;
+export declare function getFlashTypeCount(items: readonly FlashbarProps.MessageDefinition[]): Record<FlashType, number>;
+export type LabelName = 'errorCountAriaLabel' | 'warningCountAriaLabel' | 'successCountAriaLabel' | 'infoCountAriaLabel' | 'inProgressCountAriaLabel';
+export declare const counterTypes: {
+    type: FlashType;
+    labelName: LabelName;
+    iconName: IconProps.Name;
+}[];
+//# sourceMappingURL=utils.d.ts.map

package/lib/internal/template/flashbar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/flashbar/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAKzC,MAAM,WAAW,aAAc,SAAQ,aAAa,CAAC,iBAAiB;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,iBAAiB,mCAMhE;AAWD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,EACrD,aAAa,EAAE,MAAM,GACpB,aAAa,CAAC,aAAa,CAAC,CAgD9B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,aAAa,CAAC,iBAAiB,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAO9G;AAED,MAAM,MAAM,SAAS,GACjB,qBAAqB,GACrB,uBAAuB,GACvB,uBAAuB,GACvB,oBAAoB,GACpB,0BAA0B,CAAC;AAE/B,eAAO,MAAM,YAAY,EAAE;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;CAC1B,EAMA,CAAC"}

package/lib/internal/template/flashbar/utils.js

@@ -0,0 +1,95 @@
+import { __assign } from "tslib";
+export var FOCUS_THROTTLE_DELAY = 2000;
+var typesToColors = {
+    error: 'red',
+    info: 'blue',
+    progress: 'blue',
+    success: 'green',
+    warning: 'blue'
+};
+function getColorFromType(type) {
+    var defaultColor = 'blue';
+    return type ? typesToColors[type] || defaultColor : defaultColor;
+}
+export function getItemType(item) {
+    if (item.loading) {
+        return 'progress';
+    }
+    else {
+        return item.type || 'info';
+    }
+}
+function getItemColor(item) {
+    return getColorFromType(getItemType(item));
+}
+/*
+ Returns a selection of notifications, preserving the order when possible but making sure that all different colors in
+ the stack are represented in the returned array.
+ The order corresponds to how they are represented when using the collapsible feature (newest first, oldest last).
+ */
+export function getVisibleCollapsedItems(items, desiredLength) {
+    // First `desiredLength` items in the original array,
+    // together with `isColorRepeated` to tell if they can be subject to be replaced later on if necessary
+    var itemsOnTop = [];
+    // Items that fall outside `desiredIndexLength` but need to be "promoted" if possible
+    // because they are of a different color which otherwise wouldn't be represented
+    var itemsToPromote = [];
+    var addedColors = new Set();
+    var allPossibleColors = Object.keys(typesToColors).length;
+    var finalLength = Math.min(items.length, desiredLength);
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        var color = getItemColor(item);
+        var isColorRepeated = addedColors.has(color);
+        if (i < finalLength) {
+            itemsOnTop.push({ item: __assign(__assign({}, item), { expandedIndex: i }), isColorRepeated: isColorRepeated });
+        }
+        else {
+            if (addedColors.size === allPossibleColors) {
+                // No need to keep looking for unrepresented colors, we can stop looping
+                break;
+            }
+            else if (!isColorRepeated) {
+                itemsToPromote.push(__assign(__assign({}, item), { expandedIndex: i }));
+            }
+        }
+        addedColors.add(color);
+    }
+    // Generate the new array with the selected items, by picking from both arrays.
+    // First, from the non-repeated items within the desired length...
+    // We loop `itemsOnTop` starting from the end because we prefer to preserve the first ones rather than the old ones
+    var reversedInitialSelection = [];
+    var slotsReservedForPromotions = 0;
+    for (var j = itemsOnTop.length - 1; j >= 0; j--) {
+        var item = itemsOnTop[j];
+        if (item.isColorRepeated && slotsReservedForPromotions < itemsToPromote.length) {
+            slotsReservedForPromotions += 1;
+        }
+        else {
+            reversedInitialSelection.push(item.item);
+        }
+    }
+    var selectedItems = reversedInitialSelection.reverse();
+    // ...and then complete the selection with as many promotable items as we can fit in the rest of the array
+    for (var k = 0; selectedItems.length < desiredLength; k++) {
+        selectedItems.push(itemsToPromote[k]);
+    }
+    return selectedItems;
+}
+export function getFlashTypeCount(items) {
+    var count = { error: 0, info: 0, progress: 0, success: 0, warning: 0 };
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+        var item = items_1[_i];
+        var type = getItemType(item);
+        count[type] += 1;
+    }
+    return count;
+}
+export var counterTypes = [
+    { type: 'error', labelName: 'errorCountAriaLabel', iconName: 'status-negative' },
+    { type: 'warning', labelName: 'warningCountAriaLabel', iconName: 'status-warning' },
+    { type: 'success', labelName: 'successCountAriaLabel', iconName: 'status-positive' },
+    { type: 'info', labelName: 'infoCountAriaLabel', iconName: 'status-info' },
+    { type: 'progress', labelName: 'inProgressCountAriaLabel', iconName: 'status-in-progress' },
+];
+//# sourceMappingURL=utils.js.map

package/lib/internal/template/flashbar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/flashbar/utils.ts"],"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 { FlashbarProps, FlashType } from './interfaces';\nimport { IconProps } from '../icon/interfaces';\n\nexport const FOCUS_THROTTLE_DELAY = 2000;\n\n// Since the position of a notification changes when the Flashbar is collapsed,\n// it is useful on some situations (e.g, for animating) to know the original position of the item\n// in the non-collapsed state.\nexport interface StackableItem extends FlashbarProps.MessageDefinition {\n  expandedIndex: number;\n  collapsedIndex?: number;\n}\n\nconst typesToColors: Record<FlashType, string> = {\n  error: 'red',\n  info: 'blue',\n  progress: 'blue',\n  success: 'green',\n  warning: 'blue',\n};\n\nfunction getColorFromType(type?: FlashType): string {\n  const defaultColor = 'blue';\n  return type ? typesToColors[type] || defaultColor : defaultColor;\n}\n\nexport function getItemType(item: FlashbarProps.MessageDefinition) {\n  if (item.loading) {\n    return 'progress';\n  } else {\n    return item.type || 'info';\n  }\n}\n\nfunction getItemColor(item: FlashbarProps.MessageDefinition) {\n  return getColorFromType(getItemType(item));\n}\n\n/*\n Returns a selection of notifications, preserving the order when possible but making sure that all different colors in\n the stack are represented in the returned array.\n The order corresponds to how they are represented when using the collapsible feature (newest first, oldest last).\n */\nexport function getVisibleCollapsedItems(\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>,\n  desiredLength: number\n): ReadonlyArray<StackableItem> {\n  // First `desiredLength` items in the original array,\n  // together with `isColorRepeated` to tell if they can be subject to be replaced later on if necessary\n  const itemsOnTop: { item: StackableItem; isColorRepeated: boolean }[] = [];\n\n  // Items that fall outside `desiredIndexLength` but need to be \"promoted\" if possible\n  // because they are of a different color which otherwise wouldn't be represented\n  const itemsToPromote: StackableItem[] = [];\n\n  const addedColors: Set<string> = new Set();\n  const allPossibleColors = Object.keys(typesToColors).length;\n  const finalLength = Math.min(items.length, desiredLength);\n\n  for (let i = 0; i < items.length; i++) {\n    const item = items[i];\n    const color = getItemColor(item);\n    const isColorRepeated = addedColors.has(color);\n    if (i < finalLength) {\n      itemsOnTop.push({ item: { ...item, expandedIndex: i }, isColorRepeated });\n    } else {\n      if (addedColors.size === allPossibleColors) {\n        // No need to keep looking for unrepresented colors, we can stop looping\n        break;\n      } else if (!isColorRepeated) {\n        itemsToPromote.push({ ...item, expandedIndex: i });\n      }\n    }\n    addedColors.add(color);\n  }\n  // Generate the new array with the selected items, by picking from both arrays.\n  // First, from the non-repeated items within the desired length...\n  // We loop `itemsOnTop` starting from the end because we prefer to preserve the first ones rather than the old ones\n  const reversedInitialSelection = [];\n  let slotsReservedForPromotions = 0;\n  for (let j = itemsOnTop.length - 1; j >= 0; j--) {\n    const item = itemsOnTop[j];\n    if (item.isColorRepeated && slotsReservedForPromotions < itemsToPromote.length) {\n      slotsReservedForPromotions += 1;\n    } else {\n      reversedInitialSelection.push(item.item);\n    }\n  }\n  const selectedItems = reversedInitialSelection.reverse();\n  // ...and then complete the selection with as many promotable items as we can fit in the rest of the array\n  for (let k = 0; selectedItems.length < desiredLength; k++) {\n    selectedItems.push(itemsToPromote[k]);\n  }\n  return selectedItems;\n}\n\nexport function getFlashTypeCount(items: readonly FlashbarProps.MessageDefinition[]): Record<FlashType, number> {\n  const count = { error: 0, info: 0, progress: 0, success: 0, warning: 0 };\n  for (const item of items) {\n    const type = getItemType(item);\n    count[type] += 1;\n  }\n  return count;\n}\n\nexport type LabelName =\n  | 'errorCountAriaLabel'\n  | 'warningCountAriaLabel'\n  | 'successCountAriaLabel'\n  | 'infoCountAriaLabel'\n  | 'inProgressCountAriaLabel';\n\nexport const counterTypes: {\n  type: FlashType;\n  labelName: LabelName;\n  iconName: IconProps.Name;\n}[] = [\n  { type: 'error', labelName: 'errorCountAriaLabel', iconName: 'status-negative' },\n  { type: 'warning', labelName: 'warningCountAriaLabel', iconName: 'status-warning' },\n  { type: 'success', labelName: 'successCountAriaLabel', iconName: 'status-positive' },\n  { type: 'info', labelName: 'infoCountAriaLabel', iconName: 'status-info' },\n  { type: 'progress', labelName: 'inProgressCountAriaLabel', iconName: 'status-in-progress' },\n];\n"]}

package/lib/internal/template/internal/animate.d.ts

@@ -0,0 +1,11 @@
+export declare function getDOMRects(elements: Record<string | number, HTMLElement | null>): Record<string, DOMRect>;
+export declare function animate({ oldState, elements, onTransitionsEnd, newElementInitialState, }: {
+    elements: Record<string | number, HTMLElement | null>;
+    oldState: Record<string | number, DOMRect>;
+    onTransitionsEnd?: () => void;
+    newElementInitialState?: (newRect: DOMRect) => {
+        scale?: number;
+        y?: number;
+    };
+}): void;
+//# sourceMappingURL=animate.d.ts.map

package/lib/internal/template/internal/animate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../../src/internal/animate.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC,2BAShF;AAaD,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,sBAAsB,GACvB,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,QAAQ,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,QA0EA"}

package/lib/internal/template/internal/animate.js

@@ -0,0 +1,104 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { __assign } from "tslib";
+export function getDOMRects(elements) {
+    var rects = {};
+    for (var id in elements) {
+        var element = elements[id];
+        if (element) {
+            rects[id] = element.getBoundingClientRect();
+        }
+    }
+    return rects;
+}
+/*
+  Animate DOM elements based on the FLIP technique
+  - https://aerotwist.com/blog/flip-your-animations/
+  - https://css-tricks.com/animating-layouts-with-the-flip-technique/
+
+  This can be useful when the initial dimensions or position of the element is not known,
+  so the initial offset or scaling needs to be retrieved via JS.
+
+  Caveat: this currently does not support elements having CSS transforms in the end state.
+  These would be overridden in the animation instead of combined.
+ */
+export function animate(_a) {
+    var oldState = _a.oldState, elements = _a.elements, onTransitionsEnd = _a.onTransitionsEnd, newElementInitialState = _a.newElementInitialState;
+    // First, apply the transform that will make the elements "look like" in the start position
+    for (var id in elements) {
+        var element = elements[id];
+        var oldRect = oldState[id];
+        if (element) {
+            var newRect = element.getBoundingClientRect();
+            var noOpTransform = { scale: 1, x: 0, y: 0 };
+            // Calculate initial position.
+            // If the element didn't exist previously, use the newElementInitialState function if provided.
+            // If not, default to no transitions (scale: 1, y: 0)
+            var calculatedInverseTransform = oldRect
+                ? {
+                    scale: oldRect.width / newRect.width,
+                    x: (oldRect.left + oldRect.right) / 2 - (newRect.left + newRect.right) / 2,
+                    y: (oldRect.top + oldRect.bottom) / 2 - (newRect.top + newRect.bottom) / 2
+                }
+                : newElementInitialState
+                    ? newElementInitialState(newRect)
+                    : {};
+            var inverseTransform = __assign(__assign({}, noOpTransform), calculatedInverseTransform);
+            // Apply this initial change, without animating
+            element.style.transitionProperty = 'none';
+            element.style.transform = "scale(".concat(inverseTransform.scale, ") translate(").concat(inverseTransform.x, "px, ").concat(inverseTransform.y, "px)");
+            if (!oldRect) {
+                // If the element didn't exist, then fade it in
+                // (besides any other possibly defined transitions based on `newElementInitialState`)
+                element.style.opacity = '0';
+            }
+        }
+    }
+    // Animate from the initial state to the end state
+    requestAnimationFrame(function () {
+        var ongoingAnimations = new Set();
+        var _loop_1 = function (id) {
+            var element = elements[id];
+            if (element) {
+                var oldRect = oldState[id];
+                if (oldRect) {
+                    // Animate from here on
+                    element.style.transitionProperty = "transform";
+                    // Unset inline CSS transforms so that the final state is applied
+                    element.style.transform = '';
+                }
+                else {
+                    // If the element didn't exist previously, fade in as well
+                    element.style.transitionProperty = "transform, opacity";
+                    element.style.transform = '';
+                    element.style.opacity = '';
+                }
+                var onTransitionStart_1 = function (event) {
+                    if (event.target === element) {
+                        ongoingAnimations.add(id);
+                        element.removeEventListener('transitionstart', onTransitionStart_1);
+                    }
+                };
+                var onTransitionEnd_1 = function (event) {
+                    if (event.target === element) {
+                        // Clean up remaining inline styles
+                        element.style.transitionProperty = '';
+                        element.removeEventListener('transitionstart', onTransitionEnd_1);
+                        if (onTransitionsEnd) {
+                            ongoingAnimations["delete"](id);
+                            if (ongoingAnimations.size === 0) {
+                                onTransitionsEnd();
+                            }
+                        }
+                    }
+                };
+                element.addEventListener('transitionstart', onTransitionStart_1);
+                element.addEventListener('transitionend', onTransitionEnd_1);
+            }
+        };
+        for (var id in elements) {
+            _loop_1(id);
+        }
+    });
+}
+//# sourceMappingURL=animate.js.map

package/lib/internal/template/internal/animate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.js","sourceRoot":"","sources":["../../../src/internal/animate.ts"],"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\nexport function getDOMRects(elements: Record<string | number, HTMLElement | null>) {\n  const rects: Record<string, DOMRect> = {};\n  for (const id in elements) {\n    const element = elements[id];\n    if (element) {\n      rects[id] = element.getBoundingClientRect();\n    }\n  }\n  return rects;\n}\n\n/*\n  Animate DOM elements based on the FLIP technique\n  - https://aerotwist.com/blog/flip-your-animations/\n  - https://css-tricks.com/animating-layouts-with-the-flip-technique/\n\n  This can be useful when the initial dimensions or position of the element is not known,\n  so the initial offset or scaling needs to be retrieved via JS.\n\n  Caveat: this currently does not support elements having CSS transforms in the end state.\n  These would be overridden in the animation instead of combined.\n */\nexport function animate({\n  oldState,\n  elements,\n  onTransitionsEnd,\n  newElementInitialState,\n}: {\n  elements: Record<string | number, HTMLElement | null>;\n  oldState: Record<string | number, DOMRect>;\n  onTransitionsEnd?: () => void;\n  newElementInitialState?: (newRect: DOMRect) => { scale?: number; y?: number };\n}) {\n  // First, apply the transform that will make the elements \"look like\" in the start position\n  for (const id in elements) {\n    const element = elements[id];\n    const oldRect = oldState[id];\n    if (element) {\n      const newRect = element.getBoundingClientRect();\n      const noOpTransform = { scale: 1, x: 0, y: 0 };\n      // Calculate initial position.\n      // If the element didn't exist previously, use the newElementInitialState function if provided.\n      // If not, default to no transitions (scale: 1, y: 0)\n      const calculatedInverseTransform = oldRect\n        ? {\n            scale: oldRect.width / newRect.width,\n            x: (oldRect.left + oldRect.right) / 2 - (newRect.left + newRect.right) / 2,\n            y: (oldRect.top + oldRect.bottom) / 2 - (newRect.top + newRect.bottom) / 2,\n          }\n        : newElementInitialState\n        ? newElementInitialState(newRect)\n        : {};\n      const inverseTransform = { ...noOpTransform, ...calculatedInverseTransform };\n      // Apply this initial change, without animating\n      element.style.transitionProperty = 'none';\n      element.style.transform = `scale(${inverseTransform.scale}) translate(${inverseTransform.x}px, ${inverseTransform.y}px)`;\n      if (!oldRect) {\n        // If the element didn't exist, then fade it in\n        // (besides any other possibly defined transitions based on `newElementInitialState`)\n        element.style.opacity = '0';\n      }\n    }\n  }\n\n  // Animate from the initial state to the end state\n  requestAnimationFrame(() => {\n    const ongoingAnimations = new Set();\n    for (const id in elements) {\n      const element = elements[id];\n      if (element) {\n        const oldRect = oldState[id];\n        if (oldRect) {\n          // Animate from here on\n          element.style.transitionProperty = `transform`;\n          // Unset inline CSS transforms so that the final state is applied\n          element.style.transform = '';\n        } else {\n          // If the element didn't exist previously, fade in as well\n          element.style.transitionProperty = `transform, opacity`;\n          element.style.transform = '';\n          element.style.opacity = '';\n        }\n        const onTransitionStart = (event: TransitionEvent) => {\n          if (event.target === element) {\n            ongoingAnimations.add(id);\n            element.removeEventListener('transitionstart', onTransitionStart);\n          }\n        };\n        const onTransitionEnd = (event: TransitionEvent) => {\n          if (event.target === element) {\n            // Clean up remaining inline styles\n            element.style.transitionProperty = '';\n            element.removeEventListener('transitionstart', onTransitionEnd);\n            if (onTransitionsEnd) {\n              ongoingAnimations.delete(id);\n              if (ongoingAnimations.size === 0) {\n                onTransitionsEnd();\n              }\n            }\n          }\n        };\n        element.addEventListener('transitionstart', onTransitionStart);\n        element.addEventListener('transitionend', onTransitionEnd);\n      }\n    }\n  });\n}\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -351,6 +351,8 @@
   --color-text-status-success-hb5hdl:#1d8102;
   --color-text-status-warning-94ezyx:#d13212;
   --color-text-top-navigation-title-2nrlq4:#16191f;
+  --color-board-placeholder-active-03p6jc:#d5dbdb;
+  --color-board-placeholder-hover-82yrwq:#99cbe4;
   --font-body-m-line-height-i7xxvv:22px;
   --font-body-m-size-sregvd:14px;
   --font-body-s-letter-spacing-p88gax:normal;
@@ -565,8 +567,10 @@
   --space-xxxl-bo9z7f:40px;
   --shadow-container-0bkp96:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   --shadow-container-stacked-j8j87i:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
+  --shadow-container-active-h4jsj2:0px 4px 8px rgba(0, 28, 36, 0.45);
   --shadow-dropdown-lzmmvx:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   --shadow-dropup-zo6vd9:0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15);
+  --shadow-flash-collapsed-zvjeqs:0px 2px 2px rgba(0, 0, 0, 0.15);
   --shadow-flash-sticky-4fgfqg:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   --shadow-modal-ukglr0:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
   --shadow-panel-v9vx7i:0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
@@ -895,6 +899,8 @@
   --color-text-status-success-hb5hdl:#6aaf35;
   --color-text-status-warning-94ezyx:#ff5d64;
   --color-text-top-navigation-title-2nrlq4:#fafafa;
+  --color-board-placeholder-active-03p6jc:#687078;
+  --color-board-placeholder-hover-82yrwq:#0073bb;
   --shadow-container-0bkp96:0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3);
   --shadow-container-stacked-j8j87i:0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3);
   --shadow-dropdown-lzmmvx:0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3);
@@ -1127,6 +1133,8 @@
   --color-text-status-success-hb5hdl:#6aaf35;
   --color-text-status-warning-94ezyx:#ff5d64;
   --color-text-top-navigation-title-2nrlq4:#fafafa;
+  --color-board-placeholder-active-03p6jc:#687078;
+  --color-board-placeholder-hover-82yrwq:#0073bb;
 }
 
 .awsui-context-flashbar:not(#\9) {
@@ -1316,6 +1324,8 @@
   --color-text-status-success-hb5hdl:#037f0c;
   --color-text-status-warning-94ezyx:#d91515;
   --color-text-top-navigation-title-2nrlq4:#000716;
+  --color-board-placeholder-active-03p6jc:#e9ebed;
+  --color-board-placeholder-hover-82yrwq:#d3e7f9;
   --font-body-s-letter-spacing-p88gax:0.005em;
   --font-button-letter-spacing-9fsbgj:0.005em;
   --font-button-weight-of7qcx:800;
@@ -1448,8 +1458,10 @@
   --space-text-grid-vertical-9z9zv2:16px;
   --shadow-container-0bkp96:0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
   --shadow-container-stacked-j8j87i:-1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgb(0 7 22 / 12%), 8px 0px 8px -7px rgb(0 7 22 / 12%), -8px 0px 8px -7px rgb(0 7 22 / 12%);
+  --shadow-container-active-h4jsj2:0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a;
   --shadow-dropdown-lzmmvx:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
   --shadow-dropup-zo6vd9:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
+  --shadow-flash-collapsed-zvjeqs:0px 4px 4px rgba(0, 0, 0, 0.25);
   --shadow-flash-sticky-4fgfqg:0px 6px 36px rgba(0, 7, 22, 0.10);
   --shadow-modal-ukglr0:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
   --shadow-panel-v9vx7i:0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.10);
@@ -1638,8 +1650,11 @@
   --color-text-status-success-hb5hdl:#29ad32;
   --color-text-status-warning-94ezyx:#eb6f6f;
   --color-text-top-navigation-title-2nrlq4:#fbfbfb;
+  --color-board-placeholder-active-03p6jc:#5f6b7a;
+  --color-board-placeholder-hover-82yrwq:#0972d3;
   --shadow-container-0bkp96:0px 0px 1px 1px #192534, 0px 1px 8px 2px rgba(0, 7, 22, 1);
   --shadow-container-stacked-j8j87i:-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22);
+  --shadow-container-active-h4jsj2:0px 1px 1px 1px #192534, 0px 6px 36px #000716;
   --shadow-dropdown-lzmmvx:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-dropup-zo6vd9:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-flash-sticky-4fgfqg:0px 6px 36px rgba(0, 7, 22, 1);
@@ -1852,6 +1867,8 @@
   --color-text-status-success-hb5hdl:#29ad32;
   --color-text-status-warning-94ezyx:#eb6f6f;
   --color-text-top-navigation-title-2nrlq4:#fbfbfb;
+  --color-board-placeholder-active-03p6jc:#5f6b7a;
+  --color-board-placeholder-hover-82yrwq:#0972d3;
 }
 
 .awsui-context-top-navigation.awsui-visual-refresh:not(#\9) {
@@ -2024,6 +2041,8 @@
   --color-text-status-success-hb5hdl:#29ad32;
   --color-text-status-warning-94ezyx:#eb6f6f;
   --color-text-top-navigation-title-2nrlq4:#fbfbfb;
+  --color-board-placeholder-active-03p6jc:#5f6b7a;
+  --color-board-placeholder-hover-82yrwq:#0972d3;
 }
 
 .awsui-visual-refresh .awsui-context-content-header:not(#\9) {
@@ -2195,8 +2214,11 @@
   --color-text-status-success-hb5hdl:#29ad32;
   --color-text-status-warning-94ezyx:#eb6f6f;
   --color-text-top-navigation-title-2nrlq4:#fbfbfb;
+  --color-board-placeholder-active-03p6jc:#5f6b7a;
+  --color-board-placeholder-hover-82yrwq:#0972d3;
   --shadow-container-0bkp96:none;
   --shadow-container-stacked-j8j87i:-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22);
+  --shadow-container-active-h4jsj2:0px 1px 1px 1px #192534, 0px 6px 36px #000716;
   --shadow-dropdown-lzmmvx:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-dropup-zo6vd9:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-modal-ukglr0:0px 4px 20px 1px rgba(0, 7, 22, 1);
@@ -2376,8 +2398,11 @@
   --color-text-status-success-hb5hdl:#29ad32;
   --color-text-status-warning-94ezyx:#eb6f6f;
   --color-text-top-navigation-title-2nrlq4:#fbfbfb;
+  --color-board-placeholder-active-03p6jc:#5f6b7a;
+  --color-board-placeholder-hover-82yrwq:#0972d3;
   --shadow-container-0bkp96:none;
   --shadow-container-stacked-j8j87i:-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22);
+  --shadow-container-active-h4jsj2:0px 1px 1px 1px #192534, 0px 6px 36px #000716;
   --shadow-dropdown-lzmmvx:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-dropup-zo6vd9:0px 4px 20px 1px rgba(0, 7, 22, 1);
   --shadow-modal-ukglr0:0px 4px 20px 1px rgba(0, 7, 22, 1);

package/lib/internal/template/internal/environment.js

@@ -1,5 +1,5 @@
 
-    export var PACKAGE_VERSION = '3.0.0 (ed68979)';
+    export var PACKAGE_VERSION = '3.0.0 (02caf0a)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;
     

package/lib/internal/template/internal/generated/styles/tokens.d.ts

@@ -230,6 +230,8 @@ export const colorTextStatusInactive: string;
 export const colorTextStatusInfo: string;
 export const colorTextStatusSuccess: string;
 export const colorTextStatusWarning: string;
+export const colorBoardPlaceholderActive: string;
+export const colorBoardPlaceholderHover: string;
 export const fontFamilyBase: string;
 export const fontFamilyMonospace: string;
 export const borderRadiusAlert: string;
@@ -277,4 +279,5 @@ export const spaceStaticM: string;
 export const spaceStaticL: string;
 export const spaceStaticXl: string;
 export const spaceStaticXxl: string;
-export const spaceStaticXxxl: string;
+export const spaceStaticXxxl: string;
+export const shadowContainerActive: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -230,6 +230,8 @@ export var colorTextStatusInactive = "var(--color-text-status-inactive-5ei55p, #
 export var colorTextStatusInfo = "var(--color-text-status-info-utupcz, #0972d3)";
 export var colorTextStatusSuccess = "var(--color-text-status-success-0fzhv9, #037f0c)";
 export var colorTextStatusWarning = "var(--color-text-status-warning-27nlyh, #d91515)";
+export var colorBoardPlaceholderActive = "var(--color-board-placeholder-active-vaxzdf, #e9ebed)";
+export var colorBoardPlaceholderHover = "var(--color-board-placeholder-hover-v1s7kq, #d3e7f9)";
 export var fontFamilyBase = "var(--font-family-base-qnistn, 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif)";
 export var fontFamilyMonospace = "var(--font-family-monospace-iz223z, Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace)";
 export var borderRadiusAlert = "var(--border-radius-alert-n0skwy, 12px)";
@@ -277,4 +279,5 @@ export var spaceStaticM = "var(--space-static-m-pc0uz7, 16px)";
 export var spaceStaticL = "var(--space-static-l-t7yjdj, 20px)";
 export var spaceStaticXl = "var(--space-static-xl-g2lpmk, 24px)";
 export var spaceStaticXxl = "var(--space-static-xxl-m6qwv3, 32px)";
-export var spaceStaticXxxl = "var(--space-static-xxxl-66ty0h, 40px)";
+export var spaceStaticXxxl = "var(--space-static-xxxl-66ty0h, 40px)";
+export var shadowContainerActive = "var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a)";