@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Menu/MenuItem.svelte

@@ -0,0 +1,117 @@
+<script>export let disabled = false;
+export let isSelected = false;
+export let classes;
+let btn;
+export function focus() {
+  return btn.focus();
+}
+export function isDisabled() {
+  return btn.disabled;
+}
+</script>
+<button
+  on:click
+  on:keydown
+  bind:this={btn}
+  role="menuitem"
+  tabindex={isSelected ? 0 : -1}
+  disabled={disabled}
+  class={classes}
+>
+  <slot />
+</button>
+
+<style>
+.menu-item {
+  --menu-item-background-color: var(--functional-menu-item-background-color, inherit);
+
+  text-align: left;
+
+  /* TODO -- can we compose some of this from the button styles? */
+  border-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
+  border-style: solid;
+  border-width: var(--functional-btn-border-size, 1px);
+  font-size: inherit;
+
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
+  padding-block-start: var(--functional-vertical-pad, 0.5rem);
+  padding-block-end: var(--functional-vertical-pad, 0.5rem);
+  padding-inline-start: var(--functional-side-padding, 0.75rem);
+  padding-inline-end: var(--functional-side-padding, 0.75rem);
+  background-color: var(--menu-item-background-color);
+  display: block;
+  min-width: 100%;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.menu-item[disabled] {
+  background: var(--functional-input-disabled-bg, var(--functional-disabled-bg)) !important;
+  color: var(--functional-input-disabled-color, var(--functional-disabled-color)) !important;
+  cursor: not-allowed !important;
+  opacity: 80% !important;
+}
+
+.menu-item:focus {
+  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;
+
+  /* In order for the focused element's box-shadow to appear above its siblings we need to
+  establish a new stacking context: https://stackoverflow.com/a/28042700 */
+  isolation: isolate;
+}
+
+.menu-item:not(:first-of-type) {
+  border-top: 0;
+}
+
+.menu-item-selected {
+  color: var(--functional-light);
+  background-color: var(--functional-primary);
+  border-color: var(--functional-primary);
+}
+
+.menu-item:active:not(.menu-item-selected) {
+  color: var(--functional-primary);
+}
+
+.menu-item [aria-checked="true"]::before {
+  /* TODO make this more flexible eventually */
+  content: "\2713\0020";
+}
+
+/* Sizes */
+.menu-item-large {
+  font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
+  height: 3rem;
+  line-height: 2rem;
+}
+
+.menu-item-small {
+  font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
+  height: 2rem;
+  line-height: 1rem;
+}
+
+.menu-item-rounded:first-of-type {
+  border-top-left-radius: var(--functional-radius);
+  border-top-right-radius: var(--functional-radius);
+}
+
+.menu-item-rounded:last-of-type {
+  border-bottom-left-radius: var(--functional-radius);
+  border-bottom-right-radius: var(--functional-radius);
+}
+
+.menu-item:hover:not([disabled]):not(.menu-item-selected) {
+  background-color: var(--functional-gray-extra-light);
+  cursor: pointer;
+}
+
+</style>

package/dist/components/agnostic/Menu/MenuItem.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean;
+        isSelected?: boolean;
+        classes: any;
+        focus?: () => any;
+        isDisabled?: () => any;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+    get focus(): () => any;
+    get isDisabled(): () => any;
+}
+export {};

package/dist/components/agnostic/Progress/Progress.svelte

@@ -0,0 +1,50 @@
+<style>
+/* https://stackoverflow.com/questions/45507970/how-can-i-change-the-color-of-a-progress-bar-value-in-html */
+
+/**
+ * Most examples show styling directly to the <progress> element itself. However,
+ * my tests (chrome, ff, safari on mac mini 2020), showed it's perfectly possibly
+ * to use a class selector instead. The reason I'd prefer that here, is that I can
+ * then use CSS Modules composes against .progress (e.g. for React/Vue components)
+ */
+.progress {
+  appearance: none;
+  height: var(--functional-progress-height, var(--fluid-10, 0.625rem));
+  width: 100%;
+  border: none;
+
+  /* Next couple of rules are required to be here for FF (but not chrome) */
+  background-color: var(--functional-progress-background, var(--functional-gray-light, #ededed));
+  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
+}
+
+.progress[value]::-webkit-progress-bar {
+  /* In my tests chrome requires this whereas FF wants it on the progress {} rule */
+  background-color: var(--functional-progress-background, var(--functional-gray-light, #ededed));
+  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
+}
+
+.progress[value]::-webkit-progress-value {
+  background-color: var(--functional-progress-fill-color, var(--functional-primary, #077acb));
+  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
+}
+
+.progress[value]::-moz-progress-bar {
+  background-color: var(--functional-progress-fill-color, var(--functional-primary, #077acb));
+  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
+}
+
+.progress[value]::-ms-fill {
+  background-color: var(--functional-progress-fill-color, var(--functional-primary, #077acb));
+  border-radius: var(--functional-progress-radius, var(--fluid-10, 0.625rem));
+}
+
+</style>
+
+<script>export let value = 0;
+export let max;
+export let css = "";
+let klasses = ["progress", css ? `${css}` : ""].filter((cl) => cl && cl.length).join(" ");
+</script>
+
+<progress class={klasses} value={value} max={max}></progress>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number;
+        max: any;
+        css?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ProgressProps = typeof __propDef.props;
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+export default class Progress extends SvelteComponent<ProgressProps, ProgressEvents, ProgressSlots> {
+}
+export {};

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 {};