@angular-package/spectre.css
Version:
Modified Spectre.css - a lightweight, responsive, and modern CSS framework originally designed by Yan Zhu
346 lines (337 loc) • 11.6 kB
JavaScript
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
var _a$1, _Affix_pattern, _Affix_defineAffix;
class Affix extends String {
constructor(affix, pattern = /[^a-zA-Z0-9$_]/g) {
super(__classPrivateFieldGet(Affix, _a$1, "m", _Affix_defineAffix).call(Affix, affix, pattern));
_Affix_pattern.set(this, void 0);
__classPrivateFieldSet(this, _Affix_pattern, pattern, "f");
}
get get() {
return this.valueOf();
}
get value() {
return super.valueOf();
}
getPattern() {
return __classPrivateFieldGet(this, _Affix_pattern, "f");
}
}
_a$1 = Affix, _Affix_pattern = new WeakMap(), _Affix_defineAffix = function _Affix_defineAffix(affix, pattern) {
return typeof affix === 'string' ? affix.replace(pattern || '', '') : '';
};
class Prefix extends Affix {
}
class Suffix extends Affix {
}
var _Name_availableNames, _Name_name, _Name_prefix, _Name_suffix;
class Name extends String {
constructor(name, prefix, suffix, availableNames) {
super(Name.template `${availableNames}${prefix}${name}${suffix}`);
_Name_availableNames.set(this, void 0);
_Name_name.set(this, void 0);
_Name_prefix.set(this, void 0);
_Name_suffix.set(this, void 0);
__classPrivateFieldSet(this, _Name_availableNames, availableNames, "f");
__classPrivateFieldSet(this, _Name_name, name, "f");
__classPrivateFieldSet(this, _Name_prefix, new Prefix(prefix), "f");
__classPrivateFieldSet(this, _Name_suffix, new Suffix(suffix), "f");
}
get availableNames() {
return __classPrivateFieldGet(this, _Name_availableNames, "f");
}
get name() {
return __classPrivateFieldGet(this, _Name_name, "f");
}
get prefix() {
return __classPrivateFieldGet(this, _Name_prefix, "f");
}
get suffix() {
return __classPrivateFieldGet(this, _Name_suffix, "f");
}
get value() {
return this.valueOf();
}
get withPrefix() {
var _a;
return [(_a = __classPrivateFieldGet(this, _Name_prefix, "f")) === null || _a === void 0 ? void 0 : _a.value, this.name]
.filter((v) => typeof v === 'string')
.join('-');
}
get withSuffix() {
var _a;
return [this.name, (_a = __classPrivateFieldGet(this, _Name_suffix, "f")) === null || _a === void 0 ? void 0 : _a.value]
.filter((v) => typeof v === 'string')
.join('-');
}
static template(strings, ...values) {
let availableNames, prefix, name, suffix;
[availableNames, prefix, name, suffix] = values;
const ingredients = [prefix, name, suffix];
return availableNames
? availableNames.indexOf(name) > -1
? ingredients.filter((v) => typeof v === 'string').join('-')
: ''
: ingredients.filter((v) => typeof v === 'string').join('-');
}
toNgClass(active = true) {
return { [this.value]: active };
}
valueOf() {
return super.valueOf();
}
}
_Name_availableNames = new WeakMap(), _Name_name = new WeakMap(), _Name_prefix = new WeakMap(), _Name_suffix = new WeakMap();
class Color extends Name {
static colorToHex(color) {
const hexadecimal = Math.round(color).toString(16);
return hexadecimal.length === 1 ? '0' + hexadecimal : hexadecimal;
}
static hexToRgb(hex) {
const getHex = hex.replace('#', '').match(/.{1,2}/g);
if (getHex !== null) {
return {
red: parseInt(getHex[0], 16),
green: parseInt(getHex[1], 16),
blue: parseInt(getHex[2], 16),
};
}
return;
}
static hexToHsl(hex) {
const rgb = Color.hexToRgb(hex);
return typeof rgb === 'object'
? this.rgbToHsl(rgb.red, rgb.green, rgb.blue)
: undefined;
}
static hslToRgb(hue, saturation, lightness) {
const HSLToRGB = (h, s, l) => {
s /= 100;
l /= 100;
const k = (n) => (n + h / 30) % 12;
const a = s * Math.min(l, 1 - l);
const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
return {
red: 255 * f(0),
green: 255 * f(8),
blue: 255 * f(4),
};
};
return HSLToRGB(hue, saturation, lightness);
}
static rgbToHex(red, green, blue) {
return ('#' +
this.colorToHex(red) +
this.colorToHex(green) +
this.colorToHex(blue));
}
static rgbToHsl(red, green, blue) {
(red /= 255), (green /= 255), (blue /= 255);
const max = Math.max(red, green, blue), min = Math.min(red, green, blue);
let hue = 0, saturation, lightness = (max + min) / 2;
if (max === min) {
hue = saturation = 0;
}
else {
const d = max - min;
saturation = lightness > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case red:
hue = (green - blue) / d + (green < blue ? 6 : 0);
break;
case green:
hue = (blue - red) / d + 2;
break;
case blue:
hue = (red - green) / d + 4;
break;
}
hue && (hue /= 6);
}
hue && (hue *= 360);
saturation *= 100;
lightness *= 100;
return {
hue,
saturation,
lightness,
};
}
constructor(color, prefix, suffix, availableColor = [
'accent',
'basic',
'dark',
'default',
'disabled',
'error',
'gray',
'gray-dark',
'gray-light',
'info',
'light',
'primary',
'secondary',
'success',
'warning',
]) {
super(color, prefix, suffix, availableColor);
}
}
var _a, _CssPropertyColor_calcLightness, _CssPropertyColor_getPropertyValue;
class CssPropertyColor extends Color {
constructor(color, prefix, availableColor = [
'accent',
'basic',
'bg',
'dark',
'default',
'disabled',
'error',
'gray',
'gray-dark',
'gray-light',
'info',
'light',
'primary',
'secondary',
'success',
'warning',
]) {
super(color, prefix, 'color', availableColor);
}
get hue() {
return CssPropertyColor.getHueOfVar(this.valueOf());
}
get hex() {
return CssPropertyColor.getHexOfVar(this.valueOf());
}
get hsl() {
return {
hue: this.hue,
lightness: this.lightness,
saturation: this.saturation,
};
}
get lightness() {
return CssPropertyColor.getLightnessOfVar(this.valueOf());
}
get saturation() {
return CssPropertyColor.getSaturationOfVar(this.valueOf());
}
static getHueOfVar(name) {
return __classPrivateFieldGet(this, _a, "m", _CssPropertyColor_getPropertyValue).call(this, `--${name}-h`);
}
static getLightnessOfVar(name) {
return __classPrivateFieldGet(this, _a, "m", _CssPropertyColor_getPropertyValue).call(this, `--${name}-l`);
}
static getSaturationOfVar(name) {
return __classPrivateFieldGet(this, _a, "m", _CssPropertyColor_getPropertyValue).call(this, `--${name}-s`);
}
static getHexOfVar(name) {
const rgbColor = Color.hslToRgb(this.getHueOfVar(name), this.getSaturationOfVar(name), this.getLightnessOfVar(name));
return this.rgbToHex(Math.round(rgbColor.red), Math.round(rgbColor.green), Math.round(rgbColor.blue));
}
static removeHueOfVar(name) {
this.rootStyle.removeProperty(`--${name}-h`);
return this;
}
static removeLightnessOfVar(name) {
this.rootStyle.removeProperty(`--${name}-l`);
return this;
}
static removeSaturationOfVar(name) {
this.rootStyle.removeProperty(`--${name}-s`);
return this;
}
static removeColorOfVar(name) {
this.removeHueOfVar(name)
.removeLightnessOfVar(name)
.removeSaturationOfVar(name);
return this;
}
static setHueOfVar(name, value, priority) {
document.querySelector(':root').style.setProperty(`--${name}-h`, `${String(value)}deg`, priority);
return this;
}
static setLightnessOfVar(name, value, priority) {
document.querySelector(':root').style.setProperty(`--${name}-l`, `${String(value)}%`, priority);
return this;
}
static setSaturationOfVar(name, value, priority) {
document.querySelector(':root').style.setProperty(`--${name}-s`, `${String(value)}%`, priority);
return this;
}
getHex(shade) {
return CssPropertyColor.getHexOfVar(this.getValue(shade));
}
getHSL(shade) {
return {
hue: this.getHue(shade),
lightness: this.getLightness(shade),
saturation: this.getSaturation(shade),
};
}
getHue(shade) {
return CssPropertyColor.getHueOfVar(this.getValue(shade));
}
getLightness(shade) {
return CssPropertyColor.getLightnessOfVar(this.getValue(shade));
}
getSaturation(shade) {
return CssPropertyColor.getSaturationOfVar(this.getValue(shade));
}
getValue(shade) {
return shade ? this.valueOfShade(shade) : this.valueOf();
}
removeColor(shade) {
CssPropertyColor.removeColorOfVar(this.getValue(shade));
return this;
}
setHex(hex, shade) {
const hsl = CssPropertyColor.hexToHsl(hex);
if (hsl) {
this.setHue(hsl.hue, shade)
.setLightnessOfVar(hsl.lightness, shade)
.setSaturationOfVar(hsl.saturation, shade);
}
return this;
}
setHsl(hue, saturation, lightness) {
this.setHue(hue)
.setSaturationOfVar(saturation)
.setLightnessOfVar(lightness);
return this;
}
setHue(value, shade, priority) {
CssPropertyColor.setHueOfVar(this.getValue(shade), value, priority);
return this;
}
setLightnessOfVar(value, shade, priority) {
CssPropertyColor.setLightnessOfVar(this.getValue(shade), value, priority);
return this;
}
setSaturationOfVar(value, shade, priority) {
CssPropertyColor.setSaturationOfVar(this.getValue(shade), value, priority);
return this;
}
valueOfShade(shade) {
return `${this.valueOf()}-${shade}`;
}
}
_a = CssPropertyColor, _CssPropertyColor_calcLightness = function _CssPropertyColor_calcLightness(lightness) {
var _b;
let l = 0;
(_b = lightness
.match(/[+-]?\d+(\.\d+)?/g)) === null || _b === void 0 ? void 0 : _b.forEach((value) => (l += Number(value)));
return l;
}, _CssPropertyColor_getPropertyValue = function _CssPropertyColor_getPropertyValue(name) {
const value = getComputedStyle(document.body)
.getPropertyValue(name)
.replace('deg', '')
.replace('%', '');
return value.indexOf('calc') ? __classPrivateFieldGet(this, _a, "m", _CssPropertyColor_calcLightness).call(this, value) : Number(value);
};
CssPropertyColor.rootStyle = document.querySelector(':root')
.style;
const SPECTRE_CSS = true;
export { CssPropertyColor, SPECTRE_CSS };
//# sourceMappingURL=angular-package-spectre.css.mjs.map