@pictogrammers/components 0.3.1

package/dist/pgInputCheck.js

@@ -0,0 +1,116 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/@pictogrammers/element/dist/element.esm.js":
+/*!*****************************************************************!*\
+  !*** ./node_modules/@pictogrammers/element/dist/element.esm.js ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Component\": () => (/* binding */ Component),\n/* harmony export */   \"Local\": () => (/* binding */ Local),\n/* harmony export */   \"Part\": () => (/* binding */ Part),\n/* harmony export */   \"Prop\": () => (/* binding */ Prop),\n/* harmony export */   \"TransmutePart\": () => (/* binding */ TransmutePart),\n/* harmony export */   \"getAttributes\": () => (/* binding */ getAttributes),\n/* harmony export */   \"node\": () => (/* binding */ node),\n/* harmony export */   \"selectComponent\": () => (/* binding */ selectComponent),\n/* harmony export */   \"selectPart\": () => (/* binding */ selectPart)\n/* harmony export */ });\nvar init = Symbol('init');\r\nvar template = Symbol('template');\r\nvar style = Symbol('style');\r\nvar parent = Symbol('parent');\r\nfunction extendTemplate(base, append) {\r\n    if (append && append.match(/<parent\\/>/)) {\r\n        return append.replace(/<parent\\/>/, base);\r\n    }\r\n    else {\r\n        return \"\".concat(base).concat(append || '');\r\n    }\r\n}\r\nfunction camelToDash(str) {\r\n    return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();\r\n}\r\nfunction dashToCamel(str) {\r\n    return str.replace(/-([a-z])/g, function (m) { return m[1].toUpperCase(); });\r\n}\r\nfunction Component(config) {\r\n    if (config === void 0) { config = {}; }\r\n    return function (cls) {\r\n        if (cls.prototype[parent]) {\r\n            cls.prototype[parent].push(cls.prototype);\r\n            cls.prototype[style] = \"\".concat(cls.prototype[style]).concat(config.style);\r\n            cls.prototype[template] = extendTemplate(cls.prototype[template], config.template || null);\r\n        }\r\n        else {\r\n            cls.prototype[parent] = [cls.prototype];\r\n            cls.prototype[style] = config.style || '';\r\n            cls.prototype[template] = config.template || '';\r\n        }\r\n        if (!cls.symbols) {\r\n            cls.symbols = {};\r\n        }\r\n        var connectedCallback = cls.prototype.connectedCallback || (function () { });\r\n        var disconnectedCallback = cls.prototype.disconnectedCallback || (function () { });\r\n        cls.prototype.connectedCallback = function () {\r\n            var _this = this;\r\n            if (!this[init] && !config.template) {\r\n                if (config.useShadow === false) {\r\n                    // Base class with no template\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' });\r\n                }\r\n            }\r\n            else if (!this[init] && config.template) {\r\n                var $template = document.createElement('template');\r\n                $template.innerHTML = \"\".concat(cls.prototype[template], \"<style>\").concat(cls.prototype[style], \"</style>\");\r\n                var $node = document.importNode($template.content, true);\r\n                if (config.useShadow === false) {\r\n                    this.appendChild($node);\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' }).appendChild($node);\r\n                }\r\n            }\r\n            else if (this[init] && config.style) {\r\n                /*if (this.shadowRoot) {\r\n                  const style = document.createElement('style');\r\n                  style.appendChild(document.createTextNode(config.style));\r\n                  this.appendChild(style);\r\n                }*/\r\n                // } else if (this[init] && config.template) {\r\n                // This is allowed now via <parent/>\r\n                // throw new Error('template from base class cannot be overriden. Fix: remove template from @Component');\r\n            }\r\n            else if (this[init] && !config.template) {\r\n                throw new Error('You need to pass a template for an extended element.');\r\n            }\r\n            if (this.componentWillMount) {\r\n                this.componentWillMount();\r\n            }\r\n            this[parent].map(function (p) {\r\n                if (p.render) {\r\n                    p.render.call(_this, cls.observedAttributes\r\n                        ? cls.observedAttributes.reduce(function (a, c) {\r\n                            var n = dashToCamel(c);\r\n                            a[n] = true;\r\n                            return a;\r\n                        }, {})\r\n                        : {});\r\n                }\r\n            });\r\n            this[init] = true;\r\n            connectedCallback.call(this);\r\n            if (this.componentDidMount) {\r\n                this.componentDidMount();\r\n            }\r\n        };\r\n        cls.prototype.disconnectedCallback = function () {\r\n            if (this.componentWillUnmount) {\r\n                this.componentWillUnmount();\r\n            }\r\n            disconnectedCallback.call(this);\r\n            if (this.componentDidUnmount) {\r\n                this.componentDidUnmount();\r\n            }\r\n        };\r\n        cls.prototype.attributeChangedCallback = function (name, oldValue, newValue) {\r\n            var normalizedName = dashToCamel(name);\r\n            this[normalizedName] = newValue;\r\n        };\r\n        if (config.selector && !window.customElements.get(config.selector)) {\r\n            window.customElements.define(config.selector, cls);\r\n        }\r\n    };\r\n}\r\nvar transmute = Symbol('transmute');\r\nfunction TransmutePart(part, selector) {\r\n    return function (cls) {\r\n        var _a;\r\n        if (cls.prototype[transmute]) {\r\n            cls.prototype[transmute][part] = selector;\r\n        }\r\n        else {\r\n            cls.prototype[transmute] = (_a = {}, _a[part] = selector, _a);\r\n        }\r\n    };\r\n}\r\nfunction Prop() {\r\n    return function (target, propertyKey, descriptor) {\r\n        var constructor = target.constructor;\r\n        if (!constructor.observedAttributes) {\r\n            constructor.observedAttributes = [];\r\n        }\r\n        var observedAttributes = constructor.observedAttributes;\r\n        if (!constructor.symbols) {\r\n            constructor.symbols = {};\r\n        }\r\n        var symbols = constructor.symbols;\r\n        var normalizedPropertyKey = camelToDash(propertyKey);\r\n        constructor.observedAttributes = observedAttributes.concat([normalizedPropertyKey]);\r\n        var symbol = Symbol(propertyKey);\r\n        symbols[propertyKey] = symbol;\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                return this[symbol];\r\n            },\r\n            set: function (value) {\r\n                var _this = this;\r\n                this[symbol] = value;\r\n                if (this[init]) {\r\n                    this[parent].map(function (p) {\r\n                        var _a;\r\n                        if (p.render) {\r\n                            p.render.call(_this, (_a = {}, _a[propertyKey] = true, _a));\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Part() {\r\n    return function (target, propertyKey, descriptor) {\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var _a;\r\n                var key = propertyKey.replace(/^\\$/, '');\r\n                return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\"[part~=\".concat(key, \"]\"));\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Local(initialValue, key) {\r\n    if (initialValue === void 0) { initialValue = null; }\r\n    return function (target, propertyKey, descriptor) {\r\n        var getKey = function (self) {\r\n            return (key ? key : \"\".concat(self.constructor.name, \":\").concat(propertyKey));\r\n        };\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var k = getKey(this);\r\n                return window.localStorage.getItem(k) || initialValue;\r\n            },\r\n            set: function (value) {\r\n                var k = getKey(this);\r\n                if (value === null) {\r\n                    window.localStorage.removeItem(k);\r\n                }\r\n                else {\r\n                    window.localStorage.setItem(k, value);\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction node(template, init) {\r\n    var $template = document.createElement('template');\r\n    $template.innerHTML = template;\r\n    var $node = document.importNode($template.content, true);\r\n    for (var _i = 0, _a = Object.entries(init); _i < _a.length; _i++) {\r\n        var _b = _a[_i], part = _b[0], attributes = _b[1];\r\n        var $part = $node.querySelector(\"[part~=\\\"\".concat(part, \"\\\"]\"));\r\n        if ($part) {\r\n            for (var _c = 0, _d = Object.entries(attributes); _c < _d.length; _c++) {\r\n                var _e = _d[_c], prop = _e[0], value = _e[1];\r\n                if (value instanceof Function) {\r\n                    var val = value();\r\n                    if (val === null) {\r\n                        $part.removeAttribute(prop);\r\n                    }\r\n                    else {\r\n                        $part.setAttribute(prop, value());\r\n                    }\r\n                }\r\n                else {\r\n                    $part[prop] = value;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    return $node;\r\n}\r\n// JEST\r\nfunction selectComponent(tag) {\r\n    return document.querySelector(tag);\r\n}\r\nfunction selectPart(component, name) {\r\n    return component.shadowRoot.querySelector(\"[part=\".concat(name, \"]\"));\r\n}\r\nfunction getAttributes(tag) {\r\n    var symbols = customElements.get(tag).symbols;\r\n    return Object.keys(symbols);\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./node_modules/@pictogrammers/element/dist/element.esm.js?");
+
+/***/ }),
+
+/***/ "./src/pg/inputCheck/inputCheck.css":
+/*!******************************************!*\
+  !*** ./src/pg/inputCheck/inputCheck.css ***!
+  \******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\":host {\\r\\n  display: inline-flex;\\r\\n}\\r\\n\\r\\n.blank {\\r\\n  color: var(--pg-input-check-blank-color, #453C4F);\\r\\n}\\r\\n.blank [part=\\\"check\\\"] {\\r\\n  visibility: hidden;\\r\\n}\\r\\n\\r\\n.checked {\\r\\n  color: var(--pg-input-check-checked-color, #453C4F);\\r\\n}\\r\\n\\r\\n[part=\\\"button\\\"] {\\r\\n  display: flex;\\r\\n  padding: 0;\\r\\n  border: 0;\\r\\n  outline: 0;\\r\\n  border-radius: 0.25rem;\\r\\n  background: transparent;\\r\\n}\\r\\n\\r\\n[part=\\\"svg\\\"] {\\r\\n  width: var(--pg-icon-check-size, 1.5rem);\\r\\n  height: var(--pg-icon-check-size, 1.5rem);\\r\\n}\\r\\n\\r\\n[part=\\\"button\\\"]:not(:hover):active {\\r\\n  box-shadow: 0 0 0 3px var(--pg-input-check-active-glow, rgb(79, 143, 249, 0.6));\\r\\n}\\r\\n[part=\\\"button\\\"]:not(:hover):focus:not(:focus-visible) {\\r\\n  box-shadow: none;\\r\\n}\\r\\n[part=\\\"button\\\"]:not(:hover):focus {\\r\\n  box-shadow: 0 0 0 3px var(--pg-input-check-focus-glow, rgb(79, 143, 249, 0.5));\\r\\n}\\r\\n[part=\\\"button\\\"]:not(:disabled):hover [part=\\\"path\\\"] {\\r\\n  fill: #4f8ff9;\\r\\n}\\r\\n\\r\\n[part=\\\"button\\\"]:disabled {\\r\\n  color: #AAA;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputCheck/inputCheck.css?");
+
+/***/ }),
+
+/***/ "./src/pg/inputCheck/inputCheck.html":
+/*!*******************************************!*\
+  !*** ./src/pg/inputCheck/inputCheck.html ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"<button part=\\\"button\\\">\\r\\n  <svg part=\\\"svg\\\" viewBox=\\\"0 0 24 24\\\">\\r\\n    <path part=\\\"path\\\" fill=\\\"currentColor\\\" d=\\\"M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19\\\"/>\\r\\n\\t  <path part=\\\"check\\\" fill=\\\"currentColor\\\" d=\\\"M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z\\\"/>\\r\\n  </svg>\\r\\n</button>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputCheck/inputCheck.html?");
+
+/***/ }),
+
+/***/ "./src/pg/inputCheck/inputCheck.ts":
+/*!*****************************************!*\
+  !*** ./src/pg/inputCheck/inputCheck.ts ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 _pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @pictogrammers/element */ \"./node_modules/@pictogrammers/element/dist/element.esm.js\");\n/* harmony import */ var _inputCheck_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputCheck.html */ \"./src/pg/inputCheck/inputCheck.html\");\n/* harmony import */ var _inputCheck_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputCheck.css */ \"./src/pg/inputCheck/inputCheck.css\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\n\r\nconst PATH_BLANK = 'M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z';\r\nconst PATH_CHECKED = 'M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19';\r\nlet PgInputCheck = class PgInputCheck extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.value = false;\r\n        this.disabled = false;\r\n    }\r\n    connectedCallback() {\r\n        this.$button.addEventListener('click', this.handleClick.bind(this));\r\n    }\r\n    handleClick() {\r\n        const value = [true, 'true'].includes(this.value);\r\n        this.value = !value;\r\n        this.dispatchEvent(new CustomEvent('change'));\r\n    }\r\n    render(changes) {\r\n        if (changes.value) {\r\n            const value = [true, 'true'].includes(this.value);\r\n            this.$path.setAttribute('d', value ? PATH_CHECKED : PATH_BLANK);\r\n            this.$button.classList.toggle('blank', !value);\r\n            this.$button.classList.toggle('checked', value);\r\n        }\r\n        if (changes.disabled) {\r\n            this.$button.disabled = ['', true, 'true'].includes(this.disabled);\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputCheck.prototype, \"value\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputCheck.prototype, \"disabled\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputCheck.prototype, \"$button\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputCheck.prototype, \"$path\", void 0);\r\nPgInputCheck = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-input-check',\r\n        style: _inputCheck_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _inputCheck_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgInputCheck);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgInputCheck);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputCheck/inputCheck.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/pg/inputCheck/inputCheck.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgInputCheckList.js

@@ -0,0 +1,126 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/@pictogrammers/element/dist/element.esm.js":
+/*!*****************************************************************!*\
+  !*** ./node_modules/@pictogrammers/element/dist/element.esm.js ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Component\": () => (/* binding */ Component),\n/* harmony export */   \"Local\": () => (/* binding */ Local),\n/* harmony export */   \"Part\": () => (/* binding */ Part),\n/* harmony export */   \"Prop\": () => (/* binding */ Prop),\n/* harmony export */   \"TransmutePart\": () => (/* binding */ TransmutePart),\n/* harmony export */   \"getAttributes\": () => (/* binding */ getAttributes),\n/* harmony export */   \"node\": () => (/* binding */ node),\n/* harmony export */   \"selectComponent\": () => (/* binding */ selectComponent),\n/* harmony export */   \"selectPart\": () => (/* binding */ selectPart)\n/* harmony export */ });\nvar init = Symbol('init');\r\nvar template = Symbol('template');\r\nvar style = Symbol('style');\r\nvar parent = Symbol('parent');\r\nfunction extendTemplate(base, append) {\r\n    if (append && append.match(/<parent\\/>/)) {\r\n        return append.replace(/<parent\\/>/, base);\r\n    }\r\n    else {\r\n        return \"\".concat(base).concat(append || '');\r\n    }\r\n}\r\nfunction camelToDash(str) {\r\n    return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();\r\n}\r\nfunction dashToCamel(str) {\r\n    return str.replace(/-([a-z])/g, function (m) { return m[1].toUpperCase(); });\r\n}\r\nfunction Component(config) {\r\n    if (config === void 0) { config = {}; }\r\n    return function (cls) {\r\n        if (cls.prototype[parent]) {\r\n            cls.prototype[parent].push(cls.prototype);\r\n            cls.prototype[style] = \"\".concat(cls.prototype[style]).concat(config.style);\r\n            cls.prototype[template] = extendTemplate(cls.prototype[template], config.template || null);\r\n        }\r\n        else {\r\n            cls.prototype[parent] = [cls.prototype];\r\n            cls.prototype[style] = config.style || '';\r\n            cls.prototype[template] = config.template || '';\r\n        }\r\n        if (!cls.symbols) {\r\n            cls.symbols = {};\r\n        }\r\n        var connectedCallback = cls.prototype.connectedCallback || (function () { });\r\n        var disconnectedCallback = cls.prototype.disconnectedCallback || (function () { });\r\n        cls.prototype.connectedCallback = function () {\r\n            var _this = this;\r\n            if (!this[init] && !config.template) {\r\n                if (config.useShadow === false) {\r\n                    // Base class with no template\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' });\r\n                }\r\n            }\r\n            else if (!this[init] && config.template) {\r\n                var $template = document.createElement('template');\r\n                $template.innerHTML = \"\".concat(cls.prototype[template], \"<style>\").concat(cls.prototype[style], \"</style>\");\r\n                var $node = document.importNode($template.content, true);\r\n                if (config.useShadow === false) {\r\n                    this.appendChild($node);\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' }).appendChild($node);\r\n                }\r\n            }\r\n            else if (this[init] && config.style) {\r\n                /*if (this.shadowRoot) {\r\n                  const style = document.createElement('style');\r\n                  style.appendChild(document.createTextNode(config.style));\r\n                  this.appendChild(style);\r\n                }*/\r\n                // } else if (this[init] && config.template) {\r\n                // This is allowed now via <parent/>\r\n                // throw new Error('template from base class cannot be overriden. Fix: remove template from @Component');\r\n            }\r\n            else if (this[init] && !config.template) {\r\n                throw new Error('You need to pass a template for an extended element.');\r\n            }\r\n            if (this.componentWillMount) {\r\n                this.componentWillMount();\r\n            }\r\n            this[parent].map(function (p) {\r\n                if (p.render) {\r\n                    p.render.call(_this, cls.observedAttributes\r\n                        ? cls.observedAttributes.reduce(function (a, c) {\r\n                            var n = dashToCamel(c);\r\n                            a[n] = true;\r\n                            return a;\r\n                        }, {})\r\n                        : {});\r\n                }\r\n            });\r\n            this[init] = true;\r\n            connectedCallback.call(this);\r\n            if (this.componentDidMount) {\r\n                this.componentDidMount();\r\n            }\r\n        };\r\n        cls.prototype.disconnectedCallback = function () {\r\n            if (this.componentWillUnmount) {\r\n                this.componentWillUnmount();\r\n            }\r\n            disconnectedCallback.call(this);\r\n            if (this.componentDidUnmount) {\r\n                this.componentDidUnmount();\r\n            }\r\n        };\r\n        cls.prototype.attributeChangedCallback = function (name, oldValue, newValue) {\r\n            var normalizedName = dashToCamel(name);\r\n            this[normalizedName] = newValue;\r\n        };\r\n        if (config.selector && !window.customElements.get(config.selector)) {\r\n            window.customElements.define(config.selector, cls);\r\n        }\r\n    };\r\n}\r\nvar transmute = Symbol('transmute');\r\nfunction TransmutePart(part, selector) {\r\n    return function (cls) {\r\n        var _a;\r\n        if (cls.prototype[transmute]) {\r\n            cls.prototype[transmute][part] = selector;\r\n        }\r\n        else {\r\n            cls.prototype[transmute] = (_a = {}, _a[part] = selector, _a);\r\n        }\r\n    };\r\n}\r\nfunction Prop() {\r\n    return function (target, propertyKey, descriptor) {\r\n        var constructor = target.constructor;\r\n        if (!constructor.observedAttributes) {\r\n            constructor.observedAttributes = [];\r\n        }\r\n        var observedAttributes = constructor.observedAttributes;\r\n        if (!constructor.symbols) {\r\n            constructor.symbols = {};\r\n        }\r\n        var symbols = constructor.symbols;\r\n        var normalizedPropertyKey = camelToDash(propertyKey);\r\n        constructor.observedAttributes = observedAttributes.concat([normalizedPropertyKey]);\r\n        var symbol = Symbol(propertyKey);\r\n        symbols[propertyKey] = symbol;\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                return this[symbol];\r\n            },\r\n            set: function (value) {\r\n                var _this = this;\r\n                this[symbol] = value;\r\n                if (this[init]) {\r\n                    this[parent].map(function (p) {\r\n                        var _a;\r\n                        if (p.render) {\r\n                            p.render.call(_this, (_a = {}, _a[propertyKey] = true, _a));\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Part() {\r\n    return function (target, propertyKey, descriptor) {\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var _a;\r\n                var key = propertyKey.replace(/^\\$/, '');\r\n                return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\"[part~=\".concat(key, \"]\"));\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Local(initialValue, key) {\r\n    if (initialValue === void 0) { initialValue = null; }\r\n    return function (target, propertyKey, descriptor) {\r\n        var getKey = function (self) {\r\n            return (key ? key : \"\".concat(self.constructor.name, \":\").concat(propertyKey));\r\n        };\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var k = getKey(this);\r\n                return window.localStorage.getItem(k) || initialValue;\r\n            },\r\n            set: function (value) {\r\n                var k = getKey(this);\r\n                if (value === null) {\r\n                    window.localStorage.removeItem(k);\r\n                }\r\n                else {\r\n                    window.localStorage.setItem(k, value);\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction node(template, init) {\r\n    var $template = document.createElement('template');\r\n    $template.innerHTML = template;\r\n    var $node = document.importNode($template.content, true);\r\n    for (var _i = 0, _a = Object.entries(init); _i < _a.length; _i++) {\r\n        var _b = _a[_i], part = _b[0], attributes = _b[1];\r\n        var $part = $node.querySelector(\"[part~=\\\"\".concat(part, \"\\\"]\"));\r\n        if ($part) {\r\n            for (var _c = 0, _d = Object.entries(attributes); _c < _d.length; _c++) {\r\n                var _e = _d[_c], prop = _e[0], value = _e[1];\r\n                if (value instanceof Function) {\r\n                    var val = value();\r\n                    if (val === null) {\r\n                        $part.removeAttribute(prop);\r\n                    }\r\n                    else {\r\n                        $part.setAttribute(prop, value());\r\n                    }\r\n                }\r\n                else {\r\n                    $part[prop] = value;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    return $node;\r\n}\r\n// JEST\r\nfunction selectComponent(tag) {\r\n    return document.querySelector(tag);\r\n}\r\nfunction selectPart(component, name) {\r\n    return component.shadowRoot.querySelector(\"[part=\".concat(name, \"]\"));\r\n}\r\nfunction getAttributes(tag) {\r\n    var symbols = customElements.get(tag).symbols;\r\n    return Object.keys(symbols);\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./node_modules/@pictogrammers/element/dist/element.esm.js?");
+
+/***/ }),
+
+/***/ "./src/pg/inputCheckList/inputCheckList.css":
+/*!**************************************************!*\
+  !*** ./src/pg/inputCheckList/inputCheckList.css ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\":host {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n}\\r\\n\\r\\n.blank {\\r\\n  color: var(--pg-input-check-blank-color, #453C4F);\\r\\n}\\r\\n.blank [part=\\\"check\\\"] {\\r\\n  visibility: hidden;\\r\\n}\\r\\n\\r\\n.checked {\\r\\n  color: var(--pg-input-check-checked-color, #453C4F);\\r\\n}\\r\\n\\r\\n[part=\\\"list\\\"] {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  list-style: none;\\r\\n  margin: 0;\\r\\n  padding: 0.25rem 0;\\r\\n}\\r\\n\\r\\n[part=\\\"list\\\"] li {\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n}\\r\\n\\r\\n[part=\\\"list\\\"] li:not(:last-child) {\\r\\n  margin-bottom: 0.25rem;\\r\\n}\\r\\n\\r\\n[part=\\\"list\\\"] button {\\r\\n  display: flex;\\r\\n  padding: 0;\\r\\n  border: 0;\\r\\n  outline: 0;\\r\\n  border-radius: 0.25rem;\\r\\n  align-items: center;\\r\\n  background: transparent;\\r\\n}\\r\\n\\r\\n[part=\\\"svg\\\"] {\\r\\n  width: var(--pg-icon-check-size, 1.5rem);\\r\\n  height: var(--pg-icon-check-size, 1.5rem);\\r\\n}\\r\\n\\r\\n[part=\\\"list\\\"] button span {\\r\\n  margin-left: 0.25rem;\\r\\n}\\r\\n\\r\\n[part=\\\"list\\\"] button:not(:hover):active {\\r\\n  box-shadow: 0 0 0 3px var(--pg-input-check-active-glow, rgb(79, 143, 249, 0.6));\\r\\n}\\r\\n[part=\\\"list\\\"] button:not(:hover):focus:not(:focus-visible) {\\r\\n  box-shadow: none;\\r\\n}\\r\\n[part=\\\"list\\\"] button:not(:hover):focus-visible {\\r\\n  box-shadow: 0 0 0 3px var(--pg-input-check-focus-glow, rgb(79, 143, 249, 0.5));\\r\\n}\\r\\n[part=\\\"list\\\"] button:not(:disabled):hover [part=\\\"path\\\"] {\\r\\n  fill: #4f8ff9;\\r\\n}\\r\\n[part=\\\"list\\\"] button:not(:disabled):hover span {\\r\\n  color: #4f8ff9;\\r\\n}\\r\\n[part=\\\"list\\\"] button:disabled {\\r\\n  color: #AAA;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputCheckList/inputCheckList.css?");
+
+/***/ }),
+
+/***/ "./src/pg/inputCheckList/inputCheckList.html":
+/*!***************************************************!*\
+  !*** ./src/pg/inputCheckList/inputCheckList.html ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"<ul part=\\\"list\\\"></ul>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputCheckList/inputCheckList.html?");
+
+/***/ }),
+
+/***/ "./src/pg/inputCheckList/inputCheckList.ts":
+/*!*************************************************!*\
+  !*** ./src/pg/inputCheckList/inputCheckList.ts ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 _pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @pictogrammers/element */ \"./node_modules/@pictogrammers/element/dist/element.esm.js\");\n/* harmony import */ var _inputCheckList_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputCheckList.html */ \"./src/pg/inputCheckList/inputCheckList.html\");\n/* harmony import */ var _inputCheckList_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputCheckList.css */ \"./src/pg/inputCheckList/inputCheckList.css\");\n/* harmony import */ var _shared_list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shared/list */ \"./src/pg/shared/list.ts\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\n\r\n\r\nconst NS_SVG = 'http://www.w3.org/2000/svg';\r\nconst PATH_BLANK = 'M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z';\r\nconst PATH_CHECKED = 'M19 19L5 19V5H15V3H5C3.89 3 3 3.89 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V11H19';\r\nconst PATH_CHECK = 'M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z';\r\nlet PgInputCheckList = class PgInputCheckList extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.value = [];\r\n        this.options = [];\r\n    }\r\n    connectedCallback() {\r\n    }\r\n    handleClick(option) {\r\n        var _a;\r\n        const checked = this.value.includes(option.value);\r\n        const li = (0,_shared_list__WEBPACK_IMPORTED_MODULE_3__.item)(this.$list, option, 'value');\r\n        const button = li.querySelector('button');\r\n        button === null || button === void 0 ? void 0 : button.classList.toggle('blank', checked);\r\n        button === null || button === void 0 ? void 0 : button.classList.toggle('checked', !checked);\r\n        (_a = li.querySelector('[part=\"path\"]')) === null || _a === void 0 ? void 0 : _a.setAttribute('d', checked ? PATH_BLANK : PATH_CHECKED);\r\n        if (checked) {\r\n            this.value.splice(this.value.findIndex(v => v === option.value), 1);\r\n        }\r\n        else {\r\n            this.value.push(option.value);\r\n        }\r\n        this.dispatchEvent(new CustomEvent('change', {\r\n            detail: {\r\n                value: this.value\r\n            }\r\n        }));\r\n    }\r\n    render(changes) {\r\n        if (changes.options) {\r\n            (0,_shared_list__WEBPACK_IMPORTED_MODULE_3__.list)(this.$list, this.options, 'value', (option) => {\r\n                const li = document.createElement('li');\r\n                const button = document.createElement('button');\r\n                if (option.disabled === true) {\r\n                    button.disabled = true;\r\n                }\r\n                const checked = this.value.includes(option.value);\r\n                button.classList.toggle('checked', checked);\r\n                button.classList.toggle('blank', !checked);\r\n                const svg = document.createElementNS(NS_SVG, 'svg');\r\n                svg.setAttribute('viewBox', '0 0 24 24');\r\n                svg.setAttribute('part', 'svg');\r\n                const path = document.createElementNS(NS_SVG, 'path');\r\n                path.setAttribute('d', checked ? PATH_CHECKED : PATH_BLANK);\r\n                path.setAttribute('fill', 'currentColor');\r\n                path.setAttribute('part', 'path');\r\n                svg.appendChild(path);\r\n                const check = document.createElementNS(NS_SVG, 'path');\r\n                check.setAttribute('d', PATH_CHECK);\r\n                check.setAttribute('fill', 'currentColor');\r\n                check.setAttribute('part', 'check');\r\n                svg.appendChild(check);\r\n                button.appendChild(svg);\r\n                const span = document.createElement('span');\r\n                span.innerText = option.label;\r\n                button.appendChild(span);\r\n                button.addEventListener('click', (e) => {\r\n                    this.handleClick(option);\r\n                });\r\n                li.appendChild(button);\r\n                return li;\r\n            }, (option, $item) => {\r\n                $item.querySelector('button').innerText = option.label;\r\n            });\r\n        }\r\n        if (changes.value) {\r\n            //const value = [true, 'true'].includes(this.value);\r\n            //this.$path.setAttribute('d', value ? checked : unchecked);\r\n            //this.$button.classList.toggle('blank', !value);\r\n            //this.$button.classList.toggle('checked', value);\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputCheckList.prototype, \"value\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputCheckList.prototype, \"options\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputCheckList.prototype, \"$list\", void 0);\r\nPgInputCheckList = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-input-check-list',\r\n        style: _inputCheckList_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _inputCheckList_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgInputCheckList);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgInputCheckList);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputCheckList/inputCheckList.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/list.ts":
+/*!*******************************!*\
+  !*** ./src/pg/shared/list.ts ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"item\": () => (/* binding */ item),\n/* harmony export */   \"list\": () => (/* binding */ list)\n/* harmony export */ });\nfunction list($list, items, key, add, update) {\r\n    const elements = Array.from($list.children);\r\n    const current = elements.map((e) => e.dataset.key);\r\n    const itemKeys = items.map(x => x[key]);\r\n    items.forEach(item => {\r\n        if (current.includes(item[key])) {\r\n            const element = elements.find((e) => e.dataset.key === current[key]);\r\n            if (item[key] === current[key]) {\r\n                update(item, element);\r\n                return;\r\n            }\r\n        }\r\n        else {\r\n            const newItem = add(item);\r\n            if (newItem instanceof DocumentFragment) {\r\n                newItem.children[0].dataset.key = item[key];\r\n            }\r\n            else {\r\n                newItem.dataset.key = item[key];\r\n            }\r\n            $list.appendChild(newItem);\r\n            return;\r\n        }\r\n    });\r\n    elements.forEach(element => {\r\n        if (!itemKeys.includes(element.dataset.key)) {\r\n            element.remove();\r\n        }\r\n    });\r\n}\r\nfunction item($list, item, key) {\r\n    const elements = Array.from($list.children);\r\n    const ele = elements.find((e) => e.dataset.key === item[key]);\r\n    return ele;\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/list.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/pg/inputCheckList/inputCheckList.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgInputFileLocal.js

@@ -0,0 +1,116 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/@pictogrammers/element/dist/element.esm.js":
+/*!*****************************************************************!*\
+  !*** ./node_modules/@pictogrammers/element/dist/element.esm.js ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Component\": () => (/* binding */ Component),\n/* harmony export */   \"Local\": () => (/* binding */ Local),\n/* harmony export */   \"Part\": () => (/* binding */ Part),\n/* harmony export */   \"Prop\": () => (/* binding */ Prop),\n/* harmony export */   \"TransmutePart\": () => (/* binding */ TransmutePart),\n/* harmony export */   \"getAttributes\": () => (/* binding */ getAttributes),\n/* harmony export */   \"node\": () => (/* binding */ node),\n/* harmony export */   \"selectComponent\": () => (/* binding */ selectComponent),\n/* harmony export */   \"selectPart\": () => (/* binding */ selectPart)\n/* harmony export */ });\nvar init = Symbol('init');\r\nvar template = Symbol('template');\r\nvar style = Symbol('style');\r\nvar parent = Symbol('parent');\r\nfunction extendTemplate(base, append) {\r\n    if (append && append.match(/<parent\\/>/)) {\r\n        return append.replace(/<parent\\/>/, base);\r\n    }\r\n    else {\r\n        return \"\".concat(base).concat(append || '');\r\n    }\r\n}\r\nfunction camelToDash(str) {\r\n    return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();\r\n}\r\nfunction dashToCamel(str) {\r\n    return str.replace(/-([a-z])/g, function (m) { return m[1].toUpperCase(); });\r\n}\r\nfunction Component(config) {\r\n    if (config === void 0) { config = {}; }\r\n    return function (cls) {\r\n        if (cls.prototype[parent]) {\r\n            cls.prototype[parent].push(cls.prototype);\r\n            cls.prototype[style] = \"\".concat(cls.prototype[style]).concat(config.style);\r\n            cls.prototype[template] = extendTemplate(cls.prototype[template], config.template || null);\r\n        }\r\n        else {\r\n            cls.prototype[parent] = [cls.prototype];\r\n            cls.prototype[style] = config.style || '';\r\n            cls.prototype[template] = config.template || '';\r\n        }\r\n        if (!cls.symbols) {\r\n            cls.symbols = {};\r\n        }\r\n        var connectedCallback = cls.prototype.connectedCallback || (function () { });\r\n        var disconnectedCallback = cls.prototype.disconnectedCallback || (function () { });\r\n        cls.prototype.connectedCallback = function () {\r\n            var _this = this;\r\n            if (!this[init] && !config.template) {\r\n                if (config.useShadow === false) {\r\n                    // Base class with no template\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' });\r\n                }\r\n            }\r\n            else if (!this[init] && config.template) {\r\n                var $template = document.createElement('template');\r\n                $template.innerHTML = \"\".concat(cls.prototype[template], \"<style>\").concat(cls.prototype[style], \"</style>\");\r\n                var $node = document.importNode($template.content, true);\r\n                if (config.useShadow === false) {\r\n                    this.appendChild($node);\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' }).appendChild($node);\r\n                }\r\n            }\r\n            else if (this[init] && config.style) {\r\n                /*if (this.shadowRoot) {\r\n                  const style = document.createElement('style');\r\n                  style.appendChild(document.createTextNode(config.style));\r\n                  this.appendChild(style);\r\n                }*/\r\n                // } else if (this[init] && config.template) {\r\n                // This is allowed now via <parent/>\r\n                // throw new Error('template from base class cannot be overriden. Fix: remove template from @Component');\r\n            }\r\n            else if (this[init] && !config.template) {\r\n                throw new Error('You need to pass a template for an extended element.');\r\n            }\r\n            if (this.componentWillMount) {\r\n                this.componentWillMount();\r\n            }\r\n            this[parent].map(function (p) {\r\n                if (p.render) {\r\n                    p.render.call(_this, cls.observedAttributes\r\n                        ? cls.observedAttributes.reduce(function (a, c) {\r\n                            var n = dashToCamel(c);\r\n                            a[n] = true;\r\n                            return a;\r\n                        }, {})\r\n                        : {});\r\n                }\r\n            });\r\n            this[init] = true;\r\n            connectedCallback.call(this);\r\n            if (this.componentDidMount) {\r\n                this.componentDidMount();\r\n            }\r\n        };\r\n        cls.prototype.disconnectedCallback = function () {\r\n            if (this.componentWillUnmount) {\r\n                this.componentWillUnmount();\r\n            }\r\n            disconnectedCallback.call(this);\r\n            if (this.componentDidUnmount) {\r\n                this.componentDidUnmount();\r\n            }\r\n        };\r\n        cls.prototype.attributeChangedCallback = function (name, oldValue, newValue) {\r\n            var normalizedName = dashToCamel(name);\r\n            this[normalizedName] = newValue;\r\n        };\r\n        if (config.selector && !window.customElements.get(config.selector)) {\r\n            window.customElements.define(config.selector, cls);\r\n        }\r\n    };\r\n}\r\nvar transmute = Symbol('transmute');\r\nfunction TransmutePart(part, selector) {\r\n    return function (cls) {\r\n        var _a;\r\n        if (cls.prototype[transmute]) {\r\n            cls.prototype[transmute][part] = selector;\r\n        }\r\n        else {\r\n            cls.prototype[transmute] = (_a = {}, _a[part] = selector, _a);\r\n        }\r\n    };\r\n}\r\nfunction Prop() {\r\n    return function (target, propertyKey, descriptor) {\r\n        var constructor = target.constructor;\r\n        if (!constructor.observedAttributes) {\r\n            constructor.observedAttributes = [];\r\n        }\r\n        var observedAttributes = constructor.observedAttributes;\r\n        if (!constructor.symbols) {\r\n            constructor.symbols = {};\r\n        }\r\n        var symbols = constructor.symbols;\r\n        var normalizedPropertyKey = camelToDash(propertyKey);\r\n        constructor.observedAttributes = observedAttributes.concat([normalizedPropertyKey]);\r\n        var symbol = Symbol(propertyKey);\r\n        symbols[propertyKey] = symbol;\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                return this[symbol];\r\n            },\r\n            set: function (value) {\r\n                var _this = this;\r\n                this[symbol] = value;\r\n                if (this[init]) {\r\n                    this[parent].map(function (p) {\r\n                        var _a;\r\n                        if (p.render) {\r\n                            p.render.call(_this, (_a = {}, _a[propertyKey] = true, _a));\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Part() {\r\n    return function (target, propertyKey, descriptor) {\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var _a;\r\n                var key = propertyKey.replace(/^\\$/, '');\r\n                return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\"[part~=\".concat(key, \"]\"));\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Local(initialValue, key) {\r\n    if (initialValue === void 0) { initialValue = null; }\r\n    return function (target, propertyKey, descriptor) {\r\n        var getKey = function (self) {\r\n            return (key ? key : \"\".concat(self.constructor.name, \":\").concat(propertyKey));\r\n        };\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var k = getKey(this);\r\n                return window.localStorage.getItem(k) || initialValue;\r\n            },\r\n            set: function (value) {\r\n                var k = getKey(this);\r\n                if (value === null) {\r\n                    window.localStorage.removeItem(k);\r\n                }\r\n                else {\r\n                    window.localStorage.setItem(k, value);\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction node(template, init) {\r\n    var $template = document.createElement('template');\r\n    $template.innerHTML = template;\r\n    var $node = document.importNode($template.content, true);\r\n    for (var _i = 0, _a = Object.entries(init); _i < _a.length; _i++) {\r\n        var _b = _a[_i], part = _b[0], attributes = _b[1];\r\n        var $part = $node.querySelector(\"[part~=\\\"\".concat(part, \"\\\"]\"));\r\n        if ($part) {\r\n            for (var _c = 0, _d = Object.entries(attributes); _c < _d.length; _c++) {\r\n                var _e = _d[_c], prop = _e[0], value = _e[1];\r\n                if (value instanceof Function) {\r\n                    var val = value();\r\n                    if (val === null) {\r\n                        $part.removeAttribute(prop);\r\n                    }\r\n                    else {\r\n                        $part.setAttribute(prop, value());\r\n                    }\r\n                }\r\n                else {\r\n                    $part[prop] = value;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    return $node;\r\n}\r\n// JEST\r\nfunction selectComponent(tag) {\r\n    return document.querySelector(tag);\r\n}\r\nfunction selectPart(component, name) {\r\n    return component.shadowRoot.querySelector(\"[part=\".concat(name, \"]\"));\r\n}\r\nfunction getAttributes(tag) {\r\n    var symbols = customElements.get(tag).symbols;\r\n    return Object.keys(symbols);\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./node_modules/@pictogrammers/element/dist/element.esm.js?");
+
+/***/ }),
+
+/***/ "./src/pg/inputFileLocal/inputFileLocal.css":
+/*!**************************************************!*\
+  !*** ./src/pg/inputFileLocal/inputFileLocal.css ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\":host {\\r\\n  display: block;\\r\\n}\\r\\n\\r\\n[part=\\\"label\\\"] {\\r\\n  display: grid;\\r\\n  grid-template-columns: 1.5rem auto;\\r\\n  grid-template-rows: auto;\\r\\n  font-family: var(--pg-font-family);\\r\\n  font-size: 1rem;\\r\\n  line-height: 1.5rem;\\r\\n  border: 1px solid var(--pg-button-border-color, #453C4F);\\r\\n  background-color: var(--pg-button-background-color, #fff);\\r\\n  color: var(--pg-button-color, #453C4F);\\r\\n  padding: var(--pg-button-padding, 0.25rem 0.5rem);\\r\\n  border-radius: 0.25rem;\\r\\n  outline: none;\\r\\n  --pg-icon-color: var(--pg-button-color, #453C4F);\\r\\n}\\r\\n\\r\\n[part=\\\"label\\\"]:hover {\\r\\n  border: 1px solid var(--pg-button-hover-border-color, #453C4F);\\r\\n  background-color: var(--pg-button-hover-background-color, #453C4F);\\r\\n  color: var(--pg-button-hover-color, #fff);\\r\\n  --pg-icon-color: var(--pg-button-hover-color, #fff);\\r\\n}\\r\\n\\r\\n[part=\\\"label\\\"]:active {\\r\\n  box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.5) inset;\\r\\n  position: relative;\\r\\n}\\r\\n\\r\\n[part=\\\"label\\\"]:focus {\\r\\n  position: relative;\\r\\n}\\r\\n\\r\\n[part=\\\"label\\\"]:active::before {\\r\\n  content: '';\\r\\n  position: absolute;\\r\\n  top: -1px;\\r\\n  right: -1px;\\r\\n  bottom: -1px;\\r\\n  left: -1px;\\r\\n  border-radius: 0.25rem;\\r\\n  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));\\r\\n}\\r\\n\\r\\n[part=\\\"label\\\"]:focus::before {\\r\\n  content: '';\\r\\n  position: absolute;\\r\\n  top: -1px;\\r\\n  right: -1px;\\r\\n  bottom: -1px;\\r\\n  left: -1px;\\r\\n  border-radius: 0.25rem;\\r\\n  box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.5));\\r\\n}\\r\\n\\r\\n[part=\\\"file\\\"] {\\r\\n  width: 100%;\\r\\n  border: 0;\\r\\n  outline: 0;\\r\\n  height: 1.5rem;\\r\\n  grid-row: 1;\\r\\n  grid-column: 1 / span 2;\\r\\n  visibility: hidden;\\r\\n}\\r\\n\\r\\n[part=\\\"icon\\\"] {\\r\\n  grid-row: 1;\\r\\n  grid-column: 1;\\r\\n  transform: translate(-0.25rem, 0.075rem);\\r\\n  pointer-events: none;\\r\\n}\\r\\n\\r\\n[part=\\\"text\\\"] {\\r\\n  grid-row: 1;\\r\\n  grid-column: 2;\\r\\n  pointer-events: none;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputFileLocal/inputFileLocal.css?");
+
+/***/ }),
+
+/***/ "./src/pg/inputFileLocal/inputFileLocal.html":
+/*!***************************************************!*\
+  !*** ./src/pg/inputFileLocal/inputFileLocal.html ***!
+  \***************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"<label part=\\\"label\\\">\\r\\n  <input type=\\\"file\\\" part=\\\"file\\\" />\\r\\n  <svg part=\\\"icon\\\" width=\\\"24\\\" height=\\\"24\\\" viewBox=\\\"0 0 24 24\\\"><path fill=\\\"currentColor\\\" d=\\\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\\\" /></svg>\\r\\n  <span part=\\\"text\\\">Upload a File...</span>\\r\\n</label>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputFileLocal/inputFileLocal.html?");
+
+/***/ }),
+
+/***/ "./src/pg/inputFileLocal/inputFileLocal.ts":
+/*!*************************************************!*\
+  !*** ./src/pg/inputFileLocal/inputFileLocal.ts ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 _pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @pictogrammers/element */ \"./node_modules/@pictogrammers/element/dist/element.esm.js\");\n/* harmony import */ var _inputFileLocal_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputFileLocal.html */ \"./src/pg/inputFileLocal/inputFileLocal.html\");\n/* harmony import */ var _inputFileLocal_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputFileLocal.css */ \"./src/pg/inputFileLocal/inputFileLocal.css\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\n\r\nconst noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';\r\nlet PgInputFileLocal = class PgInputFileLocal extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.acceptsFileType = '';\r\n    }\r\n    connectedCallback() {\r\n        this.$file.addEventListener('change', () => {\r\n            if (this.$file.files === null || this.$file.files.length === 0) {\r\n                alert('Error : No file selected');\r\n                return;\r\n            }\r\n            // first file selected by user\r\n            var file = this.$file.files[0];\r\n            // perform validation on file type & size if required\r\n            if (this.acceptsFileType) {\r\n                var types = this.acceptsFileType.split(',').join('|');\r\n                var regex = new RegExp(`(${types})$`, 'i');\r\n                if (file.name.match(regex) === null) {\r\n                    alert(`${this.acceptsFileType} file only`);\r\n                    return;\r\n                }\r\n            }\r\n            // read the file\r\n            var reader = new FileReader();\r\n            // file reading started\r\n            reader.addEventListener('loadstart', function () {\r\n                // console.log('File reading started');\r\n            });\r\n            // file reading finished successfully\r\n            reader.addEventListener('load', (e) => {\r\n                // contents of file in variable\r\n                var text = e.target.result;\r\n                this.dispatchEvent(new CustomEvent('change', {\r\n                    detail: {\r\n                        value: text,\r\n                        name: file.name\r\n                    }\r\n                }));\r\n            });\r\n            // file reading failed\r\n            reader.addEventListener('error', function () {\r\n                alert('Error : Failed to read file');\r\n            });\r\n            // file read progress\r\n            reader.addEventListener('progress', function (e) {\r\n                if (e.lengthComputable == true) {\r\n                    var percent_read = Math.floor((e.loaded / e.total) * 100);\r\n                    // console.log(percent_read + '% read');\r\n                }\r\n            });\r\n            // read as text file\r\n            reader.readAsText(file);\r\n        });\r\n    }\r\n    render(changes) {\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputFileLocal.prototype, \"acceptsFileType\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputFileLocal.prototype, \"$file\", void 0);\r\nPgInputFileLocal = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-input-file-local',\r\n        style: _inputFileLocal_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _inputFileLocal_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgInputFileLocal);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgInputFileLocal);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputFileLocal/inputFileLocal.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/pg/inputFileLocal/inputFileLocal.ts");
+/******/ 	
+/******/ })()
+;