monkey-style-guide-v2 0.0.35 → 0.0.38
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/assets/scss/directives/_popover.scss +9 -1
- package/assets/scss/util/_icon.scss +1 -1
- package/fesm2022/monkey-style-guide-v2.mjs +562 -250
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/lib/components/filter-bar/components/currency/currency.component.d.ts +7 -0
- package/lib/components/filter-bar/components/currency/index.d.ts +1 -0
- package/lib/components/filter-bar/components/date/date.component.d.ts +11 -0
- package/lib/components/filter-bar/components/date/index.d.ts +1 -0
- package/lib/components/filter-bar/components/index.d.ts +4 -0
- package/lib/components/filter-bar/components/input/index.d.ts +1 -0
- package/lib/components/filter-bar/components/input/input.component.d.ts +6 -0
- package/lib/components/filter-bar/components/status/index.d.ts +1 -0
- package/lib/components/filter-bar/components/status/status.component.d.ts +5 -0
- package/lib/components/filter-bar/filter-bar.component.d.ts +4 -0
- package/lib/components/option/option.component.d.ts +2 -0
- package/monkey-style-guide-v2-0.0.38.tgz +0 -0
- package/package.json +1 -1
- package/monkey-style-guide-v2-0.0.35.tgz +0 -0
|
@@ -168,7 +168,7 @@ class UtilIconComponent {
|
|
|
168
168
|
d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 "
|
|
169
169
|
stroke="none"
|
|
170
170
|
fill-rule="evenodd"
|
|
171
|
-
fill="var(--mecx-color-theme-contrast-500"
|
|
171
|
+
fill="var(--mecx-color-theme-contrast-500)"
|
|
172
172
|
></path>
|
|
173
173
|
</svg>
|
|
174
174
|
}
|
|
@@ -179,7 +179,7 @@ class UtilIconComponent {
|
|
|
179
179
|
d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268"
|
|
180
180
|
stroke="none"
|
|
181
181
|
fill-rule="evenodd"
|
|
182
|
-
fill="var(--mecx-color-theme-contrast-500"
|
|
182
|
+
fill="var(--mecx-color-theme-contrast-500)"
|
|
183
183
|
></path>
|
|
184
184
|
</svg>
|
|
185
185
|
}
|
|
@@ -350,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
350
350
|
d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 "
|
|
351
351
|
stroke="none"
|
|
352
352
|
fill-rule="evenodd"
|
|
353
|
-
fill="var(--mecx-color-theme-contrast-500"
|
|
353
|
+
fill="var(--mecx-color-theme-contrast-500)"
|
|
354
354
|
></path>
|
|
355
355
|
</svg>
|
|
356
356
|
}
|
|
@@ -361,7 +361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
361
361
|
d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268"
|
|
362
362
|
stroke="none"
|
|
363
363
|
fill-rule="evenodd"
|
|
364
|
-
fill="var(--mecx-color-theme-contrast-500"
|
|
364
|
+
fill="var(--mecx-color-theme-contrast-500)"
|
|
365
365
|
></path>
|
|
366
366
|
</svg>
|
|
367
367
|
}
|
|
@@ -913,7 +913,7 @@ class MonkeyButtonComponent {
|
|
|
913
913
|
return this.elementRef.nativeElement;
|
|
914
914
|
}
|
|
915
915
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
916
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n @if (loading) {\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n }\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-600)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}
|
|
916
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n @if (loading) {\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n }\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-600)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
917
917
|
}
|
|
918
918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
919
919
|
type: Component,
|
|
@@ -921,7 +921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
921
921
|
'data-testid': 'monkey-button',
|
|
922
922
|
'[attr.id]': 'id',
|
|
923
923
|
'[id]': 'id'
|
|
924
|
-
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n @if (loading) {\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n }\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-600)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}
|
|
924
|
+
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n <ng-content *ngIf=\"!loading\" select=\"[first]\"></ng-content>\n <span><ng-content></ng-content></span>\n <ng-content *ngIf=\"!loading\" select=\"[last]\"></ng-content>\n @if (loading) {\n <util-icon class=\"mecx-button-loading\" name=\"loading\" />\n }\n </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);padding:0px var(--mecx-spaces-small);flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button .mecx-button-loading{display:flex;background:transparent}monkey-button .mecx-button .mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary.error{color:var(--mecx-color-white);background:var(--mecx-color-error-500)}monkey-button .mecx-button.primary.success{color:var(--mecx-color-white);background:var(--mecx-color-success-500)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-600)}monkey-button .mecx-button.primary:hover:not(:disabled).error{background:var(--mecx-color-error-600)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.secondary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.secondary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled) util-icon svg path{fill:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary:hover:not(:disabled).error{color:var(--mecx-color-error-500)}monkey-button .mecx-button.tertiary:hover:not(:disabled).success{color:var(--mecx-color-success-500)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:focus-visible.error{outline-color:var(--mecx-color-error-500)}monkey-button .mecx-button:focus-visible.success{outline-color:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled){opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main)}monkey-button .mecx-button:active:not(:disabled).primary.error{background:var(--mecx-color-error-500)}monkey-button .mecx-button:active:not(:disabled).primary.success{background:var(--mecx-color-success-500)}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
925
925
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
926
926
|
type: Input
|
|
927
927
|
}], color: [{
|
|
@@ -1108,7 +1108,7 @@ class MonkeyPopoverContentComponent {
|
|
|
1108
1108
|
}
|
|
1109
1109
|
ngAfterViewInit() {
|
|
1110
1110
|
setTimeout(() => {
|
|
1111
|
-
const focusable = this.host.nativeElement.querySelector('button,
|
|
1111
|
+
const focusable = this.host.nativeElement.querySelector('button, input, select, textarea');
|
|
1112
1112
|
focusable?.focus();
|
|
1113
1113
|
});
|
|
1114
1114
|
}
|
|
@@ -1707,7 +1707,7 @@ class MonkeyCheckboxComponent {
|
|
|
1707
1707
|
useExisting: MonkeyCheckboxComponent,
|
|
1708
1708
|
multi: true
|
|
1709
1709
|
}
|
|
1710
|
-
], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus($event)\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
|
|
1710
|
+
], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus($event)\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox util-icon{background:transparent}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
|
|
1711
1711
|
trigger('iconAnimation', [
|
|
1712
1712
|
transition(':enter', [
|
|
1713
1713
|
animate('250ms ease-in-out', keyframes([
|
|
@@ -1767,7 +1767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1767
1767
|
'[class.sm]': 'size.includes("sm")',
|
|
1768
1768
|
'[class.md]': 'size.includes("md")',
|
|
1769
1769
|
'[class.lg]': 'size.includes("lg")'
|
|
1770
|
-
}, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus($event)\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
|
|
1770
|
+
}, template: "@if (hasHeader) {\n <div class=\"header\">\n <ng-content select=\"monkey-label\" />\n <ng-content select=\"monkey-helper\" />\n </div>\n}\n<label [attr.for]=\"inputId\">\n <input\n type=\"checkbox\"\n [checked]=\"value\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n (change)=\"onChangeEvent($event)\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus($event)\"\n [id]=\"inputId\"\n [required]=\"required\"\n />\n <span class=\"checkbox\">\n @if (indeterminate) {\n <util-icon class=\"icon\" name=\"minus\" />\n } @else if (value) {\n <util-icon class=\"icon\" name=\"check\" />\n }\n </span>\n <span class=\"checkbox-label\">\n <ng-content></ng-content>\n </span>\n</label>\n@if (showFooter) {\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\" />\n }\n @case ('info') {\n <ng-content select=\"monkey-info\" />\n }\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:var(--mecx-spaces-xs);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:var(--mecx-color-white);border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox util-icon{background:transparent}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
|
|
1771
1771
|
}], propDecorators: { infoChildren: [{
|
|
1772
1772
|
type: ContentChildren,
|
|
1773
1773
|
args: [MonkeyInfoDirective, { descendants: true }]
|
|
@@ -2260,7 +2260,7 @@ class MonkeyFormFieldComponent {
|
|
|
2260
2260
|
}
|
|
2261
2261
|
}
|
|
2262
2262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n
|
|
2263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n<div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\"></ng-content>\n }\n @case ('info') {\n <div class=\"mecx-form-field-info\">\n <ng-content select=\"monkey-info\"></ng-content>\n </div>\n }\n }\n</div>\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2264
2264
|
}
|
|
2265
2265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2266
2266
|
type: Component,
|
|
@@ -2273,7 +2273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2273
2273
|
'[attr.id]': 'id',
|
|
2274
2274
|
'[id]': 'id',
|
|
2275
2275
|
'[class]': 'size'
|
|
2276
|
-
}, standalone: false, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n
|
|
2276
|
+
}, standalone: false, template: "@if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-content select=\"monkey-label\"></ng-content>\n </label>\n <ng-content select=\"monkey-helper\"></ng-content>\n </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n @if (hasPrefix) {\n <ng-content select=\"monkey-prefix\"></ng-content>\n }\n @if (getSymbols(); as symbols) {\n <div class=\"mecx-form-field-prefix-symbol\">\n {{ symbols }}\n </div>\n }\n\n <ng-content></ng-content>\n\n @if (showClear) {\n <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n }\n @if (showCalendar) {\n <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n }\n @if (showLoading) {\n <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\n }\n\n @if (hasSuffix) {\n <ng-content select=\"monkey-suffix\"></ng-content>\n }\n</div>\n\n<div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n @switch (getFooterMessages()) {\n @case ('error') {\n <ng-content select=\"monkey-error\"></ng-content>\n }\n @case ('info') {\n <div class=\"mecx-form-field-info\">\n <ng-content select=\"monkey-info\"></ng-content>\n </div>\n }\n }\n</div>\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
|
|
2277
2277
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2278
2278
|
type: Input
|
|
2279
2279
|
}], hideAction: [{
|
|
@@ -3380,6 +3380,7 @@ class MonkeyOptionComponent {
|
|
|
3380
3380
|
this.selected = false;
|
|
3381
3381
|
this.tabIndex = 0;
|
|
3382
3382
|
this.id = this.idGenerator.getId('mecx-option-');
|
|
3383
|
+
this.elementRef = inject(ElementRef);
|
|
3383
3384
|
}
|
|
3384
3385
|
get displayContent() {
|
|
3385
3386
|
return (this._content?.nativeElement.textContent || '').trim();
|
|
@@ -3402,6 +3403,9 @@ class MonkeyOptionComponent {
|
|
|
3402
3403
|
this.handleAction(event);
|
|
3403
3404
|
}
|
|
3404
3405
|
}
|
|
3406
|
+
get element() {
|
|
3407
|
+
return this.elementRef.nativeElement;
|
|
3408
|
+
}
|
|
3405
3409
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3406
3410
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
|
|
3407
3411
|
@if (type === 'checkbox') {
|
|
@@ -3457,14 +3461,480 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3457
3461
|
* This style guide was developed by Monkey Exchange Team
|
|
3458
3462
|
* MIT Licence
|
|
3459
3463
|
************************* */
|
|
3464
|
+
class MonkeyRadioButtonComponent {
|
|
3465
|
+
get classes() {
|
|
3466
|
+
return `${this.position} ${this.size}`;
|
|
3467
|
+
}
|
|
3468
|
+
get disabled() {
|
|
3469
|
+
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
3470
|
+
return this.ngControl.disabled;
|
|
3471
|
+
}
|
|
3472
|
+
return this._disabled;
|
|
3473
|
+
}
|
|
3474
|
+
set disabled(value) {
|
|
3475
|
+
this._disabled = value;
|
|
3476
|
+
if (this.focused) {
|
|
3477
|
+
this.focused = false;
|
|
3478
|
+
this.stateChanges.next();
|
|
3479
|
+
}
|
|
3480
|
+
}
|
|
3481
|
+
get required() {
|
|
3482
|
+
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
3483
|
+
}
|
|
3484
|
+
set required(value) {
|
|
3485
|
+
this._required = value;
|
|
3486
|
+
this.stateChanges.next();
|
|
3487
|
+
}
|
|
3488
|
+
set value(value) {
|
|
3489
|
+
if (this._value !== value) {
|
|
3490
|
+
this._value = value;
|
|
3491
|
+
this._onChange(value);
|
|
3492
|
+
}
|
|
3493
|
+
}
|
|
3494
|
+
get value() {
|
|
3495
|
+
return this._value;
|
|
3496
|
+
}
|
|
3497
|
+
constructor(changeDetectorRef, formField) {
|
|
3498
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
3499
|
+
this.formField = formField;
|
|
3500
|
+
this.tabIndex = 0;
|
|
3501
|
+
this.onChange = new EventEmitter();
|
|
3502
|
+
this.onSearch = new EventEmitter();
|
|
3503
|
+
this.position = 'horizontal';
|
|
3504
|
+
this.size = 'lg';
|
|
3505
|
+
this._value = null;
|
|
3506
|
+
this._destroyRef = inject(DestroyRef);
|
|
3507
|
+
this.idGenerator = inject(IdGenerator);
|
|
3508
|
+
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
3509
|
+
this._elementRef = inject(ElementRef);
|
|
3510
|
+
this.focused = false;
|
|
3511
|
+
this._disabled = false;
|
|
3512
|
+
this.id = this.idGenerator.getId('monkey-radiobutton-');
|
|
3513
|
+
this.stateChanges = new Subject();
|
|
3514
|
+
this.type = 'radio-button';
|
|
3515
|
+
this._onChange = () => { };
|
|
3516
|
+
this._onTouched = () => { };
|
|
3517
|
+
if (this.ngControl) {
|
|
3518
|
+
this.ngControl.valueAccessor = this;
|
|
3519
|
+
}
|
|
3520
|
+
}
|
|
3521
|
+
changeSelected() {
|
|
3522
|
+
setTimeout(() => {
|
|
3523
|
+
if (this.options) {
|
|
3524
|
+
this.options.forEach((opt) => {
|
|
3525
|
+
opt.selected = opt.value() === this.value;
|
|
3526
|
+
});
|
|
3527
|
+
}
|
|
3528
|
+
this.changeDetectorRef.markForCheck();
|
|
3529
|
+
});
|
|
3530
|
+
}
|
|
3531
|
+
initializeOptions() {
|
|
3532
|
+
setTimeout(() => {
|
|
3533
|
+
this.options?.forEach((option) => {
|
|
3534
|
+
option.type = 'radio';
|
|
3535
|
+
if (!option.action) {
|
|
3536
|
+
option.action = this.selectOption.bind(this, option);
|
|
3537
|
+
}
|
|
3538
|
+
});
|
|
3539
|
+
this.changeDetectorRef.markForCheck();
|
|
3540
|
+
}, 0);
|
|
3541
|
+
}
|
|
3542
|
+
ngAfterContentInit() {
|
|
3543
|
+
this.initializeOptions();
|
|
3544
|
+
this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
3545
|
+
this.initializeOptions();
|
|
3546
|
+
this.changeSelected();
|
|
3547
|
+
});
|
|
3548
|
+
}
|
|
3549
|
+
selectOption(option) {
|
|
3550
|
+
if (!option.disabled && !this.disabled) {
|
|
3551
|
+
this.value = option.value();
|
|
3552
|
+
this._onChange(this.value);
|
|
3553
|
+
this.onChange.emit(this.value);
|
|
3554
|
+
this.options.forEach((opt) => {
|
|
3555
|
+
opt.selected = opt.value() === this.value;
|
|
3556
|
+
});
|
|
3557
|
+
}
|
|
3558
|
+
}
|
|
3559
|
+
writeValue(value) {
|
|
3560
|
+
this.value = value;
|
|
3561
|
+
this.changeSelected();
|
|
3562
|
+
}
|
|
3563
|
+
onContainerClick(event) {
|
|
3564
|
+
if (this.disabled)
|
|
3565
|
+
return;
|
|
3566
|
+
this._elementRef.nativeElement.focus();
|
|
3567
|
+
}
|
|
3568
|
+
_onFocus() {
|
|
3569
|
+
if (!this.disabled) {
|
|
3570
|
+
this.focused = true;
|
|
3571
|
+
this._onTouched();
|
|
3572
|
+
this.stateChanges.next();
|
|
3573
|
+
}
|
|
3574
|
+
}
|
|
3575
|
+
_onBlur() {
|
|
3576
|
+
this.focused = false;
|
|
3577
|
+
this.stateChanges.next();
|
|
3578
|
+
}
|
|
3579
|
+
registerOnChange(fn) {
|
|
3580
|
+
this._onChange = fn;
|
|
3581
|
+
}
|
|
3582
|
+
registerOnTouched(fn) {
|
|
3583
|
+
this._onTouched = fn;
|
|
3584
|
+
}
|
|
3585
|
+
setDisabledState(isDisabled) {
|
|
3586
|
+
this.disabled = isDisabled;
|
|
3587
|
+
this.initializeOptions();
|
|
3588
|
+
}
|
|
3589
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3590
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: MonkeyRadioButtonComponent, isStandalone: true, selector: "monkey-radiobutton", inputs: { tabIndex: "tabIndex", position: "position", size: "size", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-radiobutton" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-radiobutton-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "this.classes" }, classAttribute: "mecx-radiobutton" }, providers: [
|
|
3591
|
+
// eslint-disable-next-line no-use-before-define
|
|
3592
|
+
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
3593
|
+
], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3594
|
+
}
|
|
3595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
|
|
3596
|
+
type: Component,
|
|
3597
|
+
args: [{ selector: 'monkey-radiobutton', imports: [CommonModule, ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
3598
|
+
// eslint-disable-next-line no-use-before-define
|
|
3599
|
+
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
3600
|
+
], host: {
|
|
3601
|
+
'data-testid': 'monkey-radiobutton',
|
|
3602
|
+
class: 'mecx-radiobutton',
|
|
3603
|
+
'[class.mecx-disabled]': 'disabled',
|
|
3604
|
+
'[class.mecx-radiobutton-focused]': 'focused',
|
|
3605
|
+
'[attr.id]': 'id',
|
|
3606
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3607
|
+
'(focus)': '_onFocus()',
|
|
3608
|
+
'(blur)': '_onBlur()'
|
|
3609
|
+
}, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
|
|
3610
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
|
|
3611
|
+
type: Optional
|
|
3612
|
+
}] }], propDecorators: { options: [{
|
|
3613
|
+
type: ContentChildren,
|
|
3614
|
+
args: [MonkeyOptionComponent]
|
|
3615
|
+
}], tabIndex: [{
|
|
3616
|
+
type: Input
|
|
3617
|
+
}], onChange: [{
|
|
3618
|
+
type: Output
|
|
3619
|
+
}], onSearch: [{
|
|
3620
|
+
type: Output
|
|
3621
|
+
}], position: [{
|
|
3622
|
+
type: Input
|
|
3623
|
+
}], size: [{
|
|
3624
|
+
type: Input
|
|
3625
|
+
}], classes: [{
|
|
3626
|
+
type: HostBinding,
|
|
3627
|
+
args: ['class']
|
|
3628
|
+
}], disabled: [{
|
|
3629
|
+
type: Input,
|
|
3630
|
+
args: [{ transform: booleanAttribute }]
|
|
3631
|
+
}], required: [{
|
|
3632
|
+
type: Input,
|
|
3633
|
+
args: [{ transform: booleanAttribute }]
|
|
3634
|
+
}], value: [{
|
|
3635
|
+
type: Input
|
|
3636
|
+
}] } });
|
|
3637
|
+
|
|
3638
|
+
/** ************************
|
|
3639
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3640
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3641
|
+
* MIT Licence
|
|
3642
|
+
************************* */
|
|
3643
|
+
|
|
3644
|
+
/** ************************
|
|
3645
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3646
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3647
|
+
* MIT Licence
|
|
3648
|
+
************************* */
|
|
3649
|
+
class MonkeyFilterBarCurrencyComponent {
|
|
3650
|
+
constructor() {
|
|
3651
|
+
this.option = 'FROM';
|
|
3652
|
+
this.value = 0;
|
|
3653
|
+
}
|
|
3654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarCurrencyComponent, isStandalone: true, selector: "monkey-filter-bar-currency", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-currency'", "class.mecx-filter-bar-currency-disabled": "_disabled", "class.mecx-filter-bar-currency-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-currency" }, ngImport: i0, template: `
|
|
3656
|
+
<monkey-radiobutton [(ngModel)]="option">
|
|
3657
|
+
<monkey-option [value]="item" *ngFor="let item of ['FROM', 'UNTIL']">
|
|
3658
|
+
{{ item }}
|
|
3659
|
+
</monkey-option>
|
|
3660
|
+
</monkey-radiobutton>
|
|
3661
|
+
<monkey-form-field>
|
|
3662
|
+
<input type="text" monkey-input-currency [(ngModel)]="value" />
|
|
3663
|
+
<monkey-info>
|
|
3664
|
+
Helper text Helper text Helper text Helper text Helper text Helper text
|
|
3665
|
+
</monkey-info>
|
|
3666
|
+
<monkey-suffix>
|
|
3667
|
+
<i class="mk-i mk-i-calendar"></i>
|
|
3668
|
+
</monkey-suffix>
|
|
3669
|
+
</monkey-form-field>
|
|
3670
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["tabIndex", "position", "size", "disabled", "required", "value"], outputs: ["onChange", "onSearch"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }, { kind: "directive", type: MonkeySuffixDirective, selector: "monkey-suffix", inputs: ["hasAction"] }] }); }
|
|
3671
|
+
}
|
|
3672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarCurrencyComponent, decorators: [{
|
|
3673
|
+
type: Component,
|
|
3674
|
+
args: [{ selector: 'monkey-filter-bar-currency', imports: [
|
|
3675
|
+
CommonModule,
|
|
3676
|
+
FormsModule,
|
|
3677
|
+
MonkeyRadioButtonComponent,
|
|
3678
|
+
MonkeyOptionComponent,
|
|
3679
|
+
MonkeyFormFieldModule,
|
|
3680
|
+
MonkeyInputModule,
|
|
3681
|
+
MonkeyDirectivesModule
|
|
3682
|
+
], template: `
|
|
3683
|
+
<monkey-radiobutton [(ngModel)]="option">
|
|
3684
|
+
<monkey-option [value]="item" *ngFor="let item of ['FROM', 'UNTIL']">
|
|
3685
|
+
{{ item }}
|
|
3686
|
+
</monkey-option>
|
|
3687
|
+
</monkey-radiobutton>
|
|
3688
|
+
<monkey-form-field>
|
|
3689
|
+
<input type="text" monkey-input-currency [(ngModel)]="value" />
|
|
3690
|
+
<monkey-info>
|
|
3691
|
+
Helper text Helper text Helper text Helper text Helper text Helper text
|
|
3692
|
+
</monkey-info>
|
|
3693
|
+
<monkey-suffix>
|
|
3694
|
+
<i class="mk-i mk-i-calendar"></i>
|
|
3695
|
+
</monkey-suffix>
|
|
3696
|
+
</monkey-form-field>
|
|
3697
|
+
`, host: {
|
|
3698
|
+
'[attr.data-testid]': "'monkey-filter-bar-currency'",
|
|
3699
|
+
class: 'mecx-filter-bar-currency',
|
|
3700
|
+
'[class.mecx-filter-bar-currency-disabled]': '_disabled',
|
|
3701
|
+
'[class.mecx-filter-bar-currency-focused]': 'focused',
|
|
3702
|
+
'[attr.id]': 'id',
|
|
3703
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3704
|
+
'(focus)': '_onFocus()',
|
|
3705
|
+
'(blur)': '_onBlur()'
|
|
3706
|
+
}, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"] }]
|
|
3707
|
+
}] });
|
|
3708
|
+
|
|
3709
|
+
/** ************************
|
|
3710
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3711
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3712
|
+
* MIT Licence
|
|
3713
|
+
************************* */
|
|
3714
|
+
class MonkeyFilterBarDateComponent {
|
|
3715
|
+
constructor() {
|
|
3716
|
+
this.internalTarget = null;
|
|
3717
|
+
this.onClose = new EventEmitter();
|
|
3718
|
+
this.showPopOver = false;
|
|
3719
|
+
this.closePopOver = () => {
|
|
3720
|
+
this.showPopOver = false;
|
|
3721
|
+
};
|
|
3722
|
+
}
|
|
3723
|
+
onShowPopOver(el) {
|
|
3724
|
+
let { target } = el;
|
|
3725
|
+
if (target.tagName.toLowerCase() === 'div') {
|
|
3726
|
+
target = target.offsetParent;
|
|
3727
|
+
}
|
|
3728
|
+
this.internalTarget = target;
|
|
3729
|
+
this.showPopOver = true;
|
|
3730
|
+
}
|
|
3731
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3732
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarDateComponent, isStandalone: true, selector: "monkey-filter-bar-date", inputs: { internalTarget: "internalTarget" }, outputs: { onClose: "onClose" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-date'", "class.mecx-filter-bar-date-disabled": "_disabled", "class.mecx-filter-bar-date-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-date" }, ngImport: i0, template: `
|
|
3733
|
+
<monkey-option class="option"> 1 semana atrás </monkey-option>
|
|
3734
|
+
<monkey-option class="option"> 1 mês atras </monkey-option>
|
|
3735
|
+
<monkey-option class="option"> 3 mêses atras </monkey-option>
|
|
3736
|
+
<monkey-option class="option" (click)="onShowPopOver($event)"> Personalizado </monkey-option>
|
|
3737
|
+
|
|
3738
|
+
<ng-template
|
|
3739
|
+
[monkeyPopover]="showPopOver"
|
|
3740
|
+
[monkeyPopoverTarget]="internalTarget"
|
|
3741
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
3742
|
+
monkeyPopoverDir="ltr"
|
|
3743
|
+
[monkeyPopoverHideHeader]="true"
|
|
3744
|
+
[hideQuickAction]="true"
|
|
3745
|
+
>
|
|
3746
|
+
<monkey-date-range minDate="2024-12-20" maxDate="2025-06-20" hideActions> </monkey-date-range>
|
|
3747
|
+
</ng-template>
|
|
3748
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }] }); }
|
|
3749
|
+
}
|
|
3750
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarDateComponent, decorators: [{
|
|
3751
|
+
type: Component,
|
|
3752
|
+
args: [{ selector: 'monkey-filter-bar-date', imports: [
|
|
3753
|
+
CommonModule,
|
|
3754
|
+
FormsModule,
|
|
3755
|
+
MonkeyDirectivesModule,
|
|
3756
|
+
MonkeyOptionComponent,
|
|
3757
|
+
MonkeyDateRangeComponent
|
|
3758
|
+
], template: `
|
|
3759
|
+
<monkey-option class="option"> 1 semana atrás </monkey-option>
|
|
3760
|
+
<monkey-option class="option"> 1 mês atras </monkey-option>
|
|
3761
|
+
<monkey-option class="option"> 3 mêses atras </monkey-option>
|
|
3762
|
+
<monkey-option class="option" (click)="onShowPopOver($event)"> Personalizado </monkey-option>
|
|
3763
|
+
|
|
3764
|
+
<ng-template
|
|
3765
|
+
[monkeyPopover]="showPopOver"
|
|
3766
|
+
[monkeyPopoverTarget]="internalTarget"
|
|
3767
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
3768
|
+
monkeyPopoverDir="ltr"
|
|
3769
|
+
[monkeyPopoverHideHeader]="true"
|
|
3770
|
+
[hideQuickAction]="true"
|
|
3771
|
+
>
|
|
3772
|
+
<monkey-date-range minDate="2024-12-20" maxDate="2025-06-20" hideActions> </monkey-date-range>
|
|
3773
|
+
</ng-template>
|
|
3774
|
+
`, host: {
|
|
3775
|
+
'[attr.data-testid]': "'monkey-filter-bar-date'",
|
|
3776
|
+
class: 'mecx-filter-bar-date',
|
|
3777
|
+
'[class.mecx-filter-bar-date-disabled]': '_disabled',
|
|
3778
|
+
'[class.mecx-filter-bar-date-focused]': 'focused',
|
|
3779
|
+
'[attr.id]': 'id',
|
|
3780
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3781
|
+
'(focus)': '_onFocus()',
|
|
3782
|
+
'(blur)': '_onBlur()'
|
|
3783
|
+
}, styles: [":host{display:flex;flex-direction:column}\n"] }]
|
|
3784
|
+
}], propDecorators: { internalTarget: [{
|
|
3785
|
+
type: Input
|
|
3786
|
+
}], onClose: [{
|
|
3787
|
+
type: Output
|
|
3788
|
+
}] } });
|
|
3789
|
+
|
|
3790
|
+
/** ************************
|
|
3791
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3792
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3793
|
+
* MIT Licence
|
|
3794
|
+
************************* */
|
|
3795
|
+
class MonkeyFilterBarInputComponent {
|
|
3796
|
+
constructor() {
|
|
3797
|
+
this.value = '';
|
|
3798
|
+
}
|
|
3799
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarInputComponent, isStandalone: true, selector: "monkey-filter-bar-input", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-input'", "class.mecx-filter-bar-input-disabled": "_disabled", "class.mecx-filter-bar-input-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-input" }, ngImport: i0, template: `
|
|
3801
|
+
<monkey-form-field>
|
|
3802
|
+
<input type="text" monkey-input [(ngModel)]="value" />
|
|
3803
|
+
<monkey-info>
|
|
3804
|
+
Helper text Helper text Helper text Helper text Helper text Helper text
|
|
3805
|
+
</monkey-info>
|
|
3806
|
+
</monkey-form-field>
|
|
3807
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyInfoDirective, selector: "monkey-info" }] }); }
|
|
3808
|
+
}
|
|
3809
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarInputComponent, decorators: [{
|
|
3810
|
+
type: Component,
|
|
3811
|
+
args: [{ selector: 'monkey-filter-bar-input', imports: [
|
|
3812
|
+
CommonModule,
|
|
3813
|
+
FormsModule,
|
|
3814
|
+
MonkeyRadioButtonComponent,
|
|
3815
|
+
MonkeyOptionComponent,
|
|
3816
|
+
MonkeyFormFieldModule,
|
|
3817
|
+
MonkeyInputModule,
|
|
3818
|
+
MonkeyDirectivesModule
|
|
3819
|
+
], template: `
|
|
3820
|
+
<monkey-form-field>
|
|
3821
|
+
<input type="text" monkey-input [(ngModel)]="value" />
|
|
3822
|
+
<monkey-info>
|
|
3823
|
+
Helper text Helper text Helper text Helper text Helper text Helper text
|
|
3824
|
+
</monkey-info>
|
|
3825
|
+
</monkey-form-field>
|
|
3826
|
+
`, host: {
|
|
3827
|
+
'[attr.data-testid]': "'monkey-filter-bar-input'",
|
|
3828
|
+
class: 'mecx-filter-bar-input',
|
|
3829
|
+
'[class.mecx-filter-bar-input-disabled]': '_disabled',
|
|
3830
|
+
'[class.mecx-filter-bar-input-focused]': 'focused',
|
|
3831
|
+
'[attr.id]': 'id',
|
|
3832
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3833
|
+
'(focus)': '_onFocus()',
|
|
3834
|
+
'(blur)': '_onBlur()'
|
|
3835
|
+
}, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px;max-width:240px}:host monkey-radiobutton{display:flex;flex-direction:column}:host monkey-radiobutton monkey-option{padding:0 24px 6px 0}\n"] }]
|
|
3836
|
+
}] });
|
|
3837
|
+
|
|
3838
|
+
/** ************************
|
|
3839
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3840
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3841
|
+
* MIT Licence
|
|
3842
|
+
************************* */
|
|
3843
|
+
class MonkeyStatusComponent {
|
|
3844
|
+
get class() {
|
|
3845
|
+
return `${this.type()} ${this.size()}`;
|
|
3846
|
+
}
|
|
3847
|
+
get id() {
|
|
3848
|
+
return this._id;
|
|
3849
|
+
}
|
|
3850
|
+
set id(value) {
|
|
3851
|
+
this._id = value || this._uid;
|
|
3852
|
+
}
|
|
3853
|
+
constructor() {
|
|
3854
|
+
this.type = input.required();
|
|
3855
|
+
this.size = input('md');
|
|
3856
|
+
this.label = input();
|
|
3857
|
+
this._uid = inject(IdGenerator).getId('monkey-status-');
|
|
3858
|
+
// eslint-disable-next-line no-self-assign
|
|
3859
|
+
this.id = this.id;
|
|
3860
|
+
}
|
|
3861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3862
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
3863
|
+
}
|
|
3864
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
|
|
3865
|
+
type: Component,
|
|
3866
|
+
args: [{ selector: 'monkey-status', imports: [CommonModule], host: {
|
|
3867
|
+
'data-testid': 'monkey-status',
|
|
3868
|
+
'[attr.id]': 'id',
|
|
3869
|
+
'[id]': 'id'
|
|
3870
|
+
}, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"] }]
|
|
3871
|
+
}], ctorParameters: () => [], propDecorators: { class: [{
|
|
3872
|
+
type: HostBinding,
|
|
3873
|
+
args: ['class']
|
|
3874
|
+
}], id: [{
|
|
3875
|
+
type: Input
|
|
3876
|
+
}] } });
|
|
3877
|
+
|
|
3878
|
+
/** ************************
|
|
3879
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3880
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3881
|
+
* MIT Licence
|
|
3882
|
+
************************* */
|
|
3883
|
+
|
|
3884
|
+
/** ************************
|
|
3885
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3886
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3887
|
+
* MIT Licence
|
|
3888
|
+
************************* */
|
|
3889
|
+
class MonkeyFilterBarStatusComponent {
|
|
3890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarStatusComponent, isStandalone: true, selector: "monkey-filter-bar-status", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar-status'", "class.mecx-filter-bar-status-disabled": "_disabled", "class.mecx-filter-bar-status-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar-status" }, ngImport: i0, template: `
|
|
3892
|
+
<monkey-checkbox>Disponível</monkey-checkbox>
|
|
3893
|
+
<monkey-checkbox>Antecipado</monkey-checkbox>
|
|
3894
|
+
<monkey-checkbox>Em Aprovação</monkey-checkbox>
|
|
3895
|
+
<monkey-checkbox>Recusado</monkey-checkbox>
|
|
3896
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }] }); }
|
|
3897
|
+
}
|
|
3898
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarStatusComponent, decorators: [{
|
|
3899
|
+
type: Component,
|
|
3900
|
+
args: [{ selector: 'monkey-filter-bar-status', imports: [CommonModule, FormsModule, MonkeyStatusComponent, MonkeyCheckboxComponent], template: `
|
|
3901
|
+
<monkey-checkbox>Disponível</monkey-checkbox>
|
|
3902
|
+
<monkey-checkbox>Antecipado</monkey-checkbox>
|
|
3903
|
+
<monkey-checkbox>Em Aprovação</monkey-checkbox>
|
|
3904
|
+
<monkey-checkbox>Recusado</monkey-checkbox>
|
|
3905
|
+
`, host: {
|
|
3906
|
+
'[attr.data-testid]': "'monkey-filter-bar-status'",
|
|
3907
|
+
class: 'mecx-filter-bar-status',
|
|
3908
|
+
'[class.mecx-filter-bar-status-disabled]': '_disabled',
|
|
3909
|
+
'[class.mecx-filter-bar-status-focused]': 'focused',
|
|
3910
|
+
'[attr.id]': 'id',
|
|
3911
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3912
|
+
'(focus)': '_onFocus()',
|
|
3913
|
+
'(blur)': '_onBlur()'
|
|
3914
|
+
}, styles: [":host{display:flex;flex-direction:column;gap:12px;justify-content:flex-start;align-items:flex-start;padding:12px}\n"] }]
|
|
3915
|
+
}] });
|
|
3916
|
+
|
|
3917
|
+
/** ************************
|
|
3918
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3919
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3920
|
+
* MIT Licence
|
|
3921
|
+
************************* */
|
|
3922
|
+
/*
|
|
3923
|
+
type: 'input' | 'date' | 'checkbox' | 'currency';
|
|
3924
|
+
*/
|
|
3460
3925
|
class MonkeyFilterBarComponent {
|
|
3461
3926
|
constructor() {
|
|
3462
3927
|
this._elementRef = inject(ElementRef);
|
|
3463
3928
|
this.showPopOver = false;
|
|
3464
3929
|
this.elementTarget = null;
|
|
3930
|
+
this.showPopOverInternal = false;
|
|
3931
|
+
this.elementTargetInternal = null;
|
|
3465
3932
|
this.closePopOver = () => {
|
|
3466
3933
|
this.showPopOver = false;
|
|
3467
3934
|
};
|
|
3935
|
+
this.closePopOverInternal = () => {
|
|
3936
|
+
this.showPopOverInternal = false;
|
|
3937
|
+
};
|
|
3468
3938
|
}
|
|
3469
3939
|
ngAfterContentInit() { }
|
|
3470
3940
|
ngOnChanges(changes) { }
|
|
@@ -3473,6 +3943,14 @@ class MonkeyFilterBarComponent {
|
|
|
3473
3943
|
this.elementTarget = el.element;
|
|
3474
3944
|
this.showPopOver = true;
|
|
3475
3945
|
}
|
|
3946
|
+
onShowPopOverInternal(el) {
|
|
3947
|
+
let { target } = el;
|
|
3948
|
+
if (target.tagName.toLowerCase() === 'div') {
|
|
3949
|
+
target = target.offsetParent;
|
|
3950
|
+
}
|
|
3951
|
+
this.elementTargetInternal = target;
|
|
3952
|
+
this.showPopOverInternal = true;
|
|
3953
|
+
}
|
|
3476
3954
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3477
3955
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-filter-bar'", "class.mecx-filter-bar-disabled": "_disabled", "class.mecx-filter-bar-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
|
|
3478
3956
|
<monkey-form-field>
|
|
@@ -3495,11 +3973,41 @@ class MonkeyFilterBarComponent {
|
|
|
3495
3973
|
monkeyPopoverDir="ltr"
|
|
3496
3974
|
[monkeyPopoverHideHeader]="true"
|
|
3497
3975
|
>
|
|
3498
|
-
<monkey-option> Status </monkey-option>
|
|
3499
|
-
<monkey-option
|
|
3500
|
-
<monkey-option
|
|
3976
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)"> Status </monkey-option>
|
|
3977
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)"> Valor </monkey-option>
|
|
3978
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)">
|
|
3979
|
+
Identificador
|
|
3980
|
+
</monkey-option>
|
|
3981
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)">
|
|
3982
|
+
Data de Criação
|
|
3983
|
+
</monkey-option>
|
|
3984
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)">
|
|
3985
|
+
Data de Vencimento 12 12
|
|
3986
|
+
</monkey-option>
|
|
3987
|
+
</ng-template>
|
|
3988
|
+
|
|
3989
|
+
<ng-template
|
|
3990
|
+
[monkeyPopover]="showPopOverInternal"
|
|
3991
|
+
[monkeyPopoverTarget]="elementTargetInternal"
|
|
3992
|
+
[monkeyPopoverClosed]="closePopOverInternal"
|
|
3993
|
+
monkeyPopoverDir="rt"
|
|
3994
|
+
[monkeyPopoverTitle]="'Status'"
|
|
3995
|
+
[monkeyPopoverActions]="popoverAction"
|
|
3996
|
+
>
|
|
3997
|
+
<!--<monkey-filter-bar-status></monkey-filter-bar-status>-->
|
|
3998
|
+
<!--<monkey-filter-bar-currency></monkey-filter-bar-currency>-->
|
|
3999
|
+
<monkey-filter-bar-input></monkey-filter-bar-input>
|
|
4000
|
+
|
|
4001
|
+
<!--<monkey-date-range hideSecondCalendar hideActions> </monkey-date-range>-->
|
|
4002
|
+
</ng-template>
|
|
4003
|
+
|
|
4004
|
+
<ng-template #popoverAction>
|
|
4005
|
+
<monkey-button type="secondary" size="sm" class="btn" (click)="closePopOver()">
|
|
4006
|
+
Limpar
|
|
4007
|
+
</monkey-button>
|
|
4008
|
+
<monkey-button type="primary" size="sm" class="btn"> Aplicar </monkey-button>
|
|
3501
4009
|
</ng-template>
|
|
3502
|
-
`, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }] }); }
|
|
4010
|
+
`, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type"] }, { kind: "component", type: MonkeyFilterBarInputComponent, selector: "monkey-filter-bar-input" }] }); }
|
|
3503
4011
|
}
|
|
3504
4012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
3505
4013
|
type: Component,
|
|
@@ -3513,7 +4021,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3513
4021
|
MonkeyInputModule,
|
|
3514
4022
|
MonkeyButtonComponent,
|
|
3515
4023
|
UtilIconComponent,
|
|
3516
|
-
MonkeyOptionComponent
|
|
4024
|
+
MonkeyOptionComponent,
|
|
4025
|
+
MonkeyFilterBarStatusComponent,
|
|
4026
|
+
MonkeyFilterBarDateComponent,
|
|
4027
|
+
MonkeyFilterBarCurrencyComponent,
|
|
4028
|
+
MonkeyFilterBarInputComponent,
|
|
4029
|
+
MonkeyDateRangeComponent
|
|
3517
4030
|
], template: `
|
|
3518
4031
|
<monkey-form-field>
|
|
3519
4032
|
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
@@ -3535,9 +4048,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3535
4048
|
monkeyPopoverDir="ltr"
|
|
3536
4049
|
[monkeyPopoverHideHeader]="true"
|
|
3537
4050
|
>
|
|
3538
|
-
<monkey-option> Status </monkey-option>
|
|
3539
|
-
<monkey-option
|
|
3540
|
-
<monkey-option
|
|
4051
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)"> Status </monkey-option>
|
|
4052
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)"> Valor </monkey-option>
|
|
4053
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)">
|
|
4054
|
+
Identificador
|
|
4055
|
+
</monkey-option>
|
|
4056
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)">
|
|
4057
|
+
Data de Criação
|
|
4058
|
+
</monkey-option>
|
|
4059
|
+
<monkey-option class="option" (click)="onShowPopOverInternal($event)">
|
|
4060
|
+
Data de Vencimento 12 12
|
|
4061
|
+
</monkey-option>
|
|
4062
|
+
</ng-template>
|
|
4063
|
+
|
|
4064
|
+
<ng-template
|
|
4065
|
+
[monkeyPopover]="showPopOverInternal"
|
|
4066
|
+
[monkeyPopoverTarget]="elementTargetInternal"
|
|
4067
|
+
[monkeyPopoverClosed]="closePopOverInternal"
|
|
4068
|
+
monkeyPopoverDir="rt"
|
|
4069
|
+
[monkeyPopoverTitle]="'Status'"
|
|
4070
|
+
[monkeyPopoverActions]="popoverAction"
|
|
4071
|
+
>
|
|
4072
|
+
<!--<monkey-filter-bar-status></monkey-filter-bar-status>-->
|
|
4073
|
+
<!--<monkey-filter-bar-currency></monkey-filter-bar-currency>-->
|
|
4074
|
+
<monkey-filter-bar-input></monkey-filter-bar-input>
|
|
4075
|
+
|
|
4076
|
+
<!--<monkey-date-range hideSecondCalendar hideActions> </monkey-date-range>-->
|
|
4077
|
+
</ng-template>
|
|
4078
|
+
|
|
4079
|
+
<ng-template #popoverAction>
|
|
4080
|
+
<monkey-button type="secondary" size="sm" class="btn" (click)="closePopOver()">
|
|
4081
|
+
Limpar
|
|
4082
|
+
</monkey-button>
|
|
4083
|
+
<monkey-button type="primary" size="sm" class="btn"> Aplicar </monkey-button>
|
|
3541
4084
|
</ng-template>
|
|
3542
4085
|
`, host: {
|
|
3543
4086
|
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
@@ -5683,191 +6226,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5683
6226
|
* MIT Licence
|
|
5684
6227
|
************************* */
|
|
5685
6228
|
|
|
5686
|
-
/** ************************
|
|
5687
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
5688
|
-
* This style guide was developed by Monkey Exchange Team
|
|
5689
|
-
* MIT Licence
|
|
5690
|
-
************************* */
|
|
5691
|
-
class MonkeyRadioButtonComponent {
|
|
5692
|
-
get classes() {
|
|
5693
|
-
return `${this.position} ${this.size}`;
|
|
5694
|
-
}
|
|
5695
|
-
get disabled() {
|
|
5696
|
-
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
5697
|
-
return this.ngControl.disabled;
|
|
5698
|
-
}
|
|
5699
|
-
return this._disabled;
|
|
5700
|
-
}
|
|
5701
|
-
set disabled(value) {
|
|
5702
|
-
this._disabled = value;
|
|
5703
|
-
if (this.focused) {
|
|
5704
|
-
this.focused = false;
|
|
5705
|
-
this.stateChanges.next();
|
|
5706
|
-
}
|
|
5707
|
-
}
|
|
5708
|
-
get required() {
|
|
5709
|
-
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
5710
|
-
}
|
|
5711
|
-
set required(value) {
|
|
5712
|
-
this._required = value;
|
|
5713
|
-
this.stateChanges.next();
|
|
5714
|
-
}
|
|
5715
|
-
set value(value) {
|
|
5716
|
-
if (this._value !== value) {
|
|
5717
|
-
this._value = value;
|
|
5718
|
-
this._onChange(value);
|
|
5719
|
-
}
|
|
5720
|
-
}
|
|
5721
|
-
get value() {
|
|
5722
|
-
return this._value;
|
|
5723
|
-
}
|
|
5724
|
-
constructor(changeDetectorRef, formField) {
|
|
5725
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
5726
|
-
this.formField = formField;
|
|
5727
|
-
this.tabIndex = 0;
|
|
5728
|
-
this.onChange = new EventEmitter();
|
|
5729
|
-
this.onSearch = new EventEmitter();
|
|
5730
|
-
this.position = 'horizontal';
|
|
5731
|
-
this.size = 'lg';
|
|
5732
|
-
this._value = null;
|
|
5733
|
-
this._destroyRef = inject(DestroyRef);
|
|
5734
|
-
this.idGenerator = inject(IdGenerator);
|
|
5735
|
-
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
5736
|
-
this._elementRef = inject(ElementRef);
|
|
5737
|
-
this.focused = false;
|
|
5738
|
-
this._disabled = false;
|
|
5739
|
-
this.id = this.idGenerator.getId('monkey-radiobutton-');
|
|
5740
|
-
this.stateChanges = new Subject();
|
|
5741
|
-
this.type = 'radio-button';
|
|
5742
|
-
this._onChange = () => { };
|
|
5743
|
-
this._onTouched = () => { };
|
|
5744
|
-
if (this.ngControl) {
|
|
5745
|
-
this.ngControl.valueAccessor = this;
|
|
5746
|
-
}
|
|
5747
|
-
}
|
|
5748
|
-
changeSelected() {
|
|
5749
|
-
setTimeout(() => {
|
|
5750
|
-
if (this.options) {
|
|
5751
|
-
this.options.forEach((opt) => {
|
|
5752
|
-
opt.selected = opt.value() === this.value;
|
|
5753
|
-
});
|
|
5754
|
-
}
|
|
5755
|
-
this.changeDetectorRef.markForCheck();
|
|
5756
|
-
});
|
|
5757
|
-
}
|
|
5758
|
-
initializeOptions() {
|
|
5759
|
-
setTimeout(() => {
|
|
5760
|
-
this.options?.forEach((option) => {
|
|
5761
|
-
option.type = 'radio';
|
|
5762
|
-
if (!option.action) {
|
|
5763
|
-
option.action = this.selectOption.bind(this, option);
|
|
5764
|
-
}
|
|
5765
|
-
});
|
|
5766
|
-
this.changeDetectorRef.markForCheck();
|
|
5767
|
-
}, 0);
|
|
5768
|
-
}
|
|
5769
|
-
ngAfterContentInit() {
|
|
5770
|
-
this.initializeOptions();
|
|
5771
|
-
this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
5772
|
-
this.initializeOptions();
|
|
5773
|
-
this.changeSelected();
|
|
5774
|
-
});
|
|
5775
|
-
}
|
|
5776
|
-
selectOption(option) {
|
|
5777
|
-
if (!option.disabled && !this.disabled) {
|
|
5778
|
-
this.value = option.value();
|
|
5779
|
-
this._onChange(this.value);
|
|
5780
|
-
this.onChange.emit(this.value);
|
|
5781
|
-
this.options.forEach((opt) => {
|
|
5782
|
-
opt.selected = opt.value() === this.value;
|
|
5783
|
-
});
|
|
5784
|
-
}
|
|
5785
|
-
}
|
|
5786
|
-
writeValue(value) {
|
|
5787
|
-
this.value = value;
|
|
5788
|
-
this.changeSelected();
|
|
5789
|
-
}
|
|
5790
|
-
onContainerClick(event) {
|
|
5791
|
-
if (this.disabled)
|
|
5792
|
-
return;
|
|
5793
|
-
this._elementRef.nativeElement.focus();
|
|
5794
|
-
}
|
|
5795
|
-
_onFocus() {
|
|
5796
|
-
if (!this.disabled) {
|
|
5797
|
-
this.focused = true;
|
|
5798
|
-
this._onTouched();
|
|
5799
|
-
this.stateChanges.next();
|
|
5800
|
-
}
|
|
5801
|
-
}
|
|
5802
|
-
_onBlur() {
|
|
5803
|
-
this.focused = false;
|
|
5804
|
-
this.stateChanges.next();
|
|
5805
|
-
}
|
|
5806
|
-
registerOnChange(fn) {
|
|
5807
|
-
this._onChange = fn;
|
|
5808
|
-
}
|
|
5809
|
-
registerOnTouched(fn) {
|
|
5810
|
-
this._onTouched = fn;
|
|
5811
|
-
}
|
|
5812
|
-
setDisabledState(isDisabled) {
|
|
5813
|
-
this.disabled = isDisabled;
|
|
5814
|
-
this.initializeOptions();
|
|
5815
|
-
}
|
|
5816
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.14", type: MonkeyRadioButtonComponent, isStandalone: true, selector: "monkey-radiobutton", inputs: { tabIndex: "tabIndex", position: "position", size: "size", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-radiobutton" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-radiobutton-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "this.classes" }, classAttribute: "mecx-radiobutton" }, providers: [
|
|
5818
|
-
// eslint-disable-next-line no-use-before-define
|
|
5819
|
-
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
5820
|
-
], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5821
|
-
}
|
|
5822
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
|
|
5823
|
-
type: Component,
|
|
5824
|
-
args: [{ selector: 'monkey-radiobutton', imports: [CommonModule, ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
5825
|
-
// eslint-disable-next-line no-use-before-define
|
|
5826
|
-
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
5827
|
-
], host: {
|
|
5828
|
-
'data-testid': 'monkey-radiobutton',
|
|
5829
|
-
class: 'mecx-radiobutton',
|
|
5830
|
-
'[class.mecx-disabled]': 'disabled',
|
|
5831
|
-
'[class.mecx-radiobutton-focused]': 'focused',
|
|
5832
|
-
'[attr.id]': 'id',
|
|
5833
|
-
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
5834
|
-
'(focus)': '_onFocus()',
|
|
5835
|
-
'(blur)': '_onBlur()'
|
|
5836
|
-
}, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
|
|
5837
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
|
|
5838
|
-
type: Optional
|
|
5839
|
-
}] }], propDecorators: { options: [{
|
|
5840
|
-
type: ContentChildren,
|
|
5841
|
-
args: [MonkeyOptionComponent]
|
|
5842
|
-
}], tabIndex: [{
|
|
5843
|
-
type: Input
|
|
5844
|
-
}], onChange: [{
|
|
5845
|
-
type: Output
|
|
5846
|
-
}], onSearch: [{
|
|
5847
|
-
type: Output
|
|
5848
|
-
}], position: [{
|
|
5849
|
-
type: Input
|
|
5850
|
-
}], size: [{
|
|
5851
|
-
type: Input
|
|
5852
|
-
}], classes: [{
|
|
5853
|
-
type: HostBinding,
|
|
5854
|
-
args: ['class']
|
|
5855
|
-
}], disabled: [{
|
|
5856
|
-
type: Input,
|
|
5857
|
-
args: [{ transform: booleanAttribute }]
|
|
5858
|
-
}], required: [{
|
|
5859
|
-
type: Input,
|
|
5860
|
-
args: [{ transform: booleanAttribute }]
|
|
5861
|
-
}], value: [{
|
|
5862
|
-
type: Input
|
|
5863
|
-
}] } });
|
|
5864
|
-
|
|
5865
|
-
/** ************************
|
|
5866
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
5867
|
-
* This style guide was developed by Monkey Exchange Team
|
|
5868
|
-
* MIT Licence
|
|
5869
|
-
************************* */
|
|
5870
|
-
|
|
5871
6229
|
/** ************************
|
|
5872
6230
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
5873
6231
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -5926,52 +6284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5926
6284
|
* MIT Licence
|
|
5927
6285
|
************************* */
|
|
5928
6286
|
|
|
5929
|
-
/** ************************
|
|
5930
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
5931
|
-
* This style guide was developed by Monkey Exchange Team
|
|
5932
|
-
* MIT Licence
|
|
5933
|
-
************************* */
|
|
5934
|
-
class MonkeyStatusComponent {
|
|
5935
|
-
get class() {
|
|
5936
|
-
return `${this.type()} ${this.size()}`;
|
|
5937
|
-
}
|
|
5938
|
-
get id() {
|
|
5939
|
-
return this._id;
|
|
5940
|
-
}
|
|
5941
|
-
set id(value) {
|
|
5942
|
-
this._id = value || this._uid;
|
|
5943
|
-
}
|
|
5944
|
-
constructor() {
|
|
5945
|
-
this.type = input.required();
|
|
5946
|
-
this.size = input('md');
|
|
5947
|
-
this.label = input();
|
|
5948
|
-
this._uid = inject(IdGenerator).getId('monkey-status-');
|
|
5949
|
-
// eslint-disable-next-line no-self-assign
|
|
5950
|
-
this.id = this.id;
|
|
5951
|
-
}
|
|
5952
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5953
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
5954
|
-
}
|
|
5955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
|
|
5956
|
-
type: Component,
|
|
5957
|
-
args: [{ selector: 'monkey-status', imports: [CommonModule], host: {
|
|
5958
|
-
'data-testid': 'monkey-status',
|
|
5959
|
-
'[attr.id]': 'id',
|
|
5960
|
-
'[id]': 'id'
|
|
5961
|
-
}, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"] }]
|
|
5962
|
-
}], ctorParameters: () => [], propDecorators: { class: [{
|
|
5963
|
-
type: HostBinding,
|
|
5964
|
-
args: ['class']
|
|
5965
|
-
}], id: [{
|
|
5966
|
-
type: Input
|
|
5967
|
-
}] } });
|
|
5968
|
-
|
|
5969
|
-
/** ************************
|
|
5970
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
5971
|
-
* This style guide was developed by Monkey Exchange Team
|
|
5972
|
-
* MIT Licence
|
|
5973
|
-
************************* */
|
|
5974
|
-
|
|
5975
6287
|
/** ************************
|
|
5976
6288
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
5977
6289
|
* This style guide was developed by Monkey Exchange Team
|