@onsvisual/svelte-components 1.1.30 → 1.1.32

package/dist/components/Embed/Embed.svelte

@@ -2,6 +2,11 @@
 	import { onMount, createEventDispatcher } from "svelte";
 	import pym from "pym.js";
 
+	/**
+	 * (Optional) ID for embed
+	 * @type {string|null}
+	 */
+	export let id = null;
 	/**
 	 * Binding for pymChild element (can be used to send messages to parent of iframe)
 	 * @type {object}
@@ -16,7 +21,7 @@
 	const dispatch = createEventDispatcher();
 
 	onMount(() => {
-		pymChild = new pym.Child();
+		pymChild = id ? new pym.Child({ id }) : new pym.Child();
 
 		if (polling) {
 			setInterval(() => {

package/dist/components/Embed/Embed.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  EmbedEvents */
 /** @typedef {typeof __propDef.slots}  EmbedSlots */
 export default class Embed extends SvelteComponentTyped<{
+    id?: string | null | undefined;
     polling?: number | false | undefined;
     pymChild?: object | undefined;
 }, {
@@ -18,6 +19,7 @@ export type EmbedSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id?: string | null | undefined;
         polling?: number | false | undefined;
         pymChild?: object | undefined;
     };

package/dist/components/Input/Input.svelte

@@ -68,6 +68,11 @@
 	 * @type {boolean}
 	 */
 	export let numeric = false;
+	/**
+	 * Set to `true` to make the input read-only
+	 * @type {boolean}
+	 */
+	export let readonly = false;
 	/**
 	 * Set to `true` to give the input a disabled state
 	 * @type {boolean}
@@ -121,6 +126,7 @@
 					aria-labelledby="{id} {id}-unit"
 					aria-describedby={description ? `${id}-description-hint` : null}
 					{disabled}
+					{readonly}
 					on:change={(e) => dispatch("change", { value, e })}
 					on:input={(e) => dispatch("input", { value, e })}
 					on:blur={(e) => dispatch("blur", { value, e })}
@@ -149,6 +155,7 @@
 			class:ons-input--error={error}
 			aria-describedby={description ? `${id}-description-hint` : null}
 			{disabled}
+			{readonly}
 			on:change={(e) => dispatch("change", { value, e })}
 			on:input={(e) => dispatch("input", { value, e })}
 			on:blur={(e) => dispatch("blur", { value, e })}

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

@@ -18,6 +18,7 @@ export default class Input extends SvelteComponentTyped<{
     prefix?: string | null | undefined;
     suffix?: string | null | undefined;
     unitLabel?: string | undefined;
+    readonly?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
     input: CustomEvent<any>;
@@ -48,6 +49,7 @@ declare const __propDef: {
         prefix?: string | null | undefined;
         suffix?: string | null | undefined;
         unitLabel?: string | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/components/Textarea/Textarea.svelte

@@ -48,6 +48,16 @@
 	 * @type {number}
 	 */
 	export let width = 30;
+	/**
+	 * Set to `true` to make the input read-only
+	 * @type {boolean}
+	 */
+	export let readonly = false;
+	/**
+	 * Set to `true` to give the input a disabled state
+	 * @type {boolean}
+	 */
+	export let disabled = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
@@ -82,6 +92,8 @@
 		maxlength={charLimit}
 		data-char-limit-ref="{id}-lim"
 		aria-describedby="textarea-char-limit-lim"
+		{disabled}
+		{readonly}
 	></textarea>
 	{#if Number.isInteger(remaining)}
 		<span

package/dist/components/Textarea/Textarea.svelte.d.ts

@@ -7,10 +7,12 @@ export default class Textarea extends SvelteComponentTyped<{
     width?: number | undefined;
     label?: string | null | undefined;
     name?: string | null | undefined;
+    disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
     description?: string | null | undefined;
     value?: string | null | undefined;
     charLimit?: number | null | undefined;
+    readonly?: boolean | undefined;
     rows?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -27,10 +29,12 @@ declare const __propDef: {
         width?: number | undefined;
         label?: string | null | undefined;
         name?: string | null | undefined;
+        disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;
         description?: string | null | undefined;
         value?: string | null | undefined;
         charLimit?: number | null | undefined;
+        readonly?: boolean | undefined;
         rows?: number | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.1.30",
+	"version": "1.1.32",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",