@ewc-lib/ewc-icon-button-group 3.0.0-alpha → 3.2.0-alpha

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 (8) hide show
  1. package/package.json +2 -2
  2. package/readme.md +9 -0
  3. package/screenshot.png +0 -0
  4. package/src/css.js +11 -6
  5. package/src/element.js +0 -0
  6. package/src/main.js +2 -2
  7. package/usage-example/vanilla/index.html +42 -12
  8. package/usage-example/webpack/index.html +68 -13
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ewc-lib/ewc-icon-button-group",
3
3
  "//": "please always keep version in sync with constructor in main.js",
4
- "version": "3.0.0-alpha",
4
+ "version": "3.2.0-alpha",
5
5
  "basedOnStandard": "3.0.1",
6
6
  "description": "",
7
7
  "main": "src/main.js",
@@ -16,6 +16,6 @@
16
16
  "@ewc-lib/ewc-css-common": "0.1.0"
17
17
  },
18
18
  "dependencies": {
19
- "@ewc-lib/ewc-icon-button": "2.1.0-alpha"
19
+ "@ewc-lib/ewc-icon-button": "3.0.0-alpha"
20
20
  }
21
21
  }
package/readme.md CHANGED
@@ -182,6 +182,15 @@ European Union Public License (EUPL)
182
182
 
183
183
  # Changelog
184
184
 
185
+ - 3.2.0-alpha
186
+ - latest design
187
+
188
+ - 3.1.1-alpha
189
+ - bugfix: id in action event contains id of previously selected element instead of currently clicked element
190
+
191
+ - 3.1.0-alpha
192
+ - change config (colors) to match latest design
193
+
185
194
  - 3.0.0-alpha
186
195
  - properly support disabled state,
187
196
  - add selection by id
package/screenshot.png CHANGED
Binary file
package/src/css.js CHANGED
@@ -11,17 +11,22 @@ function cssString(cssClassPrefix, breakpoint) {
11
11
 
12
12
  .${cssClassPrefix} {
13
13
  display: flex;
14
+ --outerFrameWidth: 1px;
14
15
  }
15
16
  .${cssClassPrefix} ewc-icon-button::part(button) {
16
17
  display:flex;
17
18
  align-items:center;
18
- border: solid 1px var(--c-p);
19
- color: var(--icon-color);
20
- margin-left: -1px; /* thin 1px separation between the buttons */
21
- max-width: 125px;
22
- min-width: 125px;
23
- height: 45px;
19
+ max-width: 115px; /* comes out as 116x41, as per spec */
20
+ min-width: 115px;
21
+ height: 39px;
22
+ margin-right: 2px; /* :-/ */
24
23
  }
24
+ @media screen and (max-width: ${breakpoint}) {
25
+ .${cssClassPrefix} ewc-icon-button::part(button) {
26
+ margin-right: 0px; /* :-/ */
27
+ }
28
+ }
29
+
25
30
  .${cssClassPrefix} ewc-icon-button:first-of-type::part(button) {
26
31
  border-bottom-left-radius: 50px;
27
32
  border-top-left-radius: 50px;
package/src/element.js ADDED
File without changes
package/src/main.js CHANGED
@@ -29,7 +29,7 @@ class Element extends HTMLElement {
29
29
  }
30
30
 
31
31
  connectedCallback() {
32
- this.setAttribute("ewc-version", "3.0.0-alpha") // please always keep in sync with version in package.json
32
+ this.setAttribute("ewc-version", "3.2.0-alpha") // please always keep in sync with version in package.json
33
33
  if(this.#isInitialised == true) {return}
34
34
 
35
35
  this.classList.add(this.#cssClassPrefix)
@@ -126,7 +126,7 @@ class Element extends HTMLElement {
126
126
  // no operation. the already pressed button has been clicked again.
127
127
  } else {
128
128
  if(this.selectedElement) {
129
- const event = new CustomEvent("action", { detail: {"index":i, "id":this.selectedElement.getAttribute("id")} });
129
+ const event = new CustomEvent("action", { detail: {"index":i, "id":this.#getElByIndex(i).getAttribute("id")} });
130
130
  this.dispatchEvent(event)
131
131
  }
132
132
  //console.debug("ewc-icon-button-group: sent new action event")
package/usage-example/vanilla/index.html CHANGED
@@ -16,6 +16,11 @@
16
16
  outline:2px solid darkblue;
17
17
  outline-offset: 5px;
18
18
  }
19
+ .pa {
20
+ font-family:Verdana, Geneva, Tahoma, sans-serif;
21
+ font-weight: bold;
22
+ text-transform: capitalize;
23
+ }
19
24
  </style>
20
25
  <link rel="stylesheet" href="./custom-props.css">
21
26
  </head>
@@ -25,7 +30,7 @@
25
30
  <script src="./ewc-icon-button-group/src/main.js" type="module"></script>
26
31
 
27
32
  <div id="container">
28
- <p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
33
+ <p class="pa">Buttons available; on light, dark and blue background</p>
29
34
 
30
35
  <div style="margin:20px; padding:20px;">
31
36
  <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightEnabled">
@@ -36,6 +41,26 @@
36
41
  </ewc-icon-button-group>
37
42
  </div>
38
43
 
44
+ <div style="margin:20px; padding:20px; background: black;">
45
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkEnabled">
46
+ <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
47
+ <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
48
+ <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
49
+ <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
50
+ </ewc-icon-button-group>
51
+ </div>
52
+
53
+ <div style="margin:20px; padding:20px; background: var(--c-p-140);">
54
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="blueEnabled">
55
+ <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
56
+ <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
57
+ <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
58
+ <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
59
+ </ewc-icon-button-group>
60
+ </div>
61
+
62
+ <p class="pa">Disabled buttons</p>
63
+
39
64
  <div style="margin:20px; padding:20px;">
40
65
  <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightDisabled">
41
66
  <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" state="disabled"></ewc-icon-button>
@@ -45,18 +70,17 @@
45
70
  </ewc-icon-button-group>
46
71
  </div>
47
72
 
48
-
49
- <div style="margin:20px; padding:20px; background: darkblue;">
50
- <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkEnabled">
51
- <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
52
- <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
53
- <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
54
- <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
73
+ <div style="margin:20px; padding:20px; background: black;">
74
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
75
+ <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
76
+ <ewc-icon-button state="disabled" icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
77
+ <ewc-icon-button state="disabled" icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
78
+ <ewc-icon-button state="disabled" icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
55
79
  </ewc-icon-button-group>
56
80
  </div>
57
81
 
58
- <div style="margin:20px; padding:20px; background: darkblue;">
59
- <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
82
+ <div style="margin:20px; padding:20px; background: var(--c-p-140);">
83
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="blueDisabled">
60
84
  <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
61
85
  <ewc-icon-button state="disabled" icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
62
86
  <ewc-icon-button state="disabled" icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
@@ -81,6 +105,12 @@
81
105
  console.log("button clicked or selected w/ kdb: ", e.detail, el)
82
106
  })
83
107
 
108
+ document.getElementById("blueEnabled").addEventListener("action",(e)=>{
109
+ document.getElementById("blueEnabled").setAttribute("selectedIndex",e.detail.index)
110
+ const el = document.getElementById("darkEnabled").selectedElement
111
+ console.log("button clicked or selected w/ kdb: ", e.detail, el)
112
+ })
113
+
84
114
  })
85
115
  </script>
86
116
 
@@ -91,13 +121,13 @@
91
121
  <summary>Click to see more detailled information intended for developers</summary>
92
122
 
93
123
  <p>
94
- This section demonstrates the "feel" part of look & feel.
124
+ This section focuses more on the "feel" part of look & feel.
95
125
  <br>
96
126
  It takes into consideration the many cases that emerge by having a group of tri-state buttons.
97
127
  <br>
98
128
  For instance, what happens when a currently pressed button gets disabled. Or when all buttons get disabled and enabled again.
99
129
  <br>
100
- The component is flexible enough to be able to leave the answer to those questions to the developer who uses the component.
130
+ The component is flexible enough to be able to leave the answer to those questions in the hands of the developer who uses the component.
101
131
  </p>
102
132
 
103
133
  <div style="margin:20px; padding:20px;">
package/usage-example/webpack/index.html CHANGED
@@ -16,13 +16,21 @@
16
16
  outline:2px solid darkblue;
17
17
  outline-offset: 5px;
18
18
  }
19
- </style>
19
+ .pa {
20
+ font-family:Verdana, Geneva, Tahoma, sans-serif;
21
+ font-weight: bold;
22
+ text-transform: capitalize;
23
+ }
24
+ </style>
25
+ <link rel="stylesheet" href="./custom-props.css">
20
26
  </head>
21
27
 
22
28
  <body>
29
+ <script src="./ewc-icon-button/src/main.js" type="module"></script>
30
+ <script src="./ewc-icon-button-group/src/main.js" type="module"></script>
23
31
 
24
32
  <div id="container">
25
- <p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
33
+ <p class="pa">Buttons available; on light, dark and blue background</p>
26
34
 
27
35
  <div style="margin:20px; padding:20px;">
28
36
  <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightEnabled">
@@ -33,6 +41,26 @@
33
41
  </ewc-icon-button-group>
34
42
  </div>
35
43
 
44
+ <div style="margin:20px; padding:20px; background: black;">
45
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkEnabled">
46
+ <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
47
+ <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
48
+ <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
49
+ <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
50
+ </ewc-icon-button-group>
51
+ </div>
52
+
53
+ <div style="margin:20px; padding:20px; background: var(--c-p-140);">
54
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="blueEnabled">
55
+ <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
56
+ <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
57
+ <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
58
+ <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
59
+ </ewc-icon-button-group>
60
+ </div>
61
+
62
+ <p class="pa">Disabled buttons</p>
63
+
36
64
  <div style="margin:20px; padding:20px;">
37
65
  <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightDisabled">
38
66
  <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" state="disabled"></ewc-icon-button>
@@ -42,18 +70,17 @@
42
70
  </ewc-icon-button-group>
43
71
  </div>
44
72
 
45
-
46
- <div style="margin:20px; padding:20px; background: darkblue;">
47
- <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkEnabled">
48
- <ewc-icon-button icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
49
- <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
50
- <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
51
- <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
73
+ <div style="margin:20px; padding:20px; background: black;">
74
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
75
+ <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
76
+ <ewc-icon-button state="disabled" icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
77
+ <ewc-icon-button state="disabled" icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
78
+ <ewc-icon-button state="disabled" icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
52
79
  </ewc-icon-button-group>
53
80
  </div>
54
81
 
55
- <div style="margin:20px; padding:20px; background: darkblue;">
56
- <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
82
+ <div style="margin:20px; padding:20px; background: var(--c-p-140);">
83
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="blueDisabled">
57
84
  <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
58
85
  <ewc-icon-button state="disabled" icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
59
86
  <ewc-icon-button state="disabled" icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
@@ -62,17 +89,45 @@
62
89
  </div>
63
90
 
64
91
 
92
+ <script>
93
+ window.addEventListener('DOMContentLoaded',function () {
94
+
95
+ // catch events of all buttons at once
96
+ document.getElementById("lightEnabled").addEventListener("action",(e)=>{
97
+ document.getElementById("lightEnabled").setAttribute("selectedIndex",e.detail.index)
98
+ const el = document.getElementById("lightEnabled").selectedElement
99
+ console.log("button clicked or selected w/ kdb: ", e.detail, el)
100
+ })
101
+
102
+ document.getElementById("darkEnabled").addEventListener("action",(e)=>{
103
+ document.getElementById("darkEnabled").setAttribute("selectedIndex",e.detail.index)
104
+ const el = document.getElementById("darkEnabled").selectedElement
105
+ console.log("button clicked or selected w/ kdb: ", e.detail, el)
106
+ })
107
+
108
+ document.getElementById("blueEnabled").addEventListener("action",(e)=>{
109
+ document.getElementById("blueEnabled").setAttribute("selectedIndex",e.detail.index)
110
+ const el = document.getElementById("darkEnabled").selectedElement
111
+ console.log("button clicked or selected w/ kdb: ", e.detail, el)
112
+ })
113
+
114
+ })
115
+ </script>
116
+
117
+
118
+
119
+
65
120
  <details>
66
121
  <summary>Click to see more detailled information intended for developers</summary>
67
122
 
68
123
  <p>
69
- This section demonstrates the "feel" part of look & feel.
124
+ This section focuses more on the "feel" part of look & feel.
70
125
  <br>
71
126
  It takes into consideration the many cases that emerge by having a group of tri-state buttons.
72
127
  <br>
73
128
  For instance, what happens when a currently pressed button gets disabled. Or when all buttons get disabled and enabled again.
74
129
  <br>
75
- The component is flexible enough to be able to leave the answer to those questions to the developer who uses the component.
130
+ The component is flexible enough to be able to leave the answer to those questions in the hands of the developer who uses the component.
76
131
  </p>
77
132
 
78
133
  <div style="margin:20px; padding:20px;">