How to use the aurelia-framework.children function in aurelia-framework

}
  // unbind() { }
  // end aurelia hooks

  private tether;
  private isOverflow = false;

  private wrapper: Element;
  private overflow: Element;
  private overflowToggle: Element;

  private obClick;
  private obResize;

  @bindable() height = "auto";
  @children('ui-tab') tabs = [];
  @bindable({ defaultBindingMode: bindingMode.twoWay }) activeTab: any = 0;


  private noTabs = false;
  private activeTabEl;

  private tabsChanged() {
    if (!this.activeTabEl && this.tabs.length > 0 && _.find(this.tabs, ['active', true]) == null)
      this.activateTab(_.find(this.tabs, ['disabled', false]));
    UIEvent.queueTask(() => this.arrange());
  }

  private activeTabChanged(newValue) {
    if (this.tabs.length == 0) return;
    let tab = (_.find(this.tabs, ['id', newValue]) || this.tabs[newValue] || this.activeTabEl);
    if (this.activeTabEl) this.activeTabEl.active = false;

// @license     : MIT
import {autoinject, bindable, containerless, customElement, inlineView, children, DOM} from "aurelia-framework";
import {UIEvent} from "../../utils/ui-event";
import * as _ from "lodash";

@autoinject()
@customElement('ui-panel-group')
@inlineView(`<template class="ui-panel-group"></template>`)
export class UIPanelGroup {
  constructor(public element: Element) { }

  attached() {
    if (_.find(this.panels, ['collapsed', false]) == null) this.panels[0].collapsed = false;
  }

  @children('ui-panel') panels;

  __unCollapse() {
    let panel: any = _.find(this.panels, ['collapsed', false])
    if (panel) panel.collapsed = true;
  }
}

@autoinject()
@customElement('ui-panel')
@inlineView(`<template class="ui-panel \${collapsed?'ui-collapse':''}"></template>`)
export class UIPanel {
  constructor(public element: Element) {
    this.collapsed = element.hasAttribute('collapsed');
  }

  closePanel() {

// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2016 Sigma Frameworks
// @license     : MIT

import {autoinject, customElement, bindable, inlineView, children} from "aurelia-framework";
import {_} from "../utils/ui-utils";

@autoinject()
@customElement('ui-tab-panel')
export class UITabPanel {
    private __tabs;
    private __tabButtons;
    private __selectedTab;

    @children('.ui-tab-body ui-tab')
    tabs = [];

    @bindable
    activeTab = 0;

    constructor(public element: Element) {
    }

    bind() {
    }

    attached() {
        this.activeTabChanged(this.activeTab);
    }

this.buttons.forEach(b => b.element.dataset.separator = this.separator);
    }
    valueChanged(newValue) {
        if (this.active)
            this.active.element.classList.remove('ui-active');
        if (this.buttons.length > 0 && (this.active = _.find(this.buttons, (b) => b.value === this.value)))
            this.active.element.classList.add('ui-active');
        UIEvent.fireEvent('change', this.element, this.value);
    }
    clickEvent(evt) {
        if (evt.target.dataset['value'])
            this.value = evt.target.dataset['value'];
    }
};
__decorate([
    children('ui-button'),
    __metadata("design:type", Object)
], UIButtonGroup.prototype, "buttons", void 0);
__decorate([
    bindable({ defaultBindingMode: bindingMode.twoWay }),
    __metadata("design:type", Object)
], UIButtonGroup.prototype, "value", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UIButtonGroup.prototype, "separator", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UIButtonGroup.prototype, "disabled", void 0);
UIButtonGroup = __decorate([
    autoinject(),

_tslib.__metadata("design:type", String)
    ], UIButtonGroup.prototype, "size", void 0);
    _tslib.__decorate([
        aureliaFramework.bindable(),
        _tslib.__metadata("design:type", String)
    ], UIButtonGroup.prototype, "type", void 0);
    _tslib.__decorate([
        aureliaFramework.bindable(),
        _tslib.__metadata("design:type", Boolean)
    ], UIButtonGroup.prototype, "disabled", void 0);
    _tslib.__decorate([
        aureliaFramework.child("ui-button[data-active='true']"),
        _tslib.__metadata("design:type", UIButton)
    ], UIButtonGroup.prototype, "currentSelected", void 0);
    _tslib.__decorate([
        aureliaFramework.children("ui-button"),
        _tslib.__metadata("design:type", Array)
    ], UIButtonGroup.prototype, "buttons", void 0);
    _tslib.__decorate([
        aureliaFramework.computedFrom("disabled", "elDisabled"),
        _tslib.__metadata("design:type", Boolean),
        _tslib.__metadata("design:paramtypes", [])
    ], UIButtonGroup.prototype, "isDisabled", null);
    UIButtonGroup = _tslib.__decorate([
        aureliaFramework.autoinject(),
        aureliaFramework.customElement("ui-button-group"),
        aureliaFramework.inlineView("<template data-type.bind="\&quot;type\&quot;" data-size.bind="\&quot;size\&quot;" data-disabled.bind="\&quot;isDisabled\&quot;" class="\&quot;ui-btn__group\&quot;"></template>"),
        _tslib.__metadata("design:paramtypes", [Element])
    ], UIButtonGroup);
    return UIButtonGroup;
}());

if (element.hasAttribute('padded')) element.classList.add('ui-pad-all');
    if (element.hasAttribute('compact')) element.classList.add('ui-compact');
  }
}

@autoinject()
@inlineView(`<template class="ui-panel-group"></template>`)
@customElement('ui-panel-group')
export class UIPanelGroup {
  constructor(public element: Element) {
    this.allowtoggle = element.hasAttribute('toggle');
  }
  attached() {
    if (_.find(this.panels, ['collapsed', false]) == null) this.panels[0].collapsed = false;
  }
  @children('ui-panel') panels;

  private allowtoggle = false;

  private uncollapse() {
    let panel: any = _.find(this.panels, ['collapsed', false])
    if (this.allowtoggle &amp;&amp; panel) panel.collapsed = true;
  }
}

@autoinject()
@inlineView(`<template class="ui-header"></template>`)
@customElement('ui-header')
export class UIHeader {
  constructor(public element: Element) {
  }
}

export class UIButtonGroup {
  @bindable({ bindingMode: bindingMode.twoWay })
  public value: string = "";
  @bindable()
  public separator: string = "";

  @bindable()
  public size: "nm" | "sm" | "md" | "lg" = "nm";
  @bindable()
  public type: "default" | "outline" | "solid" | "tool" = "default";
  @bindable()
  public disabled: boolean = false;

  @child("ui-button[data-active='true']")
  private currentSelected: UIButton;
  @children("ui-button")
  private buttons: UIButton[];

  private readonly toggle: boolean = false;

  private elDisabled: boolean = false;

  constructor(protected element: Element) {
    if (element.hasAttribute("equal")) {
      element.classList.add("ui-btn__group--equal");
    }
    if (element.hasAttribute("vertical")) {
      element.classList.add("ui-btn__group--vertical");
    }
    this.toggle = element.hasAttribute("toggle");
  }

export class AureliaForm {
  @bindable behavior = '';

  @bindable classes = '';

  @bindable entity;

  @bindable validated = true;

  @bindable buttonOptions;

  @bindable buttonLabel;

  @bindable buttonEnabled;

  @children('form-group') formGroups = [];

  validationController;

  mapped = {};

  element;

  validateTrigger;

  constructor(config, element) {
    this.config        = config;
    this.element       = element;
    this.buttonEnabled = config.submitButton.enabled;
    this.buttonOptions = config.submitButton.options;
    this.buttonLabel   = config.submitButton.label;

UIInternal.queueTask(() => {
            GridderUtils.cells = this.cells;
            GridderUtils.rowCount = Math.floor(this.element.firstElementChild.offsetHeight / GridderUtils.minHeight);
        });
    }
    startDrag($event) {
        GridderUtils.startMove($event);
        return true;
    }
    stopDrag($event) {
        GridderUtils.finishMove($event);
        return true;
    }
};
__decorate([
    children("ui-gridder-cell"),
    __metadata("design:type", Object)
], UIGridder.prototype, "cells", void 0);
UIGridder = __decorate([
    customElement("ui-gridder"),
    inlineView(view$1),
    __metadata("design:paramtypes", [Element])
], UIGridder);
const Gridder = [UIGridder, UIGridderCell];

export { Gridder };
//# sourceMappingURL=ui-gridder.js.map

function UIPanelGroup(element) {
        this.element = element;
        this.allowtoggle = false;
        this.allowtoggle = element.hasAttribute('toggle');
    }
    UIPanelGroup.prototype.attached = function () {
        if (_.find(this.panels, ['collapsed', false]) == null)
            this.panels[0].collapsed = false;
    };
    UIPanelGroup.prototype.uncollapse = function () {
        var panel = _.find(this.panels, ['collapsed', false]);
        if (this.allowtoggle && panel)
            panel.collapsed = true;
    };
    __decorate([
        aurelia_framework_1.children('ui-panel'),
        __metadata("design:type", Object)
    ], UIPanelGroup.prototype, "panels", void 0);
    UIPanelGroup = __decorate([
        aurelia_framework_1.autoinject(),
        aurelia_framework_1.inlineView("<template class="\&quot;ui-panel-group\&quot;"></template>"),
        aurelia_framework_1.customElement('ui-panel-group'),
        __metadata("design:paramtypes", [Element])
    ], UIPanelGroup);
    return UIPanelGroup;
}());
exports.UIPanelGroup = UIPanelGroup;