@functionalcms/svelte-components 2.33.1 → 2.34.1

package/dist/components/agnostic/Input/Input.svelte

@@ -0,0 +1,415 @@
+<style>
+.input-base,
+.input {
+  /* Note this cannot be user-select: none else mobile safari won't accept input:
+  https://stackoverflow.com/questions/49889003/cannot-write-into-input-field-on-safari/49901069
+   */
+  user-select: initial;
+  appearance: none;
+  box-sizing: border-box;
+
+  /* Use the same color for the cursor */
+  caret-color: currentColor;
+}
+
+.label,
+.label-base {
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+/* Electing to scope these as opposed to doing :root level definitions */
+.field-help,
+.field-help-large,
+.field-help-small,
+.field-error,
+.field-error-large,
+.field-error-small,
+.label-skin,
+.label,
+.input-addon-container,
+.input-small,
+.input-large,
+.input-skin,
+.input-underlined,
+.input-underlined-bg,
+.input {
+  color: var(--functional-font-color, var(--functional-dark));
+  font-family: var(--functional-font-family-body);
+  font-weight: var(--functional-font-weight, 300);
+  font-size: var(--functional-font-size, 1rem);
+  line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
+  width: 100%;
+  max-width: 100%;
+}
+
+.input-skin,
+.input {
+  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
+  border-style: solid;
+
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  border-width: var(--functional-input-border-size, 1px);
+  border-color: var(--functional-input-border-color, var(--functional-gray-light));
+
+  /* these can be overriden, but it might mess with the balance of the inputheights across variants */
+  padding-block-start: var(--functional-input-vertical-pad, 0.5rem);
+  padding-block-end: var(--functional-input-vertical-pad, 0.5rem);
+  padding-inline-start: var(--functional-input-side-padding, 0.75rem);
+  padding-inline-end: var(--functional-input-side-padding, 0.75rem);
+
+  /* Note we only want to set properties that we actually want
+  to transition in. For example, if we transition "all", the
+  inputs will "grow in" on page load—not a happy effect :) */
+  transition-property: box-shadow;
+  transition-duration: var(--functional-input-timing, var(--functional-timing-medium));
+}
+
+.label {
+  display: inline-block;
+
+  /* Provided --functional-input-vertical-pad isn't overriden we'll get 20px
+  label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
+  margin-block-start: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-block-end: var(--functional-input-label-pad, 0.375rem);
+  vertical-align: initial;
+}
+
+/* Reset field errors and help text to be 2px less then input font size */
+.field-help,
+.field-error {
+  font-size: calc(var(--functional-font-size, 1rem) - 2px);
+}
+
+.label-inline,
+.input-inline {
+  width: auto;
+}
+
+/* When inlined, the margin-block-end will throw the label off-center with adjacent input */
+.label-inline {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: var(--functional-input-side-padding, 0.75rem);
+}
+
+/**
+* Placeholder
+*/
+
+/* stylelint-disable-next-line */
+.input::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 50%;
+  transition: opacity var(--functional-timing-fast) ease-out;
+}
+
+/* stylelint-disable-next-line */
+.input::placeholder {
+  color: currentColor;
+  opacity: 50%;
+  transition: opacity var(--functional-timing-fast) ease-out;
+}
+
+/* stylelint-disable-next-line */
+.input::-ms-placeholder {
+  color: currentColor;
+  opacity: 50%;
+  transition: opacity var(--functional-timing-fast) ease-out;
+}
+
+/* stylelint-disable-next-line */
+.input:-ms-placeholder {
+  color: currentColor;
+  opacity: 50%;
+  transition: opacity var(--functional-timing-fast) ease-out;
+}
+
+/**
+* Underlined inputs
+*/
+.input-underlined {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-color: var(--functional-input-underlined-color, var(--functional-gray-mid-dark));
+  background-color: transparent;
+}
+
+.input-underlined-bg {
+  background-color: var(--functional-input-underlined-bg-color, var(--functional-gray-extra-light));
+}
+
+/**
+* Rounded inputs
+*/
+.input-rounded {
+  border-radius: var(--functional-radius, 0.25rem);
+}
+
+/**
+ * Errors
+ * We provide a class-based approach to setting errors which means we do
+ * not support :invalid, so it requires custom use of html4 validation API
+ * (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
+ * of the example in corresponding input.html file). The reason I elected to
+ * not include :invalid, is it seems to result in "shouting" at the user as
+ * I did not find an easy way to only kick in errors after a certain number
+ * of characters have been type (blur is actually better but I did not
+ * implement that in the contrived example).
+ */
+.label-error {
+  color: var(--functional-input-error-color, var(--functional-error));
+}
+
+.input-error {
+  border-color: var(--functional-input-error-color, var(--functional-error));
+}
+
+.label-error,
+.field-error,
+.field-error-small,
+.field-error-large {
+  color: var(--functional-input-error-color, var(--functional-error));
+}
+
+.field-help,
+.field-help-small,
+.field-help-large {
+  color: var(--functional-input-help-color, var(--functional-gray-dark));
+}
+
+.field-help,
+.field-help-small,
+.field-help-large,
+.field-error,
+.field-error-small,
+.field-error-large {
+  display: inline-block;
+  width: 100%;
+  margin-block-start: calc(var(--functional-input-vertical-pad, 0.5rem) / 2);
+}
+
+/**
+  * Sizes
+  */
+.input-large {
+  font-size: calc(var(--functional-font-size, 1rem) + 0.25rem);
+  line-height: 1.6rem;
+}
+
+.field-help-large,
+.field-error-large {
+  /* We initially remove -2px from font-size so setting to font-size essentially adds the 2px back */
+  font-size: var(--functional-font-size, 1rem);
+}
+
+.label-large {
+  font-size: calc(var(--functional-font-size, 1rem) + 0.25rem);
+}
+
+.input-small {
+  font-size: calc(var(--functional-font-size, 1rem) - 0.25rem);
+  line-height: 1rem;
+}
+
+.field-help-small,
+.field-error-small,
+.label-small {
+  font-size: calc(var(--functional-font-size, 1rem) - 0.25rem);
+}
+
+.input: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;
+}
+
+/* Set the focus to transparent when there's an error since we use
+borders that visually conflict. */
+.input-error:focus {
+  box-shadow: 0 0 0 3px transparent;
+}
+
+/*
+* Disabled State
+*
+* The disabled state uses the class .disabled,
+* and the form attribute disabled="disabled".
+* The use of !important is only added because this is a state
+* that must be applied to all inputs when in a disabled state.
+*/
+.input.disabled, /* DEPRECATED -- TODO remove class based disabled */
+.input:disabled {
+  background: var(--functional-input-disabled-bg, var(--functional-disabled-bg)) !important;
+  color: var(--functional-input-disabled-color, var(--functional-disabled-color)) !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  cursor: not-allowed !important;
+  opacity: 80% !important;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  /* High contrast mode outline hacks */
+
+  /* styleint-disable-next-line no-descending-specificity  */
+  .input:disabled {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+}
+
+/**
+ * Input "has addon"
+ */
+
+.input-addon-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+}
+
+.input-has-left-addon {
+  padding-left: calc(var(--functional-side-padding) * 3);
+}
+
+.input-has-right-addon {
+  padding-right: calc(var(--functional-side-padding) * 3);
+}
+
+.input-addon-left {
+  left: var(--functional-input-side-padding);
+}
+
+.input-addon-right {
+  right: var(--functional-input-side-padding);
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  /* stylelint-disable selector-no-vendor-prefix */
+  .input-skin,
+  .input,
+  .input::placeholder,
+  .input::-webkit-input-placeholder,
+  .input::-ms-placeholder,
+  .input:-ms-placeholder,
+  .input:focus {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+<script>export let label = "";
+export let id = "";
+export let labelCss = "";
+export let isLabelHidden = false;
+export let helpText = "";
+export let invalidText = "";
+export let hasLeftAddon = false;
+export let hasRightAddon = false;
+export let isInvalid = false;
+export let isInline = false;
+export let isRounded = false;
+export let isDisabled = void 0;
+export let css = "";
+export let isSkinned = true;
+export let isUnderlinedWithBackground = false;
+export let isUnderlined = false;
+export let size = "";
+export let type = "text";
+export let value = "";
+$: if (!value) value = "";
+$: inputType = type;
+$: labelClasses = [
+  "label",
+  isInvalid ? "label-error" : "",
+  isInline ? "label-inline" : "",
+  size ? `label-${size}` : "",
+  isLabelHidden ? "screenreader-only" : "",
+  labelCss ? labelCss : ""
+].filter((c) => c).join(" ");
+$: inputClasses = [
+  isSkinned ? "input" : "input-base",
+  isRounded ? "input-rounded" : "",
+  isUnderlined ? "input-underlined" : "",
+  hasLeftAddon ? "input-has-left-addon" : "",
+  hasRightAddon ? "input-has-right-addon" : "",
+  isDisabled ? "disabled" : "",
+  isInvalid ? "input-error" : "",
+  isInline ? "input-inline" : "",
+  isUnderlinedWithBackground ? "input-underlined-bg" : "",
+  css ? css : "",
+  size ? `input-${size}` : ""
+].filter((c) => c).join(" ");
+$: invalidClasses = () => {
+  return size ? `field-error-${size}` : "field-error";
+};
+$: helpClasses = () => {
+  return size ? `field-help-${size}` : "field-help";
+};
+$: addonContainerClasses = () => "input-addon-container";
+const handleInput = (e) => {
+  value = e.target.value;
+};
+</script>
+<div class="w-100">
+  <label class={labelClasses} for={id}>{label}</label>
+  {#if type == "textarea"}
+    <textarea
+      id={id}
+      class={inputClasses}
+      on:blur
+      on:change
+      bind:value
+      on:click
+      on:focus
+      {...$$restProps}></textarea>
+  {:else if hasLeftAddon || hasRightAddon}
+    <div class={addonContainerClasses()}>
+      <slot name="addonLeft" />
+      <input
+        id={id}
+        type={inputType}
+        value={value}
+        class={inputClasses}
+        disabled={isDisabled}
+        on:blur
+        on:change
+        on:input={handleInput}
+        on:click
+        on:focus
+        {...$$restProps}
+      />
+      <slot name="addonRight" />
+    </div>
+  {:else}
+    <input
+      id={id}
+      type={inputType}
+      value={value}
+      class={inputClasses}
+      disabled={isDisabled}
+      on:blur
+      on:change
+      on:input={handleInput}
+      on:click
+      on:focus
+      {...$$restProps}
+    />
+  {/if}
+  {#if isInvalid}
+    <span role="status" aria-live="polite" class={invalidClasses()}>
+      {invalidText}
+    </span>
+  {:else if helpText}<span class={helpClasses()}>{helpText}</span>{/if}
+</div>

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

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        label?: string | undefined;
+        id?: string | undefined;
+        labelCss?: string | undefined;
+        isLabelHidden?: boolean | undefined;
+        helpText?: string | undefined;
+        invalidText?: string | undefined;
+        hasLeftAddon?: boolean | undefined;
+        hasRightAddon?: boolean | undefined;
+        isInvalid?: boolean | undefined;
+        isInline?: boolean | undefined;
+        isRounded?: boolean | undefined;
+        isDisabled?: undefined;
+        css?: string | undefined;
+        isSkinned?: boolean | undefined;
+        isUnderlinedWithBackground?: boolean | undefined;
+        isUnderlined?: boolean | undefined;
+        size?: ("small" | "large" | "") | undefined;
+        type?: ("text" | "textarea" | "email" | "search" | "password" | "tel" | "number" | "url" | "month" | "time" | "week" | "date" | "datetime-local" | "color") | undefined;
+        value?: string | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        change: Event;
+        click: MouseEvent;
+        focus: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        addonLeft: {};
+        addonRight: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type InputProps = typeof __propDef.props;
+export type InputEvents = typeof __propDef.events;
+export type InputSlots = typeof __propDef.slots;
+export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
+}
+export {};

package/dist/components/agnostic/Input/InputAddonItem.svelte

@@ -0,0 +1,42 @@
+<style>
+/*
+* Input addons e.g. icons inside the input
+*/
+.input-addon-right,
+.input-addon-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+
+  /* This allows an icon to sit in the vertical center regardless
+  of if we've applied input-large or input-small */
+  min-height: 100%;
+}
+
+.input-addon-left {
+  left: var(--functional-input-side-padding);
+}
+
+.input-addon-right {
+  right: var(--functional-input-side-padding);
+}
+
+</style>
+  
+  <script>
+    export let css = "";
+    export let addonLeft = false;
+    export let addonRight = false;
+    $: klasses = [
+      addonLeft ? "input-addon-left" : "",
+      addonRight ? "input-addon-right" : "",
+      css ? `${css}` : "",
+    ].filter(c => c).join(" ");
+  </script>
+  
+  <div class={klasses}>
+    <slot />
+  </div>
+  

package/dist/components/agnostic/Input/InputAddonItem.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  InputAddonItemProps */
+/** @typedef {typeof __propDef.events}  InputAddonItemEvents */
+/** @typedef {typeof __propDef.slots}  InputAddonItemSlots */
+export default class InputAddonItem extends SvelteComponent<{
+    css?: string | undefined;
+    addonLeft?: boolean | undefined;
+    addonRight?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type InputAddonItemProps = typeof __propDef.props;
+export type InputAddonItemEvents = typeof __propDef.events;
+export type InputAddonItemSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        css?: string | undefined;
+        addonLeft?: boolean | undefined;
+        addonRight?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/agnostic/Loader/Loader.svelte

@@ -0,0 +1,113 @@
+<style>
+.loader {
+  --loading-color: var(--functional-loading-color, var(--functional-dark));
+  --loading-size: var(--fluid-16);
+  --loading-size-small: var(--fluid-12);
+  --loading-size-large: var(--fluid-18);
+
+  position: relative;
+  box-sizing: border-box;
+  animation: blink 1s infinite;
+  animation-delay: 250ms;
+
+  /* Make up for negative positioning */
+  margin-left: var(--loading-size);
+
+  /* Initially set zero until aria-busy becomes true */
+  opacity: 0%;
+}
+
+.loader,
+.loader::before,
+.loader::after {
+  width: calc(var(--loading-size) / 2);
+  height: calc(var(--loading-size) / 2);
+  border-radius: var(--fluid-6);
+  background-color: var(--loading-color);
+}
+
+/* SMALL */
+.loader-small,
+.loader-small::before,
+.loader-small::after {
+  width: calc(var(--loading-size-small) / 2);
+  height: calc(var(--loading-size-small) / 2);
+}
+
+/* LARGE */
+.loader-large,
+.loader-large::before,
+.loader-large::after {
+  width: calc(var(--loading-size-large) / 2);
+  height: calc(var(--loading-size-large) / 2);
+  border-radius: var(--fluid-8);
+}
+
+.loader::before,
+.loader::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  animation: blink 1s infinite;
+}
+
+.loader::before {
+  left: calc(-1 * var(--loading-size));
+  animation-delay: 0s;
+}
+
+.loader::after {
+  left: var(--loading-size);
+  animation-delay: 500ms;
+}
+
+/* SMALL */
+.loader-small::before {
+  left: calc(-1 * var(--loading-size-small));
+}
+
+.loader-small::after {
+  left: var(--loading-size-small);
+}
+
+/* LARGE */
+.loader-large::before {
+  left: calc(-1 * var(--loading-size-large));
+  animation-delay: 0s;
+}
+
+.loader-large::after {
+  left: var(--loading-size-large);
+}
+
+/**
+ * Setting aria-busy to true results in corresponding opacity change to visually show spinner.
+ */
+.loader[aria-busy="true"] {
+  opacity: 100%;
+}
+
+@keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .loader,
+  .loader::before,
+  .loader::after {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+<script>export let ariaLabel = "Loading\u2026";
+export let size = "";
+export let loaderClasses = ["loader", size ? `loader-${size}` : ""].filter((c) => c).join(" ");
+</script>
+
+<div class={loaderClasses} role="status" aria-live="polite" aria-busy="true">
+  <span class="screenreader-only">{ariaLabel}</span>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        ariaLabel?: string;
+        size?: "small" | "large" | "";
+        loaderClasses?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};