@onsvisual/svelte-components 0.1.104 → 1.0.0-next.1

package/dist/layout/Survey/init-survey.js

@@ -1,230 +0,0 @@
-function initSurveyA() {
-  "use strict";
-  (function () {
-    var e = document.querySelector("#feedback-form-page-container");
-    if (e) {
-      var t = document.referrer,
-        n = "/feedback/thanks",
-        r = document.querySelector("#feedback-form-url");
-      r && (r.value = t),
-        e.addEventListener("submit", function (t) {
-          t.preventDefault(),
-            document
-              .querySelectorAll("#feedback-form-page-container .feedback-form-control__error")
-              .forEach((e) => {
-                e.classList.remove("feedback-form-control__error");
-              }),
-            document
-              .querySelectorAll("#feedback-form-page-container .feedback-form-error")
-              .forEach((e) => {
-                e.remove();
-              });
-          var r = document.querySelector("#email-field"),
-            i = document.querySelector("#description-field"),
-            o = !1;
-          if (i && "" === i.value) {
-            var s = document.createElement("span");
-            if (
-              ((s.className = "feedback-form-error"),
-              (s.textContent = "Write some feedback"),
-              s.setAttribute("role", "alert"),
-              !document.querySelector("#description-field-label .feedback-form-error"))
-            )
-              document.querySelector("#feedback-description-field").insertBefore(s, i);
-            i.classList.add("feedback-form-control__error"), i.focus(), (o = !0);
-          }
-          if (r && "" !== r.value) {
-            var a = document.createElement("span");
-            (a.className = "feedback-form-error"),
-              a.setAttribute("role", "alert"),
-              (a.textContent = "This is not a valid email address, correct it or delete it.");
-            if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/g.test(r.value)) {
-              if (!document.querySelector("#email-field-label .feedback-form-error"))
-                document.querySelector("#reply-request").insertBefore(a, r);
-              r.classList.add("feedback-form-control__error"), (o = !0);
-            }
-          }
-          if (!o) {
-            var u,
-              l,
-              c,
-              d = document.querySelector("#page-url-field").value,
-              h = d ? n + "?returnTo=" + d : n,
-              f = {
-                method: "POST",
-                body: ((u = e), (l = new FormData(u)), (c = new URLSearchParams(l).toString()), c),
-                headers: new Headers({
-                  "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
-                }),
-              };
-            return fetch(h, f)
-              .then((e) => {
-                if (!e.ok) throw e;
-                return (window.location.href = h), e.text();
-              })
-              .then((e) => e)
-              .catch((e) => Promise.reject(e));
-          }
-          document.querySelector(".feedback-btn").blur();
-        });
-    }
-  })();
-}
-
-function initSurveyB() {
-  "use strict";
-
-  function r(e, t, n, r, i, o) {
-    var s = (function (e) {
-        var t = new FormData(e);
-        return new URLSearchParams(t).toString();
-      })(e),
-      a = new XMLHttpRequest();
-    return (
-      a.open("POST", t, !0),
-      a.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"),
-      (a.onreadystatechange = function () {
-        if (a.readyState === XMLHttpRequest.DONE) {
-          var e = a.status;
-          if (o) return;
-          n.innerHTML = 0 === e || (e >= 200 && e < 400) ? r : i;
-        }
-      }),
-      {
-        request: a,
-        serializedData: s,
-      }
-    );
-  }
-
-  function i(e, t, n, r, i, o) {
-    var s = {
-      method: "POST",
-      body: r,
-      headers: new Headers({
-        "Content-Type": "application/json; charset=UTF-8",
-      }),
-    };
-    fetch(t, s)
-      .then((e) => {
-        if (!e.ok) throw e;
-      })
-      .then((e) => {
-        n.innerHTML = o;
-      })
-      .catch((e) => {
-        n.innerHTML = i;
-      });
-  }
-  (function () {
-    var e = window.location.href,
-      t = "/feedback",
-      n = "".concat(t, "/thanks"),
-      o = document.querySelector("#feedback-form-header"),
-      s =
-        '<span id="feedback-form-confirmation">Thank you. Your feedback will help us as we continue to improve the service.</span>',
-      a =
-        '<span id="feedback-form-error role="alert"">Something went wrong, try using our <a href="/feedback">feedback form</a>.</span>',
-      u = !1,
-      l = document.querySelector("#feedback-api-enabled"),
-      c = document.querySelector("#feedback-api-url"),
-      d = document.querySelector("#feedback-form-url");
-    d && (d.value = e);
-    var h = document.querySelectorAll("a.js-toggle");
-    h &&
-      h.forEach((e) => {
-        e.addEventListener("click", function (t) {
-          t.preventDefault();
-          var n = document.querySelector("#feedback-form");
-          if (
-            (n && n.classList.toggle("js-hidden"),
-            o && o.classList.toggle("js-hidden"),
-            "feedback-form-close" !== e.id)
-          ) {
-            var r = document.querySelector("#description-field");
-            r && r.focus();
-          }
-        });
-      });
-    var f = document.querySelector("#feedback-form-yes");
-    f &&
-      o &&
-      f.addEventListener("click", function (t) {
-        (u = !0), t.preventDefault();
-        var d = document.querySelector("#feedback-form-container");
-        if (l && "true" === l.value && c) {
-          var h = {
-              is_page_useful: !0,
-              is_general_feedback: !1,
-              ons_url: e,
-            },
-            f = JSON.stringify(h);
-          i(d, c.value, o, f, a, s);
-        } else {
-          var { request: p, serializedData: v } = r(d, n, o, s, a, u);
-          (o.innerHTML = s), p.send(v);
-        }
-      });
-    var p = document.querySelector("#feedback-form-container");
-    p &&
-      p.addEventListener("submit", function (n) {
-        n.preventDefault(),
-          document
-            .querySelectorAll("#feedback-form-container .form-control__error")
-            .forEach((e) => {
-              e.classList.remove("form-control__error");
-            }),
-          document.querySelectorAll("#feedback-form-container .form-error").forEach((e) => {
-            e.remove();
-          });
-        var d = document.querySelector("#email-field"),
-          h = document.querySelector("#description-field"),
-          f = document.querySelector("#name-field"),
-          v = !1;
-        if (h && "" === h.value) {
-          if (!document.querySelector("#description-field-label .form-error"))
-            document
-              .querySelector("#description-field-label")
-              .insertAdjacentHTML(
-                "beforeend",
-                '<span class="form-error" role="alert">Write some feedback</span>'
-              );
-          h.classList.add("form-control__error"), (v = !0);
-        }
-        if (d && "" !== d.value) {
-          var m = "";
-          m = v
-            ? '<span class="form-error" role="alert" aria-live="polite">This is not a valid email address, correct it or delete it</span>'
-            : '<span class="form-error" role="alert">This is not a valid email address, correct it or delete it</span>';
-          if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/g.test(d.value)) {
-            if (!document.querySelector("#email-field-label .form-error"))
-              document.querySelector("#email-field-label").insertAdjacentHTML("beforeend", m);
-            v = !0;
-          }
-        }
-        if (!v)
-          if (l && "true" === l.value && c) {
-            var g = {
-                is_page_useful: !1,
-                is_general_feedback: !1,
-                ons_url: e,
-                name: f.value,
-                email_address: d.value,
-              },
-              b = JSON.stringify(g);
-            i(p, c.value, o, b, a, s);
-          } else {
-            var { request: y, serializedData: _ } = r(p, t, o, s, a, u),
-              w = document.querySelector("#feedback-form");
-            w && w.classList.add("js-hidden"), y.send(_);
-            var aa = document.getElementById("feedback-form-header");
-            aa && aa.classList.remove("js-hidden");
-          }
-      });
-  })();
-}
-
-export default function initSurvey() {
-  initSurveyA();
-  initSurveyB();
-}

package/dist/layout/Titleblock/Meta.svelte

@@ -1,26 +0,0 @@
-<script>
-  import { validDate, formatDate } from "../../js/utils.js";
-  export let meta = null;
-</script>
-
-{#if Array.isArray(meta)}
-  <dl
-    class="ons-metadata metadata__list ons-grid ons-grid--gutterless ons-u-cf ons-u-mb-m"
-    title="Dataset ID and release date information"
-    aria-label="Dataset ID and release date information"
-  >
-    {#each meta as m, i}
-      <div class="ons-grid__col ons-col-{m.col ? m.col : 12}@m" class:ons-u-mt-xs="{i !== 0}">
-        <dt class="ons-metadata__term ons-u-mr-xs">{m.key}:</dt>
-        <dd class="ons-metadata__value ons-u-f-no">
-          {#if validDate(m.value)}
-            <time datetime="{new Date(m.value).toISOString()}">{formatDate(m.value)}</time>
-            {#if m.extra}{@html m.extra}{/if}
-          {:else}
-            {@html m.value}
-          {/if}
-        </dd>
-      </div>
-    {/each}
-  </dl>
-{/if}

package/dist/layout/Titleblock/Titleblock.svelte

@@ -1,147 +0,0 @@
-<script>
-  import { contrastColor } from "../../js/utils";
-  import Container from "../../wrappers/Container/Container.svelte";
-  import Meta from "./Meta.svelte";
-
-  /**
-   * Sets the title/headline
-   * @type {string}
-   */
-  export let title = "Page title";
-  /**
-   * Include "national statistic" badge
-   * @type {boolean}
-   */
-  export let natStatBadge = false;
-  /**
-   * Include Census logo
-   * @type {boolean}
-   */
-  export let censusLogo = false;
-  /**
-   * Array of {key, value} objects containing page metadata
-   * @type {array}
-   */
-  export let meta = null;
-  /**
-   * Sets a predefined theme
-   * @type {"light"|"dark"|"lightblue"}
-   */
-  export let theme = null;
-  /**
-   * Define additional props to override the base theme
-   * @type {object}
-   */
-  export let themeOverrides = null;
-  /**
-   * Overrides the background CSS for the section
-   * @type {string}
-   */
-  export let background = null;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
-  /**
-   * Optional badge to show next to the title
-   * @type {string}
-   */
-  export let titleBadge = null;
-  /**
-   * Aria-label for the optional badge to show next to the title
-   * @type {string}
-   */
-  export let titleBadgeAriaLabel = null;
-  /**
-   * Set a colour for the title badge
-   * @type {string}
-   */
-  export let titleBadgeColor = "#003C57";
-
-  $: titleBadgeTextColor = contrastColor(titleBadgeColor);
-</script>
-
-<Container
-  theme="{theme}"
-  themeOverrides="{themeOverrides}"
-  allowClientOverrides="{allowClientOverrides}"
-  background="{background}"
->
-  <section class="ons-u-mb-xl">
-    <slot name="before" />
-    <div class="ons-grid">
-      <div class="ons-grid__col ons-col-10@m">
-        <div class="title-container">
-          <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
-            {#if titleBadge}
-              <span style="margin-right: 6px">{@html title}</span>
-              <span
-                class="title-badge"
-                aria-label="{titleBadgeAriaLabel ?? titleBadge}"
-                style:background="{titleBadgeColor}"
-                style:color="{titleBadgeTextColor}">{titleBadge}</span
-              >
-            {:else}
-              {@html title}
-            {/if}
-          </h1>
-        </div>
-      </div>
-      {#if natStatBadge}
-        <div class="ons-grid__col ons-col-2@m">
-          <div
-            class="ons-grid--flex ons-grid--between@m ons-u-mt-s@m ons-u-mb-m@xxs ons-u-flex-jc-fe@m"
-          >
-            <a
-              href="https://uksa.statisticsauthority.gov.uk/about-the-authority/uk-statistical-system/types-of-official-statistics/"
-              class="national-statistics__link ons-u-fs-xxxl"
-            >
-              <img
-                src="//cdn.ons.gov.uk/assets/images/ons-logo/kitemark/uksa-kitemark.svg"
-                alt="UK Statistics Authority Kitemark"
-                class="national-statistics__logo"
-              />
-            </a>
-          </div>
-        </div>
-      {/if}
-    </div>
-    <slot />
-    <slot name="brand" />
-    {#if censusLogo}
-      <div class="ons-grid ons-u-mb-m">
-        <div class="ons-grid__col">
-          <img
-            src="https://cdn.ons.gov.uk/assets/images/census-logo/logo-census-2021-purple-landscape.svg"
-            title="Census 2021"
-            alt="Census 2021"
-            class="header__svg-logo margin-right--1"
-            width="167"
-            height="32"
-          />
-        </div>
-      </div>
-    {/if}
-    <Meta meta="{meta}" />
-    <slot name="after" />
-  </section>
-</Container>
-
-<style>
-  /* :global(.ons-page__container) {
-		overflow: auto;
-	} */
-  .ons-grid__col {
-    vertical-align: bottom;
-  }
-
-  .title-badge {
-    vertical-align: 6px;
-    white-space: nowrap;
-    font-size: 40%;
-    font-weight: bold;
-    color: white;
-    padding: 2px 8px 4px 8px;
-    border-radius: 4px;
-  }</style>

package/dist/layout/Twisty/Twisty.svelte

@@ -1,56 +0,0 @@
-<script>
-  import { createEventDispatcher } from "svelte";
-
-  const dispatch = createEventDispatcher();
-
-  /**
-   * A title for the element
-   * @type {string}
-   */
-  export let title = "Title";
-  /**
-   * Option for element to be open/expanded by default
-   * @type {boolean}
-   */
-  export let open = false;
-
-  function doToggle(e) {
-    dispatch("toggle", { open: e.newState === "open", e });
-  }
-</script>
-
-<details class="ons-collapsible ons-js-collapsible" bind:open="{open}" on:toggle="{doToggle}">
-  <summary
-    class="ons-collapsible__heading ons-js-collapsible-heading"
-    data-ga-action="{open ? 'Close panel' : 'Open panel'}"
-  >
-    <h3 class="ons-collapsible__title">{title}</h3>
-    <span class="ons-collapsible__icon">
-      <svg
-        class="ons-svg-icon"
-        viewBox="0 0 8 13"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-      >
-        <path
-          d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
-          transform="translate(-5.02 -1.59)"></path>
-      </svg>
-    </span>
-  </summary>
-  <div class="ons-collapsible__content ons-js-collapsible-content">
-    <slot />
-  </div>
-</details>
-
-<style>
-  .ons-collapsible__heading {
-    color: var(--link, --ons-color-text-link);
-  }
-  .ons-collapsible__heading:hover {
-    color: var(--link-hover, --ons-color-text-link-hover);
-  }
-  .ons-svg-icon {
-    color: var(--link, --ons-color-text-link);
-    fill: var(--link, --ons-color-text-link);
-  }</style>