# Class CTag

This is the main class in Cardboard. Even though Cardboard is designed to not need to use this class directly, you can if you want.

CTag contains a reference to an HTMLElement, its parent, and provides a set of methods to interact with it.

#### Hierarchy

- CTag

- Defined in tag.ts:48

#####
Index

### Constructors

constructor

### Properties

_attachable
_cachedChildren
_children
_destroyers
_meta
_observer
_parent?
el

### Accessors

checked
children
classList
className
consumeValue
id
parent
style
value

### Methods

_cacheChildren
_childrenFilterPredicate
_getChildren
_getElementForChild
_mapChildren
addAttr
addClass
addStyle
append
attrIf
attrIfNot
changed
classIf
classIfNot
clear
clicked
config
consume
destroy
disable
disableIf
disableIfNot
doIf
doIfNot
enable
find
findTag
getAttr
hasAttr
hasClass
hasStyle
hide
hideIf
hideIfNot
keyPressed
listen
on
once
prepend
q
remove
replaceClass
rmAttr
rmClass
rmStyle
setAttrs
setChecked
setChildren
setClassName
setDisabled
setId
setStyle
setValue
show
styleIf
styleIfNot
stylesIf
stylesIfNot
submited
text
textIf
textIfNot
toggleClass
when

## Constructors

### constructor

- new CTag(arg0, children?, attachable?): CTag

- #### Parameters

  - ##### arg0: HTMLElement | TagName

  - ##### children: TagChildren = []

  - ##### attachable: boolean = false

  #### Returns CTag

  - Defined in tag.ts:131

## Properties

### `Private` `Readonly` _attachable

_attachable: boolean = false

If set to true, it be appended to the attached tag

- Defined in tag.ts:78

### `Private` _cachedChildren

_cachedChildren: Node[] = []

- Defined in tag.ts:72

### `Private` _children

_children: TagChild[] = []

Holds the list of all children, the ones that are currently in the DOM and those that are not

- Defined in tag.ts:70

### `Private` `Readonly` _destroyers

_destroyers: NoOp[] = []

Any function inside this array, will be called whenever the CTag is destroyed Used to remove HTML Event Listeners and Consumable listeners

- Defined in tag.ts:56

### `Private` `Readonly` _meta

_meta: {
isHidden: boolean;
nextSiblingID: null;
} = ...

#### Type declaration

- ##### isHidden: boolean

- ##### nextSiblingID: null

- Defined in tag.ts:80

### `Private` _observer

_observer: MutationObserver

- Defined in tag.ts:774

### `Private` `Optional` _parent

_parent?: CTag

#### Param

Reference to the parent

- Defined in tag.ts:59

### el

el: HTMLElement & {
remove: (() => any);
}

Reference to the HTMLElement that this

#### Type declaration

- ##### remove: (() => any)

  - - (): any

    - #### Returns any

- Defined in tag.ts:50

## Accessors

### checked

- get checked(): any

- #### Returns any

  - Defined in tag.ts:94

### children

- get children(): Node[]

- #### Returns Node[]

  - Defined in tag.ts:73

### classList

- get classList(): DOMTokenList

- #### Returns DOMTokenList

  - Defined in tag.ts:111

### className

- get className(): string

- #### Returns string

  - Defined in tag.ts:107

### consumeValue

- get consumeValue(): any

- Gets the value of the element and clears the value

  #### Returns any

  - Defined in tag.ts:116

### id

- get id(): string

- #### Returns string

  - Defined in tag.ts:122

### parent

- get parent(): undefined | CTag

- #### Returns undefined | CTag

  - Defined in tag.ts:61
- set parent(newParent): void

- #### Parameters

  - ##### newParent: CTag

  #### Returns void

  - Defined in tag.ts:65

### style

- get style(): CSSStyleDeclaration

- #### Returns CSSStyleDeclaration

  - Defined in tag.ts:103

### value

- get value(): any

- #### Returns any

  - Defined in tag.ts:85

## Methods

### `Private` _cacheChildren

- _cacheChildren(element): void

- #### Parameters

  - ##### element: HTMLElement

  #### Returns void

  - Defined in tag.ts:786

### `Private` _childrenFilterPredicate

- _childrenFilterPredicate(item): boolean

- #### Parameters

  - ##### item: any

  #### Returns boolean

  - Defined in tag.ts:754

### `Private` _getChildren

- _getChildren(element): Node[]

- #### Parameters

  - ##### element: HTMLElement

  #### Returns Node[]

  - Defined in tag.ts:775

### `Private` _getElementForChild

- _getElementForChild(cl): null | Node

- #### Parameters

  - ##### cl: TagChild

  #### Returns null | Node

  - Defined in tag.ts:761

### `Private` _mapChildren

- _mapChildren(children): Node[]

- #### Parameters

  - ##### children: TagChildren

  #### Returns Node[]

  - Defined in tag.ts:800

### addAttr

- addAttr(key, value?): CTag

- Adds a single attribute to the element

  #### Parameters

  - ##### key: string

  - ##### value: string = ''

  #### Returns CTag

  - Defined in tag.ts:579

### addClass

- addClass(...classes): CTag

- Add classes to the elements class list

  #### Parameters

  - ##### `Rest` ...classes: string[]

  #### Returns CTag

  - Defined in tag.ts:498

### addStyle

- addStyle<K>(property, value): CTag

- Add a single style

  #### Type Parameters

  - #### K extends CssProperty

  #### Parameters

  - ##### property: K

  - ##### value: PickPropertyValues<K>

  #### Returns CTag

  - Defined in tag.ts:539

### append

- append(...children): CTag

- #### Parameters

  - ##### `Rest` ...children: TagChildren

  #### Returns CTag

  - Defined in tag.ts:175

### attrIf

- attrIf<T>(consumable, attr, value?, invert?): CTag

- Add attribute to the element when the consumer is truthy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string. If {invert} is set to true, the condition will be inversed, but you can also use attrIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### attr: string

  - ##### value: string | ((self) => string) = ''

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:365

### attrIfNot

- attrIfNot<T>(consumable, attr, value?): CTag

- Add attribute to the element when the consumer is falsy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string. If {invert} is set to true, the condition will be inversed

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### attr: string

  - ##### value: string | ((self) => string) = ''

  #### Returns CTag

  - Defined in tag.ts:379

### changed

- changed(fn): CTag

- Add a change event listener

  #### Parameters

  - ##### fn: ((tag, evt) => void)

    - - (tag, evt): void

      - #### Parameters

        - ##### tag: CTag

        - ##### evt: Event

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:666

### classIf

- classIf<T>(consumable, classes, invert?): CTag

- Adds classes to the element when the consumer is truthy. Updates whenever the consumable changes. You can pass in an array of classes, or a function that returns a list of classes. If {invert} is set to true, the condition will be inversed, but you can also use classIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### classes: string[] | ((self) => string[])

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:309

### classIfNot

- classIfNot<T>(consumable, classes): CTag

- Adds classes to the element when the consumer is falsy. Updates whenever the consumable changes. You can pass in an array of classes, or a function that returns a list of classes. For the oposite you can also use classIf

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### classes: string[] | ((self) => string[])

  #### Returns CTag

  - Defined in tag.ts:323

### clear

- clear(): CTag

- Clears the `value` of the element. If you are getting the value and then clearing, consider using consumeValue

  #### Returns CTag

  - Defined in tag.ts:709

### clicked

- clicked(fn): CTag

- Add a click event listener

  #### Parameters

  - ##### fn: ((tag, evt) => void)

    - - (tag, evt): void

      - #### Parameters

        - ##### tag: CTag

        - ##### evt: MouseEvent

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:648

### config

- config(c): CTag

- Configure the element in a single call by passing

  #### Parameters

  - ##### c: TagConfig

    instead of having to call a method for each property you want to changes

  #### Returns CTag

  - Defined in tag.ts:480

### consume

- consume<T>(consumable, consumer): CTag

- Whenever the consumable changes, it will call the consumer

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### consumer: ((self, newValue?) => void)

    - - (self, newValue?): void

      - #### Parameters

        - ##### self: CTag

        - ##### `Optional` newValue: T

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:235

### destroy

- destroy(): void

- Destroy the element, should not be used afterwards

  #### Returns void

  - Defined in tag.ts:693

### disable

- disable(): CTag

- Disable the element

  #### Returns CTag

  - Defined in tag.ts:717

### disableIf

- disableIf<T>(consumable, invert?): CTag

- Disable this element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use disableIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:387

### disableIfNot

- disableIfNot<T>(consumable): CTag

- Disable this element when the consumer is falsy. Updates whenever the consumable changes.

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  #### Returns CTag

  - Defined in tag.ts:392

### doIf

- doIf<T>(consumable, ifTrue, ifFalse, invert?): CTag

- When the consumable changes, it will call {ifTrue} when the consumable is true. Or {ifFalse} when the consumable is false. If {invert} is set to true, the condition will be inversed, but you can also use doIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### ifTrue: ((value?) => void)

    - - (value?): void

      - #### Parameters

        - ##### `Optional` value: T

        #### Returns void

  - ##### ifFalse: ((value?) => void)

    - - (value?): void

      - #### Parameters

        - ##### `Optional` value: T

        #### Returns void

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:258

### doIfNot

- doIfNot<T>(consumable, ifTrue, ifFalse): CTag

- The oposite of {this.doIf} When the consumable changes, it will call {ifTrue} if the consumable is false. Or {ifFalse} if the consumable is true.

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### ifTrue: ((value) => void)

    - - (value): void

      - #### Parameters

        - ##### value: T

        #### Returns void

  - ##### ifFalse: ((value) => void)

    - - (value): void

      - #### Parameters

        - ##### value: T

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:278

### enable

- enable(): CTag

- Enable the element

  #### Returns CTag

  - Defined in tag.ts:722

### find

- find(predicate): undefined | string | Node | CTag | IConsumable<any>

- Find a child in this element (in the DOM or NOT)

  #### Parameters

  - ##### predicate: ((el) => boolean)

    - - (el): boolean

      - #### Parameters

        - ##### el: TagChild

        #### Returns boolean

  #### Returns undefined | string | Node | CTag | IConsumable<any>

  - Defined in tag.ts:738

### findTag

- findTag(predicate): undefined | CTag

- #### Parameters

  - ##### predicate: ((el) => boolean)

    - - (el): boolean

      - #### Parameters

        - ##### el: CTag

        #### Returns boolean

  #### Returns undefined | CTag

  - Defined in tag.ts:746

### getAttr

- getAttr(attr): any

- Get an attributes value

  #### Parameters

  - ##### attr: string

  #### Returns any

  - Defined in tag.ts:605

### hasAttr

- hasAttr(...attr): boolean

- Check if this element has attributes

  #### Parameters

  - ##### `Rest` ...attr: string[]

  #### Returns boolean

  - Defined in tag.ts:595

### hasClass

- hasClass(...classes): boolean

- Check if classes are present in this element

  #### Parameters

  - ##### `Rest` ...classes: string[]

  #### Returns boolean

  - Defined in tag.ts:518

### hasStyle

- hasStyle<K>(...styles): boolean

- Check if this element has styles

  #### Type Parameters

  - #### K extends CssProperty

  #### Parameters

  - ##### `Rest` ...styles: K[]

  #### Returns boolean

  - Defined in tag.ts:561

### hide

- hide(): Promise<void>

- Hide this element (removed from DOM)

  #### Returns Promise<void>

  - Defined in tag.ts:227

### hideIf

- hideIf<T>(consumable, invert?): CTag

- Hide this element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use hideIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:286

### hideIfNot

- hideIfNot<T>(consumable): CTag

- Hide this element when the consumer is falsy. Updates whenever the consumable changes.

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  #### Returns CTag

  - Defined in tag.ts:300

### keyPressed

- keyPressed(fn, key?): CTag

- Add a keypress event listener

  #### Parameters

  - ##### fn: ((tag, evt) => void)

    - - (tag, evt): void

      - #### Parameters

        - ##### tag: CTag

        - ##### evt: KeyboardEvent

        #### Returns void

  - ##### `Optional` key: string

  #### Returns CTag

  - Defined in tag.ts:653

### listen

- listen<K>(tag, evt, consumer): CTag

- Listen to an event on the element. Like addEventListener.

  #### Type Parameters

  - #### K extends keyof HTMLElementEventMap

  #### Parameters

  - ##### tag: CTag

  - ##### evt: K

  - ##### consumer: ((self, other, evt) => void)

    - - (self, other, evt): void

      - #### Parameters

        - ##### self: CTag

        - ##### other: CTag

        - ##### evt: HTMLElementEventMap[K]

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:444

### on

- on<K>(evtName, fn): CTag

- Add an event listener for a particular event

  #### Type Parameters

  - #### K extends keyof HTMLElementEventMap

  #### Parameters

  - ##### evtName: string | K

  - ##### fn: ((tag, evt) => void)

    - - (tag, evt): void

      - #### Parameters

        - ##### tag: CTag

        - ##### evt: HTMLElementEventMap[K]

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:626

### once

- once<K>(evtName, fn): CTag

- Add an event listener for a particular event that will only fire once

  #### Type Parameters

  - #### K extends keyof HTMLElementEventMap

  #### Parameters

  - ##### evtName: K & string

  - ##### fn: ((tag, evt) => void)

    - - (tag, evt): void

      - #### Parameters

        - ##### tag: CTag

        - ##### evt: HTMLElementEventMap[K]

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:638

### prepend

- prepend(...children): CTag

- #### Parameters

  - ##### `Rest` ...children: TagChildren

  #### Returns CTag

  - Defined in tag.ts:181

### q

- q(selector): undefined | CTag

- Query a child in this element (in the DOM)

  #### Parameters

  - ##### selector: any

  #### Returns undefined | CTag

  - Defined in tag.ts:732

### remove

- remove(): Promise<CTag>

- Remove element from the DOM, but keep data as is. Can then be added again. To fully remove the element use destroy

  #### Returns Promise<CTag>

  - Defined in tag.ts:679

### replaceClass

- replaceClass(targetClass, replaceClass): CTag

- Replace a class with another

  #### Parameters

  - ##### targetClass: string

  - ##### replaceClass: string

  #### Returns CTag

  - Defined in tag.ts:528

### rmAttr

- rmAttr(...attrs): CTag

- Remove attributes from the element

  #### Parameters

  - ##### `Rest` ...attrs: string[]

  #### Returns CTag

  - Defined in tag.ts:586

### rmClass

- rmClass(...classes): CTag

- Remove classes from class list

  #### Parameters

  - ##### `Rest` ...classes: string[]

  #### Returns CTag

  - Defined in tag.ts:510

### rmStyle

- rmStyle(...styleNames): CTag

- Remove styles

  #### Parameters

  - ##### `Rest` ...styleNames: string[]

  #### Returns CTag

  - Defined in tag.ts:553

### setAttrs

- setAttrs(attrs): CTag

- Adds a set of attributes to the element

  #### Parameters

  - ##### attrs: Record<string, undefined | string>

  #### Returns CTag

  - Defined in tag.ts:571

### setChecked

- setChecked(checked): CTag

- #### Parameters

  - ##### checked: boolean

  #### Returns CTag

  - Defined in tag.ts:98

### setChildren

- setChildren(children): CTag

- Sets the children, removes previous children

  #### Parameters

  - ##### children: TagChildren

  #### Returns CTag

  - Defined in tag.ts:169

### setClassName

- setClassName(className): CTag

- Set the elements class name

  #### Parameters

  - ##### className: string

  #### Returns CTag

  - Defined in tag.ts:504

### setDisabled

- setDisabled(disabled): CTag

- Set whether the element should be disabled or not

  #### Parameters

  - ##### disabled: boolean

  #### Returns CTag

  - Defined in tag.ts:727

### setId

- setId(id): CTag

- #### Parameters

  - ##### id: string

  #### Returns CTag

  - Defined in tag.ts:126

### setStyle

- setStyle(styles): CTag

- Set multiple styles at once

  #### Parameters

  - ##### styles: StyleMap

  #### Returns CTag

  - Defined in tag.ts:545

### setValue

- setValue(newValue): CTag

- #### Parameters

  - ##### newValue: string

  #### Returns CTag

  - Defined in tag.ts:89

### show

- show(): Promise<boolean>

- If the element is currently hidden it will add this element to the page wherever it's supposed to be. I will be placed exactly in the correct position, even if there are other elements hidden.

  #### Returns Promise<boolean>

  - Defined in tag.ts:191

### styleIf

- styleIf<T>(consumable, style, value?, invert?): CTag

- Add style to the element when the consumer is truthy. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use styleIfNot {value} can be a string or a function that returns a string.

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### style: string

  - ##### value: string | ((self) => string) = ''

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:401

### styleIfNot

- styleIfNot<T>(consumable, style, value?): CTag

- Add style to the element when the consumer is falsy. Updates whenever the consumable changes. {value} can be a string or a function that returns a string.

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### style: string

  - ##### value: string | ((self) => string) = ''

  #### Returns CTag

  - Defined in tag.ts:414

### stylesIf

- stylesIf<T>(consumable, styles, invert?): CTag

- Add multiple styles to the element when the consumer is truthy. Updates whenever the consumable changes. {styles} can be a StyleMap or a function that returns a StyleMap. If {invert} is set to true, the condition will be inversed, but you can also use stylesIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### styles: StyleMap | ((self) => StyleMap)

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:423

### stylesIfNot

- stylesIfNot<T>(consumable, styles): CTag

- Add multiple styles to the element when the consumer is falsy. Updates whenever the consumable changes. {styles} can be a StyleMap or a function that returns a StyleMap. For the oposite use stylesIf

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### styles: StyleMap | ((self) => StyleMap)

  #### Returns CTag

  - Defined in tag.ts:437

### submited

- submited(fn): CTag

- Add a submit event listener

  #### Parameters

  - ##### fn: ((tag, evt) => void)

    - - (tag, evt): void

      - #### Parameters

        - ##### tag: CTag

        - ##### evt: SubmitEvent

        #### Returns void

  #### Returns CTag

  - Defined in tag.ts:671

### text

- text<T, K, J>(textTemplate?, obj?): J extends string
  ? CTag
  : string

- If {newText} is provided, it sets the `textContent` of the element. If {newText} is provided, and a state is provided. It will use the {newText} as a template, that will be interpolated with the values in the state, each time the state changes. It acts like text

  If no argument is provided, it returns the `textContent` of the element.

  #### Type Parameters

  - #### T extends Record<string, Primitive>

  - #### K extends TextObj

  - #### J extends string

  #### Parameters

  - ##### `Optional` textTemplate: string

  - ##### `Optional` obj: K | IConsumable<T>

  #### Returns J extends string
  ? CTag
  : string

  #### See

  https://github.com/nombrekeff/cardboard-js/wiki/Managing-Text

  - Defined in tag.ts:462

### textIf

- textIf<T>(consumable, text, elseText?, invert?): CTag

- Sets {text} when the consumer is true, and sets {elseText (default='')} when the consumer is false. Both {text} and {elseText} can be a string or a function that returns a string. Updates whenever the consumable changes. If {invert} is set to true, the condition will be inversed, but you can also use textIfNot

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### text: string | ((self) => string)

  - ##### elseText: string | ((self) => string) = ''

  - ##### invert: boolean = false

  #### Returns CTag

  - Defined in tag.ts:333

### textIfNot

- textIfNot<T>(consumable, text, elseText?): CTag

- Sets {text} when the consumer is falsy, and sets {elseText (default='')} when the consumer is truthy. Both {text} and {elseText} can be a string or a function that returns a string. Updates whenever the consumable changes.

  #### Type Parameters

  - #### T

  #### Parameters

  - ##### consumable: IConsumable<T>

  - ##### text: string | ((self) => string)

  - ##### elseText: string | ((self) => string) = ''

  #### Returns CTag

  - Defined in tag.ts:352

### toggleClass

- toggleClass(targetClass): CTag

- Toggle a class. If it's present it's removed, if it's not present its added.

  #### Parameters

  - ##### targetClass: string

  #### Returns CTag

  - Defined in tag.ts:534

### when

- when<K>(evtName, fn): IConsumable<any>

- Returns a IConsumable that fires when the Event evtName is fired in this element

  The return value of fn will be passed to the listeners of the IConsumable

  #### Type Parameters

  - #### K extends keyof HTMLElementEventMap

  #### Parameters

  - ##### evtName: string | K

  - ##### fn: ((self, evt) => any)

    - - (self, evt): any

      - #### Parameters

        - ##### self: CTag

        - ##### evt: HTMLElementEventMap[K]

        #### Returns any

  #### Returns IConsumable<any>

  - Defined in tag.ts:614

Generated using TypeDoc