<repo_name>mszygenda/govuk_single_page_pdk<file_sep>/src/modules/components/navigation/start-bar/start-bar.demo.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  template: require('./start-bar.demo.html')
})
export class StartBarDemo {
  items = [
        {
          description: 'Give remand advice',
          action: 'Start',
          click: function () {
            console.log('clicked');
          }
        }
      ];
}<file_sep>/src/modules/components/data-visualisation/tab/tab.component.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  bindings: {
    heading: '@'
  },
  transclude: true,
  template: `
        <div ng-if="$ctrl.active" class="tabs-panel" id="before-you-start" role="tabpanel">        
          <div class="tabs-panel-inner" tabindex="0"  ng-transclude>
          </div>
        </div>  
  `,
  require: {
    tabsetCtrl: '^govTabset'
  }
})
export class TabComponent {

  heading: string;

  tabsetCtrl: any;

  get active(): boolean {
    return this.tabsetCtrl.isActive(this);
  }

  $onInit(): void {
    this.tabsetCtrl.add(this);
  }

  $onDestroy(): void {
    this.tabsetCtrl.remove(this);
  }
}<file_sep>/src/modules/components/media/image/image.component.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
    bindings: {
        image: '<'
    },
    template: require('./image.component.html')
})
export class ImageComponent {}<file_sep>/src/modules/components/data-visualisation/show-hide-pane/show-hide-pane.demo.html
<h3 class="heading-medium">Show/Hide Pane</h3>
<gov-tabset>

  <gov-tab heading="Angular Markup">
    <docs-example language="markup">
      <!--with default optiones-->
      <gov-show-hide-pane>
        <always-visible>
          This content will always be visible
        </always-visible>
        <hideable>
          this content can bi hidden/shown using the show/hide button
        </hideable>
      </gov-show-hide-pane>

      <!--with custom options-->
      <gov-show-hide-pane show-text="$ctrl.show" hide-text="$ctrl.hide" open="$ctrl.open">
        <always-visible>
          This content will always be visible
        </always-visible>
        <hideable>
          this content can bi hidden/shown using the show/hide button
        </hideable>
      </gov-show-hide-pane>

    </docs-example>
  </gov-tab>

  <gov-tab heading="Data">
    <prismify language="javascript">
      This component does not require any data. However, The following attributes are optional:
      open: boolean
      showText: string
      hideText: string

      Example:
      open = false;
      show = 'Open';
      hide = 'Close';
    </prismify>
  </gov-tab>

</gov-tabset>

<discuss-component issue="28"></discuss-component><file_sep>/src/modules/components/data-visualisation/summary-item/summary-item.component.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  bindings: {
    value: '<',
    itemDescription: '<',
    action: '&?'
  },
  template: require('./summary-item.component.html')
})
export class SummaryItemComponent {
  value: any;

  isNumber(): boolean {
    return angular.isNumber(this.value);
  }

  isBoolean(): boolean {
    return typeof(this.value) === 'boolean';
  }
}<file_sep>/src/modules/components/media/image/image.demo.ts
import {Component} from '@govuk/angularjs-devtools';

@Component({
  template: require('./image.demo.html')
})
export class ImageDemoComponent {
  image = {
    src: 'assets/images/justice.jpg',
    title: 'Test image title',
    metadata: [
      {
        key: 'date taken',
        value: '2016 05 19'
      },
      {
        key: 'copyright',
        value: 'none'
      }
    ]
  };
}<file_sep>/src/modules/components/data-visualisation/digit-box/digit-box.component.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  bindings: {
    digit: '<'
  },
  template: `<div class="gov-digit-box" ng-bind="$ctrl.digit"></div>`
})
export class DigitBoxComponent {}<file_sep>/src/modules/components/navigation/completed-bar/completed-bar.demo.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  template: require('./completed-bar.demo.html')
})
export class CompletedBarDemo {
  items = [
        {
          description: 'Provided plea issues',
          subDescription: 'Acceptable for a guilty plea to s.20 wounding or inflicitng grievous bodily..',
          action: 'Amend',
          state: '',
          click: function () {
            console.log('clicked');
          }
        },
        {
          description: 'Proposed charge authorised',
          subDescription: '',
          action: 'Amend',
          state: 'Saved',
          click: function () {
            console.log('clicked');
          }
        }
      ];
}<file_sep>/src/modules/components/navigation/breadcrumbs/breadcrumbs.demo.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  template: require('./breadcrumbs.demo.html')
})
export class BreadcrumbsDemo {}<file_sep>/src/modules/components/data-visualisation/tab/tab.demo.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
    template: require('./tab.demo.html')
})
export class TabDemo {}<file_sep>/src/modules/components/data-visualisation/tab/tabset.component.ts
import { Component } from '@govuk/angularjs-devtools';
import { TabComponent } from './tab.component';

@Component({
  template: `
  <div class="tabs">
    <ul class="tabs-list" role="tablist">
      <li role="presentation" ng-repeat="tab in $ctrl.tabs">
        <a ng-click="$ctrl.select(tab)" role="tab" 
        tabindex="{{ tab.active ? '0':'-1'}}" aria-selected="{{ tab.active ? 'true':'false'}}" 
        aria-controls="{{tab.heading}}" ng-bind="tab.heading"></a>
      </li>    
    </ul>
  </div>
  <div class="tabs-content" ng-transclude></div>`,
  transclude: true
})
export class TabsetComponent {

  tabs: TabComponent[] = [];
  selected: TabComponent;

  add(tab: TabComponent): void {
    this.tabs.push(tab);
    if (!this.selected) {
      this.select(tab);
    }
  }

  isActive(tab: TabComponent): boolean {
    return tab === this.selected;
  }

  remove(tab: TabComponent): void {
    const idx = this.tabs.indexOf(tab);
    if (idx > -1) {
      this.tabs.splice(idx, 1);
    }
    this.select(this.tabs[0]);
  }

  select(tab: TabComponent): void {
    this.selected = tab;
  }
}<file_sep>/src/modules/components/navigation/next-previous-navigation/next-previous-navigation.component.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  bindings: {
    navigation: '<'
  },
  template: require('./next-previous-navigation.component.html')
})
export class NextPreviousNavigationComponent {}<file_sep>/src/modules/components/banners/notification/notification.component.ts
import { Component } from '@govuk/angularjs-devtools';

@Component({
  bindings: {
    type:     '@',
    showIcon: '<'
  },
  transclude: true,
  template: `
    <div class="gov-notification {{$ctrl.type}}">
      <i class="gov-icon" ng-if="$ctrl._showIcon"></i>
      <div class="gov-notification-body" ng-transclude>
      </div>
    </div>  
  `
})
export class NotificationComponent {

  showIcon:  boolean;
  _showIcon: boolean;

  $onChanges() {
    this._showIcon = this.showIcon === undefined ? true : this.showIcon;
  }
}<file_sep>/src/modules/components/navigation/navigation.ts
import { ActionPaneComponent } from './action-pane/action-pane.component';
import { ArrowComponent } from './arrow/arrow.component';
import { BadgeItemComponent} from './badge-item/badge-item.component';
import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
import { CompletedBarComponent} from './completed-bar/completed-bar.component';
import { NextPreviousNavigationComponent } from './next-previous-navigation/next-previous-navigation.component';
import { SideMenuComponent} from './menus/side-menu/side-menu.component';
import { TopMenuComponent} from './menus/top-menu/top-menu.component';
import { StartBarComponent} from './start-bar/start-bar.component';

const module = angular.module('govuk-single-page-pdk.components.navigation', [])

  .component('govActionPane', ActionPaneComponent)
  .component('govArrow', ArrowComponent)
  .component('govBadgeItem', BadgeItemComponent)
  .component('govBreadcrumbs', BreadcrumbsComponent)
  .component('govCompletedBar', CompletedBarComponent)
  .component('govNextPreviousNavigation', NextPreviousNavigationComponent)
  .component('govSideMenu', SideMenuComponent)
  .component('govTopMenu', TopMenuComponent)
  .component('govStartBar', StartBarComponent);

export default module.name;