monkey-style-guide 21.0.3 → 21.0.5
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/partials/_icons.scss +38 -0
- package/assets/scss/partials/_index.scss +1 -0
- package/fesm2022/monkey-style-guide.mjs +1987 -742
- package/fesm2022/monkey-style-guide.mjs.map +1 -1
- package/monkey-style-guide-21.0.5.tgz +0 -0
- package/package.json +1 -1
- package/types/monkey-style-guide.d.ts +324 -30
- package/monkey-style-guide-21.0.3.tgz +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { trigger, state,
|
|
1
|
+
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
|
-
import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
|
|
3
|
+
import { CommonModule, NgTemplateOutlet, CurrencyPipe, AsyncPipe } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, effect, HostListener, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
|
|
6
6
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -31,10 +31,10 @@ class IdGenerator {
|
|
|
31
31
|
counters[prefix] = currentCount + 1;
|
|
32
32
|
return `${prefix}${currentCount}`;
|
|
33
33
|
}
|
|
34
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
35
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
34
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
35
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IdGenerator, providedIn: 'root' }); }
|
|
36
36
|
}
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: IdGenerator, decorators: [{
|
|
38
38
|
type: Injectable,
|
|
39
39
|
args: [{ providedIn: 'root' }]
|
|
40
40
|
}] });
|
|
@@ -79,14 +79,21 @@ function normalizeStringToSearch(text) {
|
|
|
79
79
|
.replace(/[\u0300-\u036f]/g, '')
|
|
80
80
|
.toLowerCase();
|
|
81
81
|
}
|
|
82
|
+
function shuffle(array) {
|
|
83
|
+
for (let i = array.length - 1; i > 0; i--) {
|
|
84
|
+
const j = Math.floor(Math.random() * (i + 1));
|
|
85
|
+
[array[i], array[j]] = [array[j], array[i]];
|
|
86
|
+
}
|
|
87
|
+
return array;
|
|
88
|
+
}
|
|
82
89
|
|
|
83
90
|
/* eslint-disable max-len */
|
|
84
91
|
class UtilIconComponent {
|
|
85
92
|
constructor() {
|
|
86
93
|
this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
87
94
|
}
|
|
88
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
95
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UtilIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
96
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: UtilIconComponent, isStandalone: true, selector: "util-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
90
97
|
@switch (name()) {
|
|
91
98
|
@case ('clear') {
|
|
92
99
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
|
|
@@ -342,7 +349,7 @@ class UtilIconComponent {
|
|
|
342
349
|
}
|
|
343
350
|
`, isInline: true, styles: [":host{display:flex;background-color:transparent}\n"] }); }
|
|
344
351
|
}
|
|
345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: UtilIconComponent, decorators: [{
|
|
346
353
|
type: Component,
|
|
347
354
|
args: [{ selector: 'util-icon', template: `
|
|
348
355
|
@switch (name()) {
|
|
@@ -633,8 +640,8 @@ class MonkeyAccordionComponent {
|
|
|
633
640
|
return;
|
|
634
641
|
this.open = !this.open;
|
|
635
642
|
}
|
|
636
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n <div class=\"title\">\n @if (titleRef) {\n <ng-container *ngTemplateOutlet=\"titleRef\" />\n } @else {\n {{ titleStr }}\n }\n </div>\n <util-icon class=\"icon\" name=\"arrowDown\" [class.rotated]=\"open\" />\n</div>\n<div class=\"content-wrapper\">\n @if (open) {\n <div [@content]>\n <div class=\"content\">\n <ng-content />\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{overflow:hidden}:host .content-wrapper .content{border-top:1px solid var(--mecx-color-gray-200);padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
|
|
638
645
|
trigger('content', [
|
|
639
646
|
state('void', style({
|
|
640
647
|
height: '0px'
|
|
@@ -652,7 +659,7 @@ class MonkeyAccordionComponent {
|
|
|
652
659
|
])
|
|
653
660
|
] }); }
|
|
654
661
|
}
|
|
655
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
|
|
656
663
|
type: Component,
|
|
657
664
|
args: [{ selector: 'monkey-accordion', imports: [CommonModule, UtilIconComponent], host: {
|
|
658
665
|
'data-testid': 'monkey-accordion',
|
|
@@ -717,8 +724,8 @@ class MonkeyActionBarComponent {
|
|
|
717
724
|
// eslint-disable-next-line no-self-assign
|
|
718
725
|
this.id = this.id;
|
|
719
726
|
}
|
|
720
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
721
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
727
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
728
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyActionBarComponent, isStandalone: true, selector: "monkey-action-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-action-bar" }, properties: { "attr.id": "id", "id": "id", "class.open": "open()", "class": "this.classes" } }, ngImport: i0, template: `@if (open()) {
|
|
722
729
|
@if (label(); as lb) {
|
|
723
730
|
<span style="font-size: 13px" data-testid="label">
|
|
724
731
|
{{ lb }}
|
|
@@ -728,7 +735,7 @@ class MonkeyActionBarComponent {
|
|
|
728
735
|
<ng-content></ng-content>
|
|
729
736
|
}`, isInline: true, styles: ["monkey-action-bar{background-color:var(--mecx-color-white);border-radius:12px;position:fixed;bottom:60px;gap:24px;display:none;align-items:center;padding:4px 4px 4px 24px;border:2px solid var(--mecx-color-gray-200);box-shadow:0 8px 12px -4px var(--mecx-color-box-shadow),0 8px 8px 0 var(--mecx-color-box-shadow),0 16px 16px 8px var(--mecx-color-box-shadow);z-index:999}monkey-action-bar.center{left:50%;transform:translate(-50%)}monkey-action-bar.right{right:60px}monkey-action-bar.left{left:60px}monkey-action-bar.open{display:flex}@media(851px<width<1315px){monkey-action-bar{left:60px!important;transform:translate(0)!important}}@media(width<852px){monkey-action-bar{flex-direction:column;padding:16px}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}@media(width<450px){monkey-action-bar{flex-direction:column;left:24px!important;right:24px!important;bottom:24px!important;transform:translate(0)!important}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}monkey-action-bar>*:not(:first-child){flex-shrink:0;display:inline-flex}monkey-action-bar>*:not(:first-child):before{content:\"\";display:flex;box-sizing:border-box;width:1px;background-color:var(--mecx-color-gray-200);margin-right:24px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
730
737
|
}
|
|
731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
738
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyActionBarComponent, decorators: [{
|
|
732
739
|
type: Component,
|
|
733
740
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-action-bar', template: `@if (open()) {
|
|
734
741
|
@if (label(); as lb) {
|
|
@@ -757,59 +764,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
757
764
|
* MIT Licence
|
|
758
765
|
************************* */
|
|
759
766
|
|
|
760
|
-
/** ************************
|
|
761
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
762
|
-
* This style guide was developed by Monkey Exchange Team
|
|
763
|
-
* MIT Licence
|
|
764
|
-
************************* */
|
|
765
|
-
class MonkeyIconComponent {
|
|
766
|
-
set icon(val) {
|
|
767
|
-
if (val) {
|
|
768
|
-
this._icon = `mk-i mk-i-${val}`;
|
|
769
|
-
}
|
|
770
|
-
}
|
|
771
|
-
get id() {
|
|
772
|
-
return this._id;
|
|
773
|
-
}
|
|
774
|
-
set id(value) {
|
|
775
|
-
this._id = value || this._uid;
|
|
776
|
-
}
|
|
777
|
-
constructor() {
|
|
778
|
-
this.size = 'lg';
|
|
779
|
-
this._icon = '';
|
|
780
|
-
this._uid = inject(IdGenerator).getId('monkey-icon-');
|
|
781
|
-
// eslint-disable-next-line no-self-assign
|
|
782
|
-
this.id = this.id;
|
|
783
|
-
}
|
|
784
|
-
ngOnInit() {
|
|
785
|
-
if (!this._icon) {
|
|
786
|
-
throw new Error('monkey-icon must have icon input');
|
|
787
|
-
}
|
|
788
|
-
}
|
|
789
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
791
|
-
}
|
|
792
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyIconComponent, decorators: [{
|
|
793
|
-
type: Component,
|
|
794
|
-
args: [{ selector: 'monkey-icon', imports: [], template: '', encapsulation: ViewEncapsulation.None, host: {
|
|
795
|
-
'[class]': `_icon+' '+size`,
|
|
796
|
-
'[attr.id]': 'id',
|
|
797
|
-
'[id]': 'id'
|
|
798
|
-
}, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"] }]
|
|
799
|
-
}], ctorParameters: () => [], propDecorators: { icon: [{
|
|
800
|
-
type: Input
|
|
801
|
-
}], size: [{
|
|
802
|
-
type: Input
|
|
803
|
-
}], id: [{
|
|
804
|
-
type: Input
|
|
805
|
-
}] } });
|
|
806
|
-
|
|
807
|
-
/** ************************
|
|
808
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
809
|
-
* This style guide was developed by Monkey Exchange Team
|
|
810
|
-
* MIT Licence
|
|
811
|
-
************************* */
|
|
812
|
-
|
|
813
767
|
/** ************************
|
|
814
768
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
815
769
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -842,16 +796,16 @@ class MonkeyAlertComponent {
|
|
|
842
796
|
};
|
|
843
797
|
return typeIcons[type];
|
|
844
798
|
}
|
|
845
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
846
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
799
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <i class=\"mk-i mk-i-{{icon(type())}} {{'monkey-alert__card__type-' + type()}}\"></i>\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-medium fs-base\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
847
801
|
}
|
|
848
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
802
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
849
803
|
type: Component,
|
|
850
|
-
args: [{ encapsulation: ViewEncapsulation.None,
|
|
804
|
+
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-alert', host: {
|
|
851
805
|
'data-testid': 'monkey-alert',
|
|
852
806
|
'[attr.id]': 'id',
|
|
853
807
|
'[id]': 'id'
|
|
854
|
-
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <
|
|
808
|
+
}, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <i class=\"mk-i mk-i-{{icon(type())}} {{'monkey-alert__card__type-' + type()}}\"></i>\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-medium fs-base\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"] }]
|
|
855
809
|
}], ctorParameters: () => [], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], onButtonClicked: [{ type: i0.Output, args: ["onButtonClicked"] }], id: [{
|
|
856
810
|
type: Input
|
|
857
811
|
}] } });
|
|
@@ -903,8 +857,8 @@ class MonkeyPopoverContentComponent {
|
|
|
903
857
|
isTemplate(value) {
|
|
904
858
|
return value instanceof TemplateRef;
|
|
905
859
|
}
|
|
906
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
907
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
860
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
861
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyPopoverContentComponent, isStandalone: true, selector: "monkey-popover-content", inputs: { title: "title", content: "content", actions: "actions", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideClose: ["hideClose", "hideClose", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], enableAutofocus: "enableAutofocus" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
|
|
908
862
|
<div class="mecx-popover-container">
|
|
909
863
|
@if (!hideHeader) {
|
|
910
864
|
<div class="mecx-popover-header">
|
|
@@ -942,7 +896,7 @@ class MonkeyPopoverContentComponent {
|
|
|
942
896
|
</div>
|
|
943
897
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
|
|
944
898
|
}
|
|
945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
899
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
|
|
946
900
|
type: Component,
|
|
947
901
|
args: [{
|
|
948
902
|
selector: 'monkey-popover-content',
|
|
@@ -1204,10 +1158,10 @@ class MonkeyPopoverDirective {
|
|
|
1204
1158
|
this._resizeObserver.observe(this._componentRef.location.nativeElement);
|
|
1205
1159
|
}
|
|
1206
1160
|
}
|
|
1207
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1208
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.
|
|
1161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1162
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyPopoverDirective, isStandalone: true, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute], enableAutofocus: ["monkeyPopoverEnableAutofocus", "enableAutofocus", booleanAttribute] }, ngImport: i0 }); }
|
|
1209
1163
|
}
|
|
1210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
|
|
1211
1165
|
type: Directive,
|
|
1212
1166
|
args: [{
|
|
1213
1167
|
selector: '[monkeyPopover]'
|
|
@@ -1315,10 +1269,10 @@ class MonkeyEcxAddressService {
|
|
|
1315
1269
|
return this.mappingData(resp.places);
|
|
1316
1270
|
}));
|
|
1317
1271
|
}
|
|
1318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1319
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
1272
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyEcxAddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1273
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyEcxAddressService, providedIn: 'root' }); }
|
|
1320
1274
|
}
|
|
1321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyEcxAddressService, decorators: [{
|
|
1322
1276
|
type: Injectable,
|
|
1323
1277
|
args: [{ providedIn: 'root' }]
|
|
1324
1278
|
}] });
|
|
@@ -1377,7 +1331,8 @@ class MonkeyDictionaryService {
|
|
|
1377
1331
|
NEXT_6_MONTHS: 'Próximos 6 meses',
|
|
1378
1332
|
NEXT_12_MONTHS: 'Próximos 12 meses'
|
|
1379
1333
|
}
|
|
1380
|
-
}
|
|
1334
|
+
},
|
|
1335
|
+
OR: 'ou'
|
|
1381
1336
|
},
|
|
1382
1337
|
'es-CL': {
|
|
1383
1338
|
EDIT: 'Editar',
|
|
@@ -1422,7 +1377,8 @@ class MonkeyDictionaryService {
|
|
|
1422
1377
|
NEXT_6_MONTHS: 'Próximos 6 meses',
|
|
1423
1378
|
NEXT_12_MONTHS: 'Próximos 12 meses'
|
|
1424
1379
|
}
|
|
1425
|
-
}
|
|
1380
|
+
},
|
|
1381
|
+
OR: 'o'
|
|
1426
1382
|
},
|
|
1427
1383
|
'es-MX': {
|
|
1428
1384
|
EDIT: 'Editar',
|
|
@@ -1467,7 +1423,8 @@ class MonkeyDictionaryService {
|
|
|
1467
1423
|
NEXT_6_MONTHS: 'Próximos 6 meses',
|
|
1468
1424
|
NEXT_12_MONTHS: 'Próximos 12 meses'
|
|
1469
1425
|
}
|
|
1470
|
-
}
|
|
1426
|
+
},
|
|
1427
|
+
OR: 'o'
|
|
1471
1428
|
},
|
|
1472
1429
|
'en-US': {
|
|
1473
1430
|
EDIT: 'Edit',
|
|
@@ -1512,7 +1469,8 @@ class MonkeyDictionaryService {
|
|
|
1512
1469
|
NEXT_6_MONTHS: 'Next 6 months',
|
|
1513
1470
|
NEXT_12_MONTHS: 'Next 12 months'
|
|
1514
1471
|
}
|
|
1515
|
-
}
|
|
1472
|
+
},
|
|
1473
|
+
OR: 'or'
|
|
1516
1474
|
}
|
|
1517
1475
|
});
|
|
1518
1476
|
const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
|
|
@@ -1545,10 +1503,10 @@ class MonkeyDictionaryService {
|
|
|
1545
1503
|
return data[locale]?.[key] ?? null;
|
|
1546
1504
|
}));
|
|
1547
1505
|
}
|
|
1548
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1549
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
1506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1507
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
|
|
1550
1508
|
}
|
|
1551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
|
|
1552
1510
|
type: Injectable,
|
|
1553
1511
|
args: [{
|
|
1554
1512
|
providedIn: 'root'
|
|
@@ -1574,10 +1532,10 @@ class MonkeyStepperService {
|
|
|
1574
1532
|
return new Map(items).set(id, step);
|
|
1575
1533
|
});
|
|
1576
1534
|
}
|
|
1577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1578
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
1535
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1536
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
|
|
1579
1537
|
}
|
|
1580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperService, decorators: [{
|
|
1581
1539
|
type: Injectable,
|
|
1582
1540
|
args: [{
|
|
1583
1541
|
providedIn: 'root'
|
|
@@ -1662,10 +1620,10 @@ class MonkeyToastService {
|
|
|
1662
1620
|
}
|
|
1663
1621
|
return componentRef.instance;
|
|
1664
1622
|
}
|
|
1665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1666
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
1623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1624
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
|
|
1667
1625
|
}
|
|
1668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToastService, decorators: [{
|
|
1669
1627
|
type: Injectable,
|
|
1670
1628
|
args: [{
|
|
1671
1629
|
providedIn: 'root'
|
|
@@ -1684,10 +1642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1684
1642
|
* MIT Licence
|
|
1685
1643
|
************************* */
|
|
1686
1644
|
class MonkeyFormFieldControl {
|
|
1687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1688
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1646
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyFormFieldControl, isStandalone: true, ngImport: i0 }); }
|
|
1689
1647
|
}
|
|
1690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldControl, decorators: [{
|
|
1691
1649
|
type: Directive
|
|
1692
1650
|
}] });
|
|
1693
1651
|
|
|
@@ -1714,10 +1672,10 @@ class MonkeyDisplayDirective {
|
|
|
1714
1672
|
this.fallbackText = await firstValueFrom(this.i18nDictionary);
|
|
1715
1673
|
});
|
|
1716
1674
|
}
|
|
1717
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1718
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.
|
|
1675
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDisplayDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1676
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: MonkeyDisplayDirective, isStandalone: true, selector: "monkey-display", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
1719
1677
|
}
|
|
1720
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
|
|
1721
1679
|
type: Directive,
|
|
1722
1680
|
args: [{
|
|
1723
1681
|
selector: 'monkey-display'
|
|
@@ -1730,10 +1688,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1730
1688
|
* MIT Licence
|
|
1731
1689
|
************************* */
|
|
1732
1690
|
class MonkeyErrorDirective {
|
|
1733
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1734
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1691
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1692
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyErrorDirective, isStandalone: true, selector: "monkey-error", ngImport: i0 }); }
|
|
1735
1693
|
}
|
|
1736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1694
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
|
|
1737
1695
|
type: Directive,
|
|
1738
1696
|
args: [{
|
|
1739
1697
|
selector: 'monkey-error'
|
|
@@ -1746,10 +1704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1746
1704
|
* MIT Licence
|
|
1747
1705
|
************************* */
|
|
1748
1706
|
class MonkeyHelperDirective {
|
|
1749
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1750
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1707
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1708
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyHelperDirective, isStandalone: true, selector: "monkey-helper", ngImport: i0 }); }
|
|
1751
1709
|
}
|
|
1752
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1710
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
|
|
1753
1711
|
type: Directive,
|
|
1754
1712
|
args: [{
|
|
1755
1713
|
selector: 'monkey-helper'
|
|
@@ -1762,10 +1720,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1762
1720
|
* MIT Licence
|
|
1763
1721
|
************************* */
|
|
1764
1722
|
class MonkeyInfoDirective {
|
|
1765
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1766
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1723
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1724
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyInfoDirective, isStandalone: true, selector: "monkey-info", ngImport: i0 }); }
|
|
1767
1725
|
}
|
|
1768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
|
|
1769
1727
|
type: Directive,
|
|
1770
1728
|
args: [{
|
|
1771
1729
|
selector: 'monkey-info'
|
|
@@ -1778,10 +1736,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1778
1736
|
* MIT Licence
|
|
1779
1737
|
************************* */
|
|
1780
1738
|
class MonkeyLabelDirective {
|
|
1781
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1782
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1739
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1740
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyLabelDirective, isStandalone: true, selector: "monkey-label", ngImport: i0 }); }
|
|
1783
1741
|
}
|
|
1784
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
|
|
1785
1743
|
type: Directive,
|
|
1786
1744
|
args: [{
|
|
1787
1745
|
selector: 'monkey-label'
|
|
@@ -1794,10 +1752,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1794
1752
|
* MIT Licence
|
|
1795
1753
|
************************* */
|
|
1796
1754
|
class MonkeyPrefixDirective {
|
|
1797
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1798
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1755
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1756
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyPrefixDirective, isStandalone: true, selector: "monkey-prefix", ngImport: i0 }); }
|
|
1799
1757
|
}
|
|
1800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
|
|
1801
1759
|
type: Directive,
|
|
1802
1760
|
args: [{
|
|
1803
1761
|
selector: 'monkey-prefix'
|
|
@@ -1826,10 +1784,10 @@ class MonkeySuffixDirective {
|
|
|
1826
1784
|
this.action(event);
|
|
1827
1785
|
}
|
|
1828
1786
|
}
|
|
1829
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1830
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
1787
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1788
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeySuffixDirective, isStandalone: true, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
|
|
1831
1789
|
}
|
|
1832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
1790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
|
|
1833
1791
|
type: Directive,
|
|
1834
1792
|
args: [{
|
|
1835
1793
|
selector: 'monkey-suffix',
|
|
@@ -2119,10 +2077,10 @@ class MonkeyFormFieldComponent {
|
|
|
2119
2077
|
this.control.onContainerClick(event);
|
|
2120
2078
|
}, 0);
|
|
2121
2079
|
}
|
|
2122
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
2080
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, noFooterSpace: { classPropertyName: "noFooterSpace", publicName: "noFooterSpace", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, 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()", "class.no-footer-space": "noFooterSpace", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (internalDisplayOnly()) {\n <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n <div class=\"mecx-form-field-display-only-header\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n </div>\n <div class=\"mecx-form-field-display-only-body\">\n <ng-content select=\"monkey-display\"></ng-content>\n </div>\n <div class=\"mecx-form-field-display-only-action\">\n {{ editDictionary | async }} <util-icon name=\"edit\" />\n </div>\n </div>\n} @else {\n @if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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 @if (showFooter) {\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 }\n}\n\n<ng-template #labelTpl>\n <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;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}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.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-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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2124
2082
|
}
|
|
2125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
2083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2126
2084
|
type: Component,
|
|
2127
2085
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-form-field', exportAs: 'monkeyFormField', host: {
|
|
2128
2086
|
class: 'mecx-form-field',
|
|
@@ -2134,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
2134
2092
|
'[attr.id]': 'id',
|
|
2135
2093
|
'[id]': 'id',
|
|
2136
2094
|
'[class]': 'size'
|
|
2137
|
-
}, standalone: false, template: "@if (internalDisplayOnly()) {\n <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n <div class=\"mecx-form-field-display-only-header\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n </div>\n <div class=\"mecx-form-field-display-only-body\">\n <ng-content select=\"monkey-display\"></ng-content>\n </div>\n <div class=\"mecx-form-field-display-only-action\">\n {{ editDictionary | async }} <util-icon name=\"edit\" />\n </div>\n </div>\n} @else {\n @if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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 @if (showFooter) {\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 }\n}\n\n<ng-template #labelTpl>\n <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;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}.no-footer-space .mecx-form-field-footer{min-height:initial}.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-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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
2095
|
+
}, standalone: false, template: "@if (internalDisplayOnly()) {\n <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\n <div class=\"mecx-form-field-display-only-header\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\n </div>\n <div class=\"mecx-form-field-display-only-body\">\n <ng-content select=\"monkey-display\"></ng-content>\n </div>\n <div class=\"mecx-form-field-display-only-action\">\n {{ editDictionary | async }} <util-icon name=\"edit\" />\n </div>\n </div>\n} @else {\n @if (showHeader) {\n <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n <label [id]=\"labelId\" [attr.for]=\"control.id\">\n <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\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 @if (showFooter) {\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 }\n}\n\n<ng-template #labelTpl>\n <ng-content select=\"monkey-label\"></ng-content>\n</ng-template>\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:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;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}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.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-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}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
2138
2096
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2139
2097
|
type: Input
|
|
2140
2098
|
}], hideAction: [{
|
|
@@ -2159,11 +2117,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
2159
2117
|
* MIT Licence
|
|
2160
2118
|
************************* */
|
|
2161
2119
|
class MonkeyFormFieldModule {
|
|
2162
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2163
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
2164
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
2120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2121
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [CommonModule, UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
|
|
2122
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldModule, imports: [CommonModule] }); }
|
|
2165
2123
|
}
|
|
2166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
2124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
|
|
2167
2125
|
type: NgModule,
|
|
2168
2126
|
args: [{
|
|
2169
2127
|
imports: [CommonModule, UtilIconComponent],
|
|
@@ -2224,8 +2182,8 @@ class MonkeyOptionComponent {
|
|
|
2224
2182
|
onSelect(select) {
|
|
2225
2183
|
this._selectedState.set(select);
|
|
2226
2184
|
}
|
|
2227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2228
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
2185
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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 }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, 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": "isSelected()", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
|
|
2229
2187
|
@if (type === 'checkbox') {
|
|
2230
2188
|
<span class="mecx-option-checkbox">
|
|
2231
2189
|
<util-icon class="icon" name="check" />
|
|
@@ -2234,7 +2192,7 @@ class MonkeyOptionComponent {
|
|
|
2234
2192
|
<div #content><ng-content /></div>
|
|
2235
2193
|
`, 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-gray-900);background-color:var(--mecx-color-gray-300)}monkey-option.select.mecx-option-selected svg path{fill:var(--mecx-color-gray-900)}.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: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2236
2194
|
}
|
|
2237
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
2195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
2238
2196
|
type: Component,
|
|
2239
2197
|
args: [{ selector: 'monkey-option', standalone: true, imports: [UtilIconComponent], template: `
|
|
2240
2198
|
@if (type === 'checkbox') {
|
|
@@ -2450,8 +2408,8 @@ class MonkeyAutocompleteComponent {
|
|
|
2450
2408
|
isSelected(option) {
|
|
2451
2409
|
return option?.value === this.value;
|
|
2452
2410
|
}
|
|
2453
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2454
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
2411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAutocompleteComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyAutocompleteComponent, isStandalone: true, selector: "monkey-autocomplete", inputs: { placeholder: "placeholder", debounce: "debounce", tabIndex: "tabIndex", fetchOptions: "fetchOptions", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur($event)" }, properties: { "attr.data-testid": "'monkey-autocomplete'", "class.mecx-autocomplete-disabled": "_disabled", "class.mecx-autocomplete-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-autocomplete" }, providers: [
|
|
2455
2413
|
// eslint-disable-next-line no-use-before-define
|
|
2456
2414
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteComponent }
|
|
2457
2415
|
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
|
|
@@ -2524,7 +2482,7 @@ class MonkeyAutocompleteComponent {
|
|
|
2524
2482
|
</ng-template>
|
|
2525
2483
|
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
2526
2484
|
}
|
|
2527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
2485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAutocompleteComponent, decorators: [{
|
|
2528
2486
|
type: Component,
|
|
2529
2487
|
args: [{ selector: 'monkey-autocomplete', imports: [
|
|
2530
2488
|
CommonModule,
|
|
@@ -2823,8 +2781,8 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2823
2781
|
isSelected(option) {
|
|
2824
2782
|
return option === this.value;
|
|
2825
2783
|
}
|
|
2826
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2827
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
2784
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAutocompleteAddressComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2785
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyAutocompleteAddressComponent, isStandalone: true, selector: "monkey-autocomplete-address", inputs: { placeholder: "placeholder", debounce: "debounce", tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur($event)" }, properties: { "attr.data-testid": "'monkey-autocomplete-address'", "class.mecx-autocomplete-address-disabled": "_disabled", "class.mecx-autocomplete-address-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-autocomplete-address" }, providers: [
|
|
2828
2786
|
// eslint-disable-next-line no-use-before-define
|
|
2829
2787
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteAddressComponent }
|
|
2830
2788
|
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
|
|
@@ -2891,7 +2849,7 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2891
2849
|
</ng-template>
|
|
2892
2850
|
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
2893
2851
|
}
|
|
2894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
2852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAutocompleteAddressComponent, decorators: [{
|
|
2895
2853
|
type: Component,
|
|
2896
2854
|
args: [{ selector: 'monkey-autocomplete-address', imports: [
|
|
2897
2855
|
CommonModule,
|
|
@@ -3051,16 +3009,16 @@ class MonkeyAvatarComponent {
|
|
|
3051
3009
|
this.avatar = getInitial(value.name);
|
|
3052
3010
|
}
|
|
3053
3011
|
}
|
|
3054
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3055
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
3012
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3013
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyAvatarComponent, isStandalone: true, selector: "monkey-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-avatar" }, properties: { "attr.id": "_id", "id": "_id", "class": "this.classes" } }, ngImport: i0, template: "@switch (avatarType) {\n @case ('name') {\n <p [class]=\"size()\">{{ avatar }}</p>\n }\n\n @case ('icon') {\n <i class=\"mk-i mk-i-{{ avatar }} {{size()}}\"></i>\n }\n\n @case ('image') {\n <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n }\n}\n", styles: ["monkey-avatar{align-items:center;background:var(--mecx-color-gray-100);border-radius:4px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center}monkey-avatar.xs{height:24px;width:24px}monkey-avatar.sm{height:32px;width:32px}monkey-avatar.md{border-radius:8px;height:40px;width:40px}monkey-avatar.lg{border-radius:12px;height:48px;width:48px}monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}monkey-avatar p.xs{font-size:16px}monkey-avatar p.sm{font-size:18px}monkey-avatar p.md{font-size:20px}monkey-avatar p.lg{font-size:22px}monkey-avatar img{border-radius:4px;height:auto}monkey-avatar img.xs{width:24px}monkey-avatar img.sm{width:32px}monkey-avatar img.md{border-radius:8px;width:40px}monkey-avatar img.lg{border-radius:12px;width:48px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3056
3014
|
}
|
|
3057
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
|
|
3058
3016
|
type: Component,
|
|
3059
|
-
args: [{
|
|
3017
|
+
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
|
|
3060
3018
|
'data-testid': 'monkey-avatar',
|
|
3061
3019
|
'[attr.id]': '_id',
|
|
3062
3020
|
'[id]': '_id'
|
|
3063
|
-
}, template: "@switch (avatarType) {\n @case ('name') {\n <p [class]=\"size()\">{{ avatar }}</p>\n }\n\n @case ('icon') {\n <
|
|
3021
|
+
}, template: "@switch (avatarType) {\n @case ('name') {\n <p [class]=\"size()\">{{ avatar }}</p>\n }\n\n @case ('icon') {\n <i class=\"mk-i mk-i-{{ avatar }} {{size()}}\"></i>\n }\n\n @case ('image') {\n <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n }\n}\n", styles: ["monkey-avatar{align-items:center;background:var(--mecx-color-gray-100);border-radius:4px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center}monkey-avatar.xs{height:24px;width:24px}monkey-avatar.sm{height:32px;width:32px}monkey-avatar.md{border-radius:8px;height:40px;width:40px}monkey-avatar.lg{border-radius:12px;height:48px;width:48px}monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}monkey-avatar p.xs{font-size:16px}monkey-avatar p.sm{font-size:18px}monkey-avatar p.md{font-size:20px}monkey-avatar p.lg{font-size:22px}monkey-avatar img{border-radius:4px;height:auto}monkey-avatar img.xs{width:24px}monkey-avatar img.sm{width:32px}monkey-avatar img.md{border-radius:8px;width:40px}monkey-avatar img.lg{border-radius:12px;width:48px}\n"] }]
|
|
3064
3022
|
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classes: [{
|
|
3065
3023
|
type: HostBinding,
|
|
3066
3024
|
args: ['class']
|
|
@@ -3108,15 +3066,15 @@ class MonkeyBadgeComponent {
|
|
|
3108
3066
|
};
|
|
3109
3067
|
}
|
|
3110
3068
|
}
|
|
3111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
3069
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3070
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyBadgeComponent, isStandalone: true, selector: "monkey-badge", inputs: { type: "type", typeColors: "typeColors", size: "size", largePadding: ["largePadding", "largePadding", booleanAttribute], icon: "icon", text: "text" }, host: { attributes: { "data-testid": "monkey-badge" }, properties: { "attr.id": "id", "style": "this.hostVariables", "class": "this.size", "class.large-padding": "this.largePadding" } }, ngImport: i0, template: "@if (text) {\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}}\"></i>\n }\n <span>\n {{ text }}\n </span>\n} @else {\n <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;border-radius:8px;align-items:center;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, var(--mecx-color-gray-900));background-color:var(--monkey-badge-background, var(--mecx-color-gray-50))}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px;padding:4px 8px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px;padding:8px 12px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px;padding:12px 16px}:host.lg .icon{font-size:24px}\n"] }); }
|
|
3113
3071
|
}
|
|
3114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3072
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyBadgeComponent, decorators: [{
|
|
3115
3073
|
type: Component,
|
|
3116
|
-
args: [{ selector: 'monkey-badge',
|
|
3074
|
+
args: [{ selector: 'monkey-badge', host: {
|
|
3117
3075
|
'data-testid': 'monkey-badge',
|
|
3118
3076
|
'[attr.id]': 'id'
|
|
3119
|
-
}, template: "@if (text) {\n @if (icon) {\n <
|
|
3077
|
+
}, template: "@if (text) {\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}}\"></i>\n }\n <span>\n {{ text }}\n </span>\n} @else {\n <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;border-radius:8px;align-items:center;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, var(--mecx-color-gray-900));background-color:var(--monkey-badge-background, var(--mecx-color-gray-50))}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px;padding:4px 8px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px;padding:8px 12px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px;padding:12px 16px}:host.lg .icon{font-size:24px}\n"] }]
|
|
3120
3078
|
}], propDecorators: { hostVariables: [{
|
|
3121
3079
|
type: HostBinding,
|
|
3122
3080
|
args: ['style']
|
|
@@ -3174,10 +3132,10 @@ class MonkeyBreadcrumbComponent {
|
|
|
3174
3132
|
this._router.navigate([item.path]);
|
|
3175
3133
|
}
|
|
3176
3134
|
}
|
|
3177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
3135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n <a class=\"first\" (click)=\"handleNavigate(first)\">\n {{ first.label | titlecase }}\n </a>\n <span>/</span>\n @if(colapsed){\n <span>...</span>\n <span>/</span>\n }\n <a class=\"last\" (click)=\"handleNavigate(last)\">\n {{ last.label | titlecase }}\n </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:var(--mecx-color-gray-900);text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:var(--mecx-spaces-xs);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3179
3137
|
}
|
|
3180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
|
|
3181
3139
|
type: Component,
|
|
3182
3140
|
args: [{ selector: 'monkey-breadcrumb', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
|
|
3183
3141
|
'data-testid': 'monkey-breadcrumb',
|
|
@@ -3234,10 +3192,10 @@ class MonkeyButtonComponent {
|
|
|
3234
3192
|
get element() {
|
|
3235
3193
|
return this.elementRef.nativeElement;
|
|
3236
3194
|
}
|
|
3237
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3238
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
3195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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 @if (!loading) {\n <ng-content select=\"[first]\"></ng-content>\n }\n <span><ng-content></ng-content></span>\n @if (!loading) {\n <ng-content select=\"[last]\"></ng-content>\n }\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.has-progress button:disabled{position:relative;overflow:hidden;border:2px solid var(--mecx-color-gray-400)}monkey-button.has-progress :is(.mecx-button){transition:none!important}monkey-button.has-progress :is(.mecx-button) :is(.content){transition:none!important}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:var(--mecx-color-white)}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-700)}monkey-button .mecx-button.primary:hover:not(:disabled).success{background:var(--mecx-color-success-700)}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(.9)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3239
3197
|
}
|
|
3240
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
3241
3199
|
type: Component,
|
|
3242
3200
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent], selector: 'monkey-button', standalone: true, host: {
|
|
3243
3201
|
'data-testid': 'monkey-button',
|
|
@@ -3371,8 +3329,8 @@ class MonkeyCheckboxComponent {
|
|
|
3371
3329
|
}
|
|
3372
3330
|
return '';
|
|
3373
3331
|
}
|
|
3374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
3332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyCheckboxComponent, isStandalone: true, selector: "monkey-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], required: ["required", "required", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], size: "size", value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "input-checkbox" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-checkbox-checked": "value", "class.mecx-checkbox-focused": "isFocused", "class.mecx-checkbox-indeterminate": "indeterminate", "class.mecx-checkbox-invalid": "showInvalid", "class.sm": "size.includes(\"sm\")", "class.md": "size.includes(\"md\")", "class.lg": "size.includes(\"lg\")" }, classAttribute: "mecx-checkbox" }, providers: [
|
|
3376
3334
|
{
|
|
3377
3335
|
provide: NG_VALUE_ACCESSOR,
|
|
3378
3336
|
useExisting: forwardRef(() => {
|
|
@@ -3404,7 +3362,7 @@ class MonkeyCheckboxComponent {
|
|
|
3404
3362
|
])
|
|
3405
3363
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3406
3364
|
}
|
|
3407
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
|
|
3408
3366
|
type: Component,
|
|
3409
3367
|
args: [{ selector: 'monkey-checkbox', imports: [ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3410
3368
|
trigger('iconAnimation', [
|
|
@@ -3609,8 +3567,8 @@ class MonkeyInputCurrencyDirective {
|
|
|
3609
3567
|
focusOutChanged() {
|
|
3610
3568
|
this.ngControl?.control?.markAsTouched();
|
|
3611
3569
|
}
|
|
3612
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3613
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.
|
|
3570
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3571
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyInputCurrencyDirective, isStandalone: false, selector: "input[monkey-input-currency]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type" }, host: { listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
|
|
3614
3572
|
{
|
|
3615
3573
|
provide: MonkeyFormFieldControl,
|
|
3616
3574
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -3618,7 +3576,7 @@ class MonkeyInputCurrencyDirective {
|
|
|
3618
3576
|
}
|
|
3619
3577
|
], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
|
|
3620
3578
|
}
|
|
3621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputCurrencyDirective, decorators: [{
|
|
3622
3580
|
type: Directive,
|
|
3623
3581
|
args: [{
|
|
3624
3582
|
selector: 'input[monkey-input-currency]',
|
|
@@ -3800,8 +3758,8 @@ class MonkeyInputDirective {
|
|
|
3800
3758
|
focusOutChanged() {
|
|
3801
3759
|
this.ngControl?.control?.markAsTouched();
|
|
3802
3760
|
}
|
|
3803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3804
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.
|
|
3761
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3762
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyInputDirective, isStandalone: false, selector: "input[monkey-input],textarea[monkey-input]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type", min: "min", max: "max", percent: "percent" }, host: { attributes: { "data-testid": "monkey-input" }, listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
|
|
3805
3763
|
{
|
|
3806
3764
|
provide: MonkeyFormFieldControl,
|
|
3807
3765
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -3809,7 +3767,7 @@ class MonkeyInputDirective {
|
|
|
3809
3767
|
}
|
|
3810
3768
|
], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
|
|
3811
3769
|
}
|
|
3812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputDirective, decorators: [{
|
|
3813
3771
|
type: Directive,
|
|
3814
3772
|
args: [{
|
|
3815
3773
|
selector: 'input[monkey-input],textarea[monkey-input]',
|
|
@@ -3863,11 +3821,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3863
3821
|
* MIT Licence
|
|
3864
3822
|
************************* */
|
|
3865
3823
|
class MonkeyInputModule {
|
|
3866
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3867
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
3868
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
3824
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3825
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputModule, declarations: [MonkeyInputDirective, MonkeyInputCurrencyDirective], exports: [MonkeyInputDirective, MonkeyInputCurrencyDirective] }); }
|
|
3826
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputModule, providers: [CurrencyPipe] }); }
|
|
3869
3827
|
}
|
|
3870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputModule, decorators: [{
|
|
3871
3829
|
type: NgModule,
|
|
3872
3830
|
args: [{
|
|
3873
3831
|
providers: [CurrencyPipe],
|
|
@@ -3899,6 +3857,7 @@ class MonkeyIconButtonComponent {
|
|
|
3899
3857
|
this.size = 'md';
|
|
3900
3858
|
this.disabled = false;
|
|
3901
3859
|
this.icon = '';
|
|
3860
|
+
this.color = 'default';
|
|
3902
3861
|
this._uid = inject(IdGenerator).getId('monkey-icon-button-');
|
|
3903
3862
|
// eslint-disable-next-line no-self-assign
|
|
3904
3863
|
this.id = this.id;
|
|
@@ -3910,16 +3869,16 @@ class MonkeyIconButtonComponent {
|
|
|
3910
3869
|
event.stopImmediatePropagation();
|
|
3911
3870
|
}
|
|
3912
3871
|
}
|
|
3913
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3914
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
3872
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3873
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", loading: "loading", color: "color", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button\n class=\"mecx-icon-button\"\n [ngClass]=\"type + ' ' + size + ' ' + color\"\n [disabled]=\"disabled || loading\"\n>\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n @if (!loading) {\n <i class=\"mk-i mk-i-{{icon}} {{size}}\"></i>\n }\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-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-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}monkey-icon-button .mecx-icon-button.error monkey-icon{color:var(--mecx-color-error-main)}monkey-icon-button .mecx-icon-button.error:hover monkey-icon{color:var(--mecx-color-error-700)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3915
3874
|
}
|
|
3916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
3875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
|
|
3917
3876
|
type: Component,
|
|
3918
|
-
args: [{ selector: 'monkey-icon-button', imports: [CommonModule,
|
|
3877
|
+
args: [{ selector: 'monkey-icon-button', imports: [CommonModule, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
3919
3878
|
'data-testid': 'monkey-icon-button',
|
|
3920
3879
|
'[attr.id]': 'id',
|
|
3921
3880
|
'[id]': 'id'
|
|
3922
|
-
}, template: "<button
|
|
3881
|
+
}, template: "<button\n class=\"mecx-icon-button\"\n [ngClass]=\"type + ' ' + size + ' ' + color\"\n [disabled]=\"disabled || loading\"\n>\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n @if (!loading) {\n <i class=\"mk-i mk-i-{{icon}} {{size}}\"></i>\n }\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-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-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}monkey-icon-button .mecx-icon-button.error monkey-icon{color:var(--mecx-color-error-main)}monkey-icon-button .mecx-icon-button.error:hover monkey-icon{color:var(--mecx-color-error-700)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
|
|
3923
3882
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
3924
3883
|
type: Input
|
|
3925
3884
|
}], size: [{
|
|
@@ -3930,6 +3889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3930
3889
|
type: Input
|
|
3931
3890
|
}], loading: [{
|
|
3932
3891
|
type: Input
|
|
3892
|
+
}], color: [{
|
|
3893
|
+
type: Input
|
|
3933
3894
|
}], id: [{
|
|
3934
3895
|
type: Input
|
|
3935
3896
|
}], onClick: [{
|
|
@@ -4145,10 +4106,10 @@ class MonkeyDateRangeMonthComponent {
|
|
|
4145
4106
|
endDate: this._handledEndDate
|
|
4146
4107
|
});
|
|
4147
4108
|
}
|
|
4148
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4149
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
4109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDateRangeMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyDateRangeMonthComponent, isStandalone: true, selector: "monkey-date-range-month", inputs: { month: "month", year: "year", startDate: "startDate", endDate: "endDate", hidePrevious: ["hidePrevious", "hidePrevious", booleanAttribute], hideNext: ["hideNext", "hideNext", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onNavigate: "onNavigate", onDate: "onDate" }, host: { attributes: { "data-testid": "month" }, properties: { "attr.id": "id", "id": "id" } }, usesOnChanges: true, ngImport: i0, template: "@if (i18nDictionary | async; as i18n) {\n <div class=\"header\">\n @if (!hidePrevious) {\n <monkey-icon-button\n size=\"sm\"\n icon=\"arrow-left\"\n type=\"secondary\"\n class=\"previous\"\n [disabled]=\"daysInMonth.blockPrev\"\n (click)=\"onNavigate.next('previous')\"\n >\n </monkey-icon-button>\n }\n {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n @if (!hideNext) {\n <monkey-icon-button\n size=\"sm\"\n icon=\"arrow-right\"\n type=\"secondary\"\n class=\"next\"\n [disabled]=\"daysInMonth.blockNext\"\n (click)=\"onNavigate.next('next')\"\n >\n </monkey-icon-button>\n }\n </div>\n <div class=\"week-labels\">\n @for (day of i18n?.['WEEK-DAYS']; track day) {\n <span class=\"day\">{{ day }}</span>\n }\n </div>\n <div class=\"dates\">\n @for (day of daysInMonth.days; track $index) {\n <div\n class=\"day\"\n [class.disabled]=\"day!.isDisabled\"\n [class.in-range]=\"isInRange(day!)\"\n [class.selected]=\"isSelected(day!)\"\n [class.first]=\"isFirst(day!)\"\n [class.last]=\"isLast(day!)\"\n [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n [class.temporary-last]=\"isInLastTemporary(day!)\"\n (click)=\"onSelectDate($event, day!)\"\n (mouseenter)=\"temporaryEndDate = day!\"\n (mouseleave)=\"temporaryEndDate = null\"\n >\n {{ day!.date | date: 'd' }}\n @if (day?.isToday) {\n <span class=\"today\"></span>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
4150
4111
|
}
|
|
4151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
4112
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDateRangeMonthComponent, decorators: [{
|
|
4152
4113
|
type: Component,
|
|
4153
4114
|
args: [{ selector: 'monkey-date-range-month', imports: [CommonModule, MonkeyIconButtonComponent], host: {
|
|
4154
4115
|
'data-testid': 'month',
|
|
@@ -4214,10 +4175,10 @@ class MonkeyDateRangeQuickActionsComponent {
|
|
|
4214
4175
|
this.selectedAction = key;
|
|
4215
4176
|
this.onChange.next(value);
|
|
4216
4177
|
}
|
|
4217
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
4178
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4179
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyDateRangeQuickActionsComponent, isStandalone: true, selector: "monkey-date-range-quick-actions", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "quick-actions" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (i18nDictionary | async; as i18n) {\n @for (item of actions; track item.key) {\n <div\n class=\"item\"\n [class.selected]=\"item.key === selectedAction\"\n (click)=\"onHandleAction(item)\"\n [attr.tabindex]=\"$index\"\n >\n {{ i18n?.['QUICK-ACTIONS']?.[item.key] }}\n </div>\n }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 8px 12px 12px;gap:4px}:host .item{color:var(--mecx-color-gray-900);font-size:13px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.26px;padding:4px 12px;cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;border-radius:4px}:host .item.selected{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:hover{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4219
4180
|
}
|
|
4220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
4181
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, decorators: [{
|
|
4221
4182
|
type: Component,
|
|
4222
4183
|
args: [{ selector: 'monkey-date-range-quick-actions', imports: [CommonModule], host: {
|
|
4223
4184
|
'data-testid': 'quick-actions',
|
|
@@ -4409,10 +4370,10 @@ class MonkeyDateRangeComponent {
|
|
|
4409
4370
|
this.firstCalendar = calendars.firstCalendar;
|
|
4410
4371
|
this.secondCalendar = calendars.secondCalendar;
|
|
4411
4372
|
}
|
|
4412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
4373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (i18nDictionary | async; as i18n) {\n <div class=\"container-date-range-group\">\n @if (!hideQuickAction) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n }\n <div class=\"container-date-range\">\n @if (!hideHeader) {\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n @if (allowFastActionOnHeader) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n } @else {\n <div class=\"inputs\">\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"startDate\"\n [(ngModel)]=\"handledStartDate\"\n (ngModelChange)=\"onDataChange($event, true)\"\n [min]=\"handledMinDate\"\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n (change)=\"onChangeInputStartDate($event)\"\n />\n </monkey-form-field>\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"endDate\"\n [(ngModel)]=\"handledEndDate\"\n (ngModelChange)=\"onDataChange($event, false)\"\n [min]=\"handledStartDate ? handledStartDate : ''\"\n [max]=\"handledMaxDate\"\n (change)=\"onChangeInputEndDate($event)\"\n />\n </monkey-form-field>\n </div>\n @if (isInvalidInterval) {\n <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n }\n }\n </div>\n }\n <div class=\"body\">\n <div class=\"calendars\">\n <monkey-date-range-month\n [month]=\"firstCalendar.month\"\n [year]=\"firstCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n [hideNext]=\"!hideSecondCalendar\"\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n @if (!hideSecondCalendar) {\n <monkey-date-range-month\n [month]=\"secondCalendar.month\"\n [year]=\"secondCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n hidePrevious\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n }\n </div>\n </div>\n @if (!hideActions) {\n <div class=\"actions\">\n <monkey-button size=\"sm\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n {{ i18n?.ACTIONS?.CANCEL }}\n </monkey-button>\n <monkey-button\n size=\"sm\"\n (click)=\"onSubmit()\"\n [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n >\n {{ i18n?.ACTIONS?.APPLY }}\n </monkey-button>\n </div>\n }\n </div>\n </div>\n}\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "directive", type: MonkeyLabelDirective, selector: "monkey-label" }, { kind: "directive", type: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
|
|
4414
4375
|
}
|
|
4415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
4376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
|
|
4416
4377
|
type: Component,
|
|
4417
4378
|
args: [{ selector: 'monkey-date-range', imports: [
|
|
4418
4379
|
CommonModule,
|
|
@@ -4428,7 +4389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
4428
4389
|
'data-testid': 'monkey-date-range',
|
|
4429
4390
|
'[attr.id]': 'id',
|
|
4430
4391
|
'[id]': 'id'
|
|
4431
|
-
}, template: "@if (i18nDictionary | async; as i18n) {\n <div class=\"container-date-range-group\">\n @if (!hideQuickAction) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n }\n <div class=\"container-date-range\">\n @if (!hideHeader) {\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n @if (allowFastActionOnHeader) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n } @else {\n <div class=\"inputs\">\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"startDate\"\n [(ngModel)]=\"handledStartDate\"\n (ngModelChange)=\"onDataChange($event, true)\"\n [min]=\"handledMinDate\"\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n (change)=\"onChangeInputStartDate($event)\"\n
|
|
4392
|
+
}, template: "@if (i18nDictionary | async; as i18n) {\n <div class=\"container-date-range-group\">\n @if (!hideQuickAction) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n }\n <div class=\"container-date-range\">\n @if (!hideHeader) {\n <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n @if (allowFastActionOnHeader) {\n <div class=\"quick-actions\">\n <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n </monkey-date-range-quick-actions>\n </div>\n } @else {\n <div class=\"inputs\">\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"startDate\"\n [(ngModel)]=\"handledStartDate\"\n (ngModelChange)=\"onDataChange($event, true)\"\n [min]=\"handledMinDate\"\n [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n (change)=\"onChangeInputStartDate($event)\"\n />\n </monkey-form-field>\n <monkey-form-field hideAction enableClear size=\"sm\">\n <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n <input\n type=\"date\"\n monkey-input\n id=\"endDate\"\n [(ngModel)]=\"handledEndDate\"\n (ngModelChange)=\"onDataChange($event, false)\"\n [min]=\"handledStartDate ? handledStartDate : ''\"\n [max]=\"handledMaxDate\"\n (change)=\"onChangeInputEndDate($event)\"\n />\n </monkey-form-field>\n </div>\n @if (isInvalidInterval) {\n <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n }\n }\n </div>\n }\n <div class=\"body\">\n <div class=\"calendars\">\n <monkey-date-range-month\n [month]=\"firstCalendar.month\"\n [year]=\"firstCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n [hideNext]=\"!hideSecondCalendar\"\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n @if (!hideSecondCalendar) {\n <monkey-date-range-month\n [month]=\"secondCalendar.month\"\n [year]=\"secondCalendar.year\"\n [startDate]=\"handledStartDate\"\n [endDate]=\"handledEndDate\"\n (onDate)=\"onHandleDate($event)\"\n (onNavigate)=\"onHandleNavigate($event)\"\n hidePrevious\n [minDate]=\"handledMinDate\"\n [maxDate]=\"handledMaxDate\"\n >\n </monkey-date-range-month>\n }\n </div>\n </div>\n @if (!hideActions) {\n <div class=\"actions\">\n <monkey-button size=\"sm\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n {{ i18n?.ACTIONS?.CANCEL }}\n </monkey-button>\n <monkey-button\n size=\"sm\"\n (click)=\"onSubmit()\"\n [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n >\n {{ i18n?.ACTIONS?.APPLY }}\n </monkey-button>\n </div>\n }\n </div>\n </div>\n}\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-date-range-group{width:100%;display:inline-flex}:host .container-date-range-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-date-range-group .container-date-range{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"] }]
|
|
4432
4393
|
}], ctorParameters: () => [], propDecorators: { startDate: [{
|
|
4433
4394
|
type: Input
|
|
4434
4395
|
}], endDate: [{
|
|
@@ -4491,10 +4452,10 @@ class MonkeyDividerComponent {
|
|
|
4491
4452
|
// eslint-disable-next-line no-self-assign
|
|
4492
4453
|
this.id = this.id;
|
|
4493
4454
|
}
|
|
4494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.
|
|
4455
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4456
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: MonkeyDividerComponent, isStandalone: true, selector: "monkey-divider", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-divider" }, properties: { "attr.id": "id", "id": "id", "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-divider{display:flex;box-sizing:border-box;width:100%;background-color:var(--mecx-color-gray-200)}monkey-divider.lg{height:4px}monkey-divider.lg.vertical{width:4px!important}monkey-divider.md{height:2px}monkey-divider.md.vertical{width:2px!important}monkey-divider.sm{height:1px}monkey-divider.sm.vertical{width:1px!important}monkey-divider.vertical{height:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4496
4457
|
}
|
|
4497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
4458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDividerComponent, decorators: [{
|
|
4498
4459
|
type: Component,
|
|
4499
4460
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-divider', standalone: true, template: '', host: {
|
|
4500
4461
|
'data-testid': 'monkey-divider',
|
|
@@ -4549,8 +4510,8 @@ class MonkeyDownloadButtonComponent {
|
|
|
4549
4510
|
onDownload() {
|
|
4550
4511
|
this.onChange.emit({ component: this });
|
|
4551
4512
|
}
|
|
4552
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4553
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
4513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDownloadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyDownloadButtonComponent, isStandalone: true, selector: "monkey-download-button", inputs: { progress: "progress", disabled: "disabled", color: "color", size: "size", type: "type", loading: "loading", tabIndex: "tabIndex", id: "id" }, outputs: { onChange: "onChange" }, host: { properties: { "attr.data-testid": "'monkey-download-button'", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-download-button" }, ngImport: i0, template: `
|
|
4554
4515
|
<monkey-button
|
|
4555
4516
|
[type]="type"
|
|
4556
4517
|
[color]="color"
|
|
@@ -4581,7 +4542,7 @@ class MonkeyDownloadButtonComponent {
|
|
|
4581
4542
|
</monkey-button>
|
|
4582
4543
|
`, isInline: true, styles: [":host{display:inline-flex}:host .content-download{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)}:host .content-download-progress{position:absolute;left:0;top:0;height:100%;color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main);z-index:1;font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:var(--mecx-button-progress);transition:width .01s ease-in-out;text-align:right}:host .content-download-progress:before,:host .content-download-progress:after{content:\"\";position:absolute;width:200px;height:200px;top:50%;right:-8px;background:var(--mecx-color-theme-main);border-radius:45% 47% 43% 46%;transform:translateY(-50%) rotate(0);animation:rotate 7s linear infinite;z-index:-1}:host .content-download-progress:after{content:\"\";border-radius:47% 42% 46% 44%;background:var(--mecx-color-theme-300);transform:translateY(-50%) rotate(0);animation:rotate 9s linear -4s infinite;z-index:-2;width:140px;height:150px}@keyframes rotate{50%{transform:translateY(-50%) rotate(180deg)}to{transform:translateY(-50%) rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }] }); }
|
|
4583
4544
|
}
|
|
4584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
4545
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyDownloadButtonComponent, decorators: [{
|
|
4585
4546
|
type: Component,
|
|
4586
4547
|
args: [{ selector: 'monkey-download-button', imports: [MonkeyButtonComponent], template: `
|
|
4587
4548
|
<monkey-button
|
|
@@ -4649,104 +4610,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
4649
4610
|
* This style guide was developed by Monkey Exchange Team
|
|
4650
4611
|
* MIT Licence
|
|
4651
4612
|
************************* */
|
|
4652
|
-
class
|
|
4653
|
-
|
|
4654
|
-
this.
|
|
4655
|
-
this.showPopOver = false;
|
|
4656
|
-
this.elementTarget = null;
|
|
4657
|
-
this.closePopOver = () => {
|
|
4658
|
-
this.showPopOver = false;
|
|
4659
|
-
};
|
|
4660
|
-
}
|
|
4661
|
-
ngAfterContentInit() { }
|
|
4662
|
-
ngOnChanges(changes) { }
|
|
4663
|
-
ngOnDestroy() { }
|
|
4664
|
-
onShowPopOver(el) {
|
|
4665
|
-
this.elementTarget = el.element;
|
|
4666
|
-
this.showPopOver = true;
|
|
4613
|
+
class MonkeyRadioButtonComponent {
|
|
4614
|
+
get classes() {
|
|
4615
|
+
return `${this.position} ${this.size}`;
|
|
4667
4616
|
}
|
|
4668
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", host: { properties: { "attr.data-testid": "'monkey-filter-bar'" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
|
|
4670
|
-
<monkey-form-field>
|
|
4671
|
-
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
4672
|
-
</monkey-form-field>
|
|
4673
|
-
<monkey-button
|
|
4674
|
-
#popoverTarget
|
|
4675
|
-
class="btn-filter"
|
|
4676
|
-
type="secondary"
|
|
4677
|
-
(click)="onShowPopOver(popoverTarget)"
|
|
4678
|
-
>
|
|
4679
|
-
<util-icon class="icon" name="addPlus" first />
|
|
4680
|
-
Adicionar Filtro
|
|
4681
|
-
</monkey-button>
|
|
4682
|
-
|
|
4683
|
-
<ng-template
|
|
4684
|
-
[monkeyPopover]="showPopOver"
|
|
4685
|
-
[monkeyPopoverTarget]="elementTarget"
|
|
4686
|
-
[monkeyPopoverClosed]="closePopOver"
|
|
4687
|
-
monkeyPopoverDir="ltr"
|
|
4688
|
-
[monkeyPopoverHideHeader]="true"
|
|
4689
|
-
>
|
|
4690
|
-
<monkey-option> Status </monkey-option>
|
|
4691
|
-
<monkey-option> Data de Emissão </monkey-option>
|
|
4692
|
-
<monkey-option> Data de Vencimento </monkey-option>
|
|
4693
|
-
</ng-template>
|
|
4694
|
-
`, 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: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], 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: "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", "selected"] }] }); }
|
|
4695
|
-
}
|
|
4696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
4697
|
-
type: Component,
|
|
4698
|
-
args: [{ selector: 'monkey-filter-bar', imports: [
|
|
4699
|
-
FormsModule,
|
|
4700
|
-
ReactiveFormsModule,
|
|
4701
|
-
MonkeyFormFieldModule,
|
|
4702
|
-
MonkeyFormFieldModule,
|
|
4703
|
-
MonkeyInputModule,
|
|
4704
|
-
MonkeyButtonComponent,
|
|
4705
|
-
UtilIconComponent,
|
|
4706
|
-
MonkeyOptionComponent
|
|
4707
|
-
], template: `
|
|
4708
|
-
<monkey-form-field>
|
|
4709
|
-
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
4710
|
-
</monkey-form-field>
|
|
4711
|
-
<monkey-button
|
|
4712
|
-
#popoverTarget
|
|
4713
|
-
class="btn-filter"
|
|
4714
|
-
type="secondary"
|
|
4715
|
-
(click)="onShowPopOver(popoverTarget)"
|
|
4716
|
-
>
|
|
4717
|
-
<util-icon class="icon" name="addPlus" first />
|
|
4718
|
-
Adicionar Filtro
|
|
4719
|
-
</monkey-button>
|
|
4720
|
-
|
|
4721
|
-
<ng-template
|
|
4722
|
-
[monkeyPopover]="showPopOver"
|
|
4723
|
-
[monkeyPopoverTarget]="elementTarget"
|
|
4724
|
-
[monkeyPopoverClosed]="closePopOver"
|
|
4725
|
-
monkeyPopoverDir="ltr"
|
|
4726
|
-
[monkeyPopoverHideHeader]="true"
|
|
4727
|
-
>
|
|
4728
|
-
<monkey-option> Status </monkey-option>
|
|
4729
|
-
<monkey-option> Data de Emissão </monkey-option>
|
|
4730
|
-
<monkey-option> Data de Vencimento </monkey-option>
|
|
4731
|
-
</ng-template>
|
|
4732
|
-
`, host: {
|
|
4733
|
-
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
4734
|
-
class: 'mecx-filter-bar'
|
|
4735
|
-
}, 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"] }]
|
|
4736
|
-
}] });
|
|
4737
|
-
|
|
4738
|
-
/** ************************
|
|
4739
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
4740
|
-
* This style guide was developed by Monkey Exchange Team
|
|
4741
|
-
* MIT Licence
|
|
4742
|
-
************************* */
|
|
4743
|
-
|
|
4744
|
-
/** ************************
|
|
4745
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
4746
|
-
* This style guide was developed by Monkey Exchange Team
|
|
4747
|
-
* MIT Licence
|
|
4748
|
-
************************* */
|
|
4749
|
-
class MonkeyInputCodeComponent {
|
|
4750
4617
|
get disabled() {
|
|
4751
4618
|
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
4752
4619
|
return this.ngControl.disabled;
|
|
@@ -4760,53 +4627,93 @@ class MonkeyInputCodeComponent {
|
|
|
4760
4627
|
this.stateChanges.next();
|
|
4761
4628
|
}
|
|
4762
4629
|
}
|
|
4630
|
+
get required() {
|
|
4631
|
+
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
4632
|
+
}
|
|
4633
|
+
set required(value) {
|
|
4634
|
+
this._required = value;
|
|
4635
|
+
this.stateChanges.next();
|
|
4636
|
+
}
|
|
4763
4637
|
set value(value) {
|
|
4764
|
-
if (this._value !== value
|
|
4638
|
+
if (this._value !== value) {
|
|
4765
4639
|
this._value = value;
|
|
4766
4640
|
this._onChange(value);
|
|
4767
|
-
this._onTouched();
|
|
4768
4641
|
}
|
|
4769
4642
|
}
|
|
4770
4643
|
get value() {
|
|
4771
4644
|
return this._value;
|
|
4772
4645
|
}
|
|
4773
|
-
constructor(formField) {
|
|
4646
|
+
constructor(changeDetectorRef, formField) {
|
|
4647
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
4774
4648
|
this.formField = formField;
|
|
4775
|
-
this.
|
|
4776
|
-
this.
|
|
4777
|
-
this.
|
|
4778
|
-
this.
|
|
4779
|
-
this.
|
|
4780
|
-
this._onChange = () => { };
|
|
4781
|
-
this._onTouched = () => { };
|
|
4649
|
+
this.tabIndex = 0;
|
|
4650
|
+
this.onChange = new EventEmitter();
|
|
4651
|
+
this.onSearch = new EventEmitter();
|
|
4652
|
+
this.position = 'horizontal';
|
|
4653
|
+
this.size = 'lg';
|
|
4782
4654
|
this._value = null;
|
|
4655
|
+
this._destroyRef = inject(DestroyRef);
|
|
4656
|
+
this.idGenerator = inject(IdGenerator);
|
|
4783
4657
|
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
4658
|
+
this._elementRef = inject(ElementRef);
|
|
4784
4659
|
this.focused = false;
|
|
4785
|
-
this.length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : []));
|
|
4786
|
-
this.inputType = input('numeric', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
4787
|
-
this.inputIndices = computed(() => {
|
|
4788
|
-
return Array.from({ length: this.length() }, (_, i) => {
|
|
4789
|
-
return '';
|
|
4790
|
-
});
|
|
4791
|
-
}, ...(ngDevMode ? [{ debugName: "inputIndices" }] : []));
|
|
4792
4660
|
this._disabled = false;
|
|
4661
|
+
this.id = this.idGenerator.getId('monkey-radiobutton-');
|
|
4662
|
+
this.stateChanges = new Subject();
|
|
4663
|
+
this.type = 'radio-button';
|
|
4664
|
+
this._onChange = () => { };
|
|
4665
|
+
this._onTouched = () => { };
|
|
4793
4666
|
if (this.ngControl) {
|
|
4794
4667
|
this.ngControl.valueAccessor = this;
|
|
4795
4668
|
}
|
|
4796
|
-
if (this.formField) {
|
|
4797
|
-
this.formField.hideAction = true;
|
|
4798
|
-
}
|
|
4799
4669
|
}
|
|
4800
|
-
|
|
4801
|
-
|
|
4802
|
-
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
|
|
4670
|
+
changeSelected() {
|
|
4671
|
+
setTimeout(() => {
|
|
4672
|
+
if (this.options) {
|
|
4673
|
+
this.options.forEach((opt) => {
|
|
4674
|
+
opt.onSelect(opt.value() === this.value);
|
|
4675
|
+
});
|
|
4676
|
+
}
|
|
4677
|
+
this.changeDetectorRef.markForCheck();
|
|
4678
|
+
});
|
|
4679
|
+
}
|
|
4680
|
+
initializeOptions() {
|
|
4681
|
+
setTimeout(() => {
|
|
4682
|
+
this.options?.forEach((option) => {
|
|
4683
|
+
option.type = 'radio';
|
|
4684
|
+
if (!option.action) {
|
|
4685
|
+
option.action = this.selectOption.bind(this, option);
|
|
4686
|
+
}
|
|
4687
|
+
});
|
|
4688
|
+
this.changeDetectorRef.markForCheck();
|
|
4689
|
+
}, 0);
|
|
4690
|
+
}
|
|
4691
|
+
ngAfterContentInit() {
|
|
4692
|
+
this.initializeOptions();
|
|
4693
|
+
this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
4694
|
+
this.initializeOptions();
|
|
4695
|
+
this.changeSelected();
|
|
4696
|
+
});
|
|
4697
|
+
}
|
|
4698
|
+
selectOption(option) {
|
|
4699
|
+
if (!option.disabled && !this.disabled) {
|
|
4700
|
+
this.value = option.value();
|
|
4701
|
+
this._onChange(this.value);
|
|
4702
|
+
this.onChange.emit(this.value);
|
|
4703
|
+
this.options.forEach((opt) => {
|
|
4704
|
+
opt.onSelect(opt.value() === this.value);
|
|
4807
4705
|
});
|
|
4808
4706
|
}
|
|
4809
4707
|
}
|
|
4708
|
+
writeValue(value) {
|
|
4709
|
+
this.value = value;
|
|
4710
|
+
this.changeSelected();
|
|
4711
|
+
}
|
|
4712
|
+
onContainerClick(event) {
|
|
4713
|
+
if (this.disabled)
|
|
4714
|
+
return;
|
|
4715
|
+
this._elementRef.nativeElement.focus();
|
|
4716
|
+
}
|
|
4810
4717
|
_onFocus() {
|
|
4811
4718
|
if (!this.disabled) {
|
|
4812
4719
|
this.focused = true;
|
|
@@ -4814,44 +4721,1375 @@ class MonkeyInputCodeComponent {
|
|
|
4814
4721
|
this.stateChanges.next();
|
|
4815
4722
|
}
|
|
4816
4723
|
}
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
this.
|
|
4820
|
-
}
|
|
4821
|
-
focusNextInput(input) {
|
|
4822
|
-
const next = input.nextElementSibling;
|
|
4823
|
-
next?.focus();
|
|
4824
|
-
}
|
|
4825
|
-
focusPreviousInput(input) {
|
|
4826
|
-
const previous = input.previousElementSibling;
|
|
4827
|
-
previous?.focus();
|
|
4724
|
+
_onBlur() {
|
|
4725
|
+
this.focused = false;
|
|
4726
|
+
this.stateChanges.next();
|
|
4828
4727
|
}
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
chars.forEach((digit, index) => {
|
|
4832
|
-
this.inputIndices()[index] = digit;
|
|
4833
|
-
});
|
|
4728
|
+
registerOnChange(fn) {
|
|
4729
|
+
this._onChange = fn;
|
|
4834
4730
|
}
|
|
4835
|
-
|
|
4836
|
-
|
|
4731
|
+
registerOnTouched(fn) {
|
|
4732
|
+
this._onTouched = fn;
|
|
4837
4733
|
}
|
|
4838
|
-
|
|
4839
|
-
|
|
4840
|
-
|
|
4841
|
-
}
|
|
4734
|
+
setDisabledState(isDisabled) {
|
|
4735
|
+
this.disabled = isDisabled;
|
|
4736
|
+
this.initializeOptions();
|
|
4842
4737
|
}
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
|
|
4848
|
-
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4853
|
-
|
|
4854
|
-
|
|
4738
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4739
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.1", 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: [
|
|
4740
|
+
// eslint-disable-next-line no-use-before-define
|
|
4741
|
+
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
4742
|
+
], 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 monkey-option{transition:none!important}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: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4743
|
+
}
|
|
4744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
|
|
4745
|
+
type: Component,
|
|
4746
|
+
args: [{ selector: 'monkey-radiobutton', imports: [ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
4747
|
+
// eslint-disable-next-line no-use-before-define
|
|
4748
|
+
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
4749
|
+
], host: {
|
|
4750
|
+
'data-testid': 'monkey-radiobutton',
|
|
4751
|
+
class: 'mecx-radiobutton',
|
|
4752
|
+
'[class.mecx-disabled]': 'disabled',
|
|
4753
|
+
'[class.mecx-radiobutton-focused]': 'focused',
|
|
4754
|
+
'[attr.id]': 'id',
|
|
4755
|
+
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
4756
|
+
'(focus)': '_onFocus()',
|
|
4757
|
+
'(blur)': '_onBlur()'
|
|
4758
|
+
}, 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 monkey-option{transition:none!important}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"] }]
|
|
4759
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
|
|
4760
|
+
type: Optional
|
|
4761
|
+
}] }], propDecorators: { options: [{
|
|
4762
|
+
type: ContentChildren,
|
|
4763
|
+
args: [MonkeyOptionComponent]
|
|
4764
|
+
}], tabIndex: [{
|
|
4765
|
+
type: Input
|
|
4766
|
+
}], onChange: [{
|
|
4767
|
+
type: Output
|
|
4768
|
+
}], onSearch: [{
|
|
4769
|
+
type: Output
|
|
4770
|
+
}], position: [{
|
|
4771
|
+
type: Input
|
|
4772
|
+
}], size: [{
|
|
4773
|
+
type: Input
|
|
4774
|
+
}], classes: [{
|
|
4775
|
+
type: HostBinding,
|
|
4776
|
+
args: ['class']
|
|
4777
|
+
}], disabled: [{
|
|
4778
|
+
type: Input,
|
|
4779
|
+
args: [{ transform: booleanAttribute }]
|
|
4780
|
+
}], required: [{
|
|
4781
|
+
type: Input,
|
|
4782
|
+
args: [{ transform: booleanAttribute }]
|
|
4783
|
+
}], value: [{
|
|
4784
|
+
type: Input
|
|
4785
|
+
}] } });
|
|
4786
|
+
|
|
4787
|
+
/** ************************
|
|
4788
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
4789
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4790
|
+
* MIT Licence
|
|
4791
|
+
************************* */
|
|
4792
|
+
|
|
4793
|
+
/** ************************
|
|
4794
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
4795
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4796
|
+
* MIT Licence
|
|
4797
|
+
************************* */
|
|
4798
|
+
class MonkeyFilterBarService {
|
|
4799
|
+
constructor() {
|
|
4800
|
+
// Configuration storage - keyed by storageKey
|
|
4801
|
+
this._configs = signal(new Map(), ...(ngDevMode ? [{ debugName: "_configs" }] : []));
|
|
4802
|
+
// Active filters storage - keyed by storageKey
|
|
4803
|
+
this._activeFilters = signal(new Map(), ...(ngDevMode ? [{ debugName: "_activeFilters" }] : []));
|
|
4804
|
+
// Search values storage - keyed by storageKey
|
|
4805
|
+
this._searchValues = signal(new Map(), ...(ngDevMode ? [{ debugName: "_searchValues" }] : []));
|
|
4806
|
+
}
|
|
4807
|
+
/**
|
|
4808
|
+
* Initialize or update configuration for a filter bar instance
|
|
4809
|
+
*/
|
|
4810
|
+
setConfig(storageKey, config) {
|
|
4811
|
+
this._configs.update((configs) => {
|
|
4812
|
+
const updated = new Map(configs);
|
|
4813
|
+
updated.set(storageKey, config);
|
|
4814
|
+
return updated;
|
|
4815
|
+
});
|
|
4816
|
+
}
|
|
4817
|
+
/**
|
|
4818
|
+
* Get configuration for a filter bar instance
|
|
4819
|
+
*/
|
|
4820
|
+
getConfig(storageKey) {
|
|
4821
|
+
return this._configs().get(storageKey);
|
|
4822
|
+
}
|
|
4823
|
+
/**
|
|
4824
|
+
* Get configuration as a computed signal
|
|
4825
|
+
*/
|
|
4826
|
+
config(storageKey) {
|
|
4827
|
+
return computed(() => this._configs().get(storageKey));
|
|
4828
|
+
}
|
|
4829
|
+
/**
|
|
4830
|
+
* Get available filter options (excluding already active filters)
|
|
4831
|
+
*/
|
|
4832
|
+
availableFilterOptions(storageKey) {
|
|
4833
|
+
const config = this._configs().get(storageKey);
|
|
4834
|
+
if (!config || !config.filterOptions) {
|
|
4835
|
+
return [];
|
|
4836
|
+
}
|
|
4837
|
+
const activeKeys = this._activeFilters().get(storageKey)?.map((f) => f.key) || [];
|
|
4838
|
+
return config.filterOptions.filter((option) => !activeKeys.includes(option.key));
|
|
4839
|
+
}
|
|
4840
|
+
/**
|
|
4841
|
+
* Get active filters for a filter bar instance
|
|
4842
|
+
*/
|
|
4843
|
+
getActiveFilters(storageKey) {
|
|
4844
|
+
return this._activeFilters().get(storageKey) || [];
|
|
4845
|
+
}
|
|
4846
|
+
/**
|
|
4847
|
+
* Get active filters as a computed signal
|
|
4848
|
+
*/
|
|
4849
|
+
activeFilters(storageKey) {
|
|
4850
|
+
return computed(() => this._activeFilters().get(storageKey) || []);
|
|
4851
|
+
}
|
|
4852
|
+
/**
|
|
4853
|
+
* Check if a filter is already active
|
|
4854
|
+
*/
|
|
4855
|
+
isFilterActive(storageKey, filterKey) {
|
|
4856
|
+
const filters = this._activeFilters().get(storageKey) || [];
|
|
4857
|
+
return filters.some((f) => f.key === filterKey);
|
|
4858
|
+
}
|
|
4859
|
+
/**
|
|
4860
|
+
* Set active filters for a filter bar instance (overwrites existing)
|
|
4861
|
+
*/
|
|
4862
|
+
setActiveFilters(storageKey, filters) {
|
|
4863
|
+
this._activeFilters.update((filtersMap) => {
|
|
4864
|
+
const updated = new Map(filtersMap);
|
|
4865
|
+
updated.set(storageKey, [...filters]);
|
|
4866
|
+
return updated;
|
|
4867
|
+
});
|
|
4868
|
+
}
|
|
4869
|
+
/**
|
|
4870
|
+
* Add a filter
|
|
4871
|
+
*/
|
|
4872
|
+
addFilter(storageKey, option, value) {
|
|
4873
|
+
if (this.isFilterActive(storageKey, option.key)) {
|
|
4874
|
+
return; // Don't add duplicate filters
|
|
4875
|
+
}
|
|
4876
|
+
// Display text is the plain string representation of the value
|
|
4877
|
+
const displayText = this.formatFilterValuePlain(option, value);
|
|
4878
|
+
const activeFilter = {
|
|
4879
|
+
key: option.key,
|
|
4880
|
+
label: option.label,
|
|
4881
|
+
type: option.type,
|
|
4882
|
+
value,
|
|
4883
|
+
displayText,
|
|
4884
|
+
icon: option.icon
|
|
4885
|
+
};
|
|
4886
|
+
this._activeFilters.update((filters) => {
|
|
4887
|
+
const updated = new Map(filters);
|
|
4888
|
+
const currentFilters = updated.get(storageKey) || [];
|
|
4889
|
+
updated.set(storageKey, [...currentFilters, activeFilter]);
|
|
4890
|
+
return updated;
|
|
4891
|
+
});
|
|
4892
|
+
}
|
|
4893
|
+
/**
|
|
4894
|
+
* Update an existing filter (preserves position in array)
|
|
4895
|
+
*/
|
|
4896
|
+
updateFilter(storageKey, filterKey, option, value) {
|
|
4897
|
+
// Display text is the plain string representation of the value
|
|
4898
|
+
const displayText = this.formatFilterValuePlain(option, value);
|
|
4899
|
+
const updatedFilter = {
|
|
4900
|
+
key: option.key,
|
|
4901
|
+
label: option.label,
|
|
4902
|
+
type: option.type,
|
|
4903
|
+
value,
|
|
4904
|
+
displayText,
|
|
4905
|
+
icon: option.icon
|
|
4906
|
+
};
|
|
4907
|
+
this._activeFilters.update((filters) => {
|
|
4908
|
+
const updated = new Map(filters);
|
|
4909
|
+
const currentFilters = updated.get(storageKey) || [];
|
|
4910
|
+
// Find the index and update in place to preserve position
|
|
4911
|
+
const index = currentFilters.findIndex((f) => f.key === filterKey);
|
|
4912
|
+
if (index !== -1) {
|
|
4913
|
+
const newFilters = [...currentFilters];
|
|
4914
|
+
newFilters[index] = updatedFilter;
|
|
4915
|
+
updated.set(storageKey, newFilters);
|
|
4916
|
+
}
|
|
4917
|
+
return updated;
|
|
4918
|
+
});
|
|
4919
|
+
}
|
|
4920
|
+
/**
|
|
4921
|
+
* Remove a filter
|
|
4922
|
+
*/
|
|
4923
|
+
removeFilter(storageKey, filterKey) {
|
|
4924
|
+
this._activeFilters.update((filters) => {
|
|
4925
|
+
const updated = new Map(filters);
|
|
4926
|
+
const currentFilters = updated.get(storageKey) || [];
|
|
4927
|
+
const filtered = currentFilters.filter((f) => f.key !== filterKey);
|
|
4928
|
+
updated.set(storageKey, filtered);
|
|
4929
|
+
return updated;
|
|
4930
|
+
});
|
|
4931
|
+
}
|
|
4932
|
+
/**
|
|
4933
|
+
* Clear all filters for a filter bar instance
|
|
4934
|
+
*/
|
|
4935
|
+
clearAllFilters(storageKey) {
|
|
4936
|
+
this._activeFilters.update((filters) => {
|
|
4937
|
+
const updated = new Map(filters);
|
|
4938
|
+
updated.set(storageKey, []);
|
|
4939
|
+
return updated;
|
|
4940
|
+
});
|
|
4941
|
+
}
|
|
4942
|
+
/**
|
|
4943
|
+
* Get search value for a filter bar instance
|
|
4944
|
+
*/
|
|
4945
|
+
getSearchValue(storageKey) {
|
|
4946
|
+
return this._searchValues().get(storageKey) || '';
|
|
4947
|
+
}
|
|
4948
|
+
/**
|
|
4949
|
+
* Get search value as a computed signal
|
|
4950
|
+
*/
|
|
4951
|
+
searchValue(storageKey) {
|
|
4952
|
+
return computed(() => this._searchValues().get(storageKey) || '');
|
|
4953
|
+
}
|
|
4954
|
+
/**
|
|
4955
|
+
* Set search value
|
|
4956
|
+
*/
|
|
4957
|
+
setSearchValue(storageKey, value) {
|
|
4958
|
+
this._searchValues.update((values) => {
|
|
4959
|
+
const updated = new Map(values);
|
|
4960
|
+
updated.set(storageKey, value);
|
|
4961
|
+
return updated;
|
|
4962
|
+
});
|
|
4963
|
+
}
|
|
4964
|
+
/**
|
|
4965
|
+
* Get complete state (search + filters)
|
|
4966
|
+
*/
|
|
4967
|
+
getState(storageKey) {
|
|
4968
|
+
return {
|
|
4969
|
+
search: this.getSearchValue(storageKey),
|
|
4970
|
+
filters: this.getActiveFilters(storageKey)
|
|
4971
|
+
};
|
|
4972
|
+
}
|
|
4973
|
+
/**
|
|
4974
|
+
* Get state as a computed signal
|
|
4975
|
+
*/
|
|
4976
|
+
state(storageKey) {
|
|
4977
|
+
return computed(() => ({
|
|
4978
|
+
search: this.getSearchValue(storageKey),
|
|
4979
|
+
filters: this.getActiveFilters(storageKey)
|
|
4980
|
+
}));
|
|
4981
|
+
}
|
|
4982
|
+
/**
|
|
4983
|
+
* Format filter value for display (plain text, no formatting)
|
|
4984
|
+
*/
|
|
4985
|
+
formatFilterValuePlain(option, value) {
|
|
4986
|
+
switch (option.type) {
|
|
4987
|
+
case 'text':
|
|
4988
|
+
return value;
|
|
4989
|
+
case 'date':
|
|
4990
|
+
const dateValue = value;
|
|
4991
|
+
if (dateValue.startDate && dateValue.endDate) {
|
|
4992
|
+
return `${dateValue.startDate} - ${dateValue.endDate}`;
|
|
4993
|
+
}
|
|
4994
|
+
return '';
|
|
4995
|
+
case 'currency':
|
|
4996
|
+
const currencyValue = value;
|
|
4997
|
+
if (currencyValue.min !== undefined && currencyValue.max !== undefined) {
|
|
4998
|
+
return `${currencyValue.min} - ${currencyValue.max}`;
|
|
4999
|
+
}
|
|
5000
|
+
else if (currencyValue.min !== undefined) {
|
|
5001
|
+
return `De ${currencyValue.min}`;
|
|
5002
|
+
}
|
|
5003
|
+
else if (currencyValue.max !== undefined) {
|
|
5004
|
+
return `Até ${currencyValue.max}`;
|
|
5005
|
+
}
|
|
5006
|
+
return '';
|
|
5007
|
+
case 'status':
|
|
5008
|
+
const statusValue = value;
|
|
5009
|
+
if (statusValue && statusValue.length > 0 && option.statusOptions) {
|
|
5010
|
+
// Map values to descriptions for better display
|
|
5011
|
+
const descriptions = statusValue
|
|
5012
|
+
.map((val) => {
|
|
5013
|
+
const statusOption = option.statusOptions?.find((opt) => opt.value === val);
|
|
5014
|
+
return statusOption?.description || val;
|
|
5015
|
+
})
|
|
5016
|
+
.filter((desc) => desc !== undefined);
|
|
5017
|
+
return descriptions.join(', ');
|
|
5018
|
+
}
|
|
5019
|
+
return '';
|
|
5020
|
+
default:
|
|
5021
|
+
return String(value);
|
|
5022
|
+
}
|
|
5023
|
+
}
|
|
5024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFilterBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5025
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFilterBarService, providedIn: 'root' }); }
|
|
5026
|
+
}
|
|
5027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFilterBarService, decorators: [{
|
|
5028
|
+
type: Injectable,
|
|
5029
|
+
args: [{
|
|
5030
|
+
providedIn: 'root'
|
|
5031
|
+
}]
|
|
5032
|
+
}] });
|
|
5033
|
+
|
|
5034
|
+
/** ************************
|
|
5035
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
5036
|
+
* This style guide was developed by Monkey Exchange Team
|
|
5037
|
+
* MIT Licence
|
|
5038
|
+
************************* */
|
|
5039
|
+
class MonkeyFilterBarComponent {
|
|
5040
|
+
constructor() {
|
|
5041
|
+
this._elementRef = inject(ElementRef);
|
|
5042
|
+
this._filterBarService = inject(MonkeyFilterBarService);
|
|
5043
|
+
/** Unique key for this filter bar instance */
|
|
5044
|
+
this.key = input.required(...(ngDevMode ? [{ debugName: "key" }] : []));
|
|
5045
|
+
/** Filter bar configuration */
|
|
5046
|
+
this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
|
|
5047
|
+
/** Output event when filters change */
|
|
5048
|
+
this.filtersChange = new EventEmitter();
|
|
5049
|
+
/** Output event when search value changes */
|
|
5050
|
+
this.searchChange = new EventEmitter();
|
|
5051
|
+
this.showPopOver = false;
|
|
5052
|
+
this.showSubmenuPopover = false;
|
|
5053
|
+
this.showFilterInputPopover = false;
|
|
5054
|
+
this.elementTarget = null;
|
|
5055
|
+
this.submenuTarget = null;
|
|
5056
|
+
this.filterInputTarget = null;
|
|
5057
|
+
this.filterInputValue = '';
|
|
5058
|
+
this.selectedFilterOption = signal(null, ...(ngDevMode ? [{ debugName: "selectedFilterOption" }] : []));
|
|
5059
|
+
this.showCustomDatePicker = false;
|
|
5060
|
+
this.filterDateRange = { startDate: '', endDate: '' };
|
|
5061
|
+
this.filterCurrencyRange = { min: 0, max: 0 };
|
|
5062
|
+
this.currencyRangeType = 'from';
|
|
5063
|
+
this.selectedStatusValues = [];
|
|
5064
|
+
this.isEditingActiveFilter = false;
|
|
5065
|
+
this.handledFilterOptionLabel = computed(() => {
|
|
5066
|
+
return this.selectedFilterOption()?.label;
|
|
5067
|
+
}, ...(ngDevMode ? [{ debugName: "handledFilterOptionLabel" }] : []));
|
|
5068
|
+
this.handledFilterOptionIcon = computed(() => {
|
|
5069
|
+
return this.selectedFilterOption()?.icon;
|
|
5070
|
+
}, ...(ngDevMode ? [{ debugName: "handledFilterOptionIcon" }] : []));
|
|
5071
|
+
// Service-based reactive state
|
|
5072
|
+
this.serviceConfig = computed(() => {
|
|
5073
|
+
const key = this.key();
|
|
5074
|
+
if (!key)
|
|
5075
|
+
return undefined;
|
|
5076
|
+
return this._filterBarService.getConfig(key) || this.config();
|
|
5077
|
+
}, ...(ngDevMode ? [{ debugName: "serviceConfig" }] : []));
|
|
5078
|
+
this.activeFilters = computed(() => {
|
|
5079
|
+
const key = this.key();
|
|
5080
|
+
if (!key)
|
|
5081
|
+
return [];
|
|
5082
|
+
return this._filterBarService.getActiveFilters(key);
|
|
5083
|
+
}, ...(ngDevMode ? [{ debugName: "activeFilters" }] : []));
|
|
5084
|
+
this.searchValue = computed(() => {
|
|
5085
|
+
const key = this.key();
|
|
5086
|
+
if (!key)
|
|
5087
|
+
return '';
|
|
5088
|
+
return this._filterBarService.getSearchValue(key);
|
|
5089
|
+
}, ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
|
|
5090
|
+
this.closePopOver = () => {
|
|
5091
|
+
this.showPopOver = false;
|
|
5092
|
+
};
|
|
5093
|
+
this.closeSubmenuPopover = () => {
|
|
5094
|
+
this.showSubmenuPopover = false;
|
|
5095
|
+
// Don't clear submenuTarget immediately to avoid popover flickering
|
|
5096
|
+
// It will be set again when a new option is selected
|
|
5097
|
+
};
|
|
5098
|
+
this.closeFilterInputPopover = () => {
|
|
5099
|
+
this.showFilterInputPopover = false;
|
|
5100
|
+
this.showCustomDatePicker = false;
|
|
5101
|
+
this.isEditingActiveFilter = false;
|
|
5102
|
+
this.selectedFilterOption.set(null);
|
|
5103
|
+
this.filterInputValue = '';
|
|
5104
|
+
this.filterDateRange = { startDate: '', endDate: '' };
|
|
5105
|
+
//this.filterCurrencyValue = null;
|
|
5106
|
+
this.currencyRangeType = 'from';
|
|
5107
|
+
this.selectedStatusValues = [];
|
|
5108
|
+
};
|
|
5109
|
+
// Initialize config in service when key or config changes
|
|
5110
|
+
effect(() => {
|
|
5111
|
+
const key = this.key();
|
|
5112
|
+
const config = this.config();
|
|
5113
|
+
if (key && config) {
|
|
5114
|
+
this._filterBarService.setConfig(key, config);
|
|
5115
|
+
}
|
|
5116
|
+
});
|
|
5117
|
+
}
|
|
5118
|
+
ngOnInit() {
|
|
5119
|
+
const key = this.key();
|
|
5120
|
+
const config = this.config();
|
|
5121
|
+
if (key && config) {
|
|
5122
|
+
this._filterBarService.setConfig(key, config);
|
|
5123
|
+
}
|
|
5124
|
+
}
|
|
5125
|
+
ngAfterContentInit() { }
|
|
5126
|
+
ngOnChanges(changes) {
|
|
5127
|
+
const key = this.key();
|
|
5128
|
+
const config = this.config();
|
|
5129
|
+
if (key && config && (changes['key'] || changes['config'])) {
|
|
5130
|
+
this._filterBarService.setConfig(key, config);
|
|
5131
|
+
}
|
|
5132
|
+
}
|
|
5133
|
+
ngOnDestroy() { }
|
|
5134
|
+
/**
|
|
5135
|
+
* Get available filter options (excluding already active filters)
|
|
5136
|
+
*/
|
|
5137
|
+
availableFilterOptions() {
|
|
5138
|
+
const key = this.key();
|
|
5139
|
+
if (!key)
|
|
5140
|
+
return [];
|
|
5141
|
+
return this._filterBarService.availableFilterOptions(key);
|
|
5142
|
+
}
|
|
5143
|
+
/**
|
|
5144
|
+
* Check if a filter is already active
|
|
5145
|
+
*/
|
|
5146
|
+
isFilterActive(filterKey) {
|
|
5147
|
+
const key = this.key();
|
|
5148
|
+
if (!key)
|
|
5149
|
+
return false;
|
|
5150
|
+
return this._filterBarService.isFilterActive(key, filterKey);
|
|
5151
|
+
}
|
|
5152
|
+
/**
|
|
5153
|
+
* Handle showing the popover
|
|
5154
|
+
*/
|
|
5155
|
+
onShowPopOver(el) {
|
|
5156
|
+
this.elementTarget = el.element;
|
|
5157
|
+
this.showPopOver = true;
|
|
5158
|
+
}
|
|
5159
|
+
/**
|
|
5160
|
+
* Get unique ID for a filter option
|
|
5161
|
+
*/
|
|
5162
|
+
getFilterOptionId(optionKey) {
|
|
5163
|
+
const key = this.key();
|
|
5164
|
+
return `filter-option-${key}-${optionKey}`;
|
|
5165
|
+
}
|
|
5166
|
+
/**
|
|
5167
|
+
* Get unique ID for an active filter tag
|
|
5168
|
+
*/
|
|
5169
|
+
getActiveFilterId(filterKey) {
|
|
5170
|
+
const key = this.key();
|
|
5171
|
+
return `active-filter-${key}-${filterKey}`;
|
|
5172
|
+
}
|
|
5173
|
+
/**
|
|
5174
|
+
* Handle filter option selection - opens submenu for date filters, direct input for others
|
|
5175
|
+
*/
|
|
5176
|
+
onSelectFilterOption(option) {
|
|
5177
|
+
if (this.isFilterActive(option.key)) {
|
|
5178
|
+
return; // Don't allow selecting already active filters
|
|
5179
|
+
}
|
|
5180
|
+
// Close main popover
|
|
5181
|
+
//this.showPopOver = false;
|
|
5182
|
+
// Set selected option
|
|
5183
|
+
this.selectedFilterOption.set(option);
|
|
5184
|
+
if (option.type === 'date') {
|
|
5185
|
+
// For date filters, open submenu
|
|
5186
|
+
const optionId = this.getFilterOptionId(option.key);
|
|
5187
|
+
const optionElement = document.getElementById(optionId);
|
|
5188
|
+
if (optionElement) {
|
|
5189
|
+
// Set the target to the clicked option element
|
|
5190
|
+
this.submenuTarget = optionElement;
|
|
5191
|
+
// Open submenu for date filters
|
|
5192
|
+
this.showSubmenuPopover = true;
|
|
5193
|
+
this.showCustomDatePicker = false;
|
|
5194
|
+
}
|
|
5195
|
+
}
|
|
5196
|
+
else {
|
|
5197
|
+
// For text/currency/status filters, open input directly
|
|
5198
|
+
const optionId = this.getFilterOptionId(option.key);
|
|
5199
|
+
const optionElement = document.getElementById(optionId);
|
|
5200
|
+
if (optionElement) {
|
|
5201
|
+
// Set the target to the clicked option element
|
|
5202
|
+
this.filterInputTarget = optionElement;
|
|
5203
|
+
this.isEditingActiveFilter = false;
|
|
5204
|
+
this.showFilterInputPopover = true;
|
|
5205
|
+
this.showCustomDatePicker = false;
|
|
5206
|
+
// Reset input values
|
|
5207
|
+
this.filterInputValue = '';
|
|
5208
|
+
this.currencyRangeType = 'from';
|
|
5209
|
+
this.selectedStatusValues = [];
|
|
5210
|
+
}
|
|
5211
|
+
}
|
|
5212
|
+
}
|
|
5213
|
+
/**
|
|
5214
|
+
* Handle quick date selection from submenu
|
|
5215
|
+
*/
|
|
5216
|
+
onSelectQuickDate(option) {
|
|
5217
|
+
const key = this.key();
|
|
5218
|
+
const filterOption = this.selectedFilterOption();
|
|
5219
|
+
if (!key || !filterOption || filterOption.type !== 'date') {
|
|
5220
|
+
return;
|
|
5221
|
+
}
|
|
5222
|
+
const today = new Date();
|
|
5223
|
+
let startDate;
|
|
5224
|
+
let endDate = today;
|
|
5225
|
+
if (option !== 'custom') {
|
|
5226
|
+
this.showPopOver = false;
|
|
5227
|
+
}
|
|
5228
|
+
switch (option) {
|
|
5229
|
+
case '1-week-after':
|
|
5230
|
+
startDate = today;
|
|
5231
|
+
endDate = addDays(today, 7);
|
|
5232
|
+
break;
|
|
5233
|
+
case '1-month-after':
|
|
5234
|
+
startDate = today;
|
|
5235
|
+
endDate = addMonths(today, 1);
|
|
5236
|
+
break;
|
|
5237
|
+
case '3-months-after':
|
|
5238
|
+
startDate = today;
|
|
5239
|
+
endDate = addMonths(today, 3);
|
|
5240
|
+
break;
|
|
5241
|
+
case '1-week-before':
|
|
5242
|
+
startDate = subDays(today, 7);
|
|
5243
|
+
endDate = today;
|
|
5244
|
+
break;
|
|
5245
|
+
case '1-month-before':
|
|
5246
|
+
startDate = subMonths(today, 1);
|
|
5247
|
+
endDate = today;
|
|
5248
|
+
break;
|
|
5249
|
+
case '3-months-before':
|
|
5250
|
+
startDate = subMonths(today, 3);
|
|
5251
|
+
endDate = today;
|
|
5252
|
+
break;
|
|
5253
|
+
case 'custom':
|
|
5254
|
+
// Show custom date picker
|
|
5255
|
+
this.closeSubmenuPopover();
|
|
5256
|
+
this.showCustomDatePicker = true;
|
|
5257
|
+
this.filterInputTarget = this.submenuTarget;
|
|
5258
|
+
this.showFilterInputPopover = true;
|
|
5259
|
+
this.filterDateRange = { startDate: '', endDate: '' };
|
|
5260
|
+
return;
|
|
5261
|
+
default:
|
|
5262
|
+
return;
|
|
5263
|
+
}
|
|
5264
|
+
// Format dates as yyyy-MM-dd
|
|
5265
|
+
const startDateStr = format(startDate, 'yyyy-MM-dd');
|
|
5266
|
+
const endDateStr = format(endDate, 'yyyy-MM-dd');
|
|
5267
|
+
const value = {
|
|
5268
|
+
startDate: startDateStr,
|
|
5269
|
+
endDate: endDateStr
|
|
5270
|
+
};
|
|
5271
|
+
// Add filter via service
|
|
5272
|
+
this._filterBarService.addFilter(key, filterOption, value);
|
|
5273
|
+
// Close submenu and emit change
|
|
5274
|
+
this.closeSubmenuPopover();
|
|
5275
|
+
this.emitFiltersChange();
|
|
5276
|
+
}
|
|
5277
|
+
/**
|
|
5278
|
+
* Show filter input popover (for non-date filters or custom date picker)
|
|
5279
|
+
*/
|
|
5280
|
+
onShowFilterInput() {
|
|
5281
|
+
const filterOption = this.selectedFilterOption();
|
|
5282
|
+
if (!filterOption)
|
|
5283
|
+
return;
|
|
5284
|
+
// Close submenu
|
|
5285
|
+
this.closeSubmenuPopover();
|
|
5286
|
+
// Set custom date picker flag if date type
|
|
5287
|
+
if (filterOption.type === 'date') {
|
|
5288
|
+
this.showCustomDatePicker = true;
|
|
5289
|
+
}
|
|
5290
|
+
// Set target to the submenu target (the clicked filter option) or fallback to elementTarget
|
|
5291
|
+
this.filterInputTarget = this.submenuTarget || this.elementTarget;
|
|
5292
|
+
this.isEditingActiveFilter = false;
|
|
5293
|
+
this.showFilterInputPopover = true;
|
|
5294
|
+
// Reset input values
|
|
5295
|
+
this.filterInputValue = '';
|
|
5296
|
+
this.filterDateRange = { startDate: '', endDate: '' };
|
|
5297
|
+
this.currencyRangeType = 'from';
|
|
5298
|
+
this.selectedStatusValues = [];
|
|
5299
|
+
}
|
|
5300
|
+
/**
|
|
5301
|
+
* Handle date range change
|
|
5302
|
+
*/
|
|
5303
|
+
onDateRangeChange(event) {
|
|
5304
|
+
this.filterDateRange = event;
|
|
5305
|
+
if (event.startDate && event.endDate) {
|
|
5306
|
+
// Auto-apply when both dates are selected
|
|
5307
|
+
setTimeout(() => {
|
|
5308
|
+
this.onApplyFilter();
|
|
5309
|
+
}, 100);
|
|
5310
|
+
}
|
|
5311
|
+
}
|
|
5312
|
+
/**
|
|
5313
|
+
* Handle status checkbox change
|
|
5314
|
+
*/
|
|
5315
|
+
onStatusCheckboxChange(statusValue, checked) {
|
|
5316
|
+
if (checked) {
|
|
5317
|
+
if (!this.selectedStatusValues.includes(statusValue)) {
|
|
5318
|
+
this.selectedStatusValues = [...this.selectedStatusValues, statusValue];
|
|
5319
|
+
}
|
|
5320
|
+
}
|
|
5321
|
+
else {
|
|
5322
|
+
this.selectedStatusValues = this.selectedStatusValues.filter((v) => v !== statusValue);
|
|
5323
|
+
}
|
|
5324
|
+
}
|
|
5325
|
+
/**
|
|
5326
|
+
* Apply the selected filter
|
|
5327
|
+
*/
|
|
5328
|
+
onApplyFilter() {
|
|
5329
|
+
const key = this.key();
|
|
5330
|
+
if (!key)
|
|
5331
|
+
return;
|
|
5332
|
+
const option = this.selectedFilterOption();
|
|
5333
|
+
if (!option) {
|
|
5334
|
+
return;
|
|
5335
|
+
}
|
|
5336
|
+
let value;
|
|
5337
|
+
switch (option.type) {
|
|
5338
|
+
case 'text':
|
|
5339
|
+
if (!this.filterInputValue.trim()) {
|
|
5340
|
+
return;
|
|
5341
|
+
}
|
|
5342
|
+
value = this.filterInputValue.trim();
|
|
5343
|
+
break;
|
|
5344
|
+
case 'date':
|
|
5345
|
+
if (!this.filterDateRange.startDate || !this.filterDateRange.endDate) {
|
|
5346
|
+
return;
|
|
5347
|
+
}
|
|
5348
|
+
value = {
|
|
5349
|
+
startDate: this.filterDateRange.startDate,
|
|
5350
|
+
endDate: this.filterDateRange.endDate
|
|
5351
|
+
};
|
|
5352
|
+
break;
|
|
5353
|
+
case 'currency':
|
|
5354
|
+
/*if (this.filterCurrencyValue === null || this.filterCurrencyValue === undefined) {
|
|
5355
|
+
return;
|
|
5356
|
+
}
|
|
5357
|
+
// Set min or max based on selected radio button
|
|
5358
|
+
if (this.currencyRangeType === 'from') {
|
|
5359
|
+
value = {
|
|
5360
|
+
min: this.filterCurrencyValue,
|
|
5361
|
+
max: undefined
|
|
5362
|
+
};
|
|
5363
|
+
} else {
|
|
5364
|
+
value = {
|
|
5365
|
+
min: undefined,
|
|
5366
|
+
max: this.filterCurrencyValue
|
|
5367
|
+
};
|
|
5368
|
+
}*/
|
|
5369
|
+
break;
|
|
5370
|
+
case 'status':
|
|
5371
|
+
if (this.selectedStatusValues.length === 0) {
|
|
5372
|
+
return;
|
|
5373
|
+
}
|
|
5374
|
+
value = [...this.selectedStatusValues];
|
|
5375
|
+
break;
|
|
5376
|
+
}
|
|
5377
|
+
// Check if this filter is already active (editing existing filter)
|
|
5378
|
+
const isEditing = this._filterBarService.isFilterActive(key, option.key);
|
|
5379
|
+
if (isEditing) {
|
|
5380
|
+
// Update the existing filter in place (preserves position)
|
|
5381
|
+
this._filterBarService.updateFilter(key, option.key, option, value);
|
|
5382
|
+
}
|
|
5383
|
+
else {
|
|
5384
|
+
// Add new filter via service
|
|
5385
|
+
this._filterBarService.addFilter(key, option, value);
|
|
5386
|
+
}
|
|
5387
|
+
// Close popover and emit change
|
|
5388
|
+
this.closeFilterInputPopover();
|
|
5389
|
+
this.closePopOver();
|
|
5390
|
+
this.emitFiltersChange();
|
|
5391
|
+
}
|
|
5392
|
+
/**
|
|
5393
|
+
* Edit an active filter - opens the input popover with current values
|
|
5394
|
+
*/
|
|
5395
|
+
onEditActiveFilter(activeFilter) {
|
|
5396
|
+
const key = this.key();
|
|
5397
|
+
if (!key)
|
|
5398
|
+
return;
|
|
5399
|
+
// Find the filter option from config
|
|
5400
|
+
const config = this.serviceConfig();
|
|
5401
|
+
const filterOption = config?.filterOptions.find((opt) => opt.key === activeFilter.key);
|
|
5402
|
+
if (!filterOption) {
|
|
5403
|
+
return;
|
|
5404
|
+
}
|
|
5405
|
+
// Set the selected filter option
|
|
5406
|
+
this.selectedFilterOption.set(filterOption);
|
|
5407
|
+
// Load existing values based on filter type
|
|
5408
|
+
switch (activeFilter.type) {
|
|
5409
|
+
case 'text':
|
|
5410
|
+
this.filterInputValue = activeFilter.value;
|
|
5411
|
+
break;
|
|
5412
|
+
case 'date':
|
|
5413
|
+
const dateValue = activeFilter.value;
|
|
5414
|
+
this.filterDateRange = {
|
|
5415
|
+
startDate: dateValue.startDate || '',
|
|
5416
|
+
endDate: dateValue.endDate || ''
|
|
5417
|
+
};
|
|
5418
|
+
this.showCustomDatePicker = true;
|
|
5419
|
+
break;
|
|
5420
|
+
case 'currency':
|
|
5421
|
+
const currencyValue = activeFilter.value;
|
|
5422
|
+
if (currencyValue.min !== undefined) {
|
|
5423
|
+
this.currencyRangeType = 'from';
|
|
5424
|
+
//this.filterCurrencyValue = currencyValue.min;
|
|
5425
|
+
}
|
|
5426
|
+
else if (currencyValue.max !== undefined) {
|
|
5427
|
+
this.currencyRangeType = 'until';
|
|
5428
|
+
//this.filterCurrencyValue = currencyValue.max;
|
|
5429
|
+
}
|
|
5430
|
+
break;
|
|
5431
|
+
case 'status':
|
|
5432
|
+
const statusValue = activeFilter.value;
|
|
5433
|
+
this.selectedStatusValues = statusValue ? [...statusValue] : [];
|
|
5434
|
+
break;
|
|
5435
|
+
}
|
|
5436
|
+
// Get the filter tag element and set it as target
|
|
5437
|
+
const filterTagId = this.getActiveFilterId(activeFilter.key);
|
|
5438
|
+
const filterTagElement = document.getElementById(filterTagId);
|
|
5439
|
+
if (filterTagElement) {
|
|
5440
|
+
this.filterInputTarget = filterTagElement;
|
|
5441
|
+
this.isEditingActiveFilter = true;
|
|
5442
|
+
this.showFilterInputPopover = true;
|
|
5443
|
+
}
|
|
5444
|
+
}
|
|
5445
|
+
/**
|
|
5446
|
+
* Remove a filter
|
|
5447
|
+
*/
|
|
5448
|
+
onRemoveFilter(filterKey, event) {
|
|
5449
|
+
// Stop event propagation to prevent triggering edit
|
|
5450
|
+
if (event) {
|
|
5451
|
+
event.stopPropagation();
|
|
5452
|
+
}
|
|
5453
|
+
const key = this.key();
|
|
5454
|
+
if (!key)
|
|
5455
|
+
return;
|
|
5456
|
+
this._filterBarService.removeFilter(key, filterKey);
|
|
5457
|
+
this.emitFiltersChange();
|
|
5458
|
+
}
|
|
5459
|
+
/**
|
|
5460
|
+
* Clear all filters
|
|
5461
|
+
*/
|
|
5462
|
+
onClearAllFilters() {
|
|
5463
|
+
const key = this.key();
|
|
5464
|
+
if (!key)
|
|
5465
|
+
return;
|
|
5466
|
+
this._filterBarService.clearAllFilters(key);
|
|
5467
|
+
this.emitFiltersChange();
|
|
5468
|
+
}
|
|
5469
|
+
/**
|
|
5470
|
+
* Handle search input change
|
|
5471
|
+
*/
|
|
5472
|
+
onSearchChange(value) {
|
|
5473
|
+
const key = this.key();
|
|
5474
|
+
if (!key)
|
|
5475
|
+
return;
|
|
5476
|
+
this._filterBarService.setSearchValue(key, value);
|
|
5477
|
+
this.searchChange.emit(value);
|
|
5478
|
+
this.emitFiltersChange();
|
|
5479
|
+
}
|
|
5480
|
+
/**
|
|
5481
|
+
* Emit filters change event
|
|
5482
|
+
*/
|
|
5483
|
+
emitFiltersChange() {
|
|
5484
|
+
const key = this.key();
|
|
5485
|
+
if (!key)
|
|
5486
|
+
return;
|
|
5487
|
+
const state = this._filterBarService.getState(key);
|
|
5488
|
+
this.filtersChange.emit({
|
|
5489
|
+
search: state.search,
|
|
5490
|
+
filters: state.filters
|
|
5491
|
+
});
|
|
5492
|
+
}
|
|
5493
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5494
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", searchChange: "searchChange" }, host: { properties: { "attr.data-testid": "'monkey-filter-bar'" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
|
|
5495
|
+
<div class="filter-bar-container">
|
|
5496
|
+
<!-- Search Input -->
|
|
5497
|
+
<monkey-form-field class="search-field" size="sm">
|
|
5498
|
+
<input
|
|
5499
|
+
type="text"
|
|
5500
|
+
monkey-input
|
|
5501
|
+
[placeholder]="
|
|
5502
|
+
serviceConfig()?.searchPlaceholder || 'Pesquise por fornecedor pelo nome fant...'
|
|
5503
|
+
"
|
|
5504
|
+
[ngModel]="searchValue()"
|
|
5505
|
+
(ngModelChange)="onSearchChange($event)"
|
|
5506
|
+
/>
|
|
5507
|
+
<monkey-prefix>
|
|
5508
|
+
<i class="mk-i mk-i-search fs-md"></i>
|
|
5509
|
+
</monkey-prefix>
|
|
5510
|
+
</monkey-form-field>
|
|
5511
|
+
|
|
5512
|
+
<!-- Add Filter Button -->
|
|
5513
|
+
<monkey-button
|
|
5514
|
+
#popoverTarget
|
|
5515
|
+
type="secondary"
|
|
5516
|
+
size="sm"
|
|
5517
|
+
(click)="onShowPopOver(popoverTarget)"
|
|
5518
|
+
>
|
|
5519
|
+
<i [class]="'mk-i mk-i-add-plus fs-md'" first></i>
|
|
5520
|
+
Adicionar Filtro
|
|
5521
|
+
</monkey-button>
|
|
5522
|
+
|
|
5523
|
+
<!-- Popover with Filter Options -->
|
|
5524
|
+
<ng-template
|
|
5525
|
+
[monkeyPopover]="showPopOver"
|
|
5526
|
+
[monkeyPopoverTarget]="elementTarget"
|
|
5527
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
5528
|
+
monkeyPopoverDir="ltr"
|
|
5529
|
+
[monkeyPopoverHideHeader]="true"
|
|
5530
|
+
>
|
|
5531
|
+
@for (
|
|
5532
|
+
option of availableFilterOptions();
|
|
5533
|
+
track option.key;
|
|
5534
|
+
let i = $index;
|
|
5535
|
+
let first = $first;
|
|
5536
|
+
let last = $last
|
|
5537
|
+
) {
|
|
5538
|
+
<div
|
|
5539
|
+
[id]="getFilterOptionId(option.key)"
|
|
5540
|
+
class="filter-option-item"
|
|
5541
|
+
[class.first]="first"
|
|
5542
|
+
(click)="onSelectFilterOption(option)"
|
|
5543
|
+
[class.disabled]="isFilterActive(option.key)"
|
|
5544
|
+
>
|
|
5545
|
+
@if (option.icon) {
|
|
5546
|
+
<i [class]="'mk-i mk-i-' + option.icon + ' fs-md'"></i>
|
|
5547
|
+
}
|
|
5548
|
+
<span>
|
|
5549
|
+
{{ option.label }}
|
|
5550
|
+
</span>
|
|
5551
|
+
</div>
|
|
5552
|
+
@if (!last && availableFilterOptions()[i + 1]?.type !== option.type) {
|
|
5553
|
+
<monkey-divider />
|
|
5554
|
+
}
|
|
5555
|
+
}
|
|
5556
|
+
</ng-template>
|
|
5557
|
+
|
|
5558
|
+
<!-- Submenu Popover for Date Filter Options -->
|
|
5559
|
+
<ng-template
|
|
5560
|
+
[monkeyPopover]="showSubmenuPopover"
|
|
5561
|
+
[monkeyPopoverTarget]="submenuTarget"
|
|
5562
|
+
[monkeyPopoverClosed]="closeSubmenuPopover"
|
|
5563
|
+
monkeyPopoverDir="rt"
|
|
5564
|
+
[monkeyPopoverHideHeader]="true"
|
|
5565
|
+
>
|
|
5566
|
+
{{ handledFilterOptionLabel() }}
|
|
5567
|
+
@if (selectedFilterOption(); as filterOption) {
|
|
5568
|
+
@if (filterOption.type === 'date') {
|
|
5569
|
+
<!-- Quick Date Options -->
|
|
5570
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-week-after')">
|
|
5571
|
+
1 semana a partir de hoje
|
|
5572
|
+
</div>
|
|
5573
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-month-after')">
|
|
5574
|
+
1 mês a partir de hoje
|
|
5575
|
+
</div>
|
|
5576
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('3-months-after')">
|
|
5577
|
+
3 meses a partir de hoje
|
|
5578
|
+
</div>
|
|
5579
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-week-before')">
|
|
5580
|
+
1 semana antes de hoje
|
|
5581
|
+
</div>
|
|
5582
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-month-before')">
|
|
5583
|
+
1 mês antes de hoje
|
|
5584
|
+
</div>
|
|
5585
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('3-months-before')">
|
|
5586
|
+
3 meses antes de hoje
|
|
5587
|
+
</div>
|
|
5588
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('custom')">
|
|
5589
|
+
Personalizado
|
|
5590
|
+
</div>
|
|
5591
|
+
}
|
|
5592
|
+
}
|
|
5593
|
+
</ng-template>
|
|
5594
|
+
</div>
|
|
5595
|
+
|
|
5596
|
+
<!-- Filter Input Popover (shown when a filter is selected) -->
|
|
5597
|
+
|
|
5598
|
+
<ng-template
|
|
5599
|
+
[monkeyPopover]="showFilterInputPopover"
|
|
5600
|
+
[monkeyPopoverTarget]="filterInputTarget"
|
|
5601
|
+
[monkeyPopoverClosed]="closeFilterInputPopover"
|
|
5602
|
+
[monkeyPopoverDir]="isEditingActiveFilter ? 'ltr' : 'rt'"
|
|
5603
|
+
[monkeyPopoverHideHeader]="true"
|
|
5604
|
+
>
|
|
5605
|
+
<div class="filter-container">
|
|
5606
|
+
<div class="filter-header">
|
|
5607
|
+
<i [class]="'mk-i mk-i-' + handledFilterOptionIcon() + ' fs-md'"></i>
|
|
5608
|
+
{{ handledFilterOptionLabel() }}
|
|
5609
|
+
</div>
|
|
5610
|
+
|
|
5611
|
+
@if (selectedFilterOption(); as filterOption) {
|
|
5612
|
+
<!-- Text Input Filter -->
|
|
5613
|
+
@if (filterOption.type === 'text') {
|
|
5614
|
+
<monkey-form-field>
|
|
5615
|
+
<input
|
|
5616
|
+
type="text"
|
|
5617
|
+
monkey-input
|
|
5618
|
+
[placeholder]="filterOption.placeholder || 'Digite o valor'"
|
|
5619
|
+
[(ngModel)]="filterInputValue"
|
|
5620
|
+
(keyup.enter)="onApplyFilter()"
|
|
5621
|
+
/>
|
|
5622
|
+
</monkey-form-field>
|
|
5623
|
+
}
|
|
5624
|
+
|
|
5625
|
+
<!-- Date Range Filter (Custom) -->
|
|
5626
|
+
@if (filterOption.type === 'date' && showCustomDatePicker) {
|
|
5627
|
+
<monkey-date-range
|
|
5628
|
+
[startDate]="filterDateRange.startDate"
|
|
5629
|
+
[endDate]="filterDateRange.endDate"
|
|
5630
|
+
(onDate)="onDateRangeChange($event)"
|
|
5631
|
+
>
|
|
5632
|
+
</monkey-date-range>
|
|
5633
|
+
}
|
|
5634
|
+
|
|
5635
|
+
<!-- Currency/Number Range Filter -->
|
|
5636
|
+
@if (filterOption.type === 'currency') {
|
|
5637
|
+
<div class="currency-range-inputs">
|
|
5638
|
+
<monkey-radiobutton [(ngModel)]="currencyRangeType" position="vertical" size="sm">
|
|
5639
|
+
<monkey-option [value]="'from'">De</monkey-option>
|
|
5640
|
+
<monkey-option [value]="'until'">Até</monkey-option>
|
|
5641
|
+
</monkey-radiobutton>
|
|
5642
|
+
<monkey-form-field>
|
|
5643
|
+
<input
|
|
5644
|
+
type="text"
|
|
5645
|
+
monkey-input-currency
|
|
5646
|
+
[placeholder]="currencyRangeType === 'from' ? 'Valor mínimo' : 'Valor máximo'"
|
|
5647
|
+
(keyup.enter)="onApplyFilter()"
|
|
5648
|
+
/>
|
|
5649
|
+
</monkey-form-field>
|
|
5650
|
+
</div>
|
|
5651
|
+
}
|
|
5652
|
+
|
|
5653
|
+
<!-- Status Filter with Checkboxes -->
|
|
5654
|
+
@if (filterOption.type === 'status' && filterOption.statusOptions) {
|
|
5655
|
+
<div class="status-filter-options">
|
|
5656
|
+
@for (statusOption of filterOption.statusOptions; track statusOption.value) {
|
|
5657
|
+
<monkey-checkbox
|
|
5658
|
+
[value]="selectedStatusValues.includes(statusOption.value)"
|
|
5659
|
+
(onChange)="onStatusCheckboxChange(statusOption.value, $event)"
|
|
5660
|
+
size="sm"
|
|
5661
|
+
>
|
|
5662
|
+
{{ statusOption.description }}
|
|
5663
|
+
</monkey-checkbox>
|
|
5664
|
+
}
|
|
5665
|
+
</div>
|
|
5666
|
+
}
|
|
5667
|
+
|
|
5668
|
+
@if (filterOption.type !== 'date') {
|
|
5669
|
+
<div class="filter-actions">
|
|
5670
|
+
<monkey-button size="sm" type="secondary" (click)="closeFilterInputPopover()">
|
|
5671
|
+
Cancelar
|
|
5672
|
+
</monkey-button>
|
|
5673
|
+
<monkey-button size="sm" type="primary" (click)="onApplyFilter()">
|
|
5674
|
+
Aplicar
|
|
5675
|
+
</monkey-button>
|
|
5676
|
+
</div>
|
|
5677
|
+
}
|
|
5678
|
+
}
|
|
5679
|
+
</div>
|
|
5680
|
+
</ng-template>
|
|
5681
|
+
|
|
5682
|
+
<!-- Active Filters Row -->
|
|
5683
|
+
@if (activeFilters().length > 0) {
|
|
5684
|
+
<div class="active-filters-container">
|
|
5685
|
+
<monkey-icon-button type="secondary" size="sm" icon="trash" (click)="onClearAllFilters()">
|
|
5686
|
+
</monkey-icon-button>
|
|
5687
|
+
|
|
5688
|
+
<div class="active-filters-scroll">
|
|
5689
|
+
@for (filter of activeFilters(); track filter.key) {
|
|
5690
|
+
<div
|
|
5691
|
+
class="filter-tag"
|
|
5692
|
+
[id]="getActiveFilterId(filter.key)"
|
|
5693
|
+
(click)="onEditActiveFilter(filter)"
|
|
5694
|
+
>
|
|
5695
|
+
@if (filter.icon) {
|
|
5696
|
+
<i [class]="'mk-i mk-i-' + filter.icon + ' fs-sm'"></i>
|
|
5697
|
+
}
|
|
5698
|
+
<span class="filter-label">{{ filter.label }}</span>
|
|
5699
|
+
<span class="filter-value">{{ filter.displayText }}</span>
|
|
5700
|
+
|
|
5701
|
+
<div class="remove-filter">
|
|
5702
|
+
<monkey-icon-button
|
|
5703
|
+
type="tertiary"
|
|
5704
|
+
color="error"
|
|
5705
|
+
size="sm"
|
|
5706
|
+
icon="close"
|
|
5707
|
+
(click)="onRemoveFilter(filter.key, $event)"
|
|
5708
|
+
>
|
|
5709
|
+
</monkey-icon-button>
|
|
5710
|
+
</div>
|
|
5711
|
+
</div>
|
|
5712
|
+
}
|
|
5713
|
+
</div>
|
|
5714
|
+
</div>
|
|
5715
|
+
}
|
|
5716
|
+
`, isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column;gap:12px}:host .filter-bar-container{display:inline-flex;align-items:center;min-width:0;gap:12px;width:100%}:host .filter-bar-container .search-field{width:100%;max-width:400px;position:relative}:host .filter-bar-container .search-field .search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--mecx-color-gray-400)}:host .filter-bar-container .search-field input{padding-right:40px}:host .filter-bar-container .btn-filter{width:100%;max-width:160px;flex-shrink:0}:host .filter-bar-container .btn-filter .icon{margin-right:8px}:host .active-filters-container{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;overflow:hidden}:host .active-filters-container .clear-all-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border:none;background:var(--mecx-color-gray-200);border-radius:8px;cursor:pointer;transition:all .2s ease;flex-shrink:0}:host .active-filters-container .clear-all-button:hover{background:var(--mecx-color-gray-300)}:host .active-filters-container .clear-all-button util-icon{width:16px;height:16px;display:flex}:host .active-filters-container .active-filters-scroll{display:flex;align-items:center;gap:8px;overflow:auto hidden;flex:1;min-width:0;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent}:host .active-filters-container .active-filters-scroll::-webkit-scrollbar{height:4px}:host .active-filters-container .active-filters-scroll::-webkit-scrollbar-track{background:transparent}:host .active-filters-container .active-filters-scroll::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-300);border-radius:2px}:host .active-filters-container .active-filters-scroll .filter-tag{display:inline-flex;align-items:center;gap:8px;padding:0 0 0 12px;background:var(--mecx-color-gray-100);border-radius:8px;white-space:nowrap;flex-shrink:0;min-width:0;cursor:pointer;transition:background-color .2s ease;line-height:16px}:host .active-filters-container .active-filters-scroll .filter-tag:hover{background:var(--mecx-color-gray-200)}:host .active-filters-container .active-filters-scroll .filter-tag .filter-icon{color:var(--mecx-color-gray-600);width:16px;height:16px;flex-shrink:0}:host .active-filters-container .active-filters-scroll .filter-tag .filter-label{font-size:14px;font-weight:500;color:var(--mecx-color-gray-700);flex-shrink:0}:host .active-filters-container .active-filters-scroll .filter-tag .filter-value{font-size:14px;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;max-width:200px}:host .active-filters-container .active-filters-scroll .filter-tag .remove-filter{border-left:1px solid var(--mecx-color-gray-400)}.filter-container .currency-range-inputs{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.filter-container .currency-range-inputs monkey-radiobutton{margin-bottom:8px}.filter-container .status-filter-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px;padding:16px}.filter-container .filter-header{display:flex;align-items:center;padding:8px;gap:6px;border-bottom:1px solid var(--mecx-color-gray-200);font-size:14px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.14px;color:var(--mecx-color-gray-700)}.filter-container .filter-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px;border-top:1px solid var(--mecx-color-gray-200)}.filter-container monkey-date-range{border:unset;border-radius:unset}.filter-option-item{cursor:pointer;display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;color:var(--mecx-color-gray-900);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}.filter-option-item.first{border-top-left-radius:6px;border-top-right-radius:6px}.filter-option-item:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}.mk-i{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], 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: "directive", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: ["name", "disabled", "id", "required", "type"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "component", type: MonkeyDividerComponent, selector: "monkey-divider", inputs: ["size", "vertical", "id"] }, { kind: "component", type: MonkeyRadioButtonComponent, selector: "monkey-radiobutton", inputs: ["tabIndex", "position", "size", "disabled", "required", "value"], outputs: ["onChange", "onSearch"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }, { kind: "directive", type: MonkeyPrefixDirective, selector: "monkey-prefix" }, { kind: "component", type: MonkeyCheckboxComponent, selector: "monkey-checkbox", inputs: ["disabled", "indeterminate", "required", "showFooter", "size", "value"], outputs: ["onChange"] }] }); }
|
|
5717
|
+
}
|
|
5718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
5719
|
+
type: Component,
|
|
5720
|
+
args: [{ selector: 'monkey-filter-bar', imports: [
|
|
5721
|
+
CommonModule,
|
|
5722
|
+
FormsModule,
|
|
5723
|
+
ReactiveFormsModule,
|
|
5724
|
+
MonkeyFormFieldModule,
|
|
5725
|
+
MonkeyInputModule,
|
|
5726
|
+
MonkeyButtonComponent,
|
|
5727
|
+
UtilIconComponent,
|
|
5728
|
+
MonkeyOptionComponent,
|
|
5729
|
+
MonkeyPopoverDirective,
|
|
5730
|
+
MonkeyDateRangeComponent,
|
|
5731
|
+
MonkeyBadgeComponent,
|
|
5732
|
+
MonkeyLabelDirective,
|
|
5733
|
+
MonkeyDividerComponent,
|
|
5734
|
+
MonkeyRadioButtonComponent,
|
|
5735
|
+
MonkeyIconButtonComponent,
|
|
5736
|
+
MonkeyPrefixDirective,
|
|
5737
|
+
MonkeyCheckboxComponent
|
|
5738
|
+
], template: `
|
|
5739
|
+
<div class="filter-bar-container">
|
|
5740
|
+
<!-- Search Input -->
|
|
5741
|
+
<monkey-form-field class="search-field" size="sm">
|
|
5742
|
+
<input
|
|
5743
|
+
type="text"
|
|
5744
|
+
monkey-input
|
|
5745
|
+
[placeholder]="
|
|
5746
|
+
serviceConfig()?.searchPlaceholder || 'Pesquise por fornecedor pelo nome fant...'
|
|
5747
|
+
"
|
|
5748
|
+
[ngModel]="searchValue()"
|
|
5749
|
+
(ngModelChange)="onSearchChange($event)"
|
|
5750
|
+
/>
|
|
5751
|
+
<monkey-prefix>
|
|
5752
|
+
<i class="mk-i mk-i-search fs-md"></i>
|
|
5753
|
+
</monkey-prefix>
|
|
5754
|
+
</monkey-form-field>
|
|
5755
|
+
|
|
5756
|
+
<!-- Add Filter Button -->
|
|
5757
|
+
<monkey-button
|
|
5758
|
+
#popoverTarget
|
|
5759
|
+
type="secondary"
|
|
5760
|
+
size="sm"
|
|
5761
|
+
(click)="onShowPopOver(popoverTarget)"
|
|
5762
|
+
>
|
|
5763
|
+
<i [class]="'mk-i mk-i-add-plus fs-md'" first></i>
|
|
5764
|
+
Adicionar Filtro
|
|
5765
|
+
</monkey-button>
|
|
5766
|
+
|
|
5767
|
+
<!-- Popover with Filter Options -->
|
|
5768
|
+
<ng-template
|
|
5769
|
+
[monkeyPopover]="showPopOver"
|
|
5770
|
+
[monkeyPopoverTarget]="elementTarget"
|
|
5771
|
+
[monkeyPopoverClosed]="closePopOver"
|
|
5772
|
+
monkeyPopoverDir="ltr"
|
|
5773
|
+
[monkeyPopoverHideHeader]="true"
|
|
5774
|
+
>
|
|
5775
|
+
@for (
|
|
5776
|
+
option of availableFilterOptions();
|
|
5777
|
+
track option.key;
|
|
5778
|
+
let i = $index;
|
|
5779
|
+
let first = $first;
|
|
5780
|
+
let last = $last
|
|
5781
|
+
) {
|
|
5782
|
+
<div
|
|
5783
|
+
[id]="getFilterOptionId(option.key)"
|
|
5784
|
+
class="filter-option-item"
|
|
5785
|
+
[class.first]="first"
|
|
5786
|
+
(click)="onSelectFilterOption(option)"
|
|
5787
|
+
[class.disabled]="isFilterActive(option.key)"
|
|
5788
|
+
>
|
|
5789
|
+
@if (option.icon) {
|
|
5790
|
+
<i [class]="'mk-i mk-i-' + option.icon + ' fs-md'"></i>
|
|
5791
|
+
}
|
|
5792
|
+
<span>
|
|
5793
|
+
{{ option.label }}
|
|
5794
|
+
</span>
|
|
5795
|
+
</div>
|
|
5796
|
+
@if (!last && availableFilterOptions()[i + 1]?.type !== option.type) {
|
|
5797
|
+
<monkey-divider />
|
|
5798
|
+
}
|
|
5799
|
+
}
|
|
5800
|
+
</ng-template>
|
|
5801
|
+
|
|
5802
|
+
<!-- Submenu Popover for Date Filter Options -->
|
|
5803
|
+
<ng-template
|
|
5804
|
+
[monkeyPopover]="showSubmenuPopover"
|
|
5805
|
+
[monkeyPopoverTarget]="submenuTarget"
|
|
5806
|
+
[monkeyPopoverClosed]="closeSubmenuPopover"
|
|
5807
|
+
monkeyPopoverDir="rt"
|
|
5808
|
+
[monkeyPopoverHideHeader]="true"
|
|
5809
|
+
>
|
|
5810
|
+
{{ handledFilterOptionLabel() }}
|
|
5811
|
+
@if (selectedFilterOption(); as filterOption) {
|
|
5812
|
+
@if (filterOption.type === 'date') {
|
|
5813
|
+
<!-- Quick Date Options -->
|
|
5814
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-week-after')">
|
|
5815
|
+
1 semana a partir de hoje
|
|
5816
|
+
</div>
|
|
5817
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-month-after')">
|
|
5818
|
+
1 mês a partir de hoje
|
|
5819
|
+
</div>
|
|
5820
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('3-months-after')">
|
|
5821
|
+
3 meses a partir de hoje
|
|
5822
|
+
</div>
|
|
5823
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-week-before')">
|
|
5824
|
+
1 semana antes de hoje
|
|
5825
|
+
</div>
|
|
5826
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('1-month-before')">
|
|
5827
|
+
1 mês antes de hoje
|
|
5828
|
+
</div>
|
|
5829
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('3-months-before')">
|
|
5830
|
+
3 meses antes de hoje
|
|
5831
|
+
</div>
|
|
5832
|
+
<div class="filter-option-item" (click)="onSelectQuickDate('custom')">
|
|
5833
|
+
Personalizado
|
|
5834
|
+
</div>
|
|
5835
|
+
}
|
|
5836
|
+
}
|
|
5837
|
+
</ng-template>
|
|
5838
|
+
</div>
|
|
5839
|
+
|
|
5840
|
+
<!-- Filter Input Popover (shown when a filter is selected) -->
|
|
5841
|
+
|
|
5842
|
+
<ng-template
|
|
5843
|
+
[monkeyPopover]="showFilterInputPopover"
|
|
5844
|
+
[monkeyPopoverTarget]="filterInputTarget"
|
|
5845
|
+
[monkeyPopoverClosed]="closeFilterInputPopover"
|
|
5846
|
+
[monkeyPopoverDir]="isEditingActiveFilter ? 'ltr' : 'rt'"
|
|
5847
|
+
[monkeyPopoverHideHeader]="true"
|
|
5848
|
+
>
|
|
5849
|
+
<div class="filter-container">
|
|
5850
|
+
<div class="filter-header">
|
|
5851
|
+
<i [class]="'mk-i mk-i-' + handledFilterOptionIcon() + ' fs-md'"></i>
|
|
5852
|
+
{{ handledFilterOptionLabel() }}
|
|
5853
|
+
</div>
|
|
5854
|
+
|
|
5855
|
+
@if (selectedFilterOption(); as filterOption) {
|
|
5856
|
+
<!-- Text Input Filter -->
|
|
5857
|
+
@if (filterOption.type === 'text') {
|
|
5858
|
+
<monkey-form-field>
|
|
5859
|
+
<input
|
|
5860
|
+
type="text"
|
|
5861
|
+
monkey-input
|
|
5862
|
+
[placeholder]="filterOption.placeholder || 'Digite o valor'"
|
|
5863
|
+
[(ngModel)]="filterInputValue"
|
|
5864
|
+
(keyup.enter)="onApplyFilter()"
|
|
5865
|
+
/>
|
|
5866
|
+
</monkey-form-field>
|
|
5867
|
+
}
|
|
5868
|
+
|
|
5869
|
+
<!-- Date Range Filter (Custom) -->
|
|
5870
|
+
@if (filterOption.type === 'date' && showCustomDatePicker) {
|
|
5871
|
+
<monkey-date-range
|
|
5872
|
+
[startDate]="filterDateRange.startDate"
|
|
5873
|
+
[endDate]="filterDateRange.endDate"
|
|
5874
|
+
(onDate)="onDateRangeChange($event)"
|
|
5875
|
+
>
|
|
5876
|
+
</monkey-date-range>
|
|
5877
|
+
}
|
|
5878
|
+
|
|
5879
|
+
<!-- Currency/Number Range Filter -->
|
|
5880
|
+
@if (filterOption.type === 'currency') {
|
|
5881
|
+
<div class="currency-range-inputs">
|
|
5882
|
+
<monkey-radiobutton [(ngModel)]="currencyRangeType" position="vertical" size="sm">
|
|
5883
|
+
<monkey-option [value]="'from'">De</monkey-option>
|
|
5884
|
+
<monkey-option [value]="'until'">Até</monkey-option>
|
|
5885
|
+
</monkey-radiobutton>
|
|
5886
|
+
<monkey-form-field>
|
|
5887
|
+
<input
|
|
5888
|
+
type="text"
|
|
5889
|
+
monkey-input-currency
|
|
5890
|
+
[placeholder]="currencyRangeType === 'from' ? 'Valor mínimo' : 'Valor máximo'"
|
|
5891
|
+
(keyup.enter)="onApplyFilter()"
|
|
5892
|
+
/>
|
|
5893
|
+
</monkey-form-field>
|
|
5894
|
+
</div>
|
|
5895
|
+
}
|
|
5896
|
+
|
|
5897
|
+
<!-- Status Filter with Checkboxes -->
|
|
5898
|
+
@if (filterOption.type === 'status' && filterOption.statusOptions) {
|
|
5899
|
+
<div class="status-filter-options">
|
|
5900
|
+
@for (statusOption of filterOption.statusOptions; track statusOption.value) {
|
|
5901
|
+
<monkey-checkbox
|
|
5902
|
+
[value]="selectedStatusValues.includes(statusOption.value)"
|
|
5903
|
+
(onChange)="onStatusCheckboxChange(statusOption.value, $event)"
|
|
5904
|
+
size="sm"
|
|
5905
|
+
>
|
|
5906
|
+
{{ statusOption.description }}
|
|
5907
|
+
</monkey-checkbox>
|
|
5908
|
+
}
|
|
5909
|
+
</div>
|
|
5910
|
+
}
|
|
5911
|
+
|
|
5912
|
+
@if (filterOption.type !== 'date') {
|
|
5913
|
+
<div class="filter-actions">
|
|
5914
|
+
<monkey-button size="sm" type="secondary" (click)="closeFilterInputPopover()">
|
|
5915
|
+
Cancelar
|
|
5916
|
+
</monkey-button>
|
|
5917
|
+
<monkey-button size="sm" type="primary" (click)="onApplyFilter()">
|
|
5918
|
+
Aplicar
|
|
5919
|
+
</monkey-button>
|
|
5920
|
+
</div>
|
|
5921
|
+
}
|
|
5922
|
+
}
|
|
5923
|
+
</div>
|
|
5924
|
+
</ng-template>
|
|
5925
|
+
|
|
5926
|
+
<!-- Active Filters Row -->
|
|
5927
|
+
@if (activeFilters().length > 0) {
|
|
5928
|
+
<div class="active-filters-container">
|
|
5929
|
+
<monkey-icon-button type="secondary" size="sm" icon="trash" (click)="onClearAllFilters()">
|
|
5930
|
+
</monkey-icon-button>
|
|
5931
|
+
|
|
5932
|
+
<div class="active-filters-scroll">
|
|
5933
|
+
@for (filter of activeFilters(); track filter.key) {
|
|
5934
|
+
<div
|
|
5935
|
+
class="filter-tag"
|
|
5936
|
+
[id]="getActiveFilterId(filter.key)"
|
|
5937
|
+
(click)="onEditActiveFilter(filter)"
|
|
5938
|
+
>
|
|
5939
|
+
@if (filter.icon) {
|
|
5940
|
+
<i [class]="'mk-i mk-i-' + filter.icon + ' fs-sm'"></i>
|
|
5941
|
+
}
|
|
5942
|
+
<span class="filter-label">{{ filter.label }}</span>
|
|
5943
|
+
<span class="filter-value">{{ filter.displayText }}</span>
|
|
5944
|
+
|
|
5945
|
+
<div class="remove-filter">
|
|
5946
|
+
<monkey-icon-button
|
|
5947
|
+
type="tertiary"
|
|
5948
|
+
color="error"
|
|
5949
|
+
size="sm"
|
|
5950
|
+
icon="close"
|
|
5951
|
+
(click)="onRemoveFilter(filter.key, $event)"
|
|
5952
|
+
>
|
|
5953
|
+
</monkey-icon-button>
|
|
5954
|
+
</div>
|
|
5955
|
+
</div>
|
|
5956
|
+
}
|
|
5957
|
+
</div>
|
|
5958
|
+
</div>
|
|
5959
|
+
}
|
|
5960
|
+
`, host: {
|
|
5961
|
+
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
5962
|
+
class: 'mecx-filter-bar'
|
|
5963
|
+
}, styles: [":host{width:100%;display:flex;flex-direction:column;gap:12px}:host .filter-bar-container{display:inline-flex;align-items:center;min-width:0;gap:12px;width:100%}:host .filter-bar-container .search-field{width:100%;max-width:400px;position:relative}:host .filter-bar-container .search-field .search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--mecx-color-gray-400)}:host .filter-bar-container .search-field input{padding-right:40px}:host .filter-bar-container .btn-filter{width:100%;max-width:160px;flex-shrink:0}:host .filter-bar-container .btn-filter .icon{margin-right:8px}:host .active-filters-container{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;overflow:hidden}:host .active-filters-container .clear-all-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;border:none;background:var(--mecx-color-gray-200);border-radius:8px;cursor:pointer;transition:all .2s ease;flex-shrink:0}:host .active-filters-container .clear-all-button:hover{background:var(--mecx-color-gray-300)}:host .active-filters-container .clear-all-button util-icon{width:16px;height:16px;display:flex}:host .active-filters-container .active-filters-scroll{display:flex;align-items:center;gap:8px;overflow:auto hidden;flex:1;min-width:0;scrollbar-width:thin;scrollbar-color:var(--mecx-color-gray-300) transparent}:host .active-filters-container .active-filters-scroll::-webkit-scrollbar{height:4px}:host .active-filters-container .active-filters-scroll::-webkit-scrollbar-track{background:transparent}:host .active-filters-container .active-filters-scroll::-webkit-scrollbar-thumb{background:var(--mecx-color-gray-300);border-radius:2px}:host .active-filters-container .active-filters-scroll .filter-tag{display:inline-flex;align-items:center;gap:8px;padding:0 0 0 12px;background:var(--mecx-color-gray-100);border-radius:8px;white-space:nowrap;flex-shrink:0;min-width:0;cursor:pointer;transition:background-color .2s ease;line-height:16px}:host .active-filters-container .active-filters-scroll .filter-tag:hover{background:var(--mecx-color-gray-200)}:host .active-filters-container .active-filters-scroll .filter-tag .filter-icon{color:var(--mecx-color-gray-600);width:16px;height:16px;flex-shrink:0}:host .active-filters-container .active-filters-scroll .filter-tag .filter-label{font-size:14px;font-weight:500;color:var(--mecx-color-gray-700);flex-shrink:0}:host .active-filters-container .active-filters-scroll .filter-tag .filter-value{font-size:14px;color:var(--mecx-color-gray-900);overflow:hidden;text-overflow:ellipsis;max-width:200px}:host .active-filters-container .active-filters-scroll .filter-tag .remove-filter{border-left:1px solid var(--mecx-color-gray-400)}.filter-container .currency-range-inputs{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.filter-container .currency-range-inputs monkey-radiobutton{margin-bottom:8px}.filter-container .status-filter-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:12px;padding:16px}.filter-container .filter-header{display:flex;align-items:center;padding:8px;gap:6px;border-bottom:1px solid var(--mecx-color-gray-200);font-size:14px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.14px;color:var(--mecx-color-gray-700)}.filter-container .filter-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px;border-top:1px solid var(--mecx-color-gray-200)}.filter-container monkey-date-range{border:unset;border-radius:unset}.filter-option-item{cursor:pointer;display:flex;padding:8px 16px;align-items:center;gap:8px;align-self:stretch;color:var(--mecx-color-gray-900);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}.filter-option-item.first{border-top-left-radius:6px;border-top-right-radius:6px}.filter-option-item:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}.mk-i{display:flex}\n"] }]
|
|
5964
|
+
}], ctorParameters: () => [], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], filtersChange: [{
|
|
5965
|
+
type: Output
|
|
5966
|
+
}], searchChange: [{
|
|
5967
|
+
type: Output
|
|
5968
|
+
}] } });
|
|
5969
|
+
|
|
5970
|
+
/** ************************
|
|
5971
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
5972
|
+
* This style guide was developed by Monkey Exchange Team
|
|
5973
|
+
* MIT Licence
|
|
5974
|
+
************************* */
|
|
5975
|
+
|
|
5976
|
+
/** ************************
|
|
5977
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
5978
|
+
* This style guide was developed by Monkey Exchange Team
|
|
5979
|
+
* MIT Licence
|
|
5980
|
+
************************* */
|
|
5981
|
+
|
|
5982
|
+
/** ************************
|
|
5983
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
5984
|
+
* This style guide was developed by Monkey Exchange Team
|
|
5985
|
+
* MIT Licence
|
|
5986
|
+
************************* */
|
|
5987
|
+
class MonkeyInputCodeComponent {
|
|
5988
|
+
get disabled() {
|
|
5989
|
+
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
5990
|
+
return this.ngControl.disabled;
|
|
5991
|
+
}
|
|
5992
|
+
return this._disabled;
|
|
5993
|
+
}
|
|
5994
|
+
set disabled(value) {
|
|
5995
|
+
this._disabled = value;
|
|
5996
|
+
if (this.focused) {
|
|
5997
|
+
this.focused = false;
|
|
5998
|
+
this.stateChanges.next();
|
|
5999
|
+
}
|
|
6000
|
+
}
|
|
6001
|
+
set value(value) {
|
|
6002
|
+
if (this._value !== value && value !== undefined) {
|
|
6003
|
+
this._value = value;
|
|
6004
|
+
this._onChange(value);
|
|
6005
|
+
this._onTouched();
|
|
6006
|
+
}
|
|
6007
|
+
}
|
|
6008
|
+
get value() {
|
|
6009
|
+
return this._value;
|
|
6010
|
+
}
|
|
6011
|
+
constructor(formField) {
|
|
6012
|
+
this.formField = formField;
|
|
6013
|
+
this.stateChanges = new Subject();
|
|
6014
|
+
this.type = 'input-code';
|
|
6015
|
+
this.currency = false;
|
|
6016
|
+
this.percent = false;
|
|
6017
|
+
this.id = inject(IdGenerator).getId('monkey-input-code-');
|
|
6018
|
+
this._onChange = () => { };
|
|
6019
|
+
this._onTouched = () => { };
|
|
6020
|
+
this._value = null;
|
|
6021
|
+
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
6022
|
+
this.focused = false;
|
|
6023
|
+
this.length = input(6, ...(ngDevMode ? [{ debugName: "length" }] : []));
|
|
6024
|
+
this.inputType = input('numeric', ...(ngDevMode ? [{ debugName: "inputType" }] : []));
|
|
6025
|
+
this.inputIndices = computed(() => {
|
|
6026
|
+
return Array.from({ length: this.length() }, (_, i) => {
|
|
6027
|
+
return '';
|
|
6028
|
+
});
|
|
6029
|
+
}, ...(ngDevMode ? [{ debugName: "inputIndices" }] : []));
|
|
6030
|
+
this._disabled = false;
|
|
6031
|
+
if (this.ngControl) {
|
|
6032
|
+
this.ngControl.valueAccessor = this;
|
|
6033
|
+
}
|
|
6034
|
+
if (this.formField) {
|
|
6035
|
+
this.formField.hideAction = true;
|
|
6036
|
+
}
|
|
6037
|
+
}
|
|
6038
|
+
ngAfterViewInit() {
|
|
6039
|
+
if (this.formField) {
|
|
6040
|
+
const input = this.formField.elementRef.nativeElement.querySelector('.mecx-form-field-body');
|
|
6041
|
+
const height = input.offsetHeight > 40 ? input.offsetHeight : 40;
|
|
6042
|
+
this.inputs.forEach((inputEl) => {
|
|
6043
|
+
inputEl.nativeElement.style.height = `${height}px`;
|
|
6044
|
+
inputEl.nativeElement.style.width = `${height}px`;
|
|
6045
|
+
});
|
|
6046
|
+
}
|
|
6047
|
+
}
|
|
6048
|
+
_onFocus() {
|
|
6049
|
+
if (!this.disabled) {
|
|
6050
|
+
this.focused = true;
|
|
6051
|
+
this._onTouched();
|
|
6052
|
+
this.stateChanges.next();
|
|
6053
|
+
}
|
|
6054
|
+
}
|
|
6055
|
+
propagateCode() {
|
|
6056
|
+
const code = this.inputIndices().join('');
|
|
6057
|
+
this.writeValue(code);
|
|
6058
|
+
}
|
|
6059
|
+
focusNextInput(input) {
|
|
6060
|
+
const next = input.nextElementSibling;
|
|
6061
|
+
next?.focus();
|
|
6062
|
+
}
|
|
6063
|
+
focusPreviousInput(input) {
|
|
6064
|
+
const previous = input.previousElementSibling;
|
|
6065
|
+
previous?.focus();
|
|
6066
|
+
}
|
|
6067
|
+
setFullInputValue(value) {
|
|
6068
|
+
const chars = value?.slice(0, this.length()).split('') || '';
|
|
6069
|
+
chars.forEach((digit, index) => {
|
|
6070
|
+
this.inputIndices()[index] = digit;
|
|
6071
|
+
});
|
|
6072
|
+
}
|
|
6073
|
+
isInvalid() {
|
|
6074
|
+
return this.formField.showInvalid;
|
|
6075
|
+
}
|
|
6076
|
+
onContainerClick() {
|
|
6077
|
+
if (!this._value) {
|
|
6078
|
+
this.inputs.first.nativeElement.focus();
|
|
6079
|
+
}
|
|
6080
|
+
}
|
|
6081
|
+
onKeyDown(event, index) {
|
|
6082
|
+
const input = event.target;
|
|
6083
|
+
this.inputIndices()[index] = input.value;
|
|
6084
|
+
const { key } = event;
|
|
6085
|
+
const keys = {
|
|
6086
|
+
Backspace: () => {
|
|
6087
|
+
if (input.value === '') {
|
|
6088
|
+
this.focusPreviousInput(input);
|
|
6089
|
+
}
|
|
6090
|
+
},
|
|
6091
|
+
Delete: () => {
|
|
6092
|
+
if (input.value === '') {
|
|
4855
6093
|
this.focusNextInput(input);
|
|
4856
6094
|
}
|
|
4857
6095
|
},
|
|
@@ -4936,13 +6174,13 @@ class MonkeyInputCodeComponent {
|
|
|
4936
6174
|
setDisabledState(isDisabled) {
|
|
4937
6175
|
this.disabled = isDisabled;
|
|
4938
6176
|
}
|
|
4939
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
6177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputCodeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyInputCodeComponent, isStandalone: true, selector: "monkey-input-code", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-input-code" }, properties: { "attr.id": "id", "id": "id" } }, providers: [
|
|
4941
6179
|
// eslint-disable-next-line no-use-before-define
|
|
4942
6180
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputCodeComponent }
|
|
4943
6181
|
], viewQueries: [{ propertyName: "inputs", predicate: ["codeInput"], descendants: true }], ngImport: i0, template: "<div class=\"monkey-input-code\">\n @for (idx of inputIndices(); track $index; let i = $index) {\n <input\n #codeInput\n class=\"focus\"\n autocomplete=\"one-time-code\"\n [attr.type]=\"inputType()\"\n [disabled]=\"_disabled\"\n [attr.maxlength]=\"1\"\n [class.invalid]=\"isInvalid()\"\n [(ngModel)]=\"inputIndices()[i]\"\n (focus)=\"onFocus($event)\"\n (input)=\"onInput($event, i)\"\n (keydown)=\"onKeyDown($event, i)\"\n (paste)=\"onPaste($event)\"\n (blur)=\"onBlur()\"\n />\n }\n</div>\n", styles: [".monkey-input-code{display:flex;gap:12px}.monkey-input-code input{box-sizing:border-box;border-radius:4px;border:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;letter-spacing:.14px;line-height:24px;text-align:center}.monkey-input-code input:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:2px}.monkey-input-code input.invalid{border:2px solid var(--mecx-color-error-700)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
4944
6182
|
}
|
|
4945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
6183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputCodeComponent, decorators: [{
|
|
4946
6184
|
type: Component,
|
|
4947
6185
|
args: [{ selector: 'monkey-input-code', imports: [FormsModule], host: {
|
|
4948
6186
|
'data-testid': 'monkey-input-code',
|
|
@@ -5116,8 +6354,8 @@ class MonkeyInputDateRangeComponent {
|
|
|
5116
6354
|
// not to do
|
|
5117
6355
|
}
|
|
5118
6356
|
}
|
|
5119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
5120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
6357
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputDateRangeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6358
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyInputDateRangeComponent, isStandalone: true, selector: "monkey-input-date-range", inputs: { placeholder: "placeholder", title: "title", tabIndex: "tabIndex", minDate: "minDate", maxDate: "maxDate", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-date-range'", "class.mecx-input-date-range-disabled": "_disabled", "class.mecx-input-date-range-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-date-range" }, providers: [
|
|
5121
6359
|
// eslint-disable-next-line no-use-before-define
|
|
5122
6360
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputDateRangeComponent }
|
|
5123
6361
|
], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -5149,7 +6387,7 @@ class MonkeyInputDateRangeComponent {
|
|
|
5149
6387
|
</ng-template>
|
|
5150
6388
|
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-date-range-disabled{pointer-events:none;color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }, { kind: "component", type: MonkeyDateRangeComponent, selector: "monkey-date-range", inputs: ["startDate", "endDate", "hideQuickAction", "hideHeader", "hideActions", "hideSecondCalendar", "allowFastActionOnHeader", "minDate", "maxDate", "id"], outputs: ["onCancel", "onDate"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
5151
6389
|
}
|
|
5152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
6390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputDateRangeComponent, decorators: [{
|
|
5153
6391
|
type: Component,
|
|
5154
6392
|
args: [{ selector: 'monkey-input-date-range', imports: [
|
|
5155
6393
|
CommonModule,
|
|
@@ -5601,8 +6839,8 @@ class MonkeySelectComponent {
|
|
|
5601
6839
|
// not to do
|
|
5602
6840
|
}
|
|
5603
6841
|
}
|
|
5604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
5605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
6842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeySelectComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", type: "type", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-select" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-select-disabled": "_disabled", "class.mecx-select-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-select" }, providers: [
|
|
5606
6844
|
// eslint-disable-next-line no-use-before-define
|
|
5607
6845
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
|
|
5608
6846
|
], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "overlayEl", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"mecx-select-trigger\"\n [class.open]=\"isOpen\"\n (click)=\"toggleDropdown()\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n #trigger\n>\n <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n <span>{{ labelSelected || placeholder }}</span>\n </div>\n\n @if (!loading) {\n <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\n }\n</div>\n\n<ng-template #overlayTemplate>\n <div class=\"mecx-select-body-overlay\">\n @if (showSearch) {\n <div class=\"mecx-select-search\">\n <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\n <input\n (input)=\"onHandleSearch($event)\"\n type=\"text\"\n [id]=\"id + '-search'\"\n autocomplete=\"off\"\n maxlength=\"50\"\n [placeholder]=\"searchPlaceholder\"\n [(ngModel)]=\"searchData\"\n />\n </div>\n }\n <div\n class=\"mecx-select-overlay\"\n #overlay\n [@animation]=\"isOpen ? 'open' : 'closed'\"\n (@animation.done)=\"onAnimationEnd($event)\"\n >\n <ng-content />\n </div>\n @if (showSearch && showSearchNoData) {\n <div class=\"mecx-select-search-no-data\">\n <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\n {{ searchDictionary | async }}\n </div>\n }\n @if (loading) {\n <div class=\"mecx-select-search-loading\">\n {{ loadingDictionary | async }}\n </div>\n }\n </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-body-overlay{width:100%;background:var(--mecx-color-white);border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px 0 var(--mecx-color-box-shadow)}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:var(--mecx-color-white);overflow:hidden auto;max-height:360px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
@@ -5625,7 +6863,7 @@ class MonkeySelectComponent {
|
|
|
5625
6863
|
])
|
|
5626
6864
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5627
6865
|
}
|
|
5628
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
6866
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeySelectComponent, decorators: [{
|
|
5629
6867
|
type: Component,
|
|
5630
6868
|
args: [{ selector: 'monkey-select', imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
5631
6869
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -5747,7 +6985,7 @@ class MonkeyInputPhoneComponent {
|
|
|
5747
6985
|
this._value = null;
|
|
5748
6986
|
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
5749
6987
|
this.idGenerator = inject(IdGenerator);
|
|
5750
|
-
this.countryIsoCode =
|
|
6988
|
+
this.countryIsoCode = injectTokenWithWarning(MECX_COUNTRY_ISO_CODE, 'MECX_COUNTRY_ISO_CODE');
|
|
5751
6989
|
this.locale = inject(LOCALE_ID);
|
|
5752
6990
|
this.id = this.idGenerator.getId('monkey-input-phone-');
|
|
5753
6991
|
this.inputId = this.idGenerator.getId('monkey-input-phone-input-');
|
|
@@ -5906,8 +7144,8 @@ class MonkeyInputPhoneComponent {
|
|
|
5906
7144
|
return 20;
|
|
5907
7145
|
}
|
|
5908
7146
|
}
|
|
5909
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
5910
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
7147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyInputPhoneComponent, isStandalone: true, selector: "monkey-input-phone", inputs: { placeholder: "placeholder", tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-phone'", "class.mecx-input-phone-disabled": "_disabled", "class.mecx-input-phone-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-phone" }, providers: [
|
|
5911
7149
|
// eslint-disable-next-line no-use-before-define
|
|
5912
7150
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
|
|
5913
7151
|
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -5941,7 +7179,7 @@ class MonkeyInputPhoneComponent {
|
|
|
5941
7179
|
/>
|
|
5942
7180
|
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
|
|
5943
7181
|
}
|
|
5944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
|
|
5945
7183
|
type: Component,
|
|
5946
7184
|
args: [{ selector: 'monkey-input-phone', imports: [
|
|
5947
7185
|
FormsModule,
|
|
@@ -6166,8 +7404,8 @@ class MonkeyInputUploadComponent {
|
|
|
6166
7404
|
};
|
|
6167
7405
|
}
|
|
6168
7406
|
}
|
|
6169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
7407
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyInputUploadComponent, isStandalone: true, selector: "monkey-input-upload", inputs: { progress: "progress", placeholder: "placeholder", maxSizeBytes: "maxSizeBytes", allowedExtensions: "allowedExtensions", loading: ["loading", "loading", booleanAttribute], tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-upload'", "class.mecx-input-upload-disabled": "_disabled", "class.mecx-input-upload-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-upload" }, providers: [
|
|
6171
7409
|
// eslint-disable-next-line no-use-before-define
|
|
6172
7410
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
|
|
6173
7411
|
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -6188,7 +7426,7 @@ class MonkeyInputUploadComponent {
|
|
|
6188
7426
|
}
|
|
6189
7427
|
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:4px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-theme-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }); }
|
|
6190
7428
|
}
|
|
6191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
|
|
6192
7430
|
type: Component,
|
|
6193
7431
|
args: [{ selector: 'monkey-input-upload', imports: [], template: `
|
|
6194
7432
|
<div class="mecx-input-upload-value" [class.has-value]="value">
|
|
@@ -6263,10 +7501,10 @@ class MonkeyModalActionsDirective {
|
|
|
6263
7501
|
this.mkAlign = 'end';
|
|
6264
7502
|
this.id = inject(IdGenerator).getId('monkey-modal-actions-');
|
|
6265
7503
|
}
|
|
6266
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6267
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
7504
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7505
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyModalActionsDirective, isStandalone: false, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
|
|
6268
7506
|
}
|
|
6269
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
|
|
6270
7508
|
type: Directive,
|
|
6271
7509
|
args: [{
|
|
6272
7510
|
selector: 'monkey-modal-actions, [monkey-modal-actions]',
|
|
@@ -6289,10 +7527,10 @@ class MonkeyModalContentDirective {
|
|
|
6289
7527
|
constructor() {
|
|
6290
7528
|
this.id = inject(IdGenerator).getId('monkey-modal-content-');
|
|
6291
7529
|
}
|
|
6292
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6293
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
7530
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7531
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyModalContentDirective, isStandalone: false, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
|
|
6294
7532
|
}
|
|
6295
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7533
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
|
|
6296
7534
|
type: Directive,
|
|
6297
7535
|
args: [{
|
|
6298
7536
|
selector: 'monkey-modal-content, [monkey-modal-content]',
|
|
@@ -6313,10 +7551,10 @@ class MonkeyModalSubtitleDirective {
|
|
|
6313
7551
|
constructor() {
|
|
6314
7552
|
this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
|
|
6315
7553
|
}
|
|
6316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6317
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
7554
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7555
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyModalSubtitleDirective, isStandalone: false, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-subtitle" }, ngImport: i0 }); }
|
|
6318
7556
|
}
|
|
6319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
|
|
6320
7558
|
type: Directive,
|
|
6321
7559
|
args: [{
|
|
6322
7560
|
selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
|
|
@@ -6337,10 +7575,10 @@ class MonkeyModalTitleDirective {
|
|
|
6337
7575
|
constructor() {
|
|
6338
7576
|
this.id = inject(IdGenerator).getId('monkey-modal-title-');
|
|
6339
7577
|
}
|
|
6340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6341
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
7578
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7579
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyModalTitleDirective, isStandalone: false, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
|
|
6342
7580
|
}
|
|
6343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
|
|
6344
7582
|
type: Directive,
|
|
6345
7583
|
args: [{
|
|
6346
7584
|
selector: 'monkey-modal-title, [monkey-modal-title]',
|
|
@@ -6454,14 +7692,14 @@ class MonkeyModalComponent {
|
|
|
6454
7692
|
this.modalRef?.close();
|
|
6455
7693
|
}, 150);
|
|
6456
7694
|
}
|
|
6457
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6458
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
7695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyModalComponent, isStandalone: false, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
|
|
6459
7697
|
<div class="mecx-modal-header">
|
|
6460
7698
|
<div class="mecx-modal-header-group">
|
|
6461
7699
|
<div class="mecx-modal-header-title">
|
|
6462
7700
|
@if (modalRef?.icon) {
|
|
6463
7701
|
<div class="mecx-modal-header-icon">
|
|
6464
|
-
<
|
|
7702
|
+
<i class="mk-i mk-i-{{ modalRef?.icon }}"></i>
|
|
6465
7703
|
</div>
|
|
6466
7704
|
}
|
|
6467
7705
|
<ng-content select="monkey-modal-title"></ng-content>
|
|
@@ -6486,9 +7724,9 @@ class MonkeyModalComponent {
|
|
|
6486
7724
|
<ng-content select="[monkey-modal-content]"></ng-content>
|
|
6487
7725
|
<ng-content select="monkey-modal-actions"></ng-content>
|
|
6488
7726
|
<ng-content select="[monkey-modal-actions]"></ng-content>
|
|
6489
|
-
`, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:var(--mecx-color-white);border-radius:16px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:16px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--mecx-color-gray-200);padding:16px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:var(--mecx-color-overlay)}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "
|
|
7727
|
+
`, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:var(--mecx-color-white);border-radius:16px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:16px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--mecx-color-gray-200);padding:16px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:var(--mecx-color-overlay)}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "color", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6490
7728
|
}
|
|
6491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7729
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalComponent, decorators: [{
|
|
6492
7730
|
type: Component,
|
|
6493
7731
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
|
|
6494
7732
|
<div class="mecx-modal-header">
|
|
@@ -6496,7 +7734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6496
7734
|
<div class="mecx-modal-header-title">
|
|
6497
7735
|
@if (modalRef?.icon) {
|
|
6498
7736
|
<div class="mecx-modal-header-icon">
|
|
6499
|
-
<
|
|
7737
|
+
<i class="mk-i mk-i-{{ modalRef?.icon }}"></i>
|
|
6500
7738
|
</div>
|
|
6501
7739
|
}
|
|
6502
7740
|
<ng-content select="monkey-modal-title"></ng-content>
|
|
@@ -6572,13 +7810,13 @@ class MonkeyModalConfirmationComponent {
|
|
|
6572
7810
|
onClose() {
|
|
6573
7811
|
this.modalRef.close();
|
|
6574
7812
|
}
|
|
6575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6576
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
7813
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalConfirmationComponent, deps: [{ token: MECX_MODAL_CONFIRMATION_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7814
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyModalConfirmationComponent, isStandalone: false, selector: "monkey-modal-confirmation", ngImport: i0, template: `
|
|
6577
7815
|
<monkey-modal class="modal-confirmation">
|
|
6578
7816
|
<monkey-modal-content>
|
|
6579
7817
|
@if (config.icon) {
|
|
6580
7818
|
<div class="modal-confirmation-icon {{ config.type }}">
|
|
6581
|
-
<
|
|
7819
|
+
<i class="mk-i mk-i-{{ config.icon }} xxl"></i>
|
|
6582
7820
|
</div>
|
|
6583
7821
|
}
|
|
6584
7822
|
<div class="confirmation-title" [innerHTML]="config.title"></div>
|
|
@@ -6589,16 +7827,16 @@ class MonkeyModalConfirmationComponent {
|
|
|
6589
7827
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
6590
7828
|
</monkey-modal-actions>
|
|
6591
7829
|
</monkey-modal>
|
|
6592
|
-
`, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon
|
|
7830
|
+
`, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon i{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning i{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error i{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success i{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6593
7831
|
}
|
|
6594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
|
|
6595
7833
|
type: Component,
|
|
6596
7834
|
args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
|
|
6597
7835
|
<monkey-modal class="modal-confirmation">
|
|
6598
7836
|
<monkey-modal-content>
|
|
6599
7837
|
@if (config.icon) {
|
|
6600
7838
|
<div class="modal-confirmation-icon {{ config.type }}">
|
|
6601
|
-
<
|
|
7839
|
+
<i class="mk-i mk-i-{{ config.icon }} xxl"></i>
|
|
6602
7840
|
</div>
|
|
6603
7841
|
}
|
|
6604
7842
|
<div class="confirmation-title" [innerHTML]="config.title"></div>
|
|
@@ -6609,7 +7847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6609
7847
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
6610
7848
|
</monkey-modal-actions>
|
|
6611
7849
|
</monkey-modal>
|
|
6612
|
-
`, standalone: false, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon
|
|
7850
|
+
`, standalone: false, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon i{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning i{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error i{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success i{color:var(--mecx-color-success-500)}\n"] }]
|
|
6613
7851
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6614
7852
|
type: Inject,
|
|
6615
7853
|
args: [MECX_MODAL_CONFIRMATION_CONFIG]
|
|
@@ -6635,8 +7873,8 @@ class MonkeyModalDefaultComponent {
|
|
|
6635
7873
|
onClose() {
|
|
6636
7874
|
this.modalRef.close();
|
|
6637
7875
|
}
|
|
6638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6639
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
7876
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalDefaultComponent, deps: [{ token: MECX_MODAL_DEFAULT_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyModalDefaultComponent, isStandalone: false, selector: "monkey-modal-default", ngImport: i0, template: `
|
|
6640
7878
|
<monkey-modal>
|
|
6641
7879
|
<monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
|
|
6642
7880
|
<monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
|
|
@@ -6648,7 +7886,7 @@ class MonkeyModalDefaultComponent {
|
|
|
6648
7886
|
</monkey-modal>
|
|
6649
7887
|
`, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
|
|
6650
7888
|
}
|
|
6651
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
|
|
6652
7890
|
type: Component,
|
|
6653
7891
|
args: [{
|
|
6654
7892
|
selector: 'monkey-modal-default',
|
|
@@ -6679,24 +7917,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6679
7917
|
* MIT Licence
|
|
6680
7918
|
************************* */
|
|
6681
7919
|
class MonkeyModalModule {
|
|
6682
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6683
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
7920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7921
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
|
|
6684
7922
|
MonkeyModalDefaultComponent,
|
|
6685
7923
|
MonkeyModalConfirmationComponent,
|
|
6686
7924
|
MonkeyModalTitleDirective,
|
|
6687
7925
|
MonkeyModalSubtitleDirective,
|
|
6688
7926
|
MonkeyModalContentDirective,
|
|
6689
|
-
MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent
|
|
7927
|
+
MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent], exports: [MonkeyModalComponent,
|
|
6690
7928
|
MonkeyModalTitleDirective,
|
|
6691
7929
|
MonkeyModalSubtitleDirective,
|
|
6692
7930
|
MonkeyModalContentDirective,
|
|
6693
7931
|
MonkeyModalActionsDirective] }); }
|
|
6694
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
7932
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyIconButtonComponent] }); }
|
|
6695
7933
|
}
|
|
6696
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7934
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalModule, decorators: [{
|
|
6697
7935
|
type: NgModule,
|
|
6698
7936
|
args: [{
|
|
6699
|
-
imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent
|
|
7937
|
+
imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent],
|
|
6700
7938
|
declarations: [
|
|
6701
7939
|
MonkeyModalComponent,
|
|
6702
7940
|
MonkeyModalDefaultComponent,
|
|
@@ -6781,265 +8019,80 @@ class MonkeyModalService {
|
|
|
6781
8019
|
if (Array.isArray(config.panelClass)) {
|
|
6782
8020
|
panelClass = [...panelClass, ...config.panelClass];
|
|
6783
8021
|
}
|
|
6784
|
-
else {
|
|
6785
|
-
panelClass.push(config.panelClass);
|
|
6786
|
-
}
|
|
6787
|
-
const state = new OverlayConfig({
|
|
6788
|
-
positionStrategy,
|
|
6789
|
-
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
6790
|
-
panelClass,
|
|
6791
|
-
hasBackdrop: config.hasBackdrop,
|
|
6792
|
-
maxWidth: config.maxWidth,
|
|
6793
|
-
maxHeight: config.maxHeight,
|
|
6794
|
-
disposeOnNavigation: config.closeOnNavigation
|
|
6795
|
-
});
|
|
6796
|
-
if (config.backdropClass) {
|
|
6797
|
-
state.backdropClass = config.backdropClass;
|
|
6798
|
-
}
|
|
6799
|
-
if (config.maxWidth) {
|
|
6800
|
-
state.width = '100%';
|
|
6801
|
-
}
|
|
6802
|
-
if (config.maxHeight) {
|
|
6803
|
-
state.height = '100%';
|
|
6804
|
-
}
|
|
6805
|
-
return state;
|
|
6806
|
-
}
|
|
6807
|
-
createInjector(config, dialogRef, overlayRef, fallbackInjector) {
|
|
6808
|
-
const providers = [
|
|
6809
|
-
{ provide: OverlayRef, useValue: overlayRef },
|
|
6810
|
-
{ provide: MonkeyModalRef, useValue: dialogRef },
|
|
6811
|
-
{ provide: MECX_MODAL_DATA, useValue: config.data }
|
|
6812
|
-
];
|
|
6813
|
-
if (config.providers) {
|
|
6814
|
-
providers.push(...config.providers);
|
|
6815
|
-
}
|
|
6816
|
-
return Injector.create({ parent: fallbackInjector, providers });
|
|
6817
|
-
}
|
|
6818
|
-
open(component, config) {
|
|
6819
|
-
const defaultConfig = new MonkeyModalConfig();
|
|
6820
|
-
config = { ...defaultConfig, ...config };
|
|
6821
|
-
config.id = this._idGenerator.getId('monkey-modal-');
|
|
6822
|
-
const overlayConfig = this.getOverlayConfig(config);
|
|
6823
|
-
const overlayRef = this._overlay.create(overlayConfig);
|
|
6824
|
-
const modalRef = new MonkeyModalRef(overlayRef, config);
|
|
6825
|
-
const injector = this.createInjector(config, modalRef, overlayRef, this._injector);
|
|
6826
|
-
const componentPortal = new ComponentPortal(component, null, injector);
|
|
6827
|
-
const componentRef = overlayRef.attach(componentPortal);
|
|
6828
|
-
const componentElement = componentRef.location.nativeElement;
|
|
6829
|
-
componentElement.style.width = '100%';
|
|
6830
|
-
componentElement.style.height = '100%';
|
|
6831
|
-
modalRef.componentElement = componentElement;
|
|
6832
|
-
modalRef.componentInstance = componentRef.instance;
|
|
6833
|
-
this.openDialogs.push(modalRef);
|
|
6834
|
-
return modalRef;
|
|
6835
|
-
}
|
|
6836
|
-
openDefault(params, config) {
|
|
6837
|
-
config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
|
|
6838
|
-
config.icon = config.icon ? config.icon : 'help';
|
|
6839
|
-
return this.open(MonkeyModalDefaultComponent, config);
|
|
6840
|
-
}
|
|
6841
|
-
openConfirmation(params, config) {
|
|
6842
|
-
config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
|
|
6843
|
-
return this.open(MonkeyModalConfirmationComponent, config);
|
|
6844
|
-
}
|
|
6845
|
-
closeAll() {
|
|
6846
|
-
reverseForEach(this.openDialogs, (dialog) => {
|
|
6847
|
-
return dialog.close();
|
|
6848
|
-
});
|
|
6849
|
-
this.openDialogs.splice(0, this.openDialogs.length);
|
|
6850
|
-
}
|
|
6851
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6852
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
|
|
6853
|
-
}
|
|
6854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyModalService, decorators: [{
|
|
6855
|
-
type: Injectable,
|
|
6856
|
-
args: [{ providedIn: 'root' }]
|
|
6857
|
-
}] });
|
|
6858
|
-
|
|
6859
|
-
/** ************************
|
|
6860
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
6861
|
-
* This style guide was developed by Monkey Exchange Team
|
|
6862
|
-
* MIT Licence
|
|
6863
|
-
************************* */
|
|
6864
|
-
|
|
6865
|
-
/** ************************
|
|
6866
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
6867
|
-
* This style guide was developed by Monkey Exchange Team
|
|
6868
|
-
* MIT Licence
|
|
6869
|
-
************************* */
|
|
6870
|
-
class MonkeyRadioButtonComponent {
|
|
6871
|
-
get classes() {
|
|
6872
|
-
return `${this.position} ${this.size}`;
|
|
6873
|
-
}
|
|
6874
|
-
get disabled() {
|
|
6875
|
-
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
6876
|
-
return this.ngControl.disabled;
|
|
6877
|
-
}
|
|
6878
|
-
return this._disabled;
|
|
6879
|
-
}
|
|
6880
|
-
set disabled(value) {
|
|
6881
|
-
this._disabled = value;
|
|
6882
|
-
if (this.focused) {
|
|
6883
|
-
this.focused = false;
|
|
6884
|
-
this.stateChanges.next();
|
|
6885
|
-
}
|
|
6886
|
-
}
|
|
6887
|
-
get required() {
|
|
6888
|
-
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
6889
|
-
}
|
|
6890
|
-
set required(value) {
|
|
6891
|
-
this._required = value;
|
|
6892
|
-
this.stateChanges.next();
|
|
6893
|
-
}
|
|
6894
|
-
set value(value) {
|
|
6895
|
-
if (this._value !== value) {
|
|
6896
|
-
this._value = value;
|
|
6897
|
-
this._onChange(value);
|
|
6898
|
-
}
|
|
6899
|
-
}
|
|
6900
|
-
get value() {
|
|
6901
|
-
return this._value;
|
|
6902
|
-
}
|
|
6903
|
-
constructor(changeDetectorRef, formField) {
|
|
6904
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
6905
|
-
this.formField = formField;
|
|
6906
|
-
this.tabIndex = 0;
|
|
6907
|
-
this.onChange = new EventEmitter();
|
|
6908
|
-
this.onSearch = new EventEmitter();
|
|
6909
|
-
this.position = 'horizontal';
|
|
6910
|
-
this.size = 'lg';
|
|
6911
|
-
this._value = null;
|
|
6912
|
-
this._destroyRef = inject(DestroyRef);
|
|
6913
|
-
this.idGenerator = inject(IdGenerator);
|
|
6914
|
-
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
6915
|
-
this._elementRef = inject(ElementRef);
|
|
6916
|
-
this.focused = false;
|
|
6917
|
-
this._disabled = false;
|
|
6918
|
-
this.id = this.idGenerator.getId('monkey-radiobutton-');
|
|
6919
|
-
this.stateChanges = new Subject();
|
|
6920
|
-
this.type = 'radio-button';
|
|
6921
|
-
this._onChange = () => { };
|
|
6922
|
-
this._onTouched = () => { };
|
|
6923
|
-
if (this.ngControl) {
|
|
6924
|
-
this.ngControl.valueAccessor = this;
|
|
6925
|
-
}
|
|
6926
|
-
}
|
|
6927
|
-
changeSelected() {
|
|
6928
|
-
setTimeout(() => {
|
|
6929
|
-
if (this.options) {
|
|
6930
|
-
this.options.forEach((opt) => {
|
|
6931
|
-
opt.onSelect(opt.value() === this.value);
|
|
6932
|
-
});
|
|
6933
|
-
}
|
|
6934
|
-
this.changeDetectorRef.markForCheck();
|
|
6935
|
-
});
|
|
6936
|
-
}
|
|
6937
|
-
initializeOptions() {
|
|
6938
|
-
setTimeout(() => {
|
|
6939
|
-
this.options?.forEach((option) => {
|
|
6940
|
-
option.type = 'radio';
|
|
6941
|
-
if (!option.action) {
|
|
6942
|
-
option.action = this.selectOption.bind(this, option);
|
|
6943
|
-
}
|
|
6944
|
-
});
|
|
6945
|
-
this.changeDetectorRef.markForCheck();
|
|
6946
|
-
}, 0);
|
|
6947
|
-
}
|
|
6948
|
-
ngAfterContentInit() {
|
|
6949
|
-
this.initializeOptions();
|
|
6950
|
-
this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
6951
|
-
this.initializeOptions();
|
|
6952
|
-
this.changeSelected();
|
|
8022
|
+
else {
|
|
8023
|
+
panelClass.push(config.panelClass);
|
|
8024
|
+
}
|
|
8025
|
+
const state = new OverlayConfig({
|
|
8026
|
+
positionStrategy,
|
|
8027
|
+
scrollStrategy: this._overlay.scrollStrategies.block(),
|
|
8028
|
+
panelClass,
|
|
8029
|
+
hasBackdrop: config.hasBackdrop,
|
|
8030
|
+
maxWidth: config.maxWidth,
|
|
8031
|
+
maxHeight: config.maxHeight,
|
|
8032
|
+
disposeOnNavigation: config.closeOnNavigation
|
|
6953
8033
|
});
|
|
6954
|
-
|
|
6955
|
-
|
|
6956
|
-
if (!option.disabled && !this.disabled) {
|
|
6957
|
-
this.value = option.value();
|
|
6958
|
-
this._onChange(this.value);
|
|
6959
|
-
this.onChange.emit(this.value);
|
|
6960
|
-
this.options.forEach((opt) => {
|
|
6961
|
-
opt.onSelect(opt.value() === this.value);
|
|
6962
|
-
});
|
|
8034
|
+
if (config.backdropClass) {
|
|
8035
|
+
state.backdropClass = config.backdropClass;
|
|
6963
8036
|
}
|
|
8037
|
+
if (config.maxWidth) {
|
|
8038
|
+
state.width = '100%';
|
|
8039
|
+
}
|
|
8040
|
+
if (config.maxHeight) {
|
|
8041
|
+
state.height = '100%';
|
|
8042
|
+
}
|
|
8043
|
+
return state;
|
|
6964
8044
|
}
|
|
6965
|
-
|
|
6966
|
-
|
|
6967
|
-
|
|
6968
|
-
|
|
6969
|
-
|
|
6970
|
-
|
|
6971
|
-
|
|
6972
|
-
|
|
6973
|
-
}
|
|
6974
|
-
_onFocus() {
|
|
6975
|
-
if (!this.disabled) {
|
|
6976
|
-
this.focused = true;
|
|
6977
|
-
this._onTouched();
|
|
6978
|
-
this.stateChanges.next();
|
|
8045
|
+
createInjector(config, dialogRef, overlayRef, fallbackInjector) {
|
|
8046
|
+
const providers = [
|
|
8047
|
+
{ provide: OverlayRef, useValue: overlayRef },
|
|
8048
|
+
{ provide: MonkeyModalRef, useValue: dialogRef },
|
|
8049
|
+
{ provide: MECX_MODAL_DATA, useValue: config.data }
|
|
8050
|
+
];
|
|
8051
|
+
if (config.providers) {
|
|
8052
|
+
providers.push(...config.providers);
|
|
6979
8053
|
}
|
|
8054
|
+
return Injector.create({ parent: fallbackInjector, providers });
|
|
6980
8055
|
}
|
|
6981
|
-
|
|
6982
|
-
|
|
6983
|
-
|
|
8056
|
+
open(component, config) {
|
|
8057
|
+
const defaultConfig = new MonkeyModalConfig();
|
|
8058
|
+
config = { ...defaultConfig, ...config };
|
|
8059
|
+
config.id = this._idGenerator.getId('monkey-modal-');
|
|
8060
|
+
const overlayConfig = this.getOverlayConfig(config);
|
|
8061
|
+
const overlayRef = this._overlay.create(overlayConfig);
|
|
8062
|
+
const modalRef = new MonkeyModalRef(overlayRef, config);
|
|
8063
|
+
const injector = this.createInjector(config, modalRef, overlayRef, this._injector);
|
|
8064
|
+
const componentPortal = new ComponentPortal(component, null, injector);
|
|
8065
|
+
const componentRef = overlayRef.attach(componentPortal);
|
|
8066
|
+
const componentElement = componentRef.location.nativeElement;
|
|
8067
|
+
componentElement.style.width = '100%';
|
|
8068
|
+
componentElement.style.height = '100%';
|
|
8069
|
+
modalRef.componentElement = componentElement;
|
|
8070
|
+
modalRef.componentInstance = componentRef.instance;
|
|
8071
|
+
this.openDialogs.push(modalRef);
|
|
8072
|
+
return modalRef;
|
|
6984
8073
|
}
|
|
6985
|
-
|
|
6986
|
-
|
|
8074
|
+
openDefault(params, config) {
|
|
8075
|
+
config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
|
|
8076
|
+
config.icon = config.icon ? config.icon : 'help';
|
|
8077
|
+
return this.open(MonkeyModalDefaultComponent, config);
|
|
6987
8078
|
}
|
|
6988
|
-
|
|
6989
|
-
|
|
8079
|
+
openConfirmation(params, config) {
|
|
8080
|
+
config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
|
|
8081
|
+
return this.open(MonkeyModalConfirmationComponent, config);
|
|
6990
8082
|
}
|
|
6991
|
-
|
|
6992
|
-
this.
|
|
6993
|
-
|
|
8083
|
+
closeAll() {
|
|
8084
|
+
reverseForEach(this.openDialogs, (dialog) => {
|
|
8085
|
+
return dialog.close();
|
|
8086
|
+
});
|
|
8087
|
+
this.openDialogs.splice(0, this.openDialogs.length);
|
|
6994
8088
|
}
|
|
6995
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6996
|
-
static { this.ɵ
|
|
6997
|
-
// eslint-disable-next-line no-use-before-define
|
|
6998
|
-
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
6999
|
-
], 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 monkey-option{transition:none!important}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: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8089
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
8090
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
|
|
7000
8091
|
}
|
|
7001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
7002
|
-
type:
|
|
7003
|
-
args: [{
|
|
7004
|
-
|
|
7005
|
-
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
7006
|
-
], host: {
|
|
7007
|
-
'data-testid': 'monkey-radiobutton',
|
|
7008
|
-
class: 'mecx-radiobutton',
|
|
7009
|
-
'[class.mecx-disabled]': 'disabled',
|
|
7010
|
-
'[class.mecx-radiobutton-focused]': 'focused',
|
|
7011
|
-
'[attr.id]': 'id',
|
|
7012
|
-
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
7013
|
-
'(focus)': '_onFocus()',
|
|
7014
|
-
'(blur)': '_onBlur()'
|
|
7015
|
-
}, 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 monkey-option{transition:none!important}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"] }]
|
|
7016
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
|
|
7017
|
-
type: Optional
|
|
7018
|
-
}] }], propDecorators: { options: [{
|
|
7019
|
-
type: ContentChildren,
|
|
7020
|
-
args: [MonkeyOptionComponent]
|
|
7021
|
-
}], tabIndex: [{
|
|
7022
|
-
type: Input
|
|
7023
|
-
}], onChange: [{
|
|
7024
|
-
type: Output
|
|
7025
|
-
}], onSearch: [{
|
|
7026
|
-
type: Output
|
|
7027
|
-
}], position: [{
|
|
7028
|
-
type: Input
|
|
7029
|
-
}], size: [{
|
|
7030
|
-
type: Input
|
|
7031
|
-
}], classes: [{
|
|
7032
|
-
type: HostBinding,
|
|
7033
|
-
args: ['class']
|
|
7034
|
-
}], disabled: [{
|
|
7035
|
-
type: Input,
|
|
7036
|
-
args: [{ transform: booleanAttribute }]
|
|
7037
|
-
}], required: [{
|
|
7038
|
-
type: Input,
|
|
7039
|
-
args: [{ transform: booleanAttribute }]
|
|
7040
|
-
}], value: [{
|
|
7041
|
-
type: Input
|
|
7042
|
-
}] } });
|
|
8092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalService, decorators: [{
|
|
8093
|
+
type: Injectable,
|
|
8094
|
+
args: [{ providedIn: 'root' }]
|
|
8095
|
+
}] });
|
|
7043
8096
|
|
|
7044
8097
|
/** ************************
|
|
7045
8098
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
@@ -7082,10 +8135,10 @@ class MonkeySecurityLevelComponent {
|
|
|
7082
8135
|
// eslint-disable-next-line no-self-assign
|
|
7083
8136
|
this.id = this.id;
|
|
7084
8137
|
}
|
|
7085
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7086
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
8138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n <div>\n @if (label(); as lb) {\n <span data-testid=\"label\">\n {{ lb }}\n </span>\n }\n @if (strengthLabel(); as strLabel) {\n <span data-testid=\"str-label\" class=\"level-info\">\n {{ strLabel }}\n </span>\n }\n </div>\n <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7087
8140
|
}
|
|
7088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
|
|
7089
8142
|
type: Component,
|
|
7090
8143
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [], selector: 'monkey-security-level', host: {
|
|
7091
8144
|
'data-testid': 'monkey-security-level',
|
|
@@ -7128,10 +8181,10 @@ class MonkeyStatusComponent {
|
|
|
7128
8181
|
// eslint-disable-next-line no-self-assign
|
|
7129
8182
|
this.id = this.id;
|
|
7130
8183
|
}
|
|
7131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
8184
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8185
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", 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@if (label(); as lb) {\n <span>\n {{ lb }}\n </span>\n}\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"] }); }
|
|
7133
8186
|
}
|
|
7134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
|
|
7135
8188
|
type: Component,
|
|
7136
8189
|
args: [{ selector: 'monkey-status', imports: [], host: {
|
|
7137
8190
|
'data-testid': 'monkey-status',
|
|
@@ -7174,8 +8227,8 @@ class MonkeyStepComponent {
|
|
|
7174
8227
|
this.hasSubSteps.set(false);
|
|
7175
8228
|
}
|
|
7176
8229
|
}
|
|
7177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
8230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8231
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyStepComponent, isStandalone: false, selector: "monkey-step", inputs: { label: "label", step: "step", icon: "icon" }, host: { attributes: { "data-testid": "monkey-step" }, properties: { "attr.id": "id", "id": "id" } }, queries: [{ propertyName: "subSteps", predicate: MonkeyStepComponent }], ngImport: i0, template: `
|
|
7179
8232
|
<div
|
|
7180
8233
|
class="item"
|
|
7181
8234
|
[class.active]="isActive()"
|
|
@@ -7186,7 +8239,7 @@ class MonkeyStepComponent {
|
|
|
7186
8239
|
<div class="step">
|
|
7187
8240
|
<div class="number" [class.icon]="!!icon">
|
|
7188
8241
|
@if (icon) {
|
|
7189
|
-
<
|
|
8242
|
+
<i class="mk-i mk-i-{{ icon }} sm"></i>
|
|
7190
8243
|
} @else if (isComplete()) {
|
|
7191
8244
|
<util-icon name="check" />
|
|
7192
8245
|
} @else {
|
|
@@ -7198,7 +8251,7 @@ class MonkeyStepComponent {
|
|
|
7198
8251
|
<div>{{ label }}</div>
|
|
7199
8252
|
@if (isCurrent()) {
|
|
7200
8253
|
<div class="current-icon">
|
|
7201
|
-
<
|
|
8254
|
+
<i class="mk-i mk-i-arrow-line-right sm"></i>
|
|
7202
8255
|
</div>
|
|
7203
8256
|
}
|
|
7204
8257
|
</div>
|
|
@@ -7208,9 +8261,9 @@ class MonkeyStepComponent {
|
|
|
7208
8261
|
<ng-content />
|
|
7209
8262
|
</div>
|
|
7210
8263
|
}
|
|
7211
|
-
`, isInline: true, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon
|
|
8264
|
+
`, isInline: true, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon i{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number i{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
|
|
7212
8265
|
}
|
|
7213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepComponent, decorators: [{
|
|
7214
8267
|
type: Component,
|
|
7215
8268
|
args: [{ selector: 'monkey-step', standalone: false, template: `
|
|
7216
8269
|
<div
|
|
@@ -7223,7 +8276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7223
8276
|
<div class="step">
|
|
7224
8277
|
<div class="number" [class.icon]="!!icon">
|
|
7225
8278
|
@if (icon) {
|
|
7226
|
-
<
|
|
8279
|
+
<i class="mk-i mk-i-{{ icon }} sm"></i>
|
|
7227
8280
|
} @else if (isComplete()) {
|
|
7228
8281
|
<util-icon name="check" />
|
|
7229
8282
|
} @else {
|
|
@@ -7235,7 +8288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7235
8288
|
<div>{{ label }}</div>
|
|
7236
8289
|
@if (isCurrent()) {
|
|
7237
8290
|
<div class="current-icon">
|
|
7238
|
-
<
|
|
8291
|
+
<i class="mk-i mk-i-arrow-line-right sm"></i>
|
|
7239
8292
|
</div>
|
|
7240
8293
|
}
|
|
7241
8294
|
</div>
|
|
@@ -7249,7 +8302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7249
8302
|
'data-testid': 'monkey-step',
|
|
7250
8303
|
'[attr.id]': 'id',
|
|
7251
8304
|
'[id]': 'id'
|
|
7252
|
-
}, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon
|
|
8305
|
+
}, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon i{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number i{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
|
|
7253
8306
|
}], propDecorators: { subSteps: [{
|
|
7254
8307
|
type: ContentChildren,
|
|
7255
8308
|
args: [MonkeyStepComponent]
|
|
@@ -7316,10 +8369,10 @@ class MonkeyStepperComponent {
|
|
|
7316
8369
|
}
|
|
7317
8370
|
});
|
|
7318
8371
|
}
|
|
7319
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
8372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8373
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyStepperComponent, isStandalone: false, selector: "monkey-stepper", inputs: { direction: "direction", id: "id", currentStep: "currentStep" }, host: { attributes: { "data-testid": "monkey-stepper" }, properties: { "attr.id": "monkeyId", "id": "monkeyId", "class.horizontal": "direction === 'horizontal'" } }, queries: [{ propertyName: "steps", predicate: MonkeyStepComponent }], usesOnChanges: true, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["monkey-stepper{display:inline-flex;flex-direction:column;width:100%;color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-12);line-height:var(--mecx-lh-16);letter-spacing:.24px;font-weight:var(--mecx-fw-medium);gap:var(--mecx-spaces-small)}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep){margin-bottom:12px;position:relative}monkey-stepper:not(.horizontal)>monkey-step:not(:last-child) .item.complete:not(.substep):after{content:\"\";background:var(--mecx-color-success-main);display:block;position:absolute;width:1px;height:13px;border-radius:10px;left:8px;top:23px}monkey-stepper.horizontal{flex-direction:row;gap:0}monkey-stepper.horizontal>monkey-step{flex:1}monkey-stepper.horizontal>monkey-step:first-child .step:before,monkey-stepper.horizontal>monkey-step:last-child .step:after{background-color:transparent!important}monkey-stepper.horizontal>monkey-step .substeps{display:none!important}monkey-stepper.horizontal>monkey-step .item{flex-direction:column;margin:0}monkey-stepper.horizontal>monkey-step .item .label{justify-content:center;text-align:center}@media(max-width:575.98px){monkey-stepper.horizontal>monkey-step .item .label{display:none}}monkey-stepper.horizontal>monkey-step .item .current-icon{display:none}monkey-stepper.horizontal>monkey-step .item .step{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}monkey-stepper.horizontal>monkey-step .item .step:before{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item .step:after{display:block;content:\"\";width:100%;height:1px;background-color:var(--mecx-color-gray-700)}monkey-stepper.horizontal>monkey-step .item.complete .step:after,monkey-stepper.horizontal>monkey-step .item.complete .step:before{background-color:var(--mecx-color-success-main)}monkey-stepper.horizontal>monkey-step .item.current .step:after,monkey-stepper.horizontal>monkey-step .item.current .step:before{background-color:var(--mecx-color-theme-main)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7321
8374
|
}
|
|
7322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperComponent, decorators: [{
|
|
7323
8376
|
type: Component,
|
|
7324
8377
|
args: [{ selector: 'monkey-stepper', standalone: false, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7325
8378
|
'data-testid': 'monkey-stepper',
|
|
@@ -7344,15 +8397,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7344
8397
|
* MIT Licence
|
|
7345
8398
|
************************* */
|
|
7346
8399
|
class MonkeyStepperModule {
|
|
7347
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7348
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
7349
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
8400
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8401
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
|
|
8402
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperModule }); }
|
|
7350
8403
|
}
|
|
7351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyStepperModule, decorators: [{
|
|
7352
8405
|
type: NgModule,
|
|
7353
8406
|
args: [{
|
|
7354
8407
|
declarations: [MonkeyStepperComponent, MonkeyStepComponent],
|
|
7355
|
-
imports: [UtilIconComponent
|
|
8408
|
+
imports: [UtilIconComponent],
|
|
7356
8409
|
exports: [MonkeyStepperComponent, MonkeyStepComponent]
|
|
7357
8410
|
}]
|
|
7358
8411
|
}] });
|
|
@@ -7377,10 +8430,10 @@ class MonkeyPaginationActionComponent {
|
|
|
7377
8430
|
// eslint-disable-next-line no-self-assign
|
|
7378
8431
|
this.id = this.id;
|
|
7379
8432
|
}
|
|
7380
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7381
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
8433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n type=\"secondary\"\n size=\"sm\"\n (click)=\"onAction.next('prev')\"\n [disabled]=\"disabled || !prev\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n stroke=\"none\"\n fill-rule=\"evenodd\"\n fill=\"black\"\n ></path>\n </svg>\n</monkey-button>\n\n<monkey-button\n type=\"secondary\"\n size=\"sm\"\n (click)=\"onAction.next('next')\"\n [disabled]=\"disabled || !next\"\n>\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n stroke=\"none\"\n fill-rule=\"evenodd\"\n fill=\"black\"\n ></path>\n </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7382
8435
|
}
|
|
7383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
|
|
7384
8437
|
type: Component,
|
|
7385
8438
|
args: [{ imports: [MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
|
|
7386
8439
|
'data-testid': 'monkey-pagination-action',
|
|
@@ -7422,10 +8475,10 @@ class MonkeyPaginationLabelComponent {
|
|
|
7422
8475
|
// eslint-disable-next-line no-self-assign
|
|
7423
8476
|
this.id = this.id;
|
|
7424
8477
|
}
|
|
7425
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
8478
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8479
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyPaginationLabelComponent, isStandalone: true, selector: "monkey-pagination-label", inputs: { id: "id" }, host: { attributes: { "data-testid": "monkey-pagination-label" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationLabel"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7427
8480
|
}
|
|
7428
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
|
|
7429
8482
|
type: Component,
|
|
7430
8483
|
args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
|
|
7431
8484
|
'data-testid': 'monkey-pagination-label',
|
|
@@ -7455,10 +8508,10 @@ class MonkeyPaginationSizeComponent {
|
|
|
7455
8508
|
// eslint-disable-next-line no-self-assign
|
|
7456
8509
|
this.id = this.id;
|
|
7457
8510
|
}
|
|
7458
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7459
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
8511
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8512
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n <monkey-select\n placeholder=\"''\"\n [ngModel]=\"size\"\n (onChange)=\"onChange.next($event)\"\n [disabled]=\"disabled\"\n [showSearch]=\"false\"\n >\n @for (item of sizes; track item) {\n <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n }\n </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "showSearch", "searchPlaceholder", "type", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "noFooterSpace", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7460
8513
|
}
|
|
7461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
|
|
7462
8515
|
type: Component,
|
|
7463
8516
|
args: [{ imports: [
|
|
7464
8517
|
FormsModule,
|
|
@@ -7570,10 +8623,10 @@ class MonkeyTableComponent {
|
|
|
7570
8623
|
this.stateChanges.emit({ loading });
|
|
7571
8624
|
}
|
|
7572
8625
|
}
|
|
7573
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7574
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
8626
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8627
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyTableComponent, isStandalone: false, selector: "monkey-table, table[monkey-table]", inputs: { scroll: "scroll", loading: "loading", loadingRef: "loadingRef" }, outputs: { sortChange: "sortChange" }, host: { properties: { "class.disabled": "this.loading" } }, queries: [{ propertyName: "_paginationActionChildren", predicate: MonkeyPaginationActionComponent, descendants: true }, { propertyName: "_paginationSizeChildren", predicate: MonkeyPaginationSizeComponent, descendants: true }], viewQueries: [{ propertyName: "_headerEl", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "_tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, static: true }, { propertyName: "_tableContentEl", first: true, predicate: ["tableContent"], descendants: true, static: true }, { propertyName: "_tableLoadingEl", first: true, predicate: ["tableLoading"], descendants: true, static: true }, { propertyName: "_tableScrollEl", first: true, predicate: ["tableScroll"], descendants: true, static: true }], exportAs: ["monkeyTable"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mecx-table-container\">\n <div class=\"mecx-table-wrapper\">\n <div class=\"mecx-table-header\" #header>\n <table #tableHeader>\n <ng-content select=\"thead\"></ng-content>\n </table>\n </div>\n <div class=\"mecx-inner-scroll\" #tableScroll>\n <table #tableContent>\n <ng-content select=\"tbody\"></ng-content>\n </table>\n\n @if (loadingRef && loading) {\n <table #tableLoading>\n <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n </table>\n }\n </div>\n </div>\n <div class=\"mecx-table-footer\">\n <ng-content select=\"monkey-pagination-size\"></ng-content>\n <div class=\"mecx-table-actions\">\n <ng-content select=\"monkey-pagination-label\"></ng-content>\n <ng-content select=\"monkey-pagination-action\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow:hidden scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:var(--mecx-color-white)}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7575
8628
|
}
|
|
7576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTableComponent, decorators: [{
|
|
7577
8630
|
type: Component,
|
|
7578
8631
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-table, table[monkey-table]', exportAs: 'monkeyTable', standalone: false, template: "<div class=\"mecx-table-container\">\n <div class=\"mecx-table-wrapper\">\n <div class=\"mecx-table-header\" #header>\n <table #tableHeader>\n <ng-content select=\"thead\"></ng-content>\n </table>\n </div>\n <div class=\"mecx-inner-scroll\" #tableScroll>\n <table #tableContent>\n <ng-content select=\"tbody\"></ng-content>\n </table>\n\n @if (loadingRef && loading) {\n <table #tableLoading>\n <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n </table>\n }\n </div>\n </div>\n <div class=\"mecx-table-footer\">\n <ng-content select=\"monkey-pagination-size\"></ng-content>\n <div class=\"mecx-table-actions\">\n <ng-content select=\"monkey-pagination-label\"></ng-content>\n <ng-content select=\"monkey-pagination-action\"></ng-content>\n </div>\n </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow:hidden scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:var(--mecx-color-white)}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"] }]
|
|
7579
8632
|
}], propDecorators: { scroll: [{
|
|
@@ -7687,10 +8740,10 @@ class MonkeyColumnChecked {
|
|
|
7687
8740
|
ngOnDestroy() {
|
|
7688
8741
|
this._subscriptions.unsubscribe();
|
|
7689
8742
|
}
|
|
7690
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7691
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
8743
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnChecked, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8744
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyColumnChecked, isStandalone: false, selector: "[mkChecked]", inputs: { checked: ["mkChecked", "checked"], disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.mecx-column-checked-disabled": "this.disabled" }, classAttribute: "mecx-column-checked" }, usesOnChanges: true, ngImport: i0 }); }
|
|
7692
8745
|
}
|
|
7693
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnChecked, decorators: [{
|
|
7694
8747
|
type: Directive,
|
|
7695
8748
|
args: [{
|
|
7696
8749
|
selector: '[mkChecked]',
|
|
@@ -7821,10 +8874,10 @@ class MonkeyColumnExpansible {
|
|
|
7821
8874
|
ngOnDestroy() {
|
|
7822
8875
|
this._subscriptions.unsubscribe();
|
|
7823
8876
|
}
|
|
7824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7825
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
8877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnExpansible, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8878
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyColumnExpansible, isStandalone: false, selector: "[mkExpansible]", outputs: { expansionChange: "expansionChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-expansible-disabled": "this.disabled" }, classAttribute: "mecx-column-expansible" }, ngImport: i0 }); }
|
|
7826
8879
|
}
|
|
7827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnExpansible, decorators: [{
|
|
7828
8881
|
type: Directive,
|
|
7829
8882
|
args: [{
|
|
7830
8883
|
selector: '[mkExpansible]',
|
|
@@ -7911,10 +8964,10 @@ class MonkeyColumnSortable {
|
|
|
7911
8964
|
ngOnDestroy() {
|
|
7912
8965
|
this.subscriptions.unsubscribe();
|
|
7913
8966
|
}
|
|
7914
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7915
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
8967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnSortable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8968
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyColumnSortable, isStandalone: false, selector: "[mkSortable]", inputs: { name: ["mkSortable", "name"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-sortable-disabled": "this.disabled" }, classAttribute: "mecx-column-sortable" }, ngImport: i0 }); }
|
|
7916
8969
|
}
|
|
7917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnSortable, decorators: [{
|
|
7918
8971
|
type: Directive,
|
|
7919
8972
|
args: [{
|
|
7920
8973
|
selector: '[mkSortable]',
|
|
@@ -7948,10 +9001,10 @@ class MonkeyColumnStick {
|
|
|
7948
9001
|
constructor() {
|
|
7949
9002
|
this.position = 'right';
|
|
7950
9003
|
}
|
|
7951
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7952
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
9004
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnStick, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9005
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyColumnStick, isStandalone: false, selector: "[mkStick]", inputs: { position: ["mkStick", "position"] }, host: { properties: { "class": "\"mecx-column-stick-\"+position" }, classAttribute: "mecx-column-stick" }, ngImport: i0 }); }
|
|
7953
9006
|
}
|
|
7954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9007
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyColumnStick, decorators: [{
|
|
7955
9008
|
type: Directive,
|
|
7956
9009
|
args: [{
|
|
7957
9010
|
selector: '[mkStick]',
|
|
@@ -7972,8 +9025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7972
9025
|
* MIT Licence
|
|
7973
9026
|
************************* */
|
|
7974
9027
|
class MonkeyTableModule {
|
|
7975
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7976
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
9028
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
9029
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTableModule, declarations: [MonkeyTableComponent,
|
|
7977
9030
|
MonkeyColumnStick,
|
|
7978
9031
|
MonkeyColumnChecked,
|
|
7979
9032
|
MonkeyColumnSortable,
|
|
@@ -7986,10 +9039,10 @@ class MonkeyTableModule {
|
|
|
7986
9039
|
MonkeyColumnChecked,
|
|
7987
9040
|
MonkeyColumnSortable,
|
|
7988
9041
|
MonkeyColumnExpansible] }); }
|
|
7989
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
9042
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTableModule, imports: [CommonModule,
|
|
7990
9043
|
MonkeyPaginationSizeComponent] }); }
|
|
7991
9044
|
}
|
|
7992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTableModule, decorators: [{
|
|
7993
9046
|
type: NgModule,
|
|
7994
9047
|
args: [{
|
|
7995
9048
|
imports: [
|
|
@@ -8069,10 +9122,10 @@ class MonkeyTabLinkDirective {
|
|
|
8069
9122
|
}
|
|
8070
9123
|
}
|
|
8071
9124
|
}
|
|
8072
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8073
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.
|
|
9125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabLinkDirective, deps: [{ token: Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9126
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyTabLinkDirective, isStandalone: false, selector: "[monkey-tab-link]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.disabled": "this.isDisabled", "attr.tabindex": "this.tabIndex" } }, ngImport: i0 }); }
|
|
8074
9127
|
}
|
|
8075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabLinkDirective, decorators: [{
|
|
8076
9129
|
type: Directive,
|
|
8077
9130
|
args: [{
|
|
8078
9131
|
selector: '[monkey-tab-link]',
|
|
@@ -8111,14 +9164,14 @@ class MonkeyTabComponent {
|
|
|
8111
9164
|
this.onClick.emit(this.value);
|
|
8112
9165
|
}
|
|
8113
9166
|
}
|
|
8114
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8115
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.
|
|
9167
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyTabComponent, isStandalone: false, selector: "monkey-tab", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], isSelected: "isSelected" }, outputs: { onClick: "onClick" }, host: { properties: { "class.selected": "this.isSelected" } }, ngImport: i0, template: `
|
|
8116
9169
|
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
8117
9170
|
<ng-content />
|
|
8118
9171
|
</button>
|
|
8119
9172
|
`, isInline: true, styles: [":host{display:block}\n"] }); }
|
|
8120
9173
|
}
|
|
8121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabComponent, decorators: [{
|
|
8122
9175
|
type: Component,
|
|
8123
9176
|
args: [{ selector: 'monkey-tab', standalone: false, template: `
|
|
8124
9177
|
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
@@ -8225,8 +9278,8 @@ class MonkeyTabsComponent {
|
|
|
8225
9278
|
ngOnDestroy() {
|
|
8226
9279
|
this.resizeObserver?.disconnect();
|
|
8227
9280
|
}
|
|
8228
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8229
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
9281
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9282
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyTabsComponent, isStandalone: false, selector: "monkey-tabs", inputs: { selected: "selected", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], position: "position" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-tabs" }, properties: { "attr.id": "monkeyId", "id": "monkeyId" } }, queries: [{ propertyName: "tabs", predicate: MonkeyTabComponent }], viewQueries: [{ propertyName: "tabsHeader", first: true, predicate: ["tabsHeader"], descendants: true }, { propertyName: "tabsContent", first: true, predicate: ["tabsContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
8230
9283
|
@if (hasScroll) {
|
|
8231
9284
|
<button
|
|
8232
9285
|
class="scroll-arrow scroll-arrow-left"
|
|
@@ -8261,7 +9314,7 @@ class MonkeyTabsComponent {
|
|
|
8261
9314
|
}
|
|
8262
9315
|
`, isInline: true, styles: ["monkey-tabs{display:flex;align-items:center;position:relative;width:100%;overflow:hidden}monkey-tabs .monkey-tabs-header{flex:1;overflow:hidden}monkey-tabs a[monkey-tab-link]{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease;text-decoration:none}monkey-tabs a[monkey-tab-link].active:not(.disabled){color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs a[monkey-tab-link]:hover:not(.disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs a[monkey-tab-link].disabled{color:var(--mecx-color-gray-400);pointer-events:none}monkey-tabs monkey-tab{flex-shrink:0;min-width:max-content}monkey-tabs monkey-tab button{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:0 16px;height:32px;font-weight:400;background:transparent;cursor:pointer;font-size:14px;line-height:16px;border-bottom:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);white-space:nowrap;box-sizing:border-box;transition:all .2s ease}monkey-tabs monkey-tab button:disabled{cursor:default;color:var(--mecx-color-gray-400)}monkey-tabs monkey-tab.selected button{color:var(--mecx-color-theme-main);border-bottom-color:var(--mecx-color-theme-main)}monkey-tabs .monkey-tabs-content{display:flex;transition:transform .3s ease;min-width:max-content}monkey-tabs .monkey-tabs-content.full-width monkey-tab,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link]{flex:1}monkey-tabs .monkey-tabs-content.full-width monkey-tab button,monkey-tabs .monkey-tabs-content.full-width a[monkey-tab-link] button{width:100%}monkey-tabs .monkey-tabs-content monkey-tab button:hover:not(:disabled){background-color:var(--mecx-color-gray-100)}monkey-tabs .monkey-tabs-content.start{justify-content:flex-start}monkey-tabs .monkey-tabs-content.center{justify-content:center}monkey-tabs .monkey-tabs-content.end{justify-content:flex-end}monkey-tabs .scroll-arrow{width:32px;height:32px;background:transparent;border:none;font-size:18px;color:var(--mecx-color-gray-400);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;cursor:default;border-bottom:2px solid var(--mecx-color-gray-400);position:relative}monkey-tabs .scroll-arrow:before{transition:all .2s ease;opacity:0;content:\"\";display:block;height:32px;width:16px;position:absolute;top:0;background:transparent;z-index:1}monkey-tabs .scroll-arrow.scroll-arrow-left.enabled:before{background:linear-gradient(90deg,#0000001a,#0000);opacity:1;right:-16px}monkey-tabs .scroll-arrow.scroll-arrow-right.enabled:before{background:linear-gradient(-90deg,#0000001a,#0000);opacity:1;left:-16px}monkey-tabs .scroll-arrow.enabled{color:var(--mecx-color-gray-900)}monkey-tabs .scroll-arrow.enabled:hover{background-color:var(--mecx-color-gray-100);cursor:pointer}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8263
9316
|
}
|
|
8264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabsComponent, decorators: [{
|
|
8265
9318
|
type: Component,
|
|
8266
9319
|
args: [{ selector: 'monkey-tabs', standalone: false, encapsulation: ViewEncapsulation.None, template: `
|
|
8267
9320
|
@if (hasScroll) {
|
|
@@ -8327,11 +9380,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
8327
9380
|
* MIT Licence
|
|
8328
9381
|
************************* */
|
|
8329
9382
|
class MonkeyTabsModule {
|
|
8330
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8331
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
8332
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.
|
|
9383
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
9384
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabsModule, declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective], exports: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective] }); }
|
|
9385
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabsModule }); }
|
|
8333
9386
|
}
|
|
8334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTabsModule, decorators: [{
|
|
8335
9388
|
type: NgModule,
|
|
8336
9389
|
args: [{
|
|
8337
9390
|
declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective],
|
|
@@ -8373,17 +9426,17 @@ class MonkeyToastComponent {
|
|
|
8373
9426
|
this.onClose.emit(this.id);
|
|
8374
9427
|
}
|
|
8375
9428
|
}
|
|
8376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8377
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
9429
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9430
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}} lg\"></i>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8378
9431
|
}
|
|
8379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9432
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToastComponent, decorators: [{
|
|
8380
9433
|
type: Component,
|
|
8381
|
-
args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent,
|
|
9434
|
+
args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
8382
9435
|
'data-testid': 'monkey-toast',
|
|
8383
9436
|
'(animationend)': 'onAnimationEnd($event)',
|
|
8384
9437
|
'[attr.id]': 'id',
|
|
8385
9438
|
'[id]': 'id'
|
|
8386
|
-
}, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <
|
|
9439
|
+
}, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}} lg\"></i>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"] }]
|
|
8387
9440
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
|
|
8388
9441
|
type: Input
|
|
8389
9442
|
}], icon: [{
|
|
@@ -8452,10 +9505,10 @@ class MonkeyToggleComponent {
|
|
|
8452
9505
|
this._checked = !this._checked;
|
|
8453
9506
|
}
|
|
8454
9507
|
}
|
|
8455
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8456
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
9508
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9509
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle", inputs: { disabled: "disabled", size: "size", value: "value", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
8457
9510
|
}
|
|
8458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9511
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
|
|
8459
9512
|
type: Component,
|
|
8460
9513
|
args: [{ selector: 'monkey-toggle', imports: [CommonModule], host: {
|
|
8461
9514
|
'data-testid': 'monkey-toggle',
|
|
@@ -8499,12 +9552,12 @@ class MonkeyToggleLineButtonComponent {
|
|
|
8499
9552
|
this.disabled = false;
|
|
8500
9553
|
this.onChange = new EventEmitter();
|
|
8501
9554
|
}
|
|
8502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
9555
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToggleLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9556
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyToggleLineButtonComponent, isStandalone: true, selector: "monkey-toggle-line-button", inputs: { disabled: "disabled", value: "value", name: "name" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<input\n type=\"radio\"\n [name]=\"name\"\n [id]=\"value + '-' + name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label i{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label i{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=true] i{color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false] i{color:var(--mecx-color-white)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8504
9557
|
}
|
|
8505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToggleLineButtonComponent, decorators: [{
|
|
8506
9559
|
type: Component,
|
|
8507
|
-
args: [{ selector: 'monkey-toggle-line-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<input\n type=\"radio\"\n [name]=\"name\"\n [id]=\"value + '-' + name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label
|
|
9560
|
+
args: [{ selector: 'monkey-toggle-line-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<input\n type=\"radio\"\n [name]=\"name\"\n [id]=\"value + '-' + name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label i{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label i{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=true] i{color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false] i{color:var(--mecx-color-white)}\n"] }]
|
|
8508
9561
|
}], propDecorators: { disabled: [{
|
|
8509
9562
|
type: Input
|
|
8510
9563
|
}], onChange: [{
|
|
@@ -8569,16 +9622,16 @@ class MonkeyToggleLineComponent {
|
|
|
8569
9622
|
ngOnDestroy() {
|
|
8570
9623
|
this.subscriptions.unsubscribe();
|
|
8571
9624
|
}
|
|
8572
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.
|
|
9625
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToggleLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9626
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyToggleLineComponent, isStandalone: true, selector: "monkey-toggle-line", inputs: { value: "value", name: "name", size: "size", disabled: ["disabled", "disabled", booleanAttribute], id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle-line" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, queries: [{ propertyName: "radioButtons", predicate: MonkeyToggleLineButtonComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label i{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label i{color:var(--mecx-color-success-main)}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.lg{height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{height:32px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8574
9627
|
}
|
|
8575
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyToggleLineComponent, decorators: [{
|
|
8576
9629
|
type: Component,
|
|
8577
9630
|
args: [{ selector: 'monkey-toggle-line', imports: [], encapsulation: ViewEncapsulation.None, host: {
|
|
8578
9631
|
'data-testid': 'monkey-toggle-line',
|
|
8579
9632
|
'[attr.id]': 'id',
|
|
8580
9633
|
'[id]': 'id'
|
|
8581
|
-
}, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label
|
|
9634
|
+
}, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label i{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label i{color:var(--mecx-color-success-main)}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.lg{height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{height:32px}\n"] }]
|
|
8582
9635
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
8583
9636
|
type: Input
|
|
8584
9637
|
}], name: [{
|
|
@@ -8633,10 +9686,10 @@ class MonkeyTooltipComponent {
|
|
|
8633
9686
|
this.afterClose.emit(true);
|
|
8634
9687
|
}
|
|
8635
9688
|
}
|
|
8636
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
9689
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9690
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top", id: "id" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if (template) {\n <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\n@if (text) {\n {{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);padding:var(--mecx-spaces-xs) var(--mecx-spaces-small);flex-wrap:wrap;text-align:center;color:var(--mecx-color-white);font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
8638
9691
|
}
|
|
8639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
|
|
8640
9693
|
type: Component,
|
|
8641
9694
|
args: [{ selector: 'monkey-tooltip', imports: [NgTemplateOutlet], host: {
|
|
8642
9695
|
'data-testid': 'monkey-tooltip',
|
|
@@ -8818,10 +9871,10 @@ class MonkeyTooltipDirective {
|
|
|
8818
9871
|
onScroll() {
|
|
8819
9872
|
this.hide();
|
|
8820
9873
|
}
|
|
8821
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8822
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.
|
|
9874
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9875
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()", "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, ngImport: i0 }); }
|
|
8823
9876
|
}
|
|
8824
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
|
|
8825
9878
|
type: Directive,
|
|
8826
9879
|
args: [{
|
|
8827
9880
|
selector: '[monkeyTooltip]',
|
|
@@ -8886,8 +9939,8 @@ class MonkeyUserProfileButtonComponent {
|
|
|
8886
9939
|
event.preventDefault();
|
|
8887
9940
|
this.open = true;
|
|
8888
9941
|
}
|
|
8889
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.
|
|
9942
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyUserProfileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9943
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyUserProfileButtonComponent, isStandalone: true, selector: "monkey-user-profile-button", inputs: { size: "size", name: "name", iconName: "iconName", id: "id" }, host: { attributes: { "data-testid": "monkey-user-profile-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.open": "open", "class": "this.size" } }, ngImport: i0, template: `
|
|
8891
9944
|
<monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
|
|
8892
9945
|
<div class="lh-24 text-truncate flex-grow-1 fs-xxs text-gray-900">
|
|
8893
9946
|
{{ name }}
|
|
@@ -8907,7 +9960,7 @@ class MonkeyUserProfileButtonComponent {
|
|
|
8907
9960
|
</ng-template>
|
|
8908
9961
|
`, isInline: true, styles: ["monkey-user-profile-button{padding:4px;background:var(--mecx-color-gray-100);border-radius:8px;max-width:140px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}monkey-user-profile-button.open .arrow{transform:rotate(180deg)}monkey-user-profile-button monkey-avatar{background-color:var(--mecx-color-white)}monkey-user-profile-button.sm{max-width:150px}monkey-user-profile-button.md{border-radius:12px;max-width:160px}monkey-user-profile-button.lg{border-radius:16px;max-width:170px}monkey-user-profile-button .menu{min-width:150px}monkey-user-profile-button monkey-button span{text-decoration:none}\n"], dependencies: [{ kind: "component", type: MonkeyAvatarComponent, selector: "monkey-avatar", inputs: ["size", "src", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "directive", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: ["monkeyPopover", "monkeyPopoverClosed", "monkeyPopoverTarget", "monkeyPopoverMinwidth", "monkeyPopoverBackdrop", "monkeyPopoverWatch", "monkeyPopoverDir", "monkeyPopoverContextmenu", "monkeyPopoverHeight", "monkeyPopoverTitle", "monkeyPopoverActions", "monkeyPopoverHideClose", "monkeyPopoverHideHeader", "monkeyPopoverHideActions", "monkeyPopoverEnableAutofocus"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8909
9962
|
}
|
|
8910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
9963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyUserProfileButtonComponent, decorators: [{
|
|
8911
9964
|
type: Component,
|
|
8912
9965
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyAvatarComponent, UtilIconComponent, MonkeyPopoverDirective], selector: 'monkey-user-profile-button', template: `
|
|
8913
9966
|
<monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
|
|
@@ -8975,19 +10028,19 @@ class MonkeyUserProfileComponent {
|
|
|
8975
10028
|
// eslint-disable-next-line no-self-assign
|
|
8976
10029
|
this.id = this.id;
|
|
8977
10030
|
}
|
|
8978
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8979
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.
|
|
10031
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10032
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: MonkeyUserProfileComponent, isStandalone: true, selector: "monkey-user-profile", inputs: { email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-user-profile" }, properties: { "attr.id": "id", "id": "id", "class": "size()" } }, ngImport: i0, template: `
|
|
8980
10033
|
<div class="icon">
|
|
8981
|
-
<
|
|
10034
|
+
<i class="mk-i mk-i-user-profile {{size()}}"></i>
|
|
8982
10035
|
</div>
|
|
8983
10036
|
<div class="text-truncate">{{ email() }}</div>
|
|
8984
|
-
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;background:var(--mecx-color-gray-200);border-radius:8px;font-size:14px;color:var(--mecx-color-gray-900);padding:4px 16px 4px 4px;gap:4px;max-width:min(350px,100%);min-width:0;line-height:24px;box-sizing:border-box;height:32px}:host .icon{align-items:center;background:var(--mecx-color-white);border-radius:4px;display:flex;flex-direction:column;height:24px;width:24px;justify-content:center;color:var(--mecx-color-gray-900);flex-shrink:0}:host.md{height:40px}:host.md .icon{height:32px;width:32px}:host.lg{height:48px;font-size:16px}:host.lg .icon{height:40px;width:40px}\n"]
|
|
10037
|
+
`, isInline: true, styles: [":host{display:inline-flex;align-items:center;background:var(--mecx-color-gray-200);border-radius:8px;font-size:14px;color:var(--mecx-color-gray-900);padding:4px 16px 4px 4px;gap:4px;max-width:min(350px,100%);min-width:0;line-height:24px;box-sizing:border-box;height:32px}:host .icon{align-items:center;background:var(--mecx-color-white);border-radius:4px;display:flex;flex-direction:column;height:24px;width:24px;justify-content:center;color:var(--mecx-color-gray-900);flex-shrink:0}:host.md{height:40px}:host.md .icon{height:32px;width:32px}:host.lg{height:48px;font-size:16px}:host.lg .icon{height:40px;width:40px}\n"] }); }
|
|
8985
10038
|
}
|
|
8986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
10039
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyUserProfileComponent, decorators: [{
|
|
8987
10040
|
type: Component,
|
|
8988
|
-
args: [{
|
|
10041
|
+
args: [{ selector: 'monkey-user-profile', template: `
|
|
8989
10042
|
<div class="icon">
|
|
8990
|
-
<
|
|
10043
|
+
<i class="mk-i mk-i-user-profile {{size()}}"></i>
|
|
8991
10044
|
</div>
|
|
8992
10045
|
<div class="text-truncate">{{ email() }}</div>
|
|
8993
10046
|
`, host: {
|
|
@@ -9006,6 +10059,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
9006
10059
|
* MIT Licence
|
|
9007
10060
|
************************* */
|
|
9008
10061
|
|
|
10062
|
+
/** ************************
|
|
10063
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
10064
|
+
* This style guide was developed by Monkey Exchange Team
|
|
10065
|
+
* MIT Licence
|
|
10066
|
+
************************* */
|
|
10067
|
+
class MonkeyPassNumberComponent {
|
|
10068
|
+
get id() {
|
|
10069
|
+
return this._id;
|
|
10070
|
+
}
|
|
10071
|
+
set id(value) {
|
|
10072
|
+
this._id = value || this._uid;
|
|
10073
|
+
}
|
|
10074
|
+
constructor() {
|
|
10075
|
+
this._uid = inject(IdGenerator).getId('monkey-pass-number-');
|
|
10076
|
+
this.selected = [];
|
|
10077
|
+
this.onChange = output();
|
|
10078
|
+
// eslint-disable-next-line no-self-assign
|
|
10079
|
+
this.id = this.id;
|
|
10080
|
+
}
|
|
10081
|
+
clear() {
|
|
10082
|
+
this.selected = [];
|
|
10083
|
+
this.onChange.emit(this.selected);
|
|
10084
|
+
}
|
|
10085
|
+
onPress(pin) {
|
|
10086
|
+
if (this.selected.length < 4) {
|
|
10087
|
+
this.selected.push(pin);
|
|
10088
|
+
this.onChange.emit(this.selected);
|
|
10089
|
+
}
|
|
10090
|
+
}
|
|
10091
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPassNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10092
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyPassNumberComponent, isStandalone: true, selector: "monkey-pass-number", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
|
|
10093
|
+
<div class="pin-selected">
|
|
10094
|
+
@for (input of [0, 1, 2, 3]; track input) {
|
|
10095
|
+
<div class="pin-input">
|
|
10096
|
+
{{ selected[input] }}
|
|
10097
|
+
</div>
|
|
10098
|
+
}
|
|
10099
|
+
</div>
|
|
10100
|
+
<div class="grid">
|
|
10101
|
+
@for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
|
|
10102
|
+
<div class="button" (click)="onPress(pin)">
|
|
10103
|
+
{{ pin }}
|
|
10104
|
+
</div>
|
|
10105
|
+
}
|
|
10106
|
+
<div></div>
|
|
10107
|
+
<div class="button" (click)="onPress(0)">0</div>
|
|
10108
|
+
<div class="button secondary" (click)="clear()">
|
|
10109
|
+
<i class="mk-i mk-i-delete"></i>
|
|
10110
|
+
</div>
|
|
10111
|
+
</div>
|
|
10112
|
+
`, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }); }
|
|
10113
|
+
}
|
|
10114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
|
|
10115
|
+
type: Component,
|
|
10116
|
+
args: [{ selector: 'monkey-pass-number', imports: [], template: `
|
|
10117
|
+
<div class="pin-selected">
|
|
10118
|
+
@for (input of [0, 1, 2, 3]; track input) {
|
|
10119
|
+
<div class="pin-input">
|
|
10120
|
+
{{ selected[input] }}
|
|
10121
|
+
</div>
|
|
10122
|
+
}
|
|
10123
|
+
</div>
|
|
10124
|
+
<div class="grid">
|
|
10125
|
+
@for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
|
|
10126
|
+
<div class="button" (click)="onPress(pin)">
|
|
10127
|
+
{{ pin }}
|
|
10128
|
+
</div>
|
|
10129
|
+
}
|
|
10130
|
+
<div></div>
|
|
10131
|
+
<div class="button" (click)="onPress(0)">0</div>
|
|
10132
|
+
<div class="button secondary" (click)="clear()">
|
|
10133
|
+
<i class="mk-i mk-i-delete"></i>
|
|
10134
|
+
</div>
|
|
10135
|
+
</div>
|
|
10136
|
+
`, host: {
|
|
10137
|
+
'data-testid': 'monkey-pass-number',
|
|
10138
|
+
'[attr.id]': 'id',
|
|
10139
|
+
'[id]': 'id'
|
|
10140
|
+
}, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
|
|
10141
|
+
}], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
|
|
10142
|
+
type: Input
|
|
10143
|
+
}] } });
|
|
10144
|
+
|
|
10145
|
+
/** ************************
|
|
10146
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
10147
|
+
* This style guide was developed by Monkey Exchange Team
|
|
10148
|
+
* MIT Licence
|
|
10149
|
+
************************* */
|
|
10150
|
+
class MonkeyPassSecretNumberComponent {
|
|
10151
|
+
get id() {
|
|
10152
|
+
return this._id;
|
|
10153
|
+
}
|
|
10154
|
+
set id(value) {
|
|
10155
|
+
this._id = value || this._uid;
|
|
10156
|
+
}
|
|
10157
|
+
constructor() {
|
|
10158
|
+
this._uid = inject(IdGenerator).getId('monkey-pass-secret-number-');
|
|
10159
|
+
this.orLabel = inject(MonkeyDictionaryService).get('OR');
|
|
10160
|
+
this.pins = [];
|
|
10161
|
+
this.selected = [];
|
|
10162
|
+
this.onChange = output();
|
|
10163
|
+
// eslint-disable-next-line no-self-assign
|
|
10164
|
+
this.id = this.id;
|
|
10165
|
+
}
|
|
10166
|
+
ngOnInit() {
|
|
10167
|
+
const qtd = 10;
|
|
10168
|
+
const pinPasswords = shuffle(new Array(qtd).fill(qtd).map((value, i) => {
|
|
10169
|
+
return (value * i) / qtd;
|
|
10170
|
+
}));
|
|
10171
|
+
this.pins = pinPasswords
|
|
10172
|
+
.map((value, index) => {
|
|
10173
|
+
return {
|
|
10174
|
+
first: value,
|
|
10175
|
+
last: pinPasswords[pinPasswords.length - index - 1]
|
|
10176
|
+
};
|
|
10177
|
+
})
|
|
10178
|
+
.slice(0, 5);
|
|
10179
|
+
}
|
|
10180
|
+
clear() {
|
|
10181
|
+
this.selected = [];
|
|
10182
|
+
this.onChange.emit(this.getPinPassword());
|
|
10183
|
+
}
|
|
10184
|
+
getPinPassword() {
|
|
10185
|
+
const result = {
|
|
10186
|
+
passNumber1: '',
|
|
10187
|
+
passNumber2: '',
|
|
10188
|
+
passNumber3: '',
|
|
10189
|
+
passNumber4: ''
|
|
10190
|
+
};
|
|
10191
|
+
this.selected.forEach((value, index) => {
|
|
10192
|
+
result[`passNumber${index + 1}`] = value;
|
|
10193
|
+
});
|
|
10194
|
+
return result;
|
|
10195
|
+
}
|
|
10196
|
+
onPress(pin) {
|
|
10197
|
+
if (this.selected.length < 4) {
|
|
10198
|
+
this.selected.push(`${pin.first}${pin.last}`);
|
|
10199
|
+
this.onChange.emit(this.getPinPassword());
|
|
10200
|
+
}
|
|
10201
|
+
}
|
|
10202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPassSecretNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: MonkeyPassSecretNumberComponent, isStandalone: true, selector: "monkey-pass-secret-number", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-secret-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
|
|
10204
|
+
<div class="pin-selected">
|
|
10205
|
+
@for (input of [0, 1, 2, 3]; track input) {
|
|
10206
|
+
<div class="pin-input" [class.filled]="selected[input]"></div>
|
|
10207
|
+
}
|
|
10208
|
+
</div>
|
|
10209
|
+
<div class="grid">
|
|
10210
|
+
@for (pin of pins; track pin) {
|
|
10211
|
+
<div class="button" (click)="onPress(pin)">
|
|
10212
|
+
{{ pin.first }} {{ orLabel | async }} {{ pin.last }}
|
|
10213
|
+
</div>
|
|
10214
|
+
}
|
|
10215
|
+
<div class="button secondary" (click)="clear()">
|
|
10216
|
+
<i class="mk-i mk-i-delete"></i>
|
|
10217
|
+
</div>
|
|
10218
|
+
</div>
|
|
10219
|
+
`, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
10220
|
+
}
|
|
10221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
|
|
10222
|
+
type: Component,
|
|
10223
|
+
args: [{ selector: 'monkey-pass-secret-number', imports: [AsyncPipe], template: `
|
|
10224
|
+
<div class="pin-selected">
|
|
10225
|
+
@for (input of [0, 1, 2, 3]; track input) {
|
|
10226
|
+
<div class="pin-input" [class.filled]="selected[input]"></div>
|
|
10227
|
+
}
|
|
10228
|
+
</div>
|
|
10229
|
+
<div class="grid">
|
|
10230
|
+
@for (pin of pins; track pin) {
|
|
10231
|
+
<div class="button" (click)="onPress(pin)">
|
|
10232
|
+
{{ pin.first }} {{ orLabel | async }} {{ pin.last }}
|
|
10233
|
+
</div>
|
|
10234
|
+
}
|
|
10235
|
+
<div class="button secondary" (click)="clear()">
|
|
10236
|
+
<i class="mk-i mk-i-delete"></i>
|
|
10237
|
+
</div>
|
|
10238
|
+
</div>
|
|
10239
|
+
`, host: {
|
|
10240
|
+
'data-testid': 'monkey-pass-secret-number',
|
|
10241
|
+
'[attr.id]': 'id',
|
|
10242
|
+
'[id]': 'id'
|
|
10243
|
+
}, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
|
|
10244
|
+
}], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
|
|
10245
|
+
type: Input
|
|
10246
|
+
}] } });
|
|
10247
|
+
|
|
10248
|
+
/** ************************
|
|
10249
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
10250
|
+
* This style guide was developed by Monkey Exchange Team
|
|
10251
|
+
* MIT Licence
|
|
10252
|
+
************************* */
|
|
10253
|
+
|
|
9009
10254
|
/** ************************
|
|
9010
10255
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
9011
10256
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -9062,10 +10307,10 @@ class MonkeyBadgeDirective {
|
|
|
9062
10307
|
renderer.removeStyle(el.nativeElement, 'position');
|
|
9063
10308
|
this.badgeEl = null;
|
|
9064
10309
|
}
|
|
9065
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
9066
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.
|
|
10310
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
10311
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: MonkeyBadgeDirective, isStandalone: true, selector: "[monkeyBadge]", inputs: { badgePosition: "badgePosition", badgeSize: "badgeSize", badgeHidden: "badgeHidden", monkeyBadge: "monkeyBadge", badgeBackground: "badgeBackground", badgeColor: "badgeColor" }, usesOnChanges: true, ngImport: i0 }); }
|
|
9067
10312
|
}
|
|
9068
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
10313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyBadgeDirective, decorators: [{
|
|
9069
10314
|
type: Directive,
|
|
9070
10315
|
args: [{
|
|
9071
10316
|
selector: '[monkeyBadge]'
|
|
@@ -9094,5 +10339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
9094
10339
|
* Generated bundle index. Do not edit.
|
|
9095
10340
|
*/
|
|
9096
10341
|
|
|
9097
|
-
export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent,
|
|
10342
|
+
export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, 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, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, getCurrencySymbol, injectTokenWithWarning };
|
|
9098
10343
|
//# sourceMappingURL=monkey-style-guide.mjs.map
|