niris-public-community-components 0.0.1
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/.eleventy.cjs +21 -0
- package/.eslintignore +6 -0
- package/.eslintrc.json +51 -0
- package/.prettierrc.json +7 -0
- package/CHANGELOG.md +98 -0
- package/LICENSE +28 -0
- package/README.md +93 -0
- package/README_DEV.md +154 -0
- package/dev/README.md +1 -0
- package/dev/index.html +22 -0
- package/dev/text-area-niris.html +30 -0
- package/docs/.nojekyll +0 -0
- package/docs/api/index.html +149 -0
- package/docs/docs.css +163 -0
- package/docs/examples/index.html +75 -0
- package/docs/examples/name-property/index.html +65 -0
- package/docs/images/example1.png +0 -0
- package/docs/images/example2.png +0 -0
- package/docs/index.html +75 -0
- package/docs/install/index.html +53 -0
- package/docs/prism-okaidia.css +123 -0
- package/docs-src/.eleventyignore +2 -0
- package/docs-src/.nojekyll +0 -0
- package/docs-src/_README.md +7 -0
- package/docs-src/_data/api.11tydata.js +16 -0
- package/docs-src/_includes/example.11ty.cjs +43 -0
- package/docs-src/_includes/footer.11ty.cjs +9 -0
- package/docs-src/_includes/header.11ty.cjs +7 -0
- package/docs-src/_includes/nav.11ty.cjs +11 -0
- package/docs-src/_includes/page.11ty.cjs +37 -0
- package/docs-src/_includes/relative-path.cjs +9 -0
- package/docs-src/api.11ty.cjs +127 -0
- package/docs-src/docs.css +163 -0
- package/docs-src/examples/index.md +34 -0
- package/docs-src/examples/name-property.md +15 -0
- package/docs-src/index.md +76 -0
- package/docs-src/install.md +32 -0
- package/docs-src/package.json +3 -0
- package/index.html +17 -0
- package/my-element.js +79 -0
- package/package.json +76 -0
- package/rollup.config.js +42 -0
- package/src/my-element.ts +68 -0
- package/src/test/my-element_test.ts +62 -0
- package/src/textarea-to-niris.ts +218 -0
- package/tsconfig.json +34 -0
- package/web-dev-server.config.js +25 -0
- package/web-test-runner.config.js +120 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const header = require('./header.11ty.cjs');
|
|
2
|
+
const footer = require('./footer.11ty.cjs');
|
|
3
|
+
const nav = require('./nav.11ty.cjs');
|
|
4
|
+
const relative = require('./relative-path.cjs');
|
|
5
|
+
|
|
6
|
+
module.exports = function (data) {
|
|
7
|
+
const {title, page, content} = data;
|
|
8
|
+
return `
|
|
9
|
+
<!doctype html>
|
|
10
|
+
|
|
11
|
+
<html lang="en">
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="utf-8">
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
15
|
+
<title>${title}</title>
|
|
16
|
+
<link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
|
|
17
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
|
|
18
|
+
<link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
|
|
19
|
+
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
|
20
|
+
<script src="/node_modules/lit/polyfill-support.js"></script>
|
|
21
|
+
<script type="module" src="${relative(
|
|
22
|
+
page.url,
|
|
23
|
+
'/my-element.bundled.js'
|
|
24
|
+
)}"></script>
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
${header()}
|
|
28
|
+
${nav(data)}
|
|
29
|
+
<div id="main-wrapper">
|
|
30
|
+
<main>
|
|
31
|
+
${content}
|
|
32
|
+
</main>
|
|
33
|
+
</div>
|
|
34
|
+
${footer()}
|
|
35
|
+
</body>
|
|
36
|
+
</html>`;
|
|
37
|
+
};
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This page generates its content from the custom-element.json file as read by
|
|
3
|
+
* the _data/api.11tydata.js script.
|
|
4
|
+
*/
|
|
5
|
+
module.exports = class Docs {
|
|
6
|
+
data() {
|
|
7
|
+
return {
|
|
8
|
+
layout: 'page.11ty.cjs',
|
|
9
|
+
title: '<my-element> ⌲ Docs',
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
render(data) {
|
|
14
|
+
const manifest = data.api['11tydata'].customElements;
|
|
15
|
+
const elements = manifest.modules.reduce(
|
|
16
|
+
(els, module) =>
|
|
17
|
+
els.concat(
|
|
18
|
+
module.declarations?.filter((dec) => dec.customElement) ?? []
|
|
19
|
+
),
|
|
20
|
+
[]
|
|
21
|
+
);
|
|
22
|
+
return `
|
|
23
|
+
<h1>API</h1>
|
|
24
|
+
${elements
|
|
25
|
+
.map(
|
|
26
|
+
(element) => `
|
|
27
|
+
<h2><${element.tagName}></h2>
|
|
28
|
+
<div>
|
|
29
|
+
${element.description}
|
|
30
|
+
</div>
|
|
31
|
+
${renderTable(
|
|
32
|
+
'Attributes',
|
|
33
|
+
['name', 'description', 'type.text', 'default'],
|
|
34
|
+
element.attributes
|
|
35
|
+
)}
|
|
36
|
+
${renderTable(
|
|
37
|
+
'Properties',
|
|
38
|
+
['name', 'attribute', 'description', 'type.text', 'default'],
|
|
39
|
+
element.members.filter((m) => m.kind === 'field')
|
|
40
|
+
)}
|
|
41
|
+
${renderTable(
|
|
42
|
+
'Methods',
|
|
43
|
+
['name', 'parameters', 'description', 'return.type.text'],
|
|
44
|
+
element.members
|
|
45
|
+
.filter((m) => m.kind === 'method' && m.privacy !== 'private')
|
|
46
|
+
.map((m) => ({
|
|
47
|
+
...m,
|
|
48
|
+
parameters: renderTable(
|
|
49
|
+
'',
|
|
50
|
+
['name', 'description', 'type.text'],
|
|
51
|
+
m.parameters
|
|
52
|
+
),
|
|
53
|
+
}))
|
|
54
|
+
)}
|
|
55
|
+
${renderTable('Events', ['name', 'description'], element.events)}
|
|
56
|
+
${renderTable(
|
|
57
|
+
'Slots',
|
|
58
|
+
[['name', '(default)'], 'description'],
|
|
59
|
+
element.slots
|
|
60
|
+
)}
|
|
61
|
+
${renderTable(
|
|
62
|
+
'CSS Shadow Parts',
|
|
63
|
+
['name', 'description'],
|
|
64
|
+
element.cssParts
|
|
65
|
+
)}
|
|
66
|
+
${renderTable(
|
|
67
|
+
'CSS Custom Properties',
|
|
68
|
+
['name', 'description'],
|
|
69
|
+
element.cssProperties
|
|
70
|
+
)}
|
|
71
|
+
`
|
|
72
|
+
)
|
|
73
|
+
.join('')}
|
|
74
|
+
`;
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
/**
|
|
79
|
+
* Reads a (possibly deep) path off of an object.
|
|
80
|
+
*/
|
|
81
|
+
const get = (obj, path) => {
|
|
82
|
+
let fallback = '';
|
|
83
|
+
if (Array.isArray(path)) {
|
|
84
|
+
[path, fallback] = path;
|
|
85
|
+
}
|
|
86
|
+
const parts = path.split('.');
|
|
87
|
+
while (obj && parts.length) {
|
|
88
|
+
obj = obj[parts.shift()];
|
|
89
|
+
}
|
|
90
|
+
return obj == null || obj === '' ? fallback : obj;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Renders a table of data, plucking the given properties from each item in
|
|
95
|
+
* `data`.
|
|
96
|
+
*/
|
|
97
|
+
const renderTable = (name, properties, data) => {
|
|
98
|
+
if (data === undefined || data.length === 0) {
|
|
99
|
+
return '';
|
|
100
|
+
}
|
|
101
|
+
return `
|
|
102
|
+
${name ? `<h3>${name}</h3>` : ''}
|
|
103
|
+
<table>
|
|
104
|
+
<tr>
|
|
105
|
+
${properties
|
|
106
|
+
.map(
|
|
107
|
+
(p) =>
|
|
108
|
+
`<th>${capitalize(
|
|
109
|
+
(Array.isArray(p) ? p[0] : p).split('.')[0]
|
|
110
|
+
)}</th>`
|
|
111
|
+
)
|
|
112
|
+
.join('')}
|
|
113
|
+
</tr>
|
|
114
|
+
${data
|
|
115
|
+
.map(
|
|
116
|
+
(i) => `
|
|
117
|
+
<tr>
|
|
118
|
+
${properties.map((p) => `<td>${get(i, p)}</td>`).join('')}
|
|
119
|
+
</tr>
|
|
120
|
+
`
|
|
121
|
+
)
|
|
122
|
+
.join('')}
|
|
123
|
+
</table>
|
|
124
|
+
`;
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
const capitalize = (s) => s[0].toUpperCase() + s.substring(1);
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
* {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
margin: 0;
|
|
7
|
+
color: #333;
|
|
8
|
+
font-family: 'Open Sans', arial, sans-serif;
|
|
9
|
+
min-width: min-content;
|
|
10
|
+
min-height: 100vh;
|
|
11
|
+
font-size: 18px;
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
align-items: stretch;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
#main-wrapper {
|
|
18
|
+
flex-grow: 1;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
main {
|
|
22
|
+
max-width: 1024px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
a:visited {
|
|
27
|
+
color: inherit;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
header {
|
|
31
|
+
width: 100%;
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
height: 360px;
|
|
37
|
+
margin: 0;
|
|
38
|
+
background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
|
|
39
|
+
color: white;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
footer {
|
|
43
|
+
width: 100%;
|
|
44
|
+
min-height: 120px;
|
|
45
|
+
background: gray;
|
|
46
|
+
color: white;
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: column;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
padding: 12px;
|
|
51
|
+
margin-top: 64px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
h1 {
|
|
55
|
+
font-size: 2.5em;
|
|
56
|
+
font-weight: 400;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
h2 {
|
|
60
|
+
font-size: 1.6em;
|
|
61
|
+
font-weight: 300;
|
|
62
|
+
margin: 64px 0 12px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
h3 {
|
|
66
|
+
font-weight: 300;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
header h1 {
|
|
70
|
+
width: auto;
|
|
71
|
+
font-size: 2.8em;
|
|
72
|
+
margin: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
header h2 {
|
|
76
|
+
width: auto;
|
|
77
|
+
margin: 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
nav {
|
|
81
|
+
display: grid;
|
|
82
|
+
width: 100%;
|
|
83
|
+
max-width: 100%;
|
|
84
|
+
grid-template-columns: repeat(auto-fit, 240px);
|
|
85
|
+
justify-content: center;
|
|
86
|
+
border-bottom: 1px solid #efefef;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
nav > a {
|
|
90
|
+
color: #444;
|
|
91
|
+
display: block;
|
|
92
|
+
flex: 1;
|
|
93
|
+
font-size: 18px;
|
|
94
|
+
padding: 20px 0;
|
|
95
|
+
text-align: center;
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
nav > a:hover {
|
|
100
|
+
text-decoration: underline;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
nav.collection {
|
|
104
|
+
border: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
nav.collection > ul {
|
|
108
|
+
padding: 0;
|
|
109
|
+
list-style: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
nav.collection > ul > li {
|
|
113
|
+
padding: 4px 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
nav.collection > ul > li.selected {
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
nav.collection a {
|
|
121
|
+
text-decoration: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
nav.collection a:hover {
|
|
125
|
+
text-decoration: underline;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
section.columns {
|
|
129
|
+
display: grid;
|
|
130
|
+
grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
|
|
131
|
+
grid-gap: 48px;
|
|
132
|
+
justify-content: center;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
section.columns > div {
|
|
136
|
+
flex: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
section.examples {
|
|
140
|
+
display: grid;
|
|
141
|
+
grid-template-columns: 240px minmax(400px, 784px);
|
|
142
|
+
grid-gap: 48px;
|
|
143
|
+
justify-content: center;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
section.examples h2:first-of-type {
|
|
147
|
+
margin-top: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
table {
|
|
151
|
+
width: 100%;
|
|
152
|
+
border-collapse: collapse;
|
|
153
|
+
}
|
|
154
|
+
th {
|
|
155
|
+
font-weight: 600;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
td, th {
|
|
159
|
+
border: solid 1px #aaa;
|
|
160
|
+
padding: 4px;
|
|
161
|
+
text-align: left;
|
|
162
|
+
vertical-align: top;
|
|
163
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: example.11ty.cjs
|
|
3
|
+
title: <my-element> ⌲ Examples ⌲ Basic
|
|
4
|
+
tags: example
|
|
5
|
+
name: Basic
|
|
6
|
+
description: A basic example
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
<style>
|
|
10
|
+
my-element p {
|
|
11
|
+
border: solid 1px blue;
|
|
12
|
+
padding: 8px;
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
<my-element>
|
|
16
|
+
<p>This is child content</p>
|
|
17
|
+
</my-element>
|
|
18
|
+
|
|
19
|
+
<h3>CSS</h3>
|
|
20
|
+
|
|
21
|
+
```css
|
|
22
|
+
p {
|
|
23
|
+
border: solid 1px blue;
|
|
24
|
+
padding: 8px;
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
<h3>HTML</h3>
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<my-element>
|
|
32
|
+
<p>This is child content</p>
|
|
33
|
+
</my-element>
|
|
34
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: example.11ty.cjs
|
|
3
|
+
title: <my-element> ⌲ Examples ⌲ Name Property
|
|
4
|
+
tags: example
|
|
5
|
+
name: Name Property
|
|
6
|
+
description: Setting the name property
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
<my-element name="Earth"></my-element>
|
|
10
|
+
|
|
11
|
+
<h3>HTML</h3>
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<my-element name="Earth"></my-element>
|
|
15
|
+
```
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: page.11ty.cjs
|
|
3
|
+
title: <my-element> ⌲ Home
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# <my-element>
|
|
7
|
+
|
|
8
|
+
`<my-element>` is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
|
|
9
|
+
|
|
10
|
+
## As easy as HTML
|
|
11
|
+
|
|
12
|
+
<section class="columns">
|
|
13
|
+
<div>
|
|
14
|
+
|
|
15
|
+
`<my-element>` is just an HTML element. You can it anywhere you can use HTML!
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<my-element></my-element>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
</div>
|
|
22
|
+
<div>
|
|
23
|
+
|
|
24
|
+
<my-element></my-element>
|
|
25
|
+
|
|
26
|
+
</div>
|
|
27
|
+
</section>
|
|
28
|
+
|
|
29
|
+
## Configure with attributes
|
|
30
|
+
|
|
31
|
+
<section class="columns">
|
|
32
|
+
<div>
|
|
33
|
+
|
|
34
|
+
`<my-element>` can be configured with attributed in plain HTML.
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<my-element name="HTML"></my-element>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
</div>
|
|
41
|
+
<div>
|
|
42
|
+
|
|
43
|
+
<my-element name="HTML"></my-element>
|
|
44
|
+
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
## Declarative rendering
|
|
49
|
+
|
|
50
|
+
<section class="columns">
|
|
51
|
+
<div>
|
|
52
|
+
|
|
53
|
+
`<my-element>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
import {html, render} from 'lit-html';
|
|
57
|
+
|
|
58
|
+
const name = 'lit-html';
|
|
59
|
+
|
|
60
|
+
render(
|
|
61
|
+
html`
|
|
62
|
+
<h2>This is a <my-element></h2>
|
|
63
|
+
<my-element .name=${name}></my-element>
|
|
64
|
+
`,
|
|
65
|
+
document.body
|
|
66
|
+
);
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
</div>
|
|
70
|
+
<div>
|
|
71
|
+
|
|
72
|
+
<h2>This is a <my-element></h2>
|
|
73
|
+
<my-element name="lit-html"></my-element>
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
</section>
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: page.11ty.cjs
|
|
3
|
+
title: <my-element> ⌲ Install
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Install
|
|
7
|
+
|
|
8
|
+
`<my-element>` is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
|
|
9
|
+
|
|
10
|
+
## Local Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm i my-element
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## CDN
|
|
17
|
+
|
|
18
|
+
npm CDNs like [unpkg.com]() can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.
|
|
19
|
+
|
|
20
|
+
For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specifiers to full URLs.
|
|
21
|
+
|
|
22
|
+
### HTML
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script type="module" src="https://unpkg.com/my-element?module"></script>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### JavaScript
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
import {MyElement} from 'https://unpkg.com/my-element?module';
|
|
32
|
+
```
|
package/index.html
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<title>Lit Starter Kit</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<a href="/dev/index.html">Component Demo</a>
|
|
10
|
+
|
|
11
|
+
<br />
|
|
12
|
+
|
|
13
|
+
<a href="/dev/text-area-niris.html">
|
|
14
|
+
<textarea-to-iris></textarea-to-iris>
|
|
15
|
+
</a>
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
package/my-element.js
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2019 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
var __decorate =
|
|
7
|
+
(this && this.__decorate) ||
|
|
8
|
+
function (decorators, target, key, desc) {
|
|
9
|
+
var c = arguments.length,
|
|
10
|
+
r =
|
|
11
|
+
c < 3
|
|
12
|
+
? target
|
|
13
|
+
: desc === null
|
|
14
|
+
? (desc = Object.getOwnPropertyDescriptor(target, key))
|
|
15
|
+
: desc,
|
|
16
|
+
d;
|
|
17
|
+
if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
|
|
18
|
+
r = Reflect.decorate(decorators, target, key, desc);
|
|
19
|
+
else
|
|
20
|
+
for (var i = decorators.length - 1; i >= 0; i--)
|
|
21
|
+
if ((d = decorators[i]))
|
|
22
|
+
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
23
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
24
|
+
};
|
|
25
|
+
import {LitElement, html, css} from 'lit';
|
|
26
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
27
|
+
/**
|
|
28
|
+
* An example element.
|
|
29
|
+
*
|
|
30
|
+
* @fires count-changed - Indicates when the count changes
|
|
31
|
+
* @slot - This element has a slot
|
|
32
|
+
* @csspart button - The button
|
|
33
|
+
*/
|
|
34
|
+
let MyElement = class MyElement extends LitElement {
|
|
35
|
+
constructor() {
|
|
36
|
+
super(...arguments);
|
|
37
|
+
/**
|
|
38
|
+
* The name to say "Hello" to.
|
|
39
|
+
*/
|
|
40
|
+
this.name = 'World';
|
|
41
|
+
/**
|
|
42
|
+
* The number of times the button has been clicked.
|
|
43
|
+
*/
|
|
44
|
+
this.count = 0;
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
return html`
|
|
48
|
+
<h1>${this.sayHello(this.name)}!</h1>
|
|
49
|
+
<button @click=${this._onClick} part="button">
|
|
50
|
+
Click Count: ${this.count}
|
|
51
|
+
</button>
|
|
52
|
+
<slot></slot>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
_onClick() {
|
|
56
|
+
this.count++;
|
|
57
|
+
this.dispatchEvent(new CustomEvent('count-changed'));
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Formats a greeting
|
|
61
|
+
* @param name The name to say "Hello" to
|
|
62
|
+
*/
|
|
63
|
+
sayHello(name) {
|
|
64
|
+
return `Hello, ${name}`;
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
MyElement.styles = css`
|
|
68
|
+
:host {
|
|
69
|
+
display: block;
|
|
70
|
+
border: solid 1px gray;
|
|
71
|
+
padding: 16px;
|
|
72
|
+
max-width: 800px;
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
75
|
+
__decorate([property()], MyElement.prototype, 'name', void 0);
|
|
76
|
+
__decorate([property({type: Number})], MyElement.prototype, 'count', void 0);
|
|
77
|
+
MyElement = __decorate([customElement('my-element')], MyElement);
|
|
78
|
+
export {MyElement};
|
|
79
|
+
//# sourceMappingURL=my-element.js.map
|
package/package.json
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "niris-public-community-components",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"homepage": "https://iris.apsl.net",
|
|
6
|
+
"description": "Web components for the NIRIS project developed with the Lit library",
|
|
7
|
+
"main": "my-element.js",
|
|
8
|
+
"module": "my-element.js",
|
|
9
|
+
"type": "module",
|
|
10
|
+
"keywords": [
|
|
11
|
+
"web-components",
|
|
12
|
+
"lit-element",
|
|
13
|
+
"typescript",
|
|
14
|
+
"lit",
|
|
15
|
+
"Niris"
|
|
16
|
+
],
|
|
17
|
+
"author": "Francisco Fernandez, <francisco.fernandez01@nagarro.com>",
|
|
18
|
+
"license": "BSD-3-Clause",
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"lit": "^3.0.0"
|
|
21
|
+
},
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "https://gitlab.apsl.net/iris-community/public-community-components"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsc",
|
|
28
|
+
"build:watch": "tsc --watch",
|
|
29
|
+
"clean": "rimraf my-element.{d.ts,d.ts.map,js,js.map} test/my-element.{d.ts,d.ts.map,js,js.map} test/my-element_test.{d.ts,d.ts.map,js,js.map}",
|
|
30
|
+
"lint": "npm run lint:lit-analyzer && npm run lint:eslint",
|
|
31
|
+
"lint:eslint": "eslint 'src/**/*.ts'",
|
|
32
|
+
"lint:lit-analyzer": "lit-analyzer",
|
|
33
|
+
"format": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.eslintignore --write",
|
|
34
|
+
"docs": "npm run docs:clean && npm run build && npm run analyze && npm run docs:build && npm run docs:assets && npm run docs:gen",
|
|
35
|
+
"docs:clean": "rimraf docs",
|
|
36
|
+
"docs:gen": "eleventy --config=.eleventy.cjs",
|
|
37
|
+
"docs:gen:watch": "eleventy --config=.eleventy.cjs --watch",
|
|
38
|
+
"docs:build": "rollup -c --file docs/my-element.bundled.js",
|
|
39
|
+
"docs:assets": "cp node_modules/prismjs/themes/prism-okaidia.css docs/",
|
|
40
|
+
"docs:serve": "wds --root-dir=docs --node-resolve --watch",
|
|
41
|
+
"analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
|
|
42
|
+
"analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch",
|
|
43
|
+
"serve": "wds --watch",
|
|
44
|
+
"serve:prod": "MODE=prod npm run serve",
|
|
45
|
+
"test": "npm run test:dev && npm run test:prod",
|
|
46
|
+
"test:dev": "wtr",
|
|
47
|
+
"test:watch": "wtr --watch",
|
|
48
|
+
"test:prod": "MODE=prod wtr",
|
|
49
|
+
"test:prod:watch": "MODE=prod wtr --watch",
|
|
50
|
+
"checksize": "rollup -c ; cat my-element.bundled.js | gzip -9 | wc -c ; rm my-element.bundled.js"
|
|
51
|
+
},
|
|
52
|
+
"devDependencies": {
|
|
53
|
+
"@11ty/eleventy": "^1.0.1",
|
|
54
|
+
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
|
55
|
+
"@custom-elements-manifest/analyzer": "^0.6.3",
|
|
56
|
+
"@open-wc/testing": "^3.1.5",
|
|
57
|
+
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
58
|
+
"@rollup/plugin-replace": "^5.0.2",
|
|
59
|
+
"@typescript-eslint/eslint-plugin": "^5.48.0",
|
|
60
|
+
"@typescript-eslint/parser": "^5.48.0",
|
|
61
|
+
"@web/dev-server": "^0.1.31",
|
|
62
|
+
"@web/dev-server-legacy": "^1.0.0",
|
|
63
|
+
"@web/test-runner": "^0.15.0",
|
|
64
|
+
"@web/test-runner-playwright": "^0.9.0",
|
|
65
|
+
"@webcomponents/webcomponentsjs": "^2.8.0",
|
|
66
|
+
"eslint": "^8.15.0",
|
|
67
|
+
"lit-analyzer": "^1.2.1",
|
|
68
|
+
"prettier": "^2.6.2",
|
|
69
|
+
"rimraf": "^3.0.2",
|
|
70
|
+
"rollup": "^2.73.0",
|
|
71
|
+
"rollup-plugin-summary": "^1.4.3",
|
|
72
|
+
"rollup-plugin-terser": "^7.0.2",
|
|
73
|
+
"typescript": "~5.3.3"
|
|
74
|
+
},
|
|
75
|
+
"customElements": "custom-elements.json"
|
|
76
|
+
}
|