@ewc-lib/ewc-icon-button-group 3.2.0-alpha → 3.3.1-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 (7) hide show
  1. package/package.json +2 -2
  2. package/readme.md +7 -1
  3. package/src/main.js +28 -8
  4. package/usage-example/vanilla/index.html +48 -31
  5. package/usage-example/webpack/index.html +42 -60
  6. package/usage-example/webpack/main.js +13 -1
  7. package/src/element.js +0 -0
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.2.0-alpha",
4
+ "version": "3.3.1-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": "3.0.0-alpha"
19
+ "@ewc-lib/ewc-icon-button": "3.4.0-alpha"
20
20
  }
21
21
  }
package/readme.md CHANGED
@@ -35,7 +35,7 @@ Within a button-group, only buttons that are not currently pressed and not disab
35
35
  |----------------|-----------------------|---------------------|---------|------------
36
36
  | selectedIndex | selectedIndex | Number | 0 | The 0-based ordinal number of the button pressed.
37
37
  | selectedId | selectedId | Number | - | The id of the button pressed. Can be null if the id attribute is not set.
38
- | breakpoint | breakpoint | CSS String | 650px | if viewport width is smaller than this, the buttons are displayed without label.
38
+ | breakpoint | breakpoint | Number | 480 | a unitless number, interpreted as pixel. if viewport width is smaller than this, the buttons are displayed without label.
39
39
  | selectedElement| | HTML element | - | The HTML element currently selected. Read only.
40
40
 
41
41
 
@@ -182,6 +182,12 @@ European Union Public License (EUPL)
182
182
 
183
183
  # Changelog
184
184
 
185
+ - 3.3.1-alpha
186
+ - when label is shown (depending on breakpoint), don't show tooltip
187
+
188
+ - 3.3.0-alpha
189
+ - udate dependency, tooltip
190
+
185
191
  - 3.2.0-alpha
186
192
  - latest design
187
193
 
package/src/main.js CHANGED
@@ -4,7 +4,7 @@ button-group: min 1 and max 1 button can be in pressed down state.
4
4
  keyboard navigation:
5
5
  - a group can't get a focus
6
6
  - buttons in the group can get a focus
7
- - only not-pressed buttons can get a focus
7
+ (- only not-pressed buttons can get a focus) <-- to clarify, for now, not implemented
8
8
  - disabled buttons can't be pressed
9
9
  - left/up and right/down keys move the focus
10
10
  - enter and space key presses a button, releases the currently pressed button
@@ -18,6 +18,8 @@ class Element extends HTMLElement {
18
18
  #cssClassPrefix = "css-scope-"+ (Math.random() + 1).toString(36).substring(2)
19
19
  #isInitialised = false
20
20
  #buttonGroup = new ButtonGroup()
21
+ #resizeDebounceTimer = null
22
+ #breakpoint = "480" // px assumed
21
23
 
22
24
  getAttr(name, _default) {
23
25
  const r = this.hasAttribute(name) ? this.getAttribute(name) : _default
@@ -29,14 +31,15 @@ class Element extends HTMLElement {
29
31
  }
30
32
 
31
33
  connectedCallback() {
32
- this.setAttribute("ewc-version", "3.2.0-alpha") // please always keep in sync with version in package.json
34
+ this.setAttribute("ewc-version", "3.3.1-alpha") // please always keep in sync with version in package.json
33
35
  if(this.#isInitialised == true) {return}
34
36
 
35
37
  this.classList.add(this.#cssClassPrefix)
36
- this.appendChild(CSS(this.#cssClassPrefix, this.getAttr("breakpoint","480px")).cloneNode(true)) // .ecl-col-s- in ECL 4.8.1.
38
+ this.#breakpoint = this.getAttr("breakpoint","480")
39
+ this.appendChild(CSS(this.#cssClassPrefix, this.#breakpoint+"px").cloneNode(true)) // .ecl-col-s- in ECL 4.8.1.
37
40
 
38
41
  const nodes = this.querySelectorAll("ewc-icon-button")
39
- this.#setIndexOnNodes(nodes)
42
+ this.#setAttributes(nodes)
40
43
  this.#installEventHandlers(nodes)
41
44
  // attributeChangedCallback() might have been called before this, so it just stored the number but couldn't yet press the button. let it catch up now.
42
45
  this.#buttonGroup.applyCurrentSelection(nodes)
@@ -171,17 +174,34 @@ class Element extends HTMLElement {
171
174
  }.bind(this))
172
175
  }
173
176
 
174
- // assign 0-based ordinal number to each button
175
- // TODO: remove and replace w/ loops
176
- #setIndexOnNodes(nodes) {
177
+ #installResizeEventHandler(nodes) {
178
+
179
+ const setTooltips = function () {
180
+ for(let i=0;i<nodes.length;i++) {
181
+ const w = window.innerWidth<Number(this.#breakpoint)
182
+ nodes[i].setAttribute("tooltip-suppressed", w?"false":"true")
183
+ }
184
+ }.bind(this)
185
+
186
+ window.addEventListener('resize', function(ev) {
187
+ clearTimeout(this.#resizeDebounceTimer)
188
+ this.#resizeDebounceTimer = setTimeout(setTooltips, 200)
189
+ }.bind(this))
190
+
191
+ setTooltips()
192
+ }
193
+
194
+ #setAttributes(nodes) {
177
195
  for(let i=0;i<nodes.length;i++) {
178
- nodes[i].setAttribute("__index", i)
196
+ nodes[i].setAttribute("__index", i) // assign 0-based ordinal number to each button
197
+ nodes[i].setAttribute("is-in-group","true")
179
198
  }
180
199
  }
181
200
 
182
201
  #installEventHandlers(nodes) {
183
202
  this.#installActionEventHandler(nodes)
184
203
  this.#installArrowKeyEventHandler(nodes)
204
+ this.#installResizeEventHandler(nodes)
185
205
  }
186
206
 
187
207
  }
package/usage-example/vanilla/index.html CHANGED
@@ -30,61 +30,71 @@
30
30
  <script src="./ewc-icon-button-group/src/main.js" type="module"></script>
31
31
 
32
32
  <div id="container">
33
+ <form>
34
+ <fieldset id="tooltippos" style="display:flex; gap:15px;">
35
+ <legend>Tooltip position</legend>
36
+ <label> <input type="radio" id="top" name="tt">top</label>
37
+ <label> <input type="radio" id="right" name="tt">right</label>
38
+ <label> <input type="radio" id="bottom" name="tt" checked="checked">bottom (default)</label>
39
+ <label> <input type="radio" id="left" name="tt">left</label>
40
+ </fieldset>
41
+ </form>
42
+
33
43
  <p class="pa">Buttons available; on light, dark and blue background</p>
34
44
 
35
45
  <div style="margin:20px; padding:20px;">
36
- <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightEnabled">
37
- <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" ></ewc-icon-button>
38
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" ></ewc-icon-button>
39
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" ></ewc-icon-button>
40
- <ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table" ></ewc-icon-button>
46
+ <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800" id="lightEnabled">
47
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
48
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart"></ewc-icon-button>
49
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot"></ewc-icon-button>
50
+ <ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table"></ewc-icon-button>
41
51
  </ewc-icon-button-group>
42
52
  </div>
43
53
 
44
54
  <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>
55
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="darkEnabled">
56
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
57
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
58
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
59
+ <ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
50
60
  </ewc-icon-button-group>
51
61
  </div>
52
62
 
53
63
  <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>
64
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="blueEnabled">
65
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
66
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
67
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
68
+ <ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
59
69
  </ewc-icon-button-group>
60
70
  </div>
61
71
 
62
72
  <p class="pa">Disabled buttons</p>
63
73
 
64
74
  <div style="margin:20px; padding:20px;">
65
- <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightDisabled">
66
- <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" state="disabled"></ewc-icon-button>
67
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" state="disabled"></ewc-icon-button>
68
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" state="disabled"></ewc-icon-button>
69
- <ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table" state="disabled"></ewc-icon-button>
75
+ <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800" id="lightDisabled">
76
+ <ewc-icon-button state="disabled" icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
77
+ <ewc-icon-button state="disabled" icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart"></ewc-icon-button>
78
+ <ewc-icon-button state="disabled" icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot"></ewc-icon-button>
79
+ <ewc-icon-button state="disabled" icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table"></ewc-icon-button>
70
80
  </ewc-icon-button-group>
71
81
  </div>
72
82
 
73
83
  <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>
84
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="darkDisabled">
85
+ <ewc-icon-button state="disabled" icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
86
+ <ewc-icon-button state="disabled" icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
87
+ <ewc-icon-button state="disabled" icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
88
+ <ewc-icon-button state="disabled" icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
79
89
  </ewc-icon-button-group>
80
90
  </div>
81
91
 
82
92
  <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">
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>
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>
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>
87
- <ewc-icon-button state="disabled" icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
93
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="blueDisabled">
94
+ <ewc-icon-button state="disabled" icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
95
+ <ewc-icon-button state="disabled" icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
96
+ <ewc-icon-button state="disabled" icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
97
+ <ewc-icon-button state="disabled" icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
88
98
  </ewc-icon-button-group>
89
99
  </div>
90
100
 
@@ -131,7 +141,7 @@
131
141
  </p>
132
142
 
133
143
  <div style="margin:20px; padding:20px;">
134
- <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800px" id="ForDevelopers">
144
+ <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800" id="ForDevelopers">
135
145
  <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" id="grp1-line"></ewc-icon-button>
136
146
  <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" id="grp1-bar"></ewc-icon-button>
137
147
  <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" id="grp1-dot"></ewc-icon-button>
@@ -197,6 +207,13 @@
197
207
  group.selectedIndex = toSet ? 0 : -1
198
208
  })
199
209
 
210
+
211
+ document.getElementById("tooltippos").addEventListener("change", (e) => {
212
+ document.querySelectorAll("ewc-icon-button").forEach(el => {
213
+ el.setAttribute("tooltip-pos",e.target.id)
214
+ })
215
+ })
216
+
200
217
  })
201
218
  </script>
202
219
 
package/usage-example/webpack/index.html CHANGED
@@ -26,96 +26,77 @@
26
26
  </head>
27
27
 
28
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>
31
29
 
32
30
  <div id="container">
31
+ <form>
32
+ <fieldset id="tooltippos" style="display:flex; gap:15px;">
33
+ <legend>Tooltip position</legend>
34
+ <label> <input type="radio" id="top" name="tt">top</label>
35
+ <label> <input type="radio" id="right" name="tt">right</label>
36
+ <label> <input type="radio" id="bottom" name="tt" checked="checked">bottom (default)</label>
37
+ <label> <input type="radio" id="left" name="tt">left</label>
38
+ </fieldset>
39
+ </form>
40
+
33
41
  <p class="pa">Buttons available; on light, dark and blue background</p>
34
42
 
35
43
  <div style="margin:20px; padding:20px;">
36
- <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightEnabled">
37
- <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" ></ewc-icon-button>
38
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" ></ewc-icon-button>
39
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" ></ewc-icon-button>
40
- <ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table" ></ewc-icon-button>
44
+ <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800" id="lightEnabled">
45
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
46
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart"></ewc-icon-button>
47
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot"></ewc-icon-button>
48
+ <ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table"></ewc-icon-button>
41
49
  </ewc-icon-button-group>
42
50
  </div>
43
51
 
44
52
  <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>
53
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="darkEnabled">
54
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
55
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
56
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
57
+ <ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
50
58
  </ewc-icon-button-group>
51
59
  </div>
52
60
 
53
61
  <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>
62
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="blueEnabled">
63
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
64
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
65
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
66
+ <ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
59
67
  </ewc-icon-button-group>
60
68
  </div>
61
69
 
62
70
  <p class="pa">Disabled buttons</p>
63
71
 
64
72
  <div style="margin:20px; padding:20px;">
65
- <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800px" id="lightDisabled">
66
- <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" state="disabled"></ewc-icon-button>
67
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" state="disabled"></ewc-icon-button>
68
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" state="disabled"></ewc-icon-button>
69
- <ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table" state="disabled"></ewc-icon-button>
73
+ <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedIndex="0" breakpoint="800" id="lightDisabled">
74
+ <ewc-icon-button state="disabled" icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
75
+ <ewc-icon-button state="disabled" icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart"></ewc-icon-button>
76
+ <ewc-icon-button state="disabled" icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot"></ewc-icon-button>
77
+ <ewc-icon-button state="disabled" icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table"></ewc-icon-button>
70
78
  </ewc-icon-button-group>
71
79
  </div>
72
80
 
73
81
  <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>
82
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="darkDisabled">
83
+ <ewc-icon-button state="disabled" icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
84
+ <ewc-icon-button state="disabled" icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
85
+ <ewc-icon-button state="disabled" icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
86
+ <ewc-icon-button state="disabled" icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
79
87
  </ewc-icon-button-group>
80
88
  </div>
81
89
 
82
90
  <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">
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>
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>
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>
87
- <ewc-icon-button state="disabled" icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
91
+ <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800" id="blueDisabled">
92
+ <ewc-icon-button state="disabled" icon="linechart" use-config="grp-linechart" btn-aria-label="Line chart" title="Line chart" label="Line chart" btn-aria-label="Line chart" background="dark"></ewc-icon-button>
93
+ <ewc-icon-button state="disabled" icon="barchart" use-config="grp-barchart" btn-aria-label="Bar chart" title="Bar chart" label="Bar chart" btn-aria-label="Bar chart" background="dark"></ewc-icon-button>
94
+ <ewc-icon-button state="disabled" icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot" background="dark"></ewc-icon-button>
95
+ <ewc-icon-button state="disabled" icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table" background="dark"></ewc-icon-button>
88
96
  </ewc-icon-button-group>
89
97
  </div>
90
98
 
91
99
 
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
100
 
120
101
  <details>
121
102
  <summary>Click to see more detailled information intended for developers</summary>
@@ -131,7 +112,7 @@
131
112
  </p>
132
113
 
133
114
  <div style="margin:20px; padding:20px;">
134
- <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800px" id="ForDevelopers">
115
+ <ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800" id="ForDevelopers">
135
116
  <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" id="grp1-line"></ewc-icon-button>
136
117
  <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" id="grp1-bar"></ewc-icon-button>
137
118
  <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" id="grp1-dot"></ewc-icon-button>
@@ -143,6 +124,7 @@
143
124
  </div>
144
125
  </div>
145
126
 
127
+
146
128
  </details>
147
129
 
148
130
  </div>
package/usage-example/webpack/main.js CHANGED
@@ -2,7 +2,6 @@ import "@ewc-lib/ewc-css-common/custom-props.css"
2
2
  import "@ewc-lib/ewc-icon-button"
3
3
  import "@ewc-lib/ewc-icon-button-group"
4
4
 
5
-
6
5
  window.addEventListener('DOMContentLoaded',function () {
7
6
 
8
7
  // catch events of all buttons at once
@@ -18,6 +17,12 @@ window.addEventListener('DOMContentLoaded',function () {
18
17
  console.log("button clicked or selected w/ kdb: ", e.detail, el)
19
18
  })
20
19
 
20
+ document.getElementById("blueEnabled").addEventListener("action",(e)=>{
21
+ document.getElementById("blueEnabled").setAttribute("selectedIndex",e.detail.index)
22
+ const el = document.getElementById("darkEnabled").selectedElement
23
+ console.log("button clicked or selected w/ kdb: ", e.detail, el)
24
+ })
25
+
21
26
  })
22
27
 
23
28
 
@@ -73,4 +78,11 @@ window.addEventListener('DOMContentLoaded',function () {
73
78
  group.selectedIndex = toSet ? 0 : -1
74
79
  })
75
80
 
81
+
82
+ document.getElementById("tooltippos").addEventListener("change", (e) => {
83
+ document.querySelectorAll("ewc-icon-button").forEach(el => {
84
+ el.setAttribute("tooltip-pos",e.target.id)
85
+ })
86
+ })
87
+
76
88
  })
package/src/element.js DELETED
File without changes