refactor(admin-ui): Extract AffixedInputComponent for reuse

admin-ui/package.json

@@ -21,9 +21,9 @@
     "@angular/platform-browser": "^6.1.4",
     "@angular/platform-browser-dynamic": "^6.1.4",
     "@angular/router": "^6.1.4",
-    "@clr/angular": "^0.12.10",
-    "@clr/icons": "^0.12.10",
-    "@clr/ui": "^0.12.10",
+    "@clr/angular": "^0.13.3",
+    "@clr/icons": "^0.13.3",
+    "@clr/ui": "^0.13.3",
     "@ng-select/ng-select": "^2.5.0",
     "@ngx-translate/core": "^10.0.2",
     "@ngx-translate/http-loader": "^3.0.1",

admin-ui/src/app/catalog/components/product-variants-wizard/product-variants-wizard.component.spec.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TestingCommonModule } from '../../../../testing/testing-common.module';
 import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { MockNotificationService } from '../../../core/providers/notification/notification.service.mock';
+import { AffixedInputComponent } from '../../../shared/components/affixed-input/affixed-input.component';
 import { ChipComponent } from '../../../shared/components/chip/chip.component';
 import { CurrencyInputComponent } from '../../../shared/components/currency-input/currency-input.component';
 import { SelectToggleComponent } from '../../../shared/components/select-toggle/select-toggle.component';
@@ -26,6 +27,7 @@ describe('ProductVariantsWizardComponent', () => {
                 SelectToggleComponent,
                 ChipComponent,
                 CurrencyInputComponent,
+                AffixedInputComponent,
             ],
             providers: [{ provide: NotificationService, useClass: MockNotificationService }],
         }).compileComponents();

admin-ui/src/app/shared/components/affixed-input/affixed-input.component.html

@@ -0,0 +1,7 @@
+<ng-content select="input"></ng-content>
+<div class="affix prefix" *ngIf="prefix">
+    {{ prefix }}
+</div>
+<div class="affix suffix" *ngIf="suffix">
+    {{ suffix }}
+</div>

admin-ui/src/app/shared/components/affixed-input/affixed-input.component.scss

@@ -0,0 +1,23 @@
+@import "variables";
+
+:host {
+    display: inline-flex;
+}
+.affix {
+    display: flex;
+    align-items: center;
+    background-color: $color-grey-2;
+    top: 1px;
+    padding: 3px;
+    line-height: .58333rem;
+    border-bottom: 1px solid $color-grey-4;
+    transition: border 0.2s;
+}
+
+.prefix {
+    order: -1;
+}
+
+::ng-deep input:focus ~ .affix {
+    border-bottom: 2px solid #0094d2;
+}

admin-ui/src/app/shared/components/affixed-input/affixed-input.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+/**
+ * A wrapper around an <input> element which adds a prefix and/or a suffix element.
+ */
+@Component({
+    selector: 'vdr-affixed-input',
+    templateUrl: './affixed-input.component.html',
+    styleUrls: ['./affixed-input.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AffixedInputComponent {
+    @Input() prefix: string;
+    @Input() suffix: string;
+}

admin-ui/src/app/shared/components/currency-input/currency-input.component.html

@@ -1,10 +1,9 @@
-<div class="currency-symbol">
-    {{ currencySymbol }}
-</div>
-<input type="number"
-       step="0.01"
-       [value]="_decimalValue"
-       [disabled]="disabled"
-       [readonly]="readonly"
-       (input)="onInput($event.target.value)"
-       (focus)="onTouch()">
+<vdr-affixed-input [prefix]="currencySymbol">
+    <input type="number"
+           step="0.01"
+           [value]="_decimalValue"
+           [disabled]="disabled"
+           [readonly]="readonly"
+           (input)="onInput($event.target.value)"
+           (focus)="onTouch()">
+</vdr-affixed-input>

admin-ui/src/app/shared/components/currency-input/currency-input.component.scss

@@ -1,22 +1,3 @@
-@import "variables";
-
 :host {
-    position: relative;
-    display: inline-block;
-}
-.currency-symbol {
-    display: flex;
-    align-items: center;
-    background-color: $color-grey-2;
-    position: absolute;
-    left: 0;
-    top: 1px;
-    padding: 3px;
-    border-radius: 3px;
-    line-height: .58333rem;
-}
-input {
-    max-width: 115px;
-    padding-left: 40px;
-    line-height: .58333rem;
+    padding: 0;
 }

admin-ui/src/app/shared/components/currency-input/currency-input.component.spec.ts

@@ -4,13 +4,20 @@ import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
+import { AffixedInputComponent } from '../affixed-input/affixed-input.component';
+
 import { CurrencyInputComponent } from './currency-input.component';
 
 describe('CurrencyInputComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [FormsModule],
-            declarations: [TestControlValueAccessorComponent, TestSimpleComponent, CurrencyInputComponent],
+            declarations: [
+                TestControlValueAccessorComponent,
+                TestSimpleComponent,
+                CurrencyInputComponent,
+                AffixedInputComponent,
+            ],
         }).compileComponents();
     }));
 

admin-ui/src/app/shared/shared.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { ClarityModule } from '@clr/angular';
+import { ClarityModule, ClrFormsNextModule } from '@clr/angular';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxPaginationModule } from 'ngx-pagination';
@@ -12,6 +12,7 @@ import {
     ActionBarLeftComponent,
     ActionBarRightComponent,
 } from './components/action-bar/action-bar.component';
+import { AffixedInputComponent } from './components/affixed-input/affixed-input.component';
 import { ChipComponent } from './components/chip/chip.component';
 import { CurrencyInputComponent } from './components/currency-input/currency-input.component';
 import { CustomFieldControlComponent } from './components/custom-field-control/custom-field-control.component';
@@ -34,6 +35,7 @@ import { ModalService } from './providers/modal/modal.service';
 
 const IMPORTS = [
     ClarityModule,
+    ClrFormsNextModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
@@ -47,6 +49,7 @@ const DECLARATIONS = [
     ActionBarComponent,
     ActionBarLeftComponent,
     ActionBarRightComponent,
+    AffixedInputComponent,
     ChipComponent,
     CurrencyInputComponent,
     CustomFieldControlComponent,

admin-ui/yarn.lock

@@ -234,19 +234,21 @@
     typescript "2.4.1"
     yargs "8.0.2"
 
-"@clr/angular@^0.12.10":
-  version "0.12.10"
-  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-0.12.10.tgz#aab495e6067a066d1fd7c7f8af20b8a80e558816"
+"@clr/angular@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@clr/angular/-/angular-0.13.3.tgz#a36d4aae796a1721f6fa331726b06bd47f7dc24a"
   dependencies:
     tslib "^1.9.0"
 
-"@clr/icons@^0.12.10":
-  version "0.12.10"
-  resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-0.12.10.tgz#10e41ab0076b508f283c82796973d5a37976e8c2"
+"@clr/icons@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@clr/icons/-/icons-0.13.3.tgz#2b9881dfa6b716755b19296eaf0bb9a4b7988cba"
 
-"@clr/ui@^0.12.10":
-  version "0.12.10"
-  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-0.12.10.tgz#aba591dfe528a8db5c0ee2d4fbd936cac1c16ccf"
+"@clr/ui@^0.13.3":
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/@clr/ui/-/ui-0.13.3.tgz#3f8f41ee3f9c3c1f1b427b32e596bd232bd97152"
+  optionalDependencies:
+    bootstrap "4.0.0-alpha.5"
 
 "@heroku-cli/color@^1.1.3":
   version "1.1.10"
@@ -1356,6 +1358,13 @@ boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
 
+bootstrap@4.0.0-alpha.5:
+  version "4.0.0-alpha.5"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-alpha.5.tgz#a126b648c3bd2f52b8fad4bbc5e2d0ad2abf7064"
+  dependencies:
+    jquery "1.9.1 - 3"
+    tether "^1.3.7"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -4310,6 +4319,10 @@ java-properties@^0.2.9:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/java-properties/-/java-properties-0.2.10.tgz#2551560c25fa1ad94d998218178f233ad9b18f60"
 
+"jquery@1.9.1 - 3":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.8:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.8.tgz#57a9b130888f956834aa40c5b165ba59c758f033"
@@ -7142,6 +7155,10 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
+tether@^1.3.7:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/tether/-/tether-1.4.5.tgz#8efd7b35572767ba502259ba9b1cc167fcf6f2c1"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"