mis-crystal-design-system 2.5.0 → 2.5.3
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/action-list/action-list.component.d.ts +0 -1
- package/action-list/index.d.ts +1 -1
- package/action-list/mis-crystal-design-system-action-list.metadata.json +1 -1
- package/action-list/public_api.d.ts +2 -2
- package/async-search-dropdown/async-dropdown.component.d.ts +4 -4
- package/async-search-dropdown/index.d.ts +1 -1
- package/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.metadata.json +1 -1
- package/async-search-dropdown/public_api.d.ts +2 -2
- package/bundles/mis-crystal-design-system-action-list.umd.js +3 -11
- package/bundles/mis-crystal-design-system-action-list.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-action-list.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-action-list.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-async-search-dropdown.umd.js +15 -15
- package/bundles/mis-crystal-design-system-async-search-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-async-search-dropdown.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-async-search-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-button.umd.js +25 -25
- package/bundles/mis-crystal-design-system-button.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-button.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-button.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-checkbox.umd.js +5 -6
- package/bundles/mis-crystal-design-system-checkbox.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-checkbox.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-chip.umd.js +6 -7
- package/bundles/mis-crystal-design-system-chip.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-chip.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-chip.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.js +27 -24
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js +2 -2
- package/bundles/mis-crystal-design-system-datepicker_v2.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.js +27 -50
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-daterangepicker_v2.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-drawer.umd.js +9 -12
- package/bundles/mis-crystal-design-system-drawer.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-drawer.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-dropdown.umd.js +2 -9
- package/bundles/mis-crystal-design-system-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-dropdown.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-fab.umd.js +11 -14
- package/bundles/mis-crystal-design-system-fab.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-fab.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-input.umd.js +7 -7
- package/bundles/mis-crystal-design-system-input.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-input.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-loader.umd.js +3 -4
- package/bundles/mis-crystal-design-system-loader.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-loader.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-loader.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-modal.umd.js +8 -12
- package/bundles/mis-crystal-design-system-modal.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-modal.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js +2 -9
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-multi-select-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js +2 -9
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-nested-multi-select-dropdown.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-radio-button.umd.js +6 -7
- package/bundles/mis-crystal-design-system-radio-button.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-radio-button.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-radio-button.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-switch.umd.js +3 -4
- package/bundles/mis-crystal-design-system-switch.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-switch.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-switch.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-table.umd.js +40 -58
- package/bundles/mis-crystal-design-system-table.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-table.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-table.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-toast.umd.js +28 -33
- package/bundles/mis-crystal-design-system-toast.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-toast.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-toast.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.js +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.js.map +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.min.js +1 -1
- package/bundles/mis-crystal-design-system-tooltip.umd.min.js.map +1 -1
- package/bundles/mis-crystal-design-system.umd.js.map +1 -1
- package/button/button.component.d.ts +4 -4
- package/button/button.directive.d.ts +3 -3
- package/button/button.directive.scss +1 -1
- package/button/button.module.d.ts +1 -1
- package/button/index.d.ts +1 -1
- package/button/mis-crystal-design-system-button.metadata.json +1 -1
- package/button/public_api.d.ts +2 -2
- package/checkbox/checkbox.component.d.ts +3 -3
- package/checkbox/checkbox.module.d.ts +1 -1
- package/checkbox/index.d.ts +1 -1
- package/checkbox/mis-crystal-design-system-checkbox.metadata.json +1 -1
- package/checkbox/public_api.d.ts +2 -2
- package/chip/chip.component.d.ts +2 -2
- package/chip/chip.module.d.ts +1 -1
- package/chip/index.d.ts +1 -1
- package/chip/mis-crystal-design-system-chip.metadata.json +1 -1
- package/chip/public_api.d.ts +2 -2
- package/datepicker_v2/index.d.ts +1 -1
- package/datepicker_v2/mis-crystal-design-system-datepicker_v2.metadata.json +1 -1
- package/datepicker_v2/public_api.d.ts +3 -3
- package/daterangepicker_v2/index.d.ts +1 -1
- package/daterangepicker_v2/mis-crystal-design-system-daterangepicker_v2.metadata.json +1 -1
- package/daterangepicker_v2/public_api.d.ts +3 -3
- package/drawer/index.d.ts +1 -1
- package/drawer/mis-crystal-design-system-drawer.metadata.json +1 -1
- package/drawer/public_api.d.ts +4 -4
- package/dropdown/dropdown.component.d.ts +0 -1
- package/dropdown/dropdown.module.d.ts +1 -1
- package/dropdown/index.d.ts +1 -1
- package/dropdown/mis-crystal-design-system-dropdown.metadata.json +1 -1
- package/dropdown/public_api.d.ts +2 -2
- package/esm2015/action-list/action-list.component.js +4 -12
- package/esm2015/action-list/action-list.module.js +3 -2
- package/esm2015/action-list/index.js +2 -2
- package/esm2015/action-list/public_api.js +3 -3
- package/esm2015/async-search-dropdown/async-dropdown.component.js +25 -25
- package/esm2015/async-search-dropdown/async-dropdown.module.js +7 -7
- package/esm2015/async-search-dropdown/index.js +2 -2
- package/esm2015/async-search-dropdown/public_api.js +3 -3
- package/esm2015/button/button.component.js +10 -10
- package/esm2015/button/button.directive.js +19 -19
- package/esm2015/button/button.module.js +5 -5
- package/esm2015/button/index.js +2 -2
- package/esm2015/button/public_api.js +3 -3
- package/esm2015/checkbox/checkbox.component.js +8 -9
- package/esm2015/checkbox/checkbox.module.js +5 -5
- package/esm2015/checkbox/index.js +2 -2
- package/esm2015/checkbox/public_api.js +3 -3
- package/esm2015/chip/chip.component.js +8 -9
- package/esm2015/chip/chip.module.js +4 -4
- package/esm2015/chip/index.js +2 -2
- package/esm2015/chip/public_api.js +3 -3
- package/esm2015/datepicker_v2/datepicker-constants.js +2 -2
- package/esm2015/datepicker_v2/datepicker.module.js +5 -4
- package/esm2015/datepicker_v2/index.js +2 -2
- package/esm2015/datepicker_v2/models/dp-config.model.js +1 -1
- package/esm2015/datepicker_v2/public_api.js +3 -3
- package/esm2015/datepicker_v2/tz-datepicker.directive.js +1 -1
- package/esm2015/datepicker_v2/tz-dp-container/tz-dp-container.component.js +12 -9
- package/esm2015/datepicker_v2/utils/index.js +13 -13
- package/esm2015/daterangepicker_v2/daterangepicker-constants.js +2 -2
- package/esm2015/daterangepicker_v2/daterangepicker.module.js +4 -3
- package/esm2015/daterangepicker_v2/index.js +2 -2
- package/esm2015/daterangepicker_v2/public_api.js +3 -3
- package/esm2015/daterangepicker_v2/tz-daterangepicker.directive.js +1 -1
- package/esm2015/daterangepicker_v2/tz-drp-container/tz-drp-container.component.js +15 -38
- package/esm2015/daterangepicker_v2/utils/index.js +13 -13
- package/esm2015/drawer/drawer-body/drawer-body.component.js +4 -7
- package/esm2015/drawer/drawer.module.js +4 -4
- package/esm2015/drawer/drawer.service.js +4 -4
- package/esm2015/drawer/index.js +2 -2
- package/esm2015/drawer/public_api.js +5 -5
- package/esm2015/dropdown/dropdown.component.js +3 -10
- package/esm2015/dropdown/dropdown.module.js +7 -6
- package/esm2015/dropdown/index.js +2 -2
- package/esm2015/dropdown/public_api.js +3 -3
- package/esm2015/fab/fab.component.js +11 -14
- package/esm2015/fab/fab.module.js +3 -3
- package/esm2015/fab/index.js +2 -2
- package/esm2015/fab/public_api.js +3 -3
- package/esm2015/index.js +2 -2
- package/esm2015/input/directives/input/input.directive.js +7 -7
- package/esm2015/input/index.js +2 -2
- package/esm2015/input/mis-input.component.js +8 -8
- package/esm2015/input/mis-input.module.js +7 -7
- package/esm2015/input/public_api.js +4 -4
- package/esm2015/loader/index.js +2 -2
- package/esm2015/loader/loader.component.js +5 -6
- package/esm2015/loader/loader.module.js +4 -4
- package/esm2015/loader/public_api.js +3 -3
- package/esm2015/menu/index.js +2 -2
- package/esm2015/modal/index.js +2 -2
- package/esm2015/modal/modal.module.js +10 -14
- package/esm2015/modal/modal.service.js +3 -3
- package/esm2015/modal/module-wrapper/module-wrapper.component.js +4 -4
- package/esm2015/modal/public_api.js +5 -5
- package/esm2015/multi-select-dropdown/index.js +2 -2
- package/esm2015/multi-select-dropdown/multi-select-dropdown.component.js +3 -10
- package/esm2015/multi-select-dropdown/multi-select-dropdown.module.js +9 -8
- package/esm2015/multi-select-dropdown/public_api.js +3 -3
- package/esm2015/nested-multi-select-dropdown/index.js +2 -2
- package/esm2015/nested-multi-select-dropdown/nested-multi-select-dropdown.component.js +3 -10
- package/esm2015/nested-multi-select-dropdown/nested-multi-select-dropdown.module.js +9 -8
- package/esm2015/nested-multi-select-dropdown/public_api.js +3 -3
- package/esm2015/public-api.js +1 -1
- package/esm2015/radio-button/index.js +2 -2
- package/esm2015/radio-button/public_api.js +3 -3
- package/esm2015/radio-button/radio-button.component.js +9 -10
- package/esm2015/radio-button/radio-button.module.js +5 -5
- package/esm2015/switch/index.js +2 -2
- package/esm2015/switch/public_api.js +3 -3
- package/esm2015/switch/switch.component.js +6 -7
- package/esm2015/switch/switch.module.js +5 -5
- package/esm2015/table/custom-table-cell.directive.js +3 -3
- package/esm2015/table/filter/filter.component.js +11 -13
- package/esm2015/table/index.js +2 -2
- package/esm2015/table/public_api.js +5 -5
- package/esm2015/table/sub-table/sub-table.component.js +12 -13
- package/esm2015/table/table.component.js +21 -22
- package/esm2015/table/table.module.js +7 -21
- package/esm2015/toast/index.js +2 -2
- package/esm2015/toast/toast.component.js +12 -14
- package/esm2015/toast/toast.data.service.js +3 -3
- package/esm2015/toast/toast.module.js +9 -9
- package/esm2015/toast/toast.service.js +23 -26
- package/esm2015/tooltip/tooltip.directive.js +1 -1
- package/esm2015/tooltip/tooltip.module.js +3 -2
- package/fab/index.d.ts +1 -1
- package/fab/mis-crystal-design-system-fab.metadata.json +1 -1
- package/fab/public_api.d.ts +2 -2
- package/fesm2015/mis-crystal-design-system-action-list.js +5 -13
- package/fesm2015/mis-crystal-design-system-action-list.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.js +20 -20
- package/fesm2015/mis-crystal-design-system-async-search-dropdown.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-button.js +25 -25
- package/fesm2015/mis-crystal-design-system-button.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-checkbox.js +5 -6
- package/fesm2015/mis-crystal-design-system-checkbox.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-chip.js +6 -7
- package/fesm2015/mis-crystal-design-system-chip.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-datepicker_v2.js +26 -23
- package/fesm2015/mis-crystal-design-system-datepicker_v2.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.js +30 -53
- package/fesm2015/mis-crystal-design-system-daterangepicker_v2.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-drawer.js +9 -12
- package/fesm2015/mis-crystal-design-system-drawer.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-dropdown.js +4 -11
- package/fesm2015/mis-crystal-design-system-dropdown.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-fab.js +11 -14
- package/fesm2015/mis-crystal-design-system-fab.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-input.js +8 -8
- package/fesm2015/mis-crystal-design-system-input.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-loader.js +3 -4
- package/fesm2015/mis-crystal-design-system-loader.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-modal.js +8 -12
- package/fesm2015/mis-crystal-design-system-modal.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js +4 -11
- package/fesm2015/mis-crystal-design-system-multi-select-dropdown.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js +4 -11
- package/fesm2015/mis-crystal-design-system-nested-multi-select-dropdown.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-radio-button.js +6 -7
- package/fesm2015/mis-crystal-design-system-radio-button.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-switch.js +3 -4
- package/fesm2015/mis-crystal-design-system-switch.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-table.js +42 -60
- package/fesm2015/mis-crystal-design-system-table.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-toast.js +28 -33
- package/fesm2015/mis-crystal-design-system-toast.js.map +1 -1
- package/fesm2015/mis-crystal-design-system-tooltip.js +2 -2
- package/fesm2015/mis-crystal-design-system-tooltip.js.map +1 -1
- package/fesm2015/mis-crystal-design-system.js.map +1 -1
- package/index.d.ts +1 -1
- package/input/directives/input/input.directive.d.ts +3 -3
- package/input/index.d.ts +1 -1
- package/input/mis-crystal-design-system-input.metadata.json +1 -1
- package/input/mis-input.component.d.ts +4 -4
- package/input/public_api.d.ts +3 -3
- package/loader/index.d.ts +1 -1
- package/loader/loader.component.d.ts +1 -1
- package/loader/loader.module.d.ts +1 -1
- package/loader/mis-crystal-design-system-loader.metadata.json +1 -1
- package/loader/public_api.d.ts +2 -2
- package/menu/index.d.ts +1 -1
- package/modal/index.d.ts +1 -1
- package/modal/mis-crystal-design-system-modal.metadata.json +1 -1
- package/modal/modal.module.d.ts +1 -1
- package/modal/public_api.d.ts +4 -4
- package/multi-select-dropdown/index.d.ts +1 -1
- package/multi-select-dropdown/mis-crystal-design-system-multi-select-dropdown.metadata.json +1 -1
- package/multi-select-dropdown/multi-select-dropdown.component.d.ts +0 -1
- package/multi-select-dropdown/multi-select-dropdown.module.d.ts +1 -1
- package/multi-select-dropdown/public_api.d.ts +2 -2
- package/nested-multi-select-dropdown/index.d.ts +1 -1
- package/nested-multi-select-dropdown/mis-crystal-design-system-nested-multi-select-dropdown.metadata.json +1 -1
- package/nested-multi-select-dropdown/nested-multi-select-dropdown.component.d.ts +0 -1
- package/nested-multi-select-dropdown/nested-multi-select-dropdown.module.d.ts +1 -1
- package/nested-multi-select-dropdown/public_api.d.ts +2 -2
- package/package.json +1 -1
- package/radio-button/index.d.ts +1 -1
- package/radio-button/mis-crystal-design-system-radio-button.metadata.json +1 -1
- package/radio-button/public_api.d.ts +2 -2
- package/radio-button/radio-button.component.d.ts +2 -2
- package/radio-button/radio-button.module.d.ts +1 -1
- package/switch/index.d.ts +1 -1
- package/switch/mis-crystal-design-system-switch.metadata.json +1 -1
- package/switch/public_api.d.ts +2 -2
- package/switch/switch.component.d.ts +2 -2
- package/switch/switch.module.d.ts +1 -1
- package/table/custom-table-cell.directive.d.ts +1 -1
- package/table/filter/filter.component.d.ts +1 -1
- package/table/index.d.ts +1 -1
- package/table/mis-crystal-design-system-table.metadata.json +1 -1
- package/table/public_api.d.ts +7 -7
- package/table/sub-table/sub-table.component.d.ts +6 -6
- package/table/table.component.d.ts +6 -6
- package/toast/index.d.ts +1 -1
- package/toast/mis-crystal-design-system-toast.metadata.json +1 -1
- package/toast/toast.component.d.ts +1 -1
- package/toast/toast.module.d.ts +1 -1
- package/toast/toast.service.d.ts +3 -3
- package/tooltip/mis-crystal-design-system-tooltip.metadata.json +1 -1
|
@@ -9,7 +9,7 @@ class AsyncDropdownComponent {
|
|
|
9
9
|
constructor(overlay, viewContainerRef) {
|
|
10
10
|
this.overlay = overlay;
|
|
11
11
|
this.viewContainerRef = viewContainerRef;
|
|
12
|
-
this.placeholder =
|
|
12
|
+
this.placeholder = "Select"; // placeholder for input
|
|
13
13
|
this.debounceTime = 400; // wait time till which API call is paused
|
|
14
14
|
this.minInputLength = 2; // min length after which API call is made
|
|
15
15
|
this.multi = false; // maintain a list or emit value
|
|
@@ -21,7 +21,7 @@ class AsyncDropdownComponent {
|
|
|
21
21
|
// tslint:disable-next-line
|
|
22
22
|
this.selections = new Map();
|
|
23
23
|
this.handleControlChanges = (values) => {
|
|
24
|
-
values.forEach(
|
|
24
|
+
values.forEach(el => {
|
|
25
25
|
this.selectData(el, true);
|
|
26
26
|
});
|
|
27
27
|
// tslint:disable-next-line
|
|
@@ -30,15 +30,15 @@ class AsyncDropdownComponent {
|
|
|
30
30
|
ngOnInit() {
|
|
31
31
|
var _a, _b;
|
|
32
32
|
if (this.multi && !this.uniqueKey) {
|
|
33
|
-
throw new Error(
|
|
33
|
+
throw new Error("[uniqueKey] required in multi mode.");
|
|
34
34
|
}
|
|
35
35
|
if (this.disabled) {
|
|
36
36
|
this.searchInput.disable();
|
|
37
37
|
}
|
|
38
38
|
this.searchSubscription = this.searchInput.valueChanges
|
|
39
|
-
.pipe(filter(
|
|
40
|
-
.subscribe(
|
|
41
|
-
this.httpStream(res).subscribe(
|
|
39
|
+
.pipe(filter(val => val && val.length >= this.minInputLength), debounceTime(this.debounceTime), distinctUntilChanged())
|
|
40
|
+
.subscribe(res => {
|
|
41
|
+
this.httpStream(res).subscribe(list => {
|
|
42
42
|
var _a;
|
|
43
43
|
this.data = list;
|
|
44
44
|
if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && list.length > 0) {
|
|
@@ -68,20 +68,20 @@ class AsyncDropdownComponent {
|
|
|
68
68
|
.position()
|
|
69
69
|
.flexibleConnectedTo(origin)
|
|
70
70
|
.withPositions([
|
|
71
|
-
new ConnectionPositionPair({ originX:
|
|
72
|
-
new ConnectionPositionPair({ originX:
|
|
71
|
+
new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }),
|
|
72
|
+
new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" })
|
|
73
73
|
])
|
|
74
74
|
.withPush(true);
|
|
75
75
|
const configs = new OverlayConfig({
|
|
76
76
|
hasBackdrop: true,
|
|
77
|
-
backdropClass:
|
|
77
|
+
backdropClass: "cdk-overlay-transparent-backdrop",
|
|
78
78
|
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
79
79
|
positionStrategy,
|
|
80
|
-
width: origin.clientWidth
|
|
80
|
+
width: origin.clientWidth
|
|
81
81
|
});
|
|
82
82
|
this.overlayRef = this.overlay.create(configs);
|
|
83
83
|
this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
|
|
84
|
-
this.overlayRef.backdropClick().subscribe(
|
|
84
|
+
this.overlayRef.backdropClick().subscribe(res => {
|
|
85
85
|
this.closeDropdown();
|
|
86
86
|
});
|
|
87
87
|
}
|
|
@@ -119,7 +119,7 @@ class AsyncDropdownComponent {
|
|
|
119
119
|
this.input.nativeElement.scrollIntoView();
|
|
120
120
|
}, 10);
|
|
121
121
|
}
|
|
122
|
-
this.searchInput.patchValue(
|
|
122
|
+
this.searchInput.patchValue("");
|
|
123
123
|
this.data = [];
|
|
124
124
|
}
|
|
125
125
|
this.closeDropdown();
|
|
@@ -132,7 +132,7 @@ class AsyncDropdownComponent {
|
|
|
132
132
|
this.selections.delete(item[this.uniqueKey]);
|
|
133
133
|
this.setControlValue(this.selectedItems);
|
|
134
134
|
// tslint:disable-next-line
|
|
135
|
-
this.input[
|
|
135
|
+
this.input["nativeElement"].focus();
|
|
136
136
|
}
|
|
137
137
|
setControlValue(value) {
|
|
138
138
|
var _a;
|
|
@@ -148,8 +148,8 @@ class AsyncDropdownComponent {
|
|
|
148
148
|
}
|
|
149
149
|
AsyncDropdownComponent.decorators = [
|
|
150
150
|
{ type: Component, args: [{
|
|
151
|
-
selector:
|
|
152
|
-
template: "<div
|
|
151
|
+
selector: "mis-async-search-dropdown",
|
|
152
|
+
template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" #ddBtn>\n <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n <span *ngFor=\"let item of selectedItems\" (click)=\"removeItem(item)\">{{ item[displayKey] }} <span class=\"ic-navigation-cancel-24\"></span> </span>\n </div>\n <div class=\"search-input\">\n <span class=\"ic-action-search-24\"></span>\n <input tabindex=\"0\" type=\"text\" class=\"black-text\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" />\n </div>\n</div>\n\n<ng-template #dd>\n <div class=\"dd-list\" *ngIf=\"data.length\">\n <ng-container *ngFor=\"let item of data\">\n <div (click)=\"selectData(item, false)\">\n <ng-container\n *ngIf=\"customItem; else standardItem\"\n [ngTemplateOutlet]=\"customItem\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n ></ng-container>\n <ng-template #standardItem>\n <div class=\"item\">\n <div class=\"value\">\n <div class=\"primary\">\n {{ item[displayKey] }}\n </div>\n <div class=\"secondary\">\n {{ item[secondaryDisplayKey] }}\n </div>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </div>\n</ng-template>\n",
|
|
153
153
|
styles: [".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;width:24;line-height:24px;height:24px;left:10px}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}"]
|
|
154
154
|
},] }
|
|
155
155
|
];
|
|
@@ -169,10 +169,10 @@ AsyncDropdownComponent.propDecorators = {
|
|
|
169
169
|
control: [{ type: Input }],
|
|
170
170
|
disabled: [{ type: Input }],
|
|
171
171
|
readonly: [{ type: Input }],
|
|
172
|
-
origin: [{ type: ViewChild, args: [
|
|
173
|
-
input: [{ type: ViewChild, args: [
|
|
174
|
-
dd: [{ type: ViewChild, args: [
|
|
175
|
-
customItem: [{ type: ContentChild, args: [
|
|
172
|
+
origin: [{ type: ViewChild, args: ["ddBtn", { static: false },] }],
|
|
173
|
+
input: [{ type: ViewChild, args: ["input", { static: false },] }],
|
|
174
|
+
dd: [{ type: ViewChild, args: ["dd", { static: false },] }],
|
|
175
|
+
customItem: [{ type: ContentChild, args: ["misCustomItem", { static: false },] }],
|
|
176
176
|
onSelect: [{ type: Output }]
|
|
177
177
|
};
|
|
178
178
|
|
|
@@ -182,7 +182,7 @@ AsyncDropdownModule.decorators = [
|
|
|
182
182
|
{ type: NgModule, args: [{
|
|
183
183
|
declarations: [AsyncDropdownComponent],
|
|
184
184
|
imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],
|
|
185
|
-
exports: [AsyncDropdownComponent]
|
|
185
|
+
exports: [AsyncDropdownComponent]
|
|
186
186
|
},] }
|
|
187
187
|
];
|
|
188
188
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-async-search-dropdown.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import {\n ConnectionPositionPair,\n Overlay,\n OverlayConfig,\n OverlayRef,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { AbstractControl, FormControl } from '@angular/forms';\nimport { Observable, Subscription } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: 'mis-async-search-dropdown',\n templateUrl: './async-dropdown.component.html',\n styleUrls: ['./async-dropdown.component.scss'],\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(\n private overlay: Overlay,\n private viewContainerRef: ViewContainerRef\n ) {}\n\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = 'Select'; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl | null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild('ddBtn', { static: false }) origin: ElementRef;\n @ViewChild('input', { static: false }) input: ElementRef;\n @ViewChild('dd', { static: false }) dd: TemplateRef<Element>;\n @ContentChild('misCustomItem', { static: false })\n customItem: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData | IListData[]> = new EventEmitter(\n true\n ); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription | undefined;\n\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error('[uniqueKey] required in multi mode.');\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n filter((val) => val && val.length >= this.minInputLength),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe((res) => {\n this.httpStream(res).subscribe((list) => {\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n });\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(\n this.handleControlChanges\n );\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach((el) => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(\n template: TemplateRef<Element>,\n origin: HTMLElement\n ): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair(\n { originX: 'start', originY: 'bottom' },\n { overlayX: 'start', overlayY: 'top' }\n ),\n new ConnectionPositionPair(\n { originX: 'start', originY: 'top' },\n { overlayX: 'start', overlayY: 'bottom' }\n ),\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth,\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe((res) => {\n this.closeDropdown();\n });\n }\n\n /**\n * closes the dropdown\n */\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /**\n *\n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n */\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue('');\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /**\n *\n * @param item remove item from selected list\n */\n removeItem(item: IListData): void {\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input['nativeElement'].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /**\n * @returns list of selected items\n */\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { AsyncDropdownComponent } from './async-dropdown.component';\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n exports: [AsyncDropdownComponent],\n})\nexport class AsyncDropdownModule {}\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-async-search-dropdown.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: \"mis-async-search-dropdown\",\n templateUrl: \"./async-dropdown.component.html\",\n styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = \"Select\"; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl | null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n @ViewChild(\"input\", { static: false }) input: ElementRef;\n @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n @ContentChild(\"misCustomItem\", { static: false })\n customItem: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData | IListData[]> = new EventEmitter(true); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription | undefined;\n\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error(\"[uniqueKey] required in multi mode.\");\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n filter(val => val && val.length >= this.minInputLength),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe(res => {\n this.httpStream(res).subscribe(list => {\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n });\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach(el => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.closeDropdown();\n });\n }\n\n /**\n * closes the dropdown\n */\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /**\n *\n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n */\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue(\"\");\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /**\n *\n * @param item remove item from selected list\n */\n removeItem(item: IListData): void {\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input[\"nativeElement\"].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /**\n * @returns list of selected items\n */\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common';
|
|
|
3
3
|
|
|
4
4
|
class ButtonComponent {
|
|
5
5
|
constructor() {
|
|
6
|
-
this.name =
|
|
7
|
-
this.type =
|
|
8
|
-
this.size =
|
|
9
|
-
this.width =
|
|
6
|
+
this.name = "Enabled";
|
|
7
|
+
this.type = "Solid";
|
|
8
|
+
this.size = "Medium";
|
|
9
|
+
this.width = "";
|
|
10
10
|
this.showIcon = false;
|
|
11
|
-
this.iconUrl =
|
|
12
|
-
this.iconPosition =
|
|
11
|
+
this.iconUrl = "";
|
|
12
|
+
this.iconPosition = "Left";
|
|
13
13
|
this.disabled = false;
|
|
14
14
|
this.disableLeftBorderRadius = false;
|
|
15
15
|
this.disableRightBorderRadius = false;
|
|
@@ -23,8 +23,8 @@ class ButtonComponent {
|
|
|
23
23
|
}
|
|
24
24
|
ButtonComponent.decorators = [
|
|
25
25
|
{ type: Component, args: [{
|
|
26
|
-
selector:
|
|
27
|
-
template: "<button\n (click)=\"onClick($event)
|
|
26
|
+
selector: "mis-button",
|
|
27
|
+
template: "<button\n (click)=\"onClick($event)\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n solid: type === 'Solid',\n outline: type === 'Outline',\n text: type === 'Text',\n large: size === 'Large',\n medium: size === 'Medium',\n small: size === 'Small',\n 'large-mobile': size === 'Large-M',\n 'small-mobile': size === 'Small-M'\n }\"\n [ngStyle]=\"{\n 'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n 'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n 'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n 'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n width: width\n }\"\n>\n <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n <img [src]=\"iconUrl\" alt=\"\" />\n </span>\n {{ name }}\n <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n <img [src]=\"iconUrl\" alt=\"\" />\n </span>\n</button>\n",
|
|
28
28
|
styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]
|
|
29
29
|
},] }
|
|
30
30
|
];
|
|
@@ -47,46 +47,46 @@ class ButtonDirective {
|
|
|
47
47
|
constructor(el, renderer) {
|
|
48
48
|
this.el = el;
|
|
49
49
|
this.renderer = renderer;
|
|
50
|
-
this.type =
|
|
51
|
-
this.size =
|
|
52
|
-
this.elementClass =
|
|
50
|
+
this.type = "none";
|
|
51
|
+
this.size = "md";
|
|
52
|
+
this.elementClass = "mis-btn";
|
|
53
53
|
}
|
|
54
54
|
ngAfterViewInit() {
|
|
55
55
|
this.bindTypeClass();
|
|
56
56
|
this.bindSizeClass();
|
|
57
57
|
}
|
|
58
58
|
bindTypeClass() {
|
|
59
|
-
let className =
|
|
59
|
+
let className = "";
|
|
60
60
|
switch (this.type) {
|
|
61
|
-
case
|
|
62
|
-
className =
|
|
61
|
+
case "primary":
|
|
62
|
+
className = "mis-primary";
|
|
63
63
|
break;
|
|
64
|
-
case
|
|
65
|
-
className =
|
|
64
|
+
case "outline":
|
|
65
|
+
className = "mis-outline";
|
|
66
66
|
break;
|
|
67
67
|
default:
|
|
68
|
-
className =
|
|
68
|
+
className = "mis-none";
|
|
69
69
|
}
|
|
70
70
|
this.renderer.addClass(this.el.nativeElement, className);
|
|
71
71
|
}
|
|
72
72
|
bindSizeClass() {
|
|
73
|
-
let className =
|
|
73
|
+
let className = "";
|
|
74
74
|
switch (this.size) {
|
|
75
|
-
case
|
|
76
|
-
className =
|
|
75
|
+
case "lg":
|
|
76
|
+
className = "mis-btn-lg";
|
|
77
77
|
break;
|
|
78
|
-
case
|
|
79
|
-
className =
|
|
78
|
+
case "sm":
|
|
79
|
+
className = "mis-btn-sm";
|
|
80
80
|
break;
|
|
81
81
|
default:
|
|
82
|
-
className =
|
|
82
|
+
className = "mis-btn-md";
|
|
83
83
|
}
|
|
84
84
|
this.renderer.addClass(this.el.nativeElement, className);
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
ButtonDirective.decorators = [
|
|
88
88
|
{ type: Directive, args: [{
|
|
89
|
-
selector:
|
|
89
|
+
selector: "[mis-button]"
|
|
90
90
|
},] }
|
|
91
91
|
];
|
|
92
92
|
ButtonDirective.ctorParameters = () => [
|
|
@@ -96,7 +96,7 @@ ButtonDirective.ctorParameters = () => [
|
|
|
96
96
|
ButtonDirective.propDecorators = {
|
|
97
97
|
type: [{ type: Input }],
|
|
98
98
|
size: [{ type: Input }],
|
|
99
|
-
elementClass: [{ type: HostBinding, args: [
|
|
99
|
+
elementClass: [{ type: HostBinding, args: ["class",] }]
|
|
100
100
|
};
|
|
101
101
|
|
|
102
102
|
class ButtonModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-button.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef} from
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-button.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-button\",\n templateUrl: \"./button.component.html\",\n styleUrls: [\"./button.component.scss\"]\n})\nexport class ButtonComponent implements OnInit {\n @Input() name: string = \"Enabled\";\n @Input() type: \"Solid\" | \"Outline\" | \"Text\" = \"Solid\";\n @Input() size: \"Small\" | \"Medium\" | \"Large\" | \"Small-M\" | \"Large-M\" = \"Medium\";\n @Input() width: string = \"\";\n\n @Input() showIcon: boolean = false;\n @Input() iconUrl: string = \"\";\n @Input() iconPosition: \"Left\" | \"Right\" = \"Left\";\n\n @Input() disabled: boolean = false;\n @Input() disableLeftBorderRadius: boolean = false;\n @Input() disableRightBorderRadius: boolean = false;\n\n /** Emits event when button is clicked */\n @Output() click = new EventEmitter<any>();\n\n constructor() {}\n\n ngOnInit() {}\n\n onClick(event) {\n this.click.emit(event);\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostBinding, Input, Renderer2 } from \"@angular/core\";\n\n@Directive({\n selector: \"[mis-button]\"\n})\nexport class ButtonDirective implements AfterViewInit {\n @Input() type: \"primary\" | \"outline\" | \"none\" = \"none\";\n @Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n @HostBinding(\"class\") elementClass = \"mis-btn\";\n\n constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n ngAfterViewInit(): void {\n this.bindTypeClass();\n this.bindSizeClass();\n }\n\n private bindTypeClass(): void {\n let className = \"\";\n switch (this.type) {\n case \"primary\":\n className = \"mis-primary\";\n break;\n case \"outline\":\n className = \"mis-outline\";\n break;\n default:\n className = \"mis-none\";\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n\n private bindSizeClass(): void {\n let className = \"\";\n switch (this.size) {\n case \"lg\":\n className = \"mis-btn-lg\";\n break;\n case \"sm\":\n className = \"mis-btn-sm\";\n break;\n default:\n className = \"mis-btn-md\";\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ButtonDirective } from \"./button.directive\";\nimport { ButtonComponent } from \"./button.component\";\n\n@NgModule({\n declarations: [ButtonComponent, ButtonDirective],\n imports: [CommonModule],\n exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n static forRoot(): ModuleWithProviders<ButtonModule> {\n return { ngModule: ButtonModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n\nexport {ButtonDirective as ɵa} from './button.directive';"],"names":[],"mappings":";;;MAOa,eAAe;IAiB1B;QAhBS,SAAI,GAAW,SAAS,CAAC;QACzB,SAAI,GAAiC,OAAO,CAAC;QAC7C,SAAI,GAAyD,QAAQ,CAAC;QACtE,UAAK,GAAW,EAAE,CAAC;QAEnB,aAAQ,GAAY,KAAK,CAAC;QAC1B,YAAO,GAAW,EAAE,CAAC;QACrB,iBAAY,GAAqB,MAAM,CAAC;QAExC,aAAQ,GAAY,KAAK,CAAC;QAC1B,4BAAuB,GAAY,KAAK,CAAC;QACzC,6BAAwB,GAAY,KAAK,CAAC;;QAGzC,UAAK,GAAG,IAAI,YAAY,EAAO,CAAC;KAE1B;IAEhB,QAAQ,MAAK;IAEb,OAAO,CAAC,KAAK;QACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxB;;;YA5BF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,88BAAsC;;aAEvC;;;;mBAEE,KAAK;mBACL,KAAK;mBACL,KAAK;oBACL,KAAK;uBAEL,KAAK;sBACL,KAAK;2BACL,KAAK;uBAEL,KAAK;sCACL,KAAK;uCACL,KAAK;oBAGL,MAAM;;;MCjBI,eAAe;IAK1B,YAAoB,EAAc,EAAU,QAAmB;QAA3C,OAAE,GAAF,EAAE,CAAY;QAAU,aAAQ,GAAR,QAAQ,CAAW;QAJtD,SAAI,GAAmC,MAAM,CAAC;QAC9C,SAAI,GAAuB,IAAI,CAAC;QACnB,iBAAY,GAAG,SAAS,CAAC;KAEoB;IAEnE,eAAe;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,SAAS;gBACZ,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;YACR,KAAK,SAAS;gBACZ,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;YACR;gBACE,SAAS,GAAG,UAAU,CAAC;SAC1B;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;KAC1D;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR,KAAK,IAAI;gBACP,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR;gBACE,SAAS,GAAG,YAAY,CAAC;SAC5B;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;KAC1D;;;YA3CF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;aACzB;;;YAJkC,UAAU;YAAsB,SAAS;;;mBAMzE,KAAK;mBACL,KAAK;2BACL,WAAW,SAAC,OAAO;;;MCET,YAAY;IACvB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;gBAChD,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;aAC5C;;;ACTD;;;;;;"}
|
|
@@ -6,12 +6,12 @@ class CheckboxComponent {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.isError = false;
|
|
8
8
|
this.isIndeterminate = false;
|
|
9
|
-
this.name =
|
|
9
|
+
this.name = "";
|
|
10
10
|
this.formControl = new FormControl();
|
|
11
11
|
this.valueChange = new EventEmitter();
|
|
12
12
|
}
|
|
13
13
|
set type(value) {
|
|
14
|
-
this.isError = value ===
|
|
14
|
+
this.isError = value === "Error";
|
|
15
15
|
}
|
|
16
16
|
set indeterminate(value) {
|
|
17
17
|
if (value) {
|
|
@@ -42,8 +42,7 @@ class CheckboxComponent {
|
|
|
42
42
|
else
|
|
43
43
|
this.formControl.enable();
|
|
44
44
|
}
|
|
45
|
-
ngOnInit() {
|
|
46
|
-
}
|
|
45
|
+
ngOnInit() { }
|
|
47
46
|
toggleState() {
|
|
48
47
|
if (this.isIndeterminate) {
|
|
49
48
|
this.isIndeterminate = false;
|
|
@@ -63,14 +62,14 @@ class CheckboxComponent {
|
|
|
63
62
|
}
|
|
64
63
|
CheckboxComponent.decorators = [
|
|
65
64
|
{ type: Component, args: [{
|
|
66
|
-
selector:
|
|
65
|
+
selector: "mis-checkbox",
|
|
67
66
|
template: "<div\n class=\"checkbox-container\"\n [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n (click)=\"!formControl.disabled && toggleState()\"\n>\n <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n <span\n class=\"checkmark\"\n tabindex=\"0\"\n *ngIf=\"!isIndeterminate\"\n [ngClass]=\"{\n 'disabled-checkbox': formControl.disabled,\n error: isError && !formControl.disabled\n }\"\n ></span>\n <span\n class=\"checkmark indeterminate\"\n tabindex=\"0\"\n *ngIf=\"isIndeterminate\"\n [ngClass]=\"{\n 'disabled-checkbox': formControl.disabled,\n error: isError && !formControl.disabled\n }\"\n ></span>\n</div>\n",
|
|
68
67
|
styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{opacity:0;cursor:pointer}.checkbox-container input,.checkmark{position:absolute;height:20px;width:20px}.checkmark{display:flex;justify-content:center;align-items:center;top:0;left:0;border-radius:4px;background-color:#fff;border:2px solid #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus,.checkmark:focus-within{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus,.error:focus-within{box-shadow:none!important;outline:none}"]
|
|
69
68
|
},] }
|
|
70
69
|
];
|
|
71
70
|
CheckboxComponent.ctorParameters = () => [];
|
|
72
71
|
CheckboxComponent.propDecorators = {
|
|
73
|
-
inputBox: [{ type: ViewChild, args: [
|
|
72
|
+
inputBox: [{ type: ViewChild, args: ["input",] }],
|
|
74
73
|
type: [{ type: Input }],
|
|
75
74
|
indeterminate: [{ type: Input }],
|
|
76
75
|
checked: [{ type: Input }],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-checkbox.js","sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts","../../../projects/mis-components/checkbox/mis-crystal-design-system-checkbox.ts"],"sourcesContent":["import {Component, OnInit, EventEmitter, Input, Output, ViewChild, ElementRef, Renderer2} from
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-checkbox.js","sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts","../../../projects/mis-components/checkbox/mis-crystal-design-system-checkbox.ts"],"sourcesContent":["import { Component, OnInit, EventEmitter, Input, Output, ViewChild, ElementRef, Renderer2 } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n selector: \"mis-checkbox\",\n templateUrl: \"./checkbox.component.html\",\n styleUrls: [\"./checkbox.component.scss\"]\n})\nexport class CheckboxComponent implements OnInit {\n public isError: boolean = false;\n public isIndeterminate: boolean = false;\n\n @ViewChild(\"input\") inputBox: ElementRef;\n @Input() set type(value: \"Default\" | \"Error\") {\n this.isError = value === \"Error\";\n }\n @Input() set indeterminate(value: boolean) {\n if (value) {\n this.formControl.setValue(true);\n this.valueChange.emit({\n name: this.name,\n value: true\n });\n } else {\n this.formControl.setValue(false);\n this.valueChange.emit({\n name: this.name,\n value: false\n });\n }\n this.isIndeterminate = value;\n }\n @Input() set checked(value: boolean) {\n if (value) this.formControl.setValue(true);\n else this.formControl.setValue(false);\n }\n @Input() set disabled(value: boolean) {\n if (value) this.formControl.disable();\n else this.formControl.enable();\n }\n @Input() name: string = \"\";\n @Input() formControl: AbstractControl = new FormControl();\n @Output() valueChange = new EventEmitter<{ name: string; value: boolean }>();\n\n constructor() {}\n ngOnInit() {}\n\n toggleState() {\n if (this.isIndeterminate) {\n this.isIndeterminate = false;\n this.formControl.setValue(true);\n } else {\n if (this.formControl.value) this.formControl.setValue(false);\n else this.formControl.setValue(true);\n }\n this.valueChange.emit({\n name: this.name,\n value: this.formControl.value\n });\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { CheckboxComponent } from \"./checkbox.component\";\n\n@NgModule({\n declarations: [CheckboxComponent],\n imports: [CommonModule, ReactiveFormsModule],\n exports: [CheckboxComponent]\n})\nexport class CheckboxModule {\n static forRoot(): ModuleWithProviders<CheckboxModule> {\n return { ngModule: CheckboxModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,iBAAiB;IAoC5B;QAnCO,YAAO,GAAY,KAAK,CAAC;QACzB,oBAAe,GAAY,KAAK,CAAC;QA8B/B,SAAI,GAAW,EAAE,CAAC;QAClB,gBAAW,GAAoB,IAAI,WAAW,EAAE,CAAC;QAChD,gBAAW,GAAG,IAAI,YAAY,EAAoC,CAAC;KAE7D;IA/BhB,IAAa,IAAI,CAAC,KAA0B;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC;KAClC;IACD,IAAa,aAAa,CAAC,KAAc;QACvC,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI;aACZ,CAAC,CAAC;SACJ;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,KAAK;aACb,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;IACD,IAAa,OAAO,CAAC,KAAc;QACjC,IAAI,KAAK;YAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;YACtC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACvC;IACD,IAAa,QAAQ,CAAC,KAAc;QAClC,IAAI,KAAK;YAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;;YACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;KAChC;IAMD,QAAQ,MAAK;IAEb,WAAW;QACT,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACjC;aAAM;YACL,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK;gBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;gBACxD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACtC;QACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;YACpB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;SAC9B,CAAC,CAAC;KACJ;;;YAxDF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,qvBAAwC;;aAEzC;;;;uBAKE,SAAS,SAAC,OAAO;mBACjB,KAAK;4BAGL,KAAK;sBAgBL,KAAK;uBAIL,KAAK;mBAIL,KAAK;0BACL,KAAK;0BACL,MAAM;;;MC/BI,cAAc;IACzB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KACpD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;gBACjC,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;gBAC5C,OAAO,EAAE,CAAC,iBAAiB,CAAC;aAC7B;;;ACVD;;;;;;"}
|
|
@@ -3,21 +3,20 @@ import { CommonModule } from '@angular/common';
|
|
|
3
3
|
|
|
4
4
|
class ChipComponent {
|
|
5
5
|
constructor() {
|
|
6
|
-
this.label =
|
|
7
|
-
this.value =
|
|
8
|
-
this.size =
|
|
6
|
+
this.label = "";
|
|
7
|
+
this.value = "";
|
|
8
|
+
this.size = "Medium";
|
|
9
9
|
this.iconUrl = null;
|
|
10
10
|
this.count = null;
|
|
11
11
|
this.dismissible = false;
|
|
12
12
|
this.cancel = new EventEmitter();
|
|
13
13
|
}
|
|
14
|
-
ngOnInit() {
|
|
15
|
-
}
|
|
14
|
+
ngOnInit() { }
|
|
16
15
|
}
|
|
17
16
|
ChipComponent.decorators = [
|
|
18
17
|
{ type: Component, args: [{
|
|
19
|
-
selector:
|
|
20
|
-
template: "<div\n
|
|
18
|
+
selector: "mis-chip",
|
|
19
|
+
template: "<div\n id=\"chip-container\"\n [ngClass]=\"{\n small: size === 'Small',\n medium: size === 'Medium',\n 'small-m': size === 'Small-M',\n 'medium-m': size === 'Medium-M'\n }\"\n>\n <img *ngIf=\"iconUrl && iconUrl.length > 0\" [src]=\"iconUrl\" alt=\"\" />\n <span>{{ label }}</span>\n <div *ngIf=\"count != null || count != undefined\" id=\"count-container\">\n <div id=\"separator\"></div>\n <span id=\"count-text\">{{ count }}</span>\n </div>\n <span *ngIf=\"dismissible\" id=\"close-icon\" (click)=\"cancel.emit(value)\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.49931 4.25725C5.15643 3.91437 4.60052 3.91437 4.25765 4.25725C3.91477 4.60012 3.91477 5.15604 4.25765 5.49891L6.75868 7.99994L4.25827 10.5004C3.91539 10.8432 3.91539 11.3991 4.25827 11.742C4.60114 12.0849 5.15706 12.0849 5.49993 11.742L8.00034 9.24161L10.5007 11.742C10.8436 12.0849 11.3995 12.0849 11.7424 11.742C12.0853 11.3991 12.0853 10.8432 11.7424 10.5003L9.24201 7.99995L11.743 5.49893C12.0859 5.15606 12.0859 4.60014 11.743 4.25727C11.4001 3.91439 10.8442 3.91439 10.5014 4.25727L8.00034 6.75828L5.49931 4.25725Z\"\n fill=\"#181F33\"\n />\n </svg>\n </span>\n</div>\n",
|
|
21
20
|
styles: ["#chip-container{display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif!important;background-color:#e0e0e0;box-sizing:border-box;cursor:default}#chip-container:hover{background:#d7d9de}img{margin-right:4px}#close-icon{margin-left:4px;cursor:pointer}#close-icon,#count-container{display:flex;justify-content:center;align-items:center}#count-container,#separator{height:100%}#separator{width:1px;background-color:#c8cdd3;margin:0 8px}#count-text{font-weight:700;letter-spacing:.25px}.small{height:24px;padding:4px 8px;border-radius:7px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.7px}.medium,.small{font-style:normal;color:#181f33}.medium{height:32px;padding:6px 12px;border-radius:16px;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px}.small-m{height:20px;padding:4px 8px;border-radius:10px;font-size:11px;line-height:12px;letter-spacing:.1px}.medium-m,.small-m{font-style:normal;font-weight:400;color:#181f33}.medium-m{height:24px;padding:4px 12px;border-radius:12px;font-size:12px;line-height:16px;letter-spacing:.25px}"]
|
|
22
21
|
},] }
|
|
23
22
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-chip.js","sources":["../../../projects/mis-components/chip/chip.component.ts","../../../projects/mis-components/chip/chip.module.ts","../../../projects/mis-components/chip/mis-crystal-design-system-chip.ts"],"sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter} from
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-chip.js","sources":["../../../projects/mis-components/chip/chip.component.ts","../../../projects/mis-components/chip/chip.module.ts","../../../projects/mis-components/chip/mis-crystal-design-system-chip.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter } from \"@angular/core\";\n\n@Component({\n selector: \"mis-chip\",\n templateUrl: \"chip.component.html\",\n styleUrls: [\"chip.component.scss\"]\n})\nexport class ChipComponent implements OnInit {\n @Input() label: string = \"\";\n @Input() value: any = \"\";\n @Input() size: \"Small\" | \"Medium\" | \"Small-M\" | \"Medium-M\" = \"Medium\";\n @Input() iconUrl: string | null = null;\n @Input() count: number | null | undefined = null;\n @Input() dismissible: boolean = false;\n\n @Output() cancel = new EventEmitter<any>();\n constructor() {}\n ngOnInit() {}\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ChipComponent } from \"./chip.component\";\n\n@NgModule({\n declarations: [ChipComponent],\n imports: [CommonModule],\n exports: [ChipComponent]\n})\nexport class ChipModule {\n static forRoot(): ModuleWithProviders<ChipModule> {\n return { ngModule: ChipModule, providers: [] };\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAOa,aAAa;IASxB;QARS,UAAK,GAAW,EAAE,CAAC;QACnB,UAAK,GAAQ,EAAE,CAAC;QAChB,SAAI,GAAgD,QAAQ,CAAC;QAC7D,YAAO,GAAkB,IAAI,CAAC;QAC9B,UAAK,GAA8B,IAAI,CAAC;QACxC,gBAAW,GAAY,KAAK,CAAC;QAE5B,WAAM,GAAG,IAAI,YAAY,EAAO,CAAC;KAC3B;IAChB,QAAQ,MAAK;;;YAfd,SAAS,SAAC;gBACT,QAAQ,EAAE,UAAU;gBACpB,00CAAkC;;aAEnC;;;;oBAEE,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,KAAK;oBACL,KAAK;0BACL,KAAK;qBAEL,MAAM;;;MCNI,UAAU;IACrB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAChD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,aAAa,CAAC;gBAC7B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,aAAa,CAAC;aACzB;;;ACRD;;;;;;"}
|