etherpad-webcomponents 0.0.1 → 0.0.3

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.
@@ -1 +1 @@
1
- {"version":3,"file":"EpButton.d.ts","sourceRoot":"","sources":["../src/EpButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BAsGX;IAE2B,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAC9D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/B,SAAS,UAAQ;IACjB,QAAQ,UAAS;IACjD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE3D,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
1
+ {"version":3,"file":"EpButton.d.ts","sourceRoot":"","sources":["../src/EpButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,MAAM,0BA0GX;IAE2B,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAC9D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/B,SAAS,UAAQ;IACjB,QAAQ,UAAS;IACjD,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE3D,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
package/dist/EpButton.js CHANGED
@@ -17,7 +17,7 @@ let EpButton = class EpButton extends LitElement {
17
17
  }
18
18
  render() {
19
19
  return html `
20
- <button type="${this.type}" ?disabled="${this.disabled}">
20
+ <button part="button" type="${this.type}" ?disabled="${this.disabled}">
21
21
  <slot></slot>
22
22
  </button>
23
23
  `;
@@ -70,14 +70,18 @@ EpButton.styles = css `
70
70
 
71
71
  /* Primary */
72
72
  :host([variant="primary"]) button {
73
- background: var(--text-color, #485365);
73
+ background: var(--text-color, #586a69);
74
74
  color: var(--primary-color, #64d29b);
75
75
  border: 1px solid var(--text-color, #485365);
76
76
  }
77
77
 
78
+ :host([variant="primary"]) button:active {
79
+ box-shadow: var(--primary-button-active,inset 0 1px 12px rgba(0, 0, 0, 0.9));
80
+ background: var(--primary-button-active, #444);
81
+ }
82
+
78
83
  :host([variant="primary"]) button:hover {
79
- background: var(--dark-color, #576273);
80
- border-color: var(--dark-color, #576273);
84
+ background: var(--dark-color, #4a5d5c);
81
85
  }
82
86
 
83
87
  /* Ghost */
@@ -1 +1 @@
1
- {"version":3,"file":"EpButton.js","sourceRoot":"","sources":["../src/EpButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAyGwB,YAAO,GAA6C,SAAS,CAAC;QAC9D,SAAI,GAAiC,QAAQ,CAAC;QAC/B,cAAS,GAAG,KAAK,CAAA;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjD,SAAI,GAAkC,QAAQ,CAAC;IAS7D,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;sBACO,IAAI,CAAC,IAAI,gBAAgB,IAAI,CAAC,QAAQ;;;KAGvD,CAAC;IACJ,CAAC;;AApHM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsGlB,AAtGY,CAsGX;AAE2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA+D;AAC9D;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA+C;AAC/B;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AACjD;IAAX,QAAQ,EAAE;sCAAgD;AA7GhD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsHpB"}
1
+ {"version":3,"file":"EpButton.js","sourceRoot":"","sources":["../src/EpButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QA6GwB,YAAO,GAA6C,SAAS,CAAC;QAC9D,SAAI,GAAiC,QAAQ,CAAC;QAC/B,cAAS,GAAG,KAAK,CAAA;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjD,SAAI,GAAkC,QAAQ,CAAC;IAS7D,CAAC;IAPC,MAAM;QACJ,OAAO,IAAI,CAAA;oCACqB,IAAI,CAAC,IAAI,gBAAgB,IAAI,CAAC,QAAQ;;;KAGrE,CAAC;IACJ,CAAC;;AAxHM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GlB,AA1GY,CA0GX;AAE2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA+D;AAC9D;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA+C;AAC/B;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AACjD;IAAX,QAAQ,EAAE;sCAAgD;AAjHhD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0HpB"}
@@ -2,6 +2,7 @@ import { LitElement } from 'lit';
2
2
  export declare class EpCheckbox extends LitElement {
3
3
  static styles: import("lit").CSSResult;
4
4
  checked: boolean;
5
+ variant: 'default' | 'retro';
5
6
  disabled: boolean;
6
7
  label: string;
7
8
  render(): import("lit").TemplateResult<1>;
@@ -1 +1 @@
1
- {"version":3,"file":"EpCheckbox.d.ts","sourceRoot":"","sources":["../src/EpCheckbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAqEX;IAE0C,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjD,KAAK,SAAM;IAEvB,MAAM;IAcN,OAAO,CAAC,OAAO;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
1
+ {"version":3,"file":"EpCheckbox.d.ts","sourceRoot":"","sources":["../src/EpCheckbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAsFX;IAE0C,OAAO,UAAS;IAC/B,OAAO,EAAE,SAAS,GAAG,OAAO,CAAa;IAC1B,QAAQ,UAAS;IACjD,KAAK,SAAM;IAEvB,MAAM;IAcN,OAAO,CAAC,OAAO;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
@@ -10,6 +10,7 @@ let EpCheckbox = class EpCheckbox extends LitElement {
10
10
  constructor() {
11
11
  super(...arguments);
12
12
  this.checked = false;
13
+ this.variant = 'default';
13
14
  this.disabled = false;
14
15
  this.label = '';
15
16
  }
@@ -57,34 +58,51 @@ EpCheckbox.styles = css `
57
58
 
58
59
  .track {
59
60
  position: relative;
60
- width: 36px;
61
- height: 20px;
62
61
  background: var(--middle-color, #d2d2d2);
63
62
  border-radius: 10px;
64
63
  transition: background 0.2s ease;
65
64
  flex-shrink: 0;
66
65
  }
66
+
67
+ :host([variant="default"]) .track {
68
+ width: 36px;
69
+ height: 20px;
70
+ }
71
+
72
+ :host([variant="retro"]) .track {
73
+ width: 36px;
74
+ height: 10px;
75
+ }
67
76
 
68
77
  :host([checked]) .track {
69
- background: var(--text-color, #485365);
78
+ background: var(--text-color, #64d29b);
70
79
  }
71
-
80
+
72
81
  .thumb {
73
82
  position: absolute;
74
- top: 2px;
75
- left: 2px;
83
+ top: 50%;
76
84
  width: 16px;
77
85
  height: 16px;
78
86
  border-radius: 50%;
79
87
  background: white;
80
88
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
81
89
  transition: transform 0.2s ease;
90
+ transform: translateY(-50%);
91
+ }
92
+
93
+ :host([variant="default"]) .thumb {
94
+ left: 2px;
82
95
  }
83
96
 
84
- :host([checked]) .thumb {
85
- transform: translateX(16px);
97
+ :host([variant="default"][checked]) .thumb {
98
+ transform: translate(16px, -50%);
86
99
  }
87
100
 
101
+ :host([variant="retro"][checked]) .thumb {
102
+ transform: translate(20px, -50%);
103
+ }
104
+
105
+
88
106
  input {
89
107
  position: absolute;
90
108
  width: 1px;
@@ -109,6 +127,9 @@ EpCheckbox.styles = css `
109
127
  __decorate([
110
128
  property({ type: Boolean, reflect: true })
111
129
  ], EpCheckbox.prototype, "checked", void 0);
130
+ __decorate([
131
+ property({ reflect: true })
132
+ ], EpCheckbox.prototype, "variant", void 0);
112
133
  __decorate([
113
134
  property({ type: Boolean, reflect: true })
114
135
  ], EpCheckbox.prototype, "disabled", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"EpCheckbox.js","sourceRoot":"","sources":["../src/EpCheckbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAwEuC,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjD,UAAK,GAAG,EAAE,CAAC;IAwBzB,CAAC;IAtBC,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,OAAO;;;;yBAItB,IAAI,CAAC,OAAO;0BACX,IAAI,CAAC,QAAQ;wBACf,IAAI,CAAC,OAAO;2BACT,IAAI,CAAC,KAAK;QAC7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;KAC5F,CAAC;IACJ,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE;YAC9C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;YAC7B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;SAClC,CAAC,CAAC,CAAC;IACN,CAAC;;AAhGM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqElB,AArEY,CAqEX;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAChB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AACjD;IAAX,QAAQ,EAAE;yCAAY;AA1EZ,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAkGtB"}
1
+ {"version":3,"file":"EpCheckbox.js","sourceRoot":"","sources":["../src/EpCheckbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAyFuC,YAAO,GAAG,KAAK,CAAC;QAC/B,YAAO,GAAwB,SAAS,CAAC;QAC1B,aAAQ,GAAG,KAAK,CAAC;QACjD,UAAK,GAAG,EAAE,CAAC;IAwBzB,CAAC;IAtBC,MAAM;QACJ,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,OAAO;;;;yBAItB,IAAI,CAAC,OAAO;0BACX,IAAI,CAAC,QAAQ;wBACf,IAAI,CAAC,OAAO;2BACT,IAAI,CAAC,KAAK;QAC7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;KAC5F,CAAC;IACJ,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE;YAC9C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;YAC7B,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;SAClC,CAAC,CAAC,CAAC;IACN,CAAC;;AAlHM,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFlB,AAtFY,CAsFX;AAE0C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAC/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA0C;AAC1B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AACjD;IAAX,QAAQ,EAAE;yCAAY;AA5FZ,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAoHtB"}
package/package.json CHANGED
@@ -1,13 +1,28 @@
1
1
  {
2
2
  "name": "etherpad-webcomponents",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Etherpad Web Components built with Lit",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
9
9
  "exports": {
10
- ".": "./dist/index.js"
10
+ ".": "./dist/index.js",
11
+ "./EpButton.js": "./dist/EpButton.js",
12
+ "./EpCard.js": "./dist/EpCard.js",
13
+ "./EpChatMessage.js": "./dist/EpChatMessage.js",
14
+ "./EpCheckbox.js": "./dist/EpCheckbox.js",
15
+ "./EpColorPicker.js": "./dist/EpColorPicker.js",
16
+ "./EpColorWheel.js": "./dist/EpColorWheel.js",
17
+ "./EpDropdown.js": "./dist/EpDropdown.js",
18
+ "./EpDropdownItem.js": "./dist/EpDropdownItem.js",
19
+ "./EpInput.js": "./dist/EpInput.js",
20
+ "./EpModal.js": "./dist/EpModal.js",
21
+ "./EpNotification.js": "./dist/EpNotification.js",
22
+ "./EpToast.js": "./dist/EpToast.js",
23
+ "./EpToolbarSelect.js": "./dist/EpToolbarSelect.js",
24
+ "./EpUserBadge.js": "./dist/EpUserBadge.js",
25
+ "./EpTheme.js": "./dist/EpTheme.js"
11
26
  },
12
27
  "files": [
13
28
  "dist"
@@ -18,6 +33,7 @@
18
33
  "url": "git+https://github.com/ether/webcomponents.git"
19
34
  },
20
35
  "dependencies": {
36
+ "@storybook/web-components": "^10.3.5",
21
37
  "lit": "^3.3.2"
22
38
  },
23
39
  "devDependencies": {