neu-ts-css-theming
Version:
Lightweight CSS-variables theming with TS helpers for Angular or any web app.
1 lines • 59.9 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.ts","../src/style.data-types.ts","../src/style.models.ts"],"sourcesContent":["// IMPORT: FEATURES > DATA-TYPES\nimport type { AppThemeNames } from \"./style.data-types\";\n\nexport const DEFAULT_CSS_VAR_PREFIX = \"--app-theme-\";\nexport const THEME_ATTR = \"data-theme\";\n\nexport type CSSVars = Record<string, string>;\n\nexport interface ThemeApplierOptions {\n /** Prefix for CSS custom properties, e.g. '--app-theme-' (include trailing dash) */\n cssVarPrefix?: string;\n /** Target element to apply vars on (defaults to document.documentElement) */\n target?: HTMLElement;\n}\n\nconst docEl = typeof document !== \"undefined\" ? document.documentElement : undefined;\n\n/** Apply CSS variables to <html> (or a provided element). */\nexport function applyCssVars(vars: CSSVars, opts: ThemeApplierOptions = {}): void {\n const target = opts.target ?? docEl;\n if (!target) return;\n for (const [k, v] of Object.entries(vars)) target.style.setProperty(k, v);\n}\n\nexport interface SetThemeOptions {\n /** Attribute used to store theme; defaults to \"data-theme\". */\n attr?: string;\n /** Target element to annotate; defaults to <html>. */\n target?: HTMLElement;\n}\n\n/** Sets data-theme on :root to drive CSS theme rules. */\nexport function setTheme(theme: AppThemeNames, opts: SetThemeOptions = {}): void {\n const target = opts.target ?? docEl;\n if (!target) return;\n const attr = opts.attr ?? THEME_ATTR;\n target.setAttribute(attr, String(theme));\n}\n\n/** Reads theme from :root[data-theme] (or a custom attr). */\nexport function getTheme(opts: { attr?: string; target?: HTMLElement } = {}): AppThemeNames | undefined {\n const target = opts.target ?? docEl;\n if (!target) return undefined;\n const attr = opts.attr ?? THEME_ATTR;\n return target.getAttribute(attr) as AppThemeNames | undefined;\n}\n\n// EXPORT: Public API\nexport * from \"./style.data-types\";\nexport * from \"./style.models\";\n","// DATATYPE: AppThemeNames\nexport type AppThemeNames = (\n 'primary'\n | 'secondary'\n | 'tertiary'\n | 'accent'\n | 'success'\n | 'info'\n | 'warning'\n | 'danger'\n | 'light'\n | 'dark'\n | 'accent'\n | 'custom'\n);\n\nexport const AppThemeNamesList = [\n 'primary',\n 'secondary',\n 'tertiary',\n 'accent',\n 'success',\n 'info',\n 'warning',\n 'danger',\n 'light',\n 'dark',\n 'accent',\n 'custom'\n];\n\n// DATATYPE: DisplayDataType\nexport type DisplayDataType = (\n 'block'\n | 'grid'\n | 'flex'\n | '-webkit-box'\n | 'contents'\n);\n\nexport const DisplayDataTypeList = [\n 'block',\n 'grid',\n 'flex',\n '-webkit-box',\n 'contents'\n];\n\n// DATATYPE: OverflowDataType\nexport type OverflowDataType = (\n 'visible'\n | 'hidden'\n | 'clip'\n | 'scroll'\n | 'auto'\n | 'initial'\n | 'inherit'\n);\n\nexport const OverflowDataTypeList = [\n 'visible',\n 'hidden',\n 'clip',\n 'scroll',\n 'auto',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: AlignContentDataType\nexport type AlignContentDataType = (\n 'flex-start'\n | 'flex-end'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n | 'start'\n | 'end'\n | 'baseline'\n | 'normal'\n | 'stretch'\n | 'inherit'\n | 'initial'\n | 'unset'\n);\n\nexport const AlignContentDataTypeList = [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly',\n 'start',\n 'end',\n 'baseline',\n 'normal',\n 'stretch',\n 'inherit',\n 'initial',\n 'unset'\n];\n\n// DATATYPE: PositionDataType\nexport type PositionDataType = (\n 'static'\n | 'relative'\n | 'fixed'\n | 'absolute'\n | 'sticky'\n);\n\nexport const PositionDataTypeList = [\n 'static',\n 'relative',\n 'fixed',\n 'absolute',\n 'sticky'\n];\n\n// DATATYPE: FlexDirectionDataType\nexport type FlexDirectionDataType = (\n 'column'\n | 'row'\n);\n\nexport const FlexDirectionDataTypeList = [\n 'column',\n 'row'\n];\n\n// DATATYPE: FlexWrapDataType\nexport type FlexWrapDataType = (\n 'nowrap'\n | 'wrap'\n | 'wrap-reverse'\n | 'initial'\n | 'inherit'\n);\n\nexport const FlexWrapDataTypeList = [\n 'nowrap',\n 'wrap',\n 'wrap-reverse',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: JustifyContentDataType\nexport type JustifyContentDataType = (\n 'flex-start'\n | 'flex-end'\n | 'center'\n | 'space-between'\n | 'space-around'\n | 'space-evenly'\n | 'initial'\n | 'inherit'\n);\n\nexport const JustifyContentDataTypeList = [\n 'flex-start',\n 'flex-end',\n 'center',\n 'space-between',\n 'space-around',\n 'space-evenly',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: JustifyItemsDataType\nexport type JustifyItemsDataType = (\n 'legacy' // Default value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute.\n | 'normal' // Dependant on layout context, but similar to 'stretch' for grid layout\n | 'stretch' // Stretches to fill the grid cell if inline-size (width) is not set.\n | 'start' // Align items at the start in the inline direction\n | 'left' // Align items to the left\n | 'center' // Align items to the center\n | 'end' // Align items at the end in the inline direction\n | 'right' // Align items to the right\n | 'safe' // sets alignment of the item to 'start' if the content overflows\n | 'unsafe' // keeps the alignment value regardless of wether or not the item content overflows\n | 'baseline' // alignment\tThe element is aligned with the baseline of the parent.\n | 'initial' // Sets this property to its default value. Read about initial\n | 'inherit' // Inherits this property from its parent element. Read about inherit\n);\n\nexport const JustifyItemsDataTypeList = [\n 'legacy',\n 'normal',\n 'stretch',\n 'start',\n 'left',\n 'center',\n 'end',\n 'right',\n 'safe',\n 'unsafe',\n 'baseline',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: FlexAlignItemsDataType\nexport type FlexAlignItemsDataType = (\n 'normal' // Default. Behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size.\n | 'stretch' // Items are stretched to fit the container.\n | 'center' // Items are positioned at the center of the container.\n | 'flex-start' // Items are positioned at the beginning of the container.\n | 'flex-end' // Items are positioned at the end of the container.\n | 'baseline' // Items are positioned at the baseline of the container.\n | 'initial'\t// Sets this property to its default value. Read about initial.\n | 'inherit'\t// Inherits this property from its parent element. Read about inherit.\n);\n\nexport const FlexAlignItemsDataTypeList = [\n 'normal',\n 'stretch',\n 'center',\n 'flex-start',\n 'flex-end',\n 'baseline',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: GridAlignItemsDataType\nexport type GridAlignItemsDataType = (\n 'normal' // Default. Behaves like 'stretch' for flexbox and grid items, or 'start' for grid items with a defined block size.\n | 'stretch' // Items are stretched to fit the container.\n | 'center' // Items are positioned at the center of the container.\n | 'start' // Items are positioned at the beginning of the container.\n | 'end' // Items are positioned at the end of the container.\n | 'baseline' // Items are positioned at the baseline of the container.\n | 'initial'\t// Sets this property to its default value. Read about initial.\n | 'inherit'\t// Inherits this property from its parent element. Read about inherit.\n);\n\nexport const GridAlignItemsDataTypeList = [\n 'normal',\n 'stretch',\n 'center',\n 'start',\n 'end',\n 'baseline',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: TextAlignDataType\nexport type TextAlignDataType = (\n 'left'\n | 'center'\n | 'right'\n);\n\nexport const TextAlignDataTypeList = [\n 'left',\n 'center',\n 'right'\n];\n\n// DATATYPE: TextWeightDataType\nexport type TextWeightDataType = (\n 'light'\n | 'lighter'\n | 'normal'\n | 'bold'\n | 'bolder'\n);\n\nexport const TextWeightDataTypeList = [\n 'light',\n 'lighter',\n 'normal',\n 'bold',\n 'bolder'\n];\n\n// DATATYPE: TextWhiteSpaceDataType\nexport type TextWhiteSpaceDataType = (\n 'normal'\n | 'nowrap'\n | 'break-spaces'\n | 'pre'\n | 'pre-line'\n | 'pre-wrap'\n);\n\nexport const TextWhiteSpaceDataTypeList = [\n 'normal',\n 'nowrap',\n 'break-spaces',\n 'pre',\n 'pre-line',\n 'pre-wrap'\n];\n\n// DATATYPE: TextOverflowDataType\nexport type TextOverflowDataType = (\n 'ellipsis'\n | 'clip'\n | 'visible'\n | 'hidden'\n);\nexport const TextOverflowDataTypeList = [\n 'ellipsis',\n 'clip',\n 'visible',\n 'hidden'\n];\n\n// DATATYPE: TextBoxOrientDataType\nexport type TextBoxOrientDataType = (\n 'horizontal'\n | 'vertical'\n | 'inline-axis'\n | 'block-axis'\n);\n\nexport const TextBoxOrientDataTypeList = [\n 'horizontal',\n 'vertical',\n 'inline-axis',\n 'block-axis'\n];\n\n// DATATYPE: TextDecorationDataType\nexport type TextDecorationDataType = (\n | 'none'\n | 'underline'\n | 'overline'\n | 'line-through'\n | 'blink' // Deprecated, may not be supported\n | 'inherit'\n | 'initial'\n | 'unset'\n);\nexport const TextDecorationDataTypeList = [\n 'none',\n 'underline',\n 'overline',\n 'line-through',\n 'blink', // Deprecated, may not be supported\n 'inherit',\n 'initial',\n 'unset',\n];\n\n// DATATYPE: BorderStyleDataType\nexport type BorderStyleDataType = (\n 'solid'\n | 'dashed'\n | 'dotted'\n | 'double'\n | 'groove'\n | 'ridge'\n | 'inset'\n | 'outset'\n | 'none'\n | 'hidden'\n);\n\nexport const BorderStyleDataTypeList = [\n 'solid',\n 'dashed',\n 'dotted',\n 'double',\n 'groove',\n 'ridge',\n 'inset',\n 'outset',\n 'none',\n 'hidden'\n];\n\n// DATATYPE: IconTypeDataType\nexport type IconTypeDataType = (\n 'mat'\n | 'span'\n);\n\nexport const IconTypeDataTypeList = [\n 'mat',\n 'span'\n];\n\n// DATATYPE: OutlineStyleDataType\nexport type OutlineStyleDataType = (\n 'none' // Specifies no outline. This is default\n | 'hidden' // Specifies a hidden outline\n | 'dotted' // Specifies a dotted outline\n | 'dashed' // Specifies a dashed outline\n | 'solid' // Specifies a solid outline\n | 'double' // Specifies a double outline\n | 'groove' // Specifies a 3D grooved outline. The effect depends on the outline-color value\n | 'ridge' // Specifies a 3D ridged outline. The effect depends on the outline-color value\n | 'inset' // Specifies a 3D inset outline. The effect depends on the outline-color value\n | 'outset' // Specifies a 3D outset outline. The effect depends on the outline-color value\n | 'initial' // Sets this property to its default value. Read about initial\n | 'inherit' // Inherits this property from its parent element. Read about inherit\n);\n\nexport const OutlineStyleDataTypeList = [\n 'none',\n 'hidden',\n 'dotted',\n 'dashed',\n 'solid',\n 'double',\n 'groove',\n 'ridge',\n 'inset',\n 'outset',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: VisibilityDataType\nexport type VisibilityDataType = (\n 'visible'\t// Default value. The element is visible\t\n | 'hidden' // The element is hidden (but still takes up space)\t\n | 'collapse' // Only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>), and flex items. This value removes a row or column as if display: none where used.\n | 'initial'\t// Sets this property to its default value. Read about initial\t\n | 'inherit'\t// Inherits this property from its parent element. Read about inherit\n);\n\nexport const VisibilityDataTypeList = [\n 'visible',\n 'hidden',\n 'collapse',\n 'initial',\n 'inherit'\n];\n\n// DATATYPE: CursorDataType\nexport type CursorDataType = (\n 'alias' // The cursor indicates an alias of something is to be created\t\n | 'all-scroll' // The cursor indicates that something can be scrolled in any direction\t\n | 'auto' // Default. The browser sets a cursor\t\n | 'cell' // The cursor indicates that a cell (or set of cells) may be selected\t\n | 'col-resize' // The cursor indicates that the column can be resized horizontally\t\n | 'context-menu' // The cursor indicates that a context-menu is available\t\n | 'copy' // The cursor indicates something is to be copied\t\n | 'crosshair' // The cursor render as a crosshair\t\n | 'default' // The default cursor\t\n | 'e-resize' // The cursor indicates that an edge of a box is to be moved right (east)\t\n | 'ew-resize' // Indicates a bidirectional resize cursor\t\n | 'grab' // The cursor indicates that something can be grabbed\t\n | 'grabbing' // The cursor indicates that something can be grabbed\t\n | 'help' // The cursor indicates that help is available\t\n | 'move' // The cursor indicates something is to be moved\t\n | 'n-resize' // The cursor indicates that an edge of a box is to be moved up (north)\t\n | 'ne-resize' // The cursor indicates that an edge of a box is to be moved up and right (north/east)\t\n | 'nesw-resize' // Indicates a bidirectional resize cursor\t\n | 'ns-resize' // Indicates a bidirectional resize cursor\t\n | 'nw-resize' // The cursor indicates that an edge of a box is to be moved up and left (north/west)\t\n | 'nwse-resize' // Indicates a bidirectional resize cursor\t\n | 'no-drop' // The cursor indicates that the dragged item cannot be dropped here\t\n | 'none' // No cursor is rendered for the element\t\n | 'not-allowed' // The cursor indicates that the requested action will not be executed\t\n | 'pointer' // The cursor is a pointer and indicates a link\t\n | 'progress' // The cursor indicates that the program is busy (in progress)\t\n | 'row-resize' // The cursor indicates that the row can be resized vertically\t\n | 's-resize' // The cursor indicates that an edge of a box is to be moved down (south)\t\n | 'se-resize' // The cursor indicates that an edge of a box is to be moved down and right (south/east)\t\n | 'sw-resize' // The cursor indicates that an edge of a box is to be moved down and left (south/west)\t\n | 'text' // The cursor indicates text that may be selected\t\n // | 'url()' // A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used\t\n | 'vertical-text' // The cursor indicates vertical-text that may be selected\t\n | 'w-resize' // The cursor indicates that an edge of a box is to be moved left (west)\t\n | 'wait' // The cursor indicates that the program is busy\t\n | 'zoom-in' // The cursor indicates that something can be zoomed in\t\n | 'zoom-out' // The cursor indicates that something can be zoomed out\t\n | 'initial' // Sets this property to its default value. Read about initial\t\n | 'inherit' // Inherits this property from its parent element. Read about inherit\n);\n\nexport const CursorDataTypeList = [\n 'alias',\n 'all-scroll',\n 'auto',\n 'cell',\n 'col-resize',\n 'context-menu',\n 'copy',\n 'crosshair',\n 'default',\n 'e-resize',\n 'ew-resize',\n 'grab',\n 'grabbing',\n 'help',\n 'move',\n 'n-resize',\n 'ne-resize',\n 'nesw-resize',\n 'ns-resize',\n 'nw-resize',\n 'nwse-resize',\n 'no-drop',\n 'none',\n 'not-allowed',\n 'pointer',\n 'progress',\n 'row-resize',\n 's-resize',\n 'se-resize',\n 'sw-resize',\n 'text',\n // 'url()',\n 'vertical-text',\n 'w-resize',\n 'wait',\n 'zoom-in',\n 'zoom-out',\n 'initial',\n 'inherit'\n];\n","// IMPORT: DATA-TYPES\nimport * as CSS from './style.data-types';\n\n/** MODEL: AppThemeModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/AppTheme.model.md)\n * ************************************************** */\nexport class AppThemeModel {\n // ATTRIBUTE: INIT > themeName\n themeName?: CSS.AppThemeNames;\n // ATTRIBUTE: INIT > colors\n colors?: AppThemeColorsModel;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<AppThemeModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > themeName\n if (config?.themeName !== undefined || populateDefaults === true) {\n this.themeName = (\n (\n config !== undefined && config !== undefined\n && (\n config?.themeName === undefined || config?.themeName === undefined\n )\n )\n ? 'custom'\n : config?.themeName || 'light'\n );\n }\n\n // ATTRIBUTE: CONFIG > colors\n if (config?.colors !== undefined || populateDefaults === true) {\n this.colors = new AppThemeColorsModel(config?.colors);\n }\n }\n\n // FUNCTION: ANGULAR > configAppTheme\n public static configAppTheme(config?: CSS.AppThemeNames | AppThemeModel): AppThemeModel {\n // ATTRIBUTE: CONFIG > VARIABLES\n const themeConfig = !config || typeof config === 'string' ? undefined : (config || undefined);\n const themeName = (\n themeConfig !== undefined\n ? themeConfig?.themeName || 'custom'\n : config || 'light'\n ) as CSS.AppThemeNames;\n let returnValue = new AppThemeModel(themeConfig);\n\n // ATTRIBUTE: CONFIG > themeName\n returnValue.themeName = themeName;\n\n // ATTRIBUTE: CONFIG > theme\n if (themeName !== 'custom') {\n returnValue = new AppThemeModel({\n themeName: themeName,\n colors: new AppThemeColorsModel({\n backgroundColor: `rgba(var(--app-theme-${themeName}-background-rgb), 1)`,\n textColor: `rgba(var(--app-theme-${themeName}-text-rgb), 1)`,\n iconColor: `rgba(var(--app-theme-${themeName}-text-rgb), 1)`,\n borderColor: `rgba(var(--app-theme-${themeName}-border-rgb), 0.25)`,\n rippleColor: `rgba(var(--app-theme-${themeName}-ripple-rgb), 0.2)`,\n boxShadowColor: `rgba(var(--app-theme-${themeName}-shadow-rgb), 0.2`,\n }),\n });\n }\n\n // FUNCTION: CONFIG > return\n return returnValue;\n }\n}\n\n/** MODEL: AppThemeColorsModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/AppThemeColors.model.md)\n * ************************************************** */\nexport class AppThemeColorsModel {\n // ATTRIBUTE: INIT > GENERAL\n backgroundColor?: string;\n textColor?: string;\n iconColor?: string;\n borderColor?: string;\n rippleColor?: string;\n // ATTRIBUTE: INIT > box-shadow\n boxShadowColor?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<AppThemeColorsModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.backgroundColor !== undefined || populateDefaults === true) {\n this.backgroundColor = config?.backgroundColor || 'rgba(var(--app-theme-light-background-rgb), 1)';\n }\n if (config?.textColor !== undefined || populateDefaults === true) {\n this.textColor = config?.textColor || 'rgba(var(--app-theme-light-text-rgb), 1)';\n }\n if (config?.iconColor !== undefined || populateDefaults === true) {\n this.iconColor = config?.iconColor || this.textColor;\n }\n if (config?.borderColor !== undefined || populateDefaults === true) {\n this.borderColor = config?.borderColor || 'rgba(var(--app-theme-light-border-rgb), 1)';\n }\n if (config?.rippleColor !== undefined || populateDefaults === true) {\n this.rippleColor = config?.rippleColor || 'rgba(var(--app-theme-light-ripple-rgb), 1)';\n }\n // ATTRIBUTE: CONFIG > box-shadow\n if (config?.boxShadowColor !== undefined || populateDefaults === true) {\n this.boxShadowColor = 'rgba(var(--app-theme-light-shadow-rgb), 1)';\n }\n }\n}\n\n/** MODEL: AppStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/AppStyle.model.md).\n * ************************************************** */\nexport class AppStyleModel {\n // ATTRIBUTE: INIT > theme\n public theme?: CSS.AppThemeNames | AppThemeModel;\n // ATTRIBUTE: INIT > GENERAL\n public reveal?: boolean;\n public order?: string;\n public cursor?: CSS.CursorDataType;\n public visibility?: CSS.VisibilityDataType;\n public transition?: string;\n public transform?: string;\n // ATTRIBUTE: INIT > APPEARANCE\n public display?: CSS.DisplayDataType;\n public overflow?: CSS.OverflowDataType;\n public overflowX?: CSS.OverflowDataType;\n public overflowY?: CSS.OverflowDataType;\n public opacity?: string;\n // ATTRIBUTE: INIT > POSITION\n public zIndex?: string;\n public position?: CSS.PositionDataType;\n public top?: string;\n public right?: string;\n public bottom?: string;\n public left?: string;\n // ATTRIBUTE: INIT > SPACING\n public gap?: string;\n public margin?: MarginStyleModel;\n public padding?: PaddingStyleModel;\n // ATTRIBUTE: INIT > COLOR\n public backgroundColor?: string;\n public rippleColor?: string;\n // ATTRIBUTE: INIT > ALIGNMENT\n public alignContent?: CSS.AlignContentDataType;\n // ATTRIBUTE: INIT > ALIGNMENT > FLEX\n public flex?: FlexStyleModel;\n // ATTRIBUTE: INIT > ALIGNMENT > GRID\n public grid?: GridStyleModel;\n // ATTRIBUTE: INIT > border\n public border?: BorderStyleModel;\n // ATTRIBUTE: INIT > boxShadow\n public boxShadow?: BoxShadowsStyleModel;\n // ATTRIBUTE: INIT > text\n public text?: TextStyleModel;\n // ATTRIBUTE: INIT > SIZE\n public size?: SizeStyleModel;\n // ATTRIBUTE: INIT > outline\n public outline?: OutlineStyleModel;\n\n // Angular constructor\n constructor(config?: Partial<AppStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n const theme = AppThemeModel.configAppTheme(config?.theme);\n\n // ATTRIBUTE: CONFIG > theme\n if (config?.theme !== undefined || populateDefaults === true) { this.theme = theme; }\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.reveal !== undefined || populateDefaults === true) { this.reveal = config?.reveal ?? true; }\n if (config?.order !== undefined || populateDefaults === true) { this.order = config?.order || '0'; }\n if (config?.cursor !== undefined || populateDefaults === true) { this.cursor = config?.cursor || 'auto'; }\n if (config?.visibility !== undefined || populateDefaults === true) { this.visibility = config?.visibility || 'visible'; }\n if (config?.transition !== undefined || populateDefaults === true) { this.transition = config?.transition || 'none'; }\n if (config?.transform !== undefined || populateDefaults === true) { this.transform = config?.transform || 'none'; }\n // ATTRIBUTE: CONFIG > APPEARANCE\n if (config?.display !== undefined || populateDefaults === true) { this.display = config?.display || 'block'; }\n if (config?.overflow !== undefined || populateDefaults === true) { this.overflow = config?.overflow || 'visible'; }\n if (config?.overflowX !== undefined || populateDefaults === true) { this.overflowX = config?.overflowX || 'visible'; }\n if (config?.overflowY !== undefined || populateDefaults === true) { this.overflowY = config?.overflowY || 'visible'; }\n if (config?.opacity !== undefined || populateDefaults === true) { this.opacity = config?.opacity || '1'; }\n // ATTRIBUTE: CONFIG > POSITION\n if (config?.zIndex !== undefined || populateDefaults === true) { this.zIndex = config?.zIndex || 'var(--app-z-index)'; }\n if (config?.position !== undefined || populateDefaults === true) { this.position = config?.position || 'static'; }\n if (config?.top !== undefined || populateDefaults === true) { this.top = config?.top || '0px'; }\n if (config?.right !== undefined || populateDefaults === true) { this.right = config?.right || '0px'; }\n if (config?.bottom !== undefined || populateDefaults === true) { this.bottom = config?.bottom || '0px'; }\n if (config?.left !== undefined || populateDefaults === true) { this.left = config?.left || '0px'; }\n // ATTRIBUTE: CONFIG > SPACING\n if (config?.gap !== undefined || populateDefaults === true) { this.gap = config?.gap || '0px'; }\n if (config?.margin !== undefined || populateDefaults === true) { this.margin = new MarginStyleModel(config?.margin); }\n if (config?.padding !== undefined || populateDefaults === true) { this.padding = new PaddingStyleModel(config?.padding); }\n // ATTRIBUTE: CONFIG > COLOR\n if (config?.backgroundColor !== undefined || populateDefaults === true) { this.backgroundColor = config?.backgroundColor || theme?.colors?.backgroundColor; }\n if (config?.rippleColor !== undefined || populateDefaults === true) { this.rippleColor = config?.rippleColor || theme?.colors?.rippleColor; }\n // ATTRIBUTE: CONFIG > ALIGNMENT\n if (config?.alignContent !== undefined || populateDefaults === true) { this.alignContent = config?.alignContent || 'normal'; }\n // ATTRIBUTE: CONFIG > ALIGNMENT > FLEX\n if (config?.flex !== undefined || populateDefaults === true) { this.flex = new FlexStyleModel(config?.flex); }\n // ATTRIBUTE: CONFIG > ALIGNMENT > GRID\n if (config?.grid !== undefined || populateDefaults === true) { this.grid = new GridStyleModel(config?.grid); }\n // ATTRIBUTE: CONFIG > border\n if (config?.border !== undefined || populateDefaults === true) { this.border = new BorderStyleModel({ ...config?.border, theme: theme }); }\n // ATTRIBUTE: CONFIG > boxShadow\n if (config?.boxShadow !== undefined || populateDefaults === true) {\n this.boxShadow = {\n general: config?.boxShadow?.general || new BoxShadowStyleModel({ ...config?.boxShadow?.general, theme: theme }),\n hover: config?.boxShadow?.hover || new BoxShadowStyleModel({ ...config?.boxShadow?.hover, theme: theme }),\n active: config?.boxShadow?.active || new BoxShadowStyleModel({ ...config?.boxShadow?.active, theme: theme }),\n };\n }\n // ATTRIBUTE: CONFIG > text\n if (config?.text !== undefined || populateDefaults === true) { this.text = new TextStyleModel({ ...config?.text, theme: theme }); }\n // ATTRIBUTE: CONFIG > SIZE\n if (config?.size !== undefined || populateDefaults === true) { this.size = new SizeStyleModel(config?.size); }\n // ATTRIBUTE: CONFIG > outline\n if (config?.outline !== undefined || populateDefaults === true) { this.outline = new OutlineStyleModel({ ...config?.outline, theme: theme }); }\n }\n}\n\n/** MODEL: MarginStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/MarginStyle.model.md).\n * ************************************************** */\nexport class MarginStyleModel {\n // ATTRIBUTE: INIT > GENERAL\n public top?: string;\n public right?: string;\n public bottom?: string;\n public left?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<MarginStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.top !== undefined || populateDefaults === true) { this.top = config?.top || '0px'; }\n if (config?.right !== undefined || populateDefaults === true) { this.right = config?.right || '0px'; }\n if (config?.bottom !== undefined || populateDefaults === true) { this.bottom = config?.bottom || '0px'; }\n if (config?.left !== undefined || populateDefaults === true) { this.left = config?.left || '0px'; }\n }\n}\n\n/** MODEL: PaddingStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/PaddingStyle.model.md).\n * ************************************************** */\nexport class PaddingStyleModel {\n // ATTRIBUTE: INIT > GENERAL\n public top?: string;\n public right?: string;\n public bottom?: string;\n public left?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<PaddingStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.top !== undefined || populateDefaults === true) { this.top = config?.top || '0px'; }\n if (config?.right !== undefined || populateDefaults === true) { this.right = config?.right || '0px'; }\n if (config?.bottom !== undefined || populateDefaults === true) { this.bottom = config?.bottom || '0px'; }\n if (config?.left !== undefined || populateDefaults === true) { this.left = config?.left || '0px'; }\n }\n}\n\n/** MODEL: FlexStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/FlexStyle.model.md).\n * ************************************************** */\nexport class FlexStyleModel {\n // ATTRIBUTE: INIT > GENERAL\n public flexDirection?: CSS.FlexDirectionDataType;\n public flexWrap?: CSS.FlexWrapDataType;\n public justifyContent?: CSS.JustifyContentDataType;\n public alignItems?: CSS.FlexAlignItemsDataType;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<FlexStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.flexDirection !== undefined || populateDefaults === true) { this.flexDirection = config?.flexDirection || undefined; }\n if (config?.flexWrap !== undefined || populateDefaults === true) { this.flexWrap = config?.flexWrap || undefined; }\n if (config?.justifyContent !== undefined || populateDefaults === true) { this.justifyContent = config?.justifyContent || undefined; }\n if (config?.alignItems !== undefined || populateDefaults === true) { this.alignItems = config?.alignItems || undefined; }\n }\n}\n\n/** MODEL: GridStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/GridStyle.model.md).\n * ************************************************** */\nexport class GridStyleModel {\n // ATTRIBUTE: INIT > GENERAL\n public gridTemplateColumns?: string;\n public gridTemplateRows?: string;\n public gridArea?: string;\n public gridColumn?: string;\n public gridRow?: string;\n public justifyItems?: CSS.JustifyItemsDataType;\n public alignItems?: CSS.GridAlignItemsDataType;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<GridStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.gridTemplateColumns !== undefined || populateDefaults === true) { this.gridTemplateColumns = config?.gridTemplateColumns || undefined; }\n if (config?.gridTemplateRows !== undefined || populateDefaults === true) { this.gridTemplateRows = config?.gridTemplateRows || undefined; }\n if (config?.gridArea !== undefined || populateDefaults === true) { this.gridArea = config?.gridArea || undefined; }\n if (config?.gridColumn !== undefined || populateDefaults === true) { this.gridColumn = config?.gridColumn || undefined; }\n if (config?.gridRow !== undefined || populateDefaults === true) { this.gridRow = config?.gridRow || undefined; }\n if (config?.justifyItems !== undefined || populateDefaults === true) { this.justifyItems = config?.justifyItems || undefined; }\n if (config?.alignItems !== undefined || populateDefaults === true) { this.alignItems = config?.alignItems || undefined; }\n }\n}\n\n/** MODEL: BorderStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/BorderStyle.model.md).\n * ************************************************** */\nexport class BorderStyleModel {\n // ATTRIBUTE: INIT > theme\n theme?: CSS.AppThemeNames | AppThemeModel;\n // ATTRIBUTE: INIT > GENERAL\n public color?: string;\n public style?: CSS.BorderStyleDataType;\n public width?: string;\n public radius?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<BorderStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n const theme = AppThemeModel.configAppTheme(config?.theme);\n\n // ATTRIBUTE: CONFIG > theme\n if (config?.theme !== undefined || populateDefaults === true) { this.theme = theme; }\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.color !== undefined || populateDefaults === true) { this.color = config?.color || theme?.colors?.borderColor; }\n if (config?.style !== undefined || populateDefaults === true) { this.style = config?.style || 'solid'; }\n if (config?.width !== undefined || populateDefaults === true) { this.width = config?.width || '1px'; }\n if (config?.radius !== undefined || populateDefaults === true) { this.radius = config?.radius || '0px'; }\n }\n}\n\n/** MODEL: BoxShadowsStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/BoxShadowsStyle.model.md).\n * ************************************************** */\nexport class BoxShadowsStyleModel {\n // ATTRIBUTE: INIT > theme\n public theme?: CSS.AppThemeNames | AppThemeModel;\n // ATTRIBUTE: INIT > GENERAL\n public general?: BoxShadowStyleModel;\n public hover?: BoxShadowStyleModel;\n public active?: BoxShadowStyleModel;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<BoxShadowsStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n const theme = AppThemeModel.configAppTheme(config?.theme);\n\n // ATTRIBUTE: CONFIG > theme\n if (config?.theme !== undefined || populateDefaults === true) { this.theme = theme; }\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.general !== undefined || populateDefaults === true) {\n this.general = config?.general || new BoxShadowStyleModel({\n ...config?.general,\n color: config?.general?.color || theme?.colors?.boxShadowColor,\n });\n }\n if (config?.hover !== undefined || populateDefaults === true) {\n this.hover = config?.hover || new BoxShadowStyleModel({\n ...config?.hover,\n color: config?.hover?.color || theme?.colors?.boxShadowColor,\n });\n }\n if (config?.active !== undefined || populateDefaults === true) {\n this.active = config?.active || new BoxShadowStyleModel({\n ...config?.active,\n color: config?.active?.color || theme?.colors?.boxShadowColor,\n });\n }\n }\n}\n\n/** MODEL: BoxShadowStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/BoxShadowStyle.model.md).\n * ************************************************** */\nexport class BoxShadowStyleModel {\n // ATTRIBUTE: INIT > theme\n theme?: CSS.AppThemeNames | AppThemeModel;\n // ATTRIBUTE: INIT > GENERAL\n public hOffset?: string;\n public vOffset?: string;\n public blur?: string;\n public spread?: string;\n public color?: string;\n\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<BoxShadowStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n const theme = AppThemeModel.configAppTheme(config?.theme);\n\n // ATTRIBUTE: CONFIG > theme\n if (config?.theme !== undefined || populateDefaults === true) { this.theme = theme; }\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.hOffset !== undefined || populateDefaults === true) { this.hOffset = config?.hOffset || '0'; }\n if (config?.vOffset !== undefined || populateDefaults === true) { this.vOffset = config?.vOffset || '0'; }\n if (config?.blur !== undefined || populateDefaults === true) { this.blur = config?.blur || '0'; }\n if (config?.spread !== undefined || populateDefaults === true) { this.spread = config?.spread || '0'; }\n if (config?.color !== undefined || populateDefaults === true) { this.color = config?.color || theme?.colors?.boxShadowColor; }\n }\n}\n\n/** MODEL: TextStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/TextStyle.model.md)\n * ************************************************** */\nexport class TextStyleModel {\n // ATTRIBUTE: INIT > theme\n public theme?: CSS.AppThemeNames | AppThemeModel;\n // ATTRIBUTE: INIT > GENERAL\n public reveal?: boolean;\n public caption?: string;\n public align?: CSS.TextAlignDataType;\n public color?: string;\n public whiteSpace?: CSS.TextWhiteSpaceDataType;\n public overflow?: CSS.TextOverflowDataType;\n public lineClamp?: string;\n public boxOrient?: CSS.TextBoxOrientDataType;\n public textDecoration?: CSS.TextDecorationDataType;\n public letterSpacing?: string | number;\n public lineHeight?: string | number;\n // ATTRIBUTE: INIT > font\n public font?: FontStyleModel;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<TextStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n const theme = AppThemeModel.configAppTheme(config?.theme);\n\n // ATTRIBUTE: CONFIG > theme\n if (config?.theme !== undefined || populateDefaults === true) { this.theme = theme; }\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.reveal !== undefined || populateDefaults === true) { this.reveal = config?.reveal ?? false; }\n if (config?.caption !== undefined || populateDefaults === true) { this.caption = config?.caption || ''; }\n if (config?.align !== undefined || populateDefaults === true) { this.align = config?.align || 'left'; }\n if (config?.color !== undefined || populateDefaults === true) { this.color = config?.color || theme?.colors?.textColor; }\n if (config?.whiteSpace !== undefined || populateDefaults === true) { this.whiteSpace = config?.whiteSpace || 'normal'; }\n if (config?.overflow !== undefined || populateDefaults === true) { this.overflow = config?.overflow || 'visible'; }\n if (config?.lineClamp !== undefined || populateDefaults === true) { this.lineClamp = config?.lineClamp || 'none'; }\n if (config?.boxOrient !== undefined || populateDefaults === true) { this.boxOrient = config?.boxOrient || 'horizontal'; }\n if (config?.textDecoration !== undefined || populateDefaults === true) { this.textDecoration = config?.textDecoration || 'none'; }\n if (config?.letterSpacing !== undefined || populateDefaults === true) { this.letterSpacing = config?.letterSpacing || undefined; }\n if (config?.lineHeight !== undefined || populateDefaults === true) { this.lineHeight = config?.lineHeight || undefined; }\n // ATTRIBUTE: CONFIG > font\n if (config?.font !== undefined || populateDefaults === true) { this.font = new FontStyleModel(config?.font); }\n }\n}\n\n/** MODEL: IconStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/IconStyle.model.md)\n * ************************************************** */\nexport class IconStyleModel extends TextStyleModel {\n // ATTRIBUTE: INIT > GENERAL\n type?: CSS.IconTypeDataType;\n // ATTRIBUTE: INIT > name\n name?: {\n text?: string,\n reveal?: boolean,\n };\n // ATTRIBUTE: INIT > SIZE\n width?: string;\n height?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<IconStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: INIT > PARENT\n super(config);\n\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.type !== undefined || populateDefaults === true) { this.type = config?.type || 'mat'; }\n // ATTRIBUTE: CONFIG > name\n if (config?.name !== undefined || populateDefaults === true) {\n // ATTRIBUTE: CONFIG > mat (default)\n this.name = {\n text: config?.name?.text || 'help',\n reveal: config?.name?.reveal || false\n };\n\n // ATTRIBUTE: CONFIG > span\n if (this.type === 'span') {\n // VARIABLE: INIT > dynamicSize\n const dynamicSize = configDynamicSize(config?.font?.size);\n // ATTRIBUTE: CONFIG > width\n this.width = config?.width || dynamicSize?.width;\n this.height = config?.height || dynamicSize?.height;\n }\n }\n }\n}\n\n/** MODEL: SizeStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/SizeStyle.model.md)\n * ************************************************** */\nexport class SizeStyleModel {\n // ATTRIBUTE: INIT > width\n public width?: string;\n public height?: string;\n public minWidth?: string;\n // ATTRIBUTE: INIT > height\n public minHeight?: string;\n public maxWidth?: string;\n public maxHeight?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<SizeStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > width\n if (config?.minWidth !== undefined || populateDefaults === true) { this.minWidth = config?.minWidth || '0px'; }\n if (config?.width !== undefined || populateDefaults === true) { this.width = config?.width || 'auto'; }\n if (config?.maxWidth !== undefined || populateDefaults === true) { this.maxWidth = config?.maxWidth || '100%'; }\n // ATTRIBUTE: CONFIG > height\n if (config?.minHeight !== undefined || populateDefaults === true) { this.minHeight = config?.minHeight || '0px'; }\n if (config?.height !== undefined || populateDefaults === true) { this.height = config?.height || 'auto'; }\n if (config?.maxHeight !== undefined || populateDefaults === true) { this.maxHeight = config?.maxHeight || '100%'; }\n }\n}\n\n/** FUNCTION: CONFIG > configDynamicSize\n * **************************************************\n * This function is used to configure the dynamic\n * size of an element based on the provided value.\n * ************************************************** */\nexport const configDynamicSize = (value?: string) => {\n if (value === undefined || value === undefined) return undefined;\n\n const [width, height] = value.includes(' ') ? value.split(' ') : [value, value];\n\n return { width, height };\n}\n\n/** MODEL: FontStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/AppStyleTextFont.model.md)\n * ************************************************** */\nexport class FontStyleModel {\n // ATTRIBUTE: INIT > GENERAL\n family?: string;\n size?: string;\n weight?: CSS.TextWeightDataType;\n lineHeight?: string;\n\n constructor(config?: Partial<FontStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.family !== undefined || populateDefaults === true) { this.family = config?.family || 'var(--app-theme-font-family)'; }\n if (config?.size !== undefined || populateDefaults === true) { this.size = config?.size || 'var(--app-theme-font-size)'; }\n if (config?.weight !== undefined || populateDefaults === true) { this.weight = config?.weight || 'normal'; }\n if (config?.lineHeight !== undefined || populateDefaults === true) { this.lineHeight = config?.lineHeight || `calc(${this.size} * 1.5)`; }\n }\n}\n\n/** MODEL: OutlineStyleModel\n * **************************************************\n * [Documentation, click here](../../lib/docs/models/app-style/OutlineStyle.model.md).\n * ************************************************** */\nexport class OutlineStyleModel {\n // ATTRIBUTE: INIT > theme\n theme?: CSS.AppThemeNames | AppThemeModel;\n // ATTRIBUTE: INIT > GENERAL\n public color?: string;\n public style?: CSS.OutlineStyleDataType;\n public width?: string;\n\n // FUNCTION: ANGULAR > constructor\n constructor(config?: Partial<OutlineStyleModel>, populateDefaultVariablesForAllFields?: boolean) {\n // ATTRIBUTE: CONFIG > VARIABLES\n const populateDefaults = populateDefaultVariablesForAllFields ?? true;\n const theme = AppThemeModel.configAppTheme(config?.theme);\n\n // ATTRIBUTE: CONFIG > theme\n if (config?.theme !== undefined || populateDefaults === true) { this.theme = theme; }\n // ATTRIBUTE: CONFIG > GENERAL\n if (config?.color !== undefined || populateDefaults === true) { this.color = config?.color || theme?.colors?.borderColor; }\n if (config?.style !== undefined || populateDefaults === true) { this.style = config?.style || 'solid'; }\n if (config?.width !== undefined || populateDefaults === true) { this.width = config?.width || '0px'; }\n }\n}\n"],"mappings":"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