@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
7 lines • 30.7 kB
JavaScript
(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){var n;function yt(t){return(yt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}
/*!
* iro.js v4.2.2
* 2016-2019 James Daniel
* Licensed under MPL 2.0
* github.com/jaames/iro.js
*/n=function(){var A=function(){},D={},c=[],L=[];function p(t,e){for(var o,n,r,i=arguments,l=L,s=arguments.length;2<s--;)c.push(i[s]);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(s=n.length;s--;)c.push(n[s]);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?l[l.length-1]+=n:l===L?l=[n]:l.push(n),o=r;var a=new A;return a.nodeName=t,a.children=l,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 s(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,W=[];function B(t){t._dirty||(t._dirty=!0,1!=W.push(t))||I(V)}function V(){for(var t;t=W.pop();)t._dirty&&C(t)}function $(t,e){return t.normalizedNodeName===e||t.nodeName.toLowerCase()===e.toLowerCase()}function z(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 G(t,e,o,n,r){if("key"!==(e="className"===e?"class":e))if("ref"===e)s(o,null),s(n,t);else if("class"!==e||r)if("style"===e){if(n&&"string"!=typeof n&&"string"!=typeof o||(t.style.cssText=n||""),n&&"object"==yt(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 l=e!==(e=e.replace(/Capture$/,""));e=e.toLowerCase().substring(2),n?o||t.addEventListener(e,q,l):t.removeEventListener(e,q,l),(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 q(t){return this._listeners[t.type](t)}var J=[],w=0,h=!1,d=!1;function X(){for(var t;t=J.shift();)t.componentDidMount&&t.componentDidMount()}function Y(t,e,o,n,r,i){w++||(h=null!=r&&void 0!==r.ownerSVGElement,d=null!=t&&!("__preactattr_"in t));t=function O(t,e,o,n,r){var i=t,l=h;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,l=t,s=r&&t._componentConstructor===e.nodeName,a=s,c=z(e);r&&!a&&(r=r._parentComponent);)a=r.constructor===e.nodeName;return r&&a&&(!n||r._component)?(k(r,c,3,o,n),t=r.base):(i&&!s&&(P(i),t=l=null),r=Q(e.nodeName,c,o),t&&!r.nextBase&&(r.nextBase=t,l=null),k(r,c,1,o,n),t=r.base,l&&t!==l&&(l._component=null,S(l,!1))),t})(t,e,o,n);if(h="svg"===r||"foreignObject"!==r&&h,r=String(r),(!t||!$(t,r))&&(r=r,(a=h?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,s=i.__preactattr_,a=e.children;if(null==s){s=i.__preactattr_={};for(var c=i.attributes,p=c.length;p--;)s[c[p].name]=c[p].value}return!d&&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,l,s,a,c,p,h,d,u=t.childNodes,f=[],v={},g=0,b=0,y=u.length,_=0,m=e?e.length:0;if(0!==y)for(var x=0;x<y;x++){var w,k=u[x],C=k.__preactattr_;null!=(w=m&&C?k._component?k._component.__key:C.key:null)?(g++,v[w]=k):(C||(void 0!==k.splitText?!r||k.nodeValue.trim():r))&&(f[_++]=k)}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<_)for(i=b;i<_;i++)if(void 0!==f[i]&&(p=l=f[i],d=r,"string"==typeof(h=a)||"number"==typeof h?void 0!==p.splitText:"string"==typeof h.nodeName?!p._componentConstructor&&$(p,h.nodeName):d||p._componentConstructor===h.nodeName)){c=l,f[i]=void 0,i===_-1&&_--,i===b&&b++;break}c=O(c,a,o,n),s=u[x],c&&c!==t&&c!==s&&(null==s?t.appendChild(c):c===s.nextSibling?j(s):t.insertBefore(c,s))}if(g)for(var x in v)void 0!==v[x]&&S(v[x],!1);for(;b<=_;)void 0!==(c=f[_--])&&S(c,!1)})(i,a,o,n,d||null!=s.dangerouslySetInnerHTML),((t,e,o)=>{for(var n in o)e&&null!=e[n]||null==o[n]||G(t,n,o[n],o[n]=void 0,h);for(n in e)"children"===n||"innerHTML"===n||n in o&&e[n]===("value"===n||"checked"===n?t:o)[n]||G(t,n,o[n],o[n]=e[n],h)})(i,e.attributes,s),h=l,i}(t,e,o,n,i);return r&&t.parentNode!==r&&r.appendChild(t),--w||(d=!1,i)||X(),t}function S(t,e){var o=t._component;o?P(o):(null!=t.__preactattr_&&s(t.__preactattr_.ref,null),!1!==e&&null!=t.__preactattr_||j(t),K(t))}function K(t){for(t=t.lastChild;t;){var e=t.previousSibling;S(t,!0),t=e}}var i=[];function Q(t,e,o){var n,r=i.length;for(t.prototype&&t.prototype.render?(n=new t(e,o),l.call(n,e,o)):((n=new l(e,o)).constructor=t,n.render=Z);r--;)if(i[r].constructor===t)return n.nextBase=i[r].nextBase,i.splice(r,1),n;return n}function Z(t,e,o){return this.constructor(t,o)}function k(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===D.syncComponentUpdates&&t.base?B(t):C(t,1,r)),s(t.__ref,t))}function C(t,e,o,n){if(!t._disable){var r,i=t.props,l=t.state,s=t.context,a=t.prevProps||i,c=t.prevState||l,p=t.prevContext||s,h=t.base,d=t.nextBase,u=h||d,f=t._component,v=!1,g=p;if(t.constructor.getDerivedStateFromProps&&(l=x(x({},l),t.constructor.getDerivedStateFromProps(i,l)),t.state=l),h&&(t.props=a,t.state=c,t.context=p,2!==e&&t.shouldComponentUpdate&&!1===t.shouldComponentUpdate(i,l,s)?v=!0:t.componentWillUpdate&&t.componentWillUpdate(i,l,s),t.props=i,t.state=l,t.context=s),t.prevProps=t.prevState=t.prevContext=t.nextBase=null,t._dirty=!1,!v){p=t.render(i,l,s),t.getChildContext&&(s=x(x({},s),t.getChildContext())),h&&t.getSnapshotBeforeUpdate&&(g=t.getSnapshotBeforeUpdate(a,c));var b,y,i=p&&p.nodeName;if("function"==typeof i?(l=z(p),(r=f)&&r.constructor===i&&l.key==r.__key?k(r,l,1,s,!1):(b=r,t._component=r=Q(i,l,s),r.nextBase=r.nextBase||d,r._parentComponent=t,k(r,l,0,s,!1),C(r,1,o,!0)),y=r.base):(i=u,(b=f)&&(i=t._component=null),!u&&1!==e||(i&&(i._component=null),y=Y(i,p,s,o||!h,u&&u.parentNode,!0))),u&&y!==u&&r!==f&&(d=u.parentNode)&&y!==d&&(d.replaceChild(y,u),b||(u._component=null,S(u,!1))),b&&P(b),(t.base=y)&&!n){for(var _=t,m=t;m=m._parentComponent;)(_=m).base=y;y._component=_,y._componentConstructor=_.constructor}}for(!h||o?J.push(t):v||t.componentDidUpdate&&t.componentDidUpdate(a,c,g);t._renderCallbacks.length;)t._renderCallbacks.pop().call(t);w||n||X()}}function P(t){var e=t.base,o=(t._disable=!0,t.componentWillUnmount&&t.componentWillUnmount(),t.base=null,t._component);o?P(o):e&&(null!=e.__preactattr_&&s(e.__preactattr_.ref,null),j(t.nextBase=e),i.push(t),K(e)),s(t.__ref,null)}function l(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 tt(t,e,o,n){void 0===n&&(n={});for(var r=0;r<e.length;r++)t.removeEventListener(e[r],o,n)}x(l.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),B(this)},forceUpdate:function(t){t&&this._renderCallbacks.push(t),C(this,2)},render:function(){}});var e,u="mousedown",f="mousemove",v="mouseup",et="touchstart",ot="touchmove",nt="touchend",rt=((e=l)&&(t.__proto__=e),((t.prototype=Object.create(e&&e.prototype)).constructor=t).prototype.componentDidMount=function(){a(this.base,[u,et],this,{passive:!1})},t.prototype.componentWillUnmount=function(){tt(this.base,[u,et],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 u:case et:a(document,[f,ot,v,nt],this,{passive:!1}),this.handleInput(o,n,r,"START");break;case f:case ot:this.handleInput(o,n,r,"MOVE");break;case v:case nt:this.handleInput(o,n,r,"END"),tt(document,[f,ot,v,nt],this,{passive:!1})}},t);function t(t){e.call(this,t),this.uid=(Math.random()+1).toString(36).substring(5)}function g(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 it(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 b(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:g(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"}))}b.defaultProps={x:0,y:0,r:8,url:null,origin:{x:0,y:0}};(o=rt)&&(n.__proto__=o),((n.prototype=Object.create(o&&o.prototype)).constructor=n).prototype.render=function(t){var e=t.width,o=t.borderWidth,n=t.handleRadius,r=t.color.hsv,i=e/2-o,l=(360-r.h)*(Math.PI/180),s=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:it(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("+g("#"+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(b,{r:n,url:t.handleSvg,origin:t.handleOrigin,x:a+s*Math.cos(l),y:c+s*Math.sin(l)}))},n.prototype.handleInput=function(t,e,o,n){var r=o.left,i=this.props,l=i.width/2,s=l-i.padding-i.handleRadius-i.borderWidth,r=(t=l-(t-r),e=l-(e-o.top),Math.atan2(e,t)),l=360-(Math.round(r*(180/Math.PI))+180),o=Math.min(Math.sqrt(t*t+e*e),s);i.onInput(n,{h:l,s:Math.round(100/s*o)})};var o,lt=n;function n(){o.apply(this,arguments)}function y(t,e){var o=-1<t.indexOf("%"),t=parseFloat(t);return o?e/100*t:t}function _(t){return parseInt(t,16)}function r(t){return t.toString(16).padStart(2,"0")}var m,O="(?:[-\\+]?\\d+%?)|(?:[-\\+]?\\d*\\.\\d+%?)",M="[\\s|\\(]+("+O+")[,|\\s]+("+O+")[,|\\s]+("+O+")\\s*\\)?",O="[\\s|\\(]+("+O+")[,|\\s]+("+O+")[,|\\s]+("+O+")[,|\\s]+("+O+")\\s*\\)?",st=new RegExp("rgb"+M),at=new RegExp("rgba"+O),ct=new RegExp("hsl"+M),pt=new RegExp("hsla"+O),M="^(?:#?|0x?)",O="([0-9a-fA-F]{1})",E="([0-9a-fA-F]{2})",ht=new RegExp(M+O+O+O+"$"),dt=new RegExp(M+O+O+O+O+"$"),ut=new RegExp(M+E+E+E+"$"),ft=new RegExp(M+E+E+E+E+"$"),N=function(t){this._onChange=!1,this._value={h:0,s:0,v:0,a:1},t&&this.set(t)},O={hsv:{configurable:!0},rgb:{configurable:!0},hsl:{configurable:!0},rgbString:{configurable:!0},hexString:{configurable:!0},hslString:{configurable:!0}},vt=(N.prototype.set=function(t){var e="string"==typeof t,o="object"==yt(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 N)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}},N.prototype.setChannel=function(t,e,o){this[t]=Object.assign({},this[t],((t={})[e]=o,t))},N.prototype.clone=function(){return new N(this)},N.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]}},N.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),l=t-i,s=t,a=0===t?0:l/t;switch(t){case i:e=0;break;case o:e=(n-r)/l+(n<r?6:0);break;case n:e=(r-o)/l+2;break;case r:e=(o-n)/l+4}return{h:60*e,s:100*a,v:100*s}},N.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}},N.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}},O.hsv.get=function(){var t=this._value;return{h:t.h,s:t.s,v:t.v,a:t.a}},O.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},O.rgb.get=function(){var t=N.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)}},O.rgb.set=function(t){this.hsv=N.rgbToHsv(t)},O.hsl.get=function(){var t=N.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)}},O.hsl.set=function(t){this.hsv=N.hslToHsv(t)},O.rgbString.get=function(){var t=this.rgb;return"rgb("+t.r+", "+t.g+", "+t.b+")"},O.rgbString.set=function(t){var e,o,n,r,i=1;if((e=st.exec(t))?(o=y(e[1],255),n=y(e[2],255),r=y(e[3],255)):(e=at.exec(t))&&(o=y(e[1],255),n=y(e[2],255),r=y(e[3],255),i=y(e[4],1)),!e)throw new Error("invalid rgb string");this.rgb={r:o,g:n,b:r,a:i}},O.hexString.get=function(){var t=this.rgb;return"#"+r(t.r)+r(t.g)+r(t.b)},O.hexString.set=function(t){var e,o,n,r,i=255;if((e=ht.exec(t))?(o=17*_(e[1]),n=17*_(e[2]),r=17*_(e[3])):(e=dt.exec(t))?(o=17*_(e[1]),n=17*_(e[2]),r=17*_(e[3]),i=17*_(e[4])):(e=ut.exec(t))?(o=_(e[1]),n=_(e[2]),r=_(e[3])):(e=ft.exec(t))&&(o=_(e[1]),n=_(e[2]),r=_(e[3]),i=_(e[4])),!e)throw new Error("invalid hex string");this.rgb={r:o,g:n,b:r,a:i/255}},O.hslString.get=function(){var t=this.hsl;return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},O.hslString.set=function(t){var e,o,n,r,i=1;if((e=ct.exec(t))?(o=y(e[1],360),n=y(e[2],100),r=y(e[3],100)):(e=pt.exec(t))&&(o=y(e[1],360),n=y(e[2],100),r=y(e[3],100),i=y(e[4],1)),!e)throw new Error("invalid hsl string");this.hsl={h:o,s:n,l:r,a:i}},Object.defineProperties(N.prototype,O),(m=rt)&&(H.__proto__=m),((H.prototype=Object.create(m&&m.prototype)).constructor=H).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=N.hsvToHsl({h:e.h,s:0,v:e.v}),r=N.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=N.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})}))},H.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,l=(this.height=r)/2,s=e-2*l,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:l,ry:l,x:o/2,y:o/2,width:e-o,height:r-o,"stroke-width":o,stroke:t.borderColor,fill:"url("+g("#"+this.uid)+")"}),p(b,{r:n,url:t.handleSvg,origin:t.handleOrigin,x:l+i/100*s,y:r/2}))},H.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)},H.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))},H);function H(){m.apply(this,arguments)}(T=l)&&(R.__proto__=T),((R.prototype=Object.create(T&&T.prototype)).constructor=R).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})},R.prototype.off=function(t,e){var o=this._events[t];this.emitHook("event:off",t,e),o&&o.splice(o.indexOf(e),1)},R.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)},R.prototype.resize=function(t){this.setState({width:t})},R.prototype.reset=function(){this.color.set(this.props.color)},R.addHook=function(t,e){var o=R.pluginHooks;(o[t]||(o[t]=[])).push(e)},R.prototype.emitHook=function(t){for(var e=[],o=arguments.length-1;0<o--;)e[o]=arguments[o+1];for(var n=R.pluginHooks[t]||[],r=0;r<n.length;r++)n[r].apply(this,e)},R.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})},R.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)},R.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)},R.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}))}))};var T,F,M=R;function R(t){T.call(this,t),this.emitHook("init:before"),this._events={},this._mounted=!1,this._colorChangeActive=!1,this.color=new N,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:lt,options:{}},{component:vt,options:{}}],this.emitHook("init:after")}M.pluginHooks={},M.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},(E=function(e,t){var o=null,n=document.createElement("div");return Y(void 0,p(F,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=(F=M).prototype,Object.assign(E,F),E.__component=F;var gt,bt=[];return(gt={Color:N,ColorPicker:E,ui:{h:p,Component:rt,Handle:b,Slider:vt,Wheel:lt},util:{resolveUrl:g,createArcPath:it,parseUnit:y,parseHexInt:_,intToHex:r},version:"4.2.2",use:function(t,e){void 0===e&&(e={}),-1<bt.indexOf(t)||(t(gt,e),bt.push(t))}}).installedPlugins=bt,gt},"object"==yt(e)&&void 0!==t?t.exports=n():void 0!==(o="function"==typeof(n=n)?n.call(e,o,e,t):n)&&(t.exports=o)},931:function(t,e,o){o.r(e),o.d(e,"AuWidgetColorPicker",function(){return y}),o.d(e,"widget",function(){return y});var n,r,i,l=o(0),e=o(858),s=o(160),a=o(2),c=o(47),p=o(859);n=c.a,Object(l.d)(h,n),Object.defineProperty(h,"styles",{get:function(){return Object(c.b)(r=r||Object(l.f)(["\n .hidden { \n display:none !important;\n }\n "],["\n .hidden { \n display:none !important;\n }\n "]))},enumerable:!1,configurable:!0}),h.prototype.render=function(){return Object(c.d)(i=i||Object(l.f)(['\n <div class="','">\n <div id="color-picker-container"></div>\n </div>\n '],['\n <div class="','">\n <div id="color-picker-container"></div>\n </div>\n ']),this.hidden?"hidden":"")},h.prototype.updated=function(t){this.colorPicker.color.hex=t.color},h.prototype.firstUpdated=function(){var o=this;this.colorPicker=p.ColorPicker(this.shadowRoot.querySelector("#color-picker-container"),{width:200,color:"#f00"}),this.colorPicker.on("color:change",function(t,e){o.color=t.hexString})},Object(l.c)([Object(c.e)(),Object(l.g)("design:type",Boolean)],h.prototype,"hidden",void 0),Object(l.c)([Object(c.e)(),Object(l.g)("design:type",String)],h.prototype,"color",void 0),Object(l.c)([Object(c.c)("color-picker")],h);function h(){var t=null!==n&&n.apply(this,arguments)||this;return t.hidden=!0,t.color="#ffffff",t}var d,u,f,v;d=c.a,Object(l.d)(g,d),Object.defineProperty(g,"styles",{get:function(){return Object(c.b)(u=u||Object(l.f)(["\n .color-palette__div {\n padding: 20px;\n display: flex;\n flex-wrap: wrap;\n background: #FFFFFF;\n box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n }\n \n .color-palette--hidden { \n display: none;\n }\n \n .color-palette__label {\n margin-right: 12px;\n margin-bottom: 12px;\n position: relative;\n width:32px;\n height: 32px;\n }\n .color-palette__label input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n }\n .color-palette__radio {\n padding: 2px;\n box-shadow: 0 0 0 1px #DCDEDF;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n }\n input:checked ~ .color-palette__radio {\n padding: 2px;\n box-shadow: 0 0 0 2px var(--theme-primary-color);\n }\n .color-palette__color {\n width: 100%;\n height: 100%;\n }\n "],["\n .color-palette__div {\n padding: 20px;\n display: flex;\n flex-wrap: wrap;\n background: #FFFFFF;\n box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n }\n \n .color-palette--hidden { \n display: none;\n }\n \n .color-palette__label {\n margin-right: 12px;\n margin-bottom: 12px;\n position: relative;\n width:32px;\n height: 32px;\n }\n .color-palette__label input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n width: 100%;\n height: 100%;\n }\n .color-palette__radio {\n padding: 2px;\n box-shadow: 0 0 0 1px #DCDEDF;\n width: 100%;\n height: 100%;\n border-radius: 2px;\n }\n input:checked ~ .color-palette__radio {\n padding: 2px;\n box-shadow: 0 0 0 2px var(--theme-primary-color);\n }\n .color-palette__color {\n width: 100%;\n height: 100%;\n }\n "]))},enumerable:!1,configurable:!0}),g.prototype.render=function(){var o=this;return Object(c.d)(v=v||Object(l.f)(['\n <div class="color-palette__div color-palette--','">\n ',"\n </div>\n "],['\n <div class="color-palette__div color-palette--','">\n ',"\n </div>\n "]),this.hidden?"hidden":"",this.colors.map(function(t,e){return Object(c.d)(f=f||Object(l.f)(['\n <label for="color" class="color-palette__label">\n <input type="radio" name="color" @change="','" />\n <div class="color-palette__radio">\n <div class="color-palette__color" style="background-color:',';"></div>\n </div>\n </label>'],['\n <label for="color" class="color-palette__label">\n <input type="radio" name="color" @change="','" />\n <div class="color-palette__radio">\n <div class="color-palette__color" style="background-color:',';"></div>\n </div>\n </label>']),function(){return o.handleChange(t)},t.displayColor)}))},Object(l.c)([Object(c.e)(),Object(l.g)("design:type",String)],g.prototype,"name",void 0),Object(l.c)([Object(c.e)(),Object(l.g)("design:type",Boolean)],g.prototype,"hidden",void 0),Object(l.c)([Object(c.e)(),Object(l.g)("design:type",String)],g.prototype,"defaultColor",void 0),Object(l.c)([Object(c.e)(),Object(l.g)("design:type",Array)],g.prototype,"colors",void 0),Object(l.c)([Object(c.e)(),Object(l.g)("design:type",Object)],g.prototype,"color",void 0),Object(l.c)([Object(c.c)("color-palette")],g);function g(){var e=null!==d&&d.apply(this,arguments)||this;return e.name="World",e.hidden=!0,e.defaultColor="#ffffff",e.handleChange=function(t){e.color=t;t=new CustomEvent("change-color",{detail:e.color});e.dispatchEvent(t)},e}b=s.b,Object(l.d)(_,b),_.prototype.colorChanged=function(){this._isRestoring||this.emitChange({value:this.color})},Object.defineProperty(_.prototype,"_",{get:function(){return this.color},enumerable:!1,configurable:!0}),_.prototype.clearSelection=function(){this.color=!1},_.prototype.connectedCallback=function(){b.prototype.connectedCallback.call(this),this.togglePicker=this.togglePicker.bind(this),this.initEvents()},_.prototype.updateParams=function(t){this.text=t.text,this.colors=t.colors;t=this.colors.find(function(t){return 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)},_.prototype.exportWidgetData=function(t){return Object(l.b)(this,void 0,void 0,function(){return Object(l.e)(this,function(t){return[2,{color:this.color}]})})},_.prototype.restoreWidgetFromData=function(e,t){return Object(l.b)(this,void 0,void 0,function(){return Object(l.e)(this,function(t){return e&&e.color&&this.displayColor!==e.color.displayColor&&(this._isRestoring=!0,this.color=e.color,this.displayColor=this.color.displayColor),this._isRestoring=!1,[2]})})},_.prototype.initEvents=function(){var e=this;this.$.palette.addEventListener("change-color",function(t){return e.changeColor(t)}),this.$.palette.addEventListener("blur",function(t){return e.closePicker()}),this.addEventListener("blur",function(t){return e.closePicker()})},_.prototype.togglePicker=function(){this.hiddenColor=!this.hiddenColor},_.prototype.closePicker=function(){this.hiddenColor=!0},_.prototype.changeColor=function(t){this.color=t.detail,this.displayColor=this.color.displayColor},Object(l.c)([Object(a.c)(),Object(l.g)("design:type",Object)],_.prototype,"params",void 0),Object(l.c)([Object(a.c)(),Object(l.g)("design:type",String)],_.prototype,"text",void 0),Object(l.c)([Object(a.c)(),Object(l.g)("design:type",Object)],_.prototype,"color",void 0),Object(l.c)([Object(a.b)("color"),Object(l.g)("design:type",Function),Object(l.g)("design:paramtypes",[]),Object(l.g)("design:returntype",void 0)],_.prototype,"colorChanged",null),Object(l.c)([Object(a.c)(),Object(l.g)("design:type",Array)],_.prototype,"colors",void 0);var b,y=Object(l.c)([Object(a.a)("au-widget-color-picker",e)],_);function _(){var t=null!==b&&b.apply(this,arguments)||this;return t.text="Primary color",t.hiddenColor=!0,t.displayColor="#ffffff",t._isRestoring=!1,t.colors=[],t}}}]);