diff --git a/README.md b/README.md index f4e9c02ab..850d75772 100644 --- 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 + +
+ +
+ +``` + ## Dependencies ng-sq-ui depends on: diff --git a/docs/form-elements-module.md b/docs/form-elements-module.md index ab31870cc..23a84f9e7 100644 --- 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 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 index c66b3dc11..d75423d9e 100644 --- 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 + +
+ +
+ +``` + +```html + + + + + +``` + +> 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 +
+ + +
+``` diff --git a/docs/interfaces.md b/docs/interfaces.md index 4e77030dc..4bf516154 100644 --- 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 index ccd9d61f6..28d92e01f 100644 --- 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 + +
+ +
+ +``` + ## 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 index 028ba7a3f..dc0a0589e 100644 --- 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 index cd00f1a3d..1400012dc 100644 --- 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}} - -
+
@@ -18,12 +18,13 @@
- + [(ngModel)]="newTagName">
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 index d8b83474e..0e3e3a45b 100644 --- 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 index 7c06ecdd1..ff055e896 100644 --- 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; enteredItems: List = List(); @@ -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 index ac13280f5..929eafb73 100644 --- 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 @@ -
+
-