Merge branch 'dev'

Promact · Oct 7, 2016 · 60302c2 · 60302c2
2 parents d0775ad + 2980c70
commit 60302c2
Show file tree

Hide file tree

Showing 16 changed files with 472 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md2",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.",
   "homepage": "https://github.com/Promact/md2",
   "bugs": "https://github.com/Promact/md2/issues",

diff --git a/src/demo-app/index.html b/src/demo-app/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <base href=".">
+  <base href="/">
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
@@ -3,9 +3,16 @@ <h1>Select Demo</h1>
   <hr />
   <h4>Basic Select</h4>
   <div>
+    <pre>{{item}}</pre>
+    <input type="text" [(ngModel)]="items[2].name" />
+    <select [(ngModel)]="item" (change)="change($event)" placeholder="Select City">
+      <option> -- Select City -- </option>
+      <option *ngFor="let i of items" [value]="i.value" [selected]="selected">{{i.name}}</option>
+    </select>
+    <br />
     <md2-select [(ngModel)]="item" (change)="change($event)" placeholder="Select City">
       <md2-option> -- Select City -- </md2-option>
-      <md2-option *ngFor="let i of items" [value]="i.value">{{i.name}}</md2-option>
+      <md2-option *ngFor="let i of items" [value]="i.value" [selected]="selected">{{i.name}}</md2-option>
     </md2-select>
   </div>
   <h4>Static Select</h4>

diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
@@ -6,6 +6,17 @@ import { Component } from '@angular/core';
   templateUrl: 'select-demo.html'
 })
 export class SelectDemo {
+  constructor() {
+    setTimeout(() => {
+      this.items.push({ name: 'Manjalpur', value: '7', disabled: false });
+      this.items.push({ name: 'Sitabag', value: '8', disabled: false });
+      this.items.push({ name: 'Vasna', value: '9', disabled: false, selected: true });
+      this.items.push({ name: 'Gorva', value: '10', disabled: false });
+    }, 3000);
+    setTimeout(() => {
+      //this.item = '8';
+    }, 5000);
+  }
   private items: Array<any> =
   [
     { name: 'Vadodara', value: '1', disabled: false },

diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   Component,
   ElementRef,
   EventEmitter,
@@ -93,14 +94,17 @@ export const MD2_AUTOCOMPLETE_CONTROL_VALUE_ACCESSOR: any = {
   encapsulation: ViewEncapsulation.None
 })
 
-export class Md2Autocomplete implements ControlValueAccessor {
+export class Md2Autocomplete implements AfterContentInit, ControlValueAccessor {
 
   constructor(private element: ElementRef) { }
 
+  ngAfterContentInit() { this._isInitialized = true; }
+
   @Output() change: EventEmitter<any> = new EventEmitter<any>();
 
   private _value: any = '';
   private _disabled: boolean = false;
+  private _isInitialized: boolean = false;
   private _onTouchedCallback: () => void = noop;
   private _onChangeCallback: (_: any) => void = noop;
 
@@ -148,8 +152,10 @@ export class Md2Autocomplete implements ControlValueAccessor {
         if (this.selectedItem) { this.inputBuffer = this.selectedItem.text; }
       }
       if (!this.inputBuffer) { this.inputBuffer = ''; }
-      this._onChangeCallback(value);
-      this.change.emit(this._value);
+      if (this._isInitialized) {
+        this._onChangeCallback(value);
+        this.change.emit(this._value);
+      }
     }
   }
 

diff --git a/src/lib/core/annotations/field-value.ts b/src/lib/core/annotations/field-value.ts
@@ -0,0 +1,31 @@
+/**
+ * Annotation Factory that allows HTML style boolean attributes. For example,
+ * a field declared like this:
+
+ * @Directive({ selector: 'component' }) class MyComponent {
+ *   @Input() @BooleanFieldValueFactory() myField: boolean;
+ * }
+ *
+ * You could set it up this way:
+ *   <component myField>
+ * or:
+ *   <component myField="">
+ * @deprecated
+ */
+function booleanFieldValueFactory() {
+  return function booleanFieldValueMetadata(target: any, key: string): void {
+    const defaultValue = target[key];
+    const localKey = `__md_private_symbol_${key}`;
+    target[localKey] = defaultValue;
+
+    Object.defineProperty(target, key, {
+      get() { return (<any>this)[localKey]; },
+      set(value: boolean) {
+        (<any>this)[localKey] = value != null && `${value}` !== 'false';
+      }
+    });
+  };
+}
+
+
+export { booleanFieldValueFactory as BooleanFieldValue };
diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts
@@ -36,6 +36,9 @@ export { applyCssTransform } from './style/apply-transform';
 // Error
 export { MdError } from './errors/error';
 
+// Annotations.
+export { BooleanFieldValue } from './annotations/field-value';
+
 // Misc
 export { ComponentType } from './overlay/generic-component-type';
 

diff --git a/src/lib/datepicker/datepicker.html b/src/lib/datepicker/datepicker.html
@@ -21,9 +21,11 @@
 <div class="md2-datepicker-wrapper" [class.active]="isDatepickerVisible">
   <div class="md2-datepicker-header">
     <span class="md2-datepicker-year"
-          [class.hidden]="type==='time'">{{displayDay.year}}</span>
+          [class.active]="isYearsVisible"
+          [class.hidden]="type==='time'"
+          (click)="showYear()">{{displayDay.year}}</span>
     <span class="md2-datepicker-date"
-          [class.active]="isCalendarVisible"
+          [class.active]="isCalendarVisible && !isYearsVisible"
           [class.hidden]="type==='time'"
           (click)="showCalendar()">{{displayDay.day.substr(0, 3)}},&nbsp;{{displayDay.month.substr(0, 3)}}&nbsp;{{displayDay.date}}</span>
     <span class="md2-datepicker-time"
@@ -37,68 +39,78 @@
     </span>
   </div>
   <div class="md2-datepicker-body">
-    <div class="md2-calendar" [class.active]="isCalendarVisible">
-      <div class="md2-calendar-controls">
-        <div class="md2-calendar-prev-month"
-             [class.disabled]="!isBeforeMonth()"
-             (click)="isBeforeMonth() && updateMonth(-1)">
-          <svg viewBox="0 0 24 24" width="24" height="24">
-            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
-          </svg>
-        </div>
-        <div class="md2-calendar-next-month"
-             [class.disabled]="!isAfterMonth()"
-             (click)="isAfterMonth() && updateMonth(1)">
-          <svg viewBox="0 0 24 24" width="24" height="24">
-            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
-          </svg>
-        </div>
-        <div class="md2-calendar-header">{{displayDay.month}} {{displayDay.year}}</div>
+    <div class="md2-years" [class.active]="isYearsVisible">
+      <div class="md2-years-wrapper">
+        <div *ngFor="let y of years"
+             class="md2-year"
+             [class.selected]="y === displayDay.year"
+             (click)="setYear(y)">{{y}}</div>
       </div>
-      <table class="md2-calendar-month">
-        <thead><tr><th *ngFor="let d of days">{{d.substr(0, 1)}}</th></tr></thead>
-        <tbody>
-          <tr *ngFor="let w of dates">
-            <td *ngFor="let d of w">
-              <div class="md2-calendar-day"
-                   [class.today]="d.today"
-                   [class.focus]="dateUtil.isSameDay(displayDate, d.date)"
-                   [class.selected]="dateUtil.isSameDay(selectedDate, d.date)"
-                   [class.disabled]="d.disabled"
-                   [class.prev-month]="d.calMonth===prevMonth"
-                   [class.curr-month]="d.calMonth===currMonth"
-                   [class.next-month]="d.calMonth===nextMonth"
-                   (click)="onClickDate($event,d)">{{d.dateObj.day}}</div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
     </div>
-    <div class="md2-clock" [class.active]="!isCalendarVisible">
-      <!-- (mousedown)="onMouseDownClock($event)"-->
-      <div class="md2-clock-hand">
-        <svg class="md2-clock-svg" width="240" height="240">
-          <g transform="translate(120,120)">
-            <line x1="0" y1="0" [attr.x2]="clock.hand.x" [attr.y2]="clock.hand.y"></line>
-            <circle class="md2-clock-bg" r="17" [attr.cx]="clock.hand.x" [attr.cy]="clock.hand.y"></circle>
-            <circle class="md2-clock-fg" r="3.5" [attr.cx]="clock.hand.x" [attr.cy]="clock.hand.y"></circle>
-            <circle class="md2-clock-center" cx="0" cy="0" r="2"></circle>
-          </g>
-        </svg>
-      </div>
-      <div class="md2-clock-hours" [class.active]="isHoursVisible">
-        <div *ngFor="let h of hours"
-             class="md2-clock-hour"
-             [style.top]="h.top + 'px'"
-             [style.left]="h.left + 'px'"
-             (click)="onClickHour($event,h.hour)">{{h.hour}}</div>
+    <div class="md2-datepicker-container" [class.active]="!isYearsVisible">
+      <div class="md2-calendar" [class.active]="isCalendarVisible">
+        <div class="md2-calendar-controls">
+          <div class="md2-calendar-prev-month"
+               [class.disabled]="!isBeforeMonth()"
+               (click)="isBeforeMonth() && updateMonth(-1)">
+            <svg viewBox="0 0 24 24" width="24" height="24">
+              <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
+            </svg>
+          </div>
+          <div class="md2-calendar-next-month"
+               [class.disabled]="!isAfterMonth()"
+               (click)="isAfterMonth() && updateMonth(1)">
+            <svg viewBox="0 0 24 24" width="24" height="24">
+              <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
+            </svg>
+          </div>
+          <div class="md2-calendar-header">{{displayDay.month}} {{displayDay.year}}</div>
+        </div>
+        <table class="md2-calendar-month">
+          <thead><tr><th *ngFor="let d of days">{{d.substr(0, 1)}}</th></tr></thead>
+          <tbody>
+            <tr *ngFor="let w of dates">
+              <td *ngFor="let d of w">
+                <div class="md2-calendar-day"
+                     [class.today]="d.today"
+                     [class.focus]="dateUtil.isSameDay(displayDate, d.date)"
+                     [class.selected]="dateUtil.isSameDay(selectedDate, d.date)"
+                     [class.disabled]="d.disabled"
+                     [class.prev-month]="d.calMonth===prevMonth"
+                     [class.curr-month]="d.calMonth===currMonth"
+                     [class.next-month]="d.calMonth===nextMonth"
+                     (click)="onClickDate($event,d)">{{d.dateObj.day}}</div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <div class="md2-clock-minutes" [class.active]="!isHoursVisible">
-        <div *ngFor="let m of minutes"
-             class="md2-clock-minute"
-             [style.top]="m.top + 'px'"
-             [style.left]="m.left + 'px'"
-             (click)="onClickMinute($event,m.minute)">{{m.minute}}</div>
+      <div class="md2-clock" [class.active]="!isCalendarVisible">
+        <!-- (mousedown)="onMouseDownClock($event)"-->
+        <div class="md2-clock-hand">
+          <svg class="md2-clock-svg" width="240" height="240">
+            <g transform="translate(120,120)">
+              <line x1="0" y1="0" [attr.x2]="clock.hand.x" [attr.y2]="clock.hand.y"></line>
+              <circle class="md2-clock-bg" r="17" [attr.cx]="clock.hand.x" [attr.cy]="clock.hand.y"></circle>
+              <circle class="md2-clock-fg" r="3.5" [attr.cx]="clock.hand.x" [attr.cy]="clock.hand.y"></circle>
+              <circle class="md2-clock-center" cx="0" cy="0" r="2"></circle>
+            </g>
+          </svg>
+        </div>
+        <div class="md2-clock-hours" [class.active]="isHoursVisible">
+          <div *ngFor="let h of hours"
+               class="md2-clock-hour"
+               [style.top]="h.top + 'px'"
+               [style.left]="h.left + 'px'"
+               (click)="onClickHour($event,h.hour)">{{h.hour}}</div>
+        </div>
+        <div class="md2-clock-minutes" [class.active]="!isHoursVisible">
+          <div *ngFor="let m of minutes"
+               class="md2-clock-minute"
+               [style.top]="m.top + 'px'"
+               [style.left]="m.left + 'px'"
+               (click)="onClickMinute($event,m.minute)">{{m.minute}}</div>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/lib/datepicker/datepicker.scss b/src/lib/datepicker/datepicker.scss
@@ -15,11 +15,11 @@ md2-datepicker.md2-datepicker-disabled:focus .md2-datepicker-placeholder { color
 .md2-datepicker-wrapper { position: absolute; top: 0; left: 0; display: inline-block; width: 300px; border-radius: 2px; background-color: #fff; z-index: 10; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transform: scale(0); transform-origin: left top; transition: 150ms; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
 .md2-datepicker-wrapper.active { transform: scale(1); }
 .md2-datepicker-header { display: block; padding: 20px; color: #fff; font-size: 28px; line-height: 28px; font-weight: 500; background: #2196f3; box-sizing: border-box; }
-.md2-datepicker-year { display: block; height: 16px; margin: 0 0 10px; font-size: 16px; line-height: 16px; opacity: 0.7; }
-.md2-datepicker-year.active { opacity: 1; }
+.md2-datepicker-year { display: block; height: 16px; margin: 0 0 10px; font-size: 16px; line-height: 16px; opacity: 0.7; cursor: pointer; }
+.md2-datepicker-year.active { opacity: 1; pointer-events: none; }
 .md2-datepicker-year.hidden { display: none; }
 .md2-datepicker-date { cursor: pointer; opacity: 0.7; }
-.md2-datepicker-date.active { opacity: 1; }
+.md2-datepicker-date.active { opacity: 1; pointer-events: none; }
 .md2-datepicker-date.hidden { display: none; }
 .md2-datepicker-time { display: inline-block; padding-left: 10px; cursor: pointer; opacity: 0.7; }
 .md2-datepicker-time.active { opacity: 1; }
@@ -29,12 +29,21 @@ md2-datepicker.md2-datepicker-disabled:focus .md2-datepicker-placeholder { color
 .md2-datepicker-time.active .md2-datepicker-hour,
 .md2-datepicker-time.active .md2-datepicker-minute { opacity: 0.7; }
 .md2-datepicker-time.active .md2-datepicker-hour.active,
-.md2-datepicker-time.active .md2-datepicker-minute.active { opacity: 1; }
+.md2-datepicker-time.active .md2-datepicker-minute.active { opacity: 1; pointer-events: none; }
 .md2-datepicker-body { position: relative; width: 100%; height: 300px; overflow: hidden; }
 .md2-datepicker-footer { text-align: right; }
 .md2-datepicker-footer .md2-button { display: inline-block; min-width: 64px; margin: 4px 8px 8px 0px; padding: 0 12px; font-size: 14px; color: #2196f3; line-height: 36px; text-align: center; text-transform: uppercase; border-radius: 2px; cursor: pointer; box-sizing: border-box; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); }
 .md2-datepicker-footer .md2-button:hover { background: #ebebeb; }
 
+.md2-years { position: absolute; top: 10px; right: 100%; bottom: 10px; display: block; width: 100%; line-height: 40px; background: #fff; overflow-x: hidden; overflow-y: auto; transition: 300ms; }
+.md2-years.active { right: 0; }
+.md2-years .md2-years-wrapper { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
+.md2-years .md2-year { position: relative; display: block; margin: 0 auto; padding: 0; font-size: 17px; font-weight: 400; text-align: center; cursor: pointer; }
+.md2-years .md2-year.selected { color: #2196f3; font-size: 26px; font-weight: 500; }
+
+.md2-datepicker-container { position: absolute; top: 0; left: 100%; display: block; width: 100%; transition: 300ms; }
+.md2-datepicker-container.active { left: 0; }
+
 .md2-calendar { position: absolute; right: 100%; display: block; width: 100%; font-size: 12px; font-weight: 400; text-align: center; transition: 300ms; }
 .md2-calendar.active { right: 0; }
 .md2-calendar-controls { position: relative; display: block; height: 48px; text-align: left; }