@functionalcms/svelte-components 2.33.2 → 2.34.2

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

package/dist/components/agnostic/EmptyState/EmptyState.svelte

@@ -0,0 +1,46 @@
+<style>
+.empty-base,
+.empty {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+}
+
+.empty {
+  padding: calc(2 * var(--functional-side-padding));
+  background: var(--functional-gray-extra-light);
+}
+
+.empty-bordered {
+  background: transparent;
+  border: 1px solid var(--functional-gray-light);
+}
+
+.empty-rounded {
+  border-radius: var(--functional-radius);
+}
+
+.empty-actions {
+  margin-block-start: var(--spacing-24);
+}
+
+</style>
+
+<script>export let isRounded = false;
+export let isBordered = false;
+const emptyClasses = [
+  "empty",
+  isRounded ? "empty-rounded" : "",
+  isBordered ? "empty-bordered" : ""
+].filter((cl) => cl.length).join(" ");
+</script>
+
+<div class={emptyClasses}>
+  <slot name="header" />
+  <slot name="body" />
+  <div class="empty-actions">
+    <slot name="footer" />
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isRounded?: boolean;
+        isBordered?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        body: {};
+        footer: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EmptyStateProps = typeof __propDef.props;
+export type EmptyStateEvents = typeof __propDef.events;
+export type EmptyStateSlots = typeof __propDef.slots;
+export default class EmptyState extends SvelteComponent<EmptyStateProps, EmptyStateEvents, EmptyStateSlots> {
+}
+export {};

package/dist/components/agnostic/Header/Header.svelte

@@ -0,0 +1,104 @@
+<style>
+.header,
+.header-base {
+  display: block;
+}
+
+.header-base :global(img),
+.header :global(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.header,
+.header-skin {
+  background-color: var(--functional-header-background-color, var(--functional-light));
+  box-shadow:
+    var(--functional-header-box-shadow-hor, 0) var(--functional-header-box-shadow-ver, 1px)
+    var(--functional-header-box-shadow-blur, 5px) var(--functional-header-box-shadow-spread, 2px)
+    var(--functional-header-box-shadow-color, rgb(0 0 0 / 10%));
+  font-family: var(--functional-header-font-family, var(--functional-font-family-body));
+  border-bottom: 1px solid var(--functional-header-border-color, var(--functional-gray-light));
+  padding-block-start: var(--functional-vertical-pad, 0.5rem);
+  padding-block-end: var(--functional-vertical-pad, 0.5rem);
+  padding-inline-start: var(--fluid-24);
+  padding-inline-end: var(--fluid-24);
+}
+
+.header-content {
+  width: var(--functional-header-content-width, 960px);
+  max-width: 100%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-flow: wrap column;
+}
+
+/**
+ * If you make your header sticky, you should likely consider that jump links
+ * e.g. <h1 id="Jump-Here">... will tuck underneath the header! Here's a recommendation
+ * for how to circumnavigate this issue via scroll-margin-top:
+  h1[id],
+  h2[id],
+  h3[id],
+  h4[id],
+  h5[id],
+  h6[id] {
+    scroll-margin-top: 80px;
+  }
+ * In this case I have a 64px tall header so I've added 16px for clearance -- you'll need
+ * to curate your own use case, but scroll-margin-top is super useful for this use case.
+ */
+
+.header-sticky {
+  position: relative;
+  top: 0;
+  z-index: 10;
+}
+
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .header-content-start {
+    justify-content: flex-start;
+  }
+
+  .header-content-end {
+    justify-content: flex-end;
+  }
+}
+
+</style>
+
+<script>export let isSticky = false;
+export let isSkinned = true;
+export let isHeaderContentStart = false;
+export let isHeaderContentEnd = false;
+export let css = "";
+const klasses = [
+  isSkinned ? "header" : "header-base",
+  isSticky ? "header-sticky" : "",
+  css ? `${css}` : ""
+].filter((cl) => cl.length).join(" ");
+const headerContentClasses = [
+  "header-content",
+  isHeaderContentStart ? "header-content-start" : "",
+  isHeaderContentEnd ? "header-content-end" : ""
+].filter((cl) => cl.length).join(" ");
+</script>
+
+<nav class={klasses}>
+  <div class={headerContentClasses}>
+    <slot name="logoleft" />
+    <slot />
+    <slot name="logoright" />
+  </div>
+</nav>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isSticky?: boolean;
+        isSkinned?: boolean;
+        isHeaderContentStart?: boolean;
+        isHeaderContentEnd?: boolean;
+        css?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        logoleft: {};
+        default: {};
+        logoright: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+export default class Header extends SvelteComponent<HeaderProps, HeaderEvents, HeaderSlots> {
+}
+export {};

package/dist/components/agnostic/Header/HeaderNav.svelte

@@ -0,0 +1,28 @@
+<style>
+/* Goes on the <ul> */
+.header-nav {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media (min-width: 960px) {
+  .header-nav {
+    flex-direction: row;
+  }
+}
+
+</style>
+  
+  <script>export let css = "";
+const containerClasses = [css ? `${css}` : ""].filter((c) => c.length);
+</script>
+  
+  <nav class={containerClasses}>
+    <ul class="header-nav">
+      <slot />
+    </ul>
+  </nav>
+  

package/dist/components/agnostic/Header/HeaderNav.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        css?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type HeaderNavProps = typeof __propDef.props;
+export type HeaderNavEvents = typeof __propDef.events;
+export type HeaderNavSlots = typeof __propDef.slots;
+export default class HeaderNav extends SvelteComponent<HeaderNavProps, HeaderNavEvents, HeaderNavSlots> {
+}
+export {};

package/dist/components/agnostic/Header/HeaderNavItem.svelte

@@ -0,0 +1,30 @@
+<style>
+.header-nav-item {
+  display: inline-block;
+}
+
+.header-nav-item:not(:last-child) {
+  margin-inline-end: initial;
+  margin-block-end: var(--fluid-8);
+}
+
+.header-nav-item :global(a) {
+  color: var(--functional-header-color, var(--functional-font-color));
+}
+
+@media (min-width: 960px) {
+  .header-nav-item:not(:last-child) {
+    margin-inline-end: var(--functional-header-nav-spacing, var(--fluid-32));
+    margin-block-end: initial;
+  }
+}
+
+</style>
+
+<script>export let css = "";
+let klasses = ["header-nav-item", css ? `${css}` : ""].filter((cl) => cl && cl.length).join(" ");
+</script>
+
+<li class={klasses}>
+  <slot />
+</li>

package/dist/components/agnostic/Header/HeaderNavItem.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        css?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type HeaderNavItemProps = typeof __propDef.props;
+export type HeaderNavItemEvents = typeof __propDef.events;
+export type HeaderNavItemSlots = typeof __propDef.slots;
+export default class HeaderNavItem extends SvelteComponent<HeaderNavItemProps, HeaderNavItemEvents, HeaderNavItemSlots> {
+}
+export {};