@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Close/api.js

@@ -0,0 +1 @@
+export {};

package/dist/components/agnostic/Dialog/Dialog.svelte

@@ -0,0 +1,265 @@
+<style>
+
+  /* ---------- GLOBAL STYLES ---------- */
+  /* Note this component requires global styles and doesn't get copied over from copystyles.js
+  and is "locked down". Svelte no longer appears to support <style global> and CSS Modules support
+  isn't built in. So, not ideal, but this is what we'll have to do for this component. */
+  
+  /* These are styles for the case where classNames.closeButton property was NOT
+  passed in and so we're generating the default close 'X' button on the upper right. */
+  :global(.dialog-close-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    width: var(--fluid-32);
+    height: var(--fluid-32);
+  }
+  
+  :global(.dialog-close-button:hover,
+  .dialog-close-button:active,
+  .dialog-close-button:focus) {
+    background: none;
+  
+    /* Needed for High Contrast mode */
+    outline: var(--functional-focus-ring-outline-width)
+      var(--functional-focus-ring-outline-style)
+      var(--functional-focus-ring-outline-color);
+  }
+  
+  :global(.dialog-close-button:focus) {
+    box-shadow: 0 0 0 3px var(--functional-focus-ring-color);
+    transition: box-shadow var(--functional-timing-fast) ease-out;
+  }
+  
+  @media (prefers-reduced-motion), (update: slow) {
+    :global(.dialog-close-button:focus) {
+      transition-duration: 0.001ms !important;
+    }
+  }
+  
+  :global(.close-button-large > .close) {
+    width: var(--fluid-16);
+    height: var(--fluid-16);
+  }
+  
+  :global(.dialog-close-button:hover .close) {
+    opacity: 100%;
+  }
+  
+  
+  :global(.dialog),
+  :global(.dialog-overlay) {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  
+  :global(.dialog) {
+    z-index: 1001;
+    display: flex;
+  }
+  
+  :global(.dialog[aria-hidden="true"]) {
+    display: none;
+  }
+  
+  :global(.dialog-overlay) {
+    background-color: rgb(50 50 50 / 60%);
+    animation: fade-in var(--functional-timing-fast) both;
+  }
+  
+  :global(.dialog-content) {
+    background-color: var(--functional-light);
+    margin: auto;
+    z-index: 1001;
+    position: relative;
+    padding: var(--fluid-16);
+    max-width: 90%;
+    width: 600px;
+    border-radius: var(--functional-radius);
+  }
+  
+  :global(.dialog-fade-in) {
+    animation: fade-in var(--functional-timing-fast) both;
+  }
+  
+  :global(.dialog-slide-up) {
+    animation: slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
+  }
+  
+  /**
+   * Cannot use two separate CSS classes with animation: foo, bar
+   * as the later class will overwrite the first (so this combines)
+   */
+  :global(.dialog-slide-up-fade-in) {
+    animation:
+      fade-in var(--functional-timing-fast) both,
+      slide-up var(--functional-timing-slow) var(--functional-timing-fast) both;
+  }
+  
+  @media screen and (min-width: 700px) {
+    :global(.dialog-content) {
+      padding: var(--fluid-32);
+    }
+  }
+  
+  @keyframes -global-fade-in {
+    from {
+      opacity: 0%;
+    }
+  }
+  
+  @keyframes -global-slide-up {
+    from {
+      transform: translateY(10%);
+    }
+  }
+  
+  /* Shared with AgnosticUI close buton so only need positioning and transition */
+  :global(.dialog-close) {
+    position: absolute;
+    top: var(--fluid-8);
+    right: var(--fluid-8);
+  }
+  
+  @media (prefers-reduced-motion), (update: slow) {
+    :global(.dialog-slide-up-fade-in, .dialog-fade-in, .dialog-slide-up, .dialog-content) {
+      transition-duration: 0.001ms !important;
+    }
+  }
+  
+  @media only screen and (min-width: 576px) {
+    :global(.dialog-close) {
+      top: var(--fluid-12);
+      right: var(--fluid-12);
+    }
+  }
+  
+  @media screen and (min-width: 768px) {
+    :global(.dialog-close) {
+      top: var(--fluid-16);
+      right: var(--fluid-16);
+    }
+  }
+  
+  /* We use div.drawer-* for specificity battle :( */
+  :global(div.drawer-start) {
+    right: initial;
+  }
+  
+  :global(div.drawer-start[aria-hidden]) {
+    transform: none;
+  }
+  
+  :global(div.drawer-end) {
+    left: initial;
+  }
+  
+  :global(div.drawer-end[aria-hidden]) {
+    transform: none;
+  }
+  
+  :global(div.drawer-top) {
+    bottom: initial;
+    transform: none;
+  }
+  
+  :global(div.drawer-top[aria-hidden]) {
+    transform: none;
+  }
+  
+  :global(div.drawer-bottom) {
+    top: initial;
+    transform: none;
+  }
+  
+  :global(div.drawer-bottom[aria-hidden]) {
+    transform: none;
+  }
+  
+  :global(div.drawer-content) {
+    margin: initial;
+    max-width: initial;
+    border-radius: initial;
+  }
+  
+  :global(div.drawer-start div.drawer-content, div.drawer-end div.drawer-content) {
+    width: 25rem;
+  }
+  
+  :global(div.drawer-top div.drawer-content, div.drawer-bottom div.drawer-content) {
+    height: 25vh;
+    width: 100%;
+  }
+  </style>
+  
+  <script>import Close from "../Close/Close.svelte";
+import SvelteA11yDialog from "svelte-a11y-dialog/SvelteA11yDialog.svelte";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let id;
+export let title;
+export let dialogRoot;
+export let role = "dialog";
+export let titleId = "";
+export let closeButtonLabel = "Close button";
+export let closeButtonPosition = "first";
+export let drawerPlacement = "";
+export let isAnimationFadeIn = false;
+export let isAnimationSlideUp = false;
+let dialogInstance;
+const assignDialogInstance = (ev) => {
+  dialogInstance = ev.detail.instance;
+  dispatch("instance", {
+    instance: dialogInstance
+  });
+};
+export let classNames = {};
+const documentClasses = [
+  "dialog-content",
+  isAnimationFadeIn && isAnimationSlideUp ? "dialog-slide-up-fade-in" : "",
+  !isAnimationFadeIn && isAnimationSlideUp ? "dialog-slide-up" : "",
+  isAnimationFadeIn && !isAnimationSlideUp ? "dialog-fade-in" : "",
+  drawerPlacement.length ? "drawer-content" : ""
+].filter((c) => c).join(" ");
+const containerClasses = [
+  "dialog",
+  drawerPlacement ? `drawer-${drawerPlacement}` : ""
+].filter((c) => c).join(" ");
+const defaultClassNames = {
+  container: containerClasses,
+  document: documentClasses,
+  overlay: "dialog-overlay",
+  title: "h4 mbe16",
+  // Borrows .close-button (from close.css) as it gives us the transparent
+  // style plus the a11y focus ring we want applied to dialog's close button
+  closeButton: "dialog-close dialog-close-button"
+};
+$: getClassNames = () => {
+  return { ...defaultClassNames, ...classNames };
+};
+</script>
+  
+  <SvelteA11yDialog
+    id={id}
+    dialogRoot={dialogRoot}
+    closeButtonLabel={closeButtonLabel}
+    closeButtonPosition={closeButtonPosition}
+    title={title}
+    titleId={titleId}
+    role={role}
+    classNames={getClassNames()}
+    on:instance={assignDialogInstance}
+  >
+    <slot name="closeButtonContent" slot="closeButtonContent">
+      <Close isFaux size="large" />
+    </slot>
+    <slot />
+  </SvelteA11yDialog>
+  

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

@@ -0,0 +1,39 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: any;
+        title: any;
+        dialogRoot: any;
+        role?: "dialog" | "alertdialog";
+        titleId?: string;
+        closeButtonLabel?: string;
+        closeButtonPosition?: "first" | "last" | "none";
+        drawerPlacement?: string;
+        /**
+             * Animates the dialog content by fading in. Set to false to disable.
+             */ isAnimationFadeIn?: boolean;
+        /**
+             * Animates the dialog content by sliding up. Set to false to disable.
+             */ isAnimationSlideUp?: boolean;
+        classNames?: {};
+    };
+    events: {
+        instance: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        closeButtonContent: {
+            slot: string;
+        };
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DialogProps = typeof __propDef.props;
+export type DialogEvents = typeof __propDef.events;
+export type DialogSlots = typeof __propDef.slots;
+export default class Dialog extends SvelteComponent<DialogProps, DialogEvents, DialogSlots> {
+}
+export {};

package/dist/components/agnostic/Dialog/SvelteA11yDialog.svelte

@@ -0,0 +1,103 @@
+<script>import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
+import A11yDialog from "./a11y-dialog.js";
+const dispatch = createEventDispatcher();
+export let id;
+export let titleId = "";
+export let role = "dialog";
+export let dialogRoot;
+export let title;
+export let closeButtonLabel = "Close this dialog window";
+export let closeButtonPosition = "first";
+export let classNames = {};
+const defaultClassNames = {
+  container: "dialog-container",
+  document: "dialog-content",
+  overlay: "dialog-overlay",
+  element: "dialog-element",
+  title: "dialog-title h4",
+  closeButton: "dialog-close"
+};
+const classes = { ...defaultClassNames, ...classNames };
+let dialog;
+let rootElement;
+const portalTarget = dialogRoot || "document.body";
+const fullTitleId = titleId || `${id}-title`;
+const roleAttribute = ["dialog", "alertdialog"].includes(role) ? role : "dialog";
+let mounted = false;
+onMount(() => mounted = true);
+onDestroy(() => {
+  if (dialog) {
+    dialog.destroy();
+  }
+});
+const instantiateDialog = async () => {
+  await tick();
+  dialog = new A11yDialog(rootElement, portalTarget);
+  dispatch("instance", {
+    "instance": dialog
+  });
+};
+const teleportNode = async (node) => {
+  const destination = document.querySelector(portalTarget);
+  destination.appendChild(node);
+  instantiateDialog();
+};
+const teleport = (node) => {
+  teleportNode(node);
+};
+const close = () => {
+  dialog.hide();
+};
+</script>
+  
+  {#if mounted}
+    <div
+      id={id}
+      bind:this={rootElement}
+      class={classes.container}
+      role={roleAttribute}
+      aria-hidden="true"
+      aria-labelledby={fullTitleId}
+      use:teleport
+    >
+        <div
+          data-a11y-dialog-hide
+          tabindex="-1"
+          class={classes.overlay}
+          on:click|preventDefault={role === 'alertdialog' ? undefined : close}
+        ></div>
+        <div role="document" class={classes.document}>
+          {#if closeButtonPosition === 'first'}
+            <button
+              data-a11y-dialog-hide
+              type="button"
+              class={classes.closeButton}
+              aria-label={closeButtonLabel}
+              on:click={close}
+            >
+              <slot name="closeButtonContent">
+                { '\u00D7' }
+              </slot>
+            </button>
+          {/if}
+          <p id={fullTitleId} class={classes.title}>
+            {title}
+          </p>
+          <slot />
+          {#if closeButtonPosition === 'last'}
+            <button
+              data-a11y-dialog-hide
+              type="button"
+              class={classes.closeButton}
+              aria-label={closeButtonLabel}
+              on:click={close}
+            >
+              <slot name="closeButtonContent">
+                { '\u00D7' }
+              </slot>
+            </button>
+          {/if}
+        </div>
+      </div>
+  {/if}
+  

package/dist/components/agnostic/Dialog/SvelteA11yDialog.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        titleId?: string;
+        role?: "dialog" | "alertdialog";
+        dialogRoot: string;
+        title: string;
+        closeButtonLabel?: string;
+        closeButtonPosition?: "first" | "last" | "none";
+        classNames?: {};
+    };
+    events: {
+        instance: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        closeButtonContent: {};
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SvelteA11yDialogProps = typeof __propDef.props;
+export type SvelteA11yDialogEvents = typeof __propDef.events;
+export type SvelteA11yDialogSlots = typeof __propDef.slots;
+export default class SvelteA11yDialog extends SvelteComponent<SvelteA11yDialogProps, SvelteA11yDialogEvents, SvelteA11yDialogSlots> {
+}
+export {};

package/dist/components/agnostic/Dialog/a11y-dialog.d.ts

@@ -0,0 +1,56 @@
+export type A11yDialogEvent = 'show' | 'hide' | 'destroy';
+export type A11yDialogInstance = InstanceType<typeof A11yDialog>;
+export default class A11yDialog {
+    private $el;
+    private id;
+    private previouslyFocused;
+    shown: boolean;
+    constructor(element: HTMLElement);
+    /**
+     * Destroy the current instance (after making sure the dialog has been hidden)
+     * and remove all associated listeners from dialog openers and closers
+     */
+    destroy(): this;
+    /**
+     * Show the dialog element, trap the current focus within it, listen for some
+     * specific key presses and fire all registered callbacks for `show` event
+     */
+    show(event?: Event): this;
+    /**
+     * Hide the dialog element, restore the focus to the previously active
+     * element, stop listening for some specific key presses and fire all
+     * registered callbacks for `hide` event
+     */
+    hide(event?: Event): this;
+    /**
+     * Register a new callback for the given event type
+     */
+    on(type: A11yDialogEvent, handler: EventListener, options?: AddEventListenerOptions): this;
+    /**
+     * Unregister an existing callback for the given event type
+     */
+    off(type: A11yDialogEvent, handler: EventListener, options?: AddEventListenerOptions): this;
+    /**
+     * Dispatch and return a custom event from the DOM element associated with
+     * this dialog; this allows authors to listen for and respond to the events
+     * in their own code
+     */
+    private fire;
+    /**
+     * Add a delegated event listener for when elememts that open or close the
+     * dialog are clicked, and call `show` or `hide`, respectively
+     */
+    private handleTriggerClicks;
+    /**
+     * Private event handler used when listening to some specific key presses
+     * (namely ESC and TAB)
+     */
+    private bindKeypress;
+    /**
+     * If the dialog is shown and the focus is not within a dialog element (either
+     * this one or another one in case of nested dialogs) or attribute, move it
+     * back to the dialog container
+     * See: https://github.com/KittyGiraudel/a11y-dialog/issues/177
+     */
+    private maintainFocus;
+}