How to use the aurelia-framework.bindingMode.twoWay function in aurelia-framework

@viewResources(InputWrapper, UIDate)
@inlineView(`<template class="ui-input \${classes}">
  
    
    <input size="1" role="textbox">
  
  
    
  
</template>`)
export class UIDateInput extends BaseInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay })
  public date: Date | string = new Date();

  @bindable()
  public minDate: string;
  @bindable()
  public maxDate: string;
  @bindable()
  public disabledDays: number[];
  @bindable()
  public disabledDates: (({ date }) =&gt; boolean) | string[];

  @bindable()
  public placeholder: string = "";

  @bindable()
  public errors: string | string[];

Object['define' + 'Property'](target, property, desc);
		desc = null;
	}

	return desc;
}

function _initializerWarningHelper(descriptor, context) {
	throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { bindable, customElement, inject, DOM, bindingMode } from 'aurelia-framework';
import { MDCTextField } from '@material/textfield/dist/mdc.textfield.min';
import { MDCNotchedOutline } from '@material/notched-outline/dist/mdc.notchedOutline.min';

export let MdcTextField = (_dec = customElement('mdc-text-field'), _dec2 = inject(Element), _dec3 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = _dec2(_class = (_class2 = class MdcTextField {

	constructor(element) {
		_initDefineProp(this, 'label', _descriptor, this);

		_initDefineProp(this, 'value', _descriptor2, this);

		_initDefineProp(this, 'disabled', _descriptor3, this);

		_initDefineProp(this, 'required', _descriptor4, this);

		_initDefineProp(this, 'type', _descriptor5, this);

		_initDefineProp(this, 'secondarylabel', _descriptor6, this);

		_initDefineProp(this, 'modifier', _descriptor7, this);

};
    UIDatePicker.prototype.cancelSelection = function () {
        this.currentPage = CALENDAR_VIEWS.DAYS;
    };
    UIDatePicker.prototype.selectPreset = function (preset) {
        this.cancelSelection();
        this.date = preset;
    };
    UIDatePicker.prototype.updateDate = function (dt, tm) {
        if (tm === void 0) { tm = this.time; }
        dt.setHours(tm.getHours());
        dt.setMinutes(tm.getMinutes());
        this.date = dt.toISOString();
    };
    __decorate([
        bindable({ defaultBindingMode: bindingMode.twoWay }),
        __metadata("design:type", String)
    ], UIDatePicker.prototype, "date", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], UIDatePicker.prototype, "minDate", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], UIDatePicker.prototype, "maxDate", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", Object)
    ], UIDatePicker.prototype, "disabledDates", void 0);
    __decorate([
        bindable(),

], AuDatatableFilterComponent.prototype, "onFilter", void 0);
    __decorate([
        bindable
    ], AuDatatableFilterComponent.prototype, "columns", void 0);
    __decorate([
        bindable
    ], AuDatatableFilterComponent.prototype, "btnClasses", void 0);
    __decorate([
        bindable
    ], AuDatatableFilterComponent.prototype, "filters", void 0);
    __decorate([
        bindable
    ], AuDatatableFilterComponent.prototype, "labelClearFilter", void 0);
    __decorate([
        bindable({
            defaultBindingMode: bindingMode.twoWay,
        })
    ], AuDatatableFilterComponent.prototype, "parameters", void 0);
    AuDatatableFilterComponent = __decorate([
        customElement('au-datatable-filter'),
        inlineView("\n    <template>\n        <tr class="\&quot;au-table-filter\&quot;"><td class="\&quot;au-filter-cell\&quot;">\n                <div>\n                    <input type="\&quot;text\&quot;" class="\&quot;au-filter-input\&quot;">\n                    <button class="\&quot;au-filter-btn\&quot;">☷</button>\n                    <div class="\&quot;au-filter-container\&quot;">\n                        <ul class="\&quot;au-filters\&quot;">\n                            <li data-column="\&quot;${i}\&quot;" class="\&quot;au-filter"> ${ filter.description }</li>\n                            <li class="\&quot;au-clear\&quot;">${ labelClearFilter } <span class="\&quot;au-clear-icon\&quot;">✖</span></li>\n                        </ul>\n                    </div>\n                </div>\n            </td><style>\n                .au-table-filter .au-filter-input {\n                    width: calc(100% - 35px);\n                    transition: 1s;\n                    outline: none;\n                    height: 30px;\n                    border: 1px #ddd solid;\n                }\n\n                .au-table-filter .au-filter-btn {\n                    width: 30px;\n                    margin-left: 5px;\n                    height: 30px;\n                    float: right;\n                    outline: none;\n                }\n\n                .au-table-filter .au-filter-container {\n                    width: 100%;\n                    display: none;\n                }\n\n                .au-table-filter .au-filter-container .au-filters {\n                    list-style: none;\n                    padding: 10px;\n                    border: 1px solid #ddd;\n                    margin-top: 5px;\n                    position: relative;\n                    background-color: white;\n                    top: 0;\n                    bottom: 0;\n                    font-size: 8pt;\n                    right: 0;\n                    margin-bottom: 0;\n                }\n\n                .au-table-filter .au-filter-container .au-filters .au-filter {\n                    border-bottom: 1px solid #ddd;\n                    padding: 2px 5px;\n                }\n\n                .au-table-filter .au-filter-container .au-filters .au-clear {\n                    margin-top: 20px;\n                    font-size: 8pt;\n                    padding: 2px 5px;\n                    background: #333;\n                    color: white;\n                }\n\n                .au-table-filter .au-filter-container .au-filters .au-clear:hover {\n                    cursor: pointer;\n                }\n\n                .au-table-filter .au-filter-container .au-filters .au-clear .au-clear-icon {\n                    color: white;\n                    float: right;\n                    margin-top: 1px;\n                }\n\n                .au-table-filter .au-filter-container .au-filters .au-filter.active {\n                    background-color: #b9b8b8;\n                    color: white\n                }\n\n                .au-table-filter .au-filter-container .au-filters .au-filter:hover {\n                    cursor: pointer;\n                }\n            </style></tr>\n            \n            \n        \n    </template>\n")
    ], AuDatatableFilterComponent);
    return AuDatatableFilterComponent;
}());
export { AuDatatableFilterComponent };

/**
 * @author    : Adarsh Pastakia
 * @version   : 5.0.0
 * @copyright : 2019
 * @license   : MIT
 */

import { bindable, bindingMode, computedFrom, customElement, inlineView } from "aurelia-framework";
import { UIDrop } from "../shared/ui-drop";
import { UIInternal } from "../utils/ui-internal";
import view from "./ui-dropdown.html";

@customElement("ui-dropdown")
@inlineView(view)
export class UIDropdown {
  @bindable({ defaultBindingMode: bindingMode.twoWay })
  public value: AnyObject = undefined;

  @bindable()
  public errors: string[];

  @bindable()
  public name: string = "";
  @bindable()
  public placeholder: string = "Select";

  @bindable()
  public labelProperty: string = "";
  @bindable()
  public valueProperty: string = "";
  @bindable()
  public iconProperty: string = "";

import {bindable, customElement, bindingMode} from 'aurelia-framework';
import {resolvedView} from 'aurelia-view-manager';

@resolvedView('spoonx/form', 'form-textarea')
@customElement('form-textarea')
export class FormTextarea {
  @bindable name;

  @bindable classes;

  @bindable({defaultBindingMode: bindingMode.twoWay}) value;

  @bindable placeholder;

  @bindable autofocus;

  @bindable required;

  @bindable cols;

  @bindable rows;

  @bindable disabled;

  @bindable maxlength;

  @bindable readonly;

}

  return desc;
}

function _initializerWarningHelper(descriptor, context) {
  throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}

import { bindable, inject, computedFrom, customElement, bindingMode } from 'aurelia-framework';
import { resolvedView } from 'aurelia-view-manager';
import { EntityManager } from 'aurelia-orm';
import { Router } from 'aurelia-router';
import { Statham } from 'json-statham';

export let DataTable = (_dec = customElement('datatable'), _dec2 = resolvedView('spoonx/datatable', 'datatable'), _dec3 = inject(Router, Element, EntityManager), _dec4 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec5 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec6 = computedFrom('columns'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class DataTable {

  constructor(router, element, entityManager) {
    _initDefineProp(this, 'criteria', _descriptor, this);

    _initDefineProp(this, 'where', _descriptor2, this);

    _initDefineProp(this, 'limit', _descriptor3, this);

    _initDefineProp(this, 'columns', _descriptor4, this);

    _initDefineProp(this, 'searchColumn', _descriptor5, this);

    _initDefineProp(this, 'actions', _descriptor6, this);

    _initDefineProp(this, 'searchable', _descriptor7, this);

bind() {
    this.disabled = isTrue(this.disabled);
    this.readonly = isTrue(this.readonly);
  }

  __counter;
  __clear;
  __input;

  errors = [];

  /**
   * @property    
   * @type        
   */
  @bindable({ defaultBindingMode: bindingMode.twoWay })
  value = '';

  @bindable() rows = 5;
  @bindable() maxlength = 10000;
  @bindable() placeholder = '';
  @bindable() disabled = false;
  @bindable() readonly = false;

  clear() {
    this.value = ''; this.__input.focus();
    UIEvent.fireEvent('change', this.element, this.value);
  }

  fireChange(evt) {
    evt.stopPropagation();
    UIEvent.fireEvent('change', this.element, this.value);

import * as $ from 'jquery';


@inject(Element)
@containerless()
@customElement('abt-scrollspy')
export class BootstrapScrollSpy {

  @bindable({ defaultBindingMode: bindingMode.oneTime }) public target: string;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public offset: number = 10;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public bsScrollspy: Function;

  @bindable({ defaultBindingMode: bindingMode.oneTime }) public onBody: boolean | string = false;


  private spy: HTMLElement;

  constructor(private element: Element) { }


  private attached() {

    this.onBody = Boolean(this.onBody);
    this.offset = Number(this.offset);

    if (!this.onBody) {
      $(this.spy).scrollspy({ target: this.target[0] === '#' ? this.target : `#${this.target}`, offset: this.offset });

div.appendChild(span);
        var coordinates = {
            top: (span.offsetTop + parseInt(computed['borderTopWidth']) + 20 - element.scrollTop) + 'px',
            left: (span.offsetLeft + parseInt(computed['borderLeftWidth'])) + 'px'
        };
        if (debug) {
            span.style.backgroundColor = '#aaa';
        }
        else {
            document.body.removeChild(div);
        }
        return coordinates;
    }
};
__decorate([
    bindable({ defaultBindingMode: bindingMode.twoWay }),
    __metadata("design:type", Object)
], UITextarea.prototype, "value", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UITextarea.prototype, "dir", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UITextarea.prototype, "rows", void 0);
__decorate([
    bindable(),
    __metadata("design:type", Object)
], UITextarea.prototype, "errors", void 0);
__decorate([
    bindable(),