chore(): begin adding ionic components to mono-repo.

packages/ionic-angular/src/components/chip/chip.ios.scss

@@ -0,0 +1,95 @@
+
+// iOS Chip
+// --------------------------------------------------
+
+// deprecated
+$chip-ios-margin:                     null !default;
+
+/// @prop - Margin top of the chip
+$chip-ios-margin-top:                 2px !default;
+
+/// @prop - Margin end of the chip
+$chip-ios-margin-end:                 0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-ios-margin-bottom:              $chip-ios-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-ios-margin-start:               $chip-ios-margin-end !default;
+
+/// @prop - Height of the chip
+$chip-ios-height:                     32px !default;
+
+/// @prop - Border radius of the chip
+$chip-ios-border-radius:              16px !default;
+
+/// @prop - Font size of the chip
+$chip-ios-font-size:                  13px !default;
+
+/// @prop - Text color of the chip
+$chip-ios-text-color:                 rgba(0, 0, 0, .87) !default;
+
+/// @prop - Background color of the chip
+$chip-ios-background-color:           rgba(0, 0, 0, .12) !default;
+
+// deprecated
+$chip-ios-label-margin:               null !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-ios-label-margin-top:           0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-ios-label-margin-end:           10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-ios-label-margin-bottom:        $chip-ios-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-ios-label-margin-start:         $chip-ios-label-margin-end !default;
+
+/// @prop - Background color of the icon in the chip
+$chip-ios-icon-background-color:      color($colors-ios, primary) !default;
+
+/// @prop - Text color of the icon in the chip
+$chip-ios-icon-text-color:            color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
+
+
+.chip-ios {
+  @include border-radius($chip-ios-border-radius);
+
+  height: $chip-ios-height;
+
+  font-size: $chip-ios-font-size;
+  line-height: $chip-ios-height;
+  color: $chip-ios-text-color;
+  background: $chip-ios-background-color;
+
+  @include deprecated-variable(margin, $chip-ios-margin) {
+    @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start);
+  }
+}
+
+.chip-ios > ion-label {
+  @include deprecated-variable(margin, $chip-ios-label-margin) {
+    @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start);
+  }
+}
+
+.chip-ios > ion-icon {
+  color: $chip-ios-icon-text-color;
+  background-color: $chip-ios-icon-background-color;
+}
+
+
+// Generate iOS Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .chip-ios-#{$color-name},
+  .chip-ios .icon-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+}

packages/ionic-angular/src/components/chip/chip.md.scss

@@ -0,0 +1,95 @@
+
+// Material Design Chip
+// --------------------------------------------------
+
+// deprecated
+$chip-md-margin:                     null !default;
+
+/// @prop - Margin top of the chip
+$chip-md-margin-top:                 2px !default;
+
+/// @prop - Margin end of the chip
+$chip-md-margin-end:                 0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-md-margin-bottom:              $chip-md-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-md-margin-start:               $chip-md-margin-end !default;
+
+/// @prop - Height of the chip
+$chip-md-height:                     32px !default;
+
+/// @prop - Border radius of the chip
+$chip-md-border-radius:              16px !default;
+
+/// @prop - Font size of the chip
+$chip-md-font-size:                  13px !default;
+
+/// @prop - Text color of the chip
+$chip-md-text-color:                 rgba(0, 0, 0, .87) !default;
+
+/// @prop - Background color of the chip
+$chip-md-background-color:           rgba(0, 0, 0, .12) !default;
+
+// deprecated
+$chip-md-label-margin:               null !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-md-label-margin-top:           0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-md-label-margin-end:           10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-md-label-margin-bottom:        $chip-md-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-md-label-margin-start:         $chip-md-label-margin-end !default;
+
+/// @prop - Background color of the icon in the chip
+$chip-md-icon-background-color:      color($colors-md, primary) !default;
+
+/// @prop - Text color of the icon in the chip
+$chip-md-icon-text-color:            color-contrast($colors-md, $chip-md-icon-background-color) !default;
+
+
+.chip-md {
+  @include border-radius($chip-md-border-radius);
+
+  height: $chip-md-height;
+
+  font-size: $chip-md-font-size;
+  line-height: $chip-md-height;
+  color: $chip-md-text-color;
+  background: $chip-md-background-color;
+
+  @include deprecated-variable(margin, $chip-md-margin) {
+    @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
+  }
+}
+
+.chip-md > ion-label {
+  @include deprecated-variable(margin, $chip-md-label-margin) {
+    @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start);
+  }
+}
+
+.chip-md > ion-icon {
+  color: $chip-md-icon-text-color;
+  background-color: $chip-md-icon-background-color;
+}
+
+
+// Generate Material Design Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .chip-md-#{$color-name},
+  .chip-md .icon-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+}

packages/ionic-angular/src/components/chip/chip.scss

@@ -0,0 +1,97 @@
+@import "../../themes/ionic.globals";
+
+// Chip
+// --------------------------------------------------
+
+/// @prop - Border radius of the button in the chip
+$chip-button-border-radius:     50% !default;
+
+// deprecated
+$chip-button-margin:            null !default;
+
+/// @prop - Margin top of the button in the chip
+$chip-button-margin-top:        0 !default;
+
+/// @prop - Margin end of the button in the chip
+$chip-button-margin-end:        $chip-button-margin-top !default;
+
+/// @prop - Margin bottom of the button in the chip
+$chip-button-margin-bottom:     $chip-button-margin-top !default;
+
+/// @prop - Margin start of the button in the chip
+$chip-button-margin-start:      $chip-button-margin-end !default;
+
+/// @prop - Width and height of the button in the chip
+$chip-button-size:              32px !default;
+
+/// @prop - Border radius of the icon in the chip
+$chip-icon-border-radius:     50% !default;
+
+/// @prop - Text alignment of the icon in the chip
+$chip-icon-text-align:        center !default;
+
+/// @prop - Width and height of the icon in the chip
+$chip-icon-size:              32px !default;
+
+/// @prop - Font size of the icon in the chip
+$chip-icon-font-size:         18px !default;
+
+/// @prop - Width and height of the avatar in the chip
+$chip-avatar-size:            32px !default;
+
+/// @prop - Border radius of the avatar in the chip
+$chip-avatar-border-radius:   50% !default;
+
+
+ion-chip {
+  display: inline-flex;
+
+  align-self: center;
+
+  font-weight: normal;
+  vertical-align: middle;
+
+  box-sizing: border-box;
+}
+
+ion-chip .button {
+  @include border-radius($chip-button-border-radius);
+
+  width: $chip-button-size;
+  height: $chip-button-size;
+
+  @include deprecated-variable(margin, $chip-button-margin) {
+    @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
+  }
+}
+
+ion-chip ion-icon {
+  @include text-align($chip-icon-text-align);
+  @include border-radius($chip-icon-border-radius);
+
+  width: $chip-icon-size;
+  height: $chip-icon-size;
+
+  font-size: $chip-icon-font-size;
+  line-height: $chip-icon-size;
+}
+
+ion-chip ion-avatar {
+  @include border-radius($chip-avatar-border-radius);
+
+  width: $chip-avatar-size;
+  min-width: $chip-avatar-size;
+  height: $chip-avatar-size;
+  min-height: $chip-avatar-size;
+}
+
+ion-chip ion-avatar img {
+  @include border-radius($chip-avatar-border-radius);
+
+  display: block;
+
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}

packages/ionic-angular/src/components/chip/chip.ts

@@ -0,0 +1,102 @@
+import { Directive, ElementRef, Renderer } from '@angular/core';
+
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
+
+/**
+  * @name Chip
+  * @module ionic
+  * @description
+  * Chips represent complex entities in small blocks, such as a contact.
+  *
+  *
+  * @usage
+  *
+  * ```html
+  * <ion-chip>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-label color="secondary">Secondary Label</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip color="secondary">
+  *   <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip color="danger">
+  *   <ion-label>Danger</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-icon name="pin"></ion-icon>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-icon name="heart" color="dark"></ion-icon>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  *
+  * <ion-chip>
+  *   <ion-avatar>
+  *     <img src="assets/img/my-img.png">
+  *   </ion-avatar>
+  *   <ion-label>Default</ion-label>
+  * </ion-chip>
+  * ```
+  *
+  *
+  * @advanced
+  *
+  * ```html
+  * <ion-chip #chip1>
+  *   <ion-label>Default</ion-label>
+  *   <ion-button clear color="light" (click)="delete(chip1)">
+  *     <ion-icon name="close-circle"></ion-icon>
+  *   </ion-button>
+  * </ion-chip>
+  *
+  * <ion-chip #chip2>
+  *   <ion-icon name="pin" color="primary"></ion-icon>
+  *   <ion-label>With Icon</ion-label>
+  *   <ion-button (click)="delete(chip2)">
+  *     <ion-icon name="close"></ion-icon>
+  *   </ion-button>
+  * </ion-chip>
+  *
+  * <ion-chip #chip3>
+  *   <ion-avatar>
+  *     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+  *   </ion-avatar>
+  *   <ion-label>With Avatar</ion-label>
+  *   <ion-button clear color="dark" (click)="delete(chip3)">
+  *     <ion-icon name="close-circle"></ion-icon>
+  *   </ion-button>
+  * </ion-chip>
+  * ```
+  *
+  * ```ts
+  * @Component({
+  *   templateUrl: 'main.html'
+  * })
+  * class E2EPage {
+  *   delete(chip: Element) {
+  *     chip.remove();
+  *   }
+  * }
+  * ```
+  *
+  * @demo /docs/demos/src/chip/
+ **/
+@Directive({
+  selector: 'ion-chip'
+})
+export class Chip extends Ion {
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer, 'chip');
+  }
+
+}

packages/ionic-angular/src/components/chip/chip.wp.scss

@@ -0,0 +1,99 @@
+
+// Windows Chip
+// --------------------------------------------------
+
+// deprecated
+$chip-wp-margin:                     null !default;
+
+/// @prop - Margin top of the chip
+$chip-wp-margin-top:                 2px !default;
+
+/// @prop - Margin end of the chip
+$chip-wp-margin-end:                 0 !default;
+
+/// @prop - Margin bottom of the chip
+$chip-wp-margin-bottom:              $chip-wp-margin-top !default;
+
+/// @prop - Margin start of the chip
+$chip-wp-margin-start:               $chip-wp-margin-end !default;
+
+/// @prop - Height of the chip
+$chip-wp-height:                     32px !default;
+
+/// @prop - Border radius of the chip
+$chip-wp-border-radius:              16px !default;
+
+/// @prop - Font size of the chip
+$chip-wp-font-size:                  13px !default;
+
+/// @prop - Text color of the chip
+$chip-wp-text-color:                 rgba(0, 0, 0, .87) !default;
+
+/// @prop - Background color of the chip
+$chip-wp-background-color:           rgba(0, 0, 0, .12) !default;
+
+// deprecated
+$chip-wp-label-margin:               null !default;
+
+/// @prop - Margin top of the label in the chip
+$chip-wp-label-margin-top:           0 !default;
+
+/// @prop - Margin end of the label in the chip
+$chip-wp-label-margin-end:           10px !default;
+
+/// @prop - Margin bottom of the label in the chip
+$chip-wp-label-margin-bottom:        $chip-wp-label-margin-top !default;
+
+/// @prop - Margin start of the label in the chip
+$chip-wp-label-margin-start:         $chip-wp-label-margin-end !default;
+
+/// @prop - Background color of the icon in the chip
+$chip-wp-icon-background-color:      color($colors-wp, primary) !default;
+
+/// @prop - Text color of the icon in the chip
+$chip-wp-icon-text-color:            color-contrast($colors-wp, $chip-wp-icon-background-color) !default;
+
+
+.chip-wp {
+  @include border-radius($chip-wp-border-radius);
+
+  height: $chip-wp-height;
+
+  font-size: $chip-wp-font-size;
+  line-height: $chip-wp-height;
+  color: $chip-wp-text-color;
+  background: $chip-wp-background-color;
+
+  @include deprecated-variable(margin, $chip-wp-margin) {
+    @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start);
+  }
+}
+
+.chip-wp > ion-label {
+  @include deprecated-variable(margin, $chip-wp-label-margin) {
+    @include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start);
+  }
+}
+
+.chip-wp > ion-icon {
+  color: $chip-wp-icon-text-color;
+  background-color: $chip-wp-icon-background-color;
+}
+
+.chip-wp .button {
+  border: 0;
+}
+
+
+// Generate Windows Chip Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .chip-wp-#{$color-name},
+  .chip-wp .icon-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+}

packages/ionic-angular/src/components/chip/test/basic/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { RootPage } from '../pages/root-page/root-page';
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class AppComponent {
+  root = RootPage;
+}

packages/ionic-angular/src/components/chip/test/basic/app/app.module.ts

@@ -0,0 +1,20 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { RootPageModule } from '../pages/root-page/root-page.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    RootPageModule
+  ],
+  bootstrap: [IonicApp],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}

packages/ionic-angular/src/components/chip/test/basic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/chip/test/basic/pages/root-page/root-page.html

@@ -0,0 +1,106 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Chips</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <h2>Text Chips</h2>
+
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Another With Longer Text</ion-label>
+  </ion-chip>
+
+  <h2>Color Chips</h2>
+
+  <ion-chip color="primary">
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Primary</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-chip>
+
+  <h2>Icon Chips</h2>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+   <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Secondary</ion-label>
+    <ion-icon name="pin" color="secondary"></ion-icon>
+  </ion-chip>
+
+  <h2>Avatar Chips</h2>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Right Avatar</ion-label>
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+  </ion-chip>
+
+  <h2>Delete Chips</h2>
+
+  <ion-chip #chip1>
+    <ion-label>Default</ion-label>
+    <ion-button clear color="light" (click)="delete(chip1)">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-button>
+  </ion-chip>
+
+  <ion-chip #chip2>
+    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-label>With Icon</ion-label>
+    <ion-button (click)="delete(chip2)">
+      <ion-icon name="close"></ion-icon>
+    </ion-button>
+  </ion-chip>
+
+  <ion-chip #chip3>
+    <ion-avatar>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>With Avatar</ion-label>
+    <ion-button clear color="dark" (click)="delete(chip3)">
+      <ion-icon name="close-circle"></ion-icon>
+    </ion-button>
+  </ion-chip>
+
+  <ion-item>
+    <ion-label>Chip Item</ion-label>
+    <ion-chip item-end #chip1>
+      <ion-icon name="pin" color="primary"></ion-icon>
+      <ion-label>Default</ion-label>
+      <ion-button clear color="light" (click)="delete(chip1)">
+        <ion-icon name="close-circle"></ion-icon>
+      </ion-button>
+    </ion-chip>
+  </ion-item>
+</ion-content>

packages/ionic-angular/src/components/chip/test/basic/pages/root-page/root-page.module.ts

@@ -0,0 +1,15 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { RootPage } from './root-page';
+
+@NgModule({
+  declarations: [
+    RootPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(RootPage)
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RootPageModule {}

packages/ionic-angular/src/components/chip/test/basic/pages/root-page/root-page.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  templateUrl: 'root-page.html'
+})
+export class RootPage {
+  delete(chip: Element) {
+    chip.remove();
+  }
+}