mis-crystal-design-system 2.0.2 → 2.2.1

package/bundles/mis-crystal-design-system-table.umd.js

@@ -0,0 +1,791 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('mis-crystal-design-system/checkbox'), require('@angular/cdk/scrolling')) :
+    typeof define === 'function' && define.amd ? define('mis-crystal-design-system/table', ['exports', '@angular/core', '@angular/common', 'mis-crystal-design-system/checkbox', '@angular/cdk/scrolling'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['mis-crystal-design-system'] = global['mis-crystal-design-system'] || {}, global['mis-crystal-design-system'].table = {}), global.ng.core, global.ng.common, global['mis-crystal-design-system'].checkbox, global.ng.cdk.scrolling));
+}(this, (function (exports, core, common, checkbox, scrolling) { 'use strict';
+
+    /*! *****************************************************************************
+    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 */
+    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 __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 (_)
+                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;
+        Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
+    }) : (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"), i[Symbol.asyncIterator] = function () { return this; }, i;
+        function verb(n) { if (g[n])
+            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+        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: n === "return" } : 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;
+    }
+
+    var TableComponent = /** @class */ (function () {
+        function TableComponent(renderer) {
+            this.renderer = renderer;
+            // Filter related variables
+            this.showFilter = false;
+            this.filterName = '';
+            this.filterData = [];
+            this.filterContainerStyles = {};
+            this.appliedFilters = {};
+            this.filtersUpdated = new core.EventEmitter();
+            // Pagination related variables
+            this.selectedPage = 1;
+            this.pages = [];
+            this.pageSelected = new core.EventEmitter();
+            this.tableData = [];
+            this.subTableData = [];
+        }
+        TableComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.initializeFilters();
+            if (this.config.paginationConfig) {
+                this.initializePagination();
+            }
+            if (this.config.canScrollHorizontally === undefined) {
+                this.config.canScrollHorizontally = false;
+            }
+            document.addEventListener('click', function (event) {
+                if (_this.filter) {
+                    var isCheckBoxClicked = false;
+                    var targetElement = event.target;
+                    if (targetElement.className === 'checkmark') {
+                        isCheckBoxClicked = true;
+                    }
+                    var isClickInsideElement = _this.filter.container.nativeElement.contains(event.target);
+                    if (!isClickInsideElement && !isCheckBoxClicked) {
+                        _this.toggleFilter(_this.filterName);
+                    }
+                }
+            });
+        };
+        TableComponent.prototype.ngAfterViewInit = function () {
+            if (this.config.paginationConfig) {
+                var height = this.table.nativeElement.offsetHeight;
+                this.renderer.setStyle(this.table.nativeElement, 'height', (height - 56) + 'px');
+            }
+        };
+        // Filter related functions
+        TableComponent.prototype.initializeFilters = function () {
+            var e_1, _c, e_2, _d;
+            try {
+                for (var _e = __values(this.config.colHeaderConfig), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var colHeader = _f.value;
+                    if (colHeader.filters) {
+                        var filters = [];
+                        try {
+                            for (var _g = (e_2 = void 0, __values(colHeader.filters)), _h = _g.next(); !_h.done; _h = _g.next()) {
+                                var filter = _h.value;
+                                if (filter.checked) {
+                                    filters.push({
+                                        name: filter.name,
+                                        value: filter.value
+                                    });
+                                }
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_h && !_h.done && (_d = _g.return)) _d.call(_g);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                        if (filters.length > 0)
+                            this.appliedFilters[colHeader.data] = filters;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        TableComponent.prototype.toggleFilter = function (filterName) {
+            var e_3, _c;
+            if (!this.showFilter) {
+                this.filterName = filterName;
+                this.showFilter = true;
+                var offSet = 0;
+                var colHeadersReversed = this.colHeaders.toArray().reverse();
+                try {
+                    for (var colHeadersReversed_1 = __values(colHeadersReversed), colHeadersReversed_1_1 = colHeadersReversed_1.next(); !colHeadersReversed_1_1.done; colHeadersReversed_1_1 = colHeadersReversed_1.next()) {
+                        var header = colHeadersReversed_1_1.value;
+                        if (header.nativeElement.innerText === filterName)
+                            break;
+                        offSet += header.nativeElement.offsetWidth;
+                    }
+                }
+                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                finally {
+                    try {
+                        if (colHeadersReversed_1_1 && !colHeadersReversed_1_1.done && (_c = colHeadersReversed_1.return)) _c.call(colHeadersReversed_1);
+                    }
+                    finally { if (e_3) throw e_3.error; }
+                }
+                this.filterContainerStyles = {
+                    top: '44px',
+                    right: offSet > 0 ? offSet - 116 + 'px' : '12px',
+                };
+            }
+            else {
+                this.filterName = '';
+                this.filterData = [];
+                this.showFilter = false;
+            }
+        };
+        TableComponent.prototype.updateAppliedFilters = function (appliedFilters) {
+            if (appliedFilters.length == 0) {
+                delete this.appliedFilters[this.filterName];
+            }
+            else {
+                this.appliedFilters[this.filterName] = appliedFilters;
+            }
+            this.filtersUpdated.emit(Object.assign({}, this.appliedFilters));
+            this.toggleFilter(this.filterName);
+        };
+        // Pagination related functions
+        TableComponent.prototype.initializePagination = function () {
+            if (this.config.paginationConfig) {
+                var len = this.config.paginationConfig.noOfPages;
+                if (len <= 7) {
+                    for (var i = 1; i <= len; i++) {
+                        this.pages.push(i);
+                    }
+                }
+                else {
+                    this.pages = [1, 2, 3, 4, 0, len];
+                }
+            }
+        };
+        TableComponent.prototype.updateSelectedPage = function (pageNumber) {
+            if (pageNumber < 1 || pageNumber > this.config.paginationConfig.noOfPages)
+                return;
+            this.selectedPage = pageNumber;
+            var len = this.config.paginationConfig.noOfPages;
+            if (len > 7) {
+                if (pageNumber - 2 <= 1) {
+                    this.pages = [1, 2, 3, 4, 0, len];
+                }
+                else if (pageNumber - 2 > 1 && pageNumber + 2 < len) {
+                    this.pages = [1, 0, pageNumber - 1, pageNumber, pageNumber + 1, 0, len];
+                }
+                else if (pageNumber + 2 >= len) {
+                    this.pages = [1, 0, len - 3, len - 2, len - 1, len];
+                }
+            }
+            this.pageSelected.emit(this.selectedPage);
+        };
+        // Main container related functions
+        TableComponent.prototype.getContainerHeight = function () {
+            if (this.config.height)
+                return this.config.height;
+            else
+                return '';
+        };
+        TableComponent.prototype.getContainerWidth = function () {
+            if (this.config.width)
+                return this.config.width;
+            else
+                return '';
+        };
+        // Column Headers related functions
+        TableComponent.prototype.getColHeadersRowHeight = function () {
+            if (this.config.colHeadersRowConfig &&
+                this.config.colHeadersRowConfig.height) {
+                return this.config.colHeadersRowConfig.height;
+            }
+            else
+                return '44px';
+        };
+        TableComponent.prototype.getColHeadersRowBorderTop = function () {
+            var _a, _b;
+            if (this.config.colHeadersRowConfig && ((_a = this.config.colHeadersRowConfig.style) === null || _a === void 0 ? void 0 : _a.borderTop)) {
+                return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderTop;
+            }
+            else
+                return '';
+        };
+        TableComponent.prototype.getColHeadersRowBorderBottom = function () {
+            var _a, _b;
+            if (this.config.colHeadersRowConfig && ((_a = this.config.colHeadersRowConfig.style) === null || _a === void 0 ? void 0 : _a.borderBottom)) {
+                return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderBottom;
+            }
+            else
+                return '1px solid #E0E0E0';
+        };
+        return TableComponent;
+    }());
+    TableComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'mis-table',
+                    template: "<div\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth(),\n    'overflow-x': config.canScrollHorizontally ? 'auto' : 'unset'\n  }\"\n  id=\"main-container\"\n>\n  <mis-table-filter\n    #filter\n    (filtersApplied)=\"updateAppliedFilters($event)\"\n    *ngIf=\"showFilter\"\n    [containerStyles]=\"filterContainerStyles\"\n    [filtersData]=\"filterData\"\n  ></mis-table-filter>\n  <div #table id=\"table-container\" [ngClass]=\"{ 'scrollbar': expandedIndex < 0, 'no-scrollbar': !(expandedIndex < 0), 'scroll-horizontally': config.canScrollHorizontally }\">\n    <div\n      [ngStyle]=\"{\n        'min-height': getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\n      id=\"col-headers-container\"\n    >\n      <div\n        #colHeader\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of config?.colHeaderConfig\"\n        class=\"col-header\"\n        [style]=\"colHeader?.style\"\n        [ngStyle]=\"{\n              width: colHeader?.style?.width || '',\n              cursor: colHeader.action ? 'pointer' : 'default',\n              'justify-content': colHeader?.style?.justifyContent ? colHeader?.style?.justifyContent :\n                                colHeader.type === 'number'\n                                ? 'flex-end'\n                                : 'space-between'\n          }\">\n        <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <span\n          (click)=\"\n            filterData = colHeader.filters;\n            toggleFilter(colHeader.data);\n            $event.stopPropagation()\n          \"\n          *ngIf=\"\n            colHeader?.type !== 'custom' &&\n            colHeader?.filters &&\n            colHeader?.filters?.length > 0\n          \"\n          class=\"filter-icon\"\n        >\n          <span *ngIf=\"appliedFilters[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n          <svg\n            fill=\"none\"\n            height=\"10\"\n            viewBox=\"0 0 13 10\"\n            width=\"13\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              clip-rule=\"evenodd\"\n              d=\"M4.97546 10H7.64213V8H4.97546V10ZM0.308472 0V2H12.3085V0H0.308472ZM2.30847 6H10.3085V4H2.30847V6Z\"\n              fill=\"#181F33\"\n              fill-rule=\"evenodd\"\n            />\n          </svg>\n        </span>\n        <ng-template\n          *ngIf=\"colHeader?.type === 'custom'\"\n          [customComponent]=\"colHeader?.componentRef\"\n          [data]=\"colHeader.data\"\n          customTableCell\n        ></ng-template>\n      </div>\n    </div>\n    <div id=\"data-container\">\n      <div class=\"row-wrapper\" *ngFor=\"let row of tableData; let i = index\">\n        <div class=\"t-row\" [ngStyle]=\"{'min-height': (config?.rowConfig?.height) ? config.rowConfig.height: '44px'}\">\n          <div\n            (click)=\"\n              config?.colConfig[i]?.action\n                ? config?.colConfig[i]?.action(col)\n                : null\n            \"\n            *ngFor=\"let col of row; let i = index\"\n            [ngStyle]=\"{\n              width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n            }\"\n            class=\"t-col-container\"\n          >\n            <div\n              class=\"t-col\"\n              [style]=\"config.colConfig[i]?.style\"\n              [ngStyle]=\"{\n                width: '100%',\n                cursor: config.colConfig[i].action ? 'pointer' : 'default',\n                'justify-content': config.colConfig[i]?.style?.justifyContent ? config.colConfig[i]?.style?.justifyContent :\n                                  config.colConfig[i].type === 'number'\n                                  ? 'flex-end'\n                                  : 'space-between'\n            }\">\n              <p\n                *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                [ngStyle]=\"{\n                color: config?.colConfig[i]?.style?.color\n                  ? config?.colConfig[i]?.style?.color\n                  : ''\n              }\"\n                class=\"t-col-text\"\n              >\n                {{ col }}\n              </p>\n              <ng-template\n                *ngIf=\"config.colConfig[i].type === 'custom'\"\n                [customComponent]=\"config.colConfig[i].componentRef\"\n                [data]=\"col\"\n                customTableCell\n              ></ng-template>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"config?.canExpand && expandedIndex === i\" class=\"sub-row\">\n          <ng-container *ngIf=\"subTableDataLoading\">\n            <div\n              style=\"\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: 16px;\n              \"\n            >\n              Loading...\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n            <div\n              style=\"\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                padding: 16px;\n              \"\n            >\n              No Data Available...\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"!subTableDataLoading && subTableData.length > 0\">\n            <sub-table [config]=\"subTableconfig\" [tableData]=\"subTableData\"></sub-table>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"config?.paginationConfig\" id=\"pagination-container\">\n    <p id=\"pagination-text\">\n      Showing\n      {{ (selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n      (selectedPage - 1) * config.paginationConfig.rowsPerPage +\n      tableData.length\n      }}\n      of {{ config.paginationConfig.totalNoOfRows }} items\n    </p>\n    <div id=\"pages-container\">\n      <span (click)=\"updateSelectedPage(selectedPage - 1)\" class=\"page\">\n        <svg\n          fill=\"none\"\n          height=\"10\"\n          viewBox=\"0 0 7 10\"\n          width=\"7\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M0.857405 5.56295C0.855794 5.56139 0.854188 5.55982 0.852588 5.55824C0.695955 5.40408 0.617641 5.20203 0.617647 4.99998C0.617641 4.79793 0.695955 4.59588 0.852588 4.44172C0.854188 4.44014 0.855794 4.43858 0.857404 4.43702L5.13066 0.231231C5.44392 -0.0770771 5.9518 -0.0770771 6.26506 0.231231C6.57831 0.53954 6.57831 1.03941 6.26506 1.34772L2.5542 4.99998L6.26506 8.65225C6.57831 8.96055 6.57831 9.46042 6.26506 9.76873C5.9518 10.077 5.44392 10.077 5.13066 9.76873L0.857405 5.56295Z\"\n            fill=\"#181F33\"\n            fill-rule=\"evenodd\"\n          />\n        </svg>\n      </span>\n      <div *ngFor=\"let pageNumber of pages\">\n        <span\n          (click)=\"updateSelectedPage(pageNumber)\"\n          *ngIf=\"pageNumber != 0\"\n          [ngClass]=\"{ 'page-active': pageNumber == selectedPage }\"\n          class=\"page\"\n        >{{ pageNumber }}</span\n        >\n        <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n          <div style=\"display: flex\">\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\" style=\"margin-right: 4px\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </span>\n      </div>\n      <span (click)=\"updateSelectedPage(selectedPage + 1)\" class=\"page\">\n        <svg\n          fill=\"none\"\n          height=\"10\"\n          viewBox=\"0 0 7 10\"\n          width=\"7\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            clip-rule=\"evenodd\"\n            d=\"M6.1426 5.56295C6.14421 5.56139 6.14581 5.55982 6.14741 5.55824C6.30405 5.40408 6.38236 5.20203 6.38236 4.99998C6.38236 4.79793 6.30405 4.59588 6.14741 4.44172C6.14581 4.44014 6.14421 4.43858 6.1426 4.43702L1.86934 0.231231C1.55608 -0.0770771 1.0482 -0.0770771 0.734942 0.231231C0.421688 0.53954 0.421688 1.03941 0.734942 1.34772L4.4458 4.99998L0.734941 8.65225C0.421686 8.96055 0.421686 9.46042 0.734941 9.76873C1.0482 10.077 1.55608 10.077 1.86934 9.76873L6.1426 5.56295Z\"\n            fill=\"#181F33\"\n            fill-rule=\"evenodd\"\n          />\n        </svg>\n      </span>\n    </div>\n  </div>\n</div>\n",
+                    styles: ["#main-container{font-family:Lato,sans-serif;position:relative}.no-scrollbar::-webkit-scrollbar{width:0}.scrollbar::-webkit-scrollbar{width:8px;height:8px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;position:-webkit-sticky;position:sticky;background-color:#fff;width:100%;z-index:1;min-height:44px;border-bottom:1px solid #e0e0e0;top:0;left:0;right:0}.col-header{padding:0 16px;height:100%}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.2px;margin:0}.filter-icon{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row{height:auto;border-bottom:none}.loader ::ng-deep .mat-progress-spinner circle,.mat-spinner circle{stroke:#0937b2}.t-row{display:flex;align-items:center;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;margin:0}#pagination-container{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:#6a737d;margin:0 96px 0 0}#pages-container{display:flex;margin-right:32px}.page{border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;cursor:pointer}.page,.page-seperator{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot{height:3px;width:3px;border-radius:50%;background:#6a737d}.page-active{color:#0937b2;border:1px solid #0937b2}"]
+                },] }
+    ];
+    TableComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 }
+    ]; };
+    TableComponent.propDecorators = {
+        filtersUpdated: [{ type: core.Output }],
+        filter: [{ type: core.ViewChild, args: ['filter',] }],
+        colHeaders: [{ type: core.ViewChildren, args: ['colHeader',] }],
+        pageSelected: [{ type: core.Output }],
+        config: [{ type: core.Input, args: ['tableConfig',] }],
+        subTableconfig: [{ type: core.Input }],
+        tableDataLoading: [{ type: core.Input }],
+        expandedIndex: [{ type: core.Input }],
+        tableData: [{ type: core.Input }],
+        subTableData: [{ type: core.Input }],
+        subTableDataLoading: [{ type: core.Input }],
+        table: [{ type: core.ViewChild, args: ['table',] }]
+    };
+
+    var CustomTableCellDirective = /** @class */ (function () {
+        function CustomTableCellDirective(viewContainerRef, componentFactoryResolver) {
+            this.viewContainerRef = viewContainerRef;
+            this.componentFactoryResolver = componentFactoryResolver;
+        }
+        Object.defineProperty(CustomTableCellDirective.prototype, "customComponent", {
+            set: function (value) {
+                this.component = value;
+                this.createComponent();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CustomTableCellDirective.prototype, "data", {
+            set: function (value) {
+                this.cellData = value;
+                if (this.ref) {
+                    this.ref.instance.data = this.cellData;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CustomTableCellDirective.prototype.createComponent = function () {
+            if (this.component) {
+                var cmpFactoryResolver = this.componentFactoryResolver.resolveComponentFactory(this.component);
+                this.viewContainerRef.clear();
+                this.ref = this.viewContainerRef.createComponent(cmpFactoryResolver);
+                this.setData();
+            }
+        };
+        CustomTableCellDirective.prototype.setData = function () {
+            this.ref.instance.data = this.cellData;
+        };
+        return CustomTableCellDirective;
+    }());
+    CustomTableCellDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[customTableCell]',
+                },] }
+    ];
+    CustomTableCellDirective.ctorParameters = function () { return [
+        { type: core.ViewContainerRef },
+        { type: core.ComponentFactoryResolver }
+    ]; };
+    CustomTableCellDirective.propDecorators = {
+        customComponent: [{ type: core.Input }],
+        data: [{ type: core.Input }]
+    };
+
+    var SubTableComponent = /** @class */ (function () {
+        function SubTableComponent(renderer) {
+            this.renderer = renderer;
+            this.selectedPage = 1;
+            this.pages = [];
+            this.tableData = [];
+        }
+        SubTableComponent.prototype.ngOnInit = function () { };
+        SubTableComponent.prototype.ngAfterViewInit = function () {
+            if (this.config.paginationConfig) {
+                var height = this.table.nativeElement.offsetHeight;
+                this.renderer.setStyle(this.table.nativeElement, 'height', height - 56 + 'px');
+            }
+        };
+        // Main container related functions
+        SubTableComponent.prototype.getContainerHeight = function () {
+            if (this.config.height)
+                return this.config.height;
+            else
+                return '';
+        };
+        SubTableComponent.prototype.getContainerWidth = function () {
+            if (this.config.width)
+                return this.config.width;
+            else
+                return '';
+        };
+        // Column Headers related functions
+        SubTableComponent.prototype.getColHeadersRowHeight = function () {
+            if (this.config.colHeadersRowConfig &&
+                this.config.colHeadersRowConfig.height) {
+                return this.config.colHeadersRowConfig.height;
+            }
+            else
+                return '44px';
+        };
+        SubTableComponent.prototype.getColHeadersRowBorderTop = function () {
+            var _a, _b;
+            if (this.config.colHeadersRowConfig && ((_a = this.config.colHeadersRowConfig.style) === null || _a === void 0 ? void 0 : _a.borderTop)) {
+                return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderTop;
+            }
+            else
+                return '';
+        };
+        SubTableComponent.prototype.getColHeadersRowBorderBottom = function () {
+            var _a, _b;
+            if (this.config.colHeadersRowConfig && ((_a = this.config.colHeadersRowConfig.style) === null || _a === void 0 ? void 0 : _a.borderBottom)) {
+                return (_b = this.config.colHeadersRowConfig.style) === null || _b === void 0 ? void 0 : _b.borderBottom;
+            }
+            else
+                return '1px solid #E0E0E0';
+        };
+        return SubTableComponent;
+    }());
+    SubTableComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'sub-table',
+                    template: "<div\n  id=\"main-container\"\n  [ngStyle]=\"{\n    height: getContainerHeight(),\n    width: getContainerWidth()\n  }\"\n>\n  <div id=\"table-container\" #table>\n    <div\n      id=\"col-headers-container\"\n      *ngIf=\"!!config.showHeader\"\n      [ngStyle]=\"{\n        height: getColHeadersRowHeight(),\n        'border-top': getColHeadersRowBorderTop(),\n        'border-bottom': getColHeadersRowBorderBottom()\n      }\"\n    >\n      <div\n        class=\"col-header\"\n        (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n        *ngFor=\"let colHeader of config?.colHeaderConfig\"\n        [style]=\"colHeader?.style\"\n        [ngStyle]=\"{\n            width: colHeader?.style?.width || '',\n            cursor: colHeader.action ? 'pointer' : 'default',\n            'justify-content': colHeader?.style?.justifyContent ? colHeader?.style?.justifyContent :\n                              colHeader.type === 'number'\n                              ? 'flex-end'\n                              : 'space-between'\n        }\">\n        <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n          {{ colHeader?.data || \" \" }}\n        </p>\n        <ng-template\n          *ngIf=\"colHeader?.type === 'custom'\"\n          customTableCell\n          [customComponent]=\"colHeader?.componentRef\"\n          [data]=\"colHeader.data\"\n        ></ng-template>\n      </div>\n    </div>\n    <div>\n      <cdk-virtual-scroll-viewport [minBufferPx]=\"config.dataContainerMaxHeight || '400'\" [maxBufferPx]=\"config.dataContainerMaxHeight + 200 || '600'\" [style.overflow]=\"'overlay'\" [style.height]=\"config.dataContainerMaxHeight || '400px'\" itemSize=\"50\" id=\"data-container\">\n        <div\n          class=\"row-wrapper\"\n          *cdkVirtualFor=\"let row of tableData; let i = index\"\n          [ngStyle]=\"{\n            backgroundColor: i % 2 === 0 ? '#FAFAFA' : null\n          }\"\n        >\n          <div class=\"t-row\">\n            <div\n              (click)=\"\n                config?.colConfig[i]?.action\n                  ? config?.colConfig[i]?.action(col)\n                  : null\n              \"\n              *ngFor=\"let col of row; let i = index\"\n              [ngStyle]=\"{\n                width: config?.colConfig[i]?.style?.width || config?.colHeaderConfig[i]?.style?.width || ''\n              }\"\n              class=\"t-col-container\"\n            >\n              <div\n                class=\"t-col\"\n                [style]=\"config.colConfig[i]?.style\"\n                [ngStyle]=\"{\n                  width: '100%',\n                  cursor: config.colConfig[i].action ? 'pointer' : 'default',\n                  'justify-content': config.colConfig[i]?.style?.justifyContent ? config.colConfig[i]?.style?.justifyContent :\n                                    config.colConfig[i].type === 'number'\n                                    ? 'flex-end'\n                                    : 'space-between'\n              }\">\n                <p\n                  *ngIf=\"config.colConfig[i].type !== 'custom'\"\n                  [ngStyle]=\"{\n                  color: config?.colConfig[i]?.style?.color\n                    ? config?.colConfig[i]?.style?.color\n                    : ''\n                }\"\n                  class=\"t-col-text\"\n                >\n                  {{ col }}\n                </p>\n                <ng-template\n                  *ngIf=\"config.colConfig[i].type === 'custom'\"\n                  [customComponent]=\"config.colConfig[i].componentRef\"\n                  [data]=\"col\"\n                  customTableCell\n                ></ng-template>\n              </div>\n            </div>\n          </div>\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n  </div>\n</div>\n",
+                    styles: ["#main-container{font-family:Lato,sans-serif}#table-container{height:inherit}#col-headers-container{display:flex;background-color:#fff;height:36px;border-bottom:1px solid #e0e0e0}#data-container{overflow:scroll;width:100%}#data-container::-webkit-scrollbar{width:8px}#data-container::-webkit-scrollbar-thumb{background:#9aa7b4}.col-header{height:100%;width:160px;padding:0 16px}.col-header,.col-header-text{display:flex;align-items:center}.col-header-text{font-style:normal;font-weight:700;font-size:14px;line-height:20px;letter-spacing:.25px;margin:0}.t-row{display:flex;align-items:center;height:36px;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#f1fdf8}.t-col-container{padding:0 16px;height:100%}.t-col{height:100%}.t-col,.t-col-text{display:flex;align-items:center}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;letter-spacing:.2px;margin:0}"]
+                },] }
+    ];
+    SubTableComponent.ctorParameters = function () { return [
+        { type: core.Renderer2 }
+    ]; };
+    SubTableComponent.propDecorators = {
+        config: [{ type: core.Input }],
+        tableData: [{ type: core.Input }],
+        table: [{ type: core.ViewChild, args: ['table',] }]
+    };
+
+    var TableFilterComponent = /** @class */ (function () {
+        function TableFilterComponent() {
+            this.filtersData = [];
+            this.containerStyles = {};
+            this.filtersApplied = new core.EventEmitter();
+            this.filtersMap = {};
+            this.searchValue = '';
+            this.mySort = function (a, b) {
+                if (a.name < b.name)
+                    return -1;
+                else if (b.name < a.name)
+                    return 1;
+                else
+                    return 0;
+            };
+        }
+        TableFilterComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.filtersData.forEach(function (filter) {
+                _this.filtersMap[filter.value] = filter;
+            });
+        };
+        TableFilterComponent.prototype.resetFilters = function () {
+            var _this = this;
+            this.filtersData.forEach(function (filter) {
+                _this.filtersMap[filter.value].checked = false;
+            });
+            this.filtersApplied.emit([]);
+        };
+        TableFilterComponent.prototype.applyFilters = function () {
+            var list = Object.values(this.filtersMap)
+                .filter(function (filter) { return filter.checked; })
+                .map(function (filter) {
+                return {
+                    name: filter.name,
+                    value: filter.value,
+                };
+            });
+            this.filtersApplied.emit(list);
+        };
+        TableFilterComponent.prototype.updateSearchValue = function (event) {
+            this.searchValue = event.target.value;
+        };
+        TableFilterComponent.prototype.updateFilter = function (data) {
+            this.filtersMap[data.val].checked = !this.filtersMap[data.val].checked;
+        };
+        TableFilterComponent.prototype.getFiltersBasedOnSearchValue = function () {
+            var _this = this;
+            var list = Object.values(this.filtersMap);
+            list = list.filter(function (filter) {
+                return filter.name.match(new RegExp(_this.searchValue, 'i'));
+            });
+            return list.sort(this.mySort);
+        };
+        TableFilterComponent.prototype.getCheckedFilters = function () {
+            var list = Object.values(this.filtersMap);
+            list = list
+                .filter(function (filter) { return filter.checked; })
+                .sort(this.mySort);
+            return list;
+        };
+        return TableFilterComponent;
+    }());
+    TableFilterComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'mis-table-filter',
+                    template: "<div id=\"main-container\"\n     #mainContainer\n    [ngStyle]=\"containerStyles\"\n>\n    <div id=\"search-bar-container\">\n        <input (keyup)=\"updateSearchValue($event)\" type=\"text\" placeholder=\"Search\">\n        <svg id=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.21496 8.14563C1.21496 4.3179 4.33709 1.21165 8.19249 1.21165C12.0479 1.21165 15.17 4.3179 15.17 8.14563C15.17 9.69308 14.6598 11.1226 13.797 12.2767L12.3684 13.7013C11.2043 14.5668 9.75891 15.0796 8.19249 15.0796C4.33709 15.0796 1.21496 11.9734 1.21496 8.14563ZM12.9419 14.7835C11.602 15.7329 9.96259 16.2913 8.19249 16.2913C3.66965 16.2913 -0.00012207 12.6461 -0.00012207 8.14563C-0.00012207 3.64512 3.66965 0 8.19249 0C12.7153 0 16.3851 3.64512 16.3851 8.14563C16.3851 9.93713 15.8036 11.5931 14.8183 12.9375L16.836 14.4048C17.6704 14.912 18.7553 15.6543 17.2453 17.215C15.7352 18.7756 15.0098 17.6663 14.499 16.8364L12.9419 14.7835Z\" fill=\"#6A737D\"/>\n        </svg>\n    </div>\n    <div id=\"filters-main-container\">\n        <div class=\"filters-sub-container\">\n            <div *ngFor=\"let filter of getCheckedFilters()\">\n                <div class=\"filter\">\n                    <mis-checkbox\n                            [checked]=\"true\"\n                            [name]=\"filter.value\"\n                            (change)=\"updateFilter($event)\"\n                    ></mis-checkbox>\n                    <span class=\"filter-text\">{{filter.name}}</span>\n                </div>\n            </div>\n        </div>\n        <div class=\"separator\" style=\"margin: 16px 0px;\" *ngIf=\"getCheckedFilters().length && (getCheckedFilters().length < filtersData.length)\"></div>\n        <div class=\"filters-sub-container\">\n            <div *ngFor=\"let filter of getFiltersBasedOnSearchValue()\">\n                <div class=\"filter\" *ngIf=\"!filter.checked\">\n                    <mis-checkbox\n                            [checked]=\"false\"\n                            [name]=\"filter.value\"\n                            (change)=\"updateFilter($event)\"\n                    ></mis-checkbox>\n                    <span class=\"filter-text\">{{filter.name}}</span>\n                </div>\n            </div>\n            <div id=\"no-results-container\" *ngIf=\"getFiltersBasedOnSearchValue().length < 1\">\n                <span class=\"filter-text\">No matches found</span>\n            </div>\n        </div>\n        <div class=\"separator\" style=\"margin: 16px 0px;\"></div>\n        <div id=\"buttons-container\">\n            <button id=\"reset-btn\" style=\"margin-right: 8px;\" (click)=\"resetFilters()\">Reset</button>\n            <button id=\"apply-btn\" (click)=\"applyFilters()\">Apply</button>\n        </div>\n    </div>\n</div>\n",
+                    styles: ["#main-container{position:absolute;background:#fff;z-index:2;right:calc(50% - 128px);width:256px;padding:16px;font-family:Lato,sans-serif;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#9aa7b4}#search-bar-container{width:100%;position:relative;margin-bottom:8px}input{width:100%;padding:12px 12px 12px 42px;border:1px solid #000;border-radius:4px;height:48px;box-shadow:none;outline:none;font-style:normal;font-weight:400;font-size:15px;line-height:20px;letter-spacing:.1px;color:#181f33}input:focus{border:1px solid #0937b2}#search-icon{position:absolute;top:15px;left:12px}.filters-sub-container{max-height:144px;overflow-y:auto}.filter{height:36px;display:flex;justify-content:flex-start;align-items:center}.filter-text{font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#no-results-container{height:36px;display:flex;justify-content:center;align-items:center}.separator{border:1px solid #e0e0e0}#buttons-container{display:flex;justify-content:center;align-items:center}button{width:calc(50% - 4px);border:none;box-shadow:none;outline:none;font-size:16px;line-height:24px;text-align:center;letter-spacing:.2px;padding:10px 30px;background:none;border-radius:8px}#apply-btn{background:#0937b2;color:#fff}#reset-btn{background:#fff;color:#0937b2}"]
+                },] }
+    ];
+    TableFilterComponent.ctorParameters = function () { return []; };
+    TableFilterComponent.propDecorators = {
+        filtersData: [{ type: core.Input }],
+        containerStyles: [{ type: core.Input }],
+        filtersApplied: [{ type: core.Output }],
+        container: [{ type: core.ViewChild, args: ['mainContainer',] }]
+    };
+
+    var TableModule = /** @class */ (function () {
+        function TableModule() {
+        }
+        TableModule.forRoot = function () {
+            return { ngModule: TableModule, providers: [] };
+        };
+        return TableModule;
+    }());
+    TableModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        TableComponent,
+                        SubTableComponent,
+                        TableFilterComponent,
+                        CustomTableCellDirective,
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        checkbox.CheckboxModule,
+                        scrolling.ScrollingModule
+                    ],
+                    exports: [
+                        TableComponent,
+                        SubTableComponent,
+                        TableFilterComponent,
+                        CustomTableCellDirective
+                    ]
+                },] }
+    ];
+
+    /**
+     * Generated bundle index. Do not edit.
+     */
+
+    exports.CustomTableCellDirective = CustomTableCellDirective;
+    exports.TableComponent = TableComponent;
+    exports.TableFilterComponent = TableFilterComponent;
+    exports.TableModule = TableModule;
+    exports.ɵa = SubTableComponent;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=mis-crystal-design-system-table.umd.js.map