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

}

// App Header
@autoinject()
@containerless()
@customElement('ui-app-header')
@inlineView('<template><div slot="app-header" class="ui-app-header ${class}"></div></template>')
export class UIAppHeader {
  constructor(public element: Element) { }

  @bindable() class = '';
}

// App Title
@autoinject()
@containerless()
@customElement('ui-app-title')
@inlineView('<template><img class="ui-app-logo"><a class="ui-app-title ${class}" href="/#"></a></template>')
export class UIAppTitle {
  constructor(public element: Element) { }

  @bindable() src;
  @bindable() class = '';
}

// App Footer
@autoinject()
@containerless()
@customElement('ui-app-footer')
@inlineView('<template><div slot="app-footer" class="ui-app-footer ${class}"></div></template>')
export class UIAppFooter {
  constructor(public element: Element) { }

disableInputs(newValue: any) {
    _.forEach(this.inputEls, el => {
      try {
        el.au.controller.viewModel.disable(!!newValue);
      } catch (e) {
      }
    });
  }

  fireSubmit() {
    if (!this.busy) UIEvent.fireEvent('submit', this.element);
  }
}

@autoinject()
@containerless()
@inlineView('<template><fieldset class="ui-fieldset"><legend><span>\${legend}</span>\${legend}</legend><div></div></fieldset></template>')
@customElement('ui-fieldset')
export class UIFieldset {
  constructor(public element: Element) {
    this.collapsible = element.hasAttribute('checked') || element.hasAttribute('checked.bind');
  }

  bind(bindingContext: Object, overrideContext: Object) {
    this.checked = this.checked || this.element.hasAttribute('checked');
  }
  attached() {
    this.checkedChanged(this.checked);
    if (this.disabled) this.disabledChanged(this.disabled);
  }

  @bindable() class = '';

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

import { bindable, containerless, customElement, DOM, inlineView } from "aurelia-framework";
import { UIInternal } from "../utils/ui-internal";

@containerless()
@customElement("ui-tag")
@inlineView(
  `<template><a class="ui-tag ui-tag--\${type} ui-tag--\${size}">
    <div class="ui-tag__label">\${label}</div>
    <div class="ui-tag__icon"></div>
    <div class="ui-tag__value"></div>
    <div class="ui-tag__close">×</div>
  </a></template>`
)
export class UITag {
  @bindable()
  public id: string = "";
  @bindable()
  public label: string = "";
  @bindable()
  public icon: string = "";

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

@inject(Element)
@containerless()
@customElement('abt-navbar-link')
export class BootstrapNavBarLink {
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.oneTime }) public id: string;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public href: string;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public linkClass: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public linkStyle: string;

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public active: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public disabled: boolean | string = false;

  @bindable({ defaultBindingMode: bindingMode.twoWay }) public click: Function;

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

export type TooltipPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right';
export type TooltipBoundary = 'viewport' | 'window' | 'scrollParent';

import * as $ from 'jquery';

@containerless()
@inject(Element)
@customElement('abt-tooltip')
export class BootstrapTooltipCustomElement {

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public container: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public delay: number | object = 0;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public placement: TooltipPlacement | Function = 'top';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public selector: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public animation: boolean | string = true;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public html: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public trigger: string = 'hover focus';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public offset: number | string = 0;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public fallbackPlacement: string | string[] = 'flip';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public boundary: TooltipBoundary = 'scrollParent';
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public template: string =
    '<div role="tooltip" class="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>';

}

@autoinject()
@containerless()
@customElement("ui-header-icon")
@inlineView(
  `<template><div class="ui-header__icon" slot="header-icon"></div></template>`
)
export class UIHeaderIcon {
  @bindable()
  public icon: string = "";
  constructor(protected element: Element) {}
}

@autoinject()
@containerless()
@customElement("ui-header-title")
@inlineView(
  `<template><div class="ui-header__title" slot="header-title"></div></template>`
)
export class UIHeaderTitle {
  constructor(protected element: Element) {}
}

@autoinject()
@customElement("ui-header-actions")
@inlineView(`<template class="ui-header__actions"></template>`)
export class UIHeaderActions {
  constructor(protected element: Element) {}
}

@autoinject()

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

@inject(Element)
@containerless()
@customElement('abt-card-image')
export class BootstrapCardImage {

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

    @bindable({ defaultBindingMode: bindingMode.oneWay }) public src: string;

    private cssClass: string = 'card-img';

    constructor(private element: Element) { }

    private attached() {

        let beOnBottom = this.element.hasAttribute('bottom');

import { inject, customAttribute, bindingMode, bindable, customElement, DOM, containerless } from 'aurelia-framework';
export type ColorType = 'primary' | 'secondary' | 'success' | 'danger'
  | 'warning' | 'info' | 'light' | 'dark';
@customElement('abt-progress-bar')
@containerless()
export class BootstrapProgressBar {

  @bindable({ defaultBindingMode: bindingMode.oneWay }) public type: ColorType;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public color: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public gradientColor: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public style: string;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public class: string;
  @bindable({ defaultBindingMode: bindingMode.twoWay }) public value: number | string = 0;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public min: number | string = 0;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public max: number | string = 100;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public animated: boolean | string = false;
  @bindable({ defaultBindingMode: bindingMode.oneWay }) public striped: boolean | string = false;

  private isAnimated: boolean = false;
  private isStriped: boolean = false;
  private progressbar: Element;

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

import { bindable, containerless, customElement, inlineView } from "aurelia-framework";
import { IMenuItems } from "../../menus/ui-menus";
import { UIInternal } from "../../utils/ui-internal";

@containerless()
@customElement("ui-data-card")
@inlineView(`<template><a data-open.bind="open" class="ui-datalist__card">
  
  
  <div class="ui-datalist__toolbox">
    
    
      
        
        
          
        
      
      
        
      </div></a></template>

}
  __resizeEnd(evt) {
    this.__resizing = false;
    if (this.__colNext) this.__colNext.left += this.__diff;
    this.__column.width = (parseInt(this.__column.width) + this.__diff);
    this.calculateWidth(this.__columns);
    document.removeEventListener('mousemove', this.__move);
    document.removeEventListener('mouseup', this.__stop);
  }

  fireSelect(record) {
    UIEvent.fireEvent('rowselect', this.element, ({ record }));
  }
}

@containerless()
@customElement('ui-dg-empty')
@inlineView(`<template><div slot="dg-empty"></div></template>`)
export class UIDGEmpty { }

export class UIDataColumn {
  constructor(public element: Element) {
    this.resize = element.hasAttribute('resizeable');
    this.sortable = element.hasAttribute('sortable');
    this.locked = element.hasAttribute('locked') ? 0 : 1;

    //alignment
    if (element.hasAttribute('center')) this.align = 'ui-text-center';
    else if (element.hasAttribute('end')) this.align = 'ui-text-end';

    if (element.hasAttribute('age')) this.dataType = 'age';
    else if (element.hasAttribute('date')) this.dataType = 'date';