chore(packages): move the packages to root

core/src/components/label/label.ios.scss

@@ -0,0 +1,64 @@
+@import "./label";
+@import "./label.ios.vars";
+
+// iOS Label
+// --------------------------------------------------
+
+.label-ios {
+  @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start);
+
+  font-family: $label-ios-font-family;
+}
+
+
+// iOS Default Label Inside An Input/Select Item
+// --------------------------------------------------
+
+.item-input .label-ios,
+.item-select .label-ios,
+.item-datetime .label-ios {
+  color: $label-ios-text-color;
+}
+
+
+// iOS Stacked & Floating Labels
+// --------------------------------------------------
+
+.label-ios[stacked] {
+  @include margin(null, null, 4px, null);
+
+  font-size: 12px;
+}
+
+.label-ios[floating] {
+  @include margin(null, null, 0, null);
+  @include transform(translate3d(0, 27px, 0));
+  @include transform-origin(start, top);
+
+  transition: transform 150ms ease-in-out;
+}
+
+.item-input-has-focus .label-ios[floating],
+.item-input-has-value .label-ios[floating] {
+  @include transform(translate3d(0, 0, 0), scale(.8));
+}
+
+.item-input-has-focus .label-ios[stacked],
+.item-input-has-focus .label-ios[floating] {
+  color: $label-ios-text-color-focused;
+}
+
+
+// Generate iOS Label colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  $color-base: ion-color($colors-ios, $color-name, base, ios);
+
+  .label-ios-#{$color-name},
+  .item-input .label-ios-#{$color-name},
+  .item-select .label-ios-#{$color-name},
+  .item-datetime .label-ios-#{$color-name} {
+    color: $color-base;
+  }
+}

core/src/components/label/label.ios.vars.scss

@@ -0,0 +1,27 @@
+@import "../../themes/ionic.globals.ios";
+
+@import "../item/item.ios.vars";
+
+// iOS Label
+// --------------------------------------------------
+
+/// @prop - Font family of the label
+$label-ios-font-family:                $font-family-ios-base !default;
+
+/// @prop - Text color of the label by an input, select, or datetime
+$label-ios-text-color:                 null !default;
+
+/// @prop - Text color of the stacked/floating label when it is focused
+$label-ios-text-color-focused:         null !default;
+
+/// @prop - Margin top of the label
+$label-ios-margin-top:                 $item-ios-padding-top !default;
+
+/// @prop - Margin end of the label
+$label-ios-margin-end:                 ($item-ios-padding-end / 2) !default;
+
+/// @prop - Margin bottom of the label
+$label-ios-margin-bottom:              $item-ios-padding-bottom !default;
+
+/// @prop - Margin start of the label
+$label-ios-margin-start:               0 !default;

core/src/components/label/label.md.scss

@@ -0,0 +1,71 @@
+@import "./label";
+@import "./label.md.vars";
+
+// Material Design Label
+// --------------------------------------------------
+
+.label-md {
+  @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);
+
+  font-family: $label-md-font-family;
+}
+
+[text-wrap] .label-md {
+  font-size: $label-md-text-wrap-font-size;
+  line-height: $label-md-text-wrap-line-height;
+}
+
+
+// Material Design Default Label Inside An Input/Select Item
+// --------------------------------------------------
+
+.item-input .label-md,
+.item-select .label-md,
+.item-datetime .label-md {
+  color: $label-md-text-color;
+}
+
+
+// Material Design Stacked & Floating Labels
+// --------------------------------------------------
+
+.label-md[stacked] {
+  font-size: 12px;
+}
+
+.label-md[floating] {
+  @include transform(translate3d(0, 27px, 0));
+  @include transform-origin(start, top);
+
+  transition: transform 150ms ease-in-out;
+}
+
+.label-md[stacked],
+.label-md[floating] {
+  @include margin(null, null, 0, 0);
+}
+
+.item-input-has-focus .label-md[stacked],
+.item-input-has-focus .label-md[floating] {
+  color: $label-md-text-color-focused;
+}
+
+.item-input-has-focus .label-md[floating],
+.item-input-has-value .label-md[floating] {
+  @include transform(translate3d(0, 0, 0), scale(.8));
+}
+
+
+// Generate Material Design Label colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  $color-base: ion-color($colors-md, $color-name, base, md);
+
+  .label-md-#{$color-name},
+  .item-input .label-md-#{$color-name},
+  .item-select .label-md-#{$color-name},
+  .item-datetime .label-md-#{$color-name} {
+    color: $color-base;
+  }
+}

core/src/components/label/label.md.vars.scss

@@ -0,0 +1,33 @@
+@import "../../themes/ionic.globals.md";
+
+@import "../item/item.md.vars";
+
+// Material Design Label
+// --------------------------------------------------
+
+/// @prop - Font family of the label
+$label-md-font-family:                $font-family-md-base !default;
+
+/// @prop - Text color of the label by an input, select, or datetime
+$label-md-text-color:                 $text-md-color-step-600 !default;
+
+/// @prop - Text color of the stacked/floating label when it is focused
+$label-md-text-color-focused:         ion-color($colors-md, primary, base, md) !default;
+
+/// @prop - Margin top of the label
+$label-md-margin-top:                 $item-md-padding-top !default;
+
+/// @prop - Margin end of the label
+$label-md-margin-end:                 ($item-md-padding-end / 2) !default;
+
+/// @prop - Margin bottom of the label
+$label-md-margin-bottom:              $item-md-padding-bottom !default;
+
+/// @prop - Margin start of the label
+$label-md-margin-start:               0 !default;
+
+/// @prop - Font size of the label when the text wraps
+$label-md-text-wrap-font-size:        14px !default;
+
+/// @prop - Line height of the label when the text wraps
+$label-md-text-wrap-line-height:      1.5 !default;

core/src/components/label/label.scss

@@ -0,0 +1,68 @@
+@import "../../themes/ionic.globals";
+
+
+// Label
+// --------------------------------------------------
+
+ion-label {
+  @include margin(0);
+
+  display: block;
+  overflow: hidden;
+
+  flex: 1;
+
+  font-size: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.item-input ion-label {
+  flex: initial;
+
+  max-width: 200px;
+
+  pointer-events: none;
+}
+
+[text-wrap] ion-label {
+  white-space: normal;
+}
+
+
+// Stacked & Floating Inputs
+// --------------------------------------------------
+
+ion-label[fixed] {
+  flex: 0 0 100px;
+
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+.item-label-stacked ion-label,
+.item-label-floating ion-label {
+  align-self: stretch;
+
+  width: auto;
+  max-width: 100%;
+}
+
+ion-label[stacked],
+ion-label[floating] {
+  @include margin(null, null, 0, null);
+}
+
+.item-label-stacked .input-wrapper,
+.item-label-floating .input-wrapper {
+  flex: 1;
+  flex-direction: column;
+}
+
+.item-label-stacked ion-select,
+.item-label-floating ion-select {
+  align-self: stretch;
+
+  max-width: 100%;
+}

core/src/components/label/label.tsx

@@ -0,0 +1,76 @@
+import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-label',
+  styleUrls: {
+    ios: 'label.ios.scss',
+    md: 'label.md.scss'
+  },
+  host: {
+    theme: 'label'
+  }
+})
+export class Label {
+  styleTmr: any;
+
+  @Element() private el: HTMLElement;
+
+  /**
+   * Emitted when the styles change.
+   */
+  @Event() ionStyle: EventEmitter;
+
+  /**
+   * 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).
+   */
+  @Prop() color: string;
+
+  /**
+   * The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md';
+
+  /**
+   * If true, the label will sit alongside an input. Defaults to `false`.
+   */
+  @Prop() fixed = false;
+
+  /**
+   * If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
+   */
+  @Prop() floating = false;
+
+  /**
+   * If true, the label will be stacked above an input. Defaults to `false`.
+   */
+  @Prop() stacked = false;
+
+  @Method()
+  getText(): string {
+    return this.el.textContent || '';
+  }
+
+  componentDidLoad() {
+    this.emitStyle();
+  }
+
+  emitStyle() {
+    clearTimeout(this.styleTmr);
+
+    const styles = {
+      'label-fixed': this.fixed,
+      'label-floating': this.floating,
+      'label-stacked': this.stacked
+    };
+
+    this.styleTmr = setTimeout(() => {
+      this.ionStyle.emit(styles);
+    });
+  }
+
+}

core/src/components/label/readme.md

@@ -0,0 +1,105 @@
+# ion-label
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### color
+
+string
+
+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).
+
+
+#### fixed
+
+boolean
+
+If true, the label will sit alongside an input. Defaults to `false`.
+
+
+#### floating
+
+boolean
+
+If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
+
+
+#### mode
+
+
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+
+
+#### stacked
+
+boolean
+
+If true, the label will be stacked above an input. Defaults to `false`.
+
+
+## Attributes
+
+#### color
+
+string
+
+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).
+
+
+#### fixed
+
+boolean
+
+If true, the label will sit alongside an input. Defaults to `false`.
+
+
+#### floating
+
+boolean
+
+If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
+
+
+#### mode
+
+
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+
+
+#### stacked
+
+boolean
+
+If true, the label will be stacked above an input. Defaults to `false`.
+
+
+## Events
+
+#### ionStyle
+
+Emitted when the styles change.
+
+
+## Methods
+
+#### getText()
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

core/src/components/label/test/basic/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Label - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Label - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>
+            <ion-label>Default</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item text-wrap>
+            <ion-label>Wrap label this label just goes on and on and on</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label fixed>Fixed</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label floating>Floating</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+          <ion-item>
+            <ion-label stacked>Stacked</ion-label>
+            <ion-input></ion-input>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+
+      <style>
+        img {
+          height: 100px;
+        }
+      </style>
+
+
+  </ion-app>
+</body>
+</html>

core/src/components/label/test/standalone/e2e.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/label/test/standalone?ionicplatform=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('label/standalone', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate();
+    });
+  });
+});

core/src/components/label/test/standalone/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Label - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-label>Default</ion-label>
+  <ion-label>Wrap label this label just goes on and on and on</ion-label>
+  <ion-label fixed>Fixed</ion-label>
+  <ion-label floating>Floating</ion-label>
+  <ion-label stacked>Stacked</ion-label>
+</body>
+</html>