wj-elements 0.1.74 → 0.1.76

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 (4) hide show
  1. package/dist/light.css +6 -0
  2. package/dist/wje-orgchart-group.js +3 -1
  3. package/dist/wje-orgchart-item.js +9 -9
  4. package/package.json +1 -1
package/dist/light.css CHANGED
@@ -395,11 +395,17 @@
395
395
  --wje-orgchart-item-width: 75px;
396
396
  --wje-orgchart-item-border-radius: var(--wje-border-radius-large);
397
397
  --wje-orgchart-item-height-line: 10px;
398
+ --wje-orgchart-item-highlight-background: var(--wje-color-complete-2);
399
+ --wje-orgchart-item-hover-background: var(--wje-color-contrast-3);
400
+ --wje-orgchart-item-highlight-border: 1px solid blue;
401
+ --wje-orgchart-item-hover-border: 1px solid red;
402
+ --wje-orgchart-item-expander-size: 0.75rem;
398
403
 
399
404
  /* Orgchart - Group */
400
405
  --wje-orgchart-group-width: auto;
401
406
  --wje-orgchart-group-border-radius: var(--wje-border-radius-large);
402
407
  --wje-orgchart-group-height-line: 10px;
408
+ --wje-orgchart-group-padding: .25rem 0;
403
409
 
404
410
  /* Rate */
405
411
  --wje-rate-gap: .25rem;
package/dist/wje-orgchart-group.js CHANGED
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  import WJElement from "./wje-element.js";
8
- const styles = ":host {\n text-align: center;\n list-style-type: none;\n position: relative;\n padding: var(--wje-orgchart-group-height-line) 0 0 0;\n transition: all 0.5s;\n\n &::before, &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 50%;\n border-top: 1px solid var(--wje-border-color);\n width: 50%;\n height: var(--wje-orgchart-group-height-line);\n }\n\n &::after {\n right: auto;\n left: 50%;\n border-left: 1px solid var(--wje-border-color);\n }\n\n wje-card::part(native) {\n box-sizing: border-box;\n padding: .25rem 0;\n }\n\n wje-card h4 {\n margin: 0;\n }\n wje-card .items {\n display: flex;\n }\n\n .orgchart-group {\n display: flex;\n flex-direction: column;\n wje-card {\n margin: 0 auto;\n width: var(--wje-orgchart-group-width);\n }\n }\n}\n\n:host(:only-child)::after, :host(:only-child)::before {\n display: none;\n}\n\n:host(:only-child) {\n padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n border: 0 none;\n}\n\n:host(:last-child)::before {\n border-right: 1px solid var(--wje-border-color);\n border-radius: 0 var(--wje-orgchart-group-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n border-radius: var(--wje-orgchart-group-border-radius) 0 0 0;\n}";
8
+ const styles = ":host {\n text-align: center;\n list-style-type: none;\n position: relative;\n padding: var(--wje-orgchart-group-height-line) 0 0 0;\n transition: all 0.5s;\n\n &::before, &::after {\n content: '';\n position: absolute;\n top: 0;\n right: 50%;\n border-top: 1px solid var(--wje-border-color);\n width: 50%;\n height: var(--wje-orgchart-group-height-line);\n }\n\n &::after {\n right: auto;\n left: 50%;\n border-left: 1px solid var(--wje-border-color);\n }\n\n wje-card::part(native) {\n box-sizing: border-box;\n padding: var(--wje-orgchart-group-padding);\n }\n\n wje-card h4 {\n margin: 0;\n }\n wje-card .items {\n display: flex;\n }\n\n .orgchart-group {\n display: flex;\n flex-direction: column;\n wje-card {\n margin: 0 auto;\n width: var(--wje-orgchart-group-width);\n }\n }\n}\n\n:host(:only-child)::after, :host(:only-child)::before {\n display: none;\n}\n\n:host(:only-child) {\n padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n border: 0 none;\n}\n\n:host(:last-child)::before {\n border-right: 1px solid var(--wje-border-color);\n border-radius: 0 var(--wje-orgchart-group-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n border-radius: var(--wje-orgchart-group-border-radius) 0 0 0;\n}";
9
9
  class OrgchartGroup extends WJElement {
10
10
  /**
11
11
  * Creates an instance of OrgchartGroup.
@@ -46,8 +46,10 @@ class OrgchartGroup extends WJElement {
46
46
  native.classList.add("orgchart-group");
47
47
  let card = document.createElement("wje-card");
48
48
  let title = document.createElement("h4");
49
+ title.setAttribute("part", "title");
49
50
  title.innerHTML = this.getAttribute("title") || "";
50
51
  let items = document.createElement("div");
52
+ items.setAttribute("part", "items");
51
53
  items.classList.add("items");
52
54
  let slot = document.createElement("slot");
53
55
  items.appendChild(slot);
package/dist/wje-orgchart-item.js CHANGED
@@ -32,8 +32,8 @@ const styles = `:host {
32
32
  left: calc(50% + 1px / 2);
33
33
  border: 1px solid var(--wje-border-color);
34
34
  border-radius: 50%;
35
- width: 12px;
36
- height: 12px;
35
+ width: var(--wje-orgchart-item-expander-size);
36
+ height: var(--wje-orgchart-item-expander-size);
37
37
  display: flex;
38
38
  align-items: center;
39
39
  justify-content: center;
@@ -74,6 +74,7 @@ const styles = `:host {
74
74
  padding: var(--wje-orgchart-item-height-line) 0 0 0;
75
75
  transition: all 0.5s;
76
76
  width: auto;
77
+ box-sizing: border-box;
77
78
 
78
79
  &::before, &::after {
79
80
  content: '';
@@ -82,7 +83,7 @@ const styles = `:host {
82
83
  right: 50%;
83
84
  border-top: 1px solid var(--wje-border-color);
84
85
  width: 50%;
85
- height: var(--wje-orgchart-item-height-line);
86
+ height: calc(var(--wje-orgchart-item-height-line) - 1px);
86
87
  }
87
88
 
88
89
  &::after {
@@ -98,19 +99,18 @@ const styles = `:host {
98
99
 
99
100
  :host(:hover){
100
101
  wje-card::part(native) {
101
- background: var(--wje-color-contrast-3);
102
- /*color: #000;*/
102
+ background: var(--wje-orgchart-item-hover-background);
103
+ border: var(--wje-orgchart-item-hover-border);
103
104
  }
104
105
  }
105
106
 
106
107
  :host(.highlight){
107
108
  wje-card::part(native) {
108
- background: var(--wje-color-complete-2);
109
- /*color: #000;*/
109
+ background: var(--wje-orgchart-item-highlight-background);
110
+ border: var(--wje-orgchart-item-highlight-border);
110
111
  }
111
112
  }
112
113
 
113
-
114
114
  :host(:only-child)::after, :host(:only-child)::before {
115
115
  display: none;
116
116
  }
@@ -192,7 +192,7 @@ class OrgchartItem extends WJElement {
192
192
  expander.classList.add("expander");
193
193
  expander.innerHTML = "-";
194
194
  card.appendChild(slot);
195
- if (this.children.length > 0)
195
+ if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART"))
196
196
  card.appendChild(expander);
197
197
  native.appendChild(card);
198
198
  native.appendChild(child);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "wj-elements",
3
3
  "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
4
- "version": "0.1.74",
4
+ "version": "0.1.76",
5
5
  "homepage": "https://github.com/lencys/wj-elements",
6
6
  "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
7
7
  "license": "MIT",