@things-factory/notification 7.0.1-alpha.99 → 7.0.1-beta.0

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.
@@ -18,7 +18,7 @@ export class NotificationRuleImporter extends LitElement {
18
18
  display: flex;
19
19
  flex-direction: column;
20
20
 
21
- background-color: #fff;
21
+ background-color: var(--md-sys-color-surface);
22
22
  }
23
23
 
24
24
  ox-grist {
@@ -37,7 +37,7 @@ export class NotificationItem extends LitElement {
37
37
  css`
38
38
  :host {
39
39
  position: relative;
40
- background-color: var(--theme-white-color);
40
+ background-color: var(--md-sys-color-surface);
41
41
  padding: var(--padding-default);
42
42
  border-left: 0 solid transparent;
43
43
  border-bottom: var(--border-dark-color) !important;
@@ -64,7 +64,7 @@ export class NotificationItem extends LitElement {
64
64
  text-overflow: ellipsis;
65
65
  font-size: var(--fontsize-large);
66
66
  font-weight: bold;
67
- color: var(--secondary-color);
67
+ color: var(--md-sys-color-secondary);
68
68
  }
69
69
 
70
70
  [titler] span {
@@ -145,7 +145,7 @@ export class NotificationItem extends LitElement {
145
145
 
146
146
  [message] {
147
147
  font-size: var(--fontsize-default);
148
- color: var(--secondary-color);
148
+ color: var(--md-sys-color-secondary);
149
149
  }
150
150
 
151
151
  [timestamp] {
@@ -14,7 +14,7 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
14
14
  css`
15
15
  :host {
16
16
  display: block;
17
- background-color: var(--theme-white-color);
17
+ background-color: var(--md-sys-color-surface);
18
18
  box-shadow: var(--box-shadow);
19
19
  margin-right: var(--margin-wide);
20
20
  padding: var(--padding-default);
@@ -41,10 +41,10 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
41
41
  }
42
42
  [notifications-wrap] div {
43
43
  align-items: stretch;
44
- border-bottom: 1px solid var(--primary-color);
44
+ border-bottom: 1px solid var(--md-sys-color-primary);
45
45
  }
46
46
  [notifications-wrap] strong {
47
- color: var(--primary-color);
47
+ color: var(--md-sys-color-primary);
48
48
  text-transform: capitalize;
49
49
  line-height: 2;
50
50
  }
@@ -59,7 +59,7 @@ export class NotificationList extends connect(store)(localize(i18next)(LitElemen
59
59
  text-align: center;
60
60
  font-size: var(--fontsize-default);
61
61
  font-weight: bold;
62
- color: var(--secondary-color);
62
+ color: var(--md-sys-color-secondary);
63
63
  }
64
64
  div md-icon {
65
65
  display: block;
@@ -18,7 +18,7 @@ export class NotificationSender extends localize(i18next)(LitElement) {
18
18
  css`
19
19
  :host {
20
20
  display: flex;
21
- background-color: var(--main-section-background-color);
21
+ background-color: var(--md-sys-color-background);
22
22
  padding: var(--padding-wide);
23
23
  }
24
24
 
@@ -67,9 +67,20 @@ export class NotificationSender extends localize(i18next)(LitElement) {
67
67
  required
68
68
  icon="account_circle"
69
69
  ></mwc-textfield>
70
- <mwc-textfield type="text" name="title" .label=${i18next.t('field.title')} required icon="notifications_none"></mwc-textfield>
70
+ <mwc-textfield
71
+ type="text"
72
+ name="title"
73
+ .label=${i18next.t('field.title')}
74
+ required
75
+ icon="notifications_none"
76
+ ></mwc-textfield>
71
77
 
72
- <mwc-textfield type="text" name="image" .label=${i18next.t('field.image')} icon="insert_photo"></mwc-textfield>
78
+ <mwc-textfield
79
+ type="text"
80
+ name="image"
81
+ .label=${i18next.t('field.image')}
82
+ icon="insert_photo"
83
+ ></mwc-textfield>
73
84
  <mwc-textfield type="text" name="url" .label=${i18next.t('field.url')} icon="link"></mwc-textfield>
74
85
  <mwc-textarea type="text" name="body" .label=${i18next.t('field.body')} required rows="5"></mwc-textarea>
75
86
  <label>
@@ -108,7 +119,9 @@ export class NotificationSender extends localize(i18next)(LitElement) {
108
119
  }
109
120
 
110
121
  onReset() {
111
- ;['receivers', 'title', 'body', 'image', 'url'].map(key => ((this.renderRoot.querySelector(`[name="${key}"]`)! as any).value = ''))
122
+ ;['receivers', 'title', 'body', 'image', 'url'].map(
123
+ key => ((this.renderRoot.querySelector(`[name="${key}"]`)! as any).value = '')
124
+ )
112
125
  ;(this.renderRoot.querySelector(`[name="inappmsg"]`)! as any).checked = false
113
126
  }
114
127
  }
@@ -37,7 +37,7 @@ export class NotificationSettingLet extends localize(i18next)(LitElement) {
37
37
  align-items: center;
38
38
 
39
39
  font: var(--label-font);
40
- color: var(--label-color);
40
+ color: var(--md-sys-color-on-primary-container);
41
41
  text-transform: var(--label-text-transform);
42
42
  }
43
43
 
@@ -63,8 +63,8 @@ export class NotificationSettingLet extends localize(i18next)(LitElement) {
63
63
  width: 30px;
64
64
  padding: 2px;
65
65
  border-radius: var(--border-radius, 5px);
66
- color: var(--theme-white-color, #fff);
67
- background-color: var(--secondary-color, #394e64);
66
+ color: var(--md-sys-color-on-secondary, #fff);
67
+ background-color: var(--md-sys-color-secondary, #394e64);
68
68
  }
69
69
  `
70
70
  ]
@@ -85,15 +85,27 @@ export class NotificationSettingLet extends localize(i18next)(LitElement) {
85
85
  ? html`
86
86
  <div slot="content" onoff>
87
87
  <label>
88
- <md-switch label="allow message" ?selected=${!!this.subscription} @click=${e => this.onClickSwitch(e)}></md-switch>
88
+ <md-switch
89
+ label="allow message"
90
+ ?selected=${!!this.subscription}
91
+ @click=${e => this.onClickSwitch(e)}
92
+ ></md-switch>
89
93
  ${String(i18next.t('label.allow push message'))}
90
94
  </label>
91
- <md-outlined-button test label=${String(i18next.t('button.push message test'))} @click=${e => this.ontest()}></md-outlined-button>
95
+ <md-outlined-button test @click=${e => this.ontest()}
96
+ >${String(i18next.t('button.push message test'))}</md-outlined-button
97
+ >
92
98
  </div>
93
99
 
94
100
  <div slot="content" info>
95
101
  <label for="subscription-token"><ox-i18n msgid="label.subscription token"></ox-i18n></label>
96
- <input id="subscription-token" type="text" name="subscription-token" .value=${this.subscription || ''} readonly />
102
+ <input
103
+ id="subscription-token"
104
+ type="text"
105
+ name="subscription-token"
106
+ .value=${this.subscription || ''}
107
+ readonly
108
+ />
97
109
  <md-icon button-in-field clipboard-copy @click=${e => e.preventDefault()}>content_copy</md-icon>
98
110
  </div>
99
111
  `
@@ -74,7 +74,7 @@ NotificationRuleImporter.styles = [
74
74
  display: flex;
75
75
  flex-direction: column;
76
76
 
77
- background-color: #fff;
77
+ background-color: var(--md-sys-color-surface);
78
78
  }
79
79
 
80
80
  ox-grist {
@@ -1 +1 @@
1
- {"version":3,"file":"notification-rule-importer.js","sourceRoot":"","sources":["../../../client/pages/notification-rule/notification-rule-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,MAAM,OAAO,wBAAyB,SAAQ,UAAU;IAAxD;;QAiB6B,sBAAiB,GAAU,EAAE,CAAA;QAC5B,YAAO,GAAG;YACpC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,KAAK,EAAE,EAAE;iBACV;aACF;SACF,CAAA;IAgCH,CAAC;IA9BC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd;YACN,OAAO,EAAE,IAAI,CAAC,iBAAiB;SAChC;;;;0BAIiB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,4BAA4B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAE7F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE;SACzD,CAAC,CAAA;QAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AAvEM,+BAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;mEAA8B;AACxD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAuB1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\nexport class NotificationRuleImporter extends LitElement {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: #fff;\n }\n\n ox-grist {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) notificationRules: any[] = []\n @property({ type: Object }) columns = {\n list: { fields: ['name', 'description'] },\n pagination: { infinite: true },\n columns: [\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n width: 150\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n width: 200\n },\n {\n type: 'checkbox',\n name: 'active',\n header: i18next.t('field.active'),\n width: 60\n }\n ]\n }\n\n render() {\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.columns}\n .data=${{\n records: this.notificationRules\n }}\n ></ox-grist>\n\n <div class=\"button-container\">\n <button @click=\"${this.save.bind(this)}\"><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n </div>\n `\n }\n\n async save() {\n const response = await client.mutate({\n mutation: gql`\n mutation importNotificationRules($notificationRules: [NotificationRulePatch!]!) {\n importNotificationRules(notificationRules: $notificationRules)\n }\n `,\n variables: { notificationRules: this.notificationRules }\n })\n\n if (response.errors?.length) return\n\n this.dispatchEvent(new CustomEvent('imported'))\n }\n}\n"]}
1
+ {"version":3,"file":"notification-rule-importer.js","sourceRoot":"","sources":["../../../client/pages/notification-rule/notification-rule-importer.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,qBAAqB,CAAA;AAE5B,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,MAAM,OAAO,wBAAyB,SAAQ,UAAU;IAAxD;;QAiB6B,sBAAiB,GAAU,EAAE,CAAA;QAC5B,YAAO,GAAG;YACpC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,EAAE;YACzC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YAC9B,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,MAAM;oBACZ,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;oBAC/B,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,IAAI,EAAE,aAAa;oBACnB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;oBACtC,KAAK,EAAE,GAAG;iBACX;gBACD;oBACE,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;oBACjC,KAAK,EAAE,EAAE;iBACV;aACF;SACF,CAAA;IAgCH,CAAC;IA9BC,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAChC,IAAI,CAAC,OAAO;gBACd;YACN,OAAO,EAAE,IAAI,CAAC,iBAAiB;SAChC;;;;0BAIiB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,4BAA4B,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;KAE7F,CAAA;IACH,CAAC;IAED,KAAK,CAAC,IAAI;;QACR,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;YACnC,QAAQ,EAAE,GAAG,CAAA;;;;OAIZ;YACD,SAAS,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EAAE;SACzD,CAAC,CAAA;QAEF,IAAI,MAAA,QAAQ,CAAC,MAAM,0CAAE,MAAM;YAAE,OAAM;QAEnC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,CAAC;;AAvEM,+BAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;mEAA8B;AACxD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;yDAuB1B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next } from '@operato/i18n'\nimport { isMobileDevice } from '@operato/utils'\nimport { ButtonContainerStyles } from '@operato/styles'\n\nexport class NotificationRuleImporter extends LitElement {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n ox-grist {\n flex: 1;\n }\n `\n ]\n\n @property({ type: Array }) notificationRules: any[] = []\n @property({ type: Object }) columns = {\n list: { fields: ['name', 'description'] },\n pagination: { infinite: true },\n columns: [\n {\n type: 'string',\n name: 'name',\n header: i18next.t('field.name'),\n width: 150\n },\n {\n type: 'string',\n name: 'description',\n header: i18next.t('field.description'),\n width: 200\n },\n {\n type: 'checkbox',\n name: 'active',\n header: i18next.t('field.active'),\n width: 60\n }\n ]\n }\n\n render() {\n return html`\n <ox-grist\n .mode=${isMobileDevice() ? 'LIST' : 'GRID'}\n .config=${this.columns}\n .data=${{\n records: this.notificationRules\n }}\n ></ox-grist>\n\n <div class=\"button-container\">\n <button @click=\"${this.save.bind(this)}\"><md-icon>save</md-icon>${i18next.t('button.save')}</button>\n </div>\n `\n }\n\n async save() {\n const response = await client.mutate({\n mutation: gql`\n mutation importNotificationRules($notificationRules: [NotificationRulePatch!]!) {\n importNotificationRules(notificationRules: $notificationRules)\n }\n `,\n variables: { notificationRules: this.notificationRules }\n })\n\n if (response.errors?.length) return\n\n this.dispatchEvent(new CustomEvent('imported'))\n }\n}\n"]}