@onsvisual/svelte-components 0.0.33 → 0.0.35

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

@@ -13,6 +13,7 @@ export default class Select extends SvelteComponentTyped<{
     multiple?: boolean;
     maxSelected?: number;
     clearable?: boolean;
+    autoClear?: boolean;
     idKey?: string;
     labelKey?: string;
     colors?: any[];
@@ -21,10 +22,10 @@ export default class Select extends SvelteComponentTyped<{
     floatingConfig?: any;
 }, {
     input: CustomEvent<any>;
-    change: CustomEvent<any>;
     focus: CustomEvent<any>;
     blur: CustomEvent<any>;
     clear: CustomEvent<any>;
+    change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -46,6 +47,7 @@ declare const __propDef: {
         multiple?: boolean;
         maxSelected?: number;
         clearable?: boolean;
+        autoClear?: boolean;
         idKey?: string;
         labelKey?: string;
         colors?: any[];
@@ -55,10 +57,10 @@ declare const __propDef: {
     };
     events: {
         input: CustomEvent<any>;
-        change: CustomEvent<any>;
         focus: CustomEvent<any>;
         blur: CustomEvent<any>;
         clear: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/@types/js/utils.d.ts

@@ -8,3 +8,4 @@ export function formatDate(str: any, locale?: string, opts?: {
 export function commas(num: any): string;
 export function ascending(a: any, b: any): number;
 export function descending(a: any, b: any): number;
+export function sleep(ms?: number): Promise<any>;

package/dist/@types/layout/AnalyticsBanner/AnalyticsBanner.svelte.d.ts

@@ -6,6 +6,7 @@ export default class AnalyticsBanner extends SvelteComponentTyped<{
     width?: "wide" | "wider";
     analyticsId?: string;
     analyticsProps?: any;
+    hideBanner?: boolean;
     usageCookies?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -20,6 +21,7 @@ declare const __propDef: {
         width?: "wide" | "wider";
         analyticsId?: string;
         analyticsProps?: object;
+        hideBanner?: boolean;
         usageCookies?: boolean;
     };
     events: {

package/dist/inputs/Select/Select.svelte

@@ -1,5 +1,7 @@
 <script>
+  import { createEventDispatcher } from "svelte";
   import SelectInner from "svelte-select";
+  import { sleep } from "../../js/utils";
 
   /**
    * Unique id for the element
@@ -26,6 +28,11 @@
    * @type {boolean}
    */
   export let clearable = true;
+  /**
+   * Clear value on selection (default for "search" mode)
+   * @type {boolean}
+   */
+  export let autoClear = mode === "search";
   /**
    * A label to describe the element (expected for accessibility)
    * @type {string}
@@ -110,6 +117,16 @@
       : "No options available";
 
   let filterText = "";
+
+  const dispatch = createEventDispatcher();
+
+  async function handleChange(e) {
+    dispatch("change", e.detail);
+    if (autoClear) {
+      await sleep(100);
+      value = null;
+    }
+  }
 </script>
 
 <div class="ons-field" style="{style}">
@@ -131,8 +148,8 @@
       showChevron="{!value}"
       multiple="{multiple}"
       clearable="{clearable}"
+      on:change="{handleChange}"
       on:input
-      on:change
       on:focus
       on:blur
       on:clear

package/dist/js/utils.js

@@ -44,3 +44,5 @@ export const ascending = (a, b) =>
 
 export const descending = (a, b) =>
   a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+
+export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));

package/dist/layout/AnalyticsBanner/AnalyticsBanner.svelte

@@ -19,6 +19,11 @@
    * @type {object}
    */
   export let analyticsProps = {};
+  /**
+   * Use this to hide the banner (only initialises analytics if cookies already accepted)
+   * @type {boolean}
+   */
+  export let hideBanner = false;
   /**
    * Bind to this value if you need to know if cookies have been accepted
    * @type {boolean}
@@ -147,7 +152,7 @@
   const i18n = (text) => (lang == "cy" && texts[text] ? texts[text] : text);
 </script>
 
-{#if showBanner}
+{#if showBanner && !hideBanner}
   <div
     class="ons-cookies-banner"
     role="region"

package/dist/layout/Header/ONSLogo.svelte

@@ -147,4 +147,5 @@
 <style>
   svg {
     overflow: visible;
+    width: auto;
   }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",