monkey-style-guide-v2 0.0.34 → 0.0.37
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/theme.scss +1 -0
- package/assets/scss/util/_icon.scss +10 -0
- package/assets/scss/util/_index.scss +7 -0
- package/fesm2022/monkey-style-guide-v2.mjs +232 -91
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/lib/components/filter-bar/filter-bar.component.d.ts +15 -0
- package/lib/components/filter-bar/index.d.ts +6 -0
- package/lib/components/index.d.ts +1 -0
- package/monkey-style-guide-v2-0.0.37.tgz +0 -0
- package/package.json +1 -1
- package/utils/icon.d.ts +1 -1
- package/monkey-style-guide-v2-0.0.34.tgz +0 -0
package/assets/scss/theme.scss
CHANGED
|
@@ -2,7 +2,7 @@ import { trigger, state, transition, style, animate, keyframes } from '@angular/
|
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { CommonModule, NgTemplateOutlet, CurrencyPipe, DOCUMENT } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, effect, ElementRef, HostListener, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, NgZone, DestroyRef, Optional, Inject, NgModule, Injector, ChangeDetectorRef, forwardRef, ContentChildren, ChangeDetectionStrategy, LOCALE_ID, DEFAULT_CURRENCY_CODE, ContentChild, computed, ViewChildren,
|
|
5
|
+
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, effect, ElementRef, HostListener, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, NgZone, DestroyRef, Optional, Inject, NgModule, Injector, ChangeDetectorRef, forwardRef, ContentChildren, ChangeDetectionStrategy, LOCALE_ID, DEFAULT_CURRENCY_CODE, ContentChild, ViewChild, computed, ViewChildren, signal } from '@angular/core';
|
|
6
6
|
import * as i1$2 from '@angular/router';
|
|
7
7
|
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
|
|
8
8
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -244,6 +244,23 @@ class UtilIconComponent {
|
|
|
244
244
|
></path>
|
|
245
245
|
</svg>
|
|
246
246
|
}
|
|
247
|
+
|
|
248
|
+
@case ('addPlus') {
|
|
249
|
+
<svg
|
|
250
|
+
width="24"
|
|
251
|
+
height="24"
|
|
252
|
+
viewBox="0 0 24 24"
|
|
253
|
+
fill="none"
|
|
254
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
255
|
+
>
|
|
256
|
+
<path
|
|
257
|
+
d="M11.340 2.281 C 7.073 2.553,3.439 5.660,2.499 9.840 C 2.187 11.227,2.187 12.773,2.499 14.160 C 3.317 17.797,6.203 20.683,9.840 21.501 C 11.233 21.814,12.770 21.813,14.176 21.498 C 17.465 20.759,20.161 18.310,21.244 15.076 C 21.795 13.432,21.887 11.556,21.501 9.840 C 20.683 6.203,17.797 3.317,14.160 2.499 C 13.288 2.303,12.254 2.223,11.340 2.281 M12.961 3.802 C 14.493 3.991,16.079 4.659,17.184 5.581 C 18.160 6.395,18.877 7.297,19.404 8.374 C 19.982 9.557,20.240 10.675,20.240 12.000 C 20.240 12.966,20.126 13.689,19.834 14.584 C 18.848 17.602,16.153 19.804,12.961 20.198 C 12.525 20.252,11.475 20.252,11.039 20.198 C 9.507 20.009,7.921 19.341,6.816 18.419 C 5.826 17.593,5.138 16.728,4.598 15.626 C 4.019 14.448,3.760 13.327,3.760 12.000 C 3.760 10.673,4.019 9.552,4.598 8.374 C 5.044 7.464,5.564 6.750,6.285 6.058 C 7.568 4.824,9.221 4.032,10.984 3.806 C 11.379 3.755,12.563 3.753,12.961 3.802 M11.815 7.277 C 11.638 7.321,11.461 7.456,11.353 7.631 L 11.260 7.780 11.248 9.508 L 11.236 11.236 9.505 11.248 L 7.774 11.260 7.612 11.367 C 7.372 11.526,7.267 11.721,7.267 12.007 C 7.267 12.203,7.286 12.270,7.383 12.408 C 7.447 12.499,7.572 12.610,7.660 12.656 C 7.814 12.737,7.886 12.740,9.528 12.752 L 11.236 12.764 11.248 14.492 L 11.260 16.220 11.353 16.369 C 11.710 16.943,12.576 16.812,12.716 16.162 C 12.744 16.031,12.760 15.374,12.760 14.358 L 12.760 12.760 14.358 12.760 C 15.374 12.760,16.031 12.744,16.162 12.716 C 16.904 12.557,16.924 11.471,16.189 11.286 C 16.064 11.255,15.479 11.240,14.382 11.240 L 12.760 11.240 12.759 9.630 C 12.758 8.669,12.741 7.948,12.717 7.841 C 12.623 7.432,12.215 7.177,11.815 7.277 "
|
|
258
|
+
stroke="none"
|
|
259
|
+
fill-rule="evenodd"
|
|
260
|
+
fill="var(--mecx-color-gray-900)"
|
|
261
|
+
></path>
|
|
262
|
+
</svg>
|
|
263
|
+
}
|
|
247
264
|
}
|
|
248
265
|
`, isInline: true, styles: [":host{display:flex}\n"] }); }
|
|
249
266
|
}
|
|
@@ -409,6 +426,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
409
426
|
></path>
|
|
410
427
|
</svg>
|
|
411
428
|
}
|
|
429
|
+
|
|
430
|
+
@case ('addPlus') {
|
|
431
|
+
<svg
|
|
432
|
+
width="24"
|
|
433
|
+
height="24"
|
|
434
|
+
viewBox="0 0 24 24"
|
|
435
|
+
fill="none"
|
|
436
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
437
|
+
>
|
|
438
|
+
<path
|
|
439
|
+
d="M11.340 2.281 C 7.073 2.553,3.439 5.660,2.499 9.840 C 2.187 11.227,2.187 12.773,2.499 14.160 C 3.317 17.797,6.203 20.683,9.840 21.501 C 11.233 21.814,12.770 21.813,14.176 21.498 C 17.465 20.759,20.161 18.310,21.244 15.076 C 21.795 13.432,21.887 11.556,21.501 9.840 C 20.683 6.203,17.797 3.317,14.160 2.499 C 13.288 2.303,12.254 2.223,11.340 2.281 M12.961 3.802 C 14.493 3.991,16.079 4.659,17.184 5.581 C 18.160 6.395,18.877 7.297,19.404 8.374 C 19.982 9.557,20.240 10.675,20.240 12.000 C 20.240 12.966,20.126 13.689,19.834 14.584 C 18.848 17.602,16.153 19.804,12.961 20.198 C 12.525 20.252,11.475 20.252,11.039 20.198 C 9.507 20.009,7.921 19.341,6.816 18.419 C 5.826 17.593,5.138 16.728,4.598 15.626 C 4.019 14.448,3.760 13.327,3.760 12.000 C 3.760 10.673,4.019 9.552,4.598 8.374 C 5.044 7.464,5.564 6.750,6.285 6.058 C 7.568 4.824,9.221 4.032,10.984 3.806 C 11.379 3.755,12.563 3.753,12.961 3.802 M11.815 7.277 C 11.638 7.321,11.461 7.456,11.353 7.631 L 11.260 7.780 11.248 9.508 L 11.236 11.236 9.505 11.248 L 7.774 11.260 7.612 11.367 C 7.372 11.526,7.267 11.721,7.267 12.007 C 7.267 12.203,7.286 12.270,7.383 12.408 C 7.447 12.499,7.572 12.610,7.660 12.656 C 7.814 12.737,7.886 12.740,9.528 12.752 L 11.236 12.764 11.248 14.492 L 11.260 16.220 11.353 16.369 C 11.710 16.943,12.576 16.812,12.716 16.162 C 12.744 16.031,12.760 15.374,12.760 14.358 L 12.760 12.760 14.358 12.760 C 15.374 12.760,16.031 12.744,16.162 12.716 C 16.904 12.557,16.924 11.471,16.189 11.286 C 16.064 11.255,15.479 11.240,14.382 11.240 L 12.760 11.240 12.759 9.630 C 12.758 8.669,12.741 7.948,12.717 7.841 C 12.623 7.432,12.215 7.177,11.815 7.277 "
|
|
440
|
+
stroke="none"
|
|
441
|
+
fill-rule="evenodd"
|
|
442
|
+
fill="var(--mecx-color-gray-900)"
|
|
443
|
+
></path>
|
|
444
|
+
</svg>
|
|
445
|
+
}
|
|
412
446
|
}
|
|
413
447
|
`, styles: [":host{display:flex}\n"] }]
|
|
414
448
|
}] });
|
|
@@ -879,7 +913,7 @@ class MonkeyButtonComponent {
|
|
|
879
913
|
return this.elementRef.nativeElement;
|
|
880
914
|
}
|
|
881
915
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
882
|
-
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
|
|
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)}.mecx-button-loading{display:flex;background:transparent}.mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}: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 }); }
|
|
883
917
|
}
|
|
884
918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
885
919
|
type: Component,
|
|
@@ -887,7 +921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
887
921
|
'data-testid': 'monkey-button',
|
|
888
922
|
'[attr.id]': 'id',
|
|
889
923
|
'[id]': 'id'
|
|
890
|
-
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n
|
|
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)}.mecx-button-loading{display:flex;background:transparent}.mecx-button-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
891
925
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
892
926
|
type: Input
|
|
893
927
|
}], color: [{
|
|
@@ -1188,7 +1222,9 @@ class MonkeyPopoverDirective {
|
|
|
1188
1222
|
}
|
|
1189
1223
|
this._show = show;
|
|
1190
1224
|
if (show) {
|
|
1191
|
-
|
|
1225
|
+
setTimeout(() => {
|
|
1226
|
+
this.createPopover();
|
|
1227
|
+
}, 0);
|
|
1192
1228
|
}
|
|
1193
1229
|
else {
|
|
1194
1230
|
this.disposePopover();
|
|
@@ -3330,6 +3366,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3330
3366
|
* MIT Licence
|
|
3331
3367
|
************************* */
|
|
3332
3368
|
|
|
3369
|
+
/** ************************
|
|
3370
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3371
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3372
|
+
* MIT Licence
|
|
3373
|
+
************************* */
|
|
3374
|
+
class MonkeyOptionComponent {
|
|
3375
|
+
constructor() {
|
|
3376
|
+
this.idGenerator = inject(IdGenerator);
|
|
3377
|
+
this.value = input();
|
|
3378
|
+
this.disabled = false;
|
|
3379
|
+
this.type = 'select';
|
|
3380
|
+
this.selected = false;
|
|
3381
|
+
this.tabIndex = 0;
|
|
3382
|
+
this.id = this.idGenerator.getId('mecx-option-');
|
|
3383
|
+
}
|
|
3384
|
+
get displayContent() {
|
|
3385
|
+
return (this._content?.nativeElement.textContent || '').trim();
|
|
3386
|
+
}
|
|
3387
|
+
handleAction(event) {
|
|
3388
|
+
if (this.disabled) {
|
|
3389
|
+
event.stopPropagation();
|
|
3390
|
+
event.preventDefault();
|
|
3391
|
+
}
|
|
3392
|
+
else {
|
|
3393
|
+
this.action?.();
|
|
3394
|
+
}
|
|
3395
|
+
}
|
|
3396
|
+
onClick(event) {
|
|
3397
|
+
this.handleAction(event);
|
|
3398
|
+
}
|
|
3399
|
+
handleKeyDown(event) {
|
|
3400
|
+
const { key } = event;
|
|
3401
|
+
if (key === 'Enter' || key === ' ') {
|
|
3402
|
+
this.handleAction(event);
|
|
3403
|
+
}
|
|
3404
|
+
}
|
|
3405
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3406
|
+
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
|
+
@if (type === 'checkbox') {
|
|
3408
|
+
<span class="mecx-option-checkbox">
|
|
3409
|
+
<util-icon class="icon" name="check" />
|
|
3410
|
+
</span>
|
|
3411
|
+
}
|
|
3412
|
+
<div #content><ng-content /></div>
|
|
3413
|
+
`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3414
|
+
}
|
|
3415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
3416
|
+
type: Component,
|
|
3417
|
+
args: [{ selector: 'monkey-option', standalone: true, imports: [CommonModule, UtilIconComponent], template: `
|
|
3418
|
+
@if (type === 'checkbox') {
|
|
3419
|
+
<span class="mecx-option-checkbox">
|
|
3420
|
+
<util-icon class="icon" name="check" />
|
|
3421
|
+
</span>
|
|
3422
|
+
}
|
|
3423
|
+
<div #content><ng-content /></div>
|
|
3424
|
+
`, encapsulation: ViewEncapsulation.None, host: {
|
|
3425
|
+
'data-testid': 'monkey-option',
|
|
3426
|
+
'[attr.id]': 'id',
|
|
3427
|
+
class: 'mecx-option',
|
|
3428
|
+
'[class.mecx-option-disabled]': 'disabled',
|
|
3429
|
+
'[class.mecx-option-selected]': 'selected',
|
|
3430
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3431
|
+
'[class]': 'type'
|
|
3432
|
+
}, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
|
|
3433
|
+
}], propDecorators: { _content: [{
|
|
3434
|
+
type: ViewChild,
|
|
3435
|
+
args: ['content', { static: true }]
|
|
3436
|
+
}], disabled: [{
|
|
3437
|
+
type: Input,
|
|
3438
|
+
args: [{ transform: booleanAttribute }]
|
|
3439
|
+
}], type: [{
|
|
3440
|
+
type: Input
|
|
3441
|
+
}], onClick: [{
|
|
3442
|
+
type: HostListener,
|
|
3443
|
+
args: ['click', ['$event']]
|
|
3444
|
+
}], handleKeyDown: [{
|
|
3445
|
+
type: HostListener,
|
|
3446
|
+
args: ['keydown', ['$event']]
|
|
3447
|
+
}] } });
|
|
3448
|
+
|
|
3449
|
+
/** ************************
|
|
3450
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3451
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3452
|
+
* MIT Licence
|
|
3453
|
+
************************* */
|
|
3454
|
+
|
|
3455
|
+
/** ************************
|
|
3456
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3457
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3458
|
+
* MIT Licence
|
|
3459
|
+
************************* */
|
|
3460
|
+
class MonkeyFilterBarComponent {
|
|
3461
|
+
constructor() {
|
|
3462
|
+
this._elementRef = inject(ElementRef);
|
|
3463
|
+
this.showPopOver = false;
|
|
3464
|
+
this.elementTarget = null;
|
|
3465
|
+
this.closePopOver = () => {
|
|
3466
|
+
this.showPopOver = false;
|
|
3467
|
+
};
|
|
3468
|
+
}
|
|
3469
|
+
ngAfterContentInit() { }
|
|
3470
|
+
ngOnChanges(changes) { }
|
|
3471
|
+
ngOnDestroy() { }
|
|
3472
|
+
onShowPopOver(el) {
|
|
3473
|
+
this.elementTarget = el.element;
|
|
3474
|
+
this.showPopOver = true;
|
|
3475
|
+
}
|
|
3476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3477
|
+
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
|
+
<monkey-form-field>
|
|
3479
|
+
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
3480
|
+
</monkey-form-field>
|
|
3481
|
+
<monkey-button
|
|
3482
|
+
#popoverTarget
|
|
3483
|
+
class="btn-filter"
|
|
3484
|
+
type="secondary"
|
|
3485
|
+
(click)="onShowPopOver(popoverTarget)"
|
|
3486
|
+
>
|
|
3487
|
+
<util-icon class="icon" name="addPlus" first />
|
|
3488
|
+
Adicionar Filtro
|
|
3489
|
+
</monkey-button>
|
|
3490
|
+
|
|
3491
|
+
<ng-template
|
|
3492
|
+
[monkeyPopover]="showPopOver"
|
|
3493
|
+
[monkeyPopoverTarget]="elementTarget"
|
|
3494
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
3495
|
+
monkeyPopoverDir="ltr"
|
|
3496
|
+
[monkeyPopoverHideHeader]="true"
|
|
3497
|
+
>
|
|
3498
|
+
<monkey-option> Status </monkey-option>
|
|
3499
|
+
<monkey-option> Data de Emissão </monkey-option>
|
|
3500
|
+
<monkey-option> Data de Vencimento </monkey-option>
|
|
3501
|
+
</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"] }] }); }
|
|
3503
|
+
}
|
|
3504
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
3505
|
+
type: Component,
|
|
3506
|
+
args: [{ selector: 'monkey-filter-bar', imports: [
|
|
3507
|
+
CommonModule,
|
|
3508
|
+
FormsModule,
|
|
3509
|
+
ReactiveFormsModule,
|
|
3510
|
+
MonkeyFormFieldModule,
|
|
3511
|
+
MonkeyDirectivesModule,
|
|
3512
|
+
MonkeyFormFieldModule,
|
|
3513
|
+
MonkeyInputModule,
|
|
3514
|
+
MonkeyButtonComponent,
|
|
3515
|
+
UtilIconComponent,
|
|
3516
|
+
MonkeyOptionComponent
|
|
3517
|
+
], template: `
|
|
3518
|
+
<monkey-form-field>
|
|
3519
|
+
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
3520
|
+
</monkey-form-field>
|
|
3521
|
+
<monkey-button
|
|
3522
|
+
#popoverTarget
|
|
3523
|
+
class="btn-filter"
|
|
3524
|
+
type="secondary"
|
|
3525
|
+
(click)="onShowPopOver(popoverTarget)"
|
|
3526
|
+
>
|
|
3527
|
+
<util-icon class="icon" name="addPlus" first />
|
|
3528
|
+
Adicionar Filtro
|
|
3529
|
+
</monkey-button>
|
|
3530
|
+
|
|
3531
|
+
<ng-template
|
|
3532
|
+
[monkeyPopover]="showPopOver"
|
|
3533
|
+
[monkeyPopoverTarget]="elementTarget"
|
|
3534
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
3535
|
+
monkeyPopoverDir="ltr"
|
|
3536
|
+
[monkeyPopoverHideHeader]="true"
|
|
3537
|
+
>
|
|
3538
|
+
<monkey-option> Status </monkey-option>
|
|
3539
|
+
<monkey-option> Data de Emissão </monkey-option>
|
|
3540
|
+
<monkey-option> Data de Vencimento </monkey-option>
|
|
3541
|
+
</ng-template>
|
|
3542
|
+
`, host: {
|
|
3543
|
+
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
3544
|
+
class: 'mecx-filter-bar',
|
|
3545
|
+
'[class.mecx-filter-bar-disabled]': '_disabled',
|
|
3546
|
+
'[class.mecx-filter-bar-focused]': 'focused',
|
|
3547
|
+
'[attr.id]': 'id',
|
|
3548
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3549
|
+
'(focus)': '_onFocus()',
|
|
3550
|
+
'(blur)': '_onBlur()'
|
|
3551
|
+
}, 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"] }]
|
|
3552
|
+
}] });
|
|
3553
|
+
|
|
3554
|
+
/** ************************
|
|
3555
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
3556
|
+
* This style guide was developed by Monkey Exchange Team
|
|
3557
|
+
* MIT Licence
|
|
3558
|
+
************************* */
|
|
3559
|
+
|
|
3333
3560
|
/** ************************
|
|
3334
3561
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
3335
3562
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -3819,92 +4046,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3819
4046
|
* MIT Licence
|
|
3820
4047
|
************************* */
|
|
3821
4048
|
|
|
3822
|
-
/** ************************
|
|
3823
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
3824
|
-
* This style guide was developed by Monkey Exchange Team
|
|
3825
|
-
* MIT Licence
|
|
3826
|
-
************************* */
|
|
3827
|
-
class MonkeyOptionComponent {
|
|
3828
|
-
constructor() {
|
|
3829
|
-
this.idGenerator = inject(IdGenerator);
|
|
3830
|
-
this.value = input();
|
|
3831
|
-
this.disabled = false;
|
|
3832
|
-
this.type = 'select';
|
|
3833
|
-
this.selected = false;
|
|
3834
|
-
this.tabIndex = 0;
|
|
3835
|
-
this.id = this.idGenerator.getId('mecx-option-');
|
|
3836
|
-
}
|
|
3837
|
-
get displayContent() {
|
|
3838
|
-
return (this._content?.nativeElement.textContent || '').trim();
|
|
3839
|
-
}
|
|
3840
|
-
handleAction(event) {
|
|
3841
|
-
if (this.disabled) {
|
|
3842
|
-
event.stopPropagation();
|
|
3843
|
-
event.preventDefault();
|
|
3844
|
-
}
|
|
3845
|
-
else {
|
|
3846
|
-
this.action?.();
|
|
3847
|
-
}
|
|
3848
|
-
}
|
|
3849
|
-
onClick(event) {
|
|
3850
|
-
this.handleAction(event);
|
|
3851
|
-
}
|
|
3852
|
-
handleKeyDown(event) {
|
|
3853
|
-
const { key } = event;
|
|
3854
|
-
if (key === 'Enter' || key === ' ') {
|
|
3855
|
-
this.handleAction(event);
|
|
3856
|
-
}
|
|
3857
|
-
}
|
|
3858
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3859
|
-
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: `
|
|
3860
|
-
@if (type === 'checkbox') {
|
|
3861
|
-
<span class="mecx-option-checkbox">
|
|
3862
|
-
<util-icon class="icon" name="check" />
|
|
3863
|
-
</span>
|
|
3864
|
-
}
|
|
3865
|
-
<div #content><ng-content /></div>
|
|
3866
|
-
`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3867
|
-
}
|
|
3868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
3869
|
-
type: Component,
|
|
3870
|
-
args: [{ selector: 'monkey-option', standalone: true, imports: [CommonModule, UtilIconComponent], template: `
|
|
3871
|
-
@if (type === 'checkbox') {
|
|
3872
|
-
<span class="mecx-option-checkbox">
|
|
3873
|
-
<util-icon class="icon" name="check" />
|
|
3874
|
-
</span>
|
|
3875
|
-
}
|
|
3876
|
-
<div #content><ng-content /></div>
|
|
3877
|
-
`, encapsulation: ViewEncapsulation.None, host: {
|
|
3878
|
-
'data-testid': 'monkey-option',
|
|
3879
|
-
'[attr.id]': 'id',
|
|
3880
|
-
class: 'mecx-option',
|
|
3881
|
-
'[class.mecx-option-disabled]': 'disabled',
|
|
3882
|
-
'[class.mecx-option-selected]': 'selected',
|
|
3883
|
-
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
3884
|
-
'[class]': 'type'
|
|
3885
|
-
}, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:var(--mecx-color-white);cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus-visible{outline:unset;outline-offset:1px}monkey-option.radio:focus-visible:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-option.checkbox{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 8px;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.checkbox:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.checkbox .mecx-option-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;flex-shrink:0}monkey-option.checkbox .mecx-option-checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}monkey-option.checkbox.mecx-option-selected .mecx-option-checkbox{border:none;background-color:var(--mecx-color-theme-main)}monkey-option.checkbox.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.checkbox.mecx-option-disabled .mecx-option-checkbox{outline:unset;outline-offset:unset}monkey-option.checkbox:focus{outline:unset;outline-offset:1px}monkey-option.checkbox:focus .mecx-option-checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
|
|
3886
|
-
}], propDecorators: { _content: [{
|
|
3887
|
-
type: ViewChild,
|
|
3888
|
-
args: ['content', { static: true }]
|
|
3889
|
-
}], disabled: [{
|
|
3890
|
-
type: Input,
|
|
3891
|
-
args: [{ transform: booleanAttribute }]
|
|
3892
|
-
}], type: [{
|
|
3893
|
-
type: Input
|
|
3894
|
-
}], onClick: [{
|
|
3895
|
-
type: HostListener,
|
|
3896
|
-
args: ['click', ['$event']]
|
|
3897
|
-
}], handleKeyDown: [{
|
|
3898
|
-
type: HostListener,
|
|
3899
|
-
args: ['keydown', ['$event']]
|
|
3900
|
-
}] } });
|
|
3901
|
-
|
|
3902
|
-
/** ************************
|
|
3903
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
3904
|
-
* This style guide was developed by Monkey Exchange Team
|
|
3905
|
-
* MIT Licence
|
|
3906
|
-
************************* */
|
|
3907
|
-
|
|
3908
4049
|
/** ************************
|
|
3909
4050
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
3910
4051
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -7675,5 +7816,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7675
7816
|
* Generated bundle index. Do not edit.
|
|
7676
7817
|
*/
|
|
7677
7818
|
|
|
7678
|
-
export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
|
|
7819
|
+
export { MECX_COUNTRY_CODE, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
|
|
7679
7820
|
//# sourceMappingURL=monkey-style-guide-v2.mjs.map
|