@pictogrammers/components 0.3.1

package/dist/pgColor.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/color/color.css":
+/*!********************************!*\
+  !*** ./src/pg/color/color.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__ = (\"button {\\r\\n  border: 0;\\r\\n  padding: 0;\\r\\n  outline: 0;\\r\\n}\\r\\n\\r\\nbutton.active {\\r\\n  border: 2px solid #fff;\\r\\n  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);\\r\\n  order: 1;\\r\\n}\\r\\n\\r\\nbutton.white.active {\\r\\n  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5) inset;\\r\\n}\\r\\n\\r\\n[part~=grid] {\\r\\n  display: grid;\\r\\n  grid-template-columns: repeat(19, 1rem);\\r\\n  grid-template-rows: repeat(14, 1rem);\\r\\n}\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/color/color.css?");
+
+/***/ }),
+
+/***/ "./src/pg/color/color.html":
+/*!*********************************!*\
+  !*** ./src/pg/color/color.html ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (\"<div part=\\\"grid\\\"></div>\");\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/color/color.html?");
+
+/***/ }),
+
+/***/ "./src/pg/color/color.ts":
+/*!*******************************!*\
+  !*** ./src/pg/color/color.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 _constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./constants */ \"./src/pg/color/constants.ts\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils */ \"./src/pg/color/utils.ts\");\n/* harmony import */ var _color_html__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./color.html */ \"./src/pg/color/color.html\");\n/* harmony import */ var _color_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./color.css */ \"./src/pg/color/color.css\");\nvar __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n};\r\n\r\n\r\n\r\n\r\n\r\nlet PgColor = class PgColor extends HTMLElement {\r\n    constructor() {\r\n        super(...arguments);\r\n        this.value = '#000000';\r\n        this.buttons = [];\r\n        this.isMouseDown = false;\r\n        this.index = -1;\r\n    }\r\n    connectedCallback() {\r\n        _constants__WEBPACK_IMPORTED_MODULE_1__.SWATCHES.forEach((group, groupIndex) => {\r\n            group.colors.forEach((color, colorIndex) => {\r\n                const button = document.createElement('button');\r\n                button.style.background = `#${color.hex}`;\r\n                if (color.name === 'black') {\r\n                    button.style.gridArea = `13 / 17 / 15 / 20`;\r\n                }\r\n                else if (color.name === 'white') {\r\n                    button.style.gridArea = `11 / 17 / 13 / 20`;\r\n                    button.classList.add('white');\r\n                }\r\n                else {\r\n                    button.style.gridRow = `${colorIndex + 1}`;\r\n                    button.style.gridColumn = `${groupIndex + 1}`;\r\n                }\r\n                const index = this.buttons.push([\r\n                    button,\r\n                    `#${color.hex}`,\r\n                    group\r\n                ]);\r\n                button.addEventListener('click', () => {\r\n                    this.handleSelect(index - 1);\r\n                });\r\n                button.addEventListener('mouseenter', () => {\r\n                    if (this.isMouseDown) {\r\n                        this.handleSelect(index - 1);\r\n                    }\r\n                });\r\n                this.$grid.appendChild(button);\r\n            });\r\n        });\r\n        const setToFalse = () => {\r\n            this.isMouseDown = false;\r\n            document.removeEventListener('mouseup', setToFalse);\r\n        };\r\n        this.$grid.addEventListener('mousedown', (e) => {\r\n            this.isMouseDown = true;\r\n            const index = this.buttons.findIndex(([b]) => b === e.target);\r\n            if (index !== -1) {\r\n                this.handleSelect(index);\r\n            }\r\n            document.addEventListener('mouseup', setToFalse);\r\n        });\r\n    }\r\n    handleSelect(index) {\r\n        const [button, hex, group] = this.buttons[index];\r\n        const rgb = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.hexToRgb)(hex);\r\n        this.dispatchEvent(new CustomEvent('select', {\r\n            detail: {\r\n                group,\r\n                hex,\r\n                rgb\r\n            }\r\n        }));\r\n        if (this.index !== -1) {\r\n            const [lastButton] = this.buttons[this.index];\r\n            lastButton.classList.toggle('active', false);\r\n        }\r\n        button.classList.toggle('active', true);\r\n        this.index = index;\r\n    }\r\n    render() {\r\n        if (this.index !== -1) {\r\n            const [lastButton] = this.buttons[this.index];\r\n            lastButton.classList.toggle('active', false);\r\n        }\r\n        const index = this.buttons.findIndex((a) => a[1] === this.value);\r\n        this.index = index;\r\n        if (this.buttons[index]) {\r\n            const [button] = this.buttons[index];\r\n            button.classList.toggle('active', true);\r\n        }\r\n    }\r\n};\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Prop)()\r\n], PgColor.prototype, \"value\", void 0);\r\n__decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Part)()\r\n], PgColor.prototype, \"$grid\", void 0);\r\nPgColor = __decorate([\r\n    (0,_pictogrammers_element__WEBPACK_IMPORTED_MODULE_0__.Component)({\r\n        selector: 'pg-color',\r\n        style: _color_css__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\r\n        template: _color_html__WEBPACK_IMPORTED_MODULE_3__[\"default\"]\r\n    })\r\n], PgColor);\r\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PgColor);\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/color/color.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/color/constants.ts":
+/*!***********************************!*\
+  !*** ./src/pg/color/constants.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 */   \"SWATCHES\": () => (/* binding */ SWATCHES)\n/* harmony export */ });\nconst SWATCHES = [{\r\n        name: 'Red',\r\n        camel: 'red',\r\n        colors: [\r\n            { name: '50', hex: 'FFEBEE' },\r\n            { name: '100', hex: 'FFCDD2' },\r\n            { name: '200', hex: 'EF9A9A' },\r\n            { name: '300', hex: 'E57373' },\r\n            { name: '400', hex: 'EF5350' },\r\n            { name: '500', hex: 'F44336' },\r\n            { name: '600', hex: 'E53935' },\r\n            { name: '700', hex: 'D32F2F' },\r\n            { name: '800', hex: 'C62828' },\r\n            { name: '900', hex: 'B71C1C' },\r\n            { name: 'A100', hex: 'FF8A80' },\r\n            { name: 'A200', hex: 'FF5252' },\r\n            { name: 'A400', hex: 'FF1744' },\r\n            { name: 'A700', hex: 'D50000' }\r\n        ]\r\n    }, {\r\n        name: 'Pink',\r\n        camel: 'pink',\r\n        colors: [\r\n            { name: '50', hex: 'FCE4EC' },\r\n            { name: '100', hex: 'F8BBD0' },\r\n            { name: '200', hex: 'F48FB1' },\r\n            { name: '300', hex: 'F06292' },\r\n            { name: '400', hex: 'EC407A' },\r\n            { name: '500', hex: 'E91E63' },\r\n            { name: '600', hex: 'D81B60' },\r\n            { name: '700', hex: 'C2185B' },\r\n            { name: '800', hex: 'AD1457' },\r\n            { name: '900', hex: '880E4F' },\r\n            { name: 'A100', hex: 'FF80AB' },\r\n            { name: 'A200', hex: 'FF4081' },\r\n            { name: 'A400', hex: 'F50057' },\r\n            { name: 'A700', hex: 'C51162' }\r\n        ]\r\n    }, {\r\n        name: 'Purple',\r\n        camel: 'purple',\r\n        colors: [\r\n            { name: '50', hex: 'F3E5F5' },\r\n            { name: '100', hex: 'E1BEE7' },\r\n            { name: '200', hex: 'CE93D8' },\r\n            { name: '300', hex: 'BA68C8' },\r\n            { name: '400', hex: 'AB47BC' },\r\n            { name: '500', hex: '9C27B0' },\r\n            { name: '600', hex: '8E24AA' },\r\n            { name: '700', hex: '7B1FA2' },\r\n            { name: '800', hex: '6A1B9A' },\r\n            { name: '900', hex: '4A148C' },\r\n            { name: 'A100', hex: 'EA80FC' },\r\n            { name: 'A200', hex: 'E040FB' },\r\n            { name: 'A400', hex: 'D500F9' },\r\n            { name: 'A700', hex: 'AA00FF' }\r\n        ]\r\n    }, {\r\n        name: 'Deep Purple',\r\n        camel: 'deepPurple',\r\n        colors: [\r\n            { name: '50', hex: 'EDE7F6' },\r\n            { name: '100', hex: 'D1C4E9' },\r\n            { name: '200', hex: 'B39DDB' },\r\n            { name: '300', hex: '9575CD' },\r\n            { name: '400', hex: '7E57C2' },\r\n            { name: '500', hex: '673AB7' },\r\n            { name: '600', hex: '5E35B1' },\r\n            { name: '700', hex: '512DA8' },\r\n            { name: '800', hex: '4527A0' },\r\n            { name: '900', hex: '311B92' },\r\n            { name: 'A100', hex: 'B388FF' },\r\n            { name: 'A200', hex: '7C4DFF' },\r\n            { name: 'A400', hex: '651FFF' },\r\n            { name: 'A700', hex: '6200EA' }\r\n        ]\r\n    }, {\r\n        name: 'Indigo',\r\n        camel: 'indigo',\r\n        colors: [\r\n            { name: '50', hex: 'E8EAF6' },\r\n            { name: '100', hex: 'C5CAE9' },\r\n            { name: '200', hex: '9FA8DA' },\r\n            { name: '300', hex: '7986CB' },\r\n            { name: '400', hex: '5C6BC0' },\r\n            { name: '500', hex: '3F51B5' },\r\n            { name: '600', hex: '3949AB' },\r\n            { name: '700', hex: '303F9F' },\r\n            { name: '800', hex: '283593' },\r\n            { name: '900', hex: '1A237E' },\r\n            { name: 'A100', hex: '8C9EFF' },\r\n            { name: 'A200', hex: '536DFE' },\r\n            { name: 'A400', hex: '3D5AFE' },\r\n            { name: 'A700', hex: '304FFE' }\r\n        ]\r\n    }, {\r\n        name: 'Blue',\r\n        camel: 'blue',\r\n        colors: [\r\n            { name: '50', hex: 'E3F2FD' },\r\n            { name: '100', hex: 'BBDEFB' },\r\n            { name: '200', hex: '90CAF9' },\r\n            { name: '300', hex: '64B5F6' },\r\n            { name: '400', hex: '42A5F5' },\r\n            { name: '500', hex: '2196F3' },\r\n            { name: '600', hex: '1E88E5' },\r\n            { name: '700', hex: '1976D2' },\r\n            { name: '800', hex: '1565C0' },\r\n            { name: '900', hex: '0D47A1' },\r\n            { name: 'A100', hex: '82B1FF' },\r\n            { name: 'A200', hex: '448AFF' },\r\n            { name: 'A400', hex: '2979FF' },\r\n            { name: 'A700', hex: '2962FF' }\r\n        ]\r\n    }, {\r\n        name: 'Light Blue',\r\n        camel: 'lightBlue',\r\n        colors: [\r\n            { name: '50', hex: 'E1F5FE' },\r\n            { name: '100', hex: 'B3E5FC' },\r\n            { name: '200', hex: '81D4FA' },\r\n            { name: '300', hex: '4FC3F7' },\r\n            { name: '400', hex: '29B6F6' },\r\n            { name: '500', hex: '03A9F4' },\r\n            { name: '600', hex: '039BE5' },\r\n            { name: '700', hex: '0288D1' },\r\n            { name: '800', hex: '0277BD' },\r\n            { name: '900', hex: '01579B' },\r\n            { name: 'A100', hex: '80D8FF' },\r\n            { name: 'A200', hex: '40C4FF' },\r\n            { name: 'A400', hex: '00B0FF' },\r\n            { name: 'A700', hex: '0091EA' }\r\n        ]\r\n    }, {\r\n        name: 'Cyan',\r\n        camel: 'cyan',\r\n        colors: [\r\n            { name: '50', hex: 'E0F7FA' },\r\n            { name: '100', hex: 'B2EBF2' },\r\n            { name: '200', hex: '80DEEA' },\r\n            { name: '300', hex: '4DD0E1' },\r\n            { name: '400', hex: '26C6DA' },\r\n            { name: '500', hex: '00BCD4' },\r\n            { name: '600', hex: '00ACC1' },\r\n            { name: '700', hex: '0097A7' },\r\n            { name: '800', hex: '00838F' },\r\n            { name: '900', hex: '006064' },\r\n            { name: 'A100', hex: '84FFFF' },\r\n            { name: 'A200', hex: '18FFFF' },\r\n            { name: 'A400', hex: '00E5FF' },\r\n            { name: 'A700', hex: '00B8D4' }\r\n        ]\r\n    }, {\r\n        name: 'Teal',\r\n        camel: 'teal',\r\n        colors: [\r\n            { name: '50', hex: 'E0F2F1' },\r\n            { name: '100', hex: 'B2DFDB' },\r\n            { name: '200', hex: '80CBC4' },\r\n            { name: '300', hex: '4DB6AC' },\r\n            { name: '400', hex: '26A69A' },\r\n            { name: '500', hex: '009688' },\r\n            { name: '600', hex: '00897B' },\r\n            { name: '700', hex: '00796B' },\r\n            { name: '800', hex: '00695C' },\r\n            { name: '900', hex: '004D40' },\r\n            { name: 'A100', hex: 'A7FFEB' },\r\n            { name: 'A200', hex: '64FFDA' },\r\n            { name: 'A400', hex: '1DE9B6' },\r\n            { name: 'A700', hex: '00BFA5' }\r\n        ]\r\n    }, {\r\n        name: 'Green',\r\n        camel: 'green',\r\n        colors: [\r\n            { name: '50', hex: 'E8F5E9' },\r\n            { name: '100', hex: 'C8E6C9' },\r\n            { name: '200', hex: 'A5D6A7' },\r\n            { name: '300', hex: '81C784' },\r\n            { name: '400', hex: '66BB6A' },\r\n            { name: '500', hex: '4CAF50' },\r\n            { name: '600', hex: '43A047' },\r\n            { name: '700', hex: '388E3C' },\r\n            { name: '800', hex: '2E7D32' },\r\n            { name: '900', hex: '1B5E20' },\r\n            { name: 'A100', hex: 'B9F6CA' },\r\n            { name: 'A200', hex: '69F0AE' },\r\n            { name: 'A400', hex: '00E676' },\r\n            { name: 'A700', hex: '00C853' }\r\n        ]\r\n    }, {\r\n        name: 'Light Green',\r\n        camel: 'lightGreen',\r\n        colors: [\r\n            { name: '50', hex: 'F1F8E9' },\r\n            { name: '100', hex: 'DCEDC8' },\r\n            { name: '200', hex: 'C5E1A5' },\r\n            { name: '300', hex: 'AED581' },\r\n            { name: '400', hex: '9CCC65' },\r\n            { name: '500', hex: '8BC34A' },\r\n            { name: '600', hex: '7CB342' },\r\n            { name: '700', hex: '689F38' },\r\n            { name: '800', hex: '558B2F' },\r\n            { name: '900', hex: '33691E' },\r\n            { name: 'A100', hex: 'CCFF90' },\r\n            { name: 'A200', hex: 'B2FF59' },\r\n            { name: 'A400', hex: '76FF03' },\r\n            { name: 'A700', hex: '64DD17' }\r\n        ]\r\n    }, {\r\n        name: 'Lime',\r\n        camel: 'lime',\r\n        colors: [\r\n            { name: '50', hex: 'F9FBE7' },\r\n            { name: '100', hex: 'F0F4C3' },\r\n            { name: '200', hex: 'E6EE9C' },\r\n            { name: '300', hex: 'DCE775' },\r\n            { name: '400', hex: 'D4E157' },\r\n            { name: '500', hex: 'CDDC39' },\r\n            { name: '600', hex: 'C0CA33' },\r\n            { name: '700', hex: 'AFB42B' },\r\n            { name: '800', hex: '9E9D24' },\r\n            { name: '900', hex: '827717' },\r\n            { name: 'A100', hex: 'F4FF81' },\r\n            { name: 'A200', hex: 'EEFF41' },\r\n            { name: 'A400', hex: 'C6FF00' },\r\n            { name: 'A700', hex: 'AEEA00' }\r\n        ]\r\n    }, {\r\n        name: 'Yellow',\r\n        camel: 'yellow',\r\n        colors: [\r\n            { name: '50', hex: 'FFFDE7' },\r\n            { name: '100', hex: 'FFF9C4' },\r\n            { name: '200', hex: 'FFF59D' },\r\n            { name: '300', hex: 'FFF176' },\r\n            { name: '400', hex: 'FFEE58' },\r\n            { name: '500', hex: 'FFEB3B' },\r\n            { name: '600', hex: 'FDD835' },\r\n            { name: '700', hex: 'FBC02D' },\r\n            { name: '800', hex: 'F9A825' },\r\n            { name: '900', hex: 'F57F17' },\r\n            { name: 'A100', hex: 'FFFF8D' },\r\n            { name: 'A200', hex: 'FFFF00' },\r\n            { name: 'A400', hex: 'FFEA00' },\r\n            { name: 'A700', hex: 'FFD600' }\r\n        ]\r\n    }, {\r\n        name: 'Amber',\r\n        camel: 'amber',\r\n        colors: [\r\n            { name: '50', hex: 'FFF8E1' },\r\n            { name: '100', hex: 'FFECB3' },\r\n            { name: '200', hex: 'FFE082' },\r\n            { name: '300', hex: 'FFD54F' },\r\n            { name: '400', hex: 'FFCA28' },\r\n            { name: '500', hex: 'FFC107' },\r\n            { name: '600', hex: 'FFB300' },\r\n            { name: '700', hex: 'FFA000' },\r\n            { name: '800', hex: 'FF8F00' },\r\n            { name: '900', hex: 'FF6F00' },\r\n            { name: 'A100', hex: 'FFE57F' },\r\n            { name: 'A200', hex: 'FFD740' },\r\n            { name: 'A400', hex: 'FFC400' },\r\n            { name: 'A700', hex: 'FFAB00' }\r\n        ]\r\n    }, {\r\n        name: 'Orange',\r\n        camel: 'orange',\r\n        colors: [\r\n            { name: '50', hex: 'FFF3E0' },\r\n            { name: '100', hex: 'FFE0B2' },\r\n            { name: '200', hex: 'FFCC80' },\r\n            { name: '300', hex: 'FFB74D' },\r\n            { name: '400', hex: 'FFA726' },\r\n            { name: '500', hex: 'FF9800' },\r\n            { name: '600', hex: 'FB8C00' },\r\n            { name: '700', hex: 'F57C00' },\r\n            { name: '800', hex: 'EF6C00' },\r\n            { name: '900', hex: 'E65100' },\r\n            { name: 'A100', hex: 'FFD180' },\r\n            { name: 'A200', hex: 'FFAB40' },\r\n            { name: 'A400', hex: 'FF9100' },\r\n            { name: 'A700', hex: 'FF6D00' }\r\n        ]\r\n    }, {\r\n        name: 'Deep Orange',\r\n        camel: 'deepOrange',\r\n        colors: [\r\n            { name: '50', hex: 'FBE9E7' },\r\n            { name: '100', hex: 'FFCCBC' },\r\n            { name: '200', hex: 'FFAB91' },\r\n            { name: '300', hex: 'FF8A65' },\r\n            { name: '400', hex: 'FF7043' },\r\n            { name: '500', hex: 'FF5722' },\r\n            { name: '600', hex: 'F4511E' },\r\n            { name: '700', hex: 'E64A19' },\r\n            { name: '800', hex: 'D84315' },\r\n            { name: '900', hex: 'BF360C' },\r\n            { name: 'A100', hex: 'FF9E80' },\r\n            { name: 'A200', hex: 'FF6E40' },\r\n            { name: 'A400', hex: 'FF3D00' },\r\n            { name: 'A700', hex: 'DD2C00' }\r\n        ]\r\n    }, {\r\n        name: 'Brown',\r\n        camel: 'brown',\r\n        colors: [\r\n            { name: '50', hex: 'EFEBE9' },\r\n            { name: '100', hex: 'D7CCC8' },\r\n            { name: '200', hex: 'BCAAA4' },\r\n            { name: '300', hex: 'A1887F' },\r\n            { name: '400', hex: '8D6E63' },\r\n            { name: '500', hex: '795548' },\r\n            { name: '600', hex: '6D4C41' },\r\n            { name: '700', hex: '5D4037' },\r\n            { name: '800', hex: '4E342E' },\r\n            { name: '900', hex: '3E2723' }\r\n        ]\r\n    }, {\r\n        name: 'Grey',\r\n        camel: 'grey',\r\n        colors: [\r\n            { name: '50', hex: 'FAFAFA' },\r\n            { name: '100', hex: 'F5F5F5' },\r\n            { name: '200', hex: 'EEEEEE' },\r\n            { name: '300', hex: 'E0E0E0' },\r\n            { name: '400', hex: 'BDBDBD' },\r\n            { name: '500', hex: '9E9E9E' },\r\n            { name: '600', hex: '757575' },\r\n            { name: '700', hex: '616161' },\r\n            { name: '800', hex: '424242' },\r\n            { name: '900', hex: '212121' }\r\n        ]\r\n    }, {\r\n        name: 'Blue Grey',\r\n        camel: 'blueGrey',\r\n        colors: [\r\n            { name: '50', hex: 'ECEFF1' },\r\n            { name: '100', hex: 'CFD8DC' },\r\n            { name: '200', hex: 'B0BEC5' },\r\n            { name: '300', hex: '90A4AE' },\r\n            { name: '400', hex: '78909C' },\r\n            { name: '500', hex: '607D8B' },\r\n            { name: '600', hex: '546E7A' },\r\n            { name: '700', hex: '455A64' },\r\n            { name: '800', hex: '37474F' },\r\n            { name: '900', hex: '263238' }\r\n        ]\r\n    }, {\r\n        name: 'Misc',\r\n        camel: '',\r\n        colors: [\r\n            { name: 'white', hex: 'FFFFFF', x: 19, y: 0 },\r\n            { name: 'black', hex: '000000', x: 19, y: 1 }\r\n        ]\r\n    }];\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/color/constants.ts?");
+
+/***/ }),
+
+/***/ "./src/pg/color/utils.ts":
+/*!*******************************!*\
+  !*** ./src/pg/color/utils.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 */   \"cToHex\": () => (/* binding */ cToHex),\n/* harmony export */   \"hexToRgb\": () => (/* binding */ hexToRgb),\n/* harmony export */   \"normalizeHex\": () => (/* binding */ normalizeHex),\n/* harmony export */   \"rgbToHex\": () => (/* binding */ rgbToHex)\n/* harmony export */ });\nfunction hexToRgb(hex) {\r\n    var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n    return result ? {\r\n        r: parseInt(result[1], 16),\r\n        g: parseInt(result[2], 16),\r\n        b: parseInt(result[3], 16)\r\n    } : null;\r\n}\r\n;\r\nfunction normalizeHex(hex) {\r\n    const h = hex.toUpperCase();\r\n    if (h.length === 7) {\r\n        return h;\r\n    }\r\n    else if (h.length === 4) {\r\n        return `#${h[1]}${h[1]}${h[2]}${h[2]}${h[3]}${h[3]}`;\r\n    }\r\n    return '#000000';\r\n}\r\nfunction cToHex(c) {\r\n    var hex = c.toString(16);\r\n    return hex.length == 1 ? \"0\" + hex : hex;\r\n}\r\n;\r\nfunction rgbToHex(r, g, b) {\r\n    return \"#\" + cToHex(r) + cToHex(g) + cToHex(b);\r\n}\r\n;\r\n\n\n//# sourceURL=webpack://@pictogrammers/components/./src/pg/color/utils.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/color/color.ts");
+/******/ 	
+/******/ })()
+;