@functionalcms/svelte-components 3.5.15 → 3.5.18

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

@@ -1,278 +0,0 @@
-<script lang="ts">
-	import Close from '../Close/Close.svelte';
-	import SvelteA11yDialog from './SvelteA11yDialog.svelte';
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
-	export let id;
-	export let title;
-	export let dialogRoot;
-	export let role: 'dialog' | 'alertdialog' = 'dialog';
-	export let titleId = '';
-	export let closeButtonLabel = 'Close button';
-	export let closeButtonPosition: 'first' | 'last' | 'none' = 'first';
-	export let drawerPlacement = '';
-
-	/**
-	 * Animates the dialog content by fading in. Set to false to disable.
-	 */
-	export let isAnimationFadeIn = false;
-
-	/**
-	 * Animates the dialog content by sliding up. Set to false to disable.
-	 */
-	export let isAnimationSlideUp = false;
-
-	/**
-	 * Handles a11y-dialog instantiation and assigning of dialog instance
-	 */
-	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}
-	{dialogRoot}
-	{closeButtonLabel}
-	{closeButtonPosition}
-	{title}
-	{titleId}
-	{role}
-	classNames={getClassNames()}
-	on:instance={assignDialogInstance}
->
-	<slot name="closeButtonContent" slot="closeButtonContent">
-		<Close isFaux size="large" />
-	</slot>
-	<slot />
-</SvelteA11yDialog>
-
-<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>

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

@@ -1,37 +0,0 @@
-import { SvelteComponentTyped } 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: {};
-    };
-};
-export type DialogProps = typeof __propDef.props;
-export type DialogEvents = typeof __propDef.events;
-export type DialogSlots = typeof __propDef.slots;
-export default class Dialog extends SvelteComponentTyped<DialogProps, DialogEvents, DialogSlots> {
-}
-export {};

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

@@ -1,128 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
-    import A11yDialog from './a11y-dialog.js';
-  
-    const dispatch = createEventDispatcher();
-  
-    export let id: string;
-    export let titleId = '';
-    export let role: 'dialog' | 'alertdialog' = 'dialog';
-    export let dialogRoot: string;
-    export let title: string;
-    export let closeButtonLabel = 'Close this dialog window';
-    export let closeButtonPosition: 'first' | 'last' | 'none' = '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};
-  
-    // The dialog instance
-    let dialog;
-  
-    // Dialog element's binding
-    let rootElement;
-  
-    const portalTarget: string = dialogRoot || "document.body";
-  
-    const fullTitleId = titleId || `${id}-title`;
-  
-    const roleAttribute = ['dialog', 'alertdialog'].includes(role)
-      ? role
-      : 'dialog';
-  
-    // In case of SSR we don't render element until hydration is complete
-    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);
-      // We don't render the template until mounted. So we need
-      // wait one more "tick" before instantiating the dialog
-      instantiateDialog();
-    }
-  
-    /**
-     * Svelte actions don't want to be async so this is a hack
-     * to get around that by delegating to teleportNode
-     */
-    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

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } 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: {};
-    };
-};
-export type SvelteA11yDialogProps = typeof __propDef.props;
-export type SvelteA11yDialogEvents = typeof __propDef.events;
-export type SvelteA11yDialogSlots = typeof __propDef.slots;
-export default class SvelteA11yDialog extends SvelteComponentTyped<SvelteA11yDialogProps, SvelteA11yDialogEvents, SvelteA11yDialogSlots> {
-}
-export {};

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

@@ -1,56 +0,0 @@
-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;
-}