TALY - The Allianz Library
  1. Components
  2. PlaceholderComponent

File

libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts

Extends

AbstractBuildingBlock

Metadata

providers createBuildingBlockProvider(forwardRef(() => PlaceholderComponent))
selector taly-placeholder-bb
styleUrls taly-placeholder-bb.component.scss
templateUrl taly-placeholder-bb.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

expectedState
Type : PlaceholderComponentState
Default value : {}
Defined in libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts:20
isCompleted
Type : boolean
Default value : true
Defined in libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts:21
purpose
Type : string
Default value : 'Here you should find a description of the purpose of this placeholder at this specific place in the flow'
Defined in libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts:18
title
Type : string
Default value : 'Not implemented yet - placeholder'
Defined in libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts:17
id
Type : any
Default value : dasherize(this.constructor.name)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:135

can be changed during runtime and given as a default by the implemented Building Block
resources
Type : BuildingBlockResources
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:215

The method will be called by the facade and is marked as an @Input. Derived Building Blocks need to list the input in the @Component decorator under inputs:[] to make it available to the template (View Engine limitation).
state
Type : NoArray<BuildingBlockState>
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:265

The method will be called by the facade and is marked as an @Input. Derived Building Blocks need to list the input in the @Component decorator under inputs:[] to make it available to the template (View Engine limitation).

Outputs

completed
Type : EventEmitter
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:152

Mark this Building Block as complete. That way a workflow engine can determine the overall completion state of any given pages. This method can be actively triggered by the user (say a button is clicked) or indirectly by a form being changed.

The author of a Building Block needs to make sure that this function is called during the lifetime of a Building Block. If the Building Block is purely presentational this method can be called during initialization.

Methods

getState
getState()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:42
Returns : PlaceholderComponentState
handleCompletionChanged
handleCompletionChanged()
Defined in libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts:46
Returns : void
onPageConnection
onPageConnection()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:55
Returns : void
setResources
setResources(data: PlaceHolderResources)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:24
Parameters :
Name Type Optional
data PlaceHolderResources No
Returns : void
callBusinessEvent
callBusinessEvent(event: string)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:101

This method creates a Deferred object for the business event given. This will have a newly created promise and their executor parameters resolve & reject. This deferred object is then emitted along with the business event name

The Store Integration(Facade) can then decide when to resolve or reject the underlying promise based on the service activator call attached to the business event.

call's status.

Parameters :
Name Type Optional Description
event string No

name of the business event
Returns : Promise<>

the promise from the deferred. The building block can then be notified on the respective service activator call's status.
commitCompletion
commitCompletion()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:156
Returns : void
getForm
getForm()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:311

This is supposed to return the building block's form. Leave this untouched if your building block implementation does not have a form.

Returns : UntypedFormGroup | undefined
navigate
navigate(type: BUILDING_BLOCK_NAVIGATION_TYPE, payload?: string)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:119
Parameters :
Name Type Optional
type BUILDING_BLOCK_NAVIGATION_TYPE No
payload string Yes
Returns : void
onPageDisconnected
onPageDisconnected()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:179
Returns : void
revertCompletion
revertCompletion()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:161
Returns : void
setState
setState(state: NoArray<BuildingBlockState>)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:274
Parameters :
Name Type Optional
state NoArray<BuildingBlockState> No
Returns : void
setValidationConfiguration
setValidationConfiguration(data: ValidationConfigItem[])
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:181
Parameters :
Name Type Optional
data ValidationConfigItem[] No
Returns : void
stateChanged
stateChanged()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:236
Returns : void
transformResources
transformResources(data: BuildingBlockResources)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:205

Override if you need to pre process the incoming resource data and if you want to establish some default values. The return value will arrive in setResources and stored in the 'resources' variable. Needs to match the Resource Generic of the given Building Block

Parameters :
Name Type Optional
data BuildingBlockResources No
Returns : BuildingBlockResources
transformState
transformState(data: NoArray<BuildingBlockState>)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:255

Override if you need to pre process the incoming state data and if you want to establish some default values. The return value will arrive in setState and stored in the 'state' variable. Needs to match the State Generic of the given Building Block

Parameters :
Name Type Optional
data NoArray<BuildingBlockState> No
Returns : NoArray<BuildingBlockState>

Properties

givenResources
Type : object
Default value : {}
Defined in libs/core/src/lib/taly-placeholder-bb/taly-placeholder-bb.component.ts:22
_aclService
Type : AclService
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:57
aclTag
Type : AclTag | null
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:58
businesssEventCall$
Default value : new EventEmitter<BusinessEvent>()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:64
Readonly channel
Type : CHANNEL
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:60
completion$
Default value : new BehaviorSubject(false)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:154
connected$
Default value : new Subject<void>()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:175

Lifecycle Event called once the Building Block is connected to the page. This can only happen when the Building Block is embed in a Building Block Page This is not intended to be used standalone.

At this point you can be sure that:

  1. The Building Block is ready (AfterViewInit)
  2. The initial state and resources has been set
disconnected$
Default value : new Subject<void>()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:178
Readonly isExpertChannel
Type : boolean
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:62
Readonly isRetailChannel
Type : boolean
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:61
loadingStatus$
Default value : this._loadingStatus$ .asObservable() .pipe( scan(accumulateBusinessEvents, []), map(groupEventStatusesByName), distinctUntilChanged(isEqual) )
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:317
navigateEvent$
Default value : new EventEmitter<BuildingBlockNavigationEvent>()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:65
stateChange$
Default value : new BehaviorSubject({} as BuildingBlockState)
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:235

Call this function to grab the current state and forward it any time your internal state is ready to be forwarded. It's a BehaviorSubject to always deliver the latest state on subscription. TODO: Evaluate if a multicast could help maintaining an more coordiated data stream
trackForm$
Default value : new EventEmitter<UntypedFormGroup>()
Inherited from AbstractBuildingBlock
Defined in AbstractBuildingBlock:74

Can be used to add automatic tracking to a form. Keep in mind that the form that is returned by getForm() is tracked automatically during the initialization.

This only has to be called if there are other forms that should be tracked or if the form is created after the initialization.

 
import { Component, Input, forwardRef } from '@angular/core';
import { createBuildingBlockProvider } from '../building-block/create-building-block-provider';
import { AbstractBuildingBlock } from '../building-block/abstract-building-block';
import { PlaceHolderResources, PlaceholderComponentState } from './taly-placeholder-bb.model';

@Component({
  selector: 'taly-placeholder-bb',
  templateUrl: 'taly-placeholder-bb.component.html',
  styleUrls: ['taly-placeholder-bb.component.scss'],
  providers: [createBuildingBlockProvider(forwardRef(() => PlaceholderComponent))],
  standalone: false
})
export class PlaceholderComponent extends AbstractBuildingBlock<
  PlaceholderComponentState,
  PlaceHolderResources<PlaceholderComponentState>
> {
  @Input() title = 'Not implemented yet - placeholder';
  @Input() purpose =
    'Here you should find a description of the purpose of this placeholder at this specific place in the flow';
  @Input() expectedState: PlaceholderComponentState = {};
  @Input() isCompleted = true;
  givenResources = {};

  override setResources(data: PlaceHolderResources) {
    if (data.title) {
      this.title = data.title;
    }
    if (data.purpose) {
      this.purpose = data.purpose;
    }
    if (data.expectedState) {
      this.expectedState = data.expectedState;
      this.stateChanged();
    }

    this.givenResources = {
      title: data.title,
      purpose: data.purpose
    };
  }

  override getState(): PlaceholderComponentState {
    return this.expectedState;
  }

  handleCompletionChanged() {
    this.isCompleted = !this.isCompleted;
    if (this.isCompleted) {
      this.commitCompletion();
    } else {
      this.revertCompletion();
    }
  }

  override onPageConnection() {
    this.commitCompletion();
  }
}

<div nxRow [rowJustify]="isRetailChannel ? 'center' : 'start'">
  <div class="container with-background" [nxCol]="isRetailChannel ? '8' : '12'">
    <ng-container>
      <div nxRow [rowJustify]="isRetailChannel ? 'center' : 'start'">
        <h2 class="headline" nxHeadline="subsection-small">{{ title }}</h2>
      </div>
      <div nxRow [rowJustify]="isRetailChannel ? 'center' : 'start'" *aclTag="'warning'">
        ⚠️ This Building Block is not intended to be used in production
      </div>
      <p>{{ purpose }}</p>
      <details>
        <summary>Expected State (Output)</summary>
        <pre class="code">{{ expectedState | json }}</pre>
      </details>
      <details>
        <summary>Give Resources (Input)</summary>
        <pre class="code">{{ givenResources | json }}</pre>
      </details>

      <br /><br />
      <div nxRow [rowJustify]="isRetailChannel ? 'center' : 'start'">
        <nx-switcher [checked]="isCompleted" (change)="handleCompletionChanged()" labelSize="small"
          >Mark complete
        </nx-switcher>
      </div>
    </ng-container>
  </div>
</div>

taly-placeholder-bb.component.scss 

$placeholder-bg: #f1f1f5;

:host {
  display: block;
  .container {
    padding: 20px;
    border: 10px dashed orange;
    background-size: 10px 10px;
    &.with-background {
      background-image: repeating-linear-gradient(
        45deg,
        $placeholder-bg 0,
        $placeholder-bg 2px,
        transparent 0,
        transparent 50%
      );
    }
  }
}

.headline {
  margin-bottom: 10px;
}

.code {
  background-color: #ffffff;
  overflow-x: auto;
}
.image-container {
  background-size: contain;
  background-repeat: no-repeat;
}

img {
  max-width: 100%;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""