feat(inputs): added component mc-input (#10)

package.json

@@ -143,6 +143,7 @@
         "server-dev:progress-bar": "npm run server-dev -- --env.component progress-bar",
         "server-dev:progress-spinner": "npm run server-dev -- --env.component progress-spinner",
         "server-dev:radio": "npm run server-dev -- --env.component radio",
+        "server-dev:input": "npm run server-dev -- --env.component input",
         "server-dev:icon": "npm run server-dev -- --env.component icon",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:typography": "npm run server-dev -- --env.component typography",

src/lib-dev/input/module.ts

@@ -0,0 +1,42 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McFormFieldModule } from '../../lib/form-field';
+import { McIconModule } from '../../lib/icon';
+import { McInputModule } from '../../lib/input/';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./styles.scss']
+})
+export class InputDemoComponent {
+    value: string = '';
+}
+
+
+@NgModule({
+    declarations: [
+        InputDemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McInputModule,
+        McFormFieldModule,
+        FormsModule,
+        McIconModule
+    ],
+    bootstrap: [
+        InputDemoComponent
+    ]
+})
+export class InputDemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(InputDemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/input/styles.scss

@@ -0,0 +1,12 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';
+
+.mc-form-field {
+    width: 200px;
+}
+
+header {
+    $config: mc-typography-config();
+
+    @include mc-typography-level-to-styles($config, caption);
+}

src/lib-dev/input/template.html

@@ -0,0 +1,113 @@
+<header>Without placeholder:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value">
+</mc-form-field>
+
+<br><br>
+
+<header>With placeholder:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder">
+</mc-form-field>
+
+<br><br>
+
+<header>With placeholder and monospace:</header>
+
+<mc-form-field>
+    <input mcInput mcInputMonospace [(ngModel)]="value" placeholder="Placeholder">
+</mc-form-field>
+
+<br><br>
+
+<header>With placeholder and hint:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder">
+
+    <mc-hint>Hint under field</mc-hint>
+</mc-form-field>
+
+<br><br>
+
+<header>With placeholder, hint and disabled:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder" [disabled]="true">
+
+    <mc-hint>Hint under field</mc-hint>
+</mc-form-field>
+
+<br><br>
+
+<header>With clear-button:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder">
+
+    <mc-cleaner></mc-cleaner>
+</mc-form-field>
+
+<br><br>
+
+<header>With prefix:</header>
+
+<mc-form-field>
+    <i mcPrefix mc-icon="mc-search_16"></i>
+
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder">
+</mc-form-field>
+
+<br><br>
+
+<header>With suffix:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder">
+
+    <i mcSuffix mc-icon="mc-calendar_16"></i>
+</mc-form-field>
+
+<br><br>
+
+<header>Invalid:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder" required minlength="4">
+</mc-form-field>
+
+<br><br>
+
+<header>Invalid with clear-button:</header>
+
+<mc-form-field>
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder" required minlength="4">
+
+    <mc-cleaner></mc-cleaner>
+</mc-form-field>
+
+<br><br>
+
+<header>With placeholder, hint, prefix, cleaner and disabled:</header>
+
+<mc-form-field>
+    <i mcPrefix mc-icon="mc-search_16"></i>
+
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder" [disabled]="true">
+
+    <mc-cleaner></mc-cleaner>
+</mc-form-field>
+
+<br><br>
+
+<header>Without borders:</header>
+
+<mc-form-field mcFormFieldWithoutBorders>
+    <i mcPrefix mc-icon="mc-search_16"></i>
+
+    <input mcInput [(ngModel)]="value" placeholder="Placeholder">
+
+    <mc-cleaner></mc-cleaner>
+</mc-form-field>

src/lib/core/common-behaviors/error-state.ts

@@ -0,0 +1,58 @@
+import { FormControl, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { ErrorStateMatcher } from '../error/error-options';
+import { Constructor } from './constructor';
+
+/** @docs-private */
+export interface CanUpdateErrorState {
+    readonly stateChanges: Subject<void>;
+    errorState: boolean;
+    errorStateMatcher: ErrorStateMatcher;
+
+    updateErrorState();
+}
+
+/** @docs-private */
+export interface HasErrorState {
+    _parentFormGroup: FormGroupDirective;
+    _parentForm: NgForm;
+    _defaultErrorStateMatcher: ErrorStateMatcher;
+    ngControl: NgControl;
+}
+
+/**
+ * Mixin to augment a directive with updateErrorState method.
+ * For component with `errorState` and need to update `errorState`.
+ */
+export function mixinErrorState<T extends Constructor<HasErrorState>>(base: T)
+    : Constructor<CanUpdateErrorState> & T {
+    return class extends base {
+        /** Whether the component is in an error state. */
+        errorState: boolean = false;
+
+        /**
+         * Stream that emits whenever the state of the input changes such that the wrapping
+         * `MсFormField` needs to run change detection.
+         */
+        readonly stateChanges = new Subject<void>();
+
+        errorStateMatcher: ErrorStateMatcher;
+
+        constructor(...args: any[]) {
+            super(...args);
+        }
+
+        updateErrorState() {
+            const oldState = this.errorState;
+            const parent = this._parentFormGroup || this._parentForm;
+            const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher;
+            const control = this.ngControl ? this.ngControl.control as FormControl : null;
+            const newState = matcher.isErrorState(control, parent);
+
+            if (newState !== oldState) {
+                this.errorState = newState;
+                this.stateChanges.next();
+            }
+        }
+    };
+}

src/lib/core/common-behaviors/index.ts

@@ -4,3 +4,4 @@ export { McCommonModule, MС_SANITY_CHECKS } from './common-module';
 export { CanDisable, mixinDisabled } from './disabled';
 export { CanColor, mixinColor, ThemePalette } from './color';
 export { HasTabIndex, mixinTabIndex } from './tabindex';
+export { mixinErrorState, HasErrorState, CanUpdateErrorState } from './error-state';

src/lib/core/error/error-options.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { FormGroupDirective, NgForm, FormControl } from '@angular/forms';
+
+
+/** Error state matcher that matches when a control is invalid and dirty. */
+@Injectable()
+export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+        return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
+    }
+}
+
+/** Provider that defines how form controls behave with regards to displaying error messages. */
+@Injectable({ providedIn: 'root' })
+export class ErrorStateMatcher {
+    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+        return !!(control && control.invalid && (control.touched || (form && form.submitted)));
+    }
+}

src/lib/core/public-api.ts

@@ -1,4 +1,5 @@
 export * from './utils/index';
 export * from './common-behaviors/index';
 export * from './line/line';
+export * from './error/error-options';
 export * from './selection/index';

src/lib/core/styles/common/_input.scss

@@ -0,0 +1,29 @@
+@mixin mc-reset-input {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+
+    /* clears the 'X' from Internet Explorer */
+    &::-ms-clear {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    &::-ms-reveal {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    /* clears the 'X' from Chrome */
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+        display: none;
+    }
+
+}

src/lib/core/styles/typography/_all-typography.scss

@@ -5,6 +5,8 @@
 @import '../../../radio/radio-theme';
 @import '../../../checkbox/checkbox-theme';
 @import '../../../navbar/navbar-theme';
+@import '../../../input/input-theme';
+@import '../../../form-field/form-field-theme';
 
 
 @mixin mosaic-typography($config: null) {
@@ -20,4 +22,6 @@
     @include mc-radio-typography($config);
     @include mc-checkbox-typography($config);
     @include mc-navbar-typography($config);
+    @include mc-input-typography($config);
+    @include mc-form-field-typography($config);
 }

src/lib/core/theming/_all-theme.scss

@@ -8,6 +8,8 @@
 @import '../../radio/radio-theme';
 @import '../../checkbox/checkbox-theme';
 @import '../../navbar/navbar-theme';
+@import '../../input/input-theme';
+@import '../../form-field/form-field-theme';
 
 
 @mixin mosaic-theme($theme) {
@@ -20,5 +22,6 @@
     @include mc-radio-theme($theme);
     @include mc-checkbox-theme($theme);
     @include mc-navbar-theme($theme);
-
+    @include mc-input-theme($theme);
+    @include mc-form-field-theme($theme);
 }

src/lib/form-field/_form-field-base.scss

@@ -0,0 +1,2 @@
+$mc-form-field-border-radius: 3px;
+$mc-form-field-border-size: 1px;