@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/E Store Build Listing/preview.stories.js

@@ -0,0 +1,543 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/E Store Build Listing'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<section class="has-m-top-lg">
+    <div class="ptc-container">
+      <div class="is-grid">
+        <div class="is-col-6 is-flex is-centered-vertically">
+          <ptc-title id="page-title" type='h1' title-size="medium" text-align='left' title-height="densest"
+            title-margin="margin-flush" upperline="no-upperline">KEPServerEX Store</ptc-title>
+        </div>
+        <div class="is-col-6">
+          <span class="is-float-right">
+            <ptc-shopping-cart color="black" cart-count="2"></ptc-shopping-cart>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="ptc-container is-mobile">
+      <div class="is-grid">
+        <div class="is-col-7 is-col-9-sm">
+          <ptc-search-field id="search" placeholder-label="Search"></ptc-search-field>
+        </div>
+        <div class="is-col-5 is-col-3-sm">
+          <ptc-container class="is-float-right filter-panel-cta" spacing="small" container-type="none">
+            <div class="filter-panel-content">
+              <icon-asset type="ptc" size="medium" name="options"></icon-asset>
+              <ptc-filter-tag class="js-filter-popup" theme="link-lg">
+                Filter
+              </ptc-filter-tag>
+            </div>
+          </ptc-container>
+        </div>
+      </div>
+      <ptc-spacer size="x-large"></ptc-spacer>
+    </div>
+
+    <div class="ptc-container">
+      <div class="is-grid has-col-gap-lg">
+        <div class="is-col-4-lg is-col-3-xl is-desktop desktop-filters">
+          <ptc-container-fluid spacing="small" container-type="none">
+            <div class="is-grid u-marginBottom-xxl">
+              <div class="is-col-12">
+                <ptc-search-field placeholder-label="Search"></ptc-search-field>
+              </div>
+            </div>
+          </ptc-container-fluid>
+
+          <ptc-container spacing="small" container-type="none">
+            <div class="is-grid">
+              <div class="is-col-12 is-flex is-centered-vertically is-spaced-between">
+                <ptc-title type='h4' text-align='left' title-height="densest" title-weight="w-7"
+                  title-margin="margin-flush" upperline="no-upperline">Filter Results</ptc-title>
+                <ptc-filter-tag theme="link">
+                  Clear
+                </ptc-filter-tag>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid">
+              <div class="is-col-12">
+                <ptc-icon-minimize heading="Product Type">
+                  <div class="fitler-check-list">
+                    <ptc-checkbox disabled>Advanced Plug-Ins</ptc-checkbox>
+                    <ptc-checkbox checked="checked" value="test">Drivers</ptc-checkbox>
+                    <ptc-checkbox>Suites</ptc-checkbox>
+                  </div>
+                </ptc-icon-minimize>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid">
+              <div class="is-col-12">
+                <ptc-icon-minimize heading="Within Suite">
+                  <div class="fitler-check-list">
+                    <ptc-checkbox>Allen-Bradley Suite</ptc-checkbox>
+                    <ptc-checkbox>Aromat Suite</ptc-checkbox>
+                    <ptc-checkbox>AutomationDirect Suite</ptc-checkbox>
+                    <ptc-checkbox>Building Automation Suite Suite Suite</ptc-checkbox>
+                    <ptc-checkbox>Contrex Suite</ptc-checkbox>
+                    <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                    <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                    <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                    <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                    <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                    <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                  </div>
+                </ptc-icon-minimize>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid">
+              <div class="is-col-12">
+                <ptc-icon-minimize heading="Protocol">
+                  <div class="fitler-check-list">
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                    <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                  </div>
+                </ptc-icon-minimize>
+              </div>
+            </div>
+            <hr>
+
+          </ptc-container>
+        </div>
+        <div class="is-col-12 is-col-8-lg is-col-9-xl">
+          <ptc-container spacing="xx-large" container-type="none">
+            <div class="is-grid">
+              <div class="is-col-8 is-flex is-centered-vertically">
+                <div class="results-label">
+                  <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-style="main">
+                    187 Results
+                  </ptc-para>
+                </div>
+                <div class="results-divider"></div>
+                <div class="filter-list">
+                  <ptc-filter-tag theme="bubble">
+                    Hello World
+                  </ptc-filter-tag>
+                  <ptc-filter-tag theme="bubble">
+                    Hello World
+                  </ptc-filter-tag>
+                  <ptc-filter-tag theme="bubble">
+                    Hello World
+                  </ptc-filter-tag>
+                </div>
+              </div>
+              <div class="is-col-4">
+                <span class="is-float-right">
+                  <ptc-dropdown label="Sort by:">
+                    <item selected label="Name"></item>
+                    <item label="Price: Low - High"></item>
+                    <item label="Price: High - Low"></item>
+                    <item label="Product Type"></item>
+                  </ptc-dropdown>
+                </span>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid product-item">
+              <div class="is-col-12 is-col-8-md">
+                <ptc-title type='h3' text-align='left' title-height="densest" title-margin="margin-flush"
+                  upperline="no-upperline">ABB Total Overflow</ptc-title>
+                <ptc-para class="product-description" font-size="x-small" font-weight="w-4" para-margin="margin-2"
+                  para-style="main" ellipsis-line-cutoff="2">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus urna sit amet fermentum
+                  egestas. Integer pretium metus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+                  Vivamus a nibh ut neque imperdiet volutpat. Sed sollicitudin cursus venenatis. Nulla in sapien
+                  maximus, luctus nunc ut, elementum nisl. Aliquam euismod, felis eu congue aliquet, eros urna tristique
+                  enim, in ultricies nisi mauris a eros. Nam vulputate lacus id feugiat pharetra. Nam sit amet lacus
+                  nisl. Nullam volutpat libero sit amet enim facilisis accumsan. Mauris suscipit lobortis lectus et
+                  feugiat. Nulla convallis lacus a eros faucibus aliquet finibus vitae sem. Vestibulum massa velit,
+                  pulvinar vel nisl ut, tristique ultrices velit. Praesent massa lorem, varius at massa sed, aliquet
+                  viverra magna.
+                </ptc-para>
+                <ptc-link theme="product-link" href="/" font-size="medium" link-title="Product Item">Learn
+                  More</ptc-link>
+              </div>
+
+              <div class="is-grid is-col-12 is-col-4-md has-col-gap-md has-row-gap-md add-to-cart-section">
+                <div class="is-col-7 support-dropdown-div">
+                  <ptc-dropdown theme="support" label="">
+                    <item label="Perscription"></item>
+                    <item label="Price: Low - High"></item>
+                    <item label="Price: High - Low"></item>
+                    <item label="Product Type"></item>
+                  </ptc-dropdown>
+                  <ptc-title class="is-placed-right" type='h3' text-align='right' title-size="xxx-large"
+                    title-height="normal" title-margin="margin-flush" upperline="no-upperline">$1,540/yr</ptc-title>
+                </div>
+                <div class="is-col-5">
+                  <div class="is-col-6 is-col-3-md">
+                    <div class="quantity-button-wrap">
+                      
+                      <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid product-item">
+              <div class="is-col-12 is-col-9-md">
+                <ptc-title type='h3' text-align='left' title-height="densest" title-margin="margin-flush"
+                  upperline="no-upperline">ABB Total Overflow</ptc-title>
+                <ptc-para class="product-description" font-size="x-small" font-weight="w-4" para-margin="margin-2"
+                  para-style="main" ellipsis-line-cutoff="2">
+                  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vehicula,
+                  massa non tincidunt imperdiet, lacus tellus dapibus nunc, ac venenatis est dui vel mauris. Etiam ac
+                  commodo arcu, in egestas sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+                  cubilia curae; Proin porttitor condimentum sagittis. Praesent sed bibendum turpis, eget vestibulum
+                  erat. Sed in viverra ante. Etiam in arcu commodo, laoreet velit quis, cursus tortor. Donec at
+                  tristique nisl. Duis lobortis eleifend finibus. Quisque consectetur ultricies dui. Sed sodales posuere
+                  massa id ullamcorper. Donec vel sagittis erat, non pellentesque velit. Suspendisse id posuere arcu.
+                </ptc-para>
+                <ptc-link theme="product-link" href="/" font-size="medium" link-title="Product Item">Learn
+                  More</ptc-link>
+              </div>
+              <div class="is-col-12 is-col-3-md add-to-cart-section">
+                <ptc-title class="is-placed-right" type='h3' text-align='right' title-size="xxx-large"
+                  title-height="normal" title-margin="margin-flush" upperline="no-upperline">$1,540/yr</ptc-title>
+                <div class="quantity-button-wrap">
+                 
+                 <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
+                </div>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid product-item">
+              <div class="is-col-12 is-col-9-md">
+                <ptc-title type='h3' text-align='left' title-height="densest" title-margin="margin-flush"
+                  upperline="no-upperline">ABB Total Overflow</ptc-title>
+                <ptc-para class="product-description" font-size="x-small" font-weight="w-4" para-margin="margin-2"
+                  para-style="main" ellipsis-line-cutoff="2">
+                  Aliquam erat volutpat. Sed aliquam vitae dolor nec mattis. Cras ligula libero, viverra vitae purus
+                  quis, interdum eleifend magna. Curabitur elit ipsum, finibus sed vulputate sed, fringilla id purus.
+                  Sed malesuada sapien dignissim magna laoreet, in eleifend ipsum congue. Phasellus eu rutrum ex. Donec
+                  venenatis sit amet purus vitae venenatis. Curabitur vehicula sollicitudin mauris. Sed congue consequat
+                  porta.
+                </ptc-para>
+                <ptc-link theme="product-link" href="/" font-size="medium" link-title="Product Item">Learn
+                  More</ptc-link>
+              </div>
+              <div class="is-col-12 is-col-3-md add-to-cart-section">
+                <ptc-title class="is-placed-right" type='h3' text-align='right' title-size="xxx-large"
+                  title-height="normal" title-margin="margin-flush" upperline="no-upperline">$1,540/yr</ptc-title>
+                <div class="quantity-button-wrap">
+                 
+                 <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
+                </div>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid product-item">
+              <div class="is-col-12 is-col-9-md">
+                <ptc-title type='h3' text-align='left' title-height="densest" title-margin="margin-flush"
+                  upperline="no-upperline">ABB Total Overflow</ptc-title>
+                <ptc-para class="product-description" font-size="x-small" font-weight="w-4" para-margin="margin-2"
+                  para-style="main" ellipsis-line-cutoff="2">
+                  Suspendisse vitae nunc aliquet, vehicula libero ut, rutrum dolor. Praesent magna turpis, cursus sit
+                  amet ipsum ut, tempor scelerisque sapien. Vivamus porta risus ac dolor consequat, vitae finibus nisi
+                  mattis. Mauris vulputate, nunc non imperdiet sollicitudin, massa purus placerat tellus, quis feugiat
+                  risus mauris sed elit. Donec non ligula sit amet nisl faucibus lacinia ac quis turpis. Nunc posuere
+                  nulla at placerat fermentum. Vestibulum elit enim, sagittis et lectus in, malesuada finibus purus.
+                  Etiam a dolor nunc. Nunc sit amet ligula ut ipsum feugiat maximus et a quam. Quisque imperdiet quis
+                  ipsum vitae ornare. Nulla condimentum in nunc ac cursus. Sed vehicula sem et orci dictum sollicitudin.
+                </ptc-para>
+                <ptc-link theme="product-link" href="/" font-size="medium" link-title="Product Item">Learn
+                  More</ptc-link>
+              </div>
+              <div class="is-col-12 is-col-3-md add-to-cart-section">
+                <ptc-title class="is-placed-right" type='h3' text-align='right' title-size="xxx-large"
+                  title-height="normal" title-margin="margin-flush" upperline="no-upperline">$1,540/yr</ptc-title>
+                
+                <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid product-item">
+              <div class="is-col-12 is-col-9-md">
+                <ptc-title type='h3' text-align='left' title-height="densest" title-margin="margin-flush"
+                  upperline="no-upperline">ABB Total Overflow</ptc-title>
+                <ptc-para class="product-description" font-size="x-small" font-weight="w-4" para-margin="margin-2"
+                  para-style="main" ellipsis-line-cutoff="2">
+                  The Allen-Bradley Bulletin 900 device driver works in conjunction with KEPServerEX to provide data
+                </ptc-para>
+                <ptc-link theme="product-link" href="/" font-size="medium" link-title="Product Item">Learn
+                  More</ptc-link>
+              </div>
+              <div class="is-col-12 is-col-3-md add-to-cart-section">
+                <ptc-title class="is-placed-right" type='h3' text-align='right' title-size="xxx-large"
+                  title-height="normal" title-margin="margin-flush" upperline="no-upperline">$1,540/yr</ptc-title>
+                
+                <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
+              </div>
+            </div>
+            <hr>
+            <div class="is-grid product-item">
+              <div class="is-col-12 is-col-9-md">
+                <ptc-title type='h3' text-align='left' title-height="densest" title-margin="margin-flush"
+                  upperline="no-upperline">ABB Total Overflow</ptc-title>
+                <ptc-para class="product-description" font-size="x-small" font-weight="w-4" para-margin="margin-2"
+                  para-style="main" ellipsis-line-cutoff="2">
+                  Pellentesque feugiat tellus lacus, et tincidunt lorem lacinia sit amet. Etiam congue vehicula dui, nec
+                  cursus ipsum volutpat quis. Nam nulla orci, pellentesque et suscipit tincidunt, convallis sit amet
+                  leo. Proin ornare dui hendrerit sagittis fringilla. Proin ante dui, lobortis quis lacus in, tempor
+                  pretium lectus. Phasellus luctus sed sem ut venenatis. Vestibulum aliquam lacus in eros posuere, et
+                  tristique magna dignissim. Etiam ullamcorper, leo eu euismod pulvinar, nulla libero aliquam lacus, in
+                  aliquet tellus magna sed purus. Integer auctor laoreet hendrerit.
+                </ptc-para>
+                <ptc-link theme="product-link" href="/" font-size="medium" link-title="Product Item">Learn
+                  More</ptc-link>
+              </div>
+              <div class="is-col-12 is-col-3-md add-to-cart-section">
+                <ptc-title class="is-placed-right" type='h3' text-align='right' title-size="xxx-large"
+                  title-height="normal" title-margin="margin-flush" upperline="no-upperline">$1,540/yr</ptc-title>
+                
+                <ptc-quantity-counter add-to-cart-label="Add to Cart" added-label="Added"></ptc-quantity-counter>
+              </div>
+            </div>
+            <hr>
+            <ptc-pagenation id="pager" total-count="190" clicked-page-number="1" number-of-items="10"
+              class="has-p-top-sm" theme="standard"></ptc-pagenation>
+          </ptc-container>
+        </div>
+      </div>
+    </div>
+    <ptc-spacer size="xxxx-large"></ptc-spacer>
+  </section>
+  <ptc-modal id="modal-example" show="false" size="lg" fixed="true" rounded="true" show-header-footer="true">
+    <div slot="header">
+      <ptc-title type='h4' upperline="no-upperline" text-align='center' title-margin="margin-5">
+        Filter Results
+      </ptc-title>
+    </div>
+    <div slot="footer">
+      <div class="is-grid">
+        <div class="is-col-12 is-flex is-centered-vertically is-spaced-between">
+          <ptc-filter-tag theme="link" class="modal-clear-btn">
+            Clear
+          </ptc-filter-tag>
+          <ptc-filter-tag theme="button" class="modal-apply-btn">
+            Apply
+          </ptc-filter-tag>
+        </div>
+      </div>
+    </div>
+    <div slot="body">
+      <div class="filter-modal-body">
+        <div class="is-grid">
+          <div class="is-col-12">
+            <ptc-icon-minimize heading="Product Type">
+              <div class="fitler-check-list-modal">
+                <ptc-checkbox>Advanced Plug-Ins</ptc-checkbox>
+                <ptc-checkbox checked="checked" value="test">Drivers</ptc-checkbox>
+                <ptc-checkbox>Suites</ptc-checkbox>
+              </div>
+            </ptc-icon-minimize>
+          </div>
+        </div>
+        <hr>
+        <div class="is-grid">
+          <div class="is-col-12">
+            <ptc-icon-minimize heading="Within Suite">
+              <div class="fitler-check-list-modal">
+                <ptc-checkbox>Allen-Bradley Suite</ptc-checkbox>
+                <ptc-checkbox>Aromat Suite</ptc-checkbox>
+                <ptc-checkbox>AutomationDirect Suite</ptc-checkbox>
+                <ptc-checkbox>Building Automation Suite Suite Suite</ptc-checkbox>
+                <ptc-checkbox>Contrex Suite</ptc-checkbox>
+                <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+                <ptc-checkbox>Cutler-Hammer Suite</ptc-checkbox>
+              </div>
+            </ptc-icon-minimize>
+          </div>
+        </div>
+        <hr>
+        <div class="is-grid">
+          <div class="is-col-12">
+            <ptc-icon-minimize heading="Protocol">
+              <div class="fitler-check-list-modal">
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+                <ptc-checkbox>Allen-Bradley Ethernet</ptc-checkbox>
+              </div>
+            </ptc-icon-minimize>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ptc-modal>
+<style>
+  body {
+    background: rgb(241, 241, 241);
+  }
+
+  .results-divider {
+    background-color: var(--color-gray-02);
+    width: 1px;
+    height: 60%;
+    margin: 0 16px;
+  }
+
+  .results-label {
+    min-width: 84px;
+  }
+
+  .product-item {
+    margin: var(--ptc-element-spacing-07) 0;
+  }
+
+  .product-description {
+    max-width: 393px;
+  }
+
+
+  .fitler-check-list {
+    margin: 0.625rem 0;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fitler-check-list ptc-checkbox {
+    margin: 6.5px 0;
+    display: block;
+  }
+
+  .filter-panel-cta {
+    width: 125px;
+  }
+
+  .filter-panel-content {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .filter-panel-content icon-asset {
+    width: 20px;
+    height: 20px;
+    margin-right: 0.75rem;
+  }
+
+  .modal-apply-btn {
+    margin-right: 1rem;
+  }
+
+  .modal-clear-btn {
+    margin-left: 1.5rem;
+  }
+
+  .filter-modal-body {
+    margin: 1.5rem;
+  }
+
+  .filter-modal-body hr {
+    margin-bottom: 1.5rem;
+  }
+
+  .fitler-check-list-modal {
+    margin: .85rem 0;
+  }
+
+  .fitler-check-list-modal ptc-checkbox {
+    margin: .5rem 0;
+  }
+
+  @media only screen and (max-width: 767px) {
+    .add-to-cart-section {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      align-items: flex-end;
+      margin-top: var(--ptc-element-spacing-06);
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
+    .add-to-cart-section {
+      display: flex;
+      justify-content: space-around;
+      flex-direction: column;
+      align-items: end;
+
+    }
+
+    .support-dropdown-div {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+  }
+
+  .desktop-filters hr {
+    margin: 1rem 0;
+  }
+</style>
+<script>
+  const popupCta = document.querySelector('.js-filter-popup');
+  const modal = document.querySelector('#modal-example');
+  const searches = document.querySelectorAll('ptc-search-field');
+  const pager = document.querySelector('#pager');
+
+  searches.forEach(search => {
+    search.addEventListener('clicked', (event) => {
+      console.log(event.detail.searchTerm);
+      search.clearSearchValue();
+    })
+  });
+
+  popupCta.addEventListener('clicked', () => {
+    modal.show = true;
+  });
+
+  pager.addEventListener('pageClicked', (e) => {
+    //document.querySelector('#page-title').scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+  });
+
+  modal.addEventListener('opened', () => {
+    modal.querySelectorAll('ptc-icon-minimize').forEach(pim => {
+      pim.Refresh();
+    });
+  });
+
+</script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();