@functionalcms/svelte-components 2.33.1 → 2.34.1

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

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