framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 46.4 kB
JavaScript
(function framework7ComponentLoader(e,r){void 0===r&&(r=!0);document,window;var l=e.$,o=(e.Template7,e.utils),n=(e.device,e.support,e.Class),a=(e.Modal,e.ConstructorMethods),t=(e.ModalMethods,{render:function(e){var r=e.params,l=r.sliderLabel,o=r.sliderValue,n=r.sliderValueEditable,a=r.alphaLabelText;return'\n <div class="color-picker-module color-picker-module-alpha-slider">\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+a+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-alpha"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="0.01" min="0" max="1" class="color-picker-value-alpha">\n ':'\n <span class="color-picker-value-alpha"></span>\n ')+"\n </div>\n ":"")+"\n </div>\n </div>\n "},init:function(e){function r(r){var l=e.value.alpha,o=parseFloat(r.target.value);Number.isNaN(o)?r.target.value=l:(o=Math.max(0,Math.min(1,o)),e.setValue({alpha:o}))}e.alphaRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-alpha"),min:0,max:1,step:.01,value:1,on:{change:function(r,l){var o=Math.floor(100*l)/100;e.setValue({alpha:o})}}}),e.$el.on("change",".color-picker-module-alpha-slider input",r),e.destroyAlphaSliderEvents=function(){e.$el.off("change",".color-picker-module-alpha-slider input",r)}},update:function(e){var r=e.value,l=e.params,o=l.sliderValue,n=l.sliderValueEditable,a=r.alpha;e.alphaRangeSlider.value=a,e.alphaRangeSlider.layout(),o&&n?e.$el.find("input.color-picker-value-alpha").val(a):e.$el.find("span.color-picker-value-alpha").text(a)},destroy:function(e){e.alphaRangeSlider&&e.alphaRangeSlider.destroy&&e.alphaRangeSlider.destroy(),delete e.alphaRangeSlider,e.destroyAlphaSliderEvents&&e.destroyAlphaSliderEvents(),delete e.destroyAlphaSliderEvents}}),i={render:function(){return'\n <div class="color-picker-module color-picker-module-current-color">\n <div class="color-picker-current-color"></div>\n </div>\n '},update:function(e){e.$el.find(".color-picker-module-current-color .color-picker-current-color").css("background-color",e.value.hex)}},s={render:function(e){var r=e.params,l=r.hexLabel,o=r.hexLabelText;return'\n <div class="color-picker-module color-picker-module-hex">\n <div class="color-picker-hex-wrap">\n '+(l?'\n <div class="color-picker-hex-label">'+o+"</div>\n ":"")+'\n <div class="color-picker-hex-value">\n '+(r.hexValueEditable?'\n <input type="text" class="color-picker-value-hex">\n ':'\n <span class="color-picker-value-hex"></span>\n ')+"\n </div>\n </div>\n </div>\n "},init:function(e){function r(r){var l=e.value.hex,o=r.target.value.replace(/#/g,"");if(Number.isNaN(o)||!o||3!==o.length&&6!==o.length)r.target.value=l;else{var n=parseInt(o,16);n>parseInt("ffffff",16)&&(o="fff"),n<0&&(o="000"),e.setValue({hex:o})}}e.$el.on("change",".color-picker-module-hex input",r),e.destroyHexEvents=function(){e.$el.off("change",".color-picker-module-hex input",r)}},update:function(e){var r=e.value,l=e.params.hexValueEditable,o=r.hex;l?e.$el.find("input.color-picker-value-hex").val(o):e.$el.find("span.color-picker-value-hex").text(o)},destroy:function(e){e.destroyHexEvents&&e.destroyHexEvents(),delete e.destroyHexEvents}},c={render:function(e){var r=e.params,l=r.sliderLabel,o=r.sliderValue,n=r.sliderValueEditable,a=r.hueLabelText,t=r.saturationLabelText,i=r.brightnessLabelText;return'\n <div class="color-picker-module color-picker-module-hsb-sliders">\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+a+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-hue"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="0.1" min="0" max="360" class="color-picker-value-hue" data-color-index="0">\n ':'\n <span class="color-picker-value-hue"></span>\n ')+"\n </div>\n ":"")+'\n </div>\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+t+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-saturation"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="0.1" min="0" max="100" class="color-picker-value-saturation" data-color-index="1">\n ':'\n <span class="color-picker-value-saturation"></span>\n ')+"\n </div>\n ":"")+'\n </div>\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+i+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-brightness"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="0.1" min="0" max="100" class="color-picker-value-brightness" data-color-index="2">\n ':'\n <span class="color-picker-value-brightness"></span>\n ')+"\n </div>\n ":"")+"\n </div>\n </div>\n "},init:function(e){function r(r){var o=[].concat(e.value.hsb),n=parseInt(l(r.target).attr("data-color-index"),10),a=parseFloat(r.target.value);Number.isNaN(a)?r.target.value=o[n]:(a=0===n?Math.max(0,Math.min(360,a)):Math.max(0,Math.min(100,a))/100,o[n]=a,e.setValue({hsb:o}))}e.hueRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-hue"),min:0,max:360,step:.1,value:0,on:{change:function(r,l){e.setValue({hue:l})}}}),e.saturationRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-saturation"),min:0,max:1,step:.001,value:0,on:{change:function(r,l){var o=Math.floor(1e3*l)/1e3;e.setValue({hsb:[e.value.hsb[0],o,e.value.hsb[2]]})}}}),e.brightnessRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-brightness"),min:0,max:1,step:.001,value:0,on:{change:function(r,l){var o=Math.floor(1e3*l)/1e3;e.setValue({hsb:[e.value.hsb[0],e.value.hsb[1],o]})}}}),e.$el.on("change",".color-picker-module-hsb-sliders input",r),e.destroyHsbSlidersEvents=function(){e.$el.off("change",".color-picker-module-hsb-sliders input",r)}},update:function(e){var r=e.app,l=e.value,n=e.params,a=n.sliderValue,t=n.sliderValueEditable,i=l.hsb,s=l.hue;e.hueRangeSlider.value=s,e.saturationRangeSlider.value=i[1],e.brightnessRangeSlider.value=i[2],e.hueRangeSlider.layout(),e.saturationRangeSlider.layout(),e.brightnessRangeSlider.layout();var c=o.colorHsbToHsl(i[0],i[1],1),d=o.colorHsbToHsl(i[0],0,1),p=o.colorHsbToHsl(i[0],1,1),u=i[2];e.hueRangeSlider.$el[0].style.setProperty("--f7-range-knob-color","hsl("+s+", 100%, 50%)"),e.saturationRangeSlider.$el[0].style.setProperty("--f7-range-knob-color","hsl("+c[0]+", "+100*c[1]+"%, "+100*c[2]+"%)"),e.brightnessRangeSlider.$el[0].style.setProperty("--f7-range-knob-color","rgb("+255*u+", "+255*u+", "+255*u+")"),e.saturationRangeSlider.$el.find(".range-bar").css("background-image","linear-gradient("+(r.rtl?"to left":"to right")+", hsl("+d[0]+", "+100*d[1]+"%, "+100*d[2]+"%), hsl("+p[0]+", "+100*p[1]+"%, "+100*p[2]+"%))"),a&&t?(e.$el.find("input.color-picker-value-hue").val(""+s),e.$el.find("input.color-picker-value-saturation").val(""+1e3*i[1]/10),e.$el.find("input.color-picker-value-brightness").val(""+1e3*i[2]/10)):a&&(e.$el.find("span.color-picker-value-hue").text(""+s),e.$el.find("span.color-picker-value-saturation").text(""+1e3*i[1]/10),e.$el.find("span.color-picker-value-brightness").text(""+1e3*i[2]/10))},destroy:function(e){e.hueRangeSlider&&e.hueRangeSlider.destroy&&e.hueRangeSlider.destroy(),e.saturationRangeSlider&&e.saturationRangeSlider.destroy&&e.saturationRangeSlider.destroy(),e.brightnessRangeSlider&&e.brightnessRangeSlider.destroy&&e.brightnessRangeSlider.destroy(),delete e.hueRangeSlider,delete e.saturationRangeSlider,delete e.brightnessRangeSlider,e.destroyHsbSlidersEvents&&e.destroyHsbSlidersEvents(),delete e.destroyHsbSlidersEvents}},d={render:function(e){var r=e.params,l=r.sliderLabel,o=r.sliderValue,n=r.sliderValueEditable,a=r.hueLabelText;return'\n <div class="color-picker-module color-picker-module-hue-slider">\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+a+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-hue"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="0.1" min="0" max="360" class="color-picker-value-hue">\n ':'\n <span class="color-picker-value-hue"></span>\n ')+"\n </div>\n ":"")+"\n </div>\n </div>\n "},init:function(e){e.hueRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-hue"),min:0,max:360,step:.1,value:0,on:{change:function(r,l){e.setValue({hue:l})}}})},update:function(e){var r=e.value,l=e.params,o=l.sliderValue,n=l.sliderValueEditable,a=r.hue;e.hueRangeSlider.value=a,e.hueRangeSlider.layout(),e.hueRangeSlider.$el[0].style.setProperty("--f7-range-knob-color","hsl("+a+", 100%, 50%)"),o&&n?e.$el.find("input.color-picker-value-hue").val(""+a):o&&e.$el.find("span.color-picker-value-hue").text(""+a)},destroy:function(e){e.hueRangeSlider&&e.hueRangeSlider.destroy&&e.hueRangeSlider.destroy(),delete e.hueRangeSlider}},p={render:function(e){var r=e.params,l=r.sliderLabel,o=r.sliderValue,n=r.sliderValueEditable,a=r.brightnessLabelText;return'\n <div class="color-picker-module color-picker-module-brightness-slider">\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+a+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-brightness"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="0.1" min="0" max="100" class="color-picker-value-brightness">\n ':'\n <span class="color-picker-value-brightness"></span>\n ')+"\n </div>\n ":"")+"\n </div>\n </div>\n "},init:function(e){e.brightnessRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-brightness"),min:0,max:1,step:.001,value:0,on:{change:function(r,l){var o=Math.floor(1e3*l)/1e3;e.setValue({hsb:[e.value.hsb[0],e.value.hsb[1],o]})}}})},update:function(e){var r=e.value,l=e.app,n=e.params,a=n.sliderValue,t=n.sliderValueEditable,i=r.hsb;e.brightnessRangeSlider.value=i[2],e.brightnessRangeSlider.layout();var s=o.colorHsbToHsl(i[0],i[1],i[2]),c=o.colorHsbToHsl(i[0],i[1],0),d=o.colorHsbToHsl(i[0],i[1],1);e.brightnessRangeSlider.$el[0].style.setProperty("--f7-range-knob-color","hsl("+s[0]+", "+100*s[1]+"%, "+100*s[2]+"%)"),e.brightnessRangeSlider.$el.find(".range-bar").css("background-image","linear-gradient("+(l.rtl?"to left":"to right")+", hsl("+c[0]+", "+100*c[1]+"%, "+100*c[2]+"%), hsl("+d[0]+", "+100*d[1]+"%, "+100*d[2]+"%))"),a&&t?e.$el.find("input.color-picker-value-brightness").val(""+1e3*i[2]/10):a&&e.$el.find("span.color-picker-value-brightness").text(""+1e3*i[2]/10)},destroy:function(e){e.brightnessRangeSlider&&e.brightnessRangeSlider.destroy&&e.brightnessRangeSlider.destroy(),delete e.brightnessRangeSlider}},u={render:function(e){return'\n <div class="color-picker-module color-picker-module-palette">\n <div class="color-picker-palette">\n '+e.params.palette.map(function(e){if(Array.isArray(e)){var r='<div class="color-picker-palette-row">';return r+=e.map(function(e){return'\n <div class="color-picker-palette-value" data-palette-color="'+e+'" style="background-color: '+e+'"></div>\n '}).join(""),r+="</div>"}return'\n <div class="color-picker-palette-value" data-palette-color="'+e+'" style="background-color: '+e+'"></div>\n '}).join("")+"\n </div>\n </div>\n "},init:function(e){function r(r){var o=l(r.target).attr("data-palette-color");e.setValue({hex:o})}e.$el.on("click",".color-picker-module-palette .color-picker-palette-value",r),e.destroyPaletteEvents=function(){e.$el.off("click",".color-picker-module-hex input",r)}},destroy:function(e){e.destroyPaletteEvents&&e.destroyPaletteEvents(),delete e.destroyPaletteEvents}},v={render:function(){return'\n <div class="color-picker-module color-picker-module-initial-current-colors">\n <div class="color-picker-initial-current-colors">\n <div class="color-picker-initial-color"></div>\n <div class="color-picker-current-color"></div>\n </div>\n </div>\n '},init:function(e){function r(){if(e.initialValue){var r=e.initialValue,l=r.hex,o=r.alpha;e.setValue({hex:l,alpha:o})}}e.$el.on("click",".color-picker-initial-color",r),e.destroyInitialCurrentEvents=function(){e.$el.off("click",".color-picker-initial-color",r)}},update:function(e){e.$el.find(".color-picker-module-initial-current-colors .color-picker-initial-color").css("background-color",e.initialValue.hex),e.$el.find(".color-picker-module-initial-current-colors .color-picker-current-color").css("background-color",e.value.hex)},destroy:function(e){e.destroyInitialCurrentEvents&&e.destroyInitialCurrentEvents(),delete e.destroyInitialCurrentEvents}},h={render:function(e){var r=e.params,l=r.barLabel,o=r.barValue,n=r.barValueEditable,a=r.redLabelText,t=r.greenLabelText,i=r.blueLabelText;return'\n <div class="color-picker-module color-picker-module-rgb-bars">\n <div class="color-picker-bar-wrap">\n '+(l?'\n <div class="color-picker-bar-label">'+a+"</div>\n ":"")+'\n <div class="range-slider color-picker-bar color-picker-bar-red"></div>\n '+(o?'\n <div class="color-picker-bar-value">\n '+(n?'\n <input type="number" step="1" min="0" max="255" class="color-picker-value-bar-red" data-color-index="0">\n ':'\n <span class="color-picker-value-bar-red"></span>\n ')+"\n </div>\n ":"")+'\n </div>\n <div class="color-picker-bar-wrap">\n '+(l?'\n <div class="color-picker-bar-label">'+t+"</div>\n ":"")+'\n <div class="range-slider color-picker-bar color-picker-bar-green"></div>\n '+(o?'\n <div class="color-picker-bar-value">\n '+(n?'\n <input type="number" step="1" min="0" max="255" class="color-picker-value-bar-green" data-color-index="1">\n ':'\n <span class="color-picker-value-bar-green"></span>\n ')+"\n </div>\n ":"")+'\n </div>\n <div class="color-picker-bar-wrap">\n '+(l?'\n <div class="color-picker-bar-label">'+i+"</div>\n ":"")+'\n <div class="range-slider color-picker-bar color-picker-bar-blue"></div>\n '+(o?'\n <div class="color-picker-bar-value">\n '+(n?'\n <input type="number" step="1" min="0" max="255" class="color-picker-value-bar-blue" data-color-index="2">\n ':'\n <span class="color-picker-value-bar-blue"></span>\n ')+"\n </div>\n ":"")+"\n </div>\n </div>\n "},init:function(e){function r(r){var o=[].concat(e.value.rgb),n=parseInt(l(r.target).attr("data-color-index"),10),a=parseInt(r.target.value,10);Number.isNaN(a)?r.target.value=o[n]:(a=Math.max(0,Math.min(255,a)),o[n]=a,e.setValue({rgb:o}))}e.redBar=e.app.range.create({el:e.$el.find(".color-picker-bar-red"),min:0,max:255,step:1,value:0,vertical:!0,on:{change:function(r,l){e.setValue({rgb:[l,e.value.rgb[1],e.value.rgb[2]]})}}}),e.greenBar=e.app.range.create({el:e.$el.find(".color-picker-bar-green"),min:0,max:255,step:1,value:0,vertical:!0,on:{change:function(r,l){e.setValue({rgb:[e.value.rgb[0],l,e.value.rgb[2]]})}}}),e.blueBar=e.app.range.create({el:e.$el.find(".color-picker-bar-blue"),min:0,max:255,step:1,value:0,vertical:!0,on:{change:function(r,l){e.setValue({rgb:[e.value.rgb[0],e.value.rgb[1],l]})}}}),e.$el.on("change",".color-picker-module-rgb-bars input",r),e.destroyRgbBarsEvents=function(){e.$el.off("change",".color-picker-module-rgb-bars input",r)}},update:function(e){var r=e.value,l=e.redBar,o=e.greenBar,n=e.blueBar,a=e.params,t=a.barValue,i=a.barValueEditable,s=r.rgb;l.value=s[0],o.value=s[1],n.value=s[2],l.layout(),o.layout(),n.layout(),l.$el.find(".range-bar").css("background-image","linear-gradient(to top, rgb(0, "+s[1]+", "+s[2]+"), rgb(255, "+s[1]+", "+s[2]+"))"),o.$el.find(".range-bar").css("background-image","linear-gradient(to top, rgb("+s[0]+", 0, "+s[2]+"), rgb("+s[0]+", 255, "+s[2]+"))"),n.$el.find(".range-bar").css("background-image","linear-gradient(to top, rgb("+s[0]+", "+s[1]+", 0), rgb("+s[0]+", "+s[1]+", 255))"),t&&i?(e.$el.find("input.color-picker-value-bar-red").val(s[0]),e.$el.find("input.color-picker-value-bar-green").val(s[1]),e.$el.find("input.color-picker-value-bar-blue").val(s[2])):t&&(e.$el.find("span.color-picker-value-bar-red").text(s[0]),e.$el.find("span.color-picker-value-bar-green").text(s[1]),e.$el.find("span.color-picker-value-bar-blue").text(s[2]))},destroy:function(e){e.redBar&&e.redBar.destroy&&e.redBar.destroy(),e.greenBar&&e.greenBar.destroy&&e.greenBar.destroy(),e.blueBar&&e.blueBar.destroy&&e.blueBar.destroy(),delete e.redBar,delete e.greenBar,delete e.blueBar,e.destroyRgbBarsEvents&&e.destroyRgbBarsEvents(),delete e.destroyRgbBarsEvents}},g={render:function(e){var r=e.params,l=r.sliderLabel,o=r.sliderValue,n=r.sliderValueEditable,a=r.redLabelText,t=r.greenLabelText,i=r.blueLabelText;return'\n <div class="color-picker-module color-picker-module-rgb-sliders">\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+a+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-red"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="1" min="0" max="255" class="color-picker-value-red" data-color-index="0">\n ':'\n <span class="color-picker-value-red"></span>\n ')+"\n </div>\n ":"")+'\n </div>\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+t+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-green"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="1" min="0" max="255" class="color-picker-value-green" data-color-index="1">\n ':'\n <span class="color-picker-value-green"></span>\n ')+"\n </div>\n ":"")+'\n </div>\n <div class="color-picker-slider-wrap">\n '+(l?'\n <div class="color-picker-slider-label">'+i+"</div>\n ":"")+'\n <div class="range-slider color-picker-slider color-picker-slider-blue"></div>\n '+(o?'\n <div class="color-picker-slider-value">\n '+(n?'\n <input type="number" step="1" min="0" max="255" class="color-picker-value-blue" data-color-index="2">\n ':'\n <span class="color-picker-value-blue"></span>\n ')+"\n </div>\n ":"")+"\n </div>\n </div>\n "},init:function(e){function r(r){var o=[].concat(e.value.rgb),n=parseInt(l(r.target).attr("data-color-index"),10),a=parseInt(r.target.value,10);Number.isNaN(a)?r.target.value=o[n]:(a=Math.max(0,Math.min(255,a)),o[n]=a,e.setValue({rgb:o}))}e.redRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-red"),min:0,max:255,step:1,value:0,on:{change:function(r,l){e.setValue({rgb:[l,e.value.rgb[1],e.value.rgb[2]]})}}}),e.greenRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-green"),min:0,max:255,step:1,value:0,on:{change:function(r,l){e.setValue({rgb:[e.value.rgb[0],l,e.value.rgb[2]]})}}}),e.blueRangeSlider=e.app.range.create({el:e.$el.find(".color-picker-slider-blue"),min:0,max:255,step:1,value:0,on:{change:function(r,l){e.setValue({rgb:[e.value.rgb[0],e.value.rgb[1],l]})}}}),e.$el.on("change",".color-picker-module-rgb-sliders input",r),e.destroyRgbSlidersEvents=function(){e.$el.off("change",".color-picker-module-rgb-sliders input",r)}},update:function(e){var r=e.app,l=e.value,o=e.redRangeSlider,n=e.greenRangeSlider,a=e.blueRangeSlider,t=e.params,i=t.sliderValue,s=t.sliderValueEditable,c=l.rgb;o.value=c[0],n.value=c[1],a.value=c[2],o.layout(),n.layout(),a.layout(),o.$el[0].style.setProperty("--f7-range-knob-color","rgb("+c[0]+", "+c[1]+", "+c[2]+")"),n.$el[0].style.setProperty("--f7-range-knob-color","rgb("+c[0]+", "+c[1]+", "+c[2]+")"),a.$el[0].style.setProperty("--f7-range-knob-color","rgb("+c[0]+", "+c[1]+", "+c[2]+")");var d=r.rtl?"to left":"to right";o.$el.find(".range-bar").css("background-image","linear-gradient("+d+", rgb(0, "+c[1]+", "+c[2]+"), rgb(255, "+c[1]+", "+c[2]+"))"),n.$el.find(".range-bar").css("background-image","linear-gradient("+d+", rgb("+c[0]+", 0, "+c[2]+"), rgb("+c[0]+", 255, "+c[2]+"))"),a.$el.find(".range-bar").css("background-image","linear-gradient("+d+", rgb("+c[0]+", "+c[1]+", 0), rgb("+c[0]+", "+c[1]+", 255))"),i&&s?(e.$el.find("input.color-picker-value-red").val(c[0]),e.$el.find("input.color-picker-value-green").val(c[1]),e.$el.find("input.color-picker-value-blue").val(c[2])):i&&(e.$el.find("span.color-picker-value-red").text(c[0]),e.$el.find("span.color-picker-value-green").text(c[1]),e.$el.find("span.color-picker-value-blue").text(c[2]))},destroy:function(e){e.redRangeSlider&&e.redRangeSlider.destroy&&e.redRangeSlider.destroy(),e.greenRangeSlider&&e.greenRangeSlider.destroy&&e.greenRangeSlider.destroy(),e.blueRangeSlider&&e.blueRangeSlider.destroy&&e.blueRangeSlider.destroy(),delete e.redRangeSlider,delete e.greenRangeSlider,delete e.blueRangeSlider,e.destroyRgbSlidersEvents&&e.destroyRgbSlidersEvents(),delete e.destroyRgbSlidersEvents}},b={render:function(){return'\n <div class="color-picker-module color-picker-module-sb-spectrum">\n <div class="color-picker-sb-spectrum" style="background-color: hsl(0, 100%, 50%)">\n <div class="color-picker-sb-spectrum-handle"></div>\n </div>\n </div>\n '},init:function(e){var r,o,n,a,t,i,s,c,d,p=e.app,u=e.$el;function v(r,l){var o=(r-s.left)/s.width,n=(l-s.top)/s.height;o=Math.max(0,Math.min(1,o)),n=1-Math.max(0,Math.min(1,n)),e.setValue({hsb:[e.value.hue,o,n]})}function h(e){if(!o&&!r){n="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,t=n,a="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,i=a;var p=l(e.target);(d=p.closest(".color-picker-sb-spectrum-handle").length>0)||(c=p.closest(".color-picker-sb-spectrum").length>0),c&&(s=u.find(".color-picker-sb-spectrum")[0].getBoundingClientRect(),v(n,a)),(d||c)&&u.find(".color-picker-sb-spectrum-handle").addClass("color-picker-sb-spectrum-handle-pressed")}}function g(e){(c||d)&&(t="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,i="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,e.preventDefault(),o||(o=!0,d&&(s=u.find(".color-picker-sb-spectrum")[0].getBoundingClientRect())),(c||d)&&v(t,i))}function b(){o=!1,(c||d)&&u.find(".color-picker-sb-spectrum-handle").removeClass("color-picker-sb-spectrum-handle-pressed"),c=!1,d=!1}function f(){e.modules["sb-spectrum"].update(e)}var k=!("touchstart"!==p.touchEvents.start||!p.support.passiveListener)&&{passive:!0,capture:!1};e.$el.on(p.touchEvents.start,h,k),p.on("touchmove:active",g),p.on("touchend:passive",b),p.on("resize",f),e.destroySpectrumEvents=function(){e.$el.off(p.touchEvents.start,h,k),p.off("touchmove:active",g),p.off("touchend:passive",b),p.off("resize",f)}},update:function(e){var r=e.value,l=r.hsl,o=r.hsb,n=e.$el.find(".color-picker-sb-spectrum")[0].offsetWidth,a=e.$el.find(".color-picker-sb-spectrum")[0].offsetHeight;e.$el.find(".color-picker-sb-spectrum").css("background-color","hsl("+l[0]+", 100%, 50%)"),e.$el.find(".color-picker-sb-spectrum-handle").css("background-color","hsl("+l[0]+", "+100*l[1]+"%, "+100*l[2]+"%)").transform("translate("+n*o[1]+"px, "+a*(1-o[2])+"px)")},destroy:function(e){e.destroySpectrumEvents&&e.destroySpectrumEvents(),delete e.destroySpectrumEvents}},f={render:function(){return'\n <div class="color-picker-module color-picker-module-hs-spectrum">\n <div class="color-picker-hs-spectrum">\n <div class="color-picker-hs-spectrum-handle"></div>\n </div>\n </div>\n '},init:function(e){var r,o,n,a,t,i,s,c,d,p=e.app,u=e.$el;function v(r,l){var o=(r-s.left)/s.width*360,n=(l-s.top)/s.height;o=Math.max(0,Math.min(360,o)),n=1-Math.max(0,Math.min(1,n)),e.setValue({hsb:[o,n,e.value.hsb[2]]})}function h(e){if(!o&&!r){n="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,t=n,a="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,i=a;var p=l(e.target);(d=p.closest(".color-picker-hs-spectrum-handle").length>0)||(c=p.closest(".color-picker-hs-spectrum").length>0),c&&(s=u.find(".color-picker-hs-spectrum")[0].getBoundingClientRect(),v(n,a)),(d||c)&&u.find(".color-picker-hs-spectrum-handle").addClass("color-picker-hs-spectrum-handle-pressed")}}function g(e){(c||d)&&(t="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,i="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,e.preventDefault(),o||(o=!0,d&&(s=u.find(".color-picker-hs-spectrum")[0].getBoundingClientRect())),(c||d)&&v(t,i))}function b(){o=!1,(c||d)&&u.find(".color-picker-hs-spectrum-handle").removeClass("color-picker-hs-spectrum-handle-pressed"),c=!1,d=!1}function f(){e.modules["hs-spectrum"].update(e)}var k=!("touchstart"!==p.touchEvents.start||!p.support.passiveListener)&&{passive:!0,capture:!1};e.$el.on(p.touchEvents.start,h,k),p.on("touchmove:active",g),p.on("touchend:passive",b),p.on("resize",f),e.destroySpectrumEvents=function(){e.$el.off(p.touchEvents.start,h,k),p.off("touchmove:active",g),p.off("touchend:passive",b),p.off("resize",f)}},update:function(e){var r=e.value.hsb,l=e.$el.find(".color-picker-hs-spectrum")[0].offsetWidth,n=e.$el.find(".color-picker-hs-spectrum")[0].offsetHeight,a=o.colorHsbToHsl(r[0],r[1],1);e.$el.find(".color-picker-hs-spectrum-handle").css("background-color","hsl("+a[0]+", "+100*a[1]+"%, "+100*a[2]+"%)").transform("translate("+l*(r[0]/360)+"px, "+n*(1-r[1])+"px)")},destroy:function(e){e.destroySpectrumEvents&&e.destroySpectrumEvents(),delete e.destroySpectrumEvents}};var k={render:function(){return'\n <div class="color-picker-module color-picker-module-wheel">\n <div class="color-picker-wheel">\n <svg viewBox="0 0 300 300" width="300" height="300">'+function(){for(var e="",r=256;r>0;r-=1){var l=r*Math.PI/128,o=1.40625*r;e+='<circle cx="'+(150-125*Math.sin(l))+'" cy="'+(150-125*Math.cos(l))+'" r="25" fill="hsl('+o+', 100%, 50%)"></circle>'}return e}()+'</svg>\n <div class="color-picker-wheel-handle"></div>\n <div class="color-picker-sb-spectrum" style="background-color: hsl(0, 100%, 50%)">\n <div class="color-picker-sb-spectrum-handle"></div>\n </div>\n </div>\n </div>\n '},init:function(e){var r,o,n,a,t,i,s,c,d,p,u,v,h=e.app,g=e.$el;function b(r,l){var o=s.left+s.width/2,n=s.top+s.height/2,a=180*Math.atan2(l-n,r-o)/Math.PI+90;a<0&&(a+=360),a=360-a,e.setValue({hue:a})}function f(r,l){var o=(r-p.left)/p.width,n=(l-p.top)/p.height;o=Math.max(0,Math.min(1,o)),n=1-Math.max(0,Math.min(1,n)),e.setValue({hsb:[e.value.hue,o,n]})}function k(e){if(!o&&!r){n="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,t=n,a="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,i=a;var h=l(e.target);d=h.closest(".color-picker-wheel-handle").length>0,c=h.closest("circle").length>0,(v=h.closest(".color-picker-sb-spectrum-handle").length>0)||(u=h.closest(".color-picker-sb-spectrum").length>0),c&&(s=g.find(".color-picker-wheel")[0].getBoundingClientRect(),b(n,a)),u&&(p=g.find(".color-picker-sb-spectrum")[0].getBoundingClientRect(),f(n,a)),(v||u)&&g.find(".color-picker-sb-spectrum-handle").addClass("color-picker-sb-spectrum-handle-pressed")}}function m(e){(c||d||u||v)&&(t="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,i="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,e.preventDefault(),o||(o=!0,d&&(s=g.find(".color-picker-wheel")[0].getBoundingClientRect()),v&&(p=g.find(".color-picker-sb-spectrum")[0].getBoundingClientRect())),(c||d)&&b(t,i),(u||v)&&f(t,i))}function y(){o=!1,(u||v)&&g.find(".color-picker-sb-spectrum-handle").removeClass("color-picker-sb-spectrum-handle-pressed"),c=!1,d=!1,u=!1,v=!1}function E(){e.modules.wheel.update(e)}var $=!("touchstart"!==h.touchEvents.start||!h.support.passiveListener)&&{passive:!0,capture:!1};e.$el.on(h.touchEvents.start,k,$),h.on("touchmove:active",m),h.on("touchend:passive",y),h.on("resize",E),e.destroyWheelEvents=function(){e.$el.off(h.touchEvents.start,k,$),h.off("touchmove:active",m),h.off("touchend:passive",y),h.off("resize",E)}},update:function(e){var r=e.value,l=r.hsl,o=r.hsb,n=e.$el.find(".color-picker-sb-spectrum")[0].offsetWidth,a=e.$el.find(".color-picker-sb-spectrum")[0].offsetHeight,t=e.$el.find(".color-picker-wheel")[0].offsetWidth,i=t/2,s=r.hue*Math.PI/180,c=t/6/2,d=i-Math.sin(s)*(i-c)-c,p=i-Math.cos(s)*(i-c)-c;e.$el.find(".color-picker-wheel-handle").css("background-color","hsl("+l[0]+", 100%, 50%)").transform("translate("+d+"px, "+p+"px)"),e.$el.find(".color-picker-sb-spectrum").css("background-color","hsl("+l[0]+", 100%, 50%)"),e.$el.find(".color-picker-sb-spectrum-handle").css("background-color","hsl("+l[0]+", "+100*l[1]+"%, "+100*l[2]+"%)").transform("translate("+n*o[1]+"px, "+a*(1-o[2])+"px)")},destroy:function(e){e.destroyWheelEvents&&e.destroyWheelEvents(),delete e.destroyWheelEvents}},m=function(e){function r(r,n){void 0===n&&(n={}),e.call(this,n,[r]);var a,m,y,E,$=this;if($.params=o.extend({},r.params.colorPicker,n),$.params.containerEl&&0===(a=l($.params.containerEl)).length)return $;function x(){$.open()}function C(e){e.preventDefault()}function R(){$.open()}function S(e){if("page"!==$.params.openIn){var r=l(e.target);$.opened&&!$.closing&&(r.closest('[class*="backdrop"]').length||r.closest(".color-picker-popup, .color-picker-popover").length||(m&&m.length>0?r[0]!==m[0]&&0===r.closest(".sheet-modal").length&&$.close():0===l(e.target).closest(".sheet-modal").length&&$.close()))}}return $.params.inputEl&&(m=l($.params.inputEl)),$.params.targetEl&&(y=l($.params.targetEl)),m&&(E=m.parents(".view").length&&m.parents(".view")[0].f7View),!E&&y&&(E=y.parents(".view").length&&y.parents(".view")[0].f7View),E||(E=r.views.main),o.extend($,{app:r,$containerEl:a,containerEl:a&&a[0],inline:a&&a.length>0,$inputEl:m,inputEl:m&&m[0],$targetEl:y,targetEl:y&&y[0],initialized:!1,opened:!1,url:$.params.url,view:E,modules:{"alpha-slider":t,"current-color":i,hex:s,"hsb-sliders":c,"hue-slider":d,"brightness-slider":p,palette:u,"initial-current-colors":v,"rgb-bars":h,"rgb-sliders":g,"sb-spectrum":b,"hs-spectrum":f,wheel:k}}),o.extend($,{attachInputEvents:function(){$.$inputEl.on("click",x),$.params.inputReadOnly&&$.$inputEl.on("focus mousedown",C)},detachInputEvents:function(){$.$inputEl.off("click",x),$.params.inputReadOnly&&$.$inputEl.off("focus mousedown",C)},attachTargetEvents:function(){$.$targetEl.on("click",R)},detachTargetEvents:function(){$.$targetEl.off("click",R)},attachHtmlEvents:function(){r.on("click",S)},detachHtmlEvents:function(){r.off("click",S)}}),$.init(),$}return e&&(r.__proto__=e),r.prototype=Object.create(e&&e.prototype),r.prototype.constructor=r,r.prototype.attachEvents=function(){this.centerModules=this.centerModules.bind(this),this.params.centerModules&&this.app.on("resize",this.centerModules)},r.prototype.detachEvents=function(){this.params.centerModules&&this.app.off("resize",this.centerModules)},r.prototype.centerModules=function(){if(this.opened&&this.$el&&!this.inline){var e=this.$el.find(".page-content");if(e.length){var r=e[0];r.scrollHeight<=r.offsetHeight?e.addClass("justify-content-center"):e.removeClass("justify-content-center")}}},r.prototype.initInput=function(){this.$inputEl&&this.params.inputReadOnly&&this.$inputEl.prop("readOnly",!0)},r.prototype.getModalType=function(){var e=this.app,r=this.modal,l=this.params,o=l.openIn,n=l.openInPhone;return r&&r.type?r.type:"auto"!==o?o:this.inline?null:e.device.ios?e.device.ipad?"popover":n:e.width>=768||e.device.desktop&&"aurora"===e.theme?"popover":n},r.prototype.formatValue=function(){var e=this.value;return this.params.formatValue?this.params.formatValue.call(this,e):e.hex},r.prototype.normalizeHsValues=function(e){return[Math.floor(10*e[0])/10,Math.floor(1e3*e[1])/1e3,Math.floor(1e3*e[2])/1e3]},r.prototype.setValue=function(e,r){void 0===e&&(e={}),void 0===r&&(r=!0);var l=this;if(void 0!==e){var n=l.value||{},a=n.hex,t=n.rgb,i=n.hsl,s=n.hsb,c=n.alpha;void 0===c&&(c=1);var d,p=n.hue,u=n.rgba,v=n.hsla,h=l.value||!l.value&&!l.params.value;if(Object.keys(e).forEach(function(r){if(l.value&&void 0!==l.value[r]){var o=e[r];Array.isArray(o)?o.forEach(function(e,o){e!==l.value[r][o]&&(d=!0)}):o!==l.value[r]&&(d=!0)}else d=!0}),d){if(e.rgb||e.rgba){var g=e.rgb||e.rgba,b=g[0],f=g[1],k=g[2],m=g[3];void 0===m&&(m=c),t=[b,f,k],a=o.colorRgbToHex.apply(o,t),i=o.colorRgbToHsl.apply(o,t),s=o.colorHslToHsb.apply(o,i),i=l.normalizeHsValues(i),p=(s=l.normalizeHsValues(s))[0],c=m,u=[t[0],t[1],t[2],m],v=[i[0],i[1],i[2],m]}if(e.hsl||e.hsla){var y=e.hsl||e.hsla,E=y[0],$=y[1],x=y[2],C=y[3];void 0===C&&(C=c),i=[E,$,x],t=o.colorHslToRgb.apply(o,i),a=o.colorRgbToHex.apply(o,t),s=o.colorHslToHsb.apply(o,i),i=l.normalizeHsValues(i),p=(s=l.normalizeHsValues(s))[0],c=C,u=[t[0],t[1],t[2],C],v=[i[0],i[1],i[2],C]}if(e.hsb){var R=e.hsb,S=R[0],V=R[1],T=R[2],B=R[3];void 0===B&&(B=c),s=[S,V,T],i=o.colorHsbToHsl.apply(o,s),t=o.colorHslToRgb.apply(o,i),a=o.colorRgbToHex.apply(o,t),i=l.normalizeHsValues(i),p=(s=l.normalizeHsValues(s))[0],c=B,u=[t[0],t[1],t[2],B],v=[i[0],i[1],i[2],B]}if(e.hex&&(t=o.colorHexToRgb(e.hex),a=o.colorRgbToHex.apply(o,t),i=o.colorRgbToHsl.apply(o,t),s=o.colorHslToHsb.apply(o,i),i=l.normalizeHsValues(i),p=(s=l.normalizeHsValues(s))[0],u=[t[0],t[1],t[2],c],v=[i[0],i[1],i[2],c]),void 0!==e.alpha&&(c=e.alpha,void 0!==t&&(u=[t[0],t[1],t[2],c]),void 0!==i&&(v=[i[0],i[1],i[2],c])),void 0!==e.hue){i[0];var F=i[1],M=i[2];i=[e.hue,F,M],s=o.colorHslToHsb.apply(o,i),t=o.colorHslToRgb.apply(o,i),a=o.colorRgbToHex.apply(o,t),i=l.normalizeHsValues(i),p=(s=l.normalizeHsValues(s))[0],u=[t[0],t[1],t[2],c],v=[i[0],i[1],i[2],c]}l.value={hex:a,alpha:c,hue:p,rgb:t,hsl:i,hsb:s,rgba:u,hsla:v},l.initialValue||(l.initialValue=o.extend({},l.value)),l.updateValue(h),l.opened&&r&&l.updateModules()}}},r.prototype.getValue=function(){return this.value},r.prototype.updateValue=function(e){void 0===e&&(e=!0);var r=this.$inputEl,l=this.value,o=this.$targetEl;if(o&&this.params.targetElSetBackgroundColor){var n=l.rgba;o.css("background-color","rgba("+n.join(", ")+")")}if(e&&this.emit("local::change colorPickerChange",this,l),r&&r.length){var a=this.formatValue(l);r&&r.length&&(r.val(a),e&&r.trigger("change"))}},r.prototype.updateModules=function(){var e=this,r=e.modules;e.params.modules.forEach(function(l){"string"==typeof l&&r[l]&&r[l].update?r[l].update(e):l&&l.update&&l.update(e)})},r.prototype.update=function(){this.updateModules()},r.prototype.renderPicker=function(){var e=this,r=e.params,l=e.modules,o="";return r.modules.forEach(function(r){"string"==typeof r&&l[r]&&l[r].render?o+=l[r].render(e):r&&r.render&&(o+=r.render(e))}),o},r.prototype.renderNavbar=function(){if(this.params.renderNavbar)return this.params.renderNavbar.call(this,this);var e=this.params,r=e.openIn,l=e.navbarTitleText,o=e.navbarBackLinkText,n=e.navbarCloseText;return('\n <div class="navbar">\n <div class="navbar-inner sliding">\n '+("page"===r?'\n <div class="left">\n <a class="link back">\n <i class="icon icon-back"></i>\n <span class="if-not-md">'+o+"</span>\n </a>\n </div>\n ":"")+'\n <div class="title">'+l+"</div>\n "+("page"!==r?'\n <div class="right">\n <a class="link popup-close" data-popup=".color-picker-popup">'+n+"</a>\n </div>\n ":"")+"\n </div>\n </div>\n ").trim()},r.prototype.renderToolbar=function(){return this.params.renderToolbar?this.params.renderToolbar.call(this,this):('\n <div class="toolbar toolbar-top no-shadow">\n <div class="toolbar-inner">\n <div class="left"></div>\n <div class="right">\n <a class="link sheet-close popover-close" data-sheet=".color-picker-sheet-modal" data-popover=".color-picker-popover">'+this.params.toolbarCloseText+"</a>\n </div>\n </div>\n </div>\n ").trim()},r.prototype.renderInline=function(){var e=this.params,r=e.cssClass;return('\n <div class="color-picker color-picker-inline '+(e.groupedModules?"color-picker-grouped-modules":"")+" "+(r||"")+'">\n '+this.renderPicker()+"\n </div>\n ").trim()},r.prototype.renderSheet=function(){var e=this.params,r=e.cssClass,l=e.toolbarSheet;return('\n <div class="sheet-modal color-picker color-picker-sheet-modal '+(e.groupedModules?"color-picker-grouped-modules":"")+" "+(r||"")+'">\n '+(l?this.renderToolbar():"")+'\n <div class="sheet-modal-inner">\n <div class="page-content">\n '+this.renderPicker()+"\n </div>\n </div>\n </div>\n ").trim()},r.prototype.renderPopover=function(){var e=this.params,r=e.cssClass,l=e.toolbarPopover;return('\n <div class="popover color-picker-popover '+(r||"")+'">\n <div class="popover-inner">\n <div class="color-picker '+(e.groupedModules?"color-picker-grouped-modules":"")+'">\n '+(l?this.renderToolbar():"")+'\n <div class="page-content">\n '+this.renderPicker()+"\n </div>\n </div>\n </div>\n </div>\n ").trim()},r.prototype.renderPopup=function(){var e=this.params,r=e.cssClass,l=e.navbarPopup,o=e.groupedModules;return('\n <div class="popup color-picker-popup '+(r||"")+'">\n <div class="page">\n '+(l?this.renderNavbar():"")+'\n <div class="color-picker '+(o?"color-picker-grouped-modules":"")+'">\n <div class="page-content">\n '+this.renderPicker()+"\n </div>\n </div>\n </div>\n </div>\n ").trim()},r.prototype.renderPage=function(){var e=this.params,r=e.cssClass,l=e.groupedModules;return('\n <div class="page color-picker-page '+(r||"")+'" data-name="color-picker-page">\n '+this.renderNavbar()+'\n <div class="color-picker '+(l?"color-picker-grouped-modules":"")+'">\n <div class="page-content">\n '+this.renderPicker()+"\n </div>\n </div>\n </div>\n ").trim()},r.prototype.render=function(){var e=this.params;if(e.render)return e.render.call(this);if(this.inline)return this.renderInline();if("page"===e.openIn)return this.renderPage();var r=this.getModalType();return"popover"===r?this.renderPopover():"sheet"===r?this.renderSheet():"popup"===r?this.renderPopup():void 0},r.prototype.onOpen=function(){var e=this,r=e.initialized,l=e.$el,n=e.app,a=e.$inputEl,t=e.inline,i=e.value,s=e.params,c=e.modules;e.closing=!1,e.opened=!0,e.opening=!0,e.attachEvents(),s.modules.forEach(function(r){"string"==typeof r&&c[r]&&c[r].render?c[r].init(e):r&&r.init&&r.init(e)});var d=!i&&s.value;r?i&&(e.initialValue=o.extend({},i),e.setValue(i,!1)):i?e.setValue(i):s.value?e.setValue(s.value,!1):s.value||e.setValue({hex:"#ff0000"},!1),d&&e.updateValue(),e.updateModules(),s.centerModules&&e.centerModules(),!t&&a&&a.length&&"md"===n.theme&&a.trigger("focus"),e.initialized=!0,l&&l.trigger("colorpicker:open",e),a&&a.trigger("colorpicker:open",e),e.emit("local::open colorPickerOpen",e)},r.prototype.onOpened=function(){this.opening=!1,this.$el&&this.$el.trigger("colorpicker:opened",this),this.$inputEl&&this.$inputEl.trigger("colorpicker:opened",this),this.emit("local::opened colorPickerOpened",this)},r.prototype.onClose=function(){var e=this,r=e.app,l=e.params,o=e.modules;e.opening=!1,e.closing=!0,e.detachEvents(),e.$inputEl&&"md"===r.theme&&e.$inputEl.trigger("blur"),l.modules.forEach(function(r){"string"==typeof r&&o[r]&&o[r].update?o[r].destroy(e):r&&r.destroy&&r.destroy(e)}),e.$el&&e.$el.trigger("colorpicker:close",e),e.$inputEl&&e.$inputEl.trigger("colorpicker:close",e),e.emit("local::close colorPickerClose",e)},r.prototype.onClosed=function(){var e=this;e.opened=!1,e.closing=!1,e.inline||o.nextTick(function(){e.modal&&e.modal.el&&e.modal.destroy&&(e.params.routableModals||e.modal.destroy()),delete e.modal}),e.$el&&e.$el.trigger("colorpicker:closed",e),e.$inputEl&&e.$inputEl.trigger("colorpicker:closed",e),e.emit("local::closed colorPickerClosed",e)},r.prototype.open=function(){var e,r=this,o=r.app,n=r.opened,a=r.inline,t=r.$inputEl,i=r.$targetEl,s=r.params;if(!n){if(a)return r.$el=l(r.render()),r.$el[0].f7ColorPicker=r,r.$containerEl.append(r.$el),r.onOpen(),void r.onOpened();var c=r.render();if("page"===s.openIn)r.view.router.navigate({url:r.url,route:{content:c,path:r.url,on:{pageBeforeIn:function(e,l){r.$el=l.$el.find(".color-picker"),r.$el[0].f7ColorPicker=r,r.onOpen()},pageAfterIn:function(){r.onOpened()},pageBeforeOut:function(){r.onClose()},pageAfterOut:function(){r.onClosed(),r.$el&&r.$el[0]&&(r.$el[0].f7ColorPicker=null,delete r.$el[0].f7ColorPicker)}}}});else{var d=r.getModalType(),p=s.backdrop;null==p&&("popover"===d&&!1!==o.params.popover.backdrop&&(p=!0),"popup"===d&&(p=!0));var u={targetEl:i||t,scrollToEl:s.scrollToInput?i||t:void 0,content:c,backdrop:p,closeByBackdropClick:s.closeByBackdropClick,on:{open:function(){r.modal=this,r.$el="popover"===d||"popup"===d?this.$el.find(".color-picker"):this.$el,r.$el[0].f7ColorPicker=r,r.onOpen()},opened:function(){r.onOpened()},close:function(){r.onClose()},closed:function(){r.onClosed(),r.$el&&r.$el[0]&&(r.$el[0].f7ColorPicker=null,delete r.$el[0].f7ColorPicker)}}};s.routableModals?r.view.router.navigate({url:r.url,route:(e={path:r.url},e[d]=u,e)}):(r.modal=o[d].create(u),r.modal.open())}}},r.prototype.close=function(){var e=this.opened,r=this.inline;if(e)return r?(this.onClose(),void this.onClosed()):void(this.params.routableModals?this.view.router.back():this.modal.close())},r.prototype.init=function(){if(this.initInput(),this.inline)return this.open(),void this.emit("local::init colorPickerInit",this);!this.initialized&&this.params.value&&this.setValue(this.params.value),this.$inputEl&&this.attachInputEvents(),this.$targetEl&&this.attachTargetEvents(),this.params.closeByOutsideClick&&this.attachHtmlEvents(),this.emit("local::init colorPickerInit",this)},r.prototype.destroy=function(){if(!this.destroyed){var e=this.$el;this.emit("local::beforeDestroy colorPickerBeforeDestroy",this),e&&e.trigger("colorpicker:beforedestroy",this),this.close(),this.detachEvents(),this.$inputEl&&this.detachInputEvents(),this.$targetEl&&this.detachTargetEvents(),this.params.closeByOutsideClick&&this.detachHtmlEvents(),e&&e.length&&delete this.$el[0].f7ColorPicker,o.deleteProps(this),this.destroyed=!0}},r}(n),y={name:"colorPicker",static:{ColorPicker:m},create:function(){this.colorPicker=a({defaultSelector:".color-picker",constructor:m,app:this,domProp:"f7ColorPicker"}),this.colorPicker.close=function(e){void 0===e&&(e=".color-picker");var r=l(e);if(0!==r.length){var o=r[0].f7ColorPicker;!o||o&&!o.opened||o.close()}}},params:{colorPicker:{value:null,modules:["wheel"],palette:[["#FFEBEE","#FFCDD2","#EF9A9A","#E57373","#EF5350","#F44336","#E53935","#D32F2F","#C62828","#B71C1C"],["#F3E5F5","#E1BEE7","#CE93D8","#BA68C8","#AB47BC","#9C27B0","#8E24AA","#7B1FA2","#6A1B9A","#4A148C"],["#E8EAF6","#C5CAE9","#9FA8DA","#7986CB","#5C6BC0","#3F51B5","#3949AB","#303F9F","#283593","#1A237E"],["#E1F5FE","#B3E5FC","#81D4FA","#4FC3F7","#29B6F6","#03A9F4","#039BE5","#0288D1","#0277BD","#01579B"],["#E0F2F1","#B2DFDB","#80CBC4","#4DB6AC","#26A69A","#009688","#00897B","#00796B","#00695C","#004D40"],["#F1F8E9","#DCEDC8","#C5E1A5","#AED581","#9CCC65","#8BC34A","#7CB342","#689F38","#558B2F","#33691E"],["#FFFDE7","#FFF9C4","#FFF59D","#FFF176","#FFEE58","#FFEB3B","#FDD835","#FBC02D","#F9A825","#F57F17"],["#FFF3E0","#FFE0B2","#FFCC80","#FFB74D","#FFA726","#FF9800","#FB8C00","#F57C00","#EF6C00","#E65100"]],groupedModules:!1,centerModules:!0,sliderLabel:!1,sliderValue:!1,sliderValueEdiable:!1,barLabel:!1,barValue:!1,barValueEdiable:!1,hexLabel:!1,hexValueEditable:!1,redLabelText:"R",greenLabelText:"G",blueLabelText:"B",hueLabelText:"H",saturationLabelText:"S",brightnessLabelText:"B",hexLabelText:"HEX",alphaLabelText:"A",containerEl:null,openIn:"popover",openInPhone:"popup",formatValue:null,targetEl:null,targetElSetBackgroundColor:!1,inputEl:null,inputReadOnly:!0,closeByOutsideClick:!0,scrollToInput:!0,toolbarSheet:!0,toolbarPopover:!1,toolbarCloseText:"Done",navbarPopup:!0,navbarCloseText:"Done",navbarTitleText:"Color",navbarBackLinkText:"Back",cssClass:null,routableModals:!0,view:null,url:"color/",backdrop:null,closeByBackdropClick:!0,renderToolbar:null,renderNavbar:null,renderInline:null,renderPopover:null,renderSheet:null,renderPopup:null,render:null}}};if(r){if(e.prototype.modules&&e.prototype.modules[y.name])return;e.use(y),e.instance&&(e.instance.useModuleParams(y,e.instance.params),e.instance.useModule(y))}return y}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))