@things-factory/organization 6.1.48 → 6.1.54

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.
@@ -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,50 @@ 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
+ span:before {
38
+ content: '';
39
+ height: 2px;
40
+ width: 15px;
41
+ display: block;
42
+ position: absolute;
43
+ margin-left: -15px;
44
+ margin-top: 6px;
45
+ background-color: rgba(0, 0, 0, 0.4);
31
46
  }
32
47
 
33
- div[approver][current] {
34
- border-color: red;
48
+ span {
49
+ display: block;
50
+ height: 15px;
51
+ margin: auto;
52
+ margin-bottom: var(--margin-narrow);
53
+ background-color: rgba(0, 0, 0, 0.5);
54
+ border-radius: 10px;
55
+ font-size:var(--fontsize-small);
56
+ color: var(--theme-white-color);
57
+ line-height: 1.2;
58
+ }
59
+ li:first-child span:before {
60
+ display: none;
61
+ }
62
+
63
+ [approver][current] {
64
+ font-weight: bold;
65
+ }
66
+ [approver][current] span {
67
+ background-color: #84d600;
68
+ color: var(--theme-white-color);
35
69
  }
36
70
  `
37
71
  ]
@@ -43,15 +77,16 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
43
77
  const items = this.model || []
44
78
 
45
79
  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))}
80
+ <ol>
81
+ ${this.model
82
+ ? html`
83
+ <li approver>
84
+ <span>ME</span>myself
85
+ </span>
86
+ `
87
+ : html``}
88
+ ${items.map((item, order) => this.renderItem(item, order + 1))}
89
+ </ol>
55
90
  `
56
91
  }
57
92
 
@@ -61,12 +96,10 @@ export class ApprovalLineView extends localize(i18next)(LitElement) {
61
96
  const subname = (description || controlNo) && `(${description || controlNo})`
62
97
 
63
98
  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>
99
+ <li approver ?current=${this.current == order}>
100
+ <span>${type}</span>
101
+ ${name}
102
+ </li>
70
103
  `
71
104
  }
72
105
  }
@@ -10,15 +10,16 @@ let ApprovalLineView = class ApprovalLineView extends localize(i18next)(LitEleme
10
10
  render() {
11
11
  const items = this.model || [];
12
12
  return html `
13
- ${this.model
13
+ <ol>
14
+ ${this.model
14
15
  ? html `
15
- <div approver>
16
- <div>ME</div>
17
- <div>myself</div>
18
- </div>
19
- `
16
+ <li approver>
17
+ <span>ME</span>myself
18
+ </span>
19
+ `
20
20
  : html ``}
21
- ${items.map((item, order) => this.renderItem(item, order + 1))}
21
+ ${items.map((item, order) => this.renderItem(item, order + 1))}
22
+ </ol>
22
23
  `;
23
24
  }
24
25
  renderItem(item, order) {
@@ -26,12 +27,10 @@ let ApprovalLineView = class ApprovalLineView extends localize(i18next)(LitEleme
26
27
  const { name, description, controlNo } = approver || {};
27
28
  const subname = (description || controlNo) && `(${description || controlNo})`;
28
29
  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>
30
+ <li approver ?current=${this.current == order}>
31
+ <span>${type}</span>
32
+ ${name}
33
+ </li>
35
34
  `;
36
35
  }
37
36
  };
@@ -41,10 +40,8 @@ ApprovalLineView.styles = [
41
40
  display: flex;
42
41
  flex-direction: row;
43
42
  flex-wrap: wrap;
44
-
45
- gap: 10px;
46
43
  padding: 10px;
47
-
44
+ justify-content: center;
48
45
  align-items: center;
49
46
 
50
47
  background-color: #fff;
@@ -53,14 +50,50 @@ ApprovalLineView.styles = [
53
50
  color: var(--secondary-color, black);
54
51
  }
55
52
 
56
- div[approver] {
57
- padding: 5px;
58
- border-radius: 5px;
59
- border: 2px solid var(--primary-color, black);
53
+ ol {
54
+ margin: 0;
55
+ padding: 0;
56
+ display: flex;
57
+ gap:15px;
58
+ list-style-type: none;
60
59
  }
61
60
 
62
- div[approver][current] {
63
- border-color: red;
61
+ li {
62
+ text-align: center;
63
+ font-size:var(--fontsize-default);
64
+ }
65
+ span:before {
66
+ content: '';
67
+ height: 2px;
68
+ width: 15px;
69
+ display: block;
70
+ position: absolute;
71
+ margin-left: -15px;
72
+ margin-top: 6px;
73
+ background-color: rgba(0, 0, 0, 0.4);
74
+ }
75
+
76
+ span {
77
+ display: block;
78
+ height: 15px;
79
+ margin: auto;
80
+ margin-bottom: var(--margin-narrow);
81
+ background-color: rgba(0, 0, 0, 0.5);
82
+ border-radius: 10px;
83
+ font-size:var(--fontsize-small);
84
+ color: var(--theme-white-color);
85
+ line-height: 1.2;
86
+ }
87
+ li:first-child span:before {
88
+ display: none;
89
+ }
90
+
91
+ [approver][current] {
92
+ font-weight: bold;
93
+ }
94
+ [approver][current] span {
95
+ background-color: #84d600;
96
+ color: var(--theme-white-color);
64
97
  }
65
98
  `
66
99
  ];
@@ -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;;QAkEuB,YAAO,GAAY,CAAC,CAAC,CAAA;IA+BnD,CAAC;IA7BC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;;aAIH;YACH,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,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;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK;gBACnC,IAAI;UACV,IAAI;;KAET,CAAA;IACH,CAAC;;AA/FM,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4DF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+CAA2B;AACtD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAsB;AAlEtC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAiG5B;SAjGY,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 span: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 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 }\n li:first-child span:before {\n display: none;\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\n ? html`\n <li approver>\n <span>ME</span>myself\n </span>\n `\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 { type, approver } = item\n const { name, description, controlNo } = approver || {}\n const subname = (description || controlNo) && `(${description || controlNo})`\n\n return html`\n <li approver ?current=${this.current == order}>\n <span>${type}</span>\n ${name}\n </li>\n `\n }\n}\n"]}