How to use the @aurelia/kernel.inject function in @aurelia/kernel

import { customAttribute, bindable, ValueConverterResource } from '@aurelia/runtime';
import { inject } from '@aurelia/kernel';
import { VGrid } from '../v-grid';
import { BindingContextInterface, OverrideContextInterface } from '../../interfaces';

// todo: look at adding option to disable this ?

/**
 * Custom attribute "v-onchange"
 * Only triggers new data update on row when change event happen
 * Used by default by the simple html setup
 * Can be used with custom html
 *
 */
@customAttribute('v-data-handler')
@inject(Element, VGrid)
export class VGridAttributesDataHandler {
    @bindable private field: string;
    @bindable private value: string;
    @bindable private display: string;
    @bindable private edit: string;
    private vGrid: VGrid;
    private element: HTMLElement;
    private bindingContext: BindingContextInterface;
    private overrideContext: OverrideContextInterface;
    private displayFormater: { fromView: Function; toView: Function };
    private editFormater: { fromView: Function; toView: Function };
    private tempValue: any;
    private isSet: boolean;

import { inject } from '@aurelia/kernel';
import { customElement } from '@aurelia/runtime';
import { AuthorsRepository } from '../../repositories/authors';
import { State } from '../../state';
import { wait } from '../../utils';

@customElement({ name: 'author-details', template: `<template>
<div>
<h3>Details about the author</h3>
<p>Here's details about <strong>\${author.name}</strong>... <input></p>
<div class="scrollbox">All about the space, about the space, no truncate...</div>
</div>
</template>` })
@inject(AuthorsRepository, State)
export class AuthorDetails {
  public static parameters = ['id'];

  public author = {};
  public constructor(private readonly authorsRepository: AuthorsRepository, private readonly state: State) { }

  public canEnter() {
    return this.state.allowEnterAuthorDetails;
  }

  public enter(parameters) {
    if (parameters.id) {
      this.author = this.authorsRepository.author(+parameters.id);
    }
    return wait(this.state.noDelay ? 0 : 2000);
  }

import { inject } from '@aurelia/kernel';
import { IRouter } from '@aurelia/router';
import { bindable } from '@aurelia/runtime';
import { Article } from 'shared/models/article';
import { ArticleService } from 'shared/services/article-service';
import { SharedState } from 'shared/state/shared-state';

@inject(IRouter, SharedState, ArticleService)
export class FavoriteButton {
  @bindable public article?: Article;
  @bindable public toggle?: (toggled: boolean) => void;

  public constructor(private readonly router: IRouter,
    private readonly sharedState: SharedState,
    private readonly articleService: ArticleService) {
  }

  public onToggleFavorited() {
    if (!this.sharedState.isAuthenticated) {
      this.router.goto('auth(type=login)');
      return;
    }
    if (!this.article || !this.article.slug) { return; }
    this.article.favorited = !this.article.favorited;

import { inject } from '@aurelia/kernel';
import { customElement } from '@aurelia/runtime';
import { Router } from '../../../../../router/src/index';

@inject(Router)
@customElement({
  name: 'app', template:
    `<template>
  <div style="padding: 20px;">
    <p>A layout test, with game and lobby "layouts".</p>
    <a href="lobby">Lobby</a>
    <a href="game">Game</a>
    <a href="lobby@app+contacts@lobby+contact@contact(123)">Lobby + contacts + 123</a>
    <a href="lobby@app+contact@contact(123)+contacts@lobby">Lobby + 123 + contacts</a>
    <a href="game+board@game">Game + board (5 + 5, parent-child)</a>
    <a href="game+delayed">Game + delayed (5 + 5, siblings)</a>
    <a href="cancel">Cancel</a>
    
    
  </div>
</template>

import { inject } from '@aurelia/kernel';
import { customElement } from '@aurelia/runtime';
import { Router } from '../../../../../router/src/index';

import { AppState } from './app-state';
import { AbcComponent } from './components/abc-component';
import { About } from './components/about';
import { Calendar } from './components/calendar';
import { DefComponent } from './components/def-component';
import { Email } from './components/email';

@inject(Router, AppState)
@customElement({
  name: 'app', template:
    `<template>
  <p>\${message}</p>
  <div style="padding: 20px;">
    <div style="padding: 10px;">
      
    </div>

    <div style="padding: 10px;">
      
    </div>
    <div style="padding: 10px;">
      <a href="header">Add the header</a>
      <a href="-@header">Remove the header</a>
    </div></div></template>

import { customAttribute, bindable } from '@aurelia/runtime';
import { inject } from '@aurelia/kernel';
import { VGrid } from '../v-grid';
import { BindingContextInterface, OverrideContextInterface } from '../../interfaces';


/**
 * Custom attribute "v-resize-col"
 * logic behind sorting in grid/sort icons
 * Used by default by the simple html setup
 * Can be used with custom html
 *
 */
@customAttribute('v-sort')
@inject(Element, VGrid)
export class VGridAttributesSort {
  @bindable private field: string;
  @bindable private asc: string;
  private vGrid: VGrid;
  private element: HTMLElement;
  private bindingContext: BindingContextInterface;
  private overrideContext: OverrideContextInterface;
  private attribute: string;
  private sortIcon: HTMLElement;
  private firstTime: boolean;



  constructor(element: HTMLElement, vGrid: VGrid) {
    this.vGrid = vGrid;
    this.element = element;

import { customAttribute } from '@aurelia/runtime';
import { inject } from '@aurelia/kernel';
import { VGrid } from '../v-grid';
import { BindingContextInterface, OverrideContextInterface } from '../../interfaces';


/**
 * Custom attribute "v-image-fix"
 * Clears src of image so it does not lag
 * Used by default by the simple html setup
 * Can be used with custom html
 *
 */
@customAttribute('v-image-fix')
@inject(Element, VGrid)
export class VGridAttributesImageFix {
  private vGrid: VGrid;
  private element: HTMLImageElement;
  private value: string;
  private bindingContext: BindingContextInterface;
  private overrideContext: OverrideContextInterface;



  constructor(element: HTMLImageElement, vGrid: VGrid) {
    this.vGrid = vGrid;
    this.element = element;
  }

BindingContextInterface,
  OverrideContextInterface,
  ColumnBindingContext,
  ColumBindingContextObjectInterface
} from '../../interfaces';


/**
 * Custom attribute "v-resize-col"
 * logic behind resizing of columns
 * Used by default by the simple html setup
 * Can be used with custom html
 *
 */
@customAttribute('v-resize-col')
@inject(Element, VGrid)
export class VGridAttributesResizeCol {
  private vGrid: VGrid;
  private ctx: ResizeShardContextInterface;
  private element: Element;
  private screenX: number;
  private originalWidth: number;
  private column: Element;
  private colType: string;
  private colNo: number;
  private context: ColumBindingContextObjectInterface;
  private columnsArray: ColumBindingContextObjectInterface[];
  private columnBindingContext: ColumnBindingContext;
  private bindingContext: BindingContextInterface;
  private overrideContext: OverrideContextInterface;
  private onmousedownBinded: EventListenerOrEventListenerObject;
  private onmousemoveBinded: EventListenerOrEventListenerObject;

* This is used for creating custom rows in grouping
 * The one holding the group value / full width rows
 *
 */


@customElement({
  name: 'v-grid-group-row',
  templateOrNode: '',
  build: {
    required: true,
    compiler: 'default'
  },
  instructions: []
})
@inject(Element, VGrid)
export class VGridGroupRow {
  private element: Element;
  private vGrid: VGrid;
  private rowTemplate: string;



  constructor(element: Element, vGrid: VGrid) {
    this.element = element;
    this.vGrid = vGrid;
    this.rowTemplate = element.innerHTML;
    element.innerHTML = '';

  }

* Custom element 
 * This is used for creating custom loading screen
 *
 */


@customElement({
  name: 'v-grid-loadingscreen',
  templateOrNode: '',
  build: {
    required: true,
    compiler: 'default'
  },
  instructions: []
})
@inject(Element, VGrid)
export class VGridLoadingScreen {
  private element: Element;
  private vGrid: VGrid;
  private template: string;



  constructor(element: Element, vGrid: VGrid) {
    this.element = element;
    this.vGrid = vGrid;
    this.template = element.innerHTML;
    element.innerHTML = '';

  }