@functionalcms/svelte-components 2.33.2 → 2.34.1

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/Disclose/Disclose.svelte

@@ -0,0 +1,102 @@
+<style>
+.disclose {
+  margin-block-end: var(--fluid-4);
+
+  /* When this element is a direct child of a flex container with
+  flex-direction: column it collapses similar to an inline element even though
+  it's block. This helps prevent that. */
+  width: 100%;
+}
+
+.disclose-title {
+  display: block;
+  cursor: pointer;
+  font-weight: 600;
+  padding: var(--fluid-8) var(--fluid-12);
+
+  /* Required to position the icon absolutely */
+  position: relative;
+  color: inherit;
+  transition: color var(--functional-timing-slow);
+}
+
+.disclose-panel {
+  font-weight: 400;
+  padding: var(--fluid-16);
+}
+
+.disclose-title,
+.disclose-panel {
+  margin: 0;
+}
+
+/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+.disclose-title::webkit-details-marker {
+  display: none;
+}
+
+.disclose-bordered .disclose-title {
+  border: 1px solid var(--functional-gray-light);
+}
+
+.disclose-bg .disclose-title {
+  background-color: var(--functional-gray-light);
+}
+
+.disclose-title: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;
+}
+
+.disclose-title::after {
+  color: var(--functional-gray-dark);
+  content: "\203A";
+  position: absolute;
+  right: var(--fluid-12);
+  top: 0;
+  bottom: 0;
+
+  /* Chevron thinning :) */
+  font-size: var(--fluid-32);
+  line-height: 1;
+  font-weight: 100;
+  transition: transform var(--functional-timing-slow);
+  transform: rotate(0);
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .disclose-title,
+  .disclose-title:focus,
+  .disclose-title::after {
+    transition: none;
+  }
+}
+
+.disclose[open] > .disclose-title::after {
+  transform: rotate(90deg);
+}
+
+</style>
+
+<script>export let title = "";
+export let isOpen = false;
+export let isBackground = false;
+export let isBordered = false;
+const discloseClasses = [
+  "disclose",
+  isBackground ? "disclose-bg" : "",
+  isBordered ? "disclose-bordered" : ""
+].filter((c) => c).join(" ");
+</script>
+
+<details class={discloseClasses} bind:open={isOpen}>
+  <summary class="disclose-title">{title}</summary>
+  <div class="disclose-panel">
+    <slot />
+  </div>
+</details>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string;
+        isOpen?: boolean;
+        isBackground?: boolean;
+        isBordered?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DiscloseProps = typeof __propDef.props;
+export type DiscloseEvents = typeof __propDef.events;
+export type DiscloseSlots = typeof __propDef.slots;
+export default class Disclose extends SvelteComponent<DiscloseProps, DiscloseEvents, DiscloseSlots> {
+}
+export {};

package/dist/components/agnostic/Divider/Divider.svelte

@@ -0,0 +1,139 @@
+<script>export let isVertical = false;
+export let justify = "";
+export let type = "";
+export let size = "";
+let slots = $$props.$$slots;
+const dividerClasses = [
+  "divider",
+  isVertical ? "divider-vertical" : "",
+  justify ? `divider-justify-${justify}` : "",
+  size ? `divider-${size}` : "",
+  type ? `divider-${type}` : ""
+].filter((cl) => cl.length).join(" ");
+</script>
+
+<div class={dividerClasses}>
+  {#if slots && slots.dividerContent}
+    <div class="divider-content">
+      <slot name="dividerContent" />
+    </div>
+  {/if}
+</div>
+<style>
+.divider {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.divider::before,
+.divider::after {
+  content: "";
+  background-color: var(--functional-gray-mid);
+  height: var(--fluid-2);
+  flex-grow: 1;
+}
+
+.divider-small::before,
+.divider-small::after {
+  height: 1px;
+}
+
+.divider-large::before,
+.divider-large::after {
+  height: var(--fluid-4);
+}
+
+.divider-xlarge::before,
+.divider-xlarge::after {
+  height: var(--fluid-6);
+}
+
+.divider-justify-end::after,
+.divider-justify-start::before {
+  flex-grow: 0;
+  flex-basis: 3%;
+}
+
+.divider-content {
+  padding-inline-start: var(--fluid-16);
+  padding-inline-end: var(--fluid-16);
+}
+
+.divider-vertical {
+  height: auto;
+  margin: 0 var(--fluid-16);
+  width: var(--fluid-16);
+  flex-direction: column;
+  align-self: stretch;
+}
+
+.divider-vertical::before,
+.divider-vertical::after {
+  width: var(--fluid-2);
+}
+
+.divider-vertical.divider-small::before,
+.divider-vertical.divider-small::after {
+  width: 1px;
+}
+
+.divider-vertical.divider-large::before,
+.divider-vertical.divider-large::after {
+  width: var(--fluid-4);
+}
+
+.divider-vertical.divider-xlarge::before,
+.divider-vertical.divider-xlarge::after {
+  width: var(--fluid-6);
+}
+
+.divider-vertical .divider-content {
+  padding-inline-start: var(--fluid-24);
+  padding-inline-end: var(--fluid-24);
+
+  /* Since we're vertical we need space from line above/below */
+  padding-block-start: var(--fluid-6);
+  padding-block-end: var(--fluid-6);
+}
+
+.divider-warning::before,
+.divider-warning::after {
+  background-color: var(--functional-warning-border);
+}
+
+.divider-warning .divider-content {
+  color: var(--functional-warning-border);
+}
+
+.divider-error::before,
+.divider-error::after {
+  background-color: var(--functional-error);
+}
+
+.divider-error .divider-content {
+  color: var(--functional-error);
+}
+
+.divider-success::before,
+.divider-success::after {
+  background-color: var(--functional-action);
+}
+
+.divider-success .divider-content {
+  color: var(--functional-action);
+}
+
+.divider-info::before,
+.divider-info::after {
+  background-color: var(--functional-primary);
+}
+
+.divider-info .divider-content {
+  color: var(--functional-primary);
+}
+
+</style>
+  

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { DividerJustify, DividerTypes, DividerSizes } from './api';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        isVertical?: boolean | undefined;
+        justify?: DividerJustify | undefined;
+        type?: DividerTypes | undefined;
+        size?: DividerSizes | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        dividerContent: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
+}
+export {};

package/dist/components/agnostic/Divider/api.d.ts

@@ -0,0 +1,3 @@
+export type DividerSizes = 'small' | 'large' | 'xlarge' | '';
+export type DividerJustify = 'start' | 'end' | '';
+export type DividerTypes = 'success' | 'info' | 'error' | 'warning' | '';

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

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

package/dist/components/agnostic/Drawer/Drawer.svelte

@@ -0,0 +1,30 @@
+<script>import Dialog from "../Dialog/Dialog.svelte";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+let drawerInstance;
+const assignDrawerRef = (ev) => {
+  drawerInstance = ev.detail.instance;
+  dispatch("instance", {
+    instance: drawerInstance
+  });
+};
+export let id;
+export let drawerRoot;
+export let placement;
+export let title;
+export let role = "dialog";
+export let isAnimationFadeIn = true;
+</script>
+<Dialog
+  id={id}
+  dialogRoot={drawerRoot}
+  drawerPlacement={placement}
+  titleId="{`${title.replaceAll(' ', '-').toLowerCase()}-id`}"
+  role={role}
+  title={title}
+  on:instance={assignDrawerRef}
+  isAnimationFadeIn={isAnimationFadeIn}
+  closeButtonLabel="Close drawer"
+>
+  <slot />
+</Dialog>

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { DrawerRoles } from './api';
+declare const __propDef: {
+    props: {
+        id: any;
+        drawerRoot: any;
+        placement: any;
+        title: any;
+        role?: DrawerRoles;
+        isAnimationFadeIn?: boolean;
+    };
+    events: {
+        instance: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/dist/components/agnostic/Drawer/api.d.ts

@@ -0,0 +1 @@
+export type DrawerRoles = 'alertdialog' | 'dialog';

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

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