How to use the aurelia-templating.customAttribute function in aurelia-templating

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) {