From fb262df46afb20b0fb292c19c40ff48fd6c42810 Mon Sep 17 00:00:00 2001
From: JM Marcastel <6306262+marcastel@users.noreply.github.com>
Date: Fri, 4 Jun 2021 01:59:42 +0200
Subject: [PATCH] chore: first commit

---
 Changelog.md                  | 193 ++++++++++++++
 jest.config.js                |   4 +
 src/qrbill/sampler.svelte     |   3 +
 src/qrbill/widget/Tags.svelte | 479 ++++++++++++++++++++++++++++++++++
 src/qrbill/widget/index.ts    |   3 +
 5 files changed, 682 insertions(+)
 create mode 100644 Changelog.md
 create mode 100644 jest.config.js
 create mode 100644 src/qrbill/widget/Tags.svelte
 create mode 100644 src/qrbill/widget/index.ts

diff --git a/Changelog.md b/Changelog.md
new file mode 100644
index 00000000..4a81234f
--- /dev/null
+++ b/Changelog.md
@@ -0,0 +1,193 @@
+---
+revision  : 2021-06-04 (Fri) 01:57:55
+title     : SAMinfo QRcode chanage log
+---
+
+## Ideas & things to do/add
+
+### Urgent matters
+
+  - [ ] Numerical values should be rounded
+  - [ ] Calendar widget missing
+  - [ ] Add validation pane
+  - [ ] +/- buttons should be smaller on smaller devices.
+
+### Functional scope
+
+  - Submit data
+    - Fetch [SAMdata](https://svelte-recipes.netlify.app/components/) on component load
+
+  - [Reference implementation](http://demo.qr-invoice.ch/app/index.html#/)
+
+  - Form data input and validation (this should be delivered as a wrapper around Sveltestrap's `Input` component.
+    - Started working on https://github.com/xnimorz/svelte-input-mask (cf https://www.npmjs.com/package/input-core)
+    - Check these: https://github.com/xnimorz/masked-input/tree/master/examples
+    - See this REPL as a practical example https://svelte.dev/repl/de6a6dcc92ee43d19ad2274599ba34c8?version=3.12.1
+    - See also:
+        - https://github.com/tanepiper/svelte-formula for contract-based forms
+        - https://github.com/chainlist/svelte-forms
+        - https://github.com/pstanoev/simple-svelte-autocomplete for autocompletion
+
+  - ERP-related widgets and functionality
+    - [Query Zefix](https://github.com/nexys-admin/zefix)
+    - [Swiss cantons](https://github.com/nexys-admin/payroll-switzerland)
+    - [IBAN and related validators](https://github.com/nexys-admin/iban)
+      and also https://github.com/MechaPoulpe/IBAN-JStools
+    - [Swiss banks](https://github.com/nexys-admin/swiss-banks)
+    - [ISO20022 on github](https://github.com/ISO20022)
+    - [Java validators to be converted](https://github.com/boessu/SwissQRBill)
+
+  - QRbill
+    - Typescript [QRBill library](https://github.com/nexys-admin/qrbill)
+    - PHP stuff
+      - https://github.com/whatwedo/EsrBundle (53)
+      - https://github.com/sprain/php-swiss-qr-bill (Generator, 433)
+      - https://github.com/jschaedl/iban-validation
+    - Other language implementations to scan for functionality
+      - https://github.com/manuelbl/SwissQRBill (Java)
+      - https://github.com/boessu/SwissQRBill (Java)
+      - https://github.com/stapelberg/qrbill (Go)
+
+  - Extend Sveltestrap with a _rate it_ widget
+    - https://github.com/emrekara37/svelte-rate-it
+    - https://github.com/dmitrykurmanov/waxwing-rating
+
+  - Client-side router
+    - https://github.com/arthurgermano/svelte-client-router
+    - https://github.com/EmilTholin/svelte-routing
+    - https://www.newline.co/@kchan/svelte-single-page-applications-with-svelte-router-spa--bbc57ba8
+
+  - PWA
+    - https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
+    - https://github.com/mdn/pwa-examples
+    - https://mdn.github.io/pwa-examples/js13kpwa/
+    - https://github.com/tretapey/svelte-pwa/
+
+  - Upload scanned/generated QR codes and/or QR bills
+    - Upload [a file](https://mzl.la/3oM1r6i)
+    - Upload [several files](https://mzl.la/3vl75hX)
+
+  - QRcode generation
+    - [Cross-language QR code generator](https://github.com/nayuki/QR-Code-generator)
+    - https://github.com/schoero/SwissQRBill (Typescript, 874)
+    - https://github.com/multisum/html-swiss-qr-bill (3)
+
+  - Load QRData from PNG file
+    - see tests in https://github.com/cozmo/jsQR and this https://github.com/cozmo/jsQR/issues/52
+    - https://codesandbox.io/s/pwoywz6n5x
+
+  - i18n
+    - [Svelte template](https://github.com/kaisermann/svelte-i18n)
+
+### User interface
+
+  - A treasure of marketing-style widgets built with Svelte + Ionic (CPIH?)
+
+  - Select widget (https://github.com/pavish/select-madu) to be made compatible with SvelteStrap
+    (See also https://github.com/rob-balfre/svelte-select).
+    - https://github.com/rob-balfre/svelte-select
+    - https://github.com/pstanoev/simple-svelte-autocomplete
+
+  - Learn more about web components (https://www.webcomponents.org)
+    - https://github.com/LunaTK/svelte-web-component-builder
+
+  - Sveltestrap
+    - https://github.com/bestguy/sveltestrap
+    - https://sveltestrap.js.org/?path=/story/components--navbar
+
+  - Bootstrap widgets
+    - https://github.com/themesberg/volt-bootstrap-5-dashboard
+    - https://preview.colorlib.com/theme/bootstrap/calendar-09/
+    - https://colorlib.com/wp/bootstrap-calendars/
+    - https://colorlib.com/wp/bootstrap-footer/
+    - https://colorlib.com/wp/bootstrap-tabs/
+    - https://colorlib.com/wp/bootstrap-checkbox/
+    - https://colorlib.com/wp/bootstrap-buttons/
+    - https://colorlib.com/wp/bootstrap-menu/
+
+  - Check out these articles:
+    - https://javascript.plainenglish.io/36-best-practices-to-improve-the-user-experience-of-your-website-457bf871bf90
+
+### Automation
+
+  - Form automation through JSON datasets (Cf. https://github.com/arabdevelop/svelte-formly).
+    We should standardise on Sveltestrap widgets; enabling multi-column layouts and column widths.:w
+
+  - Storyboard
+    - https://github.com/jerriclynsjohn/svelte-storybook-tailwind
+
+
+### Build environment
+
+  - Build a _Storybook_:
+    - https://storybook.js.org/blog/storybook-for-svelte/
+    - https://storybook.js.org/docs/react/get-started/examples
+    - https://storybook.js.org/addons
+    - https://github.com/redradix/svelte-custom-element-template
+
+  - Migrate from Jest to TAP (https://gitlab.com/bagrounds/test-anything-protocol) -- or not?
+    - See https://timdeschryver.dev/blog/how-to-test-svelte-components
+    - https://github.com/ktsn/svelte-jest (perhaps not https://github.com/colossal-digital/jest-svelte (2 commits!))
+
+  - Electon template
+    - https://github.com/Rich-Harris/svelte-template-electron
+    - https://github.com/nye/svelte-electron-better-sqlite3-starter
+    - https://github.com/chuanqisun/svelte-electron-template
+
+  - Svelte devtools (https://github.com/RedHatter/svelte-devtools) -- Chrome/Firefox extension
+
+  - Check these articles:
+    - https://javascript.plainenglish.io/top-7-must-know-npm-packages-for-every-web-developer-95e727855309
+
+  - API + Login
+    - [Svete and GraphQL](https://github.com/techformist/svedo)
+    - https://github.com/webonyx/graphql-php
+    - https://dev.to/lukocastillo/svelte-3-how-to-connect-your-app-with-a-rest-api-axios-2h4e
+    - https://developer.okta.com/blog/2019/03/08/simple-rest-api-php
+    - https://stackoverflow.com/questions/36691200/get-username-password-and-email-from-a-form-and-create-database-row-with-it
+    - [Auth0 integration](https://github.com/auth0-blog/svelte-auth0/tree/main/src)
+    - https://github.com/axios/axios
+
+
+  - MySQL
+    - https://medium.com/@haseeb.basil/mysql-vs-mysqli-vs-pdo-performance-benchmark-difference-and-security-comparison-37a9c2ec8d49
+    - https://stackoverflow.com/questions/50177216/how-to-grant-all-privileges-to-root-user-in-mysql-8-0
+    - https://codeofaninja.com/2011/12/php-and-mysql-crud-tutorial.html
+
+### Ready reference
+
+  - Fetch and asynchronous Javascript
+      - [Async and await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)
+      - [Resolve promises in Svelte templates](https://flaviocopes.com/svelte-templates-promises)
+      - [Github fetch example](https://svelte.dev/repl/dcc69ccad6c341e8b75ee38c3eac1524?version=3.20.1)
+      - [Playing fetch() with my API](https://code.sololearn.com/WW12zfYC7BSR/#html)
+
+  - PWA
+    - [Lab](https://github.com/marcastel/lab-javascript/tree/master/serviceworker)
+    - [Security](https://www.mckennaconsultants.com/securing-tokens-in-a-progressive-web-app/)
+
+  - Svelte
+    - [Svelte Handbook](https://www.freecodecamp.org/news/the-svelte-handbook/)
+    - [Svelte tutorial](https://svelte.dev/tutorial)
+    - [Svelte documentation](https://svelte.dev/docs)
+    - [DevSamples](https://www.devsamples.com/search?q=svelte)
+    - The now classical [Todo](https://github.com/vuesomedev/todomvc-svelte) application
+    - [Svelte Society components](https://sveltesociety.dev/components)
+    - [Styles with Svelte](https://css-tricks.com/what-i-like-about-writing-styles-with-svelte)
+    - [Svelte 3 book to get](https://www.amazon.com/dp/B08D6T6BKS/)
+    - https://translate.google.com/translate?sl=ru&tl=en&u=https://habr.com/ru/post/541834/
+
+  - Svelte samples
+    - https://svelte.dev/repl/a05a35e700cb45d1b2c94299c5de070c?version=3.38.2 Side panel no scroll
+    - https://svelte.dev/repl/a13e3002a4d8450c8d86d141a16e9df7?version=3.38.2 Circle of 5ths 
+    - https://svelte.dev/repl/d952fab2ec3344bdbcdd84396e07d2c1?version=3.38.2 Chord/Scale Builder
+    - https://svelte.dev/repl/e8edc7160db740d5a8a7dd4aa230c697?version=3.38.2 Managing fetch promises with a store
+    - https://svelte.dev/repl/ee4f76a5900e4e5a99e8fa158cb94328?version=3.30.1 <svelte:self> example with writable store
+    - https://github.com/rixo/svelte-preprocess-autoimport
+
+  - Frameworks galore
+    - A [Svelte vs React article](https://blog.bitsrc.io/react-vs-sveltejs-the-war-between-virtual-and-real-dom-59cbebbab9e9)
+
+## 2021-06-04 (Fri) 01:57:55 {#wip}
+
+<!-- vim: set nospell :-->
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 00000000..91a2d2c0
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
\ No newline at end of file
diff --git a/src/qrbill/sampler.svelte b/src/qrbill/sampler.svelte
index 85e19386..75fbaf26 100644
--- a/src/qrbill/sampler.svelte
+++ b/src/qrbill/sampler.svelte
@@ -15,6 +15,8 @@ import DeveloperInfo                 from './form/developer.svelte';
 import BrandBar                      from './layout/brandbar.svelte';
 import Footer                        from './layout/footer.svelte';
 import { qrbill }                    from './store/qrbills';
+import Tags                          from './widget/Tags.svelte';
+
 
 qrbill .data = null;
 
@@ -37,6 +39,7 @@ let clists = get_clists ();
 </script>
 
 <BrandBar />
+<Tags />
 
 <Container>
 
diff --git a/src/qrbill/widget/Tags.svelte b/src/qrbill/widget/Tags.svelte
new file mode 100644
index 00000000..e40f11c5
--- /dev/null
+++ b/src/qrbill/widget/Tags.svelte
@@ -0,0 +1,479 @@
+<script>
+// Forked from: https://github.com/agustinl/svelte-tags-input
+// Should be merged with Sveltstrap's Input.svelte as `type="tags"`
+import { createEventDispatcher } from 'svelte';
+
+const dispatch = createEventDispatcher();
+
+let tag = "";
+let arrelementsmatch = [];
+let regExpEscape = (s) => { return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&") }
+
+export let tags;
+export let addKeys;
+export let maxTags;
+export let onlyUnique;
+export let removeKeys;
+export let placeholder;
+export let allowPaste;
+export let allowDrop;
+export let splitWith;
+export let autoComplete;
+export let autoCompleteKey;
+export let name;
+export let id;
+export let allowBlur;
+export let disable;
+export let minChars;
+export let onlyAutocomplete;
+
+$: tags = tags || [];
+$: addKeys = addKeys || [13];
+$: maxTags = maxTags || false;
+$: onlyUnique = onlyUnique || false;
+$: removeKeys = removeKeys || [8];
+$: placeholder = placeholder || "";
+$: allowPaste = allowPaste || false;
+$: allowDrop = allowDrop || false;
+$: splitWith = splitWith || ",";
+$: autoComplete = autoComplete || false;
+$: autoCompleteKey = autoCompleteKey || false;
+$: name = name || "svelte-tags-input";
+$: id = id || uniqueID();
+$: allowBlur = allowBlur || false;
+$: disable = disable || false;
+$: minChars = minChars || 1;
+$: onlyAutocomplete = onlyAutocomplete || false;
+
+$: matchsID = id + "_matchs";
+
+let storePlaceholder = placeholder;
+
+function setTag(input) {
+
+    const currentTag = input.target.value;
+
+    if (addKeys) {
+        addKeys.forEach(function(key) {
+            if (key === input.keyCode) {
+
+                if (currentTag) input.preventDefault();
+
+                switch (input.keyCode) {
+                case 9:
+                    // TAB add first element on the autoComplete list
+                    if (autoComplete && document.getElementById(matchsID)) {
+                        addTag(document.getElementById(matchsID).querySelectorAll("li")[0].textContent);
+                    } else {
+                        addTag(currentTag);
+                    }
+                    break;
+                default:
+                    addTag(currentTag);
+                    break;
+                }
+            }
+        });
+    }
+
+    if (removeKeys) {
+        removeKeys.forEach(function(key) {
+            if (key === input.keyCode && tag === "") {
+                tags.pop();
+                tags = tags;
+
+                dispatch('tags', {
+                    tags: tags
+                });
+
+                arrelementsmatch = [];
+                document.getElementById(id).readOnly = false;
+                placeholder = storePlaceholder;
+                document.getElementById(id).focus();
+            }
+        });
+    }
+
+    // ArrowDown : focus on first element of the autocomplete
+    if (input.keyCode === 40 && autoComplete && document.getElementById(matchsID)) {
+        event.preventDefault();
+        document.getElementById(matchsID).querySelector("li:first-child").focus();
+    } // ArrowUp : focus on last element of the autocomplete
+    else if (input.keyCode === 38 && autoComplete && document.getElementById(matchsID)) {
+        event.preventDefault();
+        document.getElementById(matchsID).querySelector("li:last-child").focus();
+    }
+
+}
+
+function addTag(currentTag) {
+
+    if (typeof currentTag === 'object' && currentTag !== null) {
+        if (!autoCompleteKey) {
+            return console.error("'autoCompleteKey' is necessary if 'autoComplete' result is an array of objects");
+        }
+
+        var currentObjTags = currentTag;
+        currentTag = currentTag[autoCompleteKey].trim();
+
+    } else {
+        currentTag = currentTag.trim();
+    }
+
+    if (currentTag == "") return;
+    if (maxTags && tags.length == maxTags) return;
+    if (onlyUnique && tags.includes(currentTag)) return;
+    if (onlyAutocomplete && arrelementsmatch.length === 0) return;
+
+    tags.push(currentObjTags ? currentObjTags : currentTag)
+    tags = tags;
+    tag = "";
+
+    dispatch('tags', {
+        tags: tags
+    });
+
+    // Hide autocomplete list
+    // Focus on svelte tags input
+    arrelementsmatch = [];
+    document.getElementById(id).focus();
+
+    if (maxTags && tags.length == maxTags) {
+        document.getElementById(id).readOnly = true;
+        placeholder = "";
+    };
+
+}
+
+function removeTag(i) {
+
+    tags.splice(i, 1);
+    tags = tags;
+
+    dispatch('tags', {
+		tags: tags
+	});
+
+    // Hide autocomplete list
+    // Focus on svelte tags input
+    arrelementsmatch = [];
+    document.getElementById(id).readOnly = false;
+    placeholder = storePlaceholder;
+    document.getElementById(id).focus();
+
+}
+
+function onPaste(e){
+
+    if(!allowPaste) return;
+
+    e.preventDefault();
+
+    const data = getClipboardData(e);
+    const tags = splitTags(data).map(tag => addTag(tag));
+
+}
+
+function onDrop(e){
+
+    if(!allowDrop) return;
+
+    e.preventDefault();
+
+    const data = e.dataTransfer.getData("Text");
+    const tags = splitTags(data).map(tag => addTag(tag));
+
+}
+
+function onBlur(tag){
+
+    if (!document.getElementById(matchsID) && allowBlur) {
+        event.preventDefault();
+        addTag(tag);
+    }
+
+}
+
+function getClipboardData(e) {
+
+    if (window.clipboardData) {
+        return window.clipboardData.getData('Text')
+    }
+
+    if (e.clipboardData) {
+        return e.clipboardData.getData('text/plain')
+    }
+
+    return ''
+}
+
+function splitTags(data) {
+    return data.split(splitWith).map(tag => tag.trim());
+}
+
+async function getMatchElements(input) {
+
+    if (!autoComplete) return;
+
+    let autoCompleteValues = [];
+
+    if (Array.isArray(autoComplete)) {
+        autoCompleteValues = autoComplete
+    }
+
+    if (typeof autoComplete === 'function') {
+        if(autoComplete.constructor.name === 'AsyncFunction') {
+            autoCompleteValues = await autoComplete()
+        } else {
+            autoCompleteValues = autoComplete()
+        }
+    }
+
+    var value = input.target.value;
+
+    // Escape
+    if (value == "" || input.keyCode === 27 || value.length < minChars ) {
+        arrelementsmatch = [];
+        return;
+    }
+
+    if (typeof autoCompleteValues[0] === 'object' && autoCompleteValues !== null) {
+
+        if (!autoCompleteKey) {
+            return console.error("'autoCompleteValue' is necessary if 'autoComplete' result is an array of objects");
+        }
+
+        var matchs = autoCompleteValues.filter(e => e[autoCompleteKey].toLowerCase().includes(value.toLowerCase())).map(matchTag => {
+            return {
+                label: matchTag,
+                search: matchTag[autoCompleteKey].replace(RegExp(regExpEscape(value.toLowerCase()), 'i'), "<strong>$&</strong>")
+            }
+        });
+
+
+    } else {
+        var matchs = autoCompleteValues.filter(e => e.toLowerCase().includes(value.toLowerCase())).map(matchTag => {
+            return {
+                label: matchTag,
+                search: matchTag.replace(RegExp(regExpEscape(value.toLowerCase()), 'i'), "<strong>$&</strong>")
+            }
+        });
+    }
+
+    if (onlyUnique === true && !autoCompleteKey) {
+        matchs = matchs.filter(tag => !tags.includes(tag.label));
+    }
+
+    arrelementsmatch = matchs;
+}
+
+function navigateAutoComplete(autoCompleteIndex, autoCompleteLength, autoCompleteElement) {
+
+    if (!autoComplete) return;
+
+    event.preventDefault();
+
+    // ArrowDown
+    if (event.keyCode === 40) {
+        // Last element on the list ? Go to the first
+        if (autoCompleteIndex + 1 === autoCompleteLength) {
+            document.getElementById(matchsID).querySelector("li:first-child").focus();
+            return;
+        }
+        document.getElementById(matchsID).querySelectorAll("li")[autoCompleteIndex + 1].focus();
+    } else if (event.keyCode === 38) {
+        // ArrowUp
+        // First element on the list ? Go to the last
+        if (autoCompleteIndex === 0) {
+            document.getElementById(matchsID).querySelector("li:last-child").focus();
+            return;
+        }
+        document.getElementById(matchsID).querySelectorAll("li")[autoCompleteIndex - 1].focus();
+    } else if (event.keyCode === 13) {
+        // Enter
+        addTag(autoCompleteElement);
+    } else if (event.keyCode === 27) {
+        // Escape
+        arrelementsmatch = [];
+        document.getElementById(id).focus();
+    }
+}
+
+function uniqueID() {
+    return 'sti_' + Math.random().toString(36).substr(2, 9);
+};
+
+</script>
+
+<div class="svelte-tags-input-layout" class:sti-layout-disable={disable}>
+    {#if tags.length > 0}
+        {#each tags as tag, i}
+            <span class="svelte-tags-input-tag">
+                {#if typeof tag === 'string'}
+                    {tag}
+                {:else}
+                    {tag[autoCompleteKey]}
+                {/if}
+                {#if !disable}
+                <span class="svelte-tags-input-tag-remove" on:click={() => removeTag(i)}> &#215;</span>
+                {/if}
+            </span>
+        {/each}
+    {/if}
+    <input
+        type="text"
+        id={id}
+        name={name}
+        bind:value={tag}
+        on:keydown={setTag}
+        on:keyup={getMatchElements}
+        on:paste={onPaste}
+        on:drop={onDrop}
+        on:blur={() => onBlur(tag)}
+        class="svelte-tags-input"
+        placeholder={placeholder}
+        disabled={disable}
+    >
+</div>
+
+{#if autoComplete && arrelementsmatch.length > 0}
+    <div class="svelte-tags-input-matchs-parent">
+        <ul id="{id}_matchs" class="svelte-tags-input-matchs">
+            {#each arrelementsmatch as element, index}
+                <li
+                    tabindex="-1"
+                    on:keydown={() => navigateAutoComplete(index, arrelementsmatch.length, element.label)}
+                    on:click={() => addTag(element.label)}>
+                        {@html element.search}
+                    </li>
+            {/each}
+        </ul>
+    </div>
+{/if}
+
+<style>
+/* CSS svelte-tags-input */
+
+.svelte-tags-input,
+.svelte-tags-input-tag,
+.svelte-tags-input-matchs {
+    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
+    font-size: 14px;
+    padding: 2px 5px;
+}
+
+/* svelte-tags-input-layout */
+
+.svelte-tags-input-layout {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    -ms-flex-wrap:wrap;
+        flex-wrap:wrap;
+    -webkit-box-align:center;
+        -ms-flex-align:center;
+            align-items:center;
+    padding: 0px 5px 5px 5px;
+    border: solid 1px #CCC;
+    background: #FFF;
+    border-radius: 2px;
+}
+
+.svelte-tags-input-layout:focus,
+.svelte-tags-input-layout:hover {
+    border: solid 1px #000;
+}
+
+/* svelte-tags-input */
+
+.svelte-tags-input {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    margin: 0;
+    margin-top: 5px;
+    border:none;
+}
+
+.svelte-tags-input:focus {
+    outline:0;
+}
+
+/* svelte-tags-input-tag */
+
+.svelte-tags-input-tag {
+    display:-webkit-box;
+    display:-ms-flexbox;
+    display:flex;
+    white-space: nowrap;
+    list-style:none;
+    background: #000;
+    color: #FFF;
+    border-radius: 2px;
+    margin-right: 5px;
+    margin-top: 5px;
+}
+
+/*.svelte-tags-input-tag:hover {
+    background: #CCC;
+}*/
+
+.svelte-tags-input-tag-remove {
+    cursor:pointer;
+}
+
+/* svelte-tags-input-matchs */
+
+.svelte-tags-input-matchs-parent {
+    position:relative;
+}
+
+.svelte-tags-input-matchs {
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    margin:3px 0;
+    padding: 0px;
+    background:#FFF;
+    border: solid 1px #CCC;
+    border-radius: 2px;
+    max-height:310px;
+    overflow:scroll;
+    overflow-x:auto;
+}
+
+.svelte-tags-input-matchs li {
+    list-style:none;
+    padding:5px;
+    border-radius: 2px;
+    cursor:pointer;
+}
+
+.svelte-tags-input-matchs li:hover,
+.svelte-tags-input-matchs li:focus {
+    background:#000;
+    color:#FFF;
+    outline:none;
+}
+
+/* svelte-tags-input disabled */
+.svelte-tags-input-layout.sti-layout-disable,
+.svelte-tags-input:disabled {
+    background: #EAEAEA;
+    cursor: not-allowed;
+}
+
+.svelte-tags-input-layout.sti-layout-disable:hover,
+.svelte-tags-input-layout.sti-layout-disable:focus {
+    border-color:#CCC;
+}
+
+.svelte-tags-input-layout.sti-layout-disable .svelte-tags-input-tag {
+    background: #AEAEAE;
+}
+
+.svelte-tags-input-layout.sti-layout-disable .svelte-tags-input-tag-remove {
+    cursor: not-allowed;
+}
+</style>
diff --git a/src/qrbill/widget/index.ts b/src/qrbill/widget/index.ts
new file mode 100644
index 00000000..541bb2af
--- /dev/null
+++ b/src/qrbill/widget/index.ts
@@ -0,0 +1,3 @@
+import Tags from './Tags.svelte';
+
+export default Tags;