@pictogrammers/components 0.3.1

package/dist/pgInputTextIcon.js

@@ -0,0 +1,176 @@
+/*
+ * 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/icon/icon.css":
+/*!******************************!*\
+  !*** ./src/pg/icon/icon.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  color: var(--pg-icon-color, #453C4F);\\r\\n}\\r\\n\\r\\n[part=\\\"svg\\\"] {\\r\\n  width: var(--pg-icon-width, 1.5rem);\\r\\n  height: var(--pg-icon-height, 1.5rem);\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/icon/icon.css?");
+
+/***/ }),
+
+/***/ "./src/pg/icon/icon.html":
+/*!*******************************!*\
+  !*** ./src/pg/icon/icon.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__ = (\"<svg part=\\\"svg\\\" viewBox=\\\"0 0 24 24\\\">\\r\\n  <path part=\\\"path\\\" fill=\\\"currentColor\\\" d=\\\"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z\\\"/>\\r\\n</svg>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/icon/icon.html?");
+
+/***/ }),
+
+/***/ "./src/pg/inputTextIcon/inputTextIcon.css":
+/*!************************************************!*\
+  !*** ./src/pg/inputTextIcon/inputTextIcon.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=\\\"grid\\\"] {\\r\\n  display: grid;\\r\\n  grid-template-columns: auto 1.5rem;\\r\\n}\\r\\n\\r\\n[part=\\\"icon\\\"] {\\r\\n  grid-row: 1;\\r\\n  grid-column: 2;\\r\\n  pointer-events: none;\\r\\n  transform: translate(calc(-0.35rem + 1px), calc(0.25rem + 1px));\\r\\n}\\r\\n\\r\\n[part=\\\"input\\\"] {\\r\\n  grid-row: 1;\\r\\n  grid-column: 1 / span 2;\\r\\n}\\r\\n\\r\\n[part=\\\"input\\\"]:focus + [part=\\\"icon\\\"] {\\r\\n  --pg-icon-color: #4f8ff9;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputTextIcon/inputTextIcon.css?");
+
+/***/ }),
+
+/***/ "./src/pg/inputTextIcon/inputTextIcon.html":
+/*!*************************************************!*\
+  !*** ./src/pg/inputTextIcon/inputTextIcon.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__ = (\"<div part=\\\"grid\\\">\\r\\n  <parent/>\\r\\n  <pg-icon part=\\\"icon\\\"></pg-icon>\\r\\n</div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputTextIcon/inputTextIcon.html?");
+
+/***/ }),
+
+/***/ "./src/pg/inputText/inputText.css":
+/*!****************************************!*\
+  !*** ./src/pg/inputText/inputText.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  font-family: var(--pg-font-family);\\r\\n}\\r\\n\\r\\n[part=\\\"input\\\"] {\\r\\n  border: 1px solid var(--pg-input-text-border-color, #453C4F);\\r\\n  border-radius: 0.125rem;\\r\\n  padding: calc(0.5rem - 1px) 0.75rem;\\r\\n  font-size: 1rem;\\r\\n  outline: none;\\r\\n  width: calc(100% - 1.5rem - 2px);\\r\\n}\\r\\n\\r\\n[part=\\\"input\\\"]:active {\\r\\n  box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));\\r\\n}\\r\\n[part=\\\"input\\\"]:focus {\\r\\n  box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputText/inputText.css?");
+
+/***/ }),
+
+/***/ "./src/pg/inputText/inputText.html":
+/*!*****************************************!*\
+  !*** ./src/pg/inputText/inputText.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__ = (\"<input part=\\\"input\\\" type=\\\"text\\\" />\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputText/inputText.html?");
+
+/***/ }),
+
+/***/ "./src/pg/icon/icon.ts":
+/*!*****************************!*\
+  !*** ./src/pg/icon/icon.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 _icon_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./icon.html */ \"./src/pg/icon/icon.html\");\n/* harmony import */ var _icon_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./icon.css */ \"./src/pg/icon/icon.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 PgIcon = class PgIcon extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.path = noIcon;\r\n    }\r\n    render(changes) {\r\n        if (changes.path) {\r\n            this.$path.setAttribute('d', this.path);\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgIcon.prototype, \"path\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgIcon.prototype, \"$path\", void 0);\r\nPgIcon = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-icon',\r\n        style: _icon_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _icon_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgIcon);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgIcon);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/icon/icon.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/inputTextIcon/inputTextIcon.ts":
+/*!***********************************************!*\
+  !*** ./src/pg/inputTextIcon/inputTextIcon.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 _inputTextIcon_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputTextIcon.html */ \"./src/pg/inputTextIcon/inputTextIcon.html\");\n/* harmony import */ var _inputTextIcon_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputTextIcon.css */ \"./src/pg/inputTextIcon/inputTextIcon.css\");\n/* harmony import */ var _inputText_inputText__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../inputText/inputText */ \"./src/pg/inputText/inputText.ts\");\n/* harmony import */ var _icon_icon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon/icon */ \"./src/pg/icon/icon.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\n\r\n\r\nlet PgInputTextIcon = class PgInputTextIcon extends _inputText_inputText__WEBPACK_IMPORTED_MODULE_3__[\"default\"] {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.path = 'M3,3V21H21V3';\r\n    }\r\n    render(changes) {\r\n        if (changes.path) {\r\n            this.$icon.path = this.path;\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputTextIcon.prototype, \"path\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputTextIcon.prototype, \"$icon\", void 0);\r\nPgInputTextIcon = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-input-text-icon',\r\n        style: _inputTextIcon_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _inputTextIcon_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgInputTextIcon);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgInputTextIcon);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputTextIcon/inputTextIcon.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/inputText/inputText.ts":
+/*!***************************************!*\
+  !*** ./src/pg/inputText/inputText.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 _inputText_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputText.html */ \"./src/pg/inputText/inputText.html\");\n/* harmony import */ var _inputText_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputText.css */ \"./src/pg/inputText/inputText.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\nlet PgInputText = class PgInputText extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.name = '';\r\n        this.value = '';\r\n        this.placeholder = '';\r\n        this.skipValue = false;\r\n    }\r\n    connectedCallback() {\r\n        this.$input.addEventListener('input', this.handleInput.bind(this));\r\n        this.$input.addEventListener('change', this.handleChange.bind(this));\r\n    }\r\n    render(changes) {\r\n        if (changes.value && !this.skipValue) {\r\n            this.$input.value = this.value;\r\n        }\r\n        if (changes.placeholder) {\r\n            this.$input.placeholder = this.placeholder;\r\n        }\r\n        this.skipValue = false;\r\n    }\r\n    handleInput(e) {\r\n        e.stopPropagation();\r\n        this.skipValue = true;\r\n        this.value = e.target.value;\r\n        this.dispatchEvent(new CustomEvent('input', {\r\n            detail: {\r\n                value: e.target.value,\r\n                name: e.name\r\n            }\r\n        }));\r\n    }\r\n    handleChange(e) {\r\n        this.dispatchEvent(new CustomEvent('change', {\r\n            detail: {\r\n                value: e.target.value,\r\n                name: e.name\r\n            }\r\n        }));\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputText.prototype, \"name\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputText.prototype, \"value\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputText.prototype, \"placeholder\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputText.prototype, \"$input\", void 0);\r\nPgInputText = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-input-text',\r\n        style: _inputText_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _inputText_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgInputText);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgInputText);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputText/inputText.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/inputTextIcon/inputTextIcon.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgInputUserSelect.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/inputUserSelect/inputUserSelect.css":
+/*!****************************************************!*\
+  !*** ./src/pg/inputUserSelect/inputUserSelect.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=\\\"wrapper\\\"] {\\r\\n  display: grid;\\r\\n  grid-template-rows: auto 0;\\r\\n  grid-template-columns: 100%;\\r\\n}\\r\\n\\r\\n[part=\\\"select\\\"] {\\r\\n  display: grid;\\r\\n  grid-template-columns: 3.5rem 1.75rem auto 2.75rem 1fr 1.5rem;\\r\\n  grid-template-rows: 1.5rem 1.5rem;\\r\\n  grid-row: 1;\\r\\n  grid-column: 1;\\r\\n  border: 1px solid var(--pg-input-select-border-color, #453C4F);\\r\\n  border-radius: 0.25rem;\\r\\n  padding: 0.5rem 0.5rem 0.5rem 0.75rem;\\r\\n  width: 100%;\\r\\n  font-size: 1rem;\\r\\n  outline: 0;\\r\\n  text-align: left;\\r\\n  background: var(--pg-input-select-background, #fff);\\r\\n}\\r\\n\\r\\n[part=\\\"select\\\"]:focus {\\r\\n  box-shadow: 0 0 0 3px rgba(79, 143, 249, 0.5);\\r\\n}\\r\\n\\r\\n[part=\\\"select\\\"]:disabled {\\r\\n  border: 1px solid var(--pg-input-select-disabled-border-color, rgba(69, 60, 79, 0.6));\\r\\n  color: var(--pg-input-select-disabled-color, rgba(69, 60, 79, 0.6));\\r\\n}\\r\\n\\r\\n[part=\\\"chevron\\\"] {\\r\\n  grid-row: 1 / span 2;\\r\\n  grid-column: 6;\\r\\n  pointer-events: none;\\r\\n  width: 1.5rem;\\r\\n  height: 1.5rem;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n.githubIcon,\\r\\n[part=\\\"githubIcon\\\"] {\\r\\n  grid-row: 2;\\r\\n  grid-column: 2;\\r\\n  width: 1.5rem;\\r\\n  height: 1.5rem;\\r\\n  align-self: center;\\r\\n  color: var(--pg-input-select-border-color, #453C4F);\\r\\n}\\r\\n\\r\\n.avatar,\\r\\n[part=\\\"selectedAvatar\\\"] {\\r\\n  grid-row: 1 / span 2;\\r\\n  grid-column: 1;\\r\\n  width: 3rem;\\r\\n  height: 3rem;\\r\\n  border-radius: 50%;\\r\\n  border: 1px solid var(--pg-input-select-border-color, #453C4F);\\r\\n}\\r\\n\\r\\n.name,\\r\\n[part=\\\"selectedName\\\"] {\\r\\n  grid-row: 1;\\r\\n  grid-column: 2 / span 4;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n.github,\\r\\n[part=\\\"selectedGithub\\\"] {\\r\\n  grid-row: 2;\\r\\n  grid-column: 3;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n.countIcon,\\r\\n[part=\\\"countIcon\\\"] {\\r\\n  grid-row: 2;\\r\\n  grid-column: 4;\\r\\n  width: 1.5rem;\\r\\n  height: 1.5rem;\\r\\n  align-self: center;\\r\\n  margin-left: 1rem;\\r\\n  color: var(--pg-input-select-border-color, #453C4F);\\r\\n}\\r\\n\\r\\n.iconCount,\\r\\n[part=\\\"selectedCount\\\"] {\\r\\n  grid-row: 2;\\r\\n  grid-column: 5;\\r\\n  align-self: center;\\r\\n  font-weight: bold;\\r\\n}\\r\\n\\r\\n[part=\\\"dropdown\\\"].open {\\r\\n  display: flex;\\r\\n}\\r\\n\\r\\n[part=\\\"dropdown\\\"] {\\r\\n  grid-row: 2;\\r\\n  grid-column: 1;\\r\\n  display: none;\\r\\n  flex-direction: column;\\r\\n  border: 1px solid var(--pg-input-select-border-color, #453C4F);\\r\\n  border-radius: 0.25rem;\\r\\n  background: #fff;\\r\\n  z-index: 1;\\r\\n  position: absolute;\\r\\n  max-height: 16.5rem;\\r\\n  overflow: auto;\\r\\n}\\r\\n\\r\\n[part=\\\"dropdown\\\"] button {\\r\\n  display: grid;\\r\\n  grid-template-columns: 3.5rem 1.75rem auto 2.75rem 1fr;\\r\\n  grid-template-rows: auto;\\r\\n  border: 0;\\r\\n  padding: 0.5rem 0.75rem;\\r\\n  text-align: left;\\r\\n  background: #fff;\\r\\n}\\r\\n\\r\\n[part=\\\"dropdown\\\"] button:hover,\\r\\n[part=\\\"dropdown\\\"] button:focus {\\r\\n  color: #fff;\\r\\n  background: #1E90FF;\\r\\n}\\r\\n\\r\\n[part=\\\"dropdown\\\"] button:hover .githubIcon,\\r\\n[part=\\\"dropdown\\\"] button:hover .countIcon,\\r\\n[part=\\\"dropdown\\\"] button:focus .githubIcon,\\r\\n[part=\\\"dropdown\\\"] button:focus .countIcon {\\r\\n  color: #fff;\\r\\n}\\r\\n\\r\\n[part=\\\"loading\\\"] {\\r\\n  width: 3rem;\\r\\n  height: 3rem;\\r\\n  animation: spin 2s infinite linear;\\r\\n  grid-row: 1 / span 2;;\\r\\n  grid-column: 1;\\r\\n  pointer-events: none;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n@keyframes spin {\\r\\n  0% {\\r\\n    transform: rotate(0deg);\\r\\n  }\\r\\n  100% {\\r\\n    transform: rotate(359deg);\\r\\n  }\\r\\n}\\r\\n\\r\\n[part=\\\"loadingText\\\"] {\\r\\n  grid-row: 1 / span 2;\\r\\n  grid-column: 2 / span 3;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n[part=\\\"noData\\\"] {\\r\\n  grid-row: 1 / span 2;\\r\\n  grid-column: 1 / span 4;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n[part=\\\"noSelection\\\"] {\\r\\n  grid-row: 1 / span 2;\\r\\n  grid-column: 1 / span 4;\\r\\n  align-self: center;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputUserSelect/inputUserSelect.css?");
+
+/***/ }),
+
+/***/ "./src/pg/inputUserSelect/inputUserSelect.html":
+/*!*****************************************************!*\
+  !*** ./src/pg/inputUserSelect/inputUserSelect.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__ = (\"<div part=\\\"wrapper\\\">\\r\\n  <button part=\\\"select\\\">\\r\\n    <img part=\\\"selectedAvatar\\\" />\\r\\n    <span part=\\\"selectedName\\\">First Last</span>\\r\\n    <svg part=\\\"githubIcon\\\" viewBox=\\\"0 0 24 24\\\"><path fill=\\\"currentColor\\\" d=\\\"M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z\\\" /></svg>\\r\\n    <span part=\\\"selectedGithub\\\">GitHub</span>\\r\\n    <svg part=\\\"countIcon\\\" viewBox=\\\"0 0 24 24\\\"><path fill=\\\"currentColor\\\" d=\\\"M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z\\\" /></svg>\\r\\n    <span part=\\\"selectedCount\\\">9999</span>\\r\\n    <svg part=\\\"loading\\\" viewBox=\\\"0 0 24 24\\\"><path fill=\\\"currentColor\\\" d=\\\"M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z\\\" /></svg>\\r\\n    <span part=\\\"loadingText\\\">Loading...</span>\\r\\n    <svg part=\\\"chevron\\\" viewBox=\\\"0 0 24 24\\\"><path fill=\\\"currentColor\\\" d=\\\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\\\" /></svg>\\r\\n    <span part=\\\"noData\\\">Empty Users List</span>\\r\\n    <span part=\\\"noSelection\\\">Select a User</span>\\r\\n  </button>\\r\\n  <div part=\\\"dropdownContainer\\\">\\r\\n    <div part=\\\"dropdown\\\"></div>\\r\\n  </div>\\r\\n</div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputUserSelect/inputUserSelect.html?");
+
+/***/ }),
+
+/***/ "./src/pg/inputUserSelect/inputUserSelect.ts":
+/*!***************************************************!*\
+  !*** ./src/pg/inputUserSelect/inputUserSelect.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 _inputUserSelect_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./inputUserSelect.html */ \"./src/pg/inputUserSelect/inputUserSelect.html\");\n/* harmony import */ var _inputUserSelect_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputUserSelect.css */ \"./src/pg/inputUserSelect/inputUserSelect.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\nfunction createIcon(d, className) {\r\n    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\r\n    svg.setAttribute('viewBox', '0 0 24 24');\r\n    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\r\n    path.setAttribute('d', d);\r\n    path.setAttribute('fill', 'currentColor');\r\n    svg.appendChild(path);\r\n    svg.classList.add(className);\r\n    return svg;\r\n}\r\nconst KEY = {\r\n    ArrowUp: 'ArrowUp',\r\n    ArrowRight: 'ArrowRight',\r\n    ArrowDown: 'ArrowDown',\r\n    ArrowLeft: 'ArrowLeft',\r\n    Escape: 'Escape',\r\n    Tab: 'Tab'\r\n};\r\nconst mdiGithub = 'M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z';\r\nconst mdiShape = 'M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z';\r\nlet PgInputUserSelect = class PgInputUserSelect extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.options = null;\r\n        this.value = null;\r\n        this.clear = false;\r\n        this.noDataText = 'Empty Users List';\r\n        this.noSelectionText = 'Select a User';\r\n        this.name = '';\r\n        this.isOpen = false;\r\n        this.optionsElements = [];\r\n        this.index = -1;\r\n    }\r\n    connectedCallback() {\r\n        this.$select.addEventListener('click', this.handleClick.bind(this));\r\n        this.addEventListener('keydown', this.handleKeys.bind(this));\r\n    }\r\n    close() {\r\n        this.isOpen = false;\r\n        this.$dropdown.classList.remove('open');\r\n        document.removeEventListener('mousedown', this.handleCloseBind);\r\n    }\r\n    handleClose(e) {\r\n        // This is wrong\r\n        const target = e.target;\r\n        if (target.nodeName === this.nodeName && target.isOpen) {\r\n            // Do nothing!\r\n        }\r\n        else {\r\n            this.close();\r\n        }\r\n    }\r\n    handleClick() {\r\n        this.isOpen = !this.isOpen;\r\n        this.$dropdown.classList.toggle('open', this.isOpen);\r\n        this.handleCloseBind = this.handleClose.bind(this);\r\n        document.addEventListener('mousedown', this.handleCloseBind);\r\n        this.focusSelected();\r\n    }\r\n    focusSelected() {\r\n        var _a;\r\n        const find = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex((value) => value === this.value);\r\n        if (find && find !== -1) {\r\n            this.optionsElements[find].focus();\r\n            this.index = find;\r\n        }\r\n        else if (this.optionsElements.length) {\r\n            this.optionsElements[0].focus();\r\n        }\r\n    }\r\n    handleSelect(e) {\r\n        var _a;\r\n        console.log('clicked');\r\n        const { id } = e.currentTarget.dataset;\r\n        const selected = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(d => d.id === id);\r\n        this.value = selected || null;\r\n        this.dispatchEvent(new CustomEvent('change', {\r\n            detail: {\r\n                value: this.value,\r\n                name: this.name\r\n            }\r\n        }));\r\n        this.close();\r\n    }\r\n    loadingMode() {\r\n        this.$selectedAvatar.style.display = 'none';\r\n        this.$selectedName.style.display = 'none';\r\n        this.$githubIcon.style.display = 'none';\r\n        this.$selectedGithub.style.display = 'none';\r\n        this.$countIcon.style.display = 'none';\r\n        this.$selectedCount.style.display = 'none';\r\n        this.$noData.style.display = 'none';\r\n        this.$noSelection.style.display = 'none';\r\n        this.$loading.style.display = 'flex';\r\n        this.$loadingText.style.display = 'initial';\r\n        this.$select.disabled = true;\r\n    }\r\n    noDataMode() {\r\n        this.$selectedAvatar.style.display = 'none';\r\n        this.$selectedName.style.display = 'none';\r\n        this.$githubIcon.style.display = 'none';\r\n        this.$selectedGithub.style.display = 'none';\r\n        this.$countIcon.style.display = 'none';\r\n        this.$selectedCount.style.display = 'none';\r\n        this.$noData.style.display = 'initial';\r\n        this.$noSelection.style.display = 'none';\r\n        this.$loading.style.display = 'none';\r\n        this.$loadingText.style.display = 'none';\r\n        this.$select.disabled = true;\r\n    }\r\n    noSelectionMode() {\r\n        this.$selectedAvatar.style.display = 'none';\r\n        this.$selectedName.style.display = 'none';\r\n        this.$githubIcon.style.display = 'none';\r\n        this.$selectedGithub.style.display = 'none';\r\n        this.$countIcon.style.display = 'none';\r\n        this.$selectedCount.style.display = 'none';\r\n        this.$noData.style.display = 'none';\r\n        this.$noSelection.style.display = 'initial';\r\n        this.$loading.style.display = 'none';\r\n        this.$loadingText.style.display = 'none';\r\n        this.$select.disabled = false;\r\n    }\r\n    selectMode() {\r\n        this.$selectedAvatar.style.display = 'initial';\r\n        this.$selectedName.style.display = 'initial';\r\n        this.$githubIcon.style.display = 'initial';\r\n        this.$selectedGithub.style.display = 'initial';\r\n        this.$countIcon.style.display = 'initial';\r\n        this.$selectedCount.style.display = 'initial';\r\n        this.$noData.style.display = 'none';\r\n        this.$noSelection.style.display = 'none';\r\n        this.$loading.style.display = 'none';\r\n        this.$loadingText.style.display = 'none';\r\n        this.$select.disabled = false;\r\n    }\r\n    render(changes) {\r\n        if (changes.options) {\r\n            if (this.options === null) {\r\n                this.loadingMode();\r\n            }\r\n            else if (this.options.length === 0) {\r\n                this.noDataMode();\r\n            }\r\n            else {\r\n                this.selectMode();\r\n                this.calculateMinWidth();\r\n                this.optionsElements = this.options.map(o => {\r\n                    const button = document.createElement('button');\r\n                    const img = document.createElement('img');\r\n                    img.src = `${o.base64}`;\r\n                    img.classList.add('avatar');\r\n                    button.appendChild(img);\r\n                    const spanName = document.createElement('span');\r\n                    spanName.innerText = `${o.name}`;\r\n                    spanName.classList.add('name');\r\n                    button.appendChild(spanName);\r\n                    const spanGitHub = document.createElement('span');\r\n                    spanGitHub.innerText = `${o.github}`;\r\n                    spanGitHub.classList.add('github');\r\n                    button.appendChild(spanGitHub);\r\n                    const spanIconCount = document.createElement('span');\r\n                    spanIconCount.innerText = `${o.iconCount}`;\r\n                    spanIconCount.classList.add('iconCount');\r\n                    button.appendChild(spanIconCount);\r\n                    button.dataset.id = `${o.id}`;\r\n                    button.appendChild(createIcon(mdiGithub, 'githubIcon'));\r\n                    button.appendChild(createIcon(mdiShape, 'countIcon'));\r\n                    button.addEventListener('click', this.handleSelect.bind(this));\r\n                    this.$dropdown.appendChild(button);\r\n                    return button;\r\n                });\r\n                if (this.value === null) {\r\n                    this.noSelectionMode();\r\n                }\r\n            }\r\n            //if (this.$select.value !== this.value) {\r\n            //  this.$select.value = this.value;\r\n            //}\r\n        }\r\n        if (changes.value) {\r\n            if (changes.value && this.value) {\r\n                this.$selectedAvatar.src = this.value.base64 || '';\r\n                this.$selectedCount.innerText = `${this.value.iconCount}`;\r\n                this.$selectedName.innerText = `${this.value.name}`;\r\n                this.$selectedGithub.innerText = `${this.value.github}`;\r\n                this.selectMode();\r\n            }\r\n        }\r\n        if (changes.noDataText) {\r\n            this.$noData.innerText = this.noDataText;\r\n        }\r\n        if (changes.noSelectionText) {\r\n            this.$noSelection.innerText = this.noSelectionText;\r\n        }\r\n    }\r\n    calculateMinWidth() {\r\n        const { width } = this.$select.getBoundingClientRect();\r\n        this.$dropdown.style.minWidth = `${width - 2}px`;\r\n    }\r\n    handleKeys(e) {\r\n        const items = this.optionsElements;\r\n        let newIndex = this.index;\r\n        switch (e.key) {\r\n            case KEY.ArrowUp:\r\n                if (newIndex === 0) {\r\n                    newIndex = items.length - 1;\r\n                }\r\n                else if (newIndex >= 0) {\r\n                    newIndex -= 1;\r\n                }\r\n                break;\r\n            case KEY.ArrowDown:\r\n                if (newIndex < items.length - 1) {\r\n                    newIndex += 1;\r\n                }\r\n                else if (newIndex === items.length - 1) {\r\n                    newIndex = 0;\r\n                }\r\n                break;\r\n            case KEY.Tab:\r\n            case KEY.Escape:\r\n                this.close();\r\n                break;\r\n        }\r\n        if (newIndex != this.index) {\r\n            this.index = newIndex;\r\n            items[newIndex].focus();\r\n            e.preventDefault();\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputUserSelect.prototype, \"options\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputUserSelect.prototype, \"value\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputUserSelect.prototype, \"clear\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputUserSelect.prototype, \"noDataText\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputUserSelect.prototype, \"noSelectionText\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgInputUserSelect.prototype, \"name\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$select\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$selectedAvatar\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$selectedName\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$githubIcon\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$selectedGithub\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$countIcon\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$selectedCount\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$dropdown\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$loading\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$loadingText\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$noData\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgInputUserSelect.prototype, \"$noSelection\", void 0);\r\nPgInputUserSelect = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-input-user-select',\r\n        style: _inputUserSelect_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _inputUserSelect_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgInputUserSelect);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgInputUserSelect);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/inputUserSelect/inputUserSelect.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/inputUserSelect/inputUserSelect.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgListTag.js

@@ -0,0 +1,136 @@
+/*
+ * 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/listTag/listTag.css":
+/*!************************************!*\
+  !*** ./src/pg/listTag/listTag.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  color: var(--pg-icon-color, #453C4F);\\r\\n}\\r\\n\\r\\n[part=\\\"svg\\\"] {\\r\\n  width: var(--pg-icon-width, 1.5rem);\\r\\n  height: var(--pg-icon-height, 1.5rem);\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/listTag/listTag.css?");
+
+/***/ }),
+
+/***/ "./src/pg/listTag/listTag.html":
+/*!*************************************!*\
+  !*** ./src/pg/listTag/listTag.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__ = (\"<div part=\\\"items\\\"></div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/listTag/listTag.html?");
+
+/***/ }),
+
+/***/ "./src/pg/listTag/partials/tag.html":
+/*!******************************************!*\
+  !*** ./src/pg/listTag/partials/tag.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=\\\"name\\\">\\r\\n\\r\\n</button>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/listTag/partials/tag.html?");
+
+/***/ }),
+
+/***/ "./src/pg/listTag/listTag.ts":
+/*!***********************************!*\
+  !*** ./src/pg/listTag/listTag.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 _shared_list__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../shared/list */ \"./src/pg/shared/list.ts\");\n/* harmony import */ var _partials_tag_html__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./partials/tag.html */ \"./src/pg/listTag/partials/tag.html\");\n/* harmony import */ var _listTag_html__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./listTag.html */ \"./src/pg/listTag/listTag.html\");\n/* harmony import */ var _listTag_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./listTag.css */ \"./src/pg/listTag/listTag.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\n\r\n\r\nlet PgListTag = class PgListTag extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.items = [];\r\n        this.edit = false;\r\n    }\r\n    render(changes) {\r\n        if (changes.items) {\r\n            (0,_shared_list__WEBPACK_IMPORTED_MODULE_1__.list)(this.$items, this.items, 'id', (tag) => {\r\n                const n = (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.node)(_partials_tag_html__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\r\n                    name: {\r\n                        innerText: tag.name\r\n                    }\r\n                });\r\n                const name = n.querySelector('[part=\"name\"]');\r\n                name === null || name === void 0 ? void 0 : name.addEventListener('click', (e) => {\r\n                    console.log(tag);\r\n                });\r\n                return n;\r\n            }, (modifiction, $item) => {\r\n            });\r\n        }\r\n        if (changes.edit) {\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgListTag.prototype, \"items\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgListTag.prototype, \"edit\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgListTag.prototype, \"$items\", void 0);\r\nPgListTag = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-list-tag',\r\n        style: _listTag_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\r\n        template: _listTag_html__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\r\n    })\r\n], PgListTag);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgListTag);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/listTag/listTag.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/listTag/listTag.ts");
+/******/ 	
+/******/ })()
+;