ngx-bootstrap-expanded-features
Version:
Too many new features for bootstrap made with javascript for better performance and more options without a large css file.
1,669 lines (1,658 loc) • 116 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Output, Input, Directive } from '@angular/core';
const allColors = {
/* colorsDefault */
primary: '#0d6efd',
secondary: '#6c757d',
success: '#198754',
info: '#0dcaf0',
warning: '#ffc107',
danger: '#dc3545',
light: '#f8f9fa',
dark: '#212529',
/* colorsBS */
indigoBS: '#6610f2',
purpleBS: '#6f42c1',
pinkBS: '#d63384',
orangeBS: '#fd7e14',
tealBS: '#20c997',
white: '#fff',
grayBS: '#6c757d',
/* colorsLP */
mystic: '#210020',
lavenderLP: '#D6BCFF',
fairy: '#D680FF',
summer: '#FF9A2E',
old: '#EEEDA0',
friend: '#3BBBB2',
tree: '#5A311D',
blood: '#8A0707',
beast: '#F5785D',
abyss: '#000',
/* basicColorsCSS */ /* (\s)(#[0-9A-Fa-f]+)\s([0-9]*,?)*\n*\s*\n*\s* */ /* :$1'$2', */
black: '#000000',
silver: '#C0C0C0',
gray: '#808080',
maroon: '#800000',
red: '#FF0000',
purple: '#800080',
fuchsia: '#FF00FF',
green: '#008000',
lime: '#00FF00',
olive: '#808000',
yellow: '#FFFF00',
navy: '#000080',
blue: '#0000FF',
teal: '#008080',
aqua: '#00FFFF',
/* extendedColorsCSS */
aliceblue: '#f0f8ff',
antiquewhite: '#faebd7',
aquamarine: '#7fffd4',
azure: '#f0ffff',
beige: '#f5f5dc',
bisque: '#ffe4c4',
blanchedalmond: '#ffebcd',
blueviolet: '#8a2be2',
brown: '#a52a2a',
burlywood: '#deb887',
cadetblue: '#5f9ea0',
chartreuse: '#7fff00',
chocolate: '#d2691e',
coral: '#ff7f50',
cornflowerblue: '#6495ed',
cornsilk: '#fff8dc',
crimson: '#dc143c',
cyan: '#00ffff',
darkblue: '#00008b',
darkcyan: '#008b8b',
darkgoldenrod: '#b8860b',
darkgray: '#a9a9a9',
darkgreen: '#006400',
darkgrey: '#a9a9a9',
darkkhaki: '#bdb76b',
darkmagenta: '#8b008b',
darkolivegreen: '#556b2f',
darkorange: '#ff8c00',
darkorchid: '#9932cc',
darkred: '#8b0000',
darksalmon: '#e9967a',
darkseagreen: '#8fbc8f',
darkslateblue: '#483d8b',
darkslategray: '#2f4f4f',
darkslategrey: '#2f4f4f',
darkturquoise: '#00ced1',
darkviolet: '#9400d3',
deeppink: '#ff1493',
deepskyblue: '#00bfff',
dimgray: '#696969',
dimgrey: '#696969',
dodgerblue: '#1e90ff',
firebrick: '#b22222',
floralwhite: '#fffaf0',
forestgreen: '#228b22',
gainsboro: '#dcdcdc',
ghostwhite: '#f8f8ff',
gold: '#ffd700',
goldenrod: '#daa520',
greenyellow: '#adff2f',
grey: '#808080',
honeydew: '#f0fff0',
hotpink: '#ff69b4',
indianred: '#cd5c5c',
indigo: '#4b0082',
ivory: '#fffff0',
khaki: '#f0e68c',
lavender: '#e6e6fa',
lavenderblush: '#fff0f5',
lawngreen: '#7cfc00',
lemonchiffon: '#fffacd',
lightblue: '#add8e6',
lightcoral: '#f08080',
lightcyan: '#e0ffff',
lightgoldenrodyellow: '#fafad2',
lightgray: '#d3d3d3',
lightgreen: '#90ee90',
lightgrey: '#d3d3d3',
lightpink: '#ffb6c1',
lightsalmon: '#ffa07a',
lightseagreen: '#20b2aa',
lightskyblue: '#87cefa',
lightslategray: '#778899',
lightslategrey: '#778899',
lightsteelblue: '#b0c4de',
lightyellow: '#ffffe0',
limegreen: '#32cd32',
linen: '#faf0e6',
magenta: '#ff00ff',
mediumaquamarine: '#66cdaa',
mediumblue: '#0000cd',
mediumorchid: '#ba55d3',
mediumpurple: '#9370db',
mediumseagreen: '#3cb371',
mediumslateblue: '#7b68ee',
mediumspringgreen: '#00fa9a',
mediumturquoise: '#48d1cc',
mediumvioletred: '#c71585',
midnightblue: '#191970',
mintcream: '#f5fffa',
mistyrose: '#ffe4e1',
moccasin: '#ffe4b5',
navajowhite: '#ffdead',
oldlace: '#fdf5e6',
olivedrab: '#6b8e23',
orange: '#ffa500',
orangered: '#ff4500',
orchid: '#da70d6',
palegoldenrod: '#eee8aa',
palegreen: '#98fb98',
paleturquoise: '#afeeee',
palevioletred: '#db7093',
papayawhip: '#ffefd5',
peachpuff: '#ffdab9',
peru: '#cd853f',
pink: '#ffc0cb',
plum: '#dda0dd',
powderblue: '#b0e0e6',
rosybrown: '#bc8f8f',
royalblue: '#4169e1',
saddlebrown: '#8b4513',
salmon: '#fa8072',
sandybrown: '#f4a460',
seagreen: '#2e8b57',
seashell: '#fff5ee',
sienna: '#a0522d',
skyblue: '#87ceeb',
slateblue: '#6a5acd',
slategray: '#708090',
slategrey: '#708090',
snow: '#fffafa',
springgreen: '#00ff7f',
steelblue: '#4682b4',
tan: '#d2b48c',
thistle: '#d8bfd8',
tomato: '#ff6347',
turquoise: '#40e0d0',
violet: '#ee82ee',
wheat: '#f5deb3',
whitesmoke: '#f5f5f5',
yellowgreen: '#9acd32',
};
const cssNamesParsed = {
// Display and Layout
d: "display",
pos: "position",
t: "top",
bot: "bottom",
b: "bottom",
start: "left",
s: "left",
end: "right",
e: "right",
z: "z-index",
zi: "z-index",
// Flexbox
fb: "flex-basis",
fd: "flex-direction",
fwr: "flex-wrap",
fg: "flex-grow",
fsh: "flex-shrink",
flex: "flex",
jc: "justify-content",
ai: "align-items",
as: "align-self",
ac: "align-content",
// Grid
gtc: "grid-template-columns",
gtr: "grid-template-rows",
gta: "grid-template-areas",
gt: "grid-template",
gg: "grid-gap",
gc: "grid-column",
gr: "grid-row",
gcs: "grid-column-start",
gce: "grid-column-end",
grs: "grid-row-start",
gre: "grid-row-end",
ga: "grid-area",
gac: "grid-auto-columns",
gar: "grid-auto-rows",
gaf: "grid-auto-flow",
// Dimensions
w: "width",
h: "height",
wmn: "min-width",
hmn: "min-height",
wmx: "max-width",
hmx: "max-height",
minw: "min-width",
minh: "min-height",
maxw: "max-width",
maxh: "max-height",
// Box Model
p: "padding",
pt: "padding-top",
pb: "padding-bottom",
ps: "padding-left",
pe: "padding-right",
py: ["padding-top", "padding-bottom"],
px: ["padding-left", "padding-right"],
m: "margin",
mt: "margin-top",
mb: "margin-bottom",
ms: "margin-left",
me: "margin-right",
my: ["margin-top", "margin-bottom"],
mx: ["margin-left", "margin-right"],
// Border
bw: "border-width",
bwt: "border-top-width",
bwb: "border-bottom-width",
bws: "border-left-width",
bwe: "border-right-width",
bwy: ["border-top-width", "border-bottom-width"],
bwx: ["border-left-width", "border-right-width"],
bst: "border-style",
bstt: "border-top-style",
bstb: "border-bottom-style",
bsts: "border-left-style",
bste: "border-right-style",
bsty: ["border-top-style", "border-bottom-style"],
bstx: ["border-left-style", "border-right-style"],
borderStylet: "border-top-style",
borderStyleb: "border-bottom-style",
borderStyles: "border-left-style",
borderStylee: "border-right-style",
borderStyley: ["border-top-style", "border-bottom-style"],
borderStylex: ["border-left-style", "border-right-style"],
bco: "border-color",
bcot: "border-top-color",
bcob: "border-bottom-color",
bcos: "border-left-color",
bcoe: "border-right-color",
bcoy: ["border-top-color", "border-bottom-color"],
bcox: ["border-left-color", "border-right-color"],
borderColort: "border-top-color",
borderColorb: "border-bottom-color",
borderColors: "border-left-color",
borderColore: "border-right-color",
borderColory: ["border-top-color", "border-bottom-color"],
borderColorx: ["border-left-color", "border-right-color"],
bo: "border",
bort: "border-top",
borb: "border-bottom",
bors: "border-left",
bore: "border-right",
// Border Radius
rounded: "border-radius",
r: "border-radius",
rs: ["border-top-left-radius", "border-bottom-left-radius"],
re: ["border-top-right-radius", "border-bottom-right-radius"],
rt: ["border-top-left-radius", "border-top-right-radius"],
rb: ["border-bottom-left-radius", "border-bottom-right-radius"],
rst: "border-top-left-radius",
ret: "border-top-right-radius",
rsb: "border-bottom-left-radius",
reb: "border-bottom-right-radius",
// Typography
fs: "font-size",
fwg: "font-weight",
ff: "font-family",
fst: "font-style",
fv: "font-variant",
f: "font",
lh: "line-height",
lst: "letter-spacing",
ws: "word-spacing",
ta: "text-align",
tde: "text-decoration",
tt: "text-transform",
ti: "text-indent",
tsh: "text-shadow",
to: "text-overflow",
ww: "word-wrap",
wb: "word-break",
whs: "white-space",
// Colors
text: "color",
c: "color",
bg: "background-color",
bgc: "background-color",
// Background
BG: "background",
bgi: "background-image",
bgr: "background-repeat",
bga: "background-attachment",
bgp: "background-position",
bgs: "background-size",
bgo: "background-origin",
bgcl: "background-clip",
// Visibility and Opacity
v: "visibility",
o: "opacity",
// Overflow
ov: "overflow",
ovx: "overflow-x",
ovy: "overflow-y",
// Cursor
cur: "cursor",
// Transform
tr: "transform",
tro: "transform-origin",
trs: "transform-style",
// Transition
transition: "transition",
td: "transition-duration",
tf: "transition-timing-function",
tp: "transition-property",
tdy: "transition-delay",
// Animation
an: "animation",
and: "animation-duration",
anf: "animation-fill-mode",
andc: "animation-direction",
anic: "animation-iteration-count",
ann: "animation-name",
anps: "animation-play-state",
antf: "animation-timing-function",
andy: "animation-delay",
// Shadow
bsh: "box-shadow",
// Outline
ol: "outline",
olc: "outline-color",
ols: "outline-style",
olw: "outline-width",
olo: "outline-offset",
// List
lsty: "list-style-type",
lsp: "list-style-position",
lsi: "list-style-image",
lsst: "list-style",
// Table
tl: "table-layout",
bc: "border-collapse",
bs: "border-spacing",
cs: "caption-side",
ec: "empty-cells",
// Content
cnt: "content",
q: "quotes",
// Counter
cr: "counter-reset",
ci: "counter-increment",
// Page
pbb: "page-break-before",
pba: "page-break-after",
pbi: "page-break-inside",
// Column
coc: "column-count",
cog: "column-gap",
cow: "column-width",
cor: "column-rule",
corc: "column-rule-color",
cors: "column-rule-style",
corw: "column-rule-width",
cosp: "column-span",
cof: "column-fill",
// Filter
ft: "filter",
// Resize
rz: "resize",
// User Select
us: "user-select",
// Pointer Events
pev: "pointer-events",
// Box Sizing
bxs: "box-sizing",
// Vertical Align
va: "vertical-align",
// Float
fl: "float",
cl: "clear",
// Gap
g: "gap",
rg: "row-gap",
cg: "column-gap",
// Clip
clip: "clip",
cp: "clip-path",
// Text Decoration
tdl: "text-decoration-line",
tdc: "text-decoration-color",
tds: "text-decoration-style",
tdt: "text-decoration-thickness",
// Object
of: "object-fit",
op: "object-position",
// Scroll
sb: "scroll-behavior",
ss: "scroll-snap-type",
ssa: "scroll-snap-align",
// Writing Mode
wm: "writing-mode",
tdir: "text-direction",
// Mix Blend Mode
mbm: "mix-blend-mode",
// Isolation
iso: "isolation",
// Mask
mk: "mask",
mki: "mask-image",
mkp: "mask-position",
mks: "mask-size",
mkr: "mask-repeat",
mko: "mask-origin",
mkc: "mask-clip",
mkm: "mask-mode",
// Aspect Ratio
ar: "aspect-ratio",
// Contain
con: "contain",
// Will Change
wc: "will-change",
// Touch Action
tac: "touch-action",
// Appearance
app: "appearance",
// Orphans and Widows
or: "orphans",
wd: "widows",
// Hyphens
hy: "hyphens",
// Tab Size
ts: "tab-size",
// Scroll Margin
sm: "scroll-margin",
smt: "scroll-margin-top",
smr: "scroll-margin-right",
smb: "scroll-margin-bottom",
sml: "scroll-margin-left",
// Scroll Padding
sp: "scroll-padding",
spt: "scroll-padding-top",
spr: "scroll-padding-right",
spb: "scroll-padding-bottom",
spl: "scroll-padding-left",
// Place Items
pli: "place-items",
plc: "place-content",
pls: "place-self",
// Overscroll Behavior
osb: "overscroll-behavior",
osbx: "overscroll-behavior-x",
osby: "overscroll-behavior-y",
// Text Emphasis
te: "text-emphasis",
tec: "text-emphasis-color",
tes: "text-emphasis-style",
tep: "text-emphasis-position",
// Text Combine
tcu: "text-combine-upright",
// Text Orientation
tor: "text-orientation",
// Text Underline
tup: "text-underline-position",
tuo: "text-underline-offset",
// Text Justify
tj: "text-justify",
// Text Align Last
tal: "text-align-last",
// Text Size Adjust
tsa: "text-size-adjust",
// Image Rendering
ir: "image-rendering",
// Image Orientation
io: "image-orientation",
// Backdrop Filter
bdf: "backdrop-filter",
// Caret Color
cc: "caret-color",
// Accent Color
acc: "accent-color",
// CSS Logical Properties
bis: "block-size",
is: "inline-size",
mbs: "margin-block-start",
mbe: "margin-block-end",
mis: "margin-inline-start",
mie: "margin-inline-end",
pbs: "padding-block-start",
pbe: "padding-block-end",
pis: "padding-inline-start",
pie: "padding-inline-end",
// Container Queries
ct: "container-type",
cn: "container-name",
// Subgrid
sg: "subgrid",
// Scroll Timeline
st: "scroll-timeline",
stn: "scroll-timeline-name",
sta: "scroll-timeline-axis",
// View Timeline
vt: "view-timeline",
vtn: "view-timeline-name",
vta: "view-timeline-axis",
vts: "view-timeline-inset",
// Animation Timeline
at: "animation-timeline",
};
const css_camel = {
cssValidToCamel(st) {
return st.replace(/([-_][a-z])/gi, ($1) => {
return $1.toUpperCase().replace("-", "").replace("_", "");
});
},
camelToCSSValid(st) {
return st
.replace(/[\w]([A-Z])/g, (m) => {
return m[0] + "-" + m[1];
})
.toLowerCase();
},
};
const commonPropertiesValuesAbreviations = {
// Position values
"ABS": "absolute",
"REL": "relative",
"FIX": "fixed",
"STA": "static",
"STI": "sticky",
// Display values
"BLO": "block",
"INL": "inline",
"IBL": "inline-block",
"FLX": "flex",
"GRI": "grid",
"NON": "none",
"TAB": "table",
"TAC": "table-cell",
"TAR": "table-row",
"CNT": "contents",
"LST": "list-item",
"IFL": "inline-flex",
"IGR": "inline-grid",
"ITB": "inline-table",
// Flex/Grid values
"FST": "flex-start",
"FEN": "flex-end",
"CEN": "center",
"SBE": "space-between",
"SAR": "space-around",
"SEV": "space-evenly",
"STR": "stretch",
"BAS": "baseline",
"COL": "column",
"ROW": "row",
"CRE": "column-reverse",
"RRE": "row-reverse",
"WRA": "wrap",
"NOW": "nowrap",
"WRE": "wrap-reverse",
// Alignment values
"JUS": "justify",
"SRT": "start",
"END": "end",
"LEF": "left",
"RIG": "right",
"TOP": "top",
"BOT": "bottom",
// Font values
"BOL": "bold",
"BOR": "bolder",
"LIG": "lighter",
"NOR": "normal",
"ITA": "italic",
"OBL": "oblique",
"SMC": "small-caps",
"CAP": "capitalize",
"UPP": "uppercase",
"LOW": "lowercase",
"THI": "thin",
"MED": "medium",
"THK": "thick", "SER": "serif",
"SAN": "sans-serif",
"MON": "monospace",
"CUR": "cursive",
"FAN": "fantasy",
// Text decoration values
"UND": "underline",
"OVE": "overline",
"LTH": "line-through",
"STK": "strikethrough",
// Border style values
"SOL": "solid",
"DAS": "dashed",
"DOT": "dotted",
"DOU": "double",
"GRO": "groove",
"RID": "ridge",
"INS": "inset",
"OUT": "outset",
"HID": "hidden",
// List style values
"DIS": "disc",
"CIR": "circle",
"SQU": "square",
"DEC": "decimal",
"LRO": "lower-roman",
"URO": "upper-roman",
"LAL": "lower-alpha",
"UAL": "upper-alpha",
"LAT": "lower-latin",
"ULA": "upper-latin",
"ARM": "armenian",
"GEO": "georgian",
"CJK": "cjk-ideographic",
"HEB": "hebrew",
"HIR": "hiragana",
"KAT": "katakana",
// Background values
"NRP": "no-repeat",
"REP": "repeat",
"REX": "repeat-x",
"REY": "repeat-y",
"ROU": "round",
"SPA": "space",
"COV": "cover",
"COT": "contain",
"SCR": "scroll",
"BFX": "fixed",
// Cursor values
"POI": "pointer",
"DEF": "default",
"TEX": "text",
"MOV": "move",
"WAI": "wait",
"HEL": "help",
"CRO": "crosshair",
"PRO": "progress",
"NAL": "not-allowed",
"ZIN": "zoom-in",
"ZOU": "zoom-out",
"GRA": "grab",
"GRB": "grabbing",
"ERS": "e-resize",
"WRS": "w-resize",
"NRS": "n-resize",
"SRS": "s-resize",
"NER": "ne-resize",
"NWR": "nw-resize",
"SRZ": "se-resize",
"SWR": "sw-resize",
"EWR": "ew-resize",
"NSR": "ns-resize",
"NES": "nesw-resize",
"NWS": "nwse-resize",
"CLR": "col-resize",
"RWR": "row-resize",
"ALL": "all-scroll",
"VTE": "vertical-text",
"CEL": "cell",
"CME": "context-menu",
"COP": "copy",
"AUT": "auto",
// Animation/Transition values
"EAS": "ease",
"EAI": "ease-in",
"EAO": "ease-out",
"EIO": "ease-in-out",
"LIN": "linear",
"INF": "infinite",
"ALT": "alternate",
"ALR": "alternate-reverse",
"REV": "reverse",
"FOR": "forwards",
"BAC": "backwards",
"BTH": "both",
"RUN": "running",
"PAU": "paused",
// Overflow values
"VIS": "visible",
"HDD": "hidden",
"SCL": "scroll",
"ATU": "auto",
"CLP": "clip",
// White space values
"NWP": "nowrap",
"PRE": "pre",
"PWR": "pre-wrap",
"PLI": "pre-line",
"BSP": "break-spaces",
// Word break values
"KEE": "keep-all",
"BRA": "break-all",
"BRW": "break-word",
// Transform values
"PR3": "preserve-3d",
"FLA": "flat",
// Box sizing values
"CBX": "content-box",
"BBX": "border-box",
// Clear/Float values
"CLB": "both",
"CLL": "left",
"CLT": "right",
"CLN": "none",
// Table values
"TBC": "collapse",
"TBS": "separate",
// Resize values
"RSB": "both",
"RSH": "horizontal",
"RSV": "vertical",
"RSN": "none",
// User select values
"USN": "none",
"UST": "text",
"USA": "all",
"USU": "auto",
// Appearance values
"APN": "none",
"APA": "auto",
"APB": "button",
"APC": "checkbox",
"APR": "radio",
"APT": "textfield",
"APM": "menulist",
// Miscellaneous values
"ALV": "all",
"AUV": "auto",
"INI": "initial",
"INH": "inherit",
"UNS": "unset",
"RVT": "revert",
"TRA": "transparent",
"CCL": "currentColor",
// Filter values
"BLU": "blur",
"BRI": "brightness",
"CON": "contrast",
"DRO": "drop-shadow",
"GRY": "grayscale",
"HUR": "hue-rotate",
"INV": "invert",
"OPA": "opacity",
"SAT": "saturate",
"SEP": "sepia",
// Mix blend mode values
"MBN": "normal",
"MBM": "multiply",
"MBS": "screen",
"MBO": "overlay",
"MBD": "darken",
"MBL": "lighten",
"MCD": "color-dodge",
"MCB": "color-burn",
"MHL": "hard-light",
"MSL": "soft-light",
"MDF": "difference",
"MEX": "exclusion",
"MHU": "hue",
"MSA": "saturation",
"MCO": "color",
"MLU": "luminosity",
// Object fit values
"OFI": "fill",
"OCN": "contain",
"OCV": "cover",
"ONO": "none",
"OSD": "scale-down"
};
/* Colors */
class ValuesSingleton {
constructor() {
this.indicatorClass = 'bef';
this.colors = allColors;
this.abreviationsClasses = {};
this.abreviationsValues = {};
this.combos = {};
this.combosCreated = {};
this.encryptCombo = true;
this.encryptComboCharacters = '■■■';
this.encryptComboCreatedCharacters = '🜔🜔🜔';
this.cssNamesParsed = cssNamesParsed;
this.alreadyCreatedClasses = [];
this.isDebug = false;
this.bps = [
{
bp: 'sm',
value: '576px',
class2Create: '',
},
{
bp: 'md',
value: '768px',
class2Create: '',
},
{
bp: 'lg',
value: '992px',
class2Create: '',
},
{
bp: 'xl',
value: '1200px',
class2Create: '',
},
{
bp: 'xxl',
value: '1400px',
class2Create: '',
},
];
this.bpsSpecifyOptions = [
'',
'html',
'html body',
'html body #' + this.indicatorClass + '-bp',
'#' + this.indicatorClass + '-bp',
];
this.limitBPS = false;
this.styleSheetToManage = 'bef-styles';
this.separator = 'þµÞ';
this.specify = '🜏🜏🜏';
/* Console */
this.styleConsole = `padding: 1rem; background-color: ${this.colors['mystic']}; color: ${this.colors['lavenderLP']};`;
/* Pseudos */
this.pseudoClasses = [
'Active',
'AnyLink',
'Autofill',
'Blank',
'Checked',
'Current',
'Default',
'Defined',
'Dir',
'Disabled',
'Empty',
'Enabled',
'First',
'FirstChild',
'FirstOfType',
'Focus',
'FocusVisible',
'FocusWithin',
'Fullscreen',
'Future',
'Has',
'Host',
'Hover',
'InRange',
'Indeterminate',
'Invalid',
'Is',
'Lang',
'LastChild',
'LastOfType',
'Left',
'Link',
'LocalLink',
'Modal',
'Muted',
'Not',
'NthChild',
'NthLastChild',
'NthLastOfType',
'NthOfType',
'OnlyChild',
'OnlyOfType',
'Optional',
'OutOfRange',
'Past',
'Paused',
'PictureInPicture',
'PlaceHolderShown',
'Playing',
'PopoverOpen',
'ReadOnly',
'ReadWrite',
'Required',
'Right',
'Root',
'Scope',
'Seeking',
'Stalled',
'Target',
'TargetWithin',
'UserInvalid',
'UserValid',
'Valid',
'Visited',
'VolumeLocked',
'Where',
];
this.pseudosHasSDED = [
'Dir',
'Not',
'Lang',
'Has',
'Host',
'Is',
'NthChild',
'NthLastChild',
'NthLastOfType',
'NthOfType',
'Part',
'Slotted',
'Where',
];
this.pseudoElements = [
'After',
'Backdrop',
'Before',
'Cue',
'CueRegion',
'FileSelectorButton',
'FirstLetter',
'FirstLine',
'GrammarError',
'Highlight',
'Marker',
'Part',
'Placeholder',
'Selection',
'Slotted',
'SpellingError',
'TargetText',
'ViewTransition',
'ViewTransitionGroup',
'ViewTransitionImagePair',
'ViewTransitionNew',
'ViewTransitionOld',
];
this.pseudos = this.pseudoClasses
.sort((e1, e2) => {
e1 = e1.toString().length;
e2 = e2.toString().length;
return e1 > e2 ? 1 : e1 < e2 ? -1 : 0;
})
.map((pse) => {
return {
mask: pse,
real: `${this.separator}:${css_camel.camelToCSSValid(pse)}`,
};
})
.concat(this.pseudoElements
.sort((e1, e2) => {
e1 = e1.toString().length;
e2 = e2.toString().length;
return e1 > e2 ? 1 : e1 < e2 ? -1 : 0;
})
.map((pse) => {
return {
mask: pse,
real: `${this.separator}::${css_camel.camelToCSSValid(pse)}`,
};
}));
this.importantActive = true;
this.abreviationTraductors = [
{
abreviation: 'per',
traduction: '$1%',
abreviationRegExp: /(\d+)\s*per/g,
traductionRegExp: /%/g,
},
{
abreviation: 'COM',
traduction: ' , ',
abreviationRegExp: /COM/g,
traductionRegExp: /\s*,\s*/g,
},
{
abreviation: 'CSP',
traduction: `'`,
abreviationRegExp: /CSP/g,
traductionRegExp: /'/g,
},
{
abreviation: 'CDB',
traduction: `"`,
abreviationRegExp: /CDB/g,
traductionRegExp: /"/g,
},
{
abreviation: 'MIN',
traduction: '-',
abreviationRegExp: /MIN/g,
traductionRegExp: /-/g,
},
{
abreviation: 'PLUS',
traduction: '+',
abreviationRegExp: /PLUS/g,
traductionRegExp: /\+/g,
},
{
abreviation: 'SD',
traduction: '(',
abreviationRegExp: /SD/g,
traductionRegExp: /\(/g,
},
{
abreviation: 'ED',
traduction: ')',
abreviationRegExp: /ED/g,
traductionRegExp: /\)/g,
},
{
abreviation: 'SE',
traduction: '[',
abreviationRegExp: /SE/g,
traductionRegExp: /\[/g,
},
{
abreviation: 'EE',
traduction: ']',
abreviationRegExp: /EE/g,
traductionRegExp: /\]/g,
},
{
abreviation: 'HASH',
traduction: '#',
abreviationRegExp: /HASH/g,
traductionRegExp: /#/g,
},
{
abreviation: 'SLASH',
traduction: '/',
abreviationRegExp: /SLASH/g,
traductionRegExp: /\//g,
},
{
abreviation: 'UND',
traduction: '_',
abreviationRegExp: /UND/g,
traductionRegExp: /_/g,
},
{
abreviation: '__',
traduction: ' ',
abreviationRegExp: /__/g,
traductionRegExp: /\s+/g,
},
{
abreviation: '_',
traduction: '.',
abreviationRegExp: /_/g,
traductionRegExp: /\./g,
},
{
abreviation: 'CHILD',
traduction: ' > ',
abreviationRegExp: /CHILD/g,
traductionRegExp: /\s*>\s*/g,
},
{
abreviation: 'ADJ',
traduction: ' + ',
abreviationRegExp: /ADJ/g,
traductionRegExp: /\s*\+\s*/g,
},
{
abreviation: 'SIBL',
traduction: ' ~ ',
abreviationRegExp: /SIBL/g,
traductionRegExp: /\s*~\s*/g,
},
{
abreviation: 'ALL',
traduction: '*',
abreviationRegExp: /ALL/g,
traductionRegExp: /\*/g,
},
{
abreviation: 'EQ',
traduction: '=',
abreviationRegExp: /EQ/g,
traductionRegExp: /=/g,
},
{
abreviation: 'ST',
traduction: '^',
abreviationRegExp: /ST/g,
traductionRegExp: /\^/g,
},
{
abreviation: 'INC',
traduction: '$',
abreviationRegExp: /INC/g,
traductionRegExp: /\$/g,
},
{
abreviation: 'DPS',
traduction: ':',
abreviationRegExp: /DPS/g,
traductionRegExp: /:/g,
},
{
abreviation: 'PNC',
traduction: ';',
abreviationRegExp: /PNC/g,
traductionRegExp: /;/g,
},
];
/* Time Management*/
this.lastCSSCreate = Date.now();
this.lastTimeAsked2Create = new Date().getTime();
this.timesCSSCreated = 0;
this.timeBetweenReCreate = 1000;
this.useTimer = true;
/* Recurrent Strategy */
this.useRecurrentStrategy = true;
this.lastTimeCssCreateEnded = Date.now();
this.cssCreateIsActive = false;
/* Common Properties Values Abreviations */
this.commonPropertiesValuesAbreviations = commonPropertiesValuesAbreviations;
this.commonPropertiesValuesAbreviationsValues = Object.values(this.commonPropertiesValuesAbreviations);
}
static getInstance() {
if (!ValuesSingleton.instance) {
ValuesSingleton.instance = new ValuesSingleton();
}
return ValuesSingleton.instance;
}
}
function getStackTrace() {
let stack;
try {
throw new Error("");
}
catch (error) {
stack = error.stack || "";
}
stack = stack.split("\n").map((line) => {
return line.trim();
});
return stack.splice(stack[0] == "Error" ? 2 : 1);
}
const values$u = ValuesSingleton.getInstance();
const console_log = {
consoleLog(type = "log", thing, style = values$u.styleConsole, line = null, stoper = !values$u.isDebug) {
this.consoleParser({
type: type,
thing: thing,
style: style,
line: line,
stoper: stoper,
});
},
consoleParser(config) {
config.type = config.type ? config.type : "log";
config.style = config.style ? config.style : values$u.styleConsole;
config.stoper =
config.stoper !== undefined ? config.stoper : !values$u.isDebug;
if (config.stoper === false || config.type === "error") {
if (config.line) {
console.info("%cline: " + config.line + " = ", config.style);
}
console.info("%c" + getStackTrace()[2], config.style);
console.groupCollapsed("Trace");
console.trace();
console.groupEnd();
{
switch (config.type) {
case "log":
console.log("%c" +
(typeof config.thing === "object"
? JSON.stringify(config.thing)
: config.thing), config.style);
break;
case "info":
console.info("%c" +
(typeof config.thing === "object"
? JSON.stringify(config.thing)
: config.thing), config.style);
break;
case "error":
console.error("%c" +
(typeof config.thing === "object"
? JSON.stringify(config.thing)
: config.thing), config.style);
break;
default:
break;
}
}
if (typeof config.thing === "object") {
console.dir(config.thing);
}
}
},
};
/* Singletons */
const values$t = ValuesSingleton.getInstance();
const abreviation_traductors = {
abreviationTraductor(value, type = "traduce") {
if (value !== undefined) {
console_log.consoleLog("info", {
value_beforeAbreviationTraductor: value,
});
for (const abr of values$t.abreviationTraductors) {
let traduction = abr.traduction;
let abreviation = abr.abreviation;
let traductionRegExp = abr.traductionRegExp;
let abreviationRegExp = abr.abreviationRegExp;
if (type === "traduce") {
value = value.replace(abreviationRegExp, traduction);
}
else if (type === "convert") {
value = value.replace(traductionRegExp, abreviation);
}
}
console_log.consoleLog("info", {
value_afterAbreviationTraductor: value,
});
}
return value;
},
unbefysize(value) {
return this.abreviationTraductor(value);
},
befysize(value) {
return this.abreviationTraductor(value, "convert");
},
};
/* Singletons */
const values$s = ValuesSingleton.getInstance();
const color_transform = {
colorToRGB(color) {
try {
let rgb = [255, 0, 0];
color = color.toLowerCase();
switch (true) {
case !!values$s.colors[color]:
rgb = this.colorToRGB(values$s.colors[color]);
break;
case color.includes('rgb') || color.includes('rgba'):
rgb = this.parseRGB(color);
break;
case color.includes('#'):
rgb = this.parseRGB(this.HexToRGB(color));
break;
case color.includes('hsl'):
rgb = this.parseRGB(this.HSLToRGB(color));
break;
case color.includes('hwb'):
rgb = this.parseRGB(this.HWBToRGB(color));
break;
default:
break;
}
return rgb;
}
catch (error) {
console_log.consoleLog('error', { error: error });
return [255, 0, 0];
}
},
RGBToRGBA(rgb, alpha) {
return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha})`;
},
parseRGB(rgba) {
let rgb = [];
if (rgba.includes('rgb') || rgba.includes('rgba')) {
rgb = rgba.split('(')[1].split(',')[4]
? [
parseInt(rgba.split('(')[1].split(',')[0]),
parseInt(rgba.split('(')[1].split(',')[1]),
parseInt(rgba.split('(')[1].split(',')[2]),
parseInt(rgba.split('(')[1].split(',')[3]),
]
: [
parseInt(rgba.split('(')[1].split(',')[0]),
parseInt(rgba.split('(')[1].split(',')[1]),
parseInt(rgba.split('(')[1].split(',')[2]),
];
}
return rgb;
},
HexToRGB(Hex) {
let rgb = [];
const hexCode = Hex.replace('#', '');
const hexCodeLength = hexCode.length;
if (hexCodeLength === 3) {
rgb.push(parseInt(hexCode.charAt(0) + hexCode.charAt(0), 16), parseInt(hexCode.charAt(1) + hexCode.charAt(1), 16), parseInt(hexCode.charAt(2) + hexCode.charAt(2), 16));
}
else if (hexCodeLength === 4) {
rgb.push(parseInt(hexCode.charAt(0) + hexCode.charAt(0), 16), parseInt(hexCode.charAt(1) + hexCode.charAt(1), 16), parseInt(hexCode.charAt(2) + hexCode.charAt(2), 16), parseInt(hexCode.charAt(3) + hexCode.charAt(3), 16));
}
else if (hexCodeLength === 6) {
rgb.push(parseInt(hexCode.charAt(0) + hexCode.charAt(1), 16), parseInt(hexCode.charAt(2) + hexCode.charAt(3), 16), parseInt(hexCode.charAt(4) + hexCode.charAt(5), 16));
}
else if (hexCodeLength === 8) {
rgb.push(parseInt(hexCode.charAt(0) + hexCode.charAt(1), 16), parseInt(hexCode.charAt(2) + hexCode.charAt(3), 16), parseInt(hexCode.charAt(4) + hexCode.charAt(5), 16), parseInt(hexCode.charAt(6) + hexCode.charAt(7), 16));
}
else {
console_log.consoleLog('error', { hexToRGBError: 'Invalid hex code' });
}
return `rgb${![3, 6].includes(hexCodeLength) ? 'a' : ''}(${rgb.join(',')})`;
},
HSLToRGB(HSL) {
/* Convert hsl to rgb please */
if (!['hsl', 'hsla'].includes(HSL)) {
return 'rgb(255,0,0,1)';
}
/* Separate string by comas and eliminate rgb or rgba */
const rgbSplited = HSL.split('(')[1]
.split(')')[0]
.split(',')
.filter((r) => r !== 'hsl' && r !== 'hsla');
const hDecimal = parseInt(rgbSplited[0]) / 100;
const sDecimal = parseInt(rgbSplited[1]) / 100;
const lDecimal = parseInt(rgbSplited[2]) / 100;
if (parseInt(rgbSplited[1]) === 0) {
return `rgb(${lDecimal},${lDecimal},${lDecimal})`;
}
let q = lDecimal < 0.5
? lDecimal * (1 + sDecimal)
: lDecimal + sDecimal - lDecimal * sDecimal;
let p = 2 * lDecimal - q;
const r = this.HueToRGB(p, q, hDecimal + 1 / 3);
const g = this.HueToRGB(p, q, hDecimal);
const b = this.HueToRGB(p, q, hDecimal - 1 / 3);
return `rgb${rgbSplited[3] && rgbSplited[3] !== '' ? 'a' : ''}(${r},${g},${b}${rgbSplited[3] && rgbSplited[3] !== '' ? `,${rgbSplited[3]}` : ''})`;
},
HueToRGB(p, q, t) {
if (t < 0)
t += 1;
if (t > 1)
t -= 1;
if (t < 1 / 6)
return p + (q - p) * 6 * t;
if (t < 1 / 2)
return q;
if (t < 2 / 3)
return p + (q - p) * (2 / 3 - t) * 6;
return p;
},
HWBToRGB(HWB) {
const rgbSplited = HWB.split('(')[1]
.split(')')[0]
.split(',')
.filter((r) => r !== 'hsl' && r !== 'hsla');
let h = parseInt(rgbSplited[0]) / 360;
let wh = parseInt(rgbSplited[1]) / 100;
let bl = parseInt(rgbSplited[2]) / 100;
let ratio = wh + bl;
let i;
let v;
let f;
let n;
// wh + bl cant be > 1
if (ratio > 1) {
wh /= ratio;
bl /= ratio;
}
i = Math.floor(6 * h);
v = 1 - bl;
f = 6 * h - i;
if ((i & 0x01) !== 0) {
f = 1 - f;
}
n = wh + f * (v - wh); // linear interpolation
let r;
let g;
let b;
switch (i) {
default:
case 6:
case 0:
r = v;
g = n;
b = wh;
break;
case 1:
r = n;
g = v;
b = wh;
break;
case 2:
r = wh;
g = v;
b = n;
break;
case 3:
r = wh;
g = n;
b = v;
break;
case 4:
r = n;
g = wh;
b = v;
break;
case 5:
r = v;
g = wh;
b = n;
break;
}
return `rgb${rgbSplited[3] && rgbSplited[3] !== '' ? 'a' : ''}(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)}${rgbSplited[3] && rgbSplited[3] !== '' ? `,${rgbSplited[3]}` : ''})`;
},
shadeTintColor(rgb, percent) {
let R = rgb[0] === 0 && percent > 0
? 16
: rgb[0] === 255 && percent < 0
? 239
: rgb[0];
let G = rgb[1] === 0 && percent > 0
? 16
: rgb[1] === 255 && percent < 0
? 239
: rgb[1];
let B = rgb[2] === 0 && percent > 0
? 16
: rgb[2] === 255 && percent < 0
? 239
: rgb[2];
R = parseInt(((R * (100 + percent)) / 100).toString());
G = parseInt(((G * (100 + percent)) / 100).toString());
B = parseInt(((B * (100 + percent)) / 100).toString());
R = R > 255 ? 255 : R < 0 ? 0 : R;
G = G > 255 ? 255 : G < 0 ? 0 : G;
B = B > 255 ? 255 : B < 0 ? 0 : B;
/* let RR = R.toString(16).length == 1 ? '0' + R.toString(16) : R.toString(16);
let GG = G.toString(16).length == 1 ? '0' + G.toString(16) : G.toString(16);
let BB = B.toString(16).length == 1 ? '0' + B.toString(16) : B.toString(16); */
if (rgb[3]) {
let A = rgb[3] ? (rgb[3] * 255).toString(16) : 'FF';
/* let AA =
A.toString(16).length == 1 ? '0' + A.toString(16) : A.toString(16); */
return [R, G, B, A];
}
else {
return [R, G, B];
}
},
opacityCreator(value, opacity) {
if (value.includes('gradient')) {
const colorMatches = this.separateColor4Transform(value);
console_log.consoleLog('info', { colorMatches: colorMatches });
if (!!colorMatches) {
for (let colorMatch of colorMatches) {
console_log.consoleLog('info', {
valuePreSeparateColor4TransformPreCB: value,
});
value = value.replace(colorMatch, this.opacityCreator(colorMatch, opacity));
console_log.consoleLog('info', {
valuePostSeparateColor4TransformPostCB: value,
});
}
console_log.consoleLog('info', {
valuePostSeparateColor4Transform: value,
});
return value;
}
else {
return value;
}
}
else {
let shade3Split = this.colorToRGB(value);
console_log.consoleLog('info', { shade3Split: shade3Split });
console_log.consoleLog('info', { shade3SplitLength: shade3Split.length });
if (shade3Split.length === 4) {
shade3Split[3] = opacity;
}
else {
shade3Split.push(opacity);
}
return `rgba(${shade3Split.join(',')})`;
}
},
getShadeTintColorOrGradient(tintValue, value) {
if (value.includes('gradient')) {
const colorMatches = this.separateColor4Transform(value);
console_log.consoleLog('info', { colorMatches: colorMatches });
if (!!colorMatches) {
for (let colorMatch of colorMatches) {
console_log.consoleLog('info', {
valuePreSeparateColor4TransformPreCB: value,
});
value = value.replace(colorMatch, this.getShadeTintColorOrGradient(tintValue, colorMatch));
console_log.consoleLog('info', {
valuePostSeparateColor4TransformPostCB: value,
});
}
console_log.consoleLog('info', {
valuePostSeparateColor4Transform: value,
});
return value;
}
else {
return value;
}
}
else {
return `rgba(${color_transform
.shadeTintColor(color_transform.colorToRGB(value), tintValue)
.join(',')})`;
}
},
separateColor4Transform(value) {
console_log.consoleLog('info', { valuePreSeparateColor4Transform: value });
const colorReg = new RegExp(/(?:(#[A-Fa-f0-9]{3,8})|(?:(rgb)|(hsl)|(hwb))a?\([0-9\.\,\s%]*\))/gi);
return value.match(colorReg);
},
};
/* Singletons */
const values$r = ValuesSingleton.getInstance();
const manage_sheet = {
checkSheet() {
let sheets = [...document.styleSheets];
for (let nsheet of sheets) {
if (nsheet.href?.includes(values$r.styleSheetToManage)) {
values$r.sheet = nsheet;
values$r.alreadyCreatedClasses = [];
values$r.combosCreated = {};
}
}
},
getSheet() {
if (values$r.sheet) {
console_log.consoleLog("info", { sheet: values$r.sheet });
return values$r.sheet;
}
else {
return undefined;
}
},
};
const valueComboReplacer = async (c, vals) => {
let reg = new RegExp(/VAL[0-9]+(DEF.*DEF)?/, "g");
if (reg.test(c)) {
let matches = c.match(reg);
console_log.consoleLog("info", { matches: matches });
if (!!matches) {
for (let match of matches) {
console_log.consoleLog("info", { match: match });
let val = parseInt(match.split("VAL")[1].split("DEF")[0]);
console_log.consoleLog("info", { val: val });
let valueToMatch = `VAL${val}(DEF.*DEF)?`;
let valueReg = new RegExp(valueToMatch, "g");
console_log.consoleLog("info", {
valueToMatch: valueToMatch,
});
let def = match.split("DEF")[1];
console_log.consoleLog("info", { def: def });
console_log.consoleLog("info", { vals: vals });
console_log.consoleLog("info", { vals_val: vals[val] });
if (!!vals[val] &&
vals[val] !== "" &&
vals[val] !== "undefined" &&
vals[val] !== "DEF" &&
vals[val] !== "null") {
if (/VAL[0-9]+/.test(vals[val])) {
/* When you want to use another defined value */
let valval = vals[val].replace(/VAL/g, "");
console_log.consoleLog("info", { valval: valval });
c = c.replace(valueReg, vals[parseInt(valval)] &&
vals[parseInt(valval)] !== "VAL" + valval
? vals[parseInt(valval)]
: def
? def
: "");
console_log.consoleLog("info", { c: c });
}
else {
/* When you defined a custom value */
c = c.replace(valueReg, vals[val]);
console_log.consoleLog("info", { c: c });
}
}
else {
/* When you dont define a value its defined the default value */
c = c.replace(valueReg, def ? def : "");
console_log.consoleLog("info", { c: c });
}
}
return c;
}
else {
return c;
}
}
else {
return c;
}
};
const values4ComboGetter = async (class2Create) => {
if (!!class2Create.includes('VALS')) {
let valsSource = class2Create.split('VALS')[1];
console_log.consoleLog('info', { valsSource: valsSource });
let valueReg = new RegExp(/VAL([0-9_]+)N[A-z0-9]+VAL\1N/, 'g');
if (valueReg.test(valsSource)) {
let valsToSortSource = valsSource.match(valueReg);
console_log.consoleLog('info', { valsToSortSource: valsToSortSource });
if (!!valsToSortSource) {
let valsToSortExtras = [];
let valsToSort = valsToSortSource.map((v) => {
let index = v.split('VAL')[1].split('N')[0];
let valReplace = new RegExp(`VAL${index}N`, 'g');
let firstIndex = parseInt(index);
if (index.includes('_')) {
let indexes = index.split('_');
firstIndex = parseInt(indexes[0]);
indexes.forEach((i, it) => {
if (it > 0) {
valsToSortExtras.push({
index: parseInt(i),
val: v.replace(valReplace, ''),
});
}
});
}
return {
index: firstIndex,
val: v.replace(valReplace, ''),
};
});
valsToSort = valsToSort.concat(valsToSortExtras);
console_log.consoleLog('info', { valsToSort: valsToSort });
let valsNotSorted = valsSource.split('VL');
console_log.consoleLog('info', { valsNotSorted: valsNotSorted });
let noValsNotSorted = false;
if (valsNotSorted.length >=