@pictogrammers/components 0.3.1

package/dist/pgGrid.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/grid/grid.css":
+/*!******************************!*\
+  !*** ./src/pg/grid/grid.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  font-family: var(--pg-font-family);\\r\\n}\\r\\n\\r\\n:host {\\r\\n  display: block;\\r\\n}\\r\\n\\r\\n[part~=none] {\\r\\n  display: none;\\r\\n}\\r\\n\\r\\n[part~=none].show {\\r\\n  display: block;\\r\\n}\\r\\n\\r\\n[part~=grid] {\\r\\n  position: relative;\\r\\n}\\r\\n\\r\\n[part~=grid] > button {\\r\\n  border: 0;\\r\\n  background: transparent;\\r\\n  padding: 0.625rem;\\r\\n  outline: none;\\r\\n  width: 2.75rem;\\r\\n  height: 2.75rem;\\r\\n  position: absolute;\\r\\n  left: 0;\\r\\n  top: 0;\\r\\n  border: 0;\\r\\n  border-radius: 0.25rem;\\r\\n}\\r\\n\\r\\n[part~=grid] > button.hover {\\r\\n  background: rgba(0, 0, 0, 0.1);\\r\\n}\\r\\n\\r\\n[part~=grid] > button:focus,\\r\\n[part~=grid] > button:active {\\r\\n  background: rgba(0, 0, 0, 0.15);\\r\\n  box-shadow: 0 0.0125rem 0.25rem rgba(0, 0, 0, 0.2) inset;\\r\\n}\\r\\n\\r\\n[part~=grid] > button > svg {\\r\\n  fill: #453C4F;\\r\\n  width: 1.5rem;\\r\\n  height: 1.5rem;\\r\\n}\\r\\n\\r\\n[part~=grid] > button > svg {\\r\\n  fill: #453C4F;\\r\\n}\\r\\n\\r\\n[part~=grid]::-webkit-scrollbar {\\r\\n  width: 1em;\\r\\n}\\r\\n\\r\\n[part~=grid]::-webkit-scrollbar-track {\\r\\n  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);\\r\\n  border-radius: 0.25rem;\\r\\n}\\r\\n\\r\\n[part~=grid]::-webkit-scrollbar-thumb {\\r\\n  background-color: #453C4F;\\r\\n  outline: 1px solid slategrey;\\r\\n  border-radius: 0.25rem;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/grid/grid.css?");
+
+/***/ }),
+
+/***/ "./src/pg/grid/grid.html":
+/*!*******************************!*\
+  !*** ./src/pg/grid/grid.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=\\\"none\\\">\\r\\n  <slot></slot>\\r\\n</div>\\r\\n<pg-scroll part=\\\"scroll\\\">\\r\\n  <div part=\\\"grid\\\"></div>\\r\\n</pg-scroll>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/grid/grid.html?");
+
+/***/ }),
+
+/***/ "./src/pg/grid/grid.ts":
+/*!*****************************!*\
+  !*** ./src/pg/grid/grid.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_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../shared/debounce */ \"./src/pg/shared/debounce.ts\");\n/* harmony import */ var _grid_html__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./grid.html */ \"./src/pg/grid/grid.html\");\n/* harmony import */ var _grid_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./grid.css */ \"./src/pg/grid/grid.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// import { createPopper } from '@popperjs/core';\r\n\r\n\r\n\r\nconst KEY = {\r\n    ArrowUp: 'ArrowUp',\r\n    ArrowRight: 'ArrowRight',\r\n    ArrowDown: 'ArrowDown',\r\n    ArrowLeft: 'ArrowLeft'\r\n};\r\nlet PgGrid = class PgGrid extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.icons = [];\r\n        this.size = 24;\r\n        this.padding = 8;\r\n        this.gap = 4;\r\n        this.width = 'auto';\r\n        this.height = 'auto';\r\n        this.currentCount = 0;\r\n        this.currentSize = 0;\r\n        this.currentPadding = 0;\r\n        this.currentGap = 0;\r\n        this.rowHeight = 0;\r\n        this.items = [];\r\n        this.svg = 'http://www.w3.org/2000/svg';\r\n        this.debounceRender = (0,_shared_debounce__WEBPACK_IMPORTED_MODULE_1__.debounce)(() => this.render({}), 300);\r\n        this.color = 'svg';\r\n        this.resizeObserver = new ResizeObserver(() => {\r\n            this.debounceRender();\r\n        });\r\n        this.index = 0;\r\n        this.hoverLast = 0;\r\n        this.currentRow = 0;\r\n        this.timeouts = [];\r\n        this.cacheHeight = 0;\r\n        this.cacheViewWidth = 0;\r\n        this.canOpenTooltip = true;\r\n        this.preventClose = false;\r\n        this.currentIndex = 0;\r\n    }\r\n    connectedCallback() {\r\n        this.resizeObserver.observe(this.$grid);\r\n        this.addEventListener('mousemove', this.handleTooltip.bind(this));\r\n        this.addEventListener('mouseleave', (e) => {\r\n            this.index = -2;\r\n            this.handleTooltip(e);\r\n        });\r\n        this.$scroll.addEventListener('calculate', (e) => {\r\n            const { offsetY, height, viewWidth, viewHeight } = e.detail;\r\n            this.calculate(offsetY, height, viewWidth, viewHeight);\r\n        });\r\n    }\r\n    /**\r\n     * Simplify all the mouse to usable data.\r\n     *\r\n     * @param e MouseEvent\r\n     */\r\n    getMetaFromMouse(e) {\r\n        const { width, height, gap, extra } = this.getIconMetrics();\r\n        var rect = e.target.getBoundingClientRect();\r\n        const x = e.clientX - rect.left;\r\n        const y = e.clientY - rect.top;\r\n        console.log(x, y);\r\n        const column = this.getColumnFromX(x, width, gap, extra);\r\n        const row = this.getRowFromY(y, height, gap, extra);\r\n        const index = column !== -1 && row !== -1 ? column + (row * this.columns) : -1;\r\n        // First Column + [Other Columns + Extra Space] x column\r\n        const gridX = (width + gap) + ((column - 1) * width) + (column * (gap + extra));\r\n        const gridY = (row * height) + ((row + 1) * gap);\r\n        return {\r\n            gridX,\r\n            gridY,\r\n            x: gridX + rect.left,\r\n            y: gridY + rect.top,\r\n            width,\r\n            height,\r\n            column,\r\n            row,\r\n            gap,\r\n            extra,\r\n            index,\r\n            icon: this.icons[index]\r\n        };\r\n    }\r\n    getColumnFromX(x, width, gap, extra) {\r\n        x = Math.round(x);\r\n        if (x < gap) {\r\n            return -1;\r\n        }\r\n        if (x <= width + gap) {\r\n            return 0;\r\n        }\r\n        const column = Math.floor((x - width - gap) / (width + gap + extra)) + 1;\r\n        const space = x - (column * (width + gap + extra));\r\n        if (space < (gap + extra)) {\r\n            return -1;\r\n        }\r\n        return column;\r\n    }\r\n    getRowFromY(y, height, gap, extra) {\r\n        if (y < gap) {\r\n            return -1;\r\n        }\r\n        if (y <= height + gap) {\r\n            return 0;\r\n        }\r\n        const row = Math.floor((y - height - gap) / (height + gap)) + 1;\r\n        const space = y - (row * (height + gap));\r\n        if (space < gap) {\r\n            return -1;\r\n        }\r\n        return row;\r\n    }\r\n    /**\r\n     * Handle Tooltip\r\n     *\r\n     * this.index\r\n     * -1 = closed\r\n     * -2 = force close\r\n     */\r\n    handleTooltip(e) {\r\n        const mouseMeta = this.getMetaFromMouse(e);\r\n        const { column, index } = mouseMeta;\r\n        if (this.hoverLast >= 0) {\r\n            this.items[this.hoverLast][0].classList.toggle('hover', false);\r\n        }\r\n        var gridIndex = index - (this.currentRow * this.columns);\r\n        if (gridIndex >= 0) {\r\n            this.items[gridIndex][0].classList.toggle('hover', true);\r\n            this.hoverLast = gridIndex;\r\n        }\r\n        if (this.index !== index) {\r\n            if (index === -1 || this.index === -2) {\r\n                mouseMeta.index = this.index;\r\n                this.hideTooltip(this.icons[this.index], mouseMeta);\r\n                this.index = -1;\r\n            }\r\n            else {\r\n                if (this.icons[index]) {\r\n                    if (column > this.columns - 1) {\r\n                        mouseMeta.index = this.index;\r\n                        this.hideTooltip(this.icons[this.index], mouseMeta);\r\n                        this.index = -1;\r\n                    }\r\n                    else {\r\n                        this.showTooltip(this.icons[index], mouseMeta);\r\n                        this.index = index;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    updateHover() {\r\n        this.items[this.index][0].classList.toggle('hover', false);\r\n    }\r\n    syncVirtual(count) {\r\n        for (let i = this.currentCount; i < count; i++) {\r\n            this.currentCount = i + 1;\r\n            const btn = document.createElement('button');\r\n            btn.dataset.index = `${i}`;\r\n            btn.addEventListener('click', () => {\r\n                const index = i + (this.columns * this.currentRow);\r\n                this.handleClick(this.icons[index]);\r\n            });\r\n            btn.addEventListener('keydown', (e) => {\r\n                const index = i + (this.columns * this.currentRow);\r\n                this.moveFocus(e, index);\r\n            });\r\n            btn.addEventListener('contextmenu', (e) => {\r\n                var rect = this.$grid.getBoundingClientRect();\r\n                const x = Math.floor(e.clientX - rect.left);\r\n                const y = Math.floor(e.clientY - rect.top);\r\n                this.showContextMenu(i, x, y);\r\n                e.preventDefault();\r\n            });\r\n            const svg = document.createElementNS(this.svg, 'svg');\r\n            svg.setAttribute('viewBox', '0 0 24 24');\r\n            const path = document.createElementNS(this.svg, 'path');\r\n            svg.appendChild(path);\r\n            btn.appendChild(svg);\r\n            this.$grid.appendChild(btn);\r\n            this.items.push([btn, svg, path]);\r\n        }\r\n        for (let i = this.currentCount; i > count; i--) {\r\n            const ele = this.items.pop();\r\n            this.$grid.removeChild(ele[0]);\r\n            this.currentCount--;\r\n        }\r\n        const { size, padding, gap, width, height, rowHeight, scrollWidth, extra } = this.getIconMetrics();\r\n        let x = gap;\r\n        let y = gap;\r\n        // todo reverse the code above to get the columnIndex\r\n        this.items.forEach(([btn, svg], i) => {\r\n            btn.style.padding = `${padding}px`;\r\n            btn.style.width = `${width}px`;\r\n            btn.style.height = `${height}px`;\r\n            btn.style.transform = `translate(${x}px, ${y}px)`;\r\n            svg.style.width = `${size}px`;\r\n            svg.style.height = `${size}px`;\r\n            x += width + gap + extra;\r\n            if (i % this.columns === this.columns - 1) {\r\n                y += height + gap;\r\n                x = gap;\r\n            }\r\n        });\r\n    }\r\n    calculate(offsetY, height, viewWidth, viewHeight) {\r\n        const rowHeight = this.rowHeight;\r\n        const count = this.icons.length;\r\n        const rows = Math.ceil(viewHeight / rowHeight) + 1;\r\n        const row = Math.floor(offsetY / rowHeight);\r\n        this.$grid.style.transform = `translateY(${-1 * offsetY % rowHeight}px)`;\r\n        if (this.cacheHeight !== height || this.cacheViewWidth !== viewWidth) {\r\n            this.syncVirtual(rows * this.columns);\r\n            this.cacheHeight = height;\r\n            this.cacheViewWidth = viewWidth;\r\n        }\r\n        if (this.currentRow !== row) {\r\n            this.items.forEach(([btn, svg, path], i) => {\r\n                const index = i + (row * this.columns);\r\n                if (index < count) {\r\n                    path.setAttribute('d', this.icons[index].data);\r\n                    btn.style.display = 'block';\r\n                }\r\n                else {\r\n                    btn.style.display = 'none';\r\n                }\r\n            });\r\n            this.currentRow = row;\r\n        }\r\n    }\r\n    getIconMetrics() {\r\n        const size = parseInt(this.size, 10);\r\n        const padding = parseInt(this.padding, 10);\r\n        const gap = parseInt(this.gap, 10);\r\n        const { width: scrollWidth } = this.$scroll.getBoundingClientRect();\r\n        const sizePadding = size + (padding * 2);\r\n        const rowHeight = sizePadding + gap;\r\n        const extra = (scrollWidth - gap - (rowHeight * this.columns)) / (this.columns - 1);\r\n        return {\r\n            size,\r\n            padding,\r\n            gap,\r\n            width: sizePadding,\r\n            height: sizePadding,\r\n            rowHeight,\r\n            extra,\r\n            scrollWidth\r\n        };\r\n    }\r\n    calculateColumns(width, rowHeight) {\r\n        const actualWidth = width - this.currentGap;\r\n        const columns = Math.floor(actualWidth / rowHeight);\r\n        return columns > 0 ? columns : 1;\r\n    }\r\n    render(changes) {\r\n        // Calculate Icon Size\r\n        const { size, padding, gap, rowHeight, scrollWidth } = this.getIconMetrics();\r\n        if (this.currentSize !== size || this.currentPadding !== padding || this.currentGap !== gap) {\r\n            this.currentSize = size;\r\n            this.currentPadding = padding;\r\n            this.currentGap = gap;\r\n            this.rowHeight = rowHeight;\r\n        }\r\n        // Calculate Columns\r\n        const columns = this.calculateColumns(scrollWidth, rowHeight);\r\n        if (this.columns !== columns) {\r\n            this.columns = columns;\r\n        }\r\n        // Virtual Grid\r\n        const count = this.icons.length;\r\n        if (count) {\r\n            const rows = Math.ceil(count / this.columns);\r\n            this.currentRow = -1;\r\n            console.log('---', gap + (rows * rowHeight));\r\n            console.log('init', this.$scroll.height);\r\n            this.$scroll.setAttribute('height', (gap + (rows * rowHeight)).toString());\r\n        }\r\n        else {\r\n            this.$scroll.setAttribute('height', '0');\r\n        }\r\n        this.$none.classList.toggle('show', count === 0);\r\n    }\r\n    moveFocus(e, index) {\r\n        let newIndex;\r\n        switch (e.key) {\r\n            case KEY.ArrowLeft:\r\n                newIndex = index - 1;\r\n                if (newIndex >= 0) {\r\n                    this.items[newIndex][0].focus();\r\n                    e.preventDefault();\r\n                }\r\n                break;\r\n            case KEY.ArrowUp:\r\n                newIndex = index - this.columns;\r\n                if (newIndex >= 0) {\r\n                    this.items[newIndex][0].focus();\r\n                    e.preventDefault();\r\n                }\r\n                break;\r\n            case KEY.ArrowRight:\r\n                newIndex = index + 1;\r\n                if (newIndex < this.icons.length) {\r\n                    this.items[newIndex][0].focus();\r\n                    e.preventDefault();\r\n                }\r\n                break;\r\n            case KEY.ArrowDown:\r\n                newIndex = index + this.columns;\r\n                if (newIndex < this.icons.length) {\r\n                    this.items[newIndex][0].focus();\r\n                    e.preventDefault();\r\n                }\r\n                else if (newIndex !== this.icons.length - 1) {\r\n                    this.items[this.icons.length - 1][0].focus();\r\n                    e.preventDefault();\r\n                }\r\n                break;\r\n        }\r\n    }\r\n    handleClick(icon) {\r\n        this.dispatchEvent(new CustomEvent('select', {\r\n            detail: icon\r\n        }));\r\n    }\r\n    showContextMenu(index, x, y) {\r\n        this.dispatchEvent(new CustomEvent('openmenu'));\r\n    }\r\n    hideContextMenu() {\r\n        this.dispatchEvent(new CustomEvent('closemenu'));\r\n        this.canOpenTooltip = true;\r\n    }\r\n    showTooltip(icon, mouseMeta) {\r\n        if (!this.canOpenTooltip) {\r\n            return;\r\n        }\r\n        this.dispatchEvent(new CustomEvent('entericon', {\r\n            detail: mouseMeta\r\n        }));\r\n    }\r\n    hideTooltip(icon, mouseMeta) {\r\n        this.dispatchEvent(new CustomEvent('leaveicon', {\r\n            detail: mouseMeta\r\n        }));\r\n    }\r\n    getPositionFromIndex(index) {\r\n        return {\r\n            x: index % this.columns,\r\n            y: Math.floor(index / this.columns)\r\n        };\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgGrid.prototype, \"icons\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgGrid.prototype, \"size\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgGrid.prototype, \"padding\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgGrid.prototype, \"gap\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgGrid.prototype, \"width\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgGrid.prototype, \"height\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgGrid.prototype, \"$none\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgGrid.prototype, \"$scroll\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgGrid.prototype, \"$grid\", void 0);\r\nPgGrid = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-grid',\r\n        style: _grid_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\r\n        template: _grid_html__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\r\n    })\r\n], PgGrid);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgGrid);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/grid/grid.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/shared/debounce.ts":
+/*!***********************************!*\
+  !*** ./src/pg/shared/debounce.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 */   \"debounce\": () => (/* binding */ debounce)\n/* harmony export */ });\nconst debounce = (func, waitFor) => {\r\n    let timeout;\r\n    return (...args) => new Promise(resolve => {\r\n        if (timeout) {\r\n            clearTimeout(timeout);\r\n        }\r\n        timeout = setTimeout(() => resolve(func(...args)), waitFor);\r\n    });\r\n};\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/shared/debounce.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/grid/grid.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgHeader.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/header/header.css":
+/*!**********************************!*\
+  !*** ./src/pg/header/header.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\\nheader {\\r\\n  display: grid;\\r\\n  grid-template-columns: auto 1fr;\\r\\n  grid-template-rows: 1fr;\\r\\n  grid-row: 1;\\r\\n  grid-column: 1 / span 2;\\r\\n  background: var(--pg-header-background, #fff);\\r\\n  color: var(--pg-header-color, #453C4F);\\r\\n  font-family: var(--pg-font-family);\\r\\n  height: 3rem;\\r\\n}\\r\\nheader > a {\\r\\n  grid-column: 1;\\r\\n  display: inline-flex;\\r\\n  color: var(--pg-header-color, #453C4F);\\r\\n  text-decoration: none;\\r\\n  align-items: center;\\r\\n}\\r\\nheader > a svg,\\r\\nheader > a slot::slotted(svg) {\\r\\n  display: inline-flex;\\r\\n  width: 1.75rem;\\r\\n  height: 1.75rem;\\r\\n  margin: 0 0.75rem 0 1rem;\\r\\n}\\r\\nheader > a > span {\\r\\n  display: inline-flex;\\r\\n  color: var(--pg-header-color, #453C4F);\\r\\n  font-size: 1.5rem;\\r\\n  margin: 0;\\r\\n  font-weight: normal;\\r\\n  padding-bottom: 1px;\\r\\n}\\r\\nheader > div {\\r\\n  display: flex;\\r\\n  grid-column: 2;\\r\\n  justify-self: right;\\r\\n  margin-right: 1rem;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/header/header.css?");
+
+/***/ }),
+
+/***/ "./src/pg/header/header.html":
+/*!***********************************!*\
+  !*** ./src/pg/header/header.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__ = (\"<header>\\r\\n  <a href=\\\"/\\\">\\r\\n    <slot name=\\\"logo\\\">\\r\\n      <svg viewBox=\\\"0 0 24 24\\\">\\r\\n        <path part=\\\"path\\\" fill=\\\"currentColor\\\" d=\\\"\\\"></path>\\r\\n      </svg>\\r\\n    </slot>\\r\\n    <span part=\\\"name\\\"></span>\\r\\n  </a>\\r\\n  <div>\\r\\n    <slot name=\\\"nav\\\"></slot>\\r\\n    <slot name=\\\"search\\\"></slot>\\r\\n    <slot name=\\\"menu\\\"></slot>\\r\\n  </div>\\r\\n</header>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/header/header.html?");
+
+/***/ }),
+
+/***/ "./src/pg/header/header.ts":
+/*!*********************************!*\
+  !*** ./src/pg/header/header.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 _header_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./header.html */ \"./src/pg/header/header.html\");\n/* harmony import */ var _header_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./header.css */ \"./src/pg/header/header.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 PgHeader = class PgHeader extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.logo = noIcon;\r\n        this.name = 'Default';\r\n    }\r\n    render(changes) {\r\n        if (changes.logo) {\r\n            this.$path.setAttribute('d', this.logo);\r\n        }\r\n        if (changes.name) {\r\n            this.$name.innerText = this.name;\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgHeader.prototype, \"logo\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgHeader.prototype, \"name\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgHeader.prototype, \"$path\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgHeader.prototype, \"$name\", void 0);\r\nPgHeader = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-header',\r\n        style: _header_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _header_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgHeader);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgHeader);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/header/header.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/header/header.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgIcon.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/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/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?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// 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/icon/icon.ts");
+/******/ 	
+/******/ })()
+;