Class StyledElementFactory<T>

Util class making applying 'css in js' styles easy. Provides many features:

Attaching inline styles
Attaching styles by creating a new style ya in header with defined class
Conditionally attach styles
Factory does not mutate the input element

Type parameters

T: HTMLElement

Element type

Hierarchy

StyledElementFactory

Index

Constructors

constructor

Properties

Accessors

styledElement

Methods

Constructors

constructor

new StyledElementFactory(element: T): StyledElementFactory

- Defined in src/lib/core/factories/styled-element.factory.ts:16
Parameters
- element: T
Returns StyledElementFactory

Properties

Private Readonly elementClone

elementClone: T

Static Private Readonly STYLES_ATTRIBUTE

STYLES_ATTRIBUTE: "data-hello-customer-styles" = "data-hello-customer-styles"

Accessors

styledElement

get styledElement(): T

- Defined in src/lib/core/factories/styled-element.factory.ts:22
Returns T

Methods

applyClass

applyClass(className: string, style?: Partial<CSSStyleDeclaration>): StyledElementFactory<T>

- Defined in src/lib/core/factories/styled-element.factory.ts:94
Attach css class to the element, if the style object is provided, besides attaching class to the element, the class gets created and posted to the header

Parameters
- className: string
- Optional style: Partial<CSSStyleDeclaration>
Returns StyledElementFactory<T>

applyClassConditionally

applyClassConditionally(condition: boolean, name: string, style?: Partial<CSSStyleDeclaration>): StyledElementFactory<T>

- Defined in src/lib/core/factories/styled-element.factory.ts:62
Attach css class conditionally

Parameters
- condition: boolean
- name: string
- Optional style: Partial<CSSStyleDeclaration>
Returns StyledElementFactory<T>

applyInlineConditionally

applyInlineConditionally(condition: boolean, style?: Partial<CSSStyleDeclaration>): StyledElementFactory<T>

- Defined in src/lib/core/factories/styled-element.factory.ts:48
Attach inline style conditionally

Parameters
- condition: boolean
- Optional style: Partial<CSSStyleDeclaration>
Returns StyledElementFactory<T>

applyInlineStyle

applyInlineStyle(style: Partial<CSSStyleDeclaration>): StyledElementFactory<T>

- Defined in src/lib/core/factories/styled-element.factory.ts:75
Attach inline style

Parameters
- style: Partial<CSSStyleDeclaration>
Returns StyledElementFactory<T>

attachCssClass

attachCssClass(className: string): StyledElementFactory<T>

- Defined in src/lib/core/factories/styled-element.factory.ts:26
Parameters
- className: string
Returns StyledElementFactory<T>

attachInlineRule

attachInlineRule(ruleName: keyof CSSStyleDeclaration, ruleValue: CSSStyleDeclaration[keyof CSSStyleDeclaration]): StyledElementFactory<T>

- Defined in src/lib/core/factories/styled-element.factory.ts:31
Parameters
- ruleName: keyof CSSStyleDeclaration
- ruleValue: CSSStyleDeclaration[keyof CSSStyleDeclaration]
Returns StyledElementFactory<T>

Static addMediaRule

addMediaRule(media: string, rules: Record<string, Partial<CSSStyleDeclaration>>): void

- Defined in src/lib/core/factories/styled-element.factory.ts:126
Add media rule to the header

Parameters
- media: string
- rules: Record<string, Partial<CSSStyleDeclaration>>
Returns void

Static appendCssClassToHeader

appendCssClassToHeader(style: Partial<CSSStyleDeclaration>, name: string): void

- Defined in src/lib/core/factories/styled-element.factory.ts:111
Parse provided partial style and class name into a string containing css class declaration, and append it to the dedicated style element in the header - marked by StyledElementFactory.STYLES_ATTRIBUTE. If this style element does not exist it gets created.

Parameters
- style: Partial<CSSStyleDeclaration>
- name: string
Returns void

Static Private getStyleElement

getStyleElement(): HTMLStyleElement

- Defined in src/lib/core/factories/styled-element.factory.ts:137
Returns HTMLStyleElement

Static Private parseStyleToClass

parseStyleToClass(name: string, style: Partial<CSSStyleDeclaration>): string

- Defined in src/lib/core/factories/styled-element.factory.ts:149
Parameters
- name: string
- style: Partial<CSSStyleDeclaration>
Returns string

Generated using TypeDoc