@things-factory/organization 6.1.48 → 6.1.56

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 (15) hide show
  1. package/client/component/approval-line-brief.ts +101 -0
  2. package/client/component/approval-line-view.ts +55 -26
  3. package/dist-client/component/approval-line-brief.d.ts +11 -0
  4. package/dist-client/component/approval-line-brief.js +109 -0
  5. package/dist-client/component/approval-line-brief.js.map +1 -0
  6. package/dist-client/component/approval-line-view.js +55 -26
  7. package/dist-client/component/approval-line-view.js.map +1 -1
  8. package/dist-client/tsconfig.tsbuildinfo +1 -1
  9. package/dist-server/tsconfig.tsbuildinfo +1 -1
  10. package/package.json +2 -2
  11. package/translations/en.json +9 -0
  12. package/translations/ja.json +9 -0
  13. package/translations/ko.json +9 -0
  14. package/translations/ms.json +31 -22
  15. package/translations/zh.json +31 -22
package/client/component/approval-line-brief.ts ADDED
@@ -0,0 +1,101 @@
1
+ import { css, html, LitElement, TemplateResult } from 'lit'
2
+ import { customElement, property, query } from 'lit/decorators.js'
3
+
4
+ import { i18next, localize } from '@operato/i18n'
5
+ import { ApprovalLineItem } from '../types/approval-line'
6
+
7
+ @customElement('approval-line-brief')
8
+ export class ApprovalLineBrief extends localize(i18next)(LitElement) {
9
+ static styles = [
10
+ css`
11
+ :host {
12
+ display: block;
13
+ }
14
+
15
+ ol {
16
+ list-style: none;
17
+ margin: 0;
18
+ padding: 0;
19
+ display: flex;
20
+ }
21
+
22
+ li {
23
+ width: 85px;
24
+ text-align: center;
25
+ color: rgba(255, 255, 255, 0.7);
26
+ }
27
+
28
+ span:before {
29
+ content: '';
30
+ height: 2px;
31
+ width: 70px;
32
+ display: block;
33
+ position: absolute;
34
+ margin-left: -70px;
35
+ margin-top: 6px;
36
+ background-color: rgba(0, 0, 0, 0.4);
37
+ }
38
+
39
+ span {
40
+ display: block;
41
+ width: 15px;
42
+ height: 15px;
43
+ margin: auto;
44
+ background-color: rgba(0, 0, 0, 0.4);
45
+ border-radius: 50%;
46
+ color: var(--theme-white-color);
47
+ line-height: 1.2;
48
+ }
49
+
50
+ [past] span {
51
+ background-color: rgba(255, 255, 255, 0.9);
52
+ color: var(--primary-text-color);
53
+ }
54
+
55
+ [current] span {
56
+ background-color: #84d600;
57
+ color: var(--theme-white-color);
58
+ }
59
+
60
+ [current] {
61
+ font-weight: bold;
62
+ color: var(--theme-white-color);
63
+ }
64
+
65
+ [past] span:before,
66
+ [current] span:before {
67
+ background-color: rgba(255, 255, 255, 0.9);
68
+ }
69
+
70
+ li:first-child span:before {
71
+ display: none;
72
+ }
73
+ `
74
+ ]
75
+
76
+ @property({ type: Array }) model: ApprovalLineItem[] = []
77
+ @property({ type: Number }) current: number = -1
78
+
79
+ render() {
80
+ const items = this.model || []
81
+ const current = this.current
82
+
83
+ return html`
84
+ <ol>
85
+ ${this.model
86
+ ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `
87
+ : html``}
88
+ ${items.map((item, order) => this.renderItem(item, order + 1))}
89
+ </ol>
90
+ `
91
+ }
92
+
93
+ renderItem(item: ApprovalLineItem, order: number): TemplateResult {
94
+ const { approver } = item
95
+ const { name } = approver || {}
96
+
97
+ return html`
98
+ <li approver ?current=${this.current == order} ?past=${this.current > order}><span>${order + 1}</span>${name}</li>
99
+ `
100
+ }
101
+ }
package/client/component/approval-line-view.ts CHANGED
@@ -12,10 +12,8 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
12
12
  display: flex;
13
13
  flex-direction: row;
14
14
  flex-wrap: wrap;
15
-
16
- gap: 10px;
17
15
  padding: 10px;
18
-
16
+ justify-content: center;
19
17
  align-items: center;
20
18
 
21
19
  background-color: #fff;
@@ -24,14 +22,53 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
24
22
  color: var(--secondary-color, black);
25
23
  }
26
24
 
27
- div[approver] {
28
- padding: 5px;
29
- border-radius: 5px;
30
- border: 2px solid var(--primary-color, black);
25
+ ol {
26
+ margin: 0;
27
+ padding: 0;
28
+ display: flex;
29
+ gap: 15px;
30
+ list-style-type: none;
31
+ }
32
+
33
+ li {
34
+ text-align: center;
35
+ font-size: var(--fontsize-default);
36
+ }
37
+
38
+ li:before {
39
+ content: '';
40
+ height: 2px;
41
+ width: 15px;
42
+ display: block;
43
+ position: absolute;
44
+ margin-left: -15px;
45
+ margin-top: 6px;
46
+ background-color: rgba(0, 0, 0, 0.4);
31
47
  }
32
48
 
33
- div[approver][current] {
34
- border-color: red;
49
+ li:first-child:before {
50
+ display: none;
51
+ }
52
+
53
+ span {
54
+ display: block;
55
+ height: 15px;
56
+ margin: auto;
57
+ margin-bottom: var(--margin-narrow);
58
+ background-color: rgba(0, 0, 0, 0.5);
59
+ border-radius: 10px;
60
+ font-size: var(--fontsize-small);
61
+ color: var(--theme-white-color);
62
+ line-height: 1.2;
63
+ padding: 0 10px;
64
+ }
65
+
66
+ [approver][current] {
67
+ font-weight: bold;
68
+ }
69
+ [approver][current] span {
70
+ background-color: #84d600;
71
+ color: var(--theme-white-color);
35
72
  }
36
73
  `
37
74
  ]
@@ -43,30 +80,22 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
43
80
  const items = this.model || []
44
81
 
45
82
  return html`
46
- ${this.model
47
- ? html`
48
- <div approver>
49
- <div>ME</div>
50
- <div>myself</div>
51
- </div>
52
- `
53
- : html``}
54
- ${items.map((item, order) => this.renderItem(item, order + 1))}
83
+ <ol>
84
+ ${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``}
85
+ ${items.map((item, order) => this.renderItem(item, order + 1))}
86
+ </ol>
55
87
  `
56
88
  }
57
89
 
58
90
  renderItem(item: ApprovalLineItem, order: number): TemplateResult {
59
91
  const { type, approver } = item
60
- const { name, description, controlNo } = approver || {}
61
- const subname = (description || controlNo) && `(${description || controlNo})`
92
+ const { name } = approver || {}
62
93
 
63
94
  return html`
64
- <mwc-icon>arrow_forward_ios</mwc-icon>
65
-
66
- <div approver ?current=${this.current == order}>
67
- <div>${type}</div>
68
- <div><span name>${name}</span>${subname}</div>
69
- </div>
95
+ <li approver ?current=${this.current == order}>
96
+ <span>${i18next.t('label.' + type)}</span>
97
+ ${name}
98
+ </li>
70
99
  `
71
100
  }
72
101
  }
package/dist-client/component/approval-line-brief.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import { ApprovalLineItem } from '../types/approval-line';
3
+ declare const ApprovalLineBrief_base: (new (...args: any[]) => LitElement) & typeof LitElement;
4
+ export declare class ApprovalLineBrief extends ApprovalLineBrief_base {
5
+ static styles: import("lit").CSSResult[];
6
+ model: ApprovalLineItem[];
7
+ current: number;
8
+ render(): TemplateResult<1>;
9
+ renderItem(item: ApprovalLineItem, order: number): TemplateResult;
10
+ }
11
+ export {};
package/dist-client/component/approval-line-brief.js ADDED
@@ -0,0 +1,109 @@
1
+ import { __decorate, __metadata } from "tslib";
2
+ import { css, html, LitElement } from 'lit';
3
+ import { customElement, property } from 'lit/decorators.js';
4
+ import { i18next, localize } from '@operato/i18n';
5
+ let ApprovalLineBrief = class ApprovalLineBrief extends localize(i18next)(LitElement) {
6
+ constructor() {
7
+ super(...arguments);
8
+ this.model = [];
9
+ this.current = -1;
10
+ }
11
+ render() {
12
+ const items = this.model || [];
13
+ const current = this.current;
14
+ return html `
15
+ <ol>
16
+ ${this.model
17
+ ? html ` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `
18
+ : html ``}
19
+ ${items.map((item, order) => this.renderItem(item, order + 1))}
20
+ </ol>
21
+ `;
22
+ }
23
+ renderItem(item, order) {
24
+ const { approver } = item;
25
+ const { name } = approver || {};
26
+ return html `
27
+ <li approver ?current=${this.current == order} ?past=${this.current > order}><span>${order + 1}</span>${name}</li>
28
+ `;
29
+ }
30
+ };
31
+ ApprovalLineBrief.styles = [
32
+ css `
33
+ :host {
34
+ display: block;
35
+ }
36
+
37
+ ol {
38
+ list-style: none;
39
+ margin: 0;
40
+ padding: 0;
41
+ display: flex;
42
+ }
43
+
44
+ li {
45
+ width: 85px;
46
+ text-align: center;
47
+ color: rgba(255, 255, 255, 0.7);
48
+ }
49
+
50
+ span:before {
51
+ content: '';
52
+ height: 2px;
53
+ width: 70px;
54
+ display: block;
55
+ position: absolute;
56
+ margin-left: -70px;
57
+ margin-top: 6px;
58
+ background-color: rgba(0, 0, 0, 0.4);
59
+ }
60
+
61
+ span {
62
+ display: block;
63
+ width: 15px;
64
+ height: 15px;
65
+ margin: auto;
66
+ background-color: rgba(0, 0, 0, 0.4);
67
+ border-radius: 50%;
68
+ color: var(--theme-white-color);
69
+ line-height: 1.2;
70
+ }
71
+
72
+ [past] span {
73
+ background-color: rgba(255, 255, 255, 0.9);
74
+ color: var(--primary-text-color);
75
+ }
76
+
77
+ [current] span {
78
+ background-color: #84d600;
79
+ color: var(--theme-white-color);
80
+ }
81
+
82
+ [current] {
83
+ font-weight: bold;
84
+ color: var(--theme-white-color);
85
+ }
86
+
87
+ [past] span:before,
88
+ [current] span:before {
89
+ background-color: rgba(255, 255, 255, 0.9);
90
+ }
91
+
92
+ li:first-child span:before {
93
+ display: none;
94
+ }
95
+ `
96
+ ];
97
+ __decorate([
98
+ property({ type: Array }),
99
+ __metadata("design:type", Array)
100
+ ], ApprovalLineBrief.prototype, "model", void 0);
101
+ __decorate([
102
+ property({ type: Number }),
103
+ __metadata("design:type", Number)
104
+ ], ApprovalLineBrief.prototype, "current", void 0);
105
+ ApprovalLineBrief = __decorate([
106
+ customElement('approval-line-brief')
107
+ ], ApprovalLineBrief);
108
+ export { ApprovalLineBrief };
109
+ //# sourceMappingURL=approval-line-brief.js.map
package/dist-client/component/approval-line-brief.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI1C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QAoEsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAwBlD,CAAC;IAtBC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC,yBAAyB;YACpG,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QACzB,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAE/B,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,KAAK,GAAG,CAAC,UAAU,IAAI;KAC7G,CAAA;IACH,CAAC;;AA3FM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AACzD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AArErC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA6F7B;SA7FY,iBAAiB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n@customElement('approval-line-brief')\nexport class ApprovalLineBrief extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n ol {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n li {\n width: 85px;\n text-align: center;\n color: rgba(255, 255, 255, 0.7);\n }\n\n span:before {\n content: '';\n height: 2px;\n width: 70px;\n display: block;\n position: absolute;\n margin-left: -70px;\n margin-top: 6px;\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n span {\n display: block;\n width: 15px;\n height: 15px;\n margin: auto;\n background-color: rgba(0, 0, 0, 0.4);\n border-radius: 50%;\n color: var(--theme-white-color);\n line-height: 1.2;\n }\n\n [past] span {\n background-color: rgba(255, 255, 255, 0.9);\n color: var(--primary-text-color);\n }\n\n [current] span {\n background-color: #84d600;\n color: var(--theme-white-color);\n }\n\n [current] {\n font-weight: bold;\n color: var(--theme-white-color);\n }\n\n [past] span:before,\n [current] span:before {\n background-color: rgba(255, 255, 255, 0.9);\n }\n\n li:first-child span:before {\n display: none;\n }\n `\n ]\n\n @property({ type: Array }) model: ApprovalLineItem[] = []\n @property({ type: Number }) current: number = -1\n\n render() {\n const items = this.model || []\n const current = this.current\n\n return html`\n <ol>\n ${this.model\n ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `\n : html``}\n ${items.map((item, order) => this.renderItem(item, order + 1))}\n </ol>\n `\n }\n\n renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n const { approver } = item\n const { name } = approver || {}\n\n return html`\n <li approver ?current=${this.current == order} ?past=${this.current > order}><span>${order + 1}</span>${name}</li>\n `\n }\n}\n"]}
package/dist-client/component/approval-line-view.js CHANGED
@@ -10,28 +10,20 @@ let ApprovalLineView = class ApprovalLineView extends localize(i18next)(LitEleme
10
10
  render() {
11
11
  const items = this.model || [];
12
12
  return html `
13
- ${this.model
14
- ? html `
15
- <div approver>
16
- <div>ME</div>
17
- <div>myself</div>
18
- </div>
19
- `
20
- : html ``}
21
- ${items.map((item, order) => this.renderItem(item, order + 1))}
13
+ <ol>
14
+ ${this.model ? html ` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html ``}
15
+ ${items.map((item, order) => this.renderItem(item, order + 1))}
16
+ </ol>
22
17
  `;
23
18
  }
24
19
  renderItem(item, order) {
25
20
  const { type, approver } = item;
26
- const { name, description, controlNo } = approver || {};
27
- const subname = (description || controlNo) && `(${description || controlNo})`;
21
+ const { name } = approver || {};
28
22
  return html `
29
- <mwc-icon>arrow_forward_ios</mwc-icon>
30
-
31
- <div approver ?current=${this.current == order}>
32
- <div>${type}</div>
33
- <div><span name>${name}</span>${subname}</div>
34
- </div>
23
+ <li approver ?current=${this.current == order}>
24
+ <span>${i18next.t('label.' + type)}</span>
25
+ ${name}
26
+ </li>
35
27
  `;
36
28
  }
37
29
  };
@@ -41,10 +33,8 @@ ApprovalLineView.styles = [
41
33
  display: flex;
42
34
  flex-direction: row;
43
35
  flex-wrap: wrap;
44
-
45
- gap: 10px;
46
36
  padding: 10px;
47
-
37
+ justify-content: center;
48
38
  align-items: center;
49
39
 
50
40
  background-color: #fff;
@@ -53,14 +43,53 @@ ApprovalLineView.styles = [
53
43
  color: var(--secondary-color, black);
54
44
  }
55
45
 
56
- div[approver] {
57
- padding: 5px;
58
- border-radius: 5px;
59
- border: 2px solid var(--primary-color, black);
46
+ ol {
47
+ margin: 0;
48
+ padding: 0;
49
+ display: flex;
50
+ gap: 15px;
51
+ list-style-type: none;
60
52
  }
61
53
 
62
- div[approver][current] {
63
- border-color: red;
54
+ li {
55
+ text-align: center;
56
+ font-size: var(--fontsize-default);
57
+ }
58
+
59
+ li:before {
60
+ content: '';
61
+ height: 2px;
62
+ width: 15px;
63
+ display: block;
64
+ position: absolute;
65
+ margin-left: -15px;
66
+ margin-top: 6px;
67
+ background-color: rgba(0, 0, 0, 0.4);
68
+ }
69
+
70
+ li:first-child:before {
71
+ display: none;
72
+ }
73
+
74
+ span {
75
+ display: block;
76
+ height: 15px;
77
+ margin: auto;
78
+ margin-bottom: var(--margin-narrow);
79
+ background-color: rgba(0, 0, 0, 0.5);
80
+ border-radius: 10px;
81
+ font-size: var(--fontsize-small);
82
+ color: var(--theme-white-color);
83
+ line-height: 1.2;
84
+ padding: 0 10px;
85
+ }
86
+
87
+ [approver][current] {
88
+ font-weight: bold;
89
+ }
90
+ [approver][current] span {
91
+ background-color: #84d600;
92
+ color: var(--theme-white-color);
64
93
  }
65
94
  `
66
95
  ];
package/dist-client/component/approval-line-view.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"approval-line-view.js","sourceRoot":"","sources":["../../client/component/approval-line-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QAgCuB,YAAO,GAAY,CAAC,CAAC,CAAA;IAgCnD,CAAC;IA9BC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;;;WAKH;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;KAC/D,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QACvD,MAAM,OAAO,GAAG,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,IAAI,SAAS,GAAG,CAAA;QAE7E,OAAO,IAAI,CAAA;;;+BAGgB,IAAI,CAAC,OAAO,IAAI,KAAK;eACrC,IAAI;0BACO,IAAI,UAAU,OAAO;;KAE1C,CAAA;IACH,CAAC;;AA9DM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAA2B;AACtD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAsB;AAhCtC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAgE5B;SAhEY,gBAAgB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n@customElement('approval-line-view')\nexport class ApprovalLineView extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n\n gap: 10px;\n padding: 10px;\n\n align-items: center;\n\n background-color: #fff;\n\n --mdc-icon-size: 3em;\n color: var(--secondary-color, black);\n }\n\n div[approver] {\n padding: 5px;\n border-radius: 5px;\n border: 2px solid var(--primary-color, black);\n }\n\n div[approver][current] {\n border-color: red;\n }\n `\n ]\n\n @property({ type: Object }) model?: ApprovalLineItem[]\n @property({ type: Number }) current?: number = -1\n\n render() {\n const items = this.model || []\n\n return html`\n ${this.model\n ? html`\n <div approver>\n <div>ME</div>\n <div>myself</div>\n </div>\n `\n : html``}\n ${items.map((item, order) => this.renderItem(item, order + 1))}\n `\n }\n\n renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n const { type, approver } = item\n const { name, description, controlNo } = approver || {}\n const subname = (description || controlNo) && `(${description || controlNo})`\n\n return html`\n <mwc-icon>arrow_forward_ios</mwc-icon>\n\n <div approver ?current=${this.current == order}>\n <div>${type}</div>\n <div><span name>${name}</span>${subname}</div>\n </div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"approval-line-view.js","sourceRoot":"","sources":["../../client/component/approval-line-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI1C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QAqEuB,YAAO,GAAY,CAAC,CAAC,CAAA;IAwBnD,CAAC;IAtBC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,gCAAgC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE;UAC3F,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAE/B,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK;gBACnC,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;UAChC,IAAI;;KAET,CAAA;IACH,CAAC;;AA3FM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAA2B;AACtD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAsB;AArEtC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6F5B;SA7FY,gBAAgB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\n\n@customElement('approval-line-view')\nexport class ApprovalLineView extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 10px;\n justify-content: center;\n align-items: center;\n\n background-color: #fff;\n\n --mdc-icon-size: 3em;\n color: var(--secondary-color, black);\n }\n\n ol {\n margin: 0;\n padding: 0;\n display: flex;\n gap: 15px;\n list-style-type: none;\n }\n\n li {\n text-align: center;\n font-size: var(--fontsize-default);\n }\n\n li:before {\n content: '';\n height: 2px;\n width: 15px;\n display: block;\n position: absolute;\n margin-left: -15px;\n margin-top: 6px;\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n li:first-child:before {\n display: none;\n }\n\n span {\n display: block;\n height: 15px;\n margin: auto;\n margin-bottom: var(--margin-narrow);\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n font-size: var(--fontsize-small);\n color: var(--theme-white-color);\n line-height: 1.2;\n padding: 0 10px;\n }\n\n [approver][current] {\n font-weight: bold;\n }\n [approver][current] span {\n background-color: #84d600;\n color: var(--theme-white-color);\n }\n `\n ]\n\n @property({ type: Object }) model?: ApprovalLineItem[]\n @property({ type: Number }) current?: number = -1\n\n render() {\n const items = this.model || []\n\n return html`\n <ol>\n ${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``}\n ${items.map((item, order) => this.renderItem(item, order + 1))}\n </ol>\n `\n }\n\n renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n const { type, approver } = item\n const { name } = approver || {}\n\n return html`\n <li approver ?current=${this.current == order}>\n <span>${i18next.t('label.' + type)}</span>\n ${name}\n </li>\n `\n }\n}\n"]}