@internetarchive/elements 0.0.1-alpha.8 → 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/README.md +98 -0
- package/dist/src/elements/ia-button/ia-button.d.ts +3 -0
- package/dist/src/elements/ia-button/ia-button.d.ts.map +1 -1
- package/dist/src/elements/ia-button/ia-button.js +3 -0
- package/dist/src/elements/ia-button/ia-button.js.map +1 -1
- package/dist/src/labs/ia-snow/flake.svg +1 -0
- package/dist/src/labs/ia-snow/ia-snow.d.ts +5 -1
- package/dist/src/labs/ia-snow/ia-snow.d.ts.map +1 -1
- package/dist/src/labs/ia-snow/ia-snow.js +29 -4
- package/dist/src/labs/ia-snow/ia-snow.js.map +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,5 +1,103 @@
|
|
|
1
1
|
# 📚 _elements_ 🏛️
|
|
2
2
|
|
|
3
|
+
## Installation
|
|
4
|
+
|
|
5
|
+
```zsh
|
|
6
|
+
npm i -S @internetarchive/elements
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
import "@internetarchive/elements/ia-button/ia-button";
|
|
13
|
+
|
|
14
|
+
...
|
|
15
|
+
|
|
16
|
+
<ia-button @click=() => alert('Clicked!')>Click Me</ia-button>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Development
|
|
20
|
+
|
|
21
|
+
```zsh
|
|
22
|
+
npm i
|
|
23
|
+
npm run dev
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Adding a Component
|
|
27
|
+
|
|
28
|
+
### Structure
|
|
29
|
+
Each component has its own directory in `src/elements` (or `src/labs` if it's still in development). The basic structure looks like this, though components can have additional files and directories if neededd. Take a look at other elements to see what they each contain.
|
|
30
|
+
```
|
|
31
|
+
src
|
|
32
|
+
- elements
|
|
33
|
+
- ia-foobar // the name of the element
|
|
34
|
+
- ia-foobar.ts // the main element class
|
|
35
|
+
- ia-foobar.test.ts // the element's tests
|
|
36
|
+
- ia-foobar-story.ts // an element that demos your element
|
|
37
|
+
```
|
|
38
|
+
Export your component in `src/index.ts`
|
|
39
|
+
|
|
40
|
+
### Story
|
|
41
|
+
To demo your component, we have a component catalog that you can add your demo to. Create a component in your component directory. Name it `COMPONENT-NAME-story.ts`, ie `ia-button-story.ts`.
|
|
42
|
+
|
|
43
|
+
We have a story template you can use for consistency. [More info on `story-template`](#story-template). The easiest way to use this is to copy an existing story and modify it for your needs.
|
|
44
|
+
|
|
45
|
+
Import your story in `/demo/app-root.ts` and add it to the page.
|
|
46
|
+
|
|
47
|
+
#### Story Template<a id="story-template"></a>
|
|
48
|
+
|
|
49
|
+
The story template is a component you can use in your story to demo your component. This lets us present them in a consistent way.
|
|
50
|
+
|
|
51
|
+
It has 5 main configurations:
|
|
52
|
+
|
|
53
|
+
*Properties*
|
|
54
|
+
- `elementTag` (_string_) your component's name, ie `ia-button`
|
|
55
|
+
- `exampleUsage` (_string_) your element's example usage, displays it with syntax highlighting
|
|
56
|
+
- `labs` (_boolean_) if your component is in `labs` to update links
|
|
57
|
+
|
|
58
|
+
*Slots*
|
|
59
|
+
- `demo` put your component demo in here
|
|
60
|
+
- `settings` put your component settings in here
|
|
61
|
+
|
|
62
|
+
Here's an example:
|
|
63
|
+
```typescript
|
|
64
|
+
import '@demo/story-template';
|
|
65
|
+
...
|
|
66
|
+
render() {
|
|
67
|
+
return html`
|
|
68
|
+
<story-template elementTag="ia-button" .exampleUsage=${this.exampleUsage}>
|
|
69
|
+
<div slot="demo">
|
|
70
|
+
<ia-button @click=${() => alert('Button clicked!')}
|
|
71
|
+
>Click Me</ia-button
|
|
72
|
+
>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<div slot="settings">
|
|
76
|
+
<table>
|
|
77
|
+
<tr>
|
|
78
|
+
<td>Color</td>
|
|
79
|
+
<td><input type="color" value="#007bff" id="color" /></td>
|
|
80
|
+
</tr>
|
|
81
|
+
</table>
|
|
82
|
+
<button @click=${this.apply}>Apply</button>
|
|
83
|
+
</div>
|
|
84
|
+
</story-template>
|
|
85
|
+
`;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// return a string of your element's usage and it will
|
|
89
|
+
// be displayed with syntax highlighting
|
|
90
|
+
// can be dynamic
|
|
91
|
+
private get exampleUsage(): string {
|
|
92
|
+
return `<ia-button @click=\${() => alert('Button clicked!')}>
|
|
93
|
+
Click Me
|
|
94
|
+
</ia-button>`;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
private apply(): void {
|
|
98
|
+
// update component settings based on settings change
|
|
99
|
+
}
|
|
100
|
+
```
|
|
3
101
|
|
|
4
102
|
## Component Inventory
|
|
5
103
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAOlC;CACF"}
|
|
1
|
+
{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE;;GAEG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM;IAQN,MAAM,KAAK,MAAM,IAAI,cAAc,CAOlC;CACF"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { customElement } from 'lit/decorators/custom-element.js';
|
|
4
|
+
/**
|
|
5
|
+
* A button element to demo the elements library
|
|
6
|
+
*/
|
|
4
7
|
let IAButton = class IAButton extends LitElement {
|
|
5
8
|
render() {
|
|
6
9
|
return html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE;;GAEG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IACtC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;KAKT,CAAC;IACJ,CAAC;CACF,CAAA;AAjBY,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiBpB","sourcesContent":["import { css, html, LitElement, type CSSResultGroup } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\n/**\n * A button element to demo the elements library\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n render() {\n return html`\n <button>\n <slot></slot>\n </button>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n button {\n padding: 8px 16px;\n background-color: var(--ia-button-background-color, #007bff);\n }\n `;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="36.283" height="36.283"><path d="M35.531 17.391h-3.09l.845-1.464a.748.748 0 1 0-1.297-.75l-1.276 2.214H28.61l2.515-4.354a.751.751 0 0 0-.272-1.024.75.75 0 0 0-1.024.274l-2.948 5.104h-2.023a6.751 6.751 0 0 0-2.713-4.684l1.019-1.76 5.896-.002a.75.75 0 0 0 0-1.5l-5.029.002 1.051-1.82 2.557.002a.75.75 0 0 0 0-1.5l-1.689-.002 1.545-2.676a.75.75 0 1 0-1.302-.75l-1.547 2.676-.844-1.463a.749.749 0 1 0-1.297.75l1.278 2.213-1.051 1.818-2.514-4.354a.75.75 0 0 0-1.298.75l2.946 5.104-1.016 1.758a6.692 6.692 0 0 0-2.706-.57 6.74 6.74 0 0 0-2.707.568l-1.013-1.754 2.946-5.105a.75.75 0 0 0-1.298-.75L13.56 8.697l-1.05-1.818 1.278-2.217a.749.749 0 0 0-1.298-.75l-.845 1.465-1.551-2.678a.75.75 0 0 0-1.024-.273.748.748 0 0 0-.274 1.023l1.545 2.678H8.652a.75.75 0 0 0 0 1.5h2.556l1.05 1.818H7.231a.75.75 0 0 0 0 1.5h5.894l1.017 1.762a6.755 6.755 0 0 0-2.712 4.684H9.406l-2.95-5.104a.75.75 0 1 0-1.299.75l2.516 4.354H5.569l-1.277-2.213a.75.75 0 0 0-1.298.75l.845 1.463H.75a.75.75 0 0 0 0 1.5h3.09l-.845 1.465a.747.747 0 0 0 .275 1.022.75.75 0 0 0 .374.103.75.75 0 0 0 .65-.375l1.277-2.215h2.103l-2.516 4.354a.75.75 0 0 0 1.299.75l2.949-5.104h2.024a6.761 6.761 0 0 0 2.712 4.685l-1.017 1.762H7.232a.75.75 0 0 0 0 1.5h5.026l-1.05 1.818H8.651a.75.75 0 0 0 0 1.5h1.69l-1.545 2.676a.75.75 0 0 0 1.299.75l1.546-2.676.846 1.465a.755.755 0 0 0 .65.375.737.737 0 0 0 .375-.103.747.747 0 0 0 .274-1.022l-1.279-2.215 1.05-1.82 2.515 4.354a.75.75 0 0 0 1.299-.75l-2.947-5.104 1.013-1.756a6.72 6.72 0 0 0 5.415 0l1.014 1.756-2.947 5.104a.75.75 0 0 0 1.298.75l2.515-4.354 1.053 1.82-1.277 2.213a.75.75 0 0 0 1.298.75l.844-1.463 1.545 2.678c.141.24.393.375.65.375a.75.75 0 0 0 .649-1.125l-1.548-2.678h1.689a.75.75 0 0 0 0-1.5h-2.557l-1.051-1.82 5.029.002a.75.75 0 0 0 0-1.5l-5.896-.002-1.019-1.76a6.75 6.75 0 0 0 2.711-4.685h2.023l2.947 5.104a.753.753 0 0 0 1.025.273.749.749 0 0 0 .272-1.023l-2.515-4.354h2.104l1.279 2.215a.75.75 0 0 0 .649.375c.127 0 .256-.03.375-.103a.748.748 0 0 0 .273-1.022l-.848-1.465h3.092a.75.75 0 0 0 .003-1.5zm-12.136.75c0 .257-.041.502-.076.75a5.223 5.223 0 0 1-1.943 3.358 5.242 5.242 0 0 1-1.291.766 5.224 5.224 0 0 1-1.949.384 5.157 5.157 0 0 1-3.239-1.15 5.22 5.22 0 0 1-1.943-3.358c-.036-.247-.076-.493-.076-.75s.04-.503.076-.75a5.22 5.22 0 0 1 1.944-3.359c.393-.312.82-.576 1.291-.765a5.219 5.219 0 0 1 1.948-.384c.69 0 1.344.142 1.948.384.471.188.898.454 1.291.765a5.222 5.222 0 0 1 1.943 3.359c.035.247.076.493.076.75z" fill=":color:"/></svg>
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { LitElement, type PropertyValues } from 'lit';
|
|
1
|
+
import { LitElement, type CSSResultGroup, type PropertyValues } from 'lit';
|
|
2
2
|
import { type SnowflakesParams } from 'magic-snowflakes';
|
|
3
3
|
import '../../elements/ia-button/ia-button';
|
|
4
|
+
/**
|
|
5
|
+
* An element that shows snowflakes to demo the elements library
|
|
6
|
+
*/
|
|
4
7
|
export declare class IASnow extends LitElement {
|
|
5
8
|
snowConfig?: SnowflakesParams;
|
|
6
9
|
private snowing;
|
|
@@ -9,5 +12,6 @@ export declare class IASnow extends LitElement {
|
|
|
9
12
|
protected willUpdate(_changedProperties: PropertyValues): void;
|
|
10
13
|
private startSnowing;
|
|
11
14
|
private stopSnowing;
|
|
15
|
+
static get styles(): CSSResultGroup;
|
|
12
16
|
}
|
|
13
17
|
//# sourceMappingURL=ia-snow.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-snow.d.ts","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ia-snow.d.ts","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAmB,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAErE,OAAO,mCAAmC,CAAC;AAI3C;;GAEG;AACH,qBACa,MAAO,SAAQ,UAAU;IACR,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAG1D,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAC,CAAa;IAEhC,MAAM;IA4BN,SAAS,CAAC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ9D,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAKnB,MAAM,KAAK,MAAM,IAAI,cAAc,CAQlC;CACF"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { html, LitElement } from 'lit';
|
|
2
|
+
import { css, html, LitElement, } from 'lit';
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
import { customElement } from 'lit/decorators/custom-element.js';
|
|
5
5
|
import { state } from 'lit/decorators/state.js';
|
|
6
6
|
import Snowflakes from 'magic-snowflakes';
|
|
7
7
|
import '../../elements/ia-button/ia-button';
|
|
8
|
+
import flakeIcon from './flake.svg';
|
|
9
|
+
/**
|
|
10
|
+
* An element that shows snowflakes to demo the elements library
|
|
11
|
+
*/
|
|
8
12
|
let IASnow = class IASnow extends LitElement {
|
|
9
13
|
constructor() {
|
|
10
14
|
super(...arguments);
|
|
@@ -24,18 +28,30 @@ let IASnow = class IASnow extends LitElement {
|
|
|
24
28
|
>
|
|
25
29
|
${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}
|
|
26
30
|
</ia-button>
|
|
31
|
+
|
|
32
|
+
<ia-button
|
|
33
|
+
@click=${() => {
|
|
34
|
+
this.stopSnowing();
|
|
35
|
+
this.snowflakes?.destroy();
|
|
36
|
+
this.snowflakes = undefined;
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
Clear Snowflakes
|
|
40
|
+
</ia-button>
|
|
41
|
+
|
|
42
|
+
<img src=${flakeIcon} alt="Snowflakes icon" />
|
|
27
43
|
`;
|
|
28
44
|
}
|
|
29
45
|
willUpdate(_changedProperties) {
|
|
30
|
-
if (_changedProperties.has('snowConfig')
|
|
46
|
+
if (_changedProperties.has('snowConfig')) {
|
|
31
47
|
this.snowflakes?.destroy();
|
|
32
|
-
this.snowflakes =
|
|
48
|
+
this.snowflakes = undefined;
|
|
33
49
|
this.startSnowing();
|
|
34
50
|
}
|
|
35
51
|
}
|
|
36
52
|
startSnowing() {
|
|
37
53
|
if (!this.snowflakes) {
|
|
38
|
-
this.snowflakes = new Snowflakes();
|
|
54
|
+
this.snowflakes = new Snowflakes(this.snowConfig);
|
|
39
55
|
}
|
|
40
56
|
this.snowflakes?.start();
|
|
41
57
|
this.snowing = true;
|
|
@@ -44,6 +60,15 @@ let IASnow = class IASnow extends LitElement {
|
|
|
44
60
|
this.snowflakes?.stop();
|
|
45
61
|
this.snowing = false;
|
|
46
62
|
}
|
|
63
|
+
static get styles() {
|
|
64
|
+
return css `
|
|
65
|
+
img {
|
|
66
|
+
width: 16px;
|
|
67
|
+
filter: invert(1);
|
|
68
|
+
vertical-align: middle;
|
|
69
|
+
}
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
47
72
|
};
|
|
48
73
|
__decorate([
|
|
49
74
|
property({ type: Object })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":";AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,UAAqC,MAAM,kBAAkB,CAAC;AAErE,OAAO,mCAAmC,CAAC;AAE3C,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIG,YAAO,GAAG,KAAK,CAAC;IA8D1B,CAAC;IA1DC,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;;UAEC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;;;;iBAI9C,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC9B,CAAC;;;;;iBAKQ,SAAS;KACrB,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,kBAAkC;QACrD,IAAI,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AAjE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAGlD;IADP,KAAK,EAAE;uCACgB;AAJb,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAkElB","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type PropertyValues,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\n\nimport Snowflakes, { type SnowflakesParams } from 'magic-snowflakes';\n\nimport '@src/elements/ia-button/ia-button';\n\nimport flakeIcon from './flake.svg';\n\n/**\n * An element that shows snowflakes to demo the elements library\n */\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n @state()\n private snowing = false;\n\n private snowflakes?: Snowflakes;\n\n render() {\n return html`\n <ia-button\n @click=${() => {\n if (this.snowing) {\n this.stopSnowing();\n } else {\n this.startSnowing();\n }\n }}\n >\n ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n </ia-button>\n\n <ia-button\n @click=${() => {\n this.stopSnowing();\n this.snowflakes?.destroy();\n this.snowflakes = undefined;\n }}\n >\n Clear Snowflakes\n </ia-button>\n\n <img src=${flakeIcon} alt=\"Snowflakes icon\" />\n `;\n }\n\n protected willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('snowConfig')) {\n this.snowflakes?.destroy();\n this.snowflakes = undefined;\n this.startSnowing();\n }\n }\n\n private startSnowing() {\n if (!this.snowflakes) {\n this.snowflakes = new Snowflakes(this.snowConfig);\n }\n this.snowflakes?.start();\n this.snowing = true;\n }\n\n private stopSnowing() {\n this.snowflakes?.stop();\n this.snowing = false;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n img {\n width: 16px;\n filter: invert(1);\n vertical-align: middle;\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@internetarchive/elements",
|
|
3
|
-
"version": "0.0.1
|
|
3
|
+
"version": "0.0.1",
|
|
4
4
|
"description": "A web component library from the Internet Archive.",
|
|
5
5
|
"license": "AGPL-3.0-only",
|
|
6
6
|
"types": "./dist/src/elements/index.d.ts",
|
|
@@ -44,6 +44,7 @@
|
|
|
44
44
|
"eslint-plugin-lit-a11y": "^4.1.4",
|
|
45
45
|
"eslint-plugin-no-only-tests": "^3.3.0",
|
|
46
46
|
"eslint-plugin-wc": "^2.2.1",
|
|
47
|
+
"highlight.js": "^11.11.1",
|
|
47
48
|
"madge": "^8.0.0",
|
|
48
49
|
"playwright": "^1.56.1",
|
|
49
50
|
"prettier": "^3.6.2",
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
],
|
|
71
72
|
"wireit": {
|
|
72
73
|
"build": {
|
|
73
|
-
"command": "tsc --build --pretty && tsc-alias",
|
|
74
|
+
"command": "tsc --build --pretty && tsc-alias && rsync -zarvm --prune-empty-dirs --include \"*/\" --include \"*.svg\" --exclude=\"*\" src dist",
|
|
74
75
|
"dependencies": [
|
|
75
76
|
"circular"
|
|
76
77
|
],
|