@functionalcms/svelte-components 2.33.1 → 2.34.1

package/dist/components/agnostic/Select/Select.svelte

@@ -0,0 +1,141 @@
+<style>
+.select,
+.select-base {
+  display: block;
+  width: 100%;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-appearance: none;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.select,
+.select-skin {
+  padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
+  -moz-padding-start: calc(var(--fluid-12) - 3px);
+  font-size: var(--fluid-16);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--functional-dark);
+  border: 1px solid var(--functional-select-border-color, var(--functional-gray-light));
+  border-radius: var(--functional-radius);
+  transition:
+    border-color var(--functional-timing-fast) ease-in-out,
+    box-shadow var(--functional-timing-fast) ease-in-out;
+}
+
+/* Only shows the down arrow SVG if in single mode */
+.select:not([multiple]) {
+  background-color: inherit;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right var(--fluid-12) center;
+  background-size: var(--fluid-16) var(--fluid-12);
+}
+
+.select:focus {
+  border-color: var(--functional-focus-ring-color);
+  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+
+  /* Needed for High Contrast mode */
+  outline:
+    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
+    var(--functional-focus-ring-outline-color);
+  transition: box-shadow var(--functional-timing-fast) ease-out;
+}
+
+.select-base,
+.select:disabled {
+  background-color: var(--functional-disabled-bg);
+}
+
+.select-base,
+.select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--functional-dark);
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .select,
+  .select-base,
+  .select:focus {
+    transition: none;
+  }
+}
+
+.select-small {
+  padding-top: var(--fluid-4);
+  padding-bottom: var(--fluid-4);
+  padding-left: var(--fluid-8);
+  font-size: var(--fluid-14);
+}
+
+.select-large {
+  padding-top: var(--fluid-8);
+  padding-bottom: var(--fluid-8);
+  padding-left: var(--fluid-16);
+  font-size: var(--fluid-18);
+}
+
+</style>
+
+<script>import { createEventDispatcher } from "svelte";
+export let uniqueId = "";
+export let name = "";
+export let labelCopy = "";
+export let options = [];
+export let size = "";
+export let multipleSize = 1;
+export let isMultiple = false;
+export let defaultOptionLabel = "Please select an option";
+export let isDisabled = false;
+export let isSkinned = true;
+export let css = "";
+export let singleSelected = "";
+export let multiSelected = [];
+const dispatch = createEventDispatcher();
+const changeHandler = () => {
+  dispatch("selected", isMultiple ? multiSelected : singleSelected);
+};
+$: disable = isDisabled;
+$: classes = [
+  isSkinned ? "select" : "select-base",
+  size ? `select-${size}` : "",
+  css ? `${css}` : ""
+].filter((cl) => cl).join(" ");
+</script>
+
+<label class="screenreader-only" for={uniqueId}> {labelCopy} </label>
+{#if isMultiple}
+  <select
+    id={uniqueId}
+    class={classes}
+    name={name}
+    disabled={disable}
+    multiple
+    size={multipleSize}
+    bind:value={multiSelected}
+    on:change={changeHandler}
+  >
+    {#each options as { value, label }}
+      <option value={value}>{label}</option>
+    {/each}
+  </select>
+{:else}
+  <select
+    id={uniqueId}
+    class={classes}
+    name={name}
+    disabled={disable}
+    bind:value={singleSelected}
+    on:change={changeHandler}
+  >
+    <option value="" disabled selected>
+      {defaultOptionLabel}
+    </option>
+    {#each options as { value, label }}
+      <option value={value}>{label}</option>
+    {/each}
+  </select>
+{/if}

package/dist/components/agnostic/Select/Select.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        uniqueId?: string;
+        name?: string;
+        labelCopy?: string;
+        options?: any[];
+        size?: "small" | "large" | "";
+        multipleSize?: number;
+        isMultiple?: boolean;
+        defaultOptionLabel?: string;
+        isDisabled?: boolean;
+        isSkinned?: boolean;
+        css?: string;
+        singleSelected?: string;
+        multiSelected?: any[];
+    };
+    events: {
+        selected: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SelectProps = typeof __propDef.props;
+export type SelectEvents = typeof __propDef.events;
+export type SelectSlots = typeof __propDef.slots;
+export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
+}
+export {};

package/dist/components/agnostic/Spinner/Spinner.svelte

@@ -0,0 +1,105 @@
+<style>
+.spinner {
+  --spinner-color: var(--functional-spinner-color, var(--functional-dark));
+
+  /**
+   * Inspiration to utilize grid for this from
+   * https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
+   */
+  display: grid;
+  grid-template: "content" 100% / auto;
+  place-items: center;
+  box-sizing: border-box;
+}
+
+.spinner::before,
+.spinner::after {
+  grid-area: content;
+  width: var(--fluid-32);
+  height: var(--fluid-32);
+  content: "";
+  display: block;
+  border-radius: 50%;
+  border-width: 3px;
+  border-style: solid;
+}
+
+.spinner-small::before,
+.spinner-small::after {
+  width: var(--fluid-24);
+  height: var(--fluid-24);
+  border-width: var(--fluid-2);
+}
+
+.spinner-large::before,
+.spinner-large::after {
+  width: var(--fluid-40);
+  height: var(--fluid-40);
+  border-width: var(--fluid-4);
+}
+
+.spinner-xlarge::before,
+.spinner-xlarge::after {
+  width: var(--fluid-56);
+  height: var(--fluid-56);
+  border-width: var(--fluid-6);
+}
+
+/**
+ * Before is the muted background
+ */
+.spinner::before {
+  opacity: 0%;
+  border-color: var(--spinner-color);
+}
+
+/**
+ * After is the inner "snake"
+ */
+.spinner::after {
+  opacity: 0%;
+  border-color: transparent var(--spinner-color) transparent transparent;
+  transition: opacity 0.1s;
+  pointer-events: none;
+  animation: loading-circle 1s ease-in-out infinite;
+
+  /* TODO Research the whole null transform hack. It is quite confusing to figure out if it
+  is beneficial or detrimental: See
+  https://newbedev.com/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way
+  transform: translateZ(0);
+  will-change: transform; */
+}
+
+/**
+ * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
+ */
+.spinner[aria-busy="true"]::before {
+  opacity: 12%;
+}
+
+.spinner[aria-busy="true"]::after {
+  opacity: 100%;
+}
+
+@keyframes loading-circle {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .spinner::after {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+
+<script>export let ariaLabel = "Loading\u2026";
+export let size = "";
+$: spinnerClasses = ["spinner", size ? `spinner-${size}` : ""].filter((c) => c).join(" ");
+</script>
+
+<div class={spinnerClasses} role="status" aria-live="polite" aria-busy="true">
+  <span class="screenreader-only">{ariaLabel}</span>
+</div>

package/dist/components/agnostic/Spinner/Spinner.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        ariaLabel?: string;
+        size?: "small" | "large" | "xlarge" | "";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SpinnerProps = typeof __propDef.props;
+export type SpinnerEvents = typeof __propDef.events;
+export type SpinnerSlots = typeof __propDef.slots;
+export default class Spinner extends SvelteComponent<SpinnerProps, SpinnerEvents, SpinnerSlots> {
+}
+export {};

package/dist/components/agnostic/Switch/Switch.svelte

@@ -0,0 +1,275 @@
+<style>
+/**
+ * Switch
+ *
+ * This switch is inspired by Scott Ohara's checkbox switch:
+ * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
+ */
+.switch-container {
+  display: block;
+
+  /* TODO: Hopefully this doesn't become a problem but since we use absolute
+  positioning extensively, we need some way to have adjacent spaced lines */
+  min-height: 2.25rem;
+  width: 100%;
+  padding: 0.5rem;
+  position: relative;
+}
+
+.switch-container:hover {
+  cursor: pointer;
+}
+
+/* using the before/after pseudo elements of the span to create the "switch" */
+.switch::before,
+.switch::after {
+  border: 1px solid var(--functional-gray-mid-dark);
+  content: "";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* styling specific to the knob of the switch */
+.switch::after {
+  background: #fff;
+  border-radius: 100%;
+  width: 1.4rem;
+  height: 1.4rem;
+  right: 1.4rem;
+  transition: right var(--functional-timing-fast) ease-in-out;
+}
+
+/* styling specific to the knob "container" */
+.switch::before {
+  background: #eee;
+  border-radius: 1.75rem;
+  width: 2.75rem;
+  height: 1.75rem;
+  right: 0.25rem;
+  transition: background var(--functional-timing-medium) ease-in-out;
+}
+
+/* Sizes */
+.switch-small::after {
+  width: 1.25rem;
+  height: 1.25rem;
+  right: 1.125rem;
+}
+
+.switch-small::before {
+  width: 2.25rem;
+  height: 1.5rem;
+}
+
+.switch-large::after {
+  width: 1.65rem;
+  height: 1.65rem;
+  right: 1.65rem;
+}
+
+.switch-large::before {
+  width: 3.25rem;
+  height: 2rem;
+}
+
+.switch-border::before {
+  border: 1px solid var(--functional-primary);
+}
+
+.switch-action.switch-border::before {
+  border: 1px solid var(--functional-action);
+}
+
+/* Switch label on right */
+
+/* We have to flip the positioning when the label is on the right of switch */
+.switch-right .switch::before {
+  right: initial;
+  left: 0.25rem;
+}
+
+.switch-right .switch::after {
+  right: initial;
+  left: 1.4rem;
+}
+
+/* Switch sizes w/label on right -- I expect SMACSS so .switch .switch-small
+classes should both exist so the right: initial was taken care of above :) */
+.switch-right .switch-small::after {
+  left: 1.125rem;
+}
+
+.switch-right .switch-large::after {
+  left: 1.65rem;
+}
+
+/* ---- CHECKED STATE ----- */
+
+/* change the position of the knob to indicate it has been checked */
+
+.switch-input:checked + .switch-small::after {
+  right: 0.425rem;
+}
+
+.switch-input:checked + .switch::after {
+  right: 0.5em;
+}
+
+.switch-right .switch-label {
+  position: absolute;
+  right: 0;
+
+  /* Flips transition target to left to preserve our smooth transitions */
+  transition: left var(--functional-timing-fast) ease-in-out;
+}
+
+.switch-right .switch-input:checked + .switch::after {
+  right: initial;
+  left: 0.5em;
+}
+
+.switch-right .switch-input:checked + .switch-small::after {
+  right: initial;
+  left: 0.425rem;
+}
+
+/* From: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
+  hide the actual checkbox from view, but not from keyboards or ATs.
+  Instead of standard visually hidden styling, instead set opacity to
+  almost 0 (not zero for ChomeVox legacy bug), pointer-events none, and
+  then set to full height/width of container element so that VO focus
+  ring outlines the component, instead of a tiny box within the component
+*/
+.switch-input {
+  margin: 0;
+  opacity: 0.01%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.switch-input:focus + .switch::before {
+  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+}
+
+/* update the color of the "container" to further visually indicate state */
+.switch-input:checked + .switch:not(.switch-border)::before {
+  background: var(--functional-primary);
+}
+
+.switch-input:checked + .switch-action:not(.switch-border)::before {
+  background: var(--functional-action);
+}
+
+/* Border switch on checked the thumb gets primary or action bg respectively */
+.switch-input:checked + .switch-border::after {
+  background: var(--functional-primary);
+}
+
+.switch-input:checked + .switch-action.switch-border::after {
+  background: var(--functional-action);
+}
+
+/* Disabled aka :disabled is not actually supported for <label>
+element so we use attribute selector for that:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#:~:text=The%20disabled%20attribute%20is%20supported,control%20or%20its%20descendant%20controls.
+*/
+.switch-input[disabled] + .switch,
+.switch-input[disabled] + .switch-label,
+.switch-container.disabled {
+  color: var(--functional-input-disabled-color, var(--functional-disabled-color)) !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+  opacity: 80% !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .switch::after {
+    background-color: windowText;
+  }
+
+  /* High contrast mode outline hacks */
+  .switch-input[disabled] + .switch-label,
+  .switch-container.disabled {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .switch::after,
+  .switch::before {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+
+<script>
+  export let id = "";
+  export let label = "";
+  export let css = "";
+  export let labelPosition = "left";
+  export let size = "";
+  export let isChecked = false;
+  export let isBordered = false;
+  export let isAction = false;
+  export let isDisabled = false;
+
+  $: switchContainer = [
+      "switch-container",
+      labelPosition === "right" ? "switch-right" : "",
+      css ? css : "",
+      isDisabled ? "disabled" : "",
+    ].filter(c => c).join(" ");
+  
+  const switchSpan = () => {
+    let klasses = [
+      "switch",
+      isBordered ? "switch-border" : "",
+      isAction ? "switch-action" : "",
+      size ? `switch-${size}` : "",
+    ];
+    klasses = klasses.filter((klass) => klass.length);
+    return klasses.join(" ");
+  };
+  const handleClick = (evt) => {
+    const el = evt.target;
+    if (el.getAttribute("aria-checked") == "true") {
+      el.setAttribute("aria-checked", "false");
+    } else {
+      el.setAttribute("aria-checked", "true");
+    }
+  };
+  const handleKeypress = (evt) => {
+    const keyCode = evt.keyCode || evt.which;
+    switch (keyCode) {
+      case 13:
+        evt.preventDefault();
+        evt.target.click();
+        break;
+    }
+  };
+</script>
+
+<label class={switchContainer} for={id}>
+  {#if labelPosition === "left"}<span class="switch-label">{label}</span>{/if}
+  <input
+    type="checkbox"
+    class="switch-input"
+    id={id}
+    bind:checked={isChecked}
+    disabled={isDisabled}
+    on:change
+    on:click={handleClick}
+    on:keypress={handleKeypress}
+    role="switch"
+  />
+  <span class={switchSpan()} aria-hidden="true"></span>
+  {#if labelPosition === "right"}<span class="switch-label">{label}</span>{/if}
+</label>

package/dist/components/agnostic/Switch/Switch.svelte.d.ts

@@ -0,0 +1,45 @@
+/** @typedef {typeof __propDef.props}  SwitchProps */
+/** @typedef {typeof __propDef.events}  SwitchEvents */
+/** @typedef {typeof __propDef.slots}  SwitchSlots */
+export default class Switch extends SvelteComponent<{
+    size?: string | undefined;
+    css?: string | undefined;
+    id?: string | undefined;
+    isBordered?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    label?: string | undefined;
+    labelPosition?: string | undefined;
+    isChecked?: boolean | undefined;
+    isAction?: boolean | undefined;
+}, {
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SwitchProps = typeof __propDef.props;
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        size?: string | undefined;
+        css?: string | undefined;
+        id?: string | undefined;
+        isBordered?: boolean | undefined;
+        isDisabled?: boolean | undefined;
+        label?: string | undefined;
+        labelPosition?: string | undefined;
+        isChecked?: boolean | undefined;
+        isAction?: boolean | undefined;
+    };
+    events: {
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};