@everymatrix/cashier-header 1.0.0
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.
- package/README.md +30 -0
- package/index.html +37 -0
- package/index.js +1 -0
- package/package.json +39 -0
- package/public/favicon.png +0 -0
- package/public/reset.css +48 -0
- package/rollup.config.js +59 -0
- package/src/CashierHeader.svelte +167 -0
- package/src/i18n.js +32 -0
- package/src/index.ts +4 -0
- package/src/translations.js +9 -0
- package/stories/CashierHeader.stories.js +13 -0
- package/tsconfig.json +6 -0
package/README.md
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# @everymatrix/cashier-header
|
|
2
|
+
---------
|
|
3
|
+
|
|
4
|
+
## First step
|
|
5
|
+
---------
|
|
6
|
+
```
|
|
7
|
+
lerna bootstrap
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## Run Widget
|
|
11
|
+
---------
|
|
12
|
+
- starts server at port 5050
|
|
13
|
+
- has livereload
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
yarn run dev
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Build Widget
|
|
20
|
+
---------
|
|
21
|
+
```
|
|
22
|
+
yarn run build
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Publishing widget
|
|
26
|
+
---------
|
|
27
|
+
- Note add your user to the npm
|
|
28
|
+
```
|
|
29
|
+
lerna publish
|
|
30
|
+
```
|
package/index.html
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset='utf-8'>
|
|
5
|
+
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
6
|
+
|
|
7
|
+
<title>
|
|
8
|
+
cashier-header
|
|
9
|
+
</title>
|
|
10
|
+
<link rel="stylesheet" href="public/reset.css">
|
|
11
|
+
<script src='dist/cashier-header.js'></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<style>
|
|
16
|
+
html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
|
|
17
|
+
.header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
|
|
18
|
+
.header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
|
|
19
|
+
.header__name { color: #fff; }
|
|
20
|
+
.header__name span { margin-right: 10px; font-weight: bold; }
|
|
21
|
+
.webcomponent { padding: 10px 20px; }
|
|
22
|
+
</style>
|
|
23
|
+
<header class="header">
|
|
24
|
+
<div class="header__logo">
|
|
25
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
|
|
26
|
+
</div>
|
|
27
|
+
<h1 class="header__name">
|
|
28
|
+
<span>WEBCOMPONENT:</span> cashier-header
|
|
29
|
+
</h1>
|
|
30
|
+
</header>
|
|
31
|
+
|
|
32
|
+
<div class="webcomponent">
|
|
33
|
+
<cashier-header></cashier-header>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
package/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './dist/cashier-header.js';
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@everymatrix/cashier-header",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"main": "index.js",
|
|
5
|
+
"svelte": "src/index.ts",
|
|
6
|
+
|
|
7
|
+
"scripts": {
|
|
8
|
+
"start": "sirv public",
|
|
9
|
+
"build": "cross-env NODE_ENV=production rollup -c",
|
|
10
|
+
"dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
|
|
11
|
+
"validate": "svelte-check",
|
|
12
|
+
"test": "echo"
|
|
13
|
+
},
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"rollup": "^2.3.4",
|
|
16
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
17
|
+
"@rollup/plugin-commonjs": "^16.0.0",
|
|
18
|
+
"@rollup/plugin-node-resolve": "^10.0.0",
|
|
19
|
+
"@rollup/plugin-typescript": "^6.0.0",
|
|
20
|
+
"rollup-plugin-dev-server": "^0.4.3",
|
|
21
|
+
"rollup-plugin-livereload": "^2.0.0",
|
|
22
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
23
|
+
"rollup-plugin-svelte": "^7.0.0",
|
|
24
|
+
"rollup-plugin-terser": "^7.0.0",
|
|
25
|
+
"svelte-check": "^1.0.0",
|
|
26
|
+
"typescript": "^3.9.3",
|
|
27
|
+
"svelte-preprocess": "^5.0.0",
|
|
28
|
+
"tslib": "^2.0.0",
|
|
29
|
+
"@tsconfig/svelte": "^1.0.0"
|
|
30
|
+
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"cross-env": "^7.0.3",
|
|
33
|
+
"svelte": "^3.0.0",
|
|
34
|
+
"sirv-cli": "^1.0.0"
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
Binary file
|
package/public/reset.css
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* http://meyerweb.com/eric/tools/css/reset/
|
|
2
|
+
v2.0 | 20110126
|
|
3
|
+
License: none (public domain)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
html, body, div, span, applet, object, iframe,
|
|
7
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
8
|
+
a, abbr, acronym, address, big, cite, code,
|
|
9
|
+
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
10
|
+
small, strike, strong, sub, sup, tt, var,
|
|
11
|
+
b, u, i, center,
|
|
12
|
+
dl, dt, dd, ol, ul, li,
|
|
13
|
+
fieldset, form, label, legend,
|
|
14
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
15
|
+
article, aside, canvas, details, embed,
|
|
16
|
+
figure, figcaption, footer, header, hgroup,
|
|
17
|
+
menu, nav, output, ruby, section, summary,
|
|
18
|
+
time, mark, audio, video {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
border: 0;
|
|
22
|
+
font-size: 100%;
|
|
23
|
+
font: inherit;
|
|
24
|
+
vertical-align: baseline;
|
|
25
|
+
}
|
|
26
|
+
/* HTML5 display-role reset for older browsers */
|
|
27
|
+
article, aside, details, figcaption, figure,
|
|
28
|
+
footer, header, hgroup, menu, nav, section {
|
|
29
|
+
display: block;
|
|
30
|
+
}
|
|
31
|
+
body {
|
|
32
|
+
line-height: 1;
|
|
33
|
+
}
|
|
34
|
+
ol, ul {
|
|
35
|
+
list-style: none;
|
|
36
|
+
}
|
|
37
|
+
blockquote, q {
|
|
38
|
+
quotes: none;
|
|
39
|
+
}
|
|
40
|
+
blockquote:before, blockquote:after,
|
|
41
|
+
q:before, q:after {
|
|
42
|
+
content: '';
|
|
43
|
+
content: none;
|
|
44
|
+
}
|
|
45
|
+
table {
|
|
46
|
+
border-collapse: collapse;
|
|
47
|
+
border-spacing: 0;
|
|
48
|
+
}
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import svelte from 'rollup-plugin-svelte';
|
|
2
|
+
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
+
import resolve from '@rollup/plugin-node-resolve';
|
|
4
|
+
import serve from 'rollup-plugin-dev-server';
|
|
5
|
+
import livereload from 'rollup-plugin-livereload';
|
|
6
|
+
import { terser } from 'rollup-plugin-terser';
|
|
7
|
+
import sveltePreprocess from 'svelte-preprocess';
|
|
8
|
+
import typescript from '@rollup/plugin-typescript';
|
|
9
|
+
const production = process.env.NODE_ENV === 'production';
|
|
10
|
+
const dev = process.env.NODE_ENV === 'development';
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
input: 'src/index.ts',
|
|
14
|
+
output: {
|
|
15
|
+
sourcemap: true,
|
|
16
|
+
format: 'umd',
|
|
17
|
+
name: 'app',
|
|
18
|
+
file: 'dist/cashier-header.js'
|
|
19
|
+
},
|
|
20
|
+
plugins: [
|
|
21
|
+
svelte({
|
|
22
|
+
preprocess: sveltePreprocess(),
|
|
23
|
+
compilerOptions: {
|
|
24
|
+
// enable run-time checks when not in production
|
|
25
|
+
customElement: true,
|
|
26
|
+
dev: !production
|
|
27
|
+
}
|
|
28
|
+
}),
|
|
29
|
+
commonjs(),
|
|
30
|
+
resolve({
|
|
31
|
+
browser: true,
|
|
32
|
+
dedupe: ['svelte']
|
|
33
|
+
}),
|
|
34
|
+
dev && serve({
|
|
35
|
+
open: true,
|
|
36
|
+
verbose: true,
|
|
37
|
+
allowCrossOrigin: true,
|
|
38
|
+
historyApiFallback: false,
|
|
39
|
+
host: 'localhost',
|
|
40
|
+
port: 5050,
|
|
41
|
+
}),
|
|
42
|
+
dev && livereload({ watch: ['', 'dist'] }),
|
|
43
|
+
typescript({
|
|
44
|
+
sourceMap: !production,
|
|
45
|
+
inlineSources: !production,
|
|
46
|
+
}),
|
|
47
|
+
// If we're building for production (npm run build
|
|
48
|
+
// instead of npm run dev), minify
|
|
49
|
+
production &&
|
|
50
|
+
terser({
|
|
51
|
+
output: {
|
|
52
|
+
comments: "all"
|
|
53
|
+
},
|
|
54
|
+
})
|
|
55
|
+
],
|
|
56
|
+
watch: {
|
|
57
|
+
clearScreen: false
|
|
58
|
+
}
|
|
59
|
+
};
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
<svelte:options tag={null} />
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
export let clientstyling: string = '';
|
|
4
|
+
export let clientstylingurl: string = '';
|
|
5
|
+
export let translationurl: string = '';
|
|
6
|
+
export let showbackbutton: string = '';
|
|
7
|
+
export let title: string = '';
|
|
8
|
+
export let lang: string = 'en'
|
|
9
|
+
import { _, addNewMessages, setupI18n, setLocale } from './i18n';
|
|
10
|
+
import { TRANSLATIONS } from './translations';
|
|
11
|
+
|
|
12
|
+
let customStylingContainer:HTMLElement;
|
|
13
|
+
let backButton = false;
|
|
14
|
+
let titleText: string;
|
|
15
|
+
|
|
16
|
+
$: lang && setActiveLanguage();
|
|
17
|
+
$: clientstyling && customStylingContainer && setClientStyling();
|
|
18
|
+
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
19
|
+
$: translationurl && setTranslationUrl();
|
|
20
|
+
$: showbackbutton && showBackButton();
|
|
21
|
+
$: lang && title && getTitle();
|
|
22
|
+
|
|
23
|
+
const setTranslationUrl = ():void => {
|
|
24
|
+
let url:string = translationurl;
|
|
25
|
+
if(url) {
|
|
26
|
+
fetch(url).then((res:any) => res.json())
|
|
27
|
+
.then((res) => {
|
|
28
|
+
Object.keys(res).forEach((item:any):void => {
|
|
29
|
+
addNewMessages(item, res[item]);
|
|
30
|
+
});
|
|
31
|
+
}).catch((err:any) => {
|
|
32
|
+
console.log(err);
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
Object.keys(TRANSLATIONS).forEach((item:any):void => {
|
|
38
|
+
addNewMessages(item, TRANSLATIONS[item]);
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const setClientStyling = ():void => {
|
|
42
|
+
let sheet = document.createElement('style');
|
|
43
|
+
sheet.innerHTML = clientstyling;
|
|
44
|
+
customStylingContainer.appendChild(sheet);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const setClientStylingURL = ():void => {
|
|
48
|
+
let url:URL = new URL(clientstylingurl);
|
|
49
|
+
let cssFile:HTMLElement = document.createElement('style');
|
|
50
|
+
|
|
51
|
+
fetch(url.href)
|
|
52
|
+
.then((res:any) => res.text())
|
|
53
|
+
.then((data:any) => {
|
|
54
|
+
cssFile.innerHTML = data
|
|
55
|
+
|
|
56
|
+
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const setActiveLanguage = ():void => {
|
|
61
|
+
setLocale(lang);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const close = () => {
|
|
65
|
+
window.postMessage({ type: 'CloseCashier' }, window.location.href);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const back = () => {
|
|
69
|
+
window.postMessage({ type: 'BackCashier' }, window.location.href);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const showBackButton = () => {
|
|
73
|
+
backButton = !!showbackbutton && showbackbutton !== 'false';
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const getTitle = () => {
|
|
77
|
+
titleText = title || 'header.general';
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
</script>
|
|
81
|
+
|
|
82
|
+
<div class="CashierHeader" bind:this={customStylingContainer}>
|
|
83
|
+
<slot name="leftButton">
|
|
84
|
+
{#if backButton}
|
|
85
|
+
<div class="CashierHeaderLeftButton" on:click={back}>
|
|
86
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
87
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5632 3.47782C12.4787 3.50138 12.3362 3.57505 12.2465 3.64153C12.1567 3.70806 10.8069 5.04216 9.24694 6.60626C6.11944 9.74192 6.25999 9.58204 6.25999 10.0037C6.25999 10.4243 6.13093 10.2784 9.34296 13.4903C12.4449 16.5921 12.356 16.5116 12.7278 16.5556C13.1855 16.6098 13.6413 16.2585 13.7301 15.783C13.7612 15.6164 13.7212 15.3395 13.6437 15.1847C13.6158 15.129 12.451 13.9396 11.0553 12.5417L8.51768 10L11.0553 7.45837C12.451 6.06048 13.6158 4.87114 13.6437 4.81544C13.7729 4.55751 13.7703 4.2006 13.6374 3.94274C13.4469 3.5731 12.9668 3.36532 12.5632 3.47782Z" fill="#111111"/>
|
|
88
|
+
</svg>
|
|
89
|
+
</div>
|
|
90
|
+
{/if}
|
|
91
|
+
</slot>
|
|
92
|
+
<slot name="title">
|
|
93
|
+
<span class="CashierHeaderTitle">{$_(titleText)}</span>
|
|
94
|
+
</slot>
|
|
95
|
+
<slot name="rightButton">
|
|
96
|
+
<span on:click={close} class="CashierHeaderRightButton">
|
|
97
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 13" fill="none">
|
|
98
|
+
<path d="M12.7711 0.229435C13.0582 0.517619 13.0755 0.973729 12.8215 1.28141L12.7711 1.33721L7.60685 6.50068L12.7711 11.6641C12.9128 11.8066 12.9944 11.998 12.999 12.1988C13.0035 12.3997 12.9308 12.5946 12.7957 12.7433C12.6606 12.892 12.4735 12.9832 12.2731 12.9979C12.0728 13.0126 11.8744 12.9497 11.7191 12.8223L11.6633 12.7719L6.49958 7.60791L1.3359 12.7719C1.19349 12.9136 1.00207 12.9952 0.801203 12.9998C0.60034 13.0044 0.405398 12.9316 0.256676 12.7965C0.107955 12.6614 0.0168256 12.4744 0.00212786 12.274C-0.0125699 12.0736 0.0502877 11.8753 0.177706 11.7199L0.228086 11.6641L5.3923 6.50068L0.228086 1.33721C0.0863637 1.1948 0.00478102 1.00338 0.000203544 0.802529C-0.00437393 0.601674 0.0684038 0.40674 0.203491 0.258024C0.338579 0.109308 0.525647 0.0181829 0.726024 0.00348576C0.9264 -0.0112114 1.12476 0.0516437 1.28011 0.179057L1.3359 0.229435L6.49958 5.39345L11.6633 0.229435C11.736 0.156695 11.8223 0.0989949 11.9174 0.0596283C12.0124 0.0202617 12.1143 0 12.2172 0C12.32 0 12.4219 0.0202617 12.5169 0.0596283C12.612 0.0989949 12.6983 0.156695 12.7711 0.229435Z" fill="#111111"/>
|
|
99
|
+
</svg>
|
|
100
|
+
</span>
|
|
101
|
+
</slot>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
<style lang="scss">
|
|
106
|
+
.CashierHeader {
|
|
107
|
+
display: flex;
|
|
108
|
+
position: relative;
|
|
109
|
+
align-items: center;
|
|
110
|
+
height: var(--mmw--header-height, 32px);
|
|
111
|
+
background-color: var(--mmw--color-grey-105, #E8E9EB);
|
|
112
|
+
width: 100%;
|
|
113
|
+
border-radius: 6px 6px 0 0;
|
|
114
|
+
|
|
115
|
+
.CashierHeaderLeftButton {
|
|
116
|
+
color: var(--mmw--color-grey-10, #111);
|
|
117
|
+
font-size: var(--emw--font-size-small, 14px);
|
|
118
|
+
font-weight: var(--emw--font-weight-semibold, 500);
|
|
119
|
+
margin-bottom: 0;
|
|
120
|
+
position: absolute;
|
|
121
|
+
display: flex;
|
|
122
|
+
align-items: center;
|
|
123
|
+
font-variant: all-small-caps;
|
|
124
|
+
height: 32px;
|
|
125
|
+
left: 7px;
|
|
126
|
+
gap: 2px;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
|
|
129
|
+
svg path {
|
|
130
|
+
fill: var(--mmw--color-grey-10, #111);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&.disabled {
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.CashierHeaderTitle {
|
|
139
|
+
color: var(--mmw--color-grey-10, #111);
|
|
140
|
+
font-size: var(--emw--font-size-small, 14px);
|
|
141
|
+
font-weight: var(--emw--font-weight-semibold, 500);
|
|
142
|
+
margin: auto;
|
|
143
|
+
max-width: calc(100% - 150px);
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
text-overflow: ellipsis;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.CashierHeaderRightButton {
|
|
149
|
+
position: absolute;
|
|
150
|
+
display: flex;
|
|
151
|
+
justify-content: space-between;
|
|
152
|
+
align-items: center;
|
|
153
|
+
padding: 0 var(--emw--spacing-small, 12px);
|
|
154
|
+
height: inherit;
|
|
155
|
+
right: 0;
|
|
156
|
+
gap: var(--emw--spacing-small, 12px);
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
.close-button {
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
|
|
161
|
+
svg path {
|
|
162
|
+
fill: var(--mmw--color-grey-10, #111);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
</style>
|
package/src/i18n.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import {
|
|
2
|
+
dictionary,
|
|
3
|
+
locale,
|
|
4
|
+
init,
|
|
5
|
+
addMessages,
|
|
6
|
+
_
|
|
7
|
+
} from 'svelte-i18n';
|
|
8
|
+
|
|
9
|
+
init({
|
|
10
|
+
fallbackLocale: 'en'
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
function setupI18n({ withLocale: _locale, translations }) {
|
|
14
|
+
locale.subscribe((data) => {
|
|
15
|
+
if (data == null) {
|
|
16
|
+
dictionary.set(translations);
|
|
17
|
+
locale.set(_locale);
|
|
18
|
+
}
|
|
19
|
+
}); // maybe we will need this to make sure that the i18n is set up only once
|
|
20
|
+
/*dictionary.set(translations);
|
|
21
|
+
locale.set(_locale);*/
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function addNewMessages(lang, dict) {
|
|
25
|
+
addMessages(lang, dict);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function setLocale(_locale) {
|
|
29
|
+
locale.set(_locale);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { _, setupI18n, addNewMessages, setLocale };
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { html } from 'lit-element';
|
|
2
|
+
|
|
3
|
+
import CashierHeader from '../src/CashierHeader';
|
|
4
|
+
|
|
5
|
+
// This default export determines where your story goes in the story list
|
|
6
|
+
export default {
|
|
7
|
+
title: 'CashierHeader',
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
// 👇 We create a “template” of how args map to rendering
|
|
11
|
+
const CashierHeader = ({ aProperty }) => html`<cashier-header></cashier-header>`;
|
|
12
|
+
|
|
13
|
+
export const FirstStory = CashierHeader.bind({});
|