@colijnit/sharedcomponents 1.0.25 → 1.0.26

package/fesm2015/colijnit-sharedcomponents.js

@@ -0,0 +1,3516 @@
+import { __awaiter } from 'tslib';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ViewChild, ElementRef, Input, Output, HostBinding, NgModule, Injectable, ChangeDetectorRef, HostListener } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { PDFDocument } from 'pdf-lib';
+import * as PDFJS from 'pdfjs-dist/legacy/build/pdf';
+import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
+import { CommonModule } from '@angular/common';
+import SignaturePad from 'signature_pad';
+import { PrintStockStickers } from '@colijnit/sharedapi/build/model/print-stock-stickers';
+import { PrintPriceStickers } from '@colijnit/sharedapi/build/model/print-price-stickers.bo';
+import { Articles } from '@colijnit/articleapi/build/articles';
+import { Sharedapi } from '@colijnit/sharedapi/build/sharedapi';
+import { Printer } from '@colijnit/sharedapi/build/model/report/printer.bo';
+import { notNill } from '@colijnit/articleapi/build/utils/function/not-nill.function';
+import { ObjectUtils } from '@colijnit/articleapi/build/utils/object-utils';
+import { GetYesNoDbBooleanValue } from '@colijnit/articleapi/build/enum/yes-no-db-type.enum';
+import { GetTrueFalseDbBooleanValue } from '@colijnit/articleapi/build/enum/true-false-db-type.enum';
+import { GetOneZeroDbBooleanValue } from '@colijnit/articleapi/build/enum/one-zero-bool-db-type.enum';
+import { GetLogicalBooleanValue } from '@colijnit/articleapi/build/enum/db-boolean-value-type.enum';
+import { DateUtils } from '@colijnit/articleapi/build/utils/date-utils';
+import { NumberUtils } from '@colijnit/articleapi/build/utils/number-utils';
+import { isNill as isNill$1 } from '@colijnit/articleapi/build/utils/function/is-nill.function';
+import { MapPropertyDecorator } from '@colijnit/articleapi/build/factory/decorators/map-property.decorator';
+import { BooleanTextDecorator as BooleanTextDecorator$1 } from '@colijnit/articleapi/build/factory/decorators/boolean.decorator';
+import { JsonFieldFieldDecorator } from '@colijnit/articleapi/build/factory/decorators/json.decorator';
+import { ComplexArrayDecorator as ComplexArrayDecorator$1 } from '@colijnit/articleapi/build/factory/decorators/complex-array.decorator';
+import { ArticleStock } from '@colijnit/articleapi/build/model/article-stock.bo';
+import { StockHistoryBo } from '@colijnit/articleapi/build/model/stock-history.bo';
+import { StockStickersPrintLayouts } from '@colijnit/sharedapi/build/model/report/stock-stickers-print-layouts.bo';
+import { ArticleDetailsBo } from '@colijnit/articleapi/build/model/article-details.bo';
+import { StockStatus } from '@colijnit/articleapi/build/model/stock-status.bo';
+import { StockManagementWarehouses } from '@colijnit/articleapi/build/model/stock-management-warehouses.bo';
+import { StockLocation } from '@colijnit/articleapi/build/model/stock-location.bo';
+import { ArticleTransaction } from '@colijnit/articleapi/build/model/article-transaction.bo';
+import { BehaviorSubject } from 'rxjs';
+import { GetStockHistoryRequest } from '@colijnit/articleapi/build/model/get-stock-history-request';
+import { ArticleStock as ArticleStock$1 } from '@colijnit/articleapi/build/model/article-stock';
+import { CoDialogPromptModule, InputCheckboxModule, InputComboBoxModule, IconModule, InputNumberPickerModule, CoDialogWizardModule, ButtonModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputTextareaModule } from '@colijnit/corecomponents_v12';
+import * as i1 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ArticleStockManagement } from '@colijnit/articleapi/build/model/article-stock-management';
+import { ArticleTransaction as ArticleTransaction$1 } from '@colijnit/articleapi/build/model/article-transaction';
+import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
+
+class DocsignComponent {
+    constructor() {
+        this.saveButtonLabel = 'SAVE';
+        this.clearButtonLabel = 'CLEAR';
+        this.signDocumentButtonLabel = 'SIGN_DOCUMENT';
+        this.cancelButtonLabel = 'CANCEL';
+        this.pdfSaved = new EventEmitter();
+        this.cancelClick = new EventEmitter();
+        this.showSignaturePopup = false;
+        this.showSigBuyer = false;
+        this.showSigSeller = false;
+        this.showSignatures = false;
+    }
+    /**
+     * Load an existing [[PDFDocument]]. The input data can be provided in
+     * multiple formats:
+     *
+     * | Type          | Contents                                               |
+     * | ------------- | ------------------------------------------------------ |
+     * | `string`      | A base64 encoded string (or data URI) containing a PDF |
+     * | `Uint8Array`  | The raw bytes of a PDF                                 |
+     * | `ArrayBuffer` | The raw bytes of a PDF                                 |
+     *
+     * For example:
+     * ```js
+     * import { PDFDocument } from 'pdf-lib'
+     *
+     * // pdf=string
+     * const base64 =
+     *  'JVBERi0xLjcKJYGBgYEKCjUgMCBvYmoKPDwKL0ZpbHRlciAvRmxhdGVEZWNvZGUKL0xlbm' +
+     *  'd0aCAxMDQKPj4Kc3RyZWFtCniccwrhMlAAwaJ0Ln2P1Jyy1JLM5ERdc0MjCwUjE4WQNC4Q' +
+     *  '6cNlCFZkqGCqYGSqEJLLZWNuYGZiZmbkYuZsZmlmZGRgZmluDCQNzc3NTM2NzdzMXMxMjQ' +
+     *  'ztFEKyuEK0uFxDuAAOERdVCmVuZHN0cmVhbQplbmRvYmoKCjYgMCBvYmoKPDwKL0ZpbHRl' +
+     *  'ciAvRmxhdGVEZWNvZGUKL1R5cGUgL09ialN0bQovTiA0Ci9GaXJzdCAyMAovTGVuZ3RoID' +
+     *  'IxNQo+PgpzdHJlYW0KeJxVj9GqwjAMhu/zFHkBzTo3nCCCiiKIHPEICuJF3cKoSCu2E8/b' +
+     *  '20wPIr1p8v9/8kVhgilmGfawX2CGaVrgcAi0/bsy0lrX7IGWpvJ4iJYEN3gEmrrGBlQwGs' +
+     *  'HHO9VBX1wNrxAqMX87RBD5xpJuddqwd82tjAHxzV1U5LPgy52DKXWnr1Lheg+j/c/pzGVr' +
+     *  'iqV0VlwZPXGPCJjElw/ybkwUmeoWgxesDXGhHJC/D/iikp1Av80ptKU0FdBEe25pPihAM1' +
+     *  'u6ytgaaWfs2Hrz35CJT1+EWmAKZW5kc3RyZWFtCmVuZG9iagoKNyAwIG9iago8PAovU2l6' +
+     *  'ZSA4Ci9Sb290IDIgMCBSCi9GaWx0ZXIgL0ZsYXRlRGVjb2RlCi9UeXBlIC9YUmVmCi9MZW' +
+     *  '5ndGggMzgKL1cgWyAxIDIgMiBdCi9JbmRleCBbIDAgOCBdCj4+CnN0cmVhbQp4nBXEwREA' +
+     *  'EBAEsCwz3vrvRmOOyyOoGhZdutHN2MT55fIAVocD+AplbmRzdHJlYW0KZW5kb2JqCgpzdG' +
+     *  'FydHhyZWYKNTEwCiUlRU9G'
+     *
+     * const dataUri = 'data:application/pdf;base64,' + base64
+     *
+     * const pdfDoc1 = await PDFDocument.load(base64)
+     * const pdfDoc2 = await PDFDocument.load(dataUri)
+     *
+     * // pdf=Uint8Array
+     * import fs from 'fs'
+     * const uint8Array = fs.readFileSync('with_update_sections.pdf')
+     * const pdfDoc3 = await PDFDocument.load(uint8Array)
+     *
+     * // pdf=ArrayBuffer
+     * const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'
+     * const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
+     * const pdfDoc4 = await PDFDocument.load(arrayBuffer)
+     *
+     * ```
+     *
+     * @param pdf The input data containing a PDF document.
+     * @param options The options to be used when loading the document.
+     * @returns Resolves with a document loaded from the input.
+     */
+    set pdf(value) {
+        if (value) {
+            this._pdf = value;
+            this._openPDF();
+        }
+    }
+    get pdf() {
+        return this._pdf;
+    }
+    showClass() {
+        return true;
+    }
+    saveFirstSignature(sig) {
+        this._saveSignature(sig, this.sigBuyerPosition);
+        this.showSigBuyer = false;
+        this._savePdf();
+    }
+    saveSecondSignature(sig) {
+        this._saveSignature(sig, this.sigSellerPosition);
+        this.showSigSeller = false;
+        this._savePdf();
+    }
+    _openPDF() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // first create reader to check signatures
+            this._checkSignatures();
+            this.pdfDoc = yield PDFDocument.load(this._pdf, {
+                updateMetadata: false
+            });
+            const pdfDataUri = yield this.pdfDoc.saveAsBase64({ dataUri: true });
+            this.iframe.nativeElement.src = pdfDataUri;
+        });
+    }
+    _savePdf() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.showSigBuyer && !this.showSigSeller) {
+                // ready, save the pdf and emit result
+                const result = yield this.pdfDoc.saveAsBase64();
+                this.pdfSaved.next(result);
+            }
+        });
+    }
+    _checkSignatures() {
+        return __awaiter(this, void 0, void 0, function* () {
+            let pdfWorkerSrc;
+            if (window.hasOwnProperty('pdfWorkerSrc') &&
+                typeof window.pdfWorkerSrc === 'string' &&
+                window.pdfWorkerSrc) {
+                pdfWorkerSrc = window.pdfWorkerSrc;
+            }
+            else {
+                pdfWorkerSrc = pdfjsWorker;
+            }
+            PDFJS.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;
+            const pdfReader = yield PDFJS.getDocument(this._pdf).promise;
+            const numPages = pdfReader.numPages;
+            for (let i = 0; i < numPages; i++) {
+                const page = yield pdfReader.getPage(i + 1);
+                const text = yield page.getTextContent();
+                page.cleanup();
+                if (this.firstSignatureField) {
+                    this.sigBuyerPosition = this._getPositionSignature(text, this.firstSignatureField);
+                    if (this.sigBuyerPosition.width > 0 && this.sigBuyerPosition.height > 0) {
+                        this.sigBuyerPosition.page = i;
+                        this.showSigBuyer = true;
+                    }
+                }
+                if (this.secondSignatureField) {
+                    this.sigSellerPosition = this._getPositionSignature(text, this.secondSignatureField);
+                    if (this.sigSellerPosition.width > 0 && this.sigSellerPosition.height > 0) {
+                        this.sigSellerPosition.page = i;
+                        this.showSigSeller = true;
+                    }
+                }
+            }
+        });
+    }
+    _getPositionSignature(textItem, signatureField) {
+        const sigItem = textItem.items.find((i) => i.str.toLowerCase() === signatureField.toLowerCase());
+        if (sigItem) {
+            textItem.items.slice(textItem.items.indexOf(sigItem), 1);
+            return {
+                x: sigItem.transform[4],
+                y: sigItem.transform[5],
+                width: sigItem.width,
+                height: sigItem.height,
+                page: 0
+            };
+        }
+        return { x: 0, y: 0, width: 0, height: 0, page: 0 };
+    }
+    _saveSignature(sig, dimensions) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const jpgImage = yield this.pdfDoc.embedPng(sig);
+            const page = yield this.pdfDoc.getPage(dimensions.page);
+            page.drawImage(jpgImage, {
+                x: ((dimensions.x + (dimensions.width / 2)) - (200 / 2)),
+                y: ((dimensions.y + (dimensions.height / 2)) - (100 / 2)),
+                width: 200,
+                height: 100
+            });
+        });
+    }
+}
+DocsignComponent.decorators = [
+    { type: Component, args: [{
+                selector: "ione-docsign",
+                template: `
+    <iframe #iframe></iframe>
+    <ione-signatures *ngIf="showSignatures" @showHideSignature
+                     [showFirstSignature]="showSigBuyer"
+                     [firstSignatureTitle]="firstSignatureLabel"
+                     [showSecondSignature]="showSigSeller"
+                     [secondSignatureTitle]="secondSignatureLabel"
+                     [saveButtonLabel]="saveButtonLabel"
+                     [clearButtonLabel]="clearButtonLabel"
+                     (saveFirstSignature)="saveFirstSignature($event)"
+                     (saveSecondSignature)="saveSecondSignature($event)"
+    ></ione-signatures>
+    <input type="button" *ngIf="(showSigBuyer || showSigSeller) && !showSignatures" class="button button-sign-document"
+           [value]="signDocumentButtonLabel"
+           (click)="showSignatures = true"
+    />
+    <input type="button" class="button button-cancel"
+           [value]="cancelButtonLabel"
+           (click)="cancelClick.emit($event)"
+    />
+  `,
+                animations: [
+                    trigger("showHideSignature", [
+                        state("void", style({ transform: "translate(-50%, -50%) scale(0)" })),
+                        state("*", style({ transform: "translate(-50%, -50%) scale(1)" })),
+                        transition("void <=> *", animate("200ms ease-in-out")),
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+DocsignComponent.propDecorators = {
+    iframe: [{ type: ViewChild, args: ["iframe", { read: ElementRef },] }],
+    pdf: [{ type: Input }],
+    firstSignatureLabel: [{ type: Input }],
+    firstSignatureField: [{ type: Input }],
+    secondSignatureLabel: [{ type: Input }],
+    secondSignatureField: [{ type: Input }],
+    saveButtonLabel: [{ type: Input }],
+    clearButtonLabel: [{ type: Input }],
+    signDocumentButtonLabel: [{ type: Input }],
+    cancelButtonLabel: [{ type: Input }],
+    pdfSaved: [{ type: Output }],
+    cancelClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ['class.ione-docsign',] }]
+};
+
+class SignatureComponent {
+    constructor() {
+        this.saveButtonLabel = 'SAVE';
+        this.clearButtonLabel = 'CLEAR';
+        this.save = new EventEmitter();
+    }
+    set content(content) {
+        if (content) {
+            this.signatureCanvas = content;
+            this._initCanvas();
+        }
+    }
+    showClass() {
+        return true;
+    }
+    handleSave(event) {
+        // save canvas as svg
+        // const sig: string = this.signature.toDataURL("image/svg+xml");
+        const sig = this.signature.toDataURL("image/png");
+        // emit signature string
+        this.save.next(sig);
+    }
+    handleClear(event) {
+        if (this.signature) {
+            this.signature.clear();
+        }
+    }
+    _initCanvas() {
+        if (this.signatureCanvas && this.signatureCanvas.nativeElement) {
+            this.signature = new SignaturePad(this.signatureCanvas.nativeElement);
+            setTimeout(() => {
+                this._resizeSignatureCanvas(this.signature, this.signatureCanvas);
+            });
+        }
+    }
+    _resizeSignatureCanvas(signature, signatureCanvas) {
+        const imageBeforeResize = signature.toDataURL();
+        const ratio = Math.max(window.devicePixelRatio || 1, 1);
+        signatureCanvas.nativeElement.width = signatureCanvas.nativeElement.offsetWidth * ratio;
+        signatureCanvas.nativeElement.height = signatureCanvas.nativeElement.offsetHeight * ratio;
+        signatureCanvas.nativeElement.getContext("2d").scale(ratio, ratio);
+        signature.fromDataURL(imageBeforeResize);
+    }
+}
+SignatureComponent.decorators = [
+    { type: Component, args: [{
+                selector: "ione-signature",
+                template: `
+    <div class="signature-wrapper">
+      <div class="signature-header">
+        <span *ngIf="title" class="title" [textContent]="title"></span>
+        <div class="button-wrapper">
+          <input type="button" (click)="handleSave($event)" [value]="saveButtonLabel"/>
+          <input type="button" (click)="handleClear($event)" [value]="clearButtonLabel">
+        </div>
+      </div>
+      <div class="canvas">
+        <canvas #signature></canvas>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+SignatureComponent.propDecorators = {
+    content: [{ type: ViewChild, args: ["signature", { read: ElementRef },] }],
+    title: [{ type: Input }],
+    saveButtonLabel: [{ type: Input }],
+    clearButtonLabel: [{ type: Input }],
+    save: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.ione-signature",] }]
+};
+
+class SignaturesComponent {
+    constructor() {
+        this.showFirstSignature = false;
+        this.showSecondSignature = false;
+        this.saveButtonLabel = 'SAVE';
+        this.clearButtonLabel = 'CLEAR';
+        this.saveFirstSignature = new EventEmitter();
+        this.saveSecondSignature = new EventEmitter();
+    }
+    showClass() {
+        return true;
+    }
+}
+SignaturesComponent.decorators = [
+    { type: Component, args: [{
+                selector: "ione-signatures",
+                template: `
+    <ione-signature *ngIf="showFirstSignature"
+                    [title]="firstSignatureTitle"
+                    [saveButtonLabel]="saveButtonLabel"
+                    [clearButtonLabel]="clearButtonLabel"
+                    (save)="saveFirstSignature.emit($event)"></ione-signature>
+    <ione-signature *ngIf="showSecondSignature"
+                    [title]="secondSignatureTitle"
+                    [saveButtonLabel]="saveButtonLabel"
+                    [clearButtonLabel]="clearButtonLabel"
+                    (save)="saveSecondSignature.emit($event)"></ione-signature>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+SignaturesComponent.propDecorators = {
+    showFirstSignature: [{ type: Input }],
+    firstSignatureTitle: [{ type: Input }],
+    showSecondSignature: [{ type: Input }],
+    secondSignatureTitle: [{ type: Input }],
+    saveButtonLabel: [{ type: Input }],
+    clearButtonLabel: [{ type: Input }],
+    saveFirstSignature: [{ type: Output }],
+    saveSecondSignature: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.ione-signatures",] }]
+};
+
+class DocsignModule {
+}
+DocsignModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule
+                ],
+                declarations: [
+                    DocsignComponent,
+                    SignatureComponent,
+                    SignaturesComponent
+                ],
+                exports: [
+                    DocsignComponent
+                ]
+            },] }
+];
+
+const PROP_META_KEY$3 = "complexField";
+/**
+ * !! just a TAG DECORATOR for now, there is no code that uses this meta data within the ione connector lib itself.
+ */
+/**
+ * Property decorator for properties of businessobject classes that are other strongly typed businessobjects.
+ * Ensures that the BusinessObjectFactoryService makes properly typed objects from incoming raw persistence data. Otherwise we couldn't add methods
+ * to our own businessobjects and use them, since all fields would be flat data without methods after BusinessObjectFactoryService creation.
+ *
+ * Usage:
+ *
+ * @ComplexField(Transaction)
+ * public transaction: Transaction
+ *
+ * Also keeps track of a "complexFieldProps" metadata on the class-level, as a reflect-metadata workaround to be able to
+ * retrieve all properties that have the @ComplexField(..) decorator (impossible with current Reflect API).
+ */
+function ComplexField(type) {
+    return function (target, propertyKey) {
+        if (!target || !propertyKey) {
+            return;
+        }
+        // warn the programmer if given type was undefined; it's probably an import order glitch that caused this, because decorators seem
+        // to be immediately processed when a class is first imported
+        if (!type) {
+            // eslint-disable-next-line no-console
+            console.warn(`@ComplexField(type): type was UNDEFINED. Called on prop (${ObjectUtils.GetClassName(target)}, ${propertyKey}). ` +
+                `Class will not properly serialize and deserialize now. We've always been able to fix this by CHANGING IMPORT ORDERS ` +
+                `where both classes and their dependencies are used, e.g. factory, repository or models..`);
+            return;
+        }
+        Reflect.defineMetadata(PROP_META_KEY$3, type, target, propertyKey);
+    };
+}
+// Utility function holder of the ComplexFieldDecorator decorator.
+class ComplexFieldDecorator {
+    /**
+     * Returns whether given property (as a string) on given object is a complex field. A complex field is a field that is decorated
+     * with the @ComplexField decorator.
+     */
+    static IsComplexField(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return false;
+        }
+        return (notNill(Reflect.getMetadata(PROP_META_KEY$3, target, propertyKey)));
+    }
+    // Returns the VALUE of the @ComplexField(VALUE) property decorator on the given propertyKey on the given modelObject.
+    static GetComplexFieldType(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return undefined;
+        }
+        return Reflect.getMetadata(PROP_META_KEY$3, target, propertyKey);
+    }
+}
+
+const PROP_META_KEY$2 = "complexArray";
+/**
+ * !! just a TAG DECORATOR for now, there is no code that uses this meta data within the ione connector lib itself.
+ */
+/**
+ * Property decorator for properties of businessobject classes that are an array of other strongly typed businessobjects.
+ * Ensures that the BusinessObjectFactoryService makes properly typed objects from incoming raw persistence data. Otherwise we couldn't add methods
+ * to our own businessobjects and use them, since all fields would be flat data without methods after BusinessObjectFactoryService creation.
+ *
+ * Usage:
+ *
+ * @ComplexArray(TransactionLine)
+ * public transactionLines: TransactionLine[]
+ */
+function ComplexArray(type) {
+    return function (target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return;
+        }
+        // warn the programmer if given type was undefined; it's probably an import order glitch that caused this, because decorators seem
+        // to be immediately processed when a class is first imported
+        if (!type) {
+            console.warn(`@ComplexArray(type): type was UNDEFINED. Called on prop (${ObjectUtils.GetClassName(target)}, ${propertyKey}). ` +
+                `Class will not properly serialize and deserialize now. We've always been able to fix this by CHANGING IMPORT ORDERS ` +
+                `where both classes and their dependencies are used, e.g. factory, repository or models..`);
+            return;
+        }
+        Reflect.defineMetadata(PROP_META_KEY$2, type, target, propertyKey);
+    };
+}
+// Utility function holder of the ComplexArrayDecorator decorator.
+class ComplexArrayDecorator {
+    /**
+     * Returns whether given property (as a string) on given object is a complex array. A complex array is an array field that is decorated
+     * with the @ComplexArray decorator.
+     */
+    static IsComplexArray(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return false;
+        }
+        return (notNill(Reflect.getMetadata(PROP_META_KEY$2, target, propertyKey)));
+    }
+    /**
+     * Returns the VALUE of the @ComplexArray(VALUE) property decorator on the given propertyKey on the given modelobject.
+     */
+    static GetComplexArrayType(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return undefined;
+        }
+        return Reflect.getMetadata(PROP_META_KEY$2, target, propertyKey);
+    }
+}
+
+const PROP_META_KEY_JN = "booleanTextJN";
+const PROP_META_KEY_TF = "booleanTextTF";
+const PROP_META_KEY_10 = "booleanText10";
+/**
+ * There are 'J', 'T', 'N', 'F', 0 and 1 'boolean values' in the database. These should be translated to true and false boolean values in
+ * our client application.
+ *
+ * The values 'J' and 'N' seem to be most commonly used. This is the default setting when using this decorator.
+ * You can pass 'T' or 1 for the other variants as follows:
+ *
+ * Usage:
+ *
+ * @BooleanText() or @BooleanText("J") (the default, uses YesNoDbType char values)
+ * public foo: boolean // 'J' and 'N' become true and false after BusinessObjectFactoryService and -SerializerService processing
+ *
+ * @BooleanText('T') (uses TrueFalseDbType char values)
+ * public bar: boolean // 'T' and 'F' become true and false after BusinessObjectFactoryService and -SerializerService processing
+ *
+ * @BooleanText(1)
+ * public baz: boolean // 1 and 0 become true and false after BusinessObjectFactoryService and -SerializerService processing
+ */
+function BooleanText(type) {
+    return function (target, propertyKey) {
+        if (!target || !propertyKey) {
+            return;
+        }
+        // by default, it's a J N boolean text
+        if (!type || type === "J") {
+            Reflect.defineMetadata(PROP_META_KEY_JN, true, target, propertyKey);
+        }
+        else if (type === "T") {
+            Reflect.defineMetadata(PROP_META_KEY_TF, true, target, propertyKey);
+        }
+        else if (type === 1) {
+            Reflect.defineMetadata(PROP_META_KEY_10, true, target, propertyKey);
+        }
+    };
+}
+// Utility function holder of the BooleanTextDecorator decorator.
+class BooleanTextDecorator {
+    /**
+     * Returns whether given property (as a string) on given object is a boolean text field. That is, it's a field that is decorated
+     * with the @BooleanText decorator.
+     */
+    static IsBooleanTextField(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return false;
+        }
+        return (Reflect.getMetadata(PROP_META_KEY_JN, target, propertyKey) === true
+            ||
+                Reflect.getMetadata(PROP_META_KEY_TF, target, propertyKey) === true
+            ||
+                Reflect.getMetadata(PROP_META_KEY_10, target, propertyKey) === true);
+    }
+    /**
+     * Returns the logical true or false value of given character ('J', 'N', 'T' or 'F') or number (0 or 1).
+     * Returns UNDEFINED if given boolChar was not recognised as a boolean text.
+     */
+    static GetLogicalBooleanValue(dbBoolChar) {
+        return GetLogicalBooleanValue(dbBoolChar);
+    }
+    /**
+     * Returns the boolean character / number of given logical bool property on target object. Uses its @BooleanText() annotation to decide
+     * what character / number to return.
+     * Used in BusinessObjectSerializerServiceService to convert logical bools to their original boolean character.
+     * @returns {string|number} The original, reverse-engineered boolean character (or number) of given object property, or undefined.
+     */
+    static GetDbBooleanValue(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return undefined;
+        }
+        let dbBoolVal = undefined;
+        const curBoolVal = target[propertyKey];
+        if (BooleanTextDecorator._IsJaNeeProp(target, propertyKey)) {
+            dbBoolVal = GetYesNoDbBooleanValue(curBoolVal);
+        }
+        else if (BooleanTextDecorator._IsTrueFalseProp(target, propertyKey)) {
+            dbBoolVal = GetTrueFalseDbBooleanValue(curBoolVal);
+        }
+        else if (BooleanTextDecorator._IsZeroOneProp(target, propertyKey)) {
+            dbBoolVal = GetOneZeroDbBooleanValue(curBoolVal);
+        }
+        return dbBoolVal;
+    }
+    static _IsJaNeeProp(target, propertyKey) {
+        return BooleanTextDecorator._IsProp(PROP_META_KEY_JN, target, propertyKey);
+    }
+    static _IsTrueFalseProp(target, propertyKey) {
+        return BooleanTextDecorator._IsProp(PROP_META_KEY_TF, target, propertyKey);
+    }
+    static _IsZeroOneProp(target, propertyKey) {
+        return BooleanTextDecorator._IsProp(PROP_META_KEY_10, target, propertyKey);
+    }
+    static _IsProp(prop, target, propertyKey) {
+        return !!target && !!propertyKey && typeof target === "object" && Reflect.hasMetadata(prop, target, propertyKey);
+    }
+}
+
+const PROP_META_KEY$1 = "dateField";
+/**
+ * !! just a TAG DECORATOR for now, there is no code that uses this meta data within the ione connector lib itself.
+ */
+/**
+ * Property decorator for properties of businessobject classes that are of type Date, but are sent to us as strings.
+ * Ensures that the BusinessObjectFactory makes proper JavaScript Date objects from incoming strings for @DateField() decorated properties.
+ *
+ * Usage:
+ *
+ * @DateField()
+ * public expectedDeliveryDate: Date
+ */
+function DateField() {
+    return function (target, propertyKey) {
+        if (!target || !propertyKey) {
+            return;
+        }
+        Reflect.defineMetadata(PROP_META_KEY$1, undefined, target, propertyKey);
+    };
+}
+// Utility function holder of the @DateField() decorator.
+class DateFieldFieldDecorator {
+    // Returns whether given property (as a string) on given object is decorated with @DateField().
+    static IsDateField(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return false;
+        }
+        return Reflect.hasMetadata(PROP_META_KEY$1, target, propertyKey);
+    }
+    static StringAsDate(str) {
+        return DateUtils.StringAsDate(str);
+    }
+}
+
+const PROP_META_KEY = "stringNumber";
+/**
+ * !! just a TAG DECORATOR for now, there is no code that uses this meta data within the ione connector lib itself.
+ */
+/**
+ * Decorator for properties of businessobjects that are sent to us as strings from the database, but which we want to use as a number in the client.
+ *
+ * Can be handy for incongruent backend api cases, where id data types are communicated wrongly via strings instead of numbers
+ * (e.g. on EmployeeFullObject.district, points to a District which has a number id, but in employee it's a string representation of that number...)
+ *
+ * Used by business object factory and -serializer.
+ *
+ * Usage:
+ *
+ * @StringNumber()
+ * public rights: UserRightType
+ */
+function StringNumber() {
+    return function (target, propertyKey) {
+        if (!target || !propertyKey) {
+            return;
+        }
+        Reflect.defineMetadata(PROP_META_KEY, undefined, target, propertyKey);
+    };
+}
+// Utility function holder of the @StringNumber() decorator.
+class StringNumberDecorator {
+    // Returns whether given property (as a string) on given object is decorated with @StringNumber().
+    static IsStringNumber(target, propertyKey) {
+        if (!target || !propertyKey || typeof target !== "object") {
+            return false;
+        }
+        return Reflect.hasMetadata(PROP_META_KEY, target, propertyKey);
+    }
+    static StringAsNumber(str) {
+        return NumberUtils.ParseFloatKeepPrecision(str);
+    }
+    static NumberAsString(nr) {
+        return "" + nr;
+    }
+}
+
+// @returns true iff given value equals null or equals undefined
+function isNill(value) {
+    return value === null || value === undefined;
+}
+
+class ArrayUtils {
+    /**
+     * Returns whether at least one element in given array could be found by given finder function.
+     *
+     * @param {T[]} array
+     * @param {(element: T) => boolean} finder A finder function that takes an element of the array and returns a boolean that represents
+     * the 'found status' for that element; whether it should have been found or not.
+     */
+    static ContainsAnElementFoundBy(array, finder) {
+        if (!array || !finder) {
+            return false;
+        }
+        return notNill(this.Find(array, finder));
+    }
+    /**
+     * Cross-browser Array.find() function. Returns the first item in given array for which the foundBy function returns true. Returns
+     * undefined when none was found.
+     *
+     * Example usage:
+     * const foundItem: BusinessObject = ArrayUtils.Find<BusinessObject>(modelArray, (modelItem: BusinessObject) => <br>
+     *     (return modelItem.getId() === '1')
+     *   * });
+     *
+     * @param array The array with items to search in.
+     * @param foundBy The finder function applied on each items of the array, when that returns true, the item is considered found.
+     */
+    static Find(array, foundBy) {
+        if (!array || !foundBy) {
+            return undefined;
+        }
+        for (let i = 0, len = array.length; i < len; i++) {
+            const itemCur = array[i];
+            if (foundBy(itemCur)) {
+                return itemCur;
+            }
+        }
+        return undefined;
+    }
+    // @returns empty array when nothing found, otherwise array with found items
+    static FindAll(array, foundBy) {
+        const answer = [];
+        if (!array || !foundBy) {
+            return answer;
+        }
+        for (let i = 0, len = array.length; i < len; i++) {
+            const itemCur = array[i];
+            if (foundBy(itemCur)) {
+                answer.push(itemCur);
+            }
+        }
+        return answer;
+    }
+    // returns a simple clone of given array, using array.slice(0)
+    static CloneArray(array) {
+        let answer = [];
+        if (array) {
+            answer = array.slice(0);
+        }
+        return answer;
+    }
+    /**
+     * Returns a 'semi deep clone' of given array. Its first-level members are object-shallow-cloned (optionally with a strongly typed constructor),
+     * or just as plain object (see param arrayItemsClass).
+     * @param array
+     * @param arrayItemsClass If provided, the cloned array's first-level items will be strongly typed to / constructed as this class. Otherwise
+     * it'll be a plain object.
+     * @param deepClone Set to true if array items contain FUNCTIONS that need to be cloned..
+     * @returns {Array} semi-deep clone of given array
+     */
+    static CloneArrayAndItsItems(array, arrayItemsClass, deepClone = false) {
+        const cloneArray = [];
+        if (array) {
+            for (let i = 0, len = array.length; i < len; i++) {
+                if (deepClone) {
+                    cloneArray.push(ObjectUtils.GetDeepClone(array[i]));
+                }
+                else {
+                    cloneArray.push(ObjectUtils.GetShallowClone(array[i], arrayItemsClass));
+                }
+            }
+        }
+        else {
+            return [];
+        }
+        return cloneArray;
+    }
+    /**
+     * Removes element at given index from given array. Doesn't just set it to null like JavaScripts standard 'delete' does, but really
+     * removes the element using splice().
+     *
+     * @param {number} index
+     * @param {any[]} array in-out
+     * @returns {boolean} True if and only if the element on given index is succesfully removed from given array.
+     */
+    static RemoveElementAtIndex(index, array) {
+        if (NumberUtils.IsNaN(index) || index < 0 || !Array.isArray(array) || array.length === 0) {
+            return false;
+        }
+        if (index in array) {
+            array.splice(index, 1);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    /**
+     * Removes given element from given array. Doesn't just set it to null like JavaScripts standard 'delete' does, but really removes the
+     * element using splice(). Also works on associative arrays.
+     *
+     * @param {T} element The element to remove.
+     * @param {T[]} array The array to remove the element from.
+     * @returns {boolean} True iff given element was truly successfully removed from given array.
+     */
+    static RemoveElement(element, array) {
+        if (!Array.isArray(array)) {
+            return false;
+        }
+        const index = array.indexOf(element);
+        return ArrayUtils.RemoveElementAtIndex(index, array);
+    }
+    // Checks if given array is defined, and is an array, and has length > 0, and, optionally checks that the first element is of type given clazz.
+    static IsArrayWithElements(arrayToCheck, classItemsMustBeInstanceOf) {
+        if (isNill$1(arrayToCheck)) {
+            return false;
+        }
+        if (Array.isArray(arrayToCheck) && arrayToCheck.length > 0) {
+            if (classItemsMustBeInstanceOf) {
+                return arrayToCheck[0] instanceof classItemsMustBeInstanceOf;
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    // Removes all elements from given array for which given filter function holds true. Returns true if at least one removed, else false.
+    static RemoveElementsByFilter(array, filterFunction) {
+        if (!ArrayUtils.IsArrayWithElements(array) || !filterFunction) {
+            return false;
+        }
+        let atLeastOneRemoved = false;
+        const len = array.length;
+        for (let i = len - 1; i >= 0; i--) {
+            const item = array[i];
+            if (filterFunction.call(this, item) === true) {
+                array.splice(i, 1);
+                atLeastOneRemoved = true;
+            }
+        }
+        return atLeastOneRemoved;
+    }
+    static MoveElement(element, toIndex, array) {
+        if (!Array.isArray(array) || isNill$1(toIndex)) {
+            return false;
+        }
+        const fromIndex = array.indexOf(element);
+        const toIndexCorrected = NumberUtils.GetNearestNumberWithinBounds(toIndex, 0, array.length - 1);
+        if (fromIndex === -1 || array[toIndexCorrected] === element) {
+            // element did not exist in given array, or already existed on given toIndex
+            return false;
+        }
+        array.splice(toIndexCorrected, 0, array.splice(fromIndex, 1)[0]);
+        return true;
+    }
+    // PRE: elements exists in given array. POST: given elementToPlace has a lower index than given afterThisElement. Array is in-out manipulated.
+    static PlaceElementAfterOther(array, elementToPlace, afterThisElement) {
+        if (array) {
+            const afterThisElIdx = array.indexOf(afterThisElement);
+            const elToPlaceIdx = array.indexOf(elementToPlace);
+            if (afterThisElIdx >= elToPlaceIdx) {
+                ArrayUtils.MoveElement(elementToPlace, afterThisElIdx + 1, array);
+            }
+        }
+    }
+}
+
+/**
+ * This type represents the concept of a business object ID type. ID's of business objects can be a primary number, a simple string or a
+ * object for a composite key.
+ *
+ * Simply to prevent type declarations of 'number | string | Object' for BO ID data all over the application.
+ */
+class BusinessObject {
+    constructor() {
+    }
+    // Overridable. Returns the ID of the model. Concrete model classes often override this method to provide their specific ID getter.
+    getId() {
+        return this.id;
+    }
+    setOwnMappedPropsFromRawData(rawData = {}) {
+        if (!rawData) {
+            return;
+        }
+        Object.keys(this).forEach((key) => {
+            // check if property needs to be mapped
+            if (MapPropertyDecorator.IsMapProperty(this, key)) {
+                const mapKeys = MapPropertyDecorator.GetMapProperty(this, key).split(",");
+                const len = mapKeys.length;
+                for (let i = 0; i < len; i++) {
+                    // eslint-disable-next-line
+                    const mapKey = mapKeys[i].trim();
+                    const objProp = rawData[mapKey];
+                    let decorated = false;
+                    if (rawData.hasOwnProperty(mapKey)) {
+                        if (BooleanTextDecorator$1.IsBooleanTextField(this, key)) {
+                            this[key] = BooleanTextDecorator$1.GetLogicalBooleanValue(objProp);
+                            decorated = true;
+                        }
+                        if (JsonFieldFieldDecorator.IsJsonField(this, key)) {
+                            this[key] = JsonFieldFieldDecorator.StringAsJson(objProp);
+                            decorated = true;
+                        }
+                        if (ComplexArrayDecorator$1.IsComplexArray(this, key)) {
+                            const arrayClass = ComplexArrayDecorator$1.GetComplexArrayType(this, key);
+                            // eslint-disable-next-line
+                            const origArray = this[key];
+                            // eslint-disable-next-line
+                            const newArray = [];
+                            // eslint-disable-next-line @typescript-eslint/prefer-for-of
+                            for (let j = 0; j < origArray.length; j++) {
+                                // eslint-disable-next-line
+                                const item = new arrayClass(origArray[j]);
+                                newArray.push(item);
+                            }
+                            this[key] = newArray;
+                        }
+                        else {
+                            if (!decorated) {
+                                this[key] = objProp;
+                            }
+                        }
+                        break;
+                    }
+                }
+            }
+            else {
+                if (rawData.hasOwnProperty(key)) {
+                    const objProp = rawData[key];
+                    if (BooleanTextDecorator$1.IsBooleanTextField(this, key)) {
+                        this[key] = BooleanTextDecorator$1.GetLogicalBooleanValue(objProp);
+                    }
+                    else if (JsonFieldFieldDecorator.IsJsonField(this, key)) {
+                        this[key] = JsonFieldFieldDecorator.StringAsJson(objProp);
+                    }
+                    else {
+                        this[key] = objProp;
+                    }
+                }
+            }
+        });
+    }
+}
+
+// Factory service creates businessobjects, using their decorators in the process.
+class BusinessObjectFactory {
+    constructor() {
+    }
+    /**
+     * Creates and returns a new business data object instance of given class, with all given data properties applied to it in a
+     * complex-aware style. That is, all properties on given class that are decorated with @ComplexField(..) or @ComplexArray(..) decorators
+     * become strongly typed business objects, with methods that are usable and such.
+     *
+     * @param modelClass
+     * @param {Object} rawData The object with all (possibly raw/flat/not alive) data to be applied to the created model object
+     */
+    makeWithRawBackendData(modelClass, rawData) {
+        if (!modelClass) {
+            return undefined;
+        }
+        if (typeof modelClass !== typeof BusinessObject) {
+            return undefined;
+        }
+        const model = new modelClass();
+        this._copyAllPropertiesDecoratorProcessedFrom(rawData, model);
+        return model;
+    }
+    // see makeWithRawBackendData, this is a loop-wrapper around that method
+    makeBOArrayFromRawBackendDataArray(modelClass, arrayOfRawDatas) {
+        if (!modelClass) {
+            return undefined;
+        }
+        const trueClientBos = [];
+        if (arrayOfRawDatas) {
+            for (let i = 0, len = arrayOfRawDatas.length; i < len; i++) {
+                trueClientBos.push(this.makeWithRawBackendData(modelClass, arrayOfRawDatas[i]));
+            }
+        }
+        return trueClientBos;
+    }
+    instantiateNewBo(modelClass) {
+        return this.makeWithRawBackendData(modelClass, {});
+    }
+    /**
+     * Applies all properties of given 'source' object to the given 'destination' businessobject, if destination has that property.
+     * Works with the @ComplexField(), @ComplexArray, @BooleanText, @CoInject and @DateField annotations of given destination model.
+     *
+     * @param sourceData Raw data to copy to destination model
+     * @param {BusinessObject} destinationModel InOut: The annotated businessobject to apply source properties to
+     */
+    _copyAllPropertiesDecoratorProcessedFrom(sourceData, destinationModel) {
+        if (!sourceData || !destinationModel) {
+            return;
+        }
+        // process all source data into destinationModel
+        for (const srcPropKey in sourceData) {
+            if (!sourceData.hasOwnProperty(srcPropKey)) {
+                continue;
+            }
+            const srcPropVal = sourceData[srcPropKey];
+            if (ComplexFieldDecorator.IsComplexField(destinationModel, srcPropKey)) {
+                const classOfField = ComplexFieldDecorator.GetComplexFieldType(destinationModel, srcPropKey);
+                destinationModel[srcPropKey] = this.makeWithRawBackendData(classOfField, srcPropVal);
+            }
+            else if (ComplexArrayDecorator.IsComplexArray(destinationModel, srcPropKey)) {
+                const sourceArray = srcPropVal;
+                if (!sourceArray) {
+                    continue;
+                }
+                const classOfArrayItems = ComplexArrayDecorator.GetComplexArrayType(destinationModel, srcPropKey);
+                const tempArray = [];
+                for (let i = 0, len = sourceArray.length; i < len; i++) {
+                    tempArray.push(this.makeWithRawBackendData(classOfArrayItems, sourceArray[i]));
+                }
+                destinationModel[srcPropKey] = tempArray;
+            }
+            else if (BooleanTextDecorator.IsBooleanTextField(destinationModel, srcPropKey)) {
+                // logical 'true' and 'false' also allowed as incoming values for @BooleanText() properties: then just copy their value
+                if (typeof srcPropVal === "boolean") {
+                    destinationModel[srcPropKey] = srcPropVal;
+                    // here, it should be a 'J' or 'N' (or 'T' or 'F'): assign the associated boolean value
+                }
+                else {
+                    destinationModel[srcPropKey] = BooleanTextDecorator.GetLogicalBooleanValue(srcPropVal);
+                }
+            }
+            else if (DateFieldFieldDecorator.IsDateField(destinationModel, srcPropKey)) {
+                destinationModel[srcPropKey] = DateFieldFieldDecorator.StringAsDate(srcPropVal);
+            }
+            else if (StringNumberDecorator.IsStringNumber(destinationModel, srcPropKey)) {
+                destinationModel[srcPropKey] = StringNumberDecorator.StringAsNumber(srcPropVal);
+            }
+            // non-decorated prop
+            else {
+                if (isNill(srcPropVal)) {
+                    destinationModel[srcPropKey] = undefined;
+                }
+                else if (Array.isArray(srcPropVal)) {
+                    destinationModel[srcPropKey] = ArrayUtils.CloneArray(srcPropVal);
+                }
+                else if (typeof srcPropVal === "object") {
+                    if (srcPropVal instanceof Map) { //just copy the value in case of maps
+                        destinationModel[srcPropKey] = srcPropVal;
+                    }
+                    else {
+                        destinationModel[srcPropKey] = Object.assign({}, srcPropVal);
+                    }
+                }
+                else {
+                    destinationModel[srcPropKey] = srcPropVal;
+                }
+            }
+        }
+    }
+}
+
+var LanguageCode;
+(function (LanguageCode) {
+    LanguageCode["Dutch"] = "nl-NL";
+    LanguageCode["English"] = "en-GB";
+    LanguageCode["German"] = "de-DE";
+    LanguageCode["French"] = "fr-FR";
+})(LanguageCode || (LanguageCode = {}));
+
+// Static utility functions holder related to strings.
+class StringUtils {
+    /**
+     * Returns a new string where given placeholder in given source string are replaced by given replacement texts.
+     *
+     * Example usage:
+     *
+     * source = "ABCDABCD"
+     * placeholder = "BC"
+     * replacementTexts = "Z", "Z" (REST arguments)
+     * OUTPUT = "AZDAZD"
+     *
+     * @param {string} source
+     * @param {string} placeholder
+     * @param {string} replacementTexts If only one is given, this function replaces all placeholders with that single replacementText.
+     * If more are given, placeholders without a corresponding replacementText will remain their original placeholder characters.
+     */
+    static ReplaceOccurrencesIn(source, placeholder, ...replacementTexts) {
+        // parameter guards
+        if (!(source)) {
+            return undefined;
+        }
+        if (!placeholder || replacementTexts.length === 0) {
+            return source;
+        }
+        let outString = source;
+        // one replacementText means replace for all
+        if (replacementTexts.length === 1) {
+            // "g" is the g flag to replace globally
+            outString = outString.replace(placeholder, replacementTexts[0]);
+        }
+        else {
+            // replace occurence i by replacementTexts[i], one at a time in loop (there might be a faster way..)
+            for (let i = 0, len = replacementTexts.length; i < len; i++) {
+                outString = outString.replace(placeholder, replacementTexts[i]);
+            }
+        }
+        return outString;
+    }
+    // Returns the given argument as a string. Returns given defaultValue if conversion of argument to string was impossible.
+    static ParseString(arg, defaultValue = "") {
+        if (!StringUtils.IsString(arg)) {
+            if (arg && typeof arg.toString === "function") {
+                arg = arg.toString();
+            }
+            else {
+                arg = defaultValue;
+            }
+        }
+        return arg;
+    }
+    static IsString(str) {
+        return typeof str === 'string';
+    }
+    // Returns whether given str is a string and has a length > 0.
+    static IsStringWithLength(str) {
+        return str && StringUtils.IsString(str) && str.length > 0;
+    }
+    // Returns given string, escaped for use as string literal in regular expressions.
+    static _escapeRegExp(str) {
+        return str; // .replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^$\|]/g, "\\$&");
+    }
+}
+
+class Dictionary {
+    constructor() {
+        this.strings = {
+            "nl": {},
+            "de": {},
+            "fr": {},
+            "en": {},
+        };
+    }
+}
+
+// The localization service, providing peers with text translation functionality.
+class DictionaryService {
+    constructor() {
+        this.dictionaryUrl = "js/browser/res/dictionary/";
+        // private _dictionaryPromise: Map<LanguageCode, Promise<{ [key: string]: string }>> = new Map<LanguageCode, Promise<{ [key: string]: string }>>();
+        this._dictionaries = new Map();
+        // Some dictionary values have one or more '|~' texts in them, meant to be replaced with client-side given texts.
+        this._placeholder = "|~";
+    }
+    get language() {
+        return this._language;
+    }
+    set rootUrl(value) {
+        this._rootUrl = value;
+        this._dictBasePath = this._rootUrl + "/" + this.dictionaryUrl;
+    }
+    // Loads the dictionary for given language in memory.
+    setDictionary(language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._language = language || LanguageCode.Dutch;
+            this._loadDictionary();
+        });
+    }
+    _loadDictionary() {
+        if (!this._dictionaries.has(this._language)) {
+            const dictionary = new Dictionary();
+            // eslint-disable-next-line no-magic-numbers
+            if (dictionary.strings[this._language.substr(0, 2).toLowerCase()] !== undefined) {
+                // eslint-disable-next-line no-magic-numbers
+                this._dictionaries.set(this._language, dictionary.strings[this._language.substr(0, 2).toLowerCase()]);
+            }
+        }
+    }
+    /**
+     * Returns the localized text for the given dictionary key.
+     * @param {string} key
+     * @param {boolean} [upperCaseFirst = true] False for first letter lowercase, true for first letter uppercase for returned dict val
+     * @param {string[]} replacementTexts Rest params for replacement of '|~' in returned dict value
+     * @returns {string} The translated text for given dictionary key
+     */
+    get(key, upperCaseFirst = true, ...replacementTexts) {
+        if (!StringUtils.IsStringWithLength(key)) {
+            return key || "";
+        }
+        if (this.language === undefined) {
+            this._language = LanguageCode.Dutch;
+            this._loadDictionary();
+        }
+        let text = this._dictionaries.get(this.language)[key];
+        text = StringUtils.IsStringWithLength(text) ? text : key;
+        if (upperCaseFirst) {
+            text = text.charAt(0).toUpperCase() + text.slice(1);
+        }
+        else {
+            text = text.charAt(0).toLowerCase() + text.slice(1);
+        }
+        if (replacementTexts.length > 0) {
+            text = StringUtils.ReplaceOccurrencesIn(text, this._placeholder, ...replacementTexts);
+        }
+        return text;
+    }
+}
+DictionaryService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DictionaryService_Factory() { return new DictionaryService(); }, token: DictionaryService, providedIn: "root" });
+DictionaryService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+DictionaryService.ctorParameters = () => [];
+
+class OptionsService {
+    constructor(_dictionary) {
+        this._dictionary = _dictionary;
+        this.optionsInitialized = new BehaviorSubject(false);
+        this.optionsLoaded = new BehaviorSubject(false);
+    }
+    set options(value) {
+        this._options = value;
+    }
+    get options() {
+        return this._options;
+    }
+    createSettingsFromObject(obj) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.options = new Object();
+            if (obj.hasOwnProperty("url")) {
+                this.options.url = obj["url"];
+            }
+            if (obj.hasOwnProperty("schema")) {
+                this.options.schema = obj["schema"];
+            }
+            if (obj.hasOwnProperty("version")) {
+                this.options.version = obj["version"];
+            }
+            if (obj.hasOwnProperty("languageCode")) {
+                this.options.languageCode = obj["languageCode"];
+            }
+            else {
+                this.options.languageCode = "NL";
+            }
+            if (obj.hasOwnProperty("username")) {
+                this.options.username = obj["username"];
+            }
+            if (obj.hasOwnProperty("password")) {
+                this.options.password = obj["password"];
+            }
+            if (obj.hasOwnProperty("session")) {
+                this.options.session = obj["session"];
+            }
+            if (obj.hasOwnProperty("useLoginEncryption")) {
+                this.options.useLoginEncryption = obj["useLoginEncryption"];
+            }
+            this.optionsLoaded.next(true);
+        });
+    }
+    initialize(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (options) {
+                yield this.createSettingsFromObject(options);
+                yield this._dictionary.setDictionary(this.options.languageCode);
+                this.optionsInitialized.next(true);
+            }
+        });
+    }
+}
+OptionsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function OptionsService_Factory() { return new OptionsService(i0.ɵɵinject(DictionaryService)); }, token: OptionsService, providedIn: "root" });
+OptionsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+OptionsService.ctorParameters = () => [
+    { type: DictionaryService }
+];
+
+class SharedConnectorService {
+    constructor(_optionsService) {
+        this._optionsService = _optionsService;
+        this._boFactory = new BusinessObjectFactory();
+    }
+    connect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.articleConnector = new Articles(this._optionsService.options);
+            this.sharedConnector = new Sharedapi(this._optionsService.options);
+        });
+    }
+    getAllPrinters(showAll = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.sharedConnector.listAllPrinters(showAll).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(Printer, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getPrintStockStickers(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.sharedConnector.getPrintStockStickers(request).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeWithRawBackendData(PrintStockStickers, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getPrintPriceStickers(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.sharedConnector.printPriceStickers(request).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeWithRawBackendData(PrintPriceStickers, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    // public async getStockStickerPrintLayouts(stockStickersPrintLayouts: StockStickersPrintLayouts): Promise<StockStickersPrintLayouts[]> {
+    //   return new Promise((resolve: Function, reject: Function) => {
+    //     return this.sharedConnector.getStockStickerPrintLayouts(stockStickersPrintLayouts).then((result: DataServiceResponse) => {
+    //       if (result.validationResult && result.validationResult.success) {
+    //         if (result.resultObject) {
+    //           resolve(this._boFactory.makeWithRawBackendData(stockStickersPrintLayouts, result.resultObject));
+    //         }
+    //       } else {
+    //         reject(result.validationMessagesAsString);
+    //       }
+    //     })
+    //   })
+    // }
+    getArticleFullObject(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getArticleFullObject(goodId).then((result) => {
+                    // if (result.validationResult && result.validationResult.success) {
+                    //   if (result.resultObject) {
+                    //     resolve(this._boFactory.makeWithRawBackendData(ArticleExtended, result.resultObject));
+                    //   }
+                    // } else {
+                    //   reject(result.validationMessagesAsString);
+                    // }
+                });
+            });
+        });
+    }
+    getStockHistory(request) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getStockHistory(request).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject && result.resultObject.hasOwnProperty("stockHistory")) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockHistoryBo, result.resultObject.stockHistory));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getStockInformation(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getStockInformation(data).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleStock, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getStockManagementWarehouses() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getStockManagementWarehouses().then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockManagementWarehouses, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getStockManagementLocations(warehouseNo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getStockManagementLocations(warehouseNo).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockLocation, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getArticleDetails(data).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleDetailsBo, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    updateArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.updateArticleDetails(data).then((result) => __awaiter(this, void 0, void 0, function* () {
+                    if (result.validationResult && result.validationResult.success) {
+                        yield this.commit();
+                        resolve(true);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                }));
+            });
+        });
+    }
+    lockArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.lockArticleDetails(data).then((result) => __awaiter(this, void 0, void 0, function* () {
+                    if (result.validationResult && result.validationResult.success) {
+                        yield this.commit();
+                        resolve(true);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                }));
+            });
+        });
+    }
+    getStockStatus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getStockState().then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockStatus, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getStockStickerTemplates(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.sharedConnector.getStockStickerPrintLayouts(data).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockStickersPrintLayouts, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getArticleTransaction(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getArticleTransaction(data).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleTransaction, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    commit() {
+        return this.articleConnector.commit();
+    }
+}
+SharedConnectorService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedConnectorService_Factory() { return new SharedConnectorService(i0.ɵɵinject(OptionsService)); }, token: SharedConnectorService, providedIn: "root" });
+SharedConnectorService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+SharedConnectorService.ctorParameters = () => [
+    { type: OptionsService }
+];
+
+class StockService {
+    constructor(_sharedService) {
+        this._sharedService = _sharedService;
+        this.printSticker = new PrintStockStickers();
+        this.printPriceSticker = new PrintPriceStickers();
+    }
+    getPrintStockStickers(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._sharedService.getPrintStockStickers(data);
+        });
+    }
+    getPrintPriceStickers(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._sharedService.getPrintPriceStickers(data);
+        });
+    }
+    getAllPrinters(showAll = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getAllPrinters(showAll);
+        });
+    }
+    getStockHistory(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getStockHistory(data);
+        });
+    }
+    getStockInformation(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getStockInformation(data);
+        });
+    }
+    // public async getStockStickerPrintLayouts(data: StockStickersPrintLayouts): Promise<StockStickersPrintLayouts[]> {
+    //   return await this._connector.getStockStickerPrintLayouts(data);
+    // }
+    getArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getArticleDetails(data);
+        });
+    }
+    updateArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.updateArticleDetails(data);
+        });
+    }
+    getStockState() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getStockStatus();
+        });
+    }
+    getStockStickerTemplates(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getStockStickerTemplates(data);
+        });
+    }
+    getStockManagementWarehouses() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getStockManagementWarehouses();
+        });
+    }
+    getStockManagementLocations(warehouseNo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getStockManagementLocations(warehouseNo);
+        });
+    }
+    getArticleTransaction(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getArticleTransaction(data);
+        });
+    }
+    lockArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.lockArticleDetails(data);
+        });
+    }
+    commit() {
+        return this._sharedService.commit();
+    }
+}
+StockService.ɵprov = i0.ɵɵdefineInjectable({ factory: function StockService_Factory() { return new StockService(i0.ɵɵinject(SharedConnectorService)); }, token: StockService, providedIn: "root" });
+StockService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+StockService.ctorParameters = () => [
+    { type: SharedConnectorService }
+];
+
+class StockComponent {
+    constructor(stockService, _optionsService, _dictionary, _changeDetector) {
+        this.stockService = stockService;
+        this._optionsService = _optionsService;
+        this._dictionary = _dictionary;
+        this._changeDetector = _changeDetector;
+        this.handleStickerClicked = new EventEmitter();
+        this.showStockInformationGrid = true;
+        this.showStockLocation = false;
+        this.showStockTransfer = false;
+        this.allAvailableStock = 0;
+        this.allTechnicalStock = 0;
+        this._subscriptions = [];
+        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)));
+    }
+    set article(article) {
+        this.articleExtended = article;
+        this.getStockInformation(article);
+    }
+    ;
+    showClass() {
+        return true;
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+    backToStockLinesClicked() {
+        this.showStockLocation = false;
+        this.showStockInformationGrid = true;
+    }
+    handleStockTransferClick(event) {
+        this.stockTransferArticleDetails = event;
+        this.showStockTransfer = !this.showStockTransfer;
+        this.showStockInformationGrid = !this.showStockInformationGrid;
+        this.stockService.stockStickers = new PrintStockStickers();
+    }
+    backToStock() {
+        this.showStockTransfer = !this.showStockTransfer;
+        this.showStockInformationGrid = !this.showStockInformationGrid;
+    }
+    getStockHistory() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const stockHistoryInformation = new GetStockHistoryRequest();
+            stockHistoryInformation.type = "B";
+            stockHistoryInformation.goodId = this.articleExtended.goodId.toString();
+            this.stockHistory = yield this.stockService.getStockHistory(stockHistoryInformation);
+        });
+    }
+    getStockInformation(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const articleData = new ArticleStock$1();
+            articleData.goodId = data.goodId.toString();
+            articleData.viewKind = "M";
+            this.stockInformation = yield this.stockService.getStockInformation(articleData);
+            this.stockInformation.forEach((articleStock) => this.allAvailableStock += articleStock.availableStock);
+            this.stockInformation.forEach((articleStock) => this.allTechnicalStock += articleStock.technicalStock);
+        });
+    }
+    _handleSettingsLoaded(loaded) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (loaded) {
+                yield this._initConnection().then();
+            }
+        });
+    }
+    _initConnection() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // await this._connector.connect(this._optionsService.options);
+            if (this._optionsService.options.url) {
+                this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
+            }
+            yield this._dictionary.setDictionary(this._optionsService.options.languageCode);
+            setTimeout(() => {
+                this._changeDetector.detectChanges();
+            });
+        });
+    }
+}
+StockComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock",
+                template: `
+      <div class="stock-info-container">
+        <co-stock-information [article]="articleExtended"
+                              [articleStock]=""
+                              [allAvailableStockInformation]="allAvailableStock"
+                              [allTechnicalStockInformation]="allTechnicalStock"
+        >
+        </co-stock-information>
+        <hr>
+        <co-stock-information-grid *ngIf="showStockInformationGrid"
+                                   [stockLocationData]="stockLocationInformation"
+                                   [articleStockInformation]="stockInformation"
+                                   (transferIconClicked)="handleStockTransferClick($event)"
+                                   (historyClicked)="getStockHistory()"
+                                   [stockHistoryInformation]="stockHistory"
+        >
+        </co-stock-information-grid>
+        <co-stock-location *ngIf="showStockLocation"
+                           (backToStockLines)="backToStockLinesClicked()">
+
+        </co-stock-location>
+        <co-stock-transfer *ngIf="showStockTransfer"
+                           (handleCancelClicked)="backToStock()"
+                            [article]="stockTransferArticle"
+                           [articleToTransfer]="stockTransferArticleDetails"
+                           [stockSticker]="stockService.stockStickers"
+                           (handleStickerClicked)="handleStickerClicked.emit($event)"
+                           [articleWarehouse]="articleWarehouse"
+                           [allWarehouses]="allWarehouses"
+        >
+        </co-stock-transfer>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockComponent.ctorParameters = () => [
+    { type: StockService },
+    { type: OptionsService },
+    { type: DictionaryService },
+    { type: ChangeDetectorRef }
+];
+StockComponent.propDecorators = {
+    stock: [{ type: ViewChild, args: [StockComponent,] }],
+    handleStickerClicked: [{ type: Output }],
+    article: [{ type: Input }],
+    articleWarehouse: [{ type: Input }],
+    allWarehouses: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-stock",] }]
+};
+
+class StockInformationComponent {
+    constructor() {
+    }
+}
+StockInformationComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock-information",
+                template: `
+      <div class="stock-info" *ngIf="article">
+        <div class="stock-info-row" >
+          <div class="stock-info-row-image">
+            <div class="stock-image">
+              <co-image class="stock-image" [source]="article.imageData"></co-image>
+            </div>
+          </div>
+          <div class="stock-good-info">
+            <div>
+              <span [textContent]="article.description"></span>
+            </div>
+            <div>
+              <span [textContent]="article.articleNumber"></span>
+            </div>
+          </div>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'STOCK_STATUS'"></label>
+          <span [textContent]="article.stockStatus"></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'AMOUNT_IN_STOCK'"></label>
+          <span [textContent]="allTechnicalStockInformation"></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'AMOUNT_AVAILABLE'"></label>
+          <span [textContent]="allAvailableStockInformation"></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'AMOUNT_LATER_AVAILABLE'"></label>
+          <span [textContent]=""></span>
+        </div>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockInformationComponent.ctorParameters = () => [];
+StockInformationComponent.propDecorators = {
+    article: [{ type: Input }],
+    articleStock: [{ type: Input }],
+    allAvailableStockInformation: [{ type: Input }],
+    allTechnicalStockInformation: [{ type: Input }]
+};
+
+/** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
+const IconSvg = {
+    "angle_left_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\"><path fill=\"#183153\" d=\"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z\"/></svg>",
+    "angle_right_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\"><path fill=\"#183153\" d=\"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z\"/></svg>",
+    "arrow_fat_right": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"37.5 25 25.2 12.7 25.2 20.35 12.5 20.35 12.5 29.66 25.2 29.66 25.2 37.3 37.5 25\" fill=\"#484f60\"/></svg>",
+    "arrow_point_left": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\" ><path fill=\"#484F5F\" d=\"M31.9,36.7l-14.7-9.6C17.1,27,17,26.9,17,26.7v-2.4c0-0.2,0.1-0.3,0.2-0.4l14.7-9.6c0.2-0.2,0.5-0.1,0.7,0.1l1.4,2.1c0.2,0.2,0.1,0.5-0.1,0.7l-12,7.8c-0.3,0.2-0.3,0.6,0,0.8l12,7.8c0.2,0.2,0.3,0.5,0.1,0.7l-1.4,2.1C32.4,36.8,32.1,36.8,31.9,36.7z\"/></svg>",
+    "arrow_point_right": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51 51\" enable-background=\"new 0 0 51 51\"><path fill=\"#484F5F\" d=\"M19.1,14.3l14.7,9.6c0.1,0.1,0.2,0.2,0.2,0.4v2.4c0,0.2-0.1,0.3-0.2,0.4l-14.7,9.6c-0.2,0.2-0.5,0.1-0.7-0.1l-1.4-2.1c-0.2-0.2-0.1-0.5,0.1-0.7l12-7.8c0.3-0.2,0.3-0.6,0-0.8l-12-7.8c-0.2-0.2-0.3-0.5-0.1-0.7l1.4-2.1C18.6,14.2,18.9,14.2,19.1,14.3z\"/></svg>",
+    "bring_forward_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"#183153\" d=\"M224 464H448C456.8 464 464 456.8 464 448V224C464 215.2 456.8 208 448 208H384V160H448C483.3 160 512 188.7 512 224V448C512 483.3 483.3 512 448 512H224C188.7 512 160 483.3 160 448V384H208V448C208 456.8 215.2 464 224 464zM64 352C28.65 352 0 323.3 0 288V64C0 28.65 28.65 0 64 0H288C323.3 0 352 28.65 352 64V288C352 323.3 323.3 352 288 352H64z\"/></svg>",
+    "check_round": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M25,10A15,15,0,1,0,40,25,15,15,0,0,0,25,10ZM23,34l-6.24-9.09,2.81-3.59L23,26.45,27.66,16h5.58Z\" fill=\"#484f60\"/></svg>",
+    "delete_left_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M432.1 208.1L385.9 256L432.1 303C442.3 312.4 442.3 327.6 432.1 336.1C423.6 346.3 408.4 346.3 399 336.1L352 289.9L304.1 336.1C295.6 346.3 280.4 346.3 271 336.1C261.7 327.6 261.7 312.4 271 303L318.1 256L271 208.1C261.7 199.6 261.7 184.4 271 175C280.4 165.7 295.6 165.7 304.1 175L352 222.1L399 175C408.4 165.7 423.6 165.7 432.1 175C442.3 184.4 442.3 199.6 432.1 208.1V208.1zM512 64C547.3 64 576 92.65 576 128V384C576 419.3 547.3 448 512 448H205.3C188.3 448 172 441.3 160 429.3L9.372 278.6C3.371 272.6 0 264.5 0 256C0 247.5 3.372 239.4 9.372 233.4L160 82.75C172 70.74 188.3 64 205.3 64L512 64zM528 128C528 119.2 520.8 112 512 112H205.3C201 112 196.9 113.7 193.9 116.7L54.63 256L193.9 395.3C196.9 398.3 201 400 205.3 400H512C520.8 400 528 392.8 528 384V128z\"/></svg>",
+    "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
+    "email": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.79,38.45A17.82,17.82,0,0,1,23.86,40,13.09,13.09,0,0,1,10.41,26.42C10.41,17.63,16.83,10,26.53,10c7.63,0,13.06,5.21,13.06,12.46,0,6.33-3.53,10.3-8.19,10.3a3.42,3.42,0,0,1-3.71-3.32h-.08A6.5,6.5,0,0,1,22,32.76c-2.75,0-4.82-2.11-4.82-5.65a9.85,9.85,0,0,1,10.13-10,12.89,12.89,0,0,1,5.13,1l-1.3,8c-.43,2.54-.13,3.71,1.08,3.75,1.85.09,4.18-2.28,4.18-7.28,0-5.65-3.62-10-10.3-10S13.73,17.76,13.73,26c0,7.25,4.57,11.3,11,11.3A14.81,14.81,0,0,0,31,36ZM28,20.65a5.34,5.34,0,0,0-1.33-.18c-2.85,0-5.09,2.81-5.09,6.12,0,1.64.73,2.68,2.16,2.68,1.59,0,3.27-2,3.66-4.53Z\" fill=\"#484f60\"/></svg>",
+    "pdf": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.88c-2.16,0-2.72-.56-2.72-2.72V12.88c0-2.15.56-2.71,2.72-2.71h11.6l8.66,8.88v3.43H32.8V19.6l-7.88-8.09h-11c-1.38,0-1.38,0-1.38,1.37V37.45c0,1.37,0,1.37,1.38,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M27.83,26.63v4.24h1a3.57,3.57,0,0,0,.78-.06,1.22,1.22,0,0,0,.52-.26,1.44,1.44,0,0,0,.34-.62,4.13,4.13,0,0,0,.13-1.18,3.79,3.79,0,0,0-.13-1.14,1.51,1.51,0,0,0-.37-.62,1.14,1.14,0,0,0-.6-.3,5.93,5.93,0,0,0-1.06-.06Z\" fill=\"#484f60\"/><path d=\"M21.86,26.63v1.82h.71a3.57,3.57,0,0,0,1-.1A.88.88,0,0,0,24,28a.84.84,0,0,0,.14-.5.8.8,0,0,0-.2-.57.88.88,0,0,0-.52-.29,6.36,6.36,0,0,0-.93,0Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm6.12,4.24a1.68,1.68,0,0,1-.54.63,1.9,1.9,0,0,1-.67.3,6.57,6.57,0,0,1-1.34.1h-.85V32H20.57V25.54h2.07a7.75,7.75,0,0,1,1.54.1,1.73,1.73,0,0,1,.93.63,2,2,0,0,1,.37,1.25A2,2,0,0,1,25.26,28.51Zm6.45,1.66A2.91,2.91,0,0,1,31,31.31a2.28,2.28,0,0,1-.91.51A4,4,0,0,1,29,32H26.54V25.54H28.9a4.21,4.21,0,0,1,1.22.13,2.08,2.08,0,0,1,1,.59,2.79,2.79,0,0,1,.61,1,4.76,4.76,0,0,1,.21,1.52A4.19,4.19,0,0,1,31.71,30.17Zm5.7-3.54h-3.1v1.52H37v1.08H34.31V32H33V25.54h4.39Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/></svg>",
+    "print": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M38,16.5H12a2,2,0,0,0-2,2v9a2,2,0,0,0,2,2h2v-5H36v5h2a2,2,0,0,0,2-2v-9A2,2,0,0,0,38,16.5ZM37,21a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,37,21Z\" fill=\"#484f60\"/><path d=\"M35,11.5v5H15v-5H35m1-1H14v7H36v-7Z\" fill=\"#484f60\"/><path d=\"M35,25.5v13H15v-13H35m1-1H14v15H36v-15Z\" fill=\"#484f60\"/><rect x=\"17\" y=\"28.3\" width=\"16\" height=\"0.8\" fill=\"#484f60\"/><rect x=\"17\" y=\"31.5\" width=\"16\" height=\"0.8\" fill=\"#484f60\"/><rect x=\"17\" y=\"34.7\" width=\"16\" height=\"0.8\" fill=\"#484f60\"/></svg>",
+    "signature_field": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M20.1,25.42a1.1,1.1,0,1,1,1.27,1.45l-3.3,9.07A63.13,63.13,0,0,1,28,28.3l1.26-12-8.26-3-6.77,10A62.4,62.4,0,0,1,17,35.54l3.3-9.07A1.12,1.12,0,0,1,20.1,25.42Z\" fill=\"#484f60\"/><rect x=\"21.62\" y=\"11.43\" width=\"8.79\" height=\"2.34\" transform=\"translate(5.88 -8.14) rotate(20)\" fill=\"#484f60\"/><path d=\"M18.11,37.48c1.44,2.65,4.58,2.94,7.23,2.1,1.41-.44,2.2-1.49,3.44-2.06,2.42-1.1,3.13,1.2,5.36,1.37.42,0,2-.65,1.54-.68-2.55-.19-2.93-3.13-5.51-2.65a4.9,4.9,0,0,0-1.64.71c-.77.49-1.31,1.62-2.07,2l-4.61.56A3.38,3.38,0,0,1,20,37c-.22-.41-2,.28-1.85.5Z\" fill=\"#484f60\"/></svg>",
+    "xml": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.87c-2.15,0-2.71-.56-2.71-2.72V12.88c0-2.15.56-2.71,2.71-2.71H25.48l8.66,8.88v3.43H32.8V19.6l-7.88-8.09H13.87c-1.37,0-1.37,0-1.37,1.37V37.45c0,1.37,0,1.37,1.37,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm5.36,7.41-1.3-2-1.3,2H20.48l2-3.06-1.81-2.8h1.38l1.18,1.88,1.15-1.88h1.37l-1.83,2.85,2,3Zm7.67,0h-1.1V27.07l-1.16,4.61H28.77l-1.16-4.61v4.61H26.52V25.82h1.76l1.07,4,1-4h1.77Zm5.33,0H33.38V25.87h1.18v4.82H37.5Z\" fill=\"#484f60\"/></svg>"
+};
+
+class IconCacheService {
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
+        this._iconCache = {};
+        this.setIconCache();
+    }
+    /**
+     * All the icons as a large JSON object, from the all-icons.json file.
+     * The object has property keys that are the icon names, and property values with the data string of the actual svg icon.
+     */
+    get iconCache() {
+        return this._iconCache;
+    }
+    getIcon(iconName) {
+        if (iconName) {
+            return this._iconCache[iconName.toLowerCase()];
+        }
+    }
+    getIconAsBase64(iconName) {
+        const icon = IconSvg[iconName];
+        const base64Data = window.btoa(icon);
+        return this._sanitizer.bypassSecurityTrustUrl(`data:image/svg+xml;base64,${base64Data}`);
+    }
+    getRawIcon(iconName) {
+        if (iconName) {
+            return IconSvg[iconName.toLowerCase()];
+        }
+    }
+    setIconCache() {
+        for (const key in IconSvg) {
+            if (IconSvg.hasOwnProperty(key) && typeof IconSvg[key] !== "function") {
+                this._iconCache[key.toLowerCase()] = this._sanitizer.bypassSecurityTrustHtml(IconSvg[key]);
+            }
+        }
+    }
+}
+IconCacheService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IconCacheService_Factory() { return new IconCacheService(i0.ɵɵinject(i1.DomSanitizer)); }, token: IconCacheService, providedIn: "root" });
+IconCacheService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+IconCacheService.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+/** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
+var Icon;
+(function (Icon) {
+    Icon["AngleLeftSolid"] = "angle_left_solid";
+    Icon["AngleRightSolid"] = "angle_right_solid";
+    Icon["ArrowFatRight"] = "arrow_fat_right";
+    Icon["ArrowPointLeft"] = "arrow_point_left";
+    Icon["ArrowPointRight"] = "arrow_point_right";
+    Icon["BringForwardRegular"] = "bring_forward_regular";
+    Icon["CheckRound"] = "check_round";
+    Icon["DeleteLeftRegular"] = "delete_left_regular";
+    Icon["DeliveryTruck"] = "delivery_truck";
+    Icon["Email"] = "email";
+    Icon["Pdf"] = "pdf";
+    Icon["Print"] = "print";
+    Icon["SignatureField"] = "signature_field";
+    Icon["Xml"] = "xml";
+})(Icon || (Icon = {}));
+
+class StockInformationGridComponent {
+    constructor(iconCacheService, _stockService) {
+        this.iconCacheService = iconCacheService;
+        this._stockService = _stockService;
+        this.icons = Icon;
+        this.transferIconClicked = new EventEmitter();
+        this.historyClicked = new EventEmitter();
+        this.show = false;
+        this.hideOrShowLocationTab = false;
+        this.showStockHistory = false;
+        this.showSendMethodDialog = false;
+        this.hideOrShowTabs = true;
+        this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNo" };
+        this.articleStockSearchInfo = new ArticleStock$1();
+        this.showChangeStockDetails = false;
+        this.articleDetailsInformation = new ArticleStockManagement();
+        this.tabs = [
+            "STOCK",
+            "IN_ORDER2",
+            "ORDERS1"
+        ];
+        this.activeTab = this.tabs[0];
+    }
+    get activeTabText() {
+        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";
+        }
+    }
+    handleTabClick(tabData) {
+        this.activeTab = tabData;
+        if (this.activeTab === "IN_ORDER2") {
+            this.getInOrderData();
+        }
+        if (this.activeTab === "ORDERS1") {
+            this.getOrderData();
+        }
+    }
+    onLocationClick(data) {
+        this.articleStockSearchInfo.goodId = data.goodId.toString();
+        this.articleStockSearchInfo.wareHouseNo = data.warehouseNo.toString();
+        this.articleStockSearchInfo.viewKind = "D";
+        this.selectedWarehouse = data.warehouseNo;
+        if (!this.dataWareHouseCode) {
+            this.getStockManagementWarehouses(data);
+        }
+        this.getArticleDetails(data);
+        this.hideOrShowTabs = false;
+        this.hideOrShowLocationTab = true;
+        this._stockService.lockArticleDetails(this.articleDetailsInformation);
+    }
+    handleHistoryClick() {
+        this.historyClicked.emit();
+        this.hideOrShowLocationTab = false;
+        this.showChangeStockDetails = false;
+        this.hideOrShowTabs = false;
+        this.showStockHistory = true;
+    }
+    backToStockInformation() {
+        this.showStockHistory = false;
+        this.hideOrShowTabs = true;
+    }
+    handleStockTransferClick(event) {
+        this.transferIconClicked.emit(event);
+    }
+    handleBackToStockClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.activeTab = this.tabs[0];
+            this.hideOrShowTabs = true;
+            this.hideOrShowLocationTab = false;
+            this.articleDetails = undefined;
+        });
+    }
+    openSendMethodDialog(data) {
+        this._stockService.printSticker.goodId = data.goodId;
+        this._stockService.printSticker.warehouse = data.warehouseNo;
+        this.showSendMethodDialog = !this.showSendMethodDialog;
+    }
+    printStockStickers() {
+        this._stockService.getPrintStockStickers(this._stockService.printSticker);
+    }
+    onOkClick() {
+    }
+    onCancelClick() {
+    }
+    openDialogClick(data) {
+        this.selectedArticleDetailsData = data;
+        this.showChangeStockDetails = true;
+    }
+    getArticleDetails(data) {
+        // const info = new ArticleStockManagement();
+        this.articleDetailsInformation.goodId = data.goodId;
+        this.articleDetailsInformation.lineId = data.lineId;
+        this.articleDetailsInformation.warehouseNumber = data.warehouseNo;
+        this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+            this.articleDetails = details;
+        });
+    }
+    getStockManagementWarehouses(data) {
+        this._stockService.getStockManagementWarehouses().then((warehouses) => {
+            this.dataWareHouseCode = warehouses;
+            this.selectedWarehouse = data.warehouseNo;
+        });
+    }
+    onSelectWarehouse(event) {
+        this.articleDetailsInformation.warehouseNumber = event;
+        if (this.selectedWarehouse || this.selectedWarehouse === 0) {
+            this._stockService.getArticleDetails(this.articleDetailsInformation).then((details) => {
+                this.articleDetails = details;
+            });
+        }
+    }
+    getInOrderData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const inOrderData = new ArticleTransaction$1();
+            inOrderData.type = "V";
+            inOrderData.goodId = this.articleStockInformation[0].goodId.toString();
+            this.inOrderInformation = yield this._stockService.getArticleTransaction(inOrderData);
+        });
+    }
+    getOrderData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const orderData = new ArticleTransaction$1();
+            orderData.type = "V";
+            orderData.goodId = this.articleStockInformation[0].goodId.toString();
+            this.orderInformation = yield this._stockService.getArticleTransaction(orderData);
+        });
+    }
+    addNewRow() {
+    }
+}
+StockInformationGridComponent.decorators = [
+    { type: Component, args: [{
+                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]="articleStockInformation"
+                      class="simple-grid"
+                      [showAdd]="true"
+                      [showToolbar]="true"
+                      (addRow)="addNewRow()"
+                      [inlineEdit]="true"
+                      [rowsPerPage]="20"
+      >
+          <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNo'" [order]="10"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseName'" [order]="11"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK'" [field]="'technicalStock'" [order]="12"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'availableStock'" [order]="13"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK'" [field]="'economicalStock'" [order]="14"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION'" [field]="'locationNo'" [order]="15">
+            <ng-template #template let-row="row">
+              <span [textContent]="'Bekijken'" (click)="onLocationClick(row)"></span>
+            </ng-template>
+          </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[1]"
+                      [data]="inOrderInformation"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <co-simple-grid-column [headerText]="'IN_ORDER2'" [field]="'transactionNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'CUSTOMER'" [field]="'user'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'transactionDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'amountInOrder'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'wareHouseNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'locationNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template #template let-row="row">
+            <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.DeliveryTruck)" (click)="handleStockTransferClick($event)"></co-icon>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template #template let-row="row">
+            <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.Print)" (click)="openSendMethodDialog(row)"></co-icon>
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[2]"
+                      [data]="orderInformation"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR'" [field]="'transactionNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'transactionDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'amountInOrder'"></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-drop-down-list  [(model)]="selectedWarehouse"
+                              [collection]="dataWareHouseCode"
+                              [fields]="dataWareHouseFields"
+                              [placeholder]="'WAREHOUSE'"
+                              (modelChange)="onSelectWarehouse($event)"
+                              [required]="true"
+          ></co-drop-down-list>
+        </div>
+      </div>
+
+<!--      TODO move to own component stock-location-->
+      <co-simple-grid [data]="articleDetails"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <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]="'warehouseDescription'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH'" [field]="'batchNo'"></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'">
+          <ng-template #template let-row="row">
+            <co-input-number-picker (keyup.enter)="openDialogClick(row)" [(model)]="row['amountInStock']">
+
+            </co-input-number-picker>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'amountInStockFree'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'perceptibleStorage'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'PHYSICAL_STOCK'" [field]="'amountInStockOriginal'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'VALUTA'" [field]="'currency'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'PURCHASE_PRICE'" [field]="'purchasePrice'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SUPPLIER_NUMBER'" [field]="'supplierNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template #template let-row="row">
+            <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.DeliveryTruck)" (click)="handleStockTransferClick(row)"></co-icon>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template #template let-row="row">
+            <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.Print)" (click)="openSendMethodDialog(row)"></co-icon>
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <co-stock-change-amount *ngIf="showChangeStockDetails"
+                            (closeStockChangeAmount)="showChangeStockDetails = false"
+                            [selectedArticleDetailsData]="selectedArticleDetailsData"
+    >
+    </co-stock-change-amount>
+
+    <div class="stock-grid" *ngIf="showStockHistory">
+      <div class="stock-button-left-group">
+        <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="backToStockInformation()"></span>
+      </div>
+      <co-simple-grid [data]="stockHistoryInformation"
+                      class="simple-grid"
+                      [rowsPerPage]="20"
+      >
+        <co-simple-grid-column [headerText]="'MUTATION_DATE'" [field]="'mutationDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'MUTATION_TIME'" [field]="'mutationTime'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'amount'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'wareHouseNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'LOCATION'" [field]="'locationNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSACTION_TYPE'" [field]="'transType'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DOCUMENT_NUMBER'" [field]="'docNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'LINE'" [field]="'posLineNr'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK_STATE'" [field]="'stockStateId'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK_REMARK'" [field]="'stockStateRemarkId'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'VALUTA'" [field]="'currencyCode'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RELATION_ID'" [field]="'relationId'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'USER'" [field]="'user'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'MUTATION_TYPE'" [field]="'mutationType'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template #template let-row="row">
+            <co-icon class="menu-icon" [iconData]="iconCacheService.getIcon(icons.Print)" (click)="openSendMethodDialog(row)"></co-icon>
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-button-toolbar">
+      <div class="stock-button-left-group">
+        <co-button *ngIf="activeTab === tabs[0]" [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>
+    <ione-send-method-dialog
+      *ngIf="showSendMethodDialog"
+      [showDialog]="showSendMethodDialog"
+      (printButtonClicked)="printStockStickers()"
+    ></ione-send-method-dialog>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockInformationGridComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: StockService }
+];
+StockInformationGridComponent.propDecorators = {
+    stock: [{ type: ViewChild, args: [StockInformationGridComponent,] }],
+    articleStockInformation: [{ type: Input }],
+    stockLocationData: [{ type: Input }],
+    stockHistoryInformation: [{ type: Input }],
+    transferIconClicked: [{ type: Output }],
+    historyClicked: [{ type: Output }]
+};
+
+class StockLocationComponent {
+    constructor(_stockService) {
+        this._stockService = _stockService;
+        this.backToStockLines = new EventEmitter();
+        this.stockLocationColumns = [];
+        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" });
+    }
+    backToStockInformation() {
+        this.backToStockLines.emit();
+    }
+    onOkClick() {
+    }
+    onCancelClick() {
+    }
+    onSelectWarehouse(event) {
+    }
+}
+StockLocationComponent.decorators = [
+    { type: Component, args: [{
+                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
+            [collection]="allWarehouses"
+            [placeholder]="'WAREHOUSES'"
+            (modelChange)="onSelectWarehouse($event)"
+          ></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
+            },] }
+];
+StockLocationComponent.ctorParameters = () => [
+    { type: StockService }
+];
+StockLocationComponent.propDecorators = {
+    stockLocationInformation: [{ type: Input }],
+    backToStockLines: [{ type: Output }]
+};
+
+class StockTransferComponent {
+    constructor(_stockService) {
+        this._stockService = _stockService;
+        this.handleCancelClicked = new EventEmitter();
+        this.handleStickerClicked = new EventEmitter();
+        this.allWarehousesDropdownFields = { text: "warehouseDescription", value: "warehouseNo" };
+        this.allLocationDropdownFields = { text: "locationNo", value: "locationNo" };
+        this.showSendMethodDialog = false;
+        this.stockState = [];
+        this.stockStateDropdownField = { text: "stateDescription", value: "stockStateId" };
+    }
+    ngAfterViewInit() {
+        this.getStockManagementWarehouses();
+        this.getStockState();
+    }
+    handleOkClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            data.selected = true;
+            data.entryDate = new Date;
+            yield this._stockService.updateArticleDetails(data);
+        });
+    }
+    handleCancelClick() {
+        this.handleCancelClicked.emit();
+    }
+    handleSelectedWarehouse(event) {
+        this.selectedWarehouse = event;
+        this.getStockManagementLocations(this.selectedWarehouse);
+    }
+    handleStickerClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.handleStickerClicked.emit();
+            this.showSendMethodDialog = true;
+        });
+    }
+    getStockManagementWarehouses() {
+        this._stockService.getStockManagementWarehouses().then((warehouses) => {
+            this.warehouses = warehouses;
+        });
+    }
+    getStockManagementLocations(data) {
+        this._stockService.getStockManagementLocations(data).then((locations) => {
+            this.locations = locations;
+        });
+    }
+    getStockState() {
+        this._stockService.getStockState().then((state) => {
+            this.stockState = state;
+        });
+    }
+}
+StockTransferComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock-transfer",
+                template: `
+      <div class="stock-transfer">
+        <div class="stock-transfer-columns">
+          <div *ngIf="articleToTransfer" class="stock-transfer-left-column">
+            <co-input-text disabled
+                           [(model)]="articleToTransfer.warehouseDescription"
+                           [textContent]="articleToTransfer.warehouseDescription"
+                           [placeholder]="'Standaard magazijn'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="articleToTransfer.locationNo"
+                           [textContent]="articleToTransfer.locationNo"
+                           [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)]="articleToTransfer.amountTransfer"
+              [placeholder]="'Aantal'">
+            </co-input-text>
+          </div>
+
+          <div class="stock-transfer-right-column">
+            <co-drop-down-list [collection]="warehouses"
+                               [fields]="allWarehousesDropdownFields"
+                               (modelChange)="handleSelectedWarehouse($event)"
+                               [(model)]="articleToTransfer.targetWarehouse">
+            </co-drop-down-list>
+            <co-drop-down-list [collection]="locations"
+                               [fields]="allLocationDropdownFields"
+                               [(model)]="articleToTransfer.targetLocation"
+            >
+            </co-drop-down-list>
+            <co-drop-down-list [collection]="stockState"
+                               [fields]="stockStateDropdownField"
+                               [placeholder]="'Voorraadstatus'"
+                               [(model)]="articleToTransfer.stockStateId">
+            </co-drop-down-list>
+            <co-input-text [placeholder]="'Omschrijving'"
+                           [(model)]="articleToTransfer.stockStateRemark">
+            </co-input-text>
+          </div>
+        </div>
+
+        <div class="ok-cancel-buttons">
+          <co-button [textContent]="'Ok'" (click)="handleOkClick(articleToTransfer)"></co-button>
+          <co-button [textContent]="'Annuleren'" (click)="handleCancelClick()"></co-button>
+          <co-button [textContent]="'Sticker'" (click)="handleStickerClick()"></co-button>
+        </div>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockTransferComponent.ctorParameters = () => [
+    { type: StockService }
+];
+StockTransferComponent.propDecorators = {
+    stockSticker: [{ type: Input }],
+    article: [{ type: Input }],
+    articleToTransfer: [{ type: Input }],
+    articleWarehouse: [{ type: Input }],
+    allWarehouses: [{ type: Input }],
+    handleCancelClicked: [{ type: Output }],
+    handleStickerClicked: [{ type: Output }]
+};
+
+var SendOption;
+(function (SendOption) {
+    SendOption[SendOption["Email"] = 0] = "Email";
+    SendOption[SendOption["Print"] = 1] = "Print";
+    SendOption[SendOption["Pdf"] = 2] = "Pdf";
+    SendOption[SendOption["Xml"] = 3] = "Xml";
+})(SendOption || (SendOption = {}));
+
+class SendMethodDialogComponent {
+    constructor(iconCacheService, stockService, _optionsService, _dictionary, _changeDetector) {
+        this.iconCacheService = iconCacheService;
+        this.stockService = stockService;
+        this._optionsService = _optionsService;
+        this._dictionary = _dictionary;
+        this._changeDetector = _changeDetector;
+        this.icons = Icon;
+        this.sendOption = SendOption;
+        this.showEmailOption = true;
+        this.showPrintOption = true;
+        this.showPdfOption = true;
+        this.showXmlOption = true;
+        this.showPrintPriceStickers = false;
+        this.showPrintStockStickers = true;
+        this.sendOptions = [
+            { option: SendOption.Email,
+                iconName: this.icons.Email,
+            },
+            { option: SendOption.Print,
+                iconName: this.icons.Print,
+            },
+            { option: SendOption.Pdf,
+                iconName: this.icons.Pdf,
+            },
+            { option: SendOption.Xml,
+                iconName: this.icons.Xml,
+            }
+        ];
+        this.activeSendOption = SendOption.Email;
+        this.showStandardPrinterOptions = false;
+        this.showPrinterSelections = false;
+        this.showExitButton = true;
+        this.printTemplatesField = { text: "name", value: "reportId" };
+        this.priceListDataField = { text: "name", value: "priceListCode" };
+        this.upAndLoaded = false;
+        this.emails = ['lars.vdv@colijn-it.nl', 'david@colijn-it.nl', 'ruben@colijn-it.nl'];
+        this.models = [false, false, true];
+        this.layouts = ['Layout 1', 'Layout 2', 'Layout 3'];
+        this.showDialog = false;
+        this.startSignatureClicked = new EventEmitter();
+        this.printButtonClicked = new EventEmitter();
+        this._subscriptions = [];
+        this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)));
+    }
+    set articleData(data) {
+        this.stockService.printSticker.goodId = data.goodId;
+        this.stockService.printSticker.warehouse = data.warehouseNo;
+    }
+    ;
+    showClass() {
+        return true;
+    }
+    ngOnDestroy() {
+        this._subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+    getPrinters() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.stockService.getAllPrinters(true).then((list) => {
+                this.printerList = list;
+            });
+        });
+    }
+    closeDialogClick() {
+        this.showDialog = false;
+    }
+    handleSignatureStart() {
+        this.startSignatureClicked.emit();
+    }
+    handlePrintClicked() {
+        // this.printButtonClicked.emit();
+        if (this.stockService.printSticker.printerName) {
+            this.stockService.getPrintStockStickers(this.stockService.printSticker);
+        }
+    }
+    togglePrinterSelection() {
+        this.getPrinters();
+        if (!this.showPrinterSelections) {
+            this.showPrinterSelections = true;
+            this.headerTitle = 'Printer selectie';
+        }
+        else {
+            this.showPrinterSelections = false;
+            this.headerTitle = 'Verzendopties';
+        }
+    }
+    onPrinterClicked(printer) {
+        this.defaultPrinter = printer.name;
+        this.stockService.printSticker.printerName = printer.name;
+        this.showPrinterSelections = !this.showPrinterSelections;
+    }
+    getPrintTemplates() {
+        if (!this.printTemplates) {
+            const data = new StockStickersPrintLayouts();
+            this.stockService.getStockStickerTemplates(data).then((templates) => {
+                this.printTemplates = templates;
+            });
+        }
+    }
+    _handleSettingsLoaded(loaded) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (loaded) {
+                yield this._initConnection().then();
+                this.upAndLoaded = true;
+            }
+        });
+    }
+    _initConnection() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // await this._connector.connect(this._optionsService.options);
+            if (this._optionsService.options.url) {
+                this._dictionary.rootUrl = this._optionsService.options.url.replace("/ajaxservice", "");
+            }
+            yield this._dictionary.setDictionary(this._optionsService.options.languageCode);
+            setTimeout(() => {
+                this._changeDetector.detectChanges();
+            });
+        });
+    }
+}
+SendMethodDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: "ione-send-method-dialog",
+                template: `
+    <div class="send-method-dialog-wrapper">
+      <co-dialog-wizard id="sendOptionsDialog" *ngIf="showDialog" [showCloseIcon]="showExitButton" (closeClick)="closeDialogClick()">
+        <ng-container header>
+          <span [textContent]="headerTitle"></span>
+        </ng-container>
+        <div class="dialog-content-wrapper">
+          <div class="main-content-container" *ngIf="!showPrinterSelections">
+            <div class="send-options-wrapper">
+              <div class="custom-button-wrapper"
+                   *ngFor="let sendOption of sendOptions"
+                   [class.selected-option]="sendOption.option === activeSendOption"
+                   (click)="activeSendOption = sendOption.option">
+                <co-icon [iconData]="iconCacheService.getIcon(sendOption.iconName)"></co-icon>
+              </div>
+            </div>
+
+            <div class="email-option-content" *ngIf="activeSendOption === sendOption.Email || activeSendOption === sendOption.Pdf">
+              <div class="emails-container" *ngIf="activeSendOption === sendOption.Email">
+                <co-input-checkbox
+                  *ngFor="let email, let index of emails"
+                  [name]="email"
+                  [(model)]="models[index]"
+                  [label]="email"
+                  [cssClass]="'input-checkbox-wrapper'"
+                ></co-input-checkbox>
+              </div>
+
+              <div class="lov-wrapper">
+                <co-input-combo-box
+                  [(model)]="selectedLayout"
+                  [collection]="layouts"
+                  [forceReadonly]="true"
+                  placeholder="Layout"
+                ></co-input-combo-box>
+              </div>
+
+              <div class="signature-button-wrapper">
+                <div class="custom-button-wrapper signature-button" (click)="handleSignatureStart()">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.SignatureField)"></co-icon>
+                </div>
+              </div>
+            </div>
+
+            <div class="email-option-content" *ngIf="activeSendOption === sendOption.Print" (click)="getPrintTemplates()">
+              <div *ngIf="showPrintPriceStickers">
+                <div class="lov-wrapper">
+                  <co-input-combo-box
+                    [(model)]="stockService.printPriceSticker.reportId"
+                    [collection]="printTemplates"
+                    [fields]="printTemplatesField"
+                    placeholder="Layout"
+                  ></co-input-combo-box>
+                </div>
+                <div class="lov-wrapper" *ngIf="priceListCodeData">
+                  <co-input-combo-box
+                    [(model)]="stockService.printPriceSticker.priceListCode"
+                    [collection]="priceListCodeData"
+                    [fields]="priceListDataField"
+                    placeholder="Layout"
+                  ></co-input-combo-box>
+                </div>
+              </div>
+
+              <div *ngIf="showPrintStockStickers">
+                <div class="lov-wrapper">
+                  <co-input-combo-box
+                    [(model)]="stockService.printSticker.reportId"
+                    [collection]="printTemplates"
+                    [fields]="printTemplatesField"
+                    placeholder="Layout"
+                  ></co-input-combo-box>
+                </div>
+              </div>
+
+              <div class="lov-wrapper clickable" (click)="togglePrinterSelection()">
+                <div class="selected-printer-wrapper">
+                  <div class="printer-option-list-item">
+                    <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.Print)"></co-icon>
+                    <div class="printer-details" *ngIf="printerList">
+                      <span class="printer-name" [textContent]="defaultPrinter"></span>
+                      <span class="printer-status" [textContent]="defaultPrinter.acceptingJobs"></span>
+                    </div>
+                  </div>
+                  <co-icon class="select-printer-arrow" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)"></co-icon>
+                </div>
+              </div>
+
+              <div class="standard-printer-wrapper">
+                <div class="standard-printer-link" (click)="showStandardPrinterOptions = !showStandardPrinterOptions">
+                  <co-icon class="arrow-icon" [iconData]="iconCacheService.getIcon(icons.ArrowFatRight)"></co-icon>
+                  <span class="standard-printer-message" [textContent]="'Standaard printer voor lay-out instellen'"></span>
+                </div>
+
+                <div class="standard-printer-selections" *ngIf="showStandardPrinterOptions">
+                  <co-input-checkbox
+                    [(model)]="models[0]"
+                    [label]="'Per gebruiker instellen'"
+                    [cssClass]="'input-checkbox-wrapper'"
+                  ></co-input-checkbox>
+                  <co-input-checkbox
+                    [(model)]="models[1]"
+                    [label]="'Voor alle gebruikers instellen'"
+                    [cssClass]="'input-checkbox-wrapper'"
+                  ></co-input-checkbox>
+                </div>
+              </div>
+
+              <div class="print-footer-wrapper">
+                <div class="input-number-wrapper">
+                  <co-input-number-picker class="number-picker"
+                                          [step]="1" [(model)]="stockService.printSticker.amount" [min]="1"
+                                          [ngModelOptions]="{debounce: 1}">
+                  </co-input-number-picker>
+                </div>
+                <div class="custom-button-wrapper print-button" (click)="handlePrintClicked()">
+                  <span [textContent]="'Print'"></span>
+                </div>
+                <div class="custom-button-wrapper signature-button" (click)="handleSignatureStart()">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.SignatureField)"></co-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="printer-content-container" @slideInOut *ngIf="showPrinterSelections">
+            <div class="selected-printer-wrapper selection clickable" *ngFor="let printers of printerList" (click)="onPrinterClicked(printers)">
+              <div class="printer-option-list-item">
+                <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.Print)"></co-icon>
+                <div class="printer-details">
+                  <span class="printer-name" [textContent]="printers.name"></span>
+                  <span class="printer-status" [textContent]="printers.acceptingJobs"></span>
+                </div>
+              </div>
+              <co-icon class="select-printer-arrow" *ngIf="!showPrinterSelections"
+                       [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)"></co-icon>
+            </div>
+          </div>
+        </div>
+      </co-dialog-wizard>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None,
+                animations: [
+                    trigger('slideInOut', [
+                        state('*', style({ transform: 'translateX(0%)', width: '100%', opacity: '1' })),
+                        state('void', style({ transform: 'translateX(150%)', opacity: '0' })),
+                        transition('void => *', animate(250))
+                    ])
+                ]
+            },] }
+];
+SendMethodDialogComponent.ctorParameters = () => [
+    { type: IconCacheService },
+    { type: StockService },
+    { type: OptionsService },
+    { type: DictionaryService },
+    { type: ChangeDetectorRef }
+];
+SendMethodDialogComponent.propDecorators = {
+    showEmailOption: [{ type: Input }],
+    showPrintOption: [{ type: Input }],
+    showPdfOption: [{ type: Input }],
+    showXmlOption: [{ type: Input }],
+    showPrintPriceStickers: [{ type: Input }],
+    showPrintStockStickers: [{ type: Input }],
+    priceListCodeData: [{ type: Input }],
+    showDialog: [{ type: Input }],
+    headerTitle: [{ type: Input }],
+    printerList: [{ type: Input }],
+    articleData: [{ type: Input }],
+    startSignatureClicked: [{ type: Output }],
+    printButtonClicked: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.ione-send-method-dialog",] }]
+};
+
+class SendMethodDialogModule {
+}
+SendMethodDialogModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    SendMethodDialogComponent
+                ],
+                imports: [
+                    CommonModule,
+                    CoDialogPromptModule,
+                    InputCheckboxModule,
+                    InputComboBoxModule,
+                    IconModule,
+                    InputNumberPickerModule,
+                    CoDialogWizardModule,
+                    ButtonModule
+                ],
+                exports: [
+                    SendMethodDialogComponent
+                ],
+                providers: [
+                    StockService
+                ]
+            },] }
+];
+
+class StockChangeAmountComponent {
+    constructor(_stockService) {
+        this._stockService = _stockService;
+        this.closeStockChangeAmount = new EventEmitter();
+        this.stockState = [];
+        this.stockStateDropdownField = { text: "stateDescription", value: "stockStateId" };
+    }
+    ngAfterViewInit() {
+        this.getStockState();
+    }
+    closeDialogClick() {
+        this.closeStockChangeAmount.emit();
+    }
+    handleOkClick(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._stockService.updateArticleDetails(data);
+        });
+    }
+    handleCancelClick() {
+        this.closeStockChangeAmount.emit();
+    }
+    getStockState() {
+        this._stockService.getStockState().then((state) => {
+            this.stockState = state;
+        });
+    }
+}
+StockChangeAmountComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock-change-amount",
+                template: `
+      <div class="stock-transfer">
+        <co-dialog-wizard [showCloseIcon]="true" (closeClick)="closeDialogClick()">
+          <ng-container header>
+            <span [textContent]="'STOCK_CHANGE_REASON'"></span>
+          </ng-container>
+          <div class="popup-wrapper">
+            <co-drop-down-list [collection]="stockState"
+                               [fields]="stockStateDropdownField"
+                               [placeholder]="'STOCK_STATE'"
+                               [(model)]="selectedArticleDetailsData.stockStateId"
+            ></co-drop-down-list>
+
+            <co-input-textarea [(model)]="selectedArticleDetailsData.stockStateRemark"
+
+            ></co-input-textarea>
+            <div class="ok-cancel-buttons">
+              <co-button [textContent]="'Ok'" (click)="handleOkClick(selectedArticleDetailsData)"></co-button>
+              <co-button [textContent]="'Annuleren'" (click)="handleCancelClick()"></co-button>
+            </div>
+          </div>
+        </co-dialog-wizard>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockChangeAmountComponent.ctorParameters = () => [
+    { type: StockService }
+];
+StockChangeAmountComponent.propDecorators = {
+    selectedArticleDetailsData: [{ type: Input }],
+    closeStockChangeAmount: [{ type: Output }]
+};
+
+class StockModule {
+}
+StockModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    InputComboBoxModule,
+                    CoGridModule,
+                    ButtonModule,
+                    CommonModule,
+                    InputRadioButtonModule,
+                    DropDownModule,
+                    SimpleGridModule,
+                    ImageModule,
+                    InputTextModule,
+                    SendMethodDialogModule,
+                    IconModule,
+                    InputNumberPickerModule,
+                    CoDialogWizardModule,
+                    InputTextareaModule
+                ],
+                declarations: [
+                    StockComponent,
+                    StockInformationComponent,
+                    StockInformationGridComponent,
+                    StockLocationComponent,
+                    StockTransferComponent,
+                    StockChangeAmountComponent
+                ],
+                exports: [
+                    StockComponent
+                ],
+                providers: [
+                    StockService
+                ]
+            },] }
+];
+
+var KeyboardCode;
+(function (KeyboardCode) {
+    KeyboardCode["Backspace"] = "Backspace";
+    KeyboardCode["Digit0"] = "Digit0";
+    KeyboardCode["Digit1"] = "Digit1";
+    KeyboardCode["Digit2"] = "Digit2";
+    KeyboardCode["Digit3"] = "Digit3";
+    KeyboardCode["Digit4"] = "Digit4";
+    KeyboardCode["Digit5"] = "Digit5";
+    KeyboardCode["Digit6"] = "Digit6";
+    KeyboardCode["Digit7"] = "Digit7";
+    KeyboardCode["Digit8"] = "Digit8";
+    KeyboardCode["Digit9"] = "Digit9";
+    KeyboardCode["Enter"] = "Enter";
+    KeyboardCode["Escape"] = "Escape";
+    KeyboardCode["Minus"] = "Minus";
+    KeyboardCode["Numpad0"] = "Numpad0";
+    KeyboardCode["Numpad1"] = "Numpad1";
+    KeyboardCode["Numpad2"] = "Numpad2";
+    KeyboardCode["Numpad3"] = "Numpad3";
+    KeyboardCode["Numpad4"] = "Numpad4";
+    KeyboardCode["Numpad5"] = "Numpad5";
+    KeyboardCode["Numpad6"] = "Numpad6";
+    KeyboardCode["Numpad7"] = "Numpad7";
+    KeyboardCode["Numpad8"] = "Numpad8";
+    KeyboardCode["Numpad9"] = "Numpad9";
+    KeyboardCode["NumpadDecimal"] = "NumpadDecimal";
+    KeyboardCode["NumpadEnter"] = "NumpadEnter";
+    KeyboardCode["NumpadSubtract"] = "NumpadSubtract";
+    KeyboardCode["Period"] = "Period";
+})(KeyboardCode || (KeyboardCode = {}));
+
+class KeyPadComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
+        this.showValue = true;
+        this.emitModelChangeOnEnter = true;
+        this.modelChange = new EventEmitter();
+        this.internalModelChange = new EventEmitter();
+        this.enterClick = new EventEmitter();
+        this._validKeyMap = new Map([
+            [KeyboardCode.Digit0, "0"],
+            [KeyboardCode.Digit1, "1"],
+            [KeyboardCode.Digit2, "2"],
+            [KeyboardCode.Digit3, "3"],
+            [KeyboardCode.Digit4, "4"],
+            [KeyboardCode.Digit5, "5"],
+            [KeyboardCode.Digit6, "6"],
+            [KeyboardCode.Digit7, "7"],
+            [KeyboardCode.Digit8, "8"],
+            [KeyboardCode.Digit9, "9"],
+            [KeyboardCode.Numpad0, "0"],
+            [KeyboardCode.Numpad1, "1"],
+            [KeyboardCode.Numpad2, "2"],
+            [KeyboardCode.Numpad3, "3"],
+            [KeyboardCode.Numpad4, "4"],
+            [KeyboardCode.Numpad5, "5"],
+            [KeyboardCode.Numpad6, "6"],
+            [KeyboardCode.Numpad7, "7"],
+            [KeyboardCode.Numpad8, "8"],
+            [KeyboardCode.Numpad9, "9"],
+            [KeyboardCode.NumpadDecimal, "."],
+            [KeyboardCode.Period, "."]
+        ]);
+        this.isNegative = false;
+        this._model = 0;
+        this._internalModel = "0";
+        this._maxCharacters = 11;
+    }
+    set model(value) {
+        this._model = value;
+        this._internalModel = this._model + "";
+    }
+    get model() {
+        return this._model;
+    }
+    showClass() {
+        return true;
+    }
+    handleKeyDown(event) {
+        this._keyDown(event);
+    }
+    set internalModel(value) {
+        this._internalModel = value;
+        this.isNegative = parseFloat(this._internalModel) < 0;
+        this.internalModelChange.emit(this._internalModel);
+    }
+    get internalModel() {
+        return this._internalModel;
+    }
+    handleMinusClick(event) {
+        const model = parseFloat(this.internalModel);
+        if (model !== 0) {
+            if (model < 0) {
+                this.internalModel = Math.abs(model) + "";
+            }
+            else {
+                this.internalModel = -model + "";
+            }
+        }
+        this._emitModelChange();
+    }
+    handleClearClick(event) {
+        this.internalModel = "0";
+        this._emitModelChange();
+    }
+    handleBsClick(event) {
+        let wish = this.internalModel;
+        wish = wish.slice(0, wish.length - 1) || "0";
+        if (!isNaN(parseFloat(wish))) {
+            this.internalModel = parseFloat(wish) + "";
+        }
+        this._emitModelChange();
+    }
+    handleButtonClick(chr) {
+        this._updateModel(chr);
+    }
+    handleEnterClick(event) {
+        this._emitModelChange(true);
+        this.enterClick.emit();
+    }
+    _updateModel(value) {
+        if (value === undefined || value === null ||
+            (value === '.' && this.internalModel.indexOf('.') > -1) ||
+            this.internalModel.length >= this._maxCharacters) {
+            return;
+        }
+        this.internalModel = this.internalModel !== "0" ? this.internalModel + value : value;
+        this._emitModelChange();
+    }
+    _keyDown(event) {
+        if (this._isEnter(event)) {
+            this.handleEnterClick(event);
+        }
+        else if (this._isMinus(event)) {
+            this.handleMinusClick(event);
+        }
+        else if (this._isEscape(event)) {
+            this.handleClearClick(event);
+        }
+        else if (this._isBackspace(event)) {
+            this.handleBsClick(event);
+        }
+        else {
+            this._updateModel(this._validKeyMap.get(event.code));
+        }
+    }
+    _isEnter(event) {
+        return event.code === KeyboardCode.Enter || event.code === KeyboardCode.NumpadEnter;
+    }
+    _isMinus(event) {
+        return event.code === KeyboardCode.Minus || event.code === KeyboardCode.NumpadSubtract;
+    }
+    _isEscape(event) {
+        return event.code === KeyboardCode.Escape;
+    }
+    _isBackspace(event) {
+        return event.code === KeyboardCode.Backspace;
+    }
+    _emitModelChange(enter = false) {
+        if ((enter && this.emitModelChangeOnEnter) || (!enter && !this.emitModelChangeOnEnter)) {
+            const model = parseFloat(this.internalModel);
+            if (!isNaN(model)) {
+                if (enter && this.emitModelChangeOnEnter) {
+                    this.model = model;
+                }
+                this.modelChange.emit(model);
+            }
+        }
+    }
+}
+KeyPadComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'co-key-pad',
+                template: `
+    <div class="key-pad-wrapper">
+      <div class="key-pad-model-wrapper" *ngIf="showValue">
+        <div class="key-pad-model" [textContent]="internalModel" [class.negative]="isNegative"></div>
+      </div>
+      <div class="key-pad-button-wrapper">
+        <div class="key-pad-button button-7" [textContent]="'7'" (click)="handleButtonClick('7')"></div>
+        <div class="key-pad-button button-8" [textContent]="'8'" (click)="handleButtonClick('8')"></div>
+        <div class="key-pad-button button-9" [textContent]="'9'" (click)="handleButtonClick('9')"></div>
+        <div class="key-pad-button button-bs" (click)="handleBsClick($event)">
+          <co-icon [iconData]="iconCacheService.getIcon(icons.DeleteLeftRegular)"></co-icon>
+        </div>
+        <div class="key-pad-button button-4" [textContent]="'4'" (click)="handleButtonClick('4')"></div>
+        <div class="key-pad-button button-5" [textContent]="'5'" (click)="handleButtonClick('5')"></div>
+        <div class="key-pad-button button-6" [textContent]="'6'" (click)="handleButtonClick('6')"></div>
+        <div class="key-pad-button button-minus" [textContent]="'-'" (click)="handleMinusClick($event)"></div>
+        <div class="key-pad-button button-1" [textContent]="'1'" (click)="handleButtonClick('1')"></div>
+        <div class="key-pad-button button-2" [textContent]="'2'" (click)="handleButtonClick('2')"></div>
+        <div class="key-pad-button button-3" [textContent]="'3'" (click)="handleButtonClick('3')"></div>
+        <div class="key-pad-button button-enter" (click)="handleEnterClick($event)">
+          <span [textContent]="'enter'"></span>
+        </div>
+        <div class="key-pad-button button-0" [textContent]="'0'" (click)="handleButtonClick('0')"></div>
+        <div class="key-pad-button button-dot" [textContent]="'.'" (click)="handleButtonClick('.')"></div>
+      </div>
+    </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+KeyPadComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+KeyPadComponent.propDecorators = {
+    model: [{ type: Input }],
+    showValue: [{ type: Input }],
+    emitModelChangeOnEnter: [{ type: Input }],
+    modelChange: [{ type: Output }],
+    internalModelChange: [{ type: Output }],
+    enterClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ['class.co-key-pad',] }],
+    handleKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+};
+
+class KeyPadModule {
+}
+KeyPadModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule
+                ],
+                declarations: [
+                    KeyPadComponent
+                ],
+                exports: [
+                    KeyPadComponent
+                ]
+            },] }
+];
+
+class LayoutSwitcherComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icon = Icon;
+        this.layoutItems = [];
+        this.layoutSwitchEmit = new EventEmitter();
+        this.showMaskSidebar = false;
+        this._activeIndex = 0;
+    }
+    showClass() {
+        return true;
+    }
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    set activeIndex(index) {
+        this._activeIndex = index;
+        this.toggleMaskSidebar();
+        this.layoutSwitchEmit.emit(this.layoutItems[index]);
+    }
+    toggleMaskSidebar() {
+        this.showMaskSidebar = !this.showMaskSidebar;
+    }
+}
+LayoutSwitcherComponent.decorators = [
+    { type: Component, args: [{
+                selector: "layout-switcher",
+                template: `
+    <div class="mask-wrapper" [class.mask-wrapper-active]='showMaskSidebar' @showHideSidebar>
+      <div class="icon-wrapper" (click)="toggleMaskSidebar()">
+        <co-icon class="icon-mask" [iconData]="iconCacheService.getIcon(icon.BringForwardRegular)" [@positionIcon]="showMaskSidebar"></co-icon>
+
+        <co-icon class='icon-mask-sidebar-handle' [@positionHandle]='showMaskSidebar' [iconData]="showMaskSidebar ? iconCacheService.getIcon(this.icon.AngleLeftSolid) : iconCacheService.getIcon(this.icon.AngleRightSolid)"></co-icon>
+      </div>
+
+      <div class="mask-content" *ngIf="showMaskSidebar" @showHideSidebar>
+        <span *ngFor='let item of this.layoutItems' [class.active]="this.activeIndex === this.layoutItems.indexOf(item)" [textContent]="item" (click)='activeIndex = this.layoutItems.indexOf(item)' ></span>
+      </div>
+    </div>
+
+  `,
+                animations: [
+                    trigger("showHideSidebar", [
+                        state("void", style({ "width": "0" })),
+                        state("*", style({ "width": "*" })),
+                        transition("void <=> *", animate(200))
+                    ]),
+                    trigger("positionIcon", [
+                        state("true", style({ "left": "70px" })),
+                        state("false", style({ "left": "10px" })),
+                        transition("true <=> false", animate(200))
+                    ]),
+                    trigger("positionHandle", [
+                        state("true", style({ "left": "15px" })),
+                        state("false", style({ "left": "75px" })),
+                        transition("true <=> false", animate(200))
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+LayoutSwitcherComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+LayoutSwitcherComponent.propDecorators = {
+    showClass: [{ type: HostBinding, args: ['class.layout-switcher',] }],
+    layoutItems: [{ type: Input }],
+    layoutSwitchEmit: [{ type: Output }]
+};
+
+class LayoutSwitcherModule {
+}
+LayoutSwitcherModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    IconModule
+                ],
+                declarations: [
+                    LayoutSwitcherComponent,
+                ],
+                exports: [
+                    LayoutSwitcherComponent
+                ]
+            },] }
+];
+
+var GaugeColor$1;
+(function (GaugeColor) {
+    GaugeColor["Low"] = "#E0E0E0";
+    GaugeColor["Medium"] = "#F88952";
+    GaugeColor["High"] = "#5FDCB3";
+})(GaugeColor$1 || (GaugeColor$1 = {}));
+class CoCircularGaugeComponent {
+    constructor() {
+        this._color = GaugeColor$1.Low;
+        this.majorTicks = {
+            height: 0,
+        };
+        this.minorTicks = {
+            height: 0
+        };
+        this.labelStyle = {
+            position: 'Inside', useRangeColor: true,
+            font: { size: '0px', fontFamily: 'inherit' }
+        };
+        this.lineStyle = {
+            width: 0
+        };
+        this.ranges = [
+            {
+                start: 1, end: 100,
+                radius: '13px',
+                startWidth: 3, endWidth: 3,
+                color: '#E0E0E0',
+                roundedCornerRadius: 0
+            },
+        ];
+    }
+    set value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
+    }
+    get color() {
+        return this._color;
+    }
+    showClass() {
+        return true;
+    }
+    getAxes() {
+        return [{
+                minimum: 0,
+                maximum: 100,
+                radius: '15px',
+                startAngle: 1,
+                endAngle: 360,
+                majorTicks: this.majorTicks,
+                minorTicks: this.minorTicks,
+                labelStyle: this.labelStyle,
+                lineStyle: this.lineStyle,
+                ranges: this.ranges,
+                pointers: this.getPointers(),
+                annotations: this.getAnnotations(),
+            }];
+    }
+    getPointers() {
+        if (this.value) {
+            return [{
+                    roundedCornerRadius: 0,
+                    value: this.value,
+                    type: 'RangeBar',
+                    radius: '13px',
+                    color: this.color,
+                    border: {
+                        width: 0
+                    },
+                    animation: {
+                        enable: false
+                    },
+                    pointerWidth: 3
+                }];
+        }
+    }
+    ;
+    getAnnotations() {
+        if (this.value !== undefined) {
+            const label = this.value ? this.value + "%" : "0%";
+            return [{
+                    content: '<div class="annotation">' +
+                        label + '</div>',
+                    angle: 90,
+                    radius: '50%',
+                    zIndex: '10',
+                }];
+        }
+    }
+    _setColor() {
+        if (this.value == 0) {
+            this._color = GaugeColor$1.Low;
+        }
+        else if (this.value >= 0 && this.value < 100) {
+            this._color = GaugeColor$1.Medium;
+        }
+        else if (this.value == 100) {
+            this._color = GaugeColor$1.High;
+        }
+    }
+}
+CoCircularGaugeComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-circular-gauge",
+                template: `
+    <div class="circular-gauge-wrapper">
+      <ejs-circulargauge
+        class="circular-gauge"
+        [width]="'100%'"
+        [axes]="getAxes()">
+      </ejs-circulargauge>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoCircularGaugeComponent.propDecorators = {
+    circulargauge: [{ type: ViewChild, args: ['circulargauge',] }],
+    value: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-circular-gauge",] }]
+};
+
+class CoCircularGaugeModule {
+}
+CoCircularGaugeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CircularGaugeModule
+                ],
+                declarations: [
+                    CoCircularGaugeComponent
+                ],
+                exports: [
+                    CoCircularGaugeComponent
+                ]
+            },] }
+];
+
+var GaugeColor;
+(function (GaugeColor) {
+    GaugeColor["Low"] = "#E0E0E0";
+    GaugeColor["Medium"] = "#F88952";
+    GaugeColor["High"] = "#5FDCB3";
+})(GaugeColor || (GaugeColor = {}));
+class CoLinearGaugeComponent {
+    constructor() {
+        this.color = GaugeColor.Low;
+    }
+    set value(value) {
+        this._value = value;
+        this._setColor();
+    }
+    get value() {
+        return this._value;
+    }
+    showClass() {
+        return true;
+    }
+    getStyle() {
+        return `linear-gradient(90deg, ${this.color} 0 ${this.value}%, white ${this.value}% 100%`;
+    }
+    _setColor() {
+        if (this.value == 0) {
+            this.color = GaugeColor.Low;
+        }
+        else if (this.value >= 0 && this.value < 100) {
+            this.color = GaugeColor.Medium;
+        }
+        else if (this.value == 100) {
+            this.color = GaugeColor.High;
+        }
+    }
+}
+CoLinearGaugeComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-linear-gauge",
+                template: `
+    <div class="linear-gauge"
+         [style.background]="getStyle()"
+         [style.border-color]="color"
+         [textContent]="count ? count : ''"
+    ></div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CoLinearGaugeComponent.propDecorators = {
+    value: [{ type: Input }],
+    count: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-linear-gauge",] }]
+};
+
+class CoLinearGaugeModule {
+}
+CoLinearGaugeModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                ],
+                declarations: [
+                    CoLinearGaugeComponent
+                ],
+                exports: [
+                    CoLinearGaugeComponent
+                ]
+            },] }
+];
+
+class StatusbarComponent {
+    constructor() {
+        this.statusbarClick = new EventEmitter();
+        this.showPopup = false;
+        this.popupClass = 'dropdown';
+    }
+    set statusbarData(value) {
+        this._statusbarData = value;
+    }
+    get statusbarData() {
+        return this._statusbarData;
+    }
+    showClass() {
+        return true;
+    }
+    onHover(event) {
+        this.showPopup = true;
+        this._mouseY = event.screenY;
+        this._windowHeight = window.innerHeight;
+        this.setPopupClass();
+    }
+    onLeave() {
+        this.showPopup = false;
+    }
+    onStatusbarClick() {
+        this.statusbarClick.emit();
+    }
+    setPopupClass() {
+        const popupHeight = this.statusbarData.length * 30;
+        let dropdownInScreen = (this._mouseY + popupHeight) <= this._windowHeight;
+        if (dropdownInScreen) {
+            this.popupClass = 'dropdown';
+        }
+        else {
+            this.popupClass = 'dropup';
+        }
+    }
+}
+StatusbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-statusbar",
+                template: `
+    <div class="co-statusbar-wrapper"
+         *ngIf="statusbarData"
+         (mouseover)="onHover($event)"
+         (mouseleave)="onLeave()"
+         (click)="onStatusbarClick()">
+      <div class="statuses">
+        <div *ngFor="let data of statusbarData; let index = index" class="status">
+          <co-linear-gauge [value]="data.percentage" [count]="!!data.count ? data.count : undefined"></co-linear-gauge>
+        </div>
+      </div>
+      <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass">
+        <div class="status-descriptions">
+          <div *ngFor="let data of statusbarData; let index = index" class="status-description">
+            <co-circular-gauge [value]="data.percentage"></co-circular-gauge>
+            <span [textContent]="data.label"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                animations: [
+                    trigger("showHidePopup", [
+                        state("void", style({ opacity: 0 })),
+                        state("*", style({ opacity: 1 })),
+                        transition("void <=> *", animate("250ms ease-in-out")),
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StatusbarComponent.ctorParameters = () => [];
+StatusbarComponent.propDecorators = {
+    statusbarData: [{ type: Input }],
+    statusbarClick: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.co-statusbar",] }]
+};
+
+class StatusbarModule {
+}
+StatusbarModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    CoCircularGaugeModule,
+                    CoLinearGaugeModule
+                ],
+                declarations: [
+                    StatusbarComponent
+                ],
+                exports: [
+                    StatusbarComponent
+                ]
+            },] }
+];
+
+class SharedService {
+    constructor(options, connector) {
+        this.options = options;
+        this.connector = connector;
+    }
+    init(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.options.initialize(options);
+            this.connector.connect();
+        });
+    }
+}
+SharedService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SharedService_Factory() { return new SharedService(i0.ɵɵinject(OptionsService), i0.ɵɵinject(SharedConnectorService)); }, token: SharedService, providedIn: "root" });
+SharedService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+SharedService.ctorParameters = () => [
+    { type: OptionsService },
+    { type: SharedConnectorService }
+];
+
+/*
+ * Public API Surface of sharedcomponents
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CoCircularGaugeComponent, CoCircularGaugeModule, CoLinearGaugeComponent, CoLinearGaugeModule, DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StatusbarComponent, StatusbarModule, StockComponent, StockModule, SignatureComponent as ɵa, SignaturesComponent as ɵb, StockService as ɵc, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, StockInformationComponent as ɵh, StockInformationGridComponent as ɵi, StockLocationComponent as ɵj, StockTransferComponent as ɵk, StockChangeAmountComponent as ɵl };
+//# sourceMappingURL=colijnit-sharedcomponents.js.map