@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Input/InputAddonItem.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  InputAddonItemProps */
+/** @typedef {typeof __propDef.events}  InputAddonItemEvents */
+/** @typedef {typeof __propDef.slots}  InputAddonItemSlots */
+export default class InputAddonItem extends SvelteComponent<{
+    css?: string | undefined;
+    addonLeft?: boolean | undefined;
+    addonRight?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type InputAddonItemProps = typeof __propDef.props;
+export type InputAddonItemEvents = typeof __propDef.events;
+export type InputAddonItemSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        css?: string | undefined;
+        addonLeft?: boolean | undefined;
+        addonRight?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/agnostic/Loader/Loader.svelte

@@ -0,0 +1,113 @@
+<style>
+.loader {
+  --loading-color: var(--functional-loading-color, var(--functional-dark));
+  --loading-size: var(--fluid-16);
+  --loading-size-small: var(--fluid-12);
+  --loading-size-large: var(--fluid-18);
+
+  position: relative;
+  box-sizing: border-box;
+  animation: blink 1s infinite;
+  animation-delay: 250ms;
+
+  /* Make up for negative positioning */
+  margin-left: var(--loading-size);
+
+  /* Initially set zero until aria-busy becomes true */
+  opacity: 0%;
+}
+
+.loader,
+.loader::before,
+.loader::after {
+  width: calc(var(--loading-size) / 2);
+  height: calc(var(--loading-size) / 2);
+  border-radius: var(--fluid-6);
+  background-color: var(--loading-color);
+}
+
+/* SMALL */
+.loader-small,
+.loader-small::before,
+.loader-small::after {
+  width: calc(var(--loading-size-small) / 2);
+  height: calc(var(--loading-size-small) / 2);
+}
+
+/* LARGE */
+.loader-large,
+.loader-large::before,
+.loader-large::after {
+  width: calc(var(--loading-size-large) / 2);
+  height: calc(var(--loading-size-large) / 2);
+  border-radius: var(--fluid-8);
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  animation: blink 1s infinite;
+}
+
+.loader::before {
+  left: calc(-1 * var(--loading-size));
+  animation-delay: 0s;
+}
+
+.loader::after {
+  left: var(--loading-size);
+  animation-delay: 500ms;
+}
+
+/* SMALL */
+.loader-small::before {
+  left: calc(-1 * var(--loading-size-small));
+}
+
+.loader-small::after {
+  left: var(--loading-size-small);
+}
+
+/* LARGE */
+.loader-large::before {
+  left: calc(-1 * var(--loading-size-large));
+  animation-delay: 0s;
+}
+
+.loader-large::after {
+  left: var(--loading-size-large);
+}
+
+/**
+ * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
+ */
+.loader[aria-busy="true"] {
+  opacity: 100%;
+}
+
+@keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .loader,
+  .loader::before,
+  .loader::after {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+<script>export let ariaLabel = "Loading\u2026";
+export let size = "";
+export let loaderClasses = ["loader", size ? `loader-${size}` : ""].filter((c) => c).join(" ");
+</script>
+
+<div class={loaderClasses} role="status" aria-live="polite" aria-busy="true">
+  <span class="screenreader-only">{ariaLabel}</span>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        ariaLabel?: string;
+        size?: "small" | "large" | "";
+        loaderClasses?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

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

@@ -0,0 +1,466 @@
+<script>import { onDestroy, onMount } from "svelte";
+export let id;
+export let type = "simple";
+export let size = "";
+export let menuTitle;
+export let menuItems = [];
+export let isDisabled = false;
+export let isRounded = false;
+export let isBordered = false;
+export let isItemsRight = false;
+export let icon = "\u25BE";
+export let onOpen;
+export let onClose;
+export let closeOnClickOutside = true;
+export let closeOnSelect = true;
+let rootRef;
+let triggerRef;
+let menuItemRefs = [];
+$: menuItemRefs = [];
+let expanded = false;
+const setExpanded = (b) => expanded = b;
+let selectedItem = -1;
+const setSelectedItem = (n) => selectedItem = n;
+const setOpened = (open) => {
+  if (open && onOpen) {
+    onOpen(selectedItem);
+  } else if (onClose) {
+    onClose();
+  }
+  setExpanded(open);
+};
+const focusItem = (index, direction) => {
+  let i = index;
+  if (direction === "asc") {
+    i += 1;
+  } else if (direction === "desc") {
+    i -= 1;
+  }
+  if (i < 0) {
+    i = menuItems.length - 1;
+  } else if (i >= menuItems.length) {
+    i = 0;
+  }
+  const nextMenuItem = menuItemRefs[i];
+  if (nextMenuItem) {
+    if (nextMenuItem.isDisabled() && direction) {
+      focusItem(i, direction);
+    } else {
+      nextMenuItem.focus();
+    }
+  }
+};
+const focusTriggerButton = () => triggerRef && triggerRef.focus();
+const isInside = (el) => {
+  if (rootRef) {
+    const children = rootRef.querySelectorAll("*");
+    for (let i = 0; i < children.length; i += 1) {
+      const child = children[i];
+      if (el === child) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const clickedOutside = (ev) => {
+  if (expanded && closeOnClickOutside) {
+    if (!isInside(ev.target)) {
+      setExpanded(false);
+      focusTriggerButton();
+    }
+  }
+};
+onMount(() => {
+  if (typeof window !== "undefined") {
+    document.addEventListener("click", clickedOutside);
+  }
+});
+onDestroy(() => {
+  if (typeof window !== "undefined") {
+    document.removeEventListener("click", clickedOutside);
+  }
+});
+let triggerSizeClasses;
+let itemSizeClasses;
+switch (size) {
+  case "small":
+    triggerSizeClasses = "menu-trigger-small";
+    itemSizeClasses = "menu-item-small";
+    break;
+  case "large":
+    triggerSizeClasses = "menu-trigger-large";
+    itemSizeClasses = "menu-item-large";
+    break;
+  default:
+    triggerSizeClasses = "";
+    itemSizeClasses = "";
+}
+const dotBarClasses = [
+  type === "hamburger" ? "bar" : "dot"
+].filter((cls) => cls).join(" ");
+const triggerClasses = [
+  type === "simple" ? "menu-trigger" : "",
+  triggerSizeClasses,
+  isBordered ? "menu-trigger-bordered" : "",
+  isRounded ? "menu-trigger-rounded" : "",
+  type !== "simple" ? "btn-base" : "",
+  type !== "simple" ? "btn-blank" : "",
+  type === "kebab" ? "btn-kebab" : "",
+  type === "meatball" ? "btn-meatball" : "",
+  type === "hamburger" ? "btn-hamburger" : ""
+].filter((cls) => cls).join(" ");
+const itemClasses = [itemSizeClasses, isRounded ? "menu-item-rounded" : ""].filter((cls) => cls).join(" ");
+const afterOpened = () => {
+  requestAnimationFrame(() => {
+    if (selectedItem < 1) {
+      setSelectedItem(0);
+      onMenuItemKeyDown("Home", 0);
+    } else {
+      focusItem(selectedItem);
+      setSelectedItem(selectedItem);
+    }
+  });
+};
+const onMenuItemKeyDown = (evOrString, index) => {
+  const key = typeof evOrString === "string" ? evOrString : evOrString.key;
+  switch (key) {
+    case "Up":
+    case "ArrowUp":
+      focusItem(index, "desc");
+      break;
+    case "Down":
+    case "ArrowDown":
+      focusItem(index, "asc");
+      break;
+    case "Home":
+    case "ArrowHome":
+      focusItem(0);
+      break;
+    case "End":
+    case "ArrowEnd":
+      focusItem(menuItems.length - 1);
+      break;
+    case "Enter":
+    case "Space":
+      focusItem(index);
+      setSelectedItem(index);
+      if (closeOnSelect) {
+        setOpened(false);
+        focusTriggerButton();
+      }
+      break;
+    case "Escape":
+      setOpened(false);
+      focusTriggerButton();
+      break;
+    case "Tab":
+      if (typeof evOrString !== "string") {
+        evOrString.preventDefault();
+      }
+      break;
+    default:
+      return;
+  }
+  if (typeof evOrString !== "string") {
+    evOrString.preventDefault();
+  }
+};
+const onTriggerButtonKeyDown = (e) => {
+  switch (e.key) {
+    case "Down":
+    case "ArrowDown":
+      if (!expanded) {
+        setOpened(true);
+        afterOpened();
+        e.preventDefault();
+      }
+      break;
+    case "Escape":
+      if (expanded) {
+        setOpened(false);
+        focusTriggerButton();
+      }
+      break;
+    default:
+  }
+};
+const onTriggerButtonClicked = () => {
+  const toggled = !expanded;
+  setOpened(toggled);
+  setTimeout(() => {
+    if (toggled) {
+      afterOpened();
+    } else if (closeOnSelect) {
+      setOpened(false);
+      focusTriggerButton();
+    }
+  }, 10);
+};
+$: menuItemClasses = (isSelected) => {
+  return [
+    `menu-item`,
+    itemClasses,
+    isSelected ? "menu-item-selected" : ""
+  ].filter((klass) => klass.length).join(" ");
+};
+$: menuItemsClasses = () => {
+  return [
+    isItemsRight ? "menu-items-right" : "",
+    !isItemsRight ? "menu-items" : ""
+  ].filter((c) => c && c.length).join(" ");
+};
+$: onMenuItemClicked = (index) => {
+  setSelectedItem(index);
+  if (closeOnSelect) {
+    setOpened(false);
+    focusTriggerButton();
+  }
+};
+</script>
+<div bind:this={rootRef} class="menu">
+  <button
+    bind:this={triggerRef}
+    class={triggerClasses}
+    aria-haspopup="true"
+    aria-expanded={expanded}
+    disabled={isDisabled}
+    on:keydown={onTriggerButtonKeyDown}
+    on:click={onTriggerButtonClicked}
+  >
+    {#if type === 'simple'}
+      {menuTitle}
+      <span class="menu-icon" aria-hidden="true">
+        {icon}
+      </span>
+    {:else}
+      <span class="screenreader-only">{menuTitle}</span>
+      <span class={dotBarClasses} />
+      <span class={dotBarClasses} />
+      <span class={dotBarClasses} />
+    {/if}
+  </button> 
+  <div class={menuItemsClasses()} id={id} role="menu" hidden={!expanded}>
+    {#each menuItems as item, i}
+      <svelte:component
+        this={item.menuItemComponent}
+        bind:this={menuItemRefs[i]}
+        classes={menuItemClasses(selectedItem === i)}
+        isSelected={selectedItem === i}
+        disabled={item.isDisabled}
+        on:click={() => onMenuItemClicked(i)}
+        on:keydown={(ev) => onMenuItemKeyDown(ev, i)}
+      >
+      {item.label}
+    </svelte:component>
+    {/each}
+  </div> 
+</div> 
+<style>
+.menu {
+  display: inline-flex;
+  position: relative;
+  background-color: inherit;
+}
+
+:is(.menu-items, .menu-items-right) {
+  position: absolute;
+  background-color: var(--functional-light);
+  margin-block-start: var(--fluid-6);
+  z-index: 10;
+}
+
+.menu-items {
+  right: initial;
+  left: 0;
+}
+
+.menu-items-right {
+  left: initial;
+  right: 0;
+}
+
+.btn-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
+  appearance: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--functional-timing-medium);
+}
+
+/**
+ * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
+ * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
+ */
+:is(.btn-link, .btn-blank) {
+  font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
+  font-size: var(--functional-btn-font-size, 1rem);
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  transition: none;
+}
+
+/* Since blank buttons can be used for things like input addons we don't want to go crazy
+on the side padding. As such, these have a good bit less then regular buttons. */
+.btn-blank {
+  --functional-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
+
+  padding-inline-start: var(--functional-btn-blank-side-padding);
+  padding-inline-end: var(--functional-btn-blank-side-padding);
+}
+
+/* A button blank with link color text */
+.btn-link {
+  color: var(--functional-btn-primary, var(--functional-primary));
+}
+
+.btn-link:hover {
+  cursor: pointer;
+}
+
+.menu-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+  background-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
+  cursor: pointer;
+  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);
+}
+
+.menu-trigger[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-trigger: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;
+}
+
+/* Sizes */
+.menu-trigger-large {
+  font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
+  height: 3rem;
+  line-height: 2rem;
+}
+
+.menu-trigger-small {
+  font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
+  height: 2rem;
+  line-height: 1rem;
+}
+
+.menu-trigger-bordered {
+  --menu-item-background-color: var(--functional-menu-item-background-color, inherit);
+
+  background-color: var(--menu-item-background-color);
+}
+
+.menu-trigger-rounded {
+  border-radius: var(--functional-radius);
+}
+
+/* TODO make this more flexible eventually */
+.menu-icon {
+  font-family: sans-serif;
+  font-size: var(--fluid-18);
+  margin-inline-start: var(--fluid-8);
+  line-height: 1;
+}
+
+:is(.btn-kebab, .btn-meatball) {
+  justify-content: space-around;
+  height: var(--fluid-24);
+  width: var(--fluid-24);
+
+  /* Rest here is supplied by btn-base and btn-blank */
+}
+
+/* We use btn-blank which doesn't include this :( */
+:is(.btn-hamburger:focus, .btn-kebab:focus, .btn-meatball:focus) {
+  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+  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;
+}
+
+.btn-hamburger,
+.btn-kebab {
+  flex-direction: column;
+}
+
+.btn-meatball {
+  flex-direction: row;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.btn-meatball {
+  --block-padding: var(--functional-side-padding);
+
+  padding-block-start: var(--block-padding);
+  padding-block-end: var(--block-padding);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.btn-hamburger {
+  --vertical-padding: 3px;
+
+  padding-block-start: var(--vertical-padding);
+  padding-block-end: var(--vertical-padding);
+  padding-inline-end: var(--fluid-2);
+  padding-inline-start: var(--fluid-2);
+}
+
+.dot,
+.bar {
+  background-color: var(--functional-dark);
+}
+
+.dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50px;
+}
+
+.bar {
+  width: var(--fluid-20);
+  height: var(--fluid-2);
+  margin: var(--fluid-2) 0;
+}
+
+</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+        type?: "simple" | "kebab" | "hamburger" | "meatball";
+        size?: "small" | "large" | "";
+        menuTitle: any;
+        menuItems?: any[];
+        isDisabled?: boolean;
+        isRounded?: boolean;
+        isBordered?: boolean;
+        isItemsRight?: boolean;
+        icon?: string;
+        onOpen: any;
+        onClose: any;
+        closeOnClickOutside?: boolean;
+        closeOnSelect?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};