@operato/contact 2.0.0-alpha.8 → 2.0.0-alpha.80

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.
Files changed (33) hide show
  1. package/CHANGELOG.md +75 -0
  2. package/demo/index.html +14 -4
  3. package/demo/ox-pfp.html +14 -4
  4. package/demo/pfp-edit.html +14 -4
  5. package/demo/pfp-view.html +14 -4
  6. package/dist/src/ox-contact-edit.d.ts +2 -2
  7. package/dist/src/ox-contact-edit.js +7 -7
  8. package/dist/src/ox-contact-edit.js.map +1 -1
  9. package/dist/src/ox-contact-view.d.ts +1 -1
  10. package/dist/src/ox-contact-view.js +16 -16
  11. package/dist/src/ox-contact-view.js.map +1 -1
  12. package/dist/src/ox-contact.d.ts +1 -1
  13. package/dist/src/ox-pfp-edit.d.ts +1 -1
  14. package/dist/src/ox-pfp-edit.js +3 -3
  15. package/dist/src/ox-pfp-edit.js.map +1 -1
  16. package/dist/src/ox-pfp-view.d.ts +1 -1
  17. package/dist/src/ox-pfp.d.ts +2 -2
  18. package/dist/src/ox-pfp.js +14 -17
  19. package/dist/src/ox-pfp.js.map +1 -1
  20. package/dist/stories/ox-contact.stories.d.ts +1 -2
  21. package/dist/stories/ox-contact.stories.js +14 -3
  22. package/dist/stories/ox-contact.stories.js.map +1 -1
  23. package/dist/stories/ox-pfp.stories.d.ts +1 -2
  24. package/dist/stories/ox-pfp.stories.js +15 -3
  25. package/dist/stories/ox-pfp.stories.js.map +1 -1
  26. package/dist/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +16 -17
  28. package/src/ox-contact-edit.ts +7 -7
  29. package/src/ox-contact-view.ts +21 -20
  30. package/src/ox-pfp-edit.ts +3 -3
  31. package/src/ox-pfp.ts +15 -18
  32. package/stories/ox-contact.stories.ts +14 -3
  33. package/stories/ox-pfp.stories.ts +15 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,81 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
7
+
8
+ **Note:** Version bump only for package @operato/contact
9
+
10
+
11
+
12
+
13
+
14
+ ## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
15
+
16
+
17
+ ### :bug: Bug Fix
18
+
19
+ * mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
20
+
21
+
22
+
23
+ ## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
24
+
25
+ **Note:** Version bump only for package @operato/contact
26
+
27
+
28
+
29
+
30
+
31
+ ## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
32
+
33
+ **Note:** Version bump only for package @operato/contact
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+ **Note:** Version bump only for package @operato/contact
42
+
43
+
44
+
45
+
46
+
47
+ ## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
48
+
49
+
50
+ ### :bug: Bug Fix
51
+
52
+ * upgrade lit ([e661c33](https://github.com/hatiolab/operato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
53
+
54
+
55
+
56
+ ## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
57
+
58
+ **Note:** Version bump only for package @operato/contact
59
+
60
+
61
+
62
+
63
+
64
+ ## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
65
+
66
+ **Note:** Version bump only for package @operato/contact
67
+
68
+
69
+
70
+
71
+
72
+ ## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
73
+
74
+
75
+ ### :bug: Bug Fix
76
+
77
+ * upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
78
+
79
+
80
+
6
81
  ## [2.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.7...v2.0.0-alpha.8) (2024-01-20)
7
82
 
8
83
  **Note:** Version bump only for package @operato/contact
package/demo/index.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
@@ -8,15 +8,25 @@
8
8
  }
9
9
  </style>
10
10
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
11
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
11
+ <link
12
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
13
+ rel="stylesheet"
14
+ />
15
+ <link
16
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
17
+ rel="stylesheet"
18
+ />
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
21
+ rel="stylesheet"
22
+ />
12
23
  </head>
13
24
  <body>
14
25
  <div id="demo"></div>
15
26
 
16
27
  <script type="module">
17
28
  import { html, render } from 'lit'
18
- import '@material/mwc-icon'
19
- import '@material/mwc-icon-button'
29
+ import '@material/web/icon/icon.js'
20
30
 
21
31
  import '../dist/src/ox-contact.js'
22
32
 
package/demo/ox-pfp.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
@@ -8,7 +8,18 @@
8
8
  }
9
9
  </style>
10
10
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
11
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
11
+ <link
12
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
13
+ rel="stylesheet"
14
+ />
15
+ <link
16
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
17
+ rel="stylesheet"
18
+ />
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
21
+ rel="stylesheet"
22
+ />
12
23
  </head>
13
24
  <body>
14
25
  <div id="demo"></div>
@@ -21,8 +32,7 @@
21
32
 
22
33
  <script type="module">
23
34
  import { html, render } from 'lit'
24
- import '@material/mwc-icon'
25
- import '@material/mwc-icon-button'
35
+ import '@material/web/icon/icon.js'
26
36
 
27
37
  import '../dist/src/ox-pfp.js'
28
38
 
package/demo/pfp-edit.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
@@ -8,7 +8,18 @@
8
8
  }
9
9
  </style>
10
10
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
11
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
11
+ <link
12
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
13
+ rel="stylesheet"
14
+ />
15
+ <link
16
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
17
+ rel="stylesheet"
18
+ />
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
21
+ rel="stylesheet"
22
+ />
12
23
  </head>
13
24
  <body>
14
25
  <div id="demo"></div>
@@ -26,8 +37,7 @@
26
37
 
27
38
  <script type="module">
28
39
  import { html, render } from 'lit'
29
- import '@material/mwc-icon'
30
- import '@material/mwc-icon-button'
40
+ import '@material/web/icon/icon.js'
31
41
 
32
42
  import '../dist/src/ox-pfp-edit.js'
33
43
  import '../dist/src/ox-pfp-view.js'
package/demo/pfp-view.html CHANGED
@@ -1,4 +1,4 @@
1
- <!DOCTYPE html>
1
+ <!doctype html>
2
2
  <html lang="en-GB">
3
3
  <head>
4
4
  <meta charset="utf-8" />
@@ -8,7 +8,18 @@
8
8
  }
9
9
  </style>
10
10
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
11
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
11
+ <link
12
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
13
+ rel="stylesheet"
14
+ />
15
+ <link
16
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
17
+ rel="stylesheet"
18
+ />
19
+ <link
20
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
21
+ rel="stylesheet"
22
+ />
12
23
  </head>
13
24
  <body>
14
25
  <div id="demo"></div>
@@ -22,8 +33,7 @@
22
33
 
23
34
  <script type="module">
24
35
  import { html, render } from 'lit'
25
- import '@material/mwc-icon'
26
- import '@material/mwc-icon-button'
36
+ import '@material/web/icon/icon.js'
27
37
 
28
38
  import '../dist/src/ox-pfp-view.js'
29
39
 
package/dist/src/ox-contact-edit.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import '@material/mwc-icon-button';
1
+ import '@material/web/icon/icon.js';
2
2
  import './ox-pfp.js';
3
3
  import { LitElement, PropertyValues } from 'lit';
4
4
  import { Contact, ContactItem } from './ox-contact';
@@ -12,7 +12,7 @@ export declare class OxContactEdit extends LitElement {
12
12
  note: HTMLTextAreaElement;
13
13
  pfp: OxPfp;
14
14
  fields: NodeListOf<HTMLDivElement>;
15
- render(): import("lit").TemplateResult<1>;
15
+ render(): import("lit-html").TemplateResult<1>;
16
16
  updated(changes: PropertyValues<this>): void;
17
17
  buildItems(): ContactItem[];
18
18
  buildStageContact(): void;
package/dist/src/ox-contact-edit.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { __decorate } from "tslib";
2
- import '@material/mwc-icon-button';
2
+ import '@material/web/icon/icon.js';
3
3
  import './ox-pfp.js';
4
4
  import { html, css, LitElement } from 'lit';
5
5
  import { customElement, property, state, query, queryAll } from 'lit/decorators.js';
@@ -43,14 +43,14 @@ let OxContactEdit = class OxContactEdit extends LitElement {
43
43
  ${type}
44
44
  ${items.map(item => html `<div @change=${(e) => this.onChangeItem(e, item)} .item=${item} item-field>
45
45
  ${item.value
46
- ? html `<mwc-icon-button
47
- icon="cancel"
46
+ ? html `<md-icon
48
47
  @click=${() => {
49
48
  item.value = '';
50
49
  this.buildStageContact();
51
50
  }}
52
- ></mwc-icon-button>`
53
- : html `<mwc-icon-button></mwc-icon-button>`}
51
+ >cancel</md-icon
52
+ >`
53
+ : html `<md-icon></md-icon>`}
54
54
  <select .value=${item.label} data-item="label">
55
55
  ${['home', 'work', 'other', 'mobile'].map(option => html ` <option value=${option} ?selected=${option === item.label}>${option}</option>`)}
56
56
  </select>
@@ -123,8 +123,7 @@ OxContactEdit.styles = [
123
123
  display: block;
124
124
  padding: 25px;
125
125
 
126
- --mdc-icon-button-size: 16px;
127
- --mdc-icon-size: 16px;
126
+ --md-icon-size: 16px;
128
127
  }
129
128
 
130
129
  :host > div {
@@ -140,6 +139,7 @@ OxContactEdit.styles = [
140
139
  display: flex;
141
140
  flex-direction: row;
142
141
  gap: 10px;
142
+ align-items: center;
143
143
  }
144
144
 
145
145
  :host > div > div:hover {
package/dist/src/ox-contact-edit.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-contact-edit.js","sourceRoot":"","sources":["../../src/ox-contact-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon-button'\nimport './ox-pfp.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { OxPfp } from './ox-pfp.js'\n\n@customElement('ox-contact-edit')\nexport class OxContactEdit extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n padding: 25px;\n\n --mdc-icon-button-size: 16px;\n --mdc-icon-size: 16px;\n }\n\n :host > div {\n padding: 10px 0;\n display: block;\n border-bottom: 1px solid blue;\n }\n\n :host > div > div {\n padding: 4px 0;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n :host > div > div:hover {\n position: relative;\n }\n\n [data-item='label'] {\n width: 100px;\n text-align: right;\n }\n\n [data-item='value'] {\n flex: 1;\n }\n\n :host > div[name] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: bold;\n font-size: 1.4em;\n }\n\n :host ox-pfp {\n display: inline-block;\n width: 100px;\n height: 100px;\n }\n\n :host > div[name] > div[name-content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n\n div[field] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n }\n\n div[field] > span {\n width: 100px;\n text-align: right;\n }\n\n div[field] > input {\n flex: 1;\n }\n\n textarea {\n width: 100%;\n height: 100px;\n }\n `\n ]\n\n @property({ type: Object }) contact: Contact = {}\n\n @state() private stageContact: Contact = JSON.parse(JSON.stringify(this.contact))\n\n @query('#name') name!: HTMLTextAreaElement\n @query('#company') company!: HTMLTextAreaElement\n @query('#note') note!: HTMLTextAreaElement\n @query('ox-pfp') pfp!: OxPfp\n @queryAll('[item-field]') fields!: NodeListOf<HTMLDivElement>\n\n render() {\n const { profile, items = [], name, company, note } = this.stageContact || {}\n var sorted: { [type: string]: ContactItem[] } = {}\n\n items.forEach(item => {\n if (!sorted[item.type as string]) {\n sorted[item.type] = [item]\n } else {\n sorted[item.type as string].push(item)\n }\n })\n\n return html`\n <div name>\n <ox-pfp .profile=${profile} .name=${name}></ox-pfp>\n\n <div name-content>\n <div @change=${(e: Event) => this.buildStageContact()}>\n <span>name</span>\n <input type=\"text\" id=\"name\" .value=${name ?? ''} />\n </div>\n <div @change=${(e: Event) => this.buildStageContact()}>\n <span>company</span>\n <input type=\"text\" id=\"company\" .value=${company ?? ''} />\n </div>\n </div>\n </div>\n ${['email', 'phone', 'address'].map(type => {\n var items = [...(sorted[type] || []), { type: type as ContactField, label: 'work', value: '' }]\n\n return html`\n <div data-type=${type}>\n ${type}\n ${items.map(\n item =>\n html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} item-field>\n ${item.value\n ? html`<mwc-icon-button\n icon=\"cancel\"\n @click=${() => {\n item.value = ''\n this.buildStageContact()\n }}\n ></mwc-icon-button>`\n : html`<mwc-icon-button></mwc-icon-button>`}\n <select .value=${item.label} data-item=\"label\">\n ${['home', 'work', 'other', 'mobile'].map(\n option => html` <option value=${option} ?selected=${option === item.label}>${option}</option>`\n )}\n </select>\n <input type=\"text\" .value=${item.value} data-item=\"value\" />\n </div>`\n )}\n </div>\n `\n })}\n <div note>\n note\n <textarea id=\"note\" .value=${note || ''} @change=${() => this.buildStageContact()}></textarea>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('contact')) {\n this.stageContact = JSON.parse(JSON.stringify(this.contact))\n }\n }\n\n buildItems() {\n const items: ContactItem[] = []\n\n this.fields.forEach(fieldElement => {\n const item = (fieldElement as any).item\n if (item.value) {\n items.push(item)\n }\n })\n\n return items\n }\n\n buildStageContact() {\n this.stageContact = {\n ...this.stageContact,\n profile: this.pfp.profile,\n name: this.name.value,\n company: this.company.value,\n note: this.note.value,\n items: this.buildItems()\n }\n }\n\n onChangeItem(e: Event, item: ContactItem) {\n const target = e.currentTarget as HTMLElement\n const labelElement = target.querySelector('[data-item=\"label\"]') as HTMLSelectElement\n const valueElement = target.querySelector('[data-item=\"value\"]') as HTMLInputElement\n\n item.label = labelElement.value\n item.value = valueElement.value\n\n if (e.target === valueElement || item.value) {\n this.buildStageContact()\n }\n }\n\n save() {\n this.buildStageContact()\n\n this.dispatchEvent(\n new CustomEvent('edit-done', {\n detail: this.stageContact\n })\n )\n }\n\n cancel() {\n this.dispatchEvent(\n new CustomEvent('edit-cancel', {\n detail: this.stageContact\n })\n )\n }\n\n reset() {\n this.buildStageContact()\n\n this.stageContact = JSON.parse(JSON.stringify(this.contact))\n }\n}\n"]}
1
+ {"version":3,"file":"ox-contact-edit.js","sourceRoot":"","sources":["../../src/ox-contact-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-pfp.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state, query, queryAll } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { OxPfp } from './ox-pfp.js'\n\n@customElement('ox-contact-edit')\nexport class OxContactEdit extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n padding: 25px;\n\n --md-icon-size: 16px;\n }\n\n :host > div {\n padding: 10px 0;\n display: block;\n border-bottom: 1px solid blue;\n }\n\n :host > div > div {\n padding: 4px 0;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n }\n\n :host > div > div:hover {\n position: relative;\n }\n\n [data-item='label'] {\n width: 100px;\n text-align: right;\n }\n\n [data-item='value'] {\n flex: 1;\n }\n\n :host > div[name] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: bold;\n font-size: 1.4em;\n }\n\n :host ox-pfp {\n display: inline-block;\n width: 100px;\n height: 100px;\n }\n\n :host > div[name] > div[name-content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n\n div[field] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 10px;\n }\n\n div[field] > span {\n width: 100px;\n text-align: right;\n }\n\n div[field] > input {\n flex: 1;\n }\n\n textarea {\n width: 100%;\n height: 100px;\n }\n `\n ]\n\n @property({ type: Object }) contact: Contact = {}\n\n @state() private stageContact: Contact = JSON.parse(JSON.stringify(this.contact))\n\n @query('#name') name!: HTMLTextAreaElement\n @query('#company') company!: HTMLTextAreaElement\n @query('#note') note!: HTMLTextAreaElement\n @query('ox-pfp') pfp!: OxPfp\n @queryAll('[item-field]') fields!: NodeListOf<HTMLDivElement>\n\n render() {\n const { profile, items = [], name, company, note } = this.stageContact || {}\n var sorted: { [type: string]: ContactItem[] } = {}\n\n items.forEach(item => {\n if (!sorted[item.type as string]) {\n sorted[item.type] = [item]\n } else {\n sorted[item.type as string].push(item)\n }\n })\n\n return html`\n <div name>\n <ox-pfp .profile=${profile} .name=${name}></ox-pfp>\n\n <div name-content>\n <div @change=${(e: Event) => this.buildStageContact()}>\n <span>name</span>\n <input type=\"text\" id=\"name\" .value=${name ?? ''} />\n </div>\n <div @change=${(e: Event) => this.buildStageContact()}>\n <span>company</span>\n <input type=\"text\" id=\"company\" .value=${company ?? ''} />\n </div>\n </div>\n </div>\n ${['email', 'phone', 'address'].map(type => {\n var items = [...(sorted[type] || []), { type: type as ContactField, label: 'work', value: '' }]\n\n return html`\n <div data-type=${type}>\n ${type}\n ${items.map(\n item =>\n html`<div @change=${(e: Event) => this.onChangeItem(e, item)} .item=${item} item-field>\n ${item.value\n ? html`<md-icon\n @click=${() => {\n item.value = ''\n this.buildStageContact()\n }}\n >cancel</md-icon\n >`\n : html`<md-icon></md-icon>`}\n <select .value=${item.label} data-item=\"label\">\n ${['home', 'work', 'other', 'mobile'].map(\n option => html` <option value=${option} ?selected=${option === item.label}>${option}</option>`\n )}\n </select>\n <input type=\"text\" .value=${item.value} data-item=\"value\" />\n </div>`\n )}\n </div>\n `\n })}\n <div note>\n note\n <textarea id=\"note\" .value=${note || ''} @change=${() => this.buildStageContact()}></textarea>\n </div>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('contact')) {\n this.stageContact = JSON.parse(JSON.stringify(this.contact))\n }\n }\n\n buildItems() {\n const items: ContactItem[] = []\n\n this.fields.forEach(fieldElement => {\n const item = (fieldElement as any).item\n if (item.value) {\n items.push(item)\n }\n })\n\n return items\n }\n\n buildStageContact() {\n this.stageContact = {\n ...this.stageContact,\n profile: this.pfp.profile,\n name: this.name.value,\n company: this.company.value,\n note: this.note.value,\n items: this.buildItems()\n }\n }\n\n onChangeItem(e: Event, item: ContactItem) {\n const target = e.currentTarget as HTMLElement\n const labelElement = target.querySelector('[data-item=\"label\"]') as HTMLSelectElement\n const valueElement = target.querySelector('[data-item=\"value\"]') as HTMLInputElement\n\n item.label = labelElement.value\n item.value = valueElement.value\n\n if (e.target === valueElement || item.value) {\n this.buildStageContact()\n }\n }\n\n save() {\n this.buildStageContact()\n\n this.dispatchEvent(\n new CustomEvent('edit-done', {\n detail: this.stageContact\n })\n )\n }\n\n cancel() {\n this.dispatchEvent(\n new CustomEvent('edit-cancel', {\n detail: this.stageContact\n })\n )\n }\n\n reset() {\n this.buildStageContact()\n\n this.stageContact = JSON.parse(JSON.stringify(this.contact))\n }\n}\n"]}
package/dist/src/ox-contact-view.d.ts CHANGED
@@ -4,5 +4,5 @@ import { Contact } from './ox-contact';
4
4
  export declare class OxContactView extends LitElement {
5
5
  static styles: import("lit").CSSResult;
6
6
  contact: Contact;
7
- render(): import("lit").TemplateResult<1>;
7
+ render(): import("lit-html").TemplateResult<1>;
8
8
  }
package/dist/src/ox-contact-view.js CHANGED
@@ -36,15 +36,15 @@ let OxContactView = class OxContactView extends LitElement {
36
36
  .map(type => sorted[type])
37
37
  .filter(items => items && items.length > 0)
38
38
  .map(items => html `<div data-type=${items[0].type}>
39
- <mwc-icon></mwc-icon>
40
- ${items[0].type}
41
- ${items.map(item => html `<div>
42
- <label data-item="label"> ${item.label}</label>
43
- <span data-item="value">${item.value}</span>
44
- </div>`)}
45
- </div>`)}
39
+ <md-icon></md-icon>
40
+ ${items[0].type}
41
+ ${items.map(item => html `<div>
42
+ <label data-item="label"> ${item.label}</label>
43
+ <span data-item="value">${item.value}</span>
44
+ </div>`)}
45
+ </div>`)}
46
46
  <div note>
47
- <mwc-icon></mwc-icon>
47
+ <md-icon></md-icon>
48
48
  note
49
49
  <div>${note || ''}</div>
50
50
  </div>
@@ -54,7 +54,7 @@ let OxContactView = class OxContactView extends LitElement {
54
54
  OxContactView.styles = css `
55
55
  :host {
56
56
  display: block;
57
- --mdc-icon-size: 16px;
57
+ --md-icon-size: 16px;
58
58
  }
59
59
 
60
60
  :host > div {
@@ -123,28 +123,28 @@ OxContactView.styles = css `
123
123
  display: flex;
124
124
  flex-direction: column;
125
125
  }
126
- div[data-type='email'] mwc-icon::before {
126
+ div[data-type='email'] md-icon::before {
127
127
  content: 'mail_outline';
128
128
  }
129
- div[data-type='phone'] mwc-icon::before {
129
+ div[data-type='phone'] md-icon::before {
130
130
  content: 'phone';
131
131
  }
132
- div[data-type='address'] mwc-icon::before {
132
+ div[data-type='address'] md-icon::before {
133
133
  content: 'place';
134
134
  }
135
- div[data-type='company'] mwc-icon::before {
135
+ div[data-type='company'] md-icon::before {
136
136
  content: 'business';
137
137
  }
138
- div[data-type='etc'] mwc-icon::before {
138
+ div[data-type='etc'] md-icon::before {
139
139
  content: 'feed';
140
140
  }
141
- div[note] mwc-icon::before {
141
+ div[note] md-icon::before {
142
142
  content: 'subject';
143
143
  }
144
144
  :host > div > [name-content] {
145
145
  gap: 3px;
146
146
  }
147
- div mwc-icon {
147
+ div md-icon {
148
148
  position: relative;
149
149
  top: 3px;
150
150
  margin-right: 3px;
package/dist/src/ox-contact-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-contact-view.js","sourceRoot":"","sources":["../../src/ox-contact-view.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgHuB,YAAO,GAAY,EAAE,CAAA;IAmDnD,CAAC;IAjDC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACvE,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE,CAAC;gBACjC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxC,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;gCAEiB,OAAO,UAAU,IAAI;;;;sCAIf,IAAI;;;sCAGJ,OAAO;;;;;QAKrC,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;aAC9C,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACzB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;aAC1C,GAAG,CACF,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;;cAExC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;cACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;8CAC0B,IAAI,CAAC,KAAK;4CACZ,IAAI,CAAC,KAAK;uBAC/B,CACV;iBACI,CACR;;;;eAIM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AAjKM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GlB,AA7GY,CA6GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAhHtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAmKzB","sourcesContent":["import './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\n\n@customElement('ox-contact-view')\nexport class OxContactView extends LitElement {\n static styles = css`\n :host {\n display: block;\n --mdc-icon-size: 16px;\n }\n\n :host > div {\n padding: var(--padding-default, 10px);\n display: block;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.1));\n font-size: 0.9em;\n text-transform: capitalize;\n }\n\n :host > div > div {\n padding: 4px 0;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n :host > div > div:hover {\n position: relative;\n }\n\n :host > div > div:hover::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n opacity: 0.15;\n background-image: linear-gradient(var(--primary-color, gray), var(--primary-color, gray));\n z-index: -1;\n }\n\n [data-item='label'] {\n width: 80px;\n text-align: right;\n color: var(--secondary-text-color, #017e7f);\n }\n\n [data-item='value'] {\n flex: 1;\n text-transform: none;\n }\n\n :host > div[name] {\n display: flex;\n align-items: center;\n gap: 15px;\n font-weight: bold;\n font-size: 1.4em;\n }\n\n :host ox-pfp-view {\n display: inline-block;\n height: 75px;\n }\n\n :host > div[name] > div[name-content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n div[data-type='email'] mwc-icon::before {\n content: 'mail_outline';\n }\n div[data-type='phone'] mwc-icon::before {\n content: 'phone';\n }\n div[data-type='address'] mwc-icon::before {\n content: 'place';\n }\n div[data-type='company'] mwc-icon::before {\n content: 'business';\n }\n div[data-type='etc'] mwc-icon::before {\n content: 'feed';\n }\n div[note] mwc-icon::before {\n content: 'subject';\n }\n :host > div > [name-content] {\n gap: 3px;\n }\n div mwc-icon {\n position: relative;\n top: 3px;\n margin-right: 3px;\n opacity: 0.5;\n color: var(--primary-text-color, #333);\n }\n [name-content] div {\n color: var(--primary-text-color, #333);\n font-size: 1.2em;\n }\n [name-content] [company] {\n color: var(--secondary-text-color, #666);\n font-weight: normal;\n font-size: 0.9em;\n }\n `\n\n @property({ type: Object }) contact: Contact = {}\n\n render() {\n const { profile, items = [], name, company, note } = this.contact || {}\n var sorted: { [type: string]: ContactItem[] } = {}\n\n items.forEach(item => {\n if (!sorted[item.type as string]) {\n sorted[item.type] = [item]\n } else {\n sorted[item.type as string].push(item)\n }\n })\n\n return html`\n <div name>\n <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>\n\n <div name-content>\n <div>\n <span data-item=\"value\">${name}</span>\n </div>\n <div company>\n <span data-item=\"value\">${company}</span>\n </div>\n </div>\n </div>\n\n ${['email', 'phone', 'address', 'company', 'etc']\n .map(type => sorted[type])\n .filter(items => items && items.length > 0)\n .map(\n items => html`<div data-type=${items[0].type}>\n <mwc-icon></mwc-icon>\n ${items[0].type}\n ${items.map(\n item =>\n html`<div>\n <label data-item=\"label\"> ${item.label}</label>\n <span data-item=\"value\">${item.value}</span>\n </div>`\n )}\n </div>`\n )}\n <div note>\n <mwc-icon></mwc-icon>\n note\n <div>${note || ''}</div>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"ox-contact-view.js","sourceRoot":"","sources":["../../src/ox-contact-view.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgHuB,YAAO,GAAY,EAAE,CAAA;IAoDnD,CAAC;IAlDC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACvE,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE,CAAC;gBACjC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxC,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;gCAEiB,OAAO,UAAU,IAAI;;;;sCAIf,IAAI;;;sCAGJ,OAAO;;;;;QAKrC,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;aAC9C,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACzB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;aAC1C,GAAG,CACF,KAAK,CAAC,EAAE,CACN,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;;gBAE/B,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gDAC0B,IAAI,CAAC,KAAK;8CACZ,IAAI,CAAC,KAAK;yBAC/B,CACV;mBACI,CACV;;;;eAIM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AAlKM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GlB,AA7GY,CA6GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAhHtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAoKzB","sourcesContent":["import './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\n\n@customElement('ox-contact-view')\nexport class OxContactView extends LitElement {\n static styles = css`\n :host {\n display: block;\n --md-icon-size: 16px;\n }\n\n :host > div {\n padding: var(--padding-default, 10px);\n display: block;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.1));\n font-size: 0.9em;\n text-transform: capitalize;\n }\n\n :host > div > div {\n padding: 4px 0;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n :host > div > div:hover {\n position: relative;\n }\n\n :host > div > div:hover::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n opacity: 0.15;\n background-image: linear-gradient(var(--primary-color, gray), var(--primary-color, gray));\n z-index: -1;\n }\n\n [data-item='label'] {\n width: 80px;\n text-align: right;\n color: var(--secondary-text-color, #017e7f);\n }\n\n [data-item='value'] {\n flex: 1;\n text-transform: none;\n }\n\n :host > div[name] {\n display: flex;\n align-items: center;\n gap: 15px;\n font-weight: bold;\n font-size: 1.4em;\n }\n\n :host ox-pfp-view {\n display: inline-block;\n height: 75px;\n }\n\n :host > div[name] > div[name-content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n div[data-type='email'] md-icon::before {\n content: 'mail_outline';\n }\n div[data-type='phone'] md-icon::before {\n content: 'phone';\n }\n div[data-type='address'] md-icon::before {\n content: 'place';\n }\n div[data-type='company'] md-icon::before {\n content: 'business';\n }\n div[data-type='etc'] md-icon::before {\n content: 'feed';\n }\n div[note] md-icon::before {\n content: 'subject';\n }\n :host > div > [name-content] {\n gap: 3px;\n }\n div md-icon {\n position: relative;\n top: 3px;\n margin-right: 3px;\n opacity: 0.5;\n color: var(--primary-text-color, #333);\n }\n [name-content] div {\n color: var(--primary-text-color, #333);\n font-size: 1.2em;\n }\n [name-content] [company] {\n color: var(--secondary-text-color, #666);\n font-weight: normal;\n font-size: 0.9em;\n }\n `\n\n @property({ type: Object }) contact: Contact = {}\n\n render() {\n const { profile, items = [], name, company, note } = this.contact || {}\n var sorted: { [type: string]: ContactItem[] } = {}\n\n items.forEach(item => {\n if (!sorted[item.type as string]) {\n sorted[item.type] = [item]\n } else {\n sorted[item.type as string].push(item)\n }\n })\n\n return html`\n <div name>\n <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>\n\n <div name-content>\n <div>\n <span data-item=\"value\">${name}</span>\n </div>\n <div company>\n <span data-item=\"value\">${company}</span>\n </div>\n </div>\n </div>\n\n ${['email', 'phone', 'address', 'company', 'etc']\n .map(type => sorted[type])\n .filter(items => items && items.length > 0)\n .map(\n items =>\n html`<div data-type=${items[0].type}>\n <md-icon></md-icon>\n ${items[0].type}\n ${items.map(\n item =>\n html`<div>\n <label data-item=\"label\"> ${item.label}</label>\n <span data-item=\"value\">${item.value}</span>\n </div>`\n )}\n </div>`\n )}\n <div note>\n <md-icon></md-icon>\n note\n <div>${note || ''}</div>\n </div>\n `\n }\n}\n"]}
package/dist/src/ox-contact.d.ts CHANGED
@@ -39,5 +39,5 @@ export declare class OxContact extends LitElement {
39
39
  contact: Contact;
40
40
  editMode?: boolean;
41
41
  editor: OxContactEdit;
42
- render(): import("lit").TemplateResult<1>;
42
+ render(): import("lit-html").TemplateResult<1>;
43
43
  }
package/dist/src/ox-pfp-edit.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare class OxPfpEdit extends LitElement {
13
13
  private dropFileHandler;
14
14
  connectedCallback(): void;
15
15
  disconnectedCallback(): void;
16
- render(): import("lit").TemplateResult<1>;
16
+ render(): import("lit-html").TemplateResult<1>;
17
17
  updated(changes: PropertyValues<this>): void;
18
18
  get value(): Profile;
19
19
  set value(value: Profile);
package/dist/src/ox-pfp-edit.js CHANGED
@@ -75,7 +75,7 @@ let OxPfpEdit = class OxPfpEdit extends LitElement {
75
75
  capture="environment"
76
76
  @change=${(e) => this.onChangeFile(e)}
77
77
  />
78
- <mwc-icon title="select image">image_search</mwc-icon>
78
+ <md-icon title="select image">image_search</md-icon>
79
79
  </label>
80
80
  </div>
81
81
 
@@ -294,11 +294,11 @@ OxPfpEdit.styles = css `
294
294
  align-content: center;
295
295
  }
296
296
 
297
- mwc-icon {
297
+ md-icon {
298
298
  align-self: center;
299
299
 
300
300
  color: var(--file-uploader-icon-color, black);
301
- --mdc-icon-size: var(--file-uploader-icon-size, 20px);
301
+ --md-icon-size: var(--file-uploader-icon-size, 20px);
302
302
  }
303
303
  `;
304
304
  __decorate([
package/dist/src/ox-pfp-edit.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,SAAS,QAAQ,CAAC,CAAQ;;IACxB,IAAK,CAAgB,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QAClC,OAAO;YACL,CAAC,EAAG,CAAgB,CAAC,OAAO;YAC5B,CAAC,EAAG,CAAgB,CAAC,OAAO;SAC7B,CAAA;IACH,CAAC;SAAM,IAAI,CAAA,MAAC,CAAgB,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,EAAE,CAAC;QAClD,MAAM,KAAK,GAAI,CAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAC1C,OAAO;YACL,CAAC,EAAE,KAAK,CAAC,OAAO;YAChB,CAAC,EAAE,KAAK,CAAC,OAAO;SACjB,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAM;IACR,CAAC;AACH,CAAC;AAGM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAyGuB,YAAO,GAAY,EAAE,CAAA;QAOzC,mBAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC3D,oBAAe,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC7D,qBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC/D,sBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QACjE,oBAAe,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;IAuNvE,CAAC;IArNC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;QAElE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACzD,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAE1D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QACzD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QAC1D,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAE5D,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;IAC1D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;QAErE,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAiB,CAAC,CAAA;QAC7D,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAiB,CAAC,CAAA;QAE9D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;QAC7D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;QAC9D,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;QACjE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAgB,CAAC,CAAA;QAChE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAgB,CAAC,CAAA;QAEhE,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAE3D,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO;YACrB,CAAC,CAAC,IAAI,CAAA,oBAAoB;YAC1B,CAAC,CAAC,IAAI,CAAA,sBAAsB,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc;;;;;;;;;;;sBAWvE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;KAOnD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEnE,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YAExB,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,QAAQ,OAAO,IAAI,CAAC,CAAA;YAC5D,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,aAAa,IAAI,MAAM,GAAG,YAAY,IAAI,KAAK,IAAI,GAAG,CAAC,CAAA;QAChG,CAAC;IACH,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;IAED,IAAI,KAAK,CAAC,KAAc;QACtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACtB,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,CAAgB,CAAC,MAAM,IAAI,CAAE,CAAgB,CAAC,MAAM,CAAC,CAAC,CAAA;QAE5F,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACzE,IAAI,CAAC,OAAO,GAAG;YACb,GAAG;YACH,IAAI;YACJ,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC7B,OAAO;YACP,IAAI;SACL,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,OAAO;SACrB,CAAC,CACH,CAAA;IACH,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzB,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAQ;QACjB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,KAAK,CAAA;QACd,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,KAAK,CAAA;QACd,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,SAAS,GAAG,KAAK,CAAA;QACvB,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAA;QAEpB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;QACrB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;QAErB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;QAE1B,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACzE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;QAE1C,IAAI,CAAC,OAAO,GAAG;YACb,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,GAAG;YACnC,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,GAAG,GAAG;YACpC,IAAI;YACJ,OAAO;YACP,IAAI;SACL,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,OAAO;SACrB,CAAC,CACH,CAAA;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAElB,OAAO,IAAI,CAAC,SAAS,CAAA;QACvB,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAQ;QACjB,MAAM,SAAS,GAAI,CAAiB,CAAC,MAAM,CAAA;QAC3C,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;QAC9B,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,MAAM,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QAE9C,IAAI,CAAC,OAAO,GAAG;YACb,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,OAAO;YACP,IAAI,EAAE,SAAS;SAChB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,MAAM,SAAS,GAAG,CAAC,CAAC,aAAiC,CAAA;QACrD,MAAM,SAAS,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACjE,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,MAAM,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;QAE9C,IAAI,CAAC,OAAO,GAAG;YACb,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,OAAO;YACP,IAAI,EAAE,SAAS;SAChB,CAAA;QAED,SAAS,CAAC,KAAK,GAAG,IAAI,CAAA;IACxB,CAAC;IAED,GAAG;QACD,IAAI,CAAC,OAAO,GAAG;YACb,GAAG,IAAI,CAAC,OAAO;YACf,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;SACR,CAAA;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,OAAO,GAAG,EAAE,CAAA;IACnB,CAAC;;AAzUM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsGlB,AAtGY,CAsGZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAc;AAEtB;IAAlB,KAAK,CAAC,UAAU,CAAC;yCAAwB;AA5G/B,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CA2UrB","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n overflow: hidden;\n }\n\n [content] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n [circle] {\n width: 90%;\n height: 90%;\n position: relative;\n }\n\n [circle]::after {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n box-shadow: 0 0 0 1000px lightgray;\n border-radius: 50%;\n opacity: 0.9;\n }\n\n [circle]::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background-repeat: no-repeat;\n background-image: var(\n --background-image,\n linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))\n );\n transform: var(--image-transform, '');\n background-size: 100% 100%;\n }\n\n [monogram] {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1px solid darkgray;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: gray;\n color: white;\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n [monogram] div {\n flex: 1;\n text-transform: uppercase;\n font-size: 2em;\n font-family: system-ui;\n text-align: center;\n vertical-align: center;\n }\n\n [file-load] {\n position: absolute;\n left: 0;\n top: 0;\n\n display: flex;\n place-content: center;\n }\n\n [file-load]:hover {\n opacity: 50%;\n }\n\n #input-file {\n display: none;\n }\n\n label {\n display: flex;\n align-content: center;\n }\n\n mwc-icon {\n align-self: center;\n\n color: var(--file-uploader-icon-color, black);\n --mdc-icon-size: var(--file-uploader-icon-size, 20px);\n }\n `\n\n @property({ type: Object }) profile: Profile = {}\n @property({ type: String }) name?: string\n\n @query('[circle]') circle!: HTMLDivElement\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n private dragStartHandler = this.onDragStart.bind(this) as EventListener\n private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n private dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n FileDropHelper.set(this)\n\n this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.addEventListener('mousedown', this.dragStartHandler)\n this.addEventListener('touchstart', this.dragStartHandler)\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n\n this.addEventListener('file-drop', this.dropFileHandler)\n }\n\n disconnectedCallback() {\n this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.removeEventListener('mousedown', this.dragStartHandler!)\n this.removeEventListener('touchstart', this.dragStartHandler!)\n\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n this.removeEventListener('file-drop', this.dropFileHandler)\n\n super.disconnectedCallback()\n }\n\n render() {\n return html`\n <div content>\n ${this.profile?.picture\n ? html`<div circle></div>`\n : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n </div>\n\n <div file-load>\n <label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=\"image/*\"\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this.onChangeFile(e)}\n />\n <mwc-icon title=\"select image\">image_search</mwc-icon>\n </label>\n </div>\n\n <slot></slot>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n if (picture) {\n const style = this.style\n\n style.setProperty('--background-image', `url('${picture}')`)\n style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n }\n }\n\n get value() {\n return this.profile\n }\n\n set value(value: Profile) {\n this.profile = value\n }\n\n onWheelEvent(e: Event) {\n e.preventDefault()\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n this.profile = {\n top,\n left,\n zoom: zoom * (1 - delta / 20),\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\n }\n\n onDragStart(e: Event) {\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n const { offsetHeight, offsetWidth } = this\n\n this.profile = {\n top: top + (y / offsetHeight) * 100,\n left: left + (x / offsetWidth) * 100,\n zoom,\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n onDropFile(e: Event) {\n const dropFiles = (e as CustomEvent).detail\n const imageFile = dropFiles[0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n }\n\n onChangeFile(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const imageFile = [...Array.from(fileInput.files as FileList)][0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n\n fileInput.files = null\n }\n\n fit() {\n this.profile = {\n ...this.profile,\n left: 0,\n top: 0,\n zoom: 1\n }\n }\n\n clear() {\n this.profile = {}\n }\n}\n"]}
1
+ {"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n@customElement('ox-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n overflow: hidden;\n }\n\n [content] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n [circle] {\n width: 90%;\n height: 90%;\n position: relative;\n }\n\n [circle]::after {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n box-shadow: 0 0 0 1000px lightgray;\n border-radius: 50%;\n opacity: 0.9;\n }\n\n [circle]::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background-repeat: no-repeat;\n background-image: var(\n --background-image,\n linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))\n );\n transform: var(--image-transform, '');\n background-size: 100% 100%;\n }\n\n [monogram] {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1px solid darkgray;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: gray;\n color: white;\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n [monogram] div {\n flex: 1;\n text-transform: uppercase;\n font-size: 2em;\n font-family: system-ui;\n text-align: center;\n vertical-align: center;\n }\n\n [file-load] {\n position: absolute;\n left: 0;\n top: 0;\n\n display: flex;\n place-content: center;\n }\n\n [file-load]:hover {\n opacity: 50%;\n }\n\n #input-file {\n display: none;\n }\n\n label {\n display: flex;\n align-content: center;\n }\n\n md-icon {\n align-self: center;\n\n color: var(--file-uploader-icon-color, black);\n --md-icon-size: var(--file-uploader-icon-size, 20px);\n }\n `\n\n @property({ type: Object }) profile: Profile = {}\n @property({ type: String }) name?: string\n\n @query('[circle]') circle!: HTMLDivElement\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n private dragStartHandler = this.onDragStart.bind(this) as EventListener\n private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n private dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n FileDropHelper.set(this)\n\n this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.addEventListener('mousedown', this.dragStartHandler)\n this.addEventListener('touchstart', this.dragStartHandler)\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n\n this.addEventListener('file-drop', this.dropFileHandler)\n }\n\n disconnectedCallback() {\n this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.removeEventListener('mousedown', this.dragStartHandler!)\n this.removeEventListener('touchstart', this.dragStartHandler!)\n\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n this.removeEventListener('file-drop', this.dropFileHandler)\n\n super.disconnectedCallback()\n }\n\n render() {\n return html`\n <div content>\n ${this.profile?.picture\n ? html`<div circle></div>`\n : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n </div>\n\n <div file-load>\n <label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=\"image/*\"\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this.onChangeFile(e)}\n />\n <md-icon title=\"select image\">image_search</md-icon>\n </label>\n </div>\n\n <slot></slot>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n if (picture) {\n const style = this.style\n\n style.setProperty('--background-image', `url('${picture}')`)\n style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n }\n }\n\n get value() {\n return this.profile\n }\n\n set value(value: Profile) {\n this.profile = value\n }\n\n onWheelEvent(e: Event) {\n e.preventDefault()\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n this.profile = {\n top,\n left,\n zoom: zoom * (1 - delta / 20),\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\n }\n\n onDragStart(e: Event) {\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n const { offsetHeight, offsetWidth } = this\n\n this.profile = {\n top: top + (y / offsetHeight) * 100,\n left: left + (x / offsetWidth) * 100,\n zoom,\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n onDropFile(e: Event) {\n const dropFiles = (e as CustomEvent).detail\n const imageFile = dropFiles[0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n }\n\n onChangeFile(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const imageFile = [...Array.from(fileInput.files as FileList)][0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n\n fileInput.files = null\n }\n\n fit() {\n this.profile = {\n ...this.profile,\n left: 0,\n top: 0,\n zoom: 1\n }\n }\n\n clear() {\n this.profile = {}\n }\n}\n"]}
package/dist/src/ox-pfp-view.d.ts CHANGED
@@ -11,6 +11,6 @@ export declare class OxPfpView extends LitElement {
11
11
  profile: Profile;
12
12
  name?: string;
13
13
  circle: HTMLDivElement;
14
- render(): import("lit").TemplateResult<1>;
14
+ render(): import("lit-html").TemplateResult<1>;
15
15
  updated(changes: PropertyValues<this>): void;
16
16
  }
package/dist/src/ox-pfp.d.ts CHANGED
@@ -1,6 +1,6 @@
1
+ import '@material/web/icon/icon.js';
1
2
  import './ox-pfp-edit.js';
2
3
  import './ox-pfp-view.js';
3
- import '@material/mwc-icon-button';
4
4
  import { LitElement } from 'lit';
5
5
  import { Profile } from './ox-pfp-view.js';
6
6
  import { OxPfpEdit } from './ox-pfp-edit.js';
@@ -10,5 +10,5 @@ export declare class OxPfp extends LitElement {
10
10
  name?: string;
11
11
  editMode?: boolean;
12
12
  edit: OxPfpEdit;
13
- render(): import("lit").TemplateResult<1>;
13
+ render(): import("lit-html").TemplateResult<1>;
14
14
  }