@operato/contact 8.0.0 → 9.0.0-beta.10
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/CHANGELOG.md +94 -9
- package/dist/src/ox-contact-edit.d.ts +1 -1
- package/dist/src/ox-contact-edit.js +51 -6
- package/dist/src/ox-contact-edit.js.map +1 -1
- package/dist/src/ox-contact-view.d.ts +1 -1
- package/dist/src/ox-contact-view.js +13 -3
- package/dist/src/ox-contact-view.js.map +1 -1
- package/dist/src/ox-contact.js +27 -6
- package/dist/src/ox-contact.js.map +1 -1
- package/dist/src/ox-pfp-edit.d.ts +382 -13
- package/dist/src/ox-pfp-edit.js +122 -129
- package/dist/src/ox-pfp-edit.js.map +1 -1
- package/dist/src/ox-pfp-view.js +25 -3
- package/dist/src/ox-pfp-view.js.map +1 -1
- package/dist/src/ox-pfp.js +32 -5
- package/dist/src/ox-pfp.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +14 -17
- package/dist/src/ox-zoomable-image.d.ts +0 -22
- package/dist/src/ox-zoomable-image.js +0 -155
- package/dist/src/ox-zoomable-image.js.map +0 -1
- package/dist/stories/ox-zoomable-image.stories.d.ts +0 -22
- package/dist/stories/ox-zoomable-image.stories.js +0 -27
- package/dist/stories/ox-zoomable-image.stories.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,7 +3,16 @@
|
|
|
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
|
-
## [
|
|
6
|
+
## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package @operato/contact
|
|
9
18
|
|
|
@@ -11,26 +20,76 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
11
20
|
|
|
12
21
|
|
|
13
22
|
|
|
14
|
-
|
|
23
|
+
## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### :bug: Bug Fix
|
|
27
|
+
|
|
28
|
+
* esm module ([1319b00](https://github.com/hatiolab/operato/commit/1319b00d6955a514f63b3469fb514a28f84168a2))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### :bug: Bug Fix
|
|
36
|
+
|
|
37
|
+
* esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
|
|
42
|
+
|
|
43
|
+
**Note:** Version bump only for package @operato/contact
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### :bug: Bug Fix
|
|
53
|
+
|
|
54
|
+
* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
|
|
15
59
|
|
|
16
60
|
|
|
17
61
|
### :bug: Bug Fix
|
|
18
62
|
|
|
19
|
-
* missing .npmignore ([
|
|
20
|
-
* typo .npmignore ([df91cae](https://github.com/hatiolab/operato/commit/df91caea0f5938a3febd9307184e5b036a65e2bd))
|
|
63
|
+
* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
|
|
21
64
|
|
|
22
65
|
|
|
23
66
|
|
|
24
|
-
|
|
67
|
+
## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
|
|
68
|
+
|
|
69
|
+
**Note:** Version bump only for package @operato/contact
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
## [8.0.0-alpha.50](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.49...v8.0.0-alpha.50) (2024-11-16)
|
|
76
|
+
|
|
77
|
+
**Note:** Version bump only for package @operato/contact
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
## [8.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
|
|
25
84
|
|
|
26
85
|
|
|
27
86
|
### :bug: Bug Fix
|
|
28
87
|
|
|
29
|
-
*
|
|
88
|
+
* update dev-dependencies version ([d6fe342](https://github.com/hatiolab/operato/commit/d6fe342de738c6bad3528550a862b5a1d2573161))
|
|
30
89
|
|
|
31
90
|
|
|
32
91
|
|
|
33
|
-
|
|
92
|
+
## [8.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.32...v8.0.0-alpha.33) (2024-10-14)
|
|
34
93
|
|
|
35
94
|
**Note:** Version bump only for package @operato/contact
|
|
36
95
|
|
|
@@ -38,12 +97,38 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
38
97
|
|
|
39
98
|
|
|
40
99
|
|
|
41
|
-
|
|
100
|
+
## [8.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.28...v8.0.0-alpha.29) (2024-10-10)
|
|
42
101
|
|
|
43
102
|
|
|
44
103
|
### :bug: Bug Fix
|
|
45
104
|
|
|
46
|
-
*
|
|
105
|
+
* apply pointer-event ([ecc73a1](https://github.com/hatiolab/operato/commit/ecc73a1d2df0d8ce7ba462965062a91461c504c3))
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
## [8.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.26...v8.0.0-alpha.27) (2024-10-06)
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
### :bug: Bug Fix
|
|
113
|
+
|
|
114
|
+
* calendar css variables ([9ea1918](https://github.com/hatiolab/operato/commit/9ea191844c72de5f920a8da85ad50209ba77cc07))
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
## [8.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.3...v8.0.0-alpha.4) (2024-09-07)
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
### :bug: Bug Fix
|
|
122
|
+
|
|
123
|
+
* dataset components & styles ([be44acd](https://github.com/hatiolab/operato/commit/be44acde8f25980e5b27afc481a2c149f8c23dbd))
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
## [8.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v7.1.1...v8.0.0-alpha.0) (2024-09-01)
|
|
128
|
+
|
|
129
|
+
**Note:** Version bump only for package @operato/contact
|
|
130
|
+
|
|
131
|
+
|
|
47
132
|
|
|
48
133
|
|
|
49
134
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '@material/web/icon/icon.js';
|
|
2
2
|
import './ox-pfp.js';
|
|
3
3
|
import { LitElement, PropertyValues } from 'lit';
|
|
4
|
-
import { Contact, ContactItem } from './ox-contact';
|
|
4
|
+
import { Contact, ContactItem } from './ox-contact.js';
|
|
5
5
|
import { OxPfp } from './ox-pfp.js';
|
|
6
6
|
export declare class OxContactEdit extends LitElement {
|
|
7
7
|
static styles: import("lit").CSSResult[];
|
|
@@ -8,8 +8,48 @@ import { i18next } from '@operato/i18n';
|
|
|
8
8
|
let OxContactEdit = class OxContactEdit extends LitElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super(...arguments);
|
|
11
|
-
this
|
|
12
|
-
|
|
11
|
+
Object.defineProperty(this, "contact", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
configurable: true,
|
|
14
|
+
writable: true,
|
|
15
|
+
value: {}
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(this, "stageContact", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
configurable: true,
|
|
20
|
+
writable: true,
|
|
21
|
+
value: JSON.parse(JSON.stringify(this.contact))
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(this, "name", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
configurable: true,
|
|
26
|
+
writable: true,
|
|
27
|
+
value: void 0
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(this, "company", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
configurable: true,
|
|
32
|
+
writable: true,
|
|
33
|
+
value: void 0
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(this, "note", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
configurable: true,
|
|
38
|
+
writable: true,
|
|
39
|
+
value: void 0
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(this, "pfp", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
configurable: true,
|
|
44
|
+
writable: true,
|
|
45
|
+
value: void 0
|
|
46
|
+
});
|
|
47
|
+
Object.defineProperty(this, "fields", {
|
|
48
|
+
enumerable: true,
|
|
49
|
+
configurable: true,
|
|
50
|
+
writable: true,
|
|
51
|
+
value: void 0
|
|
52
|
+
});
|
|
13
53
|
}
|
|
14
54
|
render() {
|
|
15
55
|
const { profile, items = [], name, company, note } = this.stageContact || {};
|
|
@@ -113,9 +153,13 @@ let OxContactEdit = class OxContactEdit extends LitElement {
|
|
|
113
153
|
this.stageContact = JSON.parse(JSON.stringify(this.contact));
|
|
114
154
|
}
|
|
115
155
|
};
|
|
116
|
-
OxContactEdit
|
|
117
|
-
|
|
118
|
-
|
|
156
|
+
Object.defineProperty(OxContactEdit, "styles", {
|
|
157
|
+
enumerable: true,
|
|
158
|
+
configurable: true,
|
|
159
|
+
writable: true,
|
|
160
|
+
value: [
|
|
161
|
+
ScrollbarStyles,
|
|
162
|
+
css `
|
|
119
163
|
:host {
|
|
120
164
|
display: block;
|
|
121
165
|
padding: 25px;
|
|
@@ -223,7 +267,8 @@ OxContactEdit.styles = [
|
|
|
223
267
|
resize: none;
|
|
224
268
|
}
|
|
225
269
|
`
|
|
226
|
-
]
|
|
270
|
+
]
|
|
271
|
+
});
|
|
227
272
|
__decorate([
|
|
228
273
|
property({ type: Object })
|
|
229
274
|
], OxContactEdit.prototype, "contact", void 0);
|
|
@@ -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/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 { i18next } from '@operato/i18n'\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\n input,\n select,\n textarea {\n padding: 8px;\n border-radius: 4px;\n border: 1px solid var(--md-sys-color-outline, #ccc);\n background-color: #fff;\n color: var(--md-sys-color-on-surface);\n font-size: 16px; /* for iPhone */\n box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.1);\n transition:\n border-color 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n input:focus,\n select:focus,\n textarea:focus {\n border-color: var(--md-sys-color-primary, #6200ea);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\n outline: none;\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: grid;\n grid-template-columns: minmax(auto, 160px) 1fr;\n gap: var(--spacing-medium);\n align-items: center;\n\n span {\n text-align: right;\n }\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 min-height: 100px;\n box-sizing: border-box;\n resize: none;\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 <span>${i18next.t('label.name')}</span>\n <input type=\"text\" id=\"name\" .value=${name ?? ''} @change=${(e: Event) => this.buildStageContact()} />\n <span>${i18next.t('label.company')}</span>\n <input type=\"text\" id=\"company\" .value=${company ?? ''} @change=${(e: Event) => this.buildStageContact()} />\n </div>\n </div>\n ${['department', '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"]}
|
|
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.js'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\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\n input,\n select,\n textarea {\n padding: 8px;\n border-radius: 4px;\n border: 1px solid var(--md-sys-color-outline, #ccc);\n background-color: #fff;\n color: var(--md-sys-color-on-surface);\n font-size: 16px; /* for iPhone */\n box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.1);\n transition:\n border-color 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n input:focus,\n select:focus,\n textarea:focus {\n border-color: var(--md-sys-color-primary, #6200ea);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);\n outline: none;\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: grid;\n grid-template-columns: minmax(auto, 160px) 1fr;\n gap: var(--spacing-medium);\n align-items: center;\n\n span {\n text-align: right;\n }\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 min-height: 100px;\n box-sizing: border-box;\n resize: none;\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 <span>${i18next.t('label.name')}</span>\n <input type=\"text\" id=\"name\" .value=${name ?? ''} @change=${(e: Event) => this.buildStageContact()} />\n <span>${i18next.t('label.company')}</span>\n <input type=\"text\" id=\"company\" .value=${company ?? ''} @change=${(e: Event) => this.buildStageContact()} />\n </div>\n </div>\n ${['department', '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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './ox-pfp-view.js';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
|
-
import { Contact } from './ox-contact';
|
|
3
|
+
import { Contact } from './ox-contact.js';
|
|
4
4
|
export declare class OxContactView extends LitElement {
|
|
5
5
|
static styles: import("lit").CSSResult;
|
|
6
6
|
contact: Contact;
|
|
@@ -5,7 +5,12 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
5
5
|
let OxContactView = class OxContactView extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
|
-
this
|
|
8
|
+
Object.defineProperty(this, "contact", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
configurable: true,
|
|
11
|
+
writable: true,
|
|
12
|
+
value: {}
|
|
13
|
+
});
|
|
9
14
|
}
|
|
10
15
|
render() {
|
|
11
16
|
const { profile, items = [], name, company, note } = this.contact || {};
|
|
@@ -51,7 +56,11 @@ let OxContactView = class OxContactView extends LitElement {
|
|
|
51
56
|
`;
|
|
52
57
|
}
|
|
53
58
|
};
|
|
54
|
-
OxContactView
|
|
59
|
+
Object.defineProperty(OxContactView, "styles", {
|
|
60
|
+
enumerable: true,
|
|
61
|
+
configurable: true,
|
|
62
|
+
writable: true,
|
|
63
|
+
value: css `
|
|
55
64
|
:host {
|
|
56
65
|
display: block;
|
|
57
66
|
--md-icon-size: 16px;
|
|
@@ -177,7 +186,8 @@ OxContactView.styles = css `
|
|
|
177
186
|
font-weight: normal;
|
|
178
187
|
font-size: 0.9em;
|
|
179
188
|
}
|
|
180
|
-
|
|
189
|
+
`
|
|
190
|
+
});
|
|
181
191
|
__decorate([
|
|
182
192
|
property({ type: Object })
|
|
183
193
|
], OxContactView.prototype, "contact", void 0);
|
|
@@ -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;;QAiIuB,
|
|
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;;QAiIuB;;;;mBAAmB,EAAE;WAAA;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,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;aAC5D,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;;AAnLM;;;;WAAS,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8HlB;EA9HY,CA8HZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAjItC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqLzB","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.js'\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 color: var(--md-sys-color-on-surface);\n background-color: var(--md-sys-color-surface);\n }\n\n :host > div {\n padding: var(--spacing-medium, 8px);\n display: block;\n border-bottom: 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(--md-sys-color-primary, gray), var(--md-sys-color-primary, gray));\n }\n\n [data-item='label'] {\n width: 80px;\n text-align: right;\n color: var(--md-sys-color-primary, #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\n --ox-pfp-size: 75px;\n }\n\n :host > div[name] > div[name-content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n\n div[data-type='email'] md-icon::before {\n content: 'mail_outline';\n }\n\n div[data-type='phone'] md-icon::before {\n content: 'phone';\n }\n\n div[data-type='address'] md-icon::before {\n content: 'place';\n }\n\n div[data-type='department'] md-icon::before {\n content: 'diversity_3';\n }\n\n div[data-type='company'] md-icon::before {\n content: 'business';\n }\n\n div[data-type='etc'] md-icon::before {\n content: 'feed';\n }\n\n div[note] md-icon::before {\n content: 'subject';\n }\n\n :host > div > [name-content] {\n gap: 3px;\n }\n\n div md-icon {\n position: relative;\n top: 3px;\n margin-right: 3px;\n opacity: 0.5;\n color: var(--md-sys-color-on-primary-container, #333);\n }\n\n [name-content] div {\n color: var(--md-sys-color-on-primary-container, #333);\n font-size: 1.2em;\n }\n\n [name-content] [company] {\n color: var(--md-sys-color-on-secondary-container, #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 ${['department', '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.js
CHANGED
|
@@ -28,8 +28,24 @@ export var ContactLabel;
|
|
|
28
28
|
let OxContact = class OxContact extends LitElement {
|
|
29
29
|
constructor() {
|
|
30
30
|
super(...arguments);
|
|
31
|
-
this
|
|
32
|
-
|
|
31
|
+
Object.defineProperty(this, "contact", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
configurable: true,
|
|
34
|
+
writable: true,
|
|
35
|
+
value: {}
|
|
36
|
+
});
|
|
37
|
+
Object.defineProperty(this, "editMode", {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
configurable: true,
|
|
40
|
+
writable: true,
|
|
41
|
+
value: false
|
|
42
|
+
});
|
|
43
|
+
Object.defineProperty(this, "editor", {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
configurable: true,
|
|
46
|
+
writable: true,
|
|
47
|
+
value: void 0
|
|
48
|
+
});
|
|
33
49
|
}
|
|
34
50
|
render() {
|
|
35
51
|
return html `
|
|
@@ -69,9 +85,13 @@ let OxContact = class OxContact extends LitElement {
|
|
|
69
85
|
</div>`;
|
|
70
86
|
}
|
|
71
87
|
};
|
|
72
|
-
OxContact
|
|
73
|
-
|
|
74
|
-
|
|
88
|
+
Object.defineProperty(OxContact, "styles", {
|
|
89
|
+
enumerable: true,
|
|
90
|
+
configurable: true,
|
|
91
|
+
writable: true,
|
|
92
|
+
value: [
|
|
93
|
+
CommonHeaderStyles,
|
|
94
|
+
css `
|
|
75
95
|
:host {
|
|
76
96
|
display: flex;
|
|
77
97
|
flex-direction: column;
|
|
@@ -85,7 +105,8 @@ OxContact.styles = [
|
|
|
85
105
|
flex: 1;
|
|
86
106
|
}
|
|
87
107
|
`
|
|
88
|
-
]
|
|
108
|
+
]
|
|
109
|
+
});
|
|
89
110
|
__decorate([
|
|
90
111
|
property({ type: Object })
|
|
91
112
|
], OxContact.prototype, "contact", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKpD,MAAM,CAAN,IAAY,YAUX;AAVD,WAAY,YAAY;IACtB,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,qCAAqB,CAAA;AACvB,CAAC,EAVW,YAAY,KAAZ,YAAY,QAUvB;AAED,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAmBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmBuB,
|
|
1
|
+
{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKpD,MAAM,CAAN,IAAY,YAUX;AAVD,WAAY,YAAY;IACtB,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,qCAAqB,CAAA;AACvB,CAAC,EAVW,YAAY,KAAZ,YAAY,QAUvB;AAED,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAmBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmBuB;;;;mBAAmB,EAAE;WAAA;QAExC;;;;mBAAqB,KAAK;WAAA;QAET;;;;;WAAsB;IA2ClD,CAAC;IAzCC,MAAM;QACJ,OAAO,IAAI,CAAA;;QAGP,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,OAAO;6BACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;2BAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;gCACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO,sBACpD;;;;UAKI,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;kDACR,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;iCAG1C,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;6CACd,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;iCAEtC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;2CACd,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;eAEvD;YACH,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;2CAClB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;eAG3D;;WAEG,CAAA;IACT,CAAC;;AAhEM;;;;WAAS;QACd,kBAAkB;QAClB,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF;EAhBY,CAgBZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAET;IAAzB,KAAK,CAAC,iBAAiB,CAAC;yCAAuB;AAvBrC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAkErB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-contact-edit.js'\nimport './ox-contact-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nimport { OxContactEdit } from './ox-contact-edit.js'\nimport { Profile } from './ox-pfp-view.js'\n\nexport enum ContactField {\n JobTitle = 'job-title',\n Phone = 'phone',\n Address = 'address',\n Email = 'email',\n Birthday = 'birthday',\n Profile = 'profile',\n Picture = 'picture',\n Department = 'department',\n Homepage = 'homepage'\n}\n\nexport enum ContactLabel {\n home = 'home',\n work = 'work',\n other = 'other',\n mobile = 'mobile'\n}\n\nexport type ContactItem = {\n id?: string\n type: ContactField\n label: string\n value: string\n}\n\nexport type Contact = {\n id?: string\n profile?: Profile\n name?: string\n company?: string\n items?: ContactItem[]\n note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n static styles = [\n CommonHeaderStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--md-sys-color-on-surface);\n background-color: var(--md-sys-color-surface);\n }\n\n ox-contact-view,\n ox-contact-edit {\n padding: var(--pading-default);\n flex: 1;\n }\n `\n ]\n\n @property({ type: Object }) contact: Contact = {}\n\n @state() editMode?: boolean = false\n\n @query('ox-contact-edit') editor!: OxContactEdit\n\n render() {\n return html` \n <div container>\n ${\n this.editMode\n ? html`<ox-contact-edit\n .contact=${this.contact}\n @edit-cancel=${() => (this.editMode = false)}\n @edit-done=${(e: CustomEvent) => {\n this.contact = e.detail\n this.editMode = false\n }}\n ></ox-contact-edit>`\n : html` <ox-contact-view .contact=${this.contact}></ox-contact-view> `\n }\n </div>\n \n <div class=\"footer\">\n ${\n this.editMode\n ? html`\n <button @click=${() => this.editor.reset()}>\n <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}\n </button>\n <div filler></div>\n <button @click=${() => this.editor.cancel()}>\n <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n </button>\n <button @click=${() => this.editor.save()}>\n <md-icon>done</md-icon>${i18next.t('button.confirm')}\n </button>\n `\n : html`\n <button @click=${() => (this.editMode = true)}>\n <md-icon>edit</md-icon>${i18next.t('button.edit')}\n </button>\n `\n }\n </div>\n </div>`\n }\n}\n"]}
|