omim
Version:
Material Design for Omi.
806 lines (750 loc) • 93.2 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("omi"));
else if(typeof define === 'function' && define.amd)
define(["omi"], factory);
else if(typeof exports === 'object')
exports["MColorPicker"] = factory(require("omi"));
else
root["MColorPicker"] = factory(root["Omi"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/color-picker/index.tsx");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/color-picker/index.scss":
/*!**************************************************************************************************************************************************!*\
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/color-picker/index.scss ***!
\**************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
// imports
// module
exports.push([module.i, ".pickr {\n position: relative;\n overflow: visible;\n transform: translateY(0); }\n .pickr * {\n box-sizing: border-box; }\n\n.pickr .pcr-button {\n position: relative;\n height: 2em;\n width: 2em;\n padding: 0.5em;\n cursor: pointer;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", Arial, sans-serif;\n border-radius: 0.15em;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>') no-repeat center;\n background-size: 0;\n transition: all 0.3s; }\n .pickr .pcr-button::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1; }\n .pickr .pcr-button::before {\n z-index: initial; }\n .pickr .pcr-button::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transition: background 0.3s;\n background: currentColor;\n border-radius: 0.15em; }\n .pickr .pcr-button.clear {\n background-size: 70%; }\n .pickr .pcr-button.clear::before {\n opacity: 0; }\n .pickr .pcr-button.clear:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor; }\n .pickr .pcr-button.disabled {\n cursor: not-allowed; }\n\n.pickr input,\n.pickr button,\n.pcr-app input,\n.pcr-app button {\n outline: none;\n border: none;\n -webkit-appearance: none; }\n .pickr input:focus,\n .pickr button:focus,\n .pcr-app input:focus,\n .pcr-app button:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor; }\n\n.pcr-app {\n position: fixed;\n display: flex;\n flex-direction: column;\n z-index: 10000;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", Arial, sans-serif;\n box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);\n width: 22.5em;\n max-width: 95vw;\n padding: 0.8em;\n border-radius: 0.1em;\n background: #fff;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s;\n left: 0;\n top: 0; }\n .pcr-app.visible {\n visibility: visible;\n opacity: 1; }\n\n.pcr-app .pcr-swatches {\n display: flex;\n flex-wrap: wrap;\n margin-top: 0.75em; }\n .pcr-app .pcr-swatches.pcr-last {\n margin: 0; }\n @supports (display: grid) {\n .pcr-app .pcr-swatches {\n display: grid;\n align-items: center;\n justify-content: space-around;\n grid-template-columns: repeat(auto-fit, 1.75em); } }\n .pcr-app .pcr-swatches > button {\n position: relative;\n width: 1.75em;\n height: 1.75em;\n border-radius: 0.15em;\n cursor: pointer;\n margin: 2.5px;\n flex-shrink: 0;\n justify-self: center;\n transition: all 0.15s;\n overflow: hidden;\n background: transparent;\n z-index: 1; }\n .pcr-app .pcr-swatches > button::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 6px;\n border-radius: 0.15em;\n z-index: -1; }\n .pcr-app .pcr-swatches > button::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: currentColor;\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 0.15em;\n box-sizing: border-box; }\n .pcr-app .pcr-swatches > button:hover {\n filter: brightness(1.05); }\n\n.pcr-app .pcr-interaction {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin: 0 -0.2em 0 -0.2em; }\n .pcr-app .pcr-interaction > * {\n margin: 0 0.2em; }\n .pcr-app .pcr-interaction input {\n letter-spacing: 0.07em;\n font-size: 0.75em;\n text-align: center;\n cursor: pointer;\n color: #75797e;\n background: #f1f3f4;\n border-radius: 0.15em;\n transition: all 0.15s;\n padding: 0.45em 0.5em;\n margin-top: 0.75em; }\n .pcr-app .pcr-interaction input:hover {\n filter: brightness(0.975); }\n .pcr-app .pcr-interaction input:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, 0.75); }\n .pcr-app .pcr-interaction .pcr-result {\n color: #75797e;\n text-align: left;\n flex: 1 1 8em;\n min-width: 8em;\n transition: all 0.2s;\n border-radius: 0.15em;\n background: #f1f3f4;\n cursor: text; }\n .pcr-app .pcr-interaction .pcr-result::selection {\n background: #4285f4;\n color: #fff; }\n .pcr-app .pcr-interaction .pcr-type.active {\n color: #fff;\n background: #4285f4; }\n .pcr-app .pcr-interaction .pcr-clear,\n .pcr-app .pcr-interaction .pcr-save {\n color: #fff;\n width: auto; }\n .pcr-app .pcr-interaction .pcr-save,\n .pcr-app .pcr-interaction .pcr-clear {\n color: #fff; }\n .pcr-app .pcr-interaction .pcr-save:hover,\n .pcr-app .pcr-interaction .pcr-clear:hover {\n filter: brightness(0.925); }\n .pcr-app .pcr-interaction .pcr-save {\n background: #4285f4; }\n .pcr-app .pcr-interaction .pcr-clear {\n background: #f44250; }\n .pcr-app .pcr-interaction .pcr-clear:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, 0.75); }\n\n.pcr-app .pcr-selection {\n display: flex;\n justify-content: space-between;\n flex-grow: 1; }\n .pcr-app .pcr-selection .pcr-picker {\n position: absolute;\n height: 18px;\n width: 18px;\n border: 2px solid #fff;\n border-radius: 100%;\n user-select: none; }\n .pcr-app .pcr-selection .pcr-color-preview {\n position: relative;\n z-index: 1;\n width: 2em;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-right: 0.75em; }\n .pcr-app .pcr-selection .pcr-color-preview::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1; }\n .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color {\n cursor: pointer;\n transition: background-color 0.3s, box-shadow 0.3s;\n border-radius: 0.15em 0.15em 0 0;\n z-index: 2; }\n .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color {\n border-radius: 0 0 0.15em 0.15em; }\n .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color,\n .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color {\n background: currentColor;\n width: 100%;\n height: 50%; }\n .pcr-app .pcr-selection .pcr-color-palette,\n .pcr-app .pcr-selection .pcr-color-chooser,\n .pcr-app .pcr-selection .pcr-color-opacity {\n position: relative;\n user-select: none;\n display: flex;\n flex-direction: column;\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab; }\n .pcr-app .pcr-selection .pcr-color-palette:active,\n .pcr-app .pcr-selection .pcr-color-chooser:active,\n .pcr-app .pcr-selection .pcr-color-opacity:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing; }\n .pcr-app .pcr-selection .pcr-color-palette {\n width: 100%;\n height: 8em;\n z-index: 1; }\n .pcr-app .pcr-selection .pcr-color-palette .pcr-palette {\n flex-grow: 1;\n border-radius: 0.15em; }\n .pcr-app .pcr-selection .pcr-color-palette .pcr-palette::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1; }\n .pcr-app .pcr-selection .pcr-color-chooser,\n .pcr-app .pcr-selection .pcr-color-opacity {\n margin-left: 0.75em; }\n .pcr-app .pcr-selection .pcr-color-chooser .pcr-picker,\n .pcr-app .pcr-selection .pcr-color-opacity .pcr-picker {\n left: 50%;\n transform: translateX(-50%); }\n .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider,\n .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider {\n width: 8px;\n flex-grow: 1;\n border-radius: 50em; }\n .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider {\n background: linear-gradient(to bottom, red, yellow, lime, cyan, blue, magenta, red); }\n .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider {\n background: linear-gradient(to bottom, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 100%, 50%; }\n", ""]);
// exports
/***/ }),
/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/color-picker/scss/pickr.scss":
/*!*******************************************************************************************************************************************************!*\
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-3!./src/color-picker/scss/pickr.scss ***!
\*******************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
// imports
// module
exports.push([module.i, ".pickr {\n position: relative;\n overflow: visible;\n transform: translateY(0); }\n .pickr * {\n box-sizing: border-box; }\n\n.pickr .pcr-button {\n position: relative;\n height: 2em;\n width: 2em;\n padding: 0.5em;\n cursor: pointer;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", Arial, sans-serif;\n border-radius: 0.15em;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\" stroke=\"%2342445A\" stroke-width=\"5px\" stroke-linecap=\"round\"><path d=\"M45,45L5,5\"></path><path d=\"M45,5L5,45\"></path></svg>') no-repeat center;\n background-size: 0;\n transition: all 0.3s; }\n .pickr .pcr-button::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1; }\n .pickr .pcr-button::before {\n z-index: initial; }\n .pickr .pcr-button::after {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transition: background 0.3s;\n background: currentColor;\n border-radius: 0.15em; }\n .pickr .pcr-button.clear {\n background-size: 70%; }\n .pickr .pcr-button.clear::before {\n opacity: 0; }\n .pickr .pcr-button.clear:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor; }\n .pickr .pcr-button.disabled {\n cursor: not-allowed; }\n\n.pickr input,\n.pickr button,\n.pcr-app input,\n.pcr-app button {\n outline: none;\n border: none;\n -webkit-appearance: none; }\n .pickr input:focus,\n .pickr button:focus,\n .pcr-app input:focus,\n .pcr-app button:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px currentColor; }\n\n.pcr-app {\n position: fixed;\n display: flex;\n flex-direction: column;\n z-index: 10000;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", Arial, sans-serif;\n box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);\n width: 22.5em;\n max-width: 95vw;\n padding: 0.8em;\n border-radius: 0.1em;\n background: #fff;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s;\n left: 0;\n top: 0; }\n .pcr-app.visible {\n visibility: visible;\n opacity: 1; }\n\n.pcr-app .pcr-swatches {\n display: flex;\n flex-wrap: wrap;\n margin-top: 0.75em; }\n .pcr-app .pcr-swatches.pcr-last {\n margin: 0; }\n @supports (display: grid) {\n .pcr-app .pcr-swatches {\n display: grid;\n align-items: center;\n justify-content: space-around;\n grid-template-columns: repeat(auto-fit, 1.75em); } }\n .pcr-app .pcr-swatches > button {\n position: relative;\n width: 1.75em;\n height: 1.75em;\n border-radius: 0.15em;\n cursor: pointer;\n margin: 2.5px;\n flex-shrink: 0;\n justify-self: center;\n transition: all 0.15s;\n overflow: hidden;\n background: transparent;\n z-index: 1; }\n .pcr-app .pcr-swatches > button::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 6px;\n border-radius: 0.15em;\n z-index: -1; }\n .pcr-app .pcr-swatches > button::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: currentColor;\n border: 1px solid rgba(0, 0, 0, 0.05);\n border-radius: 0.15em;\n box-sizing: border-box; }\n .pcr-app .pcr-swatches > button:hover {\n filter: brightness(1.05); }\n\n.pcr-app .pcr-interaction {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n margin: 0 -0.2em 0 -0.2em; }\n .pcr-app .pcr-interaction > * {\n margin: 0 0.2em; }\n .pcr-app .pcr-interaction input {\n letter-spacing: 0.07em;\n font-size: 0.75em;\n text-align: center;\n cursor: pointer;\n color: #75797e;\n background: #f1f3f4;\n border-radius: 0.15em;\n transition: all 0.15s;\n padding: 0.45em 0.5em;\n margin-top: 0.75em; }\n .pcr-app .pcr-interaction input:hover {\n filter: brightness(0.975); }\n .pcr-app .pcr-interaction input:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(66, 133, 244, 0.75); }\n .pcr-app .pcr-interaction .pcr-result {\n color: #75797e;\n text-align: left;\n flex: 1 1 8em;\n min-width: 8em;\n transition: all 0.2s;\n border-radius: 0.15em;\n background: #f1f3f4;\n cursor: text; }\n .pcr-app .pcr-interaction .pcr-result::selection {\n background: #4285f4;\n color: #fff; }\n .pcr-app .pcr-interaction .pcr-type.active {\n color: #fff;\n background: #4285f4; }\n .pcr-app .pcr-interaction .pcr-clear,\n .pcr-app .pcr-interaction .pcr-save {\n color: #fff;\n width: auto; }\n .pcr-app .pcr-interaction .pcr-save,\n .pcr-app .pcr-interaction .pcr-clear {\n color: #fff; }\n .pcr-app .pcr-interaction .pcr-save:hover,\n .pcr-app .pcr-interaction .pcr-clear:hover {\n filter: brightness(0.925); }\n .pcr-app .pcr-interaction .pcr-save {\n background: #4285f4; }\n .pcr-app .pcr-interaction .pcr-clear {\n background: #f44250; }\n .pcr-app .pcr-interaction .pcr-clear:focus {\n box-shadow: 0 0 0 1px #f1f3f4, 0 0 0 3px rgba(244, 66, 80, 0.75); }\n\n.pcr-app .pcr-selection {\n display: flex;\n justify-content: space-between;\n flex-grow: 1; }\n .pcr-app .pcr-selection .pcr-picker {\n position: absolute;\n height: 18px;\n width: 18px;\n border: 2px solid #fff;\n border-radius: 100%;\n user-select: none; }\n .pcr-app .pcr-selection .pcr-color-preview {\n position: relative;\n z-index: 1;\n width: 2em;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n margin-right: 0.75em; }\n .pcr-app .pcr-selection .pcr-color-preview::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1; }\n .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color {\n cursor: pointer;\n transition: background-color 0.3s, box-shadow 0.3s;\n border-radius: 0.15em 0.15em 0 0;\n z-index: 2; }\n .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color {\n border-radius: 0 0 0.15em 0.15em; }\n .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color,\n .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color {\n background: currentColor;\n width: 100%;\n height: 50%; }\n .pcr-app .pcr-selection .pcr-color-palette,\n .pcr-app .pcr-selection .pcr-color-chooser,\n .pcr-app .pcr-selection .pcr-color-opacity {\n position: relative;\n user-select: none;\n display: flex;\n flex-direction: column;\n cursor: grab;\n cursor: -moz-grab;\n cursor: -webkit-grab; }\n .pcr-app .pcr-selection .pcr-color-palette:active,\n .pcr-app .pcr-selection .pcr-color-chooser:active,\n .pcr-app .pcr-selection .pcr-color-opacity:active {\n cursor: grabbing;\n cursor: -moz-grabbing;\n cursor: -webkit-grabbing; }\n .pcr-app .pcr-selection .pcr-color-palette {\n width: 100%;\n height: 8em;\n z-index: 1; }\n .pcr-app .pcr-selection .pcr-color-palette .pcr-palette {\n flex-grow: 1;\n border-radius: 0.15em; }\n .pcr-app .pcr-selection .pcr-color-palette .pcr-palette::before {\n position: absolute;\n content: '';\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 0.5em;\n border-radius: 0.15em;\n z-index: -1; }\n .pcr-app .pcr-selection .pcr-color-chooser,\n .pcr-app .pcr-selection .pcr-color-opacity {\n margin-left: 0.75em; }\n .pcr-app .pcr-selection .pcr-color-chooser .pcr-picker,\n .pcr-app .pcr-selection .pcr-color-opacity .pcr-picker {\n left: 50%;\n transform: translateX(-50%); }\n .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider,\n .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider {\n width: 8px;\n flex-grow: 1;\n border-radius: 50em; }\n .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider {\n background: linear-gradient(to bottom, red, yellow, lime, cyan, blue, magenta, red); }\n .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider {\n background: linear-gradient(to bottom, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2 2\"><path fill=\"white\" d=\"M1,0H2V1H1V0ZM0,1H1V2H0V1Z\"/><path fill=\"gray\" d=\"M0,0H1V1H0V0ZM1,1H2V2H1V1Z\"/></svg>');\n background-size: 100%, 50%; }\n", ""]);
// exports
/***/ }),
/***/ "./node_modules/css-loader/lib/css-base.js":
/*!*************************************************!*\
!*** ./node_modules/css-loader/lib/css-base.js ***!
\*************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/***/ "./src/color-picker/index.scss":
/*!*************************************!*\
!*** ./src/color-picker/index.scss ***!
\*************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var result = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/resolve-url-loader!../../node_modules/sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js?!./src/color-picker/index.scss");
if (typeof result === "string") {
module.exports = result;
} else {
module.exports = result.toString();
}
/***/ }),
/***/ "./src/color-picker/index.tsx":
/*!************************************!*\
!*** ./src/color-picker/index.tsx ***!
\************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/color-picker/index.scss");
//@ts-ignore
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
var pickr_js_1 = __webpack_require__(/*! ./js/pickr.js */ "./src/color-picker/js/pickr.js");
var ColorPicker = /** @class */ (function (_super) {
__extends(ColorPicker, _super);
function ColorPicker() {
return _super !== null && _super.apply(this, arguments) || this;
}
ColorPicker.prototype.installed = function () {
var _this = this;
var picker = pickr_js_1.default.create({
el: this.shadowRoot.querySelector('.picker'),
inline: this.props.inline,
default: this.props.default,
useAsButton: !this.props.button,
swatches: this.props.swatches,
width: this.props.width,
components: {
// Main components
preview: this.props.preview,
opacity: this.props.opacity,
hue: this.props.hue,
// Input / output Options
interaction: {
hex: this.props.hex,
rgba: this.props.rgba,
hsla: this.props.hsla,
hsva: this.props.hsva,
cmyk: this.props.cmyk,
input: this.props.input,
clear: this.props.clear,
save: this.props.save
}
},
strings: this.props.strings
});
picker.on('init', function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_this.picker.show();
_this.fire('init', args[0]);
}).on('save', function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_this.fire('save', {
color: args[0].toHEXA().toString(),
colorObject: args[0]
});
}).on('change', function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_this.fire('change', {
color: args[0].toHEXA().toString(),
colorObject: args[0]
});
}).on('swatchselect', function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_this.fire('swatchselect', {
color: args[0].toHEXA().toString(),
colorObject: args[0]
});
});
this.picker = picker;
};
ColorPicker.prototype.setColor = function (color) {
return this.picker.setColor(color);
};
ColorPicker.prototype.render = function (props) {
return (omi_1.h("div", __assign({}, omi_1.extractClass(props, 'm-color-picker')),
omi_1.h("div", { class: 'picker' })));
};
ColorPicker.css = css;
ColorPicker.defaultProps = {
button: true,
preview: true,
opacity: true,
hue: true,
hex: true,
rgba: true,
hsla: true,
hsva: false,
input: true,
clear: true,
save: true,
cmyk: false,
default: '#3365B7',
swatches: [],
inline: true,
strings: {
save: 'Save',
clear: 'Clear' // Default for clear button
}
};
ColorPicker.propTypes = {
button: Boolean,
preview: Boolean,
opacity: Boolean,
hue: Boolean,
hex: Boolean,
rgba: Boolean,
hsla: Boolean,
hsva: Boolean,
input: Boolean,
clear: Boolean,
save: Boolean,
cmyk: Boolean,
default: String,
swatches: Array,
inline: Boolean,
strings: Object,
width: String
};
ColorPicker = __decorate([
omi_1.tag('m-color-picker')
], ColorPicker);
return ColorPicker;
}(omi_1.WeElement));
exports.default = ColorPicker;
/***/ }),
/***/ "./src/color-picker/js/libs/moveable.js":
/*!**********************************************!*\
!*** ./src/color-picker/js/libs/moveable.js ***!
\**********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _ = __webpack_require__(/*! ../utils/utils */ "./src/color-picker/js/utils/utils.js");
function Moveable(opt) {
var that = {
// Assign default values
options: Object.assign({
lockX: false,
lockY: false,
onchange: function () { return 0; }
}, opt),
_tapstart: function (evt) {
_.on(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);
_.on(document, ['mousemove', 'touchmove'], that._tapmove);
// Prevent default touch event
evt.preventDefault();
// Trigger
that._tapmove(evt);
},
_tapmove: function (evt) {
var options = that.options, cache = that.cache;
var element = options.element;
var b = that.options.wrapper.getBoundingClientRect();
var x = 0, y = 0;
if (evt) {
var touch = evt && evt.touches && evt.touches[0];
x = evt ? (touch || evt).clientX : 0;
y = evt ? (touch || evt).clientY : 0;
// Reset to bounds
if (x < b.left)
x = b.left;
else if (x > b.left + b.width)
x = b.left + b.width;
if (y < b.top)
y = b.top;
else if (y > b.top + b.height)
y = b.top + b.height;
// Normalize
x -= b.left;
y -= b.top;
}
else if (cache) {
x = cache.x * b.width;
y = cache.y * b.height;
}
if (!options.lockX) {
element.style.left = "calc(" + x / b.width * 100 + "% - " + element.offsetWidth / 2 + "px)";
}
if (!options.lockY) {
element.style.top = "calc(" + y / b.height * 100 + "% - " + element.offsetWidth / 2 + "px)";
}
that.cache = { x: x / b.width, y: y / b.height };
options.onchange(x, y);
},
_tapstop: function () {
_.off(document, ['mouseup', 'touchend', 'touchcancel'], that._tapstop);
_.off(document, ['mousemove', 'touchmove'], that._tapmove);
},
trigger: function () {
that._tapmove();
},
update: function (x, y) {
if (x === void 0) { x = 0; }
if (y === void 0) { y = 0; }
var wrapperRect = that.options.wrapper.getBoundingClientRect();
that._tapmove({
clientX: wrapperRect.left + x,
clientY: wrapperRect.top + y
});
},
destroy: function () {
var options = that.options, _tapstart = that._tapstart;
_.off([options.wrapper, options.element], 'mousedown', _tapstart);
_.off([options.wrapper, options.element], 'touchstart', _tapstart, {
passive: false
});
}
};
// Initilize
var options = that.options, _tapstart = that._tapstart;
_.on([options.wrapper, options.element], 'mousedown', _tapstart);
_.on([options.wrapper, options.element], 'touchstart', _tapstart, {
passive: false
});
return that;
}
exports.default = Moveable;
/***/ }),
/***/ "./src/color-picker/js/libs/nanopop.js":
/*!*********************************************!*\
!*** ./src/color-picker/js/libs/nanopop.js ***!
\*********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/**
* Micro positioning-engine
* @param el
* @param reference
* @param pos
* @param padding
* @returns {{update(): void}}
* @constructor
*/
function Nanopop(_a) {
var el = _a.el, reference = _a.reference, pos = _a.pos, _b = _a.padding, padding = _b === void 0 ? 8 : _b;
var vBehaviour = { start: 'sme', middle: 'mse', end: 'ems' };
var hBehaviour = { top: 'tb', right: 'rl', bottom: 'bt', left: 'lr' };
var _c = pos.split('-'), position = _c[0], _d = _c[1], variant = _d === void 0 ? 'middle' : _d;
var isVertical = (position === 'top' || position === 'bottom');
return {
update: function () {
var rb = reference.getBoundingClientRect();
var eb = el.getBoundingClientRect();
var positions = isVertical ? {
t: rb.top - eb.height - padding,
b: rb.bottom + padding
} : {
r: rb.right + padding,
l: rb.left - eb.width - padding
};
var variants = isVertical ? {
s: rb.left + rb.width - eb.width,
m: (-eb.width / 2) + (rb.left + rb.width / 2),
e: rb.left
} : {
s: rb.bottom - eb.height,
m: rb.bottom - rb.height / 2 - eb.height / 2,
e: rb.bottom - rb.height
};
function apply(bevs, vars, styleprop) {
var vertical = styleprop === 'top';
var adder = vertical ? eb.height : eb.width;
var win = window[vertical ? 'innerHeight' : 'innerWidth'];
for (var _i = 0, bevs_1 = bevs; _i < bevs_1.length; _i++) {
var ch = bevs_1[_i];
var v = vars[ch];
if (v > 0 && (v + adder) < win) {
el.style[styleprop] = v + "px";
break;
}
}
}
apply(vBehaviour[variant], variants, isVertical ? 'left' : 'top');
apply(hBehaviour[position], positions, isVertical ? 'top' : 'left');
}
};
}
exports.default = Nanopop;
/***/ }),
/***/ "./src/color-picker/js/libs/selectable.js":
/*!************************************************!*\
!*** ./src/color-picker/js/libs/selectable.js ***!
\************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var _ = __webpack_require__(/*! ../utils/utils */ "./src/color-picker/js/utils/utils.js");
function Selectable(opt) {
if (opt === void 0) { opt = {}; }
opt = Object.assign({
onchange: function () { return 0; },
className: '',
elements: []
}, opt);
var onTap = _.on(opt.elements, 'click', function (evt) {
opt.elements.forEach(function (e) {
return e.classList[evt.target === e ? 'add' : 'remove'](opt.className);
});
opt.onchange(evt);
});
return {
destroy: function () { return _.off.apply(_, onTap); }
};
}
exports.default = Selectable;
/***/ }),
/***/ "./src/color-picker/js/pickr.js":
/*!**************************************!*\
!*** ./src/color-picker/js/pickr.js ***!
\**************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
// Import styles
__webpack_require__(/*! ../scss/pickr.scss */ "./src/color-picker/scss/pickr.scss");
// Import utils
var _ = __webpack_require__(/*! ./utils/utils */ "./src/color-picker/js/utils/utils.js");
var Color = __webpack_require__(/*! ./utils/color */ "./src/color-picker/js/utils/color.js");
// Import classes
var hsvacolor_1 = __webpack_require__(/*! ./utils/hsvacolor */ "./src/color-picker/js/utils/hsvacolor.js");
var moveable_1 = __webpack_require__(/*! ./libs/moveable */ "./src/color-picker/js/libs/moveable.js");
var selectable_1 = __webpack_require__(/*! ./libs/selectable */ "./src/color-picker/js/libs/selectable.js");
var nanopop_1 = __webpack_require__(/*! ./libs/nanopop */ "./src/color-picker/js/libs/nanopop.js");
var template_1 = __webpack_require__(/*! ./template */ "./src/color-picker/js/template.js");
var Pickr = /** @class */ (function () {
function Pickr(opt) {
var _this = this;
// Will be used to prevent specific actions during initilization
this._initializingActive = true;
// Replace element with color picker
this._recalc = true;
// Current and last color for comparison
this._color = hsvacolor_1.HSVaColor();
this._lastColor = hsvacolor_1.HSVaColor();
this._swatchColors = [];
// Evenlistener name: [callbacks]
this._eventListener = {
'swatchselect': [],
'change': [],
'save': [],
'init': []
};
// Assign default values
this.options = opt = Object.assign({
appClass: null,
useAsButton: false,
disabled: false,
comparison: true,
components: {
interaction: {}
},
strings: {},
swatches: null,
inline: false,
default: '#42445A',
defaultRepresentation: null,
position: 'bottom-middle',
adjustableNumbers: true,
showAlways: false,
closeWithKey: 'Escape'
}, opt);
var swatches = opt.swatches, inline = opt.inline, components = opt.components, position = opt.position;
// Check interaction section
if (!components.interaction) {
components.interaction = {};
}
// Overwrite palette if preview, opacity or hue are true
var preview = components.preview, opacity = components.opacity, hue = components.hue, palette = components.palette;
components.palette = palette || preview || opacity || hue;
// Per default enabled if inline
if (inline) {
opt.showAlways = true;
}
// Initialize picker
this._preBuild();
this._buildComponents();
this._bindEvents();
// Finalize build
this._finalBuild();
// Append pre-defined swatch colors
if (swatches && swatches.length) {
swatches.forEach(function (color) { return _this.addSwatch(color); });
}
// Initialize positioning engine
this._nanopop = nanopop_1.default({
reference: this._root.button,
el: this._root.app,
pos: position
});
// Initilization is finish, pickr is visible and ready for usage
var button = this._root.button;
var that = this;
requestAnimationFrame((function cb() {
// offsetParent of body is always 0. So check if it is the body
if (button.offsetParent === null && button !== document.body) {
return requestAnimationFrame(cb);
}
// Apply default color
that.setColor(opt.default);
that._rePositioningPicker();
// Initialize color representation
if (opt.defaultRepresentation) {
that._representation = opt.defaultRepresentation;
that.setColorRepresentation(that._representation);
}
// Show pickr if locked
if (opt.showAlways) {
that.show();
}
// Initialization is done - pickr is usable, fire init event
that._initializingActive = false;
that._emit('init');
}));
}
// Does only the absolutly basic thing to initialize the components
Pickr.prototype._preBuild = function () {
var opt = this.options;
// Check if element is selector
if (typeof opt.el === 'string') {
// Resolve possible shadow dom access
opt.el = opt.el.split(/>>/g).reduce(function (pv, cv, ci, a) {
pv = pv.querySelector(cv);
return ci < a.length - 1 ? pv.shadowRoot : pv;
}, document);
}
// Create element and append it to body to
// prevent initialization errors
this._root = template_1.default(opt);
// Check if a custom button is used
if (opt.useAsButton) {
this._root.button = opt.el; // Replace button with customized button
}
document.body.appendChild(this._root.root);
};
Pickr.prototype._finalBuild = function () {
var opt = this.options;
var root = this._root;
// Remove from body
document.body.removeChild(root.root);
//if (opt.inline) {
var parentElement = opt.el.parentElement;
if (parentElement.lastChild === opt.el) {
parentElement.appendChild(root.app);
}
else {
parentElement.insertBefore(root.app, opt.el.nextSibling);
}
// } else {
// document.body.appendChild(root.app);
// }
// Don't replace the the element if a custom button is used
if (!opt.useAsButton) {
// Replace element with actual color-picker
opt.el.parentNode.replaceChild(root.root, opt.el);
}
// Call disable to also add the disabled class
if (opt.disabled) {
this.disable();
}
// Check if color comparison is disabled, if yes - remove transitions so everything keeps smoothly
if (!opt.comparison) {
root.button.style.transition = 'none';
if (!opt.useAsButton) {
root.preview.lastColor.style.transition = 'none';
}
}
this.hide();
};
Pickr.prototype._buildComponents = function () {
// Instance reference
var inst = this;
var comp = this.options.components;
var components = {
palette: moveable_1.default({
element: inst._root.palette.picker,
wrapper: inst._root.palette.palette,
onchange: function (x, y) {
if (!comp.palette)
return;
var _color = inst._color, _root = inst._root, options = inst.options;
// Calculate saturation based on the position
_color.s = (x / this.wrapper.offsetWidth) * 100;
// Calculate the value
_color.v = 100 - (y / this.wrapper.offsetHeight) * 100;
// Prevent falling under zero
_color.v < 0 ? _color.v = 0 : 0;