@onsvisual/svelte-components 0.0.6 → 0.0.8

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -0,0 +1,40 @@
+<script>
+  /**
+   * Phase of project (alpha, beta, prototype etc.)
+   * @type {string}
+   */
+  export let phase = "Beta";
+  /**
+   * URL of feedback form (relative or absolute)
+   * @type {string}
+   */
+  export let href = "/feedback";
+</script>
+
+<div class="ons-phase-banner">
+  <div class="ons-container">
+    <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--no-wrap">
+      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
+        <strong class="ons-phase-banner__badge">{phase}</strong>
+      </div>
+      <div class="ons-col-auto ons-grid--flex ons-grid--no-wrap@l ons-grid--vertical-center">
+        <span class="ons-u-fs-s ons-u-m-no">
+          {#if phase.toLowerCase() === "prototype"}
+            This is a prototype – your <a href="{href}">feedback</a> will help us improve it.
+          {:else}
+            This is a new service – your <a href="{href}">feedback</a> will help us improve it.
+          {/if}
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .ons-phase-banner {
+    background: var(--pale, rgb(245, 245, 246)) !important;
+  }
+  .ons-phase-banner__badge {
+    background: var(--text, rgb(34, 34, 34)) !important;
+    color: var(--background, white) !important;
+  }</style>

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte";
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
    * Sets the unique ID of the section
@@ -35,8 +35,8 @@
 <section data-id="{id}" bind:this="{section}">
   <Container theme="{theme}" width="narrow" background="none">
     <div class="ons-scroller-section" style:--background="{background}">
-      {#if title && !hideTitle}
-        <h2 class="section-title">{title}</h2>
+      {#if title}
+        <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
       {/if}
       <slot />
     </div>

package/dist/layout/Section/Section.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { slugify } from "$lib/js/utils.js";
-  import Container from "$lib/wrappers/Container/Container.svelte";
+  import { slugify } from "../../js/utils.js";
+  import Container from "../../wrappers/Container/Container.svelte";
 
   /**
    * Sets the unique ID of the section
@@ -52,8 +52,8 @@
   marginBottom="{marginBottom}"
 >
   <section id="{id ? id : slugify(title)}" aria-label="{title}" class="ons-feature__section">
-    {#if title && !hideTitle}
-      <h2 class="section-title">{title}</h2>
+    {#if title}
+      <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
     {/if}
     <slot />
   </section>

package/dist/layout/ShareButtons/ShareButtons.svelte

@@ -0,0 +1,177 @@
+<script>
+  import { onMount } from "svelte";
+  import Container from "../../wrappers/Container/Container.svelte";
+
+  /**
+   * Set the title/call to action
+   * @type {string}
+   */
+  export let title = "Share this page";
+  /**
+   * Sets the width of the container
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let width = "narrow";
+  /**
+   * 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;
+  /**
+   * Optional margin above section
+   * @type {boolean}
+   */
+  export let marginTop = false;
+  /**
+   * Optional margin below section
+   * @type {boolean}
+   */
+  export let marginBottom = true;
+
+  let href = "";
+  let pageTitle = "";
+
+  onMount(() => {
+    href = document.location.href;
+    pageTitle = document.title;
+  });
+</script>
+
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+>
+  <section class="ons-grid ons-u-ml-no" aria-label="Share this dataset">
+    <h2 class="ons-u-fs-r--b ons-u-mb-xs">{title}</h2>
+    <ul class="ons-list ons-list--inline ons-list--bare ons-list--icons">
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-facebook"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013
+      0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281
+      L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267
+      C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423
+      23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643
+      18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951
+      L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="https://www.facebook.com/sharer/sharer.php?u={href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >Facebook<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-twitter"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M24.04,12.95c0,0.17,0,0.33,0,0.5c0.01,4.01-2.17,7.71-5.69,9.64c-3.52,1.93-7.81,1.78-11.19-0.38c0.31,0.04,0.61,0.05,0.92,0.05c1.73,0,3.42-0.58,4.78-1.65c-1.65-0.04-3.09-1.11-3.6-2.68c0.25,0.05,0.51,0.07,0.76,0.07c0.34,0,0.68-0.05,1.01-0.14C9.23,18,7.93,16.4,7.95,14.55v-0.05c0.54,0.29,1.13,0.46,1.74,0.48c-1.66-1.12-2.2-3.33-1.23-5.08c1.96,2.41,4.85,3.87,7.95,4.03c-0.07-0.29-0.1-0.58-0.1-0.88c0-1.58,0.97-3,2.44-3.59c1.47-0.58,3.15-0.21,4.23,0.94c0.86-0.17,1.69-0.49,2.45-0.94c-0.28,0.9-0.88,1.65-1.69,2.13c0.76-0.09,1.51-0.29,2.21-0.6C25.43,11.76,24.79,12.42,24.04,12.95zM16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="https://twitter.com/intent/tweet?original_referer&amp;text={pageTitle}&amp;url={href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >Twitter<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-linkedin"
+            viewBox="0 0 32 32"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              d="M16,-3.41060513e-13 C20.2434638,-3.41060513e-13 24.3131264,1.68570945 27.3137085,4.6862915 C30.3142906,7.68687356
+          32,11.7565362 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,-3.41060513e-13
+          16,-3.41060513e-13 Z M11.3505859,12.4641113 L7.45385744,12.4641113 L7.45385744,24.1875 L11.3505859,24.1875
+          L11.3505859,12.4641113 Z M20.9152832,12.1889649 C18.8479004,12.1889649 17.9213867,13.3251953 17.4035644,14.1240234
+          L17.4035644,14.1240234 L17.4035644,12.4641113 L13.5070801,12.4641113 C13.5212538,12.7696262 13.5275532,13.809993
+          13.5292593,15.1533871 L13.5293118,16.8832762 C13.5292156,16.9843911 13.5291048,17.0860852 13.5289803,17.1882303
+          L13.5280782,17.8054916 L13.5280782,17.8054916 L13.5268961,18.427439 C13.5216699,20.9164121 13.5108442,23.3704557
+          13.5078578,24.0208157 L13.5070801,24.1875 L17.4035644,24.1875 L17.4035644,17.640625 C17.4035644,17.2902832
+          17.4287109,16.9401856 17.5317382,16.6896972 C17.8134766,15.9897461 18.4545899,15.2646484 19.5310059,15.2646484
+          C20.940918,15.2646484 21.5051269,16.3395996 21.5051269,17.9157715 L21.5051269,17.9157715 L21.5051269,24.1875
+          L25.4013672,24.1875 L25.4013672,17.465332 C25.4013672,13.8645019 23.4790039,12.1889649 20.9152832,12.1889649 Z
+          M9.42822263,6.8125 C8.09521488,6.8125 7.22363281,7.68774412 7.22363281,8.83813475 C7.22363281,9.96313475
+          8.06933594,10.8632812 9.37695313,10.8632812 L9.37695313,10.8632812 L9.40234375,10.8632812 C10.7612305,10.8632812
+          11.6069336,9.96313475 11.6069336,8.83813475 C11.581543,7.68774412 10.7612305,6.8125 9.42822263,6.8125 Z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="https://www.linkedin.com/sharing/share-offsite/?url={href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >LinkedIn<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+      <li class="ons-list__item ons-u-pl-no ons-u-pr-xs">
+        <span class="ons-list__prefix">
+          <svg
+            class="ons-svg-icon ons-svg-icon--xxl"
+            id="icon-email"
+            viewBox="0 0 36 36"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M30.7279 5.27208C27.3523 1.89642 22.7739 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36
+              27.9411 36 18C36 13.2261 34.1036 8.64773 30.7279 5.27208ZM18 19L26 14V12L18 17L10 12V14L18 19ZM8 10H28V26H8V10Z"
+            ></path>
+          </svg>
+        </span>
+        <a
+          href="mailto:?subject={pageTitle}&amp;body={pageTitle}%0A{href}"
+          class="ons-list__link ons-u-fs-r ons-u-pt-xxs"
+          target="_blank"
+          rel="noreferrer external"
+          >Email<span class="ons-u-vh">this link will open in a new tab</span>
+        </a>
+      </li>
+    </ul>
+  </section>
+</Container>
+
+<style>
+  .ons-svg-icon {
+    color: currentColor;
+    fill: currentColor;
+  }</style>

package/dist/layout/Summary/Summary.svelte

@@ -0,0 +1,51 @@
+<script>
+  /**
+   * Title for summary table
+   * @type {string}
+   */
+  export let title = null;
+  /**
+   * Array of items in format {key, value, href?}
+   * @type {array}
+   */
+  export let items = [];
+</script>
+
+<div class="ons-summary">
+  <div id="turnover" class="ons-summary__group">
+    {#if title}<h2 class="ons-summary__group-title">{title}</h2>{/if}
+    <div class="ons-summary__items ons-u-mb-s ons-u-bt ons-u-bb">
+      {#each items as item}
+        <div class="ons-summary__item">
+          <dl class="ons-summary__row ons-summary__row--has-values" id="sales-dates">
+            <dt
+              class="ons-summary__item-title ons-u-pt-s ons-u-pb-s ons-u-pr-m ons-u-order--1@xxs@m ons-u-flex--2@xxs@m ons-col-4@m"
+            >
+              <div class="ons-summary__item--text ons-u-fw-b">{item.key}</div>
+            </dt>
+            <dd
+              class="ons-summary__values ons-u-pt-s ons-u-pb-s ons-u-pr-m ons-u-pl-no@xxs@m ons-u-order--3@xxs@m ons-u-fw@xxs@m
+          ons-u-pt-no@xxs@m ons-u-pt-no@xxs@m ons-u-bb-no@xxs@m ons-u-d-b@xxs@m"
+            >
+              <div>{item.value}</div>
+            </dd>
+            {#if item.href}
+              <dd
+                class="ons-summary__actions ons-u-flex-ai-fs ons-u-pt-s ons-u-pb-s ons-u-pl-no@xxs ons-u-ml-xs@xxs ons-u-order--2@xxs@m ons-col-2@m"
+              >
+                <a href="{item.href}" class="ons-summary__button"
+                  >Change<span class="ons-u-vh"> value for {item.key}</span></a
+                >
+              </dd>
+            {/if}
+          </dl>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .ons-summary__values {
+    font-weight: normal !important;
+  }</style>

package/dist/layout/Survey/Survey.svelte

@@ -0,0 +1,96 @@
+<script>
+  import { onMount } from "svelte";
+  import initSurvey from "./init-survey.js";
+
+  onMount(initSurvey);
+</script>
+
+<div class="wrapper link-adjust">
+  <div class="improve-this-page" data-module="improve-this-page">
+    <div
+      class="improve-this-page__prompt clearfix"
+      id="feedback-form-header"
+      role="status"
+      aria-live="assertive"
+      tabindex="-1"
+    >
+      <div class="improve-this-page__prompt_left">
+        <h3 class="improve-this-page__is-useful-question margin-right--1">Is this page useful?</h3>
+        <a
+          id="feedback-form-yes"
+          class="improve-this-page__page-is-useful-button"
+          href="/feedback/thanks"
+          aria-label="Yes I found this page useful">Yes</a
+        >
+        <span>|</span>
+        <a
+          id="feedback-form-no"
+          class="js-toggle"
+          href="/feedback"
+          aria-label="No I didn't find this page useful">No</a
+        >
+      </div>
+      <div class="improve-this-page__prompt_right">
+        <a
+          id="feedback-form-anything-wrong"
+          class="js-toggle improve-this-page__anything-wrong"
+          href="/feedback">Can't find what you're looking for?</a
+        >
+      </div>
+    </div>
+    <div id="feedback-form" class="improve-this-page__form js-hidden font-size--18">
+      <form id="feedback-form-container">
+        <input type="hidden" name="url" id="feedback-api-enabled" value="false" />
+        <input type="hidden" name="url" id="feedback-api-url" value="" />
+        <input type="hidden" name="feedback-form-type" value="footer" />
+        <input
+          type="hidden"
+          name="url"
+          id="feedback-form-url"
+          value="https://www.ons.gov.uk/datasets/RM169/editions/2021/versions/4"
+        />
+        <div class="form-group">
+          <label class="form-label-bold" id="description-field-label" for="description-field"
+            >How should we improve this page?</label
+          >
+          <textarea
+            id="description-field"
+            class="form-control"
+            name="description"
+            rows="5"
+            style="overflow: hidden; overflow-wrap: break-word; resize: horizontal;"></textarea>
+        </div>
+        <div class="form-group">
+          <p class="font-size--24 font-weight-700 margin-bottom--0">Do you want a reply?</p>
+          <p class="font-size--18 margin-top--0">
+            If you'd like us to get back to you, please add your name and email address below.
+          </p>
+          <label class="form-label-bold" for="name-field">Name (optional)</label>
+          <input id="name-field" class="form-control" type="text" name="name" />
+        </div>
+        <div class="form-group">
+          <label class="form-label-bold" id="email-field-label" for="email-field"
+            >Email (optional)</label
+          >
+          <input id="email-field" class="form-control" type="text" name="email" />
+        </div>
+        <div>
+          <input
+            id="feedback-form-submit"
+            class="btn btn--primary font-weight-700 margin-bottom--2"
+            type="submit"
+            value="Send feedback"
+          />
+        </div>
+        <div>
+          <a
+            href="javascript:void(0)"
+            id="feedback-form-close"
+            class="improve-this-page__close js-toggle btn btn--secondary font-weight-700"
+            >I don't want to provide feedback</a
+          >
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,230 @@
+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/Tabs/Tab.svelte

@@ -0,0 +1,48 @@
+<script>
+  import { onMount, onDestroy, getContext } from "svelte";
+  import { slugify } from "../../js/utils.js";
+
+  /**
+   * Title of tab/panel
+   * @type {string}
+   */
+  export let title = "Tab title";
+  /**
+   * Hide the title within the panel
+   * @type {boolean}
+   */
+  export let hideTitle = false;
+  /**
+   * ID/slug for tab (auto-generated from title if not set)
+   * @type {string}
+   */
+  export let id = slugify(title);
+
+  const sections = getContext("sections");
+  const selected = getContext("selected");
+
+  let el;
+
+  onMount(() => {
+    if (sections) {
+      if (!$sections[0] && ($selected || $selected === null)) $selected = id;
+      $sections = [...$sections, { title, id, el }];
+    }
+  });
+
+  onDestroy(() => {
+    if (sections) {
+      $sections = $sections.filter((s) => s.id !== id);
+    }
+  });
+</script>
+
+<section
+  id="{id}"
+  class="ons-tabs__panel"
+  bind:this="{el}"
+  class:ons-tabs__panel--hidden="{$selected !== id}"
+>
+  <h2 id="{id}-content-title" class="ons-u-vh" class:ons-u-vh="{hideTitle}">{title}</h2>
+  <slot />
+</section>