@ewc-lib/ewc-icon-button-group 2.0.0-alpha → 2.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.
Files changed (10) hide show
  1. package/package.json +2 -2
  2. package/readme.md +4 -1
  3. package/src/main.js +8 -6
  4. package/usage-example/vanilla/index.html +8 -8
  5. package/usage-example/webpack/index.html +8 -8
  6. package/usage-example/webpack/package.json +1 -1
  7. package/2025-03-26_15-03-1742997749.png +0 -0
  8. package/usage-example/webpack/dist/ewc_usage.js +0 -263
  9. package/usage-example/webpack/dist/index.html +0 -48
  10. package/usage-example/webpack/package-lock.json +0 -4431
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": "2.0.0-alpha",
4
+ "version": "2.0.2-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.0.0-alpha"
19
+ "@ewc-lib/ewc-icon-button": "2.0.1-alpha"
20
20
  }
21
21
  }
package/readme.md CHANGED
@@ -115,7 +115,10 @@ European Union Public License (EUPL)
115
115
 
116
116
  # Changelog
117
117
 
118
- - 2.0.0-alpha
118
+ - 2.0.2-alpha
119
+ - support integration, update dependency, add aria-label
120
+
121
+ - 2.0.1-alpha
119
122
  - update icons: linechart, barchart, hilo-chart (dotplot), table
120
123
 
121
124
  - 1.0.2-alpha
package/src/main.js CHANGED
@@ -59,7 +59,7 @@ class ButtonGroup {
59
59
  class Element extends HTMLElement {
60
60
  // only affect ewc-icon-buttons which are children of this element
61
61
  #cssClassPrefix = "css-scope-"+ (Math.random() + 1).toString(36).substring(2)
62
-
62
+ #isInitialised = false
63
63
  #buttonGroup = new ButtonGroup()
64
64
 
65
65
  getAttr(name, _default) {
@@ -68,14 +68,17 @@ class Element extends HTMLElement {
68
68
  }
69
69
 
70
70
  connectedCallback() {
71
- this.setAttribute("ewc-version", "2.0.0-alpha") // please always keep in sync with version in package.json
72
- }
71
+ this.setAttribute("ewc-version", "2.0.1-alpha") // please always keep in sync with version in package.json
72
+ if(this.#isInitialised == true) {return}
73
73
 
74
- constructor() {
75
- super()
76
74
  this.classList.add(this.#cssClassPrefix)
77
75
  this.appendChild(CSS(this.#cssClassPrefix, this.getAttr("breakpoint","480px")).cloneNode(true)) // .ecl-col-s- in ECL 4.8.1.
78
76
  this.#installEventHandlers()
77
+ this.#isInitialised = true
78
+ }
79
+
80
+ constructor() {
81
+ super()
79
82
  }
80
83
 
81
84
  static observedAttributes = ["selectedindex"]
@@ -141,7 +144,6 @@ class Element extends HTMLElement {
141
144
  }
142
145
 
143
146
 
144
-
145
147
  if (window.customElements.get("ewc-icon-button-group")) {
146
148
  console.warn("ewc-icon-button-group: custom element is already defined")
147
149
  } else {
package/usage-example/vanilla/index.html CHANGED
@@ -29,19 +29,19 @@
29
29
 
30
30
  <div style="margin:20px; padding:20px;">
31
31
  <ewc-icon-button-group style="width:600px;" selectedIndex="0" breakpoint="800px" id="one">
32
- <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
33
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
34
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
35
- <ewc-icon-button icon="table" use-config="grp-table" label="Table"></ewc-icon-button>
32
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
33
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart"></ewc-icon-button>
34
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot"></ewc-icon-button>
35
+ <ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table"></ewc-icon-button>
36
36
  </ewc-icon-button-group>
37
37
  </div>
38
38
 
39
39
  <div style="margin:20px; padding:20px; background: darkblue;">
40
40
  <ewc-icon-button-group style="width:600px;" selectedIndex="3" breakpoint="800px" id="two">
41
- <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart"></ewc-icon-button>
42
- <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
43
- <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
44
- <ewc-icon-button icon="table" background="dark" use-config="grp-table" label="Table"></ewc-icon-button>
41
+ <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
42
+ <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
43
+ <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
44
+ <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
45
45
  </ewc-icon-button-group>
46
46
  </div>
47
47
  </div>
package/usage-example/webpack/index.html CHANGED
@@ -26,19 +26,19 @@
26
26
 
27
27
  <div style="margin:20px; padding:20px;">
28
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
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
31
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
32
- <ewc-icon-button icon="table" use-config="grp-table" label="Table"></ewc-icon-button>
29
+ <ewc-icon-button icon="linechart" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
30
+ <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart" btn-aria-label="Bar chart"></ewc-icon-button>
31
+ <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot" btn-aria-label="Dot plot"></ewc-icon-button>
32
+ <ewc-icon-button icon="table" use-config="grp-table" label="Table" btn-aria-label="Table"></ewc-icon-button>
33
33
  </ewc-icon-button-group>
34
34
  </div>
35
35
 
36
36
  <div style="margin:20px; padding:20px; background: darkblue;">
37
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
- <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
40
- <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
41
- <ewc-icon-button icon="table" background="dark" use-config="grp-table" label="Table"></ewc-icon-button>
38
+ <ewc-icon-button state="disabled" icon="linechart" background="dark" use-config="grp-linechart" label="Line chart" btn-aria-label="Line chart"></ewc-icon-button>
39
+ <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" btn-aria-label="Bar chart" label="Bar chart"></ewc-icon-button>
40
+ <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" btn-aria-label="Dot plot" label="Dot plot"></ewc-icon-button>
41
+ <ewc-icon-button icon="table" background="dark" use-config="grp-table" btn-aria-label="Table" label="Table"></ewc-icon-button>
42
42
  </ewc-icon-button-group>
43
43
  </div>
44
44
  </div>
package/usage-example/webpack/package.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "@ewc-lib/ewc-css-common": "0.1.0"
18
18
  },
19
19
  "dependencies": {
20
- "@ewc-lib/ewc-icon-button": "1.1.0-alpha",
20
+ "@ewc-lib/ewc-icon-button": "2.0.0-alpha",
21
21
  "@ewc-lib/ewc-icon-button-group": "file:../../"
22
22
  },
23
23
  "devDependencies": {
package/2025-03-26_15-03-1742997749.png DELETED
Binary file
package/usage-example/webpack/dist/ewc_usage.js DELETED
@@ -1,263 +0,0 @@
1
- /*
2
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
3
- * This devtool is neither made for production nor for readable output files.
4
- * It uses "eval()" calls to create a separate source file in the browser devtools.
5
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
6
- * or disable the default devtool with "devtool: false".
7
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
8
- */
9
- /******/ (() => { // webpackBootstrap
10
- /******/ "use strict";
11
- /******/ var __webpack_modules__ = ({
12
-
13
- /***/ "../../src/css.js":
14
- /*!************************!*\
15
- !*** ../../src/css.js ***!
16
- \************************/
17
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
18
-
19
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n\n/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(cssClassPrefix, breakpoint) {\n const t = document.createElement('style')\n t.innerHTML = cssString(cssClassPrefix, breakpoint)\n return t\n}\n\n\nfunction cssString(cssClassPrefix, breakpoint) {\n return `\n\n .${cssClassPrefix} {\n display: flex;\n }\n .${cssClassPrefix} ewc-icon-button::part(button) {\n display:flex;\n align-items:center;\n border: solid 1px var(--c-p);\n color: var(--icon-color);\n margin-left: -1px; /* thin 1px separation between the buttons */\n max-width: 125px;\n min-width: 125px;\n height: 45px;\n }\n .${cssClassPrefix} ewc-icon-button:first-of-type::part(button) {\n border-bottom-left-radius: 50px;\n border-top-left-radius: 50px;\n }\n .${cssClassPrefix} ewc-icon-button:last-of-type::part(button) {\n border-bottom-right-radius: 50px;\n border-top-right-radius: 50px;\n }\n @media screen and (max-width: ${breakpoint}) {\n .${cssClassPrefix} ewc-icon-button::part(button) {\n max-width: var(--self-width);\n min-width: var(--self-width); \n }\n .${cssClassPrefix} ewc-icon-button::part(label) {\n display: none;\n }\n }\n\n`}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/../../src/css.js?");
20
-
21
- /***/ }),
22
-
23
- /***/ "../../src/main.js":
24
- /*!*************************!*\
25
- !*** ../../src/main.js ***!
26
- \*************************/
27
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
28
-
29
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css.js */ \"../../src/css.js\");\n/*\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\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 } 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.3-alpha\")\t\t// please always keep in sync with version in package.json\n }\n\n constructor() {\t\n super()\n this.classList.add(this.#cssClassPrefix)\n this.appendChild((0,_css_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(this.#cssClassPrefix, this.getAttr(\"breakpoint\",\"480px\")).cloneNode(true)) // .ecl-col-s- in ECL 4.8.1.\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\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?");
30
-
31
- /***/ }),
32
-
33
- /***/ "./main.js":
34
- /*!*****************!*\
35
- !*** ./main.js ***!
36
- \*****************/
37
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
38
-
39
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ewc_lib_ewc_css_common_custom_props_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @ewc-lib/ewc-css-common/custom-props.css */ \"./node_modules/@ewc-lib/ewc-css-common/custom-props.css\");\n/* harmony import */ var _ewc_lib_ewc_icon_button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @ewc-lib/ewc-icon-button */ \"./node_modules/@ewc-lib/ewc-icon-button/src/main.js\");\n/* harmony import */ var _ewc_lib_ewc_icon_button_group__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @ewc-lib/ewc-icon-button-group */ \"../../src/main.js\");\n\n\n\n\nwindow.addEventListener('DOMContentLoaded',function () {\n // catch events of all buttons at once\n document.getElementById(\"one\").addEventListener(\"action\",(e)=>{\n document.getElementById(\"one\").setAttribute(\"selectedIndex\",e.detail)\n const el = document.getElementById(\"one\").getCurrentlySelectedElement()\n console.log(\"button clicked or selected w/ kdb: \", e.detail, el)\n })\n})\n\nwindow.addEventListener('DOMContentLoaded',function () {\n // catch events of all buttons at once\n document.getElementById(\"two\").addEventListener(\"action\",(e)=>{\n document.getElementById(\"two\").setAttribute(\"selectedIndex\",e.detail)\n const el = document.getElementById(\"two\").getCurrentlySelectedElement()\n console.log(\"button clicked or selected w/ kdb: \", e.detail, el)\n })\n})\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./main.js?");
40
-
41
- /***/ }),
42
-
43
- /***/ "./node_modules/@ewc-lib/ewc-css-common/custom-props.css":
44
- /*!***************************************************************!*\
45
- !*** ./node_modules/@ewc-lib/ewc-css-common/custom-props.css ***!
46
- \***************************************************************/
47
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
48
-
49
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _css_loader_dist_cjs_js_custom_props_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../css-loader/dist/cjs.js!./custom-props.css */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/@ewc-lib/ewc-css-common/custom-props.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_css_loader_dist_cjs_js_custom_props_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_css_loader_dist_cjs_js_custom_props_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _css_loader_dist_cjs_js_custom_props_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _css_loader_dist_cjs_js_custom_props_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-css-common/custom-props.css?");
50
-
51
- /***/ }),
52
-
53
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/cfg.js":
54
- /*!**********************************************************!*\
55
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/cfg.js ***!
56
- \**********************************************************/
57
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
58
-
59
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ get)\n/* harmony export */ });\n\n/*\nthis table maps input-tuples to output-tuples.\n\ninput-tuples contain the elements: \n- icon\n- background (\"light\"/\"dark\"; displayed on light or on dark background)\n- state (true=pressed, false=not pressed, disabled=no interaction possible)\n- is hovered over (or not)\n\nImportant note:\nThe runtime-change of backdropStyle is not fully implemented.\n*/\n\nconst table = `\n\nicon bg state hover : iconColor backdropStyle backdropColor backgroundColor\n---------------------------------------------------------------------------\n\ninfo light false false : white circle var(--c-p) transparent\ninfo light false true : white circle var(--c-p-80) transparent\ninfo dark false false : var(--c-p) circle white transparent\ninfo dark false true : white circle var(--c-p) white\n\ninfo light true false : white circle green transparent\ninfo light true true : white circle lightgreen transparent\ninfo dark true false : var(--c-p) circle green transparent\ninfo dark true true : white circle lightgreen white\n\ninfo light disabled false : white circle gray transparent\ninfo light disabled true : white circle lightgray transparent\ninfo dark disabled false : var(--c-p) circle gray transparent\ninfo dark disabled true : white circle gray white\n\n\n\nshare light false false : white\t\t circle var(--c-p) \t\ttransparent\nshare light false true : white\t\t\t\t circle var(--c-p-80) transparent\nshare dark false false : white circle transparent transparent\nshare dark false true : var(--c-p) circle white white\n\nshare light true false : white circle green transparent\nshare light true true : white circle lightgreen transparent\nshare dark true false : var(--c-p) circle green transparent\nshare dark true true : white circle lightgreen white\n\nshare light disabled false : white circle gray transparent\nshare light disabled true : white circle lightgray transparent\nshare dark disabled false : var(--c-p) circle gray transparent\nshare dark disabled true : white circle gray white\n\n\n\ncalendar light false false : white circle var(--c-p) transparent\ncalendar light false true : white circle var(--c-p-80) transparent\ncalendar dark false false : var(--c-p) circle white transparent\ncalendar dark false true : white circle var(--c-p) white\n\ncalendar light true false : white circle green transparent\ncalendar light true true : white circle lightgreen transparent\ncalendar dark true false : var(--c-p) circle green transparent\ncalendar dark true true : white circle lightgreen white\n\ncalendar light disabled false : white circle gray transparent\ncalendar light disabled true : white circle lightgray transparent\ncalendar dark disabled false : var(--c-p) circle gray transparent\ncalendar dark disabled true : white circle gray white\n\n\n\ndownload light false false : white circle var(--c-p) transparent\ndownload light false true : white circle var(--c-p-80) transparent\ndownload dark false false : var(--c-p) circle white transparent\ndownload dark false true : white circle var(--c-p) white\n\ndownload light true false : white circle green transparent\ndownload light true true : white circle lightgreen transparent\ndownload dark true false : var(--c-p) circle green transparent\ndownload dark true true : white circle lightgreen white\n\ndownload light disabled false : white circle gray transparent\ndownload light disabled true : white circle lightgray transparent\ndownload dark disabled false : var(--c-p) circle gray transparent\ndownload dark disabled true : white circle gray white\n\n\n\nclose light false false : white circle var(--c-p) transparent\nclose light false true : white circle var(--c-p-80) transparent\nclose dark false false : var(--c-p) circle white transparent\nclose dark false true : white circle var(--c-p) white\n\nclose light true false : white circle green transparent\nclose light true true : white circle lightgreen transparent\nclose dark true false : var(--c-p) circle green transparent\nclose dark true true : white circle lightgreen white\n\nclose light disabled false : white circle gray transparent\nclose light disabled true : white circle lightgray transparent\nclose dark disabled false : var(--c-p) circle gray transparent\nclose dark disabled true : white circle gray white\n\n\n\nlinechart light false false : white circle var(--c-p) transparent\nlinechart light false true : white circle var(--c-p-80) transparent\nlinechart dark false false : var(--c-p) circle white transparent\nlinechart dark false true : white circle var(--c-p) white\n\nlinechart light true false : white circle green transparent\nlinechart light true true : white circle lightgreen transparent\nlinechart dark true false : var(--c-p) circle green transparent\nlinechart dark true true : white circle lightgreen white\n\nlinechart light disabled false : white circle gray transparent\nlinechart light disabled true : white circle lightgray transparent\nlinechart dark disabled false : var(--c-p) circle gray transparent\nlinechart dark disabled true : white circle gray white\n\n\n\nbarchart light false false : white circle var(--c-p) transparent\nbarchart light false true : white circle var(--c-p-80) transparent\nbarchart dark false false : var(--c-p) circle white transparent\nbarchart dark false true : white circle var(--c-p) white\n\nbarchart light true false : white circle green transparent\nbarchart light true true : white circle lightgreen transparent\nbarchart dark true false : var(--c-p) circle green transparent\nbarchart dark true true : white circle lightgreen white\n\nbarchart light disabled false : white circle gray transparent\nbarchart light disabled true : white circle lightgray transparent\nbarchart dark disabled false : var(--c-p) circle gray transparent\nbarchart dark disabled true : white circle gray white\n\n\n\ndotplot light false false : white circle var(--c-p) transparent\ndotplot light false true : white circle var(--c-p-80) transparent\ndotplot dark false false : var(--c-p) circle white transparent\ndotplot dark false true : white circle var(--c-p) white\n\ndotplot light true false : white circle green transparent\ndotplot light true true : white circle lightgreen transparent\ndotplot dark true false : var(--c-p) circle green transparent\ndotplot dark true true : white circle lightgreen white\n\ndotplot light disabled false : white circle gray transparent\ndotplot light disabled true : white circle lightgray transparent\ndotplot dark disabled false : var(--c-p) circle gray transparent\ndotplot dark disabled true : white circle gray white\n\n\n\ntable light false false : white circle var(--c-p) transparent\ntable light false true : white circle var(--c-p-80) transparent\ntable dark false false : var(--c-p) circle white transparent\ntable dark false true : white circle var(--c-p) white\n\ntable light true false : white circle green transparent\ntable light true true : white circle lightgreen transparent\ntable dark true false : var(--c-p) circle green transparent\ntable dark true true : white circle lightgreen white\n\ntable light disabled false : white circle gray transparent\ntable light disabled true : white circle lightgray transparent\ntable dark disabled false : var(--c-p) circle gray transparent\ntable dark disabled true : white circle gray white\n\n\n-- buttons in a group\n\n\ngrp-linechart light false false : var(--c-p) none 0 #00000000\ngrp-linechart light false true : var(--c-d) none 0 var(--c-p-20)\ngrp-linechart light true false : white 0 0 var(--c-p)\ngrp-linechart light true true : white 0 0 var(--c-p)\ngrp-linechart dark false false : var(--c-p) none 0 white\ngrp-linechart dark false true : var(--c-d) none 0 var(--c-p-20)\ngrp-linechart dark true false : white 0 0 var(--c-p)\ngrp-linechart dark true true : white 0 0 var(--c-p)\n\n\n\ngrp-barchart light false false : var(--c-p) none 0 #00000000\ngrp-barchart light false true : var(--c-d) none 0 var(--c-p-20)\ngrp-barchart light true false : white 0 0 var(--c-p)\ngrp-barchart light true true : white 0 0 var(--c-p)\ngrp-barchart dark false false : var(--c-p) none 0 white\ngrp-barchart dark false true : var(--c-d) none 0 var(--c-p-20)\ngrp-barchart dark true false : white 0 0 var(--c-p)\ngrp-barchart dark true true : white 0 0 var(--c-p)\n\n\n\ngrp-dotplot light false false : var(--c-p) none 0 #00000000\ngrp-dotplot light false true : var(--c-d) none 0 var(--c-p-20)\ngrp-dotplot light true false : white 0 0 var(--c-p)\ngrp-dotplot light true true : white 0 0 var(--c-p)\ngrp-dotplot dark false false : var(--c-p) none 0 white\ngrp-dotplot dark false true : var(--c-d) none 0 var(--c-p-20)\ngrp-dotplot dark true false : white 0 0 var(--c-p)\ngrp-dotplot dark true true : white 0 0 var(--c-p)\n\n\n\ngrp-table light false false : var(--c-p) none 0 #00000000\ngrp-table light false true : var(--c-d) none 0 var(--c-p-20)\ngrp-table light true false : white 0 0 var(--c-p)\ngrp-table light true true : white 0 0 var(--c-p)\ngrp-table dark false false : var(--c-p) none 0 white\ngrp-table dark false true : var(--c-d) none 0 var(--c-p-20)\ngrp-table dark true false : white 0 0 var(--c-p)\ngrp-table dark true true : white 0 0 var(--c-p)\n\n-- untested\n\ngrp-linechart dark disabled false : white none 0 var(--c-p)\ngrp-linechart dark disabled true : white none 0 var(--c-p)\n\n-- maybe get rid of\n\ngrp-check light true false : white none 0 var(--c-p)\ngrp-check light true true : white none 0 var(--c-p)\ngrp-check dark true false : white none 0 var(--c-p)\ngrp-check dark true true : white none 0 var(--c-p)\n`\n\n\nfunction get(icon,bg,state,hover) {\n\tconst lines = table.split(\"\\n\")\n\tvar started=false\n\tfor (var i = 0; i < lines.length; i++) {\n\t\tconst line = lines[i].trim().replace(/\\s+/g, ' ')\n\t\tif(started) {\n\t\t\tif(line[0]===\"-\") {continue}\n\t\t\tconst lineParts = line.split(\":\")\n\t\t\tconst [iconC, bgC, stateC, hoverC] = lineParts[0].trim().split(\" \")\n\t\t\tif(icon==iconC && bg==bgC && String(state)==stateC && hover.toString()==hoverC)\n\t\t\t{\n\t\t\t\tconst retVal = lineParts[1].split(\" \")\n\t\t\t\treturn [retVal[1],retVal[2],retVal[3],retVal[4]]\n\t\t\t}\n\t\t} else {\n\t\t\tif(line[0]===\"-\") {started=true}\n\t\t}\n\t}\n\tconsole.error(`ewc-icon-button: no config for: ${icon} ${bg} ${state} ${hover}`)\n\treturn [null,null,null,null]\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/cfg.js?");
60
-
61
- /***/ }),
62
-
63
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/css.js":
64
- /*!**********************************************************!*\
65
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/css.js ***!
66
- \**********************************************************/
67
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
68
-
69
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n\n/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__() {\n return getStyleTag( get() )\n}\n\n\nfunction get() {\n return `\n button {\n all: unset;\n background-color: var(--background-color);\n display: flex;\n align-content: center;\n justify-content: center;\n cursor: pointer;\n }\n\n span {\n align-content: center;\n justify-content: center;\n }\n\n button > svg {\n align-self:center;\n }\n\n button:hover {\n background-color: var(--background-color-hover);\n --icon-color: var(--icon-color-hover);\n --backdrop-color: var(--backdrop-color-hover);\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\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/css.js?");
70
-
71
- /***/ }),
72
-
73
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/html.js":
74
- /*!***********************************************************!*\
75
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/html.js ***!
76
- \***********************************************************/
77
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
78
-
79
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ get: () => (/* binding */ get),\n/* harmony export */ getIcon: () => (/* binding */ getIcon)\n/* harmony export */ });\n/*\nall HTML as JS string\n*/\n\nfunction get(icon, width, height, backdrop, label, ariaLabel) {\n let html = `\n <button part=\"button\" tabindex=\"-1\" aria-label=\"${ariaLabel}\">\n <svg width=\"${width}\" height=\"${height}\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer; pointer-events: auto;\">\n ${backdrop?backdrops[backdrop]:\"\"}\n ${icons[icon]}\n </svg>\n <span part=\"label\" class=\"label\">\n ${label?label:\"\"}\n </span>\n </button>`\n return getHtmlTemplate(html)\n}\n\n\n// note: the name attrib is informative only\nconst icons = {\n\"info\":\n`<g id=\"icon\" name=\"info\" transform=\"scale(0.5, 0.5) translate(400 210)\">\n <path d=\"M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z\" fill=\"var(--icon-color)\"></path>\n</g>`,\n\n\"share\":\n`<g id=\"icon\" name=\"share\" transform=\"scale(20, 21)\">\n <path d=\"M18 16c-.7 0-1.3.2-1.8.6L9 12.4v-.8l7.3-4.2c.4.4 1 .6 1.7.6 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .5.1.8l-7 4.1C7.5 9.3 6.8 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.8 0 1.5-.3 2.1-.8l7 4.1c-.1.2-.1.4-.1.7 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3\" fill=\"var(--icon-color)\"/>\n</g>`,\n\n\"star\":\n`<g id=\"icon\" name=\"star\" transform=\"scale(0.6, 0.6) translate(210 180)\">\n <path id=\"symbol\" d=\"M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z\" fill=\"var(--icon-color)\" stroke-width=\"0\"/>\n</g>`,\n\n\"starFilled\":\n`<g id=\"icon\" name=\"starFilled\" transform=\"scale(0.6, 0.6) translate(210 180)\">\n <path id=\"symbol\" d=\"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z\" fill=\"var(--icon-color)\" stroke-width=\"0\"/>\n</g>`,\n\n\"dotplot\":\n`<g id=\"icon\" name=\"dotplot\" transform=\"scale(0.6, 0.6) translate(180 180)\">\n <path id=\"symbol\" fill=\"var(--icon-color)\" stroke-width=\"0\" d=\"M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z \n M 170 150\n m 50, 0\n a 50,50 0 1,0 -100,0\n a 50,50 0 1,0 100,0 \n M 170 300\n m 50, 0\n a 50,50 0 1,0 -100,0\n a 50,50 0 1,0 100,0 \n M 295 125\n m 50, 0\n a 50,50 0 1,0 -100,0\n a 50,50 0 1,0 100,0 \n M 295 240\n m 50, 0\n a 50,50 0 1,0 -100,0\n a 50,50 0 1,0 100,0 \n M 415 160\n m 50, 0\n a 50,50 0 1,0 -100,0\n a 50,50 0 1,0 100,0 \n M 415 325\n m 50, 0\n a 50,50 0 1,0 -100,0\n a 50,50 0 1,0 100,0 \n \"></path>\n </g>`,\n\n\"barchart\":\n`<g id=\"icon\" name=\"barchart\" transform=\"scale(0.6, 0.6) translate(180 180)\">\n <path id=\"symbol\" d=\"M332.8 320h38.4c6.4 0 12.8-6.4 12.8-12.8V172.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V76.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-288 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h38.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zM496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z\" fill=\"var(--icon-color)\" stroke-width=\"0\"/>\n</g>`,\n\n\"linechart\":\n`<g id=\"icon\" name=\"linechart\" transform=\"scale(0.6, 0.6) translate(180 180)\">\n <path id=\"symbol\" d=\"M496 384H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM464 96H345.94c-21.38 0-32.09 25.85-16.97 40.97l32.4 32.4L288 242.75l-73.37-73.37c-12.5-12.5-32.76-12.5-45.25 0l-68.69 68.69c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L192 237.25l73.37 73.37c12.5 12.5 32.76 12.5 45.25 0l96-96 32.4 32.4c15.12 15.12 40.97 4.41 40.97-16.97V112c.01-8.84-7.15-16-15.99-16z\" fill=\"var(--icon-color)\" stroke-width=\"0\"/>\n</g>`,\n\n\"close\":\n`<g id=\"icon\" name=\"close\" transform=\"scale(11, 11)\">\n<path fill=\"var(--icon-color)\"\n d=\"M21.8679 24.0212L14.4434 31.4458L16.5647 33.5671L23.9892 26.1426L31.4139 33.5672L33.5352 31.4459L26.1106 24.0212L33.5352 16.5966L31.4139 14.4752L23.9892 21.8999L16.5647 14.4754L14.4434 16.5967L21.8679 24.0212Z\"\n fill-rule=\"evenodd\"\n />\n </g>`,\n\n\"calendar\":\n`<g id=\"icon\" name=\"calendar\" transform=\"translate(60 60) scale(8, 8)\">\n <path fill=\"var(--icon-color)\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18 3H15V6H9C7.35 6 6 7.35 6 9V39C6 40.65 7.35 42 9 42H39C40.65 42 42 40.65 42 39V9C42 7.35 40.65 6 39 6H33V3H30V6H18V3ZM30 9H18V12H15V9H9V16.5H39V9H33V12H30V9ZM39 19.5H9V39H39V19.5Z\"/>\n</g>\n`,\n\n\"check\":\n`<g id=\"icon\" name=\"check\" transform=\"translate(160 130) scale(5, 5)\">\n<path d=\"M19.53 36.69L6 23.19L8.13 21.06L19.53 32.46L39.99 12L42.12 14.13L19.53 36.69Z\" fill-rule=\"evenodd\" fill=\"var(--icon-color)\"/>\n</g>`,\n\n\"download\":\n`<g id=\"icon\" name=\"download\" transform=\"translate(80 80) scale(7, 7)\">\n<path d=\"M25.4704 30.24L37.9204 17.82L40.0504 19.95L23.9704 36L7.92041 19.98L10.0504 17.85L22.4704 30.3V3H25.4704V30.24Z\" fill-rule=\"evenodd\" fill=\"var(--icon-color)\" />\n<path d=\"M39 42V36H42V42C42 43.65 40.65 45 39 45H9C7.35 45 6 43.65 6 42V36H9V42H39Z\" fill-rule=\"evenodd\" fill=\"var(--icon-color)\" />\n</g>`,\n\n\"table\":\n`<g fill=\"var(--icon-color)\" id=\"icon\" name=\"table\" transform=\"translate(80 80) scale(7, 7)\">\n<path d=\"M10.4399 13.5C10.4399 14.7426 9.43258 15.75 8.18994 15.75C6.9473 15.75 5.93994 14.7426 5.93994 13.5C5.93994 12.2574 6.9473 11.25 8.18994 11.25C9.43258 11.25 10.4399 12.2574 10.4399 13.5Z\" fill-rule=\"evenodd\"/>\n<path d=\"M13.4707 12H42.0007V15H13.4707V12Z\" fill-rule=\"evenodd\" />\n<path d=\"M13.4707 33H42.0007V36H13.4707V33Z\" fill-rule=\"evenodd\" />\n<path d=\"M42.0007 22.5H13.4707V25.5H42.0007V22.5Z\" fill-rule=\"evenodd\" />\n<path d=\"M8.18994 26.25C9.43258 26.25 10.4399 25.2426 10.4399 24C10.4399 22.7574 9.43258 21.75 8.18994 21.75C6.9473 21.75 5.93994 22.7574 5.93994 24C5.93994 25.2426 6.9473 26.25 8.18994 26.25Z\" fill-rule=\"evenodd\"/>\n<path d=\"M10.4399 34.5C10.4399 35.7426 9.43258 36.75 8.18994 36.75C6.9473 36.75 5.93994 35.7426 5.93994 34.5C5.93994 33.2574 6.9473 32.25 8.18994 32.25C9.43258 32.25 10.4399 33.2574 10.4399 34.5Z\" fill-rule=\"evenodd\"/>\n</g>`\n\n}\n\nconst backdrops = {\n \"circle\":\n `<circle id=\"backdrop\" fill=\"var(--backdrop-color)\" cx=\"256\" cy=\"256\" r=\"256\" />`,\n \n \"square\":\n `<rect id=\"backdrop\" fill=\"var(--backdrop-color)\" />`,\n\n \"none\":\"\"\n}\n\n// helper\nfunction getHtmlTemplate(source) {\n const t = document.createElement('template')\n t.innerHTML = source\n return t.content\n}\n\n// helper\nfunction getIcon(id) {\n const t = document.createElementNS(\"http://www.w3.org/2000/svg\", 'template')\n t.innerHTML = icons[id]\n return t.firstElementChild\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/html.js?");
80
-
81
- /***/ }),
82
-
83
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/main.js":
84
- /*!***********************************************************!*\
85
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/main.js ***!
86
- \***********************************************************/
87
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
88
-
89
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _html_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./html.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/html.js\");\n/* harmony import */ var _cfg_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./cfg.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/cfg.js\");\n/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./css.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/css.js\");\n/*\na button displaying one of a set of given icons.\n\nit's state can be true (pressed), false (not pressed) or disabled (not focusable).\neach state has it's own, visual representation.\nit has focus and hover effects.\nenter and click are captured, prevented and instead one event \"action\" is dispatched.\n\n\nImportant note:\nThe runtime-change of backdropStyle is not fully implemented.\n*/\n\n\t\t// keep this file html free\n\n\n\n\nclass Element extends HTMLElement {\n\n\t#icon\t\t\t\t\t// one of [close, lineChart, barChart, dotPlot, table, share, info, download]\n\t#configId\t\t\t// is the same as #icon per default\n\t#size\t\t\t\t\t// icon size. valid CSS string.\n\t#state\t\t\t\t// tristate, one of [true,false,disabled]\n\t#bg\t\t\t\t\t\t// kind of background: \"dark\" or \"light\"\n\t#bd\t\t\t\t\t\t// backdrop form (eg circle or square)\n\t#label\t\t\t\t// text right to the icon\n\n\tgetAttr(name, _default) {\n\t\tconst r = this.hasAttribute(name) ? this.getAttribute(name) : _default\n\t\treturn r\n\t}\n\n\tconstructor() {\t\n\t\tsuper()\t\n\n\t\tthis.#icon = this.getAttr(\"icon\").toLowerCase()\n\t\tthis.#configId = this.hasAttribute(\"use-config\") ? this.getAttr(\"use-config\").toLowerCase() : this.#icon\n\t\tif(![\"close\", \"linechart\", \"barchart\", \"dotplot\", \"table\", \"star\", \"share\", \"info\", \"download\", \"calendar\"].includes(this.#icon) ) {\n\t\t\tconst err = \"ewc-icon-button: invalid icon specified\"\n\t\t\tconsole.error(err)\n\t\t\tthrow new Error(err)\n\t\t}\n\n\t\tthis.#size = this.getAttr(\"size\", 35)\n\n\t\tthis.#bg = this.getAttr(\"background\",\"light\")\n\t\tthis.#label = this.getAttr(\"label\",\"\")\n\t\tthis.#state = this.getAttribute(\"state\")===\"true\"\n\n\t\tthis.#applyLook(this.#state)\n\n\t\tthis.attachShadow({mode: 'open'})\n\n\t\tconst w = this.#size\n\t\tconst h = this.#size\n\t\tthis.shadowRoot.appendChild(_html_js__WEBPACK_IMPORTED_MODULE_0__.get( this.#icon, w, h, this.#bd, this.#label, this.getAttr(\"btn-aria-label\", \"button\")).cloneNode(true))\n\t\tthis.shadowRoot.appendChild((0,_css_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])().cloneNode(true))\n\t\tthis.#installEventHandlers()\n\n\t}\n\n\tconnectedCallback() {\n\t\tthis.setAttribute(\"ewc-version\", \"1.1.0-alpha\")\t\t// please always keep in sync with version in package.json\n\t\tthis.setAttribute(\"tabindex\", \"0\")\n\t}\n\n\tstatic get observedAttributes() { return [\"icon\", \"background\", \"state\", \"size\", \"label\", \"use-config\", \"btn-aria-label\"] }\n\n attributeChangedCallback(name, oldValue, newValue) {\n\t\tif(name===\"use-config\") {\n\t\t\tthis.#configId = newValue\n\t\t\tthis.#applyLook(this.#state)\n\t\t}\n \tif(name === \"icon\") {\n\t\t\tconst icon = this.shadowRoot.querySelector(\"#icon\")\n\t\t\tif(icon) {icon.remove()}\n\t\t\tconst svg = this.shadowRoot.querySelector(\"svg\")\n\t\t\tif(svg) {svg.appendChild(_html_js__WEBPACK_IMPORTED_MODULE_0__.getIcon(newValue))}\n\n\t\t\tthis.#icon = this.getAttr(\"icon\").toLowerCase()\n\t\t\tthis.#applyLook(this.#state)\n\t\t}\n \tif(name === 'state') {\n\t\t\tif([\"disabled\",\"true\",\"false\"].includes(newValue)) {\n\t\t\t\tthis.#state = newValue===\"disabled\"?newValue:newValue===\"true\"\n\t\t\t\tthis.setAttribute(\"aria-pressed\", this.#state===\"true\")\n\t\t\t\tthis.setAttribute(\"tabindex\", this.#state===\"disabled\"?\"-1\":this.getAttribute(\"tabindex\"))\n\t\t\t\tthis.setAttribute(\"aria-disabled\", this.#state===\"disabled\"?\"true\":\"false\")\n\t\t\t} else {\n\t\t\t\t// default\n\t\t\t\tthis.#state = false\n\t\t\t\tthis.setAttribute(\"aria-pressed\", \"false\")\n\t\t\t\tthis.setAttribute(\"tabindex\", \"0\")\n\t\t\t\tthis.setAttribute(\"aria-disabled\", \"false\")\n\t\t\t}\n\t\t\tthis.#applyLook(this.#state)\n\t\t}\n \tif(name === 'background') {\n\t\t\tthis.#bg = newValue===\"dark\"?\"dark\":\"light\"\n\t\t\tthis.#applyLook(this.#state)\n\t\t}\n \tif(name === 'size') {\n\t\t\tthis.#size = newValue\n\t\t\tthis.#applyLook(this.#state)\n\t\t}\n \tif(name === 'label') {\n\t\t\tthis.shadowRoot.querySelector(\"span\").textContent = newValue\n\t\t}\n \tif(name === 'btn-aria-label') {\n\t\t\tthis.shadowRoot.querySelector(\"button\").setAttribute(\"aria-label\", newValue)\n\t\t}\n }\n\n\t#installEventHandlers() {\n\t\tthis.addEventListener(\"click\", (ev) => {\n\t\t\tif(this.#state!==\"disabled\") {\n\t\t\t\tconst event = new Event(\"action\",{bubbles: true})\n\t\t\t\tthis.dispatchEvent(event)\n\t\t\t\tev.stopPropagation()\n\t\t\t\tev.preventDefault()\n\t\t\t}\n\t\t})\n\t\tthis.addEventListener(\"keydown\", (ev) => {\n\t\t\tif(ev.key==\"Enter\" || ev.key==\" \") {\n\t\t\t\tif(this.#state!==\"disabled\") {\n\t\t\t\t\tconst event = new Event(\"action\",{bubbles: true})\n\t\t\t\t\tthis.dispatchEvent(event)\n\t\t\t\t\tev.stopPropagation()\n\t\t\t\t\tev.preventDefault()\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\n\t#applyLook(state) {\n\t\tconst [iconColor, backdropStyle, backdropColor, backgroundColor] = (0,_cfg_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(this.#configId, this.#bg, state, false)\n\t\tconst [iconColorH, backdropStyleH, backdropColorH, backgroundColorH] = (0,_cfg_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(this.#configId, this.#bg, state, true)\n\n\t\tthis.style.setProperty(\"--background-color\", backgroundColor)\n\t\tthis.style.setProperty(\"--backdrop-color\", backdropColor)\n\t\tthis.style.setProperty(\"--icon-color\", iconColor)\n\n\t\tthis.style.setProperty(\"--background-color-hover\", backgroundColorH)\n\t\tthis.style.setProperty(\"--backdrop-color-hover\", backdropColorH)\n\t\tthis.style.setProperty(\"--icon-color-hover\", iconColorH)\n\n\t\tthis.#bd = backdropStyle\n\t}\n\n\tset state(val) {\n\t\tthis.setAttribute(\"state\", val)\n\t}\n\n\tget state() {\n\t\treturn this.#state\n\t}\n\n\ttoggle() {\n\t\tif(this.#state!==\"disabled\") {\n\t\t\tthis.state = !Boolean(this.state)\n\t\t}\n\t}\n\n}\n\nif (window.customElements.get(\"ewc-icon-button\")) {\n console.warn(\"ewc-icon-button: custom element is already defined\")\n} else {\n window.customElements.define(\"ewc-icon-button\", Element);\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/main.js?");
90
-
91
- /***/ }),
92
-
93
- /***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/@ewc-lib/ewc-css-common/custom-props.css":
94
- /*!*****************************************************************************************************!*\
95
- !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/@ewc-lib/ewc-css-common/custom-props.css ***!
96
- \*****************************************************************************************************/
97
- /***/ ((module, __webpack_exports__, __webpack_require__) => {
98
-
99
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `/*!\nBased on @ewc/preset-eu - 4.8.1 Built on 2024-10-17T09:38:44.856Z.\nNote: all CSS Custom Properties defined on :root are available within shadow DOM. \n*/\n\n@charset \"UTF-8\";\n\n:root{\n --ewc-color-primary: #0e47cb;\n --ewc-color-primary-180: #082b7a;\n --ewc-color-primary-160: #0a328e;\n --ewc-color-primary-140: #0b39a2;\n --ewc-color-primary-120: #0d40b7;\n --ewc-color-primary-100: #0e47cb;\n --ewc-color-primary-80: #3e6cd5;\n --ewc-color-primary-60: #6e91e0;\n --ewc-color-primary-40: #9fb5ea;\n --ewc-color-primary-20: #cfdaf5;\n --ewc-color-primary-10: #e7edfa;\n --ewc-color-primary-5: #f3f6fc;\n --ewc-color-secondary: #fc0;\n --ewc-color-secondary-180: #997a00;\n --ewc-color-secondary-160: #b38f00;\n --ewc-color-secondary-140: #cca300;\n --ewc-color-secondary-120: #e6b800;\n --ewc-color-secondary-100: #fc0;\n --ewc-color-secondary-80: #ffd633;\n --ewc-color-secondary-60: #ffe066;\n --ewc-color-secondary-40: #ffeb99;\n --ewc-color-secondary-20: #fff5cc;\n --ewc-color-dark: #262b38;\n --ewc-color-dark-100: #262b38;\n --ewc-color-dark-80: #515560;\n --ewc-color-dark-60: #7d8088;\n --ewc-color-dark-40: #a8aaaf;\n --ewc-color-dark-20: #d4d5d7;\n --ewc-color-dark-10: #e9eaeb;\n --ewc-color-dark-5: #f4f5f5;\n --ewc-color-info: #0e47cb;\n --ewc-color-info-100: #0e47cb;\n --ewc-color-info-5: #f3f6fc;\n --ewc-color-success: #00a174;\n --ewc-color-success-100: #00a174;\n --ewc-color-success-5: #f2fcf9;\n --ewc-color-warning: #ff8133;\n --ewc-color-warning-100: #ff8133;\n --ewc-color-warning-5: #fff7f2;\n --ewc-color-error: #d7003d;\n --ewc-color-error-100: #d7003d;\n --ewc-color-error-5: #fef2f5;\n --ewc-color-accent: #00e9ff;\n --ewc-color-accent-100: #00e9ff;\n --ewc-color-accent-30: #b3f8ff;\n --ewc-color-overlay-light: color-mix(in srgb, var(--c-d) 70%, transparent);\n --ewc-color-overlay-dark: color-mix(in srgb, var(--c-d) 90%, transparent);\n --ewc-font-family-default: arial, sans-serif;\n --ewc-font-family-print-default: verdana, sans-serif;\n --ewc-font-family-print-alt: arial, sans-serif;\n --ewc-font-xs: normal normal 400 0.75rem/1.125rem arial, sans-serif;\n --ewc-font-s: normal normal 400 0.875rem/1.125rem arial, sans-serif;\n --ewc-font-m: normal normal 400 1rem/1.5rem arial, sans-serif;\n --ewc-font-l: normal normal 400 1.25rem/1.75rem arial, sans-serif;\n --ewc-font-xl: normal normal 400 1.5rem/1.75rem arial, sans-serif;\n --ewc-font-2xl: normal normal 400 1.75rem/2rem arial, sans-serif;\n --ewc-font-3xl: normal normal 400 2rem/2.5rem arial, sans-serif;\n --ewc-font-4xl: normal normal 400 2.25rem/2.75rem arial, sans-serif;\n --ewc-font-5xl: normal normal 400 2.625rem/3.25rem arial, sans-serif;\n --ewc-font-ui-s: normal normal 400 0.875rem/1.5rem arial, sans-serif;\n --ewc-font-ui-m: normal normal 400 1rem/1.75rem arial, sans-serif;\n --ewc-spacing-2xs: 0.25rem;\n --ewc-spacing-xs: 0.5rem;\n --ewc-spacing-s: 0.75rem;\n --ewc-spacing-m: 1rem;\n --ewc-spacing-l: 1.5rem;\n --ewc-spacing-xl: 2rem;\n --ewc-spacing-2xl: 2.5rem;\n --ewc-spacing-3xl: 3rem;\n --ewc-spacing-4xl: 4rem;\n --ewc-shadow-1: 0 2px 4px rgba(9, 49, 142, 0.08),\n 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04),\n 0 -4px 4px rgba(9, 49, 142, 0.04);\n --ewc-shadow-2: 0 3px 5px rgba(9, 49, 142, 0.04),\n 0 0 18px rgba(9, 49, 142, 0.04), 0 6px 10px rgba(9, 49, 142, 0.04),\n 0 -4px 4px rgba(9, 49, 142, 0.04);\n --ewc-shadow-3: 0 7px 8px rgba(9, 49, 142, 0.08),\n 0 0 22px rgba(9, 49, 142, 0.04), 0 12px 17px rgba(9, 49, 142, 0.04),\n 0 -4px 4px rgba(9, 49, 142, 0.04);\n --ewc-shadow-4: 0 11px 15px rgba(9, 49, 142, 0.08),\n 0 9px 46px rgba(9, 49, 142, 0.04), 0 24px 38px rgba(9, 49, 142, 0.04),\n 0 -4px 4px rgba(9, 49, 142, 0.04);\n --ewc-shadow-inner-1: 0 2px 4px rgba(9, 49, 142, 0.08) inset,\n 0 0 10px rgba(9, 49, 142, 0.04) inset,\n 0 4px 5px rgba(9, 49, 142, 0.04) inset,\n 0 -4px 4px rgba(9, 49, 142, 0.04) inset;\n --ewc-shadow-inner-2: 0 3px 5px rgba(9, 49, 142, 0.04) inset,\n 0 0 18px rgba(9, 49, 142, 0.04) inset,\n 0 6px 10px rgba(9, 49, 142, 0.04) inset,\n 0 -4px 4px rgba(9, 49, 142, 0.04) inset;\n --ewc-shadow-negative-1: 0 2px 4px hsla(0, 0%, 100%, 0.08),\n 0 0 10px hsla(0, 0%, 100%, 0.04), 0 4px 5px hsla(0, 0%, 100%, 0.04),\n 0 -4px 4px hsla(0, 0%, 100%, 0.04);\n --ewc-shadow-negative-2: 0 3px 5px hsla(0, 0%, 100%, 0.04),\n 0 0 18px hsla(0, 0%, 100%, 0.04), 0 6px 10px hsla(0, 0%, 100%, 0.04),\n 0 -4px 4px hsla(0, 0%, 100%, 0.04);\n --ewc-shadow-negative-3: 0 7px 8px hsla(0, 0%, 100%, 0.08),\n 0 0 22px hsla(0, 0%, 100%, 0.04), 0 12px 17px hsla(0, 0%, 100%, 0.04),\n 0 -4px 4px hsla(0, 0%, 100%, 0.04);\n --ewc-shadow-negative-4: 0 11px 15px rgba(9, 49, 142, 0.08),\n 0 9px 46px rgba(9, 49, 142, 0.04), 0 24px 38px rgba(9, 49, 142, 0.04),\n 0 -4px 4px rgba(9, 49, 142, 0.04);\n --ewc-shadow-negative-inner-1: 0 2px 4px hsla(0, 0%, 100%, 0.08) inset,\n 0 0 10px hsla(0, 0%, 100%, 0.04) inset,\n 0 4px 5px hsla(0, 0%, 100%, 0.04) inset,\n 0 -4px 4px hsla(0, 0%, 100%, 0.04) inset;\n --ewc-shadow-negative-inner-2: 0 3px 5px hsla(0, 0%, 100%, 0.04) inset,\n 0 0 18px hsla(0, 0%, 100%, 0.04) inset,\n 0 6px 10px hsla(0, 0%, 100%, 0.04) inset,\n 0 -4px 4px hsla(0, 0%, 100%, 0.04) inset;\n --ewc-max-width: 80ch;\n --c-p: var(--ewc-color-primary);\n --c-p-180: var(--ewc-color-primary-180);\n --c-p-160: var(--ewc-color-primary-160);\n --c-p-140: var(--ewc-color-primary-140);\n --c-p-120: var(--ewc-color-primary-120);\n --c-p-100: var(--ewc-color-primary-100);\n --c-p-80: var(--ewc-color-primary-80);\n --c-p-60: var(--ewc-color-primary-60);\n --c-p-40: var(--ewc-color-primary-40);\n --c-p-20: var(--ewc-color-primary-20);\n --c-p-10: var(--ewc-color-primary-10);\n --c-p-5: var(--ewc-color-primary-5);\n --c-s: var(--ewc-color-secondary);\n --c-s-180: var(--ewc-color-secondary-180);\n --c-s-160: var(--ewc-color-secondary-160);\n --c-s-140: var(--ewc-color-secondary-140);\n --c-s-120: var(--ewc-color-secondary-120);\n --c-s-100: var(--ewc-color-secondary-100);\n --c-s-80: var(--ewc-color-secondary-80);\n --c-s-60: var(--ewc-color-secondary-60);\n --c-s-40: var(--ewc-color-secondary-40);\n --c-s-20: var(--ewc-color-secondary-20);\n --c-d: var(--ewc-color-dark);\n --c-d-100: var(--ewc-color-dark-100);\n --c-d-80: var(--ewc-color-dark-80);\n --c-d-60: var(--ewc-color-dark-60);\n --c-d-40: var(--ewc-color-dark-40);\n --c-d-20: var(--ewc-color-dark-20);\n --c-d-10: var(--ewc-color-dark-10);\n --c-d-5: var(--ewc-color-dark-5);\n --c-in: var(--ewc-color-info);\n --c-in-100: var(--ewc-color-info-100);\n --c-in-5: var(--ewc-color-info-5);\n --c-su: var(--ewc-color-success);\n --c-su-100: var(--ewc-color-success-100);\n --c-su-5: var(--ewc-color-success-5);\n --c-wa: var(--ewc-color-warning);\n --c-wa-100: var(--ewc-color-warning-100);\n --c-wa-5: var(--ewc-color-warning-5);\n --c-er: var(--ewc-color-error);\n --c-er-100: var(--ewc-color-error-100);\n --c-er-5: var(--ewc-color-error-5);\n --c-a: var(--ewc-color-accent);\n --c-a-100: var(--ewc-color-accent-100);\n --c-a-30: var(--ewc-color-accent-30);\n --c-ov-l: var(--ewc-color-overlay-light);\n --c-ov-d: var(--ewc-color-overlay-dark);\n --ff-d: var(--ewc-font-family-default);\n --f-xs: var(--ewc-font-xs);\n --f-s: var(--ewc-font-s);\n --f-m: var(--ewc-font-m);\n --f-l: var(--ewc-font-l);\n --f-xl: var(--ewc-font-xl);\n --f-2xl: var(--ewc-font-2xl);\n --f-3xl: var(--ewc-font-3xl);\n --f-4xl: var(--ewc-font-4xl);\n --f-5xl: var(--ewc-font-5xl);\n --f-ui-s: var(--ewc-font-ui-s);\n --f-ui-m: var(--ewc-font-ui-m);\n --s-2xs: var(--ewc-spacing-2xs);\n --s-xs: var(--ewc-spacing-xs);\n --s-s: var(--ewc-spacing-s);\n --s-m: var(--ewc-spacing-m);\n --s-l: var(--ewc-spacing-l);\n --s-xl: var(--ewc-spacing-xl);\n --s-2xl: var(--ewc-spacing-2xl);\n --s-3xl: var(--ewc-spacing-3xl);\n --s-4xl: var(--ewc-spacing-4xl);\n --sh-1: var(--ewc-shadow-1);\n --sh-2: var(--ewc-shadow-2);\n --sh-3: var(--ewc-shadow-3);\n --sh-4: var(--ewc-shadow-4);\n --sh-i-1: var(--ewc-shadow-inner-1);\n --sh-i-2: var(--ewc-shadow-inner-2);\n --sh-n-1: var(--ewc-shadow-negative-1);\n --sh-n-2: var(--ewc-shadow-negative-2);\n --sh-n-3: var(--ewc-shadow-negative-3);\n --sh-n-4: var(--ewc-shadow-negative-4);\n --sh-n-i-1: var(--ewc-shadow-negative-inner-1);\n --sh-n-i-2: var(--ewc-shadow-negative-inner-2);\n --max-w: var(--ewc-max-width);\n --ewc-color-primary-130: #0a328e;\n --c-p-130: var(--ewc-color-primary-130);\n --ewc-color-secondary-10: #fffae6;\n --c-s-10: var(--ewc-color-secondary-10);\n --ewc-color-dark-140: #171a22;\n --c-d-140: var(--ewc-color-dark-140);\n --ewc-color-dark-120: #1e222d;\n --c-d-120: var(--ewc-color-dark-120);\n --ewc-color-error-80: #ef0044;\n --c-er-80: var(--ewc-color-error-80);\n --ewc-color-branding: #0e47cb;\n --c-br: var(--ewc-color-branding);\n --ewc-color-visited: #510dcd;\n --c-v: var(--ewc-color-visited);\n --ewc-color-visited-100: #510dcd;\n --c-v-100: var(--ewc-color-visited-100);\n --ewc-color-visited-40: #bf9af1;\n --c-v-40: var(--ewc-color-visited-40);\n --ewc-font-2xs: normal normal 400 0.625rem/1rem arial, sans-serif;\n --f-2xs: var(--ewc-font-2xs);\n --ewc-font-6xl: normal normal 400 2.625rem/3.25rem arial, sans-serif;\n --f-6xl: var(--ewc-font-6xl);\n --ewc-font-prolonged-xs: normal normal 400 0.75rem/1.25rem arial, sans-serif;\n --f-p-xs: var(--ewc-font-prolonged-xs);\n --ewc-font-prolonged-s: normal normal 400 0.875rem/1.25rem arial, sans-serif;\n --f-p-s: var(--ewc-font-prolonged-s);\n --ewc-font-prolonged-m: normal normal 400 1rem/1.5rem arial, sans-serif;\n --f-p-m: var(--ewc-font-prolonged-m);\n --ewc-font-prolonged-l: normal normal 400 1.25rem/1.75rem arial, sans-serif;\n --f-p-l: var(--ewc-font-prolonged-l);\n --ewc-font-prolonged-xl: normal normal 400 1.5rem/1.75rem arial, sans-serif;\n --f-p-xl: var(--ewc-font-prolonged-xl);\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-css-common/custom-props.css?./node_modules/css-loader/dist/cjs.js");
100
-
101
- /***/ }),
102
-
103
- /***/ "./node_modules/css-loader/dist/runtime/api.js":
104
- /*!*****************************************************!*\
105
- !*** ./node_modules/css-loader/dist/runtime/api.js ***!
106
- \*****************************************************/
107
- /***/ ((module) => {
108
-
109
- eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n list.push(item);\n }\n };\n return list;\n};\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/css-loader/dist/runtime/api.js?");
110
-
111
- /***/ }),
112
-
113
- /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
114
- /*!**************************************************************!*\
115
- !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
116
- \**************************************************************/
117
- /***/ ((module) => {
118
-
119
- eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/css-loader/dist/runtime/noSourceMaps.js?");
120
-
121
- /***/ }),
122
-
123
- /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
124
- /*!****************************************************************************!*\
125
- !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
126
- \****************************************************************************/
127
- /***/ ((module) => {
128
-
129
- eval("\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n return result;\n}\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n identifiers.push(identifier);\n }\n return identifiers;\n}\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n return updater;\n}\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n var newLastIdentifiers = modulesToDom(newList, options);\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n var _index = getIndexByIdentifier(_identifier);\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n stylesInDOM.splice(_index, 1);\n }\n }\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?");
130
-
131
- /***/ }),
132
-
133
- /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
134
- /*!********************************************************************!*\
135
- !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
136
- \********************************************************************/
137
- /***/ ((module) => {
138
-
139
- eval("\n\nvar memo = {};\n\n/* istanbul ignore next */\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target);\n\n // Special case to return head of iframe instead of iframe itself\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n memo[target] = styleTarget;\n }\n return memo[target];\n}\n\n/* istanbul ignore next */\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/style-loader/dist/runtime/insertBySelector.js?");
140
-
141
- /***/ }),
142
-
143
- /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
144
- /*!**********************************************************************!*\
145
- !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
146
- \**********************************************************************/
147
- /***/ ((module) => {
148
-
149
- eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/style-loader/dist/runtime/insertStyleElement.js?");
150
-
151
- /***/ }),
152
-
153
- /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
154
- /*!**********************************************************************************!*\
155
- !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
156
- \**********************************************************************************/
157
- /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
158
-
159
- eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?");
160
-
161
- /***/ }),
162
-
163
- /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
164
- /*!***************************************************************!*\
165
- !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
166
- \***************************************************************/
167
- /***/ ((module) => {
168
-
169
- eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n var needLayer = typeof obj.layer !== \"undefined\";\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n css += obj.css;\n if (needLayer) {\n css += \"}\";\n }\n if (obj.media) {\n css += \"}\";\n }\n if (obj.supports) {\n css += \"}\";\n }\n var sourceMap = obj.sourceMap;\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n }\n\n // For old IE\n /* istanbul ignore if */\n options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next */\nfunction domAPI(options) {\n if (typeof document === \"undefined\") {\n return {\n update: function update() {},\n remove: function remove() {}\n };\n }\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/style-loader/dist/runtime/styleDomAPI.js?");
170
-
171
- /***/ }),
172
-
173
- /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
174
- /*!*********************************************************************!*\
175
- !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
176
- \*********************************************************************/
177
- /***/ ((module) => {
178
-
179
- eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n styleElement.appendChild(document.createTextNode(css));\n }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/style-loader/dist/runtime/styleTagTransform.js?");
180
-
181
- /***/ })
182
-
183
- /******/ });
184
- /************************************************************************/
185
- /******/ // The module cache
186
- /******/ var __webpack_module_cache__ = {};
187
- /******/
188
- /******/ // The require function
189
- /******/ function __webpack_require__(moduleId) {
190
- /******/ // Check if module is in cache
191
- /******/ var cachedModule = __webpack_module_cache__[moduleId];
192
- /******/ if (cachedModule !== undefined) {
193
- /******/ return cachedModule.exports;
194
- /******/ }
195
- /******/ // Create a new module (and put it into the cache)
196
- /******/ var module = __webpack_module_cache__[moduleId] = {
197
- /******/ id: moduleId,
198
- /******/ // no module.loaded needed
199
- /******/ exports: {}
200
- /******/ };
201
- /******/
202
- /******/ // Execute the module function
203
- /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
204
- /******/
205
- /******/ // Return the exports of the module
206
- /******/ return module.exports;
207
- /******/ }
208
- /******/
209
- /************************************************************************/
210
- /******/ /* webpack/runtime/compat get default export */
211
- /******/ (() => {
212
- /******/ // getDefaultExport function for compatibility with non-harmony modules
213
- /******/ __webpack_require__.n = (module) => {
214
- /******/ var getter = module && module.__esModule ?
215
- /******/ () => (module['default']) :
216
- /******/ () => (module);
217
- /******/ __webpack_require__.d(getter, { a: getter });
218
- /******/ return getter;
219
- /******/ };
220
- /******/ })();
221
- /******/
222
- /******/ /* webpack/runtime/define property getters */
223
- /******/ (() => {
224
- /******/ // define getter functions for harmony exports
225
- /******/ __webpack_require__.d = (exports, definition) => {
226
- /******/ for(var key in definition) {
227
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
228
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
229
- /******/ }
230
- /******/ }
231
- /******/ };
232
- /******/ })();
233
- /******/
234
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
235
- /******/ (() => {
236
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
237
- /******/ })();
238
- /******/
239
- /******/ /* webpack/runtime/make namespace object */
240
- /******/ (() => {
241
- /******/ // define __esModule on exports
242
- /******/ __webpack_require__.r = (exports) => {
243
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
244
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
245
- /******/ }
246
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
247
- /******/ };
248
- /******/ })();
249
- /******/
250
- /******/ /* webpack/runtime/nonce */
251
- /******/ (() => {
252
- /******/ __webpack_require__.nc = undefined;
253
- /******/ })();
254
- /******/
255
- /************************************************************************/
256
- /******/
257
- /******/ // startup
258
- /******/ // Load entry module and return exports
259
- /******/ // This entry module can't be inlined because the eval devtool is used.
260
- /******/ var __webpack_exports__ = __webpack_require__("./main.js");
261
- /******/
262
- /******/ })()
263
- ;
package/usage-example/webpack/dist/index.html DELETED
@@ -1,48 +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
- </style>
20
- <script defer src="ewc_usage.js"></script></head>
21
-
22
- <body>
23
-
24
- <div id="container">
25
- <p style="margin-bottom: 50px;">Buttons available, on light and dark background</p>
26
-
27
- <div style="margin:20px; padding:20px;">
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
- <ewc-icon-button icon="barchart" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
31
- <ewc-icon-button icon="dotplot" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
32
- <ewc-icon-button icon="table" use-config="grp-table" label="Table"></ewc-icon-button>
33
- </ewc-icon-button-group>
34
- </div>
35
-
36
- <div style="margin:20px; padding:20px; background: darkblue;">
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
- <ewc-icon-button icon="barchart" background="dark" use-config="grp-barchart" label="Bar chart"></ewc-icon-button>
40
- <ewc-icon-button icon="dotplot" background="dark" use-config="grp-dotplot" label="Dot plot"></ewc-icon-button>
41
- <ewc-icon-button icon="table" background="dark" use-config="grp-table" label="Table"></ewc-icon-button>
42
- </ewc-icon-button-group>
43
- </div>
44
- </div>
45
-
46
- </body>
47
-
48
- </html>