Merge pull request #25 from SQ-UI/develop

Develop
SQ-UI · Sep 5, 2018 · 42cbb20 · 42cbb20
2 parents 7212d8f + 1511a94
commit 42cbb20
Show file tree

Hide file tree

Showing 27 changed files with 449 additions and 161 deletions.
diff --git a/README.md b/README.md
@@ -61,6 +61,28 @@ ng-sq-ui does not come with a specific font. Including the default theme is also
 
 Need a grid? [We've got you covered](https://sq-ui.github.io/sq-grid/)!
 
+### Add styles to angular.json
+
+```json
+"styles": [
+  "src/styles.css",
+  "./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss",
+  "./node_modules/font-awesome/scss/font-awesome.scss"
+],
+```
+
+### Apply styling to the components
+
+To use our styling just add the `class="sq"` on a parent element.
+
+```html
+<body class="sq">
+  <div class="row">
+    <sq-input ...></sq-input>
+  </div>
+</body>
+```
+
 ## Dependencies
 
 ng-sq-ui depends on:

diff --git a/docs/form-elements-module.md b/docs/form-elements-module.md
@@ -271,6 +271,7 @@ In [app.component.html](https://github.com/SQ-UI/ng-sq-ui/blob/master/src/app/ap
 
 ```html
 <sq-typeahead name="typeahead"
+  displayProp="displayName"
   formControlName="typeahead"
   [searchResults]="searchResults"
   (onUserInputEnd)="searchMethod($event)"
@@ -303,6 +304,8 @@ export class AppComponent {
 }
 ```
 
+> If you wish to pass just an array of string, you must omit the property `displayProp` in the html.
+
 ### Component properties:
 
 - **`@Input()` name:** `string` - Name of the typeahead. If not provided, a generic name is generated, using the following pattern: `'sq-form-control' + new Date().getTime().toString()`.
@@ -327,6 +330,8 @@ export class AppComponent {
 
 - **`@Input()` multiple:** `boolean` - Allow the user to choose multiple items from the search results list. Defaults to `false`.
 
+- **`@Input()` displayProp:** `string` - Specify which property of the object to use as display property. If you are just passing an array of strings you must not assign a value to this property.
+
 ### Class properties:
 
 - **queryInputControl:** `FormControl` - The model for the input where the user types in a `query`.

diff --git a/docs/installation.md b/docs/installation.md
@@ -45,3 +45,34 @@ export class AppModule {}
   "./node_modules/font-awesome/scss/font-awesome.scss"
 ],
 ```
+
+## Apply styling to the components
+
+To use our styling just add the `class="sq"` on a parent element.
+
+> If you want to use our sq theme, add the `sq` class on the body of the document or the app wrapper
+
+```html
+<body class="sq">
+  <div class="row">
+    <sq-input ...></sq-input>
+  </div>
+</body>
+```
+
+```html
+<body>
+  <app class="sq">
+    <sq-input ...></sq-input>
+  </app>
+</body>
+```
+
+> If you would like to use our theme on a specific component (or a set of components) just add the `sq` class on a parent wrapper
+
+```html
+<div class="sq">
+  <sq-input ...></sq-input>
+  <sq-droprdown ...></sq-droprdown>
+</div>
+```
diff --git a/docs/interfaces.md b/docs/interfaces.md
@@ -6,10 +6,3 @@ interface LabelValuePair {
   value: any;
 }
 ```
-
-```typescript
-interface SearchResult {
-  displayName: string;
-  value: any;
-}
-```
diff --git a/projects/ng-sq-ui/src/README.md b/projects/ng-sq-ui/src/README.md
@@ -12,6 +12,7 @@ The components are grouped by modules. Any properties you can see through code i
 Any types of public interfaces and services are also included.
 
 - [Home Page](https://sq-ui.github.io/ng-sq-ui)
+- [Installation](https://sq-ui.github.io/ng-sq-ui/#/installation)
 - [Form Elements](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module)
 - [Modal](https://sq-ui.github.io/ng-sq-ui/#/modal-module)
 - [Interfaces](https://sq-ui.github.io/ng-sq-ui/#/interfaces)
@@ -32,10 +33,12 @@ yarn add @sq-ui/ng-sq-ui
 ## Usage
 
 Import the NgSqUiModule in your module:
+
 ```
 import { NgSqUiModule } from '@sq-ui/ng-sq-ui';
 ```
-and then include it in the `imports` array of your @NgModule() decorator: 
+
+and then include it in the `imports` array of your @NgModule() decorator:
 
 ```
 @NgModule({
@@ -49,6 +52,28 @@ and then include it in the `imports` array of your @NgModule() decorator:
 
 ng-sq-ui does not come with a specific font. Including the default theme is also optional. Refer to our [Live examples page](https://ng-sq-ui-examples.surge.sh).
 
+### Add styles to angular.json
+
+```json
+"styles": [
+  "src/styles.css",
+  "./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss",
+  "./node_modules/font-awesome/scss/font-awesome.scss"
+],
+```
+
+### Apply styling to the components
+
+To use our styling just add the `class="sq"` on a parent element.
+
+```html
+<body class="sq">
+  <div class="row">
+    <sq-input ...></sq-input>
+  </div>
+</body>
+```
+
 ## Dependencies
 
 ng-sq-ui depends on font-awesome and immutable.js
@@ -58,4 +83,4 @@ ng-sq-ui depends on font-awesome and immutable.js
 - Use NG-SQ-UI in your daily work.
 - **Star** it if you like.
 - [Join slack chat](https://join.slack.com/t/ng-sq-ui/shared_invite/enQtNDE2NDQxMjA4NzU4LTNiOWZjMGU5Mzc1N2NiMjRkMjJlM2U5OWY4ZGUyOWNjNjFmY2EyMzQ0Zjg0Mjk5OTE4MGUyMjQwMmU3NDI2Yzg) to help solve problems.
-
+- Follow us on [twitter](https://twitter.com/squi97817882) to get latest updates.
diff --git a/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss b/projects/ng-sq-ui/src/lib/form-elements/dropdown/dropdown.component.scss
@@ -4,9 +4,14 @@
   position: relative;
   flex-wrap: wrap;
   justify-content: flex-start;
+  &:hover {
+    cursor: pointer;
+  }
   .options {
     width: 100%;
     margin-top: 5px;
+    max-height: 200px;
+    overflow-y: scroll;
   }
   .options .option {
     padding: 5px 10px;
@@ -21,3 +26,11 @@
     top: 11px;
   }
 }
+
+@media (max-width: 450px) {
+  .sq .input-field.dropdown {
+    .chosen-item {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/projects/ng-sq-ui/src/lib/form-elements/input/input.component.html b/projects/ng-sq-ui/src/lib/form-elements/input/input.component.html
@@ -5,7 +5,7 @@
     {{controlLabel}}
   </label>
 
-  <input type="text"
+  <input type="{{type}}"
          name="{{name}}"
          id="{{controlId}}"
          placeholder="{{controlPlaceholder}}"

diff --git a/projects/ng-sq-ui/src/lib/form-elements/input/input.component.ts b/projects/ng-sq-ui/src/lib/form-elements/input/input.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit, ViewEncapsulation, forwardRef } from '@angular/core';
+import {
+  Component, OnInit, ViewEncapsulation, forwardRef,
+  Input } from '@angular/core';
 import { InputCoreComponent } from '../../shared/entities/input-core-component';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -16,6 +18,8 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
   providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
 })
 export class InputComponent extends InputCoreComponent implements OnInit {
+  @Input() type: string = 'text';
+
   constructor() {
     super();
   }

diff --git a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.html
@@ -6,7 +6,7 @@
       {{controlLabel}}
     </label>
 
-    <div class="entered-items">
+    <div class="entered-items" *ngIf="enteredItems.size > 0">
       <div class="inner display-flex wrap">
         <div class="entered-item"
              *ngFor="let enteredValue of enteredItems; index as tagIndex">
@@ -18,12 +18,13 @@
       </div>
     </div>
 
-    <input type="text"
+    <input #tagsInput
+           type="text"
            id="{{controlId}}"
            name="{{name}}"
            [disabled]="disabled"
+           (keyup)="onUserInput($event)"
            placeholder="{{controlPlaceholder}}"
-           [(ngModel)]="newTagName"
-           (keyup)="onUserInput($event)">
+           [(ngModel)]="newTagName">
   </div>
 </div>
diff --git a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.scss
@@ -15,3 +15,17 @@
     }
   }
 }
+
+@media (max-width: 450px) {
+  .sq .tags-input-wrapper {
+    .input-field input, .entered-items {
+      margin-top: 10px;
+    }
+
+    .input-field .entered-items {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+
diff --git a/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.ts b/projects/ng-sq-ui/src/lib/form-elements/tags-input/tags-input.component.ts
@@ -1,10 +1,14 @@
 import {
   Component, OnInit, Input, Output, forwardRef,
-  ViewEncapsulation, EventEmitter, OnDestroy, OnChanges
+  ViewEncapsulation, EventEmitter, OnDestroy, OnChanges,
+  AfterViewInit, ViewChild
 } from '@angular/core';
 import { InputCoreComponent } from '../../shared/entities/input-core-component';
+import { DeviceOS } from '../../shared/enums/device-os.enum';
+import { OSDetectorService } from '../../shared/services/os-detector.service';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { Subscription, fromEvent, pipe } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { List } from 'immutable';
 
 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
@@ -20,11 +24,12 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
   encapsulation: ViewEncapsulation.None,
   providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
 })
-export class TagsInputComponent extends InputCoreComponent implements OnInit, OnDestroy {
-
+export class TagsInputComponent extends InputCoreComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('tagsInput') tagsInput;
   private isModelEmpty: boolean = false;
   private enteredItemsSubscription: Subscription;
   private valueChangedSubscription: Subscription;
+  private inputEventSubscription: Subscription;
   private innerEnteredItemsListCopy: List<string>;
 
   enteredItems: List<string> = List<string>();
@@ -52,9 +57,26 @@ export class TagsInputComponent extends InputCoreComponent implements OnInit, On
     });
   }
 
+  ngAfterViewInit() {
+    if (OSDetectorService.getDeviceOS() === DeviceOS.Android) {
+      const inputEvent = fromEvent(this.tagsInput.nativeElement, 'input');
+      inputEvent.pipe(map(event => event));
+
+      this.inputEventSubscription = inputEvent.subscribe(($event: any) => {
+        if ($event.data === ' ') {
+          this.onUserInput({ keyCode: 32 });
+        }
+      });
+    }
+  }
+
   ngOnDestroy() {
     this.enteredItemsSubscription.unsubscribe();
 
+    if (this.inputEventSubscription) {
+      this.inputEventSubscription.unsubscribe();
+    }
+
     if (!this.valueChangedSubscription.closed) {
       this.valueChangedSubscription.unsubscribe();
     }

diff --git a/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html b/projects/ng-sq-ui/src/lib/form-elements/typeahead/typeahead.component.html
@@ -1,38 +1,28 @@
-<div class="typeahead-wrapper"
-     sqOutsideClickListener
-     [listenForOutsideClick]="listenForOutsideClick"
-     (clickOutside)="onClickOutsideComponent()">
+<div class="typeahead-wrapper" sqOutsideClickListener [listenForOutsideClick]="listenForOutsideClick" (clickOutside)="onClickOutsideComponent()">
   <div class="loader" *ngIf="isLoading"></div>
 
   <div class="input-field typeahead" [ngClass]="{'disabled': disabled}">
     <i class="fa fa-search" aria-hidden="true"></i>
 
-    <label class="label"
-           for="{{controlId}}"
-           *ngIf="controlLabel">
+    <label class="label" for="{{controlId}}" *ngIf="controlLabel">
       {{controlLabel}}
     </label>
-    <input [formControl]="queryInputControl"
-           *ngIf="selectedItems.size === 0"
-           type="text"
-           id="{{controlId}}"
-           name="{{name}}"
-           (focus)="turnClickOutsideListenerOn()"
-           placeholder="{{controlPlaceholder}}">
+    <input [formControl]="queryInputControl" *ngIf="selectedItems.size === 0" type="text" id="{{controlId}}" name="{{name}}"
+      (focus)="turnClickOutsideListenerOn()" placeholder="{{controlPlaceholder}}">
 
-    <div class="entered-item chosen-item"
-         *ngFor="let selectedItem of selectedItems, index as itemIndex;">
-      <div class="content">{{selectedItem.displayName}}</div>
-      <div class="remove" (click)="removeSearchResult(itemIndex)" *ngIf="!disabled">
-        <i class="fa fa-times" aria-hidden="true"></i>
+    <div class="entered-items" *ngIf="selectedItems.size > 0">
+      <div class="entered-item chosen-item"
+           *ngFor="let selectedItem of selectedItems, index as itemIndex;">
+        <div class="content">{{ selectedItem.label }}</div>
+        <div class="remove" (click)="removeSearchResult(itemIndex)" *ngIf="!disabled">
+          <i class="fa fa-times" aria-hidden="true"></i>
+        </div>
       </div>
     </div>
 
     <div class="options" [ngClass]="{'display-none': hideResults}">
-      <div class="option"
-           *ngFor="let result of searchResults"
-           (click)="selectSearchResult(result)">
-        {{result.displayName}}
+      <div class="option" *ngFor="let result of options" (click)="selectSearchResult(result)">
+        {{ result.label }}
       </div>
     </div>
   </div>