@things-factory/organization 7.0.0-alpha.4 → 7.0.0-alpha.6
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.
|
@@ -22,6 +22,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
ol {
|
|
25
|
+
position: relative;
|
|
25
26
|
margin: 0;
|
|
26
27
|
padding: 0;
|
|
27
28
|
display: flex;
|
|
@@ -42,8 +43,8 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
42
43
|
position: absolute;
|
|
43
44
|
margin-left: -25px;
|
|
44
45
|
margin-top: 10px;
|
|
45
|
-
background-color:var(--secondary-text-color);
|
|
46
|
-
opacity
|
|
46
|
+
background-color: var(--secondary-text-color);
|
|
47
|
+
opacity: 0.4;
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
li:first-child:before {
|
|
@@ -56,13 +57,13 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
56
57
|
margin-bottom: var(--margin-narrow);
|
|
57
58
|
background-color: var(--theme-white-color);
|
|
58
59
|
border-radius: 5px;
|
|
59
|
-
border:2px solid var(--secondary-text-color);
|
|
60
|
+
border: 2px solid var(--secondary-text-color);
|
|
60
61
|
font-size: var(--fontsize-small);
|
|
61
62
|
color: var(--secondary-text-color);
|
|
62
63
|
line-height: 1;
|
|
63
|
-
padding:var(--padding-narrow) var(--padding-default);
|
|
64
|
+
padding: var(--padding-narrow) var(--padding-default);
|
|
64
65
|
}
|
|
65
|
-
[approver][current] span{
|
|
66
|
+
[approver][current] span {
|
|
66
67
|
background-color: var(--secondary-text-color);
|
|
67
68
|
border-color: var(--secondary-text-color);
|
|
68
69
|
color: var(--theme-white-color);
|
|
@@ -70,14 +71,14 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
70
71
|
[approver][current] {
|
|
71
72
|
font-weight: bold;
|
|
72
73
|
}
|
|
73
|
-
[approver][current] ~ li span{
|
|
74
|
+
[approver][current] ~ li span {
|
|
74
75
|
background-color: rgba(0, 0, 0, 0.5);
|
|
75
76
|
border-color: transparent;
|
|
76
77
|
color: var(--theme-white-color);
|
|
77
78
|
}
|
|
78
|
-
[approver][current] ~ li:before{
|
|
79
|
-
background-color:rgba(0,0,0
|
|
80
|
-
opacity:1
|
|
79
|
+
[approver][current] ~ li:before {
|
|
80
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
81
|
+
opacity: 1;
|
|
81
82
|
}
|
|
82
83
|
`
|
|
83
84
|
]
|
|
@@ -90,8 +91,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
90
91
|
|
|
91
92
|
return html`
|
|
92
93
|
<ol>
|
|
93
|
-
${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``}
|
|
94
|
-
${items.map((item, order) => this.renderItem(item, order + 1))}
|
|
94
|
+
${this.model ? html` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html``} ${items.map((item, order) => this.renderItem(item, order + 1))}
|
|
95
95
|
</ol>
|
|
96
96
|
`
|
|
97
97
|
}
|
|
@@ -99,11 +99,7 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
|
|
|
99
99
|
renderItem(item: ApprovalLineItem, order: number): TemplateResult {
|
|
100
100
|
const { type, approver } = item
|
|
101
101
|
const { name } = approver || {
|
|
102
|
-
name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(
|
|
103
|
-
type!
|
|
104
|
-
)
|
|
105
|
-
? i18next.t(`label.${type}`)
|
|
106
|
-
: ''
|
|
102
|
+
name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(type!) ? i18next.t(`label.${type}`) : ''
|
|
107
103
|
}
|
|
108
104
|
|
|
109
105
|
return html`
|
|
@@ -12,17 +12,14 @@ let ApprovalLineView = class ApprovalLineView extends localize(i18next)(LitEleme
|
|
|
12
12
|
const items = this.model || [];
|
|
13
13
|
return html `
|
|
14
14
|
<ol>
|
|
15
|
-
${this.model ? html ` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html ``}
|
|
16
|
-
${items.map((item, order) => this.renderItem(item, order + 1))}
|
|
15
|
+
${this.model ? html ` <li approver><span>ME</span>${i18next.t('label.myself')}</li> ` : html ``} ${items.map((item, order) => this.renderItem(item, order + 1))}
|
|
17
16
|
</ol>
|
|
18
17
|
`;
|
|
19
18
|
}
|
|
20
19
|
renderItem(item, order) {
|
|
21
20
|
const { type, approver } = item;
|
|
22
21
|
const { name } = approver || {
|
|
23
|
-
name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(type)
|
|
24
|
-
? i18next.t(`label.${type}`)
|
|
25
|
-
: ''
|
|
22
|
+
name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(type) ? i18next.t(`label.${type}`) : ''
|
|
26
23
|
};
|
|
27
24
|
return html `
|
|
28
25
|
<li approver ?current=${this.current == order}>
|
|
@@ -47,6 +44,7 @@ ApprovalLineView.styles = [
|
|
|
47
44
|
}
|
|
48
45
|
|
|
49
46
|
ol {
|
|
47
|
+
position: relative;
|
|
50
48
|
margin: 0;
|
|
51
49
|
padding: 0;
|
|
52
50
|
display: flex;
|
|
@@ -67,8 +65,8 @@ ApprovalLineView.styles = [
|
|
|
67
65
|
position: absolute;
|
|
68
66
|
margin-left: -25px;
|
|
69
67
|
margin-top: 10px;
|
|
70
|
-
background-color:var(--secondary-text-color);
|
|
71
|
-
opacity
|
|
68
|
+
background-color: var(--secondary-text-color);
|
|
69
|
+
opacity: 0.4;
|
|
72
70
|
}
|
|
73
71
|
|
|
74
72
|
li:first-child:before {
|
|
@@ -81,13 +79,13 @@ ApprovalLineView.styles = [
|
|
|
81
79
|
margin-bottom: var(--margin-narrow);
|
|
82
80
|
background-color: var(--theme-white-color);
|
|
83
81
|
border-radius: 5px;
|
|
84
|
-
border:2px solid var(--secondary-text-color);
|
|
82
|
+
border: 2px solid var(--secondary-text-color);
|
|
85
83
|
font-size: var(--fontsize-small);
|
|
86
84
|
color: var(--secondary-text-color);
|
|
87
85
|
line-height: 1;
|
|
88
|
-
padding:var(--padding-narrow) var(--padding-default);
|
|
86
|
+
padding: var(--padding-narrow) var(--padding-default);
|
|
89
87
|
}
|
|
90
|
-
[approver][current] span{
|
|
88
|
+
[approver][current] span {
|
|
91
89
|
background-color: var(--secondary-text-color);
|
|
92
90
|
border-color: var(--secondary-text-color);
|
|
93
91
|
color: var(--theme-white-color);
|
|
@@ -95,14 +93,14 @@ ApprovalLineView.styles = [
|
|
|
95
93
|
[approver][current] {
|
|
96
94
|
font-weight: bold;
|
|
97
95
|
}
|
|
98
|
-
[approver][current] ~ li span{
|
|
96
|
+
[approver][current] ~ li span {
|
|
99
97
|
background-color: rgba(0, 0, 0, 0.5);
|
|
100
98
|
border-color: transparent;
|
|
101
99
|
color: var(--theme-white-color);
|
|
102
100
|
}
|
|
103
|
-
[approver][current] ~ li:before{
|
|
104
|
-
background-color:rgba(0,0,0
|
|
105
|
-
opacity:1
|
|
101
|
+
[approver][current] ~ li:before {
|
|
102
|
+
background-color: rgba(0, 0, 0, 0.4);
|
|
103
|
+
opacity: 1;
|
|
106
104
|
}
|
|
107
105
|
`
|
|
108
106
|
];
|
|
@@ -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;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,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;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA5D;;QA8EuB,YAAO,GAAY,CAAC,CAAC,CAAA;IAyBnD,CAAC;IAvBC,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,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEhK,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;YAC3B,IAAI,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,IAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;SACzJ,CAAA;QAED,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK;gBACnC,OAAO,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;UAChC,IAAI;;KAET,CAAA;IACH,CAAC;;AArGM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAA2B;AACtD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAsB;AA9EtC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAuG5B;SAvGY,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'\nimport { OrgMemberTargetType } from '../types/org-member'\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 --mdc-icon-size: 3em;\n color: var(--secondary-color, black);\n }\n\n ol {\n position: relative;\n margin: 0;\n padding: 0;\n display: flex;\n gap: 25px;\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: 25px;\n display: block;\n position: absolute;\n margin-left: -25px;\n margin-top: 10px;\n background-color: var(--secondary-text-color);\n opacity: 0.4;\n }\n\n li:first-child:before {\n display: none;\n }\n\n span {\n display: block;\n margin: auto;\n margin-bottom: var(--margin-narrow);\n background-color: var(--theme-white-color);\n border-radius: 5px;\n border: 2px solid var(--secondary-text-color);\n font-size: var(--fontsize-small);\n color: var(--secondary-text-color);\n line-height: 1;\n padding: var(--padding-narrow) var(--padding-default);\n }\n [approver][current] span {\n background-color: var(--secondary-text-color);\n border-color: var(--secondary-text-color);\n color: var(--theme-white-color);\n }\n [approver][current] {\n font-weight: bold;\n }\n [approver][current] ~ li span {\n background-color: rgba(0, 0, 0, 0.5);\n border-color: transparent;\n color: var(--theme-white-color);\n }\n [approver][current] ~ li:before {\n background-color: rgba(0, 0, 0, 0.4);\n opacity: 1;\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``} ${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 name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(type!) ? i18next.t(`label.${type}`) : ''\n }\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"]}
|