@pictogrammers/components 0.3.1

package/dist/pgMenuIcon.js

@@ -0,0 +1,206 @@
+/*
+ * 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/menuIcon/menuIcon.css":
+/*!**************************************!*\
+  !*** ./src/pg/menuIcon/menuIcon.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__ = (\"\\r\\n[part~=contextMenu] {\\r\\n  position: relative;\\r\\n  background: #737E9E;\\r\\n  border-radius: 0.25rem;\\r\\n  width: 12rem;\\r\\n  display: flex;\\r\\n  flex-direction: column;\\r\\n  padding: 0.25rem 0;\\r\\n  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.section {\\r\\n  color: #FFF;\\r\\n  font-size: 0.875rem;\\r\\n  padding: 0.25rem 0.5rem;\\r\\n  cursor: default;\\r\\n  font-weight: bold;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.section:not(:first-child) {\\r\\n  border-top: 1px solid rgba(255, 255, 255, 0.3);\\r\\n  margin-top: 0.5rem;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.group {\\r\\n  margin: 0 0.5rem;\\r\\n  border: 1px solid rgba(255, 255, 255, 0.2);\\r\\n  border-radius: 0.25rem;\\r\\n  display: flex;\\r\\n  flex-direction: row;\\r\\n  overflow: hidden;\\r\\n}\\r\\n[part~=contextMenu] > div.row > div.group {\\r\\n  border: 1px solid rgba(255, 255, 255, 0.2);\\r\\n  border-radius: 0.25rem;\\r\\n  display: flex;\\r\\n  flex-direction: row;\\r\\n  flex: 1;\\r\\n  overflow: hidden;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.row > div.group:first-child {\\r\\n  margin-left: 0.5rem;\\r\\n  margin-right: 0.25rem;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.row > div.group:last-child {\\r\\n  margin-right: 0.5rem;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.group > button,\\r\\n[part~=contextMenu] > div.row > div.group > button {\\r\\n  display: flex;\\r\\n  flex: 1;\\r\\n  padding: 0.25rem;\\r\\n  justify-content: center;\\r\\n  border: 0;\\r\\n  margin: 0;\\r\\n  background: transparent;\\r\\n  color: #FFF;\\r\\n  font-size: 1rem;\\r\\n  line-height: 1.25rem;\\r\\n  align-items: center;\\r\\n  outline: none;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > button,\\r\\n[part~=contextMenu] > a {\\r\\n  display: flex;\\r\\n  border: 0;\\r\\n  margin: 0;\\r\\n  padding: 0.125rem 0.5rem;\\r\\n  background: transparent;\\r\\n  text-align: left;\\r\\n  color: #FFF;\\r\\n  font-size: 1rem;\\r\\n  text-decoration: none;\\r\\n  cursor: default;\\r\\n  outline: none;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.group > button.active,\\r\\n[part~=contextMenu] > div.row > div.group > button.active {\\r\\n  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) inset;\\r\\n  background: rgba(0, 0, 0, 0.1);\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.group > button.active:hover,\\r\\n[part~=contextMenu] > div.row > div.group > button.active:hover {\\r\\n  background: rgba(0, 0, 0, 0.2);\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.group > button:not(:first-child),\\r\\n[part~=contextMenu] > div.row > div.group > button:not(:first-child) {\\r\\n  border-left: 1px solid rgba(255, 255, 255, 0.1);\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.row > div.group > button > svg,\\r\\n[part~=contextMenu] > div.group > button > svg,\\r\\n[part~=contextMenu] > div.row > button > svg,\\r\\n[part~=contextMenu] > button > svg {\\r\\n  width: 1.5rem;\\r\\n  height: 1.5rem;\\r\\n  align-self: center;\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.row > div.group > button:hover,\\r\\n[part~=contextMenu] > div.group > button:hover,\\r\\n[part~=contextMenu] > button:hover,\\r\\n[part~=contextMenu] > a:hover {\\r\\n  background: rgba(255, 255, 255, 0.2);\\r\\n}\\r\\n\\r\\n[part~=contextMenu] > div.row > div.group > button:active,\\r\\n[part~=contextMenu] > div.group > button:active {\\r\\n  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) inset;\\r\\n  background: rgba(0, 0, 0, 0.2);\\r\\n}\\r\\n[part~=contextMenu] > button:active,\\r\\n[part~=contextMenu] > a:active {\\r\\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;\\r\\n  background: rgba(0, 0, 0, 0.2);\\r\\n}\\r\\n\\r\\n.row {\\r\\n  display: flex;\\r\\n}\\r\\n\\r\\n.divider {\\r\\n  border-top: 1px solid rgba(255, 255, 255, 0.3);\\r\\n  margin-top: 0.5rem;\\r\\n  height: 0.4375rem;\\r\\n}\\r\\n\\r\\n.black {\\r\\n  display: inline-flex;\\r\\n  border-radius: 50%;\\r\\n  width: 1rem;\\r\\n  height: 1rem;\\r\\n  background: #000;\\r\\n}\\r\\n\\r\\n.white {\\r\\n  display: inline-flex;\\r\\n  border-radius: 50%;\\r\\n  width: 1rem;\\r\\n  height: 1rem;\\r\\n  background: #FFF;\\r\\n}\\r\\n\\r\\n.download svg {\\r\\n  margin-bottom: -0.125rem;\\r\\n  margin-left: 0.25rem;\\r\\n}\\r\\n\\r\\n[part~=color] {\\r\\n  visibility: hidden;\\r\\n  position: absolute;\\r\\n  padding: 0.25rem;\\r\\n  background: #737E9E;\\r\\n  border-radius: 0.25rem;\\r\\n  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);\\r\\n}\\r\\n\\r\\n[part~=colorHexRgb] {\\r\\n  margin-bottom: 0.25rem;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/menuIcon/menuIcon.css?");
+
+/***/ }),
+
+/***/ "./src/pg/menuIcon/menuIcon.html":
+/*!***************************************!*\
+  !*** ./src/pg/menuIcon/menuIcon.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=\\\"contextMenu\\\">\\r\\n  <a part=\\\"newTab\\\" href=\\\"\\\">Open icon in New Tab</a>\\r\\n  <button part=\\\"copyIconName\\\">Copy Icon Name</button>\\r\\n  <div class=\\\"section\\\">Download PNG</div>\\r\\n  <div class=\\\"group\\\">\\r\\n    <button part=\\\"png24\\\">24</button>\\r\\n    <button part=\\\"png36\\\">36</button>\\r\\n    <button part=\\\"png48\\\">48</button>\\r\\n    <button part=\\\"png96\\\">96</button>\\r\\n  </div>\\r\\n  <div class=\\\"row\\\" style=\\\"margin-top: 0.25rem;\\\">\\r\\n    <div class=\\\"group\\\">\\r\\n      <button part=\\\"pngBlack\\\"><span class=\\\"black\\\"></span></button>\\r\\n      <button part=\\\"pngWhite\\\"><span class=\\\"white\\\"></span></button>\\r\\n      <button part=\\\"pngColor\\\">\\r\\n        <svg viewBox=\\\"0 0 24 24\\\">\\r\\n          <path fill=\\\"#fff\\\" d=\\\"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z\\\"/>\\r\\n          <path fill=\\\"currentColor\\\" d=\\\"M12.97 8L15.8 10.85L7.67 19L3.71 20.68L3.15 20.11L4.84 16.15L12.97 8Z\\\"/>\\r\\n        </svg>\\r\\n      </button>\\r\\n    </div>\\r\\n    <div class=\\\"group\\\">\\r\\n      <button part=\\\"pngDownload\\\" class=\\\"download\\\">\\r\\n        PNG\\r\\n        <svg viewBox=\\\"0 0 24 24\\\">\\r\\n          <path fill=\\\"currentColor\\\" d=\\\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\\\"/>\\r\\n        </svg>\\r\\n      </button>\\r\\n    </div>\\r\\n  </div>\\r\\n  <div class=\\\"section\\\">SVG</div>\\r\\n  <div class=\\\"row\\\" style=\\\"margin-bottom: 0.25rem;\\\">\\r\\n    <div class=\\\"group\\\">\\r\\n      <button part=\\\"svgBlack\\\" class=\\\"active\\\"><span class=\\\"black\\\"></span></button>\\r\\n      <button part=\\\"svgWhite\\\"><span class=\\\"white\\\"></span></button>\\r\\n      <button part=\\\"svgColor\\\">\\r\\n        <svg viewBox=\\\"0 0 24 24\\\">\\r\\n          <path fill=\\\"#fff\\\" d=\\\"M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z\\\"/>\\r\\n          <path fill=\\\"currentColor\\\" d=\\\"M12.97 8L15.8 10.85L7.67 19L3.71 20.68L3.15 20.11L4.84 16.15L12.97 8Z\\\"/>\\r\\n        </svg>\\r\\n      </button>\\r\\n    </div>\\r\\n    <div class=\\\"group\\\">\\r\\n      <button part=\\\"svgDownload\\\" class=\\\"download\\\">\\r\\n        SVG\\r\\n        <svg viewBox=\\\"0 0 24 24\\\">\\r\\n          <path fill=\\\"currentColor\\\" d=\\\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\\\"/>\\r\\n        </svg>\\r\\n      </button>\\r\\n    </div>\\r\\n  </div>\\r\\n  <button part=\\\"copySvgInline\\\">Copy HTML SVG Inline</button>\\r\\n  <button part=\\\"copySvgFile\\\">Copy SVG File Contents</button>\\r\\n  <button part=\\\"copySvgPath\\\">Copy SVG Path Data</button>\\r\\n  <div class=\\\"section\\\">Desktop Font</div>\\r\\n  <button part=\\\"copyUnicode\\\">Copy Unicode Character</button>\\r\\n  <button part=\\\"copyCodepoint\\\">Copy Codepoint</button>\\r\\n  <div class=\\\"divider\\\"></div>\\r\\n  <button part=\\\"copyPreview\\\">Copy GitHub Preview</button>\\r\\n  <div part=\\\"color\\\">\\r\\n    <pg-input-hex-rgb part=\\\"colorHexRgb\\\"></pg-input-hex-rgb>\\r\\n    <pg-color part=\\\"colorPicker\\\"></pg-color>\\r\\n  </div>\\r\\n</div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/menuIcon/menuIcon.html?");
+
+/***/ }),
+
+/***/ "./src/pg/menuIcon/menuIcon.ts":
+/*!*************************************!*\
+  !*** ./src/pg/menuIcon/menuIcon.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 _menuIcon_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./menuIcon.html */ \"./src/pg/menuIcon/menuIcon.html\");\n/* harmony import */ var _menuIcon_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./menuIcon.css */ \"./src/pg/menuIcon/menuIcon.css\");\n/* harmony import */ var _shared_copy__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shared/copy */ \"./src/pg/shared/copy.ts\");\n/* harmony import */ var _shared_toast__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../shared/toast */ \"./src/pg/shared/toast.ts\");\n/* harmony import */ var _shared_models_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../shared/models/icon */ \"./src/pg/shared/models/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 PgMenuIcon = class PgMenuIcon extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.color = 'svg';\r\n        this.icon = new _shared_models_icon__WEBPACK_IMPORTED_MODULE_5__.Icon();\r\n    }\r\n    connectedCallback() {\r\n        // Wire Up Context Menu\r\n        this.$copyIconName.addEventListener('click', this.handleCopyIconName.bind(this));\r\n        this.$svgBlack.addEventListener('click', () => {\r\n            this.cacheSvgColor = '#000000';\r\n            this.render();\r\n        });\r\n        this.$svgWhite.addEventListener('click', () => {\r\n            this.cacheSvgColor = '#FFFFFF';\r\n            this.render();\r\n        });\r\n        let preventSvgColor = false;\r\n        this.$svgColor.addEventListener('click', () => {\r\n            if (preventSvgColor) {\r\n                preventSvgColor = false;\r\n                return;\r\n            }\r\n            this.color = 'svg';\r\n            this.$colorPicker.value = this.cacheSvgColor;\r\n            this.$colorHexRgb.value = this.cacheSvgColor;\r\n            const self = this;\r\n            //createPopper(this.$svgColor, this.$color, {\r\n            //  placement: 'bottom-start'\r\n            //});\r\n            this.$color.style.visibility = 'visible';\r\n            let outside = true;\r\n            function handleMouseDown(e) {\r\n                if (outside) {\r\n                    self.$color.style.visibility = 'hidden';\r\n                    document.removeEventListener('mousedown', handleMouseDown);\r\n                    preventSvgColor = true;\r\n                    self.render();\r\n                    setTimeout(() => preventSvgColor = false, 500);\r\n                }\r\n            }\r\n            this.$color.addEventListener('mouseenter', () => outside = false);\r\n            this.$color.addEventListener('mouseleave', () => outside = true);\r\n            document.addEventListener('mousedown', handleMouseDown);\r\n        });\r\n        this.$pngBlack.addEventListener('click', () => {\r\n            this.cachePngColor = '#000000';\r\n            this.render();\r\n        });\r\n        this.$pngWhite.addEventListener('click', () => {\r\n            this.cachePngColor = '#FFFFFF';\r\n            this.render();\r\n        });\r\n        let preventPngColor = false;\r\n        this.$pngColor.addEventListener('click', () => {\r\n            if (preventPngColor) {\r\n                preventPngColor = false;\r\n                return;\r\n            }\r\n            this.color = 'png';\r\n            this.$colorPicker.value = this.cachePngColor;\r\n            this.$colorHexRgb.value = this.cachePngColor;\r\n            const self = this;\r\n            //createPopper(this.$pngColor, this.$color, {\r\n            //  placement: 'bottom-start'\r\n            //});\r\n            this.$color.style.visibility = 'visible';\r\n            let outside = true;\r\n            function handleMouseDown(e) {\r\n                if (outside) {\r\n                    self.$color.style.visibility = 'hidden';\r\n                    document.removeEventListener('mousedown', handleMouseDown);\r\n                    preventPngColor = true;\r\n                    self.render();\r\n                    setTimeout(() => preventPngColor = false, 500);\r\n                }\r\n            }\r\n            this.$color.addEventListener('mouseenter', () => outside = false);\r\n            this.$color.addEventListener('mouseleave', () => outside = true);\r\n            document.addEventListener('mousedown', handleMouseDown);\r\n        });\r\n        this.$png24.addEventListener('click', () => {\r\n            this.cachePngSize = '24';\r\n            this.render();\r\n        });\r\n        this.$png36.addEventListener('click', () => {\r\n            this.cachePngSize = '36';\r\n            this.render();\r\n        });\r\n        this.$png48.addEventListener('click', () => {\r\n            this.cachePngSize = '48';\r\n            this.render();\r\n        });\r\n        this.$png96.addEventListener('click', () => {\r\n            this.cachePngSize = '96';\r\n            this.render();\r\n        });\r\n        this.$svgDownload.addEventListener('click', () => {\r\n            alert(`SVG ${this.cacheSvgColor}`);\r\n        });\r\n        this.$pngDownload.addEventListener('click', () => {\r\n            alert(`SVG ${this.cachePngSize} ${this.cachePngColor}`);\r\n        });\r\n        this.$copySvgInline.addEventListener('click', () => {\r\n            const icon = this.icon;\r\n            (0,_shared_copy__WEBPACK_IMPORTED_MODULE_3__.copyText)((0,_shared_copy__WEBPACK_IMPORTED_MODULE_3__.getCopySvgInline)(icon));\r\n            this.hideContextMenu();\r\n            (0,_shared_toast__WEBPACK_IMPORTED_MODULE_4__.addInfoToast)(`Copied inline SVG \"${icon.name}\" to clipboard.`);\r\n        });\r\n        this.$copySvgFile.addEventListener('click', () => {\r\n        });\r\n        this.$copySvgPath.addEventListener('click', () => {\r\n        });\r\n        this.$copyUnicode.addEventListener('click', () => {\r\n        });\r\n        this.$copyCodepoint.addEventListener('click', () => {\r\n        });\r\n        this.$copyPreview.addEventListener('click', () => {\r\n        });\r\n    }\r\n    handleCopyIconName() {\r\n        const icon = this.icon;\r\n        if (icon && icon.name) {\r\n            (0,_shared_copy__WEBPACK_IMPORTED_MODULE_3__.copyText)(icon.name);\r\n            (0,_shared_toast__WEBPACK_IMPORTED_MODULE_4__.addInfoToast)(`Copied \"${icon.name}\" to clipboard.`);\r\n        }\r\n        this.hideContextMenu();\r\n    }\r\n    hideContextMenu() {\r\n    }\r\n    showContextMenu(index, x, y) {\r\n        this.dispatchEvent(new CustomEvent('closemenu'));\r\n        /*const gridRect = this.$grid.getBoundingClientRect();\r\n        const cmRect = this.$contextMenu.getBoundingClientRect();\r\n        if (y + gridRect.top + cmRect.height + 4 > window.innerHeight\r\n          && x + gridRect.left + cmRect.width + 24 > window.innerWidth) {\r\n          y = y - cmRect.height;\r\n          x -= x + gridRect.left + cmRect.width + 24 - window.innerWidth;\r\n         } else if (y + gridRect.top + cmRect.height + 4 > window.innerHeight) {\r\n          y -= y + gridRect.top + cmRect.height + 4 - window.innerHeight;\r\n        } else if (x + gridRect.left + cmRect.width + 24 > window.innerWidth) {\r\n          x -= x + gridRect.left + cmRect.width + 24 - window.innerWidth;\r\n        }\r\n        this.currentIndex = index;\r\n        var icon = this.icons[index];\r\n        this.$newTab.href = `icons/${icon.name}`;\r\n        this.$contextMenu.style.left = `${x}px`;\r\n        this.$contextMenu.style.top = `${y}px`;\r\n        this.$contextMenu.style.visibility = 'visible';\r\n        this.hideTooltip();\r\n        this.canOpenTooltip = false;\r\n        const self = this;\r\n        this.$contextMenu.addEventListener('mouseenter', () => {\r\n          this.preventClose = true;\r\n        });\r\n        this.$contextMenu.addEventListener('mouseleave', () => {\r\n          this.preventClose = false;\r\n        });\r\n        function handleMouseDown(e) {\r\n          if (!self.preventClose) {\r\n            self.hideContextMenu();\r\n            document.removeEventListener('mousedown', handleMouseDown);\r\n          }\r\n        }\r\n        this.preventClose = false;\r\n        document.addEventListener('mousedown', handleMouseDown);\r\n        this.$color.style.visibility = 'hidden';*/\r\n    }\r\n    render() {\r\n        // Context Menu\r\n        this.$svgBlack.classList.toggle('active', this.cacheSvgColor === '#000000');\r\n        this.$svgWhite.classList.toggle('active', this.cacheSvgColor === '#FFFFFF');\r\n        this.$svgColor.classList.toggle('active', this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF');\r\n        this.$pngBlack.classList.toggle('active', this.cachePngColor === '#000000');\r\n        this.$pngWhite.classList.toggle('active', this.cachePngColor === '#FFFFFF');\r\n        this.$pngColor.classList.toggle('active', this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF');\r\n        this.$png24.classList.toggle('active', this.cachePngSize === '24');\r\n        this.$png36.classList.toggle('active', this.cachePngSize === '36');\r\n        this.$png48.classList.toggle('active', this.cachePngSize === '48');\r\n        this.$png96.classList.toggle('active', this.cachePngSize === '96');\r\n        this.$colorPicker.addEventListener('select', this.handleColorSelect.bind(this));\r\n        this.$colorHexRgb.addEventListener('change', this.handleHexRgbChange.bind(this));\r\n        this.syncEyedropper();\r\n    }\r\n    handleColorSelect(e) {\r\n        switch (this.color) {\r\n            case 'svg':\r\n                this.cacheSvgColor = e.detail.hex;\r\n                break;\r\n            case 'png':\r\n                this.cachePngColor = e.detail.hex;\r\n                break;\r\n        }\r\n        this.$colorHexRgb.value = e.detail.hex;\r\n        this.syncEyedropper();\r\n    }\r\n    handleHexRgbChange(e) {\r\n        switch (this.color) {\r\n            case 'svg':\r\n                this.cacheSvgColor = e.detail.hex;\r\n                break;\r\n            case 'png':\r\n                this.cachePngColor = e.detail.hex;\r\n                break;\r\n        }\r\n        this.$colorPicker.value = e.detail.hex;\r\n        this.syncEyedropper();\r\n    }\r\n    syncEyedropper() {\r\n        if (this.cachePngColor !== '#000000' && this.cachePngColor !== '#FFFFFF') {\r\n            this.$pngColor.style.color = this.cachePngColor;\r\n        }\r\n        else {\r\n            this.$pngColor.style.color = 'transparent';\r\n        }\r\n        if (this.cacheSvgColor !== '#000000' && this.cacheSvgColor !== '#FFFFFF') {\r\n            this.$svgColor.style.color = this.cacheSvgColor;\r\n        }\r\n        else {\r\n            this.$svgColor.style.color = 'transparent';\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$contextMenu\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$newTab\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copyIconName\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$pngBlack\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$pngWhite\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$pngColor\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$png24\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$png36\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$png48\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$png96\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$pngDownload\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$svgBlack\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$svgWhite\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$svgColor\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$svgDownload\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copySvgInline\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copySvgFile\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copySvgPath\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copyUnicode\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copyCodepoint\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$copyPreview\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$color\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$colorPicker\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgMenuIcon.prototype, \"$colorHexRgb\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Local)('#000000')\r\n], PgMenuIcon.prototype, \"cachePngColor\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Local)('24')\r\n], PgMenuIcon.prototype, \"cachePngSize\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Local)('#000000')\r\n], PgMenuIcon.prototype, \"cacheSvgColor\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgMenuIcon.prototype, \"currentIndex\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgMenuIcon.prototype, \"icon\", void 0);\r\nPgMenuIcon = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-menu-icon',\r\n        style: _menuIcon_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _menuIcon_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgMenuIcon);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgMenuIcon);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/menuIcon/menuIcon.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/copy.ts":
+/*!*******************************!*\
+  !*** ./src/pg/shared/copy.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 */   \"copyText\": () => (/* binding */ copyText),\n/* harmony export */   \"getCopySvgFile\": () => (/* binding */ getCopySvgFile),\n/* harmony export */   \"getCopySvgInline\": () => (/* binding */ getCopySvgInline)\n/* harmony export */ });\nfunction getCopySvgInline(icon) {\r\n    return `<svg viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"${icon.data}\"/></svg>`;\r\n}\r\nfunction getCopySvgFile(icon) {\r\n    return [\r\n        `<?xml version=\"1.0\" encoding=\"utf-8\"?>`,\r\n        `<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">`,\r\n        `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" enable-background=\"new 0 0 24 24\" xml:space=\"preserve\">`,\r\n        `  <path fill=\"#000000\" fill-opacity=\"1\" stroke-width=\"0\" stroke-linejoin=\"round\" d=\"${icon.data}\"/>`,\r\n        `</svg>`\r\n    ].join('');\r\n}\r\nconst copyText = (text) => {\r\n    var copyFrom = document.createElement('textarea');\r\n    copyFrom.setAttribute(\"style\", \"position:fixed;opacity:0;top:100px;left:100px;\");\r\n    copyFrom.value = text;\r\n    document.body.appendChild(copyFrom);\r\n    copyFrom.select();\r\n    document.execCommand('copy');\r\n    setTimeout(function () {\r\n        document.body.removeChild(copyFrom);\r\n    }, 1500);\r\n};\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/copy.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/models/alias.ts":
+/*!***************************************!*\
+  !*** ./src/pg/shared/models/alias.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 */   \"Alias\": () => (/* binding */ Alias)\n/* harmony export */ });\nclass FromAlias {\r\n}\r\nclass Alias {\r\n    constructor(id, name) {\r\n        this.match = false;\r\n        if (id !== undefined) {\r\n            this.id = id;\r\n        }\r\n        if (name !== undefined) {\r\n            this.name = name;\r\n        }\r\n    }\r\n    from(alias) {\r\n        if (alias.id !== undefined) {\r\n            this.id = alias.id;\r\n        }\r\n        if (alias.name !== undefined) {\r\n            this.name = alias.name;\r\n        }\r\n        return this;\r\n    }\r\n    to() {\r\n        return {\r\n            name: this.name\r\n        };\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/models/alias.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/models/fontIcon.ts":
+/*!******************************************!*\
+  !*** ./src/pg/shared/models/fontIcon.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 */   \"FontIcon\": () => (/* binding */ FontIcon)\n/* harmony export */ });\nclass FontIcon {\r\n    from(fontIcon) {\r\n        this.id = fontIcon.id;\r\n        this.codepoint = fontIcon.codepoint;\r\n        this.font = fontIcon.font;\r\n        this.version = fontIcon.version;\r\n        return this;\r\n    }\r\n    to() {\r\n        return {\r\n            id: this.id,\r\n            codepoint: this.codepoint,\r\n            font: this.font,\r\n            version: this.version\r\n        };\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/models/fontIcon.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/models/icon.ts":
+/*!**************************************!*\
+  !*** ./src/pg/shared/models/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 */   \"Icon\": () => (/* binding */ Icon)\n/* harmony export */ });\n/* harmony import */ var _alias__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./alias */ \"./src/pg/shared/models/alias.ts\");\n/* harmony import */ var _user__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./user */ \"./src/pg/shared/models/user.ts\");\n/* harmony import */ var _tag__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./tag */ \"./src/pg/shared/models/tag.ts\");\n/* harmony import */ var _style__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./style */ \"./src/pg/shared/models/style.ts\");\n/* harmony import */ var _fontIcon__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./fontIcon */ \"./src/pg/shared/models/fontIcon.ts\");\n\r\n\r\n\r\n\r\n\r\nclass Icon {\r\n    constructor(name, data) {\r\n        this.id = null;\r\n        this.packageId = null;\r\n        this.baseIconId = null;\r\n        this.name = null;\r\n        this.description = null;\r\n        this.data = null;\r\n        this.user = null;\r\n        this.version = null;\r\n        this.aliases = [];\r\n        this.tags = [];\r\n        this.styles = [];\r\n        this.published = true;\r\n        this.deprecated = false;\r\n        this.codepoint = null;\r\n        this.fontIcons = [];\r\n        this.fontIcon = null;\r\n        this.name = name || null;\r\n        this.data = data || null;\r\n    }\r\n    from(icon) {\r\n        this.id = icon.id;\r\n        this.packageId = icon.packageId;\r\n        this.baseIconId = icon.baseIconId;\r\n        this.name = icon.name;\r\n        this.description = icon.description;\r\n        this.data = icon.data;\r\n        if (icon.version) {\r\n            this.version = icon.version;\r\n        }\r\n        if (icon.fontIcon) {\r\n            this.fontIcon = icon.fontIcon;\r\n        }\r\n        if (icon.user) {\r\n            this.user = new _user__WEBPACK_IMPORTED_MODULE_1__.User().from(icon.user);\r\n        }\r\n        if (icon.aliases) {\r\n            this.aliases = icon.aliases.map(a => new _alias__WEBPACK_IMPORTED_MODULE_0__.Alias().from(a));\r\n        }\r\n        if (icon.tags) {\r\n            this.tags = icon.tags.map(t => new _tag__WEBPACK_IMPORTED_MODULE_2__.Tag().from(t));\r\n        }\r\n        if (icon.styles) {\r\n            this.styles = icon.styles.map(s => new _style__WEBPACK_IMPORTED_MODULE_3__.Style().from(s));\r\n        }\r\n        if (typeof icon.published === 'boolean') {\r\n            this.published = icon.published;\r\n        }\r\n        if (typeof icon.deprecated === 'boolean') {\r\n            this.deprecated = icon.deprecated;\r\n        }\r\n        if (icon.codepoint) {\r\n            this.codepoint = icon.codepoint;\r\n        }\r\n        if (icon.fontIcons) {\r\n            this.fontIcons = icon.fontIcons.map(t => new _fontIcon__WEBPACK_IMPORTED_MODULE_4__.FontIcon().from(t));\r\n        }\r\n        return this;\r\n    }\r\n    to() {\r\n        const { id, name, description, data, version, fontIcon, packageId, baseIconId, aliases, tags } = this;\r\n        return {\r\n            id,\r\n            name,\r\n            description,\r\n            data,\r\n            version,\r\n            fontIcon,\r\n            packageId,\r\n            baseIconId,\r\n            aliases: aliases.map(alias => alias.to()),\r\n            tags: tags.map(tag => tag.to())\r\n        };\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/models/icon.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/models/style.ts":
+/*!***************************************!*\
+  !*** ./src/pg/shared/models/style.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 */   \"Style\": () => (/* binding */ Style)\n/* harmony export */ });\nclass Style {\r\n    constructor() {\r\n        this.count = null;\r\n    }\r\n    from(style) {\r\n        this.id = style.id;\r\n        this.name = style.name;\r\n        this.count = style.count;\r\n        return this;\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/models/style.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/models/tag.ts":
+/*!*************************************!*\
+  !*** ./src/pg/shared/models/tag.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 */   \"Tag\": () => (/* binding */ Tag)\n/* harmony export */ });\nclass FromTag {\r\n}\r\nclass Tag {\r\n    from(tag) {\r\n        if (tag.id !== undefined) {\r\n            this.id = tag.id;\r\n        }\r\n        if (tag.name !== undefined) {\r\n            this.name = tag.name;\r\n        }\r\n        if (tag.url !== undefined) {\r\n            this.url = tag.url;\r\n        }\r\n        if (tag.count !== undefined) {\r\n            this.count = tag.count;\r\n        }\r\n        return this;\r\n    }\r\n    to() {\r\n        return {\r\n            name: this.name,\r\n            url: this.url,\r\n            count: this.count\r\n        };\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/models/tag.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/models/user.ts":
+/*!**************************************!*\
+  !*** ./src/pg/shared/models/user.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 */   \"User\": () => (/* binding */ User)\n/* harmony export */ });\nclass User {\r\n    constructor() {\r\n        this.id = null;\r\n        this.github = null;\r\n        this.twitter = null;\r\n        this.name = null;\r\n        this.base64 = null;\r\n        this.iconCount = null;\r\n        this.description = null;\r\n        this.website = null;\r\n        this.sponsored = false;\r\n        this.sponsorship = '';\r\n        this.core = false;\r\n    }\r\n    from(user) {\r\n        this.id = user.id;\r\n        this.github = user.github;\r\n        this.twitter = user.twitter;\r\n        this.name = user.name;\r\n        if (typeof user.base64 === 'string') {\r\n            if (user.base64.match(/^data/)) {\r\n                this.base64 = user.base64;\r\n            }\r\n            else {\r\n                this.base64 = `data:image/png;base64,${user.base64}`;\r\n            }\r\n        }\r\n        this.iconCount = user.iconCount;\r\n        this.description = user.description;\r\n        this.website = user.website;\r\n        this.sponsored = user.sponsored;\r\n        this.sponsorship = `https://github.com/users/${user.github}/sponsorship`;\r\n        this.core = user.core;\r\n        return this;\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/models/user.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/toast.ts":
+/*!********************************!*\
+  !*** ./src/pg/shared/toast.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 */   \"addErrorToast\": () => (/* binding */ addErrorToast),\n/* harmony export */   \"addInfoToast\": () => (/* binding */ addInfoToast),\n/* harmony export */   \"addToast\": () => (/* binding */ addToast),\n/* harmony export */   \"addWarningToast\": () => (/* binding */ addWarningToast),\n/* harmony export */   \"observeToasts\": () => (/* binding */ observeToasts),\n/* harmony export */   \"removeToast\": () => (/* binding */ removeToast)\n/* harmony export */ });\n/* harmony import */ var _uuid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./uuid */ \"./src/pg/shared/uuid.ts\");\n\r\nconst ADD = 'pgtoastadd';\r\nconst REMOVE = 'pgtoastremove';\r\nfunction observeToasts({ add, remove }) {\r\n    document.body.addEventListener(ADD, (e) => {\r\n        add(e.detail);\r\n    });\r\n    document.body.addEventListener(REMOVE, (e) => {\r\n        remove(e.detail.key);\r\n    });\r\n}\r\nfunction addToast(config) {\r\n    config.key = config.key || (0,_uuid__WEBPACK_IMPORTED_MODULE_0__.uuid)();\r\n    const event = new CustomEvent(ADD, {\r\n        detail: config\r\n    });\r\n    document.body.dispatchEvent(event);\r\n    setTimeout(() => {\r\n        removeToast(config.key);\r\n    }, config.seconds * 1000);\r\n    return config.key;\r\n}\r\nfunction removeToast(key) {\r\n    const event = new CustomEvent(REMOVE, {\r\n        detail: { key }\r\n    });\r\n    document.body.dispatchEvent(event);\r\n}\r\nfunction addInfoToast(message, seconds = 3) {\r\n    const type = 'info';\r\n    return addToast({ type, message, seconds });\r\n}\r\nfunction addWarningToast(message, seconds = 3) {\r\n    const type = 'warning';\r\n    return addToast({ type, message, seconds });\r\n}\r\nfunction addErrorToast(message, seconds = 3) {\r\n    const type = 'error';\r\n    return addToast({ type, message, seconds });\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/toast.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/uuid.ts":
+/*!*******************************!*\
+  !*** ./src/pg/shared/uuid.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 */   \"uuid\": () => (/* binding */ uuid)\n/* harmony export */ });\nfunction uuid() {\r\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\r\n        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);\r\n        return v.toString(16);\r\n    });\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/uuid.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/menuIcon/menuIcon.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgModalAlert.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/modalAlert/modalAlert.css":
+/*!******************************************!*\
+  !*** ./src/pg/modalAlert/modalAlert.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__ = (\".backdrop {\\r\\n  display: flex;\\r\\n  position: fixed;\\r\\n  top: 0;\\r\\n  left: 0;\\r\\n  right: 0;\\r\\n  bottom: 0;\\r\\n  background: rgba(0, 0, 0, 0.6);\\r\\n  justify-content: center;\\r\\n  align-items: center;\\r\\n}\\r\\n.dialog {\\r\\n  background: #fff;\\r\\n  border-radius: 0.5rem;\\r\\n  box-shadow: 0 1px 1rem rgba(0, 0, 0, 0.5);\\r\\n  overflow: hidden;\\r\\n  min-width: 15rem;\\r\\n}\\r\\nheader {\\r\\n  border-bottom: 1px solid #ccc;\\r\\n  background: #f1f1f1;\\r\\n  padding: 0.75rem 1rem;\\r\\n}\\r\\nheader h2 {\\r\\n  font-size: 1.25rem;\\r\\n  margin: 0;\\r\\n  font-weight: normal;\\r\\n}\\r\\nmain {\\r\\n  padding: 0.5rem 1rem;\\r\\n}\\r\\nfooter {\\r\\n  display: flex;\\r\\n  flex-direction: row;\\r\\n  padding: 0.75rem 1rem;\\r\\n  border-top: 1px solid #ccc;\\r\\n  background: #f1f1f1;\\r\\n  justify-content: flex-end;\\r\\n}\\r\\n\\r\\n[part=\\\"no\\\"] {\\r\\n  margin-right: 0.5rem;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/modalAlert/modalAlert.css?");
+
+/***/ }),
+
+/***/ "./src/pg/modalAlert/modalAlert.html":
+/*!*******************************************!*\
+  !*** ./src/pg/modalAlert/modalAlert.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 class=\\\"backdrop\\\">\\r\\n  <div class=\\\"dialog\\\"\\r\\n    role=\\\"dialog\\\"\\r\\n    id=\\\"dialog1\\\"\\r\\n    aria-labelledby=\\\"dialog1_label\\\"\\r\\n    aria-modal=\\\"true\\\">\\r\\n    <header part=\\\"header\\\">\\r\\n      <h2 id=\\\"dialog1_label\\\"\\r\\n        class=\\\"dialog_label\\\"\\r\\n        part=\\\"headerText\\\">\\r\\n        Add Delivery Address\\r\\n      </h2>\\r\\n    </header>\\r\\n    <main>\\r\\n      <p part=\\\"message\\\"></p>\\r\\n    </main>\\r\\n    <footer>\\r\\n      <pg-button part=\\\"no\\\">No</pg-button>\\r\\n      <pg-button part=\\\"yes\\\">Yes</pg-button>\\r\\n    </footer>\\r\\n  </div>\\r\\n</div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/modalAlert/modalAlert.html?");
+
+/***/ }),
+
+/***/ "./src/pg/modalAlert/modalAlert.ts":
+/*!*****************************************!*\
+  !*** ./src/pg/modalAlert/modalAlert.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 _modalAlert_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modalAlert.html */ \"./src/pg/modalAlert/modalAlert.html\");\n/* harmony import */ var _modalAlert_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modalAlert.css */ \"./src/pg/modalAlert/modalAlert.css\");\n/* harmony import */ var _overlay_overlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../overlay/overlay */ \"./src/pg/overlay/overlay.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\nlet PgModalAlert = class PgModalAlert extends _overlay_overlay__WEBPACK_IMPORTED_MODULE_3__[\"default\"] {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.header = 'Are you sure?';\r\n        this.message = 'Are you sure?';\r\n    }\r\n    connectedCallback() {\r\n        this.$yes.addEventListener('click', this.handleYes.bind(this));\r\n        this.$no.addEventListener('click', this.handleNo.bind(this));\r\n    }\r\n    handleYes() {\r\n        this.close(true);\r\n    }\r\n    handleNo() {\r\n        this.close(false);\r\n    }\r\n    render(changes) {\r\n        if (changes.header) {\r\n            this.$headerText.innerText = this.header;\r\n        }\r\n        if (changes.message) {\r\n            this.$message.innerText = this.message;\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgModalAlert.prototype, \"header\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgModalAlert.prototype, \"message\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgModalAlert.prototype, \"$header\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgModalAlert.prototype, \"$headerText\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgModalAlert.prototype, \"$message\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgModalAlert.prototype, \"$yes\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgModalAlert.prototype, \"$no\", void 0);\r\nPgModalAlert = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-modal-alert',\r\n        template: _modalAlert_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\r\n        style: _modalAlert_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\r\n    })\r\n], PgModalAlert);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgModalAlert);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/modalAlert/modalAlert.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/overlay/overlay.ts":
+/*!***********************************!*\
+  !*** ./src/pg/overlay/overlay.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\");\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\nfunction camelToDash(str) {\r\n    return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();\r\n}\r\nconst layers = [];\r\nconst promises = [];\r\nlet PgOverlay = class PgOverlay extends HTMLElement {\r\n    static open(props = {}) {\r\n        var ele = document.createElement(camelToDash(this.name));\r\n        Object.assign(ele, props);\r\n        document.body.appendChild(ele);\r\n        layers.push(ele);\r\n        return new Promise((resolve) => {\r\n            promises.push(resolve);\r\n        });\r\n    }\r\n    close(result) {\r\n        layers.pop().remove();\r\n        promises.pop()(result);\r\n    }\r\n};\r\nPgOverlay = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)()\r\n], PgOverlay);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgOverlay);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/overlay/overlay.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/modalAlert/modalAlert.ts");
+/******/ 	
+/******/ })()
+;