WIP Feature/177414 mc-tags (#112)

* added component

* added base handlers for click and focus

* added recalculating overlay position after select/deselect

* added autocomplete

* added example with filtered options

* added text-overflow

* added tags WIP

* added autocomplete in example

* base functional WIP SAVE

* fixed logic and added examples

* fixed focus and review notes

* deleted form-field from first example

* added tests for autocomplete and tags (not all worked)

* added tests

* changed placeholder color

* A200 added in box-shadow

* dark theme in tag-input

package.json

@@ -154,6 +154,7 @@
         "server-dev": "webpack-dev-server --config tools/webpack/webpack.config.js",
         "server-dev:all": "npm run server-dev -- --env.component all",
         "server-dev:alert": "npm run server-dev -- --env.component alert",
+        "server-dev:autocomplete": "npm run server-dev -- --env.component autocomplete",
         "server-dev:badge": "npm run server-dev -- --env.component badge",
         "server-dev:button": "npm run server-dev -- --env.component button",
         "server-dev:button-toggle": "npm run server-dev -- --env.component button-toggle",
@@ -180,7 +181,7 @@
         "server-dev:sidepanel": "npm run server-dev -- --env.component sidepanel",
         "server-dev:splitter": "npm run server-dev -- --env.component splitter",
         "server-dev:tabs": "npm run server-dev -- --env.component tabs",
-        "server-dev:tag": "npm run server-dev -- --env.component tag",
+        "server-dev:tags": "npm run server-dev -- --env.component tags",
         "server-dev:textarea": "npm run server-dev -- --env.component textarea",
         "server-dev:toggle": "npm run server-dev -- --env.component toggle",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",

src/cdk/keycodes/keycodes.ts

@@ -118,3 +118,13 @@ export const BACKSLASH = 220;
 export const CLOSE_SQUARE_BRACKET = 221;
 export const SINGLE_QUOTE = 222;
 export const MAC_META = 224;
+
+type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
+
+export function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean {
+    if (modifiers.length) {
+        return modifiers.some((modifier) => event[modifier]);
+    }
+
+    return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
+}

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -260,7 +260,7 @@ export class CdkVirtualScrollViewport extends CdkScrollable implements OnInit, O
         if (to === 'to-end') {
             transform += ` translate${axis}(-100%)`;
             // The viewport should rewrite this as a `to-start` offset on the next render cycle. Otherwise
-            // elements will appear to expand in the wrong direction (e.g. `mat-expansion-panel` would
+            // elements will appear to expand in the wrong direction (e.g. `mc-expansion-panel` would
             // expand upward).
             this._renderedContentOffsetNeedsRewrite = true;
         }

src/cdk/testing/dispatch-events.ts

@@ -1,3 +1,5 @@
+// tslint:disable:no-reserved-keywords
+
 import {
     createFakeEvent,
     createKeyboardEvent,
@@ -20,19 +22,15 @@ export function dispatchFakeEvent(node: Node | Window, type: string, canBubble?:
 }
 
 /** Shorthand to dispatch a keyboard event with a specified key code. */
-// tslint:disable-next-line:no-reserved-keywords
-export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element,
-                                      shiftKey = false, ctrlKey = false, altKey = false):
+export function dispatchKeyboardEvent(node: Node, type: string, keyCode: number, target?: Element):
     KeyboardEvent {
-    const event = createKeyboardEvent(type, keyCode, target, undefined, shiftKey, ctrlKey, altKey);
-
-    return dispatchEvent(node, event) as KeyboardEvent;
+    return dispatchEvent(node, createKeyboardEvent(type, keyCode, target)) as KeyboardEvent;
 }
 
 /** Shorthand to dispatch a mouse event on the specified coordinates. */
-// tslint:disable-next-line:no-reserved-keywords
-export function dispatchMouseEvent(node: Node, type: string, x = 0, y = 0,
-                                   event = createMouseEvent(type, x, y)): MouseEvent {
+export function dispatchMouseEvent(
+node: Node, type: string, x = 0, y = 0, event = createMouseEvent(type, x, y)
+): MouseEvent {
     return dispatchEvent(node, event) as MouseEvent;
 }
 

src/cdk/testing/event-objects.ts

@@ -43,29 +43,28 @@ export function createTouchEvent(type: string, pageX = 0, pageY = 0) {
 
 /** Dispatches a keydown event from an element. */
 // tslint:disable-next-line:no-reserved-keywords
-export function createKeyboardEvent(type: string, keyCode: number, target?: Element, key?: string,
-                                    shiftKey = false, ctrlKey = false, altKey = false) {
+export function createKeyboardEvent(type: string, keyCode: number, target?: Element, key?: string) {
     const event = document.createEvent('KeyboardEvent') as any;
-    // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
-    const initEventFn = (event.initKeyEvent || event.initKeyboardEvent).bind(event);
     const originalPreventDefault = event.preventDefault;
 
-    initEventFn(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
+    // Firefox does not support `initKeyboardEvent`, but supports `initKeyEvent`.
+    if (event.initKeyEvent) {
+        event.initKeyEvent(type, true, true, window, 0, 0, 0, 0, 0, keyCode);
+    } else {
+        event.initKeyboardEvent(type, true, true, window, 0, key, 0, '', false);
+    }
 
     // Webkit Browsers don't set the keyCode when calling the init function.
     // See related bug https://bugs.webkit.org/show_bug.cgi?id=16735
     Object.defineProperties(event, {
         keyCode: { get: () => keyCode },
         key: { get: () => key },
-        target: { get: () => target },
-        shiftKey: { get: () => shiftKey },
-        ctrlKey: { get: () => ctrlKey },
-        altKey: { get: () => altKey }
+        target: { get: () => target }
     });
 
     // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.
     event.preventDefault = function() {
-        Object.defineProperty(event, 'defaultPrevented', {get: () => true});
+        Object.defineProperty(event, 'defaultPrevented', { get: () => true });
 
         return originalPreventDefault.apply(this, arguments);
     };

src/cdk/testing/public-api.ts

@@ -1,5 +1,6 @@
 export * from './dispatch-events';
 export * from './event-objects';
+export * from './type-in-element';
 export * from './element-focus';
 export * from './mock-ng-zone';
 export * from './wrapped-error-message';

src/cdk/testing/type-in-element.ts

@@ -0,0 +1,13 @@
+import { dispatchFakeEvent } from './dispatch-events';
+
+/**
+ * Focuses an input, sets its value and dispatches
+ * the `input` event, simulating the user typing.
+ * @param value Value to be set on the input.
+ * @param element Element onto which to set the value.
+ */
+export function typeInElement(value: string, element: HTMLInputElement) {
+    element.focus();
+    element.value = value;
+    dispatchFakeEvent(element, 'input');
+}

src/dev-app/system-config.ts

@@ -80,7 +80,7 @@ System.config({
         '@ptsecurity/mosaic/form-field': 'dist/packages/mosaic/form-field/index.js',
         '@ptsecurity/mosaic/tree': 'dist/packages/mosaic/tree/index.js',
         '@ptsecurity/mosaic/modal': 'dist/packages/mosaic/modal/index.js',
-        '@ptsecurity/mosaic/tag': 'dist/packages/mosaic/tag/index.js',
+        '@ptsecurity/mosaic/tags': 'dist/packages/mosaic/tags/index.js',
         '@ptsecurity/mosaic/tabs': 'dist/packages/mosaic/tabs/index.js',
         '@ptsecurity/mosaic/select': 'dist/packages/mosaic/select/index.js',
         '@ptsecurity/mosaic/sidepanel': 'dist/packages/mosaic/sidepanel/index.js',

src/lib-dev/all/module.ts

@@ -26,7 +26,7 @@ import { McProgressSpinnerModule } from '@ptsecurity/mosaic/progress-spinner';
 import { McRadioModule } from '@ptsecurity/mosaic/radio';
 import { McSelectModule } from '@ptsecurity/mosaic/select';
 import { McSplitterModule } from '@ptsecurity/mosaic/splitter';
-import { McTagModule } from '@ptsecurity/mosaic/tag';
+import { McTagsModule } from '@ptsecurity/mosaic/tags';
 import { McTextareaModule } from '@ptsecurity/mosaic/textarea';
 import { McTimepickerModule } from '@ptsecurity/mosaic/timepicker';
 import { McToggleModule } from '@ptsecurity/mosaic/toggle';
@@ -213,7 +213,7 @@ export class DemoComponent {
         McRadioModule,
         McSelectModule,
         McSplitterModule,
-        McTagModule,
+        McTagsModule,
         McTextareaModule,
         McTimepickerModule,
         McToggleModule,

src/lib-dev/autocomplete/module.ts

@@ -0,0 +1,75 @@
+import { Component, NgModule, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { McAutocompleteModule, McAutocompleteSelectedEvent } from '@ptsecurity/mosaic/autocomplete';
+import { McButtonModule } from '@ptsecurity/mosaic/button';
+import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
+import { McIconModule } from '@ptsecurity/mosaic/icon';
+import { McInputModule } from '@ptsecurity/mosaic/input';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent implements OnInit {
+    options = [
+        'One', 'Two', 'Three', 'Four', 'Five', 'Longest text (0123456789 qwertyuiopasdfghjklzxcvbnm)', 'Волгоград',
+        'Воронеж', 'Ейск', 'Екабпилс', 'Екатеринбург', 'Екатериновка', 'Екатеринославка', 'Екаша', 'Екибастуз',
+        'Екпинди', 'Елань', 'Елец', 'Казань', 'Краснодар', 'Красноярск', 'Москва', 'Нижний Новгород', 'Новосибирск',
+        'Омск', 'Пермь', 'Ростов-на-Дону',  'Самара', 'Санкт-Петербург', 'Уфа', 'Челябинск'
+    ];
+
+    filteredOptions: Observable<string[]>;
+
+    formControl = new FormControl('', Validators.required);
+
+    onSelectionChange($event: McAutocompleteSelectedEvent) {
+        console.log(`onSelectionChange: ${$event}`);
+    }
+
+    ngOnInit(): void {
+        this.filteredOptions = this.formControl.valueChanges
+            .pipe(
+                startWith(''),
+                map((value) => this.filter(value))
+            );
+    }
+
+    private filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+
+        return this.options.filter((option) => option.toLowerCase().includes(filterValue));
+    }
+
+}
+
+
+@NgModule({
+    declarations: [DemoComponent],
+    imports: [
+        BrowserAnimationsModule,
+        BrowserModule,
+        FormsModule,
+        McAutocompleteModule,
+
+        McInputModule,
+        McButtonModule,
+        McFormFieldModule,
+        McIconModule,
+        ReactiveFormsModule
+    ],
+    bootstrap: [DemoComponent]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/autocomplete/styles.scss

@@ -0,0 +1,13 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+
+@import '../../lib/core/theming/prebuilt/default-theme';
+//@import '../../lib/core/theming/prebuilt/dark-theme';
+
+
+.dev-container {
+    width: 300px;
+
+    border: 1px solid red;
+
+    padding: 24px;
+}

src/lib-dev/autocomplete/template.html

@@ -0,0 +1,12 @@
+<br><br><br><br><br><br><br>
+
+<div style="height: 20px">{{ formControl.value }}</div>
+
+<div class="dev-container">
+    <mc-form-field>
+        <input type="text" mcInput [mcAutocomplete]="auto" [formControl]="formControl"/>
+        <mc-autocomplete #auto="mcAutocomplete">
+            <mc-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</mc-option>
+        </mc-autocomplete>
+    </mc-form-field>
+</div>