@simpleangularcontrols/sac-bootstrap4 10.0.0-rc.8 → 13.0.0-rc.10

package/bundles/simpleangularcontrols-sac-bootstrap4.umd.js

@@ -1,3359 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/common/http'), require('@angular/core'), require('@angular/forms'), require('@simpleangularcontrols/sac-common'), require('rxjs'), require('rxjs/operators'), require('angular-imask'), require('moment'), require('@tinymce/tinymce-angular')) :
-    typeof define === 'function' && define.amd ? define('@simpleangularcontrols/sac-bootstrap4', ['exports', '@angular/common', '@angular/common/http', '@angular/core', '@angular/forms', '@simpleangularcontrols/sac-common', 'rxjs', 'rxjs/operators', 'angular-imask', 'moment', '@tinymce/tinymce-angular'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.simpleangularcontrols = global.simpleangularcontrols || {}, global.simpleangularcontrols['sac-bootstrap4'] = {}), global.ng.common, global.ng.common.http, global.ng.core, global.ng.forms, global.sacCommon, global.rxjs, global.rxjs.operators, global.angularImask, global.moment, global.tinymceAngular));
-}(this, (function (exports, common, http, core, forms, sacCommon, rxjs, operators, angularImask, moment_, tinymceAngular) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var moment___default = /*#__PURE__*/_interopDefaultLegacy(moment_);
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol */
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b)
-                if (Object.prototype.hasOwnProperty.call(b, p))
-                    d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    function __extends(d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    }
-    var __assign = function () {
-        __assign = Object.assign || function __assign(t) {
-            for (var s, i = 1, n = arguments.length; i < n; i++) {
-                s = arguments[i];
-                for (var p in s)
-                    if (Object.prototype.hasOwnProperty.call(s, p))
-                        t[p] = s[p];
-            }
-            return t;
-        };
-        return __assign.apply(this, arguments);
-    };
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s)
-            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-                t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-    function __decorate(decorators, target, key, desc) {
-        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-            r = Reflect.decorate(decorators, target, key, desc);
-        else
-            for (var i = decorators.length - 1; i >= 0; i--)
-                if (d = decorators[i])
-                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    }
-    function __param(paramIndex, decorator) {
-        return function (target, key) { decorator(target, key, paramIndex); };
-    }
-    function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-        function accept(f) { if (f !== void 0 && typeof f !== "function")
-            throw new TypeError("Function expected"); return f; }
-        var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-        var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-        var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-        var _, done = false;
-        for (var i = decorators.length - 1; i >= 0; i--) {
-            var context = {};
-            for (var p in contextIn)
-                context[p] = p === "access" ? {} : contextIn[p];
-            for (var p in contextIn.access)
-                context.access[p] = contextIn.access[p];
-            context.addInitializer = function (f) { if (done)
-                throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-            var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-            if (kind === "accessor") {
-                if (result === void 0)
-                    continue;
-                if (result === null || typeof result !== "object")
-                    throw new TypeError("Object expected");
-                if (_ = accept(result.get))
-                    descriptor.get = _;
-                if (_ = accept(result.set))
-                    descriptor.set = _;
-                if (_ = accept(result.init))
-                    initializers.unshift(_);
-            }
-            else if (_ = accept(result)) {
-                if (kind === "field")
-                    initializers.unshift(_);
-                else
-                    descriptor[key] = _;
-            }
-        }
-        if (target)
-            Object.defineProperty(target, contextIn.name, descriptor);
-        done = true;
-    }
-    ;
-    function __runInitializers(thisArg, initializers, value) {
-        var useValue = arguments.length > 2;
-        for (var i = 0; i < initializers.length; i++) {
-            value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-        }
-        return useValue ? value : void 0;
-    }
-    ;
-    function __propKey(x) {
-        return typeof x === "symbol" ? x : "".concat(x);
-    }
-    ;
-    function __setFunctionName(f, name, prefix) {
-        if (typeof name === "symbol")
-            name = name.description ? "[".concat(name.description, "]") : "";
-        return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-    }
-    ;
-    function __metadata(metadataKey, metadataValue) {
-        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-            return Reflect.metadata(metadataKey, metadataValue);
-    }
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-    function __generator(thisArg, body) {
-        var _ = { label: 0, sent: function () { if (t[0] & 1)
-                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
-        function verb(n) { return function (v) { return step([n, v]); }; }
-        function step(op) {
-            if (f)
-                throw new TypeError("Generator is already executing.");
-            while (g && (g = 0, op[0] && (_ = 0)), _)
-                try {
-                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
-                        return t;
-                    if (y = 0, t)
-                        op = [op[0] & 2, t.value];
-                    switch (op[0]) {
-                        case 0:
-                        case 1:
-                            t = op;
-                            break;
-                        case 4:
-                            _.label++;
-                            return { value: op[1], done: false };
-                        case 5:
-                            _.label++;
-                            y = op[1];
-                            op = [0];
-                            continue;
-                        case 7:
-                            op = _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                        default:
-                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                                _ = 0;
-                                continue;
-                            }
-                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                                _.label = op[1];
-                                break;
-                            }
-                            if (op[0] === 6 && _.label < t[1]) {
-                                _.label = t[1];
-                                t = op;
-                                break;
-                            }
-                            if (t && _.label < t[2]) {
-                                _.label = t[2];
-                                _.ops.push(op);
-                                break;
-                            }
-                            if (t[2])
-                                _.ops.pop();
-                            _.trys.pop();
-                            continue;
-                    }
-                    op = body.call(thisArg, _);
-                }
-                catch (e) {
-                    op = [6, e];
-                    y = 0;
-                }
-                finally {
-                    f = t = 0;
-                }
-            if (op[0] & 5)
-                throw op[1];
-            return { value: op[0] ? op[1] : void 0, done: true };
-        }
-    }
-    var __createBinding = Object.create ? (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        var desc = Object.getOwnPropertyDescriptor(m, k);
-        if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-            desc = { enumerable: true, get: function () { return m[k]; } };
-        }
-        Object.defineProperty(o, k2, desc);
-    }) : (function (o, m, k, k2) {
-        if (k2 === undefined)
-            k2 = k;
-        o[k2] = m[k];
-    });
-    function __exportStar(m, o) {
-        for (var p in m)
-            if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
-                __createBinding(o, m, p);
-    }
-    function __values(o) {
-        var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
-        if (m)
-            return m.call(o);
-        if (o && typeof o.length === "number")
-            return {
-                next: function () {
-                    if (o && i >= o.length)
-                        o = void 0;
-                    return { value: o && o[i++], done: !o };
-                }
-            };
-        throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
-    }
-    function __read(o, n) {
-        var m = typeof Symbol === "function" && o[Symbol.iterator];
-        if (!m)
-            return o;
-        var i = m.call(o), r, ar = [], e;
-        try {
-            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
-                ar.push(r.value);
-        }
-        catch (error) {
-            e = { error: error };
-        }
-        finally {
-            try {
-                if (r && !r.done && (m = i["return"]))
-                    m.call(i);
-            }
-            finally {
-                if (e)
-                    throw e.error;
-            }
-        }
-        return ar;
-    }
-    /** @deprecated */
-    function __spread() {
-        for (var ar = [], i = 0; i < arguments.length; i++)
-            ar = ar.concat(__read(arguments[i]));
-        return ar;
-    }
-    /** @deprecated */
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++)
-            s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-    function __spreadArray(to, from, pack) {
-        if (pack || arguments.length === 2)
-            for (var i = 0, l = from.length, ar; i < l; i++) {
-                if (ar || !(i in from)) {
-                    if (!ar)
-                        ar = Array.prototype.slice.call(from, 0, i);
-                    ar[i] = from[i];
-                }
-            }
-        return to.concat(ar || Array.prototype.slice.call(from));
-    }
-    function __await(v) {
-        return this instanceof __await ? (this.v = v, this) : new __await(v);
-    }
-    function __asyncGenerator(thisArg, _arguments, generator) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var g = generator.apply(thisArg, _arguments || []), i, q = [];
-        return i = {}, verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
-        function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
-        function verb(n, f) { if (g[n]) {
-            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
-            if (f)
-                i[n] = f(i[n]);
-        } }
-        function resume(n, v) { try {
-            step(g[n](v));
-        }
-        catch (e) {
-            settle(q[0][3], e);
-        } }
-        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-        function fulfill(value) { resume("next", value); }
-        function reject(value) { resume("throw", value); }
-        function settle(f, v) { if (f(v), q.shift(), q.length)
-            resume(q[0][0], q[0][1]); }
-    }
-    function __asyncDelegator(o) {
-        var i, p;
-        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
-    }
-    function __asyncValues(o) {
-        if (!Symbol.asyncIterator)
-            throw new TypeError("Symbol.asyncIterator is not defined.");
-        var m = o[Symbol.asyncIterator], i;
-        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-    }
-    function __makeTemplateObject(cooked, raw) {
-        if (Object.defineProperty) {
-            Object.defineProperty(cooked, "raw", { value: raw });
-        }
-        else {
-            cooked.raw = raw;
-        }
-        return cooked;
-    }
-    ;
-    var __setModuleDefault = Object.create ? (function (o, v) {
-        Object.defineProperty(o, "default", { enumerable: true, value: v });
-    }) : function (o, v) {
-        o["default"] = v;
-    };
-    function __importStar(mod) {
-        if (mod && mod.__esModule)
-            return mod;
-        var result = {};
-        if (mod != null)
-            for (var k in mod)
-                if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
-                    __createBinding(result, mod, k);
-        __setModuleDefault(result, mod);
-        return result;
-    }
-    function __importDefault(mod) {
-        return (mod && mod.__esModule) ? mod : { default: mod };
-    }
-    function __classPrivateFieldGet(receiver, state, kind, f) {
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a getter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot read private member from an object whose class did not declare it");
-        return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-    }
-    function __classPrivateFieldSet(receiver, state, value, kind, f) {
-        if (kind === "m")
-            throw new TypeError("Private method is not writable");
-        if (kind === "a" && !f)
-            throw new TypeError("Private accessor was defined without a setter");
-        if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-            throw new TypeError("Cannot write private member to an object whose class did not declare it");
-        return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-    }
-    function __classPrivateFieldIn(state, receiver) {
-        if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
-            throw new TypeError("Cannot use 'in' operator on non-object");
-        return typeof state === "function" ? receiver === state : state.has(receiver);
-    }
-    function __addDisposableResource(env, value, async) {
-        if (value !== null && value !== void 0) {
-            if (typeof value !== "object" && typeof value !== "function")
-                throw new TypeError("Object expected.");
-            var dispose, inner;
-            if (async) {
-                if (!Symbol.asyncDispose)
-                    throw new TypeError("Symbol.asyncDispose is not defined.");
-                dispose = value[Symbol.asyncDispose];
-            }
-            if (dispose === void 0) {
-                if (!Symbol.dispose)
-                    throw new TypeError("Symbol.dispose is not defined.");
-                dispose = value[Symbol.dispose];
-                if (async)
-                    inner = dispose;
-            }
-            if (typeof dispose !== "function")
-                throw new TypeError("Object not disposable.");
-            if (inner)
-                dispose = function () { try {
-                    inner.call(this);
-                }
-                catch (e) {
-                    return Promise.reject(e);
-                } };
-            env.stack.push({ value: value, dispose: dispose, async: async });
-        }
-        else if (async) {
-            env.stack.push({ async: true });
-        }
-        return value;
-    }
-    var _SuppressedError = typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-        var e = new Error(message);
-        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
-    function __disposeResources(env) {
-        function fail(e) {
-            env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e;
-            env.hasError = true;
-        }
-        function next() {
-            while (env.stack.length) {
-                var rec = env.stack.pop();
-                try {
-                    var result = rec.dispose && rec.dispose.call(rec.value);
-                    if (rec.async)
-                        return Promise.resolve(result).then(next, function (e) { fail(e); return next(); });
-                }
-                catch (e) {
-                    fail(e);
-                }
-            }
-            if (env.hasError)
-                throw env.error;
-        }
-        return next();
-    }
-    var tslib_es6 = {
-        __extends: __extends,
-        __assign: __assign,
-        __rest: __rest,
-        __decorate: __decorate,
-        __param: __param,
-        __metadata: __metadata,
-        __awaiter: __awaiter,
-        __generator: __generator,
-        __createBinding: __createBinding,
-        __exportStar: __exportStar,
-        __values: __values,
-        __read: __read,
-        __spread: __spread,
-        __spreadArrays: __spreadArrays,
-        __spreadArray: __spreadArray,
-        __await: __await,
-        __asyncGenerator: __asyncGenerator,
-        __asyncDelegator: __asyncDelegator,
-        __asyncValues: __asyncValues,
-        __makeTemplateObject: __makeTemplateObject,
-        __importStar: __importStar,
-        __importDefault: __importDefault,
-        __classPrivateFieldGet: __classPrivateFieldGet,
-        __classPrivateFieldSet: __classPrivateFieldSet,
-        __classPrivateFieldIn: __classPrivateFieldIn,
-        __addDisposableResource: __addDisposableResource,
-        __disposeResources: __disposeResources,
-    };
-
-    /**
-     * Button Component
-     *
-     * <example-url>http://localhost/demo/mysample.component.html</example-url>
-     */
-    var SacButtonComponent = /** @class */ (function (_super) {
-        __extends(SacButtonComponent, _super);
-        function SacButtonComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacButtonComponent;
-    }(sacCommon.SacButtonCommon));
-    SacButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-button',
-                    template: "<button\r\n  [id]=\"name\"\r\n  type=\"button\"\r\n  class=\"btn d-flex justify-content-center align-items-center\"\r\n  [attr.disabled]=\"_isdisabled || isloading ? 'disabled' : null\"\r\n  (click)=\"buttonClick()\"\r\n  [class.btn-primary]=\"role === 'primary'\"\r\n  [class.btn-secondary]=\"role === 'secondary' || role === 'default'\"\r\n  [class.btn-success]=\"role === 'success'\"\r\n  [class.btn-danger]=\"role === 'danger'\"\r\n  [class.btn-warning]=\"role === 'warning'\"\r\n  [class.btn-info]=\"role === 'info'\"\r\n  [class.btn-link]=\"role === 'link'\"\r\n>\r\n  <span\r\n    *ngIf=\"isloading\"\r\n    class=\"spinner-border spinner-border-sm mr-2\"\r\n    role=\"status\"\r\n    aria-hidden=\"true\"\r\n  ></span>\r\n  <i *ngIf=\"!isloading && icon !== ''\" [ngClass]=\"icon\" [class.mr-2]=\"text\"></i\r\n  >{{text}}\r\n</button>\r\n"
-                },] }
-    ];
-
-    var SACBootstrap4ButtonModule = /** @class */ (function () {
-        function SACBootstrap4ButtonModule() {
-        }
-        return SACBootstrap4ButtonModule;
-    }());
-    SACBootstrap4ButtonModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacButtonComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacButtonComponent]
-                },] }
-    ];
-
-    /**
-     * Dialog Komponente
-     */
-    var SacDialogComponent = /** @class */ (function (_super) {
-        __extends(SacDialogComponent, _super);
-        /**
-         * Konstruktor
-         * @param el DOM Element Referenz
-         * @param cdRef Change Detection Service
-         */
-        function SacDialogComponent(el, cdRef) {
-            var _this = _super.call(this, cdRef) || this;
-            _this.element = el.nativeElement;
-            return _this;
-        }
-        /**
-         * Event wenn Komponente initialisiert wird
-         */
-        SacDialogComponent.prototype.ngOnInit = function () {
-            // Element an Body für korrektes Styling unter Bootstrap 3 verschieben
-            document.body.appendChild(this.element);
-        };
-        /**
-         * Event wenn Element entfernt wird
-         */
-        SacDialogComponent.prototype.ngOnDestroy = function () {
-            this.hide();
-            if (document.body.contains(this.element)) {
-                document.body.removeChild(this.element);
-            }
-            _super.prototype.ngOnDestroy.call(this);
-        };
-        return SacDialogComponent;
-    }(sacCommon.SacDialogCommon));
-    SacDialogComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-dialog',
-                    template: "<div #dialog class=\"modal show\" style=\"display: block\" tabindex=\"-1\" role=\"dialog\" *ngIf=\"_show\">\r\n  <div class=\"modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable\" role=\"document\"\r\n       [class.modal-xl]=\"_size === 'extralarge'\"\r\n       [class.modal-lg]=\"_size === 'large'\"\r\n       [class.modal-sm]=\"_size === 'small'\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">{{title}}</h5>\r\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\" (click)=\"hide()\" *ngIf=\"closebutton\"><span aria-hidden=\"true\">&times;</span></button>\r\n      </div>\r\n      <div class=\"modal-body\" [style.height]=\"height\">\r\n        <ng-content select=\"[dialogbody]\"></ng-content>\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <ng-content select=\"[dialogfooter]\"></ng-content>\r\n      </div>\r\n    </div><!-- /.modal-content -->\r\n  </div><!-- /.modal-dialog -->\r\n</div><!-- /.modal -->\r\n<div class=\"modal-backdrop show\" *ngIf=\"_show && backdrop\" #backdrop></div>\r\n"
-                },] }
-    ];
-    SacDialogComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.ChangeDetectorRef }
-    ]; };
-
-    var SACBootstrap4DialogModule = /** @class */ (function () {
-        function SACBootstrap4DialogModule() {
-        }
-        return SACBootstrap4DialogModule;
-    }());
-    SACBootstrap4DialogModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacDialogComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacDialogComponent]
-                },] }
-    ];
-
-    /**
-     * Confirm Komponente
-     */
-    var SacConfirmComponent = /** @class */ (function (_super) {
-        __extends(SacConfirmComponent, _super);
-        function SacConfirmComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacConfirmComponent;
-    }(sacCommon.SacConfirmCommon));
-    SacConfirmComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-confirm',
-                    template: "<sac-dialog\r\n  name=\"confirmDialog\"\r\n  [(isvisible)]=\"isvisible\"\r\n  [title]=\"title\"\r\n  [allowesc]=\"false\"\r\n  [closebutton]=\"false\"\r\n  dialogsize=\"small\"\r\n>\r\n  <div dialogbody>\r\n    <div class=\"media\">\r\n      <img\r\n        [attr.src]=\"image\"\r\n        class=\"align-self-center mr-3\"\r\n        *ngIf=\"hasImage()\"\r\n      />\r\n      <div class=\"media-body\">{{message}}</div>\r\n    </div>\r\n  </div>\r\n  <ng-container dialogfooter>\r\n    <ng-container *ngFor=\"let button of buttons\">\r\n      <sac-button\r\n        [name]=\"button.key\"\r\n        [text]=\"button.text\"\r\n        [role]=\"button.role || 'default'\"\r\n        (clicked)=\"confirm(button.key)\"\r\n      ></sac-button>\r\n    </ng-container>\r\n  </ng-container>\r\n</sac-dialog>\r\n"
-                },] }
-    ];
-
-    /**
-     * Service für Confirm Messages in TypeScript Code
-     *
-     * @example
-     * // Beispiel für ConfirmMessage mit Standard Buttons (Ja / Nein).
-     * confirmService.ConfirmMessage('titel', 'frage').subscribe(action => { // Action Code });
-     *
-     * @example
-     * // Beispiel für ConfirmMessage mit eigenen Buttons
-     * let buttons: SacConfirmButton[] = [];
-     * buttons.push(new SacConfirmButton('ActionKey','Text Primary'));
-     * buttons.push(new SacConfirmButton('ActionKey2','Text Button 2'));
-     * confirmService.ConfirmMessage('titel', 'frage', buttons).subscribe(action => { // Action Code });
-     */
-    var ServiceConfirm = /** @class */ (function (_super) {
-        __extends(ServiceConfirm, _super);
-        // #endregion Properties
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param componentFactoryResolver Component Factory Resolver Instanz
-         * @param appRef Application Referenz. Wird benötigt um den Dialog am Body anzuhängen
-         * @param injector Injector. Wird benötigt um den Dialog dynamisch zu erzeugen
-         */
-        function ServiceConfirm(componentFactoryResolver, appRef, injector) {
-            var _this = _super.call(this, appRef, injector) || this;
-            _this.componentFactoryResolver = componentFactoryResolver;
-            // #region Properties
-            /**
-             * Collection von Buttons die angezeigt werden müssen.
-             */
-            _this.buttons = [];
-            /**
-             * Message die in Dialog angezeigt werden soll.
-             */
-            _this.message = '';
-            /**
-             * Titel der im Dialog angezeigt werden soll.
-             */
-            _this.title = '';
-            return _this;
-        }
-        // #endregion Constructors
-        // #region Public Methods
-        /**
-         * Confirm Dialog anzeigen
-         * @param message Nachricht die angezeigt werden soll.
-         * @returns EventEmitter mit Key des Buttons, welcher geklickt wurde.
-         */
-        ServiceConfirm.prototype.ConfirmMessage = function (title, message, buttons) {
-            var _this = this;
-            if (buttons === void 0) { buttons = null; }
-            this.title = title;
-            this.message = message;
-            // Default Buttons setzen, wenn keine Buttons angegeben sind
-            if (!sacCommon.isDefined(buttons)) {
-                this.buttons = [];
-                rxjs.forkJoin({
-                    button_yes: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonYes),
-                    button_no: this.localisationService.GetString(this.validationKeyService.ConfirmDefaultButtonNo),
-                })
-                    .pipe(operators.take(1))
-                    .subscribe(function (texte) {
-                    _this.buttons.push(new sacCommon.SacConfirmButton('yes', texte.button_yes, 'primary'));
-                    _this.buttons.push(new sacCommon.SacConfirmButton('no', texte.button_no));
-                });
-            }
-            else {
-                this.buttons = buttons;
-            }
-            return _super.prototype.Confirm.call(this);
-        };
-        /**
-         * Erzeugen einer Component Factory für einen Dialog
-         */
-        ServiceConfirm.prototype.GetComponentFactory = function () {
-            return this.componentFactoryResolver.resolveComponentFactory(SacConfirmComponent);
-        };
-        // #endregion Public Methods
-        // #region Protected Methods
-        /**
-         * Konfiguration des Dialogs
-         * @param instance Instanz eines SacConfirm Dialogs
-         */
-        ServiceConfirm.prototype.ConfigureDialog = function (instance) {
-            // Text in Dialog setzen
-            instance.title = this.title;
-            instance.message = this.message;
-            instance.buttons = this.buttons;
-            instance.image = this.iconService.ConfirmDefaultImage;
-        };
-        return ServiceConfirm;
-    }(sacCommon.ServiceConfirmCommon));
-    ServiceConfirm.decorators = [
-        { type: core.Injectable }
-    ];
-    ServiceConfirm.ctorParameters = function () { return [
-        { type: core.ComponentFactoryResolver, decorators: [{ type: core.Inject, args: [core.ComponentFactoryResolver,] }] },
-        { type: core.ApplicationRef },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     *  Module für Confirm Messages
-     *
-     *  In NgModule der Applikation folgenden Eintrag bei Imports einfügen: ExanicBootstrap4ConfirmModule.forRoot()
-     *
-     */
-    var SACBootstrap4ConfirmModule = /** @class */ (function () {
-        function SACBootstrap4ConfirmModule() {
-        }
-        // #region Public Static Methods
-        SACBootstrap4ConfirmModule.forRoot = function () {
-            return {
-                ngModule: SACBootstrap4ConfirmModule,
-                providers: [ServiceConfirm],
-            };
-        };
-        return SACBootstrap4ConfirmModule;
-    }());
-    SACBootstrap4ConfirmModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacConfirmComponent],
-                    imports: [common.CommonModule, SACBootstrap4DialogModule, SACBootstrap4ButtonModule],
-                    exports: [SacConfirmComponent],
-                    entryComponents: [SacConfirmComponent],
-                },] }
-    ];
-
-    /**
-     * Component für Contextmenü
-     */
-    var SacContextmenuComponent = /** @class */ (function (_super) {
-        __extends(SacContextmenuComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param document Referenz auf HTML Document
-         * @param ngZone Angular Zone Service
-         * @param elementRef Referenz auf HTML Element der aktuellen Komponente
-         * @param renderer Render Service von Angular
-         * @param injector  injector to resolve services
-         */
-        function SacContextmenuComponent(document, ngZone, elementRef, renderer, injector) {
-            return _super.call(this, document, ngZone, elementRef, renderer, injector) || this;
-        }
-        return SacContextmenuComponent;
-    }(sacCommon.SacContextmenuCommon));
-    SacContextmenuComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-contextmenu',
-                    template: "<div class=\"dropdown\" [ngClass]=\"cssclass\">\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n  ></ng-container>\r\n\r\n  <div\r\n    class=\"dropdown-menu dropdown-menu-right\"\r\n    sacContextMenuContainer\r\n    [class.show]=\"isopen\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacContextMenuAnchor\r\n    class=\"btn btn-sm btn-link text-secondary text-decoration-none\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  >\r\n    <i [class]=\"IconContextMenu\"></i>\r\n  </button>\r\n</ng-template>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacContextmenuComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
-        { type: core.NgZone },
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Component für Menü Eintrag in Context Menü
-     */
-    var SacContextmenuItemButtonComponent = /** @class */ (function (_super) {
-        __extends(SacContextmenuItemButtonComponent, _super);
-        /**
-         * Constructor
-         * @param contextmenu Instance von Context Menü
-         */
-        function SacContextmenuItemButtonComponent(contextmenu) {
-            return _super.call(this, contextmenu) || this;
-        }
-        return SacContextmenuItemButtonComponent;
-    }(sacCommon.SacContextmenuItemButtonCommon));
-    SacContextmenuItemButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-contextmenubutton',
-                    template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
-                },] }
-    ];
-    SacContextmenuItemButtonComponent.ctorParameters = function () { return [
-        { type: sacCommon.SacContextmenuCommon }
-    ]; };
-
-    /**
-     * Splitter Komponente in Context Menü
-     */
-    var SacContextmenuItemSplitterComponent = /** @class */ (function (_super) {
-        __extends(SacContextmenuItemSplitterComponent, _super);
-        function SacContextmenuItemSplitterComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacContextmenuItemSplitterComponent;
-    }(sacCommon.SacContextmenuItemCommon));
-    SacContextmenuItemSplitterComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-contextmenusplitter',
-                    template: "<div class=\"dropdown-divider\"></div>"
-                },] }
-    ];
-
-    /**
-     * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
-     */
-    var SacContextmenuAnchorDirective = /** @class */ (function (_super) {
-        __extends(SacContextmenuAnchorDirective, _super);
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param elementRef HTML DOM Referenz
-         */
-        function SacContextmenuAnchorDirective(elementRef) {
-            return _super.call(this, elementRef) || this;
-        }
-        return SacContextmenuAnchorDirective;
-    }(sacCommon.SacContextmenuAnchorCommon));
-    SacContextmenuAnchorDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sacContextMenuAnchor]',
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuAnchorCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuAnchorDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    SacContextmenuAnchorDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * Marker Komponente für Context Menü
-     */
-    var SacContextmenuContainerDirective = /** @class */ (function (_super) {
-        __extends(SacContextmenuContainerDirective, _super);
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param elementRef Referenz auf DOM Element
-         */
-        function SacContextmenuContainerDirective(elementRef) {
-            return _super.call(this, elementRef) || this;
-        }
-        return SacContextmenuContainerDirective;
-    }(sacCommon.SacContextMenuContrainerCommon));
-    SacContextmenuContainerDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sacContextMenuContainer]',
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextMenuContrainerCommon,
-                            useExisting: core.forwardRef(function () { return SacContextmenuContainerDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    SacContextmenuContainerDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-
-    var SACBootstrap4ContextmenuModule = /** @class */ (function () {
-        function SACBootstrap4ContextmenuModule() {
-        }
-        return SACBootstrap4ContextmenuModule;
-    }());
-    SACBootstrap4ContextmenuModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacContextmenuComponent,
-                        SacContextmenuItemButtonComponent,
-                        SacContextmenuItemSplitterComponent,
-                        SacContextmenuAnchorDirective,
-                        SacContextmenuContainerDirective,
-                    ],
-                    imports: [common.CommonModule],
-                    exports: [
-                        SacContextmenuComponent,
-                        SacContextmenuItemButtonComponent,
-                        SacContextmenuItemSplitterComponent,
-                        SacContextmenuAnchorDirective,
-                    ],
-                },] }
-    ];
-
-    /**
-     * Erweiterung / Hooking für automatismen in Formular. Wird als Container für alle Controls benötigt.
-     *
-     * @example Beispiel über Div Container
-     *
-     * <div ngForm></div>
-     *
-     * @example Beispiel über Form Tag
-     *
-     * <form></form>
-     *
-     */
-    var SacFormDirective = /** @class */ (function (_super) {
-        __extends(SacFormDirective, _super);
-        /**
-         * Konstruktor
-         * @param form Instanz von NgForm für eigene automatische Formular Logik
-         */
-        function SacFormDirective(form) {
-            var _this = _super.call(this, form) || this;
-            /**
-             * Setzt die Standard CSS Klasse für auf dem Form Container
-             */
-            _this.cssClassForm = true;
-            return _this;
-        }
-        return SacFormDirective;
-    }(sacCommon.SacFormCommon));
-    SacFormDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: 'form:not([ngNoForm]):not([formGroup]),[ngForm]',
-                    exportAs: 'sacform',
-                },] }
-    ];
-    SacFormDirective.ctorParameters = function () { return [
-        { type: forms.NgForm }
-    ]; };
-    SacFormDirective.propDecorators = {
-        cssClassForm: [{ type: core.HostBinding, args: ['class.form',] }]
-    };
-
-    // #region Classes
-    /**
-     * Directive to inherit an NgForm/NgForm from a parent component
-     */
-    var SacInheritFormDirective = /** @class */ (function (_super) {
-        __extends(SacInheritFormDirective, _super);
-        // #region Constructors
-        /**
-         * Construtor
-         * @param injector: injector to receive the NgForm instance
-         */
-        function SacInheritFormDirective(injector) {
-            return _super.call(this, injector.get(forms.NgForm)) || this;
-        }
-        return SacInheritFormDirective;
-    }(sacCommon.SacFormCommon));
-    SacInheritFormDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sacInheritForm]',
-                    exportAs: 'sacinheritform',
-                    providers: [
-                        {
-                            provide: SacFormDirective,
-                            useFactory: SACFORM_FACTORY,
-                            deps: [[new core.SkipSelf(), SacFormDirective]],
-                        },
-                        {
-                            provide: forms.ControlContainer,
-                            useFactory: NGFORM_FACTORY,
-                            deps: [forms.NgForm],
-                        },
-                    ],
-                },] }
-    ];
-    SacInheritFormDirective.ctorParameters = function () { return [
-        { type: core.Injector }
-    ]; };
-    // #endregion Classes
-    // #region Functions
-    /**
-     * Factory Methode für NgForm
-     * @param form NgForm
-     */
-    function NGFORM_FACTORY(form) {
-        return form;
-    }
-    /**
-     * Factory Methode für SacForm
-     * @param form SacFormular
-     */
-    function SACFORM_FACTORY(form) {
-        return form;
-    }
-    // #endregion Functions
-
-    var SACBootstrap4FormModule = /** @class */ (function () {
-        function SACBootstrap4FormModule() {
-        }
-        return SACBootstrap4FormModule;
-    }());
-    SACBootstrap4FormModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacFormDirective, SacInheritFormDirective],
-                    imports: [common.CommonModule, forms.FormsModule],
-                    exports: [SacFormDirective, SacInheritFormDirective],
-                },] }
-    ];
-
-    var SacFormLayoutDirective = /** @class */ (function (_super) {
-        __extends(SacFormLayoutDirective, _super);
-        function SacFormLayoutDirective() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacFormLayoutDirective;
-    }(sacCommon.SacFormLayoutCommon));
-    SacFormLayoutDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sacFormLayout]',
-                },] }
-    ];
-
-    var SacToControlHeightPipe = /** @class */ (function () {
-        function SacToControlHeightPipe() {
-        }
-        // #region Public Methods
-        /**
-         * Returns the CSS class that defines the height for the control
-         * @param value ControlHeight value or null
-         */
-        SacToControlHeightPipe.prototype.transform = function (value) {
-            // Return default value
-            if (!value) {
-                return '';
-            }
-            switch (value) {
-                case sacCommon.ControlHeight.Small:
-                    return 'form-control-sm';
-                case sacCommon.ControlHeight.Large:
-                    return 'form-control-lg';
-                default:
-                    return '';
-            }
-        };
-        return SacToControlHeightPipe;
-    }());
-    SacToControlHeightPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'toControlHeight',
-                },] }
-    ];
-
-    var SacToControlWidthCssPipe = /** @class */ (function () {
-        function SacToControlWidthCssPipe() {
-        }
-        // #region Public Methods
-        /**
-         * Get CSS classes from label width configuration to set control size
-         * @param value Configuration with grid columns for different viewports
-         * @returns string with css classe for bootstrap3
-         */
-        SacToControlWidthCssPipe.prototype.transform = function (value) {
-            var classes = [];
-            if (value.labelSizeXs) {
-                classes.push('col-' + this.calcControlSize(value.labelSizeXs));
-            }
-            if (value.labelSizeSm) {
-                classes.push('col-sm-' + this.calcControlSize(value.labelSizeSm));
-            }
-            if (value.labelSizeMd) {
-                classes.push('col-md-' + this.calcControlSize(value.labelSizeMd));
-            }
-            if (value.labelSizeLg) {
-                classes.push('col-lg-' + this.calcControlSize(value.labelSizeLg));
-            }
-            if (value.labelSizeXl) {
-                classes.push('col-xl-' + this.calcControlSize(value.labelSizeXl));
-            }
-            return classes.join(' ');
-        };
-        // #endregion Public Methods
-        // #region Private Methods
-        /**
-         * calculate the control size
-         * @param labelsize grid size of label
-         * @returns grid size for control. should be between 1 and 12
-         */
-        SacToControlWidthCssPipe.prototype.calcControlSize = function (labelsize) {
-            if (labelsize === 12) {
-                return 12;
-            }
-            if (!labelsize) {
-                return 12;
-            }
-            return 12 - labelsize;
-        };
-        return SacToControlWidthCssPipe;
-    }());
-    SacToControlWidthCssPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'toControlWidthCss',
-                },] }
-    ];
-
-    var SacToLabelHeightPipe = /** @class */ (function () {
-        function SacToLabelHeightPipe() {
-        }
-        // #region Public Methods
-        /**
-         * Returns the CSS class that defines the height for the control
-         * @param value ControlHeight value or null
-         */
-        SacToLabelHeightPipe.prototype.transform = function (value) {
-            // Return default value
-            if (!value) {
-                return '';
-            }
-            switch (value) {
-                case sacCommon.ControlHeight.Small:
-                    return 'col-form-label-sm';
-                case sacCommon.ControlHeight.Large:
-                    return 'col-form-label-lg';
-                default:
-                    return '';
-            }
-        };
-        return SacToLabelHeightPipe;
-    }());
-    SacToLabelHeightPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'toLabelHeight',
-                },] }
-    ];
-
-    var SacToLabelWidthCssPipe = /** @class */ (function () {
-        function SacToLabelWidthCssPipe() {
-        }
-        // #region Public Methods
-        /**
-         * Get CSS classes from label width configuration to set label size
-         * @param value Configuration with grid columns for different viewports
-         * @returns string with css classe for bootstrap3
-         */
-        SacToLabelWidthCssPipe.prototype.transform = function (value) {
-            var classes = [];
-            if (value.labelSizeXs) {
-                classes.push('col-' + value.labelSizeXs);
-            }
-            if (value.labelSizeSm) {
-                classes.push('col-sm-' + value.labelSizeSm);
-            }
-            if (value.labelSizeMd) {
-                classes.push('col-md-' + value.labelSizeMd);
-            }
-            if (value.labelSizeLg) {
-                classes.push('col-lg-' + value.labelSizeLg);
-            }
-            if (value.labelSizeXl) {
-                classes.push('col-xl-' + value.labelSizeXl);
-            }
-            return classes.join(' ');
-        };
-        return SacToLabelWidthCssPipe;
-    }());
-    SacToLabelWidthCssPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: 'toLabelWidthCss',
-                },] }
-    ];
-
-    var SACBootstrap4LayoutModule = /** @class */ (function () {
-        function SACBootstrap4LayoutModule() {
-        }
-        return SACBootstrap4LayoutModule;
-    }());
-    SACBootstrap4LayoutModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacFormLayoutDirective,
-                        SacToControlHeightPipe,
-                        SacToControlWidthCssPipe,
-                        SacToLabelHeightPipe,
-                        SacToLabelWidthCssPipe,
-                    ],
-                    imports: [common.CommonModule],
-                    exports: [
-                        SacFormLayoutDirective,
-                        SacToControlHeightPipe,
-                        SacToControlWidthCssPipe,
-                        SacToLabelHeightPipe,
-                        SacToLabelWidthCssPipe,
-                    ],
-                },] }
-    ];
-
-    /**
-     * Tooltip Komponente
-     *
-     * @example ToolTip Control
-     *
-     *  <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
-     *    <i class="tooltip"></i>
-     *  </ngTooltip>
-     *
-     * @example ToolTip Control im Inline Mode. Style auf Icon kann auch in Klasse ausgelagert werden.
-     *
-     *  <div class="form-inline">
-     *    <ngInputSearch iconname="Suchen"></ngInputSearch>
-     *    <ngTooltip tooltiptext="Mein Tooltip" [inlinemode]="true">
-     *      <i class="tooltip" style="position: relative; left: 0; top: 3px; display: inline-block; margin-right: 10px;"></i>
-     *    </ngTooltip>
-     *  </div>
-     *
-     */
-    var SacTooltipComponent = /** @class */ (function (_super) {
-        __extends(SacTooltipComponent, _super);
-        // #region Constructors
-        /**
-         * Konstrukor
-         * @param parent SacFormular Instanz
-         * @param injector Component Injector
-         */
-        function SacTooltipComponent(cdRef, ref) {
-            return _super.call(this, cdRef, ref) || this;
-        }
-        // #endregion Constructors
-        // #region Protected Methods
-        /**
-         * Padding Value for Bootstrap5 Tooltip Padding
-         * @returns Static Padding Value for BS5
-         */
-        SacTooltipComponent.prototype.getTooltipOffset = function () {
-            return 2;
-        };
-        return SacTooltipComponent;
-    }(sacCommon.SacTooltipCommon));
-    SacTooltipComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-tooltip',
-                    template: "<div [style.display]=\"inlinemode ? 'inline' : null\">\r\n  <div\r\n    #container\r\n    (mouseenter)=\"ShowTooltip()\"\r\n    (mouseleave)=\"HideTooltip()\"\r\n    [style.display]=\"inlinemode ? 'inline' : null\"\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n  <div #tooltip *ngIf=\"IsTooltipVisible()\">\r\n    <div\r\n      [class.show]=\"IsTooltipContentVisible\"\r\n      class=\"tooltip bs-tooltip-auto fade\"\r\n      style=\"position: absolute\"\r\n      [style.left.px]=\"LeftPos\"\r\n      [style.top.px]=\"TopPos\"\r\n      [class.top]=\"GetTooltipPosition() === TooltipPosition.top\"\r\n      [class.left]=\"GetTooltipPosition() === TooltipPosition.left\"\r\n      [class.right]=\"GetTooltipPosition() === TooltipPosition.right\"\r\n      [class.bottom]=\"GetTooltipPosition() === TooltipPosition.bottom\"\r\n      [attr.x-placement]=\"GetTooltipPosition() == TooltipPosition.right ? 'right' : GetTooltipPosition() == TooltipPosition.left ? 'left' :  GetTooltipPosition() == TooltipPosition.top ? 'top' :GetTooltipPosition() == TooltipPosition.bottom ? 'bottom' : null\"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"position: absolute\"\r\n        [style.top.px]=\"GetTooltipPosition() === TooltipPosition.left || GetTooltipPosition() === TooltipPosition.right ? (getToolTipHeight() / 2) - 6.5 : null\"\r\n        [style.left.px]=\"GetTooltipPosition() === TooltipPosition.bottom || GetTooltipPosition() === TooltipPosition.top ? (getToolTipWidth() / 2) - 6.5 : null\"\r\n      ></div>\r\n      <div class=\"tooltip-inner\">{{tooltiptext}}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
-                },] }
-    ];
-    SacTooltipComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.ElementRef }
-    ]; };
-
-    var SACBootstrap4TooltipModule = /** @class */ (function () {
-        function SACBootstrap4TooltipModule() {
-        }
-        return SACBootstrap4TooltipModule;
-    }());
-    SACBootstrap4TooltipModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacTooltipComponent],
-                    imports: [common.CommonModule],
-                    exports: [SacTooltipComponent],
-                },] }
-    ];
-
-    /**
-     * Dropzone Komponente für mehrere Uploads
-     * @see https://github.com/kukhariev/ngx-uploadx/
-     */
-    var SacDropzoneMultipleComponent = /** @class */ (function (_super) {
-        __extends(SacDropzoneMultipleComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param renderer Angular rendering engine
-         * @param ngZone ngZone to manage external javascripts
-         */
-        function SacDropzoneMultipleComponent(formLayout, injector, renderer, ngZone) {
-            return _super.call(this, formLayout, injector, renderer, ngZone) || this;
-        }
-        // #endregion Constructors
-        // #region Public Methods
-        /**
-         * Initialisiert das Control
-         */
-        SacDropzoneMultipleComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return SacDropzoneMultipleComponent;
-    }(sacCommon.SacDropzoneMultipleCommon));
-    SacDropzoneMultipleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-dropzonemultiple',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [class.active]=\"active\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div\r\n            class=\"dropzone-uploadstates\"\r\n            [class.mt-1]=\"i > 0\"\r\n            *ngFor=\"let file of uploads; let i = index\"\r\n          >\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        multiple\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacDropzoneMultipleComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDropzoneMultipleComponent; }),
-                        },
-                    ],
-                    styles: [".dropzone{background:transparent;border:.125rem dashed #d3d3d3;border-radius:.5rem;min-height:9.75rem}.dropzone.is-invalid{border-color:var(--red)}.dropzone .content{bottom:0;left:0;position:absolute;right:0;top:0}.dropzone .content .is-invalid{color:var(--red)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0;height:100%}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;position:absolute;right:0}.dropzone .custom-file-input{height:unset;min-height:100%}"]
-                },] }
-    ];
-    SacDropzoneMultipleComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.Renderer2 },
-        { type: core.NgZone }
-    ]; };
-
-    /**
-     * Dropzone Komponente für den Upload eines Files
-     * @see https://github.com/kukhariev/ngx-uploadx/
-     */
-    var SacDropzoneSingleComponent = /** @class */ (function (_super) {
-        __extends(SacDropzoneSingleComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param renderer Angular rendering engine
-         * @param ngZone ngZone to manage external javascripts
-         */
-        function SacDropzoneSingleComponent(formLayout, injector, renderer, ngZone) {
-            return _super.call(this, formLayout, injector, renderer, ngZone) || this;
-        }
-        // #endregion Constructors
-        // #region Public Methods
-        /**
-         * Initialisiert das Control
-         */
-        SacDropzoneSingleComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        return SacDropzoneSingleComponent;
-    }(sacCommon.SacDropzoneSingleCommon));
-    SacDropzoneSingleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-dropzonesingle',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"dropzone d-flex justify-content-center position-relative\"\r\n      (drop)=\"dropHandler($event)\"\r\n      (dragover)=\"onDragOver($event)\"\r\n      (dragleave)=\"onDragLeave($event)\"\r\n      [style.min-height]=\"uploadheight\"\r\n      [class.active]=\"active\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n    >\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length === 0\"\r\n      >\r\n        <div class=\"align-self-center text-center\">\r\n          <div\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <ng-content></ng-content>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"content d-flex justify-content-center\"\r\n        *ngIf=\"uploads.length > 0\"\r\n      >\r\n        <div class=\"align-self-center progress-container\">\r\n          <div class=\"dropzone-uploadstates\" *ngFor=\"let file of uploads\">\r\n            <div\r\n              class=\"input-group upload-component upload-component-multiple\"\r\n              [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <div class=\"form-control upload-progress border-secondary\">\r\n                <div class=\"progress\">\r\n                  <div\r\n                    class=\"progress-bar\"\r\n                    [class.progress-bar-success]=\"file.progress===100\"\r\n                    role=\"progressbar\"\r\n                    [attr.aria-valuenow]=\"file.progress\"\r\n                    aria-valuemin=\"0\"\r\n                    aria-valuemax=\"100\"\r\n                    [style.width.%]=\"file.progress\"\r\n                  >\r\n                    <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"input-group-append\">\r\n                <!-- image-preview-clear button -->\r\n                <a\r\n                  class=\"btn\"\r\n                  (click)=\"cancel(file.uploadId)\"\r\n                  [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                  [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n                >\r\n                  <span [class]=\"IconDelete\"></span>\r\n                </a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <input\r\n        #files\r\n        id=\"{{ name }}_uploadinput\"\r\n        type=\"file\"\r\n        class=\"custom-file-input\"\r\n        (click)=\"files.value = ''\"\r\n        (uploadxState)=\"onUpload($event)\"\r\n        [disabled]=\"HasQueueItem()\"\r\n      />\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacDropzoneSingleComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDropzoneSingleComponent; }),
-                        },
-                    ],
-                    styles: [".dropzone{background:transparent;border:.125rem dashed #d3d3d3;border-radius:.5rem;min-height:9.75rem}.dropzone.is-invalid{border-color:var(--red)}.dropzone .content{bottom:0;left:0;position:absolute;right:0;top:0}.dropzone .content .is-invalid{color:var(--red)}.dropzone .content .progress-container{min-width:50%;z-index:100}.dropzone .content .dropzone-uploadstates .upload-progress{padding:0}.dropzone .content .dropzone-uploadstates .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0;height:100%}.dropzone .content .dropzone-uploadstates .upload-progress .progress .progress-text{left:0;position:absolute;right:0}.dropzone .custom-file-input{height:unset;min-height:100%}"]
-                },] }
-    ];
-    SacDropzoneSingleComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.Renderer2 },
-        { type: core.NgZone }
-    ]; };
-
-    /**
-     * Upload Komponten
-     * @see https://github.com/kukhariev/ngx-uploadx/
-     */
-    var SacUploadComponent = /** @class */ (function (_super) {
-        __extends(SacUploadComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param renderer Angular rendering engine
-         * @param ngZone ngZone to manage external javascripts
-         */
-        function SacUploadComponent(formLayout, injector, renderer, ngZone) {
-            return _super.call(this, formLayout, injector, renderer, ngZone) || this;
-        }
-        return SacUploadComponent;
-    }(sacCommon.SacUploadSingleCommon));
-    SacUploadComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-upload',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group upload-component upload-single\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <!-- image-preview-input -->\r\n        <div\r\n          class=\"btn upload-input custom-file\"\r\n          [class.disabled]=\"HasQueueItem()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <i class=\"pr-2\" [class]=\"IconBrowse\"></i>\r\n          <span class=\"upload-browse\"\r\n            >{{\r\n            lngResourceService.GetString(validationKeyService.UploadButtonBrowse)\r\n            | async }}</span\r\n          >\r\n          <input\r\n            type=\"file\"\r\n            class=\"custom-file-input\"\r\n            #files\r\n            (click)=\"files.value = ''\"\r\n            (uploadxState)=\"onUpload($event)\"\r\n            multiple\r\n            [disabled]=\"HasQueueItem()\"\r\n          />\r\n        </div>\r\n      </div>\r\n      <div\r\n        class=\"form-control upload-progress\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      >\r\n        <div class=\"progress\">\r\n          <div\r\n            class=\"progress-bar\"\r\n            [class.progress-bar-success]=\"Progress()===100\"\r\n            role=\"progressbar\"\r\n            [attr.aria-valuenow]=\"Progress()\"\r\n            aria-valuemin=\"0\"\r\n            aria-valuemax=\"100\"\r\n            [style.width.%]=\"Progress()\"\r\n          >\r\n            <span class=\"progress-text text-dark\"\r\n              >{{ Filename() | async }}</span\r\n            >\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <input type=\"textimage-preview-filename\" class=\"form-control image-preview-filename\" disabled=\"disabled\"> --><!-- don't give a name === doesn't send on POST/GET -->\r\n      <div class=\"input-group-append\">\r\n        <!-- image-preview-clear button -->\r\n        <button\r\n          class=\"btn\"\r\n          (click)=\"cancelAll()\"\r\n          [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconDelete\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n          class=\"btn\"\r\n          (click)=\"pauseAll()\"\r\n          [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconPause\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload && enablepause && IsPaused()\"\r\n          class=\"btn\"\r\n          (click)=\"uploadAll()\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconContinue\"></span>\r\n        </button>\r\n        <button\r\n          *ngIf=\"autoupload === false\"\r\n          class=\"btn text-nowrap\"\r\n          (click)=\"uploadAll()\"\r\n          [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n          [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n          [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n        >\r\n          <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n          lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n          | async }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacUploadComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacUploadComponent; }),
-                        },
-                    ],
-                    styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{bottom:0;left:0;position:absolute;right:0;top:0}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{border:0;padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{left:0;position:absolute;right:0}"]
-                },] }
-    ];
-    SacUploadComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.Renderer2 },
-        { type: core.NgZone }
-    ]; };
-
-    /**
-     * Upload Komponente für den Upload mehrer Files
-     * @see https://github.com/kukhariev/ngx-uploadx/
-     */
-    var SacUploadMultipleComponent = /** @class */ (function (_super) {
-        __extends(SacUploadMultipleComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param renderer Angular rendering engine
-         * @param ngZone ngZone to manage external javascripts
-         */
-        function SacUploadMultipleComponent(formLayout, injector, renderer, ngZone) {
-            return _super.call(this, formLayout, injector, renderer, ngZone) || this;
-        }
-        return SacUploadMultipleComponent;
-    }(sacCommon.SacUploadMultipleCommon));
-    SacUploadMultipleComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-uploadmultiple',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div class=\"upload-component\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div\r\n            class=\"btn-group\"\r\n            [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n            [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n          >\r\n            <div\r\n              class=\"btn upload-input custom-file\"\r\n              [class.disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <i [class]=\"IconBrowse\" class=\"pr-2\"></i>\r\n              <span class=\"upload-browse\">Browse</span>\r\n              <input\r\n                type=\"file\"\r\n                class=\"custom-file-input\"\r\n                #files\r\n                (click)=\"files.value = ''\"\r\n                (uploadxState)=\"onUpload($event)\"\r\n                multiple\r\n                [disabled]=\"maxfiles > 0 &&  uploads.length >= maxfiles\"\r\n              />\r\n            </div>\r\n\r\n            <div\r\n              class=\"btn-group\"\r\n              [class.btn-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n              [class.btn-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n            >\r\n              <!-- image-preview-clear button -->\r\n              <button\r\n                class=\"btn\"\r\n                (click)=\"cancelAll()\"\r\n                [attr.disabled]=\"HasQueueItem() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconDelete\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && IsPaused() === false)\"\r\n                class=\"btn\"\r\n                (click)=\"pauseAll()\"\r\n                [attr.disabled]=\"IsUploading() === false ? 'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconPause\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload && enablepause && IsPaused() === true\"\r\n                class=\"btn\"\r\n                (click)=\"uploadAll()\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconContinue\"></span>\r\n              </button>\r\n              <button\r\n                *ngIf=\"autoupload === false\"\r\n                class=\"btn text-nowrap\"\r\n                (click)=\"uploadAll()\"\r\n                [attr.disabled]=\"IsStateToUpload() === false ?  'disabled' : null\"\r\n                [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n                [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n              >\r\n                <span [class]=\"IconUpload\" class=\"pr-2\"></span> {{\r\n                lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n                | async }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div\r\n            *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n            class=\"invalid-feedback\"\r\n          >\r\n            {{ GetErrorMessage() | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let file of uploads\" style=\"margin-top: 5px\">\r\n        <div\r\n          class=\"input-group upload-component upload-multiple\"\r\n          [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n          [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n        >\r\n          <div\r\n            class=\"form-control upload-progress\"\r\n            [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n          >\r\n            <div class=\"progress\">\r\n              <div\r\n                class=\"progress-bar\"\r\n                [class.progress-bar-success]=\"file.progress===100\"\r\n                role=\"progressbar\"\r\n                [attr.aria-valuenow]=\"file.progress\"\r\n                aria-valuemin=\"0\"\r\n                aria-valuemax=\"100\"\r\n                [style.width.%]=\"file.progress\"\r\n              >\r\n                <span class=\"progress-text text-dark\">{{ file.name }}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"input-group-append\">\r\n            <!-- image-preview-clear button -->\r\n            <button\r\n              class=\"btn\"\r\n              (click)=\"cancel(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconDelete\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"(autoupload === false && enablepause) || (autoupload && enablepause && file.status !== 'paused')\"\r\n              class=\"btn\"\r\n              (click)=\"pause(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'uploading' ? 'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconPause\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload && enablepause && file.status === 'paused'\"\r\n              class=\"btn\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconContinue\"></span>\r\n            </button>\r\n            <button\r\n              *ngIf=\"autoupload === false\"\r\n              class=\"btn text-nowrap\"\r\n              (click)=\"upload(file.uploadId)\"\r\n              [attr.disabled]=\"file.status !== 'added' && file.status !== 'paused' ?  'disabled' : null\"\r\n              [class.btn-secondary]=\"!(invalid && (dirty || touched))\"\r\n              [class.btn-danger]=\"invalid && (dirty || touched)\"\r\n            >\r\n              <span [class]=\"IconUpload\" class=\"pr-2\"></span>{{\r\n              lngResourceService.GetString(validationKeyService.UploadButtonUpload)\r\n              | async }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacUploadMultipleComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacUploadMultipleComponent; }),
-                        },
-                    ],
-                    styles: [".upload-component .custom-file{height:100%}.upload-component .custom-file .custom-file-input{bottom:0;left:0;position:absolute;right:0;top:0}.upload-component.upload-multiple .upload-progress .progress{border-bottom-right-radius:0;border-top-right-radius:0}.upload-component.upload-single .upload-progress .progress{border-radius:0}.upload-component .upload-progress{border:0;padding:0}.upload-component .upload-progress .progress{height:100%}.upload-component .upload-progress .progress .progress-text{left:0;position:absolute;right:0}"]
-                },] }
-    ];
-    SacUploadMultipleComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.Renderer2 },
-        { type: core.NgZone }
-    ]; };
-
-    var SACBootstrap4UploadModule = /** @class */ (function () {
-        function SACBootstrap4UploadModule() {
-        }
-        return SACBootstrap4UploadModule;
-    }());
-    SACBootstrap4UploadModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacUploadComponent,
-                        SacUploadMultipleComponent,
-                        SacDropzoneSingleComponent,
-                        SacDropzoneMultipleComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [
-                        SacUploadComponent,
-                        SacUploadMultipleComponent,
-                        SacDropzoneSingleComponent,
-                        SacDropzoneMultipleComponent,
-                    ],
-                },] }
-    ];
-
-    /**
-     * Server File Browser Komponente
-     */
-    var SacBrowserComponent = /** @class */ (function (_super) {
-        __extends(SacBrowserComponent, _super);
-        // #endregion Properties
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param httpClient HTTP Client
-         * @param injector Angular Dependency Injection Service
-         * @param confirmService Confirm Service
-         */
-        function SacBrowserComponent(httpClient, injector, confirmService) {
-            var _this = _super.call(this, httpClient, injector) || this;
-            _this.confirmService = confirmService;
-            return _this;
-        }
-        // #endregion Constructors
-        // #region Public Methods
-        /**
-         * Confirm Action wenn ein File gelöscht werden soll
-         * @param file File das gelöscht werden soll.
-         * @returns Observable ob File gelöscht werden kann.
-         */
-        SacBrowserComponent.prototype.confirmDeleteFile = function (file) {
-            var _this = this;
-            return new rxjs.Observable(function (observer) {
-                rxjs.forkJoin({
-                    title: _this.lngResourceService.GetString(_this.validationKeyService.FilebrowserButtonDelete),
-                    message: _this.lngResourceService.GetString(_this.validationKeyService.FilebrowserConfirmTextDeleteFile),
-                }).subscribe(function (text) {
-                    _this.confirmService
-                        .ConfirmMessage(text.title, text.message)
-                        .subscribe(function (result) {
-                        if (result === 'yes') {
-                            observer.next(true);
-                        }
-                        else {
-                            observer.next(false);
-                        }
-                        observer.complete();
-                    });
-                });
-            });
-        };
-        /**
-         * Confirm Action wenn ein Ordner gelöscht werden soll
-         * @param node Ordner der gelöscht werden soll
-         * @returns Observable ob Ordner gelöscht kann.
-         */
-        SacBrowserComponent.prototype.confirmDeleteNode = function (node) {
-            var _this = this;
-            return new rxjs.Observable(function (observer) {
-                rxjs.forkJoin({
-                    title: _this.lngResourceService.GetString(_this.validationKeyService.FilebrowserButtonDelete),
-                    message: _this.lngResourceService.GetString(_this.validationKeyService.FilebrowserConfirmTextDeleteFolder),
-                }).subscribe(function (text) {
-                    _this.confirmService
-                        .ConfirmMessage(text.title, text.message)
-                        .subscribe(function (result) {
-                        if (result === 'yes') {
-                            observer.next(true);
-                        }
-                        else {
-                            observer.next(false);
-                        }
-                        observer.complete();
-                    });
-                });
-            });
-        };
-        /**
-         * Erzeugt ein Array von einer bestimmten grösse
-         * @param anzahl Grösse des Array
-         * @returns Array
-         */
-        SacBrowserComponent.prototype.count = function (anzahl) {
-            return new Array(anzahl);
-        };
-        /**
-         * Methode wird aufgerufen, wenn eine Datei verschoben wird
-         * @param uploadid Upload ID
-         */
-        SacBrowserComponent.prototype.uploadedFileMoved = function (uploadid) {
-            var item = this.uploadComponent.uploads.find(function (itm) { return itm.documentid === uploadid; });
-            if (item) {
-                this.uploadComponent.cancel(item.uploadId);
-            }
-        };
-        return SacBrowserComponent;
-    }(sacCommon.SacFileBrowserCommon));
-    SacBrowserComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-filebrowser',
-                    template: "<div class=\"row\">\r\n  <div class=\"col-12 col-md-5 col-lg-4\">\r\n    <ul class=\"list-group list-group-flush\">\r\n      <ng-template\r\n        [ngTemplateOutlet]=\"treeItem\"\r\n        [ngTemplateOutletContext]=\"{node: rootNode, deep: 0}\"\r\n      ></ng-template>\r\n    </ul>\r\n\r\n    <ng-template #treeItem let-node=\"node\" let-deep=\"deep\">\r\n      <li\r\n        class=\"list-group-item py-1 px-2 d-flex align-items-center\"\r\n        [class.list-group-item-secondary]=\"node === selectedNode\"\r\n        (click)=\"selectNode(node)\"\r\n        style=\"cursor: pointer\"\r\n      >\r\n        <div class=\"mx-3\" *ngFor=\"let i of count(deep)\"></div>\r\n        <div\r\n          (click)=\"switchExpandNode(node);$event.stopPropagation();\"\r\n          class=\"mr-2\"\r\n          [ngClass]=\"node.ChildNodes.length === 0 ? iconFolderEmpty: (!node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderCollabsed : (node.IsExpanded && node.ChildNodes.length > 0 ? iconFolderOpen : ''))\"\r\n        ></div>\r\n        <ng-container *ngIf=\"!node.IsEditMode\">\r\n          <div class=\"flex-grow-1\">{{ node.Name }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"node.IsEditMode\">\r\n          <div class=\"flex-grow-1\" ngForm>\r\n            <input\r\n              name=\"editFolder\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"node.Name\"\r\n              [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n              (ngModelChange)=\"renameNode(node, $event)\"\r\n              (keydown.enter)=\"$event.target.blur();false;\"\r\n              (blur)=\"renameNode(node, null)\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            />\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"flex-shrink-0\">\r\n          <a\r\n            *ngIf=\"node.Path !== '/' && allowfolderrename\"\r\n            class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"editNode(node);$event.stopPropagation();\"\r\n          >\r\n            <i [class]=\"iconEdit\"></i>\r\n          </a>\r\n          <sac-contextmenu cssclass=\"d-inline-block\">\r\n            <sac-contextmenubutton\r\n              *ngIf=\"allowfoldercreate\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonNewFolder) | async }}\"\r\n              [icon]=\"iconFolderNew\"\r\n              (clicked)=\"newNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenubutton\r\n              *ngIf=\"node.Path !== '/' && allowfolderdelete\"\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonDelete) | async }}\"\r\n              [icon]=\"iconDelete\"\r\n              (clicked)=\"deleteNode(node)\"\r\n            ></sac-contextmenubutton>\r\n            <sac-contextmenusplitter\r\n              *ngIf=\"allowfoldercreate || (node.Path !== '/' && allowfolderdelete)\"\r\n            ></sac-contextmenusplitter>\r\n            <sac-contextmenubutton\r\n              text=\"{{ lngResourceService.GetString(validationKeyService.FilebrowserButtonRefresh) | async }}\"\r\n              [icon]=\"iconRefresh\"\r\n              (clicked)=\"refreshNode(node)\"\r\n            ></sac-contextmenubutton>\r\n          </sac-contextmenu>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-container *ngIf=\"node.IsExpanded\">\r\n        <ng-template\r\n          *ngFor=\"let child of node.ChildNodes\"\r\n          [ngTemplateOutlet]=\"treeItem\"\r\n          [ngTemplateOutletContext]=\"{node: child, deep: deep + 1}\"\r\n        ></ng-template>\r\n      </ng-container>\r\n    </ng-template>\r\n  </div>\r\n  <div class=\"col-12 col-md-7 col-lg-8\">\r\n    <ng-container *ngIf=\"selectedNode && selectedNode.Files\">\r\n      <div *ngIf=\"allowfileupload\" ngForm>\r\n        <sac-dropzonemultiple\r\n          [disablelabel]=\"true\"\r\n          [endpoint]=\"apiurl + '/uploadregister'\"\r\n          name=\"upload\"\r\n          uploadheight=\"5rem\"\r\n          [ngModel]=\"uploads\"\r\n          (ngModelChange)=\"uploadComplete(selectedNode,$event)\"\r\n          [allowedtypes]=\"allowedtypes\"\r\n          >{{\r\n          lngResourceService.GetString(validationKeyService.FilebrowserButtonUpload)\r\n          | async }}</sac-dropzonemultiple\r\n        >\r\n      </div>\r\n      <div class=\"table-responsive\">\r\n        <table class=\"table table-striped table-hover align-middle\">\r\n          <thead>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridFilename)\r\n              | async }}\r\n            </th>\r\n            <th>\r\n              {{\r\n              lngResourceService.GetString(validationKeyService.FilebrowserGridSize)\r\n              | async }}\r\n            </th>\r\n            <th style=\"width: 80px\"></th>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngIf=\"selectedNode.Files.length === 0\">\r\n              <tr>\r\n                <td colspan=\"3\">\r\n                  {{\r\n                  lngResourceService.GetString(validationKeyService.FilebrowserGridNoFiles)\r\n                  | async }}\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"selectedNode.Files.length > 0\">\r\n              <tr\r\n                *ngFor=\"let item of selectedNode.Files\"\r\n                (click)=\"selectFile(item)\"\r\n                [class.table-primary]=\"selectedFileItem === item\"\r\n              >\r\n                <td [class.p-2]=\"item.IsEditMode\">\r\n                  <ng-container *ngIf=\"!item.IsEditMode\">\r\n                    {{ item.Filename }}\r\n                  </ng-container>\r\n                  <ng-container *ngIf=\"item.IsEditMode\">\r\n                    <div>\r\n                      <input\r\n                        name=\"editFolder\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"item.Filename\"\r\n                        [ngModelOptions]=\"{updateOn: 'blur'}\"\r\n                        (ngModelChange)=\"renameFile(item, $event)\"\r\n                        (keydown.enter)=\"$event.target.blur();false\"\r\n                        (blur)=\"renameFile(item, null)\"\r\n                        (click)=\"$event.stopPropagation();\"\r\n                      />\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td>{{ item.Size}}</td>\r\n                <td class=\"p-2\">\r\n                  <div class=\"btn-toolbar\" role=\"toolbar\">\r\n                    <div class=\"btn-group ml-auto\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfilerename\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"editFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconEdit\"></i\r\n                      ></a>\r\n                    </div>\r\n                    <div class=\"btn-group\" role=\"group\">\r\n                      <a\r\n                        *ngIf=\"allowfiledelete\"\r\n                        class=\"btn btn-sm btn-link text-secondary\"\r\n                        (click)=\"deleteFile(item);$event.stopPropagation();\"\r\n                        ><i [class]=\"iconDelete\"></i\r\n                      ></a>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n",
-                    providers: [ServiceConfirm]
-                },] }
-    ];
-    SacBrowserComponent.ctorParameters = function () { return [
-        { type: http.HttpClient },
-        { type: core.Injector },
-        { type: ServiceConfirm }
-    ]; };
-    SacBrowserComponent.propDecorators = {
-        uploadComponent: [{ type: core.ViewChild, args: [SacDropzoneMultipleComponent, { static: false },] }]
-    };
-
-    var SACBootstrap4BrowserModule = /** @class */ (function () {
-        function SACBootstrap4BrowserModule() {
-        }
-        return SACBootstrap4BrowserModule;
-    }());
-    SACBootstrap4BrowserModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacBrowserComponent],
-                    imports: [
-                        common.CommonModule,
-                        http.HttpClientModule,
-                        SACBootstrap4ConfirmModule,
-                        SACBootstrap4ContextmenuModule,
-                        SACBootstrap4UploadModule,
-                        SACBootstrap4FormModule,
-                        forms.FormsModule,
-                    ],
-                    exports: [SacBrowserComponent],
-                    bootstrap: [SacBrowserComponent],
-                },] }
-    ];
-
-    /**
-     * Checkbox Kompontente
-     */
-    var SacCheckboxComponent = /** @class */ (function (_super) {
-        __extends(SacCheckboxComponent, _super);
-        // #region Constructors
-        /**
-         *
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacCheckboxComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacCheckboxComponent;
-    }(sacCommon.SacCheckboxCommon));
-    SacCheckboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-checkbox',
-                    template: "<div\r\n  class=\"row\"\r\n  [class.no-gutters]=\"disablelabel\"\r\n  [class.form-group]=\"!stacked\"\r\n>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      *ngIf=\"!disablelabel && !stacked\"\r\n      for=\"{{name}}\"\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"align-self-center col-12\"\r\n    [ngClass]=\"[!disablelabel && !stacked ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"form-check\"\r\n      [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        class=\"form-check-input\"\r\n        [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"checkbox\"\r\n        [checked]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (change)=\"setValue($event.target.checked)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <label\r\n        for=\"{{name}}\"\r\n        class=\"form-check-label\"\r\n        [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n        [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n      >\r\n        <ng-container *ngIf=\"checkboxtext\">{{checkboxtext}}</ng-container>\r\n      </label>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacCheckboxComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            useExisting: core.forwardRef(function () { return SacCheckboxComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{height:1rem;width:1rem}.form-check-input-sm{height:.875rem;margin-top:.4rem;width:.875rem}.form-check-input-lg{height:1.25rem;margin-left:-1.75rem;width:1.25rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}"]
-                },] }
-    ];
-    SacCheckboxComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Radiobuttons Group Komponente
-     */
-    var SacRadiobuttonsComponent = /** @class */ (function (_super) {
-        __extends(SacRadiobuttonsComponent, _super);
-        // #region Constructors
-        /**
-         *
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacRadiobuttonsComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacRadiobuttonsComponent;
-    }(sacCommon.SacRadiobuttonsCommon));
-    SacRadiobuttonsComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-radiobuttons',
-                    template: "<div class=\"row form-group\">\r\n  <div\r\n    *ngIf=\"disablelabel === false\"\r\n    class=\"col-12 pt-0\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only']\"\r\n  >\r\n    <label\r\n      class=\"col-form-label\"\r\n      [ngClass]=\"componentHeight | toLabelHeight\"\r\n      *ngIf=\"!disablelabel\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n    [class.pt-1]=\"componentHeight === ControlHeight.Small\"\r\n    [class.pt-2]=\"componentHeight !== ControlHeight.Small\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            useExisting: core.forwardRef(function () { return SacRadiobuttonsComponent; }),
-                            multi: true,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            useExisting: core.forwardRef(function () { return SacRadiobuttonsComponent; }),
-                            multi: true,
-                        },
-                    ]
-                },] }
-    ];
-    SacRadiobuttonsComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Radiobutton Komponente
-     */
-    var SacRadiobuttonComponent = /** @class */ (function (_super) {
-        __extends(SacRadiobuttonComponent, _super);
-        /**
-         * Konstruktor
-         * @param SacRadioButtons Radio Buttons Group Komponente
-         */
-        function SacRadiobuttonComponent(sacRadioButtons) {
-            return _super.call(this, sacRadioButtons) || this;
-        }
-        return SacRadiobuttonComponent;
-    }(sacCommon.SacRadiobuttonCommon));
-    SacRadiobuttonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-radiobutton',
-                    template: "<div\r\n  class=\"form-check\"\r\n  [class.form-check-sm]=\"componentHeight === ControlHeight.Small\"\r\n  [class.form-check-lg]=\"componentHeight === ControlHeight.Large\"\r\n  *ngIf=\"hidden===false\"\r\n>\r\n  <input\r\n    id=\"{{getName}}_{{getIndex}}\"\r\n    name=\"{{getName}}\"\r\n    type=\"radio\"\r\n    class=\"form-check-input\"\r\n    [class.form-check-input-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-input-lg]=\"componentHeight === ControlHeight.Large\"\r\n    [value]=\"value\"\r\n    [checked]=\"checked\"\r\n    (change)=\"ChangeEvent()\"\r\n    [disabled]=\"isDisabled\"\r\n  />\r\n  <label\r\n    for=\"{{getName}}_{{getIndex}}\"\r\n    class=\"form-check-label\"\r\n    [class.form-check-label-sm]=\"componentHeight === ControlHeight.Small\"\r\n    [class.form-check-label-lg]=\"componentHeight === ControlHeight.Large\"\r\n  >\r\n    <ng-template\r\n      *ngTemplateOutlet=\"labeltemplate || defaultItemLabelTemplate;context:{ label: label }\"\r\n    >\r\n    </ng-template>\r\n  </label>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">{{label}}</ng-template>\r\n",
-                    styles: [".form-check-lg{padding-left:1.75rem}.form-check-input{height:1rem;width:1rem}.form-check-input-sm{height:.875rem;margin-top:.4rem;width:.875rem}.form-check-input-lg{height:1.25rem;margin-left:-1.75rem;margin-top:.4rem;width:1.25rem}.form-check-label-sm{font-size:.875rem}.form-check-label-lg{font-size:1.25rem}"]
-                },] }
-    ];
-    SacRadiobuttonComponent.ctorParameters = function () { return [
-        { type: SacRadiobuttonsComponent, decorators: [{ type: core.Host }] }
-    ]; };
-
-    var SACBootstrap4CheckboxModule = /** @class */ (function () {
-        function SACBootstrap4CheckboxModule() {
-        }
-        return SACBootstrap4CheckboxModule;
-    }());
-    SACBootstrap4CheckboxModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacCheckboxComponent,
-                        SacRadiobuttonComponent,
-                        SacRadiobuttonsComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [
-                        SacCheckboxComponent,
-                        SacRadiobuttonComponent,
-                        SacRadiobuttonsComponent,
-                    ],
-                },] }
-    ];
-
-    /**
-     * Referenz auf Moment.JS
-     */
-    var moment = moment___default['default'];
-    /**
-     * Komponente für Datumauswahl
-     */
-    var SacDateComponent = /** @class */ (function (_super) {
-        __extends(SacDateComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param elementRef Reference to html dom element
-         */
-        function SacDateComponent(formLayout, injector, elementRef) {
-            return _super.call(this, formLayout, injector, elementRef) || this;
-        }
-        return SacDateComponent;
-    }(sacCommon.SacDateCommon));
-    SacDateComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-date',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDateComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDateComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacDateComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * DateTime Selektor Komponente
-     */
-    var SacDateSelectorComponent = /** @class */ (function (_super) {
-        __extends(SacDateSelectorComponent, _super);
-        function SacDateSelectorComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacDateSelectorComponent;
-    }(sacCommon.SacDateSelectorCommon));
-    SacDateSelectorComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-dateselector',
-                    template: "<div class=\"calendar-selector\">\r\n  <div *ngIf=\"dateselection\">\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <div class=\"col text-left\">\r\n          <a (click)=\"monthBack()\"><span [class]=\"iconMonthPrev\"></span></a>\r\n        </div>\r\n        <div class=\"col text-center\">{{month+1}}/{{year}}</div>\r\n        <div class=\"col text-right\">\r\n          <a (click)=\"monthNext()\"><span [class]=\"iconMonthNext\"></span></a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"container\">\r\n      <div class=\"row\">\r\n        <ng-container *ngFor=\"let week of dates; let i=index\">\r\n          <ng-container *ngFor=\"let item of week\">\r\n            <div\r\n              class=\"p-2 col text-center\"\r\n              [ngStyle]=\"{'cursor': item.isenabled ? 'pointer' : null}\"\r\n              [ngClass]=\"{'day-current': item.iscurrent, 'day-selected': item.isselected, 'day-new': item.isnew, 'day-disabled': !item.isenabled}\"\r\n              (click)=\"selectDate(item)\"\r\n            >\r\n              {{ item.displaytext }}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"w-100\"></div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row justify-content-start\" *ngIf=\"timeselection\">\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Stunde</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getHours()\"\r\n          (input)=\"setHours($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"23\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <div class=\"form-group\">\r\n        <label>Minute</label>\r\n        <input\r\n          type=\"number\"\r\n          class=\"form-control form-control-sm\"\r\n          [value]=\"getMinutes()\"\r\n          (input)=\"setMinutes($event.target.value)\"\r\n          min=\"0\"\r\n          max=\"59\"\r\n        />\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex flex-row\">\r\n    <div class=\"mr-auto p-2\">\r\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"setToday()\">\r\n        Heute\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"resetSelection()\"\r\n      >\r\n        Reset\r\n      </button>\r\n    </div>\r\n    <div class=\"p-2\">\r\n      <button type=\"button\" class=\"btn btn-primary\" (click)=\"applySelection()\">\r\n        Apply\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n"
-                },] }
-    ];
-
-    /**
-     * Date und Time Komponente
-     */
-    var SacDateTimeComponent = /** @class */ (function (_super) {
-        __extends(SacDateTimeComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param elementRef Reference to html dom element
-         */
-        function SacDateTimeComponent(formLayout, injector, elementRef) {
-            return _super.call(this, formLayout, injector, elementRef) || this;
-        }
-        return SacDateTimeComponent;
-    }(sacCommon.SacDateTimeCommon));
-    SacDateTimeComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-datetime',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showDateSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"dateselect($event)\"\r\n          dateselection=\"true\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDateTimeComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDateTimeComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacDateTimeComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * Time Auswahl Komponente
-     */
-    var SacTimeComponent = /** @class */ (function (_super) {
-        __extends(SacTimeComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param elementRef Reference to html dom element
-         */
-        function SacTimeComponent(formLayout, injector, elementRef) {
-            return _super.call(this, formLayout, injector, elementRef) || this;
-        }
-        return SacTimeComponent;
-    }(sacCommon.SacTimeCommon));
-    SacTimeComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-time',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [imask]=\"imaskDate\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [value]=\"valuestring\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        (blur)=\"onTouch()\"\r\n        (accept)=\"setValueString($event)\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <button\r\n          class=\"btn btn-secondary\"\r\n          type=\"button\"\r\n          (click)=\"showTimeSelector()\"\r\n          [disabled]=\"isdisabled\"\r\n        >\r\n          <i [class]=\"IconSelector\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"popover fade bs-popover-bottom show\"\r\n      role=\"tooltip\"\r\n      *ngIf=\"_showselector\"\r\n      style=\"\r\n        display: block;\r\n        left: unset;\r\n        right: 0px;\r\n        top: unset;\r\n        max-width: 325px;\r\n      \"\r\n    >\r\n      <div\r\n        class=\"arrow\"\r\n        style=\"left: unset\"\r\n        [style.right.rem]=\"componentHeight === ControlHeight.Small ? 1.1 : componentHeight === ControlHeight.Large ? 1.8 : 1.4\"\r\n      ></div>\r\n      <h3 class=\"popover-header\" style=\"display: none\"></h3>\r\n      <div class=\"popover-body\">\r\n        <sac-dateselector\r\n          [initialvalue]=\"value\"\r\n          (selectdate)=\"timeselect($event)\"\r\n          timeselection=\"true\"\r\n        ></sac-dateselector>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacTimeComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacTimeComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacTimeComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
-
-    var SACBootstrap4DateTimeModule = /** @class */ (function () {
-        function SACBootstrap4DateTimeModule() {
-        }
-        return SACBootstrap4DateTimeModule;
-    }());
-    SACBootstrap4DateTimeModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacDateComponent,
-                        SacDateTimeComponent,
-                        SacTimeComponent,
-                        SacDateSelectorComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        angularImask.IMaskModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [
-                        SacDateComponent,
-                        SacDateTimeComponent,
-                        SacTimeComponent,
-                        SacDateSelectorComponent,
-                    ],
-                },] }
-    ];
-
-    /**
-     * Grid Komponente
-     */
-    var SacGridComponent = /** @class */ (function (_super) {
-        __extends(SacGridComponent, _super);
-        // #endregion Properties
-        // #region Constructors
-        /**
-         * Konstrukor
-         * @param cdRef Change Detection Reference
-         */
-        function SacGridComponent(cdRef, injector) {
-            var _this = _super.call(this, cdRef, injector) || this;
-            /**
-             * Setzt die Ellipsis Funktion auf der Column
-             */
-            _this.ellipsis = false;
-            return _this;
-        }
-        return SacGridComponent;
-    }(sacCommon.SacGridCommon));
-    SacGridComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-grid',
-                    template: "<div class=\"table-responsive\">\r\n  <table class=\"table table-striped table-hover\" id=\"{{name}}\">\r\n    <thead class=\"thead-light\">\r\n      <tr>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"template; context { row: {}, type: 'header'}\"\r\n        >\r\n        </ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <ng-container *ngFor=\"let item of value; let i=index\">\r\n        <tr>\r\n          <ng-container\r\n            *ngTemplateOutlet=\"template; context { row: item, type: 'body'}\"\r\n          >\r\n          </ng-container>\r\n        </tr>\r\n      </ng-container>\r\n      <tr *ngIf=\"value === undefined || value === null || value.length===0\">\r\n        <td [attr.colspan]=\"ColumnCount\">{{emptytext}}</td>\r\n      </tr>\r\n      <tr *ngIf=\"pagerdata\">\r\n        <td [attr.colspan]=\"ColumnCount\">\r\n          <div class=\"container-fluid\">\r\n            <sac-paging\r\n              name=\"{{name}}Paging\"\r\n              (paging)=\"pageChange($event)\"\r\n              [pagerdata]=\"pagerdata\"\r\n              [pagesizes]=\"pagesizes\"\r\n              [pagingtext]=\"pagingtext\"\r\n              [pagesizetext]=\"pagesizetext\"\r\n              [pagesizedisabled]=\"pagesizedisabled\"\r\n            ></sac-paging>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacGridComponent },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacGridComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacGridComponent.ctorParameters = function () { return [
-        { type: core.ChangeDetectorRef },
-        { type: core.Injector }
-    ]; };
-    SacGridComponent.propDecorators = {
-        template: [{ type: core.ContentChild, args: [core.TemplateRef, { static: false },] }]
-    };
-
-    /**
-     * Grid Action Button
-     */
-    var SacGridButtonComponent = /** @class */ (function (_super) {
-        __extends(SacGridButtonComponent, _super);
-        function SacGridButtonComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        // #region Public Methods
-        /**
-         * Returns the icon for the button
-         */
-        SacGridButtonComponent.prototype.getIconClass = function () {
-            var iconset = this.iconstyle;
-            var iconcss = this.icon;
-            if (iconset === '') {
-                switch (this.icon) {
-                    case 'edit':
-                        iconset = 'sprite';
-                        iconcss = 'icon-sprite-base-main_edit';
-                        break;
-                    case 'delete':
-                        iconset = 'sprite';
-                        iconcss = 'icon-sprite-base-main_delete';
-                        break;
-                }
-            }
-            if (this._isdisabledvalue) {
-                iconcss += '_disabled';
-            }
-            var result = iconset + ' ' + iconcss;
-            return result.trim();
-        };
-        return SacGridButtonComponent;
-    }(sacCommon.SacGridButtonCommon));
-    SacGridButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-gridbutton',
-                    template: "<a (click)=\"callaction()\" style=\"padding-right: 5px;\" [class.disabled]=\"isdisabled\" [attr.disabled]=\"isdisabled ? 'disabled' : null\"><span class=\"{{getIconClass()}}\"></span></a>\r\n"
-                },] }
-    ];
-
-    /**
-     * Grid Column Komponente
-     */
-    var SacGridColumnComponent = /** @class */ (function (_super) {
-        __extends(SacGridColumnComponent, _super);
-        /**
-         * Konstruktor
-         * @param grid Grid Referenz
-         * @param el HTML DOM Element
-         */
-        function SacGridColumnComponent(grid, injector, el) {
-            return _super.call(this, grid, injector, el) || this;
-        }
-        return SacGridColumnComponent;
-    }(sacCommon.SacGridColumnCommon));
-    SacGridColumnComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-gridcolumn',
-                    template: "<th\r\n  scope=\"col\"\r\n  *ngIf=\"IsHeader()\"\r\n  [style.width]=\"width\"\r\n  (click)=\"SortByColumn()\"\r\n>\r\n  <span>{{header}}</span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortUp\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='asc'\"\r\n  ></span>\r\n  <span\r\n    class=\"pl-2\"\r\n    [class]=\"IconSortDown\"\r\n    *ngIf=\"IsSortedColumn() && GetSortDirection() ==='desc'\"\r\n  ></span>\r\n</th>\r\n<td\r\n  scope=\"col\"\r\n  *ngIf=\"IsBody()\"\r\n  [style.width]=\"width\"\r\n  [class.ellipsis]=\"IsEllipsis()\"\r\n>\r\n  <span [attr.title]=\"IsEllipsis() ? value : null\"> {{value}} </span>\r\n</td>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacGridColumnBaseCommon,
-                            useExisting: core.forwardRef(function () { return SacGridColumnComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacGridColumnComponent.ctorParameters = function () { return [
-        { type: SacGridComponent },
-        { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * Grid Action Komponent
-     */
-    var SacGridColumnActionComponent = /** @class */ (function (_super) {
-        __extends(SacGridColumnActionComponent, _super);
-        /**
-         * Konstruktor
-         * @param grid Referenz auf Grid
-         * @param el HTML Element Referenz
-         */
-        function SacGridColumnActionComponent(grid, injector, el) {
-            var _this = _super.call(this, grid, injector, el) || this;
-            _this.width = '60px';
-            return _this;
-        }
-        return SacGridColumnActionComponent;
-    }(sacCommon.SacGridColumnActionCommon));
-    SacGridColumnActionComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-gridcolumnaction',
-                    template: "<th scope=\"col\" *ngIf=\"IsHeader()\" [style.width]=\"width\"><span></span></th>\r\n<td scope=\"col\" class=\"px-2\" *ngIf=\"IsBody()\">\r\n   <ng-content></ng-content>\r\n</td>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacGridColumnBaseCommon,
-                            useExisting: core.forwardRef(function () { return SacGridColumnActionComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacGridColumnActionComponent.ctorParameters = function () { return [
-        { type: SacGridComponent },
-        { type: core.Injector },
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * Image Item für Grid
-     */
-    var SacGridImageComponent = /** @class */ (function (_super) {
-        __extends(SacGridImageComponent, _super);
-        function SacGridImageComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * Gibt die CSS Klassen für Sprite Images zurück
-         * @returns CSS Klasse
-         */
-        SacGridImageComponent.prototype.getIconClass = function () {
-            switch (this.iconstyle) {
-                case 'edit':
-                    return 'sprite icon-sprite-base-main_edit';
-                case 'delete':
-                    return 'sprite icon-sprite-base-main_delete';
-                default:
-                    return this.iconstyle;
-            }
-        };
-        return SacGridImageComponent;
-    }(sacCommon.SacGridImageCommon));
-    SacGridImageComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-gridimage',
-                    template: "<span><span class=\"{{getIconClass()}}\"></span></span>\r\n"
-                },] }
-    ];
-
-    /**
-     * Paging Komponente
-     */
-    var SacPagingComponent = /** @class */ (function (_super) {
-        __extends(SacPagingComponent, _super);
-        /**
-         * Konstruktor
-         * @param injector Angular Dependency Injection Service
-         */
-        function SacPagingComponent(injector) {
-            return _super.call(this, injector) || this;
-        }
-        return SacPagingComponent;
-    }(sacCommon.SacPagingCommon));
-    SacPagingComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-paging',
-                    template: "<div\r\n  class=\"d-flex justify-content-between align-items-center flex-wrap\"\r\n  id=\"{{name}}\"\r\n>\r\n  <div class=\"col-pagination order-2 order-md-1\" id=\"{{name}}_pages\">\r\n    <ul class=\"pagination mb-4 mb-md-0\">\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === firstPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"firstPage()\">\u00AB</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        *ngFor=\"let page of paginators; let i = index\"\r\n        [ngClass]=\"{'active': page === activePageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"changePage(page)\">{{page + 1 }}</a>\r\n      </li>\r\n      <li\r\n        class=\"page-item\"\r\n        [ngClass]=\"{'aspNetDisabled disabled': activePageIndex === lastPageIndex}\"\r\n      >\r\n        <a class=\"page-link\" (click)=\"lastPage()\">\u00BB</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n  <div class=\"col-summary order-1 order-md-2\">\r\n    <div class=\"mb-4 mb-md-0 mr-4 mb-md-0\">{{ PagingText | async }}</div>\r\n  </div>\r\n  <div class=\"col-pagesize order-3\" *ngIf=\"!pagesizedisabled\">\r\n    <div class=\"d-flex align-items-center\" id=\"{{name}}_size\">\r\n      <select\r\n        class=\"form-control form-control-sm\"\r\n        style=\"width: 85px\"\r\n        [ngModel]=\"pageSize\"\r\n        (ngModelChange)=\"changePageSize($event)\"\r\n      >\r\n        <option [ngValue]=\"size\" *ngFor=\"let size of getPageSizes\">\r\n          {{size}}\r\n        </option>\r\n      </select>\r\n      <div class=\"ml-2\">{{ PageSizeText | async }}</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacPagingComponent },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacPagingComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacPagingComponent.ctorParameters = function () { return [
-        { type: core.Injector }
-    ]; };
-
-    var SACBootstrap4GridModule = /** @class */ (function () {
-        function SACBootstrap4GridModule() {
-        }
-        return SACBootstrap4GridModule;
-    }());
-    SACBootstrap4GridModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent],
-                    imports: [
-                        common.CommonModule, forms.FormsModule
-                    ],
-                    exports: [SacGridComponent, SacGridColumnComponent, SacGridColumnActionComponent, SacPagingComponent, SacGridButtonComponent, SacGridImageComponent]
-                },] }
-    ];
-
-    /**
-     * Input Komponente
-     */
-    var SacInputComponent = /** @class */ (function (_super) {
-        __extends(SacInputComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputComponent;
-    }(sacCommon.SacInputCommon));
-    SacInputComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-input',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacInputComponent },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Box für lange Texte
-     */
-    var SacInputAreaComponent = /** @class */ (function (_super) {
-        __extends(SacInputAreaComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputAreaComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputAreaComponent;
-    }(sacCommon.SacInputAreaCommon));
-    SacInputAreaComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputarea',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <textarea\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [attr.rows]=\"rows\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      [readonly]=\"readonly\"\r\n    ></textarea>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputAreaComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputAreaComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputAreaComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Control für Währungen
-     */
-    var SacInputCurrencyComponent = /** @class */ (function (_super) {
-        __extends(SacInputCurrencyComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputCurrencyComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputCurrencyComponent;
-    }(sacCommon.SacInputCurrencyCommon));
-    SacInputCurrencyComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputcurrency',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (keypress)=\"onKeyPress($event)\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <span class=\"input-group-text\">{{currency}}</span>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputCurrencyComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputCurrencyComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputCurrencyComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Komponente für Zahlen
-     */
-    var SacInputDecimalComponent = /** @class */ (function (_super) {
-        __extends(SacInputDecimalComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formlayout SacFormLayoutCommon to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputDecimalComponent(formlayout, injector) {
-            return _super.call(this, formlayout, injector) || this;
-        }
-        return SacInputDecimalComponent;
-    }(sacCommon.SacInputDecimalCommon));
-    SacInputDecimalComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputdecimal',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [readonly]=\"readonly\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputDecimalComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputDecimalComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputDecimalComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Box für E-Mail Adressen
-     */
-    var SacInputEmailComponent = /** @class */ (function (_super) {
-        __extends(SacInputEmailComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputEmailComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputEmailComponent;
-    }(sacCommon.SacInputEmailCommon));
-    SacInputEmailComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputemail',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <div class=\"input-group-prepend\">\r\n        <span class=\"input-group-text\">@</span>\r\n      </div>\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        autocomplete=\"email\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputEmailComponent; }),
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputEmailComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputEmailComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Komponten für Ganzzahlen
-     */
-    var SacInputIntegerComponent = /** @class */ (function (_super) {
-        __extends(SacInputIntegerComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputIntegerComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputIntegerComponent;
-    }(sacCommon.SacInputIntegerCommon));
-    SacInputIntegerComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputinteger',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"text\"\r\n      class=\"form-control\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      (keypress)=\"onKeyPress($event)\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacInputIntegerComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputIntegerComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputIntegerComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Box für Passwörter
-     */
-    var SacInputPasswordComponent = /** @class */ (function (_super) {
-        __extends(SacInputPasswordComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputPasswordComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputPasswordComponent;
-    }(sacCommon.SacInputPasswordCommon));
-    SacInputPasswordComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputpassword',
-                    template: "<div class=\"form-group row\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <input\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      type=\"password\"\r\n      class=\"form-control\"\r\n      [attr.placeholder]=\"placeholder\"\r\n      [value]=\"value\"\r\n      (blur)=\"onTouch()\"\r\n      (input)=\"setValue($event.target.value)\"\r\n      [attr.maxlength]=\"maxlength\"\r\n      autocomplete=\"new-password\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [disabled]=\"isdisabled\"\r\n      [readonly]=\"readonly\"\r\n    />\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacInputPasswordComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputPasswordComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputPasswordComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Input Box für Suche
-     */
-    var SacInputSearchComponent = /** @class */ (function (_super) {
-        __extends(SacInputSearchComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacInputSearchComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacInputSearchComponent;
-    }(sacCommon.SacInputSearchCommon));
-    SacInputSearchComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-inputsearch',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"value\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"setValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n        [readonly]=\"readonly\"\r\n      />\r\n      <div class=\"input-group-append\">\r\n        <input\r\n          type=\"submit\"\r\n          class=\"btn btn-secondary\"\r\n          id=\"{{name}}_search\"\r\n          (click)=\"searchClick()\"\r\n          [value]=\"buttontext\"\r\n        />\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacInputSearchComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacInputSearchComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacInputSearchComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    var SACBootstrap4InputModule = /** @class */ (function () {
-        function SACBootstrap4InputModule() {
-        }
-        return SACBootstrap4InputModule;
-    }());
-    SACBootstrap4InputModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacInputComponent,
-                        SacInputAreaComponent,
-                        SacInputCurrencyComponent,
-                        SacInputDecimalComponent,
-                        SacInputEmailComponent,
-                        SacInputIntegerComponent,
-                        SacInputPasswordComponent,
-                        SacInputSearchComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [
-                        SacInputComponent,
-                        SacInputAreaComponent,
-                        SacInputCurrencyComponent,
-                        SacInputDecimalComponent,
-                        SacInputEmailComponent,
-                        SacInputIntegerComponent,
-                        SacInputPasswordComponent,
-                        SacInputSearchComponent,
-                    ],
-                },] }
-    ];
-
-    // #region Classes
-    /**
-     * Dropdown Komponente
-     */
-    var SacDropdownComponent = /** @class */ (function (_super) {
-        __extends(SacDropdownComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param renderer Angular rendering engine
-         * @param elementRef Reference to html dom element
-         */
-        function SacDropdownComponent(formLayout, injector, renderer, elementRef) {
-            return _super.call(this, formLayout, injector, renderer, elementRef) || this;
-        }
-        return SacDropdownComponent;
-    }(sacCommon.SacDropdownCommon));
-    SacDropdownComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-dropdown',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      #dropdownitem\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"setValue(dropdownitem.value)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <option *ngIf=\"emptylabel !== ''\" [ngValue]=\"emptyvalue\">\r\n        {{emptylabel}}\r\n      </option>\r\n\r\n      <ng-content></ng-content>\r\n\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let item of options\"\r\n          [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n          [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n        >\r\n          <ng-template\r\n            *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n          >\r\n          </ng-template>\r\n        </option>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let group of options\"\r\n          [attr.label]=\"group[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of group[groupitems]\"\r\n            [ngValue]=\"optionvalue ? item[optionvalue] : item\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            <ng-template\r\n              *ngTemplateOutlet=\"optionlabeltemplate || defaultItemLabelTemplate;context:{ label: item[optionlabel], item: item }\"\r\n            >\r\n            </ng-template>\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultItemLabelTemplate let-label=\"label\">\r\n  {{label}}\r\n</ng-template>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacDropdownComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacDropdownComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacDropdownComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    /**
-     * Direktive für Dropdown Option List
-     */
-    var SacDropdownOptionDirective = /** @class */ (function (_super) {
-        __extends(SacDropdownOptionDirective, _super);
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param elementRef Referenz auf HTML DOM Element
-         * @param renderer Angular Rendering Engine
-         * @param dropdownList Referenz auf DropDown Komponente
-         */
-        function SacDropdownOptionDirective(elementRef, renderer, dropdownList) {
-            return _super.call(this, elementRef, renderer, dropdownList) || this;
-        }
-        return SacDropdownOptionDirective;
-    }(sacCommon.SacDropdownOptionCommon));
-    SacDropdownOptionDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[sacOption],option' },] }
-    ];
-    SacDropdownOptionDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: SacDropdownComponent, decorators: [{ type: core.Optional }, { type: core.Host }] }
-    ]; };
-    // #endregion Classes
-
-    var SACBootstrap4DropdownModule = /** @class */ (function () {
-        function SACBootstrap4DropdownModule() {
-        }
-        return SACBootstrap4DropdownModule;
-    }());
-    SACBootstrap4DropdownModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacDropdownComponent, SacDropdownOptionDirective],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [SacDropdownComponent, SacDropdownOptionDirective],
-                },] }
-    ];
-
-    // #region Classes
-    /**
-     * Listbox Komponente
-     */
-    var SacListboxComponent = /** @class */ (function (_super) {
-        __extends(SacListboxComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacListboxComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacListboxComponent;
-    }(sacCommon.SacListboxCommon));
-    SacListboxComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-listbox',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <select\r\n      multiple\r\n      id=\"{{name}}\"\r\n      name=\"{{name}}\"\r\n      class=\"form-control\"\r\n      [size]=\"rowsize\"\r\n      [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      (blur)=\"onTouch()\"\r\n      (change)=\"getSelectedItems($event.target)\"\r\n      [disabled]=\"isdisabled\"\r\n    >\r\n      <ng-content></ng-content>\r\n      <ng-container *ngIf=\"groupitems === ''\">\r\n        <option\r\n          *ngFor=\"let option of options\"\r\n          [value]=\"option[optionvalue]\"\r\n          [disabled]=\"optionenabled !== '' && option[optionenabled] === false\"\r\n        >\r\n          {{option[optionlabel]}}\r\n        </option>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"groupitems !== ''\">\r\n        <optgroup\r\n          *ngFor=\"let option of options\"\r\n          [attr.label]=\"option[grouplabel]\"\r\n        >\r\n          <option\r\n            *ngFor=\"let item of option[groupitems]\"\r\n            [value]=\"item[optionvalue]\"\r\n            [disabled]=\"optionenabled !== '' && item[optionenabled] === false\"\r\n          >\r\n            {{item[optionlabel]}}\r\n          </option>\r\n        </optgroup>\r\n      </ng-container>\r\n    </select>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacListboxComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacListboxComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacListboxComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-    /**
-     * Option Item in Listbox
-     */
-    var SacListboxOptionDirective = /** @class */ (function (_super) {
-        __extends(SacListboxOptionDirective, _super);
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param elementRef Referenz auf DOM Element
-         * @param renderer Angular Rendering Engine
-         * @param listbox Referenz auf Listbox Komponente
-         */
-        function SacListboxOptionDirective(elementRef, renderer, listbox) {
-            return _super.call(this, elementRef, renderer, listbox) || this;
-        }
-        return SacListboxOptionDirective;
-    }(sacCommon.SacListboxOptionCommon));
-    SacListboxOptionDirective.decorators = [
-        { type: core.Directive, args: [{ selector: '[sacOption],option' },] }
-    ];
-    SacListboxOptionDirective.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: SacListboxComponent, decorators: [{ type: core.Optional }, { type: core.Host }] }
-    ]; };
-    // #endregion Classes
-
-    var SACBootstrap4ListModule = /** @class */ (function () {
-        function SACBootstrap4ListModule() {
-        }
-        return SACBootstrap4ListModule;
-    }());
-    SACBootstrap4ListModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacListboxComponent, SacListboxOptionDirective],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [SacListboxComponent, SacListboxOptionDirective],
-                },] }
-    ];
-
-    /**
-     * Componente für Mehrsprache Texte
-     */
-    var SacMultilanguageInputComponent = /** @class */ (function (_super) {
-        __extends(SacMultilanguageInputComponent, _super);
-        // #endregion Properties
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacMultilanguageInputComponent(formLayout, injector) {
-            var _this = _super.call(this, formLayout, injector) || this;
-            // #region Properties
-            /**
-             * Enum für IconType in HTML Template
-             */
-            _this.IconType = sacCommon.IconType;
-            return _this;
-        }
-        return SacMultilanguageInputComponent;
-    }(sacCommon.SacMultilanguageInputCommon));
-    SacMultilanguageInputComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-multilanguageinput',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <input\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      />\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <span\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></span>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacMultilanguageInputComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacMultilanguageInputComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacMultilanguageInputComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Componente für Mehrsprache Texte als mehrzeiliger Text
-     */
-    var SacMultilanguageInputAreaComponent = /** @class */ (function (_super) {
-        __extends(SacMultilanguageInputAreaComponent, _super);
-        // #endregion Properties
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacMultilanguageInputAreaComponent(formLayout, injector) {
-            var _this = _super.call(this, formLayout, injector) || this;
-            // #region Properties
-            /**
-             * Enum für IconType in HTML Template
-             */
-            _this.IconType = sacCommon.IconType;
-            return _this;
-        }
-        return SacMultilanguageInputAreaComponent;
-    }(sacCommon.SacMultilanguageInputAreaCommon));
-    SacMultilanguageInputAreaComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-multilanguageinputarea',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      class=\"input-group\"\r\n      [class.input-group-sm]=\"componentHeight === ControlHeight.Small\"\r\n      [class.input-group-lg]=\"componentHeight === ControlHeight.Large\"\r\n      [class.has-validation]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      <textarea\r\n        id=\"{{name}}\"\r\n        name=\"{{name}}\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n        [value]=\"LanguageValue\"\r\n        [attr.placeholder]=\"placeholder\"\r\n        (blur)=\"onTouch()\"\r\n        style=\"height: auto\"\r\n        (input)=\"SetLanguageValue($event.target.value)\"\r\n        [attr.rows]=\"rows\"\r\n        [attr.maxlength]=\"maxlength\"\r\n        [class.is-invalid]=\"invalid && (dirty || touched)\"\r\n        [ngClass]=\"[componentHeight | toControlHeight]\"\r\n        [disabled]=\"isdisabled\"\r\n      ></textarea>\r\n\r\n      <div\r\n        placement=\"bottom-right\"\r\n        class=\"input-group-append\"\r\n        sac-multilanguagemenu\r\n        [buttontemplate]=\"menuButton\"\r\n        #contextmenu\r\n      >\r\n        <ng-template #menuButton>\r\n          <button\r\n            sacMultilanguageMenuAnchor\r\n            [id]=\"name + '_dropdownitem'\"\r\n            type=\"button\"\r\n            class=\"btn dropdown-toggle\"\r\n            (click)=\"contextmenu.toggle()\"\r\n            [ngClass]=\"[IsAnyEmpty() ? 'btn-warning' : 'btn-secondary']\"\r\n          >\r\n            <img\r\n              src=\"{{SelectedIcon}}\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.Image\"\r\n            />\r\n            <i\r\n              [ngClass]=\"SelectedIcon\"\r\n              class=\"align-baseline mr-1 ml-1\"\r\n              *ngIf=\"SelectedIconType === IconType.CssSprite\"\r\n            ></i>\r\n          </button>\r\n        </ng-template>\r\n        <ng-container *ngFor=\"let sprache of Languages\">\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.Image\"\r\n            text=\"{{sprache.Text}}\"\r\n            image=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n          <sac-multilanguagemenubutton\r\n            *ngIf=\"sprache.IconType === IconType.CssSprite\"\r\n            text=\"{{sprache.Text}}\"\r\n            icon=\"{{sprache.Icon}}\"\r\n            [cssclass]=\"IsEmpty(sprache) ? 'text-danger border-left border-danger': ''\"\r\n            (clicked)=\"SelectLanguage(sprache)\"\r\n          ></sac-multilanguagemenubutton>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div\r\n        *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n        class=\"invalid-feedback\"\r\n      >\r\n        {{ GetErrorMessage() | async }}\r\n      </div>\r\n    </div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n  </div>\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"col text-right\"></div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacMultilanguageInputAreaComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacMultilanguageInputAreaComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacMultilanguageInputAreaComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Component für Contextmenü
-     */
-    var SacMultilanguagemenuComponent = /** @class */ (function (_super) {
-        __extends(SacMultilanguagemenuComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param document Referenz auf HTML Document
-         * @param ngZone Angular Zone Service
-         * @param elementRef Referenz auf HTML Element der aktuellen Komponente
-         * @param renderer Render Service von Angular
-         * @param injector injector to resolve services in base component
-         */
-        function SacMultilanguagemenuComponent(document, ngZone, elementRef, renderer, injector) {
-            return _super.call(this, document, ngZone, elementRef, renderer, injector) || this;
-        }
-        return SacMultilanguagemenuComponent;
-    }(sacCommon.SacContextmenuCommon));
-    SacMultilanguagemenuComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: '[sac-multilanguagemenu]',
-                    template: "<ng-container\r\n  [ngTemplateOutlet]=\"buttontemplate || defaultButtonTemplate\"\r\n></ng-container>\r\n\r\n<div\r\n  class=\"dropdown-menu dropdown-menu-right\"\r\n  sacMultilanguageMenuContainer\r\n  [class.show]=\"isopen\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<ng-template #defaultButtonTemplate>\r\n  <button\r\n    sacMultilanguageMenuAnchor\r\n    class=\"btn btn-secondary dropdown-toggle\"\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n  ></button>\r\n</ng-template>\r\n",
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuCommon,
-                            useExisting: core.forwardRef(function () { return SacMultilanguagemenuComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacMultilanguagemenuComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] },
-        { type: core.NgZone },
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Anker Komponente für Context Menü. Wird zum positionieren des Context Menü in der Page benötigt.
-     */
-    var SacMultilanguagemenuAnchorDirective = /** @class */ (function (_super) {
-        __extends(SacMultilanguagemenuAnchorDirective, _super);
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param elementRef HTML DOM Referenz
-         */
-        function SacMultilanguagemenuAnchorDirective(elementRef) {
-            return _super.call(this, elementRef) || this;
-        }
-        return SacMultilanguagemenuAnchorDirective;
-    }(sacCommon.SacContextmenuAnchorCommon));
-    SacMultilanguagemenuAnchorDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sacMultilanguageMenuAnchor]',
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextmenuAnchorCommon,
-                            useExisting: core.forwardRef(function () { return SacMultilanguagemenuAnchorDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    SacMultilanguagemenuAnchorDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * Marker Komponente für Context Menü
-     */
-    var SacMultilanguagemenuContainerDirective = /** @class */ (function (_super) {
-        __extends(SacMultilanguagemenuContainerDirective, _super);
-        // #region Constructors
-        /**
-         * Konstruktor
-         * @param elementRef Referenz auf DOM Element
-         */
-        function SacMultilanguagemenuContainerDirective(elementRef) {
-            return _super.call(this, elementRef) || this;
-        }
-        return SacMultilanguagemenuContainerDirective;
-    }(sacCommon.SacContextMenuContrainerCommon));
-    SacMultilanguagemenuContainerDirective.decorators = [
-        { type: core.Directive, args: [{
-                    selector: '[sacMultilanguageMenuContainer]',
-                    providers: [
-                        {
-                            provide: sacCommon.SacContextMenuContrainerCommon,
-                            useExisting: core.forwardRef(function () { return SacMultilanguagemenuContainerDirective; }),
-                        },
-                    ],
-                },] }
-    ];
-    SacMultilanguagemenuContainerDirective.ctorParameters = function () { return [
-        { type: core.ElementRef }
-    ]; };
-
-    /**
-     * Component für Menü Eintrag in Context Menü
-     */
-    var SacMultilanguagemenuItemButtonComponent = /** @class */ (function (_super) {
-        __extends(SacMultilanguagemenuItemButtonComponent, _super);
-        /**
-         * Constructor
-         * @param contextmenu Instance von Context Menü
-         */
-        function SacMultilanguagemenuItemButtonComponent(contextmenu) {
-            return _super.call(this, contextmenu) || this;
-        }
-        return SacMultilanguagemenuItemButtonComponent;
-    }(sacCommon.SacContextmenuItemButtonCommon));
-    SacMultilanguagemenuItemButtonComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-multilanguagemenubutton',
-                    template: "<button\r\n  type=\"button\"\r\n  class=\"dropdown-item\"\r\n  (click)=\"callaction($event)\"\r\n  [class.disabled]=\"isdisabled\"\r\n  [ngClass]=\"cssclass\"\r\n  [attr.disabled]=\"isdisabled ? 'disabled' : null\"\r\n>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"!isicondisabled\" style=\"min-width: 1.5rem\">\r\n      <img *ngIf=\"image\" [src]=\"image\" class=\"align-baseline\" />\r\n      <i *ngIf=\"icon\" [class]=\"iconstyle + ' ' + icon\"></i>\r\n    </div>\r\n    <div class=\"flex-grow-1\">{{ text }}</div>\r\n  </div>\r\n</button>\r\n"
-                },] }
-    ];
-    SacMultilanguagemenuItemButtonComponent.ctorParameters = function () { return [
-        { type: sacCommon.SacContextmenuCommon }
-    ]; };
-
-    var SACBootstrap4MultilanguageModule = /** @class */ (function () {
-        function SACBootstrap4MultilanguageModule() {
-        }
-        return SACBootstrap4MultilanguageModule;
-    }());
-    SACBootstrap4MultilanguageModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        SacMultilanguageInputComponent,
-                        SacMultilanguageInputAreaComponent,
-                        SacMultilanguagemenuComponent,
-                        SacMultilanguagemenuAnchorDirective,
-                        SacMultilanguagemenuContainerDirective,
-                        SacMultilanguagemenuItemButtonComponent,
-                    ],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [SacMultilanguageInputComponent, SacMultilanguageInputAreaComponent],
-                },] }
-    ];
-
-    /**
-     * Component für einbindung eines beliebigen Controls in die Form Struktur
-     *
-     * @example
-     *  <ngStaticFormContainer name='myformcontainer' label="My Custom Form Control" [isrequired]='false'>
-     *      <input type="range" class="form-control" />
-     *  </ngStaticFormContainer>
-     *
-     * @example
-     * <ngStaticFormContainer name='myformcintainer' label="My Custom Form Control" [isrequired]='false' tooltiptext="Dies ist ein Tooltip Text">
-     *     <input type="range" class="form-control" />
-     * </ngStaticFormContainer>
-     *
-     **/
-    var SacStaticFormContainerComponent = /** @class */ (function (_super) {
-        __extends(SacStaticFormContainerComponent, _super);
-        // #region Constructors
-        /**
-         *
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacStaticFormContainerComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacStaticFormContainerComponent;
-    }(sacCommon.SacStaticFormContainerCommon));
-    SacStaticFormContainerComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-staticformcontainer',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    [class.required]=\"isrequired\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <ng-content></ng-content>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"form-label-adaptive form-label-fixed\"\r\n      [ngClass]=\"{ 'required': isrequired }\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      class=\"invalid-feedback\"\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacStaticFormContainerComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacStaticFormContainerComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacStaticFormContainerComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    /**
-     * Komponente für statischen Text in einem Formular
-     */
-    var SacStaticLabelComponent = /** @class */ (function (_super) {
-        __extends(SacStaticLabelComponent, _super);
-        // #region Constructors
-        /**
-         *
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         */
-        function SacStaticLabelComponent(formLayout, injector) {
-            return _super.call(this, formLayout, injector) || this;
-        }
-        return SacStaticLabelComponent;
-    }(sacCommon.SacStaticLabelCommon));
-    SacStaticLabelComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-staticlabel',
-                    template: "<div class=\"row form-group\" [class.no-gutters]=\"disablelabel\">\r\n  <label\r\n    *ngIf=\"disablelabel === false && !isAdaptiveLabel\"\r\n    id=\"{{name}}_label\"\r\n    for=\"{{name}}\"\r\n    class=\"col-12 col-form-label\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n    >{{label}}<sac-tooltip\r\n      *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n      [tooltiptext]=\"helptext\"\r\n      [inlinemode]=\"true\"\r\n      ><span [ngClass]=\"HelptextTooltipIcon\" class=\"ml-1\"></span> </sac-tooltip\r\n  ></label>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <div\r\n      [id]=\"name\"\r\n      class=\"form-control-plaintext\"\r\n      [ngClass]=\"[componentHeight | toControlHeight]\"\r\n      [innerHTML]=\"value\"\r\n    ></div>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <label\r\n      for=\"{{name}}\"\r\n      class=\"col-left control-label\"\r\n      *ngIf=\"isAdaptiveLabel && !disablelabel\"\r\n      >{{label}}</label\r\n    >\r\n  </div>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacStaticLabelComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            multi: true,
-                            useExisting: core.forwardRef(function () { return SacStaticLabelComponent; }),
-                        },
-                    ]
-                },] }
-    ];
-    SacStaticLabelComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    var SACBootstrap4StaticLabelModule = /** @class */ (function () {
-        function SACBootstrap4StaticLabelModule() {
-        }
-        return SACBootstrap4StaticLabelModule;
-    }());
-    SACBootstrap4StaticLabelModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                    imports: [
-                        common.CommonModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [SacStaticLabelComponent, SacStaticFormContainerComponent],
-                },] }
-    ];
-
-    /**
-     * Tab Item Komponente
-     */
-    var SacTabItemComponent = /** @class */ (function (_super) {
-        __extends(SacTabItemComponent, _super);
-        function SacTabItemComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacTabItemComponent;
-    }(sacCommon.SacTabItemCommon));
-    SacTabItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-tabitem',
-                    template: "<div [id]=\"id\" [hidden]=\"unloadwhenhidden === false && active === false\" *ngIf=\"(unloadwhenhidden === true && active === true) || unloadwhenhidden === false\" class=\"tab-pane\">\r\n  <ng-template [ngTemplateOutlet]=\"templateRef\"></ng-template>\r\n</div>\r\n"
-                },] }
-    ];
-
-    /**
-     * Komponente für Tabs
-     */
-    var SacTabComponent = /** @class */ (function (_super) {
-        __extends(SacTabComponent, _super);
-        function SacTabComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * Gibt die TabItems zurück
-         * @returns Array von TabItems
-         */
-        SacTabComponent.prototype.tabItems = function () {
-            return this._tabItems.toArray();
-        };
-        return SacTabComponent;
-    }(sacCommon.SacTabCommon));
-    SacTabComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-tab',
-                    template: "<!-- Nav tabs -->\r\n<div class=\"nav nav-tabs\" role=\"tablist\">\r\n  <a\r\n    *ngFor=\"let item of _tabItems\"\r\n    [id]=\"GetTabItemButtonId(item.id)\"\r\n    role=\"tab\"\r\n    class=\"nav-item nav-link active\"\r\n    data-toggle=\"tab\"\r\n    [ngClass]=\"{ 'active show': item.active, 'disabled': item.disabled }\"\r\n    (click)=\"selectTab(item)\"\r\n    [ngStyle]=\"{'cursor': item.disabled ? 'not-allowed' : 'pointer'}\"\r\n    >{{item.label}}</a\r\n  >\r\n</div>\r\n\r\n<!-- Tab panes -->\r\n<div class=\"tab-content pl-3 pt-2\">\r\n  <ng-content></ng-content>\r\n</div>\r\n"
-                },] }
-    ];
-    SacTabComponent.propDecorators = {
-        _tabItems: [{ type: core.ContentChildren, args: [SacTabItemComponent,] }]
-    };
-
-    var SACBootstrap4TabsModule = /** @class */ (function () {
-        function SACBootstrap4TabsModule() {
-        }
-        return SACBootstrap4TabsModule;
-    }());
-    SACBootstrap4TabsModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacTabComponent, SacTabItemComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacTabComponent, SacTabItemComponent]
-                },] }
-    ];
-
-    /**
-     * TinyMCE Komponente
-     */
-    var SacTinyMceComponent = /** @class */ (function (_super) {
-        __extends(SacTinyMceComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formLayout SacFormLayout to define scoped layout settings
-         * @param injector Injector for injecting services
-         * @param ngZone ngZone to manage external javascripts
-         */
-        function SacTinyMceComponent(formLayout, injector, ngZone) {
-            return _super.call(this, formLayout, injector, ngZone) || this;
-        }
-        // #endregion Constructors
-        // #region Public Methods
-        /**
-         * overwrite tinymce defaults
-         * @returns boostrap4 has no overwrites
-         */
-        SacTinyMceComponent.prototype.overwriteDefaultSettings = function () {
-            return {};
-        };
-        return SacTinyMceComponent;
-    }(sacCommon.SacTinyMceCommon));
-    SacTinyMceComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-tinymce',
-                    template: "<div class=\"form-row form-group\">\r\n  <div\r\n    class=\"col\"\r\n    [ngClass]=\"[disablelabel === false ? (this.labelSizes | toLabelWidthCss) : 'sr-only', componentHeight | toLabelHeight]\"\r\n  >\r\n    <label for=\"{{name}}\" class=\"form-control-label\"\r\n      >{{label}}<sac-tooltip\r\n        *ngIf=\"helptextmode === 'tooltip' && helptext\"\r\n        [tooltiptext]=\"helptext\"\r\n        [inlinemode]=\"true\"\r\n        ><span\r\n          [ngClass]=\"HelptextTooltipIcon\"\r\n          class=\"ml-1\"\r\n        ></span> </sac-tooltip\r\n    ></label>\r\n  </div>\r\n  <div\r\n    class=\"col-12\"\r\n    [ngClass]=\"[disablelabel === false ?  (this.labelSizes | toControlWidthCss) : '']\"\r\n  >\r\n    <editor\r\n      [id]=\"name + '_tinymce'\"\r\n      [init]=\"_config\"\r\n      [initialValue]=\"value\"\r\n      ngModel\r\n      [ngModelOptions]=\"{standalone: true}\"\r\n      (ngModelChange)=\"setValue($event)\"\r\n      (onSaveContent)=\"save($event.event.content)\"\r\n      [disabled]=\"disabled\"\r\n      [class.is-invalid]=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n    ></editor>\r\n    <small\r\n      *ngIf=\"helptextmode === 'text' && helptext\"\r\n      class=\"help-block\"\r\n      class=\"form-text text-muted\"\r\n    >\r\n      {{helptext}}\r\n    </small>\r\n    <div\r\n      *ngIf=\"isinlineerrorenabled && invalid && (dirty || touched)\"\r\n      class=\"invalid-feedback\"\r\n    >\r\n      {{ GetErrorMessage() | async }}\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<sac-dialog\r\n  *ngIf=\"selectdialogvisible\"\r\n  [allowesc]=\"false\"\r\n  [backdrop]=\"true\"\r\n  [(isvisible)]=\"selectdialogvisible\"\r\n  title=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectDialogtitle) | async }}\"\r\n  size=\"large\"\r\n  height=\"500px\"\r\n>\r\n  <ng-container dialogbody>\r\n    <sac-filebrowser\r\n      [apiurl]=\"filebrowserapiurl\"\r\n      (file)=\"selectDialogSettings.value = $event\"\r\n      [allowfoldercreate]=\"allowfoldercreate\"\r\n      [allowfolderrename]=\"allowfolderrename\"\r\n      [allowfolderdelete]=\"allowfolderdelete\"\r\n      [allowfileupload]=\"allowfileupload\"\r\n      [allowfilerename]=\"allowfilerename\"\r\n      [allowfiledelete]=\"allowfiledelete\"\r\n      [selectedfile]=\"selectDialogSettings.value\"\r\n      [allowedtypes]=\"selectDialogSettings.allowedtypes\"\r\n    ></sac-filebrowser>\r\n  </ng-container>\r\n  <ng-container dialogfooter>\r\n    <sac-button\r\n      role=\"primary\"\r\n      [name]=\"name + '_modalOk'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectOk) | async }}\"\r\n      (clicked)=\"setSelectDialogResult()\"\r\n    ></sac-button>\r\n    <sac-button\r\n      [name]=\"name + '_modalClose'\"\r\n      text=\"{{ lngResourceService.GetString(validationKeyService.TinyMceFileselectCancel) | async }}\"\r\n      (clicked)=\"closeSelectDialog()\"\r\n    ></sac-button>\r\n  </ng-container>\r\n</sac-dialog>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacTinyMceComponent,
-                        },
-                        {
-                            provide: forms.NG_VALIDATORS,
-                            useExisting: core.forwardRef(function () { return SacTinyMceComponent; }),
-                            multi: true,
-                        },
-                    ],
-                    styles: [".is-invalid{border:1px solid var(--red)}"]
-                },] }
-    ];
-    SacTinyMceComponent.ctorParameters = function () { return [
-        { type: SacFormLayoutDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector },
-        { type: core.NgZone }
-    ]; };
-
-    var SACBootstrap4TinyMceModule = /** @class */ (function () {
-        function SACBootstrap4TinyMceModule() {
-        }
-        return SACBootstrap4TinyMceModule;
-    }());
-    SACBootstrap4TinyMceModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacTinyMceComponent],
-                    imports: [
-                        common.CommonModule,
-                        forms.FormsModule,
-                        tinymceAngular.EditorModule,
-                        SACBootstrap4LayoutModule,
-                        SACBootstrap4ButtonModule,
-                        SACBootstrap4DialogModule,
-                        SACBootstrap4BrowserModule,
-                        SACBootstrap4TooltipModule,
-                    ],
-                    exports: [SacTinyMceComponent],
-                },] }
-    ];
-
-    /**
-     * Validation Summary Kompontente
-     */
-    var SacValidationSummaryComponent = /** @class */ (function (_super) {
-        __extends(SacValidationSummaryComponent, _super);
-        // #region Constructors
-        /**
-         * Constructor
-         * @param formControl Instance of Form Component to receive invalid form controls
-         * @param injector Injector for injecting services
-         */
-        function SacValidationSummaryComponent(parentForm, injector) {
-            return _super.call(this, parentForm, injector) || this;
-        }
-        return SacValidationSummaryComponent;
-    }(sacCommon.SacValidationSummaryCommon));
-    SacValidationSummaryComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-validationsummary',
-                    template: "<div class=\"alert alert-danger\" role=\"alert\" *ngIf=\"hasErrors\">\r\n  <ul class=\"mb-0\">\r\n    <li *ngFor=\"let error of formErrors\">{{error | async}}</li>\r\n  </ul>\r\n</div>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        {
-                            provide: forms.NG_VALUE_ACCESSOR,
-                            multi: true,
-                            useExisting: SacValidationSummaryComponent,
-                        },
-                    ]
-                },] }
-    ];
-    SacValidationSummaryComponent.ctorParameters = function () { return [
-        { type: SacFormDirective, decorators: [{ type: core.Host }, { type: core.Optional }] },
-        { type: core.Injector }
-    ]; };
-
-    var SACBootstrap4ValidationSummaryModule = /** @class */ (function () {
-        function SACBootstrap4ValidationSummaryModule() {
-        }
-        return SACBootstrap4ValidationSummaryModule;
-    }());
-    SACBootstrap4ValidationSummaryModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacValidationSummaryComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacValidationSummaryComponent]
-                },] }
-    ];
-
-    /**
-     * Wizard Komponente Item
-     */
-    var SacWizardItemComponent = /** @class */ (function (_super) {
-        __extends(SacWizardItemComponent, _super);
-        function SacWizardItemComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        return SacWizardItemComponent;
-    }(sacCommon.SacWizardItemCommon));
-    SacWizardItemComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-wizarditem',
-                    template: ""
-                },] }
-    ];
-
-    /**
-     * Wizard Komponente
-     */
-    var SacWizardComponent = /** @class */ (function (_super) {
-        __extends(SacWizardComponent, _super);
-        function SacWizardComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        /**
-         * Gibt die Wizard Items zurück
-         * @returns Collection von WizardItems
-         */
-        SacWizardComponent.prototype.wizardItems = function () {
-            return this._wizardItems;
-        };
-        return SacWizardComponent;
-    }(sacCommon.SacWizardCommon));
-    SacWizardComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'sac-wizard',
-                    template: "<ul class=\"nav nav-wizard\" role=\"tablist\">\r\n  <li *ngFor=\"let item of _wizardItems\" class=\"nav-item\" [ngClass]=\"{ 'active': item._active, 'disabled': item._disabled, 'success': item._iscomplete }\"\r\n      [ngStyle]=\"{'cursor': item._disabled ? 'not-allowed' : 'pointer'}\">\r\n    <a role=\"tab\" (click)=\"selectStep(item)\">\r\n      <div class=\"circle\">\r\n        <span class=\"step\"></span>\r\n      </div>\r\n    </a>\r\n    <div class=\"info\">\r\n      <a (click)=\"selectStep(item)\">{{item._label}}</a>\r\n    </div>\r\n  </li>\r\n</ul>\r\n",
-                    // Value Access Provider registrieren, damit Wert via Model geschrieben und gelesen werden kann
-                    providers: [
-                        { provide: forms.NG_VALUE_ACCESSOR, multi: true, useExisting: SacWizardComponent },
-                    ]
-                },] }
-    ];
-    SacWizardComponent.propDecorators = {
-        _wizardItems: [{ type: core.ContentChildren, args: [SacWizardItemComponent,] }]
-    };
-
-    var SACBootstrap4WizardModule = /** @class */ (function () {
-        function SACBootstrap4WizardModule() {
-        }
-        return SACBootstrap4WizardModule;
-    }());
-    SACBootstrap4WizardModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [SacWizardComponent, SacWizardItemComponent],
-                    imports: [
-                        common.CommonModule
-                    ],
-                    exports: [SacWizardComponent, SacWizardItemComponent]
-                },] }
-    ];
-
-    /*
-     * Public API Surface of sac-bootstrap4
-     */
-
-    /**
-     * Generated bundle index. Do not edit.
-     */
-
-    exports.NGFORM_FACTORY = NGFORM_FACTORY;
-    exports.SACBootstrap4BrowserModule = SACBootstrap4BrowserModule;
-    exports.SACBootstrap4ButtonModule = SACBootstrap4ButtonModule;
-    exports.SACBootstrap4CheckboxModule = SACBootstrap4CheckboxModule;
-    exports.SACBootstrap4ConfirmModule = SACBootstrap4ConfirmModule;
-    exports.SACBootstrap4ContextmenuModule = SACBootstrap4ContextmenuModule;
-    exports.SACBootstrap4DateTimeModule = SACBootstrap4DateTimeModule;
-    exports.SACBootstrap4DialogModule = SACBootstrap4DialogModule;
-    exports.SACBootstrap4DropdownModule = SACBootstrap4DropdownModule;
-    exports.SACBootstrap4FormModule = SACBootstrap4FormModule;
-    exports.SACBootstrap4GridModule = SACBootstrap4GridModule;
-    exports.SACBootstrap4InputModule = SACBootstrap4InputModule;
-    exports.SACBootstrap4LayoutModule = SACBootstrap4LayoutModule;
-    exports.SACBootstrap4ListModule = SACBootstrap4ListModule;
-    exports.SACBootstrap4MultilanguageModule = SACBootstrap4MultilanguageModule;
-    exports.SACBootstrap4StaticLabelModule = SACBootstrap4StaticLabelModule;
-    exports.SACBootstrap4TabsModule = SACBootstrap4TabsModule;
-    exports.SACBootstrap4TinyMceModule = SACBootstrap4TinyMceModule;
-    exports.SACBootstrap4TooltipModule = SACBootstrap4TooltipModule;
-    exports.SACBootstrap4UploadModule = SACBootstrap4UploadModule;
-    exports.SACBootstrap4ValidationSummaryModule = SACBootstrap4ValidationSummaryModule;
-    exports.SACBootstrap4WizardModule = SACBootstrap4WizardModule;
-    exports.SACFORM_FACTORY = SACFORM_FACTORY;
-    exports.SacFormDirective = SacFormDirective;
-    exports.SacInheritFormDirective = SacInheritFormDirective;
-    exports.ServiceConfirm = ServiceConfirm;
-    exports.ɵa = SacBrowserComponent;
-    exports.ɵb = SacDropzoneMultipleComponent;
-    exports.ɵba = SacGridComponent;
-    exports.ɵbb = SacGridColumnComponent;
-    exports.ɵbc = SacGridColumnActionComponent;
-    exports.ɵbd = SacPagingComponent;
-    exports.ɵbe = SacGridButtonComponent;
-    exports.ɵbf = SacGridImageComponent;
-    exports.ɵbg = SacInputComponent;
-    exports.ɵbh = SacInputAreaComponent;
-    exports.ɵbi = SacInputCurrencyComponent;
-    exports.ɵbj = SacInputDecimalComponent;
-    exports.ɵbk = SacInputEmailComponent;
-    exports.ɵbl = SacInputIntegerComponent;
-    exports.ɵbm = SacInputPasswordComponent;
-    exports.ɵbn = SacInputSearchComponent;
-    exports.ɵbo = SacDropdownComponent;
-    exports.ɵbp = SacDropdownOptionDirective;
-    exports.ɵbq = SacListboxComponent;
-    exports.ɵbr = SacListboxOptionDirective;
-    exports.ɵbs = SacMultilanguageInputComponent;
-    exports.ɵbt = SacMultilanguageInputAreaComponent;
-    exports.ɵbu = SacMultilanguagemenuComponent;
-    exports.ɵbv = SacMultilanguagemenuAnchorDirective;
-    exports.ɵbw = SacMultilanguagemenuContainerDirective;
-    exports.ɵbx = SacMultilanguagemenuItemButtonComponent;
-    exports.ɵby = SacStaticLabelComponent;
-    exports.ɵbz = SacStaticFormContainerComponent;
-    exports.ɵc = SacFormLayoutDirective;
-    exports.ɵca = SacTabComponent;
-    exports.ɵcb = SacTabItemComponent;
-    exports.ɵcc = SacTinyMceComponent;
-    exports.ɵcd = SacValidationSummaryComponent;
-    exports.ɵce = SacWizardComponent;
-    exports.ɵcf = SacWizardItemComponent;
-    exports.ɵd = SacConfirmComponent;
-    exports.ɵe = SacDialogComponent;
-    exports.ɵf = SacButtonComponent;
-    exports.ɵg = SacContextmenuComponent;
-    exports.ɵh = SacContextmenuItemButtonComponent;
-    exports.ɵi = SacContextmenuItemSplitterComponent;
-    exports.ɵj = SacContextmenuAnchorDirective;
-    exports.ɵk = SacContextmenuContainerDirective;
-    exports.ɵl = SacUploadComponent;
-    exports.ɵm = SacUploadMultipleComponent;
-    exports.ɵn = SacDropzoneSingleComponent;
-    exports.ɵo = SacToControlHeightPipe;
-    exports.ɵp = SacToControlWidthCssPipe;
-    exports.ɵq = SacToLabelHeightPipe;
-    exports.ɵr = SacToLabelWidthCssPipe;
-    exports.ɵs = SacTooltipComponent;
-    exports.ɵt = SacCheckboxComponent;
-    exports.ɵu = SacRadiobuttonComponent;
-    exports.ɵv = SacRadiobuttonsComponent;
-    exports.ɵw = SacDateComponent;
-    exports.ɵx = SacDateTimeComponent;
-    exports.ɵy = SacTimeComponent;
-    exports.ɵz = SacDateSelectorComponent;
-
-    Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
-//# sourceMappingURL=simpleangularcontrols-sac-bootstrap4.umd.js.map