@ewc-lib/ewc-icon-button-group 3.3.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.
- package/package.json +2 -2
- package/readme.md +4 -1
- package/src/main.js +23 -2
- package/usage-example/vanilla/index.html +24 -7
- package/usage-example/webpack/index.html +18 -36
- package/usage-example/webpack/main.js +7 -0
- package/src/element.js +0 -0
- package/usage-example/webpack/dist/ewc_usage.js +0 -283
- package/usage-example/webpack/dist/index.html +0 -152
- package/usage-example/webpack/package-lock.json +0 -4676
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<style>
|
|
7
|
-
body{
|
|
8
|
-
font-family: 'Arial', sans-serif;
|
|
9
|
-
margin:0;
|
|
10
|
-
padding:100px;
|
|
11
|
-
}
|
|
12
|
-
#container {
|
|
13
|
-
width: 650px;
|
|
14
|
-
justify-self: center;
|
|
15
|
-
margin-top: 100px;
|
|
16
|
-
outline:2px solid darkblue;
|
|
17
|
-
outline-offset: 5px;
|
|
18
|
-
}
|
|
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">
|
|
26
|
-
<script defer src="ewc_usage.js"></script></head>
|
|
27
|
-
|
|
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
|
-
|
|
32
|
-
<div id="container">
|
|
33
|
-
<p class="pa">Buttons available; on light, dark and blue background</p>
|
|
34
|
-
|
|
35
|
-
<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>
|
|
41
|
-
</ewc-icon-button-group>
|
|
42
|
-
</div>
|
|
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
|
-
|
|
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 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>
|
|
70
|
-
</ewc-icon-button-group>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
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>
|
|
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" 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>
|
|
88
|
-
</ewc-icon-button-group>
|
|
89
|
-
</div>
|
|
90
|
-
|
|
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
|
-
|
|
120
|
-
<details>
|
|
121
|
-
<summary>Click to see more detailled information intended for developers</summary>
|
|
122
|
-
|
|
123
|
-
<p>
|
|
124
|
-
This section focuses more on the "feel" part of look & feel.
|
|
125
|
-
<br>
|
|
126
|
-
It takes into consideration the many cases that emerge by having a group of tri-state buttons.
|
|
127
|
-
<br>
|
|
128
|
-
For instance, what happens when a currently pressed button gets disabled. Or when all buttons get disabled and enabled again.
|
|
129
|
-
<br>
|
|
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.
|
|
131
|
-
</p>
|
|
132
|
-
|
|
133
|
-
<div style="margin:20px; padding:20px;">
|
|
134
|
-
<ewc-icon-button-group style="width:600px; padding-right:10px;" selectedId="grp1-table" breakpoint="800px" id="ForDevelopers">
|
|
135
|
-
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart" id="grp1-line"></ewc-icon-button>
|
|
136
|
-
<ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart" id="grp1-bar"></ewc-icon-button>
|
|
137
|
-
<ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot" id="grp1-dot"></ewc-icon-button>
|
|
138
|
-
<ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table" id="grp1-table"></ewc-icon-button>
|
|
139
|
-
</ewc-icon-button-group>
|
|
140
|
-
<div style="padding-top:10px;">
|
|
141
|
-
<button id="toggleOne">Toggle linechart disabled</button>
|
|
142
|
-
<button id="toggleAll">Toggle all disabled</button>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
</details>
|
|
147
|
-
|
|
148
|
-
</div>
|
|
149
|
-
|
|
150
|
-
</body>
|
|
151
|
-
|
|
152
|
-
</html>
|