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

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

__decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UIMenuItem.prototype, "active", void 0);
    __decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UIMenuItem.prototype, "disabled", void 0);
    __decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UIMenuItem.prototype, "href", void 0);
    UIMenuItem = __decorate([
        aurelia_framework_1.autoinject(),
        aurelia_framework_1.containerless(),
        aurelia_framework_1.inlineView("<template><a class="\&quot;ui-menu-item">\n    <span class="\&quot;ui-menu-label\&quot;"></span></a></template>"),
        aurelia_framework_1.customElement('ui-menu-item'),
        __metadata("design:paramtypes", [Element])
    ], UIMenuItem);
    return UIMenuItem;
}());
exports.UIMenuItem = UIMenuItem;

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

import { bindable, customElement, inlineView } from "aurelia-framework";

let tabSeed = 0;

@customElement("ui-tab")
@inlineView(
  `<template data-hide.bind="!!view || !!viewModel" data-active.bind="active" class="ui-tab"></template>`
)
export class UITab {
  @bindable()
  public id: string = "";
  @bindable()
  public label: string = "";
  @bindable()
  public icon: string = "";
  @bindable()
  public active: boolean = false;
  @bindable()
  public disabled: boolean = false;

  @bindable()
  public view: AnyObject;

_tslib.__decorate([
        aureliaFramework.bindable(),
        _tslib.__metadata("design:type", Boolean)
    ], UIDropdown.prototype, "disabled", void 0);
    _tslib.__decorate([
        aureliaFramework.bindable(),
        _tslib.__metadata("design:type", Boolean)
    ], UIDropdown.prototype, "multiple", void 0);
    _tslib.__decorate([
        aureliaFramework.computedFrom("model"),
        _tslib.__metadata("design:type", Object),
        _tslib.__metadata("design:paramtypes", [])
    ], UIDropdown.prototype, "selectedLabel", null);
    UIDropdown = _tslib.__decorate([
        aureliaFramework.customElement("ui-dropdown"),
        aureliaFramework.inlineView(view),
        _tslib.__metadata("design:paramtypes", [Element])
    ], UIDropdown);
    return UIDropdown;
}());

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

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

@customElement("ui-button")
@inlineView(view)
export class UIButton {
  /**
   * Button icon
   */
  @bindable()
  public icon: string = "";
  /**
   * Href for link type buttons
   */
  @bindable()
  public href: string = "";
  /**
   * Button label, used when button had dropdown
   */
  @bindable()
  public label: string = "";

if (element.hasAttribute('primary')) element.classList.add('primary');
    if (element.hasAttribute('secondary')) element.classList.add('ui-theme');
    if (element.hasAttribute('secondary')) element.classList.add('secondary');
  }

  fireChange($event) {
    $event.cancelBubble = true;
    $event.stopPropagation();
    UIEvent.fireEvent('change', this.element, $event.detail);
    return false;
  }
}

@autoinject()
@customElement('ui-crumb')
@inlineView(`<template class="ui-crumb"><a href="crumb.href || 'javascript:;'"></a></template>`)
export class UICrumb {
  constructor(public element: Element) { }

  @bindable() id = '';
  @bindable() href = 'javascript:;';

  fireClick($event) {
    $event.stopPropagation();
    UIEvent.fireEvent('click', this.element, this.id);
  }
}

};
    __decorate([
        bindable(),
        __metadata("design:type", UIColumn)
    ], HeaderCell.prototype, "column", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], HeaderCell.prototype, "sortBy", void 0);
    __decorate([
        bindable(),
        __metadata("design:type", String)
    ], HeaderCell.prototype, "sortOrder", void 0);
    HeaderCell = __decorate([
        containerless(),
        inlineView("<template>\n        <div class="\&quot;ui-datagrid__cell\&quot;">\n          <div class="\&quot;ui-datagrid__cell__wrapper\&quot;"></div>\n          <div data-sort.bind="\&quot;sortBy" class="\&quot;ui-datagrid__cell__sorter\&quot;">\n            <i></i>\n            <i></i>\n          </div>\n          <div class="\&quot;ui-datagrid__cell__resizer\&quot;"></div>\n        </div>\n      </template>"),
        __metadata("design:paramtypes", [Element])
    ], HeaderCell);
    return HeaderCell;
}());

], UILanguage.prototype, "readonly", void 0);
    __decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UILanguage.prototype, "info", void 0);
    __decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UILanguage.prototype, "languages", void 0);
    __decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UILanguage.prototype, "placeholder", void 0);
    UILanguage = __decorate([
        aurelia_framework_1.autoinject(),
        aurelia_framework_1.inlineView("<template class="\&quot;ui-input-wrapper"><div class="\&quot;ui-input-control\&quot;" role="\&quot;input\&quot;">\n  <span class="\&quot;ui-input-addon\&quot;"></span>\n  <span class="\&quot;ui-error\&quot;"><ul class="\&quot;ui-error-list\&quot;"><li></li></ul></span>\n  <input size="\&quot;10\&quot;\n">\n  <span class="\&quot;ui-input-addon"></span></div>\n  <div class="\&quot;ui-input-info\&quot;"></div>\n\n  <div class="\&quot;ui-list-container">\n    <div class="\&quot;ui-list-group\&quot;">Selected</div>\n    <div class="\&quot;ui-lang-item\&quot;">\n      <div class="\&quot;ui-list-item">-1\"&gt; ${item.name}</div>\n      <a></a>\n    </div>\n    <div class="\&quot;ui-list-group\&quot;">Available</div>\n    <div class="\&quot;ui-lang-item\&quot;">\n      <div class="\&quot;ui-list-item"></div>\n      \n    </div>\n    </div></template>\n  \n"),
        aurelia_framework_1.customElement('ui-language'),
        __metadata("design:paramtypes", [Element])
    ], UILanguage);
    return UILanguage;
}());
exports.UILanguage = UILanguage;

var UISection = (function () {
    function UISection(element) {
        if (element.hasAttribute("centered")) {
            element.classList.add("ui-section--centered");
        }
    }
    UISection = _tslib.__decorate([
        aureliaFramework.customElement("ui-section"),
        aureliaFramework.inlineView("<template role="\&quot;main\&quot;" class="\&quot;ui-section"></template>"),
        _tslib.__metadata("design:paramtypes", [Element])
    ], UISection);
    return UISection;
}());

if (element.hasAttribute('refresh')) this.__type = "refresh";
    if (element.hasAttribute('refresh')) this.__icon = "fi-ui-refresh";
  }

  __type;
  __icon;

  fireEvent(evt) {
    if (evt.button != 0) return true;
    return UIEvent.fireEvent(this.__type, this.element);
  }
}

@autoinject()
@customElement('ui-header-icon')
@inlineView(`<template class="ui-header-icon ui-inline-block"><span class="ui-icon \${icon}"></span>&nbsp;</template>`)
export class UIHeaderIcon {
  constructor(public element: Element) { }

  @bindable() icon = '';
}

@autoinject()
@customElement('ui-header-title')
@inlineView(`<template class="ui-header-title ui-inline-block ui-col-fill"></template>`)
export class UIHeaderTitle {
  constructor(public element: Element) { }
}

@autoinject()
@customElement('ui-header')
@inlineView(`<template class="ui-header"></template>`)