UNPKG

@aurigma/ui-framework

Version:

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

customerscanvas.com

69 lines (67 loc) • 27.4 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[20],{858:function(t,e){t.exports='<style>\n .text {\n padding-top: 12px;\n padding-bottom: 12px;\n @apply --au-body2-font;\n color: var(--au-widget--color, --theme-text-color-1);\n --au-hem: var(--au-widget--font-size);\n }\n\n .color-picker__label {\n display: flex;\n align-items: center;\n cursor: pointer;\n outline: none;\n }\n\n .color-picker__color {\n width: 64px;\n height: 32px;\n border: 1px solid #E0E0E0;\n border-radius: 2px;\n margin-right: 12px;\n }\n\n .color-picker__text {\n font-family: var(--au-font-family);\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n line-height: 18px;\n\n color: #333333;\n }\n\n color-palette {\n position: absolute;\n z-index: 1;\n outline: none;\n }\n</style>\n<div tabindex="1" id="label" class="color-picker__label" onclick="{{togglePicker}}">\n <div class="color-picker__color" style$="background-color:{{displayColor}}"></div>\n <div class="color-picker__text">{{text}}</div>\n</div>\n\x3c!-- <color-picker id="picker" hidden="{{hiddenColor}}" color="{{color}}" name="{{text}}"></color-picker> --\x3e\n<color-palette tabindex="1" id="palette" color="{{color}}" hidden="{{hiddenColor}}" defaultColor="{{color}}"\n colors="{{colors}}">\n</color-palette>\n'},859:function(t,e,o){ /*! * iro.js v4.2.2 * 2016-2019 James Daniel * Licensed under MPL 2.0 * github.com/jaames/iro.js */ t.exports=(()=>{var F=function(){},L={},c=[],h=[];function p(t,e){for(var o,n,r,i=arguments,s=h,l=arguments.length;2<l--;)c.push(i[l]);for(e&&null!=e.children&&(c.length||c.push(e.children),delete e.children);c.length;)if((n=c.pop())&&void 0!==n.pop)for(l=n.length;l--;)c.push(n[l]);else"boolean"==typeof n&&(n=null),(r="function"!=typeof t)&&(null==n?n="":"number"==typeof n?n=String(n):"string"!=typeof n&&(r=!1)),r&&o?s[s.length-1]+=n:s===h?s=[n]:s.push(n),o=r;var a=new F;return a.nodeName=t,a.children=s,a.attributes=null==e?void 0:e,a.key=null==e?void 0:e.key,a}function x(t,e){for(var o in e)t[o]=e[o];return t}function l(t,e){null!=t&&("function"==typeof t?t(e):t.current=e)}var I="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout,U=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,e=[];function W(t){t._dirty||(t._dirty=!0,1!=e.push(t))||I(D)}function D(){for(var t;t=e.pop();)t._dirty&&k(t)}function B(t,e){return t.normalizedNodeName===e||t.nodeName.toLowerCase()===e.toLowerCase()}function $(t){var e=x({},t.attributes),o=(e.children=t.children,t.nodeName.defaultProps);if(void 0!==o)for(var n in o)void 0===e[n]&&(e[n]=o[n]);return e}function j(t){var e=t.parentNode;e&&e.removeChild(t)}function V(t,e,o,n,r){if("key"!==(e="className"===e?"class":e))if("ref"===e)l(o,null),l(n,t);else if("class"!==e||r)if("style"===e){if(n&&"string"!=typeof n&&"string"!=typeof o||(t.style.cssText=n||""),n&&"object"==typeof n){if("string"!=typeof o)for(var i in o)i in n||(t.style[i]="");for(var i in n)t.style[i]="number"==typeof n[i]&&!1===U.test(i)?n[i]+"px":n[i]}}else if("dangerouslySetInnerHTML"===e)n&&(t.innerHTML=n.__html||"");else if("o"==e[0]&&"n"==e[1]){var s=e!==(e=e.replace(/Capture$/,""));e=e.toLowerCase().substring(2),n?o||t.addEventListener(e,z,s):t.removeEventListener(e,z,s),(t._listeners||(t._listeners={}))[e]=n}else if("list"!==e&&"type"!==e&&!r&&e in t){try{t[e]=null==n?"":n}catch(t){}null!=n&&!1!==n||"spellcheck"==e||t.removeAttribute(e)}else{o=r&&e!==(e=e.replace(/^xlink:?/,""));null==n||!1===n?o?t.removeAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase()):t.removeAttribute(e):"function"!=typeof n&&(o?t.setAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase(),n):t.setAttribute(e,n))}else t.className=n||""}function z(t){return this._listeners[t.type](t)}var G=[],w=0,d=!1,u=!1;function q(){for(var t;t=G.shift();)t.componentDidMount&&t.componentDidMount()}function J(t,e,o,n,r,i){w++||(d=null!=r&&void 0!==r.ownerSVGElement,u=null!=t&&!("__preactattr_"in t));t=function O(t,e,o,n,r){var i=t,s=d;if(null!=e&&"boolean"!=typeof e||(e=""),"string"==typeof e||"number"==typeof e)return t&&void 0!==t.splitText&&t.parentNode&&(!t._component||r)?t.nodeValue!=e&&(t.nodeValue=e):(i=document.createTextNode(e),t&&(t.parentNode&&t.parentNode.replaceChild(i,t),S(t,!0))),i.__preactattr_=!0,i;var r=e.nodeName;if("function"==typeof r)return((t,e,o,n)=>{for(var r=t&&t._component,i=r,s=t,l=r&&t._componentConstructor===e.nodeName,a=l,c=$(e);r&&!a&&(r=r._parentComponent);)a=r.constructor===e.nodeName;return r&&a&&(!n||r._component)?(C(r,c,3,o,n),t=r.base):(i&&!l&&(M(i),t=s=null),r=Y(e.nodeName,c,o),t&&!r.nextBase&&(r.nextBase=t,s=null),C(r,c,1,o,n),t=r.base,s&&t!==s&&(s._component=null,S(s,!1))),t})(t,e,o,n);if(d="svg"===r||"foreignObject"!==r&&d,r=String(r),(!t||!B(t,r))&&(r=r,(a=d?document.createElementNS("http://www.w3.org/2000/svg",r):document.createElement(r)).normalizedNodeName=r,i=a,t)){for(;t.firstChild;)i.appendChild(t.firstChild);t.parentNode&&t.parentNode.replaceChild(i,t),S(t,!0)}var r=i.firstChild,l=i.__preactattr_,a=e.children;if(null==l){l=i.__preactattr_={};for(var c=i.attributes,h=c.length;h--;)l[c[h].name]=c[h].value}return!u&&a&&1===a.length&&"string"==typeof a[0]&&null!=r&&void 0!==r.splitText&&null==r.nextSibling?r.nodeValue!=a[0]&&(r.nodeValue=a[0]):(a&&a.length||null!=r)&&((t,e,o,n,r)=>{var i,s,l,a,c,h,p,d,u=t.childNodes,f=[],v={},g=0,b=0,_=u.length,y=0,m=e?e.length:0;if(0!==_)for(var x=0;x<_;x++){var w,C=u[x],k=C.__preactattr_;null!=(w=m&&k?C._component?C._component.__key:k.key:null)?(g++,v[w]=C):(k||(void 0!==C.splitText?!r||C.nodeValue.trim():r))&&(f[y++]=C)}if(0!==m)for(x=0;x<m;x++){if(a=e[x],(c=null)!=(w=a.key))g&&void 0!==v[w]&&(c=v[w],v[w]=void 0,g--);else if(b<y)for(i=b;i<y;i++)if(void 0!==f[i]&&(h=s=f[i],d=r,"string"==typeof(p=a)||"number"==typeof p?void 0!==h.splitText:"string"==typeof p.nodeName?!h._componentConstructor&&B(h,p.nodeName):d||h._componentConstructor===p.nodeName)){c=s,f[i]=void 0,i===y-1&&y--,i===b&&b++;break}c=O(c,a,o,n),l=u[x],c&&c!==t&&c!==l&&(null==l?t.appendChild(c):c===l.nextSibling?j(l):t.insertBefore(c,l))}if(g)for(var x in v)void 0!==v[x]&&S(v[x],!1);for(;b<=y;)void 0!==(c=f[y--])&&S(c,!1)})(i,a,o,n,u||null!=l.dangerouslySetInnerHTML),((t,e,o)=>{for(var n in o)e&&null!=e[n]||null==o[n]||V(t,n,o[n],o[n]=void 0,d);for(n in e)"children"===n||"innerHTML"===n||n in o&&e[n]===("value"===n||"checked"===n?t:o)[n]||V(t,n,o[n],o[n]=e[n],d)})(i,e.attributes,l),d=s,i}(t,e,o,n,i);return r&&t.parentNode!==r&&r.appendChild(t),--w||(u=!1,i)||q(),t}function S(t,e){var o=t._component;o?M(o):(null!=t.__preactattr_&&l(t.__preactattr_.ref,null),!1!==e&&null!=t.__preactattr_||j(t),X(t))}function X(t){for(t=t.lastChild;t;){var e=t.previousSibling;S(t,!0),t=e}}var i=[];function Y(t,e,o){var n,r=i.length;for(t.prototype&&t.prototype.render?(n=new t(e,o),s.call(n,e,o)):((n=new s(e,o)).constructor=t,n.render=K);r--;)if(i[r].constructor===t)return n.nextBase=i[r].nextBase,i.splice(r,1),n;return n}function K(t,e,o){return this.constructor(t,o)}function C(t,e,o,n,r){t._disable||(t._disable=!0,t.__ref=e.ref,t.__key=e.key,delete e.ref,delete e.key,void 0===t.constructor.getDerivedStateFromProps&&(!t.base||r?t.componentWillMount&&t.componentWillMount():t.componentWillReceiveProps&&t.componentWillReceiveProps(e,n)),n&&n!==t.context&&(t.prevContext||(t.prevContext=t.context),t.context=n),t.prevProps||(t.prevProps=t.props),t.props=e,t._disable=!1,0!==o&&(1!==o&&!1===L.syncComponentUpdates&&t.base?W(t):k(t,1,r)),l(t.__ref,t))}function k(t,e,o,n){if(!t._disable){var r,i=t.props,s=t.state,l=t.context,a=t.prevProps||i,c=t.prevState||s,h=t.prevContext||l,p=t.base,d=t.nextBase,u=p||d,f=t._component,v=!1,g=h;if(t.constructor.getDerivedStateFromProps&&(s=x(x({},s),t.constructor.getDerivedStateFromProps(i,s)),t.state=s),p&&(t.props=a,t.state=c,t.context=h,2!==e&&t.shouldComponentUpdate&&!1===t.shouldComponentUpdate(i,s,l)?v=!0:t.componentWillUpdate&&t.componentWillUpdate(i,s,l),t.props=i,t.state=s,t.context=l),t.prevProps=t.prevState=t.prevContext=t.nextBase=null,t._dirty=!1,!v){h=t.render(i,s,l),t.getChildContext&&(l=x(x({},l),t.getChildContext())),p&&t.getSnapshotBeforeUpdate&&(g=t.getSnapshotBeforeUpdate(a,c));var b,_,i=h&&h.nodeName;if("function"==typeof i?(s=$(h),(r=f)&&r.constructor===i&&s.key==r.__key?C(r,s,1,l,!1):(b=r,t._component=r=Y(i,s,l),r.nextBase=r.nextBase||d,r._parentComponent=t,C(r,s,0,l,!1),k(r,1,o,!0)),_=r.base):(i=u,(b=f)&&(i=t._component=null),!u&&1!==e||(i&&(i._component=null),_=J(i,h,l,o||!p,u&&u.parentNode,!0))),u&&_!==u&&r!==f&&(d=u.parentNode)&&_!==d&&(d.replaceChild(_,u),b||(u._component=null,S(u,!1))),b&&M(b),(t.base=_)&&!n){for(var y=t,m=t;m=m._parentComponent;)(y=m).base=_;_._component=y,_._componentConstructor=y.constructor}}for(!p||o?G.push(t):v||t.componentDidUpdate&&t.componentDidUpdate(a,c,g);t._renderCallbacks.length;)t._renderCallbacks.pop().call(t);w||n||q()}}function M(t){var e=t.base,o=(t._disable=!0,t.componentWillUnmount&&t.componentWillUnmount(),t.base=null,t._component);o?M(o):e&&(null!=e.__preactattr_&&l(e.__preactattr_.ref,null),j(t.nextBase=e),i.push(t),X(e)),l(t.__ref,null)}function s(t,e){this._dirty=!0,this.context=e,this.props=t,this.state=this.state||{},this._renderCallbacks=[]}function a(t,e,o,n){void 0===n&&(n={});for(var r=0;r<e.length;r++)t.addEventListener(e[r],o,n)}function Q(t,e,o,n){void 0===n&&(n={});for(var r=0;r<e.length;r++)t.removeEventListener(e[r],o,n)}x(s.prototype,{setState:function(t,e){this.prevState||(this.prevState=this.state),this.state=x(x({},this.state),"function"==typeof t?t(this.state,this.props):t),e&&this._renderCallbacks.push(e),W(this)},forceUpdate:function(t){t&&this._renderCallbacks.push(t),k(this,2)},render:function(){}});var f="mousedown",v="mousemove",g="mouseup",b="touchstart",_="touchmove",y="touchend",t=(e=>{function t(t){e.call(this,t),this.uid=(Math.random()+1).toString(36).substring(5)}return e&&(t.__proto__=e),((t.prototype=Object.create(e&&e.prototype)).constructor=t).prototype.componentDidMount=function(){a(this.base,[f,b],this,{passive:!1})},t.prototype.componentWillUnmount=function(){Q(this.base,[f,b],this)},t.prototype.handleEvent=function(t){t.preventDefault();var e=t.touches?t.changedTouches[0]:t,o=e.clientX,n=e.clientY,r=this.base.getBoundingClientRect();switch(t.type){case f:case b:a(document,[v,_,g,y],this,{passive:!1}),this.handleInput(o,n,r,"START");break;case v:case _:this.handleInput(o,n,r,"MOVE");break;case g:case y:this.handleInput(o,n,r,"END"),Q(document,[v,_,g,y],this,{passive:!1})}},t})(s);function m(t){var e=window.navigator.userAgent,o=/^((?!chrome|android).)*safari/i.test(e),e=/iPhone|iPod|iPad/i.test(e),n=window.location;return o||e?n.protocol+"//"+n.host+n.pathname+n.search+t:t}function Z(t,e,o,n,r){var i=r-n<=180?0:1;return n*=Math.PI/180,"M "+(t+o*Math.cos(r*=Math.PI/180))+" "+(e+o*Math.sin(r))+" A "+o+" "+o+" 0 "+i+" 0 "+(t+o*Math.cos(n))+" "+(e+o*Math.sin(n))}function O(t){var e=t.r,o=t.url;return p("svg",{class:"iro__handle",x:t.x,y:t.y,style:{overflow:"visible"}},o&&p("use",Object.assign({},{xlinkHref:m(o)},t.origin)),!o&&p("circle",{class:"iro__handle__inner",r:e,fill:"none","stroke-width":2,stroke:"#000"}),!o&&p("circle",{class:"iro__handle__outer",r:e-2,fill:"none","stroke-width":2,stroke:"#fff"}))}O.defaultProps={x:0,y:0,r:8,url:null,origin:{x:0,y:0}};var tt=(t=>{function e(){t.apply(this,arguments)}return t&&(e.__proto__=t),((e.prototype=Object.create(t&&t.prototype)).constructor=e).prototype.render=function(t){var e=t.width,o=t.borderWidth,n=t.handleRadius,r=t.color.hsv,i=e/2-o,s=(360-r.h)*(Math.PI/180),l=r.s/100*(i-t.padding-n-o),a=i+o,c=i+o;return p("svg",{class:"iro__wheel",width:e,height:e,style:{overflow:"visible",display:"block"}},p("defs",null,p("radialGradient",{id:this.uid},p("stop",{offset:"0%","stop-color":"#fff"}),p("stop",{offset:"100%","stop-color":"#fff","stop-opacity":"0"}))),p("g",{class:"iro__wheel__hue","stroke-width":i,fill:"none"},Array.apply(null,{length:360}).map(function(t,e){return p("path",{key:e,d:Z(a,c,i/2,e,e+1.5),stroke:"hsl("+(360-e)+", 100%, 50%)"})})),p("circle",{class:"iro__wheel__saturation",cx:a,cy:c,r:i,fill:"url("+m("#"+this.uid)+")"}),t.wheelLightness&&p("circle",{class:"iro__wheel__lightness",cx:a,cy:c,r:i,fill:"#000",opacity:1-r.v/100}),p("circle",{class:"iro__wheel__border",cx:a,cy:c,r:i,fill:"none",stroke:t.borderColor,"stroke-width":o}),p(O,{r:n,url:t.handleSvg,origin:t.handleOrigin,x:a+l*Math.cos(s),y:c+l*Math.sin(s)}))},e.prototype.handleInput=function(t,e,o,n){var r=o.left,i=this.props,s=i.width/2,l=s-i.padding-i.handleRadius-i.borderWidth,r=(t=s-(t-r),e=s-(e-o.top),Math.atan2(e,t)),s=360-(Math.round(r*(180/Math.PI))+180),o=Math.min(Math.sqrt(t*t+e*e),l);i.onInput(n,{h:s,s:Math.round(100/l*o)})},e})(t);function P(t,e){var o=-1<t.indexOf("%"),t=parseFloat(t);return o?e/100*t:t}function E(t){return parseInt(t,16)}function o(t){return t.toString(16).padStart(2,"0")}var r,n="(?:[-\\+]?\\d+%?)|(?:[-\\+]?\\d*\\.\\d+%?)",N="[\\s|\\(]+("+n+")[,|\\s]+("+n+")[,|\\s]+("+n+")\\s*\\)?",n="[\\s|\\(]+("+n+")[,|\\s]+("+n+")[,|\\s]+("+n+")[,|\\s]+("+n+")\\s*\\)?",et=new RegExp("rgb"+N),ot=new RegExp("rgba"+n),nt=new RegExp("hsl"+N),rt=new RegExp("hsla"+n),N="^(?:#?|0x?)",n="([0-9a-fA-F]{1})",H="([0-9a-fA-F]{2})",it=new RegExp(N+n+n+n+"$"),st=new RegExp(N+n+n+n+n+"$"),lt=new RegExp(N+H+H+H+"$"),at=new RegExp(N+H+H+H+H+"$"),T=function(t){this._onChange=!1,this._value={h:0,s:0,v:0,a:1},t&&this.set(t)},n={hsv:{configurable:!0},rgb:{configurable:!0},hsl:{configurable:!0},rgbString:{configurable:!0},hexString:{configurable:!0},hslString:{configurable:!0}},ct=(T.prototype.set=function(t){var e="string"==typeof t,o="object"==typeof t;if(e&&/^(?:#?|0x?)[0-9a-fA-F]{3,8}$/.test(t))this.hexString=t;else if(e&&/^rgba?/.test(t))this.rgbString=t;else if(e&&/^hsla?/.test(t))this.hslString=t;else if(o&&t instanceof T)this.hsv=t.hsv;else if(o&&"r"in t&&"g"in t&&"b"in t)this.rgb=t;else if(o&&"h"in t&&"s"in t&&"v"in t)this.hsv=t;else{if(!(o&&"h"in t&&"s"in t&&"l"in t))throw new Error("invalid color value");this.hsl=t}},T.prototype.setChannel=function(t,e,o){this[t]=Object.assign({},this[t],((t={})[e]=o,t))},T.prototype.clone=function(){return new T(this)},T.hsvToRgb=function(t){var e=t.h/60,o=t.s/100,t=t.v/100,n=Math.floor(e),e=e-n,r=t*(1-o),i=t*(1-e*o),e=t*(1-(1-e)*o),o=n%6;return{r:255*[t,i,r,r,e,t][o],g:255*[e,t,t,i,r,r][o],b:255*[r,r,e,t,t,i][o]}},T.rgbToHsv=function(t){var e,o=t.r/255,n=t.g/255,r=t.b/255,t=Math.max(o,n,r),i=Math.min(o,n,r),s=t-i,l=t,a=0===t?0:s/t;switch(t){case i:e=0;break;case o:e=(n-r)/s+(n<r?6:0);break;case n:e=(r-o)/s+2;break;case r:e=(o-n)/s+4}return{h:60*e,s:100*a,v:100*l}},T.hsvToHsl=function(t){var e=t.s/100,o=t.v/100,n=(2-e)*o,r=n<=1?n:2-n;return{h:t.h,s:100*(r<1e-9?0:e*o/r),l:50*n}},T.hslToHsv=function(t){var e=2*t.l,o=t.s*(e<=100?e:200-e)/100;return{h:t.h,s:100*(e+o<1e-9?0:2*o/(e+o)),v:(e+o)/2}},n.hsv.get=function(){var t=this._value;return{h:t.h,s:t.s,v:t.v,a:t.a}},n.hsv.set=function(t){if(this._onChange){var e,o=this._value,n=(t=Object.assign({},o,t),{});for(e in o)n[e]=t[e]!=o[e];this._value=t,(n.h||n.s||n.v||n.a)&&this._onChange(this,n)}else this._value=t},n.rgb.get=function(){var t=T.hsvToRgb(this._value),e=t.r,o=t.g,t=t.b;return{r:Math.round(e),g:Math.round(o),b:Math.round(t)}},n.rgb.set=function(t){this.hsv=T.rgbToHsv(t)},n.hsl.get=function(){var t=T.hsvToHsl(this._value),e=t.h,o=t.s,t=t.l;return{h:Math.round(e),s:Math.round(o),l:Math.round(t)}},n.hsl.set=function(t){this.hsv=T.hslToHsv(t)},n.rgbString.get=function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},n.rgbString.set=function(t){var e,o,n,r,i=1;if((e=et.exec(t))?(o=P(e[1],255),n=P(e[2],255),r=P(e[3],255)):(e=ot.exec(t))&&(o=P(e[1],255),n=P(e[2],255),r=P(e[3],255),i=P(e[4],1)),!e)throw new Error("invalid rgb string");this.rgb={r:o,g:n,b:r,a:i}},n.hexString.get=function(){var t=this.rgb;return"#"+o(t.r)+o(t.g)+o(t.b)},n.hexString.set=function(t){var e,o,n,r,i=255;if((e=it.exec(t))?(o=17*E(e[1]),n=17*E(e[2]),r=17*E(e[3])):(e=st.exec(t))?(o=17*E(e[1]),n=17*E(e[2]),r=17*E(e[3]),i=17*E(e[4])):(e=lt.exec(t))?(o=E(e[1]),n=E(e[2]),r=E(e[3])):(e=at.exec(t))&&(o=E(e[1]),n=E(e[2]),r=E(e[3]),i=E(e[4])),!e)throw new Error("invalid hex string");this.rgb={r:o,g:n,b:r,a:i/255}},n.hslString.get=function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},n.hslString.set=function(t){var e,o,n,r,i=1;if((e=nt.exec(t))?(o=P(e[1],360),n=P(e[2],100),r=P(e[3],100)):(e=rt.exec(t))&&(o=P(e[1],360),n=P(e[2],100),r=P(e[3],100),i=P(e[4],1)),!e)throw new Error("invalid hsl string");this.hsl={h:o,s:n,l:r,a:i}},Object.defineProperties(T.prototype,n),(t=>{function e(){t.apply(this,arguments)}return t&&(e.__proto__=t),((e.prototype=Object.create(t&&t.prototype)).constructor=e).prototype.renderGradient=function(t){var e=t.color.hsv,o=[];switch(t.sliderType){case"hue":o=[{offset:"0",color:"#f00"},{offset:"16.666",color:"#ff0"},{offset:"33.333",color:"#0f0"},{offset:"50",color:"#0ff"},{offset:"66.666",color:"#00f"},{offset:"83.333",color:"#f0f"},{offset:"100",color:"#f00"}];break;case"saturation":var n=T.hsvToHsl({h:e.h,s:0,v:e.v}),r=T.hsvToHsl({h:e.h,s:100,v:e.v}),o=[{offset:"0",color:"hsl("+n.h+", "+n.s+"%, "+n.l+"%)"},{offset:"100",color:"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"}];break;default:n=T.hsvToHsl({h:e.h,s:e.s,v:100});o=[{offset:"0",color:"#000"},{offset:"100",color:"hsl("+n.h+", "+n.s+"%, "+n.l+"%)"}]}return p("linearGradient",{id:this.uid},o.map(function(t){return p("stop",{offset:t.offset+"%","stop-color":t.color})}))},e.prototype.render=function(t){var e=t.width,o=t.borderWidth,n=t.handleRadius,r=t.sliderHeight||2*t.padding+2*n+2*o;this.width=e;var i,s=(this.height=r)/2,l=e-2*s,a=t.color.hsv;switch(t.sliderType){case"hue":i=a.h/=3.6;break;case"saturation":i=a.s;break;default:i=a.v}return p("svg",{class:"iro__slider",width:e,height:r,style:{marginTop:t.sliderMargin,overflow:"visible",display:"block"}},p("defs",null,this.renderGradient(t)),p("rect",{class:"iro__slider__value",rx:s,ry:s,x:o/2,y:o/2,width:e-o,height:r-o,"stroke-width":o,stroke:t.borderColor,fill:"url("+m("#"+this.uid)+")"}),p(O,{r:n,url:t.handleSvg,origin:t.handleOrigin,x:s+i/100*l,y:r/2}))},e.prototype.getValueFromPoint=function(t,e,o){var o=o.left,n=this.width-this.height,o=(t-=o+this.height/2,Math.max(Math.min(t,n),0));return Math.round(100/n*o)},e.prototype.handleInput=function(t,e,o,n){var r,i=this.getValueFromPoint(t,e,o);switch(this.props.sliderType){case"hue":r="h",i*=3.6;break;case"saturation":r="s";break;default:r="v"}this.props.onInput(n,((t={})[r]=i,t))},e})(t)),N=(e=>{function i(t){e.call(this,t),this.emitHook("init:before"),this._events={},this._mounted=!1,this._colorChangeActive=!1,this.color=new T,this.color._onChange=this.updateColor.bind(this),this.state=Object.assign({},t,{color:this.color}),this.color.set(t.color),this.emitHook("init:state"),t.layout?this.layout=t.layout:this.layout=[{component:tt,options:{}},{component:ct,options:{}}],this.emitHook("init:after")}return e&&(i.__proto__=e),((i.prototype=Object.create(e&&e.prototype)).constructor=i).prototype.on=function(t,e){var o=this._events;this.emitHook("event:on",t,e),(o[t]||(o[t]=[])).push(e),"mount"===t&&this._mounted&&this.emit("mount",this),"color:change"===t&&this._mounted&&this.emit("color:change",this.color,{h:!1,s:!1,v:!1,a:!1})},i.prototype.off=function(t,e){var o=this._events[t];this.emitHook("event:off",t,e),o&&o.splice(o.indexOf(e),1)},i.prototype.emit=function(t){for(var e=[],o=arguments.length-1;0<o--;)e[o]=arguments[o+1];this.emitHook.apply(this,[t].concat(e));for(var n=this._events[t]||[],r=0;r<n.length;r++)n[r].apply(null,e)},i.prototype.resize=function(t){this.setState({width:t})},i.prototype.reset=function(){this.color.set(this.props.color)},i.addHook=function(t,e){var o=i.pluginHooks;(o[t]||(o[t]=[])).push(e)},i.prototype.emitHook=function(t){for(var e=[],o=arguments.length-1;0<o--;)e[o]=arguments[o+1];for(var n=i.pluginHooks[t]||[],r=0;r<n.length;r++)n[r].apply(this,e)},i.prototype.onMount=function(t){this.el=t,this._mounted=!0,this.emit("mount",this),this.emit("color:change",this.color,{h:!1,s:!1,v:!1,a:!1})},i.prototype.updateColor=function(t,e){this.emitHook("color:beforeUpdate",t,e),this.setState({color:t}),this.emitHook("color:afterUpdate",t,e),this._colorChangeActive||(this._colorChangeActive=!0,this.emit("color:change",t,e),this._colorChangeActive=!1)},i.prototype.handleInput=function(t,e){"START"===t&&this.emit("input:start",this.color),"MOVE"===t&&this.emit("input:mode",this.color),this.color.hsv=e,"END"===t&&this.emit("input:end",this.color)},i.prototype.render=function(t,e){var o=this;return p("div",{class:"iro__colorPicker",style:{display:e.display,width:e.width}},this.layout.map(function(t){return p(t.component,Object.assign({},e,t.options,{onInput:function(t,e){return o.handleInput(t,e)},parent:o}))}))},i})(s);N.pluginHooks={},N.defaultProps={width:300,height:300,handleRadius:8,handleSvg:null,handleOrigin:{x:0,y:0},color:"#fff",borderColor:"#fff",borderWidth:0,display:"block",wheelLightness:!0,sliderHeight:null,sliderMargin:12,padding:6,layout:null},(H=function(e,t){var o=null,n=document.createElement("div");return J(void 0,p(r,Object.assign({},{ref:function(t){return o=t}},t)),{},!1,n,!1),t=function(){var t=e instanceof Element?e:document.querySelector(e);t.appendChild(o.base),o.onMount(t)},"loading"!==document.readyState?t():a(document,["DOMContentLoaded"],t),o}).prototype=(r=N).prototype,Object.assign(H,r),H.__component=r;var R,A=[];return(R={Color:T,ColorPicker:H,ui:{h:p,Component:t,Handle:O,Slider:ct,Wheel:tt},util:{resolveUrl:m,createArcPath:Z,parseUnit:P,parseHexInt:E,intToHex:o},version:"4.2.2",use:function(t,e){void 0===e&&(e={}),-1<A.indexOf(t)||(t(R,e),A.push(t))}}).installedPlugins=A,R})()},931:function(t,e,o){o.r(e),o.d(e,"AuWidgetColorPicker",function(){return a}),o.d(e,"widget",function(){return a});var e=o(0),n=o(858),r=o(160),i=o(2),s=o(47),l=o(859),o=class extends s.a{constructor(){super(...arguments),this.hidden=!0,this.color="#ffffff"}static get styles(){return s.b` .hidden { display:none !important; } `}render(){return s.d` <div class="${this.hidden?"hidden":""}"> <div id="color-picker-container"></div> </div> `}updated(t){this.colorPicker.color.hex=t.color}firstUpdated(){this.colorPicker=l.ColorPicker(this.shadowRoot.querySelector("#color-picker-container"),{width:200,color:"#f00"}),this.colorPicker.on("color:change",(t,e)=>{this.color=t.hexString})}},o=(Object(e.a)([Object(s.e)(),Object(e.b)("design:type",Boolean)],o.prototype,"hidden",void 0),Object(e.a)([Object(s.e)(),Object(e.b)("design:type",String)],o.prototype,"color",void 0),Object(e.a)([Object(s.c)("color-picker")],o),class extends s.a{constructor(){super(...arguments),this.name="World",this.hidden=!0,this.defaultColor="#ffffff",this.handleChange=t=>{this.color=t;t=new CustomEvent("change-color",{detail:this.color});this.dispatchEvent(t)}}static get styles(){return s.b` .color-palette__div { padding: 20px; display: flex; flex-wrap: wrap; background: #FFFFFF; box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2); border-radius: 2px; } .color-palette--hidden { display: none; } .color-palette__label { margin-right: 12px; margin-bottom: 12px; position: relative; width:32px; height: 32px; } .color-palette__label input { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .color-palette__radio { padding: 2px; box-shadow: 0 0 0 1px #DCDEDF; width: 100%; height: 100%; border-radius: 2px; } input:checked ~ .color-palette__radio { padding: 2px; box-shadow: 0 0 0 2px var(--theme-primary-color); } .color-palette__color { width: 100%; height: 100%; } `}render(){return s.d` <div class="color-palette__div color-palette--${this.hidden?"hidden":""}"> ${this.colors.map((t,e)=>s.d` <label for="color" class="color-palette__label"> <input type="radio" name="color" @change="${()=>this.handleChange(t)}" /> <div class="color-palette__radio"> <div class="color-palette__color" style="background-color:${t.displayColor};"></div> </div> </label>`)} </div> `}});Object(e.a)([Object(s.e)(),Object(e.b)("design:type",String)],o.prototype,"name",void 0),Object(e.a)([Object(s.e)(),Object(e.b)("design:type",Boolean)],o.prototype,"hidden",void 0),Object(e.a)([Object(s.e)(),Object(e.b)("design:type",String)],o.prototype,"defaultColor",void 0),Object(e.a)([Object(s.e)(),Object(e.b)("design:type",Array)],o.prototype,"colors",void 0),Object(e.a)([Object(s.e)(),Object(e.b)("design:type",Object)],o.prototype,"color",void 0),o=Object(e.a)([Object(s.c)("color-palette")],o);let a=class extends r.b{constructor(){super(...arguments),this.text="Primary color",this.hiddenColor=!0,this.displayColor="#ffffff",this._isRestoring=!1,this.colors=[]}colorChanged(){this._isRestoring||this.emitChange({value:this.color})}get _(){return this.color}clearSelection(){this.color=!1}connectedCallback(){super.connectedCallback(),this.togglePicker=this.togglePicker.bind(this),this.initEvents()}updateParams(t){this.text=t.text,this.colors=t.colors;t=this.colors.find(t=>t.preselected);!t||this.defaultColor&&JSON.stringify(this.defaultColor.value)===JSON.stringify(t.value)||(this.defaultColor=t||this.colors[0],this.color=this.defaultColor),this.color&&(this.displayColor=this.color.displayColor)}async exportWidgetData(t){return{color:this.color}}async restoreWidgetFromData(t,e){t&&t.color&&this.displayColor!==t.color.displayColor&&(this._isRestoring=!0,this.color=t.color,this.displayColor=this.color.displayColor),this._isRestoring=!1}initEvents(){this.$.palette.addEventListener("change-color",t=>this.changeColor(t)),this.$.palette.addEventListener("blur",t=>this.closePicker()),this.addEventListener("blur",t=>this.closePicker())}togglePicker(){this.hiddenColor=!this.hiddenColor}closePicker(){this.hiddenColor=!0}changeColor(t){this.color=t.detail,this.displayColor=this.color.displayColor}};Object(e.a)([Object(i.c)(),Object(e.b)("design:type",Object)],a.prototype,"params",void 0),Object(e.a)([Object(i.c)(),Object(e.b)("design:type",String)],a.prototype,"text",void 0),Object(e.a)([Object(i.c)(),Object(e.b)("design:type",Object)],a.prototype,"color",void 0),Object(e.a)([Object(i.b)("color"),Object(e.b)("design:type",Function),Object(e.b)("design:paramtypes",[]),Object(e.b)("design:returntype",void 0)],a.prototype,"colorChanged",null),Object(e.a)([Object(i.c)(),Object(e.b)("design:type",Array)],a.prototype,"colors",void 0),a=Object(e.a)([Object(i.a)("au-widget-color-picker",n)],a)}}]);