@ewc-lib/ewc-icon-button-group 3.1.1-alpha → 3.3.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.
- package/package.json +2 -2
- package/readme.md +6 -0
- package/src/css.js +11 -6
- package/src/element.js +0 -0
- package/src/main.js +6 -7
- package/usage-example/vanilla/index.html +54 -24
- package/usage-example/webpack/dist/ewc_usage.js +283 -0
- package/usage-example/webpack/dist/index.html +152 -0
- package/usage-example/webpack/index.html +80 -25
- package/usage-example/webpack/main.js +6 -1
- package/usage-example/webpack/package-lock.json +4676 -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.
|
|
4
|
+
"version": "3.3.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": "
|
|
19
|
+
"@ewc-lib/ewc-icon-button": "3.2.0-alpha"
|
|
20
20
|
}
|
|
21
21
|
}
|
package/readme.md
CHANGED
|
@@ -182,6 +182,12 @@ European Union Public License (EUPL)
|
|
|
182
182
|
|
|
183
183
|
# Changelog
|
|
184
184
|
|
|
185
|
+
- 3.3.0-alpha
|
|
186
|
+
- udate dependency, tooltip
|
|
187
|
+
|
|
188
|
+
- 3.2.0-alpha
|
|
189
|
+
- latest design
|
|
190
|
+
|
|
185
191
|
- 3.1.1-alpha
|
|
186
192
|
- bugfix: id in action event contains id of previously selected element instead of currently clicked element
|
|
187
193
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
@@ -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
|
|
@@ -29,14 +29,14 @@ class Element extends HTMLElement {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
connectedCallback() {
|
|
32
|
-
this.setAttribute("ewc-version", "3.
|
|
32
|
+
this.setAttribute("ewc-version", "3.3.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)
|
|
36
36
|
this.appendChild(CSS(this.#cssClassPrefix, this.getAttr("breakpoint","480px")).cloneNode(true)) // .ecl-col-s- in ECL 4.8.1.
|
|
37
37
|
|
|
38
38
|
const nodes = this.querySelectorAll("ewc-icon-button")
|
|
39
|
-
this.#
|
|
39
|
+
this.#setAttributes(nodes)
|
|
40
40
|
this.#installEventHandlers(nodes)
|
|
41
41
|
// 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
42
|
this.#buttonGroup.applyCurrentSelection(nodes)
|
|
@@ -171,11 +171,10 @@ class Element extends HTMLElement {
|
|
|
171
171
|
}.bind(this))
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
-
|
|
175
|
-
// TODO: remove and replace w/ loops
|
|
176
|
-
#setIndexOnNodes(nodes) {
|
|
174
|
+
#setAttributes(nodes) {
|
|
177
175
|
for(let i=0;i<nodes.length;i++) {
|
|
178
|
-
nodes[i].setAttribute("__index", i)
|
|
176
|
+
nodes[i].setAttribute("__index", i) // assign 0-based ordinal number to each button
|
|
177
|
+
nodes[i].setAttribute("is-in-group","true")
|
|
179
178
|
}
|
|
180
179
|
}
|
|
181
180
|
|
|
@@ -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,42 +30,61 @@
|
|
|
25
30
|
<script src="./ewc-icon-button-group/src/main.js" type="module"></script>
|
|
26
31
|
|
|
27
32
|
<div id="container">
|
|
28
|
-
<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">
|
|
32
|
-
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"
|
|
33
|
-
<ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart"
|
|
34
|
-
<ewc-icon-button icon="dotplot" use-config="grp-dotplot"
|
|
35
|
-
<ewc-icon-button icon="table" use-config="grp-table"
|
|
37
|
+
<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>
|
|
38
|
+
<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>
|
|
39
|
+
<ewc-icon-button icon="dotplot" use-config="grp-dotplot" btn-aria-label="Dotplot" title="Dotplot" label="Dotplot" btn-aria-label="Dotplot"></ewc-icon-button>
|
|
40
|
+
<ewc-icon-button icon="table" use-config="grp-table" btn-aria-label="Table" title="Table" label="Table" btn-aria-label="Table"></ewc-icon-button>
|
|
36
41
|
</ewc-icon-button-group>
|
|
37
42
|
</div>
|
|
38
43
|
|
|
39
|
-
<div style="margin:20px; padding:20px;">
|
|
40
|
-
<ewc-icon-button-group style="width:600px;
|
|
41
|
-
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"
|
|
42
|
-
<ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart"
|
|
43
|
-
<ewc-icon-button icon="dotplot" use-config="grp-dotplot"
|
|
44
|
-
<ewc-icon-button icon="table" use-config="grp-table"
|
|
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" 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>
|
|
47
|
+
<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>
|
|
48
|
+
<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>
|
|
49
|
+
<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>
|
|
45
50
|
</ewc-icon-button-group>
|
|
46
51
|
</div>
|
|
47
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" 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>
|
|
56
|
+
<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>
|
|
57
|
+
<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>
|
|
58
|
+
<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
|
+
</ewc-icon-button-group>
|
|
60
|
+
</div>
|
|
48
61
|
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<ewc-icon-button
|
|
54
|
-
<ewc-icon-button
|
|
62
|
+
<p class="pa">Disabled buttons</p>
|
|
63
|
+
|
|
64
|
+
<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 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>
|
|
67
|
+
<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>
|
|
68
|
+
<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>
|
|
69
|
+
<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>
|
|
55
70
|
</ewc-icon-button-group>
|
|
56
71
|
</div>
|
|
57
72
|
|
|
58
|
-
<div style="margin:20px; padding:20px; background:
|
|
73
|
+
<div style="margin:20px; padding:20px; background: black;">
|
|
59
74
|
<ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="darkDisabled">
|
|
60
|
-
<ewc-icon-button state="disabled" icon="linechart"
|
|
61
|
-
<ewc-icon-button state="disabled" icon="barchart"
|
|
62
|
-
<ewc-icon-button state="disabled" icon="dotplot"
|
|
63
|
-
<ewc-icon-button state="disabled" icon="table"
|
|
75
|
+
<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>
|
|
76
|
+
<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>
|
|
77
|
+
<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>
|
|
78
|
+
<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
|
+
</ewc-icon-button-group>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
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">
|
|
84
|
+
<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>
|
|
85
|
+
<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>
|
|
86
|
+
<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>
|
|
87
|
+
<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>
|
|
64
88
|
</ewc-icon-button-group>
|
|
65
89
|
</div>
|
|
66
90
|
|
|
@@ -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
|
|
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
|
|
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;">
|