material-theme-util
Version:
Angular Material 10+ Helper Utility for managing Theme colors dynamically, and creating color palettes from single colors.
1,418 lines (1,404 loc) • 50.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/platform-browser/animations'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('material-theme-util', ['exports', '@angular/core', '@angular/forms', '@angular/platform-browser/animations', '@angular/platform-browser'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['material-theme-util'] = {}, global.ng.core, global.ng.forms, global.ng.platformBrowser.animations, global.ng.platformBrowser));
}(this, (function (exports, i0, forms, animations, platformBrowser) { 'use strict';
/**
* @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
*/
var Hex = /** @class */ (function () {
/**
* @param {?} str
*/
function Hex(str) {
this.str = str;
}
/**
* @return {?}
*/
Hex.prototype.parse = function () {
return this.str;
};
return Hex;
}());
if (false) {
/**
* @type {?}
* @private
*/
Hex.prototype.str;
}
var HSL = /** @class */ (function () {
/**
* @param {?=} h
* @param {?=} s
* @param {?=} l
*/
function HSL(h, s, l) {
this.h = h;
this.s = s;
this.l = l;
}
/**
* @return {?}
*/
HSL.prototype.parse = function () {
return "hsl(" + this.h + ", " + this.s + ", " + this.l + ")";
};
return HSL;
}());
if (false) {
/** @type {?} */
HSL.prototype.h;
/** @type {?} */
HSL.prototype.s;
/** @type {?} */
HSL.prototype.l;
}
var RGB = /** @class */ (function () {
/**
* @param {?=} r
* @param {?=} g
* @param {?=} b
*/
function RGB(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
/**
* @return {?}
*/
RGB.prototype.parse = function () {
return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
};
return RGB;
}());
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 {?} */
var 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
=====================================================
=====================================================
*/
/** @type {?} */
var rgb2Hex = ( /**
* @param {?} rgb
* @return {?}
*/function (rgb) {
/** @type {?} */
var parseHex = ( /**
* @param {?} v
* @return {?}
*/function (/**
* @param {?} v
* @return {?}
*/ v) {
/** @type {?} */
var hex = v.toString(16);
return hex.length === 1 ? "0" + hex : hex;
});
/** @type {?} */
var _r = parseHex(rgb.r);
/** @type {?} */
var _g = parseHex(rgb.g);
/** @type {?} */
var _b = parseHex(rgb.b);
return new Hex("#" + _r + _g + _b);
});
var ɵ0 = rgb2Hex;
/** @type {?} */
var rgb2Hsl = ( /**
* @param {?} rgb
* @return {?}
*/function (rgb) {
/** @type {?} */
var h = 0;
/** @type {?} */
var s = 0;
/** @type {?} */
var l = 0;
// Make r, g, and b fractions of 1
/** @type {?} */
var _r = (rgb.r /= 255);
/** @type {?} */
var _g = (rgb.g /= 255);
/** @type {?} */
var _b = (rgb.b /= 255);
// Find greatest and smallest channel values
/** @type {?} */
var cmin = Math.min(_r, _g, _b);
/** @type {?} */
var cmax = Math.max(_r, _g, _b);
/** @type {?} */
var 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);
});
var ɵ1 = rgb2Hsl;
/** @type {?} */
var ParseRGB = {
HEX: rgb2Hex,
HSL: rgb2Hsl
};
/*
HEX Utilities
=====================================================
=====================================================
*/
/** @type {?} */
var hex2RGB = ( /**
* @param {?} hex
* @return {?}
*/function (hex) {
/** @type {?} */
var r;
/** @type {?} */
var g;
/** @type {?} */
var b;
/** @type {?} */
var 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);
});
var ɵ2 = hex2RGB;
/** @type {?} */
var hex2Hsl = ( /**
* @param {?} hex
* @return {?}
*/function (hex) {
/** @type {?} */
var rgb = hex2RGB(hex);
return ParseRGB.HSL(rgb);
});
var ɵ3 = hex2Hsl;
/** @type {?} */
var testHex = ( /**
* @param {?} str
* @return {?}
*/function (/**
* @param {?} str
* @return {?}
*/ str) {
return new RegExp(REGEX.HEX.TEST).test(str);
});
var ɵ4 = testHex;
/** @type {?} */
var ParseHEX = {
RGB: hex2RGB,
HSL: hex2Hsl,
TEST: testHex
};
/*
HSL Utilities
=====================================================
=====================================================
*/
/** @type {?} */
var hsl2RGB = ( /**
* @param {?} hsl
* @return {?}
*/function (hsl) {
// Must be fractions of 1
/** @type {?} */
var h = hsl.h;
/** @type {?} */
var s = hsl.s / 100;
/** @type {?} */
var l = hsl.l / 100;
/** @type {?} */
var c = (1 - Math.abs(2 * l - 1)) * s;
/** @type {?} */
var x = c * (1 - Math.abs(((h / 60) % 2) - 1));
/** @type {?} */
var m = l - c / 2;
/** @type {?} */
var r = 0;
/** @type {?} */
var g = 0;
/** @type {?} */
var 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);
});
var ɵ5 = hsl2RGB;
/** @type {?} */
var hsl2Hex = ( /**
* @param {?} hsl
* @return {?}
*/function (hsl) {
/** @type {?} */
var rgb = hsl2RGB(hsl);
return ParseRGB.HEX(rgb);
});
var ɵ6 = hsl2Hex;
/** @type {?} */
var 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} */
var ColorType = {
PRIMARY: "P",
ACCENT: "A",
WARN: "W",
};
/** @enum {string} */
var ColorFormat = {
HEX: "HEX",
RGB: "RGB",
HSL: "HSL",
};
var Color = /** @class */ (function () {
/**
* @param {?} val
*/
function Color(val) {
if (!(val instanceof Hex) &&
!(val instanceof RGB) &&
!(val instanceof HSL)) {
this.parseStr(val);
}
else {
this.set(val);
}
}
Object.defineProperty(Color.prototype, "RGB", {
/**
* @return {?}
*/
get: function () {
return this._rgb;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Color.prototype, "HEX", {
/**
* @return {?}
*/
get: function () {
return this._hex;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Color.prototype, "HSL", {
/**
* @return {?}
*/
get: function () {
return this._hsl;
},
enumerable: false,
configurable: true
});
/**
* @param {?=} type
* @return {?}
*/
Color.prototype.get = function (type) {
if (type === void 0) { 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 {?}
*/
Color.prototype.toStr = function (type) {
if (type === void 0) { 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 {?}
*/
Color.prototype.parseStr = function (str) {
/** @type {?} */
var validHex = ParseHEX.TEST(str);
/** @type {?} */
var _color;
if (validHex) {
_color = new Hex(str);
}
this.set(_color);
};
/**
* @param {?} val
* @return {?}
*/
Color.prototype.set = function (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.";
}
};
return 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} */
var PaletteType = {
P: "PRIMARY",
A: "ACCENT",
W: "WARN",
};
/**
* @template T
*/
var HueMap = /** @class */ (function () {
function HueMap() {
}
return HueMap;
}());
if (false) {
/** @type {?} */
HueMap.prototype.ref;
/** @type {?} */
HueMap.prototype.value;
}
var PaletteModel = /** @class */ (function () {
/**
* @param {?} colorMap
* @param {?=} type
*/
function PaletteModel(colorMap, type) {
var _this = this;
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 {?}
*/function (format) {
if (format === void 0) { format = ColorFormat.HEX; }
/** @type {?} */
var t = _this.paletteType;
/** @type {?} */
var 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 {?}
*/function (v) {
_this["_" + v.ref] = v.value;
}));
}
else {
throw "Palette could not be generated.";
}
}
return PaletteModel;
}());
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;
}
var Palette = /** @class */ (function () {
/**
* @param {?} color
* @param {?} type
*/
function Palette(color, type) {
var _this = this;
this.color = color;
this.type = type;
this.buildPalette = ( /**
* @return {?}
*/function () {
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 {?}
*/function (color) {
/** @type {?} */
var _color = color.HSL;
/** @type {?} */
var h = Math.round(_color.h);
/** @type {?} */
var s = Math.round(_color.s);
/** @type {?} */
var 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 {?} */
var hueMapset = _this.generateAlterations(l).map(( /**
* @param {?} map
* @return {?}
*/function (map) {
/** @type {?} */
var _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 {?}
*/function (val) { return Math.min(100, Math.max(0, val)); });
this.generateAlterations = ( /**
* @param {?} l
* @return {?}
*/function (l) { return [
{
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),
},
]; });
}
return Palette;
}());
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} */
var DEFAULT_THEME = {
PRIMARY: "#023057",
ACCENT: "#c1c5c8",
WARN: "#ff0000",
};
// Color Theme Class for updating,
// managing the theme style
var Theme = /** @class */ (function () {
/**
* @param {?=} p
* @param {?=} a
* @param {?=} w
*/
function Theme(p, a, w) {
this.p = p;
this.a = a;
this.w = w;
this.setPrimary(p);
this.setAccent(a);
this.setWarn(w);
}
/**
* @param {?=} color
* @return {?}
*/
Theme.prototype.setPrimary = function (color) {
if (color === void 0) { color = DEFAULT_THEME.PRIMARY; }
this.primary = new Color(color);
this.buildPalette(this.primary, ColorType.PRIMARY);
};
/**
* @param {?=} color
* @return {?}
*/
Theme.prototype.setAccent = function (color) {
if (color === void 0) { color = DEFAULT_THEME.ACCENT; }
this.accent = new Color(color);
this.buildPalette(this.accent, ColorType.ACCENT);
};
/**
* @param {?=} color
* @return {?}
*/
Theme.prototype.setWarn = function (color) {
if (color === void 0) { color = DEFAULT_THEME.WARN; }
this.warn = new Color(color);
this.buildPalette(this.warn, ColorType.WARN);
};
/**
* @private
* @param {?} color
* @param {?} type
* @return {?}
*/
Theme.prototype.buildPalette = function (color, type) {
new Palette(color, type).buildPalette().assignPalette();
};
return Theme;
}());
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
*/
var ThemeUtilService = /** @class */ (function () {
function ThemeUtilService() {
}
/**
* @param {?=} primary
* @param {?=} accent
* @param {?=} warn
* @return {?}
*/
ThemeUtilService.prototype.initTheme = function (primary, accent, warn) {
this.colorTheme = new Theme(primary, accent, warn);
};
/**
* @param {?} str
* @return {?}
*/
ThemeUtilService.prototype.setPrimaryPalette = function (str) {
this.colorTheme.setPrimary(str);
};
/**
* @param {?} str
* @return {?}
*/
ThemeUtilService.prototype.setAccentPalette = function (str) {
this.colorTheme.setAccent(str);
};
/**
* @param {?} str
* @return {?}
*/
ThemeUtilService.prototype.setWarnPalette = function (str) {
this.colorTheme.setWarn(str);
};
return ThemeUtilService;
}());
ThemeUtilService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: "root",
},] }
];
/** @nocollapse */ ThemeUtilService.ɵprov = i0.ɵɵ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
*/
var PalettePickerComponent = /** @class */ (function () {
/**
* @param {?} theme
*/
function PalettePickerComponent(theme) {
this.theme = theme;
}
Object.defineProperty(PalettePickerComponent.prototype, "value", {
/**
* @return {?}
*/
get: function () {
return this.themeStr();
},
/**
* @param {?} v
* @return {?}
*/
set: function (v) {
if (!!v && v !== this.themeStr()) {
this.writeValue(v);
this.chgFn(v);
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(PalettePickerComponent.prototype, "primary", {
/**
* @return {?}
*/
get: function () {
return this._primary;
},
/**
* @param {?} str
* @return {?}
*/
set: function (str) {
this._primary = str;
this.theme.setPrimaryPalette(str);
this.updateTheme();
},
enumerable: false,
configurable: true
});
Object.defineProperty(PalettePickerComponent.prototype, "accent", {
/**
* @return {?}
*/
get: function () {
return this._accent;
},
/**
* @param {?} str
* @return {?}
*/
set: function (str) {
this._accent = str;
this.theme.setAccentPalette(str);
this.updateTheme();
},
enumerable: false,
configurable: true
});
Object.defineProperty(PalettePickerComponent.prototype, "warn", {
/**
* @return {?}
*/
get: function () {
return this._warn;
},
/**
* @param {?} str
* @return {?}
*/
set: function (str) {
this._warn = str;
this.theme.setWarnPalette(str);
this.updateTheme();
},
enumerable: false,
configurable: true
});
/**
* @return {?}
*/
PalettePickerComponent.prototype.updateTheme = function () {
this.chgFn(this.themeStr());
};
/**
* @return {?}
*/
PalettePickerComponent.prototype.themeStr = function () {
/** @type {?} */
var theme = {
primary: this._primary,
accent: this._accent,
warn: this._warn
};
return new BaseTheme(theme);
};
/**
* @param {?} str
* @return {?}
*/
PalettePickerComponent.prototype.writeValue = function (str) {
this.isObjectInput = typeof str === "object";
/** @type {?} */
var theme = new BaseTheme(str);
this._primary = theme.primary;
this._accent = theme.accent;
this._warn = theme.warn;
};
/**
* @param {?} fn
* @return {?}
*/
PalettePickerComponent.prototype.registerOnChange = function (fn) {
var _this = this;
// Intercept the chgFn to return the type received initially
this.chgFn = ( /**
* @param {?} val
* @return {?}
*/function (/**
* @param {?} val
* @return {?}
*/ val) {
/** @type {?} */
var obj = _this.isObjectInput ? val : JSON.stringify(val);
fn(obj);
});
};
/**
* @param {?} fn
* @return {?}
*/
PalettePickerComponent.prototype.registerOnTouched = function (fn) { };
Object.defineProperty(PalettePickerComponent.prototype, "colorCode", {
/**
* @return {?}
*/
get: function () {
return this._colorCode;
},
enumerable: false,
configurable: true
});
return PalettePickerComponent;
}());
PalettePickerComponent.decorators = [
{ type: i0.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: forms.NG_VALUE_ACCESSOR,
useExisting: i0.forwardRef(( /**
* @return {?}
*/function () { return PalettePickerComponent; })),
multi: true
}
]
}] }
];
/** @nocollapse */
PalettePickerComponent.ctorParameters = function () { return [
{ type: ThemeUtilService }
]; };
PalettePickerComponent.propDecorators = {
colorCode: [{ type: i0.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} */
var DEFAULT = {
P: "#D3D3D3",
A: "#5D5D5D",
W: "#ff0000",
};
var BaseTheme = /** @class */ (function () {
/**
* @param {?} obj
*/
function BaseTheme(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 {?}
*/
BaseTheme.prototype.parseObj = function (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;
}
};
return BaseTheme;
}());
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
*/
var ColorPickerComponent = /** @class */ (function () {
function ColorPickerComponent() {
this.regex = REGEX.HEX.TEST;
this.parseHex = ( /**
* @param {?} v
* @return {?}
*/function (v) {
if (v != null) {
if (typeof v === "string") {
v = parseInt(v);
}
/** @type {?} */
var hex = v.toString(16);
return hex.length > 1 ? hex : "" + hex + hex;
}
return "FF";
});
}
Object.defineProperty(ColorPickerComponent.prototype, "hexColor", {
/**
* @return {?}
*/
get: function () {
/** @type {?} */
var _r = this.parseHex(this.red);
/** @type {?} */
var _g = this.parseHex(this.green);
/** @type {?} */
var _b = this.parseHex(this.blue);
this._hexColor = ("" + _r + _g + _b).toUpperCase();
return this._hexColor;
},
/**
* @param {?} str
* @return {?}
*/
set: function (str) {
this._staging = str;
},
enumerable: false,
configurable: true
});
Object.defineProperty(ColorPickerComponent.prototype, "rgb", {
/**
* @return {?}
*/
get: function () {
return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
},
enumerable: false,
configurable: true
});
/**
* @return {?}
*/
ColorPickerComponent.prototype.setRGB = function () {
var _this = this;
setTimeout(( /**
* @return {?}
*/function () {
_this.updateRGB(_this._staging);
}), 1500);
};
/**
* @param {?} str
* @return {?}
*/
ColorPickerComponent.prototype.updateRGB = function (str) {
/** @type {?} */
var parse = ( /**
* @param {?} hex
* @return {?}
*/function (hex) { return parseInt(hex, 16); });
/** @type {?} */
var valid = new RegExp(REGEX.HEX.TEST).test(str);
if (valid) {
this._hexColor = str;
/** @type {?} */
var map = REGEX.HEX.PARSE.exec(str);
this.red = parse(map[1]);
this.green = parse(map[2]);
this.blue = parse(map[3]);
}
};
/**
* @return {?}
*/
ColorPickerComponent.prototype.previewPalette = function () {
this.onChg(this.hexColor);
};
/**
* @param {?} str
* @return {?}
*/
ColorPickerComponent.prototype.writeValue = function (str) {
this.updateRGB(str);
};
/**
* @param {?} fn
* @return {?}
*/
ColorPickerComponent.prototype.registerOnChange = function (fn) {
this.onChg = ( /**
* @param {?} val
* @return {?}
*/function (val) {
/** @type {?} */
var hex = val;
if (val.indexOf("#") === -1) {
hex = "#" + hex;
}
fn(hex);
});
};
/**
* @param {?} fn
* @return {?}
*/
ColorPickerComponent.prototype.registerOnTouched = function (fn) { };
return ColorPickerComponent;
}());
ColorPickerComponent.decorators = [
{ type: i0.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: forms.NG_VALUE_ACCESSOR,
useExisting: i0.forwardRef(( /**
* @return {?}
*/function () { 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: i0.Injectable }
];
ColorPickerComponent.propDecorators = {
paletteType: [{ type: i0.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
*/
var ThemeUtilModule = /** @class */ (function () {
function ThemeUtilModule() {
}
return ThemeUtilModule;
}());
ThemeUtilModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [PalettePickerComponent, ColorPickerComponent],
imports: [
forms.FormsModule,
animations.BrowserAnimationsModule,
platformBrowser.BrowserModule,
forms.ReactiveFormsModule,
],
exports: [PalettePickerComponent, ColorPickerComponent],
},] },
{ type: i0.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
*/
exports.BaseTheme = BaseTheme;
exports.PalettePickerComponent = PalettePickerComponent;
exports.ThemeUtilModule = ThemeUtilModule