How to use aurelia-framework - 10 common examples

beforeAll(() => {
		// setupConsoleLogging();
		jasmine.addMatchers( customMatchers );
		logger = LogManager.getLogger( 'ui-grid-spec' );
	});

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { split } from 'strman';

@valueConverter('split')
export class SplitValueConverter {
    public toView(value: string, separator: string, limit?: number): string[] {
        return split(value, separator, limit);
    }
}

import { inject, customElement, containerless, bindable, bindingMode } from 'aurelia-framework';


import * as $ from 'jquery';
import 'metismenu';

@inject(Element)
@containerless()
@customElement('aut-metis-menu')
export class JQueryMetisMenu {

    private metismenu: HTMLUListElement;

    @bindable({ defaultBindingMode: bindingMode.oneTime }) public class: string = '';
    @bindable({ defaultBindingMode: bindingMode.oneTime }) public style: string = '';

    @bindable({ defaultBindingMode: bindingMode.twoWay }) public showMenu: Function;
    @bindable({ defaultBindingMode: bindingMode.twoWay }) public shownMenu: Function;
    @bindable({ defaultBindingMode: bindingMode.twoWay }) public hideMenu: Function;
    @bindable({ defaultBindingMode: bindingMode.twoWay }) public hiddenMenu: Function;


    constructor(private element: Element) {
    }

    private attached() {
        // @ts-ignore
        $(this.metismenu).metisMenu()
            .on('show.metismenu', (event: any) => {
                console.log(`show menu: ${JSON.stringify(event)}`);

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

import {customElement, bindable, bindingMode, autoinject} from "aurelia-framework";
import {UIInputGroup} from "./ui-input-group";

@autoinject()
@customElement('ui-input')
export class UIInput extends UIInputGroup {
	/**
	 * @property    value
	 * @type        string
	 */
    @bindable({ defaultBindingMode: bindingMode.twoWay })
    value: string = '';
	/**
	 * @property    checked
	 * @type        boolean
	 */
    @bindable({ defaultBindingMode: bindingMode.twoWay })
    checked: boolean = false;
	/**
	 * @property    disabled
	 * @type        boolean

//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT
import { autoinject, customElement, bindable, inlineView } from 'aurelia-framework';
import { UIEvent } from "../../utils/ui-event";

@autoinject()
@inlineView(`<template class="ui-sidebar ui-row ui-row-v ui-row-nowrap ui-align-stretch \${compact || collapsed || forceCollapse ?'ui-sidebar-collapse':''} ui-sidebar-\${position}">
  <div class="ui-sidebar-head ui-row ui-row-h ui-row-nowrap ui-align-stretch">
  <div class="ui-sidebar-title ui-column-fill">\${label}</div>
  <a class="ui-sidebar-close"></a></div>
  <div class="ui-sidebar-content ui-column-fill \${bodyClass}"></div>
</template>`)
@customElement('ui-sidebar')
export class UISidebar {
  constructor(public element: Element) {
    if (this.miniDisplay = element.hasAttribute('mini-display')) element.classList.add('ui-sidebar-mini');
    if (this.compact = element.hasAttribute('compact')) {
      element.classList.add('ui-sidebar-compact');
      element.classList.add('ui-sidebar-mini');
    }
    this.collapsible = element.hasAttribute('collapsible');

    this.obResize = UIEvent.subscribe('windowresize', () =&gt; {
      this.forceCollapse = window.innerWidth &lt;= 768;
    });
    this.obClick = UIEvent.subscribe('mouseclick', () =&gt; {
      this.element.classList.remove('ui-sidebar-show');
    });
    this.forceCollapse = window.innerWidth &lt;= 768;

/* -*- javascript -*- */
"use strict";

import {inject, LogManager} from 'aurelia-framework';


@inject( Element )
export class Views {
	heading = 'Views';


	constructor( element ) {
		this.element = element;
		this.logger = LogManager.getLogger( 'views' );
	}

	attached() {
		$( this.element ).shape();
	}

	toggleSource( event ) {
		this.logger.debug( "Toggling source view for ", this.element );
		$( this.element ).shape( 'flip over' );

import { IRules } from '../interfaces/rules';
import { inject } from 'aurelia-framework';
import { SchemaFormConfiguration } from '../services/schema-form-configuration';
import { ValidationRules, validationMessages, FluentRuleCustomizer } from 'aurelia-validation';

@inject(SchemaFormConfiguration)
export class CommonRules implements IRules {
  constructor(private configuration: SchemaFormConfiguration) { }

  type = 'common';

  register(): void {
    this.add();
  }

  setCustomMessages() {
    validationMessages.const = this.configuration.messages.const || validationMessages.equals;
  }

  add(): void {
    // enum
    ValidationRules

static seed = 1;
  private for = '';
  isDisabled = false;

  disabledChanged(newValue) {
    this.element.classList[(this.disabled = !!newValue) ? 'add' : 'remove']('ui-disabled');
  }

  disable(b) {
    this.element.classList[(this.isDisabled = (b || this.disabled)) ? 'add' : 'remove']('ui-disabled');
  }
}

@autoinject()
@inlineView(`<template class="ui-option ui-radio"><input name="\${name}" type="radio">
  
  <label class="ui-option-label"></label></template>`)
@customElement('ui-radio')
export class UIRadio {
  constructor(public element: Element) { this.for = 'ui-radio-' + (UIRadio.seed++); }

  // aurelia hooks
  // created(owningView: View, myView: View) { }
  bind(bindingContext: Object, overrideContext: Object) {
    this.disabledChanged(this.disabled);
  }
  // attached() { }
  // detached() { }
  // unbind() { }
  // end aurelia hooks

//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT

import { autoinject, customElement, bindable, bindingMode, inlineView } from 'aurelia-framework';
import { UIBaseInput } from "./ui-input";
import { UIEvent } from "../../utils/ui-event";

@autoinject()
@inlineView(`<template class="ui-input-wrapper"><div class="ui-input-control ui-phone" role="input"><span></span>
  <span class="ui-error"><ul class="ui-error-list"><li></li></ul></span>
  <input size="1" dir="ltr" type="tel">
  <span class="ui-clear">×</span></div>
  <div class="ui-input-info"></div>
</template>`)
@customElement('ui-phone')
export class UIPhone extends UIBaseInput {
  constructor(public element: Element) {
    super();
    this.clear = element.hasAttribute('clear');

//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT
import {autoinject} from 'aurelia-framework';

@autoinject()
export class CompStats {
  constructor() { }

  // aurelia hooks
  // canActivate(model) { return true; }
  // activate(model) { return true; }
  // bind(bindingContext) { }
  // attached() { }
  // detached() { }
  // unbind() { }
  // deactivate() { }
  // end aurelia hooks
}