material-theme-util
Version:
Angular Material 10+ Helper Utility for managing Theme colors dynamically, and creating color palettes from single colors.
1,367 lines (1,352 loc) • 39.8 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, Component, forwardRef, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* Generated from: globalizer/color-models/color-format.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class Hex {
/**
* @param {?} str
*/
constructor(str) {
this.str = str;
}
/**
* @return {?}
*/
parse() {
return this.str;
}
}
if (false) {
/**
* @type {?}
* @private
*/
Hex.prototype.str;
}
class HSL {
/**
* @param {?=} h
* @param {?=} s
* @param {?=} l
*/
constructor(h, s, l) {
this.h = h;
this.s = s;
this.l = l;
}
/**
* @return {?}
*/
parse() {
return `hsl(${this.h}, ${this.s}, ${this.l})`;
}
}
if (false) {
/** @type {?} */
HSL.prototype.h;
/** @type {?} */
HSL.prototype.s;
/** @type {?} */
HSL.prototype.l;
}
class RGB {
/**
* @param {?=} r
* @param {?=} g
* @param {?=} b
*/
constructor(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
/**
* @return {?}
*/
parse() {
return `rgb(${this.r}, ${this.g}, ${this.b})`;
}
}
if (false) {
/** @type {?} */
RGB.prototype.r;
/** @type {?} */
RGB.prototype.g;
/** @type {?} */
RGB.prototype.b;
}
/**
* @fileoverview added by tsickle
* Generated from: globalizer/color-models/formater.util.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const REGEX = {
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})$`
}
}
/*
RGB Utilities
=====================================================
=====================================================
*/
;
/*
RGB Utilities
=====================================================
=====================================================
*/
/** @type {?} */
const rgb2Hex = (/**
* @param {?} rgb
* @return {?}
*/
(rgb) => {
/** @type {?} */
const parseHex = (/**
* @param {?} v
* @return {?}
*/
v => {
/** @type {?} */
const hex = v.toString(16);
return hex.length === 1 ? `0${hex}` : hex;
});
/** @type {?} */
const _r = parseHex(rgb.r);
/** @type {?} */
const _g = parseHex(rgb.g);
/** @type {?} */
const _b = parseHex(rgb.b);
return new Hex(`#${_r}${_g}${_b}`);
});
const ɵ0 = rgb2Hex;
/** @type {?} */
const rgb2Hsl = (/**
* @param {?} rgb
* @return {?}
*/
(rgb) => {
/** @type {?} */
let h = 0;
/** @type {?} */
let s = 0;
/** @type {?} */
let l = 0;
// Make r, g, and b fractions of 1
/** @type {?} */
const _r = (rgb.r /= 255);
/** @type {?} */
const _g = (rgb.g /= 255);
/** @type {?} */
const _b = (rgb.b /= 255);
// Find greatest and smallest channel values
/** @type {?} */
const cmin = Math.min(_r, _g, _b);
/** @type {?} */
const cmax = Math.max(_r, _g, _b);
/** @type {?} */
const delta = cmax - cmin;
if (delta == 0)
h = 0;
// Red is max
else if (cmax == _r)
h = ((_g - _b) / delta) % 6;
// Green is max
else if (cmax == _g)
h = (_b - _r) / delta + 2;
// Blue is max
else
h = (_r - _g) / delta + 4;
h = Math.round(h * 60);
// Make negative hues positive behind 360°
if (h < 0)
h += 360;
// Calculate lightness
l = (cmax + cmin) / 2;
// Calculate saturation
s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
// Multiply l and s by 100
s = +(s * 100).toFixed(1);
l = +(l * 100).toFixed(1);
return new HSL(h, s, l);
});
const ɵ1 = rgb2Hsl;
/** @type {?} */
const ParseRGB = {
HEX: rgb2Hex,
HSL: rgb2Hsl
};
/*
HEX Utilities
=====================================================
=====================================================
*/
/** @type {?} */
const hex2RGB = (/**
* @param {?} hex
* @return {?}
*/
(hex) => {
/** @type {?} */
let r;
/** @type {?} */
let g;
/** @type {?} */
let b;
/** @type {?} */
const result = REGEX.HEX.PARSE.exec(hex.parse());
if (!!result) {
r = parseInt(result[1], 16);
g = parseInt(result[2], 16);
b = parseInt(result[3], 16);
}
return new RGB(r, g, b);
});
const ɵ2 = hex2RGB;
/** @type {?} */
const hex2Hsl = (/**
* @param {?} hex
* @return {?}
*/
(hex) => {
/** @type {?} */
const rgb = hex2RGB(hex);
return ParseRGB.HSL(rgb);
});
const ɵ3 = hex2Hsl;
/** @type {?} */
const testHex = (/**
* @param {?} str
* @return {?}
*/
str => {
return new RegExp(REGEX.HEX.TEST).test(str);
});
const ɵ4 = testHex;
/** @type {?} */
const ParseHEX = {
RGB: hex2RGB,
HSL: hex2Hsl,
TEST: testHex
};
/*
HSL Utilities
=====================================================
=====================================================
*/
/** @type {?} */
const hsl2RGB = (/**
* @param {?} hsl
* @return {?}
*/
(hsl) => {
// Must be fractions of 1
/** @type {?} */
const h = hsl.h;
/** @type {?} */
const s = hsl.s / 100;
/** @type {?} */
const l = hsl.l / 100;
/** @type {?} */
const c = (1 - Math.abs(2 * l - 1)) * s;
/** @type {?} */
const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
/** @type {?} */
const m = l - c / 2;
/** @type {?} */
let r = 0;
/** @type {?} */
let g = 0;
/** @type {?} */
let b = 0;
if (0 <= h && h < 60) {
r = c;
g = x;
b = 0;
}
else if (60 <= h && h < 120) {
r = x;
g = c;
b = 0;
}
else if (120 <= h && h < 180) {
r = 0;
g = c;
b = x;
}
else if (180 <= h && h < 240) {
r = 0;
g = x;
b = c;
}
else if (240 <= h && h < 300) {
r = x;
g = 0;
b = c;
}
else if (300 <= h && h < 360) {
r = c;
g = 0;
b = x;
}
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
return new RGB(r, g, b);
});
const ɵ5 = hsl2RGB;
/** @type {?} */
const hsl2Hex = (/**
* @param {?} hsl
* @return {?}
*/
(hsl) => {
/** @type {?} */
const rgb = hsl2RGB(hsl);
return ParseRGB.HEX(rgb);
});
const ɵ6 = hsl2Hex;
/** @type {?} */
const ParseHSL = {
RGB: hsl2RGB,
HEX: hsl2Hex
};
/**
* @fileoverview added by tsickle
* Generated from: globalizer/color-models/color.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const ColorType = {
PRIMARY: "P",
ACCENT: "A",
WARN: "W",
};
/** @enum {string} */
const ColorFormat = {
HEX: "HEX",
RGB: "RGB",
HSL: "HSL",
};
class Color {
/**
* @param {?} val
*/
constructor(val) {
if (!(val instanceof Hex) &&
!(val instanceof RGB) &&
!(val instanceof HSL)) {
this.parseStr(val);
}
else {
this.set(val);
}
}
/**
* @return {?}
*/
get RGB() {
return this._rgb;
}
/**
* @return {?}
*/
get HEX() {
return this._hex;
}
/**
* @return {?}
*/
get HSL() {
return this._hsl;
}
/**
* @param {?=} type
* @return {?}
*/
get(type = ColorFormat.HEX) {
if (type === ColorFormat.HEX) {
return this.HEX;
}
else if (type === ColorFormat.RGB) {
return this.RGB;
}
else if (type === ColorFormat.HSL) {
return this.HSL;
}
else {
throw `Invalid type for color.`;
}
}
/**
* @param {?=} type
* @return {?}
*/
toStr(type = ColorFormat.HEX) {
if (type === ColorFormat.HEX) {
return this.HEX.parse();
}
else if (type === ColorFormat.RGB) {
return this.RGB.parse();
}
else if (type === ColorFormat.HSL) {
return this.HSL.parse();
}
else {
throw `Invalid type for color.`;
}
}
/**
* @param {?} str
* @return {?}
*/
parseStr(str) {
/** @type {?} */
const validHex = ParseHEX.TEST(str);
/** @type {?} */
let _color;
if (validHex) {
_color = new Hex(str);
}
this.set(_color);
}
/**
* @param {?} val
* @return {?}
*/
set(val) {
if (val instanceof Hex) {
this._hex = val;
this._rgb = ParseHEX.RGB(val);
this._hsl = ParseHEX.HSL(val);
}
else if (val instanceof RGB) {
this._hex = ParseRGB.HEX(val);
this._rgb = val;
this._hsl = ParseRGB.HSL(val);
}
else if (val instanceof HSL) {
this._hex = ParseHSL.HEX(val);
this._rgb = ParseHSL.RGB(val);
this._hsl = val;
}
else {
throw `Invalid input format for color.`;
}
}
}
if (false) {
/**
* @type {?}
* @protected
*/
Color.prototype._hex;
/**
* @type {?}
* @protected
*/
Color.prototype._rgb;
/**
* @type {?}
* @protected
*/
Color.prototype._hsl;
}
/**
* @fileoverview added by tsickle
* Generated from: globalizer/color-models/palette.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const PaletteType = {
P: "PRIMARY",
A: "ACCENT",
W: "WARN",
};
/**
* @template T
*/
class HueMap {
}
if (false) {
/** @type {?} */
HueMap.prototype.ref;
/** @type {?} */
HueMap.prototype.value;
}
class PaletteModel {
/**
* @param {?} colorMap
* @param {?=} type
*/
constructor(colorMap, type) {
this.colorMap = colorMap;
this.type = type;
this.themeContainer = document.querySelector("body");
// Assigns the value of the palette based on the
// format and palette type (Primary, accent, warn)
// @TODO Make the contrast more dynamic
this.assignPalette = (/**
* @param {?=} format
* @return {?}
*/
(format = ColorFormat.HEX) => {
/** @type {?} */
const t = this.paletteType;
/** @type {?} */
const themeEl = this.themeContainer;
if (!!themeEl) {
themeEl.style.setProperty(`--${t}-50`, this._50.toStr(format));
themeEl.style.setProperty(`--${t}-100`, this._100.toStr(format));
themeEl.style.setProperty(`--${t}-200`, this._200.toStr(format));
themeEl.style.setProperty(`--${t}-300`, this._300.toStr(format));
themeEl.style.setProperty(`--${t}-400`, this._400.toStr(format));
themeEl.style.setProperty(`--${t}-500`, this._500.toStr(format));
themeEl.style.setProperty(`--${t}-600`, this._600.toStr(format));
themeEl.style.setProperty(`--${t}-700`, this._700.toStr(format));
themeEl.style.setProperty(`--${t}-800`, this._800.toStr(format));
themeEl.style.setProperty(`--${t}-900`, this._900.toStr(format));
themeEl.style.setProperty(`--${t}-A100`, this._A100.toStr(format));
themeEl.style.setProperty(`--${t}-A200`, this._A200.toStr(format));
themeEl.style.setProperty(`--${t}-A400`, this._A400.toStr(format));
themeEl.style.setProperty(`--${t}-A700`, this._A700.toStr(format));
}
else {
throw `No body element found!`;
}
});
// Sets Palette type (Primary/accent/warn)
// if it exists
if (!!this.type) {
this.paletteType = type;
}
else {
throw `No Palette type has been set.`;
}
// Sets ColorMap (Primary/accent/warn)
// if it exists
if (!!this.colorMap && this.colorMap.length > 0) {
this.colorMap.map((/**
* @param {?} v
* @return {?}
*/
(v) => {
this[`_${v.ref}`] = v.value;
}));
}
else {
throw `Palette could not be generated.`;
}
}
}
if (false) {
/** @type {?} */
PaletteModel.prototype.themeContainer;
/**
* @type {?}
* @private
*/
PaletteModel.prototype.paletteType;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._50;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._100;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._200;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._300;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._400;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._500;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._600;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._700;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._800;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._900;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._A100;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._A200;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._A400;
/**
* @type {?}
* @private
*/
PaletteModel.prototype._A700;
/** @type {?} */
PaletteModel.prototype.assignPalette;
/**
* @type {?}
* @private
*/
PaletteModel.prototype.colorMap;
/**
* @type {?}
* @private
*/
PaletteModel.prototype.type;
}
class Palette {
/**
* @param {?} color
* @param {?} type
*/
constructor(color, type) {
this.color = color;
this.type = type;
this.buildPalette = (/**
* @return {?}
*/
() => {
return this.generatePalette(this.color);
});
/*
Generates a color palette given a single color.
1. Color is parsed to HSL format
2. Light (HS{L}) is altered for each Palette color
3. Palette is generated with Color Objects (allowing for use in any color format)
*/
this.generatePalette = (/**
* @param {?} color
* @return {?}
*/
(color) => {
/** @type {?} */
const _color = color.HSL;
/** @type {?} */
const h = Math.round(_color.h);
/** @type {?} */
const s = Math.round(_color.s);
/** @type {?} */
const l = Math.round(_color.l);
if (isNaN(h) || isNaN(s) || isNaN(l)) {
throw new TypeError("Invalid input");
}
if (h < 0 || h > 360) {
throw new RangeError(`Hue must be an integer within [0, 360]; given ${h}%`);
}
if (s < 0 || s > 100) {
throw new RangeError(`Saturation must be an integer within [0, 100]; given ${s}%`);
}
if (l < 0 || l > 100) {
throw new RangeError(`Lightness must be an integer within [0, 100]; given ${l}`);
}
/** @type {?} */
const hueMapset = this.generateAlterations(l).map((/**
* @param {?} map
* @return {?}
*/
(map) => {
/** @type {?} */
const _color = new Color(new HSL(h, s, map.value));
return {
ref: map.ref,
value: _color,
};
}));
return new PaletteModel(hueMapset, this.type);
});
// Generates color palette based on the formula
// provided by @leodido (https://github.com/leodido/material-palette)
this.minimax = (/**
* @param {?} val
* @return {?}
*/
(val) => Math.min(100, Math.max(0, val)));
this.generateAlterations = (/**
* @param {?} l
* @return {?}
*/
(l) => [
{
ref: "50",
value: this.minimax(l + 52),
},
{
ref: "100",
value: this.minimax(l + 37),
},
{
ref: "200",
value: this.minimax(l + 26),
},
{
ref: "300",
value: this.minimax(l + 12),
},
{
ref: "400",
value: this.minimax(l + 6),
},
{
ref: "500",
value: l,
},
{
ref: "600",
value: this.minimax(l - 6),
},
{
ref: "700",
value: this.minimax(l - 12),
},
{
ref: "800",
value: this.minimax(l - 18),
},
{
ref: "900",
value: this.minimax(l - 24),
},
{
ref: "A100",
value: this.minimax(l + 24),
},
{
ref: "A200",
value: this.minimax(l + 16),
},
{
ref: "A400",
value: this.minimax(l - 1),
},
{
ref: "A700",
value: this.minimax(l - 12),
},
]);
}
}
if (false) {
/** @type {?} */
Palette.prototype.palette;
/** @type {?} */
Palette.prototype.buildPalette;
/**
* @type {?}
* @private
*/
Palette.prototype.generatePalette;
/**
* @type {?}
* @private
*/
Palette.prototype.minimax;
/**
* @type {?}
* @private
*/
Palette.prototype.generateAlterations;
/**
* @type {?}
* @private
*/
Palette.prototype.color;
/**
* @type {?}
* @private
*/
Palette.prototype.type;
}
/**
* @fileoverview added by tsickle
* Generated from: globalizer/theme-utils/theme.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const DEFAULT_THEME = {
PRIMARY: "#023057",
ACCENT: "#c1c5c8",
WARN: "#ff0000",
};
// Color Theme Class for updating,
// managing the theme style
class Theme {
/**
* @param {?=} p
* @param {?=} a
* @param {?=} w
*/
constructor(p, a, w) {
this.p = p;
this.a = a;
this.w = w;
this.setPrimary(p);
this.setAccent(a);
this.setWarn(w);
}
/**
* @param {?=} color
* @return {?}
*/
setPrimary(color = DEFAULT_THEME.PRIMARY) {
this.primary = new Color(color);
this.buildPalette(this.primary, ColorType.PRIMARY);
}
/**
* @param {?=} color
* @return {?}
*/
setAccent(color = DEFAULT_THEME.ACCENT) {
this.accent = new Color(color);
this.buildPalette(this.accent, ColorType.ACCENT);
}
/**
* @param {?=} color
* @return {?}
*/
setWarn(color = DEFAULT_THEME.WARN) {
this.warn = new Color(color);
this.buildPalette(this.warn, ColorType.WARN);
}
/**
* @private
* @param {?} color
* @param {?} type
* @return {?}
*/
buildPalette(color, type) {
new Palette(color, type).buildPalette().assignPalette();
}
}
if (false) {
/**
* @type {?}
* @private
*/
Theme.prototype.primary;
/**
* @type {?}
* @private
*/
Theme.prototype.accent;
/**
* @type {?}
* @private
*/
Theme.prototype.warn;
/**
* @type {?}
* @private
*/
Theme.prototype.p;
/**
* @type {?}
* @private
*/
Theme.prototype.a;
/**
* @type {?}
* @private
*/
Theme.prototype.w;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/theme-util.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ThemeUtilService {
/**
* @param {?=} primary
* @param {?=} accent
* @param {?=} warn
* @return {?}
*/
initTheme(primary, accent, warn) {
this.colorTheme = new Theme(primary, accent, warn);
}
/**
* @param {?} str
* @return {?}
*/
setPrimaryPalette(str) {
this.colorTheme.setPrimary(str);
}
/**
* @param {?} str
* @return {?}
*/
setAccentPalette(str) {
this.colorTheme.setAccent(str);
}
/**
* @param {?} str
* @return {?}
*/
setWarnPalette(str) {
this.colorTheme.setWarn(str);
}
}
ThemeUtilService.decorators = [
{ type: Injectable, args: [{
providedIn: "root",
},] }
];
/** @nocollapse */ ThemeUtilService.ɵprov = ɵɵdefineInjectable({ factory: function ThemeUtilService_Factory() { return new ThemeUtilService(); }, token: ThemeUtilService, providedIn: "root" });
if (false) {
/**
* @type {?}
* @private
*/
ThemeUtilService.prototype.colorTheme;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/palette-picker.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class PalettePickerComponent {
/**
* @param {?} theme
*/
constructor(theme) {
this.theme = theme;
}
/**
* @return {?}
*/
get value() {
return this.themeStr();
}
/**
* @param {?} v
* @return {?}
*/
set value(v) {
if (!!v && v !== this.themeStr()) {
this.writeValue(v);
this.chgFn(v);
}
}
/**
* @return {?}
*/
get primary() {
return this._primary;
}
/**
* @param {?} str
* @return {?}
*/
set primary(str) {
this._primary = str;
this.theme.setPrimaryPalette(str);
this.updateTheme();
}
/**
* @return {?}
*/
get accent() {
return this._accent;
}
/**
* @param {?} str
* @return {?}
*/
set accent(str) {
this._accent = str;
this.theme.setAccentPalette(str);
this.updateTheme();
}
/**
* @return {?}
*/
get warn() {
return this._warn;
}
/**
* @param {?} str
* @return {?}
*/
set warn(str) {
this._warn = str;
this.theme.setWarnPalette(str);
this.updateTheme();
}
/**
* @return {?}
*/
updateTheme() {
this.chgFn(this.themeStr());
}
/**
* @return {?}
*/
themeStr() {
/** @type {?} */
const theme = {
primary: this._primary,
accent: this._accent,
warn: this._warn
};
return new BaseTheme(theme);
}
/**
* @param {?} str
* @return {?}
*/
writeValue(str) {
this.isObjectInput = typeof str === "object";
/** @type {?} */
const theme = new BaseTheme(str);
this._primary = theme.primary;
this._accent = theme.accent;
this._warn = theme.warn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
// Intercept the chgFn to return the type received initially
this.chgFn = (/**
* @param {?} val
* @return {?}
*/
val => {
/** @type {?} */
const obj = this.isObjectInput ? val : JSON.stringify(val);
fn(obj);
});
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
/**
* @return {?}
*/
get colorCode() {
return this._colorCode;
}
}
PalettePickerComponent.decorators = [
{ type: 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: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => PalettePickerComponent)),
multi: true
}
]
}] }
];
/** @nocollapse */
PalettePickerComponent.ctorParameters = () => [
{ type: ThemeUtilService }
];
PalettePickerComponent.propDecorators = {
colorCode: [{ type: Input, args: ["colorCode",] }]
};
if (false) {
/** @type {?} */
PalettePickerComponent.prototype.isObjectInput;
/** @type {?} */
PalettePickerComponent.prototype.chgFn;
/** @type {?} */
PalettePickerComponent.prototype._primary;
/** @type {?} */
PalettePickerComponent.prototype._accent;
/** @type {?} */
PalettePickerComponent.prototype._warn;
/** @type {?} */
PalettePickerComponent.prototype._colorCode;
/** @type {?} */
PalettePickerComponent.prototype.theme;
}
/** @enum {string} */
const DEFAULT = {
P: "#D3D3D3",
A: "#5D5D5D",
W: "#ff0000",
};
class BaseTheme {
/**
* @param {?} obj
*/
constructor(obj) {
this.primary = DEFAULT.P;
this.accent = DEFAULT.A;
this.warn = DEFAULT.W;
if (!!obj) {
if (typeof obj === "string") {
this.parseObj(JSON.parse(obj));
}
else {
this.parseObj(obj);
}
}
}
/**
* @private
* @param {?} obj
* @return {?}
*/
parseObj(obj) {
if (!!obj) {
this.primary = obj.primary ? obj.primary : DEFAULT.P;
this.accent = obj.accent ? obj.accent : DEFAULT.A;
this.warn = obj.warn ? obj.warn : DEFAULT.W;
}
}
}
if (false) {
/** @type {?} */
BaseTheme.prototype.primary;
/** @type {?} */
BaseTheme.prototype.accent;
/** @type {?} */
BaseTheme.prototype.warn;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/color-picker/color-picker.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ColorPickerComponent {
constructor() {
this.regex = REGEX.HEX.TEST;
this.parseHex = (/**
* @param {?} v
* @return {?}
*/
(v) => {
if (v != null) {
if (typeof v === "string") {
v = parseInt(v);
}
/** @type {?} */
const hex = v.toString(16);
return hex.length > 1 ? hex : `${hex}${hex}`;
}
return "FF";
});
}
/**
* @return {?}
*/
get hexColor() {
/** @type {?} */
const _r = this.parseHex(this.red);
/** @type {?} */
const _g = this.parseHex(this.green);
/** @type {?} */
const _b = this.parseHex(this.blue);
this._hexColor = `${_r}${_g}${_b}`.toUpperCase();
return this._hexColor;
}
/**
* @param {?} str
* @return {?}
*/
set hexColor(str) {
this._staging = str;
}
/**
* @return {?}
*/
get rgb() {
return `rgb(${this.red}, ${this.green}, ${this.blue})`;
}
/**
* @return {?}
*/
setRGB() {
setTimeout((/**
* @return {?}
*/
() => {
this.updateRGB(this._staging);
}), 1500);
}
/**
* @param {?} str
* @return {?}
*/
updateRGB(str) {
/** @type {?} */
const parse = (/**
* @param {?} hex
* @return {?}
*/
(hex) => parseInt(hex, 16));
/** @type {?} */
const valid = new RegExp(REGEX.HEX.TEST).test(str);
if (valid) {
this._hexColor = str;
/** @type {?} */
const map = REGEX.HEX.PARSE.exec(str);
this.red = parse(map[1]);
this.green = parse(map[2]);
this.blue = parse(map[3]);
}
}
/**
* @return {?}
*/
previewPalette() {
this.onChg(this.hexColor);
}
/**
* @param {?} str
* @return {?}
*/
writeValue(str) {
this.updateRGB(str);
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChg = (/**
* @param {?} val
* @return {?}
*/
(val) => {
/** @type {?} */
let hex = val;
if (val.indexOf("#") === -1) {
hex = `#${hex}`;
}
fn(hex);
});
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
}
ColorPickerComponent.decorators = [
{ type: 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: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => ColorPickerComponent)),
multi: true,
},
],
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: Injectable }
];
ColorPickerComponent.propDecorators = {
paletteType: [{ type: Input, args: ["paletteType",] }]
};
if (false) {
/** @type {?} */
ColorPickerComponent.prototype.regex;
/** @type {?} */
ColorPickerComponent.prototype.paletteType;
/** @type {?} */
ColorPickerComponent.prototype.onChg;
/** @type {?} */
ColorPickerComponent.prototype.red;
/** @type {?} */
ColorPickerComponent.prototype.green;
/** @type {?} */
ColorPickerComponent.prototype.blue;
/** @type {?} */
ColorPickerComponent.prototype._staging;
/** @type {?} */
ColorPickerComponent.prototype._hexColor;
/** @type {?} */
ColorPickerComponent.prototype.parseHex;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/theme-util.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ThemeUtilModule {
}
ThemeUtilModule.decorators = [
{ type: NgModule, args: [{
declarations: [PalettePickerComponent, ColorPickerComponent],
imports: [
FormsModule,
BrowserAnimationsModule,
BrowserModule,
ReactiveFormsModule,
],
exports: [PalettePickerComponent, ColorPickerComponent],
},] },
{ type: Injectable }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: material-theme-util.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { BaseTheme, PalettePickerComponent, ThemeUtilModule, ThemeUtilService, ColorPickerComponent as ɵa };
//# sourceMappingURL=material-theme-util.js.map