@things-factory/organization 6.1.54 → 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.
- package/client/component/approval-line-brief.ts +101 -0
- package/client/component/approval-line-view.ts +13 -17
- package/dist-client/component/approval-line-brief.d.ts +11 -0
- package/dist-client/component/approval-line-brief.js +109 -0
- package/dist-client/component/approval-line-brief.js.map +1 -0
- package/dist-client/component/approval-line-view.js +13 -17
- package/dist-client/component/approval-line-view.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/translations/en.json +9 -0
- package/translations/ja.json +9 -0
- package/translations/ko.json +9 -0
- package/translations/ms.json +31 -22
- package/translations/zh.json +31 -22
|
@@ -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
|
+
}
|
|
@@ -26,15 +26,16 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
26
26
|
margin: 0;
|
|
27
27
|
padding: 0;
|
|
28
28
|
display: flex;
|
|
29
|
-
gap:15px;
|
|
29
|
+
gap: 15px;
|
|
30
30
|
list-style-type: none;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
li {
|
|
34
34
|
text-align: center;
|
|
35
|
-
font-size:var(--fontsize-default);
|
|
35
|
+
font-size: var(--fontsize-default);
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
|
|
38
|
+
li:before {
|
|
38
39
|
content: '';
|
|
39
40
|
height: 2px;
|
|
40
41
|
width: 15px;
|
|
@@ -45,6 +46,10 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
45
46
|
background-color: rgba(0, 0, 0, 0.4);
|
|
46
47
|
}
|
|
47
48
|
|
|
49
|
+
li:first-child:before {
|
|
50
|
+
display: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
48
53
|
span {
|
|
49
54
|
display: block;
|
|
50
55
|
height: 15px;
|
|
@@ -52,12 +57,10 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
52
57
|
margin-bottom: var(--margin-narrow);
|
|
53
58
|
background-color: rgba(0, 0, 0, 0.5);
|
|
54
59
|
border-radius: 10px;
|
|
55
|
-
font-size:var(--fontsize-small);
|
|
60
|
+
font-size: var(--fontsize-small);
|
|
56
61
|
color: var(--theme-white-color);
|
|
57
62
|
line-height: 1.2;
|
|
58
|
-
|
|
59
|
-
li:first-child span:before {
|
|
60
|
-
display: none;
|
|
63
|
+
padding: 0 10px;
|
|
61
64
|
}
|
|
62
65
|
|
|
63
66
|
[approver][current] {
|
|
@@ -78,13 +81,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
78
81
|
|
|
79
82
|
return html`
|
|
80
83
|
<ol>
|
|
81
|
-
${this.model
|
|
82
|
-
? html`
|
|
83
|
-
<li approver>
|
|
84
|
-
<span>ME</span>myself
|
|
85
|
-
</span>
|
|
86
|
-
`
|
|
87
|
-
: html``}
|
|
84
|
+
${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``}
|
|
88
85
|
${items.map((item, order) => this.renderItem(item, order + 1))}
|
|
89
86
|
</ol>
|
|
90
87
|
`
|
|
@@ -92,12 +89,11 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
92
89
|
|
|
93
90
|
renderItem(item: ApprovalLineItem, order: number): TemplateResult {
|
|
94
91
|
const { type, approver } = item
|
|
95
|
-
const { name
|
|
96
|
-
const subname = (description || controlNo) && `(${description || controlNo})`
|
|
92
|
+
const { name } = approver || {}
|
|
97
93
|
|
|
98
94
|
return html`
|
|
99
95
|
<li approver ?current=${this.current == order}>
|
|
100
|
-
<span>${type}</span>
|
|
96
|
+
<span>${i18next.t('label.' + type)}</span>
|
|
101
97
|
${name}
|
|
102
98
|
</li>
|
|
103
99
|
`
|
|
@@ -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 {};
|
|
@@ -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
|
|
@@ -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"]}
|
|
@@ -11,24 +11,17 @@ let ApprovalLineView = class ApprovalLineView extends localize(i18next)(LitEleme
|
|
|
11
11
|
const items = this.model || [];
|
|
12
12
|
return html `
|
|
13
13
|
<ol>
|
|
14
|
-
${this.model
|
|
15
|
-
? html `
|
|
16
|
-
<li approver>
|
|
17
|
-
<span>ME</span>myself
|
|
18
|
-
</span>
|
|
19
|
-
`
|
|
20
|
-
: html ``}
|
|
14
|
+
${this.model ? html ` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html ``}
|
|
21
15
|
${items.map((item, order) => this.renderItem(item, order + 1))}
|
|
22
16
|
</ol>
|
|
23
17
|
`;
|
|
24
18
|
}
|
|
25
19
|
renderItem(item, order) {
|
|
26
20
|
const { type, approver } = item;
|
|
27
|
-
const { name
|
|
28
|
-
const subname = (description || controlNo) && `(${description || controlNo})`;
|
|
21
|
+
const { name } = approver || {};
|
|
29
22
|
return html `
|
|
30
23
|
<li approver ?current=${this.current == order}>
|
|
31
|
-
<span>${type}</span>
|
|
24
|
+
<span>${i18next.t('label.' + type)}</span>
|
|
32
25
|
${name}
|
|
33
26
|
</li>
|
|
34
27
|
`;
|
|
@@ -54,15 +47,16 @@ ApprovalLineView.styles = [
|
|
|
54
47
|
margin: 0;
|
|
55
48
|
padding: 0;
|
|
56
49
|
display: flex;
|
|
57
|
-
gap:15px;
|
|
50
|
+
gap: 15px;
|
|
58
51
|
list-style-type: none;
|
|
59
52
|
}
|
|
60
53
|
|
|
61
54
|
li {
|
|
62
55
|
text-align: center;
|
|
63
|
-
font-size:var(--fontsize-default);
|
|
56
|
+
font-size: var(--fontsize-default);
|
|
64
57
|
}
|
|
65
|
-
|
|
58
|
+
|
|
59
|
+
li:before {
|
|
66
60
|
content: '';
|
|
67
61
|
height: 2px;
|
|
68
62
|
width: 15px;
|
|
@@ -73,6 +67,10 @@ ApprovalLineView.styles = [
|
|
|
73
67
|
background-color: rgba(0, 0, 0, 0.4);
|
|
74
68
|
}
|
|
75
69
|
|
|
70
|
+
li:first-child:before {
|
|
71
|
+
display: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
76
74
|
span {
|
|
77
75
|
display: block;
|
|
78
76
|
height: 15px;
|
|
@@ -80,12 +78,10 @@ ApprovalLineView.styles = [
|
|
|
80
78
|
margin-bottom: var(--margin-narrow);
|
|
81
79
|
background-color: rgba(0, 0, 0, 0.5);
|
|
82
80
|
border-radius: 10px;
|
|
83
|
-
font-size:var(--fontsize-small);
|
|
81
|
+
font-size: var(--fontsize-small);
|
|
84
82
|
color: var(--theme-white-color);
|
|
85
83
|
line-height: 1.2;
|
|
86
|
-
|
|
87
|
-
li:first-child span:before {
|
|
88
|
-
display: none;
|
|
84
|
+
padding: 0 10px;
|
|
89
85
|
}
|
|
90
86
|
|
|
91
87
|
[approver][current] {
|
|
@@ -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;;
|
|
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"]}
|