@pega/lists-react 9.0.0-build.2.9 → 9.0.0-build.20.0

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

@@ -1,7 +1,7 @@
 // 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>`;
+    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} 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}`);
 }

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

@@ -1 +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"]}
+{"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,8vUAA8vU,CAAC;IAEz/c,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} 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/hooks/useRowActions.d.ts

@@ -0,0 +1,9 @@
+import type { RsCoreTypes } from 'pega-repeating-structures-core';
+import type { Action } from '@pega/cosmos-react-core';
+interface UseRowActionsProps {
+    row: RsCoreTypes.Row;
+    meta: RsCoreTypes.Meta;
+}
+declare const useRowActions: ({ row, meta }: UseRowActionsProps) => (() => Promise<Action[]>) | undefined;
+export default useRowActions;
+//# sourceMappingURL=useRowActions.d.ts.map

package/lib/Core/Views/Gallery/hooks/useRowActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowActions.d.ts","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/hooks/useRowActions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEtD,UAAU,kBAAkB;IAC1B,GAAG,EAAE,WAAW,CAAC,GAAG,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB;AAED,QAAA,MAAM,aAAa,GAAI,eAGpB,kBAAkB,KAAG,CAAC,MAAM,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,SAuBnD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/Core/Views/Gallery/hooks/useRowActions.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+const useRowActions = ({ row, meta }) => {
+    const fetchActions = useCallback(async () => {
+        const rowContext = row.getContext();
+        let allActions = meta.rowActions ?? [];
+        try {
+            const dynamicActions = await rowContext.getRowActionDetails(rowContext.getValue());
+            if (Array.isArray(dynamicActions)) {
+                allActions = [...dynamicActions, ...allActions];
+            }
+        }
+        catch (error) {
+            // On error, fall back to static actions only
+        }
+        return allActions.map(action => ({
+            ...action,
+            onClick: () => {
+                action.onClick(rowContext.getValue(), rowContext.refreshRow);
+            }
+        }));
+    }, [row, meta.rowActions]);
+    return meta.editing || meta.deleting ? fetchActions : undefined;
+};
+export default useRowActions;
+//# sourceMappingURL=useRowActions.js.map

package/lib/Core/Views/Gallery/hooks/useRowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowActions.js","sourceRoot":"","sources":["../../../../../Core/Views/Gallery/hooks/useRowActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUpC,MAAM,aAAa,GAAG,CAAC,EACrB,GAAG,EACH,IAAI,EACe,EAAyC,EAAE;IAC9D,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,IAAuB,EAAE;QAC7D,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,EAAE,CAAC;QACpC,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAC;QAEvC,IAAI,CAAC;YACH,MAAM,cAAc,GAAG,MAAM,UAAU,CAAC,mBAAmB,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;YACnF,IAAI,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;gBAClC,UAAU,GAAG,CAAC,GAAG,cAAc,EAAE,GAAG,UAAU,CAAC,CAAC;YAClD,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,6CAA6C;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC/B,GAAG,MAAM;YACT,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;YAC/D,CAAC;SACF,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3B,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useCallback } from 'react';\n\nimport type { RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { Action } from '@pega/cosmos-react-core';\n\ninterface UseRowActionsProps {\n  row: RsCoreTypes.Row;\n  meta: RsCoreTypes.Meta;\n}\n\nconst useRowActions = ({\n  row,\n  meta\n}: UseRowActionsProps): (() => Promise<Action[]>) | undefined => {\n  const fetchActions = useCallback(async (): Promise<Action[]> => {\n    const rowContext = row.getContext();\n    let allActions = meta.rowActions ?? [];\n\n    try {\n      const dynamicActions = await rowContext.getRowActionDetails(rowContext.getValue());\n      if (Array.isArray(dynamicActions)) {\n        allActions = [...dynamicActions, ...allActions];\n      }\n    } catch (error) {\n      // On error, fall back to static actions only\n    }\n\n    return allActions.map(action => ({\n      ...action,\n      onClick: () => {\n        action.onClick(rowContext.getValue(), rowContext.refreshRow);\n      }\n    }));\n  }, [row, meta.rowActions]);\n\n  return meta.editing || meta.deleting ? fetchActions : undefined;\n};\n\nexport default useRowActions;\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.jsx"],"names":[],"mappings":";AA4BA;;4CAyFC;;;;;;;;sBArHqB,YAAY"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAgB7E,iBAAS,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAA;CAAE,2CAsEpD;kBAtEQ,OAAO;;;AA0EhB,eAAe,OAAO,CAAC"}

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

@@ -1,73 +1,33 @@
 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 { useMemo } from 'react';
+import { FieldType } from 'pega-repeating-structures-core';
 import { useFullscreenContext } from '@pega/cosmos-react-core';
-import LoadingIndicator from '../../Components/LoadingIndicator';
-import EmptyContainer from '../../Components/EmptyContainer';
-import GalleryFooter from '../../Components/Footer';
+import { rowSelectColumnMeta } from 'pega-repeating-structures-core/lib/src/core/constants';
 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 { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';
 import RsCardWrapper from '../RsCardWrapper';
-import { generateRSDataContainerHeightStyles } from '../../Utils/styles';
-import StyledGalleryContainer from './StyledGalleryContainer';
-import ItemWrapper from './ItemWrapper';
-import GalleryA11y from './GalleryA11y';
-const StyledGVirtualizeContainer = styled.div `
-  ${() => generateRSDataContainerHeightStyles()};
-  position: relative;
-`;
+import LoadingIndicator from '../../Components/LoadingIndicator';
+import GalleryCard from './Components/GalleryCard';
+import GalleryCheckboxCard from './Components/GalleryCheckboxCard';
+import StyledGalleryContainer, { StyledVirtualizeContainer } from './StyledGalleryContainer';
+import { isInlineImage } from './utils';
 function Gallery({ view }) {
     const isFullscreen = !!useFullscreenContext()?.[0];
-    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 (_jsx(RsCardWrapper, { children: _jsxs(StyledGalleryContainer, { className: 'rv-gallery', "data-test-id": 'Gallery', view: view, isFullscreen: isFullscreen, 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, className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container card-item-grid-container', view: view, children: rows &&
-                                    rows.map(row => (_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 })] }) })] }) }));
+    const { columns = [], meta, rows } = view;
+    const { galleryConfig: { heroImage, header } = {}, selectionMode } = meta;
+    const headerColumn = useMemo(() => (header?.field ? columns.find(col => col.field.id === header.field) : undefined), [header, columns]);
+    const selectionColumn = useMemo(() => columns.find(col => col.field.id === rowSelectColumnMeta.field.id), [columns]);
+    const visibleColumns = useMemo(() => {
+        const cols = [...columns].filter(col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE);
+        cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));
+        return cols;
+    }, [columns]);
+    return (_jsx(RsCardWrapper, { children: _jsxs(StyledGalleryContainer, { "data-test-id": 'gallery', "data-testid": 'gallery', view: view, isFullscreen: isFullscreen, isInlineImage: isInlineImage(heroImage), children: [_jsx(Toolbar, { view: view }), _jsx(RenderView, { view: view, type: EXTERNAL_FILTERS }), _jsxs(StyledVirtualizeContainer, { className: 'container', children: [_jsx(Virtualiser, { id: 'rootVirtualiser', rowContainerClass: 'grid-container', view: view, bufferMultiplier: 0.8, children: rows?.length
+                                ? rows.map(row => selectionMode === SELECTION_MODES.multi && selectionColumn ? (_jsx(GalleryCheckboxCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn, selectionColumn: selectionColumn }, row.reactKey)) : (_jsx(GalleryCard, { meta: meta, row: row, visibleColumns: visibleColumns, headerColumn: headerColumn }, row.reactKey)))
+                                : [] }), _jsx(LoadingIndicator, { view: view, show: !rows || !!view.isLoading })] })] }) }));
 }
-Gallery.propTypes = {
-    view: PropTypes.objectOf(PropTypes.any).isRequired
-};
+Gallery.displayName = 'Gallery';
 export default Gallery;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useCallback, useRef, useEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { useFullscreenContext } from '@pega/cosmos-react-core';\n\nimport LoadingIndicator from '../../Components/LoadingIndicator';\nimport EmptyContainer from '../../Components/EmptyContainer';\nimport GalleryFooter from '../../Components/Footer';\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS } from '../../constants';\nimport { resolveViewComponent } from '../../Components/RenderingEngine/ComponentResolverFactory';\nimport RepeatingStructureA11y from '../../Components/A11y/RepeatingStructureA11y';\nimport useTranslate from '../../Hooks/useTranslate';\nimport RsCardWrapper from '../RsCardWrapper';\nimport { generateRSDataContainerHeightStyles } from '../../Utils/styles';\n\nimport StyledGalleryContainer from './StyledGalleryContainer';\nimport ItemWrapper from './ItemWrapper';\nimport GalleryA11y from './GalleryA11y';\n\nconst StyledGVirtualizeContainer = styled.div`\n  ${() => generateRSDataContainerHeightStyles()};\n  position: relative;\n`;\n\nfunction Gallery({ view }) {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n  const { rows, columns = [], meta, renderFactory, getContext } = view;\n  const { cardHeader, secondaryText } = meta;\n  const headerColumn = columns.find(({ field }) => field.name === cardHeader?.name);\n  const secondaryTextColumn = columns.find(({ field }) => field.name === secondaryText?.name);\n  const filteredColumns = columns.filter(c => c.field.name !== 'RowActionMenu');\n  const rowActionMenuColumn = columns.find(c => c.field.name === 'RowActionMenu');\n  const containerRef = useRef(null);\n  const [translate] = useTranslate();\n  const a11yRef = useRef(\n    new GalleryA11y(\n      {\n        topFocusRef: '.top',\n        bottomFocusRef: '.bottom',\n        focusElementSelector: '.tile',\n        parentElementSelector: '.grid-container'\n      },\n      // TODO: consider additional focusbales: input elements, checkbox, radios, etc...\n      [`button[aria-label^=${translate('Actions')}]`],\n      {\n        TAB: 9,\n        LEFT: 37,\n        UP: 38,\n        RIGHT: 39,\n        DOWN: 40\n      },\n      null\n    )\n  );\n\n  useEffect(() => {\n    a11yRef.current.setContainer(containerRef.current);\n    return () => {\n      containerRef.current = null;\n      a11yRef.current = null;\n    };\n  }, [a11yRef, containerRef]);\n\n  const keyDownHandler = useCallback(\n    e => {\n      a11yRef.current.a11yHandler(e);\n    },\n    [a11yRef]\n  );\n\n  return (\n    <RsCardWrapper>\n      <StyledGalleryContainer\n        className='rv-gallery'\n        data-test-id='Gallery'\n        view={view}\n        isFullscreen={isFullscreen}\n      >\n        <Toolbar view={view} />\n        <RenderView view={view} type={EXTERNAL_FILTERS} />\n        <RepeatingStructureA11y view={view} a11yRef={a11yRef}>\n          <StyledGVirtualizeContainer\n            ref={containerRef}\n            onKeyDown={keyDownHandler}\n            className='container'\n          >\n            <Virtualiser\n              id='rootVirtualiser'\n              rowContainerClass='grid-container card-item-grid-container'\n              view={view}\n            >\n              {rows &&\n                rows.map(row => (\n                  <ItemWrapper key={row.reactKey} {...row.getUIProps()}>\n                    {resolveViewComponent('CardItemRenderer', renderFactory, {\n                      row,\n                      headerColumn,\n                      secondaryTextColumn,\n                      filteredColumns,\n                      rowActionMenuColumn,\n                      ...getContext()\n                    })}\n                  </ItemWrapper>\n                ))}\n            </Virtualiser>\n            <GalleryFooter view={view} />\n            <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n            <EmptyContainer view={view} />\n          </StyledGVirtualizeContainer>\n        </RepeatingStructureA11y>\n      </StyledGalleryContainer>\n    </RsCardWrapper>\n  );\n}\n\nGallery.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport default Gallery;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\n\nimport { FieldType, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport { useFullscreenContext } from '@pega/cosmos-react-core';\nimport { rowSelectColumnMeta } from 'pega-repeating-structures-core/lib/src/core/constants';\n\nimport Virtualiser from '../Table/VirtualizeWrapper';\nimport Toolbar from '../../Components/Toolbar';\nimport RenderView from '../../Components/RenderingEngine/RenderView';\nimport { EXTERNAL_FILTERS, SELECTION_MODES } from '../../constants';\nimport RsCardWrapper from '../RsCardWrapper';\nimport LoadingIndicator from '../../Components/LoadingIndicator';\n\nimport GalleryCard from './Components/GalleryCard';\nimport GalleryCheckboxCard from './Components/GalleryCheckboxCard';\nimport StyledGalleryContainer, { StyledVirtualizeContainer } from './StyledGalleryContainer';\nimport { isInlineImage } from './utils';\n\nfunction Gallery({ view }: { view: RsCoreTypes.View }) {\n  const isFullscreen = !!useFullscreenContext()?.[0];\n\n  const { columns = [], meta, rows } = view;\n  const { galleryConfig: { heroImage, header } = {}, selectionMode } = meta;\n\n  const headerColumn = useMemo(\n    () => (header?.field ? columns.find(col => col.field.id === header.field) : undefined),\n    [header, columns]\n  );\n\n  const selectionColumn = useMemo(\n    () => columns.find(col => col.field.id === rowSelectColumnMeta.field.id),\n    [columns]\n  );\n\n  const visibleColumns = useMemo(() => {\n    const cols = [...columns].filter(\n      col => !col.hidden && col.field.type !== FieldType.ACTION_FIELD_TYPE\n    );\n    cols.sort((colA, colB) => (colA.order ?? 0) - (colB.order ?? 0));\n    return cols;\n  }, [columns]);\n\n  return (\n    <RsCardWrapper>\n      <StyledGalleryContainer\n        data-test-id='gallery'\n        data-testid='gallery'\n        view={view}\n        isFullscreen={isFullscreen}\n        isInlineImage={isInlineImage(heroImage)}\n      >\n        <Toolbar view={view} />\n        <RenderView view={view} type={EXTERNAL_FILTERS} />\n        <StyledVirtualizeContainer className='container'>\n          <Virtualiser\n            id='rootVirtualiser'\n            rowContainerClass='grid-container'\n            view={view}\n            bufferMultiplier={0.8}\n          >\n            {rows?.length\n              ? rows.map(row =>\n                  selectionMode === SELECTION_MODES.multi && selectionColumn ? (\n                    <GalleryCheckboxCard\n                      key={row.reactKey}\n                      meta={meta}\n                      row={row}\n                      visibleColumns={visibleColumns}\n                      headerColumn={headerColumn}\n                      selectionColumn={selectionColumn}\n                    />\n                  ) : (\n                    <GalleryCard\n                      key={row.reactKey}\n                      meta={meta}\n                      row={row}\n                      visibleColumns={visibleColumns}\n                      headerColumn={headerColumn}\n                    />\n                  )\n                )\n              : []}\n          </Virtualiser>\n          <LoadingIndicator view={view} show={!rows || !!view.isLoading} />\n        </StyledVirtualizeContainer>\n      </StyledGalleryContainer>\n    </RsCardWrapper>\n  );\n}\n\nGallery.displayName = 'Gallery';\n\nexport default Gallery;\n"]}

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

@@ -0,0 +1,36 @@
+import { type RsCoreTypes } from 'pega-repeating-structures-core';
+import type { SelectionCardDisplayProps } from '@pega/cosmos-react-core';
+import type { GalleryCardProps } from './Gallery.types';
+/**
+ * Determines if the provided hero image should be displayed inline based on its placement.
+ *
+ * @param heroImage - The hero image object.
+ * @returns `true` if the image's placement is considered inline; otherwise, `false`.
+ */
+export declare function isInlineImage(heroImage?: RsCoreTypes.HeroImage): boolean;
+/**
+ * Generates the data required to display a card in the gallery view.
+ *
+ * @param props - The properties required to generate the card data.
+ * @param props.row - The data for the current row.
+ * @param props.visibleColumns - The columns that are visible in the gallery.
+ * @param props.meta - Metadata including gallery configuration.
+ * @param props.headerColumn - The column used for the card header.
+ * @param props.actionColumn - The column used for card actions.
+ * @returns An object containing the card's label, image, and fields to be displayed.
+ */
+export declare function getCardData({ row, visibleColumns, meta, headerColumn }: GalleryCardProps): Pick<SelectionCardDisplayProps, 'label' | 'image' | 'fields' | 'aria-label'>;
+/**
+ * Extracts UI-related props from a row for card components.
+ *
+ * @param props - The properties containing the row.
+ * @param props.row - The data row.
+ * @returns An object containing aria-rowindex and data-key for the card.
+ */
+export declare function getCardUIProps({ row }: {
+    row: RsCoreTypes.Row;
+}): {
+    'aria-rowindex': number;
+    'data-key': string;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,KAAK,EAA6B,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAmDxD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,GAAG,OAAO,CAKxE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,cAAc,EACd,IAAI,EACJ,YAAY,EACb,EAAE,gBAAgB,GAAG,IAAI,CAAC,yBAAyB,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,CAAC,CAoBjG;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,WAAW,CAAC,GAAG,CAAA;CAAE;;;EAM/D"}

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isEmpty } from 'pega-repeating-structures-core';
+import GalleryFieldValue from './Components/GalleryFieldValue';
+import GalleryHeader from './Components/GalleryHeader';
+const GALLERY_IMAGE_PLACEMENT_MAP = {
+    left: 'inline-start',
+    right: 'inline-end',
+    top: 'block-start'
+};
+const INLINE_PLACEMENTS = ['left', 'right'];
+const DEFAULT_IMAGE_PLACEMENT = 'left';
+const DEFAULT_IMAGE_SIZE = 'flexible';
+/**
+ * Extracts image data from the provided metadata and row context.
+ *
+ * @param meta - The metadata object containing gallery configuration.
+ * @param row - The row object providing context and data values.
+ * @returns An object containing:
+ *   - `src`: The image source URL.
+ *   - `alt`: The alternative text for the image.
+ *   - `placement`: The placement of the image within the gallery.
+ *   - `size`: The size of the image.
+ */
+function getImageData(meta, row) {
+    const { galleryConfig: { heroImage: { source, altText, placement, size } = {} } = {} } = meta;
+    const rowData = row.getContext().getValue();
+    let altTextValue = '';
+    if (altText && 'field' in altText) {
+        altTextValue = altText.field in rowData ? String(rowData[altText.field]) : '';
+    }
+    else if (altText && 'value' in altText) {
+        altTextValue = altText.value;
+    }
+    const imageUrl = source?.field && source?.field in rowData ? String(rowData[source.field]) : '';
+    const imagePlacement = GALLERY_IMAGE_PLACEMENT_MAP[placement ?? DEFAULT_IMAGE_PLACEMENT];
+    const imageSize = size || DEFAULT_IMAGE_SIZE;
+    return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };
+}
+/**
+ * Determines if the provided hero image should be displayed inline based on its placement.
+ *
+ * @param heroImage - The hero image object.
+ * @returns `true` if the image's placement is considered inline; otherwise, `false`.
+ */
+export function isInlineImage(heroImage) {
+    if (!heroImage?.source)
+        return false;
+    const placement = heroImage.placement ?? DEFAULT_IMAGE_PLACEMENT;
+    return INLINE_PLACEMENTS.includes(placement);
+}
+/**
+ * Generates the data required to display a card in the gallery view.
+ *
+ * @param props - The properties required to generate the card data.
+ * @param props.row - The data for the current row.
+ * @param props.visibleColumns - The columns that are visible in the gallery.
+ * @param props.meta - Metadata including gallery configuration.
+ * @param props.headerColumn - The column used for the card header.
+ * @param props.actionColumn - The column used for card actions.
+ * @returns An object containing the card's label, image, and fields to be displayed.
+ */
+export function getCardData({ row, visibleColumns, meta, headerColumn }) {
+    const { galleryConfig: { heroImage, showFieldLabels = true } = {} } = meta;
+    // Must set execution context for each column to ensure correct value retrieval
+    visibleColumns.forEach(col => col.setExecutionContext(row));
+    const fields = visibleColumns.map(col => ({
+        id: col.field.id,
+        ...(showFieldLabels && { name: col.getContext()?.getLabel() }),
+        value: _jsx(GalleryFieldValue, { column: col, row: row })
+    }));
+    const image = heroImage ? getImageData(meta, row) : undefined;
+    const label = _jsx(GalleryHeader, { headerColumn: headerColumn, row: row });
+    const headerValue = row.getContext()?.getRowHeader()?.getValue();
+    const ariaLabel = !isEmpty(headerValue) ? String(headerValue) : undefined;
+    return { fields, image, label, 'aria-label': ariaLabel };
+}
+/**
+ * Extracts UI-related props from a row for card components.
+ *
+ * @param props - The properties containing the row.
+ * @param props.row - The data row.
+ * @returns An object containing aria-rowindex and data-key for the card.
+ */
+export function getCardUIProps({ row }) {
+    const uiProps = row.getUIProps();
+    return {
+        'aria-rowindex': uiProps['aria-rowindex'],
+        'data-key': uiProps['data-key']
+    };
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../Core/Views/Gallery/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isEmpty, type RsCoreTypes } from 'pega-repeating-structures-core';\nimport type { ImagePlacement, ImageSize, SelectionCardDisplayProps } from '@pega/cosmos-react-core';\n\nimport type { GalleryCardProps } from './Gallery.types';\nimport GalleryFieldValue from './Components/GalleryFieldValue';\nimport GalleryHeader from './Components/GalleryHeader';\n\nconst GALLERY_IMAGE_PLACEMENT_MAP: Record<RsCoreTypes.HeroImagePlacement, ImagePlacement> = {\n  left: 'inline-start',\n  right: 'inline-end',\n  top: 'block-start'\n} as const;\n\nconst INLINE_PLACEMENTS: RsCoreTypes.HeroImagePlacement[] = ['left', 'right'] as const;\nconst DEFAULT_IMAGE_PLACEMENT: RsCoreTypes.HeroImagePlacement = 'left';\nconst DEFAULT_IMAGE_SIZE: ImageSize = 'flexible';\n\n/**\n * Extracts image data from the provided metadata and row context.\n *\n * @param meta - The metadata object containing gallery configuration.\n * @param row - The row object providing context and data values.\n * @returns An object containing:\n *   - `src`: The image source URL.\n *   - `alt`: The alternative text for the image.\n *   - `placement`: The placement of the image within the gallery.\n *   - `size`: The size of the image.\n */\nfunction getImageData(\n  meta: RsCoreTypes.Meta,\n  row: RsCoreTypes.Row\n): {\n  src: string;\n  alt: string;\n  placement: ImagePlacement;\n  size: ImageSize;\n} {\n  const { galleryConfig: { heroImage: { source, altText, placement, size } = {} } = {} } = meta;\n  const rowData = row.getContext().getValue();\n\n  let altTextValue = '';\n  if (altText && 'field' in altText) {\n    altTextValue = altText.field in rowData ? String(rowData[altText.field]) : '';\n  } else if (altText && 'value' in altText) {\n    altTextValue = altText.value;\n  }\n\n  const imageUrl = source?.field && source?.field in rowData ? String(rowData[source.field]) : '';\n  const imagePlacement = GALLERY_IMAGE_PLACEMENT_MAP[placement ?? DEFAULT_IMAGE_PLACEMENT];\n  const imageSize = size || DEFAULT_IMAGE_SIZE;\n\n  return { src: imageUrl, alt: altTextValue, placement: imagePlacement, size: imageSize };\n}\n\n/**\n * Determines if the provided hero image should be displayed inline based on its placement.\n *\n * @param heroImage - The hero image object.\n * @returns `true` if the image's placement is considered inline; otherwise, `false`.\n */\nexport function isInlineImage(heroImage?: RsCoreTypes.HeroImage): boolean {\n  if (!heroImage?.source) return false;\n\n  const placement = heroImage.placement ?? DEFAULT_IMAGE_PLACEMENT;\n  return INLINE_PLACEMENTS.includes(placement);\n}\n\n/**\n * Generates the data required to display a card in the gallery view.\n *\n * @param props - The properties required to generate the card data.\n * @param props.row - The data for the current row.\n * @param props.visibleColumns - The columns that are visible in the gallery.\n * @param props.meta - Metadata including gallery configuration.\n * @param props.headerColumn - The column used for the card header.\n * @param props.actionColumn - The column used for card actions.\n * @returns An object containing the card's label, image, and fields to be displayed.\n */\nexport function getCardData({\n  row,\n  visibleColumns,\n  meta,\n  headerColumn\n}: GalleryCardProps): Pick<SelectionCardDisplayProps, 'label' | 'image' | 'fields' | 'aria-label'> {\n  const { galleryConfig: { heroImage, showFieldLabels = true } = {} } = meta;\n\n  // Must set execution context for each column to ensure correct value retrieval\n  visibleColumns.forEach(col => col.setExecutionContext(row));\n\n  const fields = visibleColumns.map(col => ({\n    id: col.field.id,\n    ...(showFieldLabels && { name: col.getContext()?.getLabel() }),\n    value: <GalleryFieldValue column={col} row={row} />\n  }));\n\n  const image = heroImage ? getImageData(meta, row) : undefined;\n\n  const label = <GalleryHeader headerColumn={headerColumn} row={row} />;\n\n  const headerValue = row.getContext()?.getRowHeader()?.getValue();\n  const ariaLabel = !isEmpty(headerValue) ? String(headerValue) : undefined;\n\n  return { fields, image, label, 'aria-label': ariaLabel };\n}\n\n/**\n * Extracts UI-related props from a row for card components.\n *\n * @param props - The properties containing the row.\n * @param props.row - The data row.\n * @returns An object containing aria-rowindex and data-key for the card.\n */\nexport function getCardUIProps({ row }: { row: RsCoreTypes.Row }) {\n  const uiProps = row.getUIProps();\n  return {\n    'aria-rowindex': uiProps['aria-rowindex'],\n    'data-key': uiProps['data-key']\n  };\n}\n"]}