@colijnit/sharedcomponents 1.0.4 → 1.0.7

package/src/lib/components/stock/stock-information-grid/stock-information-grid.component.ts

@@ -0,0 +1,278 @@
+import {Component, Output, ViewChild, ViewEncapsulation, EventEmitter} from "@angular/core";
+import {StockService} from "../../../service/stock.service";
+
+@Component({
+  selector: "co-stock-information-grid",
+  template: `
+    <div class="tab-link show" *ngIf="hideOrShowTabs">
+      <span class="tab-link-buttons"
+            *ngFor="let tab of tabs"
+            (click)="handleTabClick(tab)"
+            [textContent]="tab"
+            [class.active]="tab === activeTab"
+      ></span>
+    </div>
+
+    <div class="stock-line">
+      <div [textContent]="activeTabText"></div>
+
+    </div>
+
+    <div class="stock-grid">
+      <co-simple-grid *ngIf="activeTab === tabs[0] && hideOrShowTabs"
+                      [data]="stockInformation"
+      >
+          <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNumber'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseDescription'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK'" [field]="'amountLaterAvailable'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION'" [field]="'location'">
+            <ng-template let-row="row">
+              <a [textContent]="'bekijken'" (click)="onLocationClick($event)"></a>
+            </ng-template>
+          </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[1]"
+                      [data]="inOrderInformation"
+      >
+        <co-simple-grid-column [headerText]="'IN_ORDER2'" [field]="'inOrder'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'CUSTOMER'" [field]="'customer'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'orderDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'orderAmount'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNumber'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseDescription'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'COMMISSION2'" [field]="'commission'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[2]"
+                      [data]="orderInformation"
+      >
+        <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR'" [field]="'purchaseOrderNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'orderDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'orderAmount'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RESERVED'" [field]="'reserved'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'FREE_STOCK'" [field]="'freeStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE1'" [field]="'deliveryDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RESERVE'" [field]="'reservation'"></co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-grid" *ngIf="hideOrShowLocationTab">
+      <div class="stock-location-group">
+        <div class="stock-location-left-group">
+          <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></span>
+        </div>
+        <div class="stock-location-right-group">
+          <co-input-combo-box [(model)]="dataWareHouseCode"
+                              [fields]="dataWareHouseFields"
+                              [placeholder]="'WAREHOUSE'"
+                              [required]="true"
+          ></co-input-combo-box>
+        </div>
+      </div>
+
+      <co-simple-grid [data]="stockLocationInformation"
+      >
+        <div class="stock-location-group">
+          <div class="stock-location-left-group">
+            <co-button class="stock-lines-button" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></co-button>
+          </div>
+        </div>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'location'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH'" [field]="'batch'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SERIAL_NO'" [field]="'serialNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'allocated'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template let-row="row">
+              <span [textContent]="'Transfer'" (click)="handleStockTransferClick($event)"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-grid" *ngIf="showStockHistory">
+      <co-simple-grid [data]="stockHistoryInformation"
+      >
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'location'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH'" [field]="'batch'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SERIAL_NO'" [field]="'serialNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'allocated'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-button-toolbar">
+      <div class="stock-button-left-group">
+        <co-button [label]="'HISTORY'" (click)="handleHistoryClick()"></co-button>
+      </div>
+      <div class="stock-button-middle-group">
+        <div class="button-left">
+          <co-button [textContent]="'Ok'" (click)="onOkClick()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button [textContent]="'Annuleren'" (click)="onCancelClick()"></co-button>
+        </div>
+      </div>
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockInformationGridComponent {
+
+  @ViewChild(StockInformationGridComponent)
+  public stock: StockInformationGridComponent;
+
+  @Output()
+  public readonly locationLineClicked: EventEmitter<[]> = new EventEmitter();
+
+  @Output()
+  public readonly transferIconClicked: EventEmitter<[]> = new EventEmitter();
+
+  public readonly MAX_GRID_ROWS: number = 10;
+
+  public stockStatus: string = "medium";
+  public image: string;
+  public show: boolean = false;
+  public hideOrShowLocationTab: boolean = false;
+  public showStockHistory: boolean = false;
+
+  public data: any[] = [
+    {test: "test"}
+  ];
+
+  public stockInformation: Object[] = [
+    {warehouseNumber: "1", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "test"},
+    {warehouseNumber: "2", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "Test nummer 2"},
+    {warehouseNumber: "3", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "Amundsenweg"},
+  ];
+  public stockLocationInformation: Object[] = [
+    {location: "title 1", batch: "1", serialNo: "1", amountInStock: "1", allocated: "1", amountAvailable: "1"},
+    {location: "title 2", amountInStock: "2"},
+    {location: "title 3", amountInStock: "3"},
+    {location: "title 4", amountInStock: "4"},
+    {location: "title 5", amountInStock: "5"},
+  ];
+  public inOrderInformation: Object[] = [
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+    {inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321"},
+  ];
+  public stockHistoryInformation: Object[] = [
+
+  ];
+  public orderInformation: any[] = [];
+
+  public stockColumns: any[] = [];
+  public stockLocationColumns: any[] = [];
+  public inOrderColumns: any[] = [];
+  public orderColumns: any[] = [];
+
+  public hideOrShowTabs: boolean = true;
+
+  public dataWareHouseCode: number = 0;
+  public dataWareHouseFields: Object = { text: "warehouseDescription", value: "warehouseNumber" };
+
+  public tabs: string[] = [
+    "STOCK",
+    "IN_ORDER2",
+    "ORDERS1"
+  ];
+  public activeTab: string = this.tabs[0];
+
+  public get activeTabText(): string {
+    switch (this.activeTab) {
+      case this.tabs[0]:
+        return "Voorraadregels";
+      case this.tabs[1]:
+        return "Gevonden in order(s)";
+      case this.tabs[2]:
+        return "Gevonden in bestellingen";
+      default:
+        return "Voorraadlocatie regels";
+    }
+  }
+
+  constructor(
+    private _stockService: StockService
+  ) {
+  }
+
+  public handleTabClick(tabData): void {
+    this.activeTab = tabData;
+  }
+
+  public onLocationClick(event): void {
+    // this.locationLineClicked.emit(event[0].location);
+    this.hideOrShowTabs = false;
+    this.hideOrShowLocationTab = true;
+  }
+
+  public onRowClick(args: any): void {
+  }
+
+  public onPopupClose(): void {
+    this.show = false;
+  }
+
+  public handleHistoryClick(): void {
+    this.showStockHistory = true;
+  }
+
+  public handleCloseClick(): void {
+    this.onPopupClose();
+  }
+
+  public handleStockTransferClick(event): void {
+    this.transferIconClicked.emit(event);
+  }
+
+  public async handleBackToStockClick(): Promise<void> {
+    this.activeTab = this.tabs[0];
+    this.hideOrShowTabs = true;
+    this.hideOrShowLocationTab = false;
+  }
+
+  public handleStickerClick(): void {
+
+  }
+
+  public handleTransferClick(): void {
+
+  }
+
+  public onOkClick(): void {
+
+  }
+
+  public onCancelClick(): void {
+
+  }
+}

package/src/lib/components/stock/stock-location/stock-location.component.ts

@@ -0,0 +1,82 @@
+import {Component, EventEmitter,Output, ViewEncapsulation} from "@angular/core";
+
+@Component({
+  selector: "co-stock-location",
+  template: `
+    <div class="stock-location-wrapper">
+      <div class="buttons-wrapper">
+        <div class="stock-button-left-group">
+          <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="backToStockInformation()"></span>
+        </div>
+        <div class="dropdown-wrapper">
+          <co-drop-down-list></co-drop-down-list>
+        </div>
+      </div>
+
+      <div class="stock-grid">
+
+      </div>
+      <div class="button-wrapper">
+        <div class="button-left">
+          <co-button (click)="onOkClick()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button (click)="onCancelClick()"></co-button>
+        </div>
+      </div>
+    </div>
+
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockLocationComponent {
+
+  @Output()
+  public backToStockLines: EventEmitter<any> = new EventEmitter();
+
+  public readonly MAX_GRID_ROWS: number = 10;
+
+  public stockLocationColumns: any[] = [];
+
+  public stockLocation: Object[] = [
+    {location: "title 1", batch: "1", serieNo: "1", amountInStock: "1", allocated: "1", amountAvailable: "1"},
+    {location: "title 2", amountInStock: "2"},
+    {location: "title 3", amountInStock: "3"},
+    {location: "title 4", amountInStock: "4"},
+    {location: "title 5", amountInStock: "5"},
+  ];
+
+  constructor(
+  ) {
+    this.stockLocationColumns.push(
+      {field: "location", headerText: "WAREHOUSE", editType: "none"},
+      {field: "batch", headerText: "BATCH"},
+      {field: "serieNo", headerText: "SERIAL_NO"},
+      {field: "amountInStock", headerText: "STOCK", textAlign: "Right", editType: "numericEdit"},
+      {field: "allocated", headerText: "ALLOCATED", textAlign: "Right"},
+      {field: "amountAvailable", headerText: "AVAILABLE_STOCK", textAlign: "Right"},
+      {field: "PhysicalStock", headerText: "PHYSICAL_STOCK", textAlign: "Right"},
+      {field: "Valuta", headerText: "VALUTA", textAlign: "Right"},
+      {field: "PurchasePrice", headerText: "PURSCHASE_PRICE", textAlign: "Right"},
+      {field: "SupplierNo", headerText: "SUPPLIER_NO", textAlign: "Right"},
+      {field: "Transfer", headerText: "TRANSFER"},
+      {field: "sticker", headerText: "STICKER"},
+    );
+  }
+
+  public backToStockInformation(): void {
+    this.backToStockLines.emit();
+  }
+
+  public onStickerClick(event): void {
+    console.log('test');
+  }
+
+  public onOkClick(): void {
+
+  }
+
+  public onCancelClick(): void {
+
+  }
+}

package/src/lib/components/stock/stock-transfer/co-drop-down-list-fields.interface.ts

@@ -0,0 +1,4 @@
+export interface CoDropDownListFields {
+  text: string;
+  value: string;
+}

package/src/lib/components/stock/stock-transfer/stock-transfer.component.ts

@@ -0,0 +1,111 @@
+import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";
+import {PrintStockStickers} from "@colijnit/articleapi/build/model/print-stock-stickers";
+import {StockService} from "../../../service/stock.service";
+import {CoDropDownListFields} from "./co-drop-down-list-fields.interface";
+import {Printer} from "@colijnit/sharedapi/build/model/printer.bo";
+
+@Component({
+  selector: "co-stock-transfer",
+  template: `
+      <div class="stock-transfer">
+        <div class="stock-transfer-columns">
+          <div *ngIf="article" class="stock-transfer-left-column">
+            <co-input-text disabled
+                           [(model)]="article.standardWareHouse.description"
+                           [textContent]="article.standardWareHouse.description"
+                           [placeholder]="'Standaard magazijn'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="article.standardLocation"
+                           [textContent]="article.standardLocation"
+                           [placeholder]="'Standaard locatie'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="stockSticker.batch"
+                           [placeholder]="'Batch'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="stockSticker.serial"
+                           [placeholder]="'Serie'">
+            </co-input-text>
+            <co-input-text
+              [(model)]="article.amount"
+              [placeholder]="'Aantal'">
+
+            </co-input-text>
+          </div>
+
+          <div class="stock-transfer-right-column">
+            <co-drop-down-list [collection]="allWarehouses"
+                               [fields]="allWarehousesDropdownFields"
+                               (modelChange)="handleSelectedWarehouse($event)"
+            >
+            </co-drop-down-list>
+            <co-drop-down-list>
+
+            </co-drop-down-list>
+            <co-input-text [placeholder]="'Voorraadstatus'">
+
+            </co-input-text>
+            <co-input-text [placeholder]="'Omschrijving'">
+
+            </co-input-text>
+          </div>
+        </div>
+
+        <div class="ok-cancel-buttons">
+          <co-button [textContent]="'Ok'" (click)="handleOkClick()"></co-button>
+          <co-button [textContent]="'Annuleren'" (click)="handleCancelClick()"></co-button>
+          <co-button [textContent]="'Sticker'" (click)="handleStickerClick()"></co-button>
+        </div>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockTransferComponent {
+
+  @Input()
+  public stockSticker: PrintStockStickers;
+
+  @Input()
+  public article: any;
+
+  @Input()
+  public articleWarehouse: any[];
+
+  @Input()
+  public allWarehouses: any[];
+
+  @Output()
+  public handleCancelClicked: EventEmitter<any> = new EventEmitter();
+
+  @Output()
+  public handleStickerClicked: EventEmitter<any> = new EventEmitter();
+
+  public allWarehousesDropdownFields: CoDropDownListFields = {value: "warehouseNo", text: "description"};
+
+  public showSendMethodDialog: boolean = false;
+
+  constructor(
+    private _stockService: StockService
+  ) {
+  }
+
+  public handleOkClick(): void {
+
+  }
+
+  public handleCancelClick(): void {
+    this.handleCancelClicked.emit();
+  }
+
+  public handleSelectedWarehouse(event): void {
+    console.log(event);
+  }
+
+  public async handleStickerClick(): Promise<void> {
+    this.handleStickerClicked.emit();
+    this.showSendMethodDialog = true;
+  }
+
+}

package/src/lib/components/stock/stock.component.ts

@@ -0,0 +1,78 @@
+import {Component, EventEmitter, HostBinding, Input, Output, ViewChild, ViewEncapsulation} from "@angular/core";
+import {StockService} from "../../service/stock.service";
+import {PrintStockStickers} from "@colijnit/articleapi/build/model/print-stock-stickers";
+
+@Component({
+  selector: "co-stock",
+  template: `
+      <div class="stock-info-container">
+        <co-stock-information [article]="articleExtended"></co-stock-information>
+        <hr>
+        <co-stock-information-grid *ngIf="showStockInformationGrid" (transferIconClicked)="handleStockTransferClick($event)"></co-stock-information-grid>
+        <co-stock-location *ngIf="showStockLocation" (backToStockLines)="backToStockLinesClicked()"></co-stock-location>
+        <co-stock-transfer *ngIf="showStockTransfer"
+                           (handleCancelClicked)="backToStock()"
+                           [article]="articleExtended"
+                           [stockSticker]="stockService.stockStickers"
+                           (handleStickerClicked)="handleStickerClicked.emit($event)"
+                           [articleWarehouse]="articleWarehouse"
+                           [allWarehouses]="allWarehouses"
+        >
+        </co-stock-transfer>
+      </div>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class StockComponent {
+
+  @ViewChild(StockComponent)
+  public stock: StockComponent;
+
+  @Output()
+  public handleStickerClicked: EventEmitter<any> = new EventEmitter();
+
+  @Input()
+  public set options(value: any) {
+    this.stockService.connectConnector(value);
+  }
+
+  @Input()
+  public articleExtended: any;
+
+  @Input()
+  public articleWarehouse: any[];
+
+  @Input()
+  public allWarehouses: any[];
+
+  @HostBinding("class.co-stock")
+  public showClass() {
+    return true;
+  }
+
+  public showStockInformationGrid: boolean = true;
+  public showStockLocation: boolean = false;
+  public showStockTransfer: boolean = false;
+
+  constructor(
+    public stockService: StockService
+  ) {
+  }
+
+  public backToStockLinesClicked(): void {
+    this.showStockLocation = false;
+    this.showStockInformationGrid = true;
+  }
+
+  public handleStockTransferClick(event): void {
+    this.showStockTransfer = !this.showStockTransfer;
+    this.showStockInformationGrid = !this.showStockInformationGrid;
+    this.stockService.stockStickers = new PrintStockStickers();
+  }
+
+  public backToStock(): void {
+    this.showStockTransfer = !this.showStockTransfer;
+    this.showStockInformationGrid = !this.showStockInformationGrid;
+  }
+
+}

package/src/lib/components/stock/stock.module.ts

@@ -0,0 +1,47 @@
+import {NgModule} from "@angular/core";
+import {StockComponent} from "./stock.component";
+import {
+  ButtonModule,
+  CoGridModule,
+  DropDownModule, ImageModule,
+  InputComboBoxModule,
+  InputRadioButtonModule, InputTextModule, SimpleGridModule
+} from "@colijnit/corecomponents_v12";
+import {CommonModule} from "@angular/common";
+import {StockInformationComponent} from "./stock-information/stock-information.component";
+import {StockInformationGridComponent} from "./stock-information-grid/stock-information-grid.component";
+import {StockLocationComponent} from "./stock-location/stock-location.component";
+import {StockService} from "../../service/stock.service";
+import {IoneConnectorAdapterService} from "../../service/ione-connector-adapter.service";
+import {StockTransferComponent} from "./stock-transfer/stock-transfer.component";
+import {SendMethodDialogModule} from "../send-method-dialog/send-method-dialog.module";
+
+@NgModule({
+    imports: [
+        InputComboBoxModule,
+        CoGridModule,
+        ButtonModule,
+        CommonModule,
+        InputRadioButtonModule,
+        DropDownModule,
+        SimpleGridModule,
+        ImageModule,
+        InputTextModule,
+        SendMethodDialogModule
+    ],
+  declarations: [
+    StockComponent,
+    StockInformationComponent,
+    StockInformationGridComponent,
+    StockLocationComponent,
+    StockTransferComponent
+  ],
+    exports: [
+        StockComponent
+    ],
+    providers: [
+      StockService,
+      IoneConnectorAdapterService
+    ]
+})
+export class StockModule {}

package/{lib → src/lib}/components/stock/style/_layout.scss

@@ -12,6 +12,8 @@
       margin-top: $sc-stock-info-margin;
       padding: $sc-stock-info-padding;
       display: inline-flex;
+      width: 90%;
+      justify-content: space-between;
     }
 
     .stock-info-row {
@@ -24,11 +26,11 @@
     }
 
     .stock-image {
-
+      height: $sc-stock-image-height;
     }
 
     .stock-good-info {
-      display: inline-flex;
+      display: block;
     }
 
     .stock-status {
@@ -195,5 +197,10 @@
       color: $sc-color-action;
       cursor: pointer;
     }
+
+    .drop-list-group {
+      height: $sc-stock-grid-height;
+      overflow-y: $sc-stock-grid-overflow-y;
+    }
   }
 }

package/{lib → src/lib}/components/stock/style/_material-definition.scss

@@ -13,5 +13,8 @@ $sc-stock-tab-link-buttons-active-color: $sc-color-action !default;
 $sc-stock-tab-link-buttons-pointer: pointer !default;
 $sc-stock-grid-margin: 50px 0 0 0 !default;
 $sc-stock-simple-grid-column-header-wrapper-border-bottom: 1px solid black !default;
-$sc-stock-info-container-width: 90% !default;
-$sc-stock-info-container-padding: 30px !default;
+$sc-stock-info-container-width: 100% !default;
+$sc-stock-info-container-padding: 0px !default;
+$sc-stock-image-height: 50px !default;
+$sc-stock-grid-height: 300px !default;
+$sc-stock-grid-overflow-y: auto !default;

package/src/lib/components/stock/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/variables";
+@import "./material-definition";
+@import "./layout";
+@import "./theme";