UNPKG

nwp-color-picker

Version:

Angular-Material inspired color picker.

github.com/brianpkelley/md-color-picker

brianpkelley/md-color-picker

7 lines • 26 kB
1
2
3
4
5
6
7
/** * md-color-picker - Angular-Material inspired color picker. * @version v0.2.6 * @link https://github.com/brianpkelley/md-color-picker * @license MIT */ !function(e,t,o){!function(e,t,r){"use strict";var l=function(e,o){this.type=e,this.restrictX=o,this.offset={x:null,y:null},this.height=255,this.$scope=null,this.$element=null,this.get=t.bind(this,function(e,o,r){this.$scope=e,this.$element=o,this.canvas=this.$element.children()[0],this.marker=this.$element.children()[1],this.context=this.canvas.getContext("2d"),this.currentColor=this.$scope.color.toRgb(),this.currentHue=this.$scope.color.toHsv().h,this.$element.on("mousedown",t.bind(this,this.onMouseDown)),this.$scope.$on("mdColorPicker:colorSet",t.bind(this,this.onColorSet)),this.extra&&this.extra(),this.draw()})};l.prototype.$window=t.element(e),l.prototype.getColorByMouse=function(e){var t=e.pageX-this.offset.x,o=e.pageY-this.offset.y;return this.getColorByPoint(t,o)},l.prototype.setMarkerCenter=function(e,o){var l=-1*this.marker.offsetWidth/2,a=-1*this.marker.offsetHeight/2;o===r?(o=e+a,o=Math.max(Math.min(this.height-1+a,o),Math.ceil(a)),e=0):(e+=l,o+=a,e=Math.max(Math.min(this.height+l,e),Math.ceil(l)),o=Math.max(Math.min(this.height+a,o),Math.ceil(a))),t.element(this.marker).css({left:e+"px"}),t.element(this.marker).css({top:o+"px"})},l.prototype.getMarkerCenter=function(){var e={x:this.marker.offsetLeft+Math.floor(this.marker.offsetWidth/2),y:this.marker.offsetTop+Math.floor(this.marker.offsetHeight/2)};return e},l.prototype.getImageData=function(e,t){e=Math.max(0,Math.min(e,this.canvas.width-1)),t=Math.max(0,Math.min(t,this.canvas.height-1));var o=this.context.getImageData(e,t,1,1).data;return o},l.prototype.onMouseDown=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.$scope.previewUnfocus(),this.$element.css({cursor:"none"}),this.offset.x=this.canvas.getBoundingClientRect().left+1,this.offset.y=this.canvas.getBoundingClientRect().top;var o=t.bind(this,function(e){switch(this.type){case"hue":var t=this.getColorByMouse(e);this.$scope.$broadcast("mdColorPicker:spectrumHueChange",{hue:t});break;case"alpha":var o=this.getColorByMouse(e);this.$scope.color.setAlpha(o),this.$scope.alpha=o,this.$scope.$apply();break;case"spectrum":var r=this.getColorByMouse(e);this.setColor(r)}});this.$window.on("mousemove",o),this.$window.one("mouseup",t.bind(this,function(e){this.$window.off("mousemove",o),this.$element.css({cursor:"crosshair"})})),o(e)},l.prototype.setColor=function(e){this.$scope.color._r=e.r,this.$scope.color._g=e.g,this.$scope.color._b=e.b,this.$scope.$apply(),this.$scope.$broadcast("mdColorPicker:spectrumColorChange",{color:e})},l.prototype.onColorSet=function(e,t){switch(this.type){case"hue":var o=this.$scope.color.toHsv();this.setMarkerCenter(this.canvas.height-this.canvas.height*(o.h/360));break;case"alpha":this.currentColor=t.color.toRgb(),this.draw();var r=t.color.getAlpha(),l=this.canvas.height-this.canvas.height*r;this.setMarkerCenter(l);break;case"spectrum":var o=t.color.toHsv();this.currentHue=o.h,this.draw();var a=this.canvas.width*o.s,n=this.canvas.height-this.canvas.height*o.v;this.setMarkerCenter(a,n)}};var a=new l("hue",!0);a.getColorByPoint=function(e,t){var r=this.getImageData(e,t);this.setMarkerCenter(t);var l=new o({r:r[0],g:r[1],b:r[2]});return l.toHsl().h},a.draw=function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var e=this.context.createLinearGradient(90,0,90,this.height);e.addColorStop(.01,"rgba(255, 0, 0, 1.000)"),e.addColorStop(.167,"rgba(255, 0, 255, 1.000)"),e.addColorStop(.333,"rgba(0, 0, 255, 1.000)"),e.addColorStop(.5,"rgba(0, 255, 255, 1.000)"),e.addColorStop(.666,"rgba(0, 255, 0, 1.000)"),e.addColorStop(.828,"rgba(255, 255, 0, 1.000)"),e.addColorStop(.999,"rgba(255, 0, 0, 1.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)};var n=new l("alpha",!0);n.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(t),o[3]/255},n.draw=function(){this.$element.css({height:this.height+"px"}),this.canvas.height=this.height,this.canvas.width=this.height;var e=this.context.createLinearGradient(90,0,90,this.height);e.addColorStop(.01,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 1.000)"),e.addColorStop(.999,"rgba("+this.currentColor.r+","+this.currentColor.g+","+this.currentColor.b+", 0.000)"),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.height)},n.extra=function(){this.$scope.$on("mdColorPicker:spectrumColorChange",t.bind(this,function(e,t){this.currentColor=t.color,this.draw()}))};var i=new l("spectrum",!1);i.getColorByPoint=function(e,t){var o=this.getImageData(e,t);return this.setMarkerCenter(e,t),{r:o[0],g:o[1],b:o[2]}},i.draw=function(){this.canvas.height=this.height,this.canvas.width=this.height,this.context.clearRect(0,0,this.canvas.width,this.canvas.height);var e=this.context.createLinearGradient(0,0,this.canvas.width,0);e.addColorStop(0,"rgba(255, 255, 255, 1.000)"),e.addColorStop(1,"rgba(255, 255, 255, 0.000)");var t=this.context.createLinearGradient(0,0,0,this.canvas.height);t.addColorStop(0,"rgba(0, 0, 0, 0.000)"),t.addColorStop(1,"rgba(0, 0, 0, 1.000)"),this.context.fillStyle="hsl( "+this.currentHue+", 100%, 50%)",this.context.fillRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=e,this.context.fillRect(0,0,this.canvas.width,this.canvas.height),this.context.fillStyle=t,this.context.fillRect(0,0,this.canvas.width,this.canvas.height)},i.extra=function(){this.$scope.$on("mdColorPicker:spectrumHueChange",t.bind(this,function(e,t){this.currentHue=t.hue,this.draw();var o=this.getMarkerCenter(),r=this.getColorByPoint(o.x,o.y);this.setColor(r)}))},t.module("mdColorPicker",[]).run(["$templateCache",function(e){var t={clear:'<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>',gradient:'<path d="M11 9h2v2h-2zm-2 2h2v2H9zm4 0h2v2h-2zm2-2h2v2h-2zM7 9h2v2H7zm12-6H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 18H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm2-7h-2v2h2v2h-2v-2h-2v2h-2v-2h-2v2H9v-2H7v2H5v-2h2v-2H5V5h14v6z"/>',tune:'<path d="M13 21v-2h8v-2h-8v-2h-2v6h2zM3 17v2h6v-2H3z"/><path d="M21 13v-2H11v2h10zM7 9v2H3v2h4v2h2V9H7z"/><path d="M15 9h2V7h4V5h-4V3h-2v6zM3 5v2h10V5H3z"/>',view_module:'<path d="M4 11h5V5H4v6z"/><path d="M4 18h5v-6H4v6z"/><path d="M10 18h5v-6h-5v6z"/><path d="M16 18h5v-6h-5v6z"/><path d="M10 11h5V5h-5v6z"/><path d="M16 5v6h5V5h-5z"/>',view_headline:'<path d="M4 15h17v-2H4v2z"/><path d="M4 19h17v-2H4v2z"/><path d="M4 11h17V9H4v2z"/><path d="M4 5v2h17V5H4z"/>',history:'<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"/><path d="M12 8v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>',clear_all:'<path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"/>'};for(var o in t)t.hasOwnProperty(o)&&e.put([o,"svg"].join("."),['<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">',t[o],"</svg>"].join(""))}]).factory("mdColorPickerHistory",["$injector",function(e){var t=[],r=[],l=!1;try{l=e.get("$cookies")}catch(a){}if(l)for(var n=l.getObject("mdColorPickerHistory")||[],i=0;i<n.length;i++)t.push(o(n[i])),r.push(n[i]);var c=40;return{length:function(){return arguments[0]?void(c=arguments[0]):t.length},add:function(e){for(var o=0;o<t.length;o++)t[o].toRgbString()===e.toRgbString()&&(t.splice(o,1),r.splice(o,1));t.unshift(e),r.unshift(e.toRgbString()),t.length>c&&(t.pop(),r.pop()),l&&l.putObject("mdColorPickerHistory",r)},get:function(){return t},reset:function(){t=[],r=[],l&&l.putObject("mdColorPickerHistory",r)}}}]).directive("mdColorPicker",["$timeout","mdColorPickerHistory",function(e,t){return{templateUrl:"mdColorPicker.tpl.html",require:"^ngModel",scope:{options:"=mdColorPicker",type:"@",label:"@",icon:"@",random:"@","default":"@",openOnInput:"@",hasBackdrop:"@",clickOutsideToClose:"@",skipHide:"@",preserveScope:"@",mdColorClearButton:"=?",mdColorPreview:"=?",mdColorAlphaChannel:"=?",mdColorSpectrum:"=?",mdColorSliders:"=?",mdColorGenericPalette:"=?",mdColorMaterialPalette:"=?",mdColorHistory:"=?",mdColorDefaultTab:"=?"},controller:["$scope","$element","$attrs","$mdDialog","$mdColorPicker",function(e,t,o,l,a){var n=!1;if(e.options!==r)for(var i in e.options)if(e.options.hasOwnProperty(i)){var c=r;e.hasOwnProperty(i)?c=i:e.hasOwnProperty("mdColor"+i.slice(0,1).toUpperCase()+i.slice(1))&&(c="mdColor"+i.slice(0,1).toUpperCase()+i.slice(1)),c&&e[c]===r&&(e[c]=e.options[i])}var s=t.controller("ngModel"),d=function(t){e.value=t||s.$viewValue||""};e.mdColorClearButton=e.mdColorClearButton===r?!0:e.mdColorClearButton,e.mdColorPreview=e.mdColorPreview===r?!0:e.mdColorPreview,e.mdColorAlphaChannel=e.mdColorAlphaChannel===r?!0:e.mdColorAlphaChannel,e.mdColorSpectrum=e.mdColorSpectrum===r?!0:e.mdColorSpectrum,e.mdColorSliders=e.mdColorSliders===r?!0:e.mdColorSliders,e.mdColorGenericPalette=e.mdColorGenericPalette===r?!0:e.mdColorGenericPalette,e.mdColorMaterialPalette=e.mdColorMaterialPalette===r?!0:e.mdColorMaterialPalette,e.mdColorHistory=e.mdColorHistory===r?!0:e.mdColorHistory,d(),e.$watch(function(){return s.$modelValue},function(e){d(e)}),e.$watch("value",function(e,t){""!==e&&"undefined"!=typeof e&&e&&e!==t&&s.$setViewValue(e)}),e.clearValue=function(){e.value=""},e.showColorPicker=function(t){n||a.show({value:e.value,defaultValue:e["default"],random:e.random,clickOutsideToClose:e.clickOutsideToClose,hasBackdrop:e.hasBackdrop,skipHide:e.skipHide,preserveScope:e.preserveScope,mdColorAlphaChannel:e.mdColorAlphaChannel,mdColorSpectrum:e.mdColorSpectrum,mdColorSliders:e.mdColorSliders,mdColorGenericPalette:e.mdColorGenericPalette,mdColorMaterialPalette:e.mdColorMaterialPalette,mdColorHistory:e.mdColorHistory,mdColorDefaultTab:e.mdColorDefaultTab,$event:t}).then(function(t){e.value=t})}}],compile:function(e,t){t.type=t.type!==r?t.type:0}}}]).directive("mdColorPickerContainer",["$compile","$timeout","$mdColorPalette","mdColorPickerHistory",function(e,r,l,a){return{templateUrl:"mdColorPickerContainer.tpl.html",scope:{value:"=?","default":"@",random:"@",ok:"=?",mdColorAlphaChannel:"=",mdColorSpectrum:"=",mdColorSliders:"=",mdColorGenericPalette:"=",mdColorMaterialPalette:"=",mdColorHistory:"=",mdColorDefaultTab:"="},controller:["$scope","$element","$attrs",function(e,n,i){function c(t){var o=0;if(t&&"string"==typeof t){for(var r="mdColor"+t.slice(0,1).toUpperCase()+t.slice(1),l=["mdColorSpectrum","mdColorSliders","mdColorGenericPalette","mdColorMaterialPalette","mdColorHistory"],a=0;a<l.length;a++)if(l[a]==r&&e[r]){o=a;break}}else t&&"number"==typeof t&&(o=t);return o}var s=t.element(n[0].querySelector(".md-color-picker-container")),d=(t.element(s[0].querySelector(".md-color-picker-result")),t.element(n[0].querySelector(".md-color-picker-preview-input"))),h=["toHexString","toRgbString","toHslString"];e["default"]=e["default"]?e["default"]:e.random?o.random():"rgb(255,255,255)",e.value.search("#")>=0?e.type=0:e.value.search("rgb")>=0?e.type=1:e.value.search("hsl")>=0&&(e.type=2),e.color=new o(e.value||e["default"]),e.alpha=e.color.getAlpha(),e.history=a,e.materialFamily=[],e.whichPane=c(e.mdColorDefaultTab),e.inputFocus=!1;var m=9;2*Math.PI/m;e.palette=[["rgb(255, 204, 204)","rgb(255, 230, 204)","rgb(255, 255, 204)","rgb(204, 255, 204)","rgb(204, 255, 230)","rgb(204, 255, 255)","rgb(204, 230, 255)","rgb(204, 204, 255)","rgb(230, 204, 255)","rgb(255, 204, 255)"],["rgb(255, 153, 153)","rgb(255, 204, 153)","rgb(255, 255, 153)","rgb(153, 255, 153)","rgb(153, 255, 204)","rgb(153, 255, 255)","rgb(153, 204, 255)","rgb(153, 153, 255)","rgb(204, 153, 255)","rgb(255, 153, 255)"],["rgb(255, 102, 102)","rgb(255, 179, 102)","rgb(255, 255, 102)","rgb(102, 255, 102)","rgb(102, 255, 179)","rgb(102, 255, 255)","rgb(102, 179, 255)","rgb(102, 102, 255)","rgb(179, 102, 255)","rgb(255, 102, 255)"],["rgb(255, 51, 51)","rgb(255, 153, 51)","rgb(255, 255, 51)","rgb(51, 255, 51)","rgb(51, 255, 153)","rgb(51, 255, 255)","rgb(51, 153, 255)","rgb(51, 51, 255)","rgb(153, 51, 255)","rgb(255, 51, 255)"],["rgb(255, 0, 0)","rgb(255, 128, 0)","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 128)","rgb(0, 255, 255)","rgb(0, 128, 255)","rgb(0, 0, 255)","rgb(128, 0, 255)","rgb(255, 0, 255)"],["rgb(245, 0, 0)","rgb(245, 123, 0)","rgb(245, 245, 0)","rgb(0, 245, 0)","rgb(0, 245, 123)","rgb(0, 245, 245)","rgb(0, 123, 245)","rgb(0, 0, 245)","rgb(123, 0, 245)","rgb(245, 0, 245)"],["rgb(214, 0, 0)","rgb(214, 108, 0)","rgb(214, 214, 0)","rgb(0, 214, 0)","rgb(0, 214, 108)","rgb(0, 214, 214)","rgb(0, 108, 214)","rgb(0, 0, 214)","rgb(108, 0, 214)","rgb(214, 0, 214)"],["rgb(163, 0, 0)","rgb(163, 82, 0)","rgb(163, 163, 0)","rgb(0, 163, 0)","rgb(0, 163, 82)","rgb(0, 163, 163)","rgb(0, 82, 163)","rgb(0, 0, 163)","rgb(82, 0, 163)","rgb(163, 0, 163)"],["rgb(92, 0, 0)","rgb(92, 46, 0)","rgb(92, 92, 0)","rgb(0, 92, 0)","rgb(0, 92, 46)","rgb(0, 92, 92)","rgb(0, 46, 92)","rgb(0, 0, 92)","rgb(46, 0, 92)","rgb(92, 0, 92)"],["rgb(255, 255, 255)","rgb(205, 205, 205)","rgb(178, 178, 178)","rgb(153, 153, 153)","rgb(127, 127, 127)","rgb(102, 102, 102)","rgb(76, 76, 76)","rgb(51, 51, 51)","rgb(25, 25, 25)","rgb(0, 0, 0)"]],e.materialPalette=l,e.isDark=function(e){return t.isArray(e)?o({r:e[0],g:e[1],b:e[2]}).isDark():o(e).isDark()},e.previewFocus=function(){e.inputFocus=!0,r(function(){d[0].setSelectionRange(0,d[0].value.length)})},e.previewUnfocus=function(){e.inputFocus=!1,d[0].blur()},e.previewBlur=function(){e.inputFocus=!1,e.setValue()},e.previewKeyDown=function(t){13==t.keyCode&&e.ok&&e.ok()},e.setPaletteColor=function(t){r(function(){e.color=o(t.target.style.backgroundColor)})},e.setValue=function(){e.color&&e.color&&h[e.type]&&"rgba(0, 0, 0, 0)"!==e.color.toRgbString()&&(e.value=e.color[h[e.type]]())},e.changeValue=function(){e.color=o(e.value),e.$broadcast("mdColorPicker:colorSet",{color:e.color})},e.$watch("color._a",function(t){e.color.setAlpha(t)},!0),e.$watch("whichPane",function(t){e.$broadcast("mdColorPicker:colorSet",{color:e.color})}),e.$watch("type",function(){d.removeClass("switch"),r(function(){d.addClass("switch")})}),e.$watchGroup(["color.toRgbString()","type"],function(t){e.inputFocus||e.setValue()}),r(function(){e.$broadcast("mdColorPicker:colorSet",{color:e.color}),d.focus(),e.previewFocus()})}],link:function(e,o,l){function a(){var r=t.element(o[0].querySelector(".md-color-picker-palette")),l=t.element(o[0].querySelector(".md-color-picker-material-palette")),a=t.element('<div class="flex-15 layout-fill layout-row layout-align-space-between" layout-align="space-between" layout="row" layout-fill"></div>'),n=t.element('<div class="flex-10"></div>'),i=t.element('<div class="md-color-picker-material-title"></div>'),c=t.element('<div class="md-color-picker-with-label"></div>');t.forEach(e.palette,function(o,l){var i=a.clone();t.forEach(o,function(t){var o=n.clone();o.css({height:"25.5px",backgroundColor:t}),o.bind("click",e.setPaletteColor),i.append(o)}),r.append(i)}),t.forEach(e.materialPalette,function(o,r){var a=i.clone();a.html("<span>"+r.replace("-"," ")+"</span>"),a.css({height:"75px",backgroundColor:"rgb("+o[500].value[0]+","+o[500].value[1]+","+o[500].value[2]+")"}),e.isDark(o[500].value)&&a.addClass("dark"),l.append(a),t.forEach(o,function(t,o){var r=c.clone();r.css({height:"33px",backgroundColor:"rgb("+t.value[0]+","+t.value[1]+","+t.value[2]+")"}),e.isDark(t.value)&&r.addClass("dark"),r.html("<span>"+o+"</span>"),r.bind("click",e.setPaletteColor),l.append(r)})})}o[0].getElementsByTagName("md-tab");r(function(){a()})}}}]).directive("mdColorPickerHue",[function(){return{template:'<canvas width="100%" height="100%"></canvas><div class="md-color-picker-marker"></div>',link:a.get,controller:function(){}}}]).directive("mdColorPickerAlpha",[function(){return{template:'<canvas width="100%" height="100%"></canvas><div class="md-color-picker-marker"></div>',link:n.get,controller:function(){}}}]).directive("mdColorPickerSpectrum",[function(){return{template:'<canvas width="100%" height="100%"></canvas><div class="md-color-picker-marker"></div>{{hue}}',link:i.get,controller:function(){}}}]).factory("$mdColorPicker",["$q","$mdDialog","mdColorPickerHistory",function(e,t,l){var a;return{show:function(e){return e===r&&(e={}),e.hasBackdrop=e.hasBackdrop===r?!0:e.hasBackdrop,e.clickOutsideToClose=e.clickOutsideToClose===r?!0:e.clickOutsideToClose,e.defaultValue=e.defaultValue===r?"#FFFFFF":e.defaultValue,e.focusOnOpen=e.focusOnOpen===r?!1:e.focusOnOpen,e.preserveScope=e.preserveScope===r?!0:e.preserveScope,e.skipHide=e.skipHide===r?!0:e.skipHide,e.mdColorAlphaChannel=e.mdColorAlphaChannel===r?!1:e.mdColorAlphaChannel,e.mdColorSpectrum=e.mdColorSpectrum===r?!0:e.mdColorSpectrum,e.mdColorSliders=e.mdColorSliders===r?!0:e.mdColorSliders,e.mdColorGenericPalette=e.mdColorGenericPalette===r?!0:e.mdColorGenericPalette,e.mdColorMaterialPalette=e.mdColorMaterialPalette===r?!0:e.mdColorMaterialPalette,e.mdColorHistory=e.mdColorHistory===r?!0:e.mdColorHistory,a=t.show({templateUrl:"mdColorPickerDialog.tpl.html",hasBackdrop:e.hasBackdrop,clickOutsideToClose:e.clickOutsideToClose,controller:["$scope","options",function(e,o){e.close=function(){t.cancel()},e.ok=function(){t.hide(e.value)},e.hide=e.ok,e.value=o.value,e["default"]=o.defaultValue,e.random=o.random,e.mdColorAlphaChannel=o.mdColorAlphaChannel,e.mdColorSpectrum=o.mdColorSpectrum,e.mdColorSliders=o.mdColorSliders,e.mdColorGenericPalette=o.mdColorGenericPalette,e.mdColorMaterialPalette=o.mdColorMaterialPalette,e.mdColorHistory=o.mdColorHistory,e.mdColorDefaultTab=o.mdColorDefaultTab}],locals:{options:e},preserveScope:e.preserveScope,skipHide:e.skipHide,targetEvent:e.$event,focusOnOpen:e.focusOnOpen,autoWrap:!1,onShowing:function(){},onComplete:function(){}}),a.then(function(e){l.add(new o(e))},function(){}),a},hide:function(){return a.hide()},cancel:function(){return a.cancel()}}}])}(t,t.angular),e.module("mdColorPicker").run(["$templateCache",function(e){e.put("mdColorPicker.tpl.html",'<div class="md-color-picker-input-container" layout="row">\n <div class="md-color-picker-preview md-color-picker-checkered-bg" ng-click="showColorPicker($event)" ng-if="mdColorPreview">\n <div class="md-color-picker-result" ng-style="{background: value}"></div>\n </div>\n <md-input-container flex>\n <label><md-icon ng-if="icon">{{icon}}</md-icon>{{label}}</label>\n <input type="input" ng-model="value" class=\'md-color-picker-input\' ng-mousedown="(openOnInput || !mdColorPreview) && showColorPicker($event)"/>\n </md-input-container>\n <md-button class="md-icon-button md-color-picker-clear" ng-if="mdColorClearButton && value" ng-click="clearValue();" aria-label="Clear Color">\n <md-icon md-svg-icon="clear.svg"></md-icon>\n </md-button>\n</div>\n'),e.put("mdColorPickerContainer.tpl.html",'<div class="md-color-picker-container in" layout="column">\n <div class="md-color-picker-arrow" ng-style="{\'border-bottom-color\': color.toRgbString() }"></div>\n\n <div class="md-color-picker-preview md-color-picker-checkered-bg" ng-class="{\'dark\': !color.isDark() || color.getAlpha() < .45}" flex="1" layout="column">\n\n <div class="md-color-picker-result" ng-style="{\'background\': color.toRgbString()}" flex="100" layout="column" layout-fill layout-align="center center" ng-click="focusPreviewInput( $event )">\n <!--<span flex layout="column" layout-align="center center">{{value}}</span>-->\n <div flex layout="row" layout-align="center center">\n <input class="md-color-picker-preview-input" type="text" ng-model="value" ng-focus="previewFocus($event);" ng-blur="previewBlur()" ng-change="changeValue()" ng-keypress="previewKeyDown($event)" layout-fill />\n </div>\n <div class="md-color-picker-tabs" style="width: 100%">\n <md-tabs md-selected="type" md-stretch-tabs="always" md-no-bar md-no-ink md-no-pagination="true" >\n <md-tab label="Hex" ng-disabled="color.getAlpha() !== 1" md-ink-ripple="#ffffff"></md-tab>\n <md-tab label="RGB"></md-tab>\n <md-tab label="HSL"></md-tab>\n <!--<md-tab label="HSV"></md-tab>\n <md-tab label="VEC"></md-tab>-->\n </md-tabs>\n </div>\n </div>\n </div>\n\n <div class="md-color-picker-tabs md-color-picker-colors">\n <md-tabs md-stretch-tabs="always" md-align-tabs="bottom" md-selected="whichPane" md-no-pagination>\n <md-tab ng-if="mdColorSpectrum">\n <md-tab-label>\n <md-icon md-svg-icon="gradient.svg"></md-icon>\n </md-tab-label>\n <md-tab-body>\n <div layout="row" layout-align="space-between" style="height: 255px">\n <div md-color-picker-spectrum></div>\n <div md-color-picker-hue ng-class="{\'md-color-picker-wide\': !mdColorAlphaChannel}"></div>\n <div md-color-picker-alpha class="md-color-picker-checkered-bg" ng-if="mdColorAlphaChannel"></div>\n </div>\n </md-tab-body>\n </md-tab>\n <md-tab ng-if="mdColorSliders">\n <md-tab-label>\n <md-icon md-svg-icon="tune.svg"></md-icon>\n </md-tab-label>\n <md-tab-body>\n <div layout="column" flex="100" layout-fill layout-align="space-between start center" class="md-color-picker-sliders">\n <div layout="row" layout-align="start center" layout-wrap flex layout-fill>\n <div flex="10" layout layout-align="center center">\n <span class="md-body-1">R</span>\n </div>\n <md-slider flex="65" min="0" max="255" ng-model="color._r" aria-label="red" class="red-slider"></md-slider>\n <span flex></span>\n <div flex="20" layout layout-align="center center">\n <input style="width: 100%;" min="0" max="255" type="number" ng-model="color._r" aria-label="red" aria-controls="red-slider">\n </div>\n </div>\n <div layout="row" layout-align="start center" layout-wrap flex layout-fill>\n <div flex="10" layout layout-align="center center">\n <span class="md-body-1">G</span>\n </div>\n <md-slider flex="65" min="0" max="255" ng-model="color._g" aria-label="green" class="green-slider"></md-slider>\n <span flex></span>\n <div flex="20" layout layout-align="center center">\n <input style="width: 100%;" min="0" max="255" type="number" ng-model="color._g" aria-label="green" aria-controls="green-slider">\n </div>\n </div>\n <div layout="row" layout-align="start center" layout-wrap flex layout-fill>\n <div flex="10" layout layout-align="center center">\n <span class="md-body-1">B</span>\n </div>\n <md-slider flex="65" min="0" max="255" ng-model="color._b" aria-label="blue" class="blue-slider"></md-slider>\n <span flex></span>\n <div flex="20" layout layout-align="center center" >\n <input style="width: 100%;" min="0" max="255" type="number" ng-model="color._b" aria-label="blue" aria-controls="blue-slider">\n </div>\n </div>\n <div layout="row" layout-align="start center" layout-wrap flex layout-fill ng-if="!mdColorAlphaChannel">\n <div flex="10" layout layout-align="center center">\n <span class="md-body-1">A</span>\n </div>\n <md-slider flex="65" min="0" max="1" step=".01" ng-model="color._a" aria-label="alpha" class="md-primary"></md-slider>\n <span flex></span>\n <div flex="20" layout layout-align="center center" >\n <input style="width: 100%;" min="0" max="1" step=".01" type="number" ng-model="color._a" aria-label="alpha" aria-controls="alpha-slider">\n </div>\n </div>\n </div>\n </md-tab-body>\n </md-tab>\n <md-tab ng-if="mdColorGenericPalette">\n <md-tab-label>\n <md-icon md-svg-icon="view_module.svg"></md-icon>\n </md-tab-label>\n <md-tab-body>\n <div layout="column" layout-align="space-between start center" flex class="md-color-picker-palette">\n\n </div>\n </md-tab-body>\n </md-tab>\n <md-tab ng-if="mdColorMaterialPalette">\n <md-tab-label>\n <md-icon md-svg-icon="view_headline.svg"></md-icon>\n </md-tab-label>\n <md-tab-body>\n <div layout="column" layout-fill flex class="md-color-picker-material-palette">\n\n </div>\n </md-tab-body>\n </md-tab>\n <md-tab ng-if="mdColorHistory">\n <md-tab-label>\n <md-icon md-svg-icon="history.svg"></md-icon>\n </md-tab-label>\n <md-tab-body layout="row" layout-fill>\n <div layout="column" flex layout-align="space-between start" layout-wrap layout-fill class="md-color-picker-history">\n <div layout="row" flex="80" layout-align="space-between start start" layout-wrap layout-fill>\n <div flex="10" ng-repeat="historyColor in history.get() track by $index">\n <div ng-style="{\'background\': historyColor.toRgbString()}" ng-click="setPaletteColor($event)"></div>\n </div>\n </div>\n\n\n <md-button flex-end ng-click="history.reset()" class="md-mini" aria-label="Clear History">\n <md-icon md-svg-icon="clear_all.svg"></md-icon>\n </md-button>\n </div>\n </md-tab-body>\n </md-tab>\n </md-tabs>\n </div>\n\n</div>\n'),e.put("mdColorPickerDialog.tpl.html",'<md-dialog class="md-color-picker-dialog">\n <div md-color-picker-container\n value="value"\n default="{{defaultValue}}"\n random="{{random}}"\n ok="ok"\n md-color-alpha-channel="mdColorAlphaChannel"\n md-color-spectrum="mdColorSpectrum"\n md-color-sliders="mdColorSliders"\n md-color-generic-palette="mdColorGenericPalette"\n md-color-material-palette="mdColorMaterialPalette"\n md-color-history="mdColorHistory"\n md-color-default-tab="mdColorDefaultTab"\n ></div>\n <md-actions layout="row">\n <md-button class="md-mini" ng-click="close()" style="width: 50%;">Cancel</md-button>\n <md-button class="md-mini" ng-click="ok()" style="width: 50%;">Select</md-button>\n </md-actions>\n</md-dialog>\n')}])}(angular,window,tinycolor);