mis-crystal-design-system 14.0.43 → 14.0.44-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/datepicker.module.d.ts +2 -1
- package/datepicker_v2/tz-datepicker.directive.d.ts +2 -0
- package/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts +2 -0
- package/daterangepicker_v2/daterangepicker.module.d.ts +2 -1
- package/daterangepicker_v2/tz-daterangepicker.directive.d.ts +2 -0
- package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +2 -0
- package/dropdown/dropdown.component.d.ts +1 -0
- package/dropdown/dropdown.module.d.ts +2 -1
- package/esm2020/checkbox/checkbox.component.mjs +4 -4
- package/esm2020/datepicker_v2/datepicker.module.mjs +5 -4
- package/esm2020/datepicker_v2/tz-datepicker.directive.mjs +21 -2
- package/esm2020/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +55 -40
- package/esm2020/daterangepicker_v2/daterangepicker.module.mjs +5 -4
- package/esm2020/daterangepicker_v2/tz-daterangepicker.directive.mjs +21 -2
- package/esm2020/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +88 -67
- package/esm2020/dropdown/dropdown.component.mjs +52 -38
- package/esm2020/dropdown/dropdown.module.mjs +5 -4
- package/esm2020/mobile-filter/mobile-filter.component.mjs +18 -16
- package/esm2020/phone-input/phone-input.component.mjs +13 -82
- package/esm2020/radio-button/radio-button.component.mjs +4 -4
- package/esm2020/table/table.component.mjs +2 -2
- package/fesm2015/mis-crystal-design-system-checkbox.mjs +3 -3
- package/fesm2015/mis-crystal-design-system-checkbox.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs +80 -43
- package/fesm2015/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs +113 -70
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-dropdown.mjs +57 -40
- package/fesm2015/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-mobile-filter.mjs +17 -15
- package/fesm2015/mis-crystal-design-system-mobile-filter.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-phone-input.mjs +10 -84
- package/fesm2015/mis-crystal-design-system-phone-input.mjs.map +1 -1
- package/fesm2015/mis-crystal-design-system-radio-button.mjs +3 -3
- 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-checkbox.mjs +3 -3
- package/fesm2020/mis-crystal-design-system-checkbox.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs +78 -43
- package/fesm2020/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs +111 -70
- package/fesm2020/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-dropdown.mjs +55 -40
- package/fesm2020/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-mobile-filter.mjs +17 -15
- package/fesm2020/mis-crystal-design-system-mobile-filter.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-phone-input.mjs +10 -79
- package/fesm2020/mis-crystal-design-system-phone-input.mjs.map +1 -1
- package/fesm2020/mis-crystal-design-system-radio-button.mjs +3 -3
- 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/phone-input/phone-input.component.d.ts +11 -25
|
@@ -25,7 +25,7 @@ function MobileFilterComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
25
25
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
26
26
|
i0.ɵɵelementContainerStart(0);
|
|
27
27
|
i0.ɵɵelementStart(1, "div", 12);
|
|
28
|
-
i0.ɵɵlistener("click", function MobileFilterComponent_ng_container_7_Template_div_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const filter_r2 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.currentSelectedItem = filter_r2.key); });
|
|
28
|
+
i0.ɵɵlistener("click", function MobileFilterComponent_ng_container_7_Template_div_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const filter_r2 = restoredCtx.$implicit; const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.currentSelectedItem = filter_r2.key); })("keyup.enter", function MobileFilterComponent_ng_container_7_Template_div_keyup_enter_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r7); const filter_r2 = restoredCtx.$implicit; const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.currentSelectedItem = filter_r2.key); });
|
|
29
29
|
i0.ɵɵelementStart(2, "span", 13);
|
|
30
30
|
i0.ɵɵtext(3);
|
|
31
31
|
i0.ɵɵelementEnd();
|
|
@@ -48,37 +48,39 @@ function MobileFilterComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
48
48
|
function MobileFilterComponent_ng_container_14_mis_checkbox_2_Template(rf, ctx) { if (rf & 1) {
|
|
49
49
|
i0.ɵɵelement(0, "mis-checkbox", 22);
|
|
50
50
|
} if (rf & 2) {
|
|
51
|
-
const
|
|
52
|
-
i0.ɵɵproperty("checked",
|
|
51
|
+
const option_r9 = i0.ɵɵnextContext().$implicit;
|
|
52
|
+
i0.ɵɵproperty("checked", option_r9.selected);
|
|
53
|
+
i0.ɵɵattribute("aria-label", (option_r9.selected ? "Selected" : "Unselected") + " checkbox " + option_r9.label);
|
|
53
54
|
} }
|
|
54
55
|
function MobileFilterComponent_ng_container_14_input_3_Template(rf, ctx) { if (rf & 1) {
|
|
55
56
|
i0.ɵɵelement(0, "input", 23);
|
|
56
57
|
} if (rf & 2) {
|
|
57
|
-
const
|
|
58
|
-
i0.ɵɵproperty("checked",
|
|
58
|
+
const option_r9 = i0.ɵɵnextContext().$implicit;
|
|
59
|
+
i0.ɵɵproperty("checked", option_r9.selected);
|
|
60
|
+
i0.ɵɵattribute("aria-label", (option_r9.selected ? "Selected" : "Unselected") + " radioButton " + option_r9.label);
|
|
59
61
|
} }
|
|
60
62
|
function MobileFilterComponent_ng_container_14_Template(rf, ctx) { if (rf & 1) {
|
|
61
|
-
const
|
|
63
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
62
64
|
i0.ɵɵelementContainerStart(0);
|
|
63
65
|
i0.ɵɵelementStart(1, "div", 18);
|
|
64
|
-
i0.ɵɵlistener("click", function MobileFilterComponent_ng_container_14_Template_div_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(
|
|
65
|
-
i0.ɵɵtemplate(2, MobileFilterComponent_ng_container_14_mis_checkbox_2_Template, 1,
|
|
66
|
-
i0.ɵɵtemplate(3, MobileFilterComponent_ng_container_14_input_3_Template, 1,
|
|
66
|
+
i0.ɵɵlistener("click", function MobileFilterComponent_ng_container_14_Template_div_click_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const option_r9 = restoredCtx.$implicit; const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.toggleFilter(option_r9.value, option_r9.selected)); })("keyup.enter", function MobileFilterComponent_ng_container_14_Template_div_keyup_enter_1_listener() { const restoredCtx = i0.ɵɵrestoreView(_r16); const option_r9 = restoredCtx.$implicit; const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.toggleFilter(option_r9.value, option_r9.selected)); });
|
|
67
|
+
i0.ɵɵtemplate(2, MobileFilterComponent_ng_container_14_mis_checkbox_2_Template, 1, 2, "mis-checkbox", 19);
|
|
68
|
+
i0.ɵɵtemplate(3, MobileFilterComponent_ng_container_14_input_3_Template, 1, 2, "input", 20);
|
|
67
69
|
i0.ɵɵelementStart(4, "span", 21);
|
|
68
70
|
i0.ɵɵtext(5);
|
|
69
71
|
i0.ɵɵelementEnd()();
|
|
70
72
|
i0.ɵɵelementContainerEnd();
|
|
71
73
|
} if (rf & 2) {
|
|
72
|
-
const
|
|
74
|
+
const option_r9 = ctx.$implicit;
|
|
73
75
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
74
76
|
i0.ɵɵadvance(2);
|
|
75
77
|
i0.ɵɵproperty("ngIf", ctx_r1.localFilterOptions[ctx_r1.currentSelectedItem].multiSelect);
|
|
76
78
|
i0.ɵɵadvance(1);
|
|
77
79
|
i0.ɵɵproperty("ngIf", !ctx_r1.localFilterOptions[ctx_r1.currentSelectedItem].multiSelect);
|
|
78
80
|
i0.ɵɵadvance(1);
|
|
79
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c0,
|
|
81
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c0, option_r9.selected ? "#181F33" : "#6A737D"));
|
|
80
82
|
i0.ɵɵadvance(1);
|
|
81
|
-
i0.ɵɵtextInterpolate(
|
|
83
|
+
i0.ɵɵtextInterpolate(option_r9.label);
|
|
82
84
|
} }
|
|
83
85
|
class MobileFilterComponent {
|
|
84
86
|
constructor() {
|
|
@@ -117,9 +119,9 @@ class MobileFilterComponent {
|
|
|
117
119
|
}
|
|
118
120
|
}
|
|
119
121
|
MobileFilterComponent.ɵfac = function MobileFilterComponent_Factory(t) { return new (t || MobileFilterComponent)(); };
|
|
120
|
-
MobileFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileFilterComponent, selectors: [["mis-mobile-filter"]], inputs: { currentSelectedItem: "currentSelectedItem", filterOptions: "filterOptions", backIcon: "backIcon", headerName: "headerName", applyBtnName: "applyBtnName", clearBtnName: "clearBtnName" }, outputs: { closeFilters: "closeFilters", clearFilters: "clearFilters", applyFilters: "applyFilters" }, decls: 20, vars: 10, consts: [[1, "filters-container"], [1, "head", "display-flex"], ["alt", "", 3, "src", "click"], [1, "body", "display-flex"], [1, "filters"], [4, "ngFor", "ngForOf"], [1, "filter-options-container"], [1, "filter-options-title"], [1, "filter-options"], [1, "footer", "display-flex"], ["mis-button", "", "size", "md", "type", "text", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "click"], [1, "filter", "display-flex", 3, "click"], [1, "filterName", 3, "ngStyle"], ["class", "selectedNumber", 4, "ngIf"], ["class", "highlightor", 4, "ngIf"], [1, "selectedNumber"], [1, "highlightor"], [1, "filter-option", "display-flex", 3, "click"], [3, "checked", 4, "ngIf"], ["type", "radio", 3, "checked", 4, "ngIf"], [3, "ngStyle"], [3, "checked"], ["type", "radio", 3, "checked"]], template: function MobileFilterComponent_Template(rf, ctx) { if (rf & 1) {
|
|
122
|
+
MobileFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MobileFilterComponent, selectors: [["mis-mobile-filter"]], inputs: { currentSelectedItem: "currentSelectedItem", filterOptions: "filterOptions", backIcon: "backIcon", headerName: "headerName", applyBtnName: "applyBtnName", clearBtnName: "clearBtnName" }, outputs: { closeFilters: "closeFilters", clearFilters: "clearFilters", applyFilters: "applyFilters" }, decls: 20, vars: 10, consts: [[1, "filters-container"], [1, "head", "display-flex"], ["tabindex", "0", "aria-label", "Close Filters Arrow", "alt", "", 3, "src", "click", "keyup.enter"], [1, "body", "display-flex"], [1, "filters"], [4, "ngFor", "ngForOf"], [1, "filter-options-container"], [1, "filter-options-title"], [1, "filter-options"], [1, "footer", "display-flex"], ["mis-button", "", "size", "md", "type", "text", 3, "click"], ["mis-button", "", "size", "md", "type", "primary", 3, "click"], ["tabindex", "0", 1, "filter", "display-flex", 3, "click", "keyup.enter"], [1, "filterName", 3, "ngStyle"], ["class", "selectedNumber", 4, "ngIf"], ["class", "highlightor", 4, "ngIf"], [1, "selectedNumber"], [1, "highlightor"], [1, "filter-option", "display-flex", 3, "click", "keyup.enter"], [3, "checked", 4, "ngIf"], ["type", "radio", 3, "checked", 4, "ngIf"], [3, "ngStyle"], [3, "checked"], ["type", "radio", 3, "checked"]], template: function MobileFilterComponent_Template(rf, ctx) { if (rf & 1) {
|
|
121
123
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "img", 2);
|
|
122
|
-
i0.ɵɵlistener("click", function MobileFilterComponent_Template_img_click_2_listener() { return ctx.closeFilters.emit(); });
|
|
124
|
+
i0.ɵɵlistener("click", function MobileFilterComponent_Template_img_click_2_listener() { return ctx.closeFilters.emit(); })("keyup.enter", function MobileFilterComponent_Template_img_keyup_enter_2_listener() { return ctx.closeFilters.emit(); });
|
|
123
125
|
i0.ɵɵelementEnd();
|
|
124
126
|
i0.ɵɵelementStart(3, "span");
|
|
125
127
|
i0.ɵɵtext(4);
|
|
@@ -160,7 +162,7 @@ MobileFilterComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Mobil
|
|
|
160
162
|
} }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2.ButtonDirective, i3.CheckboxComponent, i1.KeyValuePipe], styles: [".display-flex[_ngcontent-%COMP%]{display:flex}.filters-container[_ngcontent-%COMP%]{position:absolute;inset:0;background-color:#fff;cursor:default}.filters-container[_ngcontent-%COMP%] *[_ngcontent-%COMP%]{font-family:Lato}.filters-container[_ngcontent-%COMP%] .head[_ngcontent-%COMP%]{height:56px;border-bottom:1px solid #E0E0E0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container[_ngcontent-%COMP%] .head[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{cursor:pointer}.filters-container[_ngcontent-%COMP%] .head[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%]{height:calc(100vh - 129px)}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filters[_ngcontent-%COMP%]{width:120px;border-right:1px solid #E0E0E0;flex-shrink:0}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filters[_ngcontent-%COMP%] .filter[_ngcontent-%COMP%]{height:56px;padding:0 16px;border-bottom:1px solid #E0E0E0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filters[_ngcontent-%COMP%] .filter[_ngcontent-%COMP%] .filterName[_ngcontent-%COMP%]{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filters[_ngcontent-%COMP%] .filter[_ngcontent-%COMP%] .selectedNumber[_ngcontent-%COMP%]{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filters[_ngcontent-%COMP%] .filter[_ngcontent-%COMP%] .highlightor[_ngcontent-%COMP%]{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%]{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] *[_ngcontent-%COMP%]{color:#181f33}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] .filter-options-title[_ngcontent-%COMP%]{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] .filter-options-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{color:#6a737d}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] .filter-options[_ngcontent-%COMP%]{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] .filter-options[_ngcontent-%COMP%] .filter-option[_ngcontent-%COMP%]{height:48px;border-bottom:1px solid #E0E0E0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] .filter-options[_ngcontent-%COMP%] .filter-option[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container[_ngcontent-%COMP%] .body[_ngcontent-%COMP%] .filter-options-container[_ngcontent-%COMP%] .filter-options[_ngcontent-%COMP%] .filter-option[_ngcontent-%COMP%] input[type=radio][_ngcontent-%COMP%]{accent-color:#0937B2;width:20px;height:20px}.filters-container[_ngcontent-%COMP%] .footer[_ngcontent-%COMP%]{height:73px;border-top:1px solid #E0E0E0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container[_ngcontent-%COMP%] .footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:160px}"] });
|
|
161
163
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MobileFilterComponent, [{
|
|
162
164
|
type: Component,
|
|
163
|
-
args: [{ selector: 'mis-mobile-filter', template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\"
|
|
165
|
+
args: [{ selector: 'mis-mobile-filter', template: "<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img \n tabindex=\"0\"\n (click)=\"closeFilters.emit();\"\n (keyup.enter)=\"closeFilters.emit();\" \n aria-label=\"Close Filters Arrow\"\n [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" \n tabindex=\"0\"\n (click)=\"currentSelectedItem = filter.key\"\n (keyup.enter)=\"currentSelectedItem = filter.key\"\n >\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\"\n (click)=\"toggleFilter(option.value, option.selected)\" \n (keyup.enter)=\"toggleFilter(option.value, option.selected)\"\n >\n <mis-checkbox [attr.aria-label]=\"(option.selected ? 'Selected' : 'Unselected') + ' checkbox ' + option.label\" *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" [attr.aria-label]=\"(option.selected ? 'Selected' : 'Unselected') + ' radioButton ' + option.label\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n", styles: [".display-flex{display:flex}.filters-container{position:absolute;inset:0;background-color:#fff;cursor:default}.filters-container *{font-family:Lato}.filters-container .head{height:56px;border-bottom:1px solid #E0E0E0;justify-content:flex-start;align-items:center;padding:0 16px;gap:12px}.filters-container .head img{cursor:pointer}.filters-container .head span{font-weight:700;font-size:17px;line-height:24px;letter-spacing:.2px}.filters-container .body{height:calc(100vh - 129px)}.filters-container .body .filters{width:120px;border-right:1px solid #E0E0E0;flex-shrink:0}.filters-container .body .filters .filter{height:56px;padding:0 16px;border-bottom:1px solid #E0E0E0;align-items:center;font-size:15px;justify-content:space-between;position:relative}.filters-container .body .filters .filter .filterName{color:#6a737d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filters .filter .selectedNumber{background-color:#f5f5f5;height:24px;width:auto;font-size:14px;min-width:24px;border-radius:50%;text-align:center;line-height:24px;padding:0 8px}.filters-container .body .filters .filter .highlightor{position:absolute;left:0;height:100%;width:4px;background-color:#0937b2}.filters-container .body .filter-options-container{padding:16px 16px 0 12px;width:calc(100% - 56px);overflow-x:hidden}.filters-container .body .filter-options-container *{color:#181f33}.filters-container .body .filter-options-container .filter-options-title{text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.25px}.filters-container .body .filter-options-container .filter-options-title span{color:#6a737d}.filters-container .body .filter-options-container .filter-options{margin-top:16px;overflow-y:scroll;height:calc(100% - 32px)}.filters-container .body .filter-options-container .filter-options .filter-option{height:48px;border-bottom:1px solid #E0E0E0;align-items:center;padding-left:16px;gap:13px;font-size:15px}.filters-container .body .filter-options-container .filter-options .filter-option span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters-container .body .filter-options-container .filter-options .filter-option input[type=radio]{accent-color:#0937B2;width:20px;height:20px}.filters-container .footer{height:73px;border-top:1px solid #E0E0E0;padding:0 16px;align-items:center;justify-content:space-between}.filters-container .footer button{width:160px}\n"] }]
|
|
164
166
|
}], function () { return []; }, { currentSelectedItem: [{
|
|
165
167
|
type: Input
|
|
166
168
|
}], filterOptions: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-mobile-filter.mjs","sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.html","../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts","../../../projects/mis-components/mobile-filter/mis-crystal-design-system-mobile-filter.ts"],"sourcesContent":["<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img (click)=\"closeFilters.emit();\" [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" (click)=\"currentSelectedItem = filter.key\">\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\" (click)=\"toggleFilter(option.value, option.selected)\" >\n <mis-checkbox *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n @Input() currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-mobile-filter.mjs","sources":["../../../projects/mis-components/mobile-filter/mobile-filter.component.html","../../../projects/mis-components/mobile-filter/mobile-filter.component.ts","../../../projects/mis-components/mobile-filter/mobile-filter.module.ts","../../../projects/mis-components/mobile-filter/mis-crystal-design-system-mobile-filter.ts"],"sourcesContent":["<div class=\"filters-container\">\n <div class=\"head display-flex\">\n <img \n tabindex=\"0\"\n (click)=\"closeFilters.emit();\"\n (keyup.enter)=\"closeFilters.emit();\" \n aria-label=\"Close Filters Arrow\"\n [src]=\"backIcon\" alt=\"\">\n <span>{{headerName}}</span>\n </div>\n <div class=\"body display-flex\">\n <div class=\"filters\">\n <ng-container *ngFor=\"let filter of localFilterOptions | keyvalue : originalOrder\">\n <div class=\"filter display-flex\" \n tabindex=\"0\"\n (click)=\"currentSelectedItem = filter.key\"\n (keyup.enter)=\"currentSelectedItem = filter.key\"\n >\n <span class=\"filterName\" [ngStyle]=\"{'color': filter.key === currentSelectedItem ? '#0937B2' : '#181F33'}\">{{ localFilterOptions[filter.key]?.name }}</span>\n <span class=\"selectedNumber\" *ngIf=\"localFilterOptions[filter.key]['multiSelect'] && localFilterOptions[filter.key]['noOfSelectedItems'] > 0\">{{ localFilterOptions[filter.key]['noOfSelectedItems'] }}</span>\n <div class=\"highlightor\" *ngIf=\"filter.key === currentSelectedItem\"></div>\n </div>\n </ng-container>\n </div>\n <div class=\"filter-options-container\">\n <div class=\"filter-options-title\">\n <span>{{ localFilterOptions[currentSelectedItem]?.name }}</span>\n </div>\n <div class=\"filter-options\">\n <ng-container *ngFor=\"let option of localFilterOptions[currentSelectedItem]?.options; let i = index\">\n <div class=\"filter-option display-flex\"\n (click)=\"toggleFilter(option.value, option.selected)\" \n (keyup.enter)=\"toggleFilter(option.value, option.selected)\"\n >\n <mis-checkbox [attr.aria-label]=\"(option.selected ? 'Selected' : 'Unselected') + ' checkbox ' + option.label\" *ngIf=\"localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\"></mis-checkbox>\n <input type=\"radio\" [attr.aria-label]=\"(option.selected ? 'Selected' : 'Unselected') + ' radioButton ' + option.label\" *ngIf=\"!localFilterOptions[currentSelectedItem].multiSelect\" [checked]=\"option.selected\">\n <span [ngStyle]=\"{'color': option.selected ? '#181F33' : '#6A737D'}\">{{ option.label }}</span>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"footer display-flex\">\n <button\n mis-button\n size=\"md\"\n type=\"text\"\n (click)=\"clearFilters.emit()\">\n {{clearBtnName}}\n </button>\n <button\n mis-button\n size=\"md\"\n type=\"primary\"\n (click)=\"applyFilters.emit(localFilterOptions)\"\n >\n {{applyBtnName}}\n </button>\n </div>\n</div>\n","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\n\n@Component({\n selector: 'mis-mobile-filter',\n templateUrl: './mobile-filter.component.html',\n styleUrls: ['./mobile-filter.component.scss']\n})\nexport class MobileFilterComponent implements OnInit {\n\n localFilterOptions: IFilterOptions;\n @Input() currentSelectedItem: string = 'Sort';\n\n @Input() set filterOptions(options) {\n this.localFilterOptions = options;\n };\n\n @Input() backIcon: string = '';\n\n @Input() headerName: string = 'Filters';\n @Input() applyBtnName: string = 'Apply';\n @Input() clearBtnName: string = 'Clear Filters';\n\n @Output() closeFilters = new EventEmitter();\n @Output() clearFilters = new EventEmitter();\n @Output() applyFilters = new EventEmitter<IFilterOptions>();\n\n constructor() { }\n\n ngOnInit(): void {\n }\n\n originalOrder() { // used in template for keyvalue pipe sorting\n return 0;\n }\n\n toggleFilter(data, isSelectedItem) {\n const isMultiSelect = this.localFilterOptions[this.currentSelectedItem].multiSelect;\n this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = 0;\n this.localFilterOptions[this.currentSelectedItem].options = this.localFilterOptions[this.currentSelectedItem].options.map(option => {\n const isSelectedValue = option.value === data;\n (isMultiSelect && option.selected) && (this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems +=1);\n return {\n ...option,\n selected: isSelectedValue ? (isMultiSelect ? !option.selected : true) : (isMultiSelect ? option.selected : false)\n }\n });\n\n // changing number of selected items for multiselect filters\n const noOfSelectedItems = this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems;\n isMultiSelect ? this.localFilterOptions[this.currentSelectedItem].noOfSelectedItems = isSelectedItem ? noOfSelectedItems - 1 : noOfSelectedItems + 1 : null;\n \n }\n}\n\nexport interface IFilterOptions {\n [filterName: string]: {\n name: string;\n options: {label: string, value: string, selected: boolean, capacities?: number[], amenities?: string[]}[], // capacities & amenities are for floor\n multiSelect: boolean,\n noOfSelectedItems?: number\n }\n}\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { MobileFilterComponent } from \"./mobile-filter.component\";\nimport { ButtonModule } from \"mis-crystal-design-system/button\";\nimport { CheckboxModule } from \"mis-crystal-design-system/checkbox\";\n\n@NgModule({\n declarations: [MobileFilterComponent],\n imports: [CommonModule, ButtonModule, CheckboxModule],\n exports: [MobileFilterComponent]\n})\nexport class MobileFilterModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,6 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/forms';
|
|
4
4
|
import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
5
|
-
import { PhoneNumberUtil } from 'google-libphonenumber';
|
|
6
|
-
import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
|
|
7
5
|
import * as i1 from '@angular/common';
|
|
8
6
|
import { CommonModule } from '@angular/common';
|
|
9
7
|
import * as i3 from 'mis-crystal-design-system/dropdown';
|
|
@@ -14,90 +12,29 @@ import { ScrollingModule } from '@angular/cdk-experimental/scrolling';
|
|
|
14
12
|
const _c0 = function (a0) { return { "height": a0 }; };
|
|
15
13
|
class PhoneInputComponent {
|
|
16
14
|
constructor() {
|
|
17
|
-
this.dropdownHeight = '';
|
|
18
|
-
this.dropdownWidth = '';
|
|
19
15
|
this.dropdownData = [];
|
|
20
|
-
this.dropdownSelectedItem = { value:
|
|
16
|
+
this.dropdownSelectedItem = { value: "", label: "" };
|
|
21
17
|
this.inputPlaceholder = 'Enter';
|
|
22
18
|
this.inputFormControl = new FormControl();
|
|
23
19
|
this.onDropdownSelection = new EventEmitter();
|
|
24
|
-
this.
|
|
25
|
-
this.
|
|
26
|
-
this.
|
|
27
|
-
this.searchEnabled = true;
|
|
28
|
-
this.inputType = 'number';
|
|
29
|
-
this.searchLabel = 'Search Keyword';
|
|
30
|
-
this.defaultCountry = 'IN';
|
|
31
|
-
this.phoneValidator = true;
|
|
32
|
-
this.countryCodes = [{ label: '', value: '', countryCode: '' }];
|
|
33
|
-
this.selectedCountryName = '';
|
|
34
|
-
this.validationMessage = '';
|
|
35
|
-
this.phoneUtil = PhoneNumberUtil.getInstance();
|
|
20
|
+
this.searchEnabled = false;
|
|
21
|
+
this.inputType = "number";
|
|
22
|
+
this.searchLabel = "Search Keyword";
|
|
36
23
|
}
|
|
37
24
|
ngOnInit() {
|
|
38
|
-
if (this.phoneValidator) {
|
|
39
|
-
this.loadCountryCodes();
|
|
40
|
-
this.dropdownData = this.countryCodes;
|
|
41
|
-
const countryCodeToSelect = this.defaultCountry;
|
|
42
|
-
const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);
|
|
43
|
-
if (def) {
|
|
44
|
-
this.dropdownSelectedItem = def;
|
|
45
|
-
this.selectedCountryName = def.label;
|
|
46
|
-
}
|
|
47
|
-
this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);
|
|
48
|
-
}
|
|
49
|
-
this.inputFormControl.valueChanges.subscribe((value) => {
|
|
50
|
-
this.validatePhoneNumber(value, this.dropdownSelectedItem?.countryCode);
|
|
51
|
-
});
|
|
52
25
|
}
|
|
53
26
|
handleDropdownSelection(item) {
|
|
54
|
-
this.
|
|
55
|
-
this.onDropdownSelection.emit(item.countryCode);
|
|
56
|
-
this.selectedCountryName = item.label;
|
|
57
|
-
this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);
|
|
58
|
-
this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });
|
|
59
|
-
}
|
|
60
|
-
loadCountryCodes() {
|
|
61
|
-
const countries = getCountries();
|
|
62
|
-
this.countryCodes = countries.map((countryCode) => ({
|
|
63
|
-
value: getCountryCallingCode(countryCode).toString(),
|
|
64
|
-
label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,
|
|
65
|
-
countryCode: countryCode,
|
|
66
|
-
}));
|
|
67
|
-
}
|
|
68
|
-
validatePhoneNumber(value, countryCode) {
|
|
69
|
-
const phoneNumber = value?.phoneNumber || value;
|
|
70
|
-
if (phoneNumber && countryCode) {
|
|
71
|
-
try {
|
|
72
|
-
const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);
|
|
73
|
-
const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);
|
|
74
|
-
if (isValid) {
|
|
75
|
-
this.validationMessage = null;
|
|
76
|
-
this.onInvalidPhoneNumber.emit('');
|
|
77
|
-
}
|
|
78
|
-
else {
|
|
79
|
-
this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem?.value}(${this.dropdownSelectedItem?.countryCode})`;
|
|
80
|
-
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
catch (error) {
|
|
84
|
-
this.validationMessage = 'Invalid input';
|
|
85
|
-
this.onInvalidPhoneNumber.emit(this.validationMessage);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
onBlur() {
|
|
90
|
-
this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);
|
|
27
|
+
this.onDropdownSelection.emit(item);
|
|
91
28
|
}
|
|
92
29
|
}
|
|
93
30
|
PhoneInputComponent.ɵfac = function PhoneInputComponent_Factory(t) { return new (t || PhoneInputComponent)(); };
|
|
94
|
-
PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneInputComponent, selectors: [["mis-phone-input"]], inputs: { dropdownHeight: "dropdownHeight", dropdownWidth: "dropdownWidth", inputHeight: "inputHeight", dropdownData: "dropdownData", dropdownSelectedItem: "dropdownSelectedItem", label: "label", inputPlaceholder: "inputPlaceholder", inputFormControl: "inputFormControl", dropdownListWidth: "dropdownListWidth", dropdownListHeight: "dropdownListHeight", searchEnabled: "searchEnabled", inputType: "inputType", searchLabel: "searchLabel"
|
|
31
|
+
PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneInputComponent, selectors: [["mis-phone-input"]], inputs: { dropdownHeight: "dropdownHeight", dropdownWidth: "dropdownWidth", inputHeight: "inputHeight", dropdownData: "dropdownData", dropdownSelectedItem: "dropdownSelectedItem", label: "label", inputPlaceholder: "inputPlaceholder", inputFormControl: "inputFormControl", dropdownListWidth: "dropdownListWidth", dropdownListHeight: "dropdownListHeight", searchEnabled: "searchEnabled", inputType: "inputType", searchLabel: "searchLabel" }, outputs: { onDropdownSelection: "onDropdownSelection" }, decls: 5, vars: 16, consts: [[1, "main-container-phone"], [3, "height", "dropdownListWidth", "dropdownListHeight", "width", "data", "selectedItem", "label", "searchEnabled", "multiLine", "searchLabel", "onChange"], [1, "details-field"], [1, "input-box"], [1, "black-text", 3, "ngStyle", "placeholder", "formControl", "type"]], template: function PhoneInputComponent_Template(rf, ctx) { if (rf & 1) {
|
|
95
32
|
i0.ɵɵelementStart(0, "div", 0)(1, "mis-dropdown", 1);
|
|
96
33
|
i0.ɵɵlistener("onChange", function PhoneInputComponent_Template_mis_dropdown_onChange_1_listener($event) { return ctx.handleDropdownSelection($event); });
|
|
97
34
|
i0.ɵɵelementEnd();
|
|
98
|
-
i0.ɵɵelementStart(2, "div", 2)(3, "div", 3)
|
|
99
|
-
i0.ɵɵ
|
|
100
|
-
i0.ɵɵelementEnd()()()
|
|
35
|
+
i0.ɵɵelementStart(2, "div", 2)(3, "div", 3);
|
|
36
|
+
i0.ɵɵelement(4, "input", 4);
|
|
37
|
+
i0.ɵɵelementEnd()()();
|
|
101
38
|
} if (rf & 2) {
|
|
102
39
|
i0.ɵɵadvance(1);
|
|
103
40
|
i0.ɵɵproperty("height", ctx.dropdownHeight)("dropdownListWidth", ctx.dropdownListWidth)("dropdownListHeight", ctx.dropdownListHeight)("width", ctx.dropdownWidth)("data", ctx.dropdownData)("selectedItem", ctx.dropdownSelectedItem)("label", ctx.label)("searchEnabled", ctx.searchEnabled)("multiLine", false)("searchLabel", ctx.searchLabel);
|
|
@@ -106,7 +43,7 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
|
|
|
106
43
|
} }, dependencies: [i1.NgStyle, i2.DefaultValueAccessor, i2.NgControlStatus, i2.FormControlDirective, i3.DropdownComponent], styles: [".main-container-phone[_ngcontent-%COMP%]{display:flex;border:1px solid #E0E0E0;border-radius:6px}.details-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%]{display:inline-block;min-width:224px;margin-right:24px}.details-field[_ngcontent-%COMP%] .input-box[_ngcontent-%COMP%]{width:100%}.details-field[_ngcontent-%COMP%] .input-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{width:100%;height:32px}input[_ngcontent-%COMP%]{padding:10px 16px;border:none;outline:none;color:#181f33;line-height:24px;font-size:16px;width:100%;height:auto;border-radius:6px}.black-text[_ngcontent-%COMP%]{color:#181f33;font-size:16px;line-height:24px}input[_ngcontent-%COMP%]::-webkit-outer-spin-button, input[_ngcontent-%COMP%]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.main-container-phone[_ngcontent-%COMP%] .item{padding:8px!important}.main-container-phone[_ngcontent-%COMP%] .dropdown{border:unset!important}"] });
|
|
107
44
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PhoneInputComponent, [{
|
|
108
45
|
type: Component,
|
|
109
|
-
args: [{ selector: "mis-phone-input", template: "<div class=\"main-container-phone\">\n <mis-dropdown
|
|
46
|
+
args: [{ selector: "mis-phone-input", template: "<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"searchEnabled\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\" [searchLabel]=\"searchLabel\"></mis-dropdown>\n <div class=\"details-field\">\n <div class=\"input-box\">\n <input\n [ngStyle]=\"{'height': inputHeight }\"\n class=\"black-text\"\n [placeholder]=\"inputPlaceholder\"\n [formControl]=\"inputFormControl\" \n [type]=\"inputType\"\n />\n </div>\n </div>\n</div>\n", styles: [".main-container-phone{display:flex;border:1px solid #E0E0E0;border-radius:6px}.details-field label{display:inline-block;min-width:224px;margin-right:24px}.details-field .input-box{width:100%}.details-field .input-box input{width:100%;height:32px}input{padding:10px 16px;border:none;outline:none;color:#181f33;line-height:24px;font-size:16px;width:100%;height:auto;border-radius:6px}.black-text{color:#181f33;font-size:16px;line-height:24px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.main-container-phone ::ng-deep .item{padding:8px!important}.main-container-phone ::ng-deep .dropdown{border:unset!important}\n"] }]
|
|
110
47
|
}], function () { return []; }, { dropdownHeight: [{
|
|
111
48
|
type: Input
|
|
112
49
|
}], dropdownWidth: [{
|
|
@@ -125,8 +62,6 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
|
|
|
125
62
|
type: Input
|
|
126
63
|
}], onDropdownSelection: [{
|
|
127
64
|
type: Output
|
|
128
|
-
}], onInvalidPhoneNumber: [{
|
|
129
|
-
type: Output
|
|
130
65
|
}], dropdownListWidth: [{
|
|
131
66
|
type: Input
|
|
132
67
|
}], dropdownListHeight: [{
|
|
@@ -137,10 +72,6 @@ PhoneInputComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PhoneIn
|
|
|
137
72
|
type: Input
|
|
138
73
|
}], searchLabel: [{
|
|
139
74
|
type: Input
|
|
140
|
-
}], defaultCountry: [{
|
|
141
|
-
type: Input
|
|
142
|
-
}], phoneValidator: [{
|
|
143
|
-
type: Input
|
|
144
75
|
}] }); })();
|
|
145
76
|
|
|
146
77
|
class PhoneInputModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-phone-input.mjs","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.component.html","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\nimport { getCountries, getCountryCallingCode, CountryCode } from 'libphonenumber-js';\nimport { DropdownItem } from 'mis-crystal-design-system/dropdown';\n\ninterface CustomDropdownItem extends DropdownItem {\n countryCode: string;\n}\n\n@Component({\n selector: \"mis-phone-input\",\n templateUrl: \"./phone-input.component.html\",\n styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n @Input() dropdownHeight?: string = '';\n @Input() dropdownWidth?: string = '';\n @Input() inputHeight?;\n @Input() dropdownData: CustomDropdownItem[] = [];\n @Input() dropdownSelectedItem: CustomDropdownItem = { value: '', label: '', countryCode: '' };\n @Input() label: string;\n @Input() inputPlaceholder: string = 'Enter';\n @Input() inputFormControl: FormControl = new FormControl();\n @Output() onDropdownSelection = new EventEmitter<string>();\n @Output() onInvalidPhoneNumber = new EventEmitter<string>();\n @Input() dropdownListWidth = '';\n @Input() dropdownListHeight = '';\n @Input() searchEnabled: boolean = true;\n @Input() inputType: string = 'number';\n @Input() searchLabel: string = 'Search Keyword';\n @Input() defaultCountry: string = 'IN';\n @Input() phoneValidator? = true;\n\n countryCodes: CustomDropdownItem[] = [{ label: '', value: '', countryCode: '' }];\n selectedCountryName: string = '';\n validationMessage: string = '';\n private phoneUtil: PhoneNumberUtil;\n\n constructor() {\n this.phoneUtil = PhoneNumberUtil.getInstance();\n }\n\n ngOnInit() {\n if (this.phoneValidator) {\n this.loadCountryCodes();\n this.dropdownData = this.countryCodes;\n const countryCodeToSelect = this.defaultCountry;\n const def = this.countryCodes.find(item => item.countryCode === countryCodeToSelect);\n if (def) {\n this.dropdownSelectedItem = def;\n this.selectedCountryName = def.label;\n }\n this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);\n }\n\n this.inputFormControl.valueChanges.subscribe((value) => {\n this.validatePhoneNumber(value, this.dropdownSelectedItem?.countryCode);\n });\n }\n\n handleDropdownSelection(item: CustomDropdownItem) {\n this.dropdownSelectedItem = item;\n this.onDropdownSelection.emit(item.countryCode);\n this.selectedCountryName = item.label;\n this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);\n this.inputFormControl.patchValue({ countryCode: item.countryCode }, { emitEvent: false });\n }\n\n loadCountryCodes() {\n const countries = getCountries();\n this.countryCodes = countries.map((countryCode) => ({\n value: getCountryCallingCode(countryCode).toString(),\n label: `${countryCode} (+${getCountryCallingCode(countryCode)})`,\n countryCode: countryCode,\n }));\n }\n\n public validatePhoneNumber(value: any, countryCode: string) {\n const phoneNumber = value?.phoneNumber || value;\n if (phoneNumber && countryCode) {\n try {\n const number = this.phoneUtil.parseAndKeepRawInput(phoneNumber, countryCode);\n const isValid = this.phoneUtil.isValidNumberForRegion(number, countryCode);\n if (isValid) {\n this.validationMessage = null;\n this.onInvalidPhoneNumber.emit('');\n } else {\n this.validationMessage = `Phone number invalid for country code: +${this.dropdownSelectedItem?.value}(${this.dropdownSelectedItem?.countryCode})`;\n this.onInvalidPhoneNumber.emit(this.validationMessage);\n }\n } catch (error) {\n this.validationMessage = 'Invalid input';\n this.onInvalidPhoneNumber.emit(this.validationMessage);\n }\n }\n }\n\n onBlur() {\n this.validatePhoneNumber(this.inputFormControl?.value, this.dropdownSelectedItem?.countryCode);\n }\n}\n","<div class=\"main-container-phone\">\n <mis-dropdown \n [height]=\"dropdownHeight\" \n [dropdownListWidth]=\"dropdownListWidth\"\n [dropdownListHeight]=\"dropdownListHeight\" \n [width]=\"dropdownWidth\" \n [data]=\"dropdownData\"\n [selectedItem]=\"dropdownSelectedItem\" \n [label]=\"label\" \n [searchEnabled]=\"searchEnabled\" \n [multiLine]=\"false\"\n (onChange)=\"handleDropdownSelection($event)\" \n [searchLabel]=\"searchLabel\">\n </mis-dropdown>\n <div class=\"details-field\">\n <div class=\"input-box\">\n <input\n [ngStyle]=\"{'height': inputHeight }\"\n class=\"black-text\" \n [placeholder]=\"inputPlaceholder\"\n [formControl]=\"inputFormControl\" \n [type]=\"inputType\"\n (blur)=\"onBlur()\"\n />\n </div>\n </div>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n declarations: [PhoneInputComponent],\n imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n static forRoot(): ModuleWithProviders<PhoneInputModule> {\n return { ngModule: PhoneInputModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-phone-input.mjs","sources":["../../../projects/mis-components/phone-input/phone-input.component.ts","../../../projects/mis-components/phone-input/phone-input.component.html","../../../projects/mis-components/phone-input/phone-input.module.ts","../../../projects/mis-components/phone-input/mis-crystal-design-system-phone-input.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { FormControl } from \"@angular/forms\";\nimport { DropdownItem } from \"mis-crystal-design-system/dropdown\";\n\n@Component({\n selector: \"mis-phone-input\",\n templateUrl: \"./phone-input.component.html\",\n styleUrls: [\"./phone-input.component.scss\"]\n})\nexport class PhoneInputComponent implements OnInit {\n @Input() dropdownHeight?: string;\n @Input() dropdownWidth?: string;\n @Input() inputHeight?: string;\n @Input() dropdownData: DropdownItem[] = [];\n @Input() dropdownSelectedItem:DropdownItem = { value: \"\", label: \"\" } \n @Input() label: string;\n\n @Input() inputPlaceholder: string = 'Enter';\n @Input() inputFormControl: FormControl = new FormControl();\n\n @Output() onDropdownSelection = new EventEmitter<any>();\n @Input() dropdownListWidth;\n @Input() dropdownListHeight;\n @Input() searchEnabled:boolean=false;\n @Input() inputType: string = \"number\";\n @Input() searchLabel:string = \"Search Keyword\"\n \n constructor() {}\n ngOnInit() {\n }\n\n handleDropdownSelection(item: DropdownItem){\n this.onDropdownSelection.emit(item);\n }\n\n}\n","<div class=\"main-container-phone\">\n <mis-dropdown [height]=\"dropdownHeight\" [dropdownListWidth]=\"dropdownListWidth\"[dropdownListHeight]=\"dropdownListHeight\" [width]=\"dropdownWidth\" [data]=\"dropdownData\" [selectedItem]=\"dropdownSelectedItem\" [label]=\"label\" [searchEnabled]=\"searchEnabled\" [multiLine]=\"false\" (onChange)=\"handleDropdownSelection($event)\" [searchLabel]=\"searchLabel\"></mis-dropdown>\n <div class=\"details-field\">\n <div class=\"input-box\">\n <input\n [ngStyle]=\"{'height': inputHeight }\"\n class=\"black-text\"\n [placeholder]=\"inputPlaceholder\"\n [formControl]=\"inputFormControl\" \n [type]=\"inputType\"\n />\n </div>\n </div>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { FormsModule } from \"@angular/forms\";\nimport { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { PhoneInputComponent } from \"./phone-input.component\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ScrollingModule } from \"@angular/cdk-experimental/scrolling\";\nimport { DropdownModule } from \"mis-crystal-design-system/dropdown\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n\n@NgModule({\n declarations: [PhoneInputComponent],\n imports: [CommonModule,ReactiveFormsModule, FormsModule, OverlayModule, ScrollingModule, DropdownModule],\n exports: [PhoneInputComponent]\n})\nexport class PhoneInputModule {\n static forRoot(): ModuleWithProviders<PhoneInputModule> {\n return { ngModule: PhoneInputModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -31,9 +31,9 @@ class RadioButtonComponent {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
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", formControl: "formControl" }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 5, consts: [["type", "radio", 3, "id", "name", "disabled", "value", "formControl", "change"]], template: function RadioButtonComponent_Template(rf, ctx) { if (rf & 1) {
|
|
34
|
+
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: [["type", "radio", 3, "id", "name", "disabled", "value", "formControl", "change", "keup.enter"]], template: function RadioButtonComponent_Template(rf, ctx) { if (rf & 1) {
|
|
35
35
|
i0.ɵɵelementStart(0, "input", 0);
|
|
36
|
-
i0.ɵɵlistener("change", function RadioButtonComponent_Template_input_change_0_listener($event) { return ctx.onChange($event); });
|
|
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); });
|
|
37
37
|
i0.ɵɵelementEnd();
|
|
38
38
|
} if (rf & 2) {
|
|
39
39
|
i0.ɵɵpropertyInterpolate("id", ctx.id);
|
|
@@ -41,7 +41,7 @@ RadioButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RadioB
|
|
|
41
41
|
} }, 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
42
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RadioButtonComponent, [{
|
|
43
43
|
type: Component,
|
|
44
|
-
args: [{ selector: "mis-radio", template: "<input (change)=\"onChange($event)\" id=\"{{ id }}\" type=\"radio\" [name]=\"name\" [disabled]=\"disabled\" [value]=\"value\" [formControl]=\"formControl\" />\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"] }]
|
|
44
|
+
args: [{ selector: "mis-radio", template: "<input \n (change)=\"onChange($event)\" \n (keup.enter)=\"onChange($event)\"\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
45
|
}], function () { return []; }, { id: [{
|
|
46
46
|
type: Input
|
|
47
47
|
}], name: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-radio-button.mjs","sources":["../../../projects/mis-components/radio-button/radio-button.component.ts","../../../projects/mis-components/radio-button/radio-button.component.html","../../../projects/mis-components/radio-button/radio-button.module.ts","../../../projects/mis-components/radio-button/mis-crystal-design-system-radio-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, UntypedFormControl } from \"@angular/forms\";\n\n@Component({\n selector: \"mis-radio\",\n templateUrl: \"./radio-button.component.html\",\n styleUrls: [\"./radio-button.component.scss\"]\n})\nexport class RadioButtonComponent implements OnInit {\n /** When multiple radio input fields are used\n * an \"id\" can be given to keep track of them */\n @Input() id: string | number = \"\";\n /** Name of the attribute for which the radio\n * selection is provided */\n @Input() name: string | number = \"\";\n /** Value of the attribute which is to be emitted\n * when selected */\n @Input() value: string | number = \"\";\n /** Controls the state of the radio button */\n @Input() disabled: boolean = false;\n\n /** Can be used to attach the radio input field\n * to a reactive form by passing in a\n * “FormControl“ Object. It can also be\n * used to set the default attribute value */\n @Input() formControl: AbstractControl = new UntypedFormControl(null);\n\n /** Emits \"value\" of the radio button on selection */\n @Output() valueChange = new EventEmitter<any>();\n\n constructor() {}\n ngOnInit() {}\n onChange(event) {\n this.valueChange.emit(this.formControl.value);\n }\n}\n","<input (change)=\"onChange($event)\" id=\"{{ id }}\" type=\"radio\" [name]=\"name\" [disabled]=\"disabled\" [value]=\"value\" [formControl]=\"formControl\" />\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { RadioButtonComponent } from \"./radio-button.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n declarations: [RadioButtonComponent],\n imports: [CommonModule, ReactiveFormsModule],\n exports: [RadioButtonComponent]\n})\nexport class RadioButtonModule {\n static forRoot(): ModuleWithProviders<RadioButtonModule> {\n return { ngModule: RadioButtonModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAQa,oBAAoB,CAAA;AAsB/B,IAAA,WAAA,GAAA;AArBA;AACgD;QACvC,IAAE,CAAA,EAAA,GAAoB,EAAE,CAAC;AAClC;AAC2B;QAClB,IAAI,CAAA,IAAA,GAAoB,EAAE,CAAC;AACpC;AACmB;QACV,IAAK,CAAA,KAAA,GAAoB,EAAE,CAAC;;QAE5B,IAAQ,CAAA,QAAA,GAAY,KAAK,CAAC;AAEnC;;;AAG6C;AACpC,QAAA,IAAA,CAAA,WAAW,GAAoB,IAAI,kBAAkB,CAAC,IAAI,CAAC,CAAC;;AAG3D,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAO,CAAC;KAEhC;AAChB,IAAA,QAAQ,MAAK;AACb,IAAA,QAAQ,CAAC,KAAK,EAAA;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KAC/C;;wFA1BU,oBAAoB,GAAA,CAAA,EAAA,CAAA;uEAApB,oBAAoB,EAAA,SAAA,EAAA,CAAA,CAAA,WAAA,CAAA,CAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,CAAA,MAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,CAAA,CAAA,EAAA,QAAA,EAAA,SAAA,6BAAA,CAAA,EAAA,EAAA,GAAA,EAAA,EAAA,IAAA,EAAA,GAAA,CAAA,EAAA;QCRjC,
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-radio-button.mjs","sources":["../../../projects/mis-components/radio-button/radio-button.component.ts","../../../projects/mis-components/radio-button/radio-button.component.html","../../../projects/mis-components/radio-button/radio-button.module.ts","../../../projects/mis-components/radio-button/mis-crystal-design-system-radio-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\nimport { AbstractControl, UntypedFormControl } from \"@angular/forms\";\n\n@Component({\n selector: \"mis-radio\",\n templateUrl: \"./radio-button.component.html\",\n styleUrls: [\"./radio-button.component.scss\"]\n})\nexport class RadioButtonComponent implements OnInit {\n /** When multiple radio input fields are used\n * an \"id\" can be given to keep track of them */\n @Input() id: string | number = \"\";\n /** Name of the attribute for which the radio\n * selection is provided */\n @Input() name: string | number = \"\";\n /** Value of the attribute which is to be emitted\n * when selected */\n @Input() value: string | number = \"\";\n /** Controls the state of the radio button */\n @Input() disabled: boolean = false;\n\n /** Can be used to attach the radio input field\n * to a reactive form by passing in a\n * “FormControl“ Object. It can also be\n * used to set the default attribute value */\n @Input() formControl: AbstractControl = new UntypedFormControl(null);\n\n /** Emits \"value\" of the radio button on selection */\n @Output() valueChange = new EventEmitter<any>();\n\n constructor() {}\n ngOnInit() {}\n onChange(event) {\n this.valueChange.emit(this.formControl.value);\n }\n}\n","<input \n (change)=\"onChange($event)\" \n (keup.enter)=\"onChange($event)\"\n id=\"{{ id }}\" type=\"radio\" \n [name]=\"name\" [disabled]=\"disabled\" \n [value]=\"value\" \n [formControl]=\"formControl\" \n/>\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { RadioButtonComponent } from \"./radio-button.component\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n declarations: [RadioButtonComponent],\n imports: [CommonModule, ReactiveFormsModule],\n exports: [RadioButtonComponent]\n})\nexport class RadioButtonModule {\n static forRoot(): ModuleWithProviders<RadioButtonModule> {\n return { ngModule: RadioButtonModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -835,10 +835,10 @@ TableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableCompone
|
|
|
835
835
|
i0.ɵɵproperty("ngForOf", ctx.tableData);
|
|
836
836
|
i0.ɵɵadvance(1);
|
|
837
837
|
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));
|
|
838
|
-
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, SubTableComponent, TableFilterComponent, 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
|
|
838
|
+
} }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, SubTableComponent, TableFilterComponent, 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}"] });
|
|
839
839
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
|
|
840
840
|
type: Component,
|
|
841
|
-
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 style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">Loading...</div>\n </ng-container>\n <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n <div style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">No Data Available...</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\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 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(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"] }]
|
|
841
|
+
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 style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">Loading...</div>\n </ng-container>\n <ng-container *ngIf=\"!subTableDataLoading && subTableData.length === 0\">\n <div style=\"display: flex; justify-content: center; align-items: center; padding: 16px\">No Data Available...</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\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 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(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"] }]
|
|
842
842
|
}], function () { return [{ type: i0.Renderer2 }]; }, { filtersUpdated: [{
|
|
843
843
|
type: Output
|
|
844
844
|
}], filter: [{
|