@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Icon/Icon.svelte

@@ -0,0 +1,180 @@
+<style>
+.icon-base {
+  display: inline-flex;
+  text-align: center;
+
+  /* Ensures no "stretching" of icons to reach 100% of container's width */
+  max-width: 100%;
+
+  /* Ensure SVGs don't have click events -- typically we want enclosing button to handle */
+  pointer-events: none;
+  user-select: none;
+}
+
+/* We need to make both the span and svg same height (span .icon-svg) */
+.icon,
+.icon-skin {
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+}
+
+.icon-14 {
+  width: var(--fluid-14);
+  height: var(--fluid-14);
+}
+
+.icon-16 {
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+}
+
+.icon-18 {
+  width: var(--fluid-18);
+  height: var(--fluid-18);
+}
+
+.icon-20 {
+  width: var(--fluid-20);
+  height: var(--fluid-20);
+}
+
+.icon-24,
+.icon-svg-24 {
+  width: var(--fluid-24);
+  height: var(--fluid-24);
+}
+
+.icon-32 {
+  width: var(--fluid-32);
+  height: var(--fluid-32);
+}
+
+.icon-36 {
+  width: var(--fluid-36);
+  height: var(--fluid-36);
+}
+
+.icon-40 {
+  width: var(--fluid-40);
+  height: var(--fluid-40);
+}
+
+.icon-48 {
+  width: var(--fluid-48);
+  height: var(--fluid-48);
+}
+
+.icon-56 {
+  width: var(--fluid-56);
+  height: var(--fluid-56);
+}
+
+.icon-64 {
+  width: var(--fluid-64);
+  height: var(--fluid-64);
+}
+
+:global(.icon-svg) {
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+  fill: currentColor;
+}
+
+:global(.icon-svg-14) {
+  width: var(--fluid-14);
+  height: var(--fluid-14);
+}
+
+:global(.icon-svg-16) {
+  width: var(--fluid-16);
+  height: var(--fluid-16);
+}
+
+:global(.icon-svg-18) {
+  width: var(--fluid-18);
+  height: var(--fluid-18);
+}
+
+:global(.icon-svg-20) {
+  width: var(--fluid-20);
+  height: var(--fluid-20);
+}
+
+:global(.icon-svg-24) {
+  width: var(--fluid-24);
+  height: var(--fluid-24);
+}
+
+:global(.icon-svg-32) {
+  width: var(--fluid-32);
+  height: var(--fluid-32);
+}
+
+:global(.icon-svg-36) {
+  width: var(--fluid-36);
+  height: var(--fluid-36);
+}
+
+:global(.icon-svg-40) {
+  width: var(--fluid-40);
+  height: var(--fluid-40);
+}
+
+:global(.icon-svg-48) {
+  width: var(--fluid-48);
+  height: var(--fluid-48);
+}
+
+:global(.icon-svg-56) {
+  width: var(--fluid-56);
+  height: var(--fluid-56);
+}
+
+:global(.icon-svg-64) {
+  width: var(--fluid-64);
+  height: var(--fluid-64);
+}
+
+:global(.icon-svg-info) {
+  color: var(--functional-primary);
+}
+
+:global(.icon-svg-action),
+:global(.icon-svg-success) {
+  color: var(--functional-action);
+}
+
+:global(.icon-svg-warning) {
+  color: var(--functional-warning-border-accent);
+}
+
+:global(.icon-svg-error) {
+  color: var(--functional-error);
+}
+</style>
+
+<script>import { onMount } from "svelte";
+export let type = "";
+export let size = 14;
+export let isSkinned = true;
+let spanRef;
+const iconClasses = [
+  "screenreader-only",
+  isSkinned ? "icon" : "icon-base",
+  type ? `icon-${type}` : "",
+  size ? `icon-${size}` : ""
+].filter((cls) => cls).join(" ");
+onMount(() => {
+  const svg = spanRef.querySelector("svg");
+  svg.classList.add("icon-svg");
+  if (svg) {
+    if (size) svg.classList.add(`icon-svg-${size}`);
+    if (type) svg.classList.add(`icon-svg-${type}`);
+    spanRef.classList.remove("screenreader-only");
+  }
+});
+</script>
+
+<span bind:this={spanRef} class={iconClasses}>
+  <slot />
+</span>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { IconSize, IconType } from './api';
+declare const __propDef: {
+    props: {
+        type?: IconType;
+        size?: IconSize;
+        isSkinned?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+export default class Icon extends SvelteComponent<IconProps, IconEvents, IconSlots> {
+}
+export {};

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

@@ -0,0 +1,2 @@
+export type IconSize = 14 | 16 | 18 | 20 | 24 | 32 | 36 | 40 | 48 | 56 | 64;
+export type IconType = "warning" | "error" | "info" | "success" | "";

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

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

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>
+