@colijnit/sharedcomponents 1.0.6 → 1.0.9

package/fesm2015/colijnit-sharedcomponents.js

@@ -0,0 +1,2066 @@
+import { __awaiter } from 'tslib';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ViewChild, ElementRef, Input, Output, HostBinding, NgModule, Injectable } 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 { Articles } from '@colijnit/articleapi/build/articles';
+import { Sharedapi } from '@colijnit/sharedapi/build/sharedapi';
+import { Printer } from '@colijnit/sharedapi/build/model/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 { PrintStockStickers } from '@colijnit/articleapi/build/model/print-stock-stickers';
+import { ArticleFlat } from '@colijnit/articleapi/build/model/article-flat.bo';
+import { ArticlesPublic } from '@colijnit/articleapi/build/articles-public';
+import { CoDialogPromptModule, InputCheckboxModule, InputComboBoxModule, IconModule, InputNumberPickerModule, CoDialogWizardModule, CoGridModule, ButtonModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule } from '@colijnit/corecomponents_v12';
+import * as i1 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+
+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;
+                }
+            }
+        }
+    }
+}
+
+class IoneConnectorAdapterService {
+    constructor() {
+        this._boFactory = new BusinessObjectFactory();
+    }
+    connect(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.options === undefined) {
+                this.options = options;
+                this.connector = new Articles(options);
+                this.sharedConnector = new Sharedapi(options);
+                this.options.session = this.connector.session && this.sharedConnector.session;
+            }
+        });
+    }
+    disconnect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.options = undefined;
+        });
+    }
+    getAllPrinters(showAll = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.sharedConnector.getAllPrinters(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);
+                    }
+                });
+            });
+        });
+    }
+    getArticleFullObject(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getArticleFullObject(goodId).then((result) => {
+                    // if (result.validationResult && result.validationResult.success) {
+                    //   if (result.resultObject) {
+                    //     resolve(this._boFactory.makeWithRawBackendData(ArticleExtended, result.resultObject));
+                    //   }
+                    // } else {
+                    //   reject(result.validationMessagesAsString);
+                    // }
+                });
+            });
+        });
+    }
+    getArticleFlatObject(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getArticleFullObject(goodId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeWithRawBackendData(ArticleFlat, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    getWarehouses(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.connector.getWarehouses(goodId).then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObject) {
+                            resolve(this._boFactory.makeWithRawBackendData(ArticlesPublic, result.resultObject));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+}
+IoneConnectorAdapterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IoneConnectorAdapterService_Factory() { return new IoneConnectorAdapterService(); }, token: IoneConnectorAdapterService, providedIn: "root" });
+IoneConnectorAdapterService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+IoneConnectorAdapterService.ctorParameters = () => [];
+
+class StockService {
+    constructor(_connector) {
+        this._connector = _connector;
+    }
+    connectConnector(options) {
+        this._connector.connect(options);
+    }
+    getPrintStockStickers(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this._connector.getPrintStockStickers(data);
+        });
+    }
+    getAllPrinters(showAll = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._connector.getAllPrinters(showAll);
+        });
+    }
+    loadStockLocations(goodId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._connector.getArticleFlatObject(goodId);
+        });
+    }
+}
+StockService.decorators = [
+    { type: Injectable }
+];
+StockService.ctorParameters = () => [
+    { type: IoneConnectorAdapterService }
+];
+
+class StockComponent {
+    constructor(stockService) {
+        this.stockService = stockService;
+        this.handleStickerClicked = new EventEmitter();
+        this.showStockInformationGrid = true;
+        this.showStockLocation = false;
+        this.showStockTransfer = false;
+    }
+    set options(value) {
+        this.stockService.connectConnector(value);
+    }
+    showClass() {
+        return true;
+    }
+    backToStockLinesClicked() {
+        this.showStockLocation = false;
+        this.showStockInformationGrid = true;
+    }
+    handleStockTransferClick(event) {
+        this.showStockTransfer = !this.showStockTransfer;
+        this.showStockInformationGrid = !this.showStockInformationGrid;
+        this.stockService.stockStickers = new PrintStockStickers();
+    }
+    backToStock() {
+        this.showStockTransfer = !this.showStockTransfer;
+        this.showStockInformationGrid = !this.showStockInformationGrid;
+    }
+}
+StockComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock",
+                template: `
+      <div class="stock-info-container">
+        <co-stock-information [article]="articleExtended"></co-stock-information>
+        <hr>
+        <co-stock-information-grid *ngIf="showStockInformationGrid" (transferIconClicked)="handleStockTransferClick($event)"></co-stock-information-grid>
+        <co-stock-location *ngIf="showStockLocation" (backToStockLines)="backToStockLinesClicked()"></co-stock-location>
+        <co-stock-transfer *ngIf="showStockTransfer"
+                           (handleCancelClicked)="backToStock()"
+                           [article]="articleExtended"
+                           [stockSticker]="stockService.stockStickers"
+                           (handleStickerClicked)="handleStickerClicked.emit($event)"
+                           [articleWarehouse]="articleWarehouse"
+                           [allWarehouses]="allWarehouses"
+        >
+        </co-stock-transfer>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockComponent.ctorParameters = () => [
+    { type: StockService }
+];
+StockComponent.propDecorators = {
+    stock: [{ type: ViewChild, args: [StockComponent,] }],
+    handleStickerClicked: [{ type: Output }],
+    options: [{ type: Input }],
+    articleExtended: [{ type: Input }],
+    articleWarehouse: [{ type: Input }],
+    allWarehouses: [{ type: Input }],
+    showClass: [{ type: HostBinding, args: ["class.co-stock",] }]
+};
+
+class StockInformationComponent {
+    constructor() {
+        this.stockStatus = "medium";
+        this.show = false;
+        this.hideOrShowLocationTab = false;
+    }
+}
+StockInformationComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock-information",
+                template: `
+      <div class="stock-info">
+        <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?.name"></span>
+            </div>
+            <div>
+              <span [textContent]="article?.articleNumber"></span>
+            </div>
+          </div>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="article?.stockStatus"></label>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'STOCK'"></label>
+          <span></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="article?.stockAvailable"></label>
+          <span>totalAmountAvailable</span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'ECONOMICAL_STOCK'"></label>
+          <span></span>
+        </div>
+        <div class="stock-status">
+          <label [textContent]="'PHYSICAL_STOCK'"></label>
+          <span></span>
+        </div>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockInformationComponent.ctorParameters = () => [];
+StockInformationComponent.propDecorators = {
+    article: [{ type: Input }]
+};
+
+class StockInformationGridComponent {
+    constructor(_stockService) {
+        this._stockService = _stockService;
+        this.locationLineClicked = new EventEmitter();
+        this.transferIconClicked = new EventEmitter();
+        this.MAX_GRID_ROWS = 10;
+        this.stockStatus = "medium";
+        this.show = false;
+        this.hideOrShowLocationTab = false;
+        this.showStockHistory = false;
+        this.data = [
+            { test: "test" }
+        ];
+        this.stockInformation = [
+            { warehouseNumber: "1", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "test" },
+            { warehouseNumber: "2", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "Test nummer 2" },
+            { warehouseNumber: "3", warehouseDescription: "Colijn IT Warehouse", amountInStock: "17", amountAvailable: "13", amountLaterAvailable: "4", location: "Amundsenweg" },
+        ];
+        this.stockLocationInformation = [
+            { location: "title 1", batch: "1", serialNo: "1", amountInStock: "1", allocated: "1", amountAvailable: "1" },
+            { location: "title 2", amountInStock: "2" },
+            { location: "title 3", amountInStock: "3" },
+            { location: "title 4", amountInStock: "4" },
+            { location: "title 5", amountInStock: "5" },
+        ];
+        this.inOrderInformation = [
+            { inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321" },
+            { inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321" },
+            { inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321" },
+            { inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321" },
+            { inOrder: "275432", customer: "Test customer", orderDate: "date", orderAmount: "2", warehouseNumber: "8", warehouseDescription: "A nice warehouse", amountInStock: "17", commission: "4014321" },
+        ];
+        this.stockHistoryInformation = [];
+        this.orderInformation = [];
+        this.stockColumns = [];
+        this.stockLocationColumns = [];
+        this.inOrderColumns = [];
+        this.orderColumns = [];
+        this.hideOrShowTabs = true;
+        this.dataWareHouseCode = 0;
+        this.dataWareHouseFields = { text: "warehouseDescription", value: "warehouseNumber" };
+        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;
+    }
+    onLocationClick(event) {
+        // this.locationLineClicked.emit(event[0].location);
+        this.hideOrShowTabs = false;
+        this.hideOrShowLocationTab = true;
+    }
+    onRowClick(args) {
+    }
+    onPopupClose() {
+        this.show = false;
+    }
+    handleHistoryClick() {
+        this.showStockHistory = true;
+    }
+    handleCloseClick() {
+        this.onPopupClose();
+    }
+    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;
+        });
+    }
+    handleStickerClick() {
+    }
+    handleTransferClick() {
+    }
+    onOkClick() {
+    }
+    onCancelClick() {
+    }
+}
+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]="stockInformation"
+      >
+          <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNumber'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseDescription'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'ECONOMICAL_STOCK'" [field]="'amountLaterAvailable'"></co-simple-grid-column>
+          <co-simple-grid-column [headerText]="'LOCATION'" [field]="'location'">
+            <ng-template let-row="row">
+              <a [textContent]="'bekijken'" (click)="onLocationClick($event)"></a>
+            </ng-template>
+          </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[1]"
+                      [data]="inOrderInformation"
+      >
+        <co-simple-grid-column [headerText]="'IN_ORDER2'" [field]="'inOrder'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'CUSTOMER'" [field]="'customer'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'orderDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'orderAmount'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'warehouseNumber'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DESCRIPTION'" [field]="'warehouseDescription'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'COMMISSION2'" [field]="'commission'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+
+      <co-simple-grid *ngIf="activeTab === tabs[2]"
+                      [data]="orderInformation"
+      >
+        <co-simple-grid-column [headerText]="'PURCHASE_ORDER_NR'" [field]="'purchaseOrderNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DATE'" [field]="'orderDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AMOUNT'" [field]="'orderAmount'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RESERVED'" [field]="'reserved'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'FREE_STOCK'" [field]="'freeStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'DELIVERY_DATE1'" [field]="'deliveryDate'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'RESERVE'" [field]="'reservation'"></co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-grid" *ngIf="hideOrShowLocationTab">
+      <div class="stock-location-group">
+        <div class="stock-location-left-group">
+          <span class="stock-button-back" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></span>
+        </div>
+        <div class="stock-location-right-group">
+          <co-input-combo-box [(model)]="dataWareHouseCode"
+                              [fields]="dataWareHouseFields"
+                              [placeholder]="'WAREHOUSE'"
+                              [required]="true"
+          ></co-input-combo-box>
+        </div>
+      </div>
+
+      <co-simple-grid [data]="stockLocationInformation"
+      >
+        <div class="stock-location-group">
+          <div class="stock-location-left-group">
+            <co-button class="stock-lines-button" [textContent]="'BACK_TO_STOCK_LINES'" (click)="handleBackToStockClick()"></co-button>
+          </div>
+        </div>
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'location'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH'" [field]="'batch'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SERIAL_NO'" [field]="'serialNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'allocated'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'TRANSFER'" [field]="'transfer'">
+          <ng-template let-row="row">
+              <span [textContent]="'Transfer'" (click)="handleStockTransferClick($event)"></span>
+          </ng-template>
+        </co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-grid" *ngIf="showStockHistory">
+      <co-simple-grid [data]="stockHistoryInformation"
+      >
+        <co-simple-grid-column [headerText]="'WAREHOUSE'" [field]="'location'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'BATCH'" [field]="'batch'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'SERIAL_NO'" [field]="'serialNo'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STOCK'" [field]="'amountInStock'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'ALLOCATED'" [field]="'allocated'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'AVAILABLE_STOCK'" [field]="'amountAvailable'"></co-simple-grid-column>
+        <co-simple-grid-column [headerText]="'STICKER'" [field]="'sticker'">
+          <ng-template let-row="row">
+
+          </ng-template>
+        </co-simple-grid-column>
+      </co-simple-grid>
+    </div>
+
+    <div class="stock-button-toolbar">
+      <div class="stock-button-left-group">
+        <co-button [label]="'HISTORY'" (click)="handleHistoryClick()"></co-button>
+      </div>
+      <div class="stock-button-middle-group">
+        <div class="button-left">
+          <co-button [textContent]="'Ok'" (click)="onOkClick()"></co-button>
+        </div>
+        <div class="button-right">
+          <co-button [textContent]="'Annuleren'" (click)="onCancelClick()"></co-button>
+        </div>
+      </div>
+    </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockInformationGridComponent.ctorParameters = () => [
+    { type: StockService }
+];
+StockInformationGridComponent.propDecorators = {
+    stock: [{ type: ViewChild, args: [StockInformationGridComponent,] }],
+    locationLineClicked: [{ type: Output }],
+    transferIconClicked: [{ type: Output }]
+};
+
+class StockLocationComponent {
+    constructor() {
+        this.backToStockLines = new EventEmitter();
+        this.MAX_GRID_ROWS = 10;
+        this.stockLocationColumns = [];
+        this.stockLocation = [
+            { location: "title 1", batch: "1", serieNo: "1", amountInStock: "1", allocated: "1", amountAvailable: "1" },
+            { location: "title 2", amountInStock: "2" },
+            { location: "title 3", amountInStock: "3" },
+            { location: "title 4", amountInStock: "4" },
+            { location: "title 5", amountInStock: "5" },
+        ];
+        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();
+    }
+    onStickerClick(event) {
+        console.log('test');
+    }
+    onOkClick() {
+    }
+    onCancelClick() {
+    }
+}
+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></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 = () => [];
+StockLocationComponent.propDecorators = {
+    backToStockLines: [{ type: Output }]
+};
+
+class StockTransferComponent {
+    constructor(_stockService) {
+        this._stockService = _stockService;
+        this.handleCancelClicked = new EventEmitter();
+        this.handleStickerClicked = new EventEmitter();
+        this.allWarehousesDropdownFields = { value: "warehouseNo", text: "description" };
+        this.showSendMethodDialog = false;
+    }
+    handleOkClick() {
+    }
+    handleCancelClick() {
+        this.handleCancelClicked.emit();
+    }
+    handleSelectedWarehouse(event) {
+        console.log(event);
+    }
+    handleStickerClick() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.handleStickerClicked.emit();
+            this.showSendMethodDialog = true;
+        });
+    }
+}
+StockTransferComponent.decorators = [
+    { type: Component, args: [{
+                selector: "co-stock-transfer",
+                template: `
+      <div class="stock-transfer">
+        <div class="stock-transfer-columns">
+          <div *ngIf="article" class="stock-transfer-left-column">
+            <co-input-text disabled
+                           [(model)]="article.standardWareHouse.description"
+                           [textContent]="article.standardWareHouse.description"
+                           [placeholder]="'Standaard magazijn'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="article.standardLocation"
+                           [textContent]="article.standardLocation"
+                           [placeholder]="'Standaard locatie'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="stockSticker.batch"
+                           [placeholder]="'Batch'">
+            </co-input-text>
+            <co-input-text disabled
+                           [(model)]="stockSticker.serial"
+                           [placeholder]="'Serie'">
+            </co-input-text>
+            <co-input-text
+              [(model)]="article.amount"
+              [placeholder]="'Aantal'">
+
+            </co-input-text>
+          </div>
+
+          <div class="stock-transfer-right-column">
+            <co-drop-down-list [collection]="allWarehouses"
+                               [fields]="allWarehousesDropdownFields"
+                               (modelChange)="handleSelectedWarehouse($event)"
+            >
+            </co-drop-down-list>
+            <co-drop-down-list>
+
+            </co-drop-down-list>
+            <co-input-text [placeholder]="'Voorraadstatus'">
+
+            </co-input-text>
+            <co-input-text [placeholder]="'Omschrijving'">
+
+            </co-input-text>
+          </div>
+        </div>
+
+        <div class="ok-cancel-buttons">
+          <co-button [textContent]="'Ok'" (click)="handleOkClick()"></co-button>
+          <co-button [textContent]="'Annuleren'" (click)="handleCancelClick()"></co-button>
+          <co-button [textContent]="'Sticker'" (click)="handleStickerClick()"></co-button>
+        </div>
+      </div>
+  `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+StockTransferComponent.ctorParameters = () => [
+    { type: StockService }
+];
+StockTransferComponent.propDecorators = {
+    stockSticker: [{ type: Input }],
+    article: [{ type: Input }],
+    articleWarehouse: [{ type: Input }],
+    allWarehouses: [{ type: Input }],
+    handleCancelClicked: [{ type: Output }],
+    handleStickerClicked: [{ type: Output }]
+};
+
+/** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
+var Icon;
+(function (Icon) {
+    Icon["ArrowFatRight"] = "arrow_fat_right";
+    Icon["ArrowPointDown"] = "arrow_point_down";
+    Icon["ArrowPointLeft"] = "arrow_point_left";
+    Icon["ArrowPointRight"] = "arrow_point_right";
+    Icon["CalendarDay"] = "calendar_day";
+    Icon["Cancel"] = "cancel";
+    Icon["DeliveryTruck"] = "delivery_truck";
+    Icon["EditPencil"] = "edit_pencil";
+    Icon["Email"] = "email";
+    Icon["Pdf"] = "pdf";
+    Icon["PlusRound"] = "plus_round";
+    Icon["Print"] = "print";
+    Icon["SignatureField"] = "signature_field";
+    Icon["Tag"] = "tag";
+    Icon["ThickLines"] = "thick_lines";
+    Icon["ThinLines"] = "thin_lines";
+    Icon["Txt"] = "txt";
+    Icon["Xml"] = "xml";
+})(Icon || (Icon = {}));
+
+/** AUTO GENERATED FILE. DO NOT CHANGE.. OR YOU WILL SUFFER THE CONSEQUENCES OF YOUR ACTIONS **/
+const IconSvg = {
+    "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_down": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-280 371 51 51\" enable-background=\"new -280 371 51 51\" ><path fill=\"#29363E\" d=\"M-248.3,392.2c0.3,0,0.6,0.1,0.8,0.3c0.5,0.5,0.5,1.2,0,1.6l-6.2,6.2c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0-0.6-0.1-0.8-0.3l-6.2-6.2c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.3,0.1-0.6,0.3-0.8c0.2-0.2,0.5-0.3,0.8-0.3c0.3,0,0.6,0.1,0.8,0.3l5.4,5.4l5.4-5.4C-248.9,392.4-248.6,392.2-248.3,392.2z\"/></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>",
+    "calendar_day": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 50 50\" enable-background=\"new 0 0 50 50\" ><g><path fill=\"#022D42\" d=\"M35.4,13.7H14.6c-0.6,0-1,0.5-1,1V20h22.9v-5.2C36.4,14.2,36,13.7,35.4,13.7z M19,18.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8c1,0,1.8,0.8,1.8,1.8C20.8,18,20,18.8,19,18.8z M31,18.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8C32.7,18,32,18.8,31,18.8z\"/><path fill=\"#022D42\" d=\"M35.4,22.3v12.6L31.3,39H14.6c0,0,0,0,0,0V22.3H35.4 M36.4,21.3H13.6V39c0,0.6,0.5,1,1,1h17.2l4.7-4.7V21.3L36.4,21.3z\"/><rect x=\"18.2\" y=\"10\" fill=\"#022D42\" width=\"1.6\" height=\"5.2\"/><rect x=\"30.2\" y=\"10\" fill=\"#022D42\" width=\"1.6\" height=\"5.2\"/><rect x=\"18.6\" y=\"30.5\" fill=\"#022D42\" width=\"3.4\" height=\"3.4\"/><rect x=\"19.1\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"19.1\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"19.1\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"22.2\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"25.4\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"31.6\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"24.8\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"28.5\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"24.8\" opacity=\"0.1\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"27.9\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"31\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/><rect x=\"16\" y=\"34.1\" opacity=\"0.25\" fill=\"#022D42\" width=\"2.4\" height=\"2.4\"/></g></svg>",
+    "cancel": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"36 35.16 30.45 35.16 14 14.84 19.55 14.84 36 35.16\" fill=\"#484f60\"/><polygon points=\"14 35.16 19.55 35.16 36 14.84 30.45 14.84 14 35.16\" fill=\"#484f60\"/></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>",
+    "edit_pencil": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><polygon points=\"12.54 38.16 12 37.62 14.85 29.64 20.52 35.31 12.54 38.16\" fill=\"#484f60\"/><rect x=\"16.33\" y=\"20.52\" width=\"17.99\" height=\"8.64\" transform=\"translate(-10.15 25.18) rotate(-45)\" fill=\"#484f60\"/><path d=\"M37.54,18.73,36,20.32l-6.11-6.1,1.59-1.59a1.55,1.55,0,0,1,2.2,0l3.91,3.9A1.55,1.55,0,0,1,37.54,18.73Z\" 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>",
+    "plus_round": "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"-288 379 35 35\" enable-background=\"new -288 379 35 35\" ><path fill=\"#29363E\" d=\"M-270.5,381.5c-8.3,0-15,6.7-15,15c0,8.3,6.7,15,15,15s15-6.7,15-15C-255.5,388.2-262.2,381.5-270.5,381.5z M-261.1,397.3c0,0.9-0.7,1.6-1.6,1.6h-5.5v5.5c0,0.9-0.7,1.6-1.6,1.6h-1.6c-0.9,0-1.6-0.7-1.6-1.6v-5.5h-5.5c-0.9,0-1.6-0.7-1.6-1.6v-1.6c0-0.9,0.7-1.6,1.6-1.6h5.5v-5.5c0-0.9,0.7-1.6,1.6-1.6h1.6c0.9,0,1.6,0.7,1.6,1.6v5.5h5.5c0.9,0,1.6,0.7,1.6,1.6V397.3z\"/></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>",
+    "tag": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M40,29.15v-.68a5.28,5.28,0,0,0-1.34-3.25L24.78,11.34A5.34,5.34,0,0,0,21.53,10H11.9A1.91,1.91,0,0,0,10,11.9v9.63a5.28,5.28,0,0,0,1.34,3.25L25.22,38.66A5.28,5.28,0,0,0,28.47,40h.68a5.28,5.28,0,0,0,3.24-1.34l6.27-6.27A5.28,5.28,0,0,0,40,29.15ZM13.13,16.72a2.54,2.54,0,1,1,3.59,0A2.55,2.55,0,0,1,13.13,16.72Zm15.9,19L17.84,24.55l1.34-1.34L30.37,34.4Zm2.69-2.69L20.52,21.87l1.35-1.35,11.19,11.2Zm2.68-2.69L23.21,19.18l1.34-1.34L35.75,29Z\" fill=\"#484f60\"/></svg>",
+    "thick_lines": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"12.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"21.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/><rect x=\"10\" y=\"30.67\" width=\"30\" height=\"7\" fill=\"#484f60\"/></svg>",
+    "thin_lines": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"10\" y=\"14.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/><rect x=\"10\" y=\"20.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/><rect x=\"10\" y=\"26.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/><rect x=\"10\" y=\"32.17\" width=\"30\" height=\"4\" fill=\"#484f60\"/></svg>",
+    "txt": "<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-9Zm6.68,2.36h-1.9V32h-1.3V26.63h-1.9V25.54h5.1ZM30.4,32,29,29.74,27.55,32H26l2.19-3.34-2-3.07h1.52L29,27.6l1.26-2.06h1.5l-2,3.12L32,32Zm6.86-5.32h-1.9V32H34.07V26.63H32.16V25.54h5.1Z\" 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 }
+];
+
+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) {
+        this.iconCacheService = iconCacheService;
+        this._stockService = _stockService;
+        this.icons = Icon;
+        this.sendOption = SendOption;
+        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.amountToPrint = 1;
+        this.showStandardPrinterOptions = false;
+        this.showPrinterSelections = false;
+        this.showExitButton = true;
+        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();
+    }
+    showClass() {
+        return true;
+    }
+    closeDialogClick() {
+        this.showDialog = false;
+    }
+    handleSignatureStart() {
+        this.startSignatureClicked.emit();
+    }
+    handlePrintClicked() {
+        this.printButtonClicked.emit();
+    }
+    togglePrinterSelection() {
+        if (!this.showPrinterSelections) {
+            this.showPrinterSelections = true;
+            this.headerTitle = 'Printer selectie';
+        }
+        else {
+            this.showPrinterSelections = false;
+            this.headerTitle = 'Verzendopties';
+        }
+    }
+}
+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">
+              <div class="lov-wrapper">
+                <co-input-combo-box
+                  [(model)]="selectedLayout"
+                  [collection]="layouts"
+                  [forceReadonly]="true"
+                  placeholder="Layout"
+                ></co-input-combo-box>
+              </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">
+                      <span class="printer-name" [textContent]="defaultPrinter"></span>
+                      <span class="printer-status" [textContent]="'Online'"></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)]="amountToPrint" [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)="togglePrinterSelection()">
+              <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]="'Online'"></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 }
+];
+SendMethodDialogComponent.propDecorators = {
+    showDialog: [{ type: Input }],
+    headerTitle: [{ type: Input }],
+    printerList: [{ 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
+                ],
+                exports: [
+                    SendMethodDialogComponent
+                ]
+            },] }
+];
+
+class StockModule {
+}
+StockModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    InputComboBoxModule,
+                    CoGridModule,
+                    ButtonModule,
+                    CommonModule,
+                    InputRadioButtonModule,
+                    DropDownModule,
+                    SimpleGridModule,
+                    ImageModule,
+                    InputTextModule,
+                    SendMethodDialogModule
+                ],
+                declarations: [
+                    StockComponent,
+                    StockInformationComponent,
+                    StockInformationGridComponent,
+                    StockLocationComponent,
+                    StockTransferComponent
+                ],
+                exports: [
+                    StockComponent
+                ],
+                providers: [
+                    StockService,
+                    IoneConnectorAdapterService
+                ]
+            },] }
+];
+
+/*
+ * Public API Surface of sharedcomponents
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DocsignComponent, DocsignModule, SendMethodDialogComponent, SendMethodDialogModule, StockComponent, StockModule, SignatureComponent as ɵa, SignaturesComponent as ɵb, StockService as ɵc, IoneConnectorAdapterService as ɵd, IconCacheService as ɵe, StockInformationComponent as ɵf, StockInformationGridComponent as ɵg, StockLocationComponent as ɵh, StockTransferComponent as ɵi };
+//# sourceMappingURL=colijnit-sharedcomponents.js.map