fix(angular): module exports

angular/src/directives/control-value-accessors/boolean-value-accessor.ts

@@ -0,0 +1,61 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { setIonicClasses } from './util/set-ionic-classes';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-checkbox,ion-toggle',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessor implements ControlValueAccessor {
+
+  constructor(private element: ElementRef) {
+    this.onChange = () => {/**/};
+    this.onTouched = () => {/**/};
+  }
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  writeValue(value: any) {
+    this.element.nativeElement.checked = value;
+    setIonicClasses(this.element);
+  }
+
+  @HostListener('ionChange', ['$event.target.checked'])
+  _handleIonChange(value: any) {
+    this.onChange(value);
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.element.nativeElement.disabled = isDisabled;
+  }
+}

angular/src/directives/control-value-accessors/numeric-value-accesssor.ts

@@ -0,0 +1,65 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { setIonicClasses } from './util/set-ionic-classes';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-input[type=number]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: NumericValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class NumericValueAccessor implements ControlValueAccessor {
+
+  constructor(private element: ElementRef) {
+    this.onChange = () => {/**/};
+    this.onTouched = () => {/**/};
+  }
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  writeValue(value: any) {
+    // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
+    // Probably not an issue for us, but it doesn't really cost anything either
+    this.element.nativeElement.value = value == null ? '' : value;
+    setIonicClasses(this.element);
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  _handleInputEvent(value: any) {
+    this.onChange(value);
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  registerOnChange(fn: (_: number | null) => void) {
+    this.onChange = value => {
+      fn(value === '' ? null : parseFloat(value));
+    };
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.element.nativeElement.disabled = isDisabled;
+  }
+}

angular/src/directives/control-value-accessors/radio-value-accessor.ts

@@ -0,0 +1,67 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { setIonicClasses } from './util/set-ionic-classes';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-radio',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: RadioValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class RadioValueAccessor implements ControlValueAccessor {
+  @Input() value: any;
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  constructor(private element: ElementRef) {
+    this.onChange = () => {/**/};
+    this.onTouched = () => {/**/};
+  }
+
+  writeValue(value: any) {
+    this.element.nativeElement.checked = this.value = value;
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionSelect', ['$event.target.checked'])
+  _handleIonSelect(value: any) {
+    this.onChange(value);
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = () => {
+      fn(this.value);
+    };
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.element.nativeElement.disabled = isDisabled;
+  }
+}

angular/src/directives/control-value-accessors/select-value-accessor.ts

@@ -0,0 +1,64 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { setIonicClasses } from './util/set-ionic-classes';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessor implements ControlValueAccessor {
+
+  constructor(private element: ElementRef) {
+    this.onChange = () => {/**/};
+    this.onTouched = () => {/**/};
+  }
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  writeValue(value: any) {
+    this.element.nativeElement.value = value;
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionChange', ['$event.target.value'])
+  _handleChangeEvent(value: any) {
+    this.onChange(value);
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.element.nativeElement.disabled = isDisabled;
+  }
+}

angular/src/directives/control-value-accessors/text-value-accessor.ts

@@ -0,0 +1,64 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { setIonicClasses } from './util/set-ionic-classes';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'ion-input:not([type=number]),ion-textarea,ion-searchbar',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TextValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class TextValueAccessor implements ControlValueAccessor {
+
+  constructor(private element: ElementRef) {
+    this.onChange = () => {/**/};
+    this.onTouched = () => {/**/};
+  }
+
+  onChange: (value: any) => void;
+  onTouched: () => void;
+
+  writeValue(value: any) {
+    this.element.nativeElement.value = value;
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('input', ['$event.target.value'])
+  _handleInputEvent(value: any) {
+    this.onChange(value);
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  @HostListener('ionBlur')
+  _handleBlurEvent() {
+    this.onTouched();
+
+    requestAnimationFrame(() => {
+      setIonicClasses(this.element);
+    });
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.element.nativeElement.disabled = isDisabled;
+  }
+}

angular/src/directives/control-value-accessors/util/set-ionic-classes.ts

@@ -0,0 +1,20 @@
+import { ElementRef } from '@angular/core';
+
+export function setIonicClasses(element: ElementRef) {
+  const classList = element.nativeElement.classList;
+
+  classList.remove('ion-invalid');
+  classList.remove('ion-valid');
+  classList.remove('ion-touched');
+  classList.remove('ion-untouched');
+  classList.remove('ion-dirty');
+  classList.remove('ion-pristine');
+  classList.forEach((cls: string) => {
+    if (cls === 'ng-invalid') { classList.add('ion-invalid'); }
+    if (cls === 'ng-valid') { classList.add('ion-valid'); }
+    if (cls === 'ng-touched') { classList.add('ion-touched'); }
+    if (cls === 'ng-untouched') { classList.add('ion-untouched'); }
+    if (cls === 'ng-dirty') { classList.add('ion-dirty'); }
+    if (cls === 'ng-pristine') { classList.add('ion-pristine'); }
+  });
+}

angular/src/directives/index.ts

@@ -0,0 +1,18 @@
+
+export { BooleanValueAccessor } from './control-value-accessors/boolean-value-accessor';
+export { NumericValueAccessor } from './control-value-accessors/numeric-value-accesssor';
+export { RadioValueAccessor } from './control-value-accessors/radio-value-accessor';
+export { SelectValueAccessor } from './control-value-accessors/select-value-accessor';
+export { TextValueAccessor } from './control-value-accessors/text-value-accessor';
+
+export { GoBack } from './navigation/go-back';
+export { IonBackButton } from './navigation/ion-back-button';
+export { NavDelegate } from './navigation/nav-delegate';
+export { TabDelegate } from './navigation/tab-delegate';
+export { IonRouterOutlet } from './navigation/ion-router-outlet';
+
+export { Icon } from './icon';
+export { VirtualScroll } from './virtual-scroll/virtual-scroll';
+export { VirtualItem } from './virtual-scroll/virtual-item';
+export { VirtualHeader } from './virtual-scroll/virtual-header';
+export { VirtualFooter } from './virtual-scroll/virtual-footer';

angular/src/directives/navigation/go-back.ts

@@ -0,0 +1,17 @@
+import { Directive, HostListener } from '@angular/core';
+import { NavController } from '../../providers/nav-controller';
+
+@Directive({
+  selector: '[goBack]',
+})
+export class GoBack {
+
+  constructor(
+    private navCtrl: NavController,
+  ) {}
+
+  @HostListener('click')
+  onClick() {
+    this.navCtrl.setGoback();
+  }
+}

angular/src/directives/navigation/ion-back-button.ts

@@ -0,0 +1,19 @@
+import { Directive, HostListener, Optional } from '@angular/core';
+import { IonRouterOutlet } from './ion-router-outlet';
+
+@Directive({
+  selector: 'ion-back-button'
+})
+export class IonBackButton {
+
+  constructor(
+    @Optional() private routerOutlet: IonRouterOutlet,
+  ) {}
+
+  @HostListener('click')
+  onClick() {
+    if (this.routerOutlet.canGoBack()) {
+      this.routerOutlet.pop();
+    }
+  }
+}

angular/src/directives/navigation/ion-router-outlet.ts

@@ -0,0 +1,175 @@
+import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, OnDestroy, OnInit, Optional, Output, ViewContainerRef } from '@angular/core';
+import { ActivatedRoute, ChildrenOutletContexts, PRIMARY_OUTLET, Router } from '@angular/router';
+import { StackController } from './router-controller';
+import { NavController } from '../../providers/nav-controller';
+import { bindLifecycleEvents } from '../../providers/angular-delegate';
+
+@Directive({
+  selector: 'ion-router-outlet',
+  exportAs: 'outlet'
+})
+export class IonRouterOutlet implements OnDestroy, OnInit {
+
+  private activated: ComponentRef<any>|null = null;
+
+  private _activatedRoute: ActivatedRoute|null = null;
+  private name: string;
+  private stackCtrl: StackController;
+
+  @Output('activate') activateEvents = new EventEmitter<any>();
+  @Output('deactivate') deactivateEvents = new EventEmitter<any>();
+
+  constructor(
+    private parentContexts: ChildrenOutletContexts,
+    private location: ViewContainerRef,
+    private resolver: ComponentFactoryResolver,
+    elementRef: ElementRef,
+    @Attribute('name') name: string,
+    @Optional() @Attribute('stack') stack: any,
+    private changeDetector: ChangeDetectorRef,
+    private navCtrl: NavController,
+    router: Router
+  ) {
+    this.name = name || PRIMARY_OUTLET;
+    parentContexts.onChildOutletCreated(this.name, this as any);
+    this.stackCtrl = new StackController(stack != null, elementRef.nativeElement, router, this.navCtrl);
+  }
+
+  ngOnDestroy(): void {
+    this.parentContexts.onChildOutletDestroyed(this.name);
+  }
+
+  ngOnInit(): void {
+    if (!this.activated) {
+      // If the outlet was not instantiated at the time the route got activated we need to populate
+      // the outlet when it is initialized (ie inside a NgIf)
+      const context = this.parentContexts.getContext(this.name);
+      if (context && context.route) {
+        if (context.attachRef) {
+          // `attachRef` is populated when there is an existing component to mount
+          this.attach(context.attachRef, context.route);
+        } else {
+          // otherwise the component defined in the configuration is created
+          this.activateWith(context.route, context.resolver || null);
+        }
+      }
+    }
+  }
+
+  get isActivated(): boolean { return !!this.activated; }
+
+  get component(): Object {
+    if (!this.activated) {
+      throw new Error('Outlet is not activated');
+    }
+    return this.activated.instance;
+  }
+
+  get activatedRoute(): ActivatedRoute {
+    if (!this.activated) {
+      throw new Error('Outlet is not activated');
+    }
+    return this._activatedRoute as ActivatedRoute;
+  }
+
+  get activatedRouteData() {
+    if (this._activatedRoute) {
+      return this._activatedRoute.snapshot.data;
+    }
+    return {};
+  }
+
+  /**
+   * Called when the `RouteReuseStrategy` instructs to detach the subtree
+   */
+  detach(): ComponentRef<any> {
+    if (!this.activated) {
+      throw new Error('Outlet is not activated');
+    }
+    this.location.detach();
+    const cmp = this.activated;
+    this.activated = null;
+    this._activatedRoute = null;
+    return cmp;
+  }
+
+  /**
+   * Called when the `RouteReuseStrategy` instructs to re-attach a previously detached subtree
+   */
+  attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) {
+    this.activated = ref;
+    this._activatedRoute = activatedRoute;
+    this.location.insert(ref.hostView);
+  }
+
+  deactivate(): void {
+    if (this.activated) {
+      const c = this.component;
+      this.activated = null;
+      this._activatedRoute = null;
+      this.deactivateEvents.emit(c);
+    }
+  }
+
+  async activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver|null) {
+    if (this.isActivated) {
+      throw new Error('Cannot activate an already activated outlet');
+    }
+    this._activatedRoute = activatedRoute;
+
+    let enteringView = this.stackCtrl.getExistingView(activatedRoute);
+    if (enteringView) {
+      this.activated = enteringView.ref;
+    } else {
+      const snapshot = (activatedRoute as any)._futureSnapshot;
+
+      const component = <any>snapshot.routeConfig !.component;
+      resolver = resolver || this.resolver;
+
+      const factory = resolver.resolveComponentFactory(component);
+      const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
+
+      const injector = new OutletInjector(activatedRoute, childContexts, this.location.injector);
+      const cmp = this.activated = this.location.createComponent(factory, this.location.length, injector);
+
+      bindLifecycleEvents(cmp.instance, cmp.location.nativeElement);
+
+      // Calling `markForCheck` to make sure we will run the change detection when the
+      // `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.
+      this.changeDetector.markForCheck();
+      enteringView = this.stackCtrl.createView(this.activated, activatedRoute);
+    }
+
+    const direction = this.navCtrl.consumeDirection();
+    await this.stackCtrl.setActive(enteringView, direction);
+    this.activateEvents.emit(this.activated.instance);
+  }
+
+  canGoBack(deep = 1) {
+    return this.stackCtrl.canGoBack(deep);
+  }
+
+  pop(deep = 1) {
+    return this.stackCtrl.pop(deep);
+  }
+}
+
+class OutletInjector implements Injector {
+  constructor(
+    private route: ActivatedRoute,
+    private childContexts: ChildrenOutletContexts,
+    private parent: Injector
+  ) {}
+
+  get(token: any, notFoundValue?: any): any {
+    if (token === ActivatedRoute) {
+      return this.route;
+    }
+
+    if (token === ChildrenOutletContexts) {
+      return this.childContexts;
+    }
+
+    return this.parent.get(token, notFoundValue);
+  }
+}

angular/src/directives/navigation/nav-delegate.ts

@@ -0,0 +1,16 @@
+import { ComponentFactoryResolver, Directive, ElementRef, Injector } from '@angular/core';
+import { AngularDelegate } from '../../providers/angular-delegate';
+
+@Directive({
+  selector: 'ion-nav',
+})
+export class NavDelegate {
+  constructor(
+    ref: ElementRef,
+    cfr: ComponentFactoryResolver,
+    injector: Injector,
+    angularDelegate: AngularDelegate,
+  ) {
+    ref.nativeElement.delegate = angularDelegate.create(cfr, injector);
+  }
+}

angular/src/directives/navigation/router-controller.ts

@@ -0,0 +1,132 @@
+import { ComponentRef } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NavDirection } from '@ionic/core';
+
+import { NavController } from '../../providers/nav-controller';
+
+
+export class StackController {
+
+  private viewsSnapshot: RouteView[] = [];
+  private views: RouteView[] = [];
+
+  constructor(
+    private stack: boolean,
+    private containerEl: HTMLIonRouterOutletElement,
+    private router: Router,
+    private navCtrl: NavController,
+  ) {}
+
+  createView(enteringRef: ComponentRef<any>, route: ActivatedRoute): RouteView {
+    return {
+      ref: enteringRef,
+      element: (enteringRef && enteringRef.location && enteringRef.location.nativeElement) as HTMLElement,
+      url: this.getUrl(route),
+      deactivatedId: -1
+    };
+  }
+
+  getExistingView(activatedRoute: ActivatedRoute): RouteView|null {
+    const activatedUrlKey = this.getUrl(activatedRoute);
+    return this.views.find(vw => vw.url === activatedUrlKey);
+  }
+
+  canGoBack(deep: number): boolean {
+    return this.views.length > deep;
+  }
+
+  async setActive(enteringView: RouteView, direction: number | undefined) {
+    const leavingView = this.getActive();
+    const reused = this.insertView(enteringView);
+    direction = direction != null ? direction : (reused ? -1 : 1);
+    await this.transition(enteringView, leavingView, direction, this.canGoBack(1));
+
+    this.cleanup();
+  }
+
+  pop(deep: number) {
+    const view = this.views[this.views.length - deep - 1];
+    this.navCtrl.setGoback();
+    this.router.navigateByUrl(view.url);
+  }
+
+  private insertView(enteringView: RouteView): boolean {
+    if (this.stack) {
+      const index = this.views.indexOf(enteringView);
+      if (index >= 0) {
+        this.views = this.views.slice(0, index + 1);
+        return true;
+      } else {
+        this.views.push(enteringView);
+        return false;
+      }
+    } else {
+      this.views = [enteringView];
+      return false;
+    }
+  }
+
+  private cleanup() {
+    this.viewsSnapshot
+      .filter(view => !this.views.includes(view))
+      .forEach(view => destroyView(view));
+
+    for (let i = 0; i < this.views.length - 1; i++) {
+      this.views[i].element.hidden = true;
+    }
+    this.viewsSnapshot = this.views.slice();
+  }
+
+  getActive(): RouteView | null {
+    return this.views.length > 0 ? this.views[this.views.length - 1] : null;
+  }
+
+  private async transition(enteringView: RouteView, leavingView: RouteView, direction: number, showGoBack: boolean) {
+    const enteringEl = enteringView ? enteringView.element : undefined;
+    const leavingEl = leavingView ? leavingView.element : undefined;
+    const containerEl = this.containerEl;
+    if (enteringEl) {
+      enteringEl.classList.add('ion-page', 'hide-page');
+      containerEl.appendChild(enteringEl);
+
+      await containerEl.componentOnReady();
+      await containerEl.commit(enteringEl, leavingEl, {
+        duration: direction === 0 ? 0 : undefined,
+        direction: direction === -1 ? NavDirection.Back : NavDirection.Forward,
+        showGoBack
+      });
+    }
+  }
+
+  private getUrl(activatedRoute: ActivatedRoute) {
+    const urlTree = this.router.createUrlTree(['.'], { relativeTo: activatedRoute });
+    return this.router.serializeUrl(urlTree);
+  }
+
+}
+
+export function destroyView(view: RouteView) {
+  if (view) {
+    // TODO lifecycle event
+    view.ref.destroy();
+  }
+}
+
+export function getLastDeactivatedRef(views: RouteView[]) {
+  if (views.length < 2) {
+    return null;
+  }
+
+  return views.sort((a, b) => {
+    if (a.deactivatedId > b.deactivatedId) return -1;
+    if (a.deactivatedId < b.deactivatedId) return 1;
+    return 0;
+  })[0].ref;
+}
+
+export interface RouteView {
+  url: string;
+  element: HTMLElement;
+  ref: ComponentRef<any>;
+  deactivatedId: number;
+}

angular/src/directives/navigation/router-transition.ts

@@ -0,0 +1,33 @@
+import { ComponentRef } from '@angular/core';
+
+export function runTransition(enteringRef: ComponentRef<any>, leavingRef: ComponentRef<any>): Promise<void> {
+  const enteringElm = (enteringRef && enteringRef.location && enteringRef.location.nativeElement);
+  const leavingElm = (leavingRef && leavingRef.location && leavingRef.location.nativeElement);
+
+  if (!enteringElm && !leavingElm) {
+    return Promise.resolve();
+  }
+
+  return tr(enteringElm, leavingElm);
+}
+
+
+function tr(enteringElm: HTMLElement, leavingElm: HTMLElement): Promise<void> {
+  console.log('transition start');
+
+  return new Promise(resolve => {
+
+    setTimeout(() => {
+
+      if (enteringElm) {
+        enteringElm.classList.add('show-page');
+      }
+
+      if (leavingElm) {
+        leavingElm.classList.remove('show-page');
+      }
+
+      resolve();
+    }, 750);
+  });
+}

angular/src/directives/navigation/tab-delegate.ts

@@ -0,0 +1,32 @@
+import { ComponentFactoryResolver, Directive, ElementRef, HostListener, Injector, Optional } from '@angular/core';
+import { Router } from '@angular/router';
+import { AngularDelegate } from '../../providers/angular-delegate';
+
+
+@Directive({
+  selector: 'ion-tab'
+})
+export class TabDelegate {
+
+  constructor(
+    @Optional() private router: Router,
+    ref: ElementRef,
+    cfr: ComponentFactoryResolver,
+    injector: Injector,
+    angularDelegate: AngularDelegate,
+  ) {
+    ref.nativeElement.delegate = angularDelegate.create(cfr, injector);
+  }
+
+  @HostListener('ionTabbarClick', ['$event'])
+  ionTabbarClick(ev: UIEvent) {
+    const tabElm: HTMLIonTabElement = ev.detail as any;
+    if (this.router && tabElm && tabElm.href) {
+      console.log('tabElm', tabElm.href);
+
+      this.router.navigateByUrl(tabElm.href);
+    }
+  }
+
+}
+

angular/src/directives/proxies-list.txt

@@ -0,0 +1,79 @@
+
+import * as d from './proxies';
+
+export const DIRECTIVES = [
+  d.App,
+  d.Avatar,
+  d.BackButton,
+  d.Badge,
+  d.Button,
+  d.Buttons,
+  d.Card,
+  d.CardContent,
+  d.CardHeader,
+  d.CardSubtitle,
+  d.CardTitle,
+  d.Checkbox,
+  d.Chip,
+  d.ChipButton,
+  d.Col,
+  d.Content,
+  d.Datetime,
+  d.Fab,
+  d.FabButton,
+  d.FabList,
+  d.Footer,
+  d.Grid,
+  d.Header,
+  d.HideWhen,
+  d.InfiniteScroll,
+  d.InfiniteScrollContent,
+  d.Input,
+  d.Item,
+  d.ItemDivider,
+  d.ItemGroup,
+  d.ItemOption,
+  d.ItemOptions,
+  d.ItemSliding,
+  d.Label,
+  d.List,
+  d.ListHeader,
+  d.Menu,
+  d.MenuButton,
+  d.MenuToggle,
+  d.NavControllerBase,
+  d.NavPop,
+  d.NavPush,
+  d.NavSetRoot,
+  d.Note,
+  d.Radio,
+  d.RadioGroup,
+  d.Range,
+  d.Refresher,
+  d.RefresherContent,
+  d.Reorder,
+  d.ReorderGroup,
+  d.RippleEffect,
+  d.Row,
+  d.Scroll,
+  d.Searchbar,
+  d.Segment,
+  d.SegmentButton,
+  d.Select,
+  d.SelectOption,
+  d.SelectPopover,
+  d.ShowWhen,
+  d.SkeletonText,
+  d.Slide,
+  d.Slides,
+  d.Spinner,
+  d.SplitPane,
+  d.Tab,
+  d.Tabs,
+  d.Text,
+  d.Textarea,
+  d.Thumbnail,
+  d.Toggle,
+  d.Toolbar,
+  d.ToolbarTitle
+];

angular/src/directives/proxies.ts

@@ -15,16 +15,7 @@ export function inputs(instance: any, el: ElementRef, props: string[]) {
   });
 }
 
-const accept = 'accept', activated = 'activated', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoBlockAll = 'autoBlockAll', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', base = 'base', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', component = 'component', contentId = 'contentId', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', direction = 'direction', disableScroll = 'disableScroll', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', from = 'from', fullscreen = 'fullscreen', gestureName = 'gestureName', gesturePriority = 'gesturePriority', goBack = 'goBack', highlight = 'highlight', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBackdropTap = 'ionBackdropTap', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDecrease = 'ionDecrease', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionGestureCaptured = 'ionGestureCaptured', ionGestureEnd = 'ionGestureEnd', ionGestureMove = 'ionGestureMove', ionGestureNotCaptured = 'ionGestureNotCaptured', ionGestureStart = 'ionGestureStart', ionIncrease = 'ionIncrease', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionOpen = 'ionOpen', ionPress = 'ionPress', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionRouteChanged = 'ionRouteChanged', ionRouteDataChanged = 'ionRouteDataChanged', ionRouteRedirectChanged = 'ionRouteRedirectChanged', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', ionTabButtonDidLoad = 'ionTabButtonDidLoad', ionTabButtonDidUnload = 'ionTabButtonDidUnload', ionTabbarClick = 'ionTabbarClick', knob = 'knob', labelId = 'labelId', layout = 'layout', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxAngle = 'maxAngle', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', passive = 'passive', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', placement = 'placement', platform = 'platform', position = 'position', pressed = 'pressed', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', ratio = 'ratio', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', stopPropagation = 'stopPropagation', strong = 'strong', subTitle = 'subTitle', swipeEnabled = 'swipeEnabled', tappable = 'tappable', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useHash = 'useHash', useTapClick = 'useTapClick', val = 'val', value = 'value', visible = 'visible', width = 'width', wrap = 'wrap';
-
-@NgDirective({ selector: 'ion-anchor' })
-export class Anchor {
-  @NgInput() href: string;
-  @NgInput() goBack: boolean;
-  constructor(el: ElementRef) {
-    inputs(this, el, [href, goBack]);
-  }
-}
+const accept = 'accept', activated = 'activated', active = 'active', allowEmptySelection = 'allowEmptySelection', animated = 'animated', autoHide = 'autoHide', autocapitalize = 'autocapitalize', autocomplete = 'autocomplete', autocorrect = 'autocorrect', autofocus = 'autofocus', btnId = 'btnId', button = 'button', buttonType = 'buttonType', cancelButtonText = 'cancelButtonText', cancelText = 'cancelText', checked = 'checked', clearInput = 'clearInput', clearOnEdit = 'clearOnEdit', closeDuration = 'closeDuration', color = 'color', cols = 'cols', contentId = 'contentId', debounce = 'debounce', defaultHref = 'defaultHref', detail = 'detail', disabled = 'disabled', displayFormat = 'displayFormat', doneText = 'doneText', dualKnobs = 'dualKnobs', duration = 'duration', edge = 'edge', expandable = 'expandable', fill = 'fill', fixed = 'fixed', floating = 'floating', forceOverscroll = 'forceOverscroll', fullscreen = 'fullscreen', goBack = 'goBack', href = 'href', icon = 'icon', inputmode = 'inputmode', interfaceOptions = 'interfaceOptions', ionBlur = 'ionBlur', ionCancel = 'ionCancel', ionChange = 'ionChange', ionClear = 'ionClear', ionClick = 'ionClick', ionClose = 'ionClose', ionDrag = 'ionDrag', ionFocus = 'ionFocus', ionInfinite = 'ionInfinite', ionInput = 'ionInput', ionInputDidLoad = 'ionInputDidLoad', ionInputDidUnload = 'ionInputDidUnload', ionMenuChange = 'ionMenuChange', ionNavChanged = 'ionNavChanged', ionOpen = 'ionOpen', ionPull = 'ionPull', ionRadioDidLoad = 'ionRadioDidLoad', ionRadioDidUnload = 'ionRadioDidUnload', ionRefresh = 'ionRefresh', ionScroll = 'ionScroll', ionScrollEnd = 'ionScrollEnd', ionScrollStart = 'ionScrollStart', ionSelect = 'ionSelect', ionSelectOptionDidLoad = 'ionSelectOptionDidLoad', ionSelectOptionDidUnload = 'ionSelectOptionDidUnload', ionSlideDidChange = 'ionSlideDidChange', ionSlideDrag = 'ionSlideDrag', ionSlideNextEnd = 'ionSlideNextEnd', ionSlideNextStart = 'ionSlideNextStart', ionSlidePrevEnd = 'ionSlidePrevEnd', ionSlidePrevStart = 'ionSlidePrevStart', ionSlideReachEnd = 'ionSlideReachEnd', ionSlideReachStart = 'ionSlideReachStart', ionSlideTouchEnd = 'ionSlideTouchEnd', ionSlideTouchStart = 'ionSlideTouchStart', ionSlideTransitionEnd = 'ionSlideTransitionEnd', ionSlideTransitionStart = 'ionSlideTransitionStart', ionSlideWillChange = 'ionSlideWillChange', ionSplitPaneVisible = 'ionSplitPaneVisible', ionStart = 'ionStart', ionStyle = 'ionStyle', ionSwipe = 'ionSwipe', loadingSpinner = 'loadingSpinner', loadingText = 'loadingText', max = 'max', maxEdgeStart = 'maxEdgeStart', maxlength = 'maxlength', mediaQuery = 'mediaQuery', menu = 'menu', menuId = 'menuId', message = 'message', min = 'min', minlength = 'minlength', mode = 'mode', multiple = 'multiple', name = 'name', okText = 'okText', options = 'options', or = 'or', orientation = 'orientation', pager = 'pager', pattern = 'pattern', paused = 'paused', persistent = 'persistent', pickerFormat = 'pickerFormat', pin = 'pin', placeholder = 'placeholder', platform = 'platform', position = 'position', pullMax = 'pullMax', pullMin = 'pullMin', pullingIcon = 'pullingIcon', pullingText = 'pullingText', readonly = 'readonly', refreshingSpinner = 'refreshingSpinner', refreshingText = 'refreshingText', required = 'required', results = 'results', round = 'round', rows = 'rows', scrollEnabled = 'scrollEnabled', scrollEvents = 'scrollEvents', scrollable = 'scrollable', selected = 'selected', selectedText = 'selectedText', show = 'show', showCancelButton = 'showCancelButton', size = 'size', snapbackDuration = 'snapbackDuration', snaps = 'snaps', spellcheck = 'spellcheck', stacked = 'stacked', step = 'step', strong = 'strong', subTitle = 'subTitle', swipeBackEnabled = 'swipeBackEnabled', swipeEnabled = 'swipeEnabled', tabBadge = 'tabBadge', tabBadgeStyle = 'tabBadgeStyle', tabIcon = 'tabIcon', tabTitle = 'tabTitle', tabbarHidden = 'tabbarHidden', tabbarHighlight = 'tabbarHighlight', tabbarLayout = 'tabbarLayout', tabbarPlacement = 'tabbarPlacement', tabsHideOnSubPages = 'tabsHideOnSubPages', threshold = 'threshold', title = 'title', translucent = 'translucent', type = 'type', url = 'url', useTapClick = 'useTapClick', value = 'value', width = 'width', wrap = 'wrap';
 
 @NgDirective({ selector: 'ion-app' })
 export class App {
@@ -43,18 +34,6 @@ export class BackButton {
   }
 }
 
-@NgDirective({ selector: 'ion-backdrop' })
-export class Backdrop {
-  @NgInput() visible: boolean;
-  @NgInput() tappable: boolean;
-  @NgInput() stopPropagation: boolean;
-  @NgOutput() ionBackdropTap: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [visible, tappable, stopPropagation]);
-    outputs(this, [ionBackdropTap]);
-  }
-}
-
 @NgDirective({ selector: 'ion-badge' })
 export class Badge {
   /**
@@ -255,10 +234,6 @@ export class Content {
   }
 }
 
-@NgDirective({ selector: 'ion-cordova-platform' })
-export class CordovaPlatform {
-}
-
 @NgDirective({ selector: 'ion-datetime' })
 export class Datetime {
   /**
@@ -366,37 +341,6 @@ export class Footer {
   }
 }
 
-@NgDirective({ selector: 'ion-gesture' })
-export class Gesture {
-  @NgInput() disabled: boolean;
-  @NgInput() autoBlockAll: boolean;
-  @NgInput() disableScroll: boolean;
-  @NgInput() direction: string;
-  @NgInput() gestureName: string;
-  @NgInput() gesturePriority: number;
-  @NgInput() passive: boolean;
-  @NgInput() maxAngle: number;
-  @NgInput() threshold: number;
-  @NgInput() type: string;
-  @NgOutput() ionGestureMove: NgEventEmitter<any>;
-  @NgOutput() ionGestureStart: NgEventEmitter<any>;
-  @NgOutput() ionGestureEnd: NgEventEmitter<any>;
-  @NgOutput() ionGestureNotCaptured: NgEventEmitter<any>;
-  @NgOutput() ionPress: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [disabled, autoBlockAll, disableScroll, direction, gestureName, gesturePriority, passive, maxAngle, threshold, type]);
-    outputs(this, [ionGestureMove, ionGestureStart, ionGestureEnd, ionGestureNotCaptured, ionPress]);
-  }
-}
-
-@NgDirective({ selector: 'ion-gesture-controller' })
-export class GestureController {
-  @NgOutput() ionGestureCaptured: NgEventEmitter<any>;
-  constructor() {
-    outputs(this, [ionGestureCaptured]);
-  }
-}
-
 @NgDirective({ selector: 'ion-grid' })
 export class Grid {
 }
@@ -771,6 +715,17 @@ export class MenuToggle {
   }
 }
 
+@NgDirective({ selector: 'ion-nav' })
+export class NavControllerBase {
+  @NgInput() swipeBackEnabled: boolean;
+  @NgInput() animated: boolean;
+  @NgOutput() ionNavChanged: NgEventEmitter<any>;
+  constructor(el: ElementRef) {
+    inputs(this, el, [swipeBackEnabled, animated]);
+    outputs(this, [ionNavChanged]);
+  }
+}
+
 @NgDirective({ selector: 'ion-nav-pop' })
 export class NavPop {
 }
@@ -907,25 +862,6 @@ export class Range {
   }
 }
 
-@NgDirective({ selector: 'ion-range-knob' })
-export class RangeKnob {
-  @NgInput() pressed: boolean;
-  @NgInput() pin: boolean;
-  @NgInput() min: number;
-  @NgInput() max: number;
-  @NgInput() val: number;
-  @NgInput() disabled: boolean;
-  @NgInput() labelId: string;
-  @NgInput() knob: string;
-  @NgInput() ratio: number;
-  @NgOutput() ionIncrease: NgEventEmitter<any>;
-  @NgOutput() ionDecrease: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [pressed, pin, min, max, val, disabled, labelId, knob, ratio]);
-    outputs(this, [ionIncrease, ionDecrease]);
-  }
-}
-
 @NgDirective({ selector: 'ion-refresher' })
 export class Refresher {
   /**
@@ -1003,55 +939,6 @@ export class RippleEffect {
   }
 }
 
-@NgDirective({ selector: 'ion-route' })
-export class Route {
-  /**
-   * Relative path that needs to match in order for this route to apply.
-   */
-  @NgInput() url: string;
-  /**
-   * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in ion-tabs it actually refers to the name of the `ion-tab` to select.
-   */
-  @NgInput() component: string;
-  @NgOutput() ionRouteDataChanged: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [url, component]);
-    outputs(this, [ionRouteDataChanged]);
-  }
-}
-
-@NgDirective({ selector: 'ion-route-redirect' })
-export class RouteRedirect {
-  /**
-   * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
-   */
-  @NgInput() from: string;
-  @NgOutput() ionRouteRedirectChanged: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [from]);
-    outputs(this, [ionRouteRedirectChanged]);
-  }
-}
-
-@NgDirective({ selector: 'ion-router' })
-export class Router {
-  @NgInput() base: string;
-  @NgInput() useHash: boolean;
-  @NgOutput() ionRouteChanged: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [base, useHash]);
-    outputs(this, [ionRouteChanged]);
-  }
-}
-
-@NgDirective({ selector: 'ion-router-outlet' })
-export class RouterOutlet {
-  @NgInput() animated: boolean;
-  constructor(el: ElementRef) {
-    inputs(this, el, [animated]);
-  }
-}
-
 @NgDirective({ selector: 'ion-row' })
 export class Row {
 }
@@ -1343,45 +1230,96 @@ export class SplitPane {
   }
 }
 
-@NgDirective({ selector: 'ion-status-tap' })
-export class StatusTap {
-  @NgInput() duration: number;
-  constructor(el: ElementRef) {
-    inputs(this, el, [duration]);
-  }
-}
-
-@NgDirective({ selector: 'ion-tab-button' })
-export class TabButton {
-  @NgInput() selected: boolean;
-  @NgOutput() ionTabbarClick: NgEventEmitter<any>;
-  @NgOutput() ionTabButtonDidLoad: NgEventEmitter<any>;
-  @NgOutput() ionTabButtonDidUnload: NgEventEmitter<any>;
-  constructor(el: ElementRef) {
-    inputs(this, el, [selected]);
-    outputs(this, [ionTabbarClick, ionTabButtonDidLoad, ionTabButtonDidUnload]);
-  }
-}
-
-@NgDirective({ selector: 'ion-tabbar' })
-export class Tabbar {
-  @NgInput() placement: string;
-  @NgInput() scrollable: boolean;
-  @NgInput() layout: string;
-  @NgInput() highlight: boolean;
+@NgDirective({ selector: 'ion-tab' })
+export class Tab {
+  @NgInput() active: boolean;
+  @NgInput() btnId: string;
   /**
-   * If true, the tabbar will be translucent. Defaults to `false`.
+   * The title of the tab.
+   */
+  @NgInput() tabTitle: string;
+  /**
+   * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+   */
+  @NgInput() href: string;
+  /**
+   * The icon for the tab.
+   */
+  @NgInput() tabIcon: string;
+  /**
+   * The badge for the tab.
+   */
+  @NgInput() tabBadge: string;
+  /**
+   * The badge color for the tab button.
+   */
+  @NgInput() tabBadgeStyle: string;
+  /**
+   * The name of the tab.
+   */
+  @NgInput() name: string;
+  /**
+   * If true, the user cannot interact with the tab. Defaults to `false`.
+   */
+  @NgInput() disabled: boolean;
+  /**
+   * If true, the tab will be selected. Defaults to `false`.
+   */
+  @NgInput() selected: boolean;
+  /**
+   * If true, the tab button is visible within the tabbar. Defaults to `true`.
+   */
+  @NgInput() show: boolean;
+  /**
+   * If true, hide the tabs on child pages.
+   */
+  @NgInput() tabsHideOnSubPages: boolean;
+  @NgOutput() ionSelect: NgEventEmitter<any>;
+  constructor(el: ElementRef) {
+    inputs(this, el, [active, btnId, tabTitle, href, tabIcon, tabBadge, tabBadgeStyle, name, disabled, selected, show, tabsHideOnSubPages]);
+    outputs(this, [ionSelect]);
+  }
+}
+
+@NgDirective({ selector: 'ion-tabs' })
+export class Tabs {
+  /**
+   * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @NgInput() color: string;
+  /**
+   * A unique name for the tabs
+   */
+  @NgInput() name: string;
+  /**
+   * If true, the tabbar
+   */
+  @NgInput() tabbarHidden: boolean;
+  /**
+   * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
+   */
+  @NgInput() tabbarLayout: string;
+  /**
+   * Set position of the tabbar: `top`, `bottom`.
+   */
+  @NgInput() tabbarPlacement: string;
+  /**
+   * If true, show the tab highlight bar under the selected tab.
+   */
+  @NgInput() tabbarHighlight: boolean;
+  /**
+   * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
    */
   @NgInput() translucent: boolean;
+  @NgInput() scrollable: boolean;
+  @NgOutput() ionChange: NgEventEmitter<any>;
+  @NgOutput() ionNavChanged: NgEventEmitter<any>;
   constructor(el: ElementRef) {
-    inputs(this, el, [placement, scrollable, layout, highlight, translucent]);
+    inputs(this, el, [color, name, tabbarHidden, tabbarLayout, tabbarPlacement, tabbarHighlight, translucent, scrollable]);
+    outputs(this, [ionChange, ionNavChanged]);
   }
 }
 
-@NgDirective({ selector: 'ion-tap-click' })
-export class TapClick {
-}
-
 @NgDirective({ selector: 'ion-text' })
 export class Text {
   /**