@ewc-lib/ewc-icon-button-group 2.0.0-alpha → 2.0.1-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/readme.md
CHANGED
package/src/main.js
CHANGED
|
@@ -68,7 +68,7 @@ class Element extends HTMLElement {
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
connectedCallback() {
|
|
71
|
-
this.setAttribute("ewc-version", "2.0.
|
|
71
|
+
this.setAttribute("ewc-version", "2.0.1-alpha") // please always keep in sync with version in package.json
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
constructor() {
|
|
@@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
26
26
|
\*************************/
|
|
27
27
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
28
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\", \"
|
|
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\", \"2.0.0-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
30
|
|
|
31
31
|
/***/ }),
|
|
32
32
|
|
|
@@ -76,7 +76,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
76
76
|
\***********************************************************/
|
|
77
77
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
78
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(
|
|
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(16, 16) translate(-746 -383)\">\n <g id=\"symbol\">\n <path fill=\"var(--icon-color)\" 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(--icon-color)\" 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(--icon-color)\" 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(14, 14) translate(7, 9)\">\n <path id=\"symbol\" fill=\"var(--icon-color)\" d=\"M15.21,16.2h1.755a.629.629,0,0,0,.585-.585V9.472a.629.629,0,0,0-.585-.585H15.21a.629.629,0,0,0-.585.585v6.142a.629.629,0,0,0,.585.585Zm4.387,0h1.755a.629.629,0,0,0,.585-.585V5.085a.629.629,0,0,0-.585-.585H19.6a.629.629,0,0,0-.585.585v10.53a.629.629,0,0,0,.585.585Zm-13.162,0H8.19a.629.629,0,0,0,.585-.585V12.4a.629.629,0,0,0-.585-.585H6.435a.629.629,0,0,0-.585.585v3.217a.629.629,0,0,0,.585.585Zm4.387,0h1.755a.629.629,0,0,0,.585-.585V6.547a.629.629,0,0,0-.585-.585H10.822a.629.629,0,0,0-.585.585v9.067A.629.629,0,0,0,10.822,16.2Zm11.846,2.925H2.925V5.231A.731.731,0,0,0,2.194,4.5H.731A.731.731,0,0,0,0,5.231V20.587A1.463,1.463,0,0,0,1.462,22.05H22.668a.731.731,0,0,0,.731-.731V19.856A.731.731,0,0,0,22.668,19.125Z\" transform=\"translate(0 -4.5)\"/>\n</g>`,\n\n\"linechart\":\n`<g id=\"icon\" name=\"linechart\" transform=\"scale(14, 14) translate(7, 9)\">\n <path fill=\"var(--icon-color)\" id=\"Icon_awesome-chart-line\" data-name=\"Icon awesome-chart-line\" d=\"M22.668,19.125H2.925V5.231A.731.731,0,0,0,2.194,4.5H.731A.731.731,0,0,0,0,5.231V20.587A1.463,1.463,0,0,0,1.462,22.05H22.668a.731.731,0,0,0,.731-.731V19.856A.731.731,0,0,0,22.668,19.125ZM21.206,5.962h-5.4a1.1,1.1,0,0,0-.776,1.872l1.481,1.481-3.353,3.354L9.809,9.316a1.462,1.462,0,0,0-2.068,0L4.6,12.455a.731.731,0,0,0,0,1.034l1.034,1.034a.731.731,0,0,0,1.034,0l2.105-2.106,3.353,3.353a1.462,1.462,0,0,0,2.068,0l4.387-4.387,1.481,1.481a1.1,1.1,0,0,0,1.872-.776v-5.4A.73.73,0,0,0,21.206,5.962Z\" transform=\"translate(0 -4.5)\"/>\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 id=\"icon\" transform=\"scale(16 16) translate(-1409 -348)\">\n <line stroke=\"var(--icon-color)\" stroke-linecap=\"round\" stroke-width=\"3px\" x2=\"20\" transform=\"translate(1414.5 356.5)\"/>\n <line stroke=\"var(--icon-color)\" stroke-linecap=\"round\" y2=\"15\" transform=\"translate(1420.5 356.5)\"/>\n <line stroke=\"var(--icon-color)\" stroke-linecap=\"round\" y2=\"14\" transform=\"translate(1428.5 357.5)\"/>\n <line stroke=\"var(--icon-color)\" stroke-linecap=\"round\" x2=\"20\" transform=\"translate(1414.5 362)\"/>\n <line stroke=\"var(--icon-color)\" stroke-linecap=\"round\" x2=\"20\" transform=\"translate(1414.5 367)\"/>\n <line stroke=\"var(--icon-color)\" stroke-linecap=\"round\" x2=\"20\" transform=\"translate(1414.5 371.5)\"/>\n</g>`\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
80
|
|
|
81
81
|
/***/ }),
|
|
82
82
|
|
|
@@ -86,7 +86,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
86
86
|
\***********************************************************/
|
|
87
87
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
88
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\", \"
|
|
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\", \"2.0.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
90
|
|
|
91
91
|
/***/ }),
|
|
92
92
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"version": "0.0.1",
|
|
10
10
|
"license": "EUPL v.1.1",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@ewc-lib/ewc-icon-button": "
|
|
12
|
+
"@ewc-lib/ewc-icon-button": "2.0.0-alpha",
|
|
13
13
|
"@ewc-lib/ewc-icon-button-group": "file:../../"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
},
|
|
27
27
|
"../..": {
|
|
28
28
|
"name": "@ewc-lib/ewc-icon-button-group",
|
|
29
|
-
"version": "
|
|
29
|
+
"version": "2.0.0-alpha",
|
|
30
30
|
"license": "EUPL v.1.1",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@ewc-lib/ewc-icon-button": "
|
|
32
|
+
"@ewc-lib/ewc-icon-button": "2.0.0-alpha"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@ewc-lib/ewc-css-common": "0.1.0"
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"peer": true
|
|
54
54
|
},
|
|
55
55
|
"node_modules/@ewc-lib/ewc-icon-button": {
|
|
56
|
-
"version": "
|
|
57
|
-
"resolved": "https://registry.npmjs.org/@ewc-lib/ewc-icon-button/-/ewc-icon-button-
|
|
58
|
-
"integrity": "sha512-
|
|
56
|
+
"version": "2.0.0-alpha",
|
|
57
|
+
"resolved": "https://registry.npmjs.org/@ewc-lib/ewc-icon-button/-/ewc-icon-button-2.0.0-alpha.tgz",
|
|
58
|
+
"integrity": "sha512-ak9bsP6Y4rc6dFHpQWsZACg2X2j/VsJez2bTjjk9Jbs+vQxvCNg9fk8mer66aRKu2OFZ3MFAjnDDaNy6upt3Ug==",
|
|
59
59
|
"license": "EUPL v.1.1",
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"@ewc-lib/ewc-css-common": "0.1.0"
|