@ewc-lib/ewc-icon-button-group 1.0.1-alpha → 1.0.2-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/bla.md +0 -0
- package/package.json +5 -3
- package/readme.md +97 -7
- package/src/css.js +44 -0
- package/src/main.js +4 -37
- package/usage-example/vanilla/index.html +3 -3
- package/usage-example/webpack/dist/ewc_usage.js +1 -1
- package/usage-example/webpack/index.html +4 -4
- package/usage-example/webpack/package-lock.json +7 -7
- package/usage-example/webpack/package.json +4 -2
package/bla.md
ADDED
|
File without changes
|
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": "1.0.
|
|
4
|
+
"version": "1.0.2-alpha",
|
|
5
5
|
"basedOnStandard": "3.0.1",
|
|
6
6
|
"description": "",
|
|
7
7
|
"main": "src/main.js",
|
|
@@ -12,8 +12,10 @@
|
|
|
12
12
|
"publishConfig": {
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"@ewc-lib/ewc-css-common": "0.1.0"
|
|
17
|
+
},
|
|
15
18
|
"dependencies": {
|
|
16
|
-
"@ewc-lib/ewc-
|
|
17
|
-
"@ewc-lib/ewc-icon-button": "1.0.0-alpha"
|
|
19
|
+
"@ewc-lib/ewc-icon-button": "1.0.2-alpha"
|
|
18
20
|
}
|
|
19
21
|
}
|
package/readme.md
CHANGED
|
@@ -1,10 +1,23 @@
|
|
|
1
|
-
#
|
|
1
|
+
# EWC Icon-button group Component
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
The EWC Icon-button group component provides standardized radiobuttons for Eurostat web applications. It offers a consistent visual identity across Eurostat digital products while allowing for customization to meet specific application needs.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Responsive design that adapts to different screen sizes
|
|
10
|
+
- Customizable
|
|
11
|
+
- Tab-Focus trap, keeping focus within the dialog
|
|
12
|
+
- Accessibility compliant
|
|
13
|
+
|
|
14
|
+
## Screenshot
|
|
2
15
|
|
|
3
16
|
|
|
4
17
|
|
|
5
18
|
# Description
|
|
6
19
|
|
|
7
|
-
|
|
20
|
+
The component shows a group of icon-buttons, displayed in "pill-"design and behaving like radio-buttons - i.e. only one button can be in "pressed" state at any time.
|
|
8
21
|
|
|
9
22
|
The ewc-icon-button-group HTML tag encloses ewc-icon-buttons. It modifies their style, handles events and implements the logic.
|
|
10
23
|
|
|
@@ -16,15 +29,21 @@ Within a button-group, only buttons that are not currently pressed can be focuss
|
|
|
16
29
|
|
|
17
30
|
# API
|
|
18
31
|
|
|
19
|
-
## Properties
|
|
32
|
+
## Properties and Attributes
|
|
20
33
|
|
|
21
|
-
|
|
34
|
+
| Attribute | Type | Default | Description
|
|
35
|
+
|-----------------------|---------------------|---------|------------
|
|
36
|
+
| selectedIndex | Number | 0 | The ordinal number of the button pressed. 0 based.
|
|
37
|
+
| breakpoint | String | 650px | if viewport width is smaller than this, the buttons are displayed without label
|
|
22
38
|
|
|
23
|
-
|
|
39
|
+
Notes:
|
|
24
40
|
|
|
25
|
-
-
|
|
41
|
+
- The attributes do not support modification at runtime.
|
|
42
|
+
- The width of an ewc-icon-button (when used in conjunction with the ewc-icon-button-group) is determined as follows:
|
|
43
|
+
- width of button-group < breakpoint: size or weight attribute of ewc-icon-button
|
|
44
|
+
- width of button-group > breakpoint: 125px as per standard definition
|
|
26
45
|
|
|
27
|
-
|
|
46
|
+
## Events
|
|
28
47
|
|
|
29
48
|
- When a user attempts to press a button, a custom event named "action" is dispatched.
|
|
30
49
|
- The event detail contains the 0-based index of the button which was pressed.
|
|
@@ -34,3 +53,74 @@ There are no properties.
|
|
|
34
53
|
- to be consistent with the usage of the ewc-icon-button
|
|
35
54
|
|
|
36
55
|
Please see usage-examples/ directory which contains working source-code demonstrating how this works.
|
|
56
|
+
|
|
57
|
+
# Usage
|
|
58
|
+
|
|
59
|
+
## Installation
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
npm install @ewc-lib/ewc-icon-button-group
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Import the component in your application:
|
|
66
|
+
|
|
67
|
+
```javascript
|
|
68
|
+
// Using ES modules
|
|
69
|
+
import "@ewc-lib/ewc-css-common/custom-props.css"
|
|
70
|
+
import '@ewc-lib/ewc-icon-button-group';
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Note about ewc-css-common
|
|
74
|
+
|
|
75
|
+
- "ewc-css-common/custom-props.css" is necessary and downloaded along with ewc-dialog.
|
|
76
|
+
- It needs to be imported by the host project because it's imported neither by ewc-icon-button nor ewc-icon-button-group.
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## Using in static HTML
|
|
80
|
+
|
|
81
|
+
Example:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<ewc-icon-button-group selectedIndex="1" breakpoint="1000px">
|
|
85
|
+
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
|
|
86
|
+
<ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
|
|
87
|
+
</ewc-icon-button-group>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
To use a standard ewc-icon-button in the context of ewc-icon-button-group, **use-config** must be specified.
|
|
91
|
+
For an explanation about the attribute **use-config**, please refer to the [readme.md of ewc-icon-button](https://www.npmjs.com/package/@ewc-lib/ewc-icon-button).
|
|
92
|
+
|
|
93
|
+
Note: The usage-example/ directory contains a working example.
|
|
94
|
+
|
|
95
|
+
# Notes
|
|
96
|
+
|
|
97
|
+
## Accessibility
|
|
98
|
+
|
|
99
|
+
The component is designed with accessibility in mind:
|
|
100
|
+
- Proper semantic HTML structure (dialog and header elements)
|
|
101
|
+
- Keyboard navigable elements
|
|
102
|
+
- Sufficient color contrast
|
|
103
|
+
- Screen reader friendly with appropriate ARIA attributes
|
|
104
|
+
|
|
105
|
+
## Browser Support
|
|
106
|
+
|
|
107
|
+
- Chrome (latest)
|
|
108
|
+
- Firefox (latest)
|
|
109
|
+
- Safari (latest)
|
|
110
|
+
- Edge (latest)
|
|
111
|
+
|
|
112
|
+
## License
|
|
113
|
+
|
|
114
|
+
European Union Public License (EUPL)
|
|
115
|
+
|
|
116
|
+
# Changelog
|
|
117
|
+
|
|
118
|
+
- 1.0.2-alpha
|
|
119
|
+
- when pressed no checkmark displayed but keep the icon
|
|
120
|
+
- introduce narrow width display
|
|
121
|
+
- use peerDependencies
|
|
122
|
+
- update docu
|
|
123
|
+
|
|
124
|
+
- 1.0.1-alpha
|
|
125
|
+
- remove button label on narrow width
|
|
126
|
+
- introduce attribute "breakpoint"
|
package/src/css.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
|
|
2
|
+
export default function(cssClassPrefix, breakpoint) {
|
|
3
|
+
const t = document.createElement('style')
|
|
4
|
+
t.innerHTML = cssString(cssClassPrefix, breakpoint)
|
|
5
|
+
return t
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
function cssString(cssClassPrefix, breakpoint) {
|
|
10
|
+
return `
|
|
11
|
+
|
|
12
|
+
.${cssClassPrefix} {
|
|
13
|
+
height: var(--self-height);
|
|
14
|
+
display: flex;
|
|
15
|
+
}
|
|
16
|
+
.${cssClassPrefix} ewc-icon-button::part(button) {
|
|
17
|
+
display:flex;
|
|
18
|
+
align-items:center;
|
|
19
|
+
border: solid 1px var(--c-p);
|
|
20
|
+
padding: 0 5px;
|
|
21
|
+
color: var(--icon-color);
|
|
22
|
+
margin-left: -1px; /* thin 1px separation between the buttons */
|
|
23
|
+
max-width: 125px;
|
|
24
|
+
min-width: 125px;
|
|
25
|
+
}
|
|
26
|
+
.${cssClassPrefix} ewc-icon-button:first-of-type::part(button) {
|
|
27
|
+
border-bottom-left-radius: 50px;
|
|
28
|
+
border-top-left-radius: 50px;
|
|
29
|
+
}
|
|
30
|
+
.${cssClassPrefix} ewc-icon-button:last-of-type::part(button) {
|
|
31
|
+
border-bottom-right-radius: 50px;
|
|
32
|
+
border-top-right-radius: 50px;
|
|
33
|
+
}
|
|
34
|
+
@media screen and (max-width: ${breakpoint}) {
|
|
35
|
+
.${cssClassPrefix} ewc-icon-button::part(button) {
|
|
36
|
+
max-width: var(--self-width);
|
|
37
|
+
min-width: var(--self-width);
|
|
38
|
+
}
|
|
39
|
+
.${cssClassPrefix} ewc-icon-button::part(label) {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
`}
|
package/src/main.js
CHANGED
|
@@ -9,6 +9,8 @@ keyboard navigation:
|
|
|
9
9
|
- enter and space key presses a button, releases the currently pressed button
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
+
import CSS from "./css.js"
|
|
13
|
+
|
|
12
14
|
|
|
13
15
|
class ButtonGroup {
|
|
14
16
|
#pressedBtnElement = null
|
|
@@ -36,7 +38,6 @@ class ButtonGroup {
|
|
|
36
38
|
el.setAttribute("tabindex","-1")
|
|
37
39
|
el.setAttribute("state","true")
|
|
38
40
|
this.#storeCurrentBtn(el)
|
|
39
|
-
el.setAttribute("icon","check")
|
|
40
41
|
} else {
|
|
41
42
|
el.setAttribute("tabindex","0")
|
|
42
43
|
el.setAttribute("state","false")
|
|
@@ -67,40 +68,13 @@ class Element extends HTMLElement {
|
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
connectedCallback() {
|
|
70
|
-
this.setAttribute("ewc-version", "1.0.
|
|
71
|
+
this.setAttribute("ewc-version", "1.0.2-alpha") // please always keep in sync with version in package.json
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
constructor() {
|
|
74
75
|
super()
|
|
75
|
-
|
|
76
76
|
this.classList.add(this.#cssClassPrefix)
|
|
77
|
-
|
|
78
|
-
const s = getStyleTag(`
|
|
79
|
-
.${this.#cssClassPrefix} {
|
|
80
|
-
height: 40px;
|
|
81
|
-
display: flex;
|
|
82
|
-
}
|
|
83
|
-
.${this.#cssClassPrefix} ewc-icon-button::part(button) {
|
|
84
|
-
display:flex;
|
|
85
|
-
align-items:center;
|
|
86
|
-
border: solid 1px var(--c-p);
|
|
87
|
-
padding: 0 5px;
|
|
88
|
-
color: var(--icon-color);
|
|
89
|
-
margin-left: -1px; /* thin 1px separation between the buttons */
|
|
90
|
-
max-width: 125px;
|
|
91
|
-
min-width: 125px;
|
|
92
|
-
}
|
|
93
|
-
.${this.#cssClassPrefix} ewc-icon-button:first-of-type::part(button) {
|
|
94
|
-
border-bottom-left-radius: 50px;
|
|
95
|
-
border-top-left-radius: 50px;
|
|
96
|
-
}
|
|
97
|
-
.${this.#cssClassPrefix} ewc-icon-button:last-of-type::part(button) {
|
|
98
|
-
border-bottom-right-radius: 50px;
|
|
99
|
-
border-top-right-radius: 50px;
|
|
100
|
-
}
|
|
101
|
-
`)
|
|
102
|
-
|
|
103
|
-
this.appendChild(s)
|
|
77
|
+
this.appendChild(CSS(this.#cssClassPrefix, this.getAttr("breakpoint","480px")).cloneNode(true)) // .ecl-col-s- in ECL 4.8.1.
|
|
104
78
|
this.#installEventHandlers()
|
|
105
79
|
}
|
|
106
80
|
|
|
@@ -167,13 +141,6 @@ class Element extends HTMLElement {
|
|
|
167
141
|
}
|
|
168
142
|
|
|
169
143
|
|
|
170
|
-
// helper
|
|
171
|
-
function getStyleTag(source) {
|
|
172
|
-
const t = document.createElement('style')
|
|
173
|
-
t.innerHTML = source
|
|
174
|
-
return t
|
|
175
|
-
}
|
|
176
|
-
|
|
177
144
|
|
|
178
145
|
if (window.customElements.get("ewc-icon-button-group")) {
|
|
179
146
|
console.warn("ewc-icon-button-group: custom element is already defined")
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
<p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
|
|
29
29
|
|
|
30
30
|
<div style="margin:20px; padding:20px;">
|
|
31
|
-
<ewc-icon-button-group style="width:600px;" selectedIndex="0" id="one">
|
|
31
|
+
<ewc-icon-button-group style="width:600px;" selectedIndex="0" breakpoint="800px" id="one">
|
|
32
32
|
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
|
|
33
33
|
<ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
|
|
34
34
|
<ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
</div>
|
|
38
38
|
|
|
39
39
|
<div style="margin:20px; padding:20px; background: darkblue;">
|
|
40
|
-
<ewc-icon-button-group style="width:600px;" selectedIndex="3" id="two">
|
|
40
|
+
<ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="two">
|
|
41
41
|
<ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
|
|
42
42
|
<ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
|
|
43
43
|
<ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
})
|
|
66
66
|
})
|
|
67
67
|
</script>
|
|
68
|
-
|
|
68
|
+
|
|
69
69
|
</body>
|
|
70
70
|
|
|
71
71
|
</html>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
\*************************/
|
|
16
16
|
/***/ (() => {
|
|
17
17
|
|
|
18
|
-
eval("/*\nbutton-group: min 1 and max 1 button can be in pressed down state.\n\nkeyboard navigation:\n- a group can't get a focus\n- buttons in the group can get a focus\n- only not-pressed buttons can get a focus\n- left/up and right/down keys move the focus\n- enter and space key presses a button, releases the currently pressed button\n*/\n\n
|
|
18
|
+
eval("/*\nbutton-group: min 1 and max 1 button can be in pressed down state.\n\nkeyboard navigation:\n- a group can't get a focus\n- buttons in the group can get a focus\n- only not-pressed buttons can get a focus\n- left/up and right/down keys move the focus\n- enter and space key presses a button, releases the currently pressed button\n*/\n\n\nclass ButtonGroup {\n #pressedBtnElement = null\n #pressedBtnElementIcon = null\n #currentIndex\n\n #storeCurrentBtn(el) {\n if(el) {\n this.#pressedBtnElement=el\n this.#pressedBtnElementIcon=el.getAttribute(\"icon\")\n }\n }\n\n #restoreCurrent() {\n if(this.#pressedBtnElement) {\n this.#pressedBtnElement.setAttribute(\"icon\", this.#pressedBtnElementIcon)\n }\n }\n\n setPressed(allElements, selectedElIdx) {\n this.#restoreCurrent()\n for(let i=0;i<allElements.length;i++) {\n const el = allElements[i]\n if(i===selectedElIdx){\n el.setAttribute(\"tabindex\",\"-1\")\n el.setAttribute(\"state\",\"true\")\n this.#storeCurrentBtn(el)\n el.setAttribute(\"icon\",\"check\")\n } else {\n el.setAttribute(\"tabindex\",\"0\")\n el.setAttribute(\"state\",\"false\")\n }\n }\n this.#currentIndex = Number(selectedElIdx)\n }\n\n getCurrentIndex() {\n return this.#currentIndex\n }\n\n getCurrentElement() {\n return this.#pressedBtnElement\n }\n}\n\n\nclass Element extends HTMLElement {\n // only affect ewc-icon-buttons which are children of this element\n #cssClassPrefix = \"css-scope-\"+ (Math.random() + 1).toString(36).substring(2)\n \n #buttonGroup = new ButtonGroup()\n\n getAttr(name, _default) {\n const r = this.hasAttribute(name) ? this.getAttribute(name) : _default\n return r\n }\n\n connectedCallback() {\n this.setAttribute(\"ewc-version\", \"1.0.1-alpha\")\t\t// please always keep in sync with version in package.json\n }\n\n constructor() {\t\n super()\n\n this.classList.add(this.#cssClassPrefix)\n\n const s = getStyleTag(`\n .${this.#cssClassPrefix} {\n height: 40px;\n display: flex;\n }\n .${this.#cssClassPrefix} ewc-icon-button::part(button) {\n display:flex;\n align-items:center;\n border: solid 1px var(--c-p);\n padding: 0 5px;\n color: var(--icon-color);\n margin-left: -1px; /* thin 1px separation between the buttons */\n max-width: 125px;\n min-width: 125px;\n }\n .${this.#cssClassPrefix} ewc-icon-button:first-of-type::part(button) {\n border-bottom-left-radius: 50px;\n border-top-left-radius: 50px;\n }\n .${this.#cssClassPrefix} ewc-icon-button:last-of-type::part(button) {\n border-bottom-right-radius: 50px;\n border-top-right-radius: 50px;\n }\n `)\n\n this.appendChild(s)\n this.#installEventHandlers()\n }\n\n static observedAttributes = [\"selectedindex\"]\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name===\"selectedindex\") {\n //console.log(Number(newValue),this.#buttonGroup.getCurrentIndex())\n if(Number(newValue)!==this.#buttonGroup.getCurrentIndex()) {\n this.#buttonGroup.setPressed(this.querySelectorAll(\"ewc-icon-button\"), Number(newValue))\n }\n }\n }\n\n #installEventHandlers() {\n\n const nodes = this.querySelectorAll(\"ewc-icon-button\")\n\n // relay click/enter presses\n for(let i=0;i<nodes.length;i++) {\n nodes[i].addEventListener(\"action\", (ev) => {\n ev.stopPropagation()\n if(this.#buttonGroup.getCurrentIndex() !== i) {\n const event = new CustomEvent(\"action\", { detail: i});\n this.dispatchEvent(event)\n }\n })\n nodes[i].setAttribute(\"__index\", i)\n }\n\n // move focus w/ tab. TODO: make the code elegant\n\t\tthis.addEventListener(\"keydown\", function(ev) {\n let idx = Number(document.activeElement.getAttribute(\"__index\"))\n const nodes = this.querySelectorAll(\"ewc-icon-button\")\n\n\t\t\tif(ev.key==\"ArrowLeft\" || ev.key==\"ArrowUp\") {\n idx-=1\n if(idx<0) {idx=nodes.length-1}\n if(nodes[idx].getAttribute(\"tabindex\")==\"-1\") {\n idx-=1\n if(idx<0) {idx=nodes.length-1}\n }\n nodes[idx].focus()\n }\n if(ev.key==\"ArrowRight\" || ev.key==\"ArrowDown\") {\n idx+=1\n if(idx>nodes.length-1) {idx=0}\n if(nodes[idx].getAttribute(\"tabindex\")==\"-1\") {\n idx+=1\n if(idx>nodes.length-1) {idx=0}\n }\n nodes[idx].focus()\n }\n }.bind(this))\n\t}\n\n getCurrentlySelectedIndex() {\n return this.#buttonGroup.getCurrentIndex()\n }\n\n getCurrentlySelectedElement() {\n return this.#buttonGroup.getCurrentElement()\n }\n}\n\n\n// helper\nfunction getStyleTag(source) {\n const t = document.createElement('style')\n t.innerHTML = source\n return t\n}\n\n\nif (window.customElements.get(\"ewc-icon-button-group\")) {\n console.warn(\"ewc-icon-button-group: custom element is already defined\")\n} else {\n window.customElements.define(\"ewc-icon-button-group\", Element);\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/../../src/main.js?");
|
|
19
19
|
|
|
20
20
|
/***/ }),
|
|
21
21
|
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
<p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
|
|
26
26
|
|
|
27
27
|
<div style="margin:20px; padding:20px;">
|
|
28
|
-
<ewc-icon-button-group style="width:600px;" selectedIndex="0" id="one">
|
|
29
|
-
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"
|
|
28
|
+
<ewc-icon-button-group style="width:600px;" selectedIndex="0" breakpoint="800px" id="one">
|
|
29
|
+
<ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
|
|
30
30
|
<ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
|
|
31
31
|
<ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
|
|
32
32
|
<ewc-icon-button icon="table" use-config="grp-table" label="Table"></ewc-icon-button>
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
</div>
|
|
35
35
|
|
|
36
36
|
<div style="margin:20px; padding:20px; background: darkblue;">
|
|
37
|
-
<ewc-icon-button-group style="width:600px;" selectedIndex="3" id="two">
|
|
38
|
-
<ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart"
|
|
37
|
+
<ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="two">
|
|
38
|
+
<ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
|
|
39
39
|
<ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
|
|
40
40
|
<ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
|
|
41
41
|
<ewc-icon-button icon="table" background="dark" use-config="grp-table" label="Table"></ewc-icon-button>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"../..": {
|
|
26
26
|
"name": "@ewc-lib/ewc-icon-button-group",
|
|
27
|
-
"version": "1.0.
|
|
27
|
+
"version": "1.0.1-alpha",
|
|
28
28
|
"license": "EUPL v.1.1",
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@ewc-lib/ewc-css-common": "0.1.0",
|
|
@@ -324,9 +324,9 @@
|
|
|
324
324
|
"license": "MIT"
|
|
325
325
|
},
|
|
326
326
|
"node_modules/@types/node": {
|
|
327
|
-
"version": "22.
|
|
328
|
-
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.
|
|
329
|
-
"integrity": "sha512-
|
|
327
|
+
"version": "22.15.2",
|
|
328
|
+
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.2.tgz",
|
|
329
|
+
"integrity": "sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==",
|
|
330
330
|
"dev": true,
|
|
331
331
|
"license": "MIT",
|
|
332
332
|
"dependencies": {
|
|
@@ -1433,9 +1433,9 @@
|
|
|
1433
1433
|
"license": "MIT"
|
|
1434
1434
|
},
|
|
1435
1435
|
"node_modules/electron-to-chromium": {
|
|
1436
|
-
"version": "1.5.
|
|
1437
|
-
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.
|
|
1438
|
-
"integrity": "sha512-
|
|
1436
|
+
"version": "1.5.142",
|
|
1437
|
+
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.142.tgz",
|
|
1438
|
+
"integrity": "sha512-Ah2HgkTu/9RhTDNThBtzu2Wirdy4DC9b0sMT1pUhbkZQ5U/iwmE+PHZX1MpjD5IkJCc2wSghgGG/B04szAx07w==",
|
|
1439
1439
|
"dev": true,
|
|
1440
1440
|
"license": "ISC"
|
|
1441
1441
|
},
|
|
@@ -13,9 +13,11 @@
|
|
|
13
13
|
"publishConfig": {
|
|
14
14
|
"access": "public"
|
|
15
15
|
},
|
|
16
|
+
"peerDependencies": {
|
|
17
|
+
"@ewc-lib/ewc-css-common": "0.1.0"
|
|
18
|
+
},
|
|
16
19
|
"dependencies": {
|
|
17
|
-
"@ewc-lib/ewc-
|
|
18
|
-
"@ewc-lib/ewc-icon-button": "1.0.0-alpha",
|
|
20
|
+
"@ewc-lib/ewc-icon-button": "1.0.2-alpha",
|
|
19
21
|
"@ewc-lib/ewc-icon-button-group": "file:../../"
|
|
20
22
|
},
|
|
21
23
|
"devDependencies": {
|