import {
    {{#each imports}}
    {{{this}}},
    {{/each}}
    LayoutComponent
} from '@ibm-wch-sdk/ng';
import { Component } from '@angular/core';
import { {{{baseClassName}}} } from '{{{baseFileName}}}';

/** Useful imports */
// import { map, takeUntil, distinctUntilChanged } from 'rxjs/operators';

/*
{{#if name}}
 * @name {{{name}}}
{{/if}}
{{#if id}}
 * @id {{{id}}}
{{/if}}
{{#if description}}
 * @description {{{description}}}
{{/if}}
{{#if creator}}
 * @author {{{creator}}}
{{/if}}
 */
@LayoutComponent({
    selector: '{{{jsEscape layoutTemplate}}}'
})
@Component({
  /**
  * Consider to code your component such that all elements will be immutable and that it only
  * depends on its inputs. This can e.g. be achieved by basing all state changes on observables.
  *
  * @see https://angular-2-training-book.rangle.io/handout/change-detection/change_detection_strategy_onpush.html
  *
  * import { ChangeDetectionStrategy } from '@angular/core';
  */
  // changeDetection: ChangeDetectionStrategy.OnPush,
  selector: '{{{jsEscape selector}}}',
  templateUrl: '{{{jsEscape templateUrl}}}',
  styleUrls: ['{{{jsEscape styleUrl}}}'],
  preserveWhitespaces: false
})
export class {{{className}}} extends {{{baseClassName}}} {

    /*
     * TODO add custom fields here. These fields should be those
     * specific to this layout.
     */

    constructor() {
        super();
        /*
         * TODO initialize your custom fields here, note that
         * you can refer to the values bound via @RenderingContextBinding from
         * your super class.
         *
         * Make sure to call 'this.safeSubscribe' if you plan to subscribe to observables
         */
    }

}