{"version":3,"sources":["webpack:///./node_modules/@directus/extension-toolkit/mixins/interface.js","webpack:///./src/interfaces/color-palette/input.vue?23e5","webpack:///./node_modules/hex-rgb/index.js","webpack:///./src/interfaces/color-palette/input.vue?69e3","webpack:///src/interfaces/color-palette/input.vue","webpack:///./src/interfaces/color-palette/input.vue?2a49","webpack:///./src/interfaces/color-palette/input.vue"],"names":["module","exports","props","id","type","String","required","name","value","default","length","Number","readonly","Boolean","collection","primaryKey","options","Object","newItem","relation","fields","values","width","val","includes","hexCharacters","match3or4Hex","match6or8Hex","nonHexChars","RegExp","validHexSize","hex","test","TypeError","replace","alpha","parseInt","slice","repeat","num","red","green","blue","format","render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","color","directives","rawName","$helpers","formatTitle","expression","key","class","active","style","backgroundColor","attrs","on","$event","$emit","dark","useDarkIconColor","_e","staticRenderFns","component"],"mappings":"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","file":"js/chunk-c9324d3c.2b4a8d48.js","sourcesContent":["module.exports = {\n  props: {\n    // Unique id for this interface. Should be added to the lower level \n    // HTML input element if applicable. This ID will be used in the label's\n    // `for` attribute\n    id: {\n      type: String,\n      required: true\n    },\n    // Name of the field\n    name: {\n      type: String,\n      required: true\n    },\n    // The current value. This can either be the default value, the saved database\n    // value or the current state after the user made an edit\n    value: {\n      type: null,\n      default: null\n    },\n    // Type of the field, eg `string`, `hash`, or `array`\n    type: {\n      type: String,\n      required: true\n    },\n    // Max length\n    length: {\n      type: [String, Number],\n      default: null\n    },\n    // If the field is readonly or not\n    readonly: {\n      type: Boolean,\n      default: false\n    },\n    // Name of the collection\n    collection: {\n      type: String,\n      default: null\n    },\n    // Primary key of the item you're editing in this context\n    primaryKey: {\n      type: [Number, String],\n      default: null\n    },\n    // If the field is required or not\n    required: {\n      type: Boolean,\n      default: false\n    },\n    // Field options. A json object based on the interface's meta.json file\n    options: {\n      type: Object,\n      default: () => ({})\n    },\n    // If the item that's currently being edited is new\n    newItem: {\n      type: Boolean,\n      default: false\n    },\n    // The relation of the current field. Will contain information on the related\n    // collection and field(s)\n    relation: {\n      type: Object,\n      default: null\n    },\n    // The other fields in the current edit page\n    fields: {\n      type: Object,\n      default: null\n    },\n    // The values of the other fields on the edit page. Can be used for things like\n    // automatically generating a slug based on another field\n    values: {\n      type: Object,\n      default: null\n    },\n    width: {\n      type: String,\n      default: null,\n      validator(val) {\n        return [\n          'half',\n          'half-left',\n          'half-right',\n          'full',\n          'fill'\n        ].includes(val);\n      }\n    }\n  }\n};\n","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=style&index=0&id=04ad7280&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=style&index=0&id=04ad7280&lang=scss&scoped=true&\"","'use strict';\n\nconst hexCharacters = 'a-f\\\\d';\nconst match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`;\nconst match6or8Hex = `#?[${hexCharacters}]{6}([${hexCharacters}]{2})?`;\nconst nonHexChars = new RegExp(`[^#${hexCharacters}]`, 'gi');\nconst validHexSize = new RegExp(`^${match3or4Hex}$|^${match6or8Hex}$`, 'i');\n\nmodule.exports = (hex, options = {}) => {\n\tif (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) {\n\t\tthrow new TypeError('Expected a valid hex string');\n\t}\n\n\thex = hex.replace(/^#/, '');\n\tlet alpha = 1;\n\n\tif (hex.length === 8) {\n\t\talpha = parseInt(hex.slice(6, 8), 16) / 255;\n\t\thex = hex.slice(0, 6);\n\t}\n\n\tif (hex.length === 4) {\n\t\talpha = parseInt(hex.slice(3, 4).repeat(2), 16) / 255;\n\t\thex = hex.slice(0, 3);\n\t}\n\n\tif (hex.length === 3) {\n\t\thex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];\n\t}\n\n\tconst num = parseInt(hex, 16);\n\tconst red = num >> 16;\n\tconst green = (num >> 8) & 255;\n\tconst blue = num & 255;\n\n\treturn options.format === 'array' ?\n\t\t[red, green, blue, alpha] :\n\t\t{red, green, blue, alpha};\n};\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"interface-color-picker\"},_vm._l((_vm.colors),function(color){return _c('button',{directives:[{name:\"tooltip\",rawName:\"v-tooltip\",value:(_vm.$helpers.formatTitle(color)),expression:\"$helpers.formatTitle(color)\"}],key:color,class:{ active: _vm.value === color },style:({ backgroundColor: (\"var(--\" + color + \")\") }),attrs:{\"disabled\":_vm.readonly},on:{\"click\":function($event){return _vm.$emit('input', color)}}},[(_vm.value === color)?[_c('v-icon',{class:{ dark: _vm.useDarkIconColor(color) },attrs:{\"name\":\"check\",\"small\":\"\"}})]:_vm._e()],2)}),0)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n\t<div class=\"interface-color-picker\">\n\t\t<button\n\t\t\tv-for=\"color in colors\"\n\t\t\t:key=\"color\"\n\t\t\tv-tooltip=\"$helpers.formatTitle(color)\"\n\t\t\t:disabled=\"readonly\"\n\t\t\t:style=\"{ backgroundColor: `var(--${color})` }\"\n\t\t\t:class=\"{ active: value === color }\"\n\t\t\t@click=\"$emit('input', color)\"\n\t\t>\n\t\t\t<template v-if=\"value === color\">\n\t\t\t\t<v-icon name=\"check\" :class=\"{ dark: useDarkIconColor(color) }\" small />\n\t\t\t</template>\n\t\t</button>\n\t</div>\n</template>\n\n<script>\nimport mixin from '@directus/extension-toolkit/mixins/interface';\nimport hexRgb from 'hex-rgb';\nimport colors from './colors.json';\n\nexport default {\n\tmixins: [mixin],\n\tcomputed: {\n\t\tcolors() {\n\t\t\treturn colors;\n\t\t}\n\t},\n\tmethods: {\n\t\tuseDarkIconColor(value) {\n\t\t\tconst hex = getComputedStyle(document.body)\n\t\t\t\t.getPropertyValue(`--${value}`)\n\t\t\t\t.trim();\n\n\t\t\tconst rgb = hexRgb(hex, { format: 'array' });\n\n\t\t\tconst colors = rgb\n\t\t\t\t.map(val => val / 255)\n\t\t\t\t.map(val => {\n\t\t\t\t\tif (val <= 0.03928) {\n\t\t\t\t\t\treturn val / 12.92;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn Math.pow((val + 0.055) / 1.055, 2.4);\n\t\t\t\t});\n\n\t\t\tconst lightness = 0.2126 * colors[0] + 0.7152 * colors[1] + 0.0722 * colors[2];\n\n\t\t\treturn lightness > 0.25;\n\t\t}\n\t}\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.interface-color-picker {\n\t--swatch-size: 25px;\n\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\theight: calc(var(--swatch-size) * 11);\n\tmargin-bottom: calc(var(--swatch-size) + var(--input-note-margin));\n\n\tbutton {\n\t\tflex-basis: var(--swatch-size);\n\t\theight: var(--swatch-size);\n\t\tdisplay: block;\n\t\ttransform: scale(1);\n\t\ttransition: transform var(--fast) var(--transition-in);\n\n\t\t&:hover {\n\t\t\ttransition: none;\n\t\t\ttransform: scale(1.4);\n\t\t\tz-index: +1;\n\t\t\tbox-shadow: var(--box-shadow);\n\t\t}\n\n\t\ti {\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t\ttop: 3px;\n\t\t\tmargin: auto;\n\t\t\tcolor: var(--white);\n\n\t\t\t&.dark {\n\t\t\t\tcolor: var(--black);\n\t\t\t}\n\t\t}\n\n\t\t&:nth-last-child(1) {\n\t\t\tflex-grow: 1;\n\n\t\t\tposition: absolute;\n\t\t\tleft: 50%;\n\t\t\ttop: calc(var(--swatch-size) * 11);\n\t\t\twidth: 50%;\n\n\t\t\t&:hover {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t}\n\t\t}\n\n\t\t&:nth-last-child(2) {\n\t\t\tflex-grow: 1;\n\t\t\tborder: 1px solid var(--blue-grey-50);\n\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: calc(var(--swatch-size) * 11);\n\t\t\twidth: 50%;\n\n\t\t\t&:hover {\n\t\t\t\ttransform: scale(1.1);\n\t\t\t}\n\t\t}\n\t}\n\tbutton[disabled='disabled'] {\n\t\tcursor: not-allowed;\n\t\tfilter: grayscale(1);\n\n\t\t&.active {\n\t\t\tfilter: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\ttransform: none;\n\t\t\ttransition: none;\n\t\t}\n\t}\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./input.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./input.vue?vue&type=template&id=04ad7280&scoped=true&\"\nimport script from \"./input.vue?vue&type=script&lang=js&\"\nexport * from \"./input.vue?vue&type=script&lang=js&\"\nimport style0 from \"./input.vue?vue&type=style&index=0&id=04ad7280&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"04ad7280\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}