@knapsack/sandbox-components 4.69.0--canary.4433.d5d9fce.1 → 4.69.0--canary.4627.955e589.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/web-components/bundle.js +890 -0
  3. package/dist/web-components/button.d.ts +18 -1
  4. package/dist/web-components/button.d.ts.map +1 -1
  5. package/dist/web-components/button.js +112 -34
  6. package/dist/web-components/button.js.map +1 -1
  7. package/dist/web-components/custom-elements.json +63 -0
  8. package/package.json +20 -11
  9. package/src/web-components/button.ts +98 -40
  10. package/tsconfig.json +4 -1
package/dist/web-components/button.d.ts CHANGED
@@ -1,2 +1,19 @@
1
- export {};
1
+ import { LitElement } from 'lit';
2
+ export declare class SimpleButton extends LitElement {
3
+ static shadowRootOptions: {
4
+ mode: "open";
5
+ delegatesFocus?: boolean;
6
+ serializable?: boolean;
7
+ slotAssignment?: SlotAssignmentMode;
8
+ };
9
+ label: string;
10
+ /**
11
+ * How big
12
+ */
13
+ size: 'small' | 'medium' | 'large';
14
+ type: 'filled' | 'outlined';
15
+ static styles: import("lit").CSSResult;
16
+ _handleClick(): void;
17
+ render(): import("lit").TemplateResult<1>;
18
+ }
2
19
  //# sourceMappingURL=button.d.ts.map
package/dist/web-components/button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,iBAAiB;;;;;MAGwB;IAGhD,KAAK,SAAc;IAEnB;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvC,MAAM,CAAC,MAAM,0BA6DX;IAEF,YAAY;IAKZ,MAAM;CAaP"}
package/dist/web-components/button.js CHANGED
@@ -1,41 +1,119 @@
1
- class MyButton extends HTMLElement {
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { LitElement, css, html } from 'lit';
11
+ import { classMap } from 'lit/directives/class-map.js';
12
+ import { property } from 'lit/decorators.js';
13
+ export class SimpleButton extends LitElement {
2
14
  constructor() {
3
- super();
4
- this.buttonText = this.querySelector('slot')
5
- .assignedNodes()[0]
6
- .textContent.trim();
7
- this.button = document.createElement('button');
8
- this.button.id = 'my-button';
9
- this.button.setAttribute('part', 'my-button');
10
- this.button.textContent = this.buttonText;
11
- this.button.addEventListener('click', this.handleClick.bind(this));
12
- // Apply the styles to the button
13
- this.applyStyles(this.button);
14
- // Append the button to the shadow DOM
15
- this.attachShadow({ mode: 'open' }).appendChild(this.button);
16
- }
17
- handleClick() {
15
+ super(...arguments);
16
+ this.label = 'Click me';
17
+ /**
18
+ * How big
19
+ */
20
+ this.size = 'medium';
21
+ this.type = 'filled';
22
+ }
23
+ _handleClick() {
18
24
  console.log('Button clicked!');
25
+ this.dispatchEvent(new CustomEvent('button-click'));
19
26
  }
20
- applyStyles(element) {
21
- const style = document.createElement('style');
22
- style.textContent = `
23
- #my-button {
24
- background-color: #4CAF50;
25
- border: none;
26
- color: white;
27
- padding: 15px 32px;
28
- text-align: center;
29
- text-decoration: none;
30
- display: inline-block;
31
- font-size: 16px;
32
- margin: 4px 2px;
33
- cursor: pointer;
34
- }
27
+ render() {
28
+ const classes = {
29
+ button: true,
30
+ [`button--size-${this.size}`]: true,
31
+ [`button--type-${this.type}`]: true,
32
+ };
33
+ return html `
34
+ <button @click=${this._handleClick} class=${classMap(classes)}>
35
+ ${this.label}
36
+ </button>
35
37
  `;
36
- element.shadowRoot.appendChild(style);
37
38
  }
38
39
  }
39
- customElements.define('my-button', MyButton);
40
- export {};
40
+ SimpleButton.shadowRootOptions = {
41
+ ...LitElement.shadowRootOptions,
42
+ mode: 'open',
43
+ };
44
+ SimpleButton.styles = css `
45
+ .button {
46
+ border-radius: 4px;
47
+ border-radius: var(--radius-small);
48
+ border: 1px solid #7a34ed;
49
+ border: 1px solid var(--brand-color);
50
+ font-family: Inter;
51
+ font-family: var(--brand-font-family);
52
+ font-weight: 600;
53
+ transition: all 0.3s ease;
54
+ }
55
+
56
+ .button--size-small {
57
+ font-size: 12px;
58
+ padding-top: 4px;
59
+ padding-bottom: 4px;
60
+ padding-top: var(--spacing-xsmall);
61
+ padding-bottom: var(--spacing-xsmall);
62
+ padding-left: 12px;
63
+ padding-right: 12px;
64
+ padding-left: var(--spacing-medium);
65
+ padding-right: var(--spacing-medium);
66
+ }
67
+
68
+ .button--size-medium {
69
+ font-size: 14px;
70
+ padding-top: 8px;
71
+ padding-bottom: 8px;
72
+ padding-top: var(--spacing-small);
73
+ padding-bottom: var(--spacing-small);
74
+ padding-left: 16px;
75
+ padding-right: 16px;
76
+ padding-left: var(--spacing-large);
77
+ padding-right: var(--spacing-large);
78
+ }
79
+
80
+ .button--size-large {
81
+ font-size: 16px;
82
+ padding-top: 12px;
83
+ padding-bottom: 12px;
84
+ padding-top: var(--spacing-medium);
85
+ padding-bottom: var(--spacing-medium);
86
+ padding-left: 24px;
87
+ padding-right: 24px;
88
+ padding-left: var(--spacing-xlarge);
89
+ padding-right: var(--spacing-xlarge);
90
+ }
91
+
92
+ .button--type-outlined {
93
+ background-color: #ffffff;
94
+ background-color: var(--color-white);
95
+ color: #7a34ed;
96
+ color: var(--brand-color);
97
+ }
98
+
99
+ .button--type-filled {
100
+ background-color: #7a34ed;
101
+ background-color: var(--brand-color);
102
+ color: #ffffff;
103
+ color: var(--color-white);
104
+ }
105
+ `;
106
+ __decorate([
107
+ property({ type: String }),
108
+ __metadata("design:type", Object)
109
+ ], SimpleButton.prototype, "label", void 0);
110
+ __decorate([
111
+ property({ type: String }),
112
+ __metadata("design:type", String)
113
+ ], SimpleButton.prototype, "size", void 0);
114
+ __decorate([
115
+ property({ type: String }),
116
+ __metadata("design:type", String)
117
+ ], SimpleButton.prototype, "type", void 0);
118
+ customElements.define('simple-button', SimpleButton);
41
119
  //# sourceMappingURL=button.js.map
package/dist/web-components/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,MAAM,QAAS,SAAQ,WAAW;IAGhC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;aACzC,aAAa,EAAE,CAAC,CAAC,CAAC;aAClB,WAAW,CAAC,IAAI,EAAE,CAAC;QAEtB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/C,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QAC9C,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;QAC1C,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAEnE,iCAAiC;QACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE9B,sCAAsC;QACtC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC;IAED,WAAW;QACT,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACjC,CAAC;IAED,WAAW,CAAC,OAAoB;QAC9B,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,WAAW,GAAG;;;;;;;;;;;;;KAanB,CAAC;QACF,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;CACF;AAED,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}
1
+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAOE,UAAK,GAAG,UAAU,CAAC;QAEnB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAG9C,SAAI,GAA0B,QAAQ,CAAC;IAmFzC,CAAC;IAlBC,YAAY;QACV,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACnC,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,YAAY,UAAU,QAAQ,CAAC,OAAO,CAAC;UACzD,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;;AAjGM,8BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,IAAI,EAAE,MAAM;CACiC,AAHvB,CAGwB;AAczC,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DlB,AA7DY,CA6DX;AAxEF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CACR;AAMnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACY;AAqFzC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC"}
package/dist/web-components/custom-elements.json ADDED
@@ -0,0 +1,63 @@
1
+ {
2
+ "version": "experimental",
3
+ "tags": [
4
+ {
5
+ "name": "simple-button",
6
+ "path": "./../../src/web-components/button.ts",
7
+ "attributes": [
8
+ {
9
+ "name": "label",
10
+ "type": "string",
11
+ "default": "\"Click me\""
12
+ },
13
+ {
14
+ "name": "size",
15
+ "description": "How big",
16
+ "type": "\"small\" | \"medium\" | \"large\"",
17
+ "default": "\"medium\""
18
+ },
19
+ {
20
+ "name": "type",
21
+ "type": "\"filled\" | \"outlined\"",
22
+ "default": "\"filled\""
23
+ }
24
+ ],
25
+ "properties": [
26
+ {
27
+ "name": "shadowRootOptions",
28
+ "type": "{ mode: \"open\"; delegatesFocus?: boolean | undefined; slotAssignment?: SlotAssignmentMode | undefined; }",
29
+ "default": "\"{\\n ...LitElement.shadowRootOptions,\\n mode: 'open',\\n } satisfies typeof LitElement.shadowRootOptions\""
30
+ },
31
+ {
32
+ "name": "label",
33
+ "attribute": "label",
34
+ "type": "string",
35
+ "default": "\"Click me\""
36
+ },
37
+ {
38
+ "name": "size",
39
+ "attribute": "size",
40
+ "description": "How big",
41
+ "type": "\"small\" | \"medium\" | \"large\"",
42
+ "default": "\"medium\""
43
+ },
44
+ {
45
+ "name": "type",
46
+ "attribute": "type",
47
+ "type": "\"filled\" | \"outlined\"",
48
+ "default": "\"filled\""
49
+ },
50
+ {
51
+ "name": "styles",
52
+ "type": "CSSResult",
53
+ "default": "\"css`\\n .button {\\n border-radius: 4px;\\n border-radius: var(--radius-small);\\n border: 1px solid #7a34ed;\\n border: 1px solid var(--brand-color);\\n font-family: Inter;\\n font-family: var(--brand-font-family);\\n font-weight: 600;\\n transition: all 0.3s ease;\\n }\\n\\n .button--size-small {\\n font-size: 12px;\\n padding-top: 4px;\\n padding-bottom: 4px;\\n padding-top: var(--spacing-xsmall);\\n padding-bottom: var(--spacing-xsmall);\\n padding-left: 12px;\\n padding-right: 12px;\\n padding-left: var(--spacing-medium);\\n padding-right: var(--spacing-medium);\\n }\\n\\n .button--size-medium {\\n font-size: 14px;\\n padding-top: 8px;\\n padding-bottom: 8px;\\n padding-top: var(--spacing-small);\\n padding-bottom: var(--spacing-small);\\n padding-left: 16px;\\n padding-right: 16px;\\n padding-left: var(--spacing-large);\\n padding-right: var(--spacing-large);\\n }\\n\\n .button--size-large {\\n font-size: 16px;\\n padding-top: 12px;\\n padding-bottom: 12px;\\n padding-top: var(--spacing-medium);\\n padding-bottom: var(--spacing-medium);\\n padding-left: 24px;\\n padding-right: 24px;\\n padding-left: var(--spacing-xlarge);\\n padding-right: var(--spacing-xlarge);\\n }\\n\\n .button--type-outlined {\\n background-color: #ffffff;\\n background-color: var(--color-white);\\n color: #7a34ed;\\n color: var(--brand-color);\\n }\\n\\n .button--type-filled {\\n background-color: #7a34ed;\\n background-color: var(--brand-color);\\n color: #ffffff;\\n color: var(--color-white);\\n }\\n `\""
54
+ }
55
+ ],
56
+ "events": [
57
+ {
58
+ "name": "button-click"
59
+ }
60
+ ]
61
+ }
62
+ ]
63
+ }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@knapsack/sandbox-components",
3
3
  "description": "",
4
- "version": "4.69.0--canary.4433.d5d9fce.1",
4
+ "version": "4.69.0--canary.4627.955e589.0",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  "./css": "./dist/css/ks-sandbox-styles.css",
@@ -17,14 +17,19 @@
17
17
  "./vue/*": "./src/vue/*",
18
18
  "./web-components": {
19
19
  "types": "./dist/web-components/index.d.ts",
20
- "default": "./dist/web-components/index.js"
21
- }
20
+ "default": "./dist/web-components/bundle.js"
21
+ },
22
+ "./web-components/custom-elements.json": "./dist/web-components/custom-elements.json"
22
23
  },
23
- "sideEffects": false,
24
+ "sideEffects": [
25
+ "./src/web-components/*"
26
+ ],
24
27
  "scripts": {
25
28
  "build": "run-p build:*",
26
29
  "build:css": "postcss ./src/css/index.css --output ./dist/css/ks-sandbox-styles.css",
27
30
  "build:ts": "tsc",
31
+ "build:wc": "esbuild --bundle --outfile=./dist/web-components/bundle.js --format=esm --platform=browser --target=es2020 --loader:.js=jsx --loader:.svg=file --loader:.png=file --loader:.json=json ./src/web-components/index.ts",
32
+ "build:wc-type-info": "web-component-analyzer ./src/web-components --outFile ./dist/web-components/custom-elements.json",
28
33
  "clean": "rm -rf ./dist",
29
34
  "lint": "eslint ./",
30
35
  "start": "run-p watch:*",
@@ -32,23 +37,27 @@
32
37
  "watch:ts": "npm run build:ts -- --watch --preserveWatchOutput"
33
38
  },
34
39
  "dependencies": {
40
+ "@webcomponents/custom-elements": "^1.6.0",
35
41
  "clsx": "^2.1.1",
42
+ "lit": "^2.7.0",
36
43
  "react": "^18.3.1",
37
44
  "vue": "^3.4.27"
38
45
  },
39
46
  "devDependencies": {
40
- "@knapsack/eslint-config-starter": "4.69.0--canary.4433.d5d9fce.1",
41
- "@knapsack/postcss-config-starter": "4.69.0--canary.4433.d5d9fce.1",
42
- "@knapsack/prettier-config": "4.69.0--canary.4433.d5d9fce.1",
43
- "@knapsack/sandbox-tokens": "4.69.0--canary.4433.d5d9fce.1",
44
- "@knapsack/typescript-config-starter": "4.69.0--canary.4433.d5d9fce.1",
47
+ "@knapsack/eslint-config-starter": "4.69.0--canary.4627.955e589.0",
48
+ "@knapsack/postcss-config-starter": "4.69.0--canary.4627.955e589.0",
49
+ "@knapsack/prettier-config": "4.69.0--canary.4627.955e589.0",
50
+ "@knapsack/sandbox-tokens": "4.69.0--canary.4627.955e589.0",
51
+ "@knapsack/typescript-config-starter": "4.69.0--canary.4627.955e589.0",
45
52
  "@types/node": "^20.16.1",
46
53
  "@types/react": "^18.3.3",
54
+ "esbuild": "^0.20.2",
47
55
  "eslint": "^8.57.0",
48
56
  "npm-run-all2": "^5.0.2",
49
57
  "postcss-cli": "^9.1.0",
50
58
  "tailwindcss": "^3.1.7",
51
- "typescript": "^5.5.4"
59
+ "typescript": "^5.5.4",
60
+ "web-component-analyzer": "^2.0.0"
52
61
  },
53
62
  "license": "GPL-2.0-or-later",
54
63
  "publishConfig": {
@@ -59,5 +68,5 @@
59
68
  "directory": "apps/ui/libs/sandbox-components",
60
69
  "type": "git"
61
70
  },
62
- "gitHead": "d5d9fce4a34f8134a19533f1b7c568c9519aaac0"
71
+ "gitHead": "955e589c6780d78c44112c9a2896c283084befbe"
63
72
  }
package/src/web-components/button.ts CHANGED
@@ -1,48 +1,106 @@
1
- class MyButton extends HTMLElement {
2
- buttonText: string;
3
- button: HTMLButtonElement;
4
- constructor() {
5
- super();
6
-
7
- this.buttonText = this.querySelector('slot')
8
- .assignedNodes()[0]
9
- .textContent.trim();
10
-
11
- this.button = document.createElement('button');
12
- this.button.id = 'my-button';
13
- this.button.setAttribute('part', 'my-button');
14
- this.button.textContent = this.buttonText;
15
- this.button.addEventListener('click', this.handleClick.bind(this));
16
-
17
- // Apply the styles to the button
18
- this.applyStyles(this.button);
19
-
20
- // Append the button to the shadow DOM
21
- this.attachShadow({ mode: 'open' }).appendChild(this.button);
22
- }
1
+ import { LitElement, css, html } from 'lit';
2
+ import { classMap } from 'lit/directives/class-map.js';
3
+ import { property } from 'lit/decorators.js';
4
+
5
+ export class SimpleButton extends LitElement {
6
+ static shadowRootOptions = {
7
+ ...LitElement.shadowRootOptions,
8
+ mode: 'open',
9
+ } satisfies typeof LitElement.shadowRootOptions;
10
+
11
+ @property({ type: String })
12
+ label = 'Click me';
13
+
14
+ /**
15
+ * How big
16
+ */
17
+ @property({ type: String })
18
+ size: 'small' | 'medium' | 'large' = 'medium';
19
+
20
+ @property({ type: String })
21
+ type: 'filled' | 'outlined' = 'filled';
22
+
23
+ static styles = css`
24
+ .button {
25
+ border-radius: 4px;
26
+ border-radius: var(--radius-small);
27
+ border: 1px solid #7a34ed;
28
+ border: 1px solid var(--brand-color);
29
+ font-family: Inter;
30
+ font-family: var(--brand-font-family);
31
+ font-weight: 600;
32
+ transition: all 0.3s ease;
33
+ }
23
34
 
24
- handleClick() {
35
+ .button--size-small {
36
+ font-size: 12px;
37
+ padding-top: 4px;
38
+ padding-bottom: 4px;
39
+ padding-top: var(--spacing-xsmall);
40
+ padding-bottom: var(--spacing-xsmall);
41
+ padding-left: 12px;
42
+ padding-right: 12px;
43
+ padding-left: var(--spacing-medium);
44
+ padding-right: var(--spacing-medium);
45
+ }
46
+
47
+ .button--size-medium {
48
+ font-size: 14px;
49
+ padding-top: 8px;
50
+ padding-bottom: 8px;
51
+ padding-top: var(--spacing-small);
52
+ padding-bottom: var(--spacing-small);
53
+ padding-left: 16px;
54
+ padding-right: 16px;
55
+ padding-left: var(--spacing-large);
56
+ padding-right: var(--spacing-large);
57
+ }
58
+
59
+ .button--size-large {
60
+ font-size: 16px;
61
+ padding-top: 12px;
62
+ padding-bottom: 12px;
63
+ padding-top: var(--spacing-medium);
64
+ padding-bottom: var(--spacing-medium);
65
+ padding-left: 24px;
66
+ padding-right: 24px;
67
+ padding-left: var(--spacing-xlarge);
68
+ padding-right: var(--spacing-xlarge);
69
+ }
70
+
71
+ .button--type-outlined {
72
+ background-color: #ffffff;
73
+ background-color: var(--color-white);
74
+ color: #7a34ed;
75
+ color: var(--brand-color);
76
+ }
77
+
78
+ .button--type-filled {
79
+ background-color: #7a34ed;
80
+ background-color: var(--brand-color);
81
+ color: #ffffff;
82
+ color: var(--color-white);
83
+ }
84
+ `;
85
+
86
+ _handleClick() {
25
87
  console.log('Button clicked!');
88
+ this.dispatchEvent(new CustomEvent('button-click'));
26
89
  }
27
90
 
28
- applyStyles(element: HTMLElement) {
29
- const style = document.createElement('style');
30
- style.textContent = `
31
- #my-button {
32
- background-color: #4CAF50;
33
- border: none;
34
- color: white;
35
- padding: 15px 32px;
36
- text-align: center;
37
- text-decoration: none;
38
- display: inline-block;
39
- font-size: 16px;
40
- margin: 4px 2px;
41
- cursor: pointer;
42
- }
91
+ render() {
92
+ const classes = {
93
+ button: true,
94
+ [`button--size-${this.size}`]: true,
95
+ [`button--type-${this.type}`]: true,
96
+ };
97
+
98
+ return html`
99
+ <button @click=${this._handleClick} class=${classMap(classes)}>
100
+ ${this.label}
101
+ </button>
43
102
  `;
44
- element.shadowRoot.appendChild(style);
45
103
  }
46
104
  }
47
105
 
48
- customElements.define('my-button', MyButton);
106
+ customElements.define('simple-button', SimpleButton);
package/tsconfig.json CHANGED
@@ -3,7 +3,10 @@
3
3
  "compilerOptions": {
4
4
  "noImplicitAny": true,
5
5
  "lib": ["es2020", "dom"],
6
- "outDir": "./dist"
6
+ "outDir": "./dist",
7
+ "emitDecoratorMetadata": true,
8
+ "experimentalDecorators": true,
9
+ "useDefineForClassFields": false
7
10
  },
8
11
  "include": ["./src"]
9
12
  }