web-components

Collection of native web components to work with layouts in Watson Content Hub.

Details

Refer to the documentation.

Changes

CHANGELOG

Class documentation

Refer to the documentation.

Usage

Install the library as a dependency to your project, e.g. via:

``bash npm install --save @ibm-wch-sdk/web-components`

Bootstrap the registration of the web components as part of the bootstrap process of your application:

`typescript import { initSdkComponents } from '@ibm-wch-sdk/web-components';

initSdkComponents();`

#### Custom layouts

Custom layouts have to be implemented by your application. The layout template as mananaged in WCH matches the name of the custom element. The wch-contentref will figure out which layout is mapped to the addressed content and will instantiate the matching custom element accordingly.

Custom layouts should accept the following attributes:

* layoutmode: name of the layout mode used to render the component. When not specified this should fallback to default.

Custom layouts should accept the following properties:

* layoutMode: same as the layoutmodeattribute, but accessible as a property. Also note the camel case name. *renderingContext: the RenderingContext that identifies the addressed content item. Implementations are advised to use the wch-contentref to render referenced content (or content from search).

`Components`

The library defines the following web components:

* wch-contentref: used to render a content item from a reference * wch-page: used to do routing according to the WCH configuration

TODO

`Changelog`

`Current`

Defined in base/abstract.base.component.ts:16

___

@ibm-wch-sdk/web-components > "base/abstract.rendering.component"

`External module: "base/abstract.rendering.component"`

`Index`

`$3`

* AbstractRenderingComponent

---

@ibm-wch-sdk/web-components > "content/content.component"

`External module: "content/content.component"`

`Index`

`$3`

* ContentComponent

@ibm-wch-sdk/web-components > "contentref/content.ref.component"

`External module: "contentref/content.ref.component"`

`Index`

Defined in contentref/content.ref.component.ts:31

___

`Functions`

`$3`

▸ getType(aLayoutMode: string \| undefined, aRenderingContext: RenderingContext, aRegistry: CustomElementRegistry): Observable<string>

Defined in contentref/content.ref.component.ts:67

Parameters:

| Name | Type | | ------ | ------ | | aLayoutMode |string \| undefined| | aRenderingContext |RenderingContext| | aRegistry |CustomElementRegistry |

Returns: Observable<string>

___

`$3`

▸ resolveLayout(aLayout: Layout, aRegistry: CustomElementRegistry): Observable<string>

Defined in contentref/content.ref.component.ts:42

Parameters:

| Name | Type | | ------ | ------ | | aLayout |Layout| | aRegistry |CustomElementRegistry |

Returns: Observable<string>

___

`Object literals`

`$3`

LAYOUT_NOT_FOUND_LAYOUT: object

Defined in contentref/content.ref.component.ts:37

#### template

● template: string = _DEFAULT_LAYOUT

Defined in contentref/content.ref.component.ts:39

___

#### templateType

● templateType: string = LAYOUT_TYPE_ANGULAR

Defined in contentref/content.ref.component.ts:38

___

`$3`

PAGE_NOT_FOUND_LAYOUT: object

Defined in contentref/content.ref.component.ts:33

#### template

● template: string = _PAGE_NOT_FOUND_LAYOUT

Defined in contentref/content.ref.component.ts:35

___

#### templateType

● templateType: string = LAYOUT_TYPE_ANGULAR

Defined in contentref/content.ref.component.ts:34

___

@ibm-wch-sdk/web-components > "contentref/index"

`External module: "contentref/index"`

`Index`

---

@ibm-wch-sdk/web-components > "decorators/layout.decorator"

`External module: "decorators/layout.decorator"`

`Index`

`$3`

* LAYOUT_SYMBOL

`$3`

* LayoutComponent * _getSelectors * registerLayoutComponents

---

`Variables`

`$3`

| Name | Type | Description | | ------ | ------ | ------ | | aComponents |any[] | the components |

Returns: void

___

@ibm-wch-sdk/web-components > "decorators/layout.directive"

`External module: "decorators/layout.directive"`

`Index`

`$3`

* LayoutComponentDirective

---

@ibm-wch-sdk/web-components > "dom/document"

`External module: "dom/document"`

`Index`

`$3`

`$3`

| Name | Type | | ------ | ------ | |Optional aDoc | Document` |

**Return

web-components

Collection of native web components to work with layouts in Watson Content Hub.

Details

Refer to the documentation.

Changes

CHANGELOG

Class documentation

Refer to the documentation.

Usage

Install the library as a dependency to your project, e.g. via:

``bash npm install --save @ibm-wch-sdk/web-components`

Bootstrap the registration of the web components as part of the bootstrap process of your application:

`typescript import { initSdkComponents } from '@ibm-wch-sdk/web-components';

initSdkComponents();`

The components depend on the existence of an implementation of the @ibm-wch-sdk/api in the global namespace. You can use e.g. one of the following implementations:

* For a standalone application, bootstrap the @ibm-wch-sdk/services implementation. * Use the custom components as part of an Angular application.

`Build`

`$3`

When using webpack make the following modification to the webpack.config.js to pull in the ES6 code:

`javascript module.exports = { resolve: { mainFields: ['es2015', 'browser', 'module', 'main'] } }`Note howes2015 gets prepended to the default lookup chain.

`Layouts`

This package of custom web components assist in rendering pages that can be managed by a business user using the WCH UI. The main building blocks are pages and layouts.

`$3`

The page structure can be managed in WCH. Each page has a path and points to renderable content.

Use the wch-page component to do the URL resolution and to display the configured content item for a page.

`$3`

Use the wch-contentref component to render the layout for a particular content item.

#### Custom layouts

Custom layouts should accept the following attributes:

* layoutmode: name of the layout mode used to render the component. When not specified this should fallback to default.

Custom layouts should accept the following properties:

`Components`

The library defines the following web components:

* wch-contentref: used to render a content item from a reference * wch-page: used to do routing according to the WCH configuration

TODO

`Changelog`

`Current`

`$3`

* Initial version

`@ibm-wch-sdk/web-components`

`Index`

`$3`

---

@ibm-wch-sdk/web-components > "base/abstract.base.component"

`External module: "base/abstract.base.component"`

`Index`

`$3`

* AbstractBaseComponent

`$3`

@ibm-wch-sdk/web-components > "contentref/content.ref.component"

`External module: "contentref/content.ref.component"`

`Index`

`$3`

* ContentRefComponent

`$3`

* LOGGER * _DEFAULT_LAYOUT * _PAGE_NOT_FOUND_LAYOUT

`$3`

* getType * resolveLayout

`Functions`

`$3`

▸ getType(aLayoutMode: string \| undefined, aRenderingContext: RenderingContext, aRegistry: CustomElementRegistry): Observable<string>

Defined in contentref/content.ref.component.ts:67

Parameters:

| Name | Type | | ------ | ------ | | aLayoutMode |string \| undefined| | aRenderingContext |RenderingContext| | aRegistry |CustomElementRegistry |

Returns: Observable<string>

___

`$3`

▸ resolveLayout(aLayout: Layout, aRegistry: CustomElementRegistry): Observable<string>

Defined in contentref/content.ref.component.ts:42

Parameters:

| Name | Type | | ------ | ------ | | aLayout |Layout| | aRegistry |CustomElementRegistry |

Returns: Observable<string>

___

`Object literals`

`$3`

LAYOUT_NOT_FOUND_LAYOUT: object

Defined in contentref/content.ref.component.ts:37

#### template

● template: string = _DEFAULT_LAYOUT

Defined in contentref/content.ref.component.ts:39

___

#### templateType

● templateType: string = LAYOUT_TYPE_ANGULAR

Defined in contentref/content.ref.component.ts:38

___

`$3`

PAGE_NOT_FOUND_LAYOUT: object

Defined in contentref/content.ref.component.ts:33

#### template

● template: string = _PAGE_NOT_FOUND_LAYOUT

Defined in contentref/content.ref.component.ts:35

___

#### templateType

● templateType: string = LAYOUT_TYPE_ANGULAR

Defined in contentref/content.ref.component.ts:34

___

@ibm-wch-sdk/web-components > "contentref/index"

`External module: "contentref/index"`

`Index`

---

@ibm-wch-sdk/web-components > "decorators/layout.decorator"

`External module: "decorators/layout.decorator"`

`Index`

`$3`

* LAYOUT_SYMBOL

`$3`

* LayoutComponent * _getSelectors * registerLayoutComponents

---

`Variables`

`$3`

| Name | Type | Description | | ------ | ------ | ------ | | aComponents |any[] | the components |

Returns: void

___

@ibm-wch-sdk/web-components > "decorators/layout.directive"

`External module: "decorators/layout.directive"`

`Index`

`$3`

* LayoutComponentDirective

---

@ibm-wch-sdk/web-components > "dom/document"

`External module: "dom/document"`

`Index`

`$3`

| Name | Type | | ------ | ------ | |Optional aDoc | Document` |

**Return

@ibm-wch-sdk/web-components

Dist Tags

web-components

Details

Changes

Class documentation

Usage

Build

$3

Layouts

$3

$3

Components

Changelog

Current

$3

@ibm-wch-sdk/web-components

Index

$3

External module: "base/abstract.base.component"

Index

$3

$3

Variables

$3

External module: "base/abstract.rendering.component"

Index

$3

External module: "content/content.component"

Index

$3

$3

Variables

$3

$3

$3

$3

$3

External module: "contentref/content.ref.component"

Index

$3

$3

$3

$3

Variables

$3

$3

$3

Functions

$3

$3

Object literals

$3

$3

External module: "contentref/index"

Index

External module: "decorators/layout.decorator"

Index

$3

$3

Variables

$3

Functions

$3

$3

$3

External module: "decorators/layout.directive"

Index

$3

External module: "dom/document"

Index

$3

$3

Variables

$3

$3

$3

$3

$3

$3

`Build`

`$3`

`Layouts`

`$3`

`$3`

`Components`

`Changelog`

`Current`

`$3`

`@ibm-wch-sdk/web-components`

`Index`

`$3`

`External module: "base/abstract.base.component"`

`Index`

`$3`

`$3`

`Variables`

`$3`

`External module: "base/abstract.rendering.component"`

`Index`

`$3`

`External module: "content/content.component"`

`Index`

`$3`

`$3`

`Variables`

`$3`

`$3`

`$3`

`$3`

`$3`

`External module: "contentref/content.ref.component"`

`Index`

`$3`

`$3`

`$3`

`$3`

`Variables`

`$3`

`$3`

`$3`

`Functions`

`$3`

`$3`

`Object literals`

`$3`

`$3`

`External module: "contentref/index"`

`Index`

`External module: "decorators/layout.decorator"`

`Index`

`$3`

`$3`

`Variables`

`$3`

`Functions`

`$3`

`$3`

`$3`

`External module: "decorators/layout.directive"`

`Index`

`$3`

`External module: "dom/document"`

`Index`

`$3`

`$3`

`Variables`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`