niris-public-community-components 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|