@ewc-lib/ewc-icon-button-group 3.3.0-alpha → 3.3.1-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +2 -2
  2. package/readme.md +4 -1
  3. package/src/main.js +23 -2
  4. package/usage-example/vanilla/index.html +24 -7
  5. package/usage-example/webpack/index.html +18 -36
  6. package/usage-example/webpack/main.js +7 -0
  7. package/src/element.js +0 -0
  8. package/usage-example/webpack/dist/ewc_usage.js +0 -283
  9. package/usage-example/webpack/dist/index.html +0 -152
  10. package/usage-example/webpack/package-lock.json +0 -4676
package/usage-example/webpack/dist/ewc_usage.js DELETED
@@ -1,283 +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/buttonGroup.js":
14
- /*!********************************!*\
15
- !*** ../../src/buttonGroup.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 */ ButtonGroup: () => (/* binding */ ButtonGroup)\n/* harmony export */ });\n/*\nhandles pressed state.\noblivious about disabled state.\ndeals only with index, not with element IDs\n*/\nclass ButtonGroup {\n #currentIndex\n #pressedBtnElement = null\n #pressedBtnElementIcon = null // accomodate the possibility that the button might have a different icon in pressed state\n\n applyCurrentSelection(nodes) {\n this.setPressed(nodes, this.#currentIndex)\n }\n\n #storePressed(el) {\n if(el) {\n this.#pressedBtnElement=el\n this.#pressedBtnElementIcon=el.getAttribute(\"icon\")\n }\n }\n\n #restorePressed() {\n if(this.#pressedBtnElement) {\n this.#pressedBtnElement.setAttribute(\"icon\", this.#pressedBtnElementIcon)\n }\n }\n\n // ensures that max 1 button is pressed\n setPressed(allElements, selectedElIdx) {\n //console.debug(\"ewc-icon-button-group setPressed: \", selectedElIdx)\n this.#restorePressed()\n for(let i=0;i<allElements.length;i++) {\n const el = allElements[i]\n if(el.getAttribute(\"state\")===\"disabled\") {continue}\n if(i===selectedElIdx){\n el.setAttribute(\"state\",\"true\")\n this.#storePressed(el)\n } else {\n el.setAttribute(\"state\",\"false\")\n }\n }\n this.#currentIndex = Number(selectedElIdx)\n }\n\n getPressedIndex() {\n return this.#currentIndex\n }\n\n getPressedElement() {\n return this.#pressedBtnElement\n }\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/../../src/buttonGroup.js?\n}");
20
-
21
- /***/ }),
22
-
23
- /***/ "../../src/css.js":
24
- /*!************************!*\
25
- !*** ../../src/css.js ***!
26
- \************************/
27
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
28
-
29
- 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 --outerFrameWidth: 1px;\n }\n .${cssClassPrefix} ewc-icon-button::part(button) {\n display:flex;\n align-items:center;\n max-width: 115px; /* comes out as 116x41, as per spec */\n min-width: 115px;\n height: 39px;\n margin-right: 2px; /* :-/ */\n }\n @media screen and (max-width: ${breakpoint}) {\n .${cssClassPrefix} ewc-icon-button::part(button) {\n margin-right: 0px; /* :-/ */\n }\n }\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?\n}");
30
-
31
- /***/ }),
32
-
33
- /***/ "../../src/main.js":
34
- /*!*************************!*\
35
- !*** ../../src/main.js ***!
36
- \*************************/
37
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
38
-
39
- eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./css.js */ \"../../src/css.js\");\n/* harmony import */ var _buttonGroup_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./buttonGroup.js */ \"../../src/buttonGroup.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- disabled buttons can't be pressed\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 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 #isInitialised = false\n #buttonGroup = new _buttonGroup_js__WEBPACK_IMPORTED_MODULE_1__.ButtonGroup()\n\n getAttr(name, _default) {\n const r = this.hasAttribute(name) ? this.getAttribute(name) : _default\n return r\n }\n\n constructor() {\t\n super()\n }\n\n connectedCallback() {\n this.setAttribute(\"ewc-version\", \"3.2.0-alpha\")\t\t// please always keep in sync with version in package.json\n if(this.#isInitialised == true) {return}\n\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\n const nodes = this.querySelectorAll(\"ewc-icon-button\")\n this.#setIndexOnNodes(nodes)\n this.#installEventHandlers(nodes)\n // attributeChangedCallback() might have been called before this, so it just stored the number but couldn't yet press the button. let it catch up now.\n this.#buttonGroup.applyCurrentSelection(nodes) \n\n this.#isInitialised = true\n }\n\n get selectedIndex() {\n return this.#buttonGroup.getPressedIndex()\n }\n\n set selectedIndex(index) {\n this.setAttribute(\"selectedindex\", index)\n }\n\n // convenience\n get selectedId() {\n return this.selectedElement.getAttribute(\"id\")\n }\n\n set selectedId(id) {\n this.setAttribute(\"selectedid\", id)\n }\n\n get selectedElement() {\n return this.#buttonGroup.getPressedElement()\n }\n\n setEnabledByIndex(index, isEnabled) {\n const el = this.#getElByIndex(index)\n if(el) {\n el.state = isEnabled ? \"false\":\"disabled\"\n } else {\n console.error(\"ewc-icon-button-group: no button with given index found. index=\", id)\n }\n }\n\n setEnabledById(id, isEnabled) {\n const [index,el] = this.#getElById(id)\n if(el) {\n this.setEnabledByIndex(index, isEnabled)\n } else {\n console.error(\"ewc-icon-button-group: no button with given id found. id=\", id)\n }\n }\n\n #getElByIndex(index) {\n const el = this.querySelector(`ewc-icon-button[__index='${index}']`)\n return el ? el : null\n }\n\n #getElById(id) {\n const allElements = this.querySelectorAll(\"ewc-icon-button\")\n for(let i=0;i<allElements.length;i++) {\n const el = allElements[i]\n if(el.getAttribute(\"id\")==id) {return [i,el]}\n }\n return [-1,null]\n }\n\n\n static observedAttributes = [\"selectedindex\", \"selectedid\"]\n\n attributeChangedCallback(name, oldValue, newValue) {\n if (name===\"selectedindex\") {\n if(Number(newValue)!==this.#buttonGroup.getPressedIndex()) {\n this.#buttonGroup.setPressed(this.querySelectorAll(\"ewc-icon-button\"), Number(newValue))\n }\n }\n if (name===\"selectedid\") {\n const [index,el] = this.#getElById(newValue)\n if(el) {\n this.#buttonGroup.setPressed(this.querySelectorAll(\"ewc-icon-button\"), index)\n }\n }\n }\n\n\n #installActionEventHandler(nodes) {\n // relay click/enter presses\n for(let i=0;i<nodes.length;i++) {\n nodes[i].addEventListener(\"action\", (ev) => {\n //console.debug(\"ewc-icon-button-group: got action event\", this.#buttonGroup.getPressedIndex(),i)\n\n ev.stopPropagation()\n if(this.#buttonGroup.getPressedIndex() == i) {\n // no operation. the already pressed button has been clicked again.\n } else {\n if(this.selectedElement) {\n const event = new CustomEvent(\"action\", { detail: {\"index\":i, \"id\":this.#getElByIndex(i).getAttribute(\"id\")} });\n this.dispatchEvent(event)\n }\n //console.debug(\"ewc-icon-button-group: sent new action event\")\n }\n })\n }\n }\n\n\n #installArrowKeyEventHandler(nodes) {\n // move focus, considering state (jump over disabled and pressed buttons).\n // it should behave like tab/shift-tab but additionally, wrap.\n this.addEventListener(\"keydown\", function(ev) {\n if(![\"ArrowLeft\",\"ArrowUp\",\"ArrowRight\",\"ArrowDown\"].includes(ev.key)) {return}\n\n const startIdx = Number(document.activeElement.getAttribute(\"__index\")) // note: currently focused, not currently selected/pressed\n const direction = ev.key==\"ArrowLeft\" || ev.key==\"ArrowUp\" ? -1 : 1\n\n function findNextFocusableButtonIndex(nodes, startIdx, direction) {\n var currentIdx = startIdx + direction\n var globalCounter = 0\n const l = nodes.length\n while(currentIdx!=startIdx && startIdx>-1) {\n currentIdx = currentIdx % l\n if(currentIdx<0) {currentIdx=l-1}\n if(nodes[currentIdx].getAttribute(\"tabindex\")!=\"-1\") {return currentIdx}\n currentIdx += direction\n if(++globalCounter>l-1) {\n // we're not supposed to get in here, but it happens under as of yet unknown circumstances.\n // once the issue is clear and fixed, this can be removed.\n console.error(\"ewc-icon-button-group: endless-loop guard intervention\")\n break\n }\n }\n return -1\n }\n\n const idx = findNextFocusableButtonIndex(nodes,startIdx,direction)\n if(idx>-1) {\n nodes[idx].focus()\n }\n }.bind(this))\n }\n\n // assign 0-based ordinal number to each button\n // TODO: remove and replace w/ loops\n #setIndexOnNodes(nodes) {\n for(let i=0;i<nodes.length;i++) {\n nodes[i].setAttribute(\"__index\", i)\n }\n }\n\n #installEventHandlers(nodes) {\n this.#installActionEventHandler(nodes)\n this.#installArrowKeyEventHandler(nodes)\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?\n}");
40
-
41
- /***/ }),
42
-
43
- /***/ "./main.js":
44
- /*!*****************!*\
45
- !*** ./main.js ***!
46
- \*****************/
47
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
48
-
49
- 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\n\nwindow.addEventListener('DOMContentLoaded',function () {\n\n // catch events of all buttons at once\n document.getElementById(\"lightEnabled\").addEventListener(\"action\",(e)=>{\n document.getElementById(\"lightEnabled\").setAttribute(\"selectedIndex\",e.detail.index)\n const el = document.getElementById(\"lightEnabled\").selectedElement\n console.log(\"button clicked or selected w/ kdb: \", e.detail, el)\n })\n\n document.getElementById(\"darkEnabled\").addEventListener(\"action\",(e)=>{\n document.getElementById(\"darkEnabled\").setAttribute(\"selectedIndex\",e.detail.index)\n const el = document.getElementById(\"darkEnabled\").selectedElement\n console.log(\"button clicked or selected w/ kdb: \", e.detail, el)\n })\n\n})\n\n\nwindow.addEventListener('DOMContentLoaded',function () {\n\n document.getElementById(\"ForDevelopers\").addEventListener(\"action\",(e)=>{\n document.getElementById(\"ForDevelopers\").setAttribute(\"selectedIndex\",e.detail.index)\n const el = document.getElementById(\"ForDevelopers\").selectedElement\n console.log(\"button clicked or selected w/ kdb: \", e.detail, el)\n })\n\n // handle a single button being toggled (disabled/re-enabled)\n document.getElementById(\"toggleOne\").addEventListener(\"click\", ()=>{\n const button = document.querySelector(\"#ForDevelopers > ewc-icon-button[icon='linechart']\")\n const buttonNext = document.querySelector(\"#ForDevelopers > ewc-icon-button[icon='barchart']\")\n const group = document.getElementById(\"ForDevelopers\")\n \n if(button.state==\"disabled\") {\n group.setEnabledByIndex(0, \"true\")\n group.selectedIndex = 0\n } else {\n // note that it's the component user's responsability to define what happens when currently pressed button gets disabled\n\n if(group.selectedIndex===0) {\n if(buttonNext.state == \"disabled\") {\n console.log(\"Do nothing\")\n group.selectedIndex = -1\n } else {\n group.selectedIndex = 1\n }\n }\n group.setEnabledByIndex(0, false)\n\n }\n })\n \n\n // handle all buttons being disabled at once\n document.getElementById(\"toggleAll\").addEventListener(\"click\", ()=>{\n const group = document.getElementById(\"ForDevelopers\")\n // doesnt have to be the last, any button will do, really\n const lastButton = document.querySelector(\"#ForDevelopers > ewc-icon-button[icon='table']\")\n const toSet = lastButton.state==\"disabled\" ? true : false\n \n group.setEnabledByIndex(0, toSet)\n group.setEnabledByIndex(1, toSet)\n group.setEnabledById(\"grp1-dot\", toSet)\n group.setEnabledById(\"grp1-table\", toSet)\n \n // note that it's the component user's responsability \n // to define what happens when ALL button get disabled and re-enabled again.\n // it's important to set the current index to -1 when all buttons are disabled/deselected.\n group.selectedIndex = toSet ? 0 : -1\n })\n\n})\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./main.js?\n}");
50
-
51
- /***/ }),
52
-
53
- /***/ "./node_modules/@ewc-lib/ewc-css-common/custom-props.css":
54
- /*!***************************************************************!*\
55
- !*** ./node_modules/@ewc-lib/ewc-css-common/custom-props.css ***!
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\": () => (__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?\n}");
60
-
61
- /***/ }),
62
-
63
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/cfg.js":
64
- /*!**********************************************************!*\
65
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/cfg.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\": () => (/* binding */ get)\n/* harmony export */ });\n/*\nthere are 6 elements that constitute an ewc-icon-button\n\n ┌───────────────────────────────────────────────────────┐ \n │┌─────────────────────────────────────────────────────┐│ \n ││ 3 │6 \n ││ ,,ggddY\"\"\"\"Ybbgg,, | ││ \n ││ ,agd\"\"' `\"\"bg, | ││ \n ││ ,gdP\" \"Ybg, V 5│ \n ││ ,dP\" \"Yb, ││ \n ││ ,dP\" _,,ddP\"\"\"Ybb,,_ \"Yb, ││ \n ││ ,8\" ,dP\"' `\"Yb, \"8, ││ \n ││ ,8' ,d\" \"b, `8, ││ \n ││ ,8' d\" ┌────┐ \"b `8, ││ \n ││ d' d' └────┘ `b `b ││ \n ││ 8 8 ││ 8 8 ││ \n ││ 8 8 1││ 2 8 8 ││ \n ││ 8 8 ││ 8 8 ││ \n ││ 8 Y, ┌────┐ ,P 8 ││ \n ││ Y, Ya └────┘ aP ,P ││ \n ││ `8, \"Ya aP\" ,8' ││ \n ││ `8, \"Yb,_ _,dP\" ,8' ││ \n ││ `8a `\"\"YbbgggddP\"\"' a8' ││ \n ││ `Yba 4 adP' ││ \n ││ \"Yba adY\" ││ \n ││ `\"Yba, ,adP\"' ││ \n ││ `\"Y8ba, ,ad8P\"' 4 ││ \n ││ ``\"\"YYbaaadPP\"\"'' ││ \n ││ ││ \n │└─────────────────────────────────────────────────────┘│ \n └───────────────────────────────────────────────────────┘ \n\n\nElement nr. 1 = icon (some SVG)\nElement nr. 2 = backdrop (implemented as div w/ 50% border radius, which comes out as a circle)\nElement nr. 3 = backdrop frame (a ring implemented as CSS outline of El. nr 2. note that in reality that ring is much closer to the backdrop (inner circle))\nElement nr. 4 = background (of outer frame. note that this includes the area between inner circle and 3)\nElement nr. 5 = inner frame (implemented as outline of div \"innerFrame\". note that it's fill is transparent)\nElement nr. 6 = outer frame (implemented as outline of div \"outerFrame\". filled w/ background color)\n(see also css.js)\n\nTo the right of that there can be a text label - it's optional.\nNote that label-color = icon-color.\n\nA user of this module specifies for instance, \"information symbol on light background\".\nAnd the config-system retrieves all colors for all possible situations.\n\nThe \"config system\" consists of:\n- the style definitions below\n- their mapping to CSS variables (implemented both, in fct. get() below and in element.js)\n- using the CSS variables in styles (see css.js)\n*/\n\n\n// the designs are defined below\nconst mapIconToDesign = {\n calendar: \"default\",\n share: \"default\",\n download: \"default\",\n linechart: \"default\",\n barchart: \"default\",\n dotplot: \"default\",\n table: \"default\",\n chevronleft : \"default\",\n chevronright : \"default\",\n information: \"information\",\n close: \"close\",\n squareshare: \"square\",\n \"grp-linechart\":\"buttongroup\",\n \"grp-barchart\": \"buttongroup\",\n \"grp-dotplot\": \"buttongroup\",\n \"grp-table\": \"buttongroup\"\n}\n\n/*\nthis table maps input-tuples to an array of output values.\n\ninput-tuples contain the elements: \n- icon\n- background (\"light\"/\"dark\"/\"blue\"; means, the button is displayed on given background)\n- state (pressed, not pressed, disabled)\n\ncolors used:\n\n#0b39a2 --ewc-color-primary-140 ; pressed (activated) on light\n#0e47cb --c-p, --ewc-color-primary, --ewc-color-primary; rgb(14,71,203) disabled\n#3e6cd5 --c-p-80, --ewc-color-primary-80; hover on light\n#6e91e0 --c-p-60: --ewc-color-primary-60; hover on dark \n\n// non-ECL colors:\n#E9EAEB\n\nnotes:\n- using hexcodes to make it easier for texteditor-color-highlighers\n- to reduces redundancy in the config, it might be possible to factor out common designs (identical in multiple situations)\n - define once, reference often\n*/\nconst designs = {\n// Element nr 1 Element nr 2 Element nr 3 Element nr 4 Element nr 5 Element nr 6 Element nr 6\n default: {\n light: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#fff\", \"#0e47cb\"],\n not_pressed_hover: [\"#fff\", \"#3E6CD5\"],\n not_pressed_focus: [\"#fff\", \"#0e47cb\", \"#3E6CD5\"],\n not_pressed_hover_focus: [\"#fff\", \"#0e47cb\", \"#3E6CD5\"],\n\n pressed: [\"#fff\", \"#0B39A2\"],\n pressed_hover: [\"#fff\", \"#3E6CD5\"],\n pressed_focus: [\"#fff\", \"#0B39A2\", \"#3E6CD5\"],\n pressed_hover_focus: [\"#fff\", \"#0B39A2\", \"#3E6CD5\"],\n\n disabled: [\"#7D8088\", \"#E9EAEB\"],\n disabled_hover: [\"#7D8088\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n },\n dark: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#fff\", \"#3E6CD5\"],\n not_pressed_hover: [\"#fff\", \"#6E91E0\"],\n not_pressed_focus: [\"#fff\", \"#3E6CD5\", \"#fff\"],\n not_pressed_hover_focus: [\"#fff\", \"#3E6CD5\", \"#fff\"],\n\n pressed: [\"#000\", \"#F1F1F1\"],\n pressed_hover: [\"#fff\", \"#6E91E0\"],\n pressed_focus: [\"#000\", \"#F1F1F1\", \"#fff\"],\n pressed_hover_focus: [\"#000\", \"#F1F1F1\", \"#fff\"],\n\n disabled: [\"#7D8088\", \"#E9EAEB\"],\n disabled_hover: [\"#7D8088\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: []\n },\n blue: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#fff\", \"\"],\n not_pressed_hover: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n not_pressed_focus: [\"#0e47cb\", \"#fff\", \"\", \"#0E47CB\", \"\", \"#fff\", \"0px\"],\n not_pressed_hover_focus: [\"#0e47cb\", \"#fff\", \"\", \"#0E47CB\", \"\", \"#fff\", \"0px\"],\n\n pressed: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n pressed_hover: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n pressed_focus: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\", \"#0e47cb\"],\n pressed_hover_focus: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\", \"#0e47cb\"],\n\n disabled: [\"#fff\", \"#7D8088\", \"#0000\", \"#E9EAEB\"],\n disabled_hover: [\"#fff\", \"#7D8088\", \"#0000\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: []\n }\n },\n square: {\n light: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"\", \"\", \"\", \"\", \"#0e47cb\", \"4px\"],\n not_pressed_hover: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"\", \"4px\"],\n not_pressed_focus: [\"#fff\", \"\", \"\", \"#0B39A2\", \"white\", \"#0B39A2\", \"4px\"],\n not_pressed_hover_focus: [\"#fff\", \"\", \"\", \"#0B39A2\", \"white\", \"#0B39A2\", \"4px\"],\n\n pressed: [\"#fff\", \"\", \"\", \"#0B39A2\", \"\", \"\", \"4px\"],\n pressed_hover: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"\", \"4px\"],\n pressed_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n pressed_hover_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n\n disabled: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7d8088\", \"4px\"],\n disabled_hover: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7d8088\", \"4px\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n },\n dark: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"\", \"\", \"#fff\", \"\", \"#0e47cb\", \"4px\"],\n not_pressed_hover: [\"#fff\", \"\", \"\", \"#6E91E0\"],\n not_pressed_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n not_pressed_hover_focus: [\"#fff\", \"\", \"\", \"#0B39A2\", \"white\", \"#0B39A2\", \"4px\"],\n\n pressed: [\"#0e47cb\", \"\", \"\", \"#fff\", \"\", \"\", \"4px\"],\n pressed_hover: [\"#fff\", \"\", \"\", \"#6E91E0\"],\n pressed_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n pressed_hover_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n\n disabled: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7d8088\", \"4px\"],\n disabled_hover: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7d8088\", \"4px\"],\n disabled_focus: [],\n disabled_hover_focus: []\n },\n blue: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"\", \"\", \"#fff\", \"\", \"#0e47cb\", \"4px\"],\n not_pressed_hover: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"\", \"4px\"],\n not_pressed_focus: [\"#fff\", \"\", \"\", \"#0B39A2\", \"white\", \"#0B39A2\", \"4px\"],\n not_pressed_hover_focus: [\"#fff\", \"\", \"\", \"#0B39A2\", \"white\", \"#0B39A2\", \"4px\"],\n\n pressed: [\"#fff\", \"\", \"\", \"#0B39A2\", \"\", \"\", \"4px\"],\n pressed_hover: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"\", \"4px\"],\n pressed_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n pressed_hover_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"white\", \"#0B39A2\", \"4px\"],\n\n disabled: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7d8088\", \"4px\"],\n disabled_hover: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7d8088\", \"4px\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n }\n },\n close: {\n light: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"#cfdaf5\"],\n not_pressed_hover: [\"#fff\", \"#0e47cb\"],\n not_pressed_focus: [\"#0e47cb\", \"#cfdaf5\", \"#0e47cb\"],\n not_pressed_hover_focus: [\"#0e47cb\", \"#cfdaf5\", \"#0e47cb\"],\n\n pressed: [\"#fff\", \"#0B39A2\"],\n pressed_hover: [\"#fff\", \"#3E6CD5\"],\n pressed_focus: [\"#fff\", \"#0B39A2\", \"#3E6CD5\"],\n pressed_hover_focus: [\"#fff\", \"#0B39A2\", \"#3E6CD5\"],\n\n disabled: [\"#7D8088\", \"#E9EAEB\"],\n disabled_hover: [\"#7D8088\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n },\n dark: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#fff\", \"#3E6CD5\"],\n not_pressed_hover: [\"#fff\", \"#6E91E0\"],\n not_pressed_focus: [\"#fff\", \"#3E6CD5\", \"#fff\"],\n not_pressed_hover_focus: [\"#fff\", \"#3E6CD5\", \"#fff\"],\n\n pressed: [\"#000\", \"#F1F1F1\"],\n pressed_hover: [\"#fff\", \"#6E91E0\"],\n pressed_focus: [\"#000\", \"#F1F1F1\", \"#fff\"],\n pressed_hover_focus: [\"#000\", \"#F1F1F1\", \"#fff\"],\n\n disabled: [\"#7D8088\", \"#E9EAEB\"],\n disabled_hover: [\"#7D8088\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: []\n },\n blue: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#000\", \"#fff\"],\n not_pressed_hover: [\"#fff\", \"#0e47cb\", \"#0000\"],\n not_pressed_focus: [\"#000\", \"#fff\", \"#0000\", \"#0E47CB\", \"#0000\", \"#fff\", \"0px\"],\n not_pressed_hover_focus: [\"#000\", \"#fff\", \"#0000\", \"#0E47CB\", \"#0000\", \"#fff\", \"0px\"],\n\n pressed: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n pressed_hover: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n pressed_focus: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\", \"#0e47cb\"],\n pressed_hover_focus: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\", \"#0e47cb\"],\n\n disabled: [\"#fff\", \"#7D8088\", \"#0000\", \"#E9EAEB\"],\n disabled_hover: [\"#fff\", \"#7D8088\", \"#0000\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: []\n }\n },\n information: {\n light: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#fff\", \"#0e47cb\"],\n not_pressed_hover: [\"#fff\", \"#3E6CD5\"],\n not_pressed_focus: [\"#fff\", \"#0e47cb\", \"#3E6CD5\"],\n not_pressed_hover_focus: [\"#fff\", \"#0e47cb\", \"#3E6CD5\"],\n\n pressed: [\"#fff\", \"#0B39A2\"],\n pressed_hover: [\"#fff\", \"#3E6CD5\"],\n pressed_focus: [\"#fff\", \"#0B39A2\", \"#3E6CD5\"],\n pressed_hover_focus: [\"#fff\", \"#0B39A2\", \"#3E6CD5\"],\n\n disabled: [\"#7D8088\", \"#E9EAEB\"],\n disabled_hover: [\"#7D8088\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n },\n dark: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#fff\", \"#3E6CD5\"],\n not_pressed_hover: [\"#fff\", \"#6E91E0\"],\n not_pressed_focus: [\"#fff\", \"#3E6CD5\", \"#fff\"],\n not_pressed_hover_focus: [\"#fff\", \"#3E6CD5\", \"#fff\"],\n\n pressed: [\"#000\", \"#F1F1F1\"],\n pressed_hover: [\"#fff\", \"#6E91E0\"],\n pressed_focus: [\"#000\", \"#F1F1F1\", \"#fff\"],\n pressed_hover_focus: [\"#000\", \"#F1F1F1\", \"#fff\"],\n\n disabled: [\"#7D8088\", \"#E9EAEB\"],\n disabled_hover: [\"#7D8088\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: []\n },\n blue: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#000\", \"#fff\"],\n not_pressed_hover: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n not_pressed_focus: [\"#0e47cb\", \"#fff\", \"\", \"#0E47CB\", \"\", \"#fff\", \"0px\"],\n not_pressed_hover_focus: [\"#0e47cb\", \"#fff\", \"\", \"#0E47CB\", \"\", \"#fff\", \"0px\"],\n\n pressed: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n pressed_hover: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\"],\n pressed_focus: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\", \"#0e47cb\"],\n pressed_hover_focus: [\"#fff\", \"#0e47cb\", \"#0000\", \"#fff\", \"#0e47cb\"],\n\n disabled: [\"#fff\", \"#7D8088\", \"#0000\", \"#E9EAEB\"],\n disabled_hover: [\"#fff\", \"#7D8088\", \"#0000\", \"#E9EAEB\"],\n disabled_focus: [],\n disabled_hover_focus: []\n }\n },\n buttongroup: {\n light: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"\", \"\", \"#fff\", \"\", \"#0e47cb\"],\n not_pressed_hover: [\"#262B38\", \"\", \"\", \"#E7EDFA\", \"\", \"#262B38\"],\n not_pressed_focus: [\"#0e47cb\", \"\", \"\", \"#fff\", \"#0e47cb\", \"#0e47cb\"],\n not_pressed_hover_focus: [\"#0e47cb\", \"\", \"\", \"#fff\", \"#0e47cb\", \"#0e47cb\"],\n\n pressed: [\"#fff\", \"\", \"\", \"#0e47cb\", \"\", \"#0e47cb\"],\n pressed_hover: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"#3E6CD5\"],\n pressed_focus: [\"#fff\", \"\", \"\", \"#0e47cb\", \"#fff\", \"#0e47cb\"],\n pressed_hover_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"#3E6CD5\"],\n\n disabled: [\"#7D8088\", \"\", \"\", \"\", \"\", \"#7D8088\"],\n disabled_hover: [\"#7D8088\", \"\", \"\", \"\", \"\", \"#7D8088\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n },\n dark: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"\", \"\", \"#fff\", \"\", \"#0e47cb\"],\n not_pressed_hover: [\"#262B38\", \"\", \"\", \"#E7EDFA\", \"\", \"#262B38\"],\n not_pressed_focus: [\"#0e47cb\", \"\", \"\", \"#fff\", \"#0e47cb\", \"#0e47cb\"],\n not_pressed_hover_focus: [\"#0e47cb\", \"\", \"\", \"#fff\", \"#0e47cb\", \"#0e47cb\"],\n\n pressed: [\"#fff\", \"\", \"\", \"#0e47cb\", \"\", \"#0e47cb\"],\n pressed_hover: [\"#000\", \"\", \"\", \"#CFDAF5\", \"\", \"#CFDAF5\"],\n pressed_focus: [\"#fff\", \"\", \"\", \"#0e47cb\", \"#fff\", \"#0e47cb\"],\n pressed_hover_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"\"],\n\n disabled: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7D8088\"],\n disabled_hover: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7D8088\"],\n disabled_focus: [],\n disabled_hover_focus: []\n },\n blue: { // iconColor backdropColor bdFrameColor backgroundColor innerFrameColor outerFrameColor outerFrameRx\n not_pressed: [\"#0e47cb\", \"\", \"\", \"#fff\", \"\", \"#0e47cb\"],\n not_pressed_hover: [\"#262B38\", \"\", \"\", \"#E7EDFA\", \"\", \"#262B38\"],\n not_pressed_focus: [\"#0e47cb\", \"\", \"\", \"#fff\", \"#0e47cb\", \"#0e47cb\"],\n not_pressed_hover_focus: [\"#0e47cb\", \"\", \"\", \"#fff\", \"#0e47cb\", \"#0e47cb\"],\n\n pressed: [\"#fff\", \"\", \"\", \"#0e47cb\", \"\", \"#0e47cb\"],\n pressed_hover: [\"#000\", \"\", \"\", \"#CFDAF5\", \"\", \"#CFDAF5\"],\n pressed_focus: [\"#fff\", \"\", \"\", \"#0e47cb\", \"#fff\", \"#0e47cb\"],\n pressed_hover_focus: [\"#fff\", \"\", \"\", \"#3E6CD5\", \"\", \"\"],\n\n disabled: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7D8088\"],\n disabled_hover: [\"#7D8088\", \"\", \"\", \"#E9EAEB\", \"\", \"#7D8088\"],\n disabled_focus: [],\n disabled_hover_focus: [],\n }\n }\n}\n\n\n\nfunction get(icon, bg, state) {\n let retVal=null\n\n const mapStateToText = {\n false: \"not_pressed\",\n true: \"pressed\",\n disabled: \"disabled\"\n }\n\n try {\n retVal = [\n designs[mapIconToDesign[icon]][bg][mapStateToText[state]],\n designs[mapIconToDesign[icon]][bg][mapStateToText[state]+\"_hover\"],\n designs[mapIconToDesign[icon]][bg][mapStateToText[state]+\"_focus\"],\n designs[mapIconToDesign[icon]][bg][mapStateToText[state]+\"_hover_focus\"]\n ]\n } catch (error) {\n console.error(\"ewc-icon-button: missing config for:\", icon, bg, state)\n } finally {\n return retVal\n }\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/cfg.js?\n}");
70
-
71
- /***/ }),
72
-
73
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/css.js":
74
- /*!**********************************************************!*\
75
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/css.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 */ \"default\": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n\n/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(w,h) {\n const t = document.createElement('style')\n t.innerHTML = get(w,h)\n return t\n}\n\n\n/*\nNote:\nOnly the host (the parent, ewc-icon-button) element is tab focusable, no inner element is.\nAll elements are hoverable technically - but only hover over the host element is considered.\n-> We set styles of child elements, depending on host-hover and host-focus.\n*/\n\nfunction get(w,h) {\n return `\n\n span {\n /*align-content: center;\n justify-content: center;*/\n }\n\n :host {\n /* Element nr. 1; see comment in cfg.js */\n --cfgIconColor: unset;\n --cfgIconColorHover: unset;\n --cfgIconColorFocus: unset;\n --cfgIconColorHoverFocus: unset;\n\n /* Element nr. 2 */\n --cfgBackdropColor: unset;\n --cfgBackdropColorHover: unset;\n --cfgBackdropColorFocus: unset;\n --cfgBackdropColorHoverFocus: unset;\n\n /* Element nr. 3 */\n --cfgBdFrameColor: unset;\n --cfgBdFrameColorHover: unset;\n --cfgBdFrameColorFocus: unset;\n --cfgBdFrameColorHoverFocus: unset;\n\n /* Element nr. 4 */\n --cfgBackgroundColor: unset;\n --cfgBackgroundColorHover: unset;\n --cfgBackgroundColorFocus: unset;\n --cfgBackgroundColorHoverFocus: unset;\n\n /* Element nr. 5 */\n --cfgInnerFrameColor: unset;\n --cfgInnerFrameColorHover: unset;\n --cfgInnerFrameColorFocus: unset;\n --cfgInnerFrameColorHoverFocus: unset;\n\n /* Element nr. 6 */\n --cfgOuterFrameColor: unset;\n --cfgOuterFrameColorHover: unset;\n --cfgOuterFrameColorFocus: unset;\n --cfgOuterFrameColorHoverFocus: unset;\n\n --cfgOuterFrameRx: unset;\n --cfgOuterFrameRxHover: unset;\n --cfgOuterFrameRxFocus: unset;\n --cfgOuterFrameRxHoverFocus: unset;\n\n --innerFrameWidth: 2px;\n# --outerFrameWidth: 2px;\n }\n\n\n /* the following CSS is sorted from the outermost element (host/parent) \n towards the innermost element (SVG primitives) */\n\n \n :host(:focus) {\n outline: unset;\n outline-offset: -4px;\n }\n\n\n #outerFrame {\n all: unset;\n background-color: var(--cfgBackgroundColor);\n cursor: pointer;\n border-radius: var(--cfgOuterFrameRx);\n outline: var(--outerFrameWidth) solid var(--cfgOuterFrameColor);\n outline-offset: 0px;\n }\n\n :host(:hover) #outerFrame {\n background-color: var(--cfgBackgroundColorHover);\n outline: var(--outerFrameWidth) solid var(--cfgOuterFrameColorHover);\n }\n\n :host(:focus) #outerFrame {\n background-color: var(--cfgBackgroundColorFocus);\n outline: var(--outerFrameWidth) solid var(--cfgOuterFrameColorFocus);\n }\n\n :host(:hover:focus) #outerFrame {\n background-color: var(--cfgBackgroundColorHoverFocus);\n outline: var(--outerFrameWidth) solid var(--cfgOuterFrameColorHoverFocus);\n }\n\n\n #innerFrame {\n width:100%;\n height:100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: #0000;\n border-radius: var(--cfgOuterFrameRx);\n outline: var(--innerFrameWidth) solid var(--cfgInnerFrameColor);\n outline-offset: -3px;\n }\n\n :host(:focus-within) #innerFrame {\n outline: var(--innerFrameWidth) solid var(--cfgInnerFrameColorFocus);\n }\n\n\n #backdrop {\n outline: var(--innerFrameWidth) solid var(--cfgBdFrameColor);\n outline-offset: 2px;\n\n background-color: var(--cfgBackdropColor);\n border-radius: 50%;\n\n width :${w}px;\n height:${h}px;\n }\n\n :host(:hover) #backdrop {\n background-color: var(--cfgBackdropColorHover);\n outline: var(--innerFrameWidth) solid var(--cfgBdFrameColorHover);\n }\n\n :host(:focus-within) #backdrop {\n background-color: var(--cfgBackdropColorFocus);\n outline: var(--innerFrameWidth) solid var(--cfgBdFrameColorFocus);\n }\n\n\n svg:focus {\n outline: unset;\n }\n\n :host(:hover) svg path {\n fill: var(--cfgIconColorHover);\n }\n :host(:focus) svg path {\n fill: var(--cfgIconColorFocus);\n }\n :host(:hover:focus) svg path {\n fill: var(--cfgIconColorHoverFocus);\n }\n\n #label {\n color: var(--cfgIconColor);\n }\n\n :host(:hover) #label {\n color: var(--cfgIconColorHover);\n }\n\n /* tooltip stuff */\n\n #container {\n position: relative; /* makes tooltip pos absolute relat. to this element, rather than the viewport */\n display:flex;\n }\n\n [role=\"tooltip\"] {\n display: block;\n visibility: hidden;\n width: 120px;\n color: #fff;\n text-align: center;\n padding: 6px 8px;\n margin-left: -60px;\n position: absolute;\n z-index: 1;\n bottom: 100%; \n left: 50%;\n opacity: 0;\n transition: opacity 0.15s;\n transition-delay: 0.3s;\n border: 1px solid #a8aaaf;\n background: #515560 0% 0% no-repeat padding-box;\n border: 1px solid #A8AAAF;\n border-radius: 4px;\n }\n\n [role=\"tooltip\"]::first-letter {\n text-transform: capitalize;\n }\n\n`}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/css.js?\n}");
80
-
81
- /***/ }),
82
-
83
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/element.js":
84
- /*!**************************************************************!*\
85
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/element.js ***!
86
- \**************************************************************/
87
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
88
-
89
- eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ Element: () => (/* binding */ Element)\n/* harmony export */ });\n/* harmony import */ var _markup_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./markup.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/markup.js\");\n/* harmony import */ var _css_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./css.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/css.js\");\n/* harmony import */ var _cfg_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./cfg.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/cfg.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 its 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\nFlow at init time\n - set all private class instance vars (value from attrib or default) in connectedCallback\n - apply look (from class vars)\n\t- populate shadow root (using class vars)\n\nFlow during runtime\n - set 1 class instance var in attributeChangedCallback\n - apply look\n\n*/\n\n\t\t// keep this file markup free\n\n\n\n\nclass Element extends HTMLElement {\n\n\t#isInitialised = false\n\t#icon\t\t\t= null\t\t\t\t\t// one of [close, lineChart, barChart, dotPlot, table, share, information, download, ...]\n\t#configId\t= null\t\t\t\t\t// is the same as #icon per default\n\t#size\t\t\t= null\t\t\t\t\t// icon size. valid CSS string.\n\t#state\t\t= null\t\t\t\t\t// tristate, one of [true,false,disabled]\n\t#bg\t\t\t\t= null\t\t\t\t\t// kind of background: \"dark\" or \"light\"\n\t#bd\t\t\t\t= null\t\t\t\t\t// backdrop shape (eg circle or square)\n\t#label\t\t= null\t\t\t\t\t// text right to the icon\n\t#tooltipText = null\n\n\n\tgetAttr(name, _default, toLower=true) {\n\t\tif(this.hasAttribute(name)) {\n\t\t\tif(toLower) {\n\t\t\t\treturn this.getAttribute(name).toLocaleLowerCase()\n\t\t\t} else {\n\t\t\t\treturn this.getAttribute(name)\n\t\t\t}\n\t\t} else {\n\t\t\treturn _default\n\t\t}\n\t}\n\t\n\tconstructor() {\t\n\t\tsuper()\t\n\t\tthis.attachShadow({mode: 'open'})\n\t}\n\n\n\tconnectedCallback() {\n\t\tthis.setAttribute(\"ewc-version\", \"3.0.0-alpha\")\t\t// please always keep in sync with version in package.json\n\n\t\tif(this.#isInitialised) {return}\n\n\t\tthis.#icon = this.getAttr(\"icon\", null)\n\t\tif(![\"close\", \"linechart\", \"barchart\", \"dotplot\", \"table\", \"star\", \"share\", \n\t\t\t\"information\", \"download\", \"calendar\", \"chevronleft\", \"chevronright\",\n\t\t\t\"squareshare\"].includes(this.#icon) )\n\t\t{\n\t\t\tconst err = \"ewc-icon-button: invalid icon specified: \" + this.#icon\n\t\t\tconsole.error(err)\n\t\t\tthrow new Error(err)\n\t\t}\n\n\t\tthis.#configId = this.getAttr(\"use-config\", this.#icon)\n\t\tthis.#size = this.getAttr(\"size\", 32)\n\t\tthis.#bg = this.getAttr(\"background\",\"light\").toLowerCase()\n\t\tthis.#label = this.getAttr(\"label\",\"\",false)\n\n\t\tconst stateFromAttrib = this.hasAttribute(\"state\") ? this.getAttribute(\"state\").toLocaleLowerCase() : \"false\"\n\t\tthis.#applyState(stateFromAttrib)\n\t\tthis.#isInitialised = true\n\t\tthis.#tryToApplyLook()\n\n\t\tthis.#installEventHandlers()\n\n\t\tconst w = this.#size\n\t\tconst h = this.#size\n\t\tthis.shadowRoot.appendChild(_markup_js__WEBPACK_IMPORTED_MODULE_0__.get(this.#icon, w, h, this.#label, this.getAttr(\"btn-aria-label\", \"button\", false)).cloneNode(true))\n\t\tthis.shadowRoot.appendChild((0,_css_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(w,h).cloneNode(true))\n\n\t\tif(this.#tooltipText === null) {\n\t\t\tthis.#tooltipText = this.getAttr(\"title\", this.#icon)\n\t\t}\n\t\tthis.removeAttribute(\"title\")\n\t\tthis.#setupTooltip()\n\t}\n\n\tstatic get observedAttributes() { return [\"icon\", \"background\", \"state\", \"size\", \"label\", \"use-config\", \"btn-aria-label\", \"title\"] }\n\n attributeChangedCallback(name, oldValue, newValue) {\n\t\tif(newValue===null) {return}\n\n\t\tconst newValueLower = newValue.toLowerCase()\n\n\t\tif(name===\"use-config\") {\n\t\t\tthis.#configId = newValueLower\n\t\t\tthis.#tryToApplyLook()\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(_markup_js__WEBPACK_IMPORTED_MODULE_0__.getIcon(newValueLower))}\n\n\t\t\tthis.#icon = newValueLower\n\t\t\tthis.#tryToApplyLook()\n\t\t}\n \tif(name === 'state') {\n\t\t\tthis.#applyState(newValueLower)\n\t\t\tthis.#tryToApplyLook()\n\t\t}\n \tif(name === 'background') {\n\t\t\tif([\"light\",\"dark\",\"blue\"].includes(newValueLower)) {\n\t\t\t\tthis.#bg = newValueLower\n\t\t\t\tthis.#tryToApplyLook()\n\t\t\t}\n\t\t}\n \tif(name === 'size') {\n\t\t\tthis.#size = newValueLower\n\t\t\tthis.#tryToApplyLook()\n\t\t}\n \tif(name === 'label') {\n\t\t\tthis.#label = newValue\n\t\t\tif(this.#isInitialised) {\n\t\t\t\tthis.shadowRoot.querySelector(\"span\").textContent = newValue\n\t\t\t}\n\t\t}\n \tif(name === 'btn-aria-label') {\n\t\t\tif(this.#isInitialised) {\n\t\t\t\tthis.shadowRoot.querySelector(\"button\").setAttribute(\"aria-label\", newValue)\n\t\t\t}\n\t\t}\n \tif(name === 'title') {\n\t\t\tthis.#tooltipText = newValue\n\t\t\tif(this.#isInitialised) {\n\t\t\t\tthis.#setupTooltip()\n\t\t\t}\n\t\t}\n }\n\n\t#applyState(newState) {\n\t\tif([\"true\",\"false\",\"disabled\"].includes(newState)) {\n\t\t\tthis.#state = newState\n\t\t} else {\n\t\t\tthis.#state = \"false\"\n\t\t}\n\t\tthis.setAttribute(\"aria-pressed\", this.#state===\"true\")\n\t\tthis.setAttribute(\"aria-disabled\", this.#state===\"disabled\"?\"true\":\"false\")\n\t\tthis.setAttribute(\"tabindex\", this.#state===\"disabled\"? -1 : 0)\n\t}\n\n\n\t#installEventHandlers() {\n\t\tthis.addEventListener(\"mousedown\", (ev) => {\n\t\t\tif(this.#state===\"disabled\") {\n\t\t\t\tev.target.blur()\n\t\t\t\tev.stopPropagation()\n\t\t\t\tev.preventDefault()\n\t\t\t}\n\t\t})\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// return true on success\n\t#tryToApplyLook() {\n\t\tif(!this.#isInitialised) {return false}\n\t\tif(this.#configId==null || this.#bg==null || this.#state==null) {return false}\n\t\t\n\t\tconst cfg = (0,_cfg_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(this.#configId, this.#bg, this.#state)\n\t\tif(cfg===null) {return false}\n\n\t\t// map nested arrays from cfg to CSS variables (\"custom properties\")\n\n\t\tconst cssVarsBase = [\"cfgIconColor\", \"cfgBackdropColor\", \"cfgBdFrameColor\", \"cfgBackgroundColor\", \"cfgInnerFrameColor\", \"cfgOuterFrameColor\", \"cfgOuterFrameRx\"]\n\t\tconst cssVarsPostfixes = [\"\",\"Hover\",\"Focus\",\"HoverFocus\"]\n\n\t\tfor(let j=0;j<cssVarsPostfixes.length;j++) {\n\t\t\tfor(let i=0;i<cssVarsBase.length;i++) {\n\t\t\t\tconst key = \"--\"+cssVarsBase[i]+cssVarsPostfixes[j]\n\t\t\t\tconst val = cfg[j][i]\n\t\t\t\tthis.style.setProperty(key,val)\n\t\t\t}\n\t\t}\n\n\t\treturn true\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 = !(String(this.state).toLowerCase() === 'true')\n\t\t}\n\t}\n\n\t#setupTooltip() {\n\t\tconst parent = this.shadowRoot.querySelector(\"#container\")\n\t\tconst el = this.shadowRoot.querySelector(\"[role='tooltip']\")\n\t\tel.textContent = this.#tooltipText\n\n\t\tparent.onmouseover = function() {\n\t\t\tel.style.visibility = \"visible\"\n\t\t\tel.style.opacity = \"1\"\n\t\t}\n\n\t\tparent.onmouseout = function() {\n\t\t\tel.style.visibility = \"hidden\"\n\t\t\tel.style.opacity = \"0\"\n\t\t}\n\n\t\tthis.onfocus = function() {\n\t\t\tel.style.visibility = \"visible\"\n\t\t\tel.style.opacity = \"1\"\n\t\t}\n\n\t\tthis.onblur = function() {\n\t\t\tel.style.visibility = \"hidden\"\n\t\t\tel.style.opacity = \"0\"\n\t\t}\n\n\t\tthis.addEventListener(\"keydown\", (e) => {\n\t\t\tif (e.key === \"Escape\") {\n\t\t\t\tel.style.visibility = \"hidden\"\n\t\t\t\tel.style.opacity = \"0\"\n\t\t\t}\n\t\t});\t\t\n\t}\n\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/element.js?\n}");
90
-
91
- /***/ }),
92
-
93
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/main.js":
94
- /*!***********************************************************!*\
95
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/main.js ***!
96
- \***********************************************************/
97
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
98
-
99
- eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _element_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./element.js */ \"./node_modules/@ewc-lib/ewc-icon-button/src/element.js\");\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_js__WEBPACK_IMPORTED_MODULE_0__.Element);\n}\n\n\n//# sourceURL=webpack://@ewc-lib/ewc-icon-button-group-example/./node_modules/@ewc-lib/ewc-icon-button/src/main.js?\n}");
100
-
101
- /***/ }),
102
-
103
- /***/ "./node_modules/@ewc-lib/ewc-icon-button/src/markup.js":
104
- /*!*************************************************************!*\
105
- !*** ./node_modules/@ewc-lib/ewc-icon-button/src/markup.js ***!
106
- \*************************************************************/
107
- /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
108
-
109
- 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, SVG as JS string\n*/\n\nfunction get(icon, iconWidth, iconHeight, label, ariaLabel) {\n if(!icons.hasOwnProperty(icon)) {\n const err = \"ewc-icon-button: no svg for icon: \" + icon\n console.error(err)\n }\n\n let html = `\n <div id=\"container\">\n <span id=\"tooltiptext\" role=\"tooltip\"></span>\n\n <button id=\"outerFrame\" part=\"button\" tabindex=\"-1\" aria-label=\"${ariaLabel}\">\n <div id=\"innerFrame\" part=\"button\">\n <div id=\"backdrop\">\n <svg width=\"${iconWidth}\" height=\"${iconHeight}\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer; pointer-events: auto;\">\n <circle id=\"ring\" cx=\"256\" cy=\"256\" r=\"336\" fill=\"none\" stroke=\"var(--cfgBdFrameColor)\" stroke-width=\"20px\"/>\n ${icons[icon]}\n </svg>\n </div>\n <span id=\"label\" part=\"label\">\n ${label?label:\"\"}\n </span>\n </div>\n </button>\n\n </div>\n `\n return getHtmlTemplate(html)\n}\n\n\n/* notes:\n- the attrib \"name\" is informative only.\n- svg primitives (ie path) must conform to the viewBox dimensions.\n*/\nconst icons = {\n\"information\":\n`<g\n transform=\"matrix(19.845613,0,0,19.845613,60.291081,60.291081)\">\n <g\n transform=\"translate(6,1)\">\n <path\n d=\"m 331,501 v -8 h -4 v 2 h 2 v 6 h -3 v 2 h 8 v -2 z\"\n transform=\"translate(-326,-487.001)\"\n fill=\"var(--cfgIconColor)\" />\n <path\n d=\"m 327.916,490.26 a 1.437,1.437 0 0 1 0.84,-0.26 1.5,1.5 0 0 1 1.5,1.5 1.5,1.5 0 0 1 -1.8,1.48 1.588,1.588 0 0 1 -0.76,-0.42 1.368,1.368 0 0 1 -0.42,-0.76 1.421,1.421 0 0 1 0.08,-0.86 1.562,1.562 0 0 1 0.56,-0.68 z\"\n transform=\"translate(-324.756,-490)\"\n fill=\"var(--cfgIconColor)\" />\n </g>\n </g>`,\n\n \"share\":\n`<path\n d=\"M320.9734 300.738a56.5412 56.5412 90 11-56.5412 56.5305 57.5309 57.5309 90 012.4902-15.3778l-83.4443-50.4327a56.4773 56.4773 90 11.4576-71.2378l83.2208-50.4327a60.3191 60.3191 90 1110.6421 19.9006l-83.4442 50.4327a54.5086 54.5086 90 012.2561 15.1543 52.6675 52.6675 90 01-2.4902 15.8247l83.2208 50.4326a56.488 56.488 90 0143.6324-21.0287z\"\n fill=\"var(--cfgIconColor)\"\n fill-rule=\"evenodd\"\n style=\"stroke-width:8.58986\" />\n`,\n\n\"squareshare\":\n`\n<!--rect id=\"frame\" x=\"10\" y=\"10\" width=\"492\" height=\"492\" rx=\"20\" fill=\"none\" stroke-width=\"20\" stroke=\"var(--cfgIconColor)\"></rect-->\n<path\n d=\"m335.9734 300.738a56.5412 56.5412 90 11-56.5412 56.5305 57.5309 57.5309 90 012.4902-15.3778l-83.4443-50.4327a56.4773 56.4773 90 11.4576-71.2378l83.2208-50.4327a60.3191 60.3191 90 1110.6421 19.9006l-83.4442 50.4327a54.5086 54.5086 90 012.2561 15.1543 52.6675 52.6675 90 01-2.4902 15.8247l83.2208 50.4326a56.488 56.488 90 0143.6324-21.0287z\"\n fill=\"var(--cfgIconColor)\"\n fill-rule=\"evenodd\"\n style=\"stroke-width:8.58986\" />\n`,\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(--cfgIconColor)\" 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(--cfgIconColor)\" stroke-width=\"0\"/>\n</g>`,\n\n\"dotplot\":\n`<g id=\"icon\" name=\"dotplot\" transform=\"scale(16, 16) translate(-746 -383)\">\n <g id=\"symbol\">\n <path fill=\"var(--cfgIconColor)\" fillRule=\"evenodd\" d=\"M432.689,210.054V207h-1.475v3.054a2.938,2.938,0,0,0,0,5.7v11.907h1.475V215.749a2.938,2.938,0,0,0,0-5.7Zm0,4.116a1.421,1.421,0,0,1-1.475,0,1.46,1.46,0,0,1,0-2.538,1.421,1.421,0,0,1,1.475,0,1.46,1.46,0,0,1,0,2.538Z\" transform=\"translate(322.963 181.107)\"/>\n <path fill=\"var(--cfgIconColor)\" fillRule=\"evenodd\" d=\"M442.689,218.907V207h-1.475v11.907a2.938,2.938,0,0,0,0,5.7v3.054h1.475V224.6a2.938,2.938,0,0,0,0-5.7Zm0,4.116a1.421,1.421,0,0,1-1.475,0,1.46,1.46,0,0,1,0-2.538,1.421,1.421,0,0,1,1.475,0,1.46,1.46,0,0,1,0,2.538Z\" transform=\"translate(327.718 181.107)\"/>\n <path fill=\"var(--cfgIconColor)\" fillRule=\"evenodd\" d=\"M437.689,207v7.48a2.938,2.938,0,0,1,0,5.7v7.48h-1.475v-7.48a2.938,2.938,0,0,1,0-5.7V207Zm-.738,11.8a1.425,1.425,0,0,0,.738-.207,1.46,1.46,0,0,0,0-2.538,1.421,1.421,0,0,0-1.475,0,1.46,1.46,0,0,0,0,2.538A1.425,1.425,0,0,0,436.951,218.8Z\" transform=\"translate(325.34 181.107)\"/>\n </g>\n</g>`,\n\n\"barchart\":\n`<g id=\"icon\" name=\"barchart\" transform=\"scale(18, 18) translate(7, 8)\">\n <path d=\"M1.861,14H14.027V12.726H1.861a.648.648,0,0,1-.586-.7V0H0V12.025A1.923,1.923,0,0,0,1.861,14\" transform=\"translate(0 0)\" fill=\"var(--cfgIconColor)\"/>\n <path d=\"M3.365,10.228a.637.637,0,0,1-.637-.637V4.88A.637.637,0,1,1,4,4.88V9.591a.637.637,0,0,1-.637.637\" transform=\"translate(0.747 1.162)\" fill=\"var(--cfgIconColor)\"/>\n <path d=\"M6.212,11.083a.637.637,0,0,1-.637-.637V1.759a.637.637,0,0,1,1.274,0v8.687a.637.637,0,0,1-.637.637\" transform=\"translate(1.527 0.307)\" fill=\"var(--cfgIconColor)\"/>\n <path d=\"M9.036,10.477A.637.637,0,0,1,8.4,9.84V3.97a.637.637,0,1,1,1.274,0V9.84a.637.637,0,0,1-.637.637\" transform=\"translate(2.3 0.913)\" fill=\"var(--cfgIconColor)\"/>\n</g>`,\n\n\"linechart\":\n`<g id=\"icon\" name=\"linechart\" transform=\"scale(18, 18) translate(7, 8)\">\n <path d=\"M1.861,14H14.027V12.726H1.861a.648.648,0,0,1-.586-.7V0H0V12.025A1.923,1.923,0,0,0,1.861,14\" transform=\"translate(0 0)\" fill=\"var(--cfgIconColor)\"/>\n <path d=\"M3.018,9.573a.636.636,0,0,1-.529-.991L5.074,4.724a.643.643,0,0,1,.634-.273l3.773.632,2.358-3.2a.636.636,0,1,1,1.024.755L10.275,6.153a.643.643,0,0,1-.618.251L5.9,5.775,3.548,9.291a.638.638,0,0,1-.53.283\" transform=\"translate(0.652 0.444)\" fill=\"var(--cfgIconColor)\"/>\n</g>`,\n\n\"close\":\n` <path\n d=\"m385.3 135.6-14.4-14.4-115.9 115.9-115.8-115.9-14.5 14.4 115.8 115.9-115.8 115.9 14.5 14.4 115.8-115.9 115.9 115.9 14.4-14.4-115.8-115.9z\"\n fill=\"var(--cfgIconColor)\"\n style=\"stroke-width:17.7386\" />`,\n\n\"calendar\":\n`<g id=\"icon\" name=\"calendar\" transform=\"translate(35 30) scale(9, 9)\">\n <path fill=\"var(--cfgIconColor)\" 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(--cfgIconColor)\"/>\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(--cfgIconColor)\" />\n<path d=\"M39 42V36H42V42C42 43.65 40.65 45 39 45H9C7.35 45 6 43.65 6 42V36H9V42H39Z\" fill-rule=\"evenodd\" fill=\"var(--cfgIconColor)\" />\n</g>`,\n\n\"table\":\n`<path\nd=\"M 380.70784,107.28233 H 128.31506 a 21.032731,21.032731 0 0 0 -21.03273,21.03273 v 252.39278 a 21.032731,21.032731 0 0 0 21.03273,21.03272 h 252.39278 a 21.032731,21.032731 0 0 0 21.03272,-21.03272 V 128.31506 a 21.032731,21.032731 0 0 0 -21.03272,-21.03273 m 0,72.05813 H 128.31506 v -51.0254 h 252.39278 z m -167.08403,85.68736 h 82.95309 v 47.91255 H 213.62381 Z M 296.5769,380.70784 H 213.62381 V 333.9731 h 82.95309 z m 0,-136.71276 h -82.95309 v -43.62189 h 82.95309 z m -103.94375,0 h -64.31809 v -43.62189 h 64.27602 z m 0,68.94529 h -64.31809 v -47.91255 h 64.27602 z m 124.97649,-47.91255 h 63.0982 v 47.91255 h -63.0982 z m 0,-64.65463 h 63.0982 v 43.62189 h -63.0982 z M 128.31506,333.9731 h 64.27602 v 46.73474 h -64.27602 z m 189.29458,0 h 63.0982 v 46.73474 h -63.0982 z\"\nfill=\"var(--cfgIconColor)\"\nstyle=\"stroke-width:21\" />`,\n\n\"chevronleft\":\n`<path data-name=\"Path 352\" d=\"m7 0 .94.91-6.12 6.08 6.14 6.1-.94.91-7.06-7.01z\" transform=\"scale(19 19) translate(8 7)\" \nfill=\"var(--cfgIconColor)\"\nstyle=\"stroke-width:21\" />`,\n\n\"chevronright\":\n`<path data-name=\"Path 352\" d=\"m1 14-.94-.91 6.12-6.08-6.14-6.1.94-.91 7.06 7.01z\" transform=\"scale(19 19) translate(10 7)\" \nfill=\"var(--cfgIconColor)\"\nstyle=\"stroke-width:21\" />`\n}\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/markup.js?\n}");
110
-
111
- /***/ }),
112
-
113
- /***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/@ewc-lib/ewc-css-common/custom-props.css":
114
- /*!*****************************************************************************************************!*\
115
- !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/@ewc-lib/ewc-css-common/custom-props.css ***!
116
- \*****************************************************************************************************/
117
- /***/ ((module, __webpack_exports__, __webpack_require__) => {
118
-
119
- 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\n}");
120
-
121
- /***/ }),
122
-
123
- /***/ "./node_modules/css-loader/dist/runtime/api.js":
124
- /*!*****************************************************!*\
125
- !*** ./node_modules/css-loader/dist/runtime/api.js ***!
126
- \*****************************************************/
127
- /***/ ((module) => {
128
-
129
- 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?\n}");
130
-
131
- /***/ }),
132
-
133
- /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
134
- /*!**************************************************************!*\
135
- !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
136
- \**************************************************************/
137
- /***/ ((module) => {
138
-
139
- 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?\n}");
140
-
141
- /***/ }),
142
-
143
- /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
144
- /*!****************************************************************************!*\
145
- !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
146
- \****************************************************************************/
147
- /***/ ((module) => {
148
-
149
- 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?\n}");
150
-
151
- /***/ }),
152
-
153
- /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
154
- /*!********************************************************************!*\
155
- !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
156
- \********************************************************************/
157
- /***/ ((module) => {
158
-
159
- 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?\n}");
160
-
161
- /***/ }),
162
-
163
- /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
164
- /*!**********************************************************************!*\
165
- !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
166
- \**********************************************************************/
167
- /***/ ((module) => {
168
-
169
- 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?\n}");
170
-
171
- /***/ }),
172
-
173
- /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
174
- /*!**********************************************************************************!*\
175
- !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
176
- \**********************************************************************************/
177
- /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
178
-
179
- 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?\n}");
180
-
181
- /***/ }),
182
-
183
- /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
184
- /*!***************************************************************!*\
185
- !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
186
- \***************************************************************/
187
- /***/ ((module) => {
188
-
189
- 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?\n}");
190
-
191
- /***/ }),
192
-
193
- /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
194
- /*!*********************************************************************!*\
195
- !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
196
- \*********************************************************************/
197
- /***/ ((module) => {
198
-
199
- 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?\n}");
200
-
201
- /***/ })
202
-
203
- /******/ });
204
- /************************************************************************/
205
- /******/ // The module cache
206
- /******/ var __webpack_module_cache__ = {};
207
- /******/
208
- /******/ // The require function
209
- /******/ function __webpack_require__(moduleId) {
210
- /******/ // Check if module is in cache
211
- /******/ var cachedModule = __webpack_module_cache__[moduleId];
212
- /******/ if (cachedModule !== undefined) {
213
- /******/ return cachedModule.exports;
214
- /******/ }
215
- /******/ // Create a new module (and put it into the cache)
216
- /******/ var module = __webpack_module_cache__[moduleId] = {
217
- /******/ id: moduleId,
218
- /******/ // no module.loaded needed
219
- /******/ exports: {}
220
- /******/ };
221
- /******/
222
- /******/ // Execute the module function
223
- /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
224
- /******/
225
- /******/ // Return the exports of the module
226
- /******/ return module.exports;
227
- /******/ }
228
- /******/
229
- /************************************************************************/
230
- /******/ /* webpack/runtime/compat get default export */
231
- /******/ (() => {
232
- /******/ // getDefaultExport function for compatibility with non-harmony modules
233
- /******/ __webpack_require__.n = (module) => {
234
- /******/ var getter = module && module.__esModule ?
235
- /******/ () => (module['default']) :
236
- /******/ () => (module);
237
- /******/ __webpack_require__.d(getter, { a: getter });
238
- /******/ return getter;
239
- /******/ };
240
- /******/ })();
241
- /******/
242
- /******/ /* webpack/runtime/define property getters */
243
- /******/ (() => {
244
- /******/ // define getter functions for harmony exports
245
- /******/ __webpack_require__.d = (exports, definition) => {
246
- /******/ for(var key in definition) {
247
- /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
248
- /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
249
- /******/ }
250
- /******/ }
251
- /******/ };
252
- /******/ })();
253
- /******/
254
- /******/ /* webpack/runtime/hasOwnProperty shorthand */
255
- /******/ (() => {
256
- /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
257
- /******/ })();
258
- /******/
259
- /******/ /* webpack/runtime/make namespace object */
260
- /******/ (() => {
261
- /******/ // define __esModule on exports
262
- /******/ __webpack_require__.r = (exports) => {
263
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
264
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
265
- /******/ }
266
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
267
- /******/ };
268
- /******/ })();
269
- /******/
270
- /******/ /* webpack/runtime/nonce */
271
- /******/ (() => {
272
- /******/ __webpack_require__.nc = undefined;
273
- /******/ })();
274
- /******/
275
- /************************************************************************/
276
- /******/
277
- /******/ // startup
278
- /******/ // Load entry module and return exports
279
- /******/ // This entry module can't be inlined because the eval devtool is used.
280
- /******/ var __webpack_exports__ = __webpack_require__("./main.js");
281
- /******/
282
- /******/ })()
283
- ;