mis-crystal-design-system 14.0.66 → 14.0.67-test1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts +15 -1
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +279 -65
- package/esm2020/radio-button/radio-button.component.mjs +5 -9
- package/esm2020/table/table.component.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +314 -64
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-radio-button.mjs +4 -8
- package/fesm2015/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +278 -64
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-radio-button.mjs +4 -8
- package/fesm2020/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-table.mjs +2 -2
- package/fesm2020/mis-crystal-design-system-table.mjs.map +1 -1
- package/package.json +1 -1
- package/radio-button/radio-button.component.d.ts +1 -3
|
@@ -15,8 +15,6 @@ export class RadioButtonComponent {
|
|
|
15
15
|
this.value = "";
|
|
16
16
|
/** Controls the state of the radio button */
|
|
17
17
|
this.disabled = false;
|
|
18
|
-
/** Controls the default selection of radio button */
|
|
19
|
-
this.selectedValue = "";
|
|
20
18
|
/** Can be used to attach the radio input field
|
|
21
19
|
* to a reactive form by passing in a
|
|
22
20
|
* “FormControl“ Object. It can also be
|
|
@@ -31,17 +29,17 @@ export class RadioButtonComponent {
|
|
|
31
29
|
}
|
|
32
30
|
}
|
|
33
31
|
RadioButtonComponent.ɵfac = function RadioButtonComponent_Factory(t) { return new (t || RadioButtonComponent)(); };
|
|
34
|
-
RadioButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadioButtonComponent, selectors: [["mis-radio"]], inputs: { id: "id", name: "name", value: "value", disabled: "disabled",
|
|
32
|
+
RadioButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadioButtonComponent, selectors: [["mis-radio"]], inputs: { id: "id", name: "name", value: "value", disabled: "disabled", formControl: "formControl" }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 5, consts: [["tabindex", "-1", "type", "radio", 3, "id", "name", "disabled", "value", "formControl", "change", "keup.enter"]], template: function RadioButtonComponent_Template(rf, ctx) { if (rf & 1) {
|
|
35
33
|
i0.ɵɵelementStart(0, "input", 0);
|
|
36
|
-
i0.ɵɵlistener("change", function RadioButtonComponent_Template_input_change_0_listener($event) { return ctx.onChange($event); })("keup.enter", function RadioButtonComponent_Template_input_keup_enter_0_listener($event) { return ctx.onChange($event); })
|
|
34
|
+
i0.ɵɵlistener("change", function RadioButtonComponent_Template_input_change_0_listener($event) { return ctx.onChange($event); })("keup.enter", function RadioButtonComponent_Template_input_keup_enter_0_listener($event) { return ctx.onChange($event); });
|
|
37
35
|
i0.ɵɵelementEnd();
|
|
38
36
|
} if (rf & 2) {
|
|
39
37
|
i0.ɵɵpropertyInterpolate("id", ctx.id);
|
|
40
|
-
i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.value)("
|
|
38
|
+
i0.ɵɵproperty("name", ctx.name)("disabled", ctx.disabled)("value", ctx.value)("formControl", ctx.formControl);
|
|
41
39
|
} }, dependencies: [i1.DefaultValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.FormControlDirective], styles: ["input[type=radio][_ngcontent-%COMP%]{appearance:none;width:20px;height:20px;margin:0;padding:3px;background-clip:content-box;border:2px solid #6a737d;background-color:#fff;border-radius:50%;cursor:pointer}input[type=radio][_ngcontent-%COMP%]:checked{background-color:#0937b2;border:2px solid #0937b2}input[type=radio][_ngcontent-%COMP%]:hover{border:2px solid #929dab}input[type=radio][_ngcontent-%COMP%]:checked:hover{border:2px solid #0937b2}input[type=radio][_ngcontent-%COMP%]:disabled{border:2px solid #c8cdd3}input[type=radio][_ngcontent-%COMP%]:checked:disabled{border:2px solid #c8cdd3;background-color:#c8cdd3}"] });
|
|
42
40
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioButtonComponent, [{
|
|
43
41
|
type: Component,
|
|
44
|
-
args: [{ selector: "mis-radio", template: "<input \n (change)=\"onChange($event)\" \n (keup.enter)=\"onChange($event)\"\n tabindex=\"-1\"\n id=\"{{ id }}\" type=\"radio\" \n [name]=\"name\" [disabled]=\"disabled\" \n [value]=\"value\"
|
|
42
|
+
args: [{ selector: "mis-radio", template: "<input \n (change)=\"onChange($event)\" \n (keup.enter)=\"onChange($event)\"\n tabindex=\"-1\"\n id=\"{{ id }}\" type=\"radio\" \n [name]=\"name\" [disabled]=\"disabled\" \n [value]=\"value\"\n [formControl]=\"formControl\" \n/>\n", styles: ["input[type=radio]{appearance:none;width:20px;height:20px;margin:0;padding:3px;background-clip:content-box;border:2px solid #6a737d;background-color:#fff;border-radius:50%;cursor:pointer}input[type=radio]:checked{background-color:#0937b2;border:2px solid #0937b2}input[type=radio]:hover{border:2px solid #929dab}input[type=radio]:checked:hover{border:2px solid #0937b2}input[type=radio]:disabled{border:2px solid #c8cdd3}input[type=radio]:checked:disabled{border:2px solid #c8cdd3;background-color:#c8cdd3}\n"] }]
|
|
45
43
|
}], function () { return []; }, { id: [{
|
|
46
44
|
type: Input
|
|
47
45
|
}], name: [{
|
|
@@ -50,11 +48,9 @@ RadioButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadioB
|
|
|
50
48
|
type: Input
|
|
51
49
|
}], disabled: [{
|
|
52
50
|
type: Input
|
|
53
|
-
}], selectedValue: [{
|
|
54
|
-
type: Input
|
|
55
51
|
}], formControl: [{
|
|
56
52
|
type: Input
|
|
57
53
|
}], valueChange: [{
|
|
58
54
|
type: Output
|
|
59
55
|
}] }); })();
|
|
60
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
56
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL3JhZGlvLWJ1dHRvbi9yYWRpby1idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBbUIsa0JBQWtCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBT3JFLE1BQU0sT0FBTyxvQkFBb0I7SUFzQi9CO1FBckJBO3dEQUNnRDtRQUN2QyxPQUFFLEdBQW9CLEVBQUUsQ0FBQztRQUNsQzttQ0FDMkI7UUFDbEIsU0FBSSxHQUFvQixFQUFFLENBQUM7UUFDcEM7MkJBQ21CO1FBQ1YsVUFBSyxHQUFvQixFQUFFLENBQUM7UUFDckMsNkNBQTZDO1FBQ3BDLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkM7OztxREFHNkM7UUFDcEMsZ0JBQVcsR0FBb0IsSUFBSSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVyRSxxREFBcUQ7UUFDM0MsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBRWpDLENBQUM7SUFDaEIsUUFBUSxLQUFJLENBQUM7SUFDYixRQUFRLENBQUMsS0FBSztRQUNaLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEQsQ0FBQzs7d0ZBMUJVLG9CQUFvQjt1RUFBcEIsb0JBQW9CO1FDUmpDLGdDQVFFO1FBUEUsd0dBQVUsb0JBQWdCLElBQUMsbUdBQ2Isb0JBQWdCLElBREg7UUFEL0IsaUJBUUU7O1FBSkUsc0NBQWE7UUFDYiwrQkFBYSwwQkFBQSxvQkFBQSxnQ0FBQTs7dUZER0osb0JBQW9CO2NBTGhDLFNBQVM7MkJBQ0UsV0FBVztzQ0FPWixFQUFFO2tCQUFWLEtBQUs7WUFHRyxJQUFJO2tCQUFaLEtBQUs7WUFHRyxLQUFLO2tCQUFiLEtBQUs7WUFFRyxRQUFRO2tCQUFoQixLQUFLO1lBTUcsV0FBVztrQkFBbkIsS0FBSztZQUdJLFdBQVc7a0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgVW50eXBlZEZvcm1Db250cm9sIH0gZnJvbSBcIkBhbmd1bGFyL2Zvcm1zXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtaXMtcmFkaW9cIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9yYWRpby1idXR0b24uY29tcG9uZW50Lmh0bWxcIixcbiAgc3R5bGVVcmxzOiBbXCIuL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuc2Nzc1wiXVxufSlcbmV4cG9ydCBjbGFzcyBSYWRpb0J1dHRvbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIC8qKiBXaGVuIG11bHRpcGxlIHJhZGlvIGlucHV0IGZpZWxkcyBhcmUgdXNlZFxuICAgKiBhbiBcImlkXCIgY2FuIGJlIGdpdmVuIHRvIGtlZXAgdHJhY2sgb2YgdGhlbSAqL1xuICBASW5wdXQoKSBpZDogc3RyaW5nIHwgbnVtYmVyID0gXCJcIjtcbiAgLyoqIE5hbWUgb2YgdGhlIGF0dHJpYnV0ZSBmb3Igd2hpY2ggdGhlIHJhZGlvXG4gICAqIHNlbGVjdGlvbiBpcyBwcm92aWRlZCAqL1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgfCBudW1iZXIgPSBcIlwiO1xuICAvKiogVmFsdWUgb2YgdGhlIGF0dHJpYnV0ZSB3aGljaCBpcyB0byBiZSBlbWl0dGVkXG4gICAqIHdoZW4gc2VsZWN0ZWQgKi9cbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZyB8IG51bWJlciA9IFwiXCI7XG4gIC8qKiBDb250cm9scyB0aGUgc3RhdGUgb2YgdGhlIHJhZGlvIGJ1dHRvbiAqL1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBDYW4gYmUgdXNlZCB0byBhdHRhY2ggdGhlIHJhZGlvIGlucHV0IGZpZWxkXG4gICAqIHRvIGEgcmVhY3RpdmUgZm9ybSBieSBwYXNzaW5nIGluIGFcbiAgICog4oCcRm9ybUNvbnRyb2zigJwgT2JqZWN0LiBJdCBjYW4gYWxzbyBiZVxuICAgKiB1c2VkIHRvIHNldCB0aGUgZGVmYXVsdCBhdHRyaWJ1dGUgdmFsdWUgKi9cbiAgQElucHV0KCkgZm9ybUNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCA9IG5ldyBVbnR5cGVkRm9ybUNvbnRyb2wobnVsbCk7XG5cbiAgLyoqIEVtaXRzIFwidmFsdWVcIiBvZiB0aGUgcmFkaW8gYnV0dG9uIG9uIHNlbGVjdGlvbiAqL1xuICBAT3V0cHV0KCkgdmFsdWVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG4gIG5nT25Jbml0KCkge31cbiAgb25DaGFuZ2UoZXZlbnQpIHtcbiAgICB0aGlzLnZhbHVlQ2hhbmdlLmVtaXQodGhpcy5mb3JtQ29udHJvbC52YWx1ZSk7XG4gIH1cbn1cbiIsIjxpbnB1dCBcbiAgICAoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIiBcbiAgICAoa2V1cC5lbnRlcik9XCJvbkNoYW5nZSgkZXZlbnQpXCJcbiAgICB0YWJpbmRleD1cIi0xXCJcbiAgICBpZD1cInt7IGlkIH19XCIgdHlwZT1cInJhZGlvXCIgXG4gICAgW25hbWVdPVwibmFtZVwiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIFxuICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCIgXG4vPlxuIl19
|
|
@@ -456,10 +456,10 @@ TableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableCompone
|
|
|
456
456
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
457
457
|
i0.ɵɵadvance(1);
|
|
458
458
|
i0.ɵɵproperty("ngIf", (ctx.config == null ? null : ctx.config.paginationConfig) && (ctx.tableLength >= ctx.config.paginationConfig.rowsPerPage || (ctx.config.paginationConfig == null ? null : ctx.config.paginationConfig.selectedPage) !== 1));
|
|
459
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2.SubTableComponent, i3.TableFilterComponent, i4.CustomTableCellDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width
|
|
459
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2.SubTableComponent, i3.TableFilterComponent, i4.CustomTableCellDirective], styles: ["#main-container[_ngcontent-%COMP%]{font-family:Lato,sans-serif;position:relative}.no-scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:0}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar{width:8px;height:8px;border-radius:15px}.scrollbar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container[_ngcontent-%COMP%]{height:inherit;overflow-y:auto}.scroll-horizontally[_ngcontent-%COMP%]{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container[_ngcontent-%COMP%]{display:flex;align-items:center;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[_ngcontent-%COMP%]{padding:0 16px;display:flex;align-items:center;height:100%}.col-header-text[_ngcontent-%COMP%]{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}.filter-icon[_ngcontent-%COMP%]{margin-left:8px;padding:0 8px;position:relative;cursor:pointer}#filter-active[_ngcontent-%COMP%]{height:8px;width:8px;background:#16cbbc;border-radius:50%;position:absolute;top:4px;right:4px}.sub-row[_ngcontent-%COMP%]{height:auto;border-bottom:none}.loader[_ngcontent-%COMP%] .mat-progress-spinner circle, .mat-spinner[_ngcontent-%COMP%] circle[_ngcontent-%COMP%]{stroke:#0937b2}.t-row[_ngcontent-%COMP%]{display:flex;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row[_ngcontent-%COMP%]:hover{background-color:#e7eefd}.active-row[_ngcontent-%COMP%]{background-color:#e6f6fd}.t-col-container[_ngcontent-%COMP%]{padding:0 16px}.t-row-hover[_ngcontent-%COMP%]:hover{background-color:#0000}.t-col-container-hover[_ngcontent-%COMP%]:hover{background-color:#e6ebf7}.t-col-container-hover[_ngcontent-%COMP%]:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover[_ngcontent-%COMP%]{border-right:1px solid #e0e0e0}.t-col[_ngcontent-%COMP%]{display:flex;align-items:center;height:100%}.t-col-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;letter-spacing:.2px;margin:0}#pagination-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;align-items:center;height:56px}#pagination-text[_ngcontent-%COMP%]{font-style:normal;font-weight:400;font-size:12px;line-height:18px;letter-spacing:.4px;color:#6a737d;margin:0 96px 0 0}#pages-container[_ngcontent-%COMP%]{display:flex;margin-right:32px}.page[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.page-seperator[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;width:32px;height:32px;margin-right:8px}.dot[_ngcontent-%COMP%]{height:3px;width:3px;border-radius:50%;background:#6a737d}.page-active[_ngcontent-%COMP%]{color:#0937b2;border:1px solid #0937b2}"] });
|
|
460
460
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
461
461
|
type: Component,
|
|
462
|
-
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\n #table\n id=\"table-container\"\n [ngClass]=\"{ 'no-scrollbar': expandedIndex < 0, scrollbar: !(expandedIndex < 0), 'scroll-horizontally': config.canScrollHorizontally }\"\n >\n <div\n [ngStyle]=\"getColHeadersRowStyles()\"\n id=\"col-headers-container\"\n >\n <div\n #colHeaderRef\n (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n *ngFor=\"let colHeader of config?.colHeaderConfig\"\n class=\"col-header\"\n [ngStyle]=\"{\n width: colHeader?.style?.width || '',\n cursor: colHeader.action ? 'pointer' : 'default',\n 'justify-content': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <span\n (click)=\"filterData = colHeader.filters; toggleFilter(colHeader.data); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type !== 'custom' && colHeader?.filters && colHeader?.filters?.length > 0\"\n class=\"filter-icon\"\n >\n <span *ngIf=\"appliedFilters[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">\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\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': i === activeRowIndex }\"\n [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n >\n <div\n (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\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 [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\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\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config.colConfig[i]?.type !== 'custom'\"\n [ngStyle]=\"{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\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 [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n Loading...\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n <div [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n No Data Available...\n </div>\n </ng-container>\n \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\n *ngIf=\"config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)\"\n id=\"pagination-container\"\n >\n <p id=\"pagination-text\">\n Showing\n {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n }}\n of {{ config.paginationConfig.totalNoOfRows }} items\n </p>\n <div id=\"pages-container\">\n <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage - 1)\" class=\"page\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\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 == config.paginationConfig?.selectedPage }\"\n class=\"page\"\n >{{ pageNumber }}</span\n >\n <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n <div [ngStyle]=\"{ display: 'flex' }\">\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\"></span>\n </div> \n </span>\n </div>\n <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage + 1)\" class=\"page\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\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;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:-moz-fit-content;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;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;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;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;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.t-col-container{padding:0 16px}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:#e6ebf7}.t-col-container-hover:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover{border-right:1px solid #e0e0e0}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;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{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.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}\n"] }]
|
|
462
|
+
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\n #table\n id=\"table-container\"\n [ngClass]=\"{ 'no-scrollbar': expandedIndex < 0, scrollbar: !(expandedIndex < 0), 'scroll-horizontally': config.canScrollHorizontally }\"\n >\n <div\n [ngStyle]=\"getColHeadersRowStyles()\"\n id=\"col-headers-container\"\n >\n <div\n #colHeaderRef\n (click)=\"colHeader?.action ? colHeader?.action(colHeader) : null\"\n *ngFor=\"let colHeader of config?.colHeaderConfig\"\n class=\"col-header\"\n [ngStyle]=\"{\n width: colHeader?.style?.width || '',\n cursor: colHeader.action ? 'pointer' : 'default',\n 'justify-content': colHeader?.style?.justifyContent\n ? colHeader?.style?.justifyContent\n : colHeader.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p *ngIf=\"colHeader?.type !== 'custom'\" class=\"col-header-text\">\n {{ colHeader?.data || \" \" }}\n </p>\n <span\n (click)=\"filterData = colHeader.filters; toggleFilter(colHeader.data); $event.stopPropagation()\"\n *ngIf=\"colHeader?.type !== 'custom' && colHeader?.filters && colHeader?.filters?.length > 0\"\n class=\"filter-icon\"\n >\n <span *ngIf=\"appliedFilters[colHeader.data]?.length > 0\" id=\"filter-active\"></span>\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 13 10\" width=\"13\" xmlns=\"http://www.w3.org/2000/svg\">\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\n class=\"t-row\"\n [ngClass]=\"{ 't-row-hover': config.cellHover, 'active-row': i === activeRowIndex }\"\n [ngStyle]=\"{ 'min-height': config?.rowConfig?.height ? config.rowConfig.height : '44px' }\"\n (click)=\"selectRow(i)\"\n >\n <div\n (click)=\"config?.colConfig[i]?.action ? config?.colConfig[i]?.action(col) : null\"\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 [ngClass]=\"{ 't-col-container-hover': config.cellHover }\"\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\n ? config.colConfig[i]?.style?.justifyContent\n : config.colConfig[i]?.type === 'number'\n ? 'flex-end'\n : 'space-between'\n }\"\n >\n <p\n *ngIf=\"config.colConfig[i]?.type !== 'custom'\"\n [ngStyle]=\"{\n color: config?.colConfig[i]?.style?.color ? config?.colConfig[i]?.style?.color : ''\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 [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n Loading...\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n <div [ngStyle]=\"{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n padding: '16px'\n }\">\n No Data Available...\n </div>\n </ng-container>\n \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\n *ngIf=\"config?.paginationConfig && (tableLength >= config.paginationConfig.rowsPerPage || config.paginationConfig?.selectedPage !== 1)\"\n id=\"pagination-container\"\n >\n <p id=\"pagination-text\">\n Showing\n {{ (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + 1 }}-{{\n (config.paginationConfig?.selectedPage - 1) * config.paginationConfig.rowsPerPage + tableLength\n }}\n of {{ config.paginationConfig.totalNoOfRows }} items\n </p>\n <div id=\"pages-container\">\n <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage - 1)\" class=\"page\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\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 == config.paginationConfig?.selectedPage }\"\n class=\"page\"\n >{{ pageNumber }}</span\n >\n <span *ngIf=\"pageNumber == 0\" class=\"page-seperator\">\n <div [ngStyle]=\"{ display: 'flex' }\">\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\" [ngStyle]=\"{ 'margin-right': '4px' }\"></span>\n <span class=\"dot\"></span>\n </div> \n </span>\n </div>\n <span (click)=\"updateSelectedPage(config.paginationConfig?.selectedPage + 1)\" class=\"page\">\n <svg fill=\"none\" height=\"10\" viewBox=\"0 0 7 10\" width=\"7\" xmlns=\"http://www.w3.org/2000/svg\">\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;border-radius:15px}.scrollbar::-webkit-scrollbar-thumb{background:#9aa7b4;border-radius:15px}#table-container{height:inherit;overflow-y:auto}.scroll-horizontally{height:inherit;width:fit-content;overflow-y:unset!important;overflow-x:visible}#col-headers-container{display:flex;align-items:center;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;display:flex;align-items:center;height:100%}.col-header-text{font-style:normal;font-weight:700;line-height:20px;display:flex;align-items:center;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;min-height:44px;background-color:#fff;width:100%;border-bottom:1px solid #e0e0e0}.t-row:hover{background-color:#e7eefd}.active-row{background-color:#e6f6fd}.t-col-container{padding:0 16px}.t-row-hover:hover{background-color:#0000}.t-col-container-hover:hover{background-color:#e6ebf7}.t-col-container-hover:first-child{border-left:1px solid #e0e0e0}.t-col-container-hover{border-right:1px solid #e0e0e0}.t-col{display:flex;align-items:center;height:100%}.t-col-text{font-style:normal;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;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{display:flex;justify-content:center;align-items:center;border:1px solid #6a737d;box-sizing:border-box;border-radius:4px;width:32px;height:32px;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d;margin-right:8px;cursor:pointer}.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}\n"] }]
|
|
463
463
|
}], function () { return [{ type: i0.Renderer2 }]; }, { filtersUpdated: [{
|
|
464
464
|
type: Output
|
|
465
465
|
}], filter: [{
|