framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 46.9 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),p=o.colorHsbToHsl(i[0],0,1),d=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("+p[0]+", "+100*p[1]+"%, "+100*p[2]+"%), hsl("+d[0]+", "+100*d[1]+"%, "+100*d[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}},p={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}},d={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),p=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("+p[0]+", "+100*p[1]+"%, "+100*p[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 p=r.rtl?"to left":"to right";o.$el.find(".range-bar").css("background-image","linear-gradient("+p+", rgb(0, "+c[1]+", "+c[2]+"), rgb(255, "+c[1]+", "+c[2]+"))"),n.$el.find(".range-bar").css("background-image","linear-gradient("+p+", rgb("+c[0]+", 0, "+c[2]+"), rgb("+c[0]+", 255, "+c[2]+"))"),a.$el.find(".range-bar").css("background-image","linear-gradient("+p+", 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,p=e.app,d=e.$el;function u(r,l){var o=(r-i.left)/i.width,n=(l-i.top)/i.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 v(e){if(!r){o="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,a=o,n="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,t=n;var p=l(e.target);(c=p.closest(".color-picker-sb-spectrum-handle").length>0)||(s=p.closest(".color-picker-sb-spectrum").length>0),s&&(i=d.find(".color-picker-sb-spectrum")[0].getBoundingClientRect(),u(o,n)),(c||s)&&d.find(".color-picker-sb-spectrum-handle").addClass("color-picker-sb-spectrum-handle-pressed")}}function h(e){(s||c)&&(a="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,e.preventDefault(),r||(r=!0,c&&(i=d.find(".color-picker-sb-spectrum")[0].getBoundingClientRect())),(s||c)&&u(a,t))}function g(){r=!1,(s||c)&&d.find(".color-picker-sb-spectrum-handle").removeClass("color-picker-sb-spectrum-handle-pressed"),s=!1,c=!1}function b(){e.modules["sb-spectrum"].update(e)}var f=!("touchstart"!==p.touchEvents.start||!p.support.passiveListener)&&{passive:!0,capture:!1};e.$el.on(p.touchEvents.start,v,f),p.on("touchmove:active",h),p.on("touchend:passive",g),p.on("resize",b),e.destroySpectrumEvents=function(){e.$el.off(p.touchEvents.start,v,f),p.off("touchmove:active",h),p.off("touchend:passive",g),p.off("resize",b)}},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,p=e.app,d=e.$el;function u(r,l){var o=(r-i.left)/i.width*360,n=(l-i.top)/i.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 v(e){if(!r){o="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,a=o,n="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,t=n;var p=l(e.target);(c=p.closest(".color-picker-hs-spectrum-handle").length>0)||(s=p.closest(".color-picker-hs-spectrum").length>0),s&&(i=d.find(".color-picker-hs-spectrum")[0].getBoundingClientRect(),u(o,n)),(c||s)&&d.find(".color-picker-hs-spectrum-handle").addClass("color-picker-hs-spectrum-handle-pressed")}}function h(e){(s||c)&&(a="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,e.preventDefault(),r||(r=!0,c&&(i=d.find(".color-picker-hs-spectrum")[0].getBoundingClientRect())),(s||c)&&u(a,t))}function g(){r=!1,(s||c)&&d.find(".color-picker-hs-spectrum-handle").removeClass("color-picker-hs-spectrum-handle-pressed"),s=!1,c=!1}function b(){e.modules["hs-spectrum"].update(e)}var f=!("touchstart"!==p.touchEvents.start||!p.support.passiveListener)&&{passive:!0,capture:!1};e.$el.on(p.touchEvents.start,v,f),p.on("touchmove:active",h),p.on("touchend:passive",g),p.on("resize",b),e.destroySpectrumEvents=function(){e.$el.off(p.touchEvents.start,v,f),p.off("touchmove:active",h),p.off("touchend:passive",g),p.off("resize",b)}},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 m={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,p,d,u,v=e.app,h=e.$el;function g(r,l){var o=i.left+i.width/2,n=i.top+i.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 b(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 f(e){if(!r){o="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,a=o,n="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,t=n;var v=l(e.target);c=v.closest(".color-picker-wheel-handle").length>0,s=v.closest("circle").length>0,(u=v.closest(".color-picker-sb-spectrum-handle").length>0)||(d=v.closest(".color-picker-sb-spectrum").length>0),s&&(i=h.find(".color-picker-wheel")[0].getBoundingClientRect(),g(o,n)),d&&(p=h.find(".color-picker-sb-spectrum")[0].getBoundingClientRect(),b(o,n)),(u||d)&&h.find(".color-picker-sb-spectrum-handle").addClass("color-picker-sb-spectrum-handle-pressed")}}function m(e){(s||c||d||u)&&(a="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,t="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,e.preventDefault(),r||(r=!0,c&&(i=h.find(".color-picker-wheel")[0].getBoundingClientRect()),u&&(p=h.find(".color-picker-sb-spectrum")[0].getBoundingClientRect())),(s||c)&&g(a,t),(d||u)&&b(a,t))}function k(){r=!1,(d||u)&&h.find(".color-picker-sb-spectrum-handle").removeClass("color-picker-sb-spectrum-handle-pressed"),s=!1,c=!1,d=!1,u=!1}function y(){e.modules.wheel.update(e)}var E=!("touchstart"!==v.touchEvents.start||!v.support.passiveListener)&&{passive:!0,capture:!1};e.$el.on(v.touchEvents.start,f,E),v.on("touchmove:active",m),v.on("touchend:passive",k),v.on("resize",y),e.destroyWheelEvents=function(){e.$el.off(v.touchEvents.start,f,E),v.off("touchmove:active",m),v.off("touchend:passive",k),v.off("resize",y)}},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,p=i-Math.sin(s)*(i-c)-c,d=i-Math.cos(s)*(i-c)-c;e.$el.find(".color-picker-wheel-handle").css("background-color","hsl("+l[0]+", 100%, 50%)").transform("translate("+p+"px, "+d+"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}},k=function(e){function r(r,n){void 0===n&&(n={}),e.call(this,n,[r]);var a,k,y,E=this;if(E.params=o.extend({},r.params.colorPicker,n),E.params.containerEl&&0===(a=l(E.params.containerEl)).length)return E;function $(){E.open()}function x(e){e.preventDefault()}function C(){E.open()}function S(e){if(!E.destroyed&&E.params&&"page"!==E.params.openIn){var r=l(e.target);E.opened&&!E.closing&&(r.closest('[class*="backdrop"]').length||r.closest(".color-picker-popup, .color-picker-popover").length||(k&&k.length>0?r[0]!==k[0]&&0===r.closest(".sheet-modal").length&&E.close():0===l(e.target).closest(".sheet-modal").length&&E.close()))}}return E.params.inputEl&&(k=l(E.params.inputEl)),E.params.targetEl&&(y=l(E.params.targetEl)),o.extend(E,{app:r,$containerEl:a,containerEl:a&&a[0],inline:a&&a.length>0,$inputEl:k,inputEl:k&&k[0],$targetEl:y,targetEl:y&&y[0],initialized:!1,opened:!1,url:E.params.url,modules:{"alpha-slider":t,"current-color":i,hex:s,"hsb-sliders":c,"hue-slider":p,"brightness-slider":d,palette:u,"initial-current-colors":v,"rgb-bars":h,"rgb-sliders":g,"sb-spectrum":b,"hs-spectrum":f,wheel:m}}),o.extend(E,{attachInputEvents:function(){E.$inputEl.on("click",$),E.params.inputReadOnly&&E.$inputEl.on("focus mousedown",x)},detachInputEvents:function(){E.$inputEl.off("click",$),E.params.inputReadOnly&&E.$inputEl.off("focus mousedown",x)},attachTargetEvents:function(){E.$targetEl.on("click",C)},detachTargetEvents:function(){E.$targetEl.off("click",C)},attachHtmlEvents:function(){r.on("click",S)},detachHtmlEvents:function(){r.off("click",S)}}),E.init(),E}e&&(r.__proto__=e),r.prototype=Object.create(e&&e.prototype),r.prototype.constructor=r;var n={view:{configurable:!0}};return n.view.get=function(){var e,r=this.$inputEl,l=this.$targetEl,o=this.app,n=this.params;return n.view?e=n.view:(r&&(e=r.parents(".view").length&&r.parents(".view")[0].f7View),!e&&l&&(e=l.parents(".view").length&&l.parents(".view")[0].f7View)),e||(e=o.views.main),e},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 p,d=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]&&(p=!0)})):o!==l.value[r]&&(p=!0)}else p=!0})),p){if(e.rgb||e.rgba){var g=e.rgb||e.rgba,b=g[0],f=g[1],m=g[2],k=g[3];void 0===k&&(k=c),t=[b,f,m],a=o.colorRgbToHex.apply(o,t),i=o.colorRgbToHsl.apply(o,t),s=o.colorHslToHsb.apply(o,i),i=l.normalizeHsValues(i),d=(s=l.normalizeHsValues(s))[0],c=k,u=[t[0],t[1],t[2],k],v=[i[0],i[1],i[2],k]}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),d=(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 S=e.hsb,R=S[0],T=S[1],V=S[2],B=S[3];void 0===B&&(B=c),s=[R,T,V],i=o.colorHsbToHsl.apply(o,s),t=o.colorHslToRgb.apply(o,i),a=o.colorRgbToHex.apply(o,t),i=l.normalizeHsValues(i),d=(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),d=(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),d=(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:d,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-bg"></div>\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].init?c[r].init(e):r&&r.init&&r.init(e)}));var p=!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),p&&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"),a&&a.trigger("colorpicker:open"),e.emit("local::open colorPickerOpen",e)},r.prototype.onOpened=function(){this.opening=!1,this.$el&&this.$el.trigger("colorpicker:opened"),this.$inputEl&&this.$inputEl.trigger("colorpicker:opened"),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].destroy?o[r].destroy(e):r&&r.destroy&&r.destroy(e)})),e.$el&&e.$el.trigger("colorpicker:close"),e.$inputEl&&e.$inputEl.trigger("colorpicker:close"),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.$inputEl&&e.$inputEl.trigger("colorpicker:closed"),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 p=r.getModalType(),d=s.backdrop;null==d&&("popover"===p&&!1!==o.params.popover.backdrop&&(d=!0),"popup"===p&&(d=!0));var u={targetEl:i||t,scrollToEl:s.scrollToInput?i||t:void 0,content:c,backdrop:d,closeByBackdropClick:s.closeByBackdropClick,on:{open:function(){r.modal=this,r.$el="popover"===p||"popup"===p?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)}}};"popup"===p&&(u.push=s.popupPush,u.swipeToClose=s.popupSwipeToClose),"sheet"===p&&(u.push=s.sheetPush,u.swipeToClose=s.sheetSwipeToClose),s.routableModals&&r.view?r.view.router.navigate({url:r.url,route:(e={path:r.url},e[p]=u,e)}):(r.modal=o[p].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||"page"===this.params.openIn?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.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}},Object.defineProperties(r.prototype,n),r}(n),y={name:"colorPicker",static:{ColorPicker:k},create:function(){this.colorPicker=a({defaultSelector:".color-picker",constructor:k,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",popupPush:!1,popupSwipeToClose:void 0,sheetPush:!1,sheetSwipeToClose:void 0,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))