material-theme-util
Version:
Angular Material 10+ Helper Utility for managing Theme colors dynamically, and creating color palettes from single colors.
2 lines • 17.8 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("@angular/forms"),require("@angular/platform-browser/animations"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("material-theme-util",["exports","@angular/core","@angular/forms","@angular/platform-browser/animations","@angular/platform-browser"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self)["material-theme-util"]={},e.ng.core,e.ng.forms,e.ng.platformBrowser.animations,e.ng.platformBrowser)}(this,(function(e,r,t,i,n){"use strict";var o=function(){function e(e){this.str=e}return e.prototype.parse=function(){return this.str},e}();var s=function(){function e(e,r,t){this.h=e,this.s=r,this.l=t}return e.prototype.parse=function(){return"hsl("+this.h+", "+this.s+", "+this.l+")"},e}();var a=function(){function e(e,r,t){this.r=e,this.g=r,this.b=t}return e.prototype.parse=function(){return"rgb("+this.r+", "+this.g+", "+this.b+")"},e}();var p={HEX:{PARSE:/^#?([a-fA-F0-9]{1,2})([a-fA-F0-9]{1,2})([a-fA-F0-9]{1,2})$/i,TEST:"^#?(([a-fA-F0-9]{2}){3}|([a-fA-F0-9]{1}){3})$"}},l=function(e){var r=function(e){var r=e.toString(16);return 1===r.length?"0"+r:r},t=r(e.r),i=r(e.g),n=r(e.b);return new o("#"+t+i+n)},c=function(e){var r=0,t=0,i=0,n=e.r/=255,o=e.g/=255,a=e.b/=255,p=Math.min(n,o,a),l=Math.max(n,o,a),c=l-p;return r=0==c?0:l==n?(o-a)/c%6:l==o?(a-n)/c+2:(n-o)/c+4,(r=Math.round(60*r))<0&&(r+=360),i=(l+p)/2,t=+(100*(t=0===c?0:c/(1-Math.abs(2*i-1)))).toFixed(1),i=+(100*i).toFixed(1),new s(r,t,i)},u=l,d=c,g=function(e){var r,t,i,n=p.HEX.PARSE.exec(e.parse());return n&&(r=parseInt(n[1],16),t=parseInt(n[2],16),i=parseInt(n[3],16)),new a(r,t,i)},h=function(e){var r=g(e);return d(r)},b=function(e){return new RegExp(p.HEX.TEST).test(e)},f=g,m=h,y=b,w=function(e){var r=e.h,t=e.s/100,i=e.l/100,n=(1-Math.abs(2*i-1))*t,o=n*(1-Math.abs(r/60%2-1)),s=i-n/2,p=0,l=0,c=0;return 0<=r&&r<60?(p=n,l=o,c=0):60<=r&&r<120?(p=o,l=n,c=0):120<=r&&r<180?(p=0,l=n,c=o):180<=r&&r<240?(p=0,l=o,c=n):240<=r&&r<300?(p=o,l=0,c=n):300<=r&&r<360&&(p=n,l=0,c=o),p=Math.round(255*(p+s)),l=Math.round(255*(l+s)),c=Math.round(255*(c+s)),new a(p,l,c)},k=function(e){var r=w(e);return u(r)},v=w,x=k,P="P",_="A",S="W",A="HEX",T="RGB",M="HSL",E=function(){function e(e){e instanceof o||e instanceof a||e instanceof s?this.set(e):this.parseStr(e)}return Object.defineProperty(e.prototype,"RGB",{get:function(){return this._rgb},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"HEX",{get:function(){return this._hex},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"HSL",{get:function(){return this._hsl},enumerable:!1,configurable:!0}),e.prototype.get=function(e){if(void 0===e&&(e=A),e===A)return this.HEX;if(e===T)return this.RGB;if(e===M)return this.HSL;throw"Invalid type for color."},e.prototype.toStr=function(e){if(void 0===e&&(e=A),e===A)return this.HEX.parse();if(e===T)return this.RGB.parse();if(e===M)return this.HSL.parse();throw"Invalid type for color."},e.prototype.parseStr=function(e){var r;y(e)&&(r=new o(e)),this.set(r)},e.prototype.set=function(e){if(e instanceof o)this._hex=e,this._rgb=f(e),this._hsl=m(e);else if(e instanceof a)this._hex=u(e),this._rgb=e,this._hsl=d(e);else{if(!(e instanceof s))throw"Invalid input format for color.";this._hex=x(e),this._rgb=v(e),this._hsl=e}},e}();var C=function(e,r){var t=this;if(this.colorMap=e,this.type=r,this.themeContainer=document.querySelector("body"),this.assignPalette=function(e){void 0===e&&(e=A);var r=t.paletteType,i=t.themeContainer;if(!i)throw"No body element found!";i.style.setProperty("--"+r+"-50",t._50.toStr(e)),i.style.setProperty("--"+r+"-100",t._100.toStr(e)),i.style.setProperty("--"+r+"-200",t._200.toStr(e)),i.style.setProperty("--"+r+"-300",t._300.toStr(e)),i.style.setProperty("--"+r+"-400",t._400.toStr(e)),i.style.setProperty("--"+r+"-500",t._500.toStr(e)),i.style.setProperty("--"+r+"-600",t._600.toStr(e)),i.style.setProperty("--"+r+"-700",t._700.toStr(e)),i.style.setProperty("--"+r+"-800",t._800.toStr(e)),i.style.setProperty("--"+r+"-900",t._900.toStr(e)),i.style.setProperty("--"+r+"-A100",t._A100.toStr(e)),i.style.setProperty("--"+r+"-A200",t._A200.toStr(e)),i.style.setProperty("--"+r+"-A400",t._A400.toStr(e)),i.style.setProperty("--"+r+"-A700",t._A700.toStr(e))},!this.type)throw"No Palette type has been set.";if(this.paletteType=r,!(this.colorMap&&this.colorMap.length>0))throw"Palette could not be generated.";this.colorMap.map((function(e){t["_"+e.ref]=e.value}))};var O=function(e,r){var t=this;this.color=e,this.type=r,this.buildPalette=function(){return t.generatePalette(t.color)},this.generatePalette=function(e){var r=e.HSL,i=Math.round(r.h),n=Math.round(r.s),o=Math.round(r.l);if(isNaN(i)||isNaN(n)||isNaN(o))throw new TypeError("Invalid input");if(i<0||i>360)throw new RangeError("Hue must be an integer within [0, 360]; given "+i+"%");if(n<0||n>100)throw new RangeError("Saturation must be an integer within [0, 100]; given "+n+"%");if(o<0||o>100)throw new RangeError("Lightness must be an integer within [0, 100]; given "+o);var a=t.generateAlterations(o).map((function(e){var r=new E(new s(i,n,e.value));return{ref:e.ref,value:r}}));return new C(a,t.type)},this.minimax=function(e){return Math.min(100,Math.max(0,e))},this.generateAlterations=function(e){return[{ref:"50",value:t.minimax(e+52)},{ref:"100",value:t.minimax(e+37)},{ref:"200",value:t.minimax(e+26)},{ref:"300",value:t.minimax(e+12)},{ref:"400",value:t.minimax(e+6)},{ref:"500",value:e},{ref:"600",value:t.minimax(e-6)},{ref:"700",value:t.minimax(e-12)},{ref:"800",value:t.minimax(e-18)},{ref:"900",value:t.minimax(e-24)},{ref:"A100",value:t.minimax(e+24)},{ref:"A200",value:t.minimax(e+16)},{ref:"A400",value:t.minimax(e-1)},{ref:"A700",value:t.minimax(e-12)}]}};var j="#023057",I="#c1c5c8",R="#ff0000",H=function(){function e(e,r,t){this.p=e,this.a=r,this.w=t,this.setPrimary(e),this.setAccent(r),this.setWarn(t)}return e.prototype.setPrimary=function(e){void 0===e&&(e=j),this.primary=new E(e),this.buildPalette(this.primary,P)},e.prototype.setAccent=function(e){void 0===e&&(e=I),this.accent=new E(e),this.buildPalette(this.accent,_)},e.prototype.setWarn=function(e){void 0===e&&(e=R),this.warn=new E(e),this.buildPalette(this.warn,S)},e.prototype.buildPalette=function(e,r){new O(e,r).buildPalette().assignPalette()},e}();var B=function(){function e(){}return e.prototype.initTheme=function(e,r,t){this.colorTheme=new H(e,r,t)},e.prototype.setPrimaryPalette=function(e){this.colorTheme.setPrimary(e)},e.prototype.setAccentPalette=function(e){this.colorTheme.setAccent(e)},e.prototype.setWarnPalette=function(e){this.colorTheme.setWarn(e)},e}();B.decorators=[{type:r.Injectable,args:[{providedIn:"root"}]}],B.ɵprov=r.ɵɵdefineInjectable({factory:function(){return new B},token:B,providedIn:"root"});var F=function(){function e(e){this.theme=e}return Object.defineProperty(e.prototype,"value",{get:function(){return this.themeStr()},set:function(e){e&&e!==this.themeStr()&&(this.writeValue(e),this.chgFn(e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"primary",{get:function(){return this._primary},set:function(e){this._primary=e,this.theme.setPrimaryPalette(e),this.updateTheme()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"accent",{get:function(){return this._accent},set:function(e){this._accent=e,this.theme.setAccentPalette(e),this.updateTheme()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"warn",{get:function(){return this._warn},set:function(e){this._warn=e,this.theme.setWarnPalette(e),this.updateTheme()},enumerable:!1,configurable:!0}),e.prototype.updateTheme=function(){this.chgFn(this.themeStr())},e.prototype.themeStr=function(){var e={primary:this._primary,accent:this._accent,warn:this._warn};return new X(e)},e.prototype.writeValue=function(e){this.isObjectInput="object"==typeof e;var r=new X(e);this._primary=r.primary,this._accent=r.accent,this._warn=r.warn},e.prototype.registerOnChange=function(e){var r=this;this.chgFn=function(t){var i=r.isObjectInput?t:JSON.stringify(t);e(i)}},e.prototype.registerOnTouched=function(e){},Object.defineProperty(e.prototype,"colorCode",{get:function(){return this._colorCode},enumerable:!1,configurable:!0}),e}();F.decorators=[{type:r.Component,args:[{selector:"mat-palette-picker",template:'<div class="col3-xl col3-lg col3-md col2-sm col2-xs">\n <app-color-picker\n paletteType="Primary"\n [(ngModel)]="primary"\n ></app-color-picker>\n <app-color-picker\n paletteType="Accent"\n [(ngModel)]="accent"\n ></app-color-picker>\n <app-color-picker paletteType="Warn" [(ngModel)]="warn"></app-color-picker>\n</div>\n',providers:[{provide:t.NG_VALUE_ACCESSOR,useExisting:r.forwardRef((function(){return F})),multi:!0}]}]}],F.ctorParameters=function(){return[{type:B}]},F.propDecorators={colorCode:[{type:r.Input,args:["colorCode"]}]};var N="#D3D3D3",G="#5D5D5D",z="#ff0000",X=function(){function e(e){this.primary=N,this.accent=G,this.warn=z,e&&("string"==typeof e?this.parseObj(JSON.parse(e)):this.parseObj(e))}return e.prototype.parseObj=function(e){e&&(this.primary=e.primary?e.primary:N,this.accent=e.accent?e.accent:G,this.warn=e.warn?e.warn:z)},e}();var D=function(){function e(){this.regex=p.HEX.TEST,this.parseHex=function(e){if(null!=e){"string"==typeof e&&(e=parseInt(e));var r=e.toString(16);return r.length>1?r:""+r+r}return"FF"}}return Object.defineProperty(e.prototype,"hexColor",{get:function(){var e=this.parseHex(this.red),r=this.parseHex(this.green),t=this.parseHex(this.blue);return this._hexColor=(""+e+r+t).toUpperCase(),this._hexColor},set:function(e){this._staging=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"rgb",{get:function(){return"rgb("+this.red+", "+this.green+", "+this.blue+")"},enumerable:!1,configurable:!0}),e.prototype.setRGB=function(){var e=this;setTimeout((function(){e.updateRGB(e._staging)}),1500)},e.prototype.updateRGB=function(e){var r=function(e){return parseInt(e,16)};if(new RegExp(p.HEX.TEST).test(e)){this._hexColor=e;var t=p.HEX.PARSE.exec(e);this.red=r(t[1]),this.green=r(t[2]),this.blue=r(t[3])}},e.prototype.previewPalette=function(){this.onChg(this.hexColor)},e.prototype.writeValue=function(e){this.updateRGB(e)},e.prototype.registerOnChange=function(e){this.onChg=function(r){var t=r;-1===r.indexOf("#")&&(t="#"+t),e(t)}},e.prototype.registerOnTouched=function(e){},e}();D.decorators=[{type:r.Component,args:[{selector:"app-color-picker",template:'<div class="rgb-picker">\n <div class="sliders">\n <h2 class="mat-h2 margin-unset">\n {{ paletteType }}\n </h2>\n <div class="red-slider short-slider">\n <input #redSlider [(ngModel)]="red" type="range" max="255" />\n </div>\n <div class="green-slider short-slider">\n <input #greenSlider [(ngModel)]="green" type="range" max="255" />\n </div>\n <div class="blue-slider short-slider">\n <input #blueSlider [(ngModel)]="blue" type="range" max="255" />\n </div>\n <div class="hex-input-container">\n #\n <input\n type="text"\n class="hex-input"\n #hexInput\n [(ngModel)]="hexColor"\n (keyup)="setRGB()"\n (click)="hexInput.focus(); hexInput.select()"\n />\n </div>\n </div>\n <div class="preview-container">\n <div class="color-preview" [style.backgroundColor]="rgb"></div>\n <button type="button" mat-stroked-button (click)="previewPalette()">\n Preview\n </button>\n </div>\n</div>\n',providers:[{provide:t.NG_VALUE_ACCESSOR,useExisting:r.forwardRef((function(){return D})),multi:!0}],styles:[".rgb-picker{-ms-grid-columns:2fr auto;border-radius:5px;box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);display:-ms-grid;display:grid;grid-column-gap:1rem;grid-template-columns:2fr auto;padding:16px;position:relative;transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.rgb-picker .sliders{-ms-grid-rows:(minmax(auto 1fr))[4];display:-ms-grid;display:grid;grid-template-rows:repeat(4,minmax(auto 1fr));row-gap:1rem}.rgb-picker .sliders .red-slider input[type=range]::-webkit-slider-runnable-track{background:#cdcdcd}.rgb-picker .sliders .red-slider input[type=range]::-webkit-slider-thumb{background:#f30}.rgb-picker .sliders .red-slider input[type=range]:focus::-webkit-slider-runnable-track{background:#cdcdcd}.rgb-picker .sliders .red-slider input[type=range]::-moz-range-track{background:#cdcdcd}.rgb-picker .sliders .red-slider input[type=range]::-moz-range-thumb{background:#f30}.rgb-picker .sliders .red-slider input[type=range]::-ms-fill-lower,.rgb-picker .sliders .red-slider input[type=range]::-ms-fill-upper{background:#cdcdcd}.rgb-picker .sliders .red-slider input[type=range]::-ms-thumb{background:#f30}.rgb-picker .sliders .red-slider input[type=range]:focus::-ms-fill-lower,.rgb-picker .sliders .red-slider input[type=range]:focus::-ms-fill-upper{background:#cdcdcd}.rgb-picker .sliders .green-slider input[type=range]::-webkit-slider-runnable-track{background:#cdcdcd}.rgb-picker .sliders .green-slider input[type=range]::-webkit-slider-thumb{background:#3c3}.rgb-picker .sliders .green-slider input[type=range]:focus::-webkit-slider-runnable-track{background:#cdcdcd}.rgb-picker .sliders .green-slider input[type=range]::-moz-range-track{background:#cdcdcd}.rgb-picker .sliders .green-slider input[type=range]::-moz-range-thumb{background:#3c3}.rgb-picker .sliders .green-slider input[type=range]::-ms-fill-lower,.rgb-picker .sliders .green-slider input[type=range]::-ms-fill-upper{background:#cdcdcd}.rgb-picker .sliders .green-slider input[type=range]::-ms-thumb{background:#3c3}.rgb-picker .sliders .green-slider input[type=range]:focus::-ms-fill-lower,.rgb-picker .sliders .green-slider input[type=range]:focus::-ms-fill-upper{background:#cdcdcd}.rgb-picker .sliders .blue-slider input[type=range]::-webkit-slider-runnable-track{background:#cdcdcd}.rgb-picker .sliders .blue-slider input[type=range]::-webkit-slider-thumb{background:#369}.rgb-picker .sliders .blue-slider input[type=range]:focus::-webkit-slider-runnable-track{background:#cdcdcd}.rgb-picker .sliders .blue-slider input[type=range]::-moz-range-track{background:#cdcdcd}.rgb-picker .sliders .blue-slider input[type=range]::-moz-range-thumb{background:#369}.rgb-picker .sliders .blue-slider input[type=range]::-ms-fill-lower,.rgb-picker .sliders .blue-slider input[type=range]::-ms-fill-upper{background:#cdcdcd}.rgb-picker .sliders .blue-slider input[type=range]::-ms-thumb{background:#369}.rgb-picker .sliders .blue-slider input[type=range]:focus::-ms-fill-lower,.rgb-picker .sliders .blue-slider input[type=range]:focus::-ms-fill-upper{background:#cdcdcd}.rgb-picker .sliders .short-slider input[type=range]{-webkit-appearance:none;margin:0;padding:0;width:100%}.rgb-picker .sliders .short-slider input[type=range]::-webkit-slider-runnable-track{border:none;height:3px;width:100%}.rgb-picker .sliders .short-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;border-radius:50%;cursor:pointer;height:10px;margin-top:-4px;width:10px}.rgb-picker .sliders .short-slider input[type=range]:focus{outline:none}.rgb-picker .sliders .short-slider input[type=range]::-moz-range-track{border:none;height:2px;width:100%}.rgb-picker .sliders .short-slider input[type=range]::-moz-range-thumb{border:none;border-radius:50%;cursor:pointer;height:10px;width:10px}.rgb-picker .sliders .short-slider input[type=range]::-ms-fill-lower,.rgb-picker .sliders .short-slider input[type=range]::-ms-fill-upper{border-radius:10px}.rgb-picker .sliders .short-slider input[type=range]::-ms-thumb{border:none;cursor:pointer;height:10px;margin-top:-1px;width:10x}.rgb-picker .sliders .short-slider input[type=range]::-ms-track{background:transparent;border-color:transparent;border-width:2px 0;color:transparent;height:4px;overflow:visible;width:100%}.rgb-picker .sliders .hex-input-container{-ms-grid-columns:auto 1fr;display:-ms-grid;display:grid;grid-column-gap:3px;grid-template-columns:auto 1fr}.rgb-picker .sliders .hex-input-container .hex-input{-webkit-animation-name:cdk-text-field-autofill-end;-webkit-appearance:none;-webkit-rtl-ordering:logical;-webkit-writing-mode:horizontal-tb!important;animation-name:cdk-text-field-autofill-end;background:0 0;background-color:#fff;border-bottom:1px solid grey;border-image-outset:0;border-image-repeat:initial;border-image-slice:100%;border-image-source:none;border-image-width:1;border-left-color:initial;border-left-style:none;border-left-width:medium;border-right-color:initial;border-right-style:none;border-right-width:medium;border-top-color:initial;border-top-style:none;border-top-width:medium;caret-color:var(--P-500);color:currentColor;cursor:text;display:inline-block;font:inherit;letter-spacing:normal;margin:0;max-width:100%;outline:0;padding:0 0 .25rem;text-align:inherit;text-indent:0;text-rendering:auto;text-shadow:none;text-transform:none;vertical-align:bottom;width:100%;word-spacing:normal}.rgb-picker .preview-container{-ms-grid-rows:1fr auto;display:-ms-grid;display:grid;grid-row-gap:1rem;grid-template-rows:1fr auto}.rgb-picker .preview-container .color-preview{border:1px solid #d3d3d3;border-radius:50%;height:75px;margin-top:.25rem;width:75px}"]}]},{type:r.Injectable}],D.propDecorators={paletteType:[{type:r.Input,args:["paletteType"]}]};var L=function(){};L.decorators=[{type:r.NgModule,args:[{declarations:[F,D],imports:[t.FormsModule,i.BrowserAnimationsModule,n.BrowserModule,t.ReactiveFormsModule],exports:[F,D]}]},{type:r.Injectable}],e.BaseTheme=X,e.PalettePickerComponent=F,e.ThemeUtilModule=L,e.ThemeUtilService=B,e.ɵa=D,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=material-theme-util.umd.min.js.map