How to use aurelia-templating - 10 common examples

var _dec, _class, _dec2, _class2;

import { inject } from 'aurelia-dependency-injection';
import { CompositionEngine, useView, inlineView, customElement } from 'aurelia-templating';
import { RouteLoader, Router } from 'aurelia-router';
import { relativeToFile } from 'aurelia-path';
import { Origin } from 'aurelia-metadata';
import { RouterViewLocator } from './router-view';

let EmptyClass = (_dec = inlineView('<template></template>'), _dec(_class = class EmptyClass {}) || _class);

export let TemplatingRouteLoader = (_dec2 = inject(CompositionEngine), _dec2(_class2 = class TemplatingRouteLoader extends RouteLoader {
  constructor(compositionEngine) {
    super();
    this.compositionEngine = compositionEngine;
  }

  loadRoute(router, config) {
    let childContainer = router.container.createChild();

    let viewModel;
    if (config.moduleId === null) {
      viewModel = EmptyClass;
    } else if (/\.html/i.test(config.moduleId)) {
      viewModel = createDynamicClass(config.moduleId);
    } else {

var _dec, _class;



import { customAttribute } from 'aurelia-templating';
import { bindingMode } from 'aurelia-binding';
import { TaskQueue } from 'aurelia-task-queue';
import { DOM } from 'aurelia-pal';

export var Focus = (_dec = customAttribute('focus', bindingMode.twoWay), _dec(_class = function () {
  Focus.inject = function inject() {
    return [DOM.Element, TaskQueue];
  };

  function Focus(element, taskQueue) {
    

    this.element = element;
    this.taskQueue = taskQueue;
    this.isAttached = false;
    this.needsApply = false;
  }

  Focus.prototype.valueChanged = function valueChanged(newValue) {
    if (this.isAttached) {
      this._apply();

var _dec, _class;

import { customAttribute } from 'aurelia-templating';
import { bindingMode } from 'aurelia-binding';
import { TaskQueue } from 'aurelia-task-queue';
import { DOM } from 'aurelia-pal';

export let Focus = (_dec = customAttribute('focus', bindingMode.twoWay), _dec(_class = class Focus {

  static inject() {
    return [DOM.Element, TaskQueue];
  }

  constructor(element, taskQueue) {
    this.element = element;
    this.taskQueue = taskQueue;
    this.isAttached = false;
    this.needsApply = false;
  }

  valueChanged(newValue) {
    if (this.isAttached) {
      this._apply();
    } else {

var _dec, _class;



import { Optional } from 'aurelia-dependency-injection';
import { customAttribute, Animator } from 'aurelia-templating';
import { DOM } from 'aurelia-pal';
import { injectAureliaHideStyleAtBoundary, aureliaHideClassName } from './aurelia-hide-style';

export var Show = (_dec = customAttribute('show'), _dec(_class = function () {
  Show.inject = function inject() {
    return [DOM.Element, Animator, Optional.of(DOM.boundary, true)];
  };

  function Show(element, animator, domBoundary) {
    

    this.element = element;
    this.animator = animator;
    this.domBoundary = domBoundary;
  }

  Show.prototype.created = function created() {
    injectAureliaHideStyleAtBoundary(this.domBoundary);
  };

var _dec, _class;

import { Optional } from 'aurelia-dependency-injection';
import { customAttribute, Animator } from 'aurelia-templating';
import { DOM } from 'aurelia-pal';
import { injectAureliaHideStyleAtBoundary, aureliaHideClassName } from './aurelia-hide-style';

export let Show = (_dec = customAttribute('show'), _dec(_class = class Show {

  static inject() {
    return [DOM.Element, Animator, Optional.of(DOM.boundary, true)];
  }

  constructor(element, animator, domBoundary) {
    this.element = element;
    this.animator = animator;
    this.domBoundary = domBoundary;
  }

  created() {
    injectAureliaHideStyleAtBoundary(this.domBoundary);
  }

  valueChanged(newValue) {

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 { BoundViewFactory, ViewSlot, bindable, customAttribute, templateController } from 'aurelia-templating';
import { inject } from 'aurelia-dependency-injection';
import { IfCore } from './if-core';

export let If = (_dec = customAttribute('if'), _dec2 = inject(BoundViewFactory, ViewSlot), _dec3 = bindable({ primaryProperty: true }), _dec(_class = templateController(_class = _dec2(_class = (_class2 = class If extends IfCore {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), _initDefineProp(this, 'condition', _descriptor, this), _initDefineProp(this, 'swapOrder', _descriptor2, this), _initDefineProp(this, 'cache', _descriptor3, this), _temp;
  }

  bind(bindingContext, overrideContext) {
    super.bind(bindingContext, overrideContext);
    if (this.condition) {
      this._show();
    } else {
      this._hide();
    }
  }

  conditionChanged(newValue) {

var _dec, _class, _dec2, _class2;

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }



import { inject } from 'aurelia-dependency-injection';
import { CompositionEngine, useView, inlineView, customElement } from 'aurelia-templating';
import { RouteLoader, Router } from 'aurelia-router';
import { relativeToFile } from 'aurelia-path';
import { Origin } from 'aurelia-metadata';
import { RouterViewLocator } from './router-view';

var EmptyClass = (_dec = inlineView('<template></template>'), _dec(_class = function EmptyClass() {
  
}) || _class);

export var TemplatingRouteLoader = (_dec2 = inject(CompositionEngine), _dec2(_class2 = function (_RouteLoader) {
  _inherits(TemplatingRouteLoader, _RouteLoader);

  function TemplatingRouteLoader(compositionEngine) {
    

    var _this = _possibleConstructorReturn(this, _RouteLoader.call(this));

    _this.compositionEngine = compositionEngine;
    return _this;
  }

  TemplatingRouteLoader.prototype.loadRoute = function loadRoute(router, config) {

var UxListItem = /** @class */ (function () {
    function UxListItem() {
        this.theme = null;
    }
    __decorate([
        bindable
    ], UxListItem.prototype, "theme", void 0);
    UxListItem = __decorate([
        customElement('ux-list-item'),
        inlineView(VIEW$1)
    ], UxListItem);
    return UxListItem;
}());

var UxListItem = /** @class */ (function () {
    function UxListItem() {
        this.theme = null;
    }
    __decorate([
        aureliaTemplating.bindable
    ], UxListItem.prototype, "theme", void 0);
    UxListItem = __decorate([
        aureliaTemplating.customElement('ux-list-item'),
        aureliaTemplating.inlineView(VIEW$1)
    ], UxListItem);
    return UxListItem;
}());

if (newValue != null && newValue.themeKey == null) {
            newValue.themeKey = 'list';
        }
        this.styleEngine.applyTheme(newValue, this.element);
    }
};
__decorate([
    bindable
], UxList.prototype, "theme", void 0);
__decorate([
    bindable
], UxList.prototype, "type", void 0);
UxList = __decorate([
    inject(Element, StyleEngine),
    customElement('ux-list'),
    inlineView(VIEW)
], UxList);

var uxListItem = "<template class="\&quot;ux-list-item\&quot;" role="\&quot;listitem\&quot;">  </template> ";

var VIEW$1 = /*#__PURE__*/Object.freeze({
    __proto__: null,
    'default': uxListItem
});

let UxListItem = class UxListItem {
    constructor() {
        this.theme = null;
    }
};
__decorate([
    bindable