@functionalcms/svelte-components 3.5.20 → 4.0.0-pre

package/dist/components/form/Select.svelte

@@ -1,157 +0,0 @@
-<style>
-.select,
-.select-base {
-  display: block;
-  width: 100%;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-appearance: none;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.select,
-.select-skin {
-  padding: var(--fluid-6) var(--fluid-32) var(--fluid-6) var(--fluid-12);
-  -moz-padding-start: calc(var(--fluid-12) - 3px);
-  font-size: var(--fluid-16);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--functional-dark);
-  border: 1px solid var(--functional-select-border-color, var(--functional-gray-light));
-  border-radius: var(--functional-radius);
-  transition:
-    border-color var(--functional-timing-fast) ease-in-out,
-    box-shadow var(--functional-timing-fast) ease-in-out;
-}
-
-/* Only shows the down arrow SVG if in single mode */
-.select:not([multiple]) {
-  background-color: inherit;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333330' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right var(--fluid-12) center;
-  background-size: var(--fluid-16) var(--fluid-12);
-}
-
-.select:focus {
-  border-color: var(--functional-focus-ring-color);
-  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;
-}
-
-.select-base,
-.select:disabled {
-  background-color: var(--functional-disabled-bg);
-}
-
-.select-base,
-.select:-moz-focusring {
-  color: transparent;
-  text-shadow: 0 0 0 var(--functional-dark);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .select,
-  .select-base,
-  .select:focus {
-    transition: none;
-  }
-}
-
-.select-small {
-  padding-top: var(--fluid-4);
-  padding-bottom: var(--fluid-4);
-  padding-left: var(--fluid-8);
-  font-size: var(--fluid-14);
-}
-
-.select-large {
-  padding-top: var(--fluid-8);
-  padding-bottom: var(--fluid-8);
-  padding-left: var(--fluid-16);
-  font-size: var(--fluid-18);
-}
-
-</style>
-
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-
-  export let uniqueId = "";
-  export let name = "";
-  export let labelCopy = "";
-  export let options = [];
-  export let size: "small" | "large" | "" = "";
-  export let multipleSize = 1;
-  export let isMultiple = false;
-  export let defaultOptionLabel = "Please select an option";
-  export let isDisabled = false;
-  export let isSkinned = true;
-  export let css = "";
-
-  // singleSelected can be used for two-way bindings
-  export let singleSelected = "";
-
-  // If we don't make it seems Svelte gets confused:
-  // https://github.com/sveltejs/svelte/issues/5644
-  // And so we cannot share singleSelected above :(
-  export let multiSelected = [];
-
-  const dispatch = createEventDispatcher();
-  // This will emit an event object that has a event.detail prop
-  // This will contain the value of the selected option value. See
-  // https://svelte.dev/docs#createEventDispatcher
-  const changeHandler = () => {
-    dispatch("selected", isMultiple ? multiSelected : singleSelected);
-  };
-
-  $: disable = isDisabled;
-  $: classes = [
-    isSkinned ? "select" : "select-base",
-    size ? `select-${size}` : "",
-    css ? `${css}` : "",
-  ]
-    .filter((cl) => cl)
-    .join(" ");
-
-</script>
-
-<label class="screenreader-only" for={uniqueId}> {labelCopy} </label>
-{#if isMultiple}
-  <select
-    id={uniqueId}
-    class={classes}
-    name={name}
-    disabled={disable}
-    multiple
-    size={multipleSize}
-    bind:value={multiSelected}
-    on:change={changeHandler}
-  >
-    {#each options as { value, label }}
-      <option value={value}>{label}</option>
-    {/each}
-  </select>
-{:else}
-  <select
-    id={uniqueId}
-    class={classes}
-    name={name}
-    disabled={disable}
-    bind:value={singleSelected}
-    on:change={changeHandler}
-  >
-    <option value="" disabled selected>
-      {defaultOptionLabel}
-    </option>
-    {#each options as { value, label }}
-      <option value={value}>{label}</option>
-    {/each}
-  </select>
-{/if}

package/dist/components/form/Select.svelte.d.ts

@@ -1,34 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    uniqueId?: string;
-    name?: string;
-    labelCopy?: string;
-    options?: any[];
-    size?: "small" | "large" | "";
-    multipleSize?: number;
-    isMultiple?: boolean;
-    defaultOptionLabel?: string;
-    isDisabled?: boolean;
-    isSkinned?: boolean;
-    css?: string;
-    singleSelected?: string;
-    multiSelected?: any[];
-}, {
-    selected: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Select = InstanceType<typeof Select>;
-export default Select;

package/dist/components/form/Switch.svelte

@@ -1,275 +0,0 @@
-<style>
-/**
- * Switch
- *
- * This switch is inspired by Scott Ohara's checkbox switch:
- * https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
- */
-.switch-container {
-  display: block;
-
-  /* TODO: Hopefully this doesn't become a problem but since we use absolute
-  positioning extensively, we need some way to have adjacent spaced lines */
-  min-height: 2.25rem;
-  width: 100%;
-  padding: 0.5rem;
-  position: relative;
-}
-
-.switch-container:hover {
-  cursor: pointer;
-}
-
-/* using the before/after pseudo elements of the span to create the "switch" */
-.switch::before,
-.switch::after {
-  border: 1px solid var(--functional-gray-mid-dark);
-  content: "";
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* styling specific to the knob of the switch */
-.switch::after {
-  background: #fff;
-  border-radius: 100%;
-  width: 1.4rem;
-  height: 1.4rem;
-  right: 1.4rem;
-  transition: right var(--functional-timing-fast) ease-in-out;
-}
-
-/* styling specific to the knob "container" */
-.switch::before {
-  background: #eee;
-  border-radius: 1.75rem;
-  width: 2.75rem;
-  height: 1.75rem;
-  right: 0.25rem;
-  transition: background var(--functional-timing-medium) ease-in-out;
-}
-
-/* Sizes */
-.switch-small::after {
-  width: 1.25rem;
-  height: 1.25rem;
-  right: 1.125rem;
-}
-
-.switch-small::before {
-  width: 2.25rem;
-  height: 1.5rem;
-}
-
-.switch-large::after {
-  width: 1.65rem;
-  height: 1.65rem;
-  right: 1.65rem;
-}
-
-.switch-large::before {
-  width: 3.25rem;
-  height: 2rem;
-}
-
-.switch-border::before {
-  border: 1px solid var(--functional-primary);
-}
-
-.switch-action.switch-border::before {
-  border: 1px solid var(--functional-action);
-}
-
-/* Switch label on right */
-
-/* We have to flip the positioning when the label is on the right of switch */
-.switch-right .switch::before {
-  right: initial;
-  left: 0.25rem;
-}
-
-.switch-right .switch::after {
-  right: initial;
-  left: 1.4rem;
-}
-
-/* Switch sizes w/label on right -- I expect SMACSS so .switch .switch-small
-classes should both exist so the right: initial was taken care of above :) */
-.switch-right .switch-small::after {
-  left: 1.125rem;
-}
-
-.switch-right .switch-large::after {
-  left: 1.65rem;
-}
-
-/* ---- CHECKED STATE ----- */
-
-/* change the position of the knob to indicate it has been checked */
-
-.switch-input:checked + .switch-small::after {
-  right: 0.425rem;
-}
-
-.switch-input:checked + .switch::after {
-  right: 0.5em;
-}
-
-.switch-right .switch-label {
-  position: absolute;
-  right: 0;
-
-  /* Flips transition target to left to preserve our smooth transitions */
-  transition: left var(--functional-timing-fast) ease-in-out;
-}
-
-.switch-right .switch-input:checked + .switch::after {
-  right: initial;
-  left: 0.5em;
-}
-
-.switch-right .switch-input:checked + .switch-small::after {
-  right: initial;
-  left: 0.425rem;
-}
-
-/* From: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/
-  hide the actual checkbox from view, but not from keyboards or ATs.
-  Instead of standard visually hidden styling, instead set opacity to
-  almost 0 (not zero for ChomeVox legacy bug), pointer-events none, and
-  then set to full height/width of container element so that VO focus
-  ring outlines the component, instead of a tiny box within the component
-*/
-.switch-input {
-  margin: 0;
-  opacity: 0.01%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.switch-input:focus + .switch::before {
-  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
-}
-
-/* update the color of the "container" to further visually indicate state */
-.switch-input:checked + .switch:not(.switch-border)::before {
-  background: var(--functional-primary);
-}
-
-.switch-input:checked + .switch-action:not(.switch-border)::before {
-  background: var(--functional-action);
-}
-
-/* Border switch on checked the thumb gets primary or action bg respectively */
-.switch-input:checked + .switch-border::after {
-  background: var(--functional-primary);
-}
-
-.switch-input:checked + .switch-action.switch-border::after {
-  background: var(--functional-action);
-}
-
-/* Disabled aka :disabled is not actually supported for <label>
-element so we use attribute selector for that:
-https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled#:~:text=The%20disabled%20attribute%20is%20supported,control%20or%20its%20descendant%20controls.
-*/
-.switch-input[disabled] + .switch,
-.switch-input[disabled] + .switch-label,
-.switch-container.disabled {
-  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) {
-  .switch::after {
-    background-color: windowText;
-  }
-
-  /* High contrast mode outline hacks */
-  .switch-input[disabled] + .switch-label,
-  .switch-container.disabled {
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-  }
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .switch::after,
-  .switch::before {
-    transition-duration: 0.001ms !important;
-  }
-}
-
-</style>
-
-<script lang="ts">
-  export let id = "";
-  export let label = "";
-  export let css = "";
-  export let labelPosition = "left";
-  export let size = "";
-  export let isChecked = false;
-  export let isBordered = false;
-  export let isAction = false;
-  export let isDisabled = false;
-
-  $: switchContainer = [
-      "switch-container",
-      labelPosition === "right" ? "switch-right" : "",
-      css ? css : "",
-      isDisabled ? "disabled" : "",
-    ].filter(c => c).join(" ");
-  
-  const switchSpan = () => {
-    let klasses = [
-      "switch",
-      isBordered ? "switch-border" : "",
-      isAction ? "switch-action" : "",
-      size ? `switch-${size}` : "",
-    ];
-    klasses = klasses.filter((klass) => klass.length);
-    return klasses.join(" ");
-  };
-  const handleClick = (evt) => {
-    const el = evt.target;
-    if (el.getAttribute("aria-checked") == "true") {
-      el.setAttribute("aria-checked", "false");
-    } else {
-      el.setAttribute("aria-checked", "true");
-    }
-  };
-  const handleKeypress = (evt) => {
-    const keyCode = evt.keyCode || evt.which;
-    switch (keyCode) {
-      case 13:
-        evt.preventDefault();
-        evt.target.click();
-        break;
-    }
-  };
-</script>
-
-<label class={switchContainer} for={id}>
-  {#if labelPosition === "left"}<span class="switch-label">{label}</span>{/if}
-  <input
-    type="checkbox"
-    class="switch-input"
-    id={id}
-    bind:checked={isChecked}
-    disabled={isDisabled}
-    on:change
-    on:click={handleClick}
-    on:keypress={handleKeypress}
-    role="switch"
-  />
-  <span class={switchSpan()} aria-hidden="true"></span>
-  {#if labelPosition === "right"}<span class="switch-label">{label}</span>{/if}
-</label>

package/dist/components/form/Switch.svelte.d.ts

@@ -1,30 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Switch: $$__sveltets_2_IsomorphicComponent<{
-    id?: string;
-    label?: string;
-    css?: string;
-    labelPosition?: string;
-    size?: string;
-    isChecked?: boolean;
-    isBordered?: boolean;
-    isAction?: boolean;
-    isDisabled?: boolean;
-}, {
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Switch = InstanceType<typeof Switch>;
-export default Switch;