@colijnit/sharedcomponents 1.0.27 → 1.0.28

package/fesm2015/colijnit-sharedcomponents.js

@@ -1,30 +1,28 @@
 import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ViewChild, ElementRef, Input, Output, HostBinding, NgModule, Injectable, ChangeDetectorRef, HostListener } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ViewChild, ElementRef, Input, Output, HostBinding, NgModule, Injectable, ChangeDetectorRef, HostListener, Renderer2, Pipe, Inject, LOCALE_ID, NgZone, Directive } 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 { CommonModule, DatePipe } from '@angular/common';
 import SignaturePad from 'signature_pad';
-import { PrintStockStickers } from '@colijnit/sharedapi/build/model/print-stock-stickers';
-import { PrintPriceStickers } from '@colijnit/sharedapi/build/model/print-price-stickers.bo';
 import { Articles } from '@colijnit/articleapi/build/articles';
 import { Sharedapi } from '@colijnit/sharedapi/build/sharedapi';
 import { Printer } from '@colijnit/sharedapi/build/model/report/printer.bo';
-import { notNill } from '@colijnit/articleapi/build/utils/function/not-nill.function';
-import { ObjectUtils } from '@colijnit/articleapi/build/utils/object-utils';
+import { notNill as notNill$1 } from '@colijnit/articleapi/build/utils/function/not-nill.function';
+import { ObjectUtils as ObjectUtils$1 } 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 { DateUtils as DateUtils$1 } from '@colijnit/articleapi/build/utils/date-utils';
+import { NumberUtils as NumberUtils$1 } from '@colijnit/articleapi/build/utils/number-utils';
 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/sharedapi/build/model/print-stock-stickers';
 import { ArticleStock } from '@colijnit/articleapi/build/model/article-stock.bo';
 import { StockHistoryBo } from '@colijnit/articleapi/build/model/stock-history.bo';
 import { StockStickersPrintLayouts } from '@colijnit/sharedapi/build/model/report/stock-stickers-print-layouts.bo';
@@ -34,14 +32,16 @@ import { StockManagementWarehouses } from '@colijnit/articleapi/build/model/stoc
 import { StockLocation } from '@colijnit/articleapi/build/model/stock-location.bo';
 import { ArticleTransaction } from '@colijnit/articleapi/build/model/article-transaction.bo';
 import { BehaviorSubject } from 'rxjs';
+import { PrintPriceStickers } from '@colijnit/sharedapi/build/model/print-price-stickers.bo';
 import { GetStockHistoryRequest } from '@colijnit/articleapi/build/model/get-stock-history-request';
 import { ArticleStock as ArticleStock$1 } from '@colijnit/articleapi/build/model/article-stock';
-import { CoDialogPromptModule, InputCheckboxModule, InputComboBoxModule, IconModule, InputNumberPickerModule, CoDialogWizardModule, ButtonModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputTextareaModule } from '@colijnit/corecomponents_v12';
+import { CoDialogPromptModule, InputCheckboxModule, InputComboBoxModule, IconModule, InputNumberPickerModule, CoDialogWizardModule, ButtonModule, CoDialogModule, CoGridModule, InputRadioButtonModule, DropDownModule, SimpleGridModule, ImageModule, InputTextModule, InputTextareaModule, InputDatePickerModule } from '@colijnit/corecomponents_v12';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ArticleStockManagement } from '@colijnit/articleapi/build/model/article-stock-management';
 import { ArticleTransaction as ArticleTransaction$1 } from '@colijnit/articleapi/build/model/article-transaction';
 import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
+import * as moment from 'moment';
 
 class DocsignComponent {
     constructor() {
@@ -422,7 +422,7 @@ function ComplexField(type) {
         // 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}). ` +
+            console.warn(`@ComplexField(type): type was UNDEFINED. Called on prop (${ObjectUtils$1.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;
@@ -440,7 +440,7 @@ class ComplexFieldDecorator {
         if (!target || !propertyKey || typeof target !== "object") {
             return false;
         }
-        return (notNill(Reflect.getMetadata(PROP_META_KEY$3, target, propertyKey)));
+        return (notNill$1(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) {
@@ -473,7 +473,7 @@ function ComplexArray(type) {
         // 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}). ` +
+            console.warn(`@ComplexArray(type): type was UNDEFINED. Called on prop (${ObjectUtils$1.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;
@@ -491,7 +491,7 @@ class ComplexArrayDecorator {
         if (!target || !propertyKey || typeof target !== "object") {
             return false;
         }
-        return (notNill(Reflect.getMetadata(PROP_META_KEY$2, target, propertyKey)));
+        return (notNill$1(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.
@@ -633,7 +633,7 @@ class DateFieldFieldDecorator {
         return Reflect.hasMetadata(PROP_META_KEY$1, target, propertyKey);
     }
     static StringAsDate(str) {
-        return DateUtils.StringAsDate(str);
+        return DateUtils$1.StringAsDate(str);
     }
 }
 
@@ -672,7 +672,7 @@ class StringNumberDecorator {
         return Reflect.hasMetadata(PROP_META_KEY, target, propertyKey);
     }
     static StringAsNumber(str) {
-        return NumberUtils.ParseFloatKeepPrecision(str);
+        return NumberUtils$1.ParseFloatKeepPrecision(str);
     }
     static NumberAsString(nr) {
         return "" + nr;
@@ -684,6 +684,673 @@ function isNill(value) {
     return value === null || value === undefined;
 }
 
+// @returns true iff given value does not equals null and does not equal undefined
+function notNill(value) {
+    return value !== null && value !== undefined;
+}
+
+// Static utility function holder related to objects.
+class ObjectUtils {
+    /**
+     * Returns whether all given values exist: for all values it holds that they are not null nor undefined. Short-circuit check.
+     * @param {any} values Rest parameters with all objects to check existence for.
+     * @returns {boolean} True if ALL given values are not null nor undefined, otherwise false (if at least one value was null or undefined)
+     */
+    static AllExist(...values) {
+        let allExist = true;
+        for (let i = 0, len = values.length; i < len; i++) {
+            if (isNill(values[i])) {
+                allExist = false;
+                break;
+            }
+        }
+        return allExist;
+    }
+    /**
+     * Copies all properties from object 'from' to object 'to'. Overwrites properties on object 'to' if property already exists.
+     * Does not copy functions, only properties.
+     * @param {Object} from The source object from which to copy all properties of to the 'to' object.
+     * @param {Object} to The object to which the properties of the 'from' object will be copied.
+     * @param {boolean} [allowUndefined = true] wether the 'to' object may be assigned null or undefined values to any of its properties.
+     */
+    static CopyPropertiesFrom(from, to, allowUndefined = true) {
+        if (!to) {
+            to = {};
+        }
+        if (!from) {
+            return to;
+        }
+        ObjectUtils.ForOwnProperty(from, (value, key) => {
+            if (allowUndefined || notNill(value)) {
+                to[key] = value;
+            }
+        });
+        return to;
+    }
+    static DeepEquals(actual, expected) {
+        if (actual === expected) {
+            return true;
+        }
+        else if (actual instanceof Date && expected instanceof Date) {
+            return actual.getTime() === expected.getTime();
+        }
+        else if (!actual || !expected || typeof actual !== "object" && typeof expected !== "object") {
+            return actual === expected;
+        }
+        else {
+            return this._objEquiv(actual, expected);
+        }
+    }
+    // Performs given callback function for each own property of given plain object. Also works on string enums.
+    static ForOwnProperty(plainObject, callback) {
+        if (ObjectUtils.IsPlainObject(plainObject)) {
+            for (const key in plainObject) {
+                if (plainObject.hasOwnProperty(key) && typeof plainObject[key] !== "function") {
+                    const response = callback(plainObject[key], key);
+                    if (response === false) {
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    // Returns the class name of given argument. The argument can be an object or a class.
+    static GetClassName(objectOrClass) {
+        if (!objectOrClass) {
+            return undefined;
+            // arg was a class (or a function..)
+        }
+        else if (objectOrClass.constructor === Function) {
+            return objectOrClass.name; // .. which has its readable name stores like this
+            // else arg was an object
+        }
+        else {
+            const constructorString = objectOrClass.constructor.toString();
+            return constructorString.match(/\w+/g)[1];
+        }
+    }
+    // Returns a shallow clone of the given original object. The clone is a SIMPLE OBJECT with the same properties as the original.
+    static GetShallowClone(originalObject, objectClass) {
+        let clonedObject = undefined;
+        if (objectClass) {
+            clonedObject = new objectClass();
+        }
+        else {
+            clonedObject = {};
+        }
+        ObjectUtils.ForOwnProperty(originalObject, (value, key) => {
+            clonedObject[key] = value;
+        });
+        return clonedObject;
+    }
+    static GetDeepClone(originalObject, circular = true) {
+        // First create an empty object with
+        // same prototype of our original source
+        let propertyIndex;
+        let descriptor;
+        let keys;
+        let current;
+        let nextSource;
+        let indexOf;
+        const copies = [{
+                source: originalObject,
+                target: Object.create(Object.getPrototypeOf(originalObject))
+            }];
+        const cloneObject = copies[0].target;
+        const sourceReferences = [originalObject];
+        const targetReferences = [cloneObject];
+        // First in, first out
+        while (current = copies.shift()) { //NOSONAR
+            keys = Object.getOwnPropertyNames(current.source);
+            for (propertyIndex = 0; propertyIndex < keys.length; propertyIndex++) {
+                // Save the source's descriptor
+                descriptor = Object.getOwnPropertyDescriptor(current.source, keys[propertyIndex]);
+                if (!descriptor.value || typeof descriptor.value !== "object") {
+                    Object.defineProperty(current.target, keys[propertyIndex], descriptor);
+                    continue;
+                }
+                nextSource = descriptor.value;
+                descriptor.value = Array.isArray(nextSource) ?
+                    [] :
+                    Object.create(Object.getPrototypeOf(nextSource));
+                if (circular) {
+                    indexOf = sourceReferences.indexOf(nextSource);
+                    if (indexOf !== -1) {
+                        // The source is already referenced, just assign reference
+                        descriptor.value = targetReferences[indexOf];
+                        Object.defineProperty(current.target, keys[propertyIndex], descriptor);
+                        continue;
+                    }
+                    sourceReferences.push(nextSource);
+                    targetReferences.push(descriptor.value);
+                }
+                Object.defineProperty(current.target, keys[propertyIndex], descriptor);
+                copies.push({ source: nextSource, target: descriptor.value });
+            }
+        }
+        return cloneObject;
+    }
+    static IsEmpty(obj) {
+        return isNill(obj) || Object.getOwnPropertyNames(obj).length === 0;
+    }
+    // Returns whether given object is an existing, plain object. That is, it defined, its type if 'object' and it is NOT an array or func.
+    static IsPlainObject(object) {
+        return object !== null && !Array.isArray(object) && typeof object !== "function" && typeof object === "object";
+    }
+    /**
+     * Returns an instance of given class with data of given dataObject. Only works if that class has a default constructor without args.
+     * Does not actually create a new object if it alread is an instance of that class.
+     * @param {any} clazz A class that has a default constructor
+     * @param {any} [dataObject] The object with data to copy to the new instance of the class
+     * @returns {any} An object that is an instance of given class, with given data applied to it.
+     */
+    static MakeInstanceOf(clazz, dataObject) {
+        // dont make a clone if given dataObject already instance of clazz
+        if (dataObject instanceof clazz) {
+            return dataObject;
+        }
+        else {
+            const asClazz = new clazz();
+            ObjectUtils.CopyPropertiesFrom(dataObject, asClazz);
+            return asClazz;
+        }
+    }
+    // Returns the value of a random own property of given object.
+    static PickRandomPropertyValue(object) {
+        if (!object) {
+            return;
+        }
+        let result;
+        let count = 0;
+        for (const prop in object) {
+            if (object.hasOwnProperty(prop)) {
+                count++;
+                if (Math.random() < 1 / count) {
+                    result = object[prop];
+                }
+            }
+        }
+        return result;
+    }
+    // Returns a default if given value doesn't exist, otherwise just value.
+    static ValueOrDefault(value, defaultReturnVal = "") {
+        return notNill(value) ? value : defaultReturnVal;
+    }
+    static _isArguments(x) {
+        const supportsArgsClass = this._supportsArgumentsClass();
+        return supportsArgsClass ? this._isArgumentsWhenArgsClassSupported(x) : this._isArgumentsWhenArgsClassNotSupported(x);
+    }
+    static _isArgumentsWhenArgsClassNotSupported(object) {
+        return object &&
+            typeof object === "object" &&
+            typeof object.length === "number" &&
+            Object.prototype.hasOwnProperty.call(object, "callee") &&
+            !Object.prototype.propertyIsEnumerable.call(object, "callee") ||
+            false;
+    }
+    static _isArgumentsWhenArgsClassSupported(object) {
+        return Object.prototype.toString.call(object) === "[object Arguments]";
+    }
+    static _isBuffer(x) {
+        if (!x || typeof x !== "object" || typeof x.length !== "number") {
+            return false;
+        }
+        if (typeof x.copy !== "function" || typeof x.slice !== "function") {
+            return false;
+        }
+        return !(x.length > 0 && typeof x[0] !== "number");
+    }
+    static _isUndefinedOrNull(value) {
+        return value === null || value === undefined;
+    }
+    static _objEquiv(a, b) {
+        let i, key;
+        if (this._isUndefinedOrNull(a) || this._isUndefinedOrNull(b)) {
+            return false;
+        }
+        if (a.prototype !== b.prototype) {
+            return false;
+        }
+        if (this._isArguments(a)) {
+            if (!this._isArguments(b)) {
+                return false;
+            }
+            a = Array.prototype.slice.call(a);
+            b = Array.prototype.slice.call(b);
+            return this.DeepEquals(a, b);
+        }
+        if (this._isBuffer(a)) {
+            if (!this._isBuffer(b)) {
+                return false;
+            }
+            if (a.length !== b.length) {
+                return false;
+            }
+            for (i = 0; i < a.length; i++) {
+                if (a[i] !== b[i]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        let ka;
+        let kb;
+        try {
+            ka = Object.keys(a);
+            kb = Object.keys(b);
+        }
+        catch (e) {
+            return false;
+        }
+        if (ka.length !== kb.length) {
+            return false;
+        }
+        ka.sort();
+        kb.sort();
+        for (i = ka.length - 1; i >= 0; i--) {
+            if (ka[i] !== kb[i]) {
+                return false;
+            }
+        }
+        for (i = ka.length - 1; i >= 0; i--) {
+            key = ka[i];
+            if (!this.DeepEquals(a[key], b[key])) {
+                return false;
+            }
+        }
+        return typeof a === typeof b;
+    }
+    static _supportsArgumentsClass() {
+        return Object.prototype.toString.call(arguments) === "[object Arguments]";
+    }
+}
+
+// Static utility function holder related to numeric variable evaluations and operations.
+class NumberUtils {
+    // For user-typed number input; supports comma's as decimal delimiter.
+    static ParseIntNumberInput(arg) {
+        return NumberUtils.ParseInt(NumberUtils._NumberInputToNumberStr(arg));
+    }
+    // Parses given argument to an integer, using a native parseInt() function with a radix of 10. Returns NaN if parsing was not possible.
+    static ParseInt(arg) {
+        if (isNill(arg) || Array.isArray(arg)) {
+            return undefined;
+        }
+        return parseInt(arg, 10);
+    }
+    // For user-typed number input; supports comma's as decimal delimiter.
+    static ParseFloatNumberInput(arg, decimalPrecision = 2) {
+        return NumberUtils.ParseFloat(NumberUtils._NumberInputToNumberStr(arg), decimalPrecision);
+    }
+    static ParseFloatNumberInputKeepPrecision(arg) {
+        const correctedInputStr = NumberUtils._NumberInputToNumberStr(arg);
+        const decimalPrecision = this.GetDecimalPlaces(correctedInputStr);
+        return NumberUtils.ParseFloat(correctedInputStr, decimalPrecision);
+    }
+    /**
+     * Returns given arg as a float number with given decimal precision, if possible. Returns NaN if parse conversion failed.
+     *
+     * @param {any} arg The argument to parse to a float
+     * @param {number} decimalPrecision The number of decimals, or the precision, the parsed return float should have
+     * @returns {number} NaN if not possible, else the parsed float value
+     */
+    static ParseFloat(arg, decimalPrecision = 2) {
+        if (!ObjectUtils.AllExist(arg, decimalPrecision) || Array.isArray(arg)) {
+            return NaN;
+        }
+        if (!NumberUtils.IsInteger(decimalPrecision) || decimalPrecision < 0) {
+            decimalPrecision = 2;
+            // toFixed() can only handle up until 20
+        }
+        else if (decimalPrecision > 20) {
+            decimalPrecision = 20;
+        }
+        return parseFloat(parseFloat(arg).toFixed(decimalPrecision));
+    }
+    /**
+     * Returns given arg as a float number with given decimal precision, if possible. Returns NaN if parse conversion failed.
+     *
+     * @param arg The argument to parse to a float
+     * @returns {number} The argument as a float with its original decimal precision intact
+     */
+    static ParseFloatKeepPrecision(arg) {
+        const decimalPrecision = this.GetDecimalPlaces(arg);
+        return this.ParseFloat(arg, decimalPrecision);
+    }
+    /**
+     * Returns the given argument as a number. Returns given defaultValue if conversion of argument was impossible.
+     * @param arg
+     * @param {number} [defaultValue = 0]
+     * @returns {number}
+     */
+    static ParseNumberOrDefault(arg, defaultValue = 0) {
+        if (Array.isArray(arg)) {
+            return defaultValue;
+        }
+        if (!NumberUtils.IsNumber(arg)) {
+            arg = parseFloat(arg);
+            arg = isNaN(arg) ? defaultValue : arg;
+        }
+        return arg;
+    }
+    // Returns true iff given argument is an integer number. Returns false on non-numbers or numbers with significant decimals.
+    static IsInteger(arg) {
+        if (isNaN(arg) || Array.isArray(arg)) {
+            return false;
+        }
+        const argAsFloat = parseFloat(arg);
+        return ((argAsFloat | 0) === argAsFloat); // returns whether 'arg converted to an integer equals arg'
+    }
+    // Returns the number of decimal places of the given number. Returns 0 if no decimals whatsoever could be found on given arg.
+    static GetDecimalPlaces(arg, maxAnswer = 1000) {
+        const match = ("" + arg).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+        if (!match) {
+            return 0;
+        }
+        let answer = Math.max(0, 
+        // number of digits right of decimal point.
+        (match[1] ? match[1].length : 0)
+            // adjust for scientific notation
+            - (match[2] ? +match[2] : 0));
+        if (answer > maxAnswer) {
+            answer = maxAnswer;
+        }
+        return answer;
+    }
+    // Parses given numberInput to a number, or returns given defaultValue if parse not possible. Allows ',' char as decimal delimiter.
+    static ParseNumberInputOrDefault(numberInput, defaultValue = 0) {
+        return NumberUtils.ParseNumberOrDefault(NumberUtils._NumberInputToNumberStr(numberInput), defaultValue);
+    }
+    // Returns whether the type of given argument is 'number'.
+    static IsNumber(arg) {
+        return typeof arg === "number" && !isNaN(arg);
+    }
+    /**
+     * Returns whether given arg is indeed not a number (it's NaN or it has another type than 'number')
+     * Our exact copy of AS Flex'es isNaN(arg) function. Always use this method for copying Flex isNaN(..) occurences into TypeScript.
+     * @param arg
+     * @returns {boolean}
+     * @constructor
+     */
+    static IsNaN(arg) {
+        return isNaN(arg) || !NumberUtils.IsNumber(arg);
+    }
+    // Our copy of CoMath.NaN. Returns number, or substitute if NumberUtils.IsNaN(number) holds true.
+    static NaN(number, substitute = 0) {
+        return NumberUtils.IsNaN(number) ? substitute : number;
+    }
+    // Returns whether the value is parasable as a number.
+    static IsParsableNumber(arg) {
+        if (Array.isArray(arg)) {
+            return false;
+        }
+        return !isNaN(parseFloat(arg));
+    }
+    static IsParsableNumberInput(numberInput) {
+        return NumberUtils.IsParsableNumber(NumberUtils._NumberInputToNumberStr(numberInput));
+    }
+    /**
+     * Returns whether given arg is parseable as a number, and whether the lengts of its number parse result is equal to its original length.
+     * I.e. this function returns FALSE with given number-parsable strings, but that have non-numeric appendices, eg '2233ff'. That arg
+     * IS number-parseable, but not a strict 'string number', the latter being what this method actually checks for.
+     */
+    static IsStringNumber(arg) {
+        if (!NumberUtils.IsParsableNumber(arg)) {
+            return false;
+        }
+        else {
+            return arg.toString().length === parseFloat(arg).toString().length;
+        }
+    }
+    static IsListOfNumbers(arg, separator = ",") {
+        const nrs = arg.split(separator);
+        if (nrs.length === 0) {
+            return false;
+        }
+        return nrs.filter(s => NumberUtils.IsStringNumber(s)).length === nrs.length;
+    }
+    // Returns given argument as a string representation of a number parse, e.g. "1" for a number parse result of arg to 1.
+    static ParseStringNumber(arg) {
+        if (!this.IsStringNumber(arg)) {
+            return NaN;
+        }
+        return NumberUtils.ParseFloatKeepPrecision(arg);
+    }
+    static ParseStringNumberDefault(arg, defaultValue = 0) {
+        return NumberUtils.NaN(NumberUtils.ParseStringNumber(arg), defaultValue);
+    }
+    /**
+     * Returns a random integer in range [lowerBound .. upperBound], an inclusive range. Returns NaN if not possible.
+     * Given bounds are truncated first, before serving as the true lower- and upper bounds for the random int.
+     */
+    static RandomInt(lowerBoundInt, upperBoundInt) {
+        if (!NumberUtils.IsNumber(lowerBoundInt) || !NumberUtils.IsNumber(upperBoundInt) || lowerBoundInt > upperBoundInt) {
+            return NaN;
+        }
+        lowerBoundInt = Math.trunc(lowerBoundInt);
+        upperBoundInt = Math.trunc(upperBoundInt);
+        if (lowerBoundInt === upperBoundInt) {
+            return lowerBoundInt;
+        }
+        const delta = upperBoundInt - lowerBoundInt;
+        return (Math.round(Math.random() * delta) + lowerBoundInt);
+    }
+    // Adds thousands comma's to given value, E.g. '1000' to '1,000'. Returns empty string if value was undefined.
+    static AddThousandsCommasTo(value) {
+        if (isNill(value)) {
+            return "";
+        }
+        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+    /**
+     * Function used to check wether a given number is composed of another number, power-of-two wise.
+     * Example usage: NumberUtils.NumIsComposedOf(articleListObject.publication, ArticlePublication.Selector).
+     * This would return whether or not that articleListObject was publicated for selector or not, where articleListObject.publication
+     * was possibly a 'COMPOSITE that was made out of (including)' ArticlePublication.Selector.
+     */
+    static NumIsComposedOfOtherPowTwoNum(bigNrToCheck, powTwoNumItShouldBeComposedOf) {
+        if (!bigNrToCheck) {
+            return false;
+        }
+        else if (!powTwoNumItShouldBeComposedOf) {
+            return true;
+        }
+        else {
+            return ((bigNrToCheck & powTwoNumItShouldBeComposedOf) === powTwoNumItShouldBeComposedOf);
+        }
+    }
+    /**
+     * Returns given nr, or the given default number (default 0) if the nr number was undefined or otherwise not a number.
+     * Same as CoMath.NaN from AS code (used as its substitute in transaction logic)
+     * @param nr
+     * @param defaultNr
+     * @returns {number}
+     */
+    static NrOrDefault(nr, defaultNr = 0) {
+        if (notNill(nr) && NumberUtils.IsNumber(nr)) {
+            return nr;
+        }
+        else {
+            return defaultNr;
+        }
+    }
+    /**
+     * Returns whether given nrToCheck is within the given precision and scale limits. Precision and scale, here, are Oracle DB terms.
+     * This function can thus be used to check whether the given number is safe to send to the 'database' beforehand, if we know the
+     * precision and scale of the number in the db declaration.
+     *
+     * I.e. A number declared in the Oracle DB as number(5, 2) has a precision of 5 and a scale of 2.
+     *
+     * @param {number} nrToCheck
+     * @param {number} precision The number of significant digits, including possibly negative scale. E.g. 3 in '123' and 5 in '51.123'
+     * @param {number} [scale = 0] The number of significant digits AFTER the decimal point. E.g. 1 in 5432.1 and 3 in 54000.003
+     * @returns {CheckPrecisionAndScaleResult} Whether given nrToCheck is ok for given precision and scale, and if not, the
+     * nearest number that IS ok for those constraints.
+     */
+    static CheckPrecisionAndScale(nrToCheck, precision, scale = 0) {
+        // let's say any undefined number is checked OK, and all numbers are checked OK for an undefined precision
+        if (!ObjectUtils.AllExist(nrToCheck, precision, scale)) {
+            return { isOk: true, nearestOkNr: NaN };
+        }
+        // no number can have 0 or less than 0 significant digits, in our universe
+        if (precision < 1 || precision - scale < 1) {
+            return { isOk: false, nearestOkNr: NaN };
+        }
+        // begin check
+        const isNegative = (nrToCheck < 0);
+        const nrParts = nrToCheck.toString().split(".");
+        // remove minus sign if negative
+        if (isNegative) {
+            nrParts[0] = nrParts[0].slice(1);
+        }
+        const numCountBeforeDot = nrParts[0].length;
+        const allowedNumCountBeforeDot = precision - scale;
+        if (numCountBeforeDot <= allowedNumCountBeforeDot) {
+            return { isOk: true, nearestOkNr: nrToCheck };
+        }
+        else {
+            // cut a part from the "before decimal number" so that the number is not too big anymore
+            const numCountToRemove = numCountBeforeDot - allowedNumCountBeforeDot;
+            // remove the right-most numbers before the decimal dot
+            nrParts[0] = nrParts[0].slice(0, -1 * numCountToRemove);
+            // add minus sign again if it was negative
+            if (isNegative) {
+                nrParts[0] = "-" + nrParts[0];
+            }
+            // build and return composite number again
+            let nearestOkNr;
+            if (nrParts[1]) {
+                nearestOkNr = Number(nrParts[0] + "." + nrParts[1]);
+            }
+            else {
+                nearestOkNr = Number(nrParts[0]);
+            }
+            return { isOk: false, nearestOkNr: nearestOkNr };
+        }
+    }
+    /**
+     * Returns whether given x is OK within the given min, max and step boundaries, where it should hold that nrToCheck = min + N * step,
+     * with N integer or 0.
+     * @param {number} nrToCheck Number to check whether it's within the given bounds
+     * @param min Inclusive
+     * @param max Inclusive
+     * @param stepSize
+     * @returns {CheckWithinSteppedBounds} Returns remainder of undefined when nrToCheck was OUTSIDE [min, max], else full result object.
+     */
+    static CheckWithinSteppedBounds(nrToCheck, min, max, stepSize = 1) {
+        if (nrToCheck < min || nrToCheck > max) {
+            return { isOk: false, remainder: undefined };
+        }
+        // we're in [min, max], but still check if nrToCheck = min + N * step holds (for N integer or 0)
+        let remainder = (nrToCheck - min) % stepSize;
+        // correct float for largest precision amongst input numbers
+        remainder = NumberUtils.ParseFloat(remainder, NumberUtils._GetLargestDecimalPrecisionOf(nrToCheck, min, stepSize));
+        return { isOk: (remainder === 0), remainder: remainder };
+    }
+    /**
+     * Finds the number closest to the originalNumber, that adheres to the given bounds. That is, for which it holds that
+     * nr = min + N * step with N integer or 0.
+     * @param {number} originalNr Find closest answer to this number
+     * @param min Inclusive
+     * @param max Inclusive
+     * @param stepSize
+     * @returns {boolean} The closest OK number for bounds.
+     */
+    static GetNearestNumberWithinSteppedBounds(originalNr, min, max, stepSize = 1) {
+        if (originalNr < min) {
+            return min;
+        }
+        else if (originalNr > max) {
+            return NumberUtils.GetTrueSteppedBoundsMax(min, max, stepSize);
+        }
+        const boundsCheck = NumberUtils.CheckWithinSteppedBounds(originalNr, min, max, stepSize);
+        if (boundsCheck.isOk) {
+            return originalNr;
+        }
+        let answer;
+        const remainder = boundsCheck.remainder;
+        if (remainder) {
+            // round up or down?
+            if ((remainder / stepSize) < 0.5) {
+                //  round down, but not below min
+                answer = (originalNr - remainder >= min ? originalNr - remainder : min);
+            }
+            else {
+                // round up, but not above max
+                answer = (originalNr + stepSize - remainder <= max ? originalNr + stepSize - remainder :
+                    NumberUtils.GetTrueSteppedBoundsMax(min, max, stepSize));
+            }
+        }
+        else {
+            // is this real life, why wasn't our stepped bounds check OK?
+            answer = originalNr;
+        }
+        // 'correct' float errors
+        answer = NumberUtils.ParseFloat(answer, NumberUtils._GetLargestDecimalPrecisionOf(originalNr, min, max, stepSize));
+        return answer;
+    }
+    /**
+     * Returns the true maximum allowed value for the given "stepped bounds": min, stepSize and max, for which it holds that each allowed
+     * value Y = min + stepSize * N, for any INTEGER or 0 N where it also holds, of course, that Y <= max.
+     * @param min
+     * @param max
+     * @param stepSize
+     */
+    static GetTrueSteppedBoundsMax(min, max, stepSize = 1) {
+        // solve max integer X in formula min + X * step <= max, and return min + X * stepSize for that X
+        const maxSteps = Math.floor((max - min) / stepSize);
+        // 'correct' float errors
+        return NumberUtils.ParseFloat(min + maxSteps * stepSize, NumberUtils._GetLargestDecimalPrecisionOf(min, min, max));
+    }
+    // Returns the nearest number, relative to the given originalNr, that is within the given [min, max] inclusive bounds.
+    static GetNearestNumberWithinBounds(originalNr, min, max) {
+        let answer = originalNr;
+        if (originalNr < min) {
+            answer = min;
+        }
+        else if (originalNr > max) {
+            answer = max;
+        }
+        return answer;
+    }
+    // Returns the string representation of given number. If it's not a number, returns the empty string.
+    static ToString(nr) {
+        if (!NumberUtils.IsNaN(nr)) {
+            return "" + nr;
+        }
+        else {
+            return "";
+        }
+    }
+    static DecimalsToStepIncrement(numberOfDecimals) {
+        return Math.pow(10, -1 * numberOfDecimals);
+    }
+    static Round(value, decimals) {
+        const factor = Math.pow(10, decimals);
+        return Math.round(value * factor) / factor;
+    }
+    // @returns The inclusive max value
+    static PrecisionScaleToMaxValue(precision, scale) {
+        const oneStep = this.DecimalsToStepIncrement(scale);
+        const maxExclusive = Math.pow(10, precision - scale);
+        return maxExclusive - oneStep;
+    }
+    // @returns the difference between given 2 numbers
+    static DifferenceBetweenNumbers(numberA, numberB) {
+        return Math.abs(numberA - numberB);
+    }
+    static _GetLargestDecimalPrecisionOf(...args) {
+        const result = ArrayUtils.GetMaxCalculatedValue(args, (arg) => {
+            return NumberUtils.GetDecimalPlaces(arg);
+        });
+        return result;
+    }
+    // Returns given number input as a number that's useable by Javascript. Allows for incoming ',' decimal delimiter.
+    static _NumberInputToNumberStr(numberInput) {
+        return (numberInput + "").replace(",", ".");
+    }
+}
+
 class ArrayUtils {
     /**
      * Returns whether at least one element in given array could be found by given finder function.
@@ -807,7 +1474,7 @@ class ArrayUtils {
     }
     // 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)) {
+        if (isNill(arrayToCheck)) {
             return false;
         }
         if (Array.isArray(arrayToCheck) && arrayToCheck.length > 0) {
@@ -839,7 +1506,7 @@ class ArrayUtils {
         return atLeastOneRemoved;
     }
     static MoveElement(element, toIndex, array) {
-        if (!Array.isArray(array) || isNill$1(toIndex)) {
+        if (!Array.isArray(array) || isNill(toIndex)) {
             return false;
         }
         const fromIndex = array.indexOf(element);
@@ -861,6 +1528,25 @@ class ArrayUtils {
             }
         }
     }
+    /**
+     * Returns max value from all resulting values from applying given itemValueFunction to all items of given array.
+     * @param array
+     * @param itemValueFunction The function applied to each array item that gives it a numerical value. The max num val found is returned.
+     */
+    static GetMaxCalculatedValue(array, itemValueFunction) {
+        if (!array || !itemValueFunction) {
+            return NaN;
+        }
+        let max = undefined;
+        const len = array.length;
+        for (let i = 0; i < len; i++) {
+            const valueCur = itemValueFunction.call(this);
+            if (valueCur > max) {
+                max = valueCur;
+            }
+        }
+        return max;
+    }
 }
 
 /**
@@ -1421,13 +2107,13 @@ class SharedConnectorService {
             });
         });
     }
-    getArticleDetails(data) {
+    getOrderConfirmationDefaultSendMethod(relationId) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                return this.articleConnector.getArticleDetails(data).then((result) => {
+                return this.sharedConnector.getOrderConfirmationDefaultSendMethod(relationId).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        if (result.resultObjects) {
-                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleDetailsBo, result.resultObjects));
+                        if (result.resultObject) {
+                            resolve(result.resultObject);
                         }
                     }
                     else {
@@ -1437,43 +2123,91 @@ class SharedConnectorService {
             });
         });
     }
-    updateArticleDetails(data) {
+    getDefaultEmailAddressListForOrderConfirmation(transactionUUID) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                return this.articleConnector.updateArticleDetails(data).then((result) => __awaiter(this, void 0, void 0, function* () {
+                return this.sharedConnector.getDefaultEmailAddressListForOrderConfirmation(transactionUUID).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        yield this.commit();
-                        resolve(true);
+                        if (result.resultObject) {
+                            resolve(result.resultObject);
+                        }
                     }
                     else {
                         reject(result.validationMessagesAsString);
                     }
-                }));
+                });
             });
         });
     }
-    lockArticleDetails(data) {
+    getPurchaseOrderEmailLayouts(transactionUUID) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                return this.articleConnector.lockArticleDetails(data).then((result) => __awaiter(this, void 0, void 0, function* () {
+                return this.sharedConnector.getPurchaseOrderEmailLayouts(transactionUUID).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
-                        yield this.commit();
-                        resolve(true);
+                        if (result.resultObject) {
+                            resolve(result.resultObject);
+                        }
                     }
                     else {
                         reject(result.validationMessagesAsString);
                     }
-                }));
+                });
             });
         });
     }
-    getStockStatus() {
+    getArticleDetails(data) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise((resolve, reject) => {
-                return this.articleConnector.getStockState().then((result) => {
+                return this.articleConnector.getArticleDetails(data).then((result) => {
                     if (result.validationResult && result.validationResult.success) {
                         if (result.resultObjects) {
-                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockStatus, result.resultObjects));
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(ArticleDetailsBo, result.resultObjects));
+                        }
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                });
+            });
+        });
+    }
+    updateArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.updateArticleDetails(data).then((result) => __awaiter(this, void 0, void 0, function* () {
+                    if (result.validationResult && result.validationResult.success) {
+                        yield this.commit();
+                        resolve(true);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                }));
+            });
+        });
+    }
+    lockArticleDetails(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.lockArticleDetails(data).then((result) => __awaiter(this, void 0, void 0, function* () {
+                    if (result.validationResult && result.validationResult.success) {
+                        yield this.commit();
+                        resolve(true);
+                    }
+                    else {
+                        reject(result.validationMessagesAsString);
+                    }
+                }));
+            });
+        });
+    }
+    getStockStatus() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                return this.articleConnector.getStockState().then((result) => {
+                    if (result.validationResult && result.validationResult.success) {
+                        if (result.resultObjects) {
+                            resolve(this._boFactory.makeBOArrayFromRawBackendDataArray(StockStatus, result.resultObjects));
                         }
                     }
                     else {
@@ -1532,8 +2266,6 @@ SharedConnectorService.ctorParameters = () => [
 class StockService {
     constructor(_sharedService) {
         this._sharedService = _sharedService;
-        this.printSticker = new PrintStockStickers();
-        this.printPriceSticker = new PrintPriceStickers();
     }
     getPrintStockStickers(data) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -1593,6 +2325,21 @@ class StockService {
             return yield this._sharedService.getStockManagementLocations(warehouseNo);
         });
     }
+    getOrderConfirmationDefaultSendMethod(relationId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getOrderConfirmationDefaultSendMethod(relationId);
+        });
+    }
+    getDefaultEmailAddressListForOrderConfirmation(transactionUUID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getDefaultEmailAddressListForOrderConfirmation(transactionUUID);
+        });
+    }
+    getPurchaseOrderEmailLayouts(transactionUUID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this._sharedService.getPurchaseOrderEmailLayouts(transactionUUID);
+        });
+    }
     getArticleTransaction(data) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this._sharedService.getArticleTransaction(data);
@@ -1814,8 +2561,13 @@ const IconSvg = {
     "delete_left_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 576 512\"><path d=\"M432.1 208.1L385.9 256L432.1 303C442.3 312.4 442.3 327.6 432.1 336.1C423.6 346.3 408.4 346.3 399 336.1L352 289.9L304.1 336.1C295.6 346.3 280.4 346.3 271 336.1C261.7 327.6 261.7 312.4 271 303L318.1 256L271 208.1C261.7 199.6 261.7 184.4 271 175C280.4 165.7 295.6 165.7 304.1 175L352 222.1L399 175C408.4 165.7 423.6 165.7 432.1 175C442.3 184.4 442.3 199.6 432.1 208.1V208.1zM512 64C547.3 64 576 92.65 576 128V384C576 419.3 547.3 448 512 448H205.3C188.3 448 172 441.3 160 429.3L9.372 278.6C3.371 272.6 0 264.5 0 256C0 247.5 3.372 239.4 9.372 233.4L160 82.75C172 70.74 188.3 64 205.3 64L512 64zM528 128C528 119.2 520.8 112 512 112H205.3C201 112 196.9 113.7 193.9 116.7L54.63 256L193.9 395.3C196.9 398.3 201 400 205.3 400H512C520.8 400 528 392.8 528 384V128z\"/></svg>",
     "delivery_truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><rect x=\"15.35\" y=\"16.56\" width=\"15.14\" height=\"10.94\" transform=\"translate(-1.83 2.08) rotate(-5)\" fill=\"#484f60\"/><path d=\"M38.5,18.1l-6.9.61L32.41,28l-7.63.67a3.76,3.76,0,0,1,1.43,2.25l7.25-.63A3.83,3.83,0,0,1,41,29.6l1-.1-.52-6Zm.29,5.84-3.91.34a.51.51,0,0,1-.55-.46L34,20.1a.49.49,0,0,1,.45-.54l2.27-.2a.5.5,0,0,1,.48.25l2,3.59A.5.5,0,0,1,38.79,23.94Z\" fill=\"#484f60\"/><path d=\"M19.66,29.09a3.8,3.8,0,0,0-1,2.46l-.74.07-1.82-.94L16,29.41Z\" fill=\"#484f60\"/><path d=\"M34.56,30.62a2.74,2.74,0,1,0,2.49-3A2.73,2.73,0,0,0,34.56,30.62Z\" fill=\"#484f60\"/><path d=\"M19.74,31.91a2.74,2.74,0,1,0,2.49-3A2.74,2.74,0,0,0,19.74,31.91Z\" fill=\"#484f60\"/><rect x=\"7.96\" y=\"17.63\" width=\"5\" height=\"1\" transform=\"translate(-1.54 0.98) rotate(-5)\" fill=\"#484f60\"/><rect x=\"11.02\" y=\"29.71\" width=\"3\" height=\"1\" transform=\"translate(-2.59 1.21) rotate(-5)\" fill=\"#484f60\"/><rect x=\"9.48\" y=\"23.53\" width=\"4\" height=\"1\" transform=\"matrix(1, -0.09, 0.09, 1, -2.05, 1.09)\" fill=\"#484f60\"/></svg>",
     "email": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.79,38.45A17.82,17.82,0,0,1,23.86,40,13.09,13.09,0,0,1,10.41,26.42C10.41,17.63,16.83,10,26.53,10c7.63,0,13.06,5.21,13.06,12.46,0,6.33-3.53,10.3-8.19,10.3a3.42,3.42,0,0,1-3.71-3.32h-.08A6.5,6.5,0,0,1,22,32.76c-2.75,0-4.82-2.11-4.82-5.65a9.85,9.85,0,0,1,10.13-10,12.89,12.89,0,0,1,5.13,1l-1.3,8c-.43,2.54-.13,3.71,1.08,3.75,1.85.09,4.18-2.28,4.18-7.28,0-5.65-3.62-10-10.3-10S13.73,17.76,13.73,26c0,7.25,4.57,11.3,11,11.3A14.81,14.81,0,0,0,31,36ZM28,20.65a5.34,5.34,0,0,0-1.33-.18c-2.85,0-5.09,2.81-5.09,6.12,0,1.64.73,2.68,2.16,2.68,1.59,0,3.27-2,3.66-4.53Z\" fill=\"#484f60\"/></svg>",
+    "envelope_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z\"/></svg>",
+    "file_pdf_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M320 464C328.8 464 336 456.8 336 448V416H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V416H48V448C48 456.8 55.16 464 64 464H320zM256 160C238.3 160 224 145.7 224 128V48H64C55.16 48 48 55.16 48 64V192H0V64C0 28.65 28.65 0 64 0H229.5C246.5 0 262.7 6.743 274.7 18.75L365.3 109.3C377.3 121.3 384 137.5 384 154.5V192H336V160H256zM88 224C118.9 224 144 249.1 144 280C144 310.9 118.9 336 88 336H80V368C80 376.8 72.84 384 64 384C55.16 384 48 376.8 48 368V240C48 231.2 55.16 224 64 224H88zM112 280C112 266.7 101.3 256 88 256H80V304H88C101.3 304 112 293.3 112 280zM160 240C160 231.2 167.2 224 176 224H200C226.5 224 248 245.5 248 272V336C248 362.5 226.5 384 200 384H176C167.2 384 160 376.8 160 368V240zM192 352H200C208.8 352 216 344.8 216 336V272C216 263.2 208.8 256 200 256H192V352zM336 224C344.8 224 352 231.2 352 240C352 248.8 344.8 256 336 256H304V288H336C344.8 288 352 295.2 352 304C352 312.8 344.8 320 336 320H304V368C304 376.8 296.8 384 288 384C279.2 384 272 376.8 272 368V240C272 231.2 279.2 224 288 224H336z\"/></svg>",
+    "file_pdf_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 224H88c30.9 0 56 25.1 56 56s-25.1 56-56 56H80v32c0 8.8-7.2 16-16 16s-16-7.2-16-16V320 240c0-8.8 7.2-16 16-16zm24 80c13.3 0 24-10.7 24-24s-10.7-24-24-24H80v48h8zm72-64c0-8.8 7.2-16 16-16h24c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H176c-8.8 0-16-7.2-16-16V240zm32 112h8c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16h-8v96zm96-128h48c8.8 0 16 7.2 16 16s-7.2 16-16 16H304v32h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H304v48c0 8.8-7.2 16-16 16s-16-7.2-16-16V304 240c0-8.8 7.2-16 16-16z\"/></svg>",
     "pdf": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.88c-2.16,0-2.72-.56-2.72-2.72V12.88c0-2.15.56-2.71,2.72-2.71h11.6l8.66,8.88v3.43H32.8V19.6l-7.88-8.09h-11c-1.38,0-1.38,0-1.38,1.37V37.45c0,1.37,0,1.37,1.38,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M27.83,26.63v4.24h1a3.57,3.57,0,0,0,.78-.06,1.22,1.22,0,0,0,.52-.26,1.44,1.44,0,0,0,.34-.62,4.13,4.13,0,0,0,.13-1.18,3.79,3.79,0,0,0-.13-1.14,1.51,1.51,0,0,0-.37-.62,1.14,1.14,0,0,0-.6-.3,5.93,5.93,0,0,0-1.06-.06Z\" fill=\"#484f60\"/><path d=\"M21.86,26.63v1.82h.71a3.57,3.57,0,0,0,1-.1A.88.88,0,0,0,24,28a.84.84,0,0,0,.14-.5.8.8,0,0,0-.2-.57.88.88,0,0,0-.52-.29,6.36,6.36,0,0,0-.93,0Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm6.12,4.24a1.68,1.68,0,0,1-.54.63,1.9,1.9,0,0,1-.67.3,6.57,6.57,0,0,1-1.34.1h-.85V32H20.57V25.54h2.07a7.75,7.75,0,0,1,1.54.1,1.73,1.73,0,0,1,.93.63,2,2,0,0,1,.37,1.25A2,2,0,0,1,25.26,28.51Zm6.45,1.66A2.91,2.91,0,0,1,31,31.31a2.28,2.28,0,0,1-.91.51A4,4,0,0,1,29,32H26.54V25.54H28.9a4.21,4.21,0,0,1,1.22.13,2.08,2.08,0,0,1,1,.59,2.79,2.79,0,0,1,.61,1,4.76,4.76,0,0,1,.21,1.52A4.19,4.19,0,0,1,31.71,30.17Zm5.7-3.54h-3.1v1.52H37v1.08H34.31V32H33V25.54h4.39Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/></svg>",
     "print": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M38,16.5H12a2,2,0,0,0-2,2v9a2,2,0,0,0,2,2h2v-5H36v5h2a2,2,0,0,0,2-2v-9A2,2,0,0,0,38,16.5ZM37,21a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,37,21Z\" fill=\"#484f60\"/><path d=\"M35,11.5v5H15v-5H35m1-1H14v7H36v-7Z\" fill=\"#484f60\"/><path d=\"M35,25.5v13H15v-13H35m1-1H14v15H36v-15Z\" fill=\"#484f60\"/><rect x=\"17\" y=\"28.3\" width=\"16\" height=\"0.8\" fill=\"#484f60\"/><rect x=\"17\" y=\"31.5\" width=\"16\" height=\"0.8\" fill=\"#484f60\"/><rect x=\"17\" y=\"34.7\" width=\"16\" height=\"0.8\" fill=\"#484f60\"/></svg>",
+    "print_regular": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M111.1 48h254.1L400 81.94V160H448V81.94c0-12.73-5.057-24.94-14.06-33.94l-33.94-33.94C391 5.057 378.8 0 366.1 0H111.1C85.49 0 64.01 21.48 64 47.98l.002 82.28c-.002 0 .002 0 0 0L64 160h48.01L111.1 48zM440 192H72C32.3 192 0 224.3 0 264v112c0 13.25 10.75 24 24 24H80V480c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32v-80h56c13.25 0 24-10.75 24-24v-112C512 224.3 479.7 192 440 192zM384 464H128v-96h256V464zM464 352h-32c0-17.67-14.33-32-32-32h-288c-17.67 0-32 14.33-32 32h-32V264c0-13.23 10.77-24 24-24h368c13.23 0 24 10.77 24 24V352z\"/></svg>",
+    "print_solid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M448 192H64C28.65 192 0 220.7 0 256v96c0 17.67 14.33 32 32 32h32v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h32c17.67 0 32-14.33 32-32V256C512 220.7 483.3 192 448 192zM384 448H128v-96h256V448zM432 296c-13.25 0-24-10.75-24-24c0-13.27 10.75-24 24-24s24 10.73 24 24C456 285.3 445.3 296 432 296zM128 64h229.5L384 90.51V160h64V77.25c0-8.484-3.375-16.62-9.375-22.62l-45.25-45.25C387.4 3.375 379.2 0 370.8 0H96C78.34 0 64 14.33 64 32v128h64V64z\"/></svg>",
     "signature_field": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M20.1,25.42a1.1,1.1,0,1,1,1.27,1.45l-3.3,9.07A63.13,63.13,0,0,1,28,28.3l1.26-12-8.26-3-6.77,10A62.4,62.4,0,0,1,17,35.54l3.3-9.07A1.12,1.12,0,0,1,20.1,25.42Z\" fill=\"#484f60\"/><rect x=\"21.62\" y=\"11.43\" width=\"8.79\" height=\"2.34\" transform=\"translate(5.88 -8.14) rotate(20)\" fill=\"#484f60\"/><path d=\"M18.11,37.48c1.44,2.65,4.58,2.94,7.23,2.1,1.41-.44,2.2-1.49,3.44-2.06,2.42-1.1,3.13,1.2,5.36,1.37.42,0,2-.65,1.54-.68-2.55-.19-2.93-3.13-5.51-2.65a4.9,4.9,0,0,0-1.64.71c-.77.49-1.31,1.62-2.07,2l-4.61.56A3.38,3.38,0,0,1,20,37c-.22-.41-2,.28-1.85.5Z\" fill=\"#484f60\"/></svg>",
     "xml": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><path d=\"M31.42,40.17H13.87c-2.15,0-2.71-.56-2.71-2.72V12.88c0-2.15.56-2.71,2.71-2.71H25.48l8.66,8.88v3.43H32.8V19.6l-7.88-8.09H13.87c-1.37,0-1.37,0-1.37,1.37V37.45c0,1.37,0,1.37,1.37,1.37H31.42c1.38,0,1.38,0,1.38-1.37V35h1.34v2.43C34.14,39.61,33.58,40.17,31.42,40.17Z\" fill=\"#484f60\"/><path d=\"M25.2,10.84v6.44c0,1.78.27,2,2,2h6.23Z\" fill=\"#484f60\"/><path d=\"M19.14,24.27v9h19.7v-9Zm5.36,7.41-1.3-2-1.3,2H20.48l2-3.06-1.81-2.8h1.38l1.18,1.88,1.15-1.88h1.37l-1.83,2.85,2,3Zm7.67,0h-1.1V27.07l-1.16,4.61H28.77l-1.16-4.61v4.61H26.52V25.82h1.76l1.07,4,1-4h1.77Zm5.33,0H33.38V25.87h1.18v4.82H37.5Z\" fill=\"#484f60\"/></svg>"
 };
@@ -1879,8 +2631,13 @@ var Icon;
     Icon["DeleteLeftRegular"] = "delete_left_regular";
     Icon["DeliveryTruck"] = "delivery_truck";
     Icon["Email"] = "email";
+    Icon["EnvelopeRegular"] = "envelope_regular";
+    Icon["FilePdfRegular"] = "file_pdf_regular";
+    Icon["FilePdfSolid"] = "file_pdf_solid";
     Icon["Pdf"] = "pdf";
     Icon["Print"] = "print";
+    Icon["PrintRegular"] = "print_regular";
+    Icon["PrintSolid"] = "print_solid";
     Icon["SignatureField"] = "signature_field";
     Icon["Xml"] = "xml";
 })(Icon || (Icon = {}));
@@ -1965,12 +2722,14 @@ class StockInformationGridComponent {
         });
     }
     openSendMethodDialog(data) {
-        this._stockService.printSticker.goodId = data.goodId;
-        this._stockService.printSticker.warehouse = data.warehouseNo;
+        if (!(this._stockService.printLayoutParams instanceof PrintPriceStickers)) {
+            this._stockService.printLayoutParams.goodId = data.goodId;
+            this._stockService.printLayoutParams.warehouse = data.warehouseNo;
+        }
         this.showSendMethodDialog = !this.showSendMethodDialog;
     }
     printStockStickers() {
-        this._stockService.getPrintStockStickers(this._stockService.printSticker);
+        this._stockService.getPrintStockStickers(this._stockService.printLayoutParams);
     }
     onOkClick() {
     }
@@ -2435,46 +3194,62 @@ class SendMethodDialogComponent {
         this.showPrintOption = true;
         this.showPdfOption = true;
         this.showXmlOption = true;
-        this.showPrintPriceStickers = false;
-        this.showPrintStockStickers = true;
+        this.showPrintPriceStickers = true;
         this.sendOptions = [
             { option: SendOption.Email,
-                iconName: this.icons.Email,
+                iconName: this.icons.EnvelopeRegular,
             },
             { option: SendOption.Print,
-                iconName: this.icons.Print,
+                iconName: this.icons.PrintRegular,
             },
             { option: SendOption.Pdf,
-                iconName: this.icons.Pdf,
+                iconName: this.icons.FilePdfRegular,
             },
             { option: SendOption.Xml,
-                iconName: this.icons.Xml,
+                iconName: this.icons.FilePdfRegular,
             }
         ];
         this.activeSendOption = SendOption.Email;
         this.showStandardPrinterOptions = false;
         this.showPrinterSelections = false;
         this.showExitButton = true;
+        this.printTemplates = [];
         this.printTemplatesField = { text: "name", value: "reportId" };
+        this.emailLayoutField = { text: "name", value: "reportId" };
         this.priceListDataField = { text: "name", value: "priceListCode" };
         this.upAndLoaded = false;
-        this.emails = ['lars.vdv@colijn-it.nl', 'david@colijn-it.nl', 'ruben@colijn-it.nl'];
         this.models = [false, false, true];
-        this.layouts = ['Layout 1', 'Layout 2', 'Layout 3'];
         this.showDialog = false;
+        this.emailAdresses = [];
+        this.printLayouts = [];
+        this.isDocSignEnabled = false;
+        this.docSign = false;
         this.startSignatureClicked = new EventEmitter();
+        this.sendEmailClicked = new EventEmitter();
         this.printButtonClicked = new EventEmitter();
+        this.emailLayoutClicked = new EventEmitter();
+        this.printTemplatesClicked = new EventEmitter();
+        this.defaultSendMethodClicked = new EventEmitter();
+        this.printLayoutParams = new EventEmitter();
+        this.sendMethodParams = new class {
+        };
         this._subscriptions = [];
         this._subscriptions.push(this._optionsService.optionsLoaded.subscribe(loaded => this._handleSettingsLoaded(loaded)));
     }
     set articleData(data) {
-        this.stockService.printSticker.goodId = data.goodId;
-        this.stockService.printSticker.warehouse = data.warehouseNo;
+        if (!(this.printLayoutParams instanceof PrintPriceStickers)) {
+            this.sendMethodParams.goodId = data.goodId;
+            this.sendMethodParams.warehouse = data.warehouseNo;
+        }
     }
     ;
     showClass() {
         return true;
     }
+    ngOnInit() {
+        this.getDefaultSendMethod();
+        this.getDefaultEmailLayouts();
+    }
     ngOnDestroy() {
         this._subscriptions.forEach(subscription => subscription.unsubscribe());
     }
@@ -2489,12 +3264,16 @@ class SendMethodDialogComponent {
         this.showDialog = false;
     }
     handleSignatureStart() {
+        this.docSign = !this.docSign;
         this.startSignatureClicked.emit();
     }
+    sendEmail() {
+        this.sendEmailClicked.emit();
+        this.printLayoutParams.emit(this.sendMethodParams);
+    }
     handlePrintClicked() {
-        // this.printButtonClicked.emit();
-        if (this.stockService.printSticker.printerName) {
-            this.stockService.getPrintStockStickers(this.stockService.printSticker);
+        if (this.sendMethodParams.printerName) {
+            this.printButtonClicked.emit();
         }
     }
     togglePrinterSelection() {
@@ -2510,16 +3289,19 @@ class SendMethodDialogComponent {
     }
     onPrinterClicked(printer) {
         this.defaultPrinter = printer.name;
-        this.stockService.printSticker.printerName = printer.name;
+        this.sendMethodParams.printerName = printer.name;
         this.showPrinterSelections = !this.showPrinterSelections;
     }
     getPrintTemplates() {
-        if (!this.printTemplates) {
-            const data = new StockStickersPrintLayouts();
-            this.stockService.getStockStickerTemplates(data).then((templates) => {
-                this.printTemplates = templates;
-            });
-        }
+        this.printTemplatesClicked.emit();
+    }
+    getDefaultSendMethod() {
+        this.defaultSendMethodClicked.emit();
+    }
+    getDefaultEmailLayouts() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.emailLayoutClicked.emit();
+        });
     }
     _handleSettingsLoaded(loaded) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -2547,10 +3329,10 @@ SendMethodDialogComponent.decorators = [
                 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>
+      <co-dialog id="sendOptionsDialog" [headerTemplate]="headerTemplate" *ngIf="showDialog" [showCloseIcon]="showExitButton" (closeClick)="closeDialogClick()">
+        <ng-template #headerTemplate>
+          <h2 [textContent]="headerTitle"></h2>
+        </ng-template>
         <div class="dialog-content-wrapper">
           <div class="main-content-container" *ngIf="!showPrinterSelections">
             <div class="send-options-wrapper">
@@ -2565,43 +3347,47 @@ SendMethodDialogComponent.decorators = [
             <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]"
+                  *ngFor="let email of emailAdresses"
+                  [(model)]="email.name"
                   [label]="email"
                   [cssClass]="'input-checkbox-wrapper'"
                 ></co-input-checkbox>
               </div>
 
-              <div class="lov-wrapper">
+              <div class="lov-wrapper" (click)="getDefaultEmailLayouts()">
                 <co-input-combo-box
-                  [(model)]="selectedLayout"
-                  [collection]="layouts"
-                  [forceReadonly]="true"
+                  [(model)]="sendMethodParams.reportId"
+                  [collection]="emailLayouts"
+                  [fields]="emailLayoutField"
                   placeholder="Layout"
                 ></co-input-combo-box>
               </div>
 
-              <div class="signature-button-wrapper">
+              <div *ngIf="isDocSignEnabled" class="signature-button-wrapper">
                 <div class="custom-button-wrapper signature-button" (click)="handleSignatureStart()">
                   <co-icon [iconData]="iconCacheService.getIcon(icons.SignatureField)"></co-icon>
                 </div>
+                <div class="custom-button-wrapper send-button" (click)="sendEmail()">
+                  <co-icon [iconData]="iconCacheService.getIcon(icons.Email)"></co-icon>
+                </div>
               </div>
+
+              <ione-docsign *ngIf="docSign"></ione-docsign>
             </div>
 
             <div class="email-option-content" *ngIf="activeSendOption === sendOption.Print" (click)="getPrintTemplates()">
               <div *ngIf="showPrintPriceStickers">
                 <div class="lov-wrapper">
                   <co-input-combo-box
-                    [(model)]="stockService.printPriceSticker.reportId"
-                    [collection]="printTemplates"
+                    [(model)]="sendMethodParams.reportId"
+                    [collection]="printLayouts"
                     [fields]="printTemplatesField"
                     placeholder="Layout"
                   ></co-input-combo-box>
                 </div>
                 <div class="lov-wrapper" *ngIf="priceListCodeData">
                   <co-input-combo-box
-                    [(model)]="stockService.printPriceSticker.priceListCode"
+                    [(model)]="sendMethodParams.priceListCode"
                     [collection]="priceListCodeData"
                     [fields]="priceListDataField"
                     placeholder="Layout"
@@ -2609,21 +3395,10 @@ SendMethodDialogComponent.decorators = [
                 </div>
               </div>
 
-              <div *ngIf="showPrintStockStickers">
-                <div class="lov-wrapper">
-                  <co-input-combo-box
-                    [(model)]="stockService.printSticker.reportId"
-                    [collection]="printTemplates"
-                    [fields]="printTemplatesField"
-                    placeholder="Layout"
-                  ></co-input-combo-box>
-                </div>
-              </div>
-
               <div class="lov-wrapper clickable" (click)="togglePrinterSelection()">
                 <div class="selected-printer-wrapper">
                   <div class="printer-option-list-item">
-                    <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.Print)"></co-icon>
+                    <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.PrintRegular)"></co-icon>
                     <div class="printer-details" *ngIf="printerList">
                       <span class="printer-name" [textContent]="defaultPrinter"></span>
                       <span class="printer-status" [textContent]="defaultPrinter.acceptingJobs"></span>
@@ -2656,7 +3431,7 @@ SendMethodDialogComponent.decorators = [
               <div class="print-footer-wrapper">
                 <div class="input-number-wrapper">
                   <co-input-number-picker class="number-picker"
-                                          [step]="1" [(model)]="stockService.printSticker.amount" [min]="1"
+                                          [step]="1" [(model)]="sendMethodParams.amount" [min]="1"
                                           [ngModelOptions]="{debounce: 1}">
                   </co-input-number-picker>
                 </div>
@@ -2673,7 +3448,7 @@ SendMethodDialogComponent.decorators = [
           <div class="printer-content-container" @slideInOut *ngIf="showPrinterSelections">
             <div class="selected-printer-wrapper selection clickable" *ngFor="let printers of printerList" (click)="onPrinterClicked(printers)">
               <div class="printer-option-list-item">
-                <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.Print)"></co-icon>
+                <co-icon class="printer-icon" [iconData]="iconCacheService.getIcon(icons.PrintRegular)"></co-icon>
                 <div class="printer-details">
                   <span class="printer-name" [textContent]="printers.name"></span>
                   <span class="printer-status" [textContent]="printers.acceptingJobs"></span>
@@ -2684,7 +3459,7 @@ SendMethodDialogComponent.decorators = [
             </div>
           </div>
         </div>
-      </co-dialog-wizard>
+      </co-dialog>
     </div>
   `,
                 encapsulation: ViewEncapsulation.None,
@@ -2710,15 +3485,28 @@ SendMethodDialogComponent.propDecorators = {
     showPdfOption: [{ type: Input }],
     showXmlOption: [{ type: Input }],
     showPrintPriceStickers: [{ type: Input }],
-    showPrintStockStickers: [{ type: Input }],
     priceListCodeData: [{ type: Input }],
+    transactionUUID: [{ type: Input }],
     showDialog: [{ type: Input }],
     headerTitle: [{ type: Input }],
     printerList: [{ type: Input }],
+    relationId: [{ type: Input }],
+    emailAdresses: [{ type: Input }],
+    emailLayouts: [{ type: Input }],
+    printLayouts: [{ type: Input }],
+    defaultSendMethod: [{ type: Input }],
+    defaultEmailAdresses: [{ type: Input }],
+    isDocSignEnabled: [{ type: Input }],
+    docSign: [{ type: Input }],
     articleData: [{ type: Input }],
     startSignatureClicked: [{ type: Output }],
+    sendEmailClicked: [{ type: Output }],
     printButtonClicked: [{ type: Output }],
-    showClass: [{ type: HostBinding, args: ["class.ione-send-method-dialog",] }]
+    emailLayoutClicked: [{ type: Output }],
+    showClass: [{ type: HostBinding, args: ["class.ione-send-method-dialog",] }],
+    printTemplatesClicked: [{ type: Output }],
+    defaultSendMethodClicked: [{ type: Output }],
+    printLayoutParams: [{ type: Output }]
 };
 
 class SendMethodDialogModule {
@@ -2736,7 +3524,9 @@ SendMethodDialogModule.decorators = [
                     IconModule,
                     InputNumberPickerModule,
                     CoDialogWizardModule,
-                    ButtonModule
+                    ButtonModule,
+                    DocsignModule,
+                    CoDialogModule
                 ],
                 exports: [
                     SendMethodDialogComponent
@@ -3253,11 +4043,12 @@ class CoCircularGaugeComponent {
     }
     ;
     getAnnotations() {
-        if (this.value !== undefined) {
-            const label = this.value ? this.value + "%" : "0%";
+        if (this.value) {
             return [{
-                    content: '<div class="annotation" style="width:20px;height:20px;">' +
-                        '<div class="annotation-label">' + label + '</div></div>',
+                    content: '<div class="annotation">' +
+                        this.value + '%</div>',
+                    angle: 90,
+                    radius: '50%',
                     zIndex: '10',
                 }];
         }
@@ -3431,7 +4222,7 @@ StatusbarComponent.decorators = [
          (click)="onStatusbarClick()">
       <div class="statuses">
         <div *ngFor="let data of statusbarData; let index = index" class="status">
-          <co-linear-gauge [value]="data.percentage" [count]="!!data.count ? data.count : undefined"></co-linear-gauge>
+          <co-linear-gauge [value]="data.percentage" [count]="data.count ? data.count : undefined"></co-linear-gauge>
         </div>
       </div>
       <div class=status-description-popup *ngIf="showPopup" @showHidePopup [ngClass]="popupClass">
@@ -3479,6 +4270,1908 @@ StatusbarModule.decorators = [
             },] }
 ];
 
+class DatePlanningComponent {
+    constructor(_changeDetector, renderer) {
+        this._changeDetector = _changeDetector;
+        this.renderer = renderer;
+        this.calendarNavigation = false;
+        this.showButton = false;
+        this.buttonLabel = "";
+        this.eventsPerDay = [];
+        this.eventChecked = new EventEmitter();
+        this.selectedDateChange = new EventEmitter();
+        this.rangeChange = new EventEmitter();
+        this.viewChange = new EventEmitter();
+        this.buttonClick = new EventEmitter();
+        this.days = [];
+        this._selectedDate = new Date();
+    }
+    doChangeSelectedDate(date, rangeChanged = false) {
+        this.selectedDate = new Date(date);
+        if (rangeChanged) {
+            this.rangeChange.next(this.selectedDate);
+        }
+        else {
+            this.selectedDateChange.next(this.selectedDate);
+        }
+        this._changeDetector.detectChanges();
+    }
+    doChangeView(view) {
+        this.view = view;
+        this.viewChange.next(this.view);
+    }
+    scrollToDayStart() {
+        if (this.dayStart !== undefined) {
+            const dayStart = this.renderer.selectRootElement("#dayStart");
+            if (dayStart) {
+                setTimeout(() => {
+                    dayStart.scrollIntoView({ behavior: "instant", block: "center" });
+                });
+            }
+        }
+    }
+}
+DatePlanningComponent.decorators = [
+    { type: Component, args: [{
+                selector: "sc-date-planning",
+                template: `
+    <div class="sc-agenda">
+      <div class="content-wrapper">
+        <calendar *ngIf="calendarNavigation"
+                  [view]="view"
+                  [(days)]="days"
+                  [selectedDate]="selectedDate" (selectedDateChange)="doChangeSelectedDate($event)"></calendar>
+        <div class="agenda-content-wrapper mini-scrollbar">
+          <div class="agenda-content">
+            <agenda-header [view]="view" (viewChange)="doChangeView($event)"
+                           [firstAvailableDate]="firstAvailableDate"
+                           [eventsPerDay]="eventsPerDay"
+                           [selectedDate]="selectedDate"
+                           (selectedDateChange)="doChangeSelectedDate($event)"
+                           (rangeChange)="doChangeSelectedDate($event, true)"></agenda-header>
+            <agenda-view [view]="view"
+                         [selectedDate]="selectedDate"
+                         [eventsPerDay]="eventsPerDay"
+                         (eventChecked)="eventChecked.emit($event)"></agenda-view>
+          </div>
+        </div>
+      </div>
+    </div>
+    <co-button *ngIf="showButton && eventsPerDay.length > 0" class="text-only select-agenda-button"
+               [label]="buttonLabel"
+               (click)="buttonClick.emit($event)">
+    </co-button>
+    `,
+                animations: [
+                    trigger("showHideWindow", [
+                        state("void", style({ transform: "scaleY(0)" })),
+                        state("*", style({ transform: "scaleY(1)" })),
+                        transition(":enter, :leave", [
+                            animate("200ms ease-in-out")
+                        ])
+                    ])
+                ],
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+DatePlanningComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: Renderer2 }
+];
+DatePlanningComponent.propDecorators = {
+    calendarNavigation: [{ type: Input }],
+    showButton: [{ type: Input }],
+    selectedDate: [{ type: Input }],
+    firstAvailableDate: [{ type: Input }],
+    buttonLabel: [{ type: Input }],
+    eventsPerDay: [{ type: Input }],
+    view: [{ type: Input }],
+    eventChecked: [{ type: Output }],
+    selectedDateChange: [{ type: Output }],
+    rangeChange: [{ type: Output }],
+    viewChange: [{ type: Output }],
+    buttonClick: [{ type: Output }],
+    dayStart: [{ type: ViewChild, args: ["dayStart", { static: true },] }]
+};
+
+class CalendarAllYearsComponent {
+    constructor() {
+        this.yearChange = new EventEmitter();
+        this.years = [];
+    }
+    ngOnInit() {
+        this.years.length = 0;
+        let start = this._determineStart();
+        const end = start + 11;
+        while (start < end) {
+            this.years.push(start);
+            start++;
+        }
+    }
+    _determineStart() {
+        if (this.year > 0) {
+            let thisYear = this.year;
+            let thisYearLastDigit = parseInt(thisYear.toString().split("").pop());
+            while (thisYearLastDigit > 0) {
+                thisYear--;
+                thisYearLastDigit = parseInt(thisYear.toString().split("").pop());
+            }
+            return thisYear;
+        }
+        return 0;
+    }
+}
+CalendarAllYearsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "calendar-all-years",
+                template: `
+        <div *ngFor="let currentYear of years"
+             [textContent]="currentYear"
+             [class.selected-year]="currentYear === year"
+             class="pointer-hover"
+             (click)="year = currentYear; yearChange.emit(year)"
+        ></div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CalendarAllYearsComponent.ctorParameters = () => [];
+CalendarAllYearsComponent.propDecorators = {
+    year: [{ type: Input }],
+    yearChange: [{ type: Output }]
+};
+
+// All the months. Values are corresponding dictionary keys in text_nl.
+var Month$1;
+(function (Month) {
+    Month["January"] = "JANUARY";
+    Month["Februrary"] = "FEBRUARY";
+    Month["March"] = "MARCH";
+    Month["April"] = "APRIL";
+    Month["May"] = "MAY";
+    Month["June"] = "JUNE";
+    Month["July"] = "JULY";
+    Month["August"] = "AUGUST";
+    Month["September"] = "SEPTEMBER";
+    Month["October"] = "OCTOBER";
+    Month["November"] = "NOVEMBER";
+    Month["December"] = "DECEMBER";
+})(Month$1 || (Month$1 = {}));
+
+// All the months in a year. The order is important, and should remain January - to December!
+const ALL_MONTHS = [
+    Month$1.January,
+    Month$1.Februrary,
+    Month$1.March,
+    Month$1.April,
+    Month$1.May,
+    Month$1.June,
+    Month$1.July,
+    Month$1.August,
+    Month$1.September,
+    Month$1.October,
+    Month$1.November,
+    Month$1.December
+];
+
+class CalendarAllMonthsComponent {
+    constructor() {
+        this.shortDescriptions = false;
+        this.monthChange = new EventEmitter();
+        this.months = [];
+    }
+    ngOnInit() {
+        this.months.length = 0;
+        this.months = ALL_MONTHS;
+    }
+}
+CalendarAllMonthsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "calendar-all-months",
+                template: `
+        <div *ngFor="let currentMonth of months; let index = index"
+             [class.selected-month]="month === index"
+             [textContent]="currentMonth"
+             class="pointer-hover"
+             (click)="month = index; monthChange.emit(month)"
+        ></div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CalendarAllMonthsComponent.ctorParameters = () => [];
+CalendarAllMonthsComponent.propDecorators = {
+    month: [{ type: Input }],
+    shortDescriptions: [{ type: Input }],
+    monthChange: [{ type: Output }]
+};
+
+class CalendarHeaderComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.selectedDate = new Date();
+        this.selectedDateChange = new EventEmitter();
+        this.icons = Icon;
+        this.showMonthYearSelect = false;
+        this.expanded = false;
+    }
+    ngDoCheck() {
+        if (this.selectedDate) {
+            this.currentMonth = ALL_MONTHS[this.selectedDate.getMonth()];
+            this.currentYear = this.selectedDate.getFullYear();
+        }
+    }
+    subMonth() {
+        const newDate = new Date(this.selectedDate);
+        newDate.setMonth(newDate.getMonth() - 1);
+        this.selectedDate = newDate;
+        this.selectedDateChange.emit(this.selectedDate);
+    }
+    addMonth() {
+        const newDate = new Date(this.selectedDate);
+        newDate.setMonth(newDate.getMonth() + 1);
+        this.selectedDate = newDate;
+        this.selectedDateChange.emit(this.selectedDate);
+    }
+    hideMonthYearSelection() {
+        this.expanded = false;
+        this.showMonthYearSelect = false;
+    }
+    setNewMonth(month) {
+        this.selectedMonth = month;
+    }
+    setNewYear(year) {
+        this.selectedYear = year;
+    }
+    changeMonthYear() {
+        this.hideMonthYearSelection();
+        const newDate = new Date(this.selectedDate);
+        newDate.setMonth(this.selectedMonth);
+        newDate.setFullYear(this.selectedYear);
+        this.selectedDate = newDate;
+        this.selectedDateChange.emit(this.selectedDate);
+    }
+}
+CalendarHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: "calendar-header",
+                template: `
+        <div #monthYearSelect class="calendar-header-row">
+            <co-icon class="pointer-hover" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subMonth()"></co-icon>
+            <div (click)="showMonthYearSelect = true">
+                <div class="month" [textContent]="currentMonth"></div>
+                <div class="year" [textContent]="currentYear"></div>
+            </div>
+            <co-icon class="pointer-hover" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addMonth()"></co-icon>
+        </div>
+        <ng-template #template>
+            <div *ngIf="showMonthYearSelect"
+                 (clickOutside)="hideMonthYearSelection()"
+                 class="select-month-year-window" [class.expanded]="expanded" @showMonthYearSelect
+            >
+                <div>
+                    <calendar-all-months [month]="currentMonth" (monthChange)="setNewMonth($event)" shortDescriptions></calendar-all-months>
+                    <div class="vertical-divider"></div>
+                    <calendar-all-years [year]="currentYear" (yearChange)="setNewYear($event)"></calendar-all-years>
+                </div>
+<!--                <default-ok-cancel-buttons-->
+<!--                        (okClick)="changeMonthYear()"-->
+<!--                        (cancelClick)="showMonthYearSelect = false"-->
+<!--                >-->
+<!--                </default-ok-cancel-buttons>-->
+            </div>
+        </ng-template>
+    `,
+                encapsulation: ViewEncapsulation.None,
+                animations: [
+                    trigger("showMonthYearSelect", [
+                        state("void", style({
+                            "transform-origin": "top center",
+                            transform: "scaleY(0)"
+                        })),
+                        state("*", style({
+                            "transform-origin": "top center",
+                            transform: "scaleY(1)"
+                        })),
+                        transition(":enter, :leave", [
+                            animate("200ms ease-in-out")
+                        ])
+                    ])
+                ]
+            },] }
+];
+CalendarHeaderComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+CalendarHeaderComponent.propDecorators = {
+    selectedDate: [{ type: Input }],
+    selectedDateChange: [{ type: Output }]
+};
+
+var CalendarView;
+(function (CalendarView) {
+    CalendarView["DayView"] = "DAY";
+    CalendarView["WeekView"] = "WEEK";
+    CalendarView["WeekSelectView"] = "WEEK_SELECT";
+    CalendarView["MonthView"] = "MONTH";
+})(CalendarView || (CalendarView = {}));
+
+class CalendarComponent {
+    constructor() {
+        this.view = CalendarView.WeekView;
+        this.selectedDate = new Date();
+        this.days = [];
+        this.selectedDateChange = new EventEmitter();
+    }
+    changeSelectedDate(date) {
+        this.selectedDate = date;
+        this.selectedDateChange.emit(this.selectedDate);
+    }
+}
+CalendarComponent.decorators = [
+    { type: Component, args: [{
+                selector: "calendar",
+                template: `
+        <div class="sc-calendar">
+          <calendar-header [selectedDate]="selectedDate" (selectedDateChange)="changeSelectedDate($event)"></calendar-header>
+          <calendar-view [view]="view" [selectedDate]="selectedDate" (selectedDateChange)="changeSelectedDate($event)"></calendar-view>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CalendarComponent.ctorParameters = () => [];
+CalendarComponent.propDecorators = {
+    view: [{ type: Input }],
+    selectedDate: [{ type: Input }],
+    days: [{ type: Input }],
+    selectedDateChange: [{ type: Output }]
+};
+
+class ArrayNumberPipe {
+    transform(length, offset = 0) {
+        if (!length || length < 0) {
+            return [];
+        }
+        return Array.from({ length: Math.round(length) }, (x, i) => i + offset);
+    }
+}
+ArrayNumberPipe.decorators = [
+    { type: Pipe, args: [{
+                name: "arrayNumber"
+            },] }
+];
+
+class DateRange {
+    constructor() {
+    }
+}
+
+Date.prototype.toJSON = function () {
+    return moment(this).format('YYYY-MM-DD[T]HH:mm:ss');
+};
+// static utility function holder related to dates
+class DateUtils {
+    static NowAsString() {
+        return DateUtils.ParseDate(new Date(), DateUtils.BACKEND_DATE_FORMAT);
+    }
+    static ParseDate(date, format = "d-m-y") {
+        if (!date) {
+            return "";
+        }
+        const day = ("0" + date.getDate()).slice(-2);
+        const month = ("0" + (date.getMonth() + 1)).slice(-2);
+        const year = date.getFullYear() + "";
+        const formatParts = format.split("-");
+        const dateParts = [];
+        for (let i = 0, l = formatParts.length; i < l; i++) {
+            switch (formatParts[i]) {
+                case "d":
+                case "DD":
+                    dateParts.push(day);
+                    break;
+                case "m":
+                case "MM":
+                    dateParts.push(month);
+                    break;
+                case "y":
+                case "YYYY":
+                    dateParts.push(year);
+                    break;
+                default:
+                    break;
+            }
+        }
+        return dateParts.join("-");
+    }
+    static GetWeekNumber(date) {
+        date = new Date(date.getTime());
+        date.setHours(0, 0, 0, 0);
+        date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+        return Math.ceil((((date.getTime() - new Date(date.getFullYear(), 0, 1).getTime()) / 8.64e7) + 1) / 7);
+    }
+    // Returns the number of days from now, for the given date in the future. Returns negative days if given date is in the past from now.
+    static GetDaysFromNow(date) {
+        return DateUtils.GetDayDifference(new Date(Date.now()), date);
+    }
+    static StringAsDate(str, format = DateUtils.BACKEND_DATE_FORMAT) {
+        if (notNill(str)) {
+            if (!isNaN(Number(str))) {
+                return new Date(str);
+            }
+            else {
+                const time = moment(str, format, true);
+                return time.isValid() ? new Date(time) : undefined;
+            }
+        }
+        else {
+            return undefined;
+        }
+    }
+    static MomentToDate(time) {
+        if (!time || !time.isValid()) {
+            return undefined;
+        }
+        const d = new Date(time.format(DateUtils.BACKEND_DATE_FORMAT));
+        d.setHours(time.hours());
+        d.setMinutes(time.minutes());
+        d.setSeconds(time.seconds());
+        return d;
+    }
+    static GetCurrentMonth() {
+        return ALL_MONTHS[new Date().getMonth()];
+    }
+    // @returns e.g. ["FEBRUARI", "MARCH", ..] if it's Februari today, otherwise e.g. ["APRIL", "MAY", ...] if it's April today
+    static Get12MonthsArrayWithFirstMonthIsCurrentMonth() {
+        const answer = [];
+        let monthNrToAdd = new Date().getMonth();
+        for (let i = 0; i < 12; i++) {
+            answer.push(ALL_MONTHS[monthNrToAdd]);
+            monthNrToAdd = (monthNrToAdd + 1) % ALL_MONTHS.length;
+        }
+        return answer;
+    }
+    static GetFirstDayOfWeek(date) {
+        if (!DateUtils._ValidDate(date)) {
+            return null;
+        }
+        let firstDay;
+        const dayOfWeek = date.getDay() || 7;
+        if (dayOfWeek === 1) {
+            firstDay = new Date(date);
+        }
+        else {
+            firstDay = new Date(date);
+            firstDay.setHours(-24 * (dayOfWeek - 1));
+        }
+        return firstDay;
+    }
+    static GetLastDayOfWeek(date) {
+        const firstDayOfWeek = DateUtils.GetFirstDayOfWeek(date);
+        const lastDayOfWeek = new Date(firstDayOfWeek);
+        lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6);
+        return lastDayOfWeek;
+    }
+    static GetFirstDayOfMonth(date) {
+        if (!DateUtils._ValidDate(date)) {
+            return null;
+        }
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        return new Date(year, month, 1);
+    }
+    static GetLastDayOfMonth(date) {
+        if (!DateUtils._ValidDate(date)) {
+            return null;
+        }
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        return new Date(year, month + 1, 0);
+    }
+    static DatesEqual(date1, date2) {
+        let result = false;
+        if (DateUtils._ValidDate(date1) && DateUtils._ValidDate(date2)) {
+            result =
+                date1.getDate() === date2.getDate() &&
+                    date1.getMonth() === date2.getMonth() &&
+                    date1.getFullYear() === date2.getFullYear();
+        }
+        return result;
+    }
+    static DateRangeEqual(dates1, dates2) {
+        return (this.DatesEqual(dates1.startDate, dates2.startDate) &&
+            this.DatesEqual(dates1.endDate, dates2.endDate));
+    }
+    static AddMinutes(date, minutes) {
+        return new Date(date.getTime() + (minutes * 60000));
+    }
+    static AddDays(date, days) {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    }
+    static AddMonths(date, months) {
+        const result = new Date(date);
+        result.setMonth(result.getMonth() + months);
+        return result;
+    }
+    static DetermineDSTBreakpoints() {
+        const endOfYear = new Date(new Date().getFullYear(), 11, 1);
+        let checkDate = new Date(new Date().getFullYear(), 0, 1);
+        let offset = checkDate.getTimezoneOffset();
+        const periodStart = new Date();
+        let periodStartSet = false;
+        const periodEnd = new Date();
+        let periodEndSet = false;
+        while (checkDate.getTime() < endOfYear.getTime()) {
+            checkDate = this.AddMinutes(checkDate, 60);
+            if (offset < checkDate.getTimezoneOffset()) {
+                periodEnd.setTime(checkDate.getTime());
+                periodEndSet = true;
+            }
+            else if (offset > checkDate.getTimezoneOffset()) {
+                periodStart.setTime(checkDate.getTime());
+                periodStartSet = true;
+            }
+            offset = checkDate.getTimezoneOffset();
+            if (periodStartSet && periodEndSet) {
+                break;
+            }
+        }
+        if (periodStartSet && periodEndSet) {
+            return {
+                start: this._DateToTimeStringWithDateFormat(periodStart),
+                end: this._DateToTimeStringWithDateFormat(periodEnd)
+            };
+        }
+        else {
+            return { start: undefined, end: undefined }; // important otherwise we return new Date() for both
+        }
+    }
+    static _ValidDate(date) {
+        return date !== null && date !== undefined;
+    }
+    /**
+     * Returns the difference between the two given days as the number of days, in float precision (date to - date from).
+     * Returns negative values of the 'from' date is later than in time than the 'to' date.
+     */
+    static GetDayDifference(from, to) {
+        if (!from || !to) {
+            return NaN;
+        }
+        return ((to.getTime() - from.getTime()) / 1000 / 60 / 60 / 24);
+    }
+    static IsSameDay(dateOne, dateTwo) {
+        return (dateOne && dateTwo &&
+            dateOne.getDate() === dateTwo.getDate()
+            && dateOne.getMonth() === dateTwo.getMonth()
+            && dateOne.getFullYear() === dateTwo.getFullYear());
+    }
+    static IsInBetween(date, startDate, endDate, withTime = true) {
+        if (startDate && endDate) {
+            if (withTime) {
+                return (date > startDate && date < endDate);
+            }
+            else {
+                const dateWithoutTime = new Date(date).setHours(0, 0, 0, 0), dateFromWithoutTime = new Date(startDate).setHours(0, 0, 0, 0), dateToWithoutTime = new Date(endDate).setHours(0, 0, 0, 0);
+                return dateWithoutTime >= dateFromWithoutTime && dateWithoutTime <= dateToWithoutTime;
+            }
+        }
+    }
+    static IsMonday(date) {
+        return date.getDay() === 1;
+    }
+    static IsSunday(date) {
+        return date.getDay() === 0;
+    }
+    static IsToday(date) {
+        const today = new Date();
+        return DateUtils.IsSameDay(today, date);
+    }
+    // Returns date format like it would when using a pipe in the templete, ie: "1 okt. 2020"
+    static ParseDateInShortDateFormat(date, locale) {
+        this.datePipe = new DatePipe(locale);
+        const parsedDate = this.datePipe.transform(date);
+        return parsedDate;
+    }
+    // Transforms a string that is formatted like "'17-08-2014'<=?<='17-08-2021'" into "'17-08-2014' Untill '17-08-2021'"
+    static getFormattedDateRangeString(dateRangeString, separator = " - ") {
+        let newString = dateRangeString;
+        newString = newString.replace("<=?<=", ` ${separator} `);
+        newString = newString.replace(/'/g, "");
+        return newString;
+    }
+    static SetDateOrDateRangeObjectHoursZero(date) {
+        if (date instanceof DateRange) {
+            if (date.startDate) {
+                date.startDate.setHours(0, 0, 0);
+            }
+            if (date.endDate) {
+                date.endDate.setHours(0, 0, 0);
+            }
+        }
+        else if (!!date && (date instanceof Date)) {
+            date.setHours(0, 0, 0, 0);
+        }
+    }
+    static _DateToTimeStringWithDateFormat(value, dateFormat = "d-m-y") {
+        if (!value) {
+            return "";
+        }
+        const hours = value.getHours() < 10 ? "0" + value.getHours() : "" + value.getHours();
+        const minutes = value.getMinutes() < 10 ? "0" + value.getMinutes() : "" + value.getMinutes();
+        return this.ParseDate(value, dateFormat) + " " + [hours, minutes].join(":");
+    }
+}
+DateUtils.BACKEND_DATE_FORMAT = 'YYYY-MM-DD[T]HH:mm:ss';
+DateUtils.datePipe = new DatePipe('shortDate');
+
+//fixme we don't have a todayDayStamp field but our template references it
+class CalendarViewComponent {
+    constructor(_locale) {
+        this._locale = _locale;
+        this.selectedDateChange = new EventEmitter();
+        this.trackByStamp = (index, stamp) => {
+            return stamp && stamp.timestamp || index;
+        };
+        this.trackByWeek = (index, week) => {
+            return week && week[0].week || index;
+        };
+        this.weekDayLabel = [];
+        this.weeks = [];
+        this._selectedDate = new Date();
+        this._view = CalendarView.WeekView;
+        this.selectedDate.setHours(0, 0, 0, 0);
+        this._setLabels();
+    }
+    set view(value) {
+        this._view = value;
+        this._selectDays();
+    }
+    get view() {
+        return this._view;
+    }
+    set selectedDate(value) {
+        this._selectedDate = value;
+        this._selectedDate.setHours(0, 0, 0, 0);
+        this._prepareWeeks();
+    }
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    onDateClick(date) {
+        this.selectedDate = new Date(date.timestamp);
+        this.selectedDateChange.emit(this.selectedDate);
+        this._selectDays();
+    }
+    _setLabels() {
+        const datePipe = new DatePipe(this._locale);
+        const currentDay = this.selectedDate.getDay();
+        const startWeekDate = new Date(this.selectedDate.getTime());
+        startWeekDate.setDate(startWeekDate.getDate() - currentDay - 1);
+        this.weekDayLabel = new ArrayNumberPipe().transform(7).map(() => {
+            startWeekDate.setDate(startWeekDate.getDate() + 1);
+            return datePipe.transform(startWeekDate, "E");
+        });
+        this.weekDayLabel.push(this.weekDayLabel.shift());
+    }
+    _prepareWeeks() {
+        this.weeks.length = 0;
+        const date = new Date(this.selectedDate.getTime());
+        date.setHours(0, 0, 0, 0);
+        // go to last day of month
+        date.setMonth(date.getMonth() + 1);
+        date.setDate(0);
+        const monthEndDay = date.getDay();
+        const monthEndDate = date.getDate();
+        // days after end of month
+        const daysAfter = !monthEndDay ? 0 : 7 - monthEndDay;
+        // go to first day of month
+        date.setDate(1);
+        const monthBeginDay = date.getDay();
+        // days before start of month
+        const daysBefore = !monthBeginDay ? 6 : monthBeginDay - 1;
+        // go to start of calendar view
+        date.setDate(-daysBefore + 1);
+        // amount of weeks to display
+        const weekCount = Math.ceil((daysBefore + daysAfter + monthEndDate) / 7);
+        const weekStart = DateUtils.GetWeekNumber(date);
+        const weekEnd = weekStart + weekCount - 1;
+        // iterate over week count
+        for (let i = weekStart; i <= weekEnd; i++) {
+            let week = i;
+            // only recalculate week when it's necessary
+            if (weekStart > 50) {
+                week = DateUtils.GetWeekNumber(date);
+            }
+            const days = [];
+            // iterate over 7 days
+            for (let ii = 1; ii <= 7; ii++) {
+                // check if we are in the current month
+                let inMonth = true;
+                if (i === weekStart) {
+                    inMonth = ii > daysBefore;
+                }
+                else if (i === weekEnd) {
+                    inMonth = ii <= 7 - daysAfter;
+                }
+                const timestamp = date.getTime();
+                // add dateStamp to date array
+                days.push({
+                    week: week,
+                    inMonth: inMonth,
+                    day: date.getDate(),
+                    timestamp: timestamp,
+                    selected: this.selectedDate.getTime() === timestamp
+                });
+                // go one day further
+                date.setDate(date.getDate() + 1);
+            }
+            this.weeks.push(days);
+        }
+        this._selectDays();
+    }
+    _selectDays() {
+        this._resetSelection();
+        if (!this.selectedDate) {
+            return;
+        }
+        const weekNumber = DateUtils.GetWeekNumber(this.selectedDate);
+        const len = this.weeks.length;
+        for (let i = 0; i < len; i++) {
+            const leni = this.weeks[i].length;
+            for (let ii = 0; ii < leni; ii++) {
+                if (this.weeks[i][ii].inMonth && this.view === CalendarView.MonthView) {
+                    this.weeks[i][ii].selected = true;
+                }
+                else if (this.weeks[i][ii].week === weekNumber && this.view === CalendarView.WeekView) {
+                    this.weeks[i][ii].selected = true;
+                }
+                else if (this.weeks[i][ii].timestamp === this.selectedDate.getTime() && this.view === CalendarView.WeekSelectView) {
+                    this.weeks[i][ii].selected = true;
+                }
+                else if (this.weeks[i][ii].timestamp === this.selectedDate.getTime() && this.view === CalendarView.DayView) {
+                    this.weeks[i][ii].selected = true;
+                }
+            }
+        }
+    }
+    _resetSelection() {
+        const len = this.weeks.length;
+        for (let i = 0; i < len; i++) {
+            const leni = this.weeks[i].length;
+            for (let ii = 0; ii < leni; ii++) {
+                this.weeks[i][ii].selected = false;
+            }
+        }
+    }
+}
+CalendarViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "calendar-view",
+                template: `
+        <div class="calendar-content">
+            <div>
+                <div class="week-day-header week-row">
+                    <div class="week-acronym"></div>
+                    <div *ngFor="let weekDay of weekDayLabel" [textContent]="weekDay | ucfirst"
+                         class="week-day-label"></div>
+                </div>
+                <div class="week-row" *ngFor="let week of weeks;trackBy:trackByWeek">
+                    <div [textContent]="week[0].week" class="week-number"></div>
+                    <div *ngFor="let date of week;trackBy:trackByStamp" class="week-day"
+                         (click)="onDateClick(date)" [textContent]="date.day">
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+CalendarViewComponent.ctorParameters = () => [
+    { type: LanguageCode, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
+];
+CalendarViewComponent.propDecorators = {
+    view: [{ type: Input }],
+    selectedDate: [{ type: Input }],
+    selectedDateChange: [{ type: Output }]
+};
+
+class Weekday {
+    constructor() {
+        this.inView = true;
+        this.newMonth = false;
+        this.weekdaySelected = false;
+        this.datesByTheHour = [];
+        this.events = [];
+    }
+}
+
+class Week {
+    constructor() {
+        this.weekDays = [];
+    }
+}
+
+class CalendarUtils {
+    constructor(_locale) {
+        this._locale = _locale;
+        CalendarUtils.Locale = _locale;
+    }
+    // public static GetCurrentYear(): number {
+    //     return this.Now.getFullYear();
+    // }
+    //
+    // public static GetCurrentMonth(): number {
+    //     return this.Now.getUTCMonth() + 1;
+    // }
+    static GetDayHours(day) {
+        const datesByTheHour = [];
+        if (day) {
+            let newDate = new Date(day);
+            newDate.setHours(0, 0, 0, 0);
+            datesByTheHour.push(newDate);
+            for (let i = 0; i < 23; i++) {
+                newDate = new Date(newDate);
+                newDate.setHours(newDate.getHours() + 1);
+                datesByTheHour.push(newDate);
+            }
+        }
+        return datesByTheHour;
+    }
+    static GetDaysOfWeek(date) {
+        let day = DateUtils.GetFirstDayOfWeek(date);
+        const daysOfWeek = [];
+        let options;
+        let month;
+        for (let i = 0; i < 7; i++) {
+            const dayPerWeek = new Weekday();
+            const dayHours = CalendarUtils.GetDayHours(day);
+            dayPerWeek.newMonth = day.getMonth() !== month;
+            dayPerWeek.weekdaySelected = day.getDay() === date.getDay();
+            dayPerWeek.weekdayDay = day.getDate();
+            options = { weekday: "short" };
+            dayPerWeek.weekdayShort = day.toLocaleDateString(CalendarUtils.Locale, options);
+            options = { weekday: "long" };
+            dayPerWeek.weekdayLong = day.toLocaleDateString(CalendarUtils.Locale, options);
+            options = { month: "short" };
+            dayPerWeek.weekdayMonthShort = day.toLocaleDateString(CalendarUtils.Locale, options);
+            options = { month: "long" };
+            dayPerWeek.weekdayMonthLong = day.toLocaleDateString(CalendarUtils.Locale, options);
+            dayPerWeek.weekdayYear = day.getFullYear();
+            dayPerWeek.date = new Date(day);
+            dayPerWeek.datesByTheHour = dayHours;
+            daysOfWeek.push(dayPerWeek);
+            month = day.getMonth();
+            day = new Date(day);
+            day.setDate(day.getDate() + 1);
+        }
+        const week = new Week();
+        week.weekDays = daysOfWeek;
+        return week;
+    }
+}
+CalendarUtils.Locale = undefined;
+CalendarUtils.Now = new Date();
+CalendarUtils.ctorParameters = () => [
+    { type: LanguageCode, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
+];
+
+class AgendaEvent {
+    constructor() {
+        this.checked = false;
+        this.showCheckbox = false;
+        this.draggable = false;
+    }
+}
+
+class AgendaEventPerDay {
+    constructor() {
+        this.events = [];
+    }
+}
+
+class Month {
+    constructor() {
+        this.weeks = [];
+    }
+    get firstWeek() {
+        if (this.weeks && this.weeks.length > 0) {
+            return this.weeks[0];
+        }
+    }
+}
+
+class Day {
+    constructor() {
+        this.datesByTheHour = [];
+        this.events = [];
+    }
+}
+
+const NULL_AGENDA_EVENT = new AgendaEvent();
+const NULL_AGENDA_EVENT_PER_DAY = new AgendaEventPerDay();
+const NULL_MONTH = new Month();
+const NULL_WEEK = new Week();
+const NULL_DAY = new Day();
+
+class AgendaHeaderComponent {
+    constructor(_locale, _elementRef, _renderer, _ngZone, iconCacheService) {
+        this._locale = _locale;
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._ngZone = _ngZone;
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
+        this.viewTypes = CalendarView;
+        this.scrollbarWidth = 15;
+        this.view = CalendarView.WeekSelectView;
+        this.viewChange = new EventEmitter();
+        this.selectedDateChange = new EventEmitter();
+        this.rangeChange = new EventEmitter();
+        this.weekDays = [];
+        this.day = NULL_DAY;
+        this.showBackButton = true;
+        this._eventsPerDay = [];
+        this._onResize = () => __awaiter(this, void 0, void 0, function* () {
+            this._resizeHost();
+        });
+    }
+    set selectedDate(value) {
+        this._selectedDate = new Date(value);
+        this._prepareHeaderData();
+    }
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    set firstAvailableDate(value) {
+        if (value) {
+            this._firstAvailableDate = new Date(value);
+            this._prepareHeaderData();
+        }
+    }
+    get firstAvailableDate() {
+        return this._firstAvailableDate;
+    }
+    set eventsPerDay(value) {
+        this._eventsPerDay = value;
+        this._prepareHeaderData();
+    }
+    ngOnDestroy() {
+        window.removeEventListener("resize", this._onResize);
+        this._elementRef = undefined;
+    }
+    ngOnInit() {
+        this._ngZone.runOutsideAngular(() => {
+            window.addEventListener("resize", this._onResize);
+        });
+    }
+    ngAfterContentChecked() {
+        this._resizeHost();
+    }
+    subUnit() {
+        if (this.selectedDate) {
+            const newDate = new Date(this.selectedDate);
+            switch (this.view) {
+                case CalendarView.DayView:
+                    newDate.setDate(this.selectedDate.getDate() - 1);
+                    break;
+                case CalendarView.WeekView:
+                    newDate.setDate(this.selectedDate.getDate() - 7);
+                    break;
+                case CalendarView.WeekSelectView:
+                    newDate.setDate(this.selectedDate.getDate() - 7);
+                    break;
+                case CalendarView.MonthView:
+                    newDate.setMonth(this.selectedDate.getMonth() - 1);
+                    break;
+            }
+            this.selectedDate = newDate;
+            this.rangeChange.emit(this.selectedDate);
+        }
+    }
+    addUnit() {
+        if (this.selectedDate) {
+            const newDate = new Date(this.selectedDate);
+            switch (this.view) {
+                case CalendarView.DayView:
+                    newDate.setDate(this.selectedDate.getDate() + 1);
+                    break;
+                case CalendarView.WeekView:
+                    newDate.setDate(this.selectedDate.getDate() + 7);
+                    break;
+                case CalendarView.WeekSelectView:
+                    newDate.setDate(this.selectedDate.getDate() + 7);
+                    break;
+                case CalendarView.MonthView:
+                    newDate.setMonth(this.selectedDate.getMonth() + 1);
+                    break;
+            }
+            this.selectedDate = newDate;
+            this.rangeChange.emit(this.selectedDate);
+        }
+    }
+    setUnit(weekDay) {
+        this.selectedDate = weekDay.date;
+        this.selectedDateChange.emit(this.selectedDate);
+    }
+    changeTheView(view) {
+        this.view = view;
+        this.viewChange.emit(view);
+        this._prepareHeaderData();
+    }
+    /**
+     * Need to resize the host component to size it's fixed positioned child through css
+     */
+    _resizeHost() {
+        if (this._elementRef) {
+            this._renderer.setStyle(this._elementRef.nativeElement, "width", this._elementRef.nativeElement.parentElement.clientWidth - this.scrollbarWidth + "px");
+        }
+    }
+    _prepareHeaderData() {
+        if (this.selectedDate) {
+            switch (this.view) {
+                case CalendarView.DayView:
+                    const day = new Day();
+                    day.date = new Date(this.selectedDate);
+                    const options = { year: "numeric", month: "long", day: "numeric" };
+                    day.description = this.selectedDate.toLocaleDateString(this._locale, options);
+                    this.day = day;
+                    break;
+                case CalendarView.WeekView:
+                    const weekView = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+                    this.weekDays = weekView.weekDays;
+                    if (this.firstAvailableDate) {
+                        this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+                case CalendarView.WeekSelectView:
+                    const weekSelectView = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+                    this.weekDays = weekSelectView.weekDays;
+                    this.weekDays.forEach((wd) => {
+                        const evPerDay = this._eventsPerDay && this._eventsPerDay.length > 0 ? this._eventsPerDay.find(e => DateUtils.DatesEqual(e.date, wd.date)) : null;
+                        if (evPerDay) {
+                            wd.events = evPerDay.events;
+                        }
+                        else {
+                            wd.weekdaySelected = false;
+                        }
+                    });
+                    if (this.firstAvailableDate) {
+                        this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+                case CalendarView.MonthView:
+                    const weekOfMonth = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+                    this.weekDays = weekOfMonth.weekDays;
+                    if (this.firstAvailableDate) {
+                        this.showBackButton = this.weekDays.find(wd => DateUtils.DatesEqual(this.firstAvailableDate, wd.date)) === undefined;
+                    }
+                    break;
+            }
+        }
+    }
+}
+AgendaHeaderComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-header",
+                template: `
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.DayView">
+            <div class="hour-label-placeholder">
+                <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+            </div>
+            <div class="week-day-label">
+                <co-icon class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div class="day-description" [textContent]="day.description"></div>
+                <co-icon class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.WeekView">
+            <div class="hour-label-placeholder">
+                <view-select [selectedView]="view" (selectedViewChange)="changeTheView($event)"></view-select>
+            </div>
+            <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index" [class.selected]="weekDay.weekdaySelected" (click)="setUnit(weekDay)">
+                <co-icon *ngIf="index === 0 && showBackButton" class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div *ngIf="weekDay.newMonth" [textContent]="weekDay.weekdayMonthLong + ' ' + weekDay.weekdayYear" class="month-description"></div>
+                <div class="weekday-value" [textContent]="weekDay.weekdayDay"></div>
+                <div class="weekday-description" [textContent]="weekDay.weekdayShort"></div>
+                <co-icon *ngIf="index === 6" class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.WeekSelectView">
+            <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index"
+                 [class.selected]="weekDay.weekdaySelected"
+                 [class.selectable]="weekDay.events && weekDay.events.length > 0"
+                 (click)="setUnit(weekDay)">
+                <co-icon *ngIf="index === 0 && showBackButton" class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div class="weekday-description" [textContent]="weekDay.weekdayShort"></div>
+                <div class="weekday-value" [textContent]="weekDay.weekdayDay + ' ' + weekDay.weekdayMonthShort"></div>
+                <co-icon *ngIf="index === 6" class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+        <div class="agenda-header-wrapper" *ngIf="view === viewTypes.MonthView">
+                <div class="week-day-label" *ngFor="let weekDay of weekDays; let index = index">
+                <co-icon *ngIf="index === 0 && showBackButton" class="pointer-hover no-user-select sub-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointLeft)" (click)="subUnit()"></co-icon>
+                <div class="weekday-description" [textContent]="weekDay.weekdayShort"></div>
+                <co-icon *ngIf="index === 6" class="pointer-hover no-user-select add-unit-icon dark" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" (click)="addUnit()"></co-icon>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaHeaderComponent.ctorParameters = () => [
+    { type: LanguageCode, decorators: [{ type: Inject, args: [LOCALE_ID,] }] },
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: NgZone },
+    { type: IconCacheService }
+];
+AgendaHeaderComponent.propDecorators = {
+    selectedDate: [{ type: Input }],
+    view: [{ type: Input }],
+    firstAvailableDate: [{ type: Input }],
+    eventsPerDay: [{ type: Input }],
+    viewChange: [{ type: Output }],
+    selectedDateChange: [{ type: Output }],
+    rangeChange: [{ type: Output }]
+};
+
+class AgendaViewComponent {
+    constructor() {
+        this.view = CalendarView.WeekView;
+        this.eventsPerDay = [];
+        this.eventChecked = new EventEmitter();
+        this.viewTypes = CalendarView;
+    }
+}
+AgendaViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-view",
+                template: `
+        <div class="view-wrapper mini-scrollbar" [ngSwitch]="view">
+            <agenda-day-view *ngSwitchCase="viewTypes.DayView"
+                [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-day-view>
+            <agenda-week-view *ngSwitchCase="viewTypes.WeekView"
+                [view]="view" [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-week-view>
+            <agenda-week-select-view *ngSwitchCase="viewTypes.WeekSelectView"
+                [view]="view" [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-week-select-view>
+            <agenda-month-view *ngSwitchCase="viewTypes.MonthView"
+                [selectedDate]="selectedDate" [eventsPerDay]="eventsPerDay" (eventChecked)="eventChecked.emit($event)"></agenda-month-view>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaViewComponent.propDecorators = {
+    view: [{ type: Input }],
+    selectedDate: [{ type: Input }],
+    eventsPerDay: [{ type: Input }],
+    eventChecked: [{ type: Output }]
+};
+
+class AgendaBaseViewComponent {
+    constructor(locale, iconCacheService) {
+        this.locale = locale;
+        this.iconCacheService = iconCacheService;
+        this.eventChecked = new EventEmitter();
+        this._eventsPerDay = [];
+    }
+    set selectedDate(value) {
+        this._selectedDate = value;
+        this._dateIsSet();
+    }
+    set eventsPerDay(value) {
+        this._eventsPerDay = value;
+        this._eventsAreSet();
+    }
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    get eventsPerDate() {
+        return this._eventsPerDay;
+    }
+    //overridable by descendents
+    prepareViewData() {
+    }
+    getEventsFromDate(date) {
+        let events = [];
+        if (this.eventsPerDate) {
+            const len = this.eventsPerDate.length;
+            for (let i = 0; i < len; i++) {
+                if (DateUtils.DatesEqual(date, this.eventsPerDate[i].date)) {
+                    events = this.eventsPerDate[i].events;
+                    break;
+                }
+            }
+        }
+        return events;
+    }
+    _dateIsSet() {
+        this.prepareViewData();
+    }
+    _eventsAreSet() {
+        this.prepareViewData();
+    }
+}
+AgendaBaseViewComponent.decorators = [
+    { type: Directive }
+];
+AgendaBaseViewComponent.ctorParameters = () => [
+    { type: LanguageCode, decorators: [{ type: Inject, args: [LOCALE_ID,] }] },
+    { type: IconCacheService }
+];
+AgendaBaseViewComponent.propDecorators = {
+    selectedDate: [{ type: Input }],
+    eventsPerDay: [{ type: Input }],
+    eventChecked: [{ type: Output }]
+};
+
+class AgendaMonthViewComponent extends AgendaBaseViewComponent {
+    constructor() {
+        super(...arguments);
+        this.month = NULL_MONTH;
+        this.firstWeekDays = [];
+        this.weeks = [];
+    }
+    prepareViewData() {
+        const month = new Month();
+        if (this.selectedDate) {
+            const day = DateUtils.GetFirstDayOfMonth(this.selectedDate);
+            const endOfMonth = DateUtils.GetLastDayOfMonth(this.selectedDate);
+            let oneMoreIteration = false;
+            let continueLoop = true;
+            while (continueLoop) {
+                if (oneMoreIteration) {
+                    continueLoop = false;
+                }
+                const week = CalendarUtils.GetDaysOfWeek(day);
+                const len = week.weekDays.length;
+                for (let i = 0; i < len; i++) {
+                    week.weekDays[i].events = this.getEventsFromDate(week.weekDays[i].date);
+                    week.weekDays[i].inView = week.weekDays[i].date.getMonth() === this.selectedDate.getMonth();
+                }
+                month.weeks.push(week);
+                day.setDate(day.getDate() + 7);
+                if (day.getTime() >= endOfMonth.getTime()) {
+                    oneMoreIteration = true;
+                }
+            }
+            this.month = month;
+            this.firstWeekDays = this.month.firstWeek.weekDays;
+            this.weeks = month.weeks;
+        }
+    }
+}
+AgendaMonthViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-month-view",
+                template: `
+        <div class="view-wrapper">
+            <div class="hour-view-labels-wrapper"></div>
+            <div class="weeks">
+                <div class="week" *ngFor="let week of weeks" fxLayout="row">
+                    <div class="week-day" *ngFor="let weekDay of week.weekDays" [class.not-in-month]="!weekDay.inView">
+                        <div class="day" [textContent]="weekDay.weekdayDay"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+
+class AgendaDayViewComponent extends AgendaBaseViewComponent {
+    constructor() {
+        super(...arguments);
+        this.events = [];
+    }
+    prepareViewData() {
+        if (this.eventsPerDate && this.eventsPerDate.length > 0) {
+            this.events = this.eventsPerDate[0].events;
+        }
+    }
+}
+AgendaDayViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-day-view",
+                template: `
+        <div class="view-wrapper">
+            <agenda-hour-view-labels [date]="selectedDate"></agenda-hour-view-labels>
+            <agenda-hour-view [date]="selectedDate">
+                <agenda-events
+                        [halfHourHeight]="40"
+                        [events]="events"
+                        (eventChecked)="eventChecked.emit($event)"
+                ></agenda-events>
+            </agenda-hour-view>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+
+class AgendaWeekViewComponent extends AgendaBaseViewComponent /*implements OnInit, OnDestroy*/ {
+    constructor() {
+        super(...arguments);
+        this.view = CalendarView.WeekView;
+        this.week = NULL_WEEK;
+    }
+    prepareViewData() {
+        if (this.selectedDate) {
+            // get the events
+            const week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+            const len = week.weekDays.length;
+            for (let i = 0; i < len; i++) {
+                week.weekDays[i].events = this.getEventsFromDate(week.weekDays[i].date);
+            }
+            this.week = week;
+        }
+    }
+}
+AgendaWeekViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-week-view",
+                template: `
+        <div class="view-wrapper">
+            <agenda-hour-view-labels [date]="selectedDate"></agenda-hour-view-labels>
+            <div class="week-day" *ngFor="let weekDay of week.weekDays">
+                <agenda-hour-view [date]="weekDay.date">
+                    <agenda-events
+                        [halfHourHeight]="40"
+                        [events]="weekDay.events"
+                        (eventChecked)="eventChecked.emit($event)"
+                        [view]="view"
+                ></agenda-events>
+                </agenda-hour-view>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaWeekViewComponent.propDecorators = {
+    view: [{ type: Input }]
+};
+
+class AgendaWeekSelectViewComponent extends AgendaBaseViewComponent {
+    constructor() {
+        super(...arguments);
+        this.view = CalendarView.WeekSelectView;
+        this.week = NULL_WEEK;
+        this.icons = Icon;
+    }
+    prepareViewData() {
+        if (this.selectedDate) {
+            // get the events
+            const week = CalendarUtils.GetDaysOfWeek(this.selectedDate);
+            const len = week.weekDays.length;
+            for (let i = 0; i < len; i++) {
+                week.weekDays[i].events = this.getEventsFromDate(week.weekDays[i].date);
+            }
+            this.week = week;
+        }
+    }
+}
+AgendaWeekSelectViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-week-select-view",
+                template: `
+        <div class="view-wrapper week-select-view">
+            <div class="week-day" *ngFor="let weekDay of week.weekDays">
+                <div class="week-select-container" *ngIf="weekDay.weekdaySelected">
+                    <div class="week-select-left">
+                        <h3 [textContent]="'AGENDA_CHOOSE_DELIVERY_PERIOD'"></h3>
+                        <div class="week-select-list mini-scrollbar">
+                            <agenda-events
+                                    [halfHourHeight]="40"
+                                    [events]="weekDay.events"
+                                    (eventChecked)="eventChecked.emit($event)"
+                                    [view]="view"
+                            ></agenda-events>
+                            <div class="no-events-banner" *ngIf="weekDay.events.length === 0">
+                                <p [textContent]="'AGENDA_NO_PERIODS_AVAILABLE'"></p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="week-select-right">
+                        <h3 [textContent]="'AGENDA_FOR_EVERY_PERIOD'"></h3>
+                        <ul>
+                            <li><co-icon [iconData]="iconCacheService.getIcon(icons.CheckRound)" class="small action-color moment-icon"></co-icon><span [textContent]="'AGENDA_FOR_EVERY_PERIOD_REASON1'"></span></li>
+                            <li><co-icon [iconData]="iconCacheService.getIcon(icons.CheckRound)" class="small action-color moment-icon"></co-icon><span [textContent]="'AGENDA_FOR_EVERY_PERIOD_REASON2'"></span></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaWeekSelectViewComponent.propDecorators = {
+    view: [{ type: Input }]
+};
+
+class AgendaHourViewComponent {
+    constructor() {
+        this.datesByTheHour = [];
+        this._date = new Date();
+    }
+    set date(value) {
+        this._date = new Date(value);
+        this._prepareViewData();
+    }
+    get date() {
+        return this._date;
+    }
+    // fixme remove ctrl + c, ctrl + v code duplication with AgendaHourViewLabelsComponent._prepareViewData()
+    _prepareViewData() {
+        this.datesByTheHour.length = 0;
+        if (this.date) {
+            let newDate = new Date(this.date);
+            newDate.setHours(0, 0, 0, 0);
+            this.datesByTheHour.push(newDate);
+            for (let i = 0; i < 23; i++) {
+                newDate = new Date(newDate);
+                newDate.setHours(newDate.getHours() + 1);
+                this.datesByTheHour.push(newDate);
+            }
+        }
+    }
+}
+AgendaHourViewComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-hour-view",
+                template: `
+        <div class="row-per-hour" *ngFor="let dateByTheHour of datesByTheHour">
+            <div fxLayout="row">
+                <agenda-hour-cell [date]="dateByTheHour"></agenda-hour-cell>
+            </div>
+        </div>
+        <ng-content></ng-content>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaHourViewComponent.propDecorators = {
+    date: [{ type: Input }]
+};
+
+class AgendaHourCellComponent {
+    constructor() {
+        this.onlyLabels = false;
+        this.noLabels = false;
+    }
+    set date(value) {
+        this._date = value;
+        this._setNextHalfHour();
+    }
+    get date() {
+        return this._date;
+    }
+    _setNextHalfHour() {
+        this.datePlushalfHour = new Date(this._date);
+        this.datePlushalfHour.setMinutes(this.datePlushalfHour.getMinutes() + 30);
+    }
+}
+AgendaHourCellComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-hour-cell",
+                template: `
+        <div class="row-per-half-hour">
+            <agenda-half-hour-cell [date]="date" [showLabel]="onlyLabels && !noLabels"></agenda-half-hour-cell>
+            <agenda-half-hour-cell [date]="datePlushalfHour"></agenda-half-hour-cell>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaHourCellComponent.propDecorators = {
+    onlyLabels: [{ type: Input }],
+    noLabels: [{ type: Input }],
+    date: [{ type: Input }]
+};
+
+class AgendaHourViewLabelsComponent {
+    constructor() {
+        this.noLabels = false;
+        this.datesByTheHour = [];
+        this._date = new Date();
+    }
+    set date(value) {
+        this._date = new Date(value);
+        this._date.setDate(1);
+        this._date.setMonth(1);
+        this._date.setFullYear(1);
+        this._prepareViewData();
+    }
+    get date() {
+        return this._date;
+    }
+    // fixme remove ctrl + c, ctrl + v code duplication with AgendaHourViewComponent._prepareViewData()
+    _prepareViewData() {
+        this.datesByTheHour.length = 0;
+        if (this.date) {
+            let newDate = new Date(this.date);
+            newDate.setHours(0, 0, 0, 0);
+            this.datesByTheHour.push(newDate);
+            for (let i = 0; i < 23; i++) {
+                newDate = new Date(newDate);
+                newDate.setHours(newDate.getHours() + 1);
+                this.datesByTheHour.push(newDate);
+            }
+        }
+    }
+}
+AgendaHourViewLabelsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-hour-view-labels",
+                template: `
+        <div class="row-per-hour" *ngFor="let dateByTheHour of datesByTheHour">
+            <div>
+                <agenda-hour-cell [date]="dateByTheHour" onlyLabels [noLabels]="noLabels"></agenda-hour-cell>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaHourViewLabelsComponent.propDecorators = {
+    date: [{ type: Input }],
+    noLabels: [{ type: Input }]
+};
+
+class AgendaHalfHourCellComponent {
+    constructor(_renderer) {
+        this._renderer = _renderer;
+        this.showLabel = false;
+        this.showCurrentTime = false;
+        this.currentTimeTop = 0;
+    }
+    set date(value) {
+        this._date = value;
+        this._checkDate();
+        this._checkWorkingDayStart();
+    }
+    get date() {
+        return this._date;
+    }
+    ngOnDestroy() {
+        this.currentTimeElement = undefined;
+    }
+    _checkDate() {
+        const checkDate = new Date();
+        const minutesFrom = this.date.getMinutes();
+        const minutesTo = minutesFrom + 30;
+        if (DateUtils.DatesEqual(this.date, checkDate)) {
+            if (checkDate.getHours() === this.date.getHours() && (checkDate.getMinutes() > minutesFrom && checkDate.getMinutes() < minutesTo)) {
+                this.currentTimeTop = (Math.max(checkDate.getMinutes(), .01) / 60) * 100;
+                this._positionCurrentTime();
+                this.showCurrentTime = true;
+            }
+        }
+    }
+    _checkWorkingDayStart() {
+        this.id = (this._date.getHours() === 8 && this._date.getMinutes() === 30) ? "dayStart" : "";
+    }
+    _positionCurrentTime() {
+        if (this.currentTimeElement) {
+            this._renderer.setStyle(this.currentTimeElement.nativeElement, "top", this.currentTimeTop + "%");
+            this.currentTimeElement.nativeElement.scrollIntoView();
+        }
+    }
+}
+AgendaHalfHourCellComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-half-hour-cell",
+                template: `
+        <div id="{{id}}" class="cell-wrapper">
+            <div *ngIf="showLabel" [class.show]="showLabel" class="half-hour-label">
+                <div [textContent]="date | date:'HH:mm'"></div>
+            </div>
+            <div *ngIf="showCurrentTime" id="currentTime" class="current-time" #currentTime></div>
+            <div class="content-wrapper">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaHalfHourCellComponent.ctorParameters = () => [
+    { type: Renderer2 }
+];
+AgendaHalfHourCellComponent.propDecorators = {
+    currentTimeElement: [{ type: ViewChild, args: ["currentTime",] }],
+    date: [{ type: Input }],
+    showLabel: [{ type: Input }]
+};
+
+class AgendaEventsComponent {
+    constructor() {
+        this.viewTypes = CalendarView;
+        this.view = CalendarView.WeekView;
+        this.type = "";
+        this.events = [];
+        this.eventChecked = new EventEmitter();
+    }
+}
+AgendaEventsComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-events",
+                template: `
+        <ng-container *ngIf="view !== viewTypes.WeekSelectView">
+            <agenda-event
+                    *ngFor="let event of events"
+                    [halfHourHeight]="halfHourHeight"
+                    [event]="event"
+                    (eventChecked)="eventChecked.emit($event)"
+            ></agenda-event>
+        </ng-container>
+        <ng-container *ngIf="view === viewTypes.WeekSelectView">
+            <agenda-select-event
+                    *ngFor="let event of events"
+                    [event]="event"
+                    (eventChecked)="eventChecked.emit($event)"
+            ></agenda-select-event>
+        </ng-container>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaEventsComponent.ctorParameters = () => [];
+AgendaEventsComponent.propDecorators = {
+    view: [{ type: Input }],
+    type: [{ type: Input }],
+    events: [{ type: Input }],
+    halfHourHeight: [{ type: Input }],
+    eventChecked: [{ type: Output }]
+};
+
+class AgendaEventComponent {
+    constructor(_elementRef, _renderer, iconCacheService) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
+        this.event = NULL_AGENDA_EVENT;
+        this.eventChecked = new EventEmitter();
+    }
+    ngOnDestroy() {
+        this._elementRef = undefined;
+    }
+    ngOnInit() {
+        const hourTo = this.event.from.getHours();
+        const minutesTo = this.event.from.getMinutes();
+        const multiply = hourTo + (minutesTo / 60);
+        const top = multiply * (this.halfHourHeight * 2);
+        this._renderer.setStyle(this._elementRef.nativeElement, "top", top + "px");
+        const hours = Math.abs(this.event.to.getTime() - this.event.from.getTime()) / 3600000;
+        const height = hours * (this.halfHourHeight * 2) - 1;
+        this._renderer.setStyle(this._elementRef.nativeElement, "height", height + "px");
+    }
+    checkEvent(event) {
+        this.event.checked = !this.event.checked;
+        this.eventChecked.emit(this.event);
+    }
+}
+AgendaEventComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-event",
+                template: `
+        <div class="agenda-event-wrapper" [class.checkable]="event.showCheckbox" [class.selected]="event.checked" (click)="checkEvent($event)">
+            <div [textContent]="event.fromToRepresentation" class="event-description"></div>
+            <co-icon *ngIf="event.showCheckbox" [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" [class.checked]="event.checked"></co-icon>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+AgendaEventComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 },
+    { type: IconCacheService }
+];
+AgendaEventComponent.propDecorators = {
+    event: [{ type: Input }],
+    halfHourHeight: [{ type: Input }],
+    eventChecked: [{ type: Output }]
+};
+
+// Pipe capable of transforming the first character of a string-value to upper case.
+class UCfirstPipe {
+    transform(value) {
+        if (typeof value === "string") {
+            return value.charAt(0).toUpperCase() + value.slice(1);
+        }
+        return value;
+    }
+}
+UCfirstPipe.decorators = [
+    { type: Pipe, args: [{
+                name: "ucfirst"
+            },] }
+];
+
+const MASTER_PIPES = [
+    ArrayNumberPipe,
+    UCfirstPipe
+];
+
+// <b>Enum</b> Represents the different states of the three way thumb.
+var ThumbThreeWayState;
+(function (ThumbThreeWayState) {
+    ThumbThreeWayState[ThumbThreeWayState["Left"] = 0] = "Left";
+    ThumbThreeWayState[ThumbThreeWayState["Middle"] = 1] = "Middle";
+    ThumbThreeWayState[ThumbThreeWayState["Right"] = 2] = "Right";
+})(ThumbThreeWayState || (ThumbThreeWayState = {}));
+function NextStateOfThumbThreeWay(state) {
+    switch (state) {
+        case ThumbThreeWayState.Left:
+            return ThumbThreeWayState.Middle;
+        case ThumbThreeWayState.Middle:
+            return ThumbThreeWayState.Right;
+        case ThumbThreeWayState.Right:
+        default:
+            return ThumbThreeWayState.Left;
+    }
+}
+
+// Static utility functions holder related to Maps.
+class MapUtils {
+    /**
+     * Returns the first key from given map, for which the value filter holds true. Basically a reverse Map.get(key) function.
+     * @param map
+     * @param valueFilter For the first value that returns true for this filter functions, its key will be returned.
+     */
+    static FindKeyByValue(map, valueFilter) {
+        if (!map || !valueFilter) {
+            return undefined;
+        }
+        let foundKey = undefined;
+        let keyWasFound = false;
+        map.forEach((value, key) => {
+            if (!keyWasFound && valueFilter.call(this, value)) {
+                foundKey = key;
+                keyWasFound = true;
+            }
+        });
+        return foundKey;
+    }
+    /**
+     * Inserts given arrayEntry into given map, under given mapKey. What's special here, is that a NEW map entry is created with an array
+     * containing the single [arrayEntry] item, if no entry yet existed.
+     * @param map
+     * @param mapKey
+     * @param arrayEntry
+     */
+    static InsertArrayItemIntoMap(map, mapKey, arrayEntry) {
+        if (!map) {
+            return;
+        }
+        if (!map.has(mapKey)) {
+            map.set(mapKey, [arrayEntry]);
+        }
+        else {
+            map.get(mapKey).push(arrayEntry);
+        }
+    }
+}
+
+class ViewSelectComponent {
+    constructor() {
+        this._viewsToThumb = new Map([
+            [CalendarView.DayView, ThumbThreeWayState.Left],
+            [CalendarView.WeekView, ThumbThreeWayState.Middle],
+            [CalendarView.MonthView, ThumbThreeWayState.Right]
+        ]);
+        this.selectedView = CalendarView.WeekView;
+        this.selectedViewChange = new EventEmitter();
+    }
+    get modelAsThumbState() {
+        return this._viewsToThumb.get(this.selectedView);
+    }
+    onThumbStateChange(thumbState) {
+        this.selectedView = MapUtils.FindKeyByValue(this._viewsToThumb, (value) => {
+            return (value === thumbState);
+        });
+        this.selectedViewChange.emit(this.selectedView);
+    }
+}
+ViewSelectComponent.decorators = [
+    { type: Component, args: [{
+                selector: "view-select",
+                template: `
+        <div class="select-wrapper">
+            <div [textContent]="'DAY'" class="label"></div>
+            <div [textContent]="'MONTH'" class="label"></div>
+        </div>
+    `,
+                encapsulation: ViewEncapsulation.None
+            },] }
+];
+ViewSelectComponent.ctorParameters = () => [];
+ViewSelectComponent.propDecorators = {
+    selectedView: [{ type: Input }],
+    selectedViewChange: [{ type: Output }]
+};
+
+class AgendaSelectEventComponent {
+    constructor(iconCacheService) {
+        this.iconCacheService = iconCacheService;
+        this.icons = Icon;
+        this.event = NULL_AGENDA_EVENT;
+        this.eventChecked = new EventEmitter();
+    }
+    checkEvent(event) {
+        this.event.checked = !this.event.checked;
+        this.eventChecked.emit(this.event);
+    }
+}
+AgendaSelectEventComponent.decorators = [
+    { type: Component, args: [{
+                selector: "agenda-select-event",
+                template: `
+        <div class="week-select-item" (click)="checkEvent($event)">
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" class="select-icon action-color" *ngIf="!event.checked"></co-icon>
+            <co-icon [iconData]="iconCacheService.getIcon(icons.ArrowPointRight)" class="select-icon action-color" *ngIf="event.checked"></co-icon>
+            <div class="moment-name">
+                <small>{{ event.date | date: 'EEEE d MMMM' | uppercase }}</small>
+                <h2>{{ event.description }}</h2>
+            </div>
+        </div>
+    `
+            },] }
+];
+AgendaSelectEventComponent.ctorParameters = () => [
+    { type: IconCacheService }
+];
+AgendaSelectEventComponent.propDecorators = {
+    event: [{ type: Input }],
+    eventChecked: [{ type: Output }]
+};
+
+class DatePlanningModule {
+}
+DatePlanningModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    InputDatePickerModule,
+                    IconModule,
+                    ButtonModule,
+                ],
+                declarations: [
+                    DatePlanningComponent,
+                    CalendarAllYearsComponent,
+                    CalendarAllMonthsComponent,
+                    CalendarHeaderComponent,
+                    CalendarComponent,
+                    CalendarViewComponent,
+                    AgendaHeaderComponent,
+                    AgendaViewComponent,
+                    AgendaMonthViewComponent,
+                    AgendaDayViewComponent,
+                    AgendaWeekViewComponent,
+                    AgendaWeekSelectViewComponent,
+                    AgendaHourViewComponent,
+                    AgendaHourCellComponent,
+                    AgendaHourViewLabelsComponent,
+                    AgendaHalfHourCellComponent,
+                    AgendaEventsComponent,
+                    AgendaEventComponent,
+                    ViewSelectComponent,
+                    AgendaSelectEventComponent,
+                    MASTER_PIPES
+                ],
+                exports: [
+                    DatePlanningComponent
+                ]
+            },] }
+];
+
 class SharedService {
     constructor(options, connector) {
         this.options = options;
@@ -3510,5 +6203,5 @@ SharedService.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { CoCircularGaugeComponent, CoCircularGaugeModule, CoLinearGaugeComponent, CoLinearGaugeModule, DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StatusbarComponent, StatusbarModule, StockComponent, StockModule, SignatureComponent as ɵa, SignaturesComponent as ɵb, StockService as ɵc, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, StockInformationComponent as ɵh, StockInformationGridComponent as ɵi, StockLocationComponent as ɵj, StockTransferComponent as ɵk, StockChangeAmountComponent as ɵl };
+export { CoCircularGaugeComponent, CoCircularGaugeModule, CoLinearGaugeComponent, CoLinearGaugeModule, DatePlanningComponent, DatePlanningModule, DocsignComponent, DocsignModule, KeyPadComponent, KeyPadModule, LayoutSwitcherComponent, LayoutSwitcherModule, SendMethodDialogComponent, SendMethodDialogModule, SharedService, StatusbarComponent, StatusbarModule, StockComponent, StockModule, SignatureComponent as ɵa, SignaturesComponent as ɵb, AgendaHourCellComponent as ɵba, AgendaHourViewLabelsComponent as ɵbb, AgendaHalfHourCellComponent as ɵbc, AgendaEventsComponent as ɵbd, AgendaEventComponent as ɵbe, ViewSelectComponent as ɵbf, AgendaSelectEventComponent as ɵbg, MASTER_PIPES as ɵbh, ArrayNumberPipe as ɵbi, UCfirstPipe as ɵbj, StockService as ɵc, SharedConnectorService as ɵd, OptionsService as ɵe, DictionaryService as ɵf, IconCacheService as ɵg, StockInformationComponent as ɵh, StockInformationGridComponent as ɵi, StockLocationComponent as ɵj, StockTransferComponent as ɵk, StockChangeAmountComponent as ɵl, CalendarAllYearsComponent as ɵm, CalendarAllMonthsComponent as ɵn, CalendarHeaderComponent as ɵo, CalendarComponent as ɵp, CalendarViewComponent as ɵq, LanguageCode as ɵr, AgendaHeaderComponent as ɵs, AgendaViewComponent as ɵt, AgendaMonthViewComponent as ɵu, AgendaBaseViewComponent as ɵv, AgendaDayViewComponent as ɵw, AgendaWeekViewComponent as ɵx, AgendaWeekSelectViewComponent as ɵy, AgendaHourViewComponent as ɵz };
 //# sourceMappingURL=colijnit-sharedcomponents.js.map