@pictogrammers/components 0.3.1

package/dist/pgToasts.js

@@ -0,0 +1,136 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./node_modules/@pictogrammers/element/dist/element.esm.js":
+/*!*****************************************************************!*\
+  !*** ./node_modules/@pictogrammers/element/dist/element.esm.js ***!
+  \*****************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"Component\": () => (/* binding */ Component),\n/* harmony export */   \"Local\": () => (/* binding */ Local),\n/* harmony export */   \"Part\": () => (/* binding */ Part),\n/* harmony export */   \"Prop\": () => (/* binding */ Prop),\n/* harmony export */   \"TransmutePart\": () => (/* binding */ TransmutePart),\n/* harmony export */   \"getAttributes\": () => (/* binding */ getAttributes),\n/* harmony export */   \"node\": () => (/* binding */ node),\n/* harmony export */   \"selectComponent\": () => (/* binding */ selectComponent),\n/* harmony export */   \"selectPart\": () => (/* binding */ selectPart)\n/* harmony export */ });\nvar init = Symbol('init');\r\nvar template = Symbol('template');\r\nvar style = Symbol('style');\r\nvar parent = Symbol('parent');\r\nfunction extendTemplate(base, append) {\r\n    if (append && append.match(/<parent\\/>/)) {\r\n        return append.replace(/<parent\\/>/, base);\r\n    }\r\n    else {\r\n        return \"\".concat(base).concat(append || '');\r\n    }\r\n}\r\nfunction camelToDash(str) {\r\n    return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();\r\n}\r\nfunction dashToCamel(str) {\r\n    return str.replace(/-([a-z])/g, function (m) { return m[1].toUpperCase(); });\r\n}\r\nfunction Component(config) {\r\n    if (config === void 0) { config = {}; }\r\n    return function (cls) {\r\n        if (cls.prototype[parent]) {\r\n            cls.prototype[parent].push(cls.prototype);\r\n            cls.prototype[style] = \"\".concat(cls.prototype[style]).concat(config.style);\r\n            cls.prototype[template] = extendTemplate(cls.prototype[template], config.template || null);\r\n        }\r\n        else {\r\n            cls.prototype[parent] = [cls.prototype];\r\n            cls.prototype[style] = config.style || '';\r\n            cls.prototype[template] = config.template || '';\r\n        }\r\n        if (!cls.symbols) {\r\n            cls.symbols = {};\r\n        }\r\n        var connectedCallback = cls.prototype.connectedCallback || (function () { });\r\n        var disconnectedCallback = cls.prototype.disconnectedCallback || (function () { });\r\n        cls.prototype.connectedCallback = function () {\r\n            var _this = this;\r\n            if (!this[init] && !config.template) {\r\n                if (config.useShadow === false) {\r\n                    // Base class with no template\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' });\r\n                }\r\n            }\r\n            else if (!this[init] && config.template) {\r\n                var $template = document.createElement('template');\r\n                $template.innerHTML = \"\".concat(cls.prototype[template], \"<style>\").concat(cls.prototype[style], \"</style>\");\r\n                var $node = document.importNode($template.content, true);\r\n                if (config.useShadow === false) {\r\n                    this.appendChild($node);\r\n                }\r\n                else {\r\n                    this.attachShadow({ mode: 'open' }).appendChild($node);\r\n                }\r\n            }\r\n            else if (this[init] && config.style) {\r\n                /*if (this.shadowRoot) {\r\n                  const style = document.createElement('style');\r\n                  style.appendChild(document.createTextNode(config.style));\r\n                  this.appendChild(style);\r\n                }*/\r\n                // } else if (this[init] && config.template) {\r\n                // This is allowed now via <parent/>\r\n                // throw new Error('template from base class cannot be overriden. Fix: remove template from @Component');\r\n            }\r\n            else if (this[init] && !config.template) {\r\n                throw new Error('You need to pass a template for an extended element.');\r\n            }\r\n            if (this.componentWillMount) {\r\n                this.componentWillMount();\r\n            }\r\n            this[parent].map(function (p) {\r\n                if (p.render) {\r\n                    p.render.call(_this, cls.observedAttributes\r\n                        ? cls.observedAttributes.reduce(function (a, c) {\r\n                            var n = dashToCamel(c);\r\n                            a[n] = true;\r\n                            return a;\r\n                        }, {})\r\n                        : {});\r\n                }\r\n            });\r\n            this[init] = true;\r\n            connectedCallback.call(this);\r\n            if (this.componentDidMount) {\r\n                this.componentDidMount();\r\n            }\r\n        };\r\n        cls.prototype.disconnectedCallback = function () {\r\n            if (this.componentWillUnmount) {\r\n                this.componentWillUnmount();\r\n            }\r\n            disconnectedCallback.call(this);\r\n            if (this.componentDidUnmount) {\r\n                this.componentDidUnmount();\r\n            }\r\n        };\r\n        cls.prototype.attributeChangedCallback = function (name, oldValue, newValue) {\r\n            var normalizedName = dashToCamel(name);\r\n            this[normalizedName] = newValue;\r\n        };\r\n        if (config.selector && !window.customElements.get(config.selector)) {\r\n            window.customElements.define(config.selector, cls);\r\n        }\r\n    };\r\n}\r\nvar transmute = Symbol('transmute');\r\nfunction TransmutePart(part, selector) {\r\n    return function (cls) {\r\n        var _a;\r\n        if (cls.prototype[transmute]) {\r\n            cls.prototype[transmute][part] = selector;\r\n        }\r\n        else {\r\n            cls.prototype[transmute] = (_a = {}, _a[part] = selector, _a);\r\n        }\r\n    };\r\n}\r\nfunction Prop() {\r\n    return function (target, propertyKey, descriptor) {\r\n        var constructor = target.constructor;\r\n        if (!constructor.observedAttributes) {\r\n            constructor.observedAttributes = [];\r\n        }\r\n        var observedAttributes = constructor.observedAttributes;\r\n        if (!constructor.symbols) {\r\n            constructor.symbols = {};\r\n        }\r\n        var symbols = constructor.symbols;\r\n        var normalizedPropertyKey = camelToDash(propertyKey);\r\n        constructor.observedAttributes = observedAttributes.concat([normalizedPropertyKey]);\r\n        var symbol = Symbol(propertyKey);\r\n        symbols[propertyKey] = symbol;\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                return this[symbol];\r\n            },\r\n            set: function (value) {\r\n                var _this = this;\r\n                this[symbol] = value;\r\n                if (this[init]) {\r\n                    this[parent].map(function (p) {\r\n                        var _a;\r\n                        if (p.render) {\r\n                            p.render.call(_this, (_a = {}, _a[propertyKey] = true, _a));\r\n                        }\r\n                    });\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Part() {\r\n    return function (target, propertyKey, descriptor) {\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var _a;\r\n                var key = propertyKey.replace(/^\\$/, '');\r\n                return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(\"[part~=\".concat(key, \"]\"));\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction Local(initialValue, key) {\r\n    if (initialValue === void 0) { initialValue = null; }\r\n    return function (target, propertyKey, descriptor) {\r\n        var getKey = function (self) {\r\n            return (key ? key : \"\".concat(self.constructor.name, \":\").concat(propertyKey));\r\n        };\r\n        Object.defineProperty(target, propertyKey, {\r\n            get: function () {\r\n                var k = getKey(this);\r\n                return window.localStorage.getItem(k) || initialValue;\r\n            },\r\n            set: function (value) {\r\n                var k = getKey(this);\r\n                if (value === null) {\r\n                    window.localStorage.removeItem(k);\r\n                }\r\n                else {\r\n                    window.localStorage.setItem(k, value);\r\n                }\r\n            }\r\n        });\r\n    };\r\n}\r\nfunction node(template, init) {\r\n    var $template = document.createElement('template');\r\n    $template.innerHTML = template;\r\n    var $node = document.importNode($template.content, true);\r\n    for (var _i = 0, _a = Object.entries(init); _i < _a.length; _i++) {\r\n        var _b = _a[_i], part = _b[0], attributes = _b[1];\r\n        var $part = $node.querySelector(\"[part~=\\\"\".concat(part, \"\\\"]\"));\r\n        if ($part) {\r\n            for (var _c = 0, _d = Object.entries(attributes); _c < _d.length; _c++) {\r\n                var _e = _d[_c], prop = _e[0], value = _e[1];\r\n                if (value instanceof Function) {\r\n                    var val = value();\r\n                    if (val === null) {\r\n                        $part.removeAttribute(prop);\r\n                    }\r\n                    else {\r\n                        $part.setAttribute(prop, value());\r\n                    }\r\n                }\r\n                else {\r\n                    $part[prop] = value;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    return $node;\r\n}\r\n// JEST\r\nfunction selectComponent(tag) {\r\n    return document.querySelector(tag);\r\n}\r\nfunction selectPart(component, name) {\r\n    return component.shadowRoot.querySelector(\"[part=\".concat(name, \"]\"));\r\n}\r\nfunction getAttributes(tag) {\r\n    var symbols = customElements.get(tag).symbols;\r\n    return Object.keys(symbols);\r\n}\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./node_modules/@pictogrammers/element/dist/element.esm.js?");
+
+/***/ }),
+
+/***/ "./src/pg/toasts/toasts.css":
+/*!**********************************!*\
+  !*** ./src/pg/toasts/toasts.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__ = (\"[part~=container] {\\r\\n  display: inline-flex;\\r\\n  flex-direction: column;\\r\\n  align-items: flex-end;\\r\\n  position: fixed;\\r\\n  top: 1rem;\\r\\n  right: 1rem;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/toasts/toasts.css?");
+
+/***/ }),
+
+/***/ "./src/pg/toasts/toasts.html":
+/*!***********************************!*\
+  !*** ./src/pg/toasts/toasts.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=\\\"container\\\"></div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/toasts/toasts.html?");
+
+/***/ }),
+
+/***/ "./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?");
+
+/***/ }),
+
+/***/ "./src/pg/toasts/toasts.ts":
+/*!*********************************!*\
+  !*** ./src/pg/toasts/toasts.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_toast__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../shared/toast */ \"./src/pg/shared/toast.ts\");\n/* harmony import */ var _toasts_html__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./toasts.html */ \"./src/pg/toasts/toasts.html\");\n/* harmony import */ var _toasts_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./toasts.css */ \"./src/pg/toasts/toasts.css\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\n\r\n\r\nlet PgToasts = class PgToasts extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.toasts = [];\r\n    }\r\n    connectedCallback() {\r\n        (0,_shared_toast__WEBPACK_IMPORTED_MODULE_1__.observeToasts)({\r\n            add: (toast) => {\r\n                this.toasts.push(toast);\r\n                this.render();\r\n            },\r\n            remove: (key) => {\r\n                var _a;\r\n                const index = this.toasts.findIndex(t => t.key === key);\r\n                if (index !== -1) {\r\n                    var [toast] = this.toasts.splice(index, 1);\r\n                    (_a = this.$container.querySelector(`[key=\"${toast.key}\"]`)) === null || _a === void 0 ? void 0 : _a.remove();\r\n                }\r\n            }\r\n        });\r\n    }\r\n    render() {\r\n        this.toasts.forEach((toast) => {\r\n            const existing = this.$container.querySelector(`[key=\"${toast.key}\"]`);\r\n            if (existing) {\r\n                existing.message = toast.message;\r\n                existing.loading = toast.loading;\r\n                existing.type = toast.type;\r\n            }\r\n            else {\r\n                const ele = document.createElement('pg-toast');\r\n                ele.setAttribute('key', toast.key);\r\n                ele.message = toast.message;\r\n                ele.loading = toast.loading;\r\n                ele.type = toast.type;\r\n                this.$container.appendChild(ele);\r\n            }\r\n        });\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgToasts.prototype, \"$container\", void 0);\r\nPgToasts = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-toasts',\r\n        style: _toasts_css__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\r\n        template: _toasts_html__WEBPACK_IMPORTED_MODULE_2__[\"default\"]\r\n    })\r\n], PgToasts);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgToasts);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/toasts/toasts.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/toasts/toasts.ts");
+/******/ 	
+/******/ })()
+;

package/dist/pgTooltip.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/tooltip/tooltip.css":
+/*!************************************!*\
+  !*** ./src/pg/tooltip/tooltip.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  pointer-events: none;\\r\\n}\\r\\n\\r\\n[part~=tooltip] {\\r\\n  position: relative;\\r\\n}\\r\\n\\r\\n[part~=tooltipText] {\\r\\n  position: absolute;\\r\\n  background: #737E9E;\\r\\n  border-radius: 0.25rem;\\r\\n  color: #FFF;\\r\\n  padding: 0.15rem 0.5rem 0.3rem 0.5rem;\\r\\n  white-space: nowrap;\\r\\n  left: 0;\\r\\n  top: 0;\\r\\n}\\r\\n\\r\\n[part~=tooltipArrow] {\\r\\n  left: 16px;\\r\\n  top: -7px;\\r\\n}\\r\\n\\r\\n[part~=tooltipArrow],\\r\\n[part~=tooltipArrow]::before {\\r\\n  position: absolute;\\r\\n  width: 10px;\\r\\n  height: 10px;\\r\\n}\\r\\n\\r\\n[part~=tooltipArrow]::before {\\r\\n  content: '';\\r\\n  transform: rotate(45deg);\\r\\n  background: #737E9E;\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/tooltip/tooltip.css?");
+
+/***/ }),
+
+/***/ "./src/pg/tooltip/tooltip.html":
+/*!*************************************!*\
+  !*** ./src/pg/tooltip/tooltip.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=\\\"tooltip\\\">\\r\\n  <span part=\\\"tooltipText\\\"></span>\\r\\n  <div part=\\\"tooltipArrow\\\"></div>\\r\\n</div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/tooltip/tooltip.html?");
+
+/***/ }),
+
+/***/ "./src/pg/tooltip/position.ts":
+/*!************************************!*\
+  !*** ./src/pg/tooltip/position.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 */   \"BOTTOM\": () => (/* binding */ BOTTOM),\n/* harmony export */   \"BOTTOM_END\": () => (/* binding */ BOTTOM_END),\n/* harmony export */   \"BOTTOM_START\": () => (/* binding */ BOTTOM_START),\n/* harmony export */   \"LEFT\": () => (/* binding */ LEFT),\n/* harmony export */   \"LEFT_END\": () => (/* binding */ LEFT_END),\n/* harmony export */   \"LEFT_START\": () => (/* binding */ LEFT_START),\n/* harmony export */   \"RIGHT\": () => (/* binding */ RIGHT),\n/* harmony export */   \"RIGHT_END\": () => (/* binding */ RIGHT_END),\n/* harmony export */   \"RIGHT_START\": () => (/* binding */ RIGHT_START),\n/* harmony export */   \"TOP\": () => (/* binding */ TOP),\n/* harmony export */   \"TOP_END\": () => (/* binding */ TOP_END),\n/* harmony export */   \"TOP_START\": () => (/* binding */ TOP_START)\n/* harmony export */ });\nconst TOP = 'top';\r\nconst TOP_START = 'top-start';\r\nconst TOP_END = 'top-end';\r\nconst RIGHT = 'right';\r\nconst RIGHT_START = 'right-start';\r\nconst RIGHT_END = 'right-end';\r\nconst BOTTOM = 'bottom';\r\nconst BOTTOM_START = 'bottom-start';\r\nconst BOTTOM_END = 'bottom-end';\r\nconst LEFT = 'left';\r\nconst LEFT_START = 'left-start';\r\nconst LEFT_END = 'left-end';\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/tooltip/position.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/tooltip/tooltip.ts":
+/*!***********************************!*\
+  !*** ./src/pg/tooltip/tooltip.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 _tooltip_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./tooltip.html */ \"./src/pg/tooltip/tooltip.html\");\n/* harmony import */ var _tooltip_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./tooltip.css */ \"./src/pg/tooltip/tooltip.css\");\n/* harmony import */ var _position__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./position */ \"./src/pg/tooltip/position.ts\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\n\r\n\r\nconst map = {\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.TOP_START]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: height - 5,\r\n            arrowLeft: rect.width > width\r\n                ? Math.floor(width / 2) - 5\r\n                : Math.floor(rect.width / 2) - 5,\r\n            left: rect.left,\r\n            top: rect.top - height - 10\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.TOP]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: height - 5,\r\n            arrowLeft: Math.floor(width / 2) - 5,\r\n            left: rect.left - Math.floor((width - rect.width) / 2),\r\n            top: rect.top - height - 10\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.TOP_END]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: height - 5,\r\n            arrowLeft: rect.width > width\r\n                ? width - Math.floor(width / 2) - 5\r\n                : width - Math.floor(rect.width / 2) - 5,\r\n            left: rect.left - width + rect.width,\r\n            top: rect.top - height - 10\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.RIGHT_START]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: Math.floor(height / 2) - 5,\r\n            arrowLeft: -5,\r\n            left: rect.left + rect.width + 10,\r\n            top: rect.top\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.RIGHT]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: Math.floor(height / 2) - 5,\r\n            arrowLeft: -5,\r\n            left: rect.left + rect.width + 10,\r\n            top: rect.top + Math.floor(rect.height / 2) - Math.floor(height / 2)\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.RIGHT_END]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: Math.floor(height / 2) - 5,\r\n            arrowLeft: -5,\r\n            left: rect.left + rect.width + 10,\r\n            top: rect.top + rect.height - height\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.BOTTOM_START]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: -5,\r\n            arrowLeft: rect.width > width\r\n                ? Math.floor(width / 2) - 5\r\n                : Math.floor(rect.width / 2) - 5,\r\n            left: rect.left,\r\n            top: rect.top + rect.height + height - 20\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.BOTTOM]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: -5,\r\n            arrowLeft: Math.floor(width / 2) - 5,\r\n            left: rect.left - Math.floor((width - rect.width) / 2),\r\n            top: rect.top + rect.height + height - 20\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.BOTTOM_END]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: -5,\r\n            arrowLeft: rect.width > width\r\n                ? width - Math.floor(width / 2) - 5\r\n                : width - Math.floor(rect.width / 2) - 5,\r\n            left: rect.left - width + rect.width,\r\n            top: rect.top + rect.height + height - 20\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.LEFT_START]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: Math.floor(height / 2) - 5,\r\n            arrowLeft: width - 5,\r\n            left: rect.left - width - 10,\r\n            top: rect.top\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.LEFT]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: Math.floor(height / 2) - 5,\r\n            arrowLeft: width - 5,\r\n            left: rect.left - width - 10,\r\n            top: rect.top + Math.floor(rect.height / 2) - Math.floor(height / 2)\r\n        };\r\n    },\r\n    [_position__WEBPACK_IMPORTED_MODULE_3__.LEFT_END]: (width, height, rect) => {\r\n        return {\r\n            arrowTop: Math.floor(height / 2) - 5,\r\n            arrowLeft: width - 5,\r\n            left: rect.left - width - 10,\r\n            top: rect.top + rect.height - height\r\n        };\r\n    }\r\n};\r\nlet PgTooltip = class PgTooltip extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.visible = false;\r\n        this.rect = null;\r\n        this.text = '';\r\n        this.position = _position__WEBPACK_IMPORTED_MODULE_3__.BOTTOM;\r\n    }\r\n    render(changes) {\r\n        this.$tooltipText.innerText = this.text;\r\n        this.style.position = 'absolute';\r\n        if (changes.visible) {\r\n            this.style.display = this.visible ? 'block' : 'none';\r\n        }\r\n        const { width: tooltipWidth, height: tooltipHeight } = this.$tooltipText.getBoundingClientRect();\r\n        let position = this.position;\r\n        if (!(position in map)) {\r\n            position = _position__WEBPACK_IMPORTED_MODULE_3__.BOTTOM;\r\n        }\r\n        if (this.rect) {\r\n            const { arrowLeft, arrowTop, left, top } = map[position](tooltipWidth, tooltipHeight, this.rect);\r\n            this.style.left = `${left + window.scrollX}px`;\r\n            this.style.top = `${top + window.scrollY}px`;\r\n            this.$tooltipArrow.style.left = `${arrowLeft}px`;\r\n            this.$tooltipArrow.style.top = `${arrowTop}px`;\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgTooltip.prototype, \"visible\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgTooltip.prototype, \"rect\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgTooltip.prototype, \"text\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgTooltip.prototype, \"position\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgTooltip.prototype, \"$tooltip\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgTooltip.prototype, \"$tooltipText\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgTooltip.prototype, \"$tooltipArrow\", void 0);\r\nPgTooltip = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-tooltip',\r\n        style: _tooltip_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\r\n        template: _tooltip_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"]\r\n    })\r\n], PgTooltip);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgTooltip);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/tooltip/tooltip.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/tooltip/tooltip.ts");
+/******/ 	
+/******/ })()
+;

package/index.html

@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="shortcut icon" type="image/png" href="favicon.png"/>
+  <title>Pictogrammers Components</title>
+  <style>
+    :root {
+      --pg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      --pg-icon-color: #453C4F;
+      --pg-header-color: #453C4F;
+      --pg-header-background: #fff;
+      --pg-search-border-color: #453C4F;
+      --pg-dropdown-border-color: #453C4F;
+    }
+    body {
+      margin: 0;
+      font-family: var(--pg-font-family);
+    }
+    .wrapper {
+      display: grid;
+      grid-template-columns: 12rem calc(100% - 12rem);
+      grid-template-rows: 3rem auto;
+    }
+    code {
+      font-family: 'Consolas', 'Courier New', Courier, monospace;
+      border: 1px solid #ddd;
+      padding: 0.15rem 0.25rem;
+      border-radius: 0.25rem;
+    }
+    header {
+      display: flex;
+      grid-row: 1;
+      grid-column: 1 / span 2;
+      background: #453C4F;
+      color: #FFF;
+      align-items: center;
+    }
+    header > svg {
+      display: inline-flex;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin: 0 0.75rem 0 1rem;
+    }
+    header > h1 {
+      display: inline-flex;
+      color: #FFF;
+      font-size: 1.5rem;
+      margin: 0;
+      font-weight: normal;
+    }
+    aside {
+      grid-row: 2;
+      grid-column: 1;
+      padding: 1rem;
+    }
+    aside > div {
+      font-weight: bold;;
+    }
+    aside > ul {
+      list-style: none;
+      padding: 0 0 0 0.5rem;
+      line-height: 1.5rem;
+      margin: 0.5rem 0;
+    }
+    aside > ul > li {
+      margin-bottom: 0.25rem;
+    }
+
+    aside a {
+      position: relative;
+      color: #414F56;
+      text-decoration: none;
+    }
+    aside a:hover {
+      text-decoration: underline;
+    }
+    main {
+      grid-row: 2;
+      grid-column: 2;
+      padding: 0 1rem 1rem 1rem;
+    }
+    main > p {
+      line-height: 1.5rem;
+    }
+    main > section {
+      padding: 1.5rem 1rem 1rem 1rem;
+      border-radius: 0.5rem;
+      border: 1px solid #ccc;
+      margin-top: 2rem;
+    }
+    main > h2 {
+      position: relative;
+      margin: 1.5rem 0 0.5rem 0;
+      border-bottom: 1px solid #ddd;
+      padding-bottom: 0.5rem;
+      font-size: 1.5rem;
+      font-weight: normal;
+    }
+    main > h2.open {
+      border-bottom: none;
+    }
+    main > h2 > a {
+      text-decoration: none;
+      color: #aaa;
+    }
+    main > h2 > a:hover {
+      color: #453C4F;
+    }
+    main > h2 > a > svg {
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+      margin-top: -2px;
+    }
+    main > h2 > button {
+      margin: 0;
+      border-radius: 0.25rem 0.25rem 0 0;
+      border: 1px solid #ccc;
+      background: #fff;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      bottom: -1px;
+      right: 0.5rem;
+      color: #453C4F;
+      outline: none;
+    }
+    main > h2 > button.active,
+    main > h2 > button:focus,
+    main > h2 > button:hover {
+      background: #453C4F;
+      border-top-color: #453C4F;
+      border-right-color: #453C4F;
+      border-bottom-color: transparent;
+      border-left-color: #453C4F;
+      color: #fff;
+    }
+    main > h2 > button:focus::before {
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      left: -1px;
+      border-radius: 0.25rem 0.25rem 0 0;
+      box-shadow: 0 0 0 3px var(--pg-search-focus-glow, rgb(79, 143, 249, 0.6));
+    }
+    main > h2 > button > svg {
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+    }
+    main > h2 > button + span.line {
+      display: none;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -0.25rem;
+      height: 0.25rem;
+      background: transparent;
+      transition: background-color linear 0.2s;
+    }
+    main > h2 > button:not(.active):focus + span.line,
+    main > h2 > button:not(.active):hover + span.line {
+      display: block;
+      background: #453C4F;
+    }
+    main > h2 > span.label {
+      padding: 0.75rem 0.5rem 0.5rem 0.25rem;
+      font-size: 1rem;
+      display: inline;
+      color: #aaa;
+      position: absolute;
+      right: 4rem;
+    }
+    main > div.markdown {
+      display: none;
+    }
+    main > div.markdown > *:first-child {
+      border: 0.25rem solid #453C4F;
+      margin-top: -0.5rem;
+      padding: 0 1rem;
+      border-radius: 0.5rem;
+    }
+    main > div.markdown.show {
+      display: block;
+    }
+    main > section > h3 {
+      font-size: 1.25rem;
+      font-weight: normal;
+      padding: 0;
+      display: inline-block;
+      position: absolute;
+      margin: -2.5rem 0 0 1rem;
+    }
+    main > section > h3::before {
+      content: ' ';
+      background: #fff;
+      left: -1rem;
+      right: -1rem;
+      position: absolute;
+      border-radius: 0 0 0.5rem 0.5rem;
+      margin: 0;
+      height: 1rem;
+      border-bottom: 1px solid #ccc;
+      border-left: 1px solid #ccc;
+      border-right: 1px solid #ccc;
+    top: calc(1rem - 1px);
+    }
+    main > section > h3 > span {
+      position: relative;
+    }
+    h1 small,
+    h2 small,
+    h3 small {
+      color: #999;
+      font-weight: normal;
+      font-size: 0.875rem;
+    }
+    .example {
+      vertical-align: top;
+      background: #F1F1F1;
+      border-radius: 0.25rem;
+      border: 1px dashed #222;
+      padding: 0.5rem;
+      margin-bottom: 0.5rem;
+      margin-right: 1rem;
+      box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) inset;
+    }
+    .example-flex {
+      display: flex;
+    }
+    body > button {
+      border: 1px solid #DDD;
+      background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+      color: #24292e;
+      border: 1px solid rgba(27,31,35,.2);
+      border-radius: .25em;
+      padding: 0.25rem 0.4rem 0.2rem 0.4rem;
+    }
+    body > button:hover {
+      background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+      background-position: -.5em;
+      border-color: rgba(27,31,35,.35);
+    }
+  </style>
+</head>
+
+<body>
+  <script>
+    var markdownCache = {};
+    function markdown(name, text) {
+      var h2 = document.getElementById(`${name}H2`);
+      var readme = document.getElementById(`${name}Readme`);
+      var container = document.getElementById(`${name}Container`);
+      readme.addEventListener('click', function () {
+        // Create
+        if (!(name in markdownCache)) {
+          var element = document.createElement('pg-markdown');
+          container.appendChild(element);
+          element.text = text;
+          markdownCache[name] = false;
+        }
+        // Flip
+        markdownCache[name] = !markdownCache[name];
+        h2.classList.toggle('open', markdownCache[name]);
+        readme.classList.toggle('active', markdownCache[name]);
+        container.classList.toggle('show', markdownCache[name]);
+      });
+    }
+  </script>
+  <div class="wrapper">
+    <header>
+      <svg viewBox="0 0 24 24">
+        <path fill="currentColor" d="M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z" />
+      </svg>
+      <h1>Pictogrammers Components</h1>
+    </header>
+    <aside>
+      <div>Components</div>
+      <ul>
+        <!-- [ListComponents] -->
+      </ul>
+      <div>Overlays</div>
+      <ul>
+        <!-- [ListOverlays] -->
+      </ul>
+      <div>Shared</div>
+      <ul>
+        <!-- [ListShared] -->
+      </ul>
+    </aside>
+    <main>
+      <p>This page is generated from <code>npm start</code>. To render only specific components use <code>npm start pg-button</code>.</p>
+
+      <!-- [Examples] -->
+    </main>
+  </div>
+  <script src="main.js"></script>
+</body>
+</html>