Options
All
  • Public
  • Public/Protected
  • All
Menu

Class FieldBuilder<E>

The builder binds a property to an attribute. So that, the value is available and mutable from both sides.

Because of the binding with an attribute, the type of the property has to be either a string or a boolean. That means, the kind of the field can be String or Boolean. The default kind of field is String, the switch to Boolean has to be done explicitly with FieldBuilder.boolean.

By default, the name of the attribute is the the kebab case (KebabCase_notation => kebab-case-notation) of the property name. However, the attribute name can be overridden with FieldBuilder.attribute.

The listeners of the field values are simple callback functions, c.f. FieldListener. They can be registered with FieldBuilder.listener.

Finally, the builder can be registered using the method ElementBuilder.builder of the main builder (i.e. ElementBuilder). However, it can also be registered with the decorative style using the decorator FieldBuilder.decorate.

Type parameters

  • E: HTMLElement = HTMLElement

    the type of the Custom Element

Hierarchy

  • FieldBuilder

Implements

Index

Constructors

Properties

Methods

Constructors

Private constructor

  • Type parameters

    • E: HTMLElement = HTMLElement

    Returns FieldBuilder<E>

Properties

Private Optional _attrName

_attrName?: any

Private _isBoolean

_isBoolean: any

Private _listeners

_listeners: any

Private Optional _propName

_propName?: any

Private decorateMethod

decorateMethod: any

Private decorateProperty

decorateProperty: any

Private mergeBuilder

mergeBuilder: any

Methods

attribute

  • Override the default attribute name.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        name = "World"
        connectedCallback() {
            this.textContent = `Hello, ${this.name}!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        FieldBuilder.get("name").attribute("alt-name")
    ).register()

    Parameters

    • attrName: string

      the attribute name

    Returns FieldBuilder<E>

boolean

  • Override the kind of the field.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        show = true
        connectedCallback() {
            this.textContent = `Hello, ${this.show ? "World" : "<i>hidden</i>"}!`
        }
    }
    ElementBuilder.get(HelloWorld).builder(
        FieldBuilder.get("show").boolean()
    ).register()

    Returns FieldBuilder<E>

Protected build

decorate

  • decorate(): PropertyDecorator
  • decorate(prefix?: string): MethodDecorator

  • Decorates the property of the field.

    When the property name is not specified (i.e. @FieldBuilder.get()), then it's discovered from the decorated method name. The pattern is <prefix><PropertyNameInCamelCase>, where <prefix> is by default on.

    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @FieldBuilder.get().boolean().decorate()
        show = true
        connectedCallback() {
            this.textContent = `Hello, ${this.show ? "World" : "<i>hidden</i>"}!`
        }
    }

    Returns PropertyDecorator

  • Decorates the listener method which is invoked each time the field value mutate.

    When the property name is not specified (i.e. @FieldBuilder.get()), then it's discovered from the decorated method name. The pattern is <prefix><PropertyNameInCamelCase>, where <prefix> is by default on.

    example

    Discovery of the property name

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @FieldBuilder.get().decorate()
        value = "World"
        @FieldBuilder.get().decorate()
        onValue(data) {
            this.textContent = `Hello, ${this.value}!`
        }
    }
    example

    Discovery of the property name with a custom prefix

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @FieldBuilder.get().decorate()
        value = "World"
        @FieldBuilder.get().decorate("listen")
        listenValue(data) {
            this.textContent = `Hello, ${this.value}!`
        }
    }
    example

    Skip the property name discovery

    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    @ElementBuilder.get<HelloWorld>().decorate()
    class HelloWorld extends HTMLElement {
        @FieldBuilder.get().decorate()
        value = "World"
        @FieldBuilder.get("value").decorate()
        listen(data) {
            this.textContent = `Hello, ${this.value}!`
        }
    }

    Parameters

    • Optional prefix: string

      the prefix used to discover the property name from the method name

    Returns MethodDecorator

listener

  • Register a listener which will be invoked when the field value mutate.

    A listener is callback function (FieldListener) which have two arguments:

    1. the custom element
    2. the data describing the mutation c.f. FieldListenerData
    example
    import {ElementBuilder} from "@tmorin/ceb-elements-core"
    import {FieldBuilder} from "@tmorin/ceb-elements-builders"
    class HelloWorld extends HTMLElement {
        name = "World"
    }
    ElementBuilder.get(HelloWorld).builder(
        FieldBuilder.get("name")
            .listener((el, data) =>
                el.textContent = `Hello, ${data.newVal}!`)
    ).register()

    Parameters

    Returns FieldBuilder<E>

Static get

  • Provide a fresh builder.

    Type parameters

    • E: HTMLElement

      the type of the Custom Element

    Parameters

    Returns FieldBuilder<E>

Generated using TypeDoc