mis-crystal-design-system 18.0.25 → 18.1.0-signal-test
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 +17 -15
- package/async-search-dropdown/async-dropdown.component.d.ts +43 -61
- package/button/button.component.d.ts +35 -13
- package/button/button.directive.d.ts +10 -8
- package/button/button.directive.scss +13 -15
- package/checkbox/checkbox.component.d.ts +15 -12
- package/chip/chip.component.d.ts +9 -11
- package/datepicker_v2/models/dp-config.model.d.ts +1 -0
- package/datepicker_v2/tz-datepicker.directive.d.ts +15 -18
- package/datepicker_v2/tz-dp-container/tz-dp-container.component.d.ts +42 -21
- package/daterangepicker_v2/tz-daterangepicker.directive.d.ts +12 -14
- package/daterangepicker_v2/tz-drp-container/tz-drp-container.component.d.ts +46 -23
- package/drawer/drawer-body/drawer-body.component.d.ts +2 -2
- package/drawer/drawer.scss +1 -1
- package/dropdown/calculate-container-height.directive.d.ts +7 -8
- package/dropdown/dropdown.component.d.ts +41 -49
- package/dynamic-form/dynamic-form.component.d.ts +20 -16
- package/esm2022/action-list/action-list.component.mjs +113 -90
- package/esm2022/async-search-dropdown/async-dropdown.component.mjs +257 -327
- package/esm2022/button/button.component.mjs +56 -49
- package/esm2022/button/button.directive.mjs +36 -40
- package/esm2022/checkbox/checkbox.component.mjs +75 -70
- package/esm2022/chip/chip.component.mjs +20 -33
- package/esm2022/datepicker_v2/models/dp-config.model.mjs +1 -1
- package/esm2022/datepicker_v2/tz-datepicker.directive.mjs +42 -71
- package/esm2022/datepicker_v2/tz-dp-container/tz-dp-container.component.mjs +203 -173
- package/esm2022/datepicker_v2/utils/index.mjs +2 -1
- package/esm2022/daterangepicker_v2/tz-daterangepicker.directive.mjs +26 -51
- package/esm2022/daterangepicker_v2/tz-drp-container/tz-drp-container.component.mjs +283 -236
- package/esm2022/drawer/drawer-body/drawer-body.component.mjs +8 -7
- package/esm2022/dropdown/calculate-container-height.directive.mjs +25 -22
- package/esm2022/dropdown/dropdown.component.mjs +163 -187
- package/esm2022/dynamic-form/dynamic-form.component.mjs +119 -73
- package/esm2022/fab/fab.component.mjs +30 -34
- package/esm2022/filter/filter-panel/filter-panel.component.mjs +61 -59
- package/esm2022/input/directives/input/input.directive.mjs +22 -26
- package/esm2022/input/mis-input.component.mjs +42 -46
- package/esm2022/input-stepper/input-stepper/input-stepper.component.mjs +42 -52
- package/esm2022/loader/loader.component.mjs +8 -11
- package/esm2022/mobile-filter/mobile-filter.component.mjs +62 -62
- package/esm2022/modal/module-wrapper/module-wrapper.component.mjs +11 -9
- package/esm2022/multi-select-dropdown/multi-select-dropdown.component.mjs +235 -281
- package/esm2022/nested-multi-select-dropdown/nested-multi-select-dropdown.component.mjs +250 -287
- package/esm2022/phone-input/phone-input.component.mjs +21 -43
- package/esm2022/public-api.mjs +1 -1
- package/esm2022/radio-button/radio-button.component.mjs +15 -27
- package/esm2022/ske-loader/ske-loader.component.mjs +15 -29
- package/esm2022/slider/slider.component.mjs +23 -33
- package/esm2022/slider/slider.module.mjs +4 -11
- package/esm2022/snackbar/snackbar/snackbar.component.mjs +21 -15
- package/esm2022/snackbar/snackbar.service.mjs +3 -2
- package/esm2022/specificdatepicker/tz-sdp-container/tz-sdp-container.component.mjs +231 -344
- package/esm2022/specificdatepicker/tz-specificdatepicker.directive.mjs +77 -105
- package/esm2022/star-rating/star-rating.component.mjs +58 -72
- package/esm2022/switch/switch.component.mjs +34 -36
- package/esm2022/table/actions-cell/actions-cell.component.mjs +56 -55
- package/esm2022/table/custom-table-cell.directive.mjs +22 -18
- package/esm2022/table/filter/filter.component.mjs +60 -42
- package/esm2022/table/sort-icons.directive.mjs +16 -8
- package/esm2022/table/sub-table/sub-table.component.mjs +42 -45
- package/esm2022/table/table.component.mjs +182 -166
- package/esm2022/timepicker/timepicker.component.mjs +245 -160
- package/esm2022/timepicker/timepicker.directive.mjs +3 -2
- package/esm2022/timerangepicker/timerangepicker.component.mjs +200 -159
- package/esm2022/toast/toast.component.mjs +7 -8
- package/esm2022/toast/toast.data.service.mjs +15 -9
- package/esm2022/tooltip/tooltip-container/tooltip.component.mjs +12 -12
- package/esm2022/tooltip/tooltip.directive.mjs +4 -4
- package/esm2022/virtual-scroll/virtual-scroll.component.mjs +57 -59
- package/fab/fab.component.d.ts +12 -8
- package/fesm2022/mis-crystal-design-system-action-list.mjs +112 -89
- package/fesm2022/mis-crystal-design-system-action-list.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs +254 -325
- package/fesm2022/mis-crystal-design-system-async-search-dropdown.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-button.mjs +89 -86
- package/fesm2022/mis-crystal-design-system-button.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-checkbox.mjs +74 -69
- package/fesm2022/mis-crystal-design-system-checkbox.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-chip.mjs +19 -32
- package/fesm2022/mis-crystal-design-system-chip.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs +243 -241
- package/fesm2022/mis-crystal-design-system-datepicker_v2.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs +306 -284
- package/fesm2022/mis-crystal-design-system-daterangepicker_v2.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-drawer.mjs +7 -6
- package/fesm2022/mis-crystal-design-system-drawer.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-dropdown.mjs +184 -205
- package/fesm2022/mis-crystal-design-system-dropdown.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-dynamic-form.mjs +119 -73
- package/fesm2022/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-fab.mjs +29 -33
- package/fesm2022/mis-crystal-design-system-fab.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-filter.mjs +60 -58
- package/fesm2022/mis-crystal-design-system-filter.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-input-stepper.mjs +41 -51
- package/fesm2022/mis-crystal-design-system-input-stepper.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-input.mjs +62 -71
- package/fesm2022/mis-crystal-design-system-input.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-loader.mjs +7 -10
- package/fesm2022/mis-crystal-design-system-loader.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-mobile-filter.mjs +61 -61
- package/fesm2022/mis-crystal-design-system-mobile-filter.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-modal.mjs +10 -8
- package/fesm2022/mis-crystal-design-system-modal.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs +233 -279
- package/fesm2022/mis-crystal-design-system-multi-select-dropdown.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-nested-multi-select-dropdown.mjs +249 -286
- package/fesm2022/mis-crystal-design-system-nested-multi-select-dropdown.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-phone-input.mjs +20 -42
- package/fesm2022/mis-crystal-design-system-phone-input.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-radio-button.mjs +14 -26
- package/fesm2022/mis-crystal-design-system-radio-button.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-ske-loader.mjs +14 -28
- package/fesm2022/mis-crystal-design-system-ske-loader.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-slider.mjs +25 -42
- package/fesm2022/mis-crystal-design-system-slider.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-snackbar.mjs +22 -15
- package/fesm2022/mis-crystal-design-system-snackbar.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs +305 -446
- package/fesm2022/mis-crystal-design-system-specificdatepicker.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-star-rating.mjs +57 -71
- package/fesm2022/mis-crystal-design-system-star-rating.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-switch.mjs +33 -35
- package/fesm2022/mis-crystal-design-system-switch.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-table.mjs +368 -324
- package/fesm2022/mis-crystal-design-system-table.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-timepicker.mjs +246 -160
- package/fesm2022/mis-crystal-design-system-timepicker.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-timerangepicker.mjs +199 -158
- package/fesm2022/mis-crystal-design-system-timerangepicker.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-toast.mjs +19 -14
- package/fesm2022/mis-crystal-design-system-toast.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-tooltip.mjs +14 -14
- package/fesm2022/mis-crystal-design-system-tooltip.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system-virtual-scroll.mjs +57 -59
- package/fesm2022/mis-crystal-design-system-virtual-scroll.mjs.map +1 -1
- package/fesm2022/mis-crystal-design-system.mjs.map +1 -1
- package/filter/filter-panel/filter-panel.component.d.ts +14 -14
- package/input/directives/input/input.directive.d.ts +6 -10
- package/input/mis-input.component.d.ts +12 -13
- package/input/mis-input.component.scss +18 -18
- package/input-stepper/input-stepper/input-stepper.component.d.ts +8 -7
- package/loader/loader.component.d.ts +3 -6
- package/mobile-filter/mobile-filter.component.d.ts +15 -15
- package/modal/modal.scss +1 -1
- package/modal/module-wrapper/module-wrapper.component.d.ts +2 -3
- package/multi-select-dropdown/multi-select-dropdown.component.d.ts +89 -51
- package/nested-multi-select-dropdown/nested-multi-select-dropdown.component.d.ts +99 -56
- package/package.json +17 -23
- package/phone-input/phone-input.component.d.ts +16 -18
- package/radio-button/radio-button.component.d.ts +9 -11
- package/ske-loader/ske-loader.component.d.ts +8 -11
- package/slider/slider.component.d.ts +8 -11
- package/slider/slider.module.d.ts +1 -2
- package/snackbar/snackbar/snackbar.component.d.ts +3 -3
- package/specificdatepicker/tz-sdp-container/tz-sdp-container.component.d.ts +35 -35
- package/specificdatepicker/tz-specificdatepicker.directive.d.ts +24 -28
- package/star-rating/star-rating.component.d.ts +18 -18
- package/styles/mis-color-constants.scss +0 -204
- package/styles/mis-icons.scss +56 -56
- package/styles/mis-old-icon-styles.scss +21 -21
- package/switch/switch.component.d.ts +8 -10
- package/table/actions-cell/actions-cell.component.d.ts +14 -14
- package/table/custom-table-cell.directive.d.ts +3 -3
- package/table/filter/filter.component.d.ts +9 -9
- package/table/sub-table/sub-table.component.d.ts +5 -5
- package/table/table.component.d.ts +38 -35
- package/timepicker/timepicker.component.d.ts +29 -28
- package/timerangepicker/timerangepicker.component.d.ts +36 -33
- package/toast/toast.data.service.d.ts +1 -1
- package/tooltip/tooltip-container/tooltip.component.d.ts +4 -4
- package/virtual-scroll/virtual-scroll.component.d.ts +8 -9
- package/dynamic-theme/branding.types.d.ts +0 -84
- package/dynamic-theme/dynamic-theme.module.d.ts +0 -9
- package/dynamic-theme/dynamic-theme.service.d.ts +0 -89
- package/dynamic-theme/index.d.ts +0 -1
- package/dynamic-theme/public_api.d.ts +0 -3
- package/esm2022/dynamic-theme/branding.types.mjs +0 -93
- package/esm2022/dynamic-theme/dynamic-theme.module.mjs +0 -25
- package/esm2022/dynamic-theme/dynamic-theme.service.mjs +0 -193
- package/esm2022/dynamic-theme/index.mjs +0 -2
- package/esm2022/dynamic-theme/mis-crystal-design-system-dynamic-theme.mjs +0 -5
- package/esm2022/dynamic-theme/public_api.mjs +0 -4
- package/fesm2022/mis-crystal-design-system-dynamic-theme.mjs +0 -313
- package/fesm2022/mis-crystal-design-system-dynamic-theme.mjs.map +0 -1
|
@@ -1,93 +1,83 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter,
|
|
2
|
+
import { input, signal, EventEmitter, computed, effect, Component, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/platform-browser';
|
|
4
4
|
import * as i2 from '@angular/common';
|
|
5
5
|
import { CommonModule } from '@angular/common';
|
|
6
6
|
|
|
7
7
|
const _c0 = a0 => ({ "max-width": a0 });
|
|
8
|
-
const _c1 = a0 => ({ "
|
|
9
|
-
const _c2 = a0 => ({
|
|
8
|
+
const _c1 = a0 => ({ "disabled": a0 });
|
|
9
|
+
const _c2 = a0 => ({ cursor: a0 });
|
|
10
10
|
class InputStepperComponent {
|
|
11
11
|
constructor(sanitizer) {
|
|
12
12
|
this.sanitizer = sanitizer;
|
|
13
|
-
|
|
14
|
-
this.
|
|
15
|
-
this.
|
|
16
|
-
this.
|
|
13
|
+
// Input signals
|
|
14
|
+
this.value = input(1);
|
|
15
|
+
this.width = input('200px');
|
|
16
|
+
this.minLimit = input(0);
|
|
17
|
+
this.maxLimit = input(2);
|
|
18
|
+
// Internal state
|
|
19
|
+
this.currentValue = signal(0);
|
|
17
20
|
this.valueChange = new EventEmitter();
|
|
21
|
+
// Computed states
|
|
22
|
+
this.canIncrement = computed(() => this.currentValue() < this.maxLimit());
|
|
23
|
+
this.canDecrement = computed(() => this.currentValue() > this.minLimit());
|
|
18
24
|
this.svgMinusIcon = this.sanitizer.bypassSecurityTrustHtml(`
|
|
19
25
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
20
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9.11705C3 8.63819 3.3833 8.25 3.85612 8.25H14.1439C14.6167 8.25 15 8.63819 15 9.11705C15 9.59591 14.6167 9.9841 14.1439 9.9841H3.85612C3.3833 9.9841 3 9.59591 3 9.11705Z" fill="
|
|
26
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9.11705C3 8.63819 3.3833 8.25 3.85612 8.25H14.1439C14.6167 8.25 15 8.63819 15 9.11705C15 9.59591 14.6167 9.9841 14.1439 9.9841H3.85612C3.3833 9.9841 3 9.59591 3 9.11705Z" fill="#0937B2"/>
|
|
21
27
|
</svg>`);
|
|
22
28
|
this.svgPlusIcon = this.sanitizer.bypassSecurityTrustHtml(`
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
30
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.85677 3.86705C9.85677 3.38819 9.47347 3 9.00066 3C8.52784 3 8.14454 3.38819 8.14454 3.86705V8.13159H3.85612C3.3833 8.13159 3 8.51978 3 8.99864C3 9.4775 3.3833 9.8657 3.85612 9.8657H8.14454V14.1329C8.14454 14.6118 8.52784 15 9.00066 15C9.47347 15 9.85677 14.6118 9.85677 14.1329V9.8657H14.1439C14.6167 9.8657 15 9.4775 15 8.99864C15 8.51978 14.6167 8.13159 14.1439 8.13159H9.85677V3.86705Z" fill="#0937B2"/>
|
|
31
|
+
</svg>`);
|
|
32
|
+
// Keep internal value in sync with input
|
|
33
|
+
effect(() => {
|
|
34
|
+
const inputVal = this.value();
|
|
35
|
+
if (inputVal !== undefined) {
|
|
36
|
+
this.currentValue.set(inputVal);
|
|
37
|
+
}
|
|
38
|
+
}, { allowSignalWrites: true });
|
|
26
39
|
}
|
|
27
40
|
increment() {
|
|
28
|
-
if (this.
|
|
29
|
-
this.
|
|
30
|
-
|
|
41
|
+
if (this.canIncrement()) {
|
|
42
|
+
this.currentValue.update(v => v + 1);
|
|
43
|
+
this.valueChange.emit(this.currentValue());
|
|
31
44
|
}
|
|
32
|
-
this.value++;
|
|
33
|
-
this.emitValueChange();
|
|
34
45
|
}
|
|
35
46
|
decrement() {
|
|
36
|
-
if (this.
|
|
37
|
-
this.
|
|
38
|
-
this.
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
onInputChange(newValue) {
|
|
42
|
-
const parsedValue = parseInt(newValue, 10);
|
|
43
|
-
if (!isNaN(parsedValue)) {
|
|
44
|
-
this.value = parsedValue;
|
|
45
|
-
this.emitValueChange();
|
|
47
|
+
if (this.canDecrement()) {
|
|
48
|
+
this.currentValue.update(v => v - 1);
|
|
49
|
+
this.valueChange.emit(this.currentValue());
|
|
46
50
|
}
|
|
47
51
|
}
|
|
48
|
-
emitValueChange() {
|
|
49
|
-
console.log("value change", this.value);
|
|
50
|
-
this.valueChange.emit(this.value);
|
|
51
|
-
}
|
|
52
52
|
static { this.ɵfac = function InputStepperComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InputStepperComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer)); }; }
|
|
53
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputStepperComponent, selectors: [["mis-input-stepper"]], inputs: { value: "value", width: "width", minLimit: "minLimit", maxLimit: "maxLimit" }, outputs: { valueChange: "valueChange" }, decls: 6, vars:
|
|
53
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InputStepperComponent, selectors: [["mis-input-stepper"]], inputs: { value: [1, "value"], width: [1, "width"], minLimit: [1, "minLimit"], maxLimit: [1, "maxLimit"] }, outputs: { valueChange: "valueChange" }, decls: 6, vars: 20, consts: [[1, "nudger", 3, "ngStyle"], [3, "click", "disabled", "ngClass", "ngStyle"], [3, "innerHtml"], ["type", "text", "readonly", "", 3, "value"]], template: function InputStepperComponent_Template(rf, ctx) { if (rf & 1) {
|
|
54
54
|
i0.ɵɵelementStart(0, "div", 0)(1, "button", 1);
|
|
55
55
|
i0.ɵɵlistener("click", function InputStepperComponent_Template_button_click_1_listener() { return ctx.decrement(); });
|
|
56
56
|
i0.ɵɵelement(2, "span", 2);
|
|
57
57
|
i0.ɵɵelementEnd();
|
|
58
|
-
i0.ɵɵ
|
|
59
|
-
i0.ɵɵlistener("input", function InputStepperComponent_Template_input_input_3_listener($event) { return ctx.onInputChange($event.target.value); });
|
|
60
|
-
i0.ɵɵelementEnd();
|
|
58
|
+
i0.ɵɵelement(3, "input", 3);
|
|
61
59
|
i0.ɵɵelementStart(4, "button", 1);
|
|
62
60
|
i0.ɵɵlistener("click", function InputStepperComponent_Template_button_click_4_listener() { return ctx.increment(); });
|
|
63
61
|
i0.ɵɵelement(5, "span", 2);
|
|
64
62
|
i0.ɵɵelementEnd()();
|
|
65
63
|
} if (rf & 2) {
|
|
66
|
-
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(
|
|
64
|
+
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c0, ctx.width()));
|
|
67
65
|
i0.ɵɵadvance();
|
|
68
|
-
i0.ɵɵproperty("
|
|
66
|
+
i0.ɵɵproperty("disabled", !ctx.canDecrement())("ngClass", i0.ɵɵpureFunction1(12, _c1, !ctx.canDecrement()))("ngStyle", i0.ɵɵpureFunction1(14, _c2, ctx.canDecrement() ? "pointer" : "not-allowed"));
|
|
69
67
|
i0.ɵɵadvance();
|
|
70
|
-
i0.ɵɵproperty("innerHtml", ctx.svgMinusIcon, i0.ɵɵsanitizeHtml)
|
|
68
|
+
i0.ɵɵproperty("innerHtml", ctx.svgMinusIcon, i0.ɵɵsanitizeHtml);
|
|
71
69
|
i0.ɵɵadvance();
|
|
72
|
-
i0.ɵɵproperty("value", ctx.
|
|
70
|
+
i0.ɵɵproperty("value", ctx.currentValue());
|
|
73
71
|
i0.ɵɵadvance();
|
|
74
|
-
i0.ɵɵproperty("
|
|
72
|
+
i0.ɵɵproperty("disabled", !ctx.canIncrement())("ngClass", i0.ɵɵpureFunction1(16, _c1, !ctx.canIncrement()))("ngStyle", i0.ɵɵpureFunction1(18, _c2, ctx.canIncrement() ? "pointer" : "not-allowed"));
|
|
75
73
|
i0.ɵɵadvance();
|
|
76
|
-
i0.ɵɵproperty("innerHtml", ctx.svgPlusIcon, i0.ɵɵsanitizeHtml)
|
|
77
|
-
} }, dependencies: [i2.NgClass, i2.NgStyle], styles: [".nudger[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid
|
|
74
|
+
i0.ɵɵproperty("innerHtml", ctx.svgPlusIcon, i0.ɵɵsanitizeHtml);
|
|
75
|
+
} }, dependencies: [i2.NgClass, i2.NgStyle], styles: [".nudger[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937B2;border-radius:4px}button[_ngcontent-%COMP%]{cursor:pointer;border:none;background-color:#fff;transition:background-color .3s;color:#0937b2}button[_ngcontent-%COMP%]:hover{background-color:#fff}input[_ngcontent-%COMP%]{width:40%;text-align:center;padding:.5em 1em;color:#0937b2;border:none}@media screen and (max-width: 600px){.nudger[_ngcontent-%COMP%]{max-width:150px}}.disabled[_ngcontent-%COMP%]{opacity:.6;cursor:not-allowed}.nudger[_ngcontent-%COMP%] span[_ngcontent-%COMP%]{display:inline-block;width:18px;height:18px}"] }); }
|
|
78
76
|
}
|
|
79
77
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InputStepperComponent, [{
|
|
80
78
|
type: Component,
|
|
81
|
-
args: [{ selector: 'mis-input-stepper', template: "<div class=\"nudger\" [ngStyle]=\"{'max-width': width }\">\n
|
|
82
|
-
}], () => [{ type: i1.DomSanitizer }], {
|
|
83
|
-
type: Input
|
|
84
|
-
}], width: [{
|
|
85
|
-
type: Input
|
|
86
|
-
}], minLimit: [{
|
|
87
|
-
type: Input
|
|
88
|
-
}], maxLimit: [{
|
|
89
|
-
type: Input
|
|
90
|
-
}], valueChange: [{
|
|
79
|
+
args: [{ selector: 'mis-input-stepper', template: "<div class=\"nudger\" [ngStyle]=\"{ 'max-width': width() }\">\n <!-- Decrement Button -->\n <button \n (click)=\"decrement()\" \n [disabled]=\"!canDecrement()\" \n [ngClass]=\"{ 'disabled': !canDecrement() }\"\n [ngStyle]=\"{ cursor: canDecrement() ? 'pointer' : 'not-allowed' }\"\n >\n <span [innerHtml]=\"svgMinusIcon\"></span>\n </button>\n\n <!-- Input Display -->\n <input \n type=\"text\" \n [value]=\"currentValue()\" \n readonly\n >\n\n <!-- Increment Button -->\n <button \n (click)=\"increment()\" \n [disabled]=\"!canIncrement()\" \n [ngClass]=\"{ 'disabled': !canIncrement() }\"\n [ngStyle]=\"{ cursor: canIncrement() ? 'pointer' : 'not-allowed' }\"\n >\n <span [innerHtml]=\"svgPlusIcon\"></span>\n </button>\n</div>", styles: [".nudger{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid #0937B2;border-radius:4px}button{cursor:pointer;border:none;background-color:#fff;transition:background-color .3s;color:#0937b2}button:hover{background-color:#fff}input{width:40%;text-align:center;padding:.5em 1em;color:#0937b2;border:none}@media screen and (max-width: 600px){.nudger{max-width:150px}}.disabled{opacity:.6;cursor:not-allowed}.nudger span{display:inline-block;width:18px;height:18px}\n"] }]
|
|
80
|
+
}], () => [{ type: i1.DomSanitizer }], { valueChange: [{
|
|
91
81
|
type: Output
|
|
92
82
|
}] }); })();
|
|
93
83
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InputStepperComponent, { className: "InputStepperComponent" }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-input-stepper.mjs","sources":["../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.ts","../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.html","../../../projects/mis-components/input-stepper/input-stepper.module.ts","../../../projects/mis-components/input-stepper/mis-crystal-design-system-input-stepper.ts"],"sourcesContent":["import { Component, EventEmitter,
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-input-stepper.mjs","sources":["../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.ts","../../../projects/mis-components/input-stepper/input-stepper/input-stepper.component.html","../../../projects/mis-components/input-stepper/input-stepper.module.ts","../../../projects/mis-components/input-stepper/mis-crystal-design-system-input-stepper.ts"],"sourcesContent":["import { Component, Output, EventEmitter, input, signal, computed, effect } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n@Component({\n selector: 'mis-input-stepper',\n templateUrl: './input-stepper.component.html',\n styleUrls: ['./input-stepper.component.css']\n})\nexport class InputStepperComponent {\n // SVG icons\n svgMinusIcon: SafeHtml;\n svgPlusIcon: SafeHtml;\n\n // Input signals\n readonly value = input<number>(1);\n readonly width = input<string>('200px');\n readonly minLimit = input<number>(0);\n readonly maxLimit = input<number>(2);\n\n // Internal state\n protected currentValue = signal(0);\n\n @Output() valueChange = new EventEmitter<number>();\n\n // Computed states\n canIncrement = computed(() => this.currentValue() < this.maxLimit());\n canDecrement = computed(() => this.currentValue() > this.minLimit());\n\n constructor(private sanitizer: DomSanitizer) {\n this.svgMinusIcon = this.sanitizer.bypassSecurityTrustHtml(`\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3 9.11705C3 8.63819 3.3833 8.25 3.85612 8.25H14.1439C14.6167 8.25 15 8.63819 15 9.11705C15 9.59591 14.6167 9.9841 14.1439 9.9841H3.85612C3.3833 9.9841 3 9.59591 3 9.11705Z\" fill=\"#0937B2\"/>\n </svg>`);\n\n this.svgPlusIcon = this.sanitizer.bypassSecurityTrustHtml(`\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.85677 3.86705C9.85677 3.38819 9.47347 3 9.00066 3C8.52784 3 8.14454 3.38819 8.14454 3.86705V8.13159H3.85612C3.3833 8.13159 3 8.51978 3 8.99864C3 9.4775 3.3833 9.8657 3.85612 9.8657H8.14454V14.1329C8.14454 14.6118 8.52784 15 9.00066 15C9.47347 15 9.85677 14.6118 9.85677 14.1329V9.8657H14.1439C14.6167 9.8657 15 9.4775 15 8.99864C15 8.51978 14.6167 8.13159 14.1439 8.13159H9.85677V3.86705Z\" fill=\"#0937B2\"/>\n </svg>`);\n\n // Keep internal value in sync with input\n effect(() => {\n const inputVal = this.value();\n if (inputVal !== undefined) {\n this.currentValue.set(inputVal);\n }\n }, { allowSignalWrites: true });\n }\n\n increment() {\n if (this.canIncrement()) {\n this.currentValue.update(v => v + 1);\n this.valueChange.emit(this.currentValue());\n }\n }\n\n decrement() {\n if (this.canDecrement()) {\n this.currentValue.update(v => v - 1);\n this.valueChange.emit(this.currentValue());\n }\n }\n}","<div class=\"nudger\" [ngStyle]=\"{ 'max-width': width() }\">\n <!-- Decrement Button -->\n <button \n (click)=\"decrement()\" \n [disabled]=\"!canDecrement()\" \n [ngClass]=\"{ 'disabled': !canDecrement() }\"\n [ngStyle]=\"{ cursor: canDecrement() ? 'pointer' : 'not-allowed' }\"\n >\n <span [innerHtml]=\"svgMinusIcon\"></span>\n </button>\n\n <!-- Input Display -->\n <input \n type=\"text\" \n [value]=\"currentValue()\" \n readonly\n >\n\n <!-- Increment Button -->\n <button \n (click)=\"increment()\" \n [disabled]=\"!canIncrement()\" \n [ngClass]=\"{ 'disabled': !canIncrement() }\"\n [ngStyle]=\"{ cursor: canIncrement() ? 'pointer' : 'not-allowed' }\"\n >\n <span [innerHtml]=\"svgPlusIcon\"></span>\n </button>\n</div>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { InputStepperComponent } from './input-stepper/input-stepper.component';\n\n\n\n@NgModule({\n declarations: [\n InputStepperComponent\n ],\n imports: [\n CommonModule\n ],\n exports: [\n InputStepperComponent\n ]\n})\nexport class InputStepperModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,46 +1,41 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive,
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import * as i1 from '@angular/
|
|
6
|
-
import { FormsModule } from '@angular/forms';
|
|
7
|
-
import * as i1$1 from '@angular/common';
|
|
2
|
+
import { signal, inject, ElementRef, DestroyRef, Directive, input, contentChild, computed, effect, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { NgControl, FormsModule } from '@angular/forms';
|
|
4
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
5
|
+
import * as i1 from '@angular/common';
|
|
8
6
|
import { CommonModule } from '@angular/common';
|
|
9
7
|
|
|
10
8
|
class MisInputDirective {
|
|
11
|
-
constructor(
|
|
12
|
-
|
|
13
|
-
this.
|
|
14
|
-
|
|
15
|
-
this.
|
|
16
|
-
this.
|
|
17
|
-
this.
|
|
18
|
-
this.
|
|
9
|
+
constructor() {
|
|
10
|
+
// Public signal to expose directive state
|
|
11
|
+
this.validity = signal(true);
|
|
12
|
+
// Dependencies injected for use with signals
|
|
13
|
+
this.el = inject(ElementRef);
|
|
14
|
+
this.control = inject(NgControl, { optional: true, self: true });
|
|
15
|
+
this.destroyRef = inject(DestroyRef); // Provides a reference for automatic cleanup
|
|
16
|
+
if (this.control?.control) {
|
|
17
|
+
this.control.control.statusChanges
|
|
18
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
19
|
+
.subscribe(() => {
|
|
20
|
+
this.validity.set(!this.control.control.invalid);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
19
23
|
}
|
|
20
24
|
ngOnInit() {
|
|
21
|
-
|
|
22
|
-
this.validityChange.next(!this.control.control?.invalid);
|
|
23
|
-
});
|
|
24
|
-
this.el.nativeElement.placeholder += " ";
|
|
25
|
+
// No need for explicit subscription in ngOnInit with the constructor logic
|
|
25
26
|
}
|
|
26
27
|
ngOnDestroy() {
|
|
27
|
-
|
|
28
|
-
this.endObs.complete();
|
|
28
|
+
// `takeUntilDestroyed` handles cleanup automatically.
|
|
29
29
|
}
|
|
30
|
-
static { this.ɵfac = function MisInputDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MisInputDirective)(
|
|
30
|
+
static { this.ɵfac = function MisInputDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MisInputDirective)(); }; }
|
|
31
31
|
static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: MisInputDirective, selectors: [["input", "misInput", ""]] }); }
|
|
32
32
|
}
|
|
33
33
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MisInputDirective, [{
|
|
34
34
|
type: Directive,
|
|
35
35
|
args: [{
|
|
36
|
-
// tslint:disable-next-line
|
|
37
36
|
selector: "input[misInput]"
|
|
38
37
|
}]
|
|
39
|
-
}], () => [
|
|
40
|
-
type: Self
|
|
41
|
-
}, {
|
|
42
|
-
type: Optional
|
|
43
|
-
}] }], null); })();
|
|
38
|
+
}], () => [], null); })();
|
|
44
39
|
|
|
45
40
|
const _c0 = [[["", "mis-input-icon", ""]], [["input"]], [["", "mis-input-act", ""]], [["", "mis-input-hint", ""]], [["", "mis-input-error", ""]]];
|
|
46
41
|
const _c1 = ["[mis-input-icon]", "input", "[mis-input-act]", "[mis-input-hint]", "[mis-input-error]"];
|
|
@@ -51,34 +46,43 @@ function MisInputComponent_span_7_Template(rf, ctx) { if (rf & 1) {
|
|
|
51
46
|
i0.ɵɵelementEnd();
|
|
52
47
|
} }
|
|
53
48
|
class MisInputComponent {
|
|
54
|
-
set formInput(input) {
|
|
55
|
-
if (!this.placeholder) {
|
|
56
|
-
this.placeholder = input?.el.nativeElement.placeholder || "";
|
|
57
|
-
}
|
|
58
|
-
this.inputCtrl = input.control?.control;
|
|
59
|
-
this.inputSubscription?.unsubscribe();
|
|
60
|
-
this.inputSubscription = input?.validity.subscribe(res => (this.inputValidity = res));
|
|
61
|
-
this.placeholder += " ";
|
|
62
|
-
}
|
|
63
49
|
constructor() {
|
|
64
|
-
|
|
65
|
-
this.
|
|
66
|
-
this.
|
|
67
|
-
this.
|
|
68
|
-
this.
|
|
69
|
-
this.
|
|
50
|
+
// Signal Inputs replacing @Input()
|
|
51
|
+
this.type = input("floating");
|
|
52
|
+
this.size = input("sm");
|
|
53
|
+
this.placeholder = input(undefined);
|
|
54
|
+
this.noHints = input(false);
|
|
55
|
+
this.hasError = input(false);
|
|
56
|
+
this.isMandatory = input(false);
|
|
57
|
+
// Content Child as a signal
|
|
58
|
+
this.formInput = contentChild(MisInputDirective);
|
|
59
|
+
// Use a computed signal to derive the input control from the content child.
|
|
60
|
+
// This will automatically update when the content child becomes available.
|
|
61
|
+
this.inputCtrl = computed(() => this.formInput()?.control?.control || null);
|
|
62
|
+
// Use a computed signal to derive the validity state.
|
|
63
|
+
// It reads the signal from the directive and updates whenever the directive's signal changes.
|
|
64
|
+
this.inputValidity = computed(() => this.formInput()?.validity() ?? true);
|
|
65
|
+
// Computed signal to determine the overall invalid state
|
|
66
|
+
this.isInvalid = computed(() => !this.inputValidity() || this.hasError());
|
|
67
|
+
// This effect is now only for a side-effect (modifying a DOM element)
|
|
68
|
+
// and no longer writes to signals.
|
|
69
|
+
effect(() => {
|
|
70
|
+
const input = this.formInput();
|
|
71
|
+
if (input && this.type() === 'floating') {
|
|
72
|
+
if (!this.placeholder() && input.el.nativeElement.placeholder) {
|
|
73
|
+
input.el.nativeElement.placeholder = '';
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
});
|
|
70
77
|
}
|
|
71
78
|
ngOnInit() { }
|
|
72
|
-
ngOnDestroy() {
|
|
73
|
-
this.inputSubscription?.unsubscribe();
|
|
74
|
-
}
|
|
79
|
+
ngOnDestroy() { }
|
|
75
80
|
static { this.ɵfac = function MisInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MisInputComponent)(); }; }
|
|
76
81
|
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MisInputComponent, selectors: [["mis-input"]], contentQueries: function MisInputComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
|
|
77
|
-
i0.ɵɵ
|
|
82
|
+
i0.ɵɵcontentQuerySignal(dirIndex, ctx.formInput, MisInputDirective, 5);
|
|
78
83
|
} if (rf & 2) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
} }, inputs: { type: "type", size: "size", placeholder: "placeholder", noHints: "noHints", hasError: "hasError", isMandatory: "isMandatory" }, ngContentSelectors: _c1, decls: 11, vars: 11, consts: [[3, "ngClass"], [1, "input-wrapper"], [1, "mis-input"], [1, "mis-placeholder"], ["style", "color: red;", 4, "ngIf"], [2, "color", "red"]], template: function MisInputComponent_Template(rf, ctx) { if (rf & 1) {
|
|
84
|
+
i0.ɵɵqueryAdvance();
|
|
85
|
+
} }, inputs: { type: [1, "type"], size: [1, "size"], placeholder: [1, "placeholder"], noHints: [1, "noHints"], hasError: [1, "hasError"], isMandatory: [1, "isMandatory"] }, ngContentSelectors: _c1, decls: 11, vars: 11, consts: [[3, "ngClass"], [1, "input-wrapper"], [1, "mis-input"], [1, "mis-placeholder"], ["style", "color: red;", 4, "ngIf"], [2, "color", "red"]], template: function MisInputComponent_Template(rf, ctx) { if (rf & 1) {
|
|
82
86
|
i0.ɵɵprojectionDef(_c0);
|
|
83
87
|
i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
|
|
84
88
|
i0.ɵɵprojection(2);
|
|
@@ -94,33 +98,20 @@ class MisInputComponent {
|
|
|
94
98
|
i0.ɵɵprojection(10, 4);
|
|
95
99
|
i0.ɵɵelementEnd();
|
|
96
100
|
} if (rf & 2) {
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
let tmp_1_0;
|
|
102
|
+
let tmp_2_0;
|
|
103
|
+
i0.ɵɵclassMap("input-container " + ctx.size());
|
|
104
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction5(5, _c2, ctx.type() === "rounded", ctx.type() === "floating", ctx.isInvalid(), ctx.noHints(), (tmp_1_0 = ctx.inputCtrl()) == null ? null : tmp_1_0.disabled));
|
|
99
105
|
i0.ɵɵadvance(6);
|
|
100
|
-
i0.ɵɵtextInterpolate(ctx.placeholder);
|
|
106
|
+
i0.ɵɵtextInterpolate(ctx.placeholder() || ((tmp_2_0 = ctx.formInput()) == null ? null : tmp_2_0.el.nativeElement.placeholder));
|
|
101
107
|
i0.ɵɵadvance();
|
|
102
|
-
i0.ɵɵproperty("ngIf", ctx.isMandatory);
|
|
103
|
-
} }, dependencies: [i1
|
|
108
|
+
i0.ɵɵproperty("ngIf", ctx.isMandatory());
|
|
109
|
+
} }, dependencies: [i1.NgClass, i1.NgIf], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.input-container[_ngcontent-%COMP%]{position:relative;padding-bottom:24px}.input-container.mis-disabled[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]{pointer-events:none!important}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all ease-in 60ms;background-color:#fff;padding:3px 16px;gap:16px}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] .mis-input[_ngcontent-%COMP%]{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]::placeholder{transition:all ease-in .1s;opacity:0;transform-origin:left center;color:transparent}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] .mis-placeholder[_ngcontent-%COMP%]{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all ease-in .15s}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]:focus-within{background-color:#f5f5f5}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]:focus-within{border:1px solid #0937B2}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] [mis-input-act][_ngcontent-%COMP%], .input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] [mis-input-icon][_ngcontent-%COMP%]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] [mis-input-act][_ngcontent-%COMP%]{cursor:pointer}.input-container.no-hint[_ngcontent-%COMP%]{padding-bottom:0}.input-container.rounded[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{box-sizing:initial}.input-container.rounded.sm[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{padding:3px 16px}.input-container.rounded.md[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{padding:9px 16px}.input-container.rounded.lg[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{padding:15px 16px}.input-container.rounded[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]:hover{background-color:#f5f5f5}.input-container.rounded[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]:focus-within{border:1px solid #0937b2}.input-container.rounded[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:not(:placeholder-shown) + .mis-placeholder[_ngcontent-%COMP%]{color:transparent!important}.input-container.rounded[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] .mis-placeholder[_ngcontent-%COMP%]{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]{border:1px solid #b00020!important}.input-container.floating[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus + .mis-placeholder[_ngcontent-%COMP%]{color:#0937b2!important}.input-container.floating[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:not(:placeholder-shown) + .mis-placeholder[_ngcontent-%COMP%], .input-container.floating[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus + .mis-placeholder[_ngcontent-%COMP%]{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]:focus-within input[_ngcontent-%COMP%]::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%]{border-bottom:1px solid #b00020!important}.input-container.floating.has-error[_ngcontent-%COMP%] .input-wrapper[_ngcontent-%COMP%] .mis-placeholder[_ngcontent-%COMP%]{color:#b00020!important}.input-container[_ngcontent-%COMP%] [mis-input-hint][_ngcontent-%COMP%], .input-container[_ngcontent-%COMP%] [mis-input-error][_ngcontent-%COMP%]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container[_ngcontent-%COMP%] [mis-input-error][_ngcontent-%COMP%]{color:#b00020}"] }); }
|
|
104
110
|
}
|
|
105
111
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MisInputComponent, [{
|
|
106
112
|
type: Component,
|
|
107
|
-
args: [{ selector: "mis-input", template: "<div\n [class]=\"'input-container ' + size\"\n [ngClass]=\"{\n rounded: type === 'rounded',\n floating: type === 'floating',\n 'has-error':
|
|
108
|
-
}], () => [],
|
|
109
|
-
type: Input
|
|
110
|
-
}], size: [{
|
|
111
|
-
type: Input
|
|
112
|
-
}], placeholder: [{
|
|
113
|
-
type: Input
|
|
114
|
-
}], noHints: [{
|
|
115
|
-
type: Input
|
|
116
|
-
}], hasError: [{
|
|
117
|
-
type: Input
|
|
118
|
-
}], isMandatory: [{
|
|
119
|
-
type: Input
|
|
120
|
-
}], formInput: [{
|
|
121
|
-
type: ContentChild,
|
|
122
|
-
args: [MisInputDirective]
|
|
123
|
-
}] }); })();
|
|
113
|
+
args: [{ selector: "mis-input", template: "<div\n [class]=\"'input-container ' + size()\"\n [ngClass]=\"{\n rounded: type() === 'rounded',\n floating: type() === 'floating',\n 'has-error': isInvalid(),\n 'no-hint': noHints(),\n 'mis-disabled': inputCtrl()?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder() || formInput()?.el.nativeElement.placeholder }}<span *ngIf=\"isMandatory()\" style=\"color: red;\">*</span></span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}.input-container{position:relative;padding-bottom:24px}.input-container.mis-disabled .input-wrapper{pointer-events:none!important}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all ease-in 60ms;background-color:#fff;padding:3px 16px;gap:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::placeholder{transition:all ease-in .1s;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all ease-in .15s}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937B2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded input{box-sizing:initial}.input-container.rounded.sm input{padding:3px 16px}.input-container.rounded.md input{padding:9px 16px}.input-container.rounded.lg input{padding:15px 16px}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0;padding:0}.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper:focus-within{border:1px solid #0937b2}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{margin-left:16px;transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder,.input-container.floating .input-wrapper input:focus+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-hint],.input-container [mis-input-error]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}\n"] }]
|
|
114
|
+
}], () => [], null); })();
|
|
124
115
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MisInputComponent, { className: "MisInputComponent" }); })();
|
|
125
116
|
|
|
126
117
|
class MisInputModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mis-crystal-design-system-input.mjs","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.html","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef,
|
|
1
|
+
{"version":3,"file":"mis-crystal-design-system-input.mjs","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.html","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import { Directive, ElementRef, OnInit, Optional, Self, signal, effect, OnDestroy, inject, DestroyRef } from \"@angular/core\";\nimport { NgControl } from \"@angular/forms\";\nimport { takeUntilDestroyed } from \"@angular/core/rxjs-interop\";\n\n@Directive({\n selector: \"input[misInput]\"\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n // Public signal to expose directive state\n public validity = signal<boolean>(true);\n \n // Dependencies injected for use with signals\n public el = inject(ElementRef);\n public control = inject(NgControl, { optional: true, self: true });\n private destroyRef = inject(DestroyRef); // Provides a reference for automatic cleanup\n\n constructor() {\n if (this.control?.control) {\n this.control.control.statusChanges\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.validity.set(!this.control!.control!.invalid);\n });\n }\n }\n\n ngOnInit(): void {\n // No need for explicit subscription in ngOnInit with the constructor logic\n }\n \n ngOnDestroy(): void {\n // `takeUntilDestroyed` handles cleanup automatically.\n }\n}\n\n\n","<div\n [class]=\"'input-container ' + size()\"\n [ngClass]=\"{\n rounded: type() === 'rounded',\n floating: type() === 'floating',\n 'has-error': isInvalid(),\n 'no-hint': noHints(),\n 'mis-disabled': inputCtrl()?.disabled\n }\"\n>\n <div class=\"input-wrapper\">\n <ng-content select=\"[mis-input-icon]\"></ng-content>\n <div class=\"mis-input\">\n <ng-content select=\"input\"></ng-content>\n <span class=\"mis-placeholder\">{{ placeholder() || formInput()?.el.nativeElement.placeholder }}<span *ngIf=\"isMandatory()\" style=\"color: red;\">*</span></span>\n </div>\n <ng-content select=\"[mis-input-act]\"></ng-content>\n </div>\n <ng-content select=\"[mis-input-hint]\"></ng-content>\n <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>\n\n","import { Component, OnInit, OnDestroy, ViewEncapsulation, computed, contentChild, input, effect, signal } from \"@angular/core\";\nimport { AbstractControl } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\n\n@Component({\n selector: \"mis-input\",\n templateUrl: \"./mis-input.component.html\",\n styleUrls: [\"./mis-input.component.scss\"],\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n // Signal Inputs replacing @Input()\n public type = input<\"rounded\" | \"floating\">(\"floating\");\n public size = input<\"sm\" | \"md\" | \"lg\">(\"sm\");\n public placeholder = input<string | undefined>(undefined);\n public noHints = input<boolean>(false);\n public hasError = input<boolean>(false);\n public isMandatory = input<boolean>(false);\n\n // Content Child as a signal\n public formInput = contentChild(MisInputDirective);\n\n // Use a computed signal to derive the input control from the content child.\n // This will automatically update when the content child becomes available.\n public inputCtrl = computed(() => this.formInput()?.control?.control || null);\n\n // Use a computed signal to derive the validity state.\n // It reads the signal from the directive and updates whenever the directive's signal changes.\n public inputValidity = computed(() => this.formInput()?.validity() ?? true);\n\n constructor() {\n // This effect is now only for a side-effect (modifying a DOM element)\n // and no longer writes to signals.\n effect(() => {\n const input = this.formInput();\n if (input && this.type() === 'floating') {\n if (!this.placeholder() && input.el.nativeElement.placeholder) {\n input.el.nativeElement.placeholder = '';\n }\n }\n });\n }\n\n ngOnInit(): void {}\n ngOnDestroy(): void {}\n\n // Computed signal to determine the overall invalid state\n public isInvalid = computed(() => !this.inputValidity() || this.hasError());\n}\n\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule } from \"@angular/forms\";\nimport { MisInputDirective } from \"./directives/input/input.directive\";\nimport { MisInputComponent } from \"./mis-input.component\";\n\n@NgModule({\n declarations: [MisInputComponent, MisInputDirective],\n imports: [CommonModule, FormsModule],\n exports: [MisInputComponent, MisInputDirective]\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component,
|
|
2
|
+
import { input, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
@@ -7,22 +7,19 @@ const _c0 = a0 => ({ mobile: a0 });
|
|
|
7
7
|
class LoaderComponent {
|
|
8
8
|
constructor() {
|
|
9
9
|
/** Controls loader size */
|
|
10
|
-
this.mobileView = false;
|
|
10
|
+
this.mobileView = input(false);
|
|
11
11
|
}
|
|
12
|
-
ngOnInit() { }
|
|
13
12
|
static { this.ɵfac = function LoaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LoaderComponent)(); }; }
|
|
14
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoaderComponent, selectors: [["mis-loader"]], inputs: { mobileView: "mobileView" }, decls: 1, vars: 3, consts: [["id", "spinner", 3, "ngClass"]], template: function LoaderComponent_Template(rf, ctx) { if (rf & 1) {
|
|
13
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LoaderComponent, selectors: [["mis-loader"]], inputs: { mobileView: [1, "mobileView"] }, decls: 1, vars: 3, consts: [["id", "spinner", 3, "ngClass"]], template: function LoaderComponent_Template(rf, ctx) { if (rf & 1) {
|
|
15
14
|
i0.ɵɵelement(0, "div", 0);
|
|
16
15
|
} if (rf & 2) {
|
|
17
|
-
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c0, ctx.mobileView));
|
|
18
|
-
} }, dependencies: [i1.NgClass], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3
|
|
16
|
+
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c0, ctx.mobileView()));
|
|
17
|
+
} }, dependencies: [i1.NgClass], styles: ["[_ngcontent-%COMP%]:root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}#spinner[_ngcontent-%COMP%]{-webkit-animation:_ngcontent-%COMP%_frames 1s infinite linear;animation:_ngcontent-%COMP%_frames 1s infinite linear;background:transparent;border:4px solid #e0e0e0;border-radius:100%;border-top-color:#0937b2;width:40px;height:40px;padding:0;position:absolute}@keyframes _ngcontent-%COMP%_frames{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.mobile[_ngcontent-%COMP%]{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#0937b2!important}"], changeDetection: 0 }); }
|
|
19
18
|
}
|
|
20
19
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LoaderComponent, [{
|
|
21
20
|
type: Component,
|
|
22
|
-
args: [{ selector: "mis-loader", template: "<div\n id=\"spinner\"\n [ngClass]=\"{\n mobile: mobileView\n }\"\n></div>\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3
|
|
23
|
-
}],
|
|
24
|
-
type: Input
|
|
25
|
-
}] }); })();
|
|
21
|
+
args: [{ selector: "mis-loader", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n id=\"spinner\"\n [ngClass]=\"{\n mobile: mobileView()\n }\"\n></div>\n", styles: [":root{--pmry-200: #99BAF7;--pmry-100: #CBDDFB;--pmry-500: #0937B2;--pmry-400: #3C68D0;--pmry-600: #062A99;--pmry-700: #041F80;--pmry-300: #638FE7;--pmry-800: #021567;--pmry-900: #010F55;--sec-d-purple: #40447F;--sec-maroon: #6B034E;--sec-mud-red: #B23600;--sec-orange: #ED711C;--sec-purple: #815FD5;--sec-teal: #10ADAE;--sec-yellow: #D4900C;--sec-green: #547F40;--sec-bright-green: #27D22E;--sec-dark-teal: #035F6B;--sec-chocolate: #7C2F33;--sec-rube-pink: #C13D6D;--sec-cerulean: #0087B2;--sem-error: #B00020;--sem-info: #0091FF;--sem-warning: #FF9D00;--sem-success: #38AF49;--grey-bg-1: #FAFAFA;--grey-bg: #F5F5F5;--grey-seperators: #E0E0E0;--grey-disabled: #C8CDD3;--grey-hover: #F5F7FC;--grey-pressed: #E6EBF7;--grey-row: #F5F7FC;--dec-light-yellow: #F4E7C3;--dec-light-purple: #DACFF9;--dec-light-green: #E4F5E9;--dec-light-green2: #F1FFF3;--dec-light-pink: #FAE1EA;--dec-: #F4CBC1;--dec-lt-orange: #FAEFED;--dec-light-blue: #CFECF9;--dec-row-selection: #F1FDF8;--dec-row-selection2: #F2FBFF;--dec-row-lines: #D3E1E9;--text-white: #FFFFFF;--text-disabled: #929DAB;--text-muted: #6A737D;--text-black: #181F33;--MR-solid-blue2:#C8D5F6;--MR-solid-purple:#C9C3FB;--MR-solid-orange:#EEAC9F;--MR-solid-green:#ACDADA;--MR-solid-brown:#E8C8AF;--MR-solid-yellow:#FFEFC7;--MR-solid-blue:#BBE6FF;--MR-solid-pink:#FFC6F2;--tr-hover:#F0F3FA;--tr-pressed:#DAE1F3}#spinner{-webkit-animation:frames 1s infinite linear;animation:frames 1s infinite linear;background:transparent;border:4px solid #e0e0e0;border-radius:100%;border-top-color:#0937b2;width:40px;height:40px;padding:0;position:absolute}@keyframes frames{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.mobile{height:20px!important;width:20px!important;border:2px solid #e0e0e0!important;border-top-color:#0937b2!important}\n"] }]
|
|
22
|
+
}], null, null); })();
|
|
26
23
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LoaderComponent, { className: "LoaderComponent" }); })();
|
|
27
24
|
|
|
28
25
|
class LoaderModule {
|