@cagovweb/state-template 1.1.0-beta.4 → 1.1.0-beta.5

package/dist/js/cagov.core.js

@@ -6358,91 +6358,94 @@ window.addEventListener("load", () => {
 // retain scroll position
 
 //@ts-check
-/**
- * Accordion web component that collapses and expands content inside itself on click.
- *
- * @element cagov-accordion
- *
- *
- * @fires click - Default events which may be listened to in order to discover most popular accordions
- *
- * @attr {string} open - set on the internal details element
- * If this is true the accordion will be open before any user interaction.
- *
- * @cssprop --primary-700 - Default value of #165ac2, used for all colors of borders and fills
- * @cssprop --primary-900 - Default value of #003588, used for background on hover
- *
- */
-class CaGovAccordion extends HTMLElement {
-  connectedCallback() {
-    this.summaryEl = this.querySelector("summary");
-    // trigger the opening and closing height change animation on summary click
-
-    this.setHeight();
-    this.summaryEl.addEventListener("click", this.listen.bind(this));
-    this.summaryEl.insertAdjacentHTML(
-      "beforeend",
-      `<div class="cagov-open-indicator" aria-hidden="true" />`
-    );
-    this.detailsEl = this.querySelector("details");
-    this.bodyEl = this.querySelector(".accordion-body");
 
-    window.addEventListener("resize", this.debounce(this.setHeight).bind(this));
-  }
+window.addEventListener("load", () => {
+  /**
+   * Accordion web component that collapses and expands content inside itself on click.
+   *
+   * @element cagov-accordion
+   *
+   *
+   * @fires click - Default events which may be listened to in order to discover most popular accordions
+   *
+   * @attr {string} open - set on the internal details element
+   * If this is true the accordion will be open before any user interaction.
+   *
+   * @cssprop --primary-700 - Default value of #165ac2, used for all colors of borders and fills
+   * @cssprop --primary-900 - Default value of #003588, used for background on hover
+   *
+   */
+  class CaGovAccordion extends HTMLElement {
+    connectedCallback() {
+      this.summaryEl = this.querySelector("summary");
+      // trigger the opening and closing height change animation on summary click
+
+      this.setHeight();
+      this.summaryEl.addEventListener("click", this.listen.bind(this));
+      this.summaryEl.insertAdjacentHTML(
+        "beforeend",
+        `<div class="cagov-open-indicator" aria-hidden="true" />`
+      );
+      this.detailsEl = this.querySelector("details");
+      this.bodyEl = this.querySelector(".accordion-body");
 
-  setHeight() {
-    window.requestAnimationFrame(() => {
-      // delay so the desired height is readable in all browsers
-      this.closedHeightInt = this.summaryEl.scrollHeight + 2;
-      this.closedHeight = `${this.closedHeightInt}px`;
+      window.addEventListener(
+        "resize",
+        this.debounce(this.setHeight).bind(this)
+      );
+    }
 
-      // apply initial height
+    setHeight() {
+      window.requestAnimationFrame(() => {
+        // delay so the desired height is readable in all browsers
+        this.closedHeightInt = this.summaryEl.scrollHeight + 2;
+        this.closedHeight = `${this.closedHeightInt}px`;
+
+        // apply initial height
+        if (this.detailsEl.hasAttribute("open")) {
+          // if open get scrollHeight
+          this.detailsEl.style.height = `${
+            this.bodyEl.scrollHeight + this.closedHeightInt
+          }px`;
+        } else {
+          // else apply closed height
+          this.detailsEl.style.height = this.closedHeight;
+        }
+      });
+    }
+
+    listen() {
       if (this.detailsEl.hasAttribute("open")) {
-        // if open get scrollHeight
-        this.detailsEl.style.height = `${
-          this.bodyEl.scrollHeight + this.closedHeightInt
-        }px`;
-      } else {
-        // else apply closed height
+        // was open, now closing
         this.detailsEl.style.height = this.closedHeight;
+      } else {
+        // was closed, opening
+        window.requestAnimationFrame(() => {
+          // delay so the desired height is readable in all browsers
+          this.detailsEl.style.height = `${
+            this.bodyEl.scrollHeight + this.closedHeightInt
+          }px`;
+        });
       }
-    });
-  }
+    }
 
-  listen() {
-    if (this.detailsEl.hasAttribute("open")) {
-      // was open, now closing
-      this.detailsEl.style.height = this.closedHeight;
-    } else {
-      // was closed, opening
-      window.requestAnimationFrame(() => {
-        // delay so the desired height is readable in all browsers
-        this.detailsEl.style.height = `${
-          this.bodyEl.scrollHeight + this.closedHeightInt
-        }px`;
-      });
+    /**
+     * @param {function} func
+     */
+    debounce(func, timeout = 300) {
+      let timer;
+      return (/** @type {any} */ ...args) => {
+        window.clearTimeout(timer);
+        timer = window.setTimeout(() => {
+          func.apply(this, args);
+        }, timeout);
+      };
     }
   }
 
-  /**
-   * @param {function} func
-   */
-  debounce(func, timeout = 300) {
-    let timer;
-    return (/** @type {any} */ ...args) => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        func.apply(this, args);
-      }, timeout);
-    };
-  }
-}
-window.addEventListener("load", () => {
   window.customElements.define("cagov-accordion", CaGovAccordion);
 });
 
-//document.querySelector('head').appendChild(style);
-
 //@ts-check
 window.addEventListener("load", () => {
   const w = window;
@@ -8046,56 +8049,56 @@ window.addEventListener("load", () => {
     document.body.scrollTop = 0; // For Safari
     document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   };
-});
 
-// If an user scrolls down the page for more than 400px activate back to top button
-// othervise keep it invisible
-let timer = 0;
+  // If an user scrolls down the page for more than 400px activate back to top button
+  // othervise keep it invisible
+  let timer = 0;
 
-let lastScrollTop = 0;
+  let lastScrollTop = 0;
 
-window.addEventListener(
-  "scroll",
-  () => {
-    const returnTopButton = document.querySelector(".return-top");
-    if (!returnTopButton) return;
+  window.addEventListener(
+    "scroll",
+    () => {
+      const returnTopButton = document.querySelector(".return-top");
+      if (!returnTopButton) return;
 
-    const st = window.pageYOffset || document.documentElement.scrollTop;
-    if (st > lastScrollTop) {
-      // downscroll code
-      returnTopButton.classList.remove("is-visible");
-    } else if (
-      document.body.scrollTop >= 400 ||
-      document.documentElement.scrollTop >= 400
-    ) {
-      // upscroll code
+      const st = window.pageYOffset || document.documentElement.scrollTop;
+      if (st > lastScrollTop) {
+        // downscroll code
+        returnTopButton.classList.remove("is-visible");
+      } else if (
+        document.body.scrollTop >= 400 ||
+        document.documentElement.scrollTop >= 400
+      ) {
+        // upscroll code
 
-      if (timer) {
-        window.clearTimeout(timer);
-      }
-      returnTopButton.classList.add("is-visible");
+        if (timer) {
+          window.clearTimeout(timer);
+        }
+        returnTopButton.classList.add("is-visible");
 
-      timer = window.setTimeout(() => {
+        timer = window.setTimeout(() => {
+          returnTopButton.classList.remove("is-visible");
+        }, 2000); //Back to top removes itself after 2 sec of inactivity
+      }
+      // bottom of the page
+      else {
         returnTopButton.classList.remove("is-visible");
-      }, 2000); //Back to top removes itself after 2 sec of inactivity
-    }
-    // bottom of the page
-    else {
-      returnTopButton.classList.remove("is-visible");
-    }
+      }
 
-    lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-  },
-  false
-);
+      lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
+    },
+    false
+  );
 
-// Hittin' rock bottom
-window.addEventListener("scroll", () => {
-  const returnTopButton = document.querySelector(".return-top");
-  if (!returnTopButton) return;
-  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
-    returnTopButton.classList.add("is-visible");
-  }
+  // Hittin' rock bottom
+  window.addEventListener("scroll", () => {
+    const returnTopButton = document.querySelector(".return-top");
+    if (!returnTopButton) return;
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+      returnTopButton.classList.add("is-visible");
+    }
+  });
 });
 
 //@ts-check
@@ -8377,13 +8380,13 @@ window.addEventListener("load", () => {
 /* -----------------------------------------
    PAGINATION - /src/js/cagov/pagination.js
 ----------------------------------------- */
-
-/**
- * @param {string} label
- * @param {number} number
- */
-function pageListItem(label, number) {
-  return `<li class="cagov-pagination__item">
+window.addEventListener("load", () => {
+  /**
+   * @param {string} label
+   * @param {number} number
+   */
+  function pageListItem(label, number) {
+    return `<li class="cagov-pagination__item">
     <a
       href="javascript:void(0);"
       class="cagov-pagination__button"
@@ -8393,27 +8396,27 @@ function pageListItem(label, number) {
       ${number}
     </a>
   </li>`;
-}
+  }
 
-function pageOverflow() {
-  return `<li
+  function pageOverflow() {
+    return `<li
     class="cagov-pagination__item cagov-pagination__overflow"
     role="presentation"
   >
     <span> … </span>
   </li>`;
-}
+  }
 
-/**
- * @param {string} next
- * @param {string} previous
- * @param {string} page
- * @param {number} currentPage
- * @param {number} totalPages
- */
-function templateHTML(next, previous, page, currentPage, totalPages) {
-  const unbounded = totalPages == -1;
-  return `<nav aria-label="Pagination" class="cagov-pagination">
+  /**
+   * @param {string} next
+   * @param {string} previous
+   * @param {string} page
+   * @param {number} currentPage
+   * @param {number} totalPages
+   */
+  function templateHTML(next, previous, page, currentPage, totalPages) {
+    const unbounded = totalPages == -1;
+    return `<nav aria-label="Pagination" class="cagov-pagination">
     <ul class="cagov-pagination__list">
       <li class="cagov-pagination__item">
         <a
@@ -8472,9 +8475,9 @@ function templateHTML(next, previous, page, currentPage, totalPages) {
       </li>
     </ul>
   </nav>`;
-}
+  }
 
-const styles = `
+  const styles = `
 cagov-pagination {
   white-space: nowrap;
   font-size: .9rem;
@@ -8518,148 +8521,147 @@ cagov-pagination .cagov-pagination__item:has(.cagov-pagination__link-inactive) {
 }
 `;
 
-/**
- * Pagination web component
- *
- * @element cagov-pagination
- *
- * @fires paginationClick - custom event with object with detail value of current page: {detail: 1}
- *
- * @attr {string} [data-yes] - "Yes";
- * @attr {string} [data-no] - "No";
- *
- * @cssprop --primary-700 - Default value of #165ac2, used for text, border color
- */
-class CAGovPagination extends HTMLElement {
-  constructor() {
-    super();
+  /**
+   * Pagination web component
+   *
+   * @element cagov-pagination
+   *
+   * @fires paginationClick - custom event with object with detail value of current page: {detail: 1}
+   *
+   * @attr {string} [data-yes] - "Yes";
+   * @attr {string} [data-no] - "No";
+   *
+   * @cssprop --primary-700 - Default value of #165ac2, used for text, border color
+   */
+  class CAGovPagination extends HTMLElement {
+    constructor() {
+      super();
 
-    if (!document.querySelector("#cagov-pagination-styles")) {
-      const style = document.createElement("style");
-      style.id = "cagov-pagination-styles";
-      style.textContent = styles;
-      document.head.appendChild(style);
+      if (!document.querySelector("#cagov-pagination-styles")) {
+        const style = document.createElement("style");
+        style.id = "cagov-pagination-styles";
+        style.textContent = styles;
+        document.head.appendChild(style);
+      }
     }
-  }
-
-  connectedCallback() {
-    this.currentPage = parseInt(
-      this.dataset.currentPage ? this.dataset.currentPage : "1",
-      10
-    );
-    this.render();
-  }
 
-  render() {
-    //console.log(this.dataset);
-    const previous = this.dataset.previous
-      ? this.dataset.previous
-      : '<span class="ca-gov-icon-arrow-prev" aria-hidden="true"></span> Previous';
-    const next = this.dataset.next
-      ? this.dataset.next
-      : 'Next <span class="ca-gov-icon-arrow-next" aria-hidden="true"></span>';
-    const page = this.dataset.page ? this.dataset.page : "Page";
-    this.totalPages = this.dataset.totalPages
-      ? Number(this.dataset.totalPages)
-      : 1;
-    if (this.totalPages < 0 || this.totalPages > 1) {
-      const html = templateHTML(
-        next,
-        previous,
-        page,
-        this.currentPage,
-        this.totalPages
+    connectedCallback() {
+      this.currentPage = parseInt(
+        this.dataset.currentPage ? this.dataset.currentPage : "1",
+        10
       );
-      this.innerHTML = html;
-      this.applyListeners();
-    } else {
-      this.innerHTML = "";
+      this.render();
     }
-  }
 
-  static get observedAttributes() {
-    return ["data-current-page", "data-total-pages"];
-  }
+    render() {
+      //console.log(this.dataset);
+      const previous = this.dataset.previous
+        ? this.dataset.previous
+        : '<span class="ca-gov-icon-arrow-prev" aria-hidden="true"></span> Previous';
+      const next = this.dataset.next
+        ? this.dataset.next
+        : 'Next <span class="ca-gov-icon-arrow-next" aria-hidden="true"></span>';
+      const page = this.dataset.page ? this.dataset.page : "Page";
+      this.totalPages = this.dataset.totalPages
+        ? Number(this.dataset.totalPages)
+        : 1;
+      if (this.totalPages < 0 || this.totalPages > 1) {
+        const html = templateHTML(
+          next,
+          previous,
+          page,
+          this.currentPage,
+          this.totalPages
+        );
+        this.innerHTML = html;
+        this.applyListeners();
+      } else {
+        this.innerHTML = "";
+      }
+    }
 
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "data-current-page") {
-      this.currentPage = parseInt(newValue, 10);
-      this.render();
+    static get observedAttributes() {
+      return ["data-current-page", "data-total-pages"];
     }
-    if (name === "data-total-pages") {
-      this.totalPages = parseInt(newValue, 10);
-      this.render();
+
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === "data-current-page") {
+        this.currentPage = parseInt(newValue, 10);
+        this.render();
+      }
+      if (name === "data-total-pages") {
+        this.totalPages = parseInt(newValue, 10);
+        this.render();
+      }
     }
-  }
 
-  applyListeners() {
-    const pageLinks = this.querySelectorAll(".cagov-pagination__button");
-    pageLinks.forEach(pl => {
-      pl.addEventListener("click", event => {
-        this.currentPage = parseInt(
-          /** @type {CAGovPagination} */ (event.target).dataset.pageNum,
-          10
-        );
-        this.dispatchEvent(
-          new CustomEvent("paginationClick", {
-            detail: this.currentPage
-          })
-        );
-        this.dataset.currentPage = this.currentPage.toString();
-      });
-    });
-    this.querySelector(".cagov-pagination__previous-page").addEventListener(
-      "click",
-      event => {
-        if (
-          !(
-            /** @type {Element} */ (event.target).classList.contains(
-              "cagov-pagination__link-inactive"
-            )
-          )
-        ) {
-          this.currentPage -= 1;
-          if (this.currentPage < 1) {
-            this.currentPage = 1;
-          }
+    applyListeners() {
+      const pageLinks = this.querySelectorAll(".cagov-pagination__button");
+      pageLinks.forEach(pl => {
+        pl.addEventListener("click", event => {
+          this.currentPage = parseInt(
+            /** @type {CAGovPagination} */ (event.target).dataset.pageNum,
+            10
+          );
           this.dispatchEvent(
             new CustomEvent("paginationClick", {
               detail: this.currentPage
             })
           );
           this.dataset.currentPage = this.currentPage.toString();
+        });
+      });
+      this.querySelector(".cagov-pagination__previous-page").addEventListener(
+        "click",
+        event => {
+          if (
+            !(
+              /** @type {Element} */ (event.target).classList.contains(
+                "cagov-pagination__link-inactive"
+              )
+            )
+          ) {
+            this.currentPage -= 1;
+            if (this.currentPage < 1) {
+              this.currentPage = 1;
+            }
+            this.dispatchEvent(
+              new CustomEvent("paginationClick", {
+                detail: this.currentPage
+              })
+            );
+            this.dataset.currentPage = this.currentPage.toString();
+          }
         }
-      }
-    );
-    this.querySelector(".cagov-pagination__next-page").addEventListener(
-      "click",
-      event => {
-        if (
-          !(
-            /** @type {Element} */ (event.target).classList.contains(
-              "cagov-pagination__link-inactive"
+      );
+      this.querySelector(".cagov-pagination__next-page").addEventListener(
+        "click",
+        event => {
+          if (
+            !(
+              /** @type {Element} */ (event.target).classList.contains(
+                "cagov-pagination__link-inactive"
+              )
             )
-          )
-        ) {
-          this.currentPage += 1;
-          if (this.totalPages != -1 && this.currentPage > this.totalPages) {
-            this.currentPage = this.totalPages;
+          ) {
+            this.currentPage += 1;
+            if (this.totalPages != -1 && this.currentPage > this.totalPages) {
+              this.currentPage = this.totalPages;
+            }
+            this.dispatchEvent(
+              new CustomEvent("paginationClick", {
+                detail: this.currentPage
+              })
+            );
+            this.dataset.currentPage = this.currentPage.toString();
           }
-          this.dispatchEvent(
-            new CustomEvent("paginationClick", {
-              detail: this.currentPage
-            })
-          );
-          this.dataset.currentPage = this.currentPage.toString();
         }
-      }
-    );
+      );
+    }
   }
-}
-window.addEventListener("load", () => {
+
   window.customElements.define("cagov-pagination", CAGovPagination);
 });
-//export { CAGovPagination };
 
 //@ts-check