@onsvisual/svelte-components 0.0.8 → 0.0.9

package/dist/@types/inputs/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  CheckboxProps */
+/** @typedef {typeof __propDef.events}  CheckboxEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxSlots */
+export default class Checkbox extends SvelteComponentTyped<{
+    label: string;
+    id: string;
+    compact?: boolean;
+    variant?: "default" | "ghost";
+    disabled?: boolean;
+    description?: string;
+    group?: boolean;
+    checked?: boolean;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CheckboxProps = typeof __propDef.props;
+export type CheckboxEvents = typeof __propDef.events;
+export type CheckboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        id: string;
+        compact?: boolean;
+        variant?: "default" | "ghost";
+        disabled?: boolean;
+        description?: string;
+        group?: boolean;
+        checked?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/inputs/Checkboxes/Checkboxes.svelte.d.ts

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  CheckboxesProps */
+/** @typedef {typeof __propDef.events}  CheckboxesEvents */
+/** @typedef {typeof __propDef.slots}  CheckboxesSlots */
+export default class Checkboxes extends SvelteComponentTyped<{
+    label?: string;
+    compact?: boolean;
+    value?: any[];
+    items?: any[];
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type CheckboxesProps = typeof __propDef.props;
+export type CheckboxesEvents = typeof __propDef.events;
+export type CheckboxesSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        compact?: boolean;
+        value?: any[];
+        items?: any[];
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/inputs/ErrorPanel/ErrorPanel.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ErrorPanelProps */
+/** @typedef {typeof __propDef.events}  ErrorPanelEvents */
+/** @typedef {typeof __propDef.slots}  ErrorPanelSlots */
+export default class ErrorPanel extends SvelteComponentTyped<{
+    message?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ErrorPanelProps = typeof __propDef.props;
+export type ErrorPanelEvents = typeof __propDef.events;
+export type ErrorPanelSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        message?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/inputs/ErrorSummary/ErrorSummary.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  ErrorSummarySlots */
 export default class ErrorSummary extends SvelteComponentTyped<{
     title?: string;
+    items?: any[];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title?: string;
+        items?: any[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/@types/inputs/Radios/Radio.svelte.d.ts

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  RadioProps */
+/** @typedef {typeof __propDef.events}  RadioEvents */
+/** @typedef {typeof __propDef.slots}  RadioSlots */
+export default class Radio extends SvelteComponentTyped<{
+    label: string;
+    id: string;
+    groupId: string;
+    compact?: boolean;
+    value?: string;
+    description?: string;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RadioProps = typeof __propDef.props;
+export type RadioEvents = typeof __propDef.events;
+export type RadioSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label: string;
+        id: string;
+        groupId: string;
+        compact?: boolean;
+        value?: string;
+        description?: string;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/inputs/Radios/Radios.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  RadiosProps */
+/** @typedef {typeof __propDef.events}  RadiosEvents */
+/** @typedef {typeof __propDef.slots}  RadiosSlots */
+export default class Radios extends SvelteComponentTyped<{
+    label?: string;
+    id?: string;
+    compact?: boolean;
+    value?: string;
+    items?: any[];
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type RadiosProps = typeof __propDef.props;
+export type RadiosEvents = typeof __propDef.events;
+export type RadiosSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string;
+        id?: string;
+        compact?: boolean;
+        value?: string;
+        items?: any[];
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -0,0 +1,133 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * ID for input element
+   * @type {string}
+   */
+  export let id;
+  /**
+   * Label for input
+   * @type {string}
+   */
+  export let label;
+  /**
+   * Binding for checked state of input
+   * @type {boolean}
+   */
+  export let checked = false;
+  /**
+   * Binding for checked state of input
+   * @type {boolean}
+   */
+  export let group = null;
+  /**
+   * (Optional) Extended description for element
+   * @type {string}
+   */
+  export let description = null;
+  /**
+   * Set display mode of checkbox
+   * @type {"default"|"ghost"}
+   */
+  export let variant = "default";
+  /**
+   * Option to disable input
+   * @type {boolean}
+   */
+  export let disabled = false;
+  /**
+   * Compact mode (no border)
+   * @type {boolean}
+   */
+  export let compact = false;
+</script>
+
+<span
+  class="ons-checkboxes__item"
+  class:ons-checkboxes__item--ghost="{variant === 'ghost'}"
+  class:ons-checkboxes__item--no-border="{compact}"
+>
+  <span class="ons-checkbox" class:ons-checkbox--no-border="{compact}">
+    {#if Array.isArray(group)}
+      <input
+        type="checkbox"
+        id="{id}"
+        value="{id}"
+        bind:group="{group}"
+        class="ons-checkbox__input ons-js-checkbox"
+        disabled="{disabled}"
+        aria-disabled="{disabled}"
+        on:change="{(e) => dispatch('change', e)}"
+      />
+    {:else}
+      <input
+        type="checkbox"
+        id="{id}"
+        value="{id}"
+        bind:checked="{checked}"
+        class="ons-checkbox__input ons-js-checkbox"
+        disabled="{disabled}"
+        aria-disabled="{disabled}"
+        on:change="{(e) => dispatch('change', e)}"
+      />
+    {/if}
+    <label
+      class="ons-checkbox__label"
+      class:ons-label--with-description="{description}"
+      for="{id}"
+      id="{id}-label"
+      aria-describedby="{description ? `${id}-label-description-hint` : null}"
+    >
+      {label}
+      {#if description}
+        <span class="ons-label__aria-hidden-description" aria-hidden="true"
+          ><span class="ons-label__description ons-radio__label--with-description">
+            {description}
+          </span></span
+        >
+      {/if}
+    </label>
+    {#if description}
+      <span
+        class="ons-label__visually-hidden-description ons-u-vh"
+        id="{id}-label-description-hint"
+      >
+        {description}
+      </span>
+    {/if}
+  </span>
+</span>
+
+<style>
+  .ons-checkboxes__item {
+    display: table;
+  }
+  .ons-checkbox__input:disabled {
+    border: 2px solid var(--ons-color-border-disabled);
+  }
+  .ons-checkboxes__item label::before {
+    background: none;
+    border-color: currentColor;
+    box-shadow: 0 0 0 1px currentColor;
+  }
+  .ons-checkboxes__item--ghost label::before {
+    opacity: 60%;
+  }
+  .ons-checkboxes__item .ons-checkbox__input:focus + .ons-checkbox__label::before {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+    opacity: 100%;
+  }
+  .ons-checkboxes__item input {
+    background: none;
+    border-color: currentColor;
+  }
+  .ons-checkboxes__item input::after {
+    border-color: currentColor;
+  }
+
+  .ons-checkboxes__item--no-border .ons-checkbox__input:focus {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+  }</style>

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -0,0 +1,33 @@
+<script>
+  import Checkbox from "../Checkbox/Checkbox.svelte";
+
+  /**
+   * Label for grouped inputs
+   * @type {string}
+   */
+  export let label = "";
+  /** (Optional) Define the checkboxes as an array of {id, label, checked, description?}
+   * @type {array}
+   */
+  export let items = null;
+  /** Compact mode (no borders)
+   * @type {boolean}
+   */
+  export let compact = false;
+  /** Binding for selected checkboxes (if checkboxes are defined as "items")
+   * @type {array}
+   */
+  export let value = [];
+</script>
+
+{#if label}
+  <p class="ons-checkboxes__label">{label}</p>
+{/if}
+<div class="ons-checkboxes__items">
+  <slot />
+  {#if items}
+    {#each items as item, i}
+      <Checkbox {...item} group="{value}" compact="{compact}" on:change />
+    {/each}
+  {/if}
+</div>

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -0,0 +1,35 @@
+<script>
+  /**
+   * Set an error message
+   * @type {string}
+   */
+  export let message = "";
+</script>
+
+<div class="ons-panel ons-panel--error ons-panel--no-title" id="number-of-employees-error">
+  <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
+  <div class="ons-panel__body">
+    {#if message}
+      <p class="ons-panel__error">
+        <strong>{message}</strong>
+      </p>
+    {/if}
+    <slot />
+  </div>
+</div>
+
+<style>
+  .ons-panel {
+    color: rgb(34, 34, 34);
+  }
+  :global(.ons-panel__body a) {
+    color: #206095 !important;
+  }
+  :global(.ons-panel__body a:hover) {
+    color: rgb(0, 60, 87) !important;
+    -webkit-text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+            text-decoration: underline solid rgb(0, 60, 87) 2px !important;
+  }
+  :global(.ons-panel__body .ons-input) {
+    background: white !important;
+  }</style>

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -1,9 +1,15 @@
 <script>
+  import List from "../../layout/List/List.svelte";
+
   /**
    * Defines the title of the error
    * @type {string}
    */
   export let title = "";
+  /**
+   * Define an array of errors/issues in the format {label, href?}
+   */
+  export let items = [];
 </script>
 
 <div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
@@ -11,6 +17,19 @@
     <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
   </div>
   <div class="ons-panel__body">
+    {#if Array.isArray(items)}
+      <List mode="number">
+        {#each items as item}
+          <li>
+            {#if item.href}
+              <a href="{item.href}">{item.label}</a>
+            {:else}
+              {item.label}
+            {/if}
+          </li>
+        {/each}
+      </List>
+    {/if}
     <slot />
   </div>
 </div>

package/dist/inputs/Radios/Radio.svelte

@@ -0,0 +1,108 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Unique ID input
+   * @type {string}
+   */
+  export let id;
+  /**
+   * ID for radio group (required)
+   * @type {string}
+   */
+  export let groupId;
+  /**
+   * Label for input
+   * @type {string}
+   */
+  export let label;
+  /**
+   * Binding for ID of selected option
+   * @type {string}
+   */
+  export let value = null;
+  /**
+   * (Optional) Extended description for element
+   * @type {string}
+   */
+  export let description = null;
+  /**
+   * Compact mode (no border)
+   * @type {boolean}
+   */
+  export let compact = false;
+</script>
+
+<span class="ons-radios__item" class:ons-radios__item--no-border="{compact}">
+  <span class="ons-radio" class:ons-radio--no-border="{compact}">
+    <input
+      type="radio"
+      id="{id}"
+      bind:group="{value}"
+      value="{id}"
+      name="{groupId}"
+      class="ons-radio__input ons-js-radio"
+      on:change="{(e) => dispatch('change', e)}"
+    />
+    <label
+      class="ons-radio__label"
+      class:ons-label--with-description="{description}"
+      for="{id}"
+      id="{id}-label"
+      aria-describedby="{description ? `${id}-label-description-hint` : null}"
+    >
+      {label}
+      {#if description}
+        <span class="ons-label__aria-hidden-description" aria-hidden="true"
+          ><span class="ons-label__description ons-radio__label--with-description">
+            {description}
+          </span></span
+        >
+      {/if}
+    </label>
+    {#if description}
+      <span
+        class="ons-label__visually-hidden-description ons-u-vh"
+        id="{id}-label-description-hint"
+      >
+        {description}
+      </span>
+    {/if}
+  </span>
+</span>
+
+<style>
+  .ons-radios__item {
+    display: table;
+  }
+  .ons-radio__input {
+    border-color: currentColor !important;
+    background: none !important;
+    box-shadow: none !important;
+  }
+  .ons-radio--no-border .ons-radio__input:focus {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900 !important;
+  }
+  .ons-radio__input:checked::after {
+    border-color: currentColor;
+  }
+  .ons-radio__input::after {
+    left: 50% !important;
+    top: 50% !important;
+    margin-left: -6px !important;
+    margin-top: -6px !important;
+    /* background-color: currentColor !important;
+    border-color: currentColor !important; */
+  }
+  .ons-radio__label::before {
+    background: none;
+    border-color: currentColor;
+  }
+  .ons-radio__input:checked + .ons-radio__label::before {
+    background: var(--pale, #f5f5f6);
+  }
+  .ons-radio__input:focus + .ons-radio__label::before {
+    box-shadow: 0 0 0 1px currentColor, 0 0 0 4px #fbc900;
+  }</style>

package/dist/inputs/Radios/Radios.svelte

@@ -0,0 +1,46 @@
+<script>
+  import Radio from "./Radio.svelte";
+
+  /**
+   * Unique ID for radio group (required)
+   * @type {string}
+   */
+  export let id = "name";
+  /**
+   * Label for grouped inputs
+   * @type {string}
+   */
+  export let label = "";
+  /**
+   * Binding for ID of selected option
+   * @type {string}
+   */
+  export let value = null;
+  /** (Optional) Define the radios as an array of {id, label, description?}
+   * @type {array}
+   */
+  export let items = [];
+  /**
+   * Compact mode (no border)
+   * @type {boolean}
+   */
+  export let compact = false;
+</script>
+
+{#if label}
+  <p class="ons-radios__label">{label}</p>
+{/if}
+<div class="ons-radios__items">
+  <slot />
+  {#each items as item, i}
+    <Radio
+      id="{item.id}"
+      label="{item.label}"
+      description="{item.description}"
+      groupId="{id}"
+      compact="{compact}"
+      bind:value="{value}"
+      on:change
+    />
+  {/each}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -125,9 +125,14 @@
     "./globals.d.ts": "./dist/globals.d.ts",
     "./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
     "./inputs/Button/Icon.svelte": "./dist/inputs/Button/Icon.svelte",
+    "./inputs/Checkbox/Checkbox.svelte": "./dist/inputs/Checkbox/Checkbox.svelte",
+    "./inputs/Checkboxes/Checkboxes.svelte": "./dist/inputs/Checkboxes/Checkboxes.svelte",
     "./inputs/Dropdown/Dropdown.svelte": "./dist/inputs/Dropdown/Dropdown.svelte",
+    "./inputs/ErrorPanel/ErrorPanel.svelte": "./dist/inputs/ErrorPanel/ErrorPanel.svelte",
     "./inputs/ErrorSummary/ErrorSummary.svelte": "./dist/inputs/ErrorSummary/ErrorSummary.svelte",
     "./inputs/Input/Input.svelte": "./dist/inputs/Input/Input.svelte",
+    "./inputs/Radios/Radio.svelte": "./dist/inputs/Radios/Radio.svelte",
+    "./inputs/Radios/Radios.svelte": "./dist/inputs/Radios/Radios.svelte",
     "./inputs/Select/Select.svelte": "./dist/inputs/Select/Select.svelte",
     "./inputs/Textarea/Textarea.svelte": "./dist/inputs/Textarea/Textarea.svelte",
     "./js/docsPage": "./dist/js/docsPage.js",