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

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

/**
 * Divider - http://semantic-ui.com/elements/divider.html
 */

import {constants} from '../constants';
import {SemanticUIElement, SemanticUIAttribute} from '../ui-base';
import {customAttribute, customElement} from 'aurelia-framework';

@customElement( `${constants.elementPrefix}divider` )
export class SemanticUIDividerElement extends SemanticUIElement {}

@customAttribute( `${constants.attributePrefix}divider` )
export class SemanticUIDividerAttribute extends SemanticUIAttribute {
}

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

/**
 * Card - http://semantic-ui.com/views/card.html
 */

import {constants} from '../constants';
import {SemanticUIElement, SemanticUIAttribute} from '../ui-base';
import {customAttribute, customElement} from 'aurelia-framework';

@customElement( `${constants.elementPrefix}card` )
export class SemanticUICardElement extends SemanticUIElement {}

@customAttribute( `${constants.attributePrefix}card` )
export class SemanticUICardAttribute extends SemanticUIAttribute {
}

_this.parameters.currentPage = 1;
            _this.parameters.skip = 0;
        });
    };
    __decorate([
        bindable({
            changeHandler: 'setData'
        })
    ], AuDatatableCustomAttribute.prototype, "startingData", void 0);
    __decorate([
        bindable({
            defaultBindingMode: bindingMode.twoWay
        })
    ], AuDatatableCustomAttribute.prototype, "parameters", void 0);
    AuDatatableCustomAttribute = __decorate([
        customAttribute('au-datatable')
    ], AuDatatableCustomAttribute);
    return AuDatatableCustomAttribute;
}());
export { AuDatatableCustomAttribute };

this.tether.dispose();
        UITooltip_1.tooltipEl.className = 'ui-tooltip';
        this.tether = null;
    };
    var UITooltip_1;
    __decorate([
        aurelia_framework_1.bindable(),
        __metadata("design:type", Object)
    ], UITooltip.prototype, "theme", void 0);
    __decorate([
        aurelia_framework_1.bindable({ primaryProperty: true }),
        __metadata("design:type", Object)
    ], UITooltip.prototype, "message", void 0);
    UITooltip = UITooltip_1 = __decorate([
        aurelia_framework_1.autoinject(),
        aurelia_framework_1.customAttribute('tooltip'),
        __metadata("design:paramtypes", [Element])
    ], UITooltip);
    return UITooltip;
}());
exports.UITooltip = UITooltip;

var UIColorThemeBg = (function (_super) {
    __extends(UIColorThemeBg, _super);
    function UIColorThemeBg(element) {
        var _this = _super.call(this, element) || this;
        _this.element = element;
        _this.prefix = 'bg-';
        return _this;
    }
    UIColorThemeBg = __decorate([
        aurelia_framework_1.autoinject(),
        aurelia_framework_1.customAttribute('bg-theme'),
        __metadata("design:paramtypes", [Element])
    ], UIColorThemeBg);
    return UIColorThemeBg;
}(UIColorBase));
exports.UIColorThemeBg = UIColorThemeBg;

var UIFont = (function (_super) {
    __extends(UIFont, _super);
    function UIFont() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.prefix = "ui-font";
        return _this;
    }
    UIFont = __decorate([
        autoinject(),
        customAttribute("ui-font")
    ], UIFont);
    return UIFont;
}(BaseAttribute));
var UIWeight = (function (_super) {

@customAttribute('v-footer-height')
@inject(Element, Optional.of(VGrid))
export class vGridFooterHeight extends VGridAttibutesMain {
  attribute = "attFooterHeight";
  type = "int";
}


@customAttribute('v-resizable-headers')
@inject(Element, Optional.of(VGrid))
export class vGridIsResizableHeaders extends VGridAttibutesMain {
  attribute = "attResizableHeaders";
  type = "bool";
}

@customAttribute('v-attibutes-observe')
@inject(Element, Optional.of(VGrid))
export class vGridAttibutesObserve extends VGridAttibutesMain {
  attribute = "attAttributeObserve";
  type = "array";
}


@customAttribute('v-multi-select')
@inject(Element, Optional.of(VGrid))
export class vGridIsMultiSelect extends VGridAttibutesMain {
  attribute = "attMultiSelect";
  type = "bool";
}


@customAttribute('v-manual-sel')

var _dec, _dec2, _class;

import { customAttribute, inject } from 'aurelia-framework';
import { logger } from './logger';

export let AttributesCustomAttribute = (_dec = inject(Element), _dec2 = customAttribute('attributes'), _dec(_class = _dec2(_class = class AttributesCustomAttribute {

  constructor(element) {
    this.element = element;
  }

  valueChanged() {
    let attributes = normalizedAttributes(this.value);

    Object.keys(attributes).forEach(attribute => {
      this.element.setAttribute(attribute, attributes[attribute]);
    });
  }

}) || _class) || _class);

export function normalizedAttributes(value) {

@customAttribute("doubletap")
@inject(Element, "oribella")
export class Doubletap extends Gesture {
  @bindable selector = undefined;
  @bindable options = {};
  @bindable start = function() {};
  @bindable update = function() {};
  @bindable end = function() {};
  @bindable cancel = function() {};
  constructor(element, oribella) {
    super(element, oribella, "doubletap");
  }
}

@customAttribute("longtap")
@inject(Element, "oribella")
export class Longtap extends Gesture {
  @bindable selector = undefined;
  @bindable options = {};
  @bindable start = function() {};
  @bindable update = function() {};
  @bindable end = function() {};
  @bindable cancel = function() {};
  @bindable timeEnd = function() {};
  constructor(element, oribella) {
    super(element, oribella, "longtap");
  }
}

@customAttribute("swipe")
@inject(Element, "oribella")

@inject(Element, Optional.of(VGrid))
export class isMultiSelect extends VGridAttibutes {
  attribute = "isMultiSelect";
  type = "bool";
}


@customAttribute('v-sortable-headers')
@inject(Element, Optional.of(VGrid))
export class isSortableHeader extends VGridAttibutes {
  attribute = "isSortableHeader";
  type = "bool";
}


@customAttribute('v-request-animation-frame')
@inject(Element, Optional.of(VGrid))
export class requestAnimationFrame extends VGridAttibutes {
  attribute = "requestAnimationFrame";
  type = "bool";
}


@customAttribute('v-resize-also-rows')
@inject(Element, Optional.of(VGrid))
export class resizableHeadersAndRows extends VGridAttibutes {
  attribute = "resizableHeadersAndRows";
  type = "bool";
}

@customAttribute('v-render-on-scrollbar-scroll')
@inject(Element, Optional.of(VGrid))