@operato/contact 2.0.0-alpha.62 → 2.0.0-alpha.68

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 (29) hide show
  1. package/CHANGELOG.md +9 -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 +1 -1
  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.js +16 -16
  10. package/dist/src/ox-contact-view.js.map +1 -1
  11. package/dist/src/ox-pfp-edit.js +3 -3
  12. package/dist/src/ox-pfp-edit.js.map +1 -1
  13. package/dist/src/ox-pfp.d.ts +1 -1
  14. package/dist/src/ox-pfp.js +14 -17
  15. package/dist/src/ox-pfp.js.map +1 -1
  16. package/dist/stories/ox-contact.stories.d.ts +1 -2
  17. package/dist/stories/ox-contact.stories.js +14 -3
  18. package/dist/stories/ox-contact.stories.js.map +1 -1
  19. package/dist/stories/ox-pfp.stories.d.ts +1 -2
  20. package/dist/stories/ox-pfp.stories.js +15 -3
  21. package/dist/stories/ox-pfp.stories.js.map +1 -1
  22. package/dist/tsconfig.tsbuildinfo +1 -1
  23. package/package.json +5 -6
  24. package/src/ox-contact-edit.ts +7 -7
  25. package/src/ox-contact-view.ts +21 -20
  26. package/src/ox-pfp-edit.ts +3 -3
  27. package/src/ox-pfp.ts +15 -18
  28. package/stories/ox-contact.stories.ts +14 -3
  29. package/stories/ox-pfp.stories.ts +15 -3
package/src/ox-pfp.ts CHANGED
@@ -1,8 +1,8 @@
1
+ import '@material/web/icon/icon.js'
2
+
1
3
  import './ox-pfp-edit.js'
2
4
  import './ox-pfp-view.js'
3
5
 
4
- import '@material/mwc-icon-button'
5
-
6
6
  import { html, css, LitElement } from 'lit'
7
7
  import { customElement, property, query, state } from 'lit/decorators.js'
8
8
  import { Profile } from './ox-pfp-view.js'
@@ -14,9 +14,6 @@ export class OxPfp extends LitElement {
14
14
  :host {
15
15
  display: block;
16
16
  aspect-ratio: 1 / 1;
17
-
18
- --mdc-icon-button-size: 20px;
19
- --mdc-icon-size: 20px;
20
17
  }
21
18
 
22
19
  ox-pfp-edit,
@@ -33,32 +30,31 @@ export class OxPfp extends LitElement {
33
30
  display: flex;
34
31
  }
35
32
 
36
- mwc-icon-button {
33
+ md-icon {
37
34
  position: absolute;
38
- font-size: smaller;
39
35
  }
40
36
 
41
- mwc-icon-button[icon='fit_screen'] {
37
+ md-icon[icon='fit_screen'] {
42
38
  bottom: 0;
43
39
  left: 0;
44
40
  }
45
41
 
46
- mwc-icon-button[icon='save'] {
42
+ md-icon[icon='save'] {
47
43
  bottom: 0;
48
44
  right: 0;
49
45
  }
50
46
 
51
- mwc-icon-button[icon='edit'] {
47
+ md-icon[icon='edit'] {
52
48
  bottom: 0;
53
49
  right: 0;
54
50
  }
55
51
 
56
- mwc-icon-button[icon='cancel'] {
52
+ md-icon[icon='cancel'] {
57
53
  top: 0;
58
54
  right: 0;
59
55
  }
60
56
 
61
- mwc-icon-button[icon='clear'] {
57
+ md-icon[icon='clear'] {
62
58
  top: 0;
63
59
  right: 16px;
64
60
  }
@@ -74,9 +70,9 @@ export class OxPfp extends LitElement {
74
70
  render() {
75
71
  return this.editMode
76
72
  ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
77
- <mwc-icon-button title="fit size" icon="fit_screen" @click=${() => this.edit.fit()}></mwc-icon-button>
78
- <mwc-icon-button title="clear" icon="clear" @click=${() => this.edit.clear()}></mwc-icon-button>
79
- <mwc-icon-button
73
+ <md-icon title="fit size" icon="fit_screen" @click=${() => this.edit.fit()}>fit_screen</md-icon>
74
+ <md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>clear</md-icon>
75
+ <md-icon
80
76
  title="save"
81
77
  icon="save"
82
78
  @click=${() => {
@@ -88,12 +84,13 @@ export class OxPfp extends LitElement {
88
84
  })
89
85
  )
90
86
  }}
91
- ></mwc-icon-button>
92
- <mwc-icon-button title="cancel" icon="cancel" @click=${() => (this.editMode = false)}></mwc-icon-button>
87
+ >save</md-icon
88
+ >
89
+ <md-icon title="cancel" icon="cancel" @click=${() => (this.editMode = false)}>cancel</md-icon>
93
90
  </ox-pfp-edit> `
94
91
  : html`
95
92
  <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>
96
- <mwc-icon-button title="edit" icon="edit" @click=${() => (this.editMode = true)}></mwc-icon-button>
93
+ <md-icon title="edit" icon="edit" @click=${() => (this.editMode = true)}>edit</md-icon>
97
94
  </ox-pfp-view>
98
95
  `
99
96
  }
package/stories/ox-contact.stories.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { html, TemplateResult } from 'lit'
2
- import '@material/mwc-icon'
3
- import '@material/mwc-icon-button'
2
+ import '@material/web/icon/icon.js'
4
3
  import '../src/ox-contact.js'
5
4
 
6
5
  import { Contact, ContactField } from '../src/ox-contact.js'
@@ -25,7 +24,19 @@ interface ArgTypes {
25
24
 
26
25
  const Template: Story<ArgTypes> = ({ contact }: ArgTypes) => html`
27
26
  <link href="/themes/app-theme.css" rel="stylesheet" />
28
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
27
+ <link
28
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
29
+ rel="stylesheet"
30
+ />
31
+ <link
32
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
33
+ rel="stylesheet"
34
+ />
35
+ <link
36
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
37
+ rel="stylesheet"
38
+ />
39
+
29
40
  <style>
30
41
  body {
31
42
  }
package/stories/ox-pfp.stories.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { html, TemplateResult } from 'lit'
2
- import '@material/mwc-icon'
3
- import '@material/mwc-icon-button'
2
+ import '@material/web/icon/icon.js'
4
3
  import '../src/ox-pfp.js'
5
4
 
6
5
  import { Profile } from '../src/ox-pfp-view.js'
@@ -27,7 +26,20 @@ interface ArgTypes {
27
26
 
28
27
  const Template: Story<ArgTypes> = ({ profile, name }: ArgTypes) => html`
29
28
  <link href="/themes/app-theme.css" rel="stylesheet" />
30
- <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
29
+
30
+ <link
31
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
32
+ rel="stylesheet"
33
+ />
34
+ <link
35
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
36
+ rel="stylesheet"
37
+ />
38
+ <link
39
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
40
+ rel="stylesheet"
41
+ />
42
+
31
43
  <style>
32
44
  body {
33
45
  }