@onsvisual/svelte-components 1.1.58 → 1.1.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -42,7 +42,7 @@
42
42
  export let small = false;
43
43
  /**
44
44
  * Icon on button, eg. "arrow", "search"
45
- * @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"copy"|"cross"|"delete"|"download"|"edit"|"expand"|"external"|"minus"|"pin"|"plus"|"print"|"save"|"saveas"|"search"|"shrink"|"signout"|"tick"|"upload"|null}
45
+ * @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"copy"|"cross"|"delete"|"download"|"edit"|"edit-text"|"expand"|"external"|"minus"|"pin"|"plus"|"print"|"save"|"saveas"|"search"|"shrink"|"signout"|"tick"|"upload"|null}
46
46
  */
47
47
  export let icon = null;
48
48
  /**
@@ -10,7 +10,7 @@ export default class Button extends SvelteComponentTyped<{
10
10
  variant?: "primary" | "secondary" | "ghost" | undefined;
11
11
  rel?: string | null | undefined;
12
12
  noScroll?: boolean | undefined;
13
- icon?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | null | undefined;
13
+ icon?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "edit-text" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | null | undefined;
14
14
  iconPosition?: "before" | "after" | undefined;
15
15
  iconRotation?: number | undefined;
16
16
  disabled?: boolean | undefined;
@@ -40,7 +40,7 @@ declare const __propDef: {
40
40
  variant?: "primary" | "secondary" | "ghost" | undefined;
41
41
  rel?: string | null | undefined;
42
42
  noScroll?: boolean | undefined;
43
- icon?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | null | undefined;
43
+ icon?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "edit-text" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | null | undefined;
44
44
  iconPosition?: "before" | "after" | undefined;
45
45
  iconRotation?: number | undefined;
46
46
  disabled?: boolean | undefined;
@@ -56,11 +56,22 @@
56
56
  </script>
57
57
 
58
58
  <div class="ons-field {cls}">
59
- {#if label}<label class="ons-label" for={id} class:ons-u-vh={hideLabel}>{label}</label>{/if}
60
- {#if description}<span
61
- id="description-hint"
62
- class="ons-label__description ons-input--with-description">{description}</span
63
- >{/if}
59
+ {#if label}
60
+ <label
61
+ class="ons-label"
62
+ class:ons-label--with-description={description}
63
+ class:ons-u-vh={hideLabel}
64
+ aria-describedby={description ? `${id}-description-hint` : null}
65
+ for={id}
66
+ >
67
+ {label}
68
+ </label>
69
+ {/if}
70
+ {#if description}
71
+ <span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
72
+ {description}
73
+ </span>
74
+ {/if}
64
75
  <select
65
76
  {id}
66
77
  {name}
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  /**
3
3
  * Set the type of icon
4
- * @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"copy"|"cross"|"delete"|"download"|"edit"|"expand"|"external"|"minus"|"pin"|"plus"|"print"|"save"|"saveas"|"search"|"shrink"|"signout"|"tick"|"upload"}
4
+ * @type {"arrow"|"carret"|"chevron"|"code"|"cog"|"copy"|"cross"|"delete"|"download"|"edit"|"edit-text"|"expand"|"external"|"minus"|"pin"|"plus"|"print"|"save"|"saveas"|"search"|"shrink"|"signout"|"tick"|"upload"}
5
5
  */
6
6
  export let type = "arrow";
7
7
  /**
@@ -76,6 +76,10 @@
76
76
  d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z",
77
77
  viewBox: "4 4 16 16"
78
78
  },
79
+ "edit-text": {
80
+ d: "M14.25,9h-4v6h4c.55,0,1-.45,1-1v-1c0-.55-.45-1-1-1,.55,0,1-.45,1-1v-1c0-.55-.45-1-1-1ZM13.75,13.5h-2v-.75h2v.75ZM13.75,11.25h-2v-.75h2v.75ZM7.75,9h-3c-.55,0-1,.45-1,1v5h1.5v-1.5h2v1.5h1.5v-5c0-.55-.45-1-1-1ZM7.25,12h-2v-1.5h2v1.5ZM18.57,8.22v7.57h1.68v1.5h-2.05v-.5h-.75v.5h-2.06v-1.5h1.68v-7.57h-1.68v-1.5h2.06v.5h.75v-.5h2.05v1.5h-1.68Z",
81
+ viewBox: "5 5 14 14"
82
+ },
79
83
  expand: {
80
84
  d: "M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z",
81
85
  viewBox: "4 4 16 16"
@@ -2,7 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} IconEvents */
3
3
  /** @typedef {typeof __propDef.slots} IconSlots */
4
4
  export default class Icon extends SvelteComponentTyped<{
5
- type?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | undefined;
5
+ type?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "edit-text" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | undefined;
6
6
  size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
7
7
  rotation?: number | undefined;
8
8
  svgPath?: string | null | undefined;
@@ -19,7 +19,7 @@ export type IconSlots = typeof __propDef.slots;
19
19
  import { SvelteComponentTyped } from "svelte";
20
20
  declare const __propDef: {
21
21
  props: {
22
- type?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | undefined;
22
+ type?: "code" | "search" | "copy" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "delete" | "download" | "edit" | "edit-text" | "expand" | "external" | "minus" | "pin" | "plus" | "print" | "save" | "saveas" | "shrink" | "signout" | "tick" | "upload" | undefined;
23
23
  size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
24
24
  rotation?: number | undefined;
25
25
  svgPath?: string | null | undefined;
@@ -221,11 +221,22 @@
221
221
  {/if}
222
222
  {:else}
223
223
  <div class="ons-field {cls}">
224
- {#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
225
- {#if description}<span
226
- id="description-hint"
227
- class="ons-label__description ons-input--with-description">{description}</span
228
- >{/if}
224
+ {#if label}
225
+ <label
226
+ class="ons-label"
227
+ class:ons-label--with-description={description}
228
+ class:ons-u-vh={hideLabel}
229
+ aria-describedby={description ? `${id}-description-hint` : null}
230
+ for={id}
231
+ >
232
+ {label}
233
+ </label>
234
+ {/if}
235
+ {#if description}
236
+ <span id="{id}-description-hint" class="ons-label__description ons-input--with-description">
237
+ {description}
238
+ </span>
239
+ {/if}
229
240
  <div class="ons-autocomplete-wrapper">
230
241
  {#if mounted}
231
242
  <div
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "1.1.58",
3
+ "version": "1.1.60",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "npm run build:package && npm run build:docs",