@pictogrammers/components 0.4.5 → 0.4.7

package/pgColor.js

@@ -1 +1 @@
-(()=>{"use strict";var e={289:(e,n,t)=>{t.d(n,{A:()=>s});var a=t(601),r=t.n(a),o=t(314),h=t.n(o)()(r());h.push([e.id,"button {\n  border: 0;\n  padding: 0;\n  outline: 0;\n}\n\nbutton.active {\n  border: 2px solid #fff;\n  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);\n  order: 1;\n}\n\nbutton.white.active {\n  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5) inset;\n}\n\n[part~=grid] {\n  display: grid;\n  grid-template-columns: repeat(19, 1rem);\n  grid-template-rows: repeat(14, 1rem);\n}",""]);var m=new CSSStyleSheet;m.replaceSync(h.toString());const s=m},314:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",a=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),a&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),a&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,a,r,o){"string"==typeof e&&(e=[[null,e,void 0]]);var h={};if(a)for(var m=0;m<this.length;m++){var s=this[m][0];null!=s&&(h[s]=!0)}for(var i=0;i<e.length;i++){var l=[].concat(e[i]);a&&h[l[0]]||(void 0!==o&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),t&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=t):l[2]=t),r&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=r):l[4]="".concat(r)),n.push(l))}},n}},601:e=>{e.exports=function(e){return e[1]}}},n={};function t(a){var r=n[a];if(void 0!==r)return r.exports;var o=n[a]={id:a,exports:{}};return e[a](o,o.exports,t),o.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);const a=Symbol("addObserver"),r=Symbol("removeObserver"),o=Symbol("getObservers"),h=Symbol("isProxy"),m=Symbol("getTarget"),s=["fill","pop","push","reverse","shift","sort","splice","unshift"],i=new Map;function l(e){return new Proxy(e,{get(n,t){if("symbol"==typeof t){switch(t){case h:return!0;case m:return n;case o:return i.has(e);case a:return(n,t)=>{i.has(e)?i.get(e).has(n)?i.get(e).get(n).push(t):i.get(e).set(n,[t]):i.set(e,new Map([[n,[t]]]))};case r:return n=>{i.has(e)&&(i.get(e).delete(n),0===i.get(e).size&&i.delete(e))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(n,t)}throw new Error("Unsupported symbol")}if(t in n){if(!Number.isNaN(Number(t)))return"object"==typeof n[t]?l(n[t]):n[t];if("copyWithin"===t)throw new Error("Unsupported array method copyWithin");if(s.includes(t))return i.has(n)?function(){const e=Array.prototype[t].apply(n,arguments);return i.get(n).forEach(((e,a)=>{e.forEach((e=>{e(n,t,arguments)}))})),e}:Reflect.get(n,t);if(n[t]instanceof Array)return l(n[t])}return Reflect.get(n,t)},set(e,n,t){if("symbol"==typeof n)throw new Error("Setting symbols not allowed.");if(Array.isArray(e))return Reflect.set(e,n,t);if(i.has(e)){i.get(e).forEach(((e,a)=>{e.forEach((e=>{e(n,t)}))}))}return Reflect.set(e,n,t)}})}window.observers=i;class PropError extends Error{constructor(e,n){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,n)}}Symbol("index");const c=Symbol("init"),x=Symbol("template"),F=Symbol("style"),u=Symbol("parent");function d(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function p(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function A(e={}){return function(n,t){if("class"!==t.kind)throw new Error("@Component() can only decorate a class");var a,r;Reflect.defineProperty(n,"name",{value:e.selector,writable:!1,configurable:!1}),!n.prototype[u]||n.prototype[u][n.prototype[u].length-1]instanceof Object.getPrototypeOf(n)?n.prototype instanceof HTMLElement&&(n.prototype[u]=[n.prototype],n.prototype[F]=e.style?[e.style]:[],n.prototype[x]=e.template||""):(n.prototype[u].push(n.prototype),n.prototype[F].push(e.style),n.prototype[x]=(a=n.prototype[x],(r=e.template||null)&&r.match(/<parent\/>/)?r.replace(/<parent\/>/,a):`${a}${r||""}`));const o=n.prototype.connectedCallback||(()=>{}),h=n.prototype.disconnectedCallback||(()=>{});n.prototype.connectedCallback=function(){if(this[c]||void 0!==e.template||void 0!==e.style)if(this[c]){if(this[c]&&e.style);else if(this[c]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=n.prototype[x]||"";const t=document.importNode(e.content,!0),a=this.attachShadow({mode:"open"});a.adoptedStyleSheets=n.prototype[F].map((e=>{if(e instanceof CSSStyleSheet)return e;var n=new CSSStyleSheet;return n.replaceSync(e.toString()),n})),a.appendChild(t)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const t=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&t.add(e.localName);const a=Array.from(t.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),r=()=>{this[u].map((e=>{e.render&&e.render.call(this,n.observedAttributes?n.observedAttributes.reduce(((e,n)=>(e[p(n)]=!0,e)),{}):{})}))};0===a.length?(this[c]=!0,o.call(this),r()):Promise.all(a).then((()=>{this[c]=!0,o.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));r()}))},n.prototype.disconnectedCallback=function(){h.call(this)},n.prototype.attributeChangedCallback=function(e,n,t){this[p(e)]=t},t.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${t.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,n)}}))}}Symbol("transmute");function E(e){return!!e&&e.constructor===Array}function f(e,n){e[c]&&e[u].map((t=>{t.render&&t.render.call(e,{[n]:!0})}))}function y(e){return null===e?"null":E(e)?"array":typeof e}function C(e){return function(n,t){const a=t.name,r=Symbol(a),s=Symbol(`${a}:type`),i=Symbol(`${a}:meta`);return t.addInitializer((function(){Reflect.defineProperty(this,a,{get:()=>"object"===this[s]||"array"===this[s]?this[r][h]?this[r]:l(this[r]):this[r],set:n=>{const t=y(e?e(n):n);if("index"!==a&&this[s]!==t&&"null"!==this[s]&&"null"!==t)throw new Error(`@Prop() ${a} with type '${this[s]}' cannot be set to ${t}.`);if("array"===this[s]){if(!E(n))throw new PropError(`Array "${a}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,a)?.set);if(this[r]===n)throw new Error("Setting an array to itself is not allowed.");const e=l(this[r]);if(e[o]){const t=n[h]?(i=n)[h]&&i[m]:n;e.splice(0,this[r].length,...t)}else this[r]=n}else this[r]=e?e(n):n,f(this,a);var i}})})),function(n){if(void 0===n&&"index"!==a)throw new Error(`@Prop() ${a} must have an initial value defined.`);if(void 0!==n&&"index"===a)throw new Error("@Prop() index must not have an initial value defined.");if(!0===n)throw new Error(`@Prop() ${a} boolean must initialize to false.`);if(!t.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:n}=e,t=d(a);n[a]||(e.observedAttributes.push(t),n[a]=r)}return this[s]=y(n),"array"===this[s]?(this[r]=n,new Proxy(n,{get:(e,n)=>n===g?this[i]:(console.log("errr???"),Reflect.get(this[r],n)),set:(e,n,t)=>{if(n===g)return this[i]=t,!0;const o=Reflect.set(e,n,t);return"length"===n&&this[r].length===t||f(this,a),this[r]=t,o}})):(this[r]=e?e(this.getAttribute(a)??n):this.getAttribute(a)??n,this[r])}}}Symbol("hasProxy");const g=Symbol("meta");const b=[{name:"Red",camel:"red",colors:[{name:"50",hex:"FFEBEE"},{name:"100",hex:"FFCDD2"},{name:"200",hex:"EF9A9A"},{name:"300",hex:"E57373"},{name:"400",hex:"EF5350"},{name:"500",hex:"F44336"},{name:"600",hex:"E53935"},{name:"700",hex:"D32F2F"},{name:"800",hex:"C62828"},{name:"900",hex:"B71C1C"},{name:"A100",hex:"FF8A80"},{name:"A200",hex:"FF5252"},{name:"A400",hex:"FF1744"},{name:"A700",hex:"D50000"}]},{name:"Pink",camel:"pink",colors:[{name:"50",hex:"FCE4EC"},{name:"100",hex:"F8BBD0"},{name:"200",hex:"F48FB1"},{name:"300",hex:"F06292"},{name:"400",hex:"EC407A"},{name:"500",hex:"E91E63"},{name:"600",hex:"D81B60"},{name:"700",hex:"C2185B"},{name:"800",hex:"AD1457"},{name:"900",hex:"880E4F"},{name:"A100",hex:"FF80AB"},{name:"A200",hex:"FF4081"},{name:"A400",hex:"F50057"},{name:"A700",hex:"C51162"}]},{name:"Purple",camel:"purple",colors:[{name:"50",hex:"F3E5F5"},{name:"100",hex:"E1BEE7"},{name:"200",hex:"CE93D8"},{name:"300",hex:"BA68C8"},{name:"400",hex:"AB47BC"},{name:"500",hex:"9C27B0"},{name:"600",hex:"8E24AA"},{name:"700",hex:"7B1FA2"},{name:"800",hex:"6A1B9A"},{name:"900",hex:"4A148C"},{name:"A100",hex:"EA80FC"},{name:"A200",hex:"E040FB"},{name:"A400",hex:"D500F9"},{name:"A700",hex:"AA00FF"}]},{name:"Deep Purple",camel:"deepPurple",colors:[{name:"50",hex:"EDE7F6"},{name:"100",hex:"D1C4E9"},{name:"200",hex:"B39DDB"},{name:"300",hex:"9575CD"},{name:"400",hex:"7E57C2"},{name:"500",hex:"673AB7"},{name:"600",hex:"5E35B1"},{name:"700",hex:"512DA8"},{name:"800",hex:"4527A0"},{name:"900",hex:"311B92"},{name:"A100",hex:"B388FF"},{name:"A200",hex:"7C4DFF"},{name:"A400",hex:"651FFF"},{name:"A700",hex:"6200EA"}]},{name:"Indigo",camel:"indigo",colors:[{name:"50",hex:"E8EAF6"},{name:"100",hex:"C5CAE9"},{name:"200",hex:"9FA8DA"},{name:"300",hex:"7986CB"},{name:"400",hex:"5C6BC0"},{name:"500",hex:"3F51B5"},{name:"600",hex:"3949AB"},{name:"700",hex:"303F9F"},{name:"800",hex:"283593"},{name:"900",hex:"1A237E"},{name:"A100",hex:"8C9EFF"},{name:"A200",hex:"536DFE"},{name:"A400",hex:"3D5AFE"},{name:"A700",hex:"304FFE"}]},{name:"Blue",camel:"blue",colors:[{name:"50",hex:"E3F2FD"},{name:"100",hex:"BBDEFB"},{name:"200",hex:"90CAF9"},{name:"300",hex:"64B5F6"},{name:"400",hex:"42A5F5"},{name:"500",hex:"2196F3"},{name:"600",hex:"1E88E5"},{name:"700",hex:"1976D2"},{name:"800",hex:"1565C0"},{name:"900",hex:"0D47A1"},{name:"A100",hex:"82B1FF"},{name:"A200",hex:"448AFF"},{name:"A400",hex:"2979FF"},{name:"A700",hex:"2962FF"}]},{name:"Light Blue",camel:"lightBlue",colors:[{name:"50",hex:"E1F5FE"},{name:"100",hex:"B3E5FC"},{name:"200",hex:"81D4FA"},{name:"300",hex:"4FC3F7"},{name:"400",hex:"29B6F6"},{name:"500",hex:"03A9F4"},{name:"600",hex:"039BE5"},{name:"700",hex:"0288D1"},{name:"800",hex:"0277BD"},{name:"900",hex:"01579B"},{name:"A100",hex:"80D8FF"},{name:"A200",hex:"40C4FF"},{name:"A400",hex:"00B0FF"},{name:"A700",hex:"0091EA"}]},{name:"Cyan",camel:"cyan",colors:[{name:"50",hex:"E0F7FA"},{name:"100",hex:"B2EBF2"},{name:"200",hex:"80DEEA"},{name:"300",hex:"4DD0E1"},{name:"400",hex:"26C6DA"},{name:"500",hex:"00BCD4"},{name:"600",hex:"00ACC1"},{name:"700",hex:"0097A7"},{name:"800",hex:"00838F"},{name:"900",hex:"006064"},{name:"A100",hex:"84FFFF"},{name:"A200",hex:"18FFFF"},{name:"A400",hex:"00E5FF"},{name:"A700",hex:"00B8D4"}]},{name:"Teal",camel:"teal",colors:[{name:"50",hex:"E0F2F1"},{name:"100",hex:"B2DFDB"},{name:"200",hex:"80CBC4"},{name:"300",hex:"4DB6AC"},{name:"400",hex:"26A69A"},{name:"500",hex:"009688"},{name:"600",hex:"00897B"},{name:"700",hex:"00796B"},{name:"800",hex:"00695C"},{name:"900",hex:"004D40"},{name:"A100",hex:"A7FFEB"},{name:"A200",hex:"64FFDA"},{name:"A400",hex:"1DE9B6"},{name:"A700",hex:"00BFA5"}]},{name:"Green",camel:"green",colors:[{name:"50",hex:"E8F5E9"},{name:"100",hex:"C8E6C9"},{name:"200",hex:"A5D6A7"},{name:"300",hex:"81C784"},{name:"400",hex:"66BB6A"},{name:"500",hex:"4CAF50"},{name:"600",hex:"43A047"},{name:"700",hex:"388E3C"},{name:"800",hex:"2E7D32"},{name:"900",hex:"1B5E20"},{name:"A100",hex:"B9F6CA"},{name:"A200",hex:"69F0AE"},{name:"A400",hex:"00E676"},{name:"A700",hex:"00C853"}]},{name:"Light Green",camel:"lightGreen",colors:[{name:"50",hex:"F1F8E9"},{name:"100",hex:"DCEDC8"},{name:"200",hex:"C5E1A5"},{name:"300",hex:"AED581"},{name:"400",hex:"9CCC65"},{name:"500",hex:"8BC34A"},{name:"600",hex:"7CB342"},{name:"700",hex:"689F38"},{name:"800",hex:"558B2F"},{name:"900",hex:"33691E"},{name:"A100",hex:"CCFF90"},{name:"A200",hex:"B2FF59"},{name:"A400",hex:"76FF03"},{name:"A700",hex:"64DD17"}]},{name:"Lime",camel:"lime",colors:[{name:"50",hex:"F9FBE7"},{name:"100",hex:"F0F4C3"},{name:"200",hex:"E6EE9C"},{name:"300",hex:"DCE775"},{name:"400",hex:"D4E157"},{name:"500",hex:"CDDC39"},{name:"600",hex:"C0CA33"},{name:"700",hex:"AFB42B"},{name:"800",hex:"9E9D24"},{name:"900",hex:"827717"},{name:"A100",hex:"F4FF81"},{name:"A200",hex:"EEFF41"},{name:"A400",hex:"C6FF00"},{name:"A700",hex:"AEEA00"}]},{name:"Yellow",camel:"yellow",colors:[{name:"50",hex:"FFFDE7"},{name:"100",hex:"FFF9C4"},{name:"200",hex:"FFF59D"},{name:"300",hex:"FFF176"},{name:"400",hex:"FFEE58"},{name:"500",hex:"FFEB3B"},{name:"600",hex:"FDD835"},{name:"700",hex:"FBC02D"},{name:"800",hex:"F9A825"},{name:"900",hex:"F57F17"},{name:"A100",hex:"FFFF8D"},{name:"A200",hex:"FFFF00"},{name:"A400",hex:"FFEA00"},{name:"A700",hex:"FFD600"}]},{name:"Amber",camel:"amber",colors:[{name:"50",hex:"FFF8E1"},{name:"100",hex:"FFECB3"},{name:"200",hex:"FFE082"},{name:"300",hex:"FFD54F"},{name:"400",hex:"FFCA28"},{name:"500",hex:"FFC107"},{name:"600",hex:"FFB300"},{name:"700",hex:"FFA000"},{name:"800",hex:"FF8F00"},{name:"900",hex:"FF6F00"},{name:"A100",hex:"FFE57F"},{name:"A200",hex:"FFD740"},{name:"A400",hex:"FFC400"},{name:"A700",hex:"FFAB00"}]},{name:"Orange",camel:"orange",colors:[{name:"50",hex:"FFF3E0"},{name:"100",hex:"FFE0B2"},{name:"200",hex:"FFCC80"},{name:"300",hex:"FFB74D"},{name:"400",hex:"FFA726"},{name:"500",hex:"FF9800"},{name:"600",hex:"FB8C00"},{name:"700",hex:"F57C00"},{name:"800",hex:"EF6C00"},{name:"900",hex:"E65100"},{name:"A100",hex:"FFD180"},{name:"A200",hex:"FFAB40"},{name:"A400",hex:"FF9100"},{name:"A700",hex:"FF6D00"}]},{name:"Deep Orange",camel:"deepOrange",colors:[{name:"50",hex:"FBE9E7"},{name:"100",hex:"FFCCBC"},{name:"200",hex:"FFAB91"},{name:"300",hex:"FF8A65"},{name:"400",hex:"FF7043"},{name:"500",hex:"FF5722"},{name:"600",hex:"F4511E"},{name:"700",hex:"E64A19"},{name:"800",hex:"D84315"},{name:"900",hex:"BF360C"},{name:"A100",hex:"FF9E80"},{name:"A200",hex:"FF6E40"},{name:"A400",hex:"FF3D00"},{name:"A700",hex:"DD2C00"}]},{name:"Brown",camel:"brown",colors:[{name:"50",hex:"EFEBE9"},{name:"100",hex:"D7CCC8"},{name:"200",hex:"BCAAA4"},{name:"300",hex:"A1887F"},{name:"400",hex:"8D6E63"},{name:"500",hex:"795548"},{name:"600",hex:"6D4C41"},{name:"700",hex:"5D4037"},{name:"800",hex:"4E342E"},{name:"900",hex:"3E2723"}]},{name:"Grey",camel:"grey",colors:[{name:"50",hex:"FAFAFA"},{name:"100",hex:"F5F5F5"},{name:"200",hex:"EEEEEE"},{name:"300",hex:"E0E0E0"},{name:"400",hex:"BDBDBD"},{name:"500",hex:"9E9E9E"},{name:"600",hex:"757575"},{name:"700",hex:"616161"},{name:"800",hex:"424242"},{name:"900",hex:"212121"}]},{name:"Blue Grey",camel:"blueGrey",colors:[{name:"50",hex:"ECEFF1"},{name:"100",hex:"CFD8DC"},{name:"200",hex:"B0BEC5"},{name:"300",hex:"90A4AE"},{name:"400",hex:"78909C"},{name:"500",hex:"607D8B"},{name:"600",hex:"546E7A"},{name:"700",hex:"455A64"},{name:"800",hex:"37474F"},{name:"900",hex:"263238"}]},{name:"Misc",camel:"",colors:[{name:"white",hex:"FFFFFF",x:19,y:0},{name:"black",hex:"000000",x:19,y:1}]}];var v=t(289),B=function(e,n,t,a,r,o){function h(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var m,s=a.kind,i="getter"===s?"get":"setter"===s?"set":"value",l=!n&&e?a.static?e:e.prototype:null,c=n||(l?Object.getOwnPropertyDescriptor(l,a.name):{}),x=!1,F=t.length-1;F>=0;F--){var u={};for(var d in a)u[d]="access"===d?{}:a[d];for(var d in a.access)u.access[d]=a.access[d];u.addInitializer=function(e){if(x)throw new TypeError("Cannot add initializers after decoration has completed");o.push(h(e||null))};var p=(0,t[F])("accessor"===s?{get:c.get,set:c.set}:c[i],u);if("accessor"===s){if(void 0===p)continue;if(null===p||"object"!=typeof p)throw new TypeError("Object expected");(m=h(p.get))&&(c.get=m),(m=h(p.set))&&(c.set=m),(m=h(p.init))&&r.unshift(m)}else(m=h(p))&&("field"===s?r.unshift(m):c[i]=m)}l&&Object.defineProperty(l,a.name,c),x=!0},D=function(e,n,t){for(var a=arguments.length>2,r=0;r<n.length;r++)t=a?n[r].call(e,t):n[r].call(e);return a?t:void 0};(()=>{let e,n,t,a,r=[A({selector:"pg-color",style:v.A,template:'<div part="grid"></div>'})],o=[],h=HTMLElement,m=[],s=[],i=[],l=[];(class extends h{static{n=this}static{const c="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;t=[C()],a=[function(e,n){const t=n.name,a=t.replace(/^\$/,"");n.addInitializer((function(){let e=null;Reflect.defineProperty(this,t,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${a}]`))}})}))}],B(null,null,t,{kind:"field",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,n)=>{e.value=n}},metadata:c},m,s),B(null,null,a,{kind:"field",name:"$grid",static:!1,private:!1,access:{has:e=>"$grid"in e,get:e=>e.$grid,set:(e,n)=>{e.$grid=n}},metadata:c},i,l),B(null,e={value:n},r,{kind:"class",name:n.name,metadata:c},null,o),n=e.value,c&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:c}),D(n,o)}value=D(this,m,"#000000");$grid=(D(this,s),D(this,i,void 0));buttons=(D(this,l),[]);isMouseDown=!1;index=-1;connectedCallback(){b.forEach(((e,n)=>{e.colors.forEach(((t,a)=>{const r=document.createElement("button");r.style.background=`#${t.hex}`,"black"===t.name?r.style.gridArea="13 / 17 / 15 / 20":"white"===t.name?(r.style.gridArea="11 / 17 / 13 / 20",r.classList.add("white")):(r.style.gridRow=`${a+1}`,r.style.gridColumn=`${n+1}`);const o=this.buttons.push([r,`#${t.hex}`,e]);r.addEventListener("click",(()=>{this.handleSelect(o-1)})),r.addEventListener("mouseenter",(()=>{this.isMouseDown&&this.handleSelect(o-1)})),this.$grid.appendChild(r)}))}));const e=()=>{this.isMouseDown=!1,document.removeEventListener("mouseup",e)};this.$grid.addEventListener("mousedown",(n=>{this.isMouseDown=!0;const t=this.buttons.findIndex((([e])=>e===n.target));-1!==t&&this.handleSelect(t),document.addEventListener("mouseup",e)}))}handleSelect(e){const[n,t,a]=this.buttons[e],r=function(e){var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);if(this.dispatchEvent(new CustomEvent("select",{detail:{group:a,hex:t,rgb:r}})),-1!==this.index){const[e]=this.buttons[this.index];e.classList.toggle("active",!1)}n.classList.toggle("active",!0),this.index=e}render(){if(-1!==this.index){const[e]=this.buttons[this.index];e.classList.toggle("active",!1)}const e=this.buttons.findIndex((e=>e[1]===this.value));if(this.index=e,this.buttons[e]){const[n]=this.buttons[e];n.classList.toggle("active",!0)}}})})()})();
+(()=>{"use strict";var e={289:(e,n,t)=>{t.d(n,{A:()=>m});var a=t(601),r=t.n(a),o=t(314),h=t.n(o)()(r());h.push([e.id,"button {\n  border: 0;\n  padding: 0;\n  outline: 0;\n}\n\nbutton.active {\n  border: 2px solid #fff;\n  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);\n  order: 1;\n}\n\nbutton.white.active {\n  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5) inset;\n}\n\n[part~=grid] {\n  display: grid;\n  grid-template-columns: repeat(19, 1rem);\n  grid-template-rows: repeat(14, 1rem);\n}",""]);var s=new CSSStyleSheet;s.replaceSync(h.toString());const m=s},314:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",a=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),a&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),a&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,a,r,o){"string"==typeof e&&(e=[[null,e,void 0]]);var h={};if(a)for(var s=0;s<this.length;s++){var m=this[s][0];null!=m&&(h[m]=!0)}for(var i=0;i<e.length;i++){var l=[].concat(e[i]);a&&h[l[0]]||(void 0!==o&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),t&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=t):l[2]=t),r&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=r):l[4]="".concat(r)),n.push(l))}},n}},601:e=>{e.exports=function(e){return e[1]}}},n={};function t(a){var r=n[a];if(void 0!==r)return r.exports;var o=n[a]={id:a,exports:{}};return e[a](o,o.exports,t),o.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var a in n)t.o(n,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:n[a]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);const a=Symbol("addObserver"),r=Symbol("removeObserver"),o=Symbol("getObservers"),h=Symbol("swapObserver"),s=Symbol("isProxy"),m=Symbol("getTarget"),i=["fill","pop","push","reverse","shift","sort","splice","unshift"],l=new Map;function c(e){return new Proxy(e,{get(n,t){if("symbol"==typeof t){switch(t){case s:return!0;case m:return n;case o:return l.has(e);case h:return(n,t)=>{const a=l.get(e);a.forEach(((r,o)=>{if(o.getRootNode().host===n){const n=a.get(o);l.has(t)?l.get(t).has(o)?l.get(t).get(o).push(a.get(o)):l.get(t).set(o,a.get(o)):l.set(t,new Map([[o,n]])),l.delete(e),n.forEach((e=>{e(null,x.swap,[t])}))}}))};case a:return(n,t)=>{l.has(e)?l.get(e).has(n)?l.get(e).get(n).push(t):l.get(e).set(n,[t]):l.set(e,new Map([[n,[t]]]))};case r:return n=>{l.has(e)&&(l.get(e).delete(n),0===l.get(e).size&&l.delete(e))};case Symbol.toPrimitive:case Symbol.toStringTag:return Reflect.get(n,t)}throw new Error("Unsupported symbol")}if(t in n){if(!Number.isNaN(Number(t)))return"object"==typeof n[t]?c(n[t]):n[t];if("copyWithin"===t)throw new Error("Unsupported array method copyWithin");if(i.includes(t))return l.has(n)?function(){const e=Array.prototype[t].apply(n,arguments);return l.get(n).forEach(((e,a)=>{e.forEach((e=>{e(n,t,arguments)}))})),e}:Reflect.get(n,t);if(n[t]instanceof Array)return c(n[t])}return Reflect.get(n,t)},set(e,n,t){if("symbol"==typeof n)throw new Error("Setting symbols not allowed.");if(Array.isArray(e))return Reflect.set(e,n,t);if(l.has(e)){l.get(e).forEach(((e,a)=>{e.forEach((e=>{e(n,t)}))}))}return Reflect.set(e,n,t)}})}window.observers=l;const x={fill:"fill",pop:"pop",push:"push",reverse:"reverse",shift:"shift",sort:"sort",splice:"splice",unshift:"unshift",swap:"swap"};class PropError extends Error{constructor(e,n){super(e),this.name="PropError",Error.captureStackTrace&&Error.captureStackTrace(this,n)}}Symbol("index");const F=Symbol("init"),u=Symbol("template"),d=Symbol("style"),p=Symbol("parent");function A(e){return e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}function E(e){return e.replace(/-([a-z])/g,(e=>e[1].toUpperCase()))}function f(e={}){return function(n,t){if("class"!==t.kind)throw new Error("@Component() can only decorate a class");var a,r;Reflect.defineProperty(n,"name",{value:e.selector,writable:!1,configurable:!1}),!n.prototype[p]||n.prototype[p][n.prototype[p].length-1]instanceof Object.getPrototypeOf(n)?n.prototype instanceof HTMLElement&&(n.prototype[p]=[n.prototype],n.prototype[d]=e.style?[e.style]:[],n.prototype[u]=e.template||""):(n.prototype[p].push(n.prototype),n.prototype[d].push(e.style),n.prototype[u]=(a=n.prototype[u],(r=e.template||null)&&r.match(/<parent\/>/)?r.replace(/<parent\/>/,a):`${a}${r||""}`));const o=n.prototype.connectedCallback||(()=>{}),h=n.prototype.disconnectedCallback||(()=>{});n.prototype.connectedCallback=function(){if(this[F]||void 0!==e.template||void 0!==e.style)if(this[F]){if(this[F]&&e.style);else if(this[F]&&e.selector&&!e.template)throw new Error("You need to pass a template for an extended element.")}else{if(!1===e.useShadow)throw new Error("unsupported");{const e=document.createElement("template");e.innerHTML=n.prototype[u]||"";const t=document.importNode(e.content,!0),a=this.attachShadow({mode:"open"});a.adoptedStyleSheets=n.prototype[d].map((e=>{if(e instanceof CSSStyleSheet)return e;var n=new CSSStyleSheet;return n.replaceSync(e.toString()),n})),a.appendChild(t)}}else!1===e.useShadow||this.attachShadow({mode:"open"});const t=new Set;for(const e of this.shadowRoot.querySelectorAll("*"))-1!==e.localName.indexOf("-")&&t.add(e.localName);const a=Array.from(t.values()).map((e=>customElements.get(e)?Promise.resolve():customElements.whenDefined(e))),r=()=>{this[p].map((e=>{e.render&&e.render.call(this,n.observedAttributes?n.observedAttributes.reduce(((e,n)=>(e[E(n)]=!0,e)),{}):{})}))};0===a.length?(this[F]=!0,o.call(this),r()):Promise.all(a).then((()=>{this[F]=!0,o.call(this);for(const e of this.shadowRoot.querySelectorAll("slot"))e.dispatchEvent(new CustomEvent("slotchange"));r()}))},n.prototype.disconnectedCallback=function(){h.call(this)},n.prototype.attributeChangedCallback=function(e,n,t){this[E(e)]=t},t.addInitializer((function(){if(e.selector){if(window.customElements.get(e.selector))throw new Error(`@Component() ${t.name} duplicate selector '${e.selector}'`);window.customElements.define(e.selector,n)}}))}}Symbol("transmute");function y(e){return!!e&&e.constructor===Array}function g(e,n){e[F]&&e[p].map((t=>{t.render&&t.render.call(e,{[n]:!0})}))}function C(e){return null===e?"null":y(e)?"array":typeof e}Symbol("hasProxy");const b=Symbol("meta");const v=[{name:"Red",camel:"red",colors:[{name:"50",hex:"FFEBEE"},{name:"100",hex:"FFCDD2"},{name:"200",hex:"EF9A9A"},{name:"300",hex:"E57373"},{name:"400",hex:"EF5350"},{name:"500",hex:"F44336"},{name:"600",hex:"E53935"},{name:"700",hex:"D32F2F"},{name:"800",hex:"C62828"},{name:"900",hex:"B71C1C"},{name:"A100",hex:"FF8A80"},{name:"A200",hex:"FF5252"},{name:"A400",hex:"FF1744"},{name:"A700",hex:"D50000"}]},{name:"Pink",camel:"pink",colors:[{name:"50",hex:"FCE4EC"},{name:"100",hex:"F8BBD0"},{name:"200",hex:"F48FB1"},{name:"300",hex:"F06292"},{name:"400",hex:"EC407A"},{name:"500",hex:"E91E63"},{name:"600",hex:"D81B60"},{name:"700",hex:"C2185B"},{name:"800",hex:"AD1457"},{name:"900",hex:"880E4F"},{name:"A100",hex:"FF80AB"},{name:"A200",hex:"FF4081"},{name:"A400",hex:"F50057"},{name:"A700",hex:"C51162"}]},{name:"Purple",camel:"purple",colors:[{name:"50",hex:"F3E5F5"},{name:"100",hex:"E1BEE7"},{name:"200",hex:"CE93D8"},{name:"300",hex:"BA68C8"},{name:"400",hex:"AB47BC"},{name:"500",hex:"9C27B0"},{name:"600",hex:"8E24AA"},{name:"700",hex:"7B1FA2"},{name:"800",hex:"6A1B9A"},{name:"900",hex:"4A148C"},{name:"A100",hex:"EA80FC"},{name:"A200",hex:"E040FB"},{name:"A400",hex:"D500F9"},{name:"A700",hex:"AA00FF"}]},{name:"Deep Purple",camel:"deepPurple",colors:[{name:"50",hex:"EDE7F6"},{name:"100",hex:"D1C4E9"},{name:"200",hex:"B39DDB"},{name:"300",hex:"9575CD"},{name:"400",hex:"7E57C2"},{name:"500",hex:"673AB7"},{name:"600",hex:"5E35B1"},{name:"700",hex:"512DA8"},{name:"800",hex:"4527A0"},{name:"900",hex:"311B92"},{name:"A100",hex:"B388FF"},{name:"A200",hex:"7C4DFF"},{name:"A400",hex:"651FFF"},{name:"A700",hex:"6200EA"}]},{name:"Indigo",camel:"indigo",colors:[{name:"50",hex:"E8EAF6"},{name:"100",hex:"C5CAE9"},{name:"200",hex:"9FA8DA"},{name:"300",hex:"7986CB"},{name:"400",hex:"5C6BC0"},{name:"500",hex:"3F51B5"},{name:"600",hex:"3949AB"},{name:"700",hex:"303F9F"},{name:"800",hex:"283593"},{name:"900",hex:"1A237E"},{name:"A100",hex:"8C9EFF"},{name:"A200",hex:"536DFE"},{name:"A400",hex:"3D5AFE"},{name:"A700",hex:"304FFE"}]},{name:"Blue",camel:"blue",colors:[{name:"50",hex:"E3F2FD"},{name:"100",hex:"BBDEFB"},{name:"200",hex:"90CAF9"},{name:"300",hex:"64B5F6"},{name:"400",hex:"42A5F5"},{name:"500",hex:"2196F3"},{name:"600",hex:"1E88E5"},{name:"700",hex:"1976D2"},{name:"800",hex:"1565C0"},{name:"900",hex:"0D47A1"},{name:"A100",hex:"82B1FF"},{name:"A200",hex:"448AFF"},{name:"A400",hex:"2979FF"},{name:"A700",hex:"2962FF"}]},{name:"Light Blue",camel:"lightBlue",colors:[{name:"50",hex:"E1F5FE"},{name:"100",hex:"B3E5FC"},{name:"200",hex:"81D4FA"},{name:"300",hex:"4FC3F7"},{name:"400",hex:"29B6F6"},{name:"500",hex:"03A9F4"},{name:"600",hex:"039BE5"},{name:"700",hex:"0288D1"},{name:"800",hex:"0277BD"},{name:"900",hex:"01579B"},{name:"A100",hex:"80D8FF"},{name:"A200",hex:"40C4FF"},{name:"A400",hex:"00B0FF"},{name:"A700",hex:"0091EA"}]},{name:"Cyan",camel:"cyan",colors:[{name:"50",hex:"E0F7FA"},{name:"100",hex:"B2EBF2"},{name:"200",hex:"80DEEA"},{name:"300",hex:"4DD0E1"},{name:"400",hex:"26C6DA"},{name:"500",hex:"00BCD4"},{name:"600",hex:"00ACC1"},{name:"700",hex:"0097A7"},{name:"800",hex:"00838F"},{name:"900",hex:"006064"},{name:"A100",hex:"84FFFF"},{name:"A200",hex:"18FFFF"},{name:"A400",hex:"00E5FF"},{name:"A700",hex:"00B8D4"}]},{name:"Teal",camel:"teal",colors:[{name:"50",hex:"E0F2F1"},{name:"100",hex:"B2DFDB"},{name:"200",hex:"80CBC4"},{name:"300",hex:"4DB6AC"},{name:"400",hex:"26A69A"},{name:"500",hex:"009688"},{name:"600",hex:"00897B"},{name:"700",hex:"00796B"},{name:"800",hex:"00695C"},{name:"900",hex:"004D40"},{name:"A100",hex:"A7FFEB"},{name:"A200",hex:"64FFDA"},{name:"A400",hex:"1DE9B6"},{name:"A700",hex:"00BFA5"}]},{name:"Green",camel:"green",colors:[{name:"50",hex:"E8F5E9"},{name:"100",hex:"C8E6C9"},{name:"200",hex:"A5D6A7"},{name:"300",hex:"81C784"},{name:"400",hex:"66BB6A"},{name:"500",hex:"4CAF50"},{name:"600",hex:"43A047"},{name:"700",hex:"388E3C"},{name:"800",hex:"2E7D32"},{name:"900",hex:"1B5E20"},{name:"A100",hex:"B9F6CA"},{name:"A200",hex:"69F0AE"},{name:"A400",hex:"00E676"},{name:"A700",hex:"00C853"}]},{name:"Light Green",camel:"lightGreen",colors:[{name:"50",hex:"F1F8E9"},{name:"100",hex:"DCEDC8"},{name:"200",hex:"C5E1A5"},{name:"300",hex:"AED581"},{name:"400",hex:"9CCC65"},{name:"500",hex:"8BC34A"},{name:"600",hex:"7CB342"},{name:"700",hex:"689F38"},{name:"800",hex:"558B2F"},{name:"900",hex:"33691E"},{name:"A100",hex:"CCFF90"},{name:"A200",hex:"B2FF59"},{name:"A400",hex:"76FF03"},{name:"A700",hex:"64DD17"}]},{name:"Lime",camel:"lime",colors:[{name:"50",hex:"F9FBE7"},{name:"100",hex:"F0F4C3"},{name:"200",hex:"E6EE9C"},{name:"300",hex:"DCE775"},{name:"400",hex:"D4E157"},{name:"500",hex:"CDDC39"},{name:"600",hex:"C0CA33"},{name:"700",hex:"AFB42B"},{name:"800",hex:"9E9D24"},{name:"900",hex:"827717"},{name:"A100",hex:"F4FF81"},{name:"A200",hex:"EEFF41"},{name:"A400",hex:"C6FF00"},{name:"A700",hex:"AEEA00"}]},{name:"Yellow",camel:"yellow",colors:[{name:"50",hex:"FFFDE7"},{name:"100",hex:"FFF9C4"},{name:"200",hex:"FFF59D"},{name:"300",hex:"FFF176"},{name:"400",hex:"FFEE58"},{name:"500",hex:"FFEB3B"},{name:"600",hex:"FDD835"},{name:"700",hex:"FBC02D"},{name:"800",hex:"F9A825"},{name:"900",hex:"F57F17"},{name:"A100",hex:"FFFF8D"},{name:"A200",hex:"FFFF00"},{name:"A400",hex:"FFEA00"},{name:"A700",hex:"FFD600"}]},{name:"Amber",camel:"amber",colors:[{name:"50",hex:"FFF8E1"},{name:"100",hex:"FFECB3"},{name:"200",hex:"FFE082"},{name:"300",hex:"FFD54F"},{name:"400",hex:"FFCA28"},{name:"500",hex:"FFC107"},{name:"600",hex:"FFB300"},{name:"700",hex:"FFA000"},{name:"800",hex:"FF8F00"},{name:"900",hex:"FF6F00"},{name:"A100",hex:"FFE57F"},{name:"A200",hex:"FFD740"},{name:"A400",hex:"FFC400"},{name:"A700",hex:"FFAB00"}]},{name:"Orange",camel:"orange",colors:[{name:"50",hex:"FFF3E0"},{name:"100",hex:"FFE0B2"},{name:"200",hex:"FFCC80"},{name:"300",hex:"FFB74D"},{name:"400",hex:"FFA726"},{name:"500",hex:"FF9800"},{name:"600",hex:"FB8C00"},{name:"700",hex:"F57C00"},{name:"800",hex:"EF6C00"},{name:"900",hex:"E65100"},{name:"A100",hex:"FFD180"},{name:"A200",hex:"FFAB40"},{name:"A400",hex:"FF9100"},{name:"A700",hex:"FF6D00"}]},{name:"Deep Orange",camel:"deepOrange",colors:[{name:"50",hex:"FBE9E7"},{name:"100",hex:"FFCCBC"},{name:"200",hex:"FFAB91"},{name:"300",hex:"FF8A65"},{name:"400",hex:"FF7043"},{name:"500",hex:"FF5722"},{name:"600",hex:"F4511E"},{name:"700",hex:"E64A19"},{name:"800",hex:"D84315"},{name:"900",hex:"BF360C"},{name:"A100",hex:"FF9E80"},{name:"A200",hex:"FF6E40"},{name:"A400",hex:"FF3D00"},{name:"A700",hex:"DD2C00"}]},{name:"Brown",camel:"brown",colors:[{name:"50",hex:"EFEBE9"},{name:"100",hex:"D7CCC8"},{name:"200",hex:"BCAAA4"},{name:"300",hex:"A1887F"},{name:"400",hex:"8D6E63"},{name:"500",hex:"795548"},{name:"600",hex:"6D4C41"},{name:"700",hex:"5D4037"},{name:"800",hex:"4E342E"},{name:"900",hex:"3E2723"}]},{name:"Grey",camel:"grey",colors:[{name:"50",hex:"FAFAFA"},{name:"100",hex:"F5F5F5"},{name:"200",hex:"EEEEEE"},{name:"300",hex:"E0E0E0"},{name:"400",hex:"BDBDBD"},{name:"500",hex:"9E9E9E"},{name:"600",hex:"757575"},{name:"700",hex:"616161"},{name:"800",hex:"424242"},{name:"900",hex:"212121"}]},{name:"Blue Grey",camel:"blueGrey",colors:[{name:"50",hex:"ECEFF1"},{name:"100",hex:"CFD8DC"},{name:"200",hex:"B0BEC5"},{name:"300",hex:"90A4AE"},{name:"400",hex:"78909C"},{name:"500",hex:"607D8B"},{name:"600",hex:"546E7A"},{name:"700",hex:"455A64"},{name:"800",hex:"37474F"},{name:"900",hex:"263238"}]},{name:"Misc",camel:"",colors:[{name:"white",hex:"FFFFFF",x:19,y:0},{name:"black",hex:"000000",x:19,y:1}]}];var B=t(289),w=function(e,n,t,a,r,o){function h(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,m=a.kind,i="getter"===m?"get":"setter"===m?"set":"value",l=!n&&e?a.static?e:e.prototype:null,c=n||(l?Object.getOwnPropertyDescriptor(l,a.name):{}),x=!1,F=t.length-1;F>=0;F--){var u={};for(var d in a)u[d]="access"===d?{}:a[d];for(var d in a.access)u.access[d]=a.access[d];u.addInitializer=function(e){if(x)throw new TypeError("Cannot add initializers after decoration has completed");o.push(h(e||null))};var p=(0,t[F])("accessor"===m?{get:c.get,set:c.set}:c[i],u);if("accessor"===m){if(void 0===p)continue;if(null===p||"object"!=typeof p)throw new TypeError("Object expected");(s=h(p.get))&&(c.get=s),(s=h(p.set))&&(c.set=s),(s=h(p.init))&&r.unshift(s)}else(s=h(p))&&("field"===m?r.unshift(s):c[i]=s)}l&&Object.defineProperty(l,a.name,c),x=!0},D=function(e,n,t){for(var a=arguments.length>2,r=0;r<n.length;r++)t=a?n[r].call(e,t):n[r].call(e);return a?t:void 0};(()=>{let e,n,t,a,r=[f({selector:"pg-color",style:B.A,template:'<div part="grid"></div>'})],i=[],l=HTMLElement,x=[],F=[],u=[],d=[];(class extends l{static{n=this}static{const p="function"==typeof Symbol&&Symbol.metadata?Object.create(l[Symbol.metadata]??null):void 0;var E;t=[function(e,n){const t=n.name,a=Symbol(t),r=Symbol(`${t}:type`),i=Symbol(`${t}:meta`);return n.addInitializer((function(){Reflect.defineProperty(this,t,{get:()=>"object"===this[r]||"array"===this[r]?this[a][s]?this[a]:c(this[a]):this[a],set:e=>{const n=C(E?E(e):e);if("index"!==t&&this[r]!==n&&"null"!==this[r]&&"null"!==n)throw new Error(`@Prop() ${t} with type '${this[r]}' cannot be set to ${n}.`);if("array"===this[r]){if(!y(e))throw new PropError(`Array "${t}" (Prop) initialized already. Reassignments must be array type.`,Object.getOwnPropertyDescriptor(this,t)?.set);if(this[a]===e)throw new Error("Setting an array to itself is not allowed.");const n=c(this[a]);if(n[o]){const r=e[s]?e[m]:e;n[h](this,r),this[a]=e,console.log(">>> trigger render???",this,t)}else this[a]=e}else this[a]=E?E(e):e,g(this,t)}})})),function(e){if(void 0===e&&"index"!==t)throw new Error(`@Prop() ${t} must have an initial value defined.`);if(void 0!==e&&"index"===t)throw new Error("@Prop() index must not have an initial value defined.");if(!0===e)throw new Error(`@Prop() ${t} boolean must initialize to false.`);if(!n.private){const{constructor:e}=this;e.observedAttributes??=[],e.symbols||(e.symbols={});const{symbols:n}=e,r=A(t);n[t]||(e.observedAttributes.push(r),n[t]=a)}return this[r]=C(e),"array"===this[r]?(this[a]=e,new Proxy(e,{get:(e,n)=>n===b?this[i]:(console.log("errr???"),Reflect.get(this[a],n)),set:(e,n,r)=>{if(n===b)return this[i]=r,!0;const o=Reflect.set(e,n,r);return"length"===n&&this[a].length===r||g(this,t),this[a]=r,o}})):(this[a]=E?E(this.getAttribute(t)??e):this.getAttribute(t)??e,this[a])}}],a=[function(e,n){const t=n.name,a=t.replace(/^\$/,"");n.addInitializer((function(){let e=null;Reflect.defineProperty(this,t,{get(){return e??(e=this.shadowRoot?.querySelector(`[part~=${a}]`))}})}))}],w(null,null,t,{kind:"field",name:"value",static:!1,private:!1,access:{has:e=>"value"in e,get:e=>e.value,set:(e,n)=>{e.value=n}},metadata:p},x,F),w(null,null,a,{kind:"field",name:"$grid",static:!1,private:!1,access:{has:e=>"$grid"in e,get:e=>e.$grid,set:(e,n)=>{e.$grid=n}},metadata:p},u,d),w(null,e={value:n},r,{kind:"class",name:n.name,metadata:p},null,i),n=e.value,p&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:p}),D(n,i)}value=D(this,x,"#000000");$grid=(D(this,F),D(this,u,void 0));buttons=(D(this,d),[]);isMouseDown=!1;index=-1;connectedCallback(){v.forEach(((e,n)=>{e.colors.forEach(((t,a)=>{const r=document.createElement("button");r.style.background=`#${t.hex}`,"black"===t.name?r.style.gridArea="13 / 17 / 15 / 20":"white"===t.name?(r.style.gridArea="11 / 17 / 13 / 20",r.classList.add("white")):(r.style.gridRow=`${a+1}`,r.style.gridColumn=`${n+1}`);const o=this.buttons.push([r,`#${t.hex}`,e]);r.addEventListener("click",(()=>{this.handleSelect(o-1)})),r.addEventListener("mouseenter",(()=>{this.isMouseDown&&this.handleSelect(o-1)})),this.$grid.appendChild(r)}))}));const e=()=>{this.isMouseDown=!1,document.removeEventListener("mouseup",e)};this.$grid.addEventListener("mousedown",(n=>{this.isMouseDown=!0;const t=this.buttons.findIndex((([e])=>e===n.target));-1!==t&&this.handleSelect(t),document.addEventListener("mouseup",e)}))}handleSelect(e){const[n,t,a]=this.buttons[e],r=function(e){var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return n?{r:parseInt(n[1],16),g:parseInt(n[2],16),b:parseInt(n[3],16)}:null}(t);if(this.dispatchEvent(new CustomEvent("select",{detail:{group:a,hex:t,rgb:r}})),-1!==this.index){const[e]=this.buttons[this.index];e.classList.toggle("active",!1)}n.classList.toggle("active",!0),this.index=e}render(){if(-1!==this.index){const[e]=this.buttons[this.index];e.classList.toggle("active",!1)}const e=this.buttons.findIndex((e=>e[1]===this.value));if(this.index=e,this.buttons[e]){const[n]=this.buttons[e];n.classList.toggle("active",!0)}}})})()})();