@pega/lists-react 8.0.0-build.27.14

package/lib/Core/Test/TestUtils.d.ts

@@ -0,0 +1,9 @@
+export function wait(amount?: number): Promise<any>;
+export function updateWrapper(wrapper: any, amount?: number): Promise<void>;
+export function actWait(amount?: number): Promise<void>;
+export const cellTextColor: "rgb(166, 2, 13)";
+export function getStyles(): {
+    foregroundColor: string;
+};
+export const cellBackgroundColor: "rgb(255, 219, 222)";
+//# sourceMappingURL=TestUtils.d.ts.map

package/lib/Core/Test/TestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestUtils.d.ts","sourceRoot":"","sources":["../../../Core/Test/TestUtils.js"],"names":[],"mappings":"AAGA,oDAGC;AAGD,4EAKC;AAGD,wDAIC;AAED,8CAA+C;AACxC;;EAEL;AACF,uDAAwD"}

package/lib/Core/Test/TestUtils.js

@@ -0,0 +1,25 @@
+import { act } from '@testing-library/react';
+// An explicit wait function
+export function wait(amount = 0) {
+    // eslint-disable-next-line no-promise-executor-return
+    return new Promise(resolve => setTimeout(resolve, amount));
+}
+// Use this when you want to hold till your query finishes and state gets updated
+export async function updateWrapper(wrapper, amount = 0) {
+    await act(async () => {
+        await wait(amount);
+        wrapper.update();
+    });
+}
+// Use this when you want your query to get finished
+export async function actWait(amount = 0) {
+    await act(async () => {
+        await wait(amount);
+    });
+}
+export const cellTextColor = 'rgb(166, 2, 13)';
+export const getStyles = () => ({
+    foregroundColor: cellTextColor
+});
+export const cellBackgroundColor = 'rgb(255, 219, 222)';
+//# sourceMappingURL=TestUtils.js.map

package/lib/Core/Test/TestUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestUtils.js","sourceRoot":"","sources":["../../../Core/Test/TestUtils.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AAE7C,4BAA4B;AAC5B,MAAM,UAAU,IAAI,CAAC,MAAM,GAAG,CAAC;IAC7B,sDAAsD;IACtD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC7D,CAAC;AAED,iFAAiF;AACjF,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC;IACrD,MAAM,GAAG,CAAC,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,OAAO,CAAC,MAAM,EAAE,CAAC;IACnB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,oDAAoD;AACpD,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,MAAM,GAAG,CAAC;IACtC,MAAM,GAAG,CAAC,KAAK,IAAI,EAAE;QACnB,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAC/C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAAC;IAC9B,eAAe,EAAE,aAAa;CAC/B,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,oBAAoB,CAAC","sourcesContent":["import { act } from '@testing-library/react';\n\n// An explicit wait function\nexport function wait(amount = 0) {\n  // eslint-disable-next-line no-promise-executor-return\n  return new Promise(resolve => setTimeout(resolve, amount));\n}\n\n// Use this when you want to hold till your query finishes and state gets updated\nexport async function updateWrapper(wrapper, amount = 0) {\n  await act(async () => {\n    await wait(amount);\n    wrapper.update();\n  });\n}\n\n// Use this when you want your query to get finished\nexport async function actWait(amount = 0) {\n  await act(async () => {\n    await wait(amount);\n  });\n}\n\nexport const cellTextColor = 'rgb(166, 2, 13)';\nexport const getStyles = () => ({\n  foregroundColor: cellTextColor\n});\nexport const cellBackgroundColor = 'rgb(255, 219, 222)';\n"]}

package/lib/Core/Utils/index.d.ts

@@ -0,0 +1,19 @@
+import type { IconName } from '@pega/cosmos-react-core';
+import type { RSTypes } from '../../types';
+/**
+ * Performs a deep comparison between two values to determine if they are equivalent.
+ * A wrapper on fast-deep-equal
+ */
+export declare function deepEqual(x: any, y: any): boolean;
+export declare function deepCopy<T>(oldObj: T): T;
+export declare function debounced(delay: number, fn: (...arg: any) => void): (...args: any) => void;
+export declare function isFunction(obj: any): boolean;
+export declare function isArray(obj: any): obj is any[];
+export declare function isObject(obj: any): boolean;
+export declare function createClassName(...args: any): any;
+export declare function keyFrom(...args: (string | number | null | undefined)[]): string;
+export declare const allowToggle: (visibleColumns: string | any[]) => boolean;
+export declare const getFieldIcon: (type: RSTypes.FieldDef["type"]) => IconName;
+export declare function isAccessibleValue(value: any): boolean;
+export declare const isRowReorderFieldEnabled: (meta: RSTypes.Meta) => boolean;
+//# sourceMappingURL=index.d.ts.map

package/lib/Core/Utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Core/Utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;GAGG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,WAEvC;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAcxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,GAAG,KAAK,IAAI,aAEjC,GAAG,UASnC;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,GAAG,WAElC;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,gBAE/B;AAED,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,WAEhC;AAGD,wBAAgB,eAAe,CAAC,GAAG,IAAI,EAAE,GAAG,OAkB3C;AAED,wBAAgB,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE/E;AAED,eAAO,MAAM,WAAW,mBAAoB,MAAM,GAAG,GAAG,EAAE,YAEzD,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAG,QAiB7D,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,WAE3C;AAGD,eAAO,MAAM,wBAAwB,SAAU,OAAO,CAAC,IAAI,KAAG,OAE7D,CAAC"}

package/lib/Core/Utils/index.js

@@ -0,0 +1,93 @@
+import fastDeepEqual from 'fast-deep-equal/es6';
+/**
+ * Performs a deep comparison between two values to determine if they are equivalent.
+ * A wrapper on fast-deep-equal
+ */
+export function deepEqual(x, y) {
+    return fastDeepEqual(x, y);
+}
+export function deepCopy(oldObj) {
+    let newObj = oldObj;
+    if (oldObj && typeof oldObj === 'object') {
+        newObj = Array.isArray(oldObj) ? [] : {};
+        Object.keys(oldObj).forEach(key => {
+            if (Object.hasOwn(oldObj, key)) {
+                newObj[key] = deepCopy(oldObj[key]);
+            }
+        });
+    }
+    return newObj;
+}
+export function debounced(delay, fn) {
+    let timerId;
+    return function inner(...args) {
+        if (timerId) {
+            clearTimeout(timerId);
+        }
+        timerId = setTimeout(() => {
+            fn(...args);
+            timerId = null;
+        }, delay);
+    };
+}
+export function isFunction(obj) {
+    return typeof obj === 'function';
+}
+export function isArray(obj) {
+    return Array.isArray(obj);
+}
+export function isObject(obj) {
+    return obj === Object(obj) && !(isFunction(obj) || isArray(obj));
+}
+// Concat CSS classes
+export function createClassName(...args) {
+    const classes = args.reduce((arr, arg) => {
+        let val;
+        if (isArray(arg)) {
+            val = createClassName(...arg);
+        }
+        else if (typeof arg === 'string' && /\S/.test(arg)) {
+            val = arg.replace(/ \s+/g, ' ').trim();
+        }
+        else if (isFunction(arg)) {
+            val = createClassName(arg());
+        }
+        else if (isObject(arg)) {
+            val = Object.keys(arg).filter(key => !!arg[key] && key);
+        }
+        return val ? arr.concat(val) : arr;
+    }, []);
+    return classes.length ? classes.join(' ') : undefined;
+}
+export function keyFrom(...args) {
+    return args.map(val => `${val}`).join('-');
+}
+export const allowToggle = (visibleColumns) => {
+    return !(visibleColumns.length === 1);
+};
+export const getFieldIcon = (type) => {
+    switch (type) {
+        case 'number':
+            return 'dataviz-numeric-field';
+        case 'boolean':
+            return 'circle-mixed-left';
+        case 'datetime':
+        case 'date':
+        case 'time':
+            return 'dataviz-datetime-field';
+        case 'custom':
+            return 'distribute-item-center';
+        case 'URL':
+        case 'text':
+        default:
+            return 'dataviz-string-field';
+    }
+};
+export function isAccessibleValue(value) {
+    return value !== null && value !== undefined && value !== '––';
+}
+// TODO: temporary method, till meta.dragHandle is completely removed.
+export const isRowReorderFieldEnabled = (meta) => {
+    return meta.dragHandle || !!meta.rowReorderField;
+};
+//# sourceMappingURL=index.js.map

package/lib/Core/Utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../Core/Utils/index.ts"],"names":[],"mappings":"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","sourcesContent":["import fastDeepEqual from 'fast-deep-equal/es6';\n\nimport type { IconName } from '@pega/cosmos-react-core';\n\nimport type { RSTypes } from '../../types';\n\n/**\n * Performs a deep comparison between two values to determine if they are equivalent.\n * A wrapper on fast-deep-equal\n */\nexport function deepEqual(x: any, y: any) {\n  return fastDeepEqual(x, y);\n}\n\nexport function deepCopy<T>(oldObj: T): T {\n  let newObj: any = oldObj;\n\n  if (oldObj && typeof oldObj === 'object') {\n    newObj = Array.isArray(oldObj) ? [] : ({} as T);\n\n    Object.keys(oldObj).forEach(key => {\n      if (Object.hasOwn(oldObj, key)) {\n        newObj[key] = deepCopy(oldObj[key as keyof T]);\n      }\n    });\n  }\n\n  return newObj;\n}\n\nexport function debounced(delay: number, fn: (...arg: any) => void) {\n  let timerId: any;\n  return function inner(...args: any) {\n    if (timerId) {\n      clearTimeout(timerId);\n    }\n    timerId = setTimeout(() => {\n      fn(...args);\n      timerId = null;\n    }, delay);\n  };\n}\n\nexport function isFunction(obj: any) {\n  return typeof obj === 'function';\n}\n\nexport function isArray(obj: any) {\n  return Array.isArray(obj);\n}\n\nexport function isObject(obj: any) {\n  return obj === Object(obj) && !(isFunction(obj) || isArray(obj));\n}\n\n// Concat CSS classes\nexport function createClassName(...args: any) {\n  const classes = args.reduce((arr: [], arg: any) => {\n    let val;\n\n    if (isArray(arg)) {\n      val = createClassName(...arg);\n    } else if (typeof arg === 'string' && /\\S/.test(arg)) {\n      val = arg.replace(/ \\s+/g, ' ').trim();\n    } else if (isFunction(arg)) {\n      val = createClassName(arg());\n    } else if (isObject(arg)) {\n      val = Object.keys(arg).filter(key => !!arg[key] && key);\n    }\n\n    return val ? arr.concat(val) : arr;\n  }, []);\n\n  return classes.length ? classes.join(' ') : undefined;\n}\n\nexport function keyFrom(...args: (string | number | null | undefined)[]): string {\n  return args.map(val => `${val}`).join('-');\n}\n\nexport const allowToggle = (visibleColumns: string | any[]) => {\n  return !(visibleColumns.length === 1);\n};\n\nexport const getFieldIcon = (type: RSTypes.FieldDef['type']): IconName => {\n  switch (type) {\n    case 'number':\n      return 'dataviz-numeric-field';\n    case 'boolean':\n      return 'circle-mixed-left';\n    case 'datetime':\n    case 'date':\n    case 'time':\n      return 'dataviz-datetime-field';\n    case 'custom':\n      return 'distribute-item-center';\n    case 'URL':\n    case 'text':\n    default:\n      return 'dataviz-string-field';\n  }\n};\n\nexport function isAccessibleValue(value: any) {\n  return value !== null && value !== undefined && value !== '––';\n}\n\n// TODO: temporary method, till meta.dragHandle is completely removed.\nexport const isRowReorderFieldEnabled = (meta: RSTypes.Meta): boolean => {\n  return meta.dragHandle || !!meta.rowReorderField;\n};\n"]}

package/lib/Core/Views/Gallery/GalleryA11y.d.ts

@@ -0,0 +1,13 @@
+import { BaseA11y } from 'pega-repeating-structures-core';
+export type Selectors = {
+    focusElementSelector: string;
+    parentElementSelector?: string;
+};
+declare class GalleryA11y extends BaseA11y {
+    constructor(selectors: Selectors, focusableSelectors: string[], container: HTMLElement, customKeys?: Record<string, number>);
+    doesCardContainFocusableElement(element: HTMLElement): boolean;
+    galleryContainerEventHandlers(event: KeyboardEvent, currentCol: HTMLElement): void;
+    a11yHandler(event: KeyboardEvent): void;
+}
+export default GalleryA11y;
+//# sourceMappingURL=GalleryA11y.d.ts.map

package/lib/Core/Views/Gallery/GalleryA11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryA11y.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryA11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG;IACtB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAQF,cAAM,WAAY,SAAQ,QAAQ;gBAE9B,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,MAAM,EAAE,EAC5B,SAAS,EAAE,WAAW,EACtB,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM;IAKzC,+BAA+B,CAAC,OAAO,EAAE,WAAW;IAMpD,6BAA6B,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW;IA6BlE,WAAW,CAAC,KAAK,EAAE,aAAa;CAW1C;AAED,eAAe,WAAW,CAAC"}

package/lib/Core/Views/Gallery/GalleryA11y.js

@@ -0,0 +1,57 @@
+import { BaseA11y } from 'pega-repeating-structures-core';
+function gainFocus(element) {
+    if (!element)
+        return;
+    element.tabIndex = 0;
+    element.focus();
+}
+class GalleryA11y extends BaseA11y {
+    constructor(selectors, focusableSelectors, container, customKeys = {}) {
+        super(selectors, focusableSelectors, customKeys, container);
+    }
+    doesCardContainFocusableElement(element) {
+        const colItem = element.closest(this.selectors.focusElementSelector);
+        if (!colItem)
+            return false;
+        return element.matches(this.focusableSelectors.join(','));
+    }
+    galleryContainerEventHandlers(event, currentCol) {
+        const { keyCode, shiftKey } = event;
+        if (this.stopEventHandler(event)) {
+            return;
+        }
+        let nextItem;
+        const sortedColumns = this.getSortedColumns(currentCol.closest(this.selectors.parentElementSelector));
+        if (keyCode === this.keys.UP || keyCode === this.keys.LEFT) {
+            nextItem = sortedColumns[sortedColumns.indexOf(currentCol) - 1];
+        }
+        else if (keyCode === this.keys.RIGHT || keyCode === this.keys.DOWN) {
+            nextItem = sortedColumns[sortedColumns.indexOf(currentCol) + 1];
+        }
+        else if (keyCode === this.keys.TAB) {
+            this.containerTabHandler(event, currentCol, shiftKey);
+        }
+        if (nextItem && currentCol) {
+            event.preventDefault();
+            const focusableElements = this.getFocusableElementsInCell(nextItem);
+            currentCol.tabIndex = -1;
+            if (focusableElements.length === 1) {
+                gainFocus(focusableElements[0]);
+            }
+            else {
+                gainFocus(nextItem);
+            }
+        }
+    }
+    a11yHandler(event) {
+        const currentCol = document.activeElement?.closest(this.selectors.focusElementSelector);
+        if (document.activeElement instanceof HTMLElement &&
+            currentCol instanceof HTMLElement &&
+            (currentCol === document.activeElement ||
+                this.doesCardContainFocusableElement(document.activeElement))) {
+            this.galleryContainerEventHandlers(event, currentCol);
+        }
+    }
+}
+export default GalleryA11y;
+//# sourceMappingURL=GalleryA11y.js.map

package/lib/Core/Views/Gallery/GalleryA11y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryA11y.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/GalleryA11y.ts"],"names":[],"mappings":"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","sourcesContent":["import { BaseA11y } from 'pega-repeating-structures-core';\n\nexport type Selectors = {\n  focusElementSelector: string;\n  parentElementSelector?: string;\n};\n\nfunction gainFocus(element: HTMLElement | undefined): void {\n  if (!element) return;\n  element.tabIndex = 0;\n  element.focus();\n}\n\nclass GalleryA11y extends BaseA11y {\n  constructor(\n    selectors: Selectors,\n    focusableSelectors: string[],\n    container: HTMLElement,\n    customKeys: Record<string, number> = {}\n  ) {\n    super(selectors, focusableSelectors, customKeys, container);\n  }\n\n  doesCardContainFocusableElement(element: HTMLElement) {\n    const colItem = element.closest(this.selectors.focusElementSelector);\n    if (!colItem) return false;\n    return element.matches(this.focusableSelectors.join(','));\n  }\n\n  galleryContainerEventHandlers(event: KeyboardEvent, currentCol: HTMLElement) {\n    const { keyCode, shiftKey } = event;\n    if (this.stopEventHandler(event)) {\n      return;\n    }\n    let nextItem: Element | undefined | null;\n    const sortedColumns = this.getSortedColumns(\n      currentCol.closest(this.selectors.parentElementSelector!)\n    );\n\n    if (keyCode === this.keys.UP || keyCode === this.keys.LEFT) {\n      nextItem = sortedColumns[sortedColumns.indexOf(currentCol) - 1];\n    } else if (keyCode === this.keys.RIGHT || keyCode === this.keys.DOWN) {\n      nextItem = sortedColumns[sortedColumns.indexOf(currentCol) + 1];\n    } else if (keyCode === this.keys.TAB) {\n      this.containerTabHandler(event, currentCol, shiftKey);\n    }\n    if (nextItem && currentCol) {\n      event.preventDefault();\n      const focusableElements = this.getFocusableElementsInCell(nextItem);\n      currentCol.tabIndex = -1;\n      if (focusableElements.length === 1) {\n        gainFocus(focusableElements[0]);\n      } else {\n        gainFocus(nextItem as HTMLElement);\n      }\n    }\n  }\n\n  override a11yHandler(event: KeyboardEvent) {\n    const currentCol = document.activeElement?.closest(this.selectors.focusElementSelector);\n    if (\n      document.activeElement instanceof HTMLElement &&\n      currentCol instanceof HTMLElement &&\n      (currentCol === document.activeElement ||\n        this.doesCardContainFocusableElement(document.activeElement))\n    ) {\n      this.galleryContainerEventHandlers(event, currentCol);\n    }\n  }\n}\n\nexport default GalleryA11y;\n"]}

package/lib/Core/Views/Gallery/ItemWrapper.d.ts

@@ -0,0 +1,19 @@
+export default ItemWrapper;
+declare function ItemWrapper({ children, itemKey }: {
+    children: any;
+    itemKey: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ItemWrapper {
+    namespace propTypes {
+        let children: PropTypes.Requireable<object>;
+        let itemKey: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    }
+    namespace defaultProps {
+        let children_1: never[];
+        export { children_1 as children };
+        let itemKey_1: string;
+        export { itemKey_1 as itemKey };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=ItemWrapper.d.ts.map

package/lib/Core/Views/Gallery/ItemWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/ItemWrapper.jsx"],"names":[],"mappings":";AAiBA;;;4CAOC;;;;;;;;;;;;;sBAxBqB,YAAY"}

package/lib/Core/Views/Gallery/ItemWrapper.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useTheme, defaultThemeProp } from '@pega/cosmos-react-core';
+const StyledItemWrapper = styled.div `
+  &.tile {
+    flex: 1;
+    position: relative;
+    border: 0.063rem solid ${props => props.theme.base.palette['border-line']};
+    border-radius: ${props => props.theme.base['border-radius']};
+    background: ${props => props.theme.base.palette['primary-background']};
+    box-shadow: 0 0 0.313rem 0 rgba(238, 238, 238, 1);
+  }
+`;
+StyledItemWrapper.defaultProps = defaultThemeProp;
+function ItemWrapper({ children, itemKey }) {
+    const theme = useTheme();
+    return (_jsx(StyledItemWrapper, { theme: theme, "data-key": itemKey, className: 'tile', children: children }));
+}
+ItemWrapper.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+ItemWrapper.defaultProps = {
+    children: [],
+    itemKey: ''
+};
+export default ItemWrapper;
+//# sourceMappingURL=ItemWrapper.js.map

package/lib/Core/Views/Gallery/ItemWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemWrapper.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/ItemWrapper.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAErE,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;6BAIP,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;qBACxD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;CAGxE,CAAC;AACF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE;IACxC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,KAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,cAAY,OAAO,EAAE,SAAS,EAAC,MAAM,YACjE,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC;AAED,WAAW,CAAC,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IAClE,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CACnE,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG;IACzB,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;CACZ,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { useTheme, defaultThemeProp } from '@pega/cosmos-react-core';\n\nconst StyledItemWrapper = styled.div`\n  &.tile {\n    flex: 1;\n    position: relative;\n    border: 0.063rem solid ${props => props.theme.base.palette['border-line']};\n    border-radius: ${props => props.theme.base['border-radius']};\n    background: ${props => props.theme.base.palette['primary-background']};\n    box-shadow: 0 0 0.313rem 0 rgba(238, 238, 238, 1);\n  }\n`;\nStyledItemWrapper.defaultProps = defaultThemeProp;\n\nfunction ItemWrapper({ children, itemKey }) {\n  const theme = useTheme();\n  return (\n    <StyledItemWrapper theme={theme} data-key={itemKey} className='tile'>\n      {children}\n    </StyledItemWrapper>\n  );\n}\n\nItemWrapper.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),\n  itemKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n};\n\nItemWrapper.defaultProps = {\n  children: [],\n  itemKey: ''\n};\n\nexport default ItemWrapper;\n"]}

package/lib/Core/Views/Gallery/StyledGalleryContainer.d.ts

@@ -0,0 +1,3 @@
+export default StyledGalleryContainer;
+declare const StyledGalleryContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=StyledGalleryContainer.d.ts.map

package/lib/Core/Views/Gallery/StyledGalleryContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledGalleryContainer.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/StyledGalleryContainer.jsx"],"names":[],"mappings":";AAGA,sNAwDG"}

package/lib/Core/Views/Gallery/StyledGalleryContainer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+const StyledGalleryContainer = styled(forwardRef((props, ref) => _jsx("div", { ref: ref, ...props })))(({ theme }) => {
+    return css `
+    .grid-container {
+      display: grid;
+      /* stylelint-disable unit-allowed-list */
+      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+      grid-gap: 10px;
+      width: 100%;
+    }
+
+    .card-item-grid-container {
+      grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
+    }
+
+    .flex-container {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .rv-gallery-header {
+      background: ${theme.base.palette['primary-background']};
+      padding: 8px 16px;
+      border-radius: ${theme.base['border-radius']};
+      margin-bottom: 16px;
+    }
+    .rv-gallery-header > div {
+      padding: 0;
+    }
+
+    /* Gallery view CSS START */
+    .icon-ph > button {
+      cursor: pointer;
+      margin-right: 0.437rem;
+    }
+    .icon-ph {
+      margin: 0.625rem 0;
+    }
+    .field-value > li {
+      padding-bottom: 0.25rem;
+    }
+
+    .row-container {
+      position: absolute;
+      justify-content: space-evenly;
+    }
+
+    &.animate {
+      .row-container > span {
+        transition: transform 0.5s cubic-bezier(0.4, 0.6, 0.1, 1);
+      }
+    }
+
+    /* Gallery view CSS END */
+  `;
+});
+export default StyledGalleryContainer;
+//# sourceMappingURL=StyledGalleryContainer.js.map

package/lib/Core/Views/Gallery/StyledGalleryContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledGalleryContainer.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/StyledGalleryContainer.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,sBAAsB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,cAAK,GAAG,EAAE,GAAG,KAAM,KAAK,GAAI,CAAC,CAAC,CAAC,CAAC,EAC/F,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;oBAmBQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;uBAErC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+B/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,sBAAsB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nconst StyledGalleryContainer = styled(forwardRef((props, ref) => <div ref={ref} {...props} />))(({\n  theme\n}) => {\n  return css`\n    .grid-container {\n      display: grid;\n      /* stylelint-disable unit-allowed-list */\n      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n      grid-gap: 10px;\n      width: 100%;\n    }\n\n    .card-item-grid-container {\n      grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));\n    }\n\n    .flex-container {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n    }\n    .rv-gallery-header {\n      background: ${theme.base.palette['primary-background']};\n      padding: 8px 16px;\n      border-radius: ${theme.base['border-radius']};\n      margin-bottom: 16px;\n    }\n    .rv-gallery-header > div {\n      padding: 0;\n    }\n\n    /* Gallery view CSS START */\n    .icon-ph > button {\n      cursor: pointer;\n      margin-right: 0.437rem;\n    }\n    .icon-ph {\n      margin: 0.625rem 0;\n    }\n    .field-value > li {\n      padding-bottom: 0.25rem;\n    }\n\n    .row-container {\n      position: absolute;\n      justify-content: space-evenly;\n    }\n\n    &.animate {\n      .row-container > span {\n        transition: transform 0.5s cubic-bezier(0.4, 0.6, 0.1, 1);\n      }\n    }\n\n    /* Gallery view CSS END */\n  `;\n});\n\nexport default StyledGalleryContainer;\n"]}

package/lib/Core/Views/Gallery/_tests_/Samples/GalleryA11ySample.d.ts

@@ -0,0 +1,2 @@
+export default function createGalleryA11yContainer(containerName: string): Element | null;
+//# sourceMappingURL=GalleryA11ySample.d.ts.map

package/lib/Core/Views/Gallery/_tests_/Samples/GalleryA11ySample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryA11ySample.d.ts","sourceRoot":"","sources":["../../../../../../Core/Views/Gallery/_tests_/Samples/GalleryA11ySample.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,aAAa,EAAE,MAAM,kBAQvE"}

package/lib/Core/Views/Gallery/_tests_/Samples/GalleryA11ySample.js

@@ -0,0 +1,8 @@
+// cspell:disable
+export default function createGalleryA11yContainer(containerName) {
+    const galleryElement = document.createElement('div');
+    galleryElement.innerHTML = `<div class="sc-dYwHd kWBYTH rs-wrapper" style="--col-display-35959765: unset; --col-width-35959765: undefinedpx; --col-left-35959765: 0px; --col-order-35959765: 66; --col-display-1767309340: unset; --col-width-1767309340: undefinedpx; --col-left-1767309340: 0px; --col-order-1767309340: 67; --col-display-65290051: unset; --col-width-65290051: undefinedpx; --col-left-65290051: 0px; --col-order-65290051: 68; --col-display--974557166: unset; --col-width--974557166: undefinedpx; --col-left--974557166: 0px; --col-order--974557166: 69; --col-width--679626225: 32px; --col-left--679626225: 0px; --col-order--679626225: 131; --col-display--679626225: unset;"><div class="sc-LnnfE gElHPn rv-gallery" data-test-id="Gallery"><div class="rv-gallery-header"><div class="sc-bmjVWh fQdTIz"><div data-testid=":list-toolbar:" class="sc-eYWdgt sc-eCApGN jFXPJ"><div class="sc-eCApGN jSYNRl sc-eqLlAf crOphF"><div class="sc-eCApGN iMYeSJ"><div class="sc-eCApGN fGEyeG sc-dprmOr fwxzUF"><h3 data-testid=":list-toolbar:heading" class="sc-hKFyIo biwFTG sc-enTpxJ cvLBAg">List of Used Cars</h3><span data-testid=":list-toolbar:count" class="sc-hKFyIo cAQnkh sc-vMGFs gLcAwe">5 results</span></div><div class="sc-eCApGN fGEyeG"><button data-testid=":list-toolbar:search-button" as="button" type="button" aria-label="Search" class="sc-bqGHjH bZirob" data-popover-target=""><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="m18.513 17.115 4.754 4.755.047.14c.14.232.186.42.186.512 0 .653-.326.979-.979.979-.186 0-.42-.094-.652-.28l-4.708-4.708c-1.77 1.445-3.776 2.144-6.06 2.144-2.656 0-4.894-.932-6.758-2.797-1.91-1.91-2.843-4.148-2.843-6.758 0-2.61.932-4.848 2.843-6.759C6.253 2.433 8.491 1.5 11.102 1.5c2.61 0 4.847.932 6.758 2.843 1.865 1.864 2.797 4.102 2.797 6.759 0 2.237-.7 4.242-2.144 6.013Zm-7.365 1.631c2.098 0 3.869-.746 5.36-2.237 1.492-1.492 2.238-3.263 2.238-5.36 0-2.099-.746-3.916-2.237-5.408-1.492-1.492-3.263-2.237-5.36-2.237-2.099 0-3.916.745-5.408 2.237-1.492 1.492-2.237 3.31-2.237 5.407 0 2.098.745 3.869 2.237 5.36 1.492 1.492 3.31 2.238 5.407 2.238Z"></path></svg></button><button data-testid=":list-toolbar:create-new" as="button" type="button" aria-label="Add" class="sc-bqGHjH bZirob" data-popover-target=""><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="m13.43 2.5-.001 9.069H22.5v1.861h-9.071v9.07h-1.906l-.001-9.07H2.5v-1.86l9.022-.001V2.5h1.907Z"></path></svg></button><button class="sc-bqGHjH bZirob sc-hLiUrC" as="button" type="button" aria-label="Enter fullscreen" data-popover-target=""><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M11.492 13.5a1 1 0 0 1 0 1.414L6.406 20H10.5a1 1 0 0 1 0 2H3v-7.5a1 1 0 0 1 2 0v4.078l5.078-5.078a1 1 0 0 1 1.414 0ZM22 3v7.5a1 1 0 0 1-2 0V6.32l-5.179 5.18a1 1 0 0 1-1.414-1.414L18.492 5H14.5a1 1 0 0 1 0-2H22Z"></path></svg></button><button data-testid=":menu-button:" id="_0xg1ojqk8" aria-expanded="false" aria-haspopup="menu" type="button" aria-label="Actions - List of Used Cars" class="sc-dPaNSN jnYJHI sc-bqGHjH bZirob" data-popover-target=""><span class="sc-bBjRzc cykSxr sc-eCApGN fGEyeG"><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z"></path></svg></span></button></div></div></div></div></div></div><div data-test-id="externalFilters" class="sc-kLIdoS Gwrfp"></div><input class="sc-jftIyx QkTco top" type="text" aria-hidden="true"><div class="sc-cYftwm XIXxf"><div data-total-records="5" class="sc-dYlJdf hRdTqi pContainer"><div class="bContainer" style="height: 338px; --above-loader-top: -80px; --below-loader-top: 338px;"><div class="${containerName} card-item-grid-container short-height row-container" role="rowgroup" style="width: var(--container-width); top: 0px; --container-width: 1140px;"><div data-key="" class="sc-jjtVRN hMaPCw tile" data-index="0"><article role="none" class="sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu"><header class="sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader"><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Kodia</span></h4><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Red</span></h4><div class="cardRowAction"><span class="sc-dwgyss jgoxJL cell-content"><div class="sc-eaLsfz eUweZY row-action-menu"><button data-testid=":menu-button:" tabindex="-1" id="_7pwvndydg" aria-expanded="false" aria-haspopup="menu" type="button" aria-label="Actions - Kodia" class="sc-dPaNSN jnYJHI sc-bqGHjH nmaHv" data-popover-target=""><span class="sc-bBjRzc cykSxr sc-eCApGN fGEyeG"><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z"></path></svg></span></button></div></span></div></header><div class="sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent"><ul class="sc-bJqgKO fuTtkF"><li><span class="sc-dwgyss jgoxJL cell-content">Kodia</span></li><li><span class="sc-dwgyss jgoxJL cell-content">SUV</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Red</span></li><li><span class="sc-dwgyss jgoxJL cell-content">1c25a1fe-43be-461b-9960-677d063039c2</span></li></ul></div></article></div><div data-key="" class="sc-jjtVRN hMaPCw tile" data-index="1"><article role="none" class="sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu"><header class="sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader"><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Superb</span></h4><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Black</span></h4><div class="cardRowAction"><span class="sc-dwgyss jgoxJL cell-content"><div class="sc-eaLsfz eUweZY row-action-menu"><button data-testid=":menu-button:" tabindex="-1" id="_pvly48ela" aria-expanded="false" aria-haspopup="menu" type="button" aria-label="Actions - Superb" class="sc-dPaNSN jnYJHI sc-bqGHjH nmaHv" data-popover-target=""><span class="sc-bBjRzc cykSxr sc-eCApGN fGEyeG"><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z"></path></svg></span></button></div></span></div></header><div class="sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent"><ul class="sc-bJqgKO fuTtkF"><li><span class="sc-dwgyss jgoxJL cell-content">Superb</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Seda</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Black</span></li><li><span class="sc-dwgyss jgoxJL cell-content">1d95527b-8625-480e-968c-f1f18a03676b</span></li></ul></div></article></div><div data-key="" class="sc-jjtVRN hMaPCw tile" data-index="2"><article role="none" class="sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu"><header class="sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader"><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Slavia</span></h4><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Red</span></h4><div class="cardRowAction"><span class="sc-dwgyss jgoxJL cell-content"><div class="sc-eaLsfz eUweZY row-action-menu"><button data-testid=":menu-button:" tabindex="-1" id="_eowwpx2jv" aria-expanded="false" aria-haspopup="menu" type="button" aria-label="Actions - Slavia" class="sc-dPaNSN jnYJHI sc-bqGHjH nmaHv" data-popover-target=""><span class="sc-bBjRzc cykSxr sc-eCApGN fGEyeG"><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z"></path></svg></span></button></div></span></div></header><div class="sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent"><ul class="sc-bJqgKO fuTtkF"><li><span class="sc-dwgyss jgoxJL cell-content">Slavia</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Sedan</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Red</span></li><li><span class="sc-dwgyss jgoxJL cell-content">730150f3-1d79-4d8f-8705-37c4a0c1082e</span></li></ul></div></article></div><div data-key="" class="sc-jjtVRN hMaPCw tile" data-index="3"><article role="none" class="sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu"><header class="sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader"><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Octavia</span></h4><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Blue</span></h4><div class="cardRowAction"><span class="sc-dwgyss jgoxJL cell-content"><div class="sc-eaLsfz eUweZY row-action-menu"><button data-testid=":menu-button:" tabindex="-1" id="_pul2sp8vu" aria-expanded="false" aria-haspopup="menu" type="button" aria-label="Actions - Octavia" class="sc-dPaNSN jnYJHI sc-bqGHjH nmaHv" data-popover-target=""><span class="sc-bBjRzc cykSxr sc-eCApGN fGEyeG"><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z"></path></svg></span></button></div></span></div></header><div class="sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent"><ul class="sc-bJqgKO fuTtkF"><li><span class="sc-dwgyss jgoxJL cell-content">Octavia</span></li><li><span class="sc-dwgyss jgoxJL cell-content">SUV</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Blue</span></li><li><span class="sc-dwgyss jgoxJL cell-content">a207de37-08ab-4713-b6c5-9105a7c24145</span></li></ul></div></article></div><div data-key="" class="sc-jjtVRN hMaPCw tile" data-index="4"><article role="none" class="sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu"><header class="sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader"><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Kushaq</span></h4><h4 class="sc-hKFyIo himqoU sc-hGEFff fDSzKM"><span class="sc-dwgyss jgoxJL cell-content">Grey</span></h4><div class="cardRowAction"><span class="sc-dwgyss jgoxJL cell-content"><div class="sc-eaLsfz eUweZY row-action-menu"><button data-testid=":menu-button:" tabindex="-1" id="_tout3gs6r" aria-expanded="false" aria-haspopup="menu" type="button" aria-label="Actions - Kushaq" class="sc-dPaNSN jnYJHI sc-bqGHjH nmaHv" data-popover-target=""><span class="sc-bBjRzc cykSxr sc-eCApGN fGEyeG"><svg role="presentation" viewBox="0 0 25 25" class="sc-crzoUp jgPGeN"><path d="M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z"></path></svg></span></button></div></span></div></header><div class="sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent"><ul class="sc-bJqgKO fuTtkF"><li><span class="sc-dwgyss jgoxJL cell-content">Kushaq</span></li><li><span class="sc-dwgyss jgoxJL cell-content">SUV</span></li><li><span class="sc-dwgyss jgoxJL cell-content">Grey</span></li><li><span class="sc-dwgyss jgoxJL cell-content">d470b095-d497-482d-8010-00bc381d75a4</span></li></ul></div></article></div></div></div></div></div><input class="sc-jftIyx QkTco bottom" type="text" aria-hidden="true"></div></div>`;
+    document.body.appendChild(galleryElement);
+    return galleryElement.querySelector(`.${containerName}`);
+}
+//# sourceMappingURL=GalleryA11ySample.js.map

package/lib/Core/Views/Gallery/_tests_/Samples/GalleryA11ySample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryA11ySample.js","sourceRoot":"","sources":["../../../../../../Core/Views/Gallery/_tests_/Samples/GalleryA11ySample.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,aAAqB;IACtE,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAmB,CAAC;IAEvE,cAAc,CAAC,SAAS,GAAG,ktIAAktI,aAAa,uxUAAuxU,CAAC;IAElhd,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE1C,OAAO,cAAc,CAAC,aAAa,CAAC,IAAI,aAAa,EAAE,CAAC,CAAC;AAC3D,CAAC","sourcesContent":["// cspell:disable\nexport default function createGalleryA11yContainer(containerName: string) {\n  const galleryElement = document.createElement('div') as HTMLDivElement;\n\n  galleryElement.innerHTML = `<div class=\"sc-dYwHd kWBYTH rs-wrapper\" style=\"--col-display-35959765: unset; --col-width-35959765: undefinedpx; --col-left-35959765: 0px; --col-order-35959765: 66; --col-display-1767309340: unset; --col-width-1767309340: undefinedpx; --col-left-1767309340: 0px; --col-order-1767309340: 67; --col-display-65290051: unset; --col-width-65290051: undefinedpx; --col-left-65290051: 0px; --col-order-65290051: 68; --col-display--974557166: unset; --col-width--974557166: undefinedpx; --col-left--974557166: 0px; --col-order--974557166: 69; --col-width--679626225: 32px; --col-left--679626225: 0px; --col-order--679626225: 131; --col-display--679626225: unset;\"><div class=\"sc-LnnfE gElHPn rv-gallery\" data-test-id=\"Gallery\"><div class=\"rv-gallery-header\"><div class=\"sc-bmjVWh fQdTIz\"><div data-testid=\":list-toolbar:\" class=\"sc-eYWdgt sc-eCApGN jFXPJ\"><div class=\"sc-eCApGN jSYNRl sc-eqLlAf crOphF\"><div class=\"sc-eCApGN iMYeSJ\"><div class=\"sc-eCApGN fGEyeG sc-dprmOr fwxzUF\"><h3 data-testid=\":list-toolbar:heading\" class=\"sc-hKFyIo biwFTG sc-enTpxJ cvLBAg\">List of Used Cars</h3><span data-testid=\":list-toolbar:count\" class=\"sc-hKFyIo cAQnkh sc-vMGFs gLcAwe\">5 results</span></div><div class=\"sc-eCApGN fGEyeG\"><button data-testid=\":list-toolbar:search-button\" as=\"button\" type=\"button\" aria-label=\"Search\" class=\"sc-bqGHjH bZirob\" data-popover-target=\"\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"m18.513 17.115 4.754 4.755.047.14c.14.232.186.42.186.512 0 .653-.326.979-.979.979-.186 0-.42-.094-.652-.28l-4.708-4.708c-1.77 1.445-3.776 2.144-6.06 2.144-2.656 0-4.894-.932-6.758-2.797-1.91-1.91-2.843-4.148-2.843-6.758 0-2.61.932-4.848 2.843-6.759C6.253 2.433 8.491 1.5 11.102 1.5c2.61 0 4.847.932 6.758 2.843 1.865 1.864 2.797 4.102 2.797 6.759 0 2.237-.7 4.242-2.144 6.013Zm-7.365 1.631c2.098 0 3.869-.746 5.36-2.237 1.492-1.492 2.238-3.263 2.238-5.36 0-2.099-.746-3.916-2.237-5.408-1.492-1.492-3.263-2.237-5.36-2.237-2.099 0-3.916.745-5.408 2.237-1.492 1.492-2.237 3.31-2.237 5.407 0 2.098.745 3.869 2.237 5.36 1.492 1.492 3.31 2.238 5.407 2.238Z\"></path></svg></button><button data-testid=\":list-toolbar:create-new\" as=\"button\" type=\"button\" aria-label=\"Add\" class=\"sc-bqGHjH bZirob\" data-popover-target=\"\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"m13.43 2.5-.001 9.069H22.5v1.861h-9.071v9.07h-1.906l-.001-9.07H2.5v-1.86l9.022-.001V2.5h1.907Z\"></path></svg></button><button class=\"sc-bqGHjH bZirob sc-hLiUrC\" as=\"button\" type=\"button\" aria-label=\"Enter fullscreen\" data-popover-target=\"\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M11.492 13.5a1 1 0 0 1 0 1.414L6.406 20H10.5a1 1 0 0 1 0 2H3v-7.5a1 1 0 0 1 2 0v4.078l5.078-5.078a1 1 0 0 1 1.414 0ZM22 3v7.5a1 1 0 0 1-2 0V6.32l-5.179 5.18a1 1 0 0 1-1.414-1.414L18.492 5H14.5a1 1 0 0 1 0-2H22Z\"></path></svg></button><button data-testid=\":menu-button:\" id=\"_0xg1ojqk8\" aria-expanded=\"false\" aria-haspopup=\"menu\" type=\"button\" aria-label=\"Actions - List of Used Cars\" class=\"sc-dPaNSN jnYJHI sc-bqGHjH bZirob\" data-popover-target=\"\"><span class=\"sc-bBjRzc cykSxr sc-eCApGN fGEyeG\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z\"></path></svg></span></button></div></div></div></div></div></div><div data-test-id=\"externalFilters\" class=\"sc-kLIdoS Gwrfp\"></div><input class=\"sc-jftIyx QkTco top\" type=\"text\" aria-hidden=\"true\"><div class=\"sc-cYftwm XIXxf\"><div data-total-records=\"5\" class=\"sc-dYlJdf hRdTqi pContainer\"><div class=\"bContainer\" style=\"height: 338px; --above-loader-top: -80px; --below-loader-top: 338px;\"><div class=\"${containerName} card-item-grid-container short-height row-container\" role=\"rowgroup\" style=\"width: var(--container-width); top: 0px; --container-width: 1140px;\"><div data-key=\"\" class=\"sc-jjtVRN hMaPCw tile\" data-index=\"0\"><article role=\"none\" class=\"sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu\"><header class=\"sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader\"><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Kodia</span></h4><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Red</span></h4><div class=\"cardRowAction\"><span class=\"sc-dwgyss jgoxJL cell-content\"><div class=\"sc-eaLsfz eUweZY row-action-menu\"><button data-testid=\":menu-button:\" tabindex=\"-1\" id=\"_7pwvndydg\" aria-expanded=\"false\" aria-haspopup=\"menu\" type=\"button\" aria-label=\"Actions - Kodia\" class=\"sc-dPaNSN jnYJHI sc-bqGHjH nmaHv\" data-popover-target=\"\"><span class=\"sc-bBjRzc cykSxr sc-eCApGN fGEyeG\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z\"></path></svg></span></button></div></span></div></header><div class=\"sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent\"><ul class=\"sc-bJqgKO fuTtkF\"><li><span class=\"sc-dwgyss jgoxJL cell-content\">Kodia</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">SUV</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Red</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">1c25a1fe-43be-461b-9960-677d063039c2</span></li></ul></div></article></div><div data-key=\"\" class=\"sc-jjtVRN hMaPCw tile\" data-index=\"1\"><article role=\"none\" class=\"sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu\"><header class=\"sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader\"><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Superb</span></h4><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Black</span></h4><div class=\"cardRowAction\"><span class=\"sc-dwgyss jgoxJL cell-content\"><div class=\"sc-eaLsfz eUweZY row-action-menu\"><button data-testid=\":menu-button:\" tabindex=\"-1\" id=\"_pvly48ela\" aria-expanded=\"false\" aria-haspopup=\"menu\" type=\"button\" aria-label=\"Actions - Superb\" class=\"sc-dPaNSN jnYJHI sc-bqGHjH nmaHv\" data-popover-target=\"\"><span class=\"sc-bBjRzc cykSxr sc-eCApGN fGEyeG\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z\"></path></svg></span></button></div></span></div></header><div class=\"sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent\"><ul class=\"sc-bJqgKO fuTtkF\"><li><span class=\"sc-dwgyss jgoxJL cell-content\">Superb</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Seda</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Black</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">1d95527b-8625-480e-968c-f1f18a03676b</span></li></ul></div></article></div><div data-key=\"\" class=\"sc-jjtVRN hMaPCw tile\" data-index=\"2\"><article role=\"none\" class=\"sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu\"><header class=\"sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader\"><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Slavia</span></h4><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Red</span></h4><div class=\"cardRowAction\"><span class=\"sc-dwgyss jgoxJL cell-content\"><div class=\"sc-eaLsfz eUweZY row-action-menu\"><button data-testid=\":menu-button:\" tabindex=\"-1\" id=\"_eowwpx2jv\" aria-expanded=\"false\" aria-haspopup=\"menu\" type=\"button\" aria-label=\"Actions - Slavia\" class=\"sc-dPaNSN jnYJHI sc-bqGHjH nmaHv\" data-popover-target=\"\"><span class=\"sc-bBjRzc cykSxr sc-eCApGN fGEyeG\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z\"></path></svg></span></button></div></span></div></header><div class=\"sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent\"><ul class=\"sc-bJqgKO fuTtkF\"><li><span class=\"sc-dwgyss jgoxJL cell-content\">Slavia</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Sedan</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Red</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">730150f3-1d79-4d8f-8705-37c4a0c1082e</span></li></ul></div></article></div><div data-key=\"\" class=\"sc-jjtVRN hMaPCw tile\" data-index=\"3\"><article role=\"none\" class=\"sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu\"><header class=\"sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader\"><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Octavia</span></h4><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Blue</span></h4><div class=\"cardRowAction\"><span class=\"sc-dwgyss jgoxJL cell-content\"><div class=\"sc-eaLsfz eUweZY row-action-menu\"><button data-testid=\":menu-button:\" tabindex=\"-1\" id=\"_pul2sp8vu\" aria-expanded=\"false\" aria-haspopup=\"menu\" type=\"button\" aria-label=\"Actions - Octavia\" class=\"sc-dPaNSN jnYJHI sc-bqGHjH nmaHv\" data-popover-target=\"\"><span class=\"sc-bBjRzc cykSxr sc-eCApGN fGEyeG\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z\"></path></svg></span></button></div></span></div></header><div class=\"sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent\"><ul class=\"sc-bJqgKO fuTtkF\"><li><span class=\"sc-dwgyss jgoxJL cell-content\">Octavia</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">SUV</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Blue</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">a207de37-08ab-4713-b6c5-9105a7c24145</span></li></ul></div></article></div><div data-key=\"\" class=\"sc-jjtVRN hMaPCw tile\" data-index=\"4\"><article role=\"none\" class=\"sc-hGwdws kgCqDP sc-eCApGN fBSTzb sc-dGzUNk QCwsu\"><header class=\"sc-dwxYxt eGAfOL sc-eCApGN hOizZD sc-fKTzBO iUJquN cardHeader\"><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Kushaq</span></h4><h4 class=\"sc-hKFyIo himqoU sc-hGEFff fDSzKM\"><span class=\"sc-dwgyss jgoxJL cell-content\">Grey</span></h4><div class=\"cardRowAction\"><span class=\"sc-dwgyss jgoxJL cell-content\"><div class=\"sc-eaLsfz eUweZY row-action-menu\"><button data-testid=\":menu-button:\" tabindex=\"-1\" id=\"_tout3gs6r\" aria-expanded=\"false\" aria-haspopup=\"menu\" type=\"button\" aria-label=\"Actions - Kushaq\" class=\"sc-dPaNSN jnYJHI sc-bqGHjH nmaHv\" data-popover-target=\"\"><span class=\"sc-bBjRzc cykSxr sc-eCApGN fGEyeG\"><svg role=\"presentation\" viewBox=\"0 0 25 25\" class=\"sc-crzoUp jgPGeN\"><path d=\"M13.914 6.41c-.39.39-.877.586-1.414.586a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.537.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.876.586 1.413 0 .536-.195 1.023-.586 1.413Zm0 7.503c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585A1.95 1.95 0 0 1 10.5 12.5c0-.536.195-1.022.586-1.413.39-.389.877-.584 1.414-.584a1.95 1.95 0 0 1 1.414.584c.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Zm0 7.502c-.39.39-.877.585-1.414.585a1.953 1.953 0 0 1-1.414-.585 1.95 1.95 0 0 1-.586-1.413c0-.536.195-1.023.586-1.413.39-.39.877-.585 1.414-.585.537 0 1.024.195 1.414.585.39.39.586.877.586 1.413 0 .537-.195 1.023-.586 1.413Z\"></path></svg></span></button></div></span></div></header><div class=\"sc-EhVdS jdaToo sc-eCApGN fBSTzb sc-jDOthB iVzQtp cardContent\"><ul class=\"sc-bJqgKO fuTtkF\"><li><span class=\"sc-dwgyss jgoxJL cell-content\">Kushaq</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">SUV</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">Grey</span></li><li><span class=\"sc-dwgyss jgoxJL cell-content\">d470b095-d497-482d-8010-00bc381d75a4</span></li></ul></div></article></div></div></div></div></div><input class=\"sc-jftIyx QkTco bottom\" type=\"text\" aria-hidden=\"true\"></div></div>`;\n\n  document.body.appendChild(galleryElement);\n\n  return galleryElement.querySelector(`.${containerName}`);\n}\n"]}

package/lib/Core/Views/Gallery/index.d.ts

@@ -0,0 +1,13 @@
+export default Gallery;
+declare function Gallery({ view }: {
+    view: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Gallery {
+    namespace propTypes {
+        let view: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=index.d.ts.map

package/lib/Core/Views/Gallery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.jsx"],"names":[],"mappings":";AAuBA;;4CA6FC;;;;;;;;sBApHqB,YAAY"}

package/lib/Core/Views/Gallery/index.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { useCallback, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import LoadingIndicator from '../../Components/LoadingIndicator';
+import EmptyContainer from '../../Components/EmptyContainer';
+import GalleryFooter from '../../Components/Footer';
+import Virtualiser from '../Table/VirtualizeWrapper';
+import Toolbar from '../../Components/Toolbar';
+import RenderView from '../../Components/RenderingEngine/RenderView';
+import { EXTERNAL_FILTERS } from '../../constants';
+import { resolveViewComponent } from '../../Components/RenderingEngine/ComponentResolverFactory';
+import RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';
+import useTranslate from '../../Hooks/useTranslate';
+import StyledGalleryContainer from './StyledGalleryContainer';
+import ItemWrapper from './ItemWrapper';
+import GalleryA11y from './GalleryA11y';
+const StyledGVirtualizeContainer = styled.div `
+  position: relative;
+`;
+function Gallery({ view }) {
+    const { rows, columns = [], meta, renderFactory, getContext } = view;
+    const { cardHeader, secondaryText } = meta;
+    const headerColumn = columns.find(({ field }) => field.name === cardHeader?.name);
+    const secondaryTextColumn = columns.find(({ field }) => field.name === secondaryText?.name);
+    const filteredColumns = columns.filter(c => c.field.name !== 'RowActionMenu');
+    const rowActionMenuColumn = columns.find(c => c.field.name === 'RowActionMenu');
+    const containerRef = useRef(null);
+    const [translate] = useTranslate();
+    const a11yRef = useRef(new GalleryA11y({
+        topFocusRef: '.top',
+        bottomFocusRef: '.bottom',
+        focusElementSelector: '.tile',
+        parentElementSelector: '.grid-container'
+    }, 
+    // TODO: consider additional focusbales: input elements, checkbox, radios, etc...
+    [`button[aria-label^=${translate('Actions')}]`], {
+        TAB: 9,
+        LEFT: 37,
+        UP: 38,
+        RIGHT: 39,
+        DOWN: 40
+    }, null));
+    useEffect(() => {
+        a11yRef.current.setContainer(containerRef.current);
+        return () => {
+            containerRef.current = null;
+            a11yRef.current = null;
+        };
+    }, [a11yRef, containerRef]);
+    const keyDownHandler = useCallback(e => {
+        a11yRef.current.a11yHandler(e);
+    }, [a11yRef]);
+    return (_jsxs(StyledGalleryContainer, { className: 'rv-gallery', "data-test-id": 'Gallery', children: [_jsx("div", { className: 'rv-gallery-header', children: _jsx(Toolbar, { view: view }) }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsx(RepeatingStructureA11y, { view: view, a11yRef: a11yRef, children: _jsxs(StyledGVirtualizeContainer, { ref: containerRef, onKeyDown: keyDownHandler, children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container card-item-grid-container', view: view, children: rows &&
+                                rows.map(row => {
+                                    /* TODO: getComponent why 2 additional paramters in getComponent getComponent(
+                                    'CardItemRenderer',
+                                    {
+                                      row,
+                                      headerColumn,
+                                      secondaryTextColumn,
+                                      filteredColumns,
+                                      rowActionMenuColumn
+                                    },
+                                    null,
+                                    true
+                                  ); */
+                                    return (_jsx(ItemWrapper, { ...row.getUIProps(), children: resolveViewComponent('CardItemRenderer', renderFactory, {
+                                            row,
+                                            headerColumn,
+                                            secondaryTextColumn,
+                                            filteredColumns,
+                                            rowActionMenuColumn,
+                                            ...getContext()
+                                        }) }, row.reactKey));
+                                }) }), _jsx(GalleryFooter, { view: view }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading }), _jsx(EmptyContainer, { view: view })] }) })] }));
+}
+Gallery.propTypes = {
+    view: PropTypes.objectOf(PropTypes.any).isRequired
+};
+export default Gallery;
+//# sourceMappingURL=index.js.map