monkey-style-guide 21.0.4 → 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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { trigger, state,
|
|
1
|
+
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { CommonModule, NgTemplateOutlet, CurrencyPipe, AsyncPipe } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
@@ -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
|
}] });
|
|
@@ -92,8 +92,8 @@ class UtilIconComponent {
|
|
|
92
92
|
constructor() {
|
|
93
93
|
this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
94
94
|
}
|
|
95
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
96
|
-
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: `
|
|
97
97
|
@switch (name()) {
|
|
98
98
|
@case ('clear') {
|
|
99
99
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
|
|
@@ -349,7 +349,7 @@ class UtilIconComponent {
|
|
|
349
349
|
}
|
|
350
350
|
`, isInline: true, styles: [":host{display:flex;background-color:transparent}\n"] }); }
|
|
351
351
|
}
|
|
352
|
-
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: [{
|
|
353
353
|
type: Component,
|
|
354
354
|
args: [{ selector: 'util-icon', template: `
|
|
355
355
|
@switch (name()) {
|
|
@@ -640,8 +640,8 @@ class MonkeyAccordionComponent {
|
|
|
640
640
|
return;
|
|
641
641
|
this.open = !this.open;
|
|
642
642
|
}
|
|
643
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
644
|
-
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: [
|
|
645
645
|
trigger('content', [
|
|
646
646
|
state('void', style({
|
|
647
647
|
height: '0px'
|
|
@@ -659,7 +659,7 @@ class MonkeyAccordionComponent {
|
|
|
659
659
|
])
|
|
660
660
|
] }); }
|
|
661
661
|
}
|
|
662
|
-
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: [{
|
|
663
663
|
type: Component,
|
|
664
664
|
args: [{ selector: 'monkey-accordion', imports: [CommonModule, UtilIconComponent], host: {
|
|
665
665
|
'data-testid': 'monkey-accordion',
|
|
@@ -724,8 +724,8 @@ class MonkeyActionBarComponent {
|
|
|
724
724
|
// eslint-disable-next-line no-self-assign
|
|
725
725
|
this.id = this.id;
|
|
726
726
|
}
|
|
727
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
728
|
-
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()) {
|
|
729
729
|
@if (label(); as lb) {
|
|
730
730
|
<span style="font-size: 13px" data-testid="label">
|
|
731
731
|
{{ lb }}
|
|
@@ -735,7 +735,7 @@ class MonkeyActionBarComponent {
|
|
|
735
735
|
<ng-content></ng-content>
|
|
736
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 }); }
|
|
737
737
|
}
|
|
738
|
-
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: [{
|
|
739
739
|
type: Component,
|
|
740
740
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-action-bar', template: `@if (open()) {
|
|
741
741
|
@if (label(); as lb) {
|
|
@@ -796,10 +796,10 @@ class MonkeyAlertComponent {
|
|
|
796
796
|
};
|
|
797
797
|
return typeIcons[type];
|
|
798
798
|
}
|
|
799
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
800
|
-
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 }); }
|
|
801
801
|
}
|
|
802
|
-
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: [{
|
|
803
803
|
type: Component,
|
|
804
804
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-alert', host: {
|
|
805
805
|
'data-testid': 'monkey-alert',
|
|
@@ -857,8 +857,8 @@ class MonkeyPopoverContentComponent {
|
|
|
857
857
|
isTemplate(value) {
|
|
858
858
|
return value instanceof TemplateRef;
|
|
859
859
|
}
|
|
860
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
861
|
-
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: `
|
|
862
862
|
<div class="mecx-popover-container">
|
|
863
863
|
@if (!hideHeader) {
|
|
864
864
|
<div class="mecx-popover-header">
|
|
@@ -896,7 +896,7 @@ class MonkeyPopoverContentComponent {
|
|
|
896
896
|
</div>
|
|
897
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"] }] }); }
|
|
898
898
|
}
|
|
899
|
-
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: [{
|
|
900
900
|
type: Component,
|
|
901
901
|
args: [{
|
|
902
902
|
selector: 'monkey-popover-content',
|
|
@@ -1158,10 +1158,10 @@ class MonkeyPopoverDirective {
|
|
|
1158
1158
|
this._resizeObserver.observe(this._componentRef.location.nativeElement);
|
|
1159
1159
|
}
|
|
1160
1160
|
}
|
|
1161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1162
|
-
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 }); }
|
|
1163
1163
|
}
|
|
1164
|
-
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: [{
|
|
1165
1165
|
type: Directive,
|
|
1166
1166
|
args: [{
|
|
1167
1167
|
selector: '[monkeyPopover]'
|
|
@@ -1269,10 +1269,10 @@ class MonkeyEcxAddressService {
|
|
|
1269
1269
|
return this.mappingData(resp.places);
|
|
1270
1270
|
}));
|
|
1271
1271
|
}
|
|
1272
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1273
|
-
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' }); }
|
|
1274
1274
|
}
|
|
1275
|
-
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: [{
|
|
1276
1276
|
type: Injectable,
|
|
1277
1277
|
args: [{ providedIn: 'root' }]
|
|
1278
1278
|
}] });
|
|
@@ -1503,10 +1503,10 @@ class MonkeyDictionaryService {
|
|
|
1503
1503
|
return data[locale]?.[key] ?? null;
|
|
1504
1504
|
}));
|
|
1505
1505
|
}
|
|
1506
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1507
|
-
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' }); }
|
|
1508
1508
|
}
|
|
1509
|
-
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: [{
|
|
1510
1510
|
type: Injectable,
|
|
1511
1511
|
args: [{
|
|
1512
1512
|
providedIn: 'root'
|
|
@@ -1532,10 +1532,10 @@ class MonkeyStepperService {
|
|
|
1532
1532
|
return new Map(items).set(id, step);
|
|
1533
1533
|
});
|
|
1534
1534
|
}
|
|
1535
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1536
|
-
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' }); }
|
|
1537
1537
|
}
|
|
1538
|
-
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: [{
|
|
1539
1539
|
type: Injectable,
|
|
1540
1540
|
args: [{
|
|
1541
1541
|
providedIn: 'root'
|
|
@@ -1620,10 +1620,10 @@ class MonkeyToastService {
|
|
|
1620
1620
|
}
|
|
1621
1621
|
return componentRef.instance;
|
|
1622
1622
|
}
|
|
1623
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1624
|
-
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' }); }
|
|
1625
1625
|
}
|
|
1626
|
-
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: [{
|
|
1627
1627
|
type: Injectable,
|
|
1628
1628
|
args: [{
|
|
1629
1629
|
providedIn: 'root'
|
|
@@ -1642,10 +1642,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1642
1642
|
* MIT Licence
|
|
1643
1643
|
************************* */
|
|
1644
1644
|
class MonkeyFormFieldControl {
|
|
1645
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1646
|
-
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 }); }
|
|
1647
1647
|
}
|
|
1648
|
-
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: [{
|
|
1649
1649
|
type: Directive
|
|
1650
1650
|
}] });
|
|
1651
1651
|
|
|
@@ -1672,10 +1672,10 @@ class MonkeyDisplayDirective {
|
|
|
1672
1672
|
this.fallbackText = await firstValueFrom(this.i18nDictionary);
|
|
1673
1673
|
});
|
|
1674
1674
|
}
|
|
1675
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1676
|
-
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 }); }
|
|
1677
1677
|
}
|
|
1678
|
-
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: [{
|
|
1679
1679
|
type: Directive,
|
|
1680
1680
|
args: [{
|
|
1681
1681
|
selector: 'monkey-display'
|
|
@@ -1688,10 +1688,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1688
1688
|
* MIT Licence
|
|
1689
1689
|
************************* */
|
|
1690
1690
|
class MonkeyErrorDirective {
|
|
1691
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1692
|
-
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 }); }
|
|
1693
1693
|
}
|
|
1694
|
-
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: [{
|
|
1695
1695
|
type: Directive,
|
|
1696
1696
|
args: [{
|
|
1697
1697
|
selector: 'monkey-error'
|
|
@@ -1704,10 +1704,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1704
1704
|
* MIT Licence
|
|
1705
1705
|
************************* */
|
|
1706
1706
|
class MonkeyHelperDirective {
|
|
1707
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1708
|
-
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 }); }
|
|
1709
1709
|
}
|
|
1710
|
-
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: [{
|
|
1711
1711
|
type: Directive,
|
|
1712
1712
|
args: [{
|
|
1713
1713
|
selector: 'monkey-helper'
|
|
@@ -1720,10 +1720,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1720
1720
|
* MIT Licence
|
|
1721
1721
|
************************* */
|
|
1722
1722
|
class MonkeyInfoDirective {
|
|
1723
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1724
|
-
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 }); }
|
|
1725
1725
|
}
|
|
1726
|
-
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: [{
|
|
1727
1727
|
type: Directive,
|
|
1728
1728
|
args: [{
|
|
1729
1729
|
selector: 'monkey-info'
|
|
@@ -1736,10 +1736,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1736
1736
|
* MIT Licence
|
|
1737
1737
|
************************* */
|
|
1738
1738
|
class MonkeyLabelDirective {
|
|
1739
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1740
|
-
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 }); }
|
|
1741
1741
|
}
|
|
1742
|
-
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: [{
|
|
1743
1743
|
type: Directive,
|
|
1744
1744
|
args: [{
|
|
1745
1745
|
selector: 'monkey-label'
|
|
@@ -1752,10 +1752,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
1752
1752
|
* MIT Licence
|
|
1753
1753
|
************************* */
|
|
1754
1754
|
class MonkeyPrefixDirective {
|
|
1755
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1756
|
-
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 }); }
|
|
1757
1757
|
}
|
|
1758
|
-
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: [{
|
|
1759
1759
|
type: Directive,
|
|
1760
1760
|
args: [{
|
|
1761
1761
|
selector: 'monkey-prefix'
|
|
@@ -1784,10 +1784,10 @@ class MonkeySuffixDirective {
|
|
|
1784
1784
|
this.action(event);
|
|
1785
1785
|
}
|
|
1786
1786
|
}
|
|
1787
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
1788
|
-
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 }); }
|
|
1789
1789
|
}
|
|
1790
|
-
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: [{
|
|
1791
1791
|
type: Directive,
|
|
1792
1792
|
args: [{
|
|
1793
1793
|
selector: 'monkey-suffix',
|
|
@@ -2077,10 +2077,10 @@ class MonkeyFormFieldComponent {
|
|
|
2077
2077
|
this.control.onContainerClick(event);
|
|
2078
2078
|
}, 0);
|
|
2079
2079
|
}
|
|
2080
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2081
|
-
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 }); }
|
|
2082
2082
|
}
|
|
2083
|
-
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: [{
|
|
2084
2084
|
type: Component,
|
|
2085
2085
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-form-field', exportAs: 'monkeyFormField', host: {
|
|
2086
2086
|
class: 'mecx-form-field',
|
|
@@ -2092,7 +2092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
2092
2092
|
'[attr.id]': 'id',
|
|
2093
2093
|
'[id]': 'id',
|
|
2094
2094
|
'[class]': 'size'
|
|
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}.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"] }]
|
|
2096
2096
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2097
2097
|
type: Input
|
|
2098
2098
|
}], hideAction: [{
|
|
@@ -2117,11 +2117,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
2117
2117
|
* MIT Licence
|
|
2118
2118
|
************************* */
|
|
2119
2119
|
class MonkeyFormFieldModule {
|
|
2120
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2121
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
2122
|
-
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] }); }
|
|
2123
2123
|
}
|
|
2124
|
-
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: [{
|
|
2125
2125
|
type: NgModule,
|
|
2126
2126
|
args: [{
|
|
2127
2127
|
imports: [CommonModule, UtilIconComponent],
|
|
@@ -2182,8 +2182,8 @@ class MonkeyOptionComponent {
|
|
|
2182
2182
|
onSelect(select) {
|
|
2183
2183
|
this._selectedState.set(select);
|
|
2184
2184
|
}
|
|
2185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2186
|
-
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: `
|
|
2187
2187
|
@if (type === 'checkbox') {
|
|
2188
2188
|
<span class="mecx-option-checkbox">
|
|
2189
2189
|
<util-icon class="icon" name="check" />
|
|
@@ -2192,7 +2192,7 @@ class MonkeyOptionComponent {
|
|
|
2192
2192
|
<div #content><ng-content /></div>
|
|
2193
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 }); }
|
|
2194
2194
|
}
|
|
2195
|
-
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: [{
|
|
2196
2196
|
type: Component,
|
|
2197
2197
|
args: [{ selector: 'monkey-option', standalone: true, imports: [UtilIconComponent], template: `
|
|
2198
2198
|
@if (type === 'checkbox') {
|
|
@@ -2408,8 +2408,8 @@ class MonkeyAutocompleteComponent {
|
|
|
2408
2408
|
isSelected(option) {
|
|
2409
2409
|
return option?.value === this.value;
|
|
2410
2410
|
}
|
|
2411
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2412
|
-
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: [
|
|
2413
2413
|
// eslint-disable-next-line no-use-before-define
|
|
2414
2414
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteComponent }
|
|
2415
2415
|
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
|
|
@@ -2482,7 +2482,7 @@ class MonkeyAutocompleteComponent {
|
|
|
2482
2482
|
</ng-template>
|
|
2483
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" }] }); }
|
|
2484
2484
|
}
|
|
2485
|
-
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: [{
|
|
2486
2486
|
type: Component,
|
|
2487
2487
|
args: [{ selector: 'monkey-autocomplete', imports: [
|
|
2488
2488
|
CommonModule,
|
|
@@ -2781,8 +2781,8 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2781
2781
|
isSelected(option) {
|
|
2782
2782
|
return option === this.value;
|
|
2783
2783
|
}
|
|
2784
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
2785
|
-
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: [
|
|
2786
2786
|
// eslint-disable-next-line no-use-before-define
|
|
2787
2787
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteAddressComponent }
|
|
2788
2788
|
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
|
|
@@ -2849,7 +2849,7 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2849
2849
|
</ng-template>
|
|
2850
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" }] }); }
|
|
2851
2851
|
}
|
|
2852
|
-
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: [{
|
|
2853
2853
|
type: Component,
|
|
2854
2854
|
args: [{ selector: 'monkey-autocomplete-address', imports: [
|
|
2855
2855
|
CommonModule,
|
|
@@ -3009,10 +3009,10 @@ class MonkeyAvatarComponent {
|
|
|
3009
3009
|
this.avatar = getInitial(value.name);
|
|
3010
3010
|
}
|
|
3011
3011
|
}
|
|
3012
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3013
|
-
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 }); }
|
|
3014
3014
|
}
|
|
3015
|
-
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: [{
|
|
3016
3016
|
type: Component,
|
|
3017
3017
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
|
|
3018
3018
|
'data-testid': 'monkey-avatar',
|
|
@@ -3066,10 +3066,10 @@ class MonkeyBadgeComponent {
|
|
|
3066
3066
|
};
|
|
3067
3067
|
}
|
|
3068
3068
|
}
|
|
3069
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3070
|
-
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"] }); }
|
|
3071
3071
|
}
|
|
3072
|
-
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: [{
|
|
3073
3073
|
type: Component,
|
|
3074
3074
|
args: [{ selector: 'monkey-badge', host: {
|
|
3075
3075
|
'data-testid': 'monkey-badge',
|
|
@@ -3132,10 +3132,10 @@ class MonkeyBreadcrumbComponent {
|
|
|
3132
3132
|
this._router.navigate([item.path]);
|
|
3133
3133
|
}
|
|
3134
3134
|
}
|
|
3135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3136
|
-
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 }); }
|
|
3137
3137
|
}
|
|
3138
|
-
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: [{
|
|
3139
3139
|
type: Component,
|
|
3140
3140
|
args: [{ selector: 'monkey-breadcrumb', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
|
|
3141
3141
|
'data-testid': 'monkey-breadcrumb',
|
|
@@ -3192,10 +3192,10 @@ class MonkeyButtonComponent {
|
|
|
3192
3192
|
get element() {
|
|
3193
3193
|
return this.elementRef.nativeElement;
|
|
3194
3194
|
}
|
|
3195
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3196
|
-
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 }); }
|
|
3197
3197
|
}
|
|
3198
|
-
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: [{
|
|
3199
3199
|
type: Component,
|
|
3200
3200
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent], selector: 'monkey-button', standalone: true, host: {
|
|
3201
3201
|
'data-testid': 'monkey-button',
|
|
@@ -3329,8 +3329,8 @@ class MonkeyCheckboxComponent {
|
|
|
3329
3329
|
}
|
|
3330
3330
|
return '';
|
|
3331
3331
|
}
|
|
3332
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3333
|
-
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: [
|
|
3334
3334
|
{
|
|
3335
3335
|
provide: NG_VALUE_ACCESSOR,
|
|
3336
3336
|
useExisting: forwardRef(() => {
|
|
@@ -3362,7 +3362,7 @@ class MonkeyCheckboxComponent {
|
|
|
3362
3362
|
])
|
|
3363
3363
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3364
3364
|
}
|
|
3365
|
-
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: [{
|
|
3366
3366
|
type: Component,
|
|
3367
3367
|
args: [{ selector: 'monkey-checkbox', imports: [ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3368
3368
|
trigger('iconAnimation', [
|
|
@@ -3567,8 +3567,8 @@ class MonkeyInputCurrencyDirective {
|
|
|
3567
3567
|
focusOutChanged() {
|
|
3568
3568
|
this.ngControl?.control?.markAsTouched();
|
|
3569
3569
|
}
|
|
3570
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3571
|
-
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: [
|
|
3572
3572
|
{
|
|
3573
3573
|
provide: MonkeyFormFieldControl,
|
|
3574
3574
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -3576,7 +3576,7 @@ class MonkeyInputCurrencyDirective {
|
|
|
3576
3576
|
}
|
|
3577
3577
|
], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
|
|
3578
3578
|
}
|
|
3579
|
-
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: [{
|
|
3580
3580
|
type: Directive,
|
|
3581
3581
|
args: [{
|
|
3582
3582
|
selector: 'input[monkey-input-currency]',
|
|
@@ -3758,8 +3758,8 @@ class MonkeyInputDirective {
|
|
|
3758
3758
|
focusOutChanged() {
|
|
3759
3759
|
this.ngControl?.control?.markAsTouched();
|
|
3760
3760
|
}
|
|
3761
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3762
|
-
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: [
|
|
3763
3763
|
{
|
|
3764
3764
|
provide: MonkeyFormFieldControl,
|
|
3765
3765
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -3767,7 +3767,7 @@ class MonkeyInputDirective {
|
|
|
3767
3767
|
}
|
|
3768
3768
|
], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
|
|
3769
3769
|
}
|
|
3770
|
-
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: [{
|
|
3771
3771
|
type: Directive,
|
|
3772
3772
|
args: [{
|
|
3773
3773
|
selector: 'input[monkey-input],textarea[monkey-input]',
|
|
@@ -3821,11 +3821,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3821
3821
|
* MIT Licence
|
|
3822
3822
|
************************* */
|
|
3823
3823
|
class MonkeyInputModule {
|
|
3824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3825
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
3826
|
-
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] }); }
|
|
3827
3827
|
}
|
|
3828
|
-
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: [{
|
|
3829
3829
|
type: NgModule,
|
|
3830
3830
|
args: [{
|
|
3831
3831
|
providers: [CurrencyPipe],
|
|
@@ -3857,6 +3857,7 @@ class MonkeyIconButtonComponent {
|
|
|
3857
3857
|
this.size = 'md';
|
|
3858
3858
|
this.disabled = false;
|
|
3859
3859
|
this.icon = '';
|
|
3860
|
+
this.color = 'default';
|
|
3860
3861
|
this._uid = inject(IdGenerator).getId('monkey-icon-button-');
|
|
3861
3862
|
// eslint-disable-next-line no-self-assign
|
|
3862
3863
|
this.id = this.id;
|
|
@@ -3868,16 +3869,16 @@ class MonkeyIconButtonComponent {
|
|
|
3868
3869
|
event.stopImmediatePropagation();
|
|
3869
3870
|
}
|
|
3870
3871
|
}
|
|
3871
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
3872
|
-
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 }); }
|
|
3873
3874
|
}
|
|
3874
|
-
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: [{
|
|
3875
3876
|
type: Component,
|
|
3876
3877
|
args: [{ selector: 'monkey-icon-button', imports: [CommonModule, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
3877
3878
|
'data-testid': 'monkey-icon-button',
|
|
3878
3879
|
'[attr.id]': 'id',
|
|
3879
3880
|
'[id]': 'id'
|
|
3880
|
-
}, 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"] }]
|
|
3881
3882
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
3882
3883
|
type: Input
|
|
3883
3884
|
}], size: [{
|
|
@@ -3888,6 +3889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
3888
3889
|
type: Input
|
|
3889
3890
|
}], loading: [{
|
|
3890
3891
|
type: Input
|
|
3892
|
+
}], color: [{
|
|
3893
|
+
type: Input
|
|
3891
3894
|
}], id: [{
|
|
3892
3895
|
type: Input
|
|
3893
3896
|
}], onClick: [{
|
|
@@ -4103,10 +4106,10 @@ class MonkeyDateRangeMonthComponent {
|
|
|
4103
4106
|
endDate: this._handledEndDate
|
|
4104
4107
|
});
|
|
4105
4108
|
}
|
|
4106
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4107
|
-
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" }] }); }
|
|
4108
4111
|
}
|
|
4109
|
-
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: [{
|
|
4110
4113
|
type: Component,
|
|
4111
4114
|
args: [{ selector: 'monkey-date-range-month', imports: [CommonModule, MonkeyIconButtonComponent], host: {
|
|
4112
4115
|
'data-testid': 'month',
|
|
@@ -4172,10 +4175,10 @@ class MonkeyDateRangeQuickActionsComponent {
|
|
|
4172
4175
|
this.selectedAction = key;
|
|
4173
4176
|
this.onChange.next(value);
|
|
4174
4177
|
}
|
|
4175
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4176
|
-
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" }] }); }
|
|
4177
4180
|
}
|
|
4178
|
-
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: [{
|
|
4179
4182
|
type: Component,
|
|
4180
4183
|
args: [{ selector: 'monkey-date-range-quick-actions', imports: [CommonModule], host: {
|
|
4181
4184
|
'data-testid': 'quick-actions',
|
|
@@ -4367,10 +4370,10 @@ class MonkeyDateRangeComponent {
|
|
|
4367
4370
|
this.firstCalendar = calendars.firstCalendar;
|
|
4368
4371
|
this.secondCalendar = calendars.secondCalendar;
|
|
4369
4372
|
}
|
|
4370
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4371
|
-
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" }] }); }
|
|
4372
4375
|
}
|
|
4373
|
-
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: [{
|
|
4374
4377
|
type: Component,
|
|
4375
4378
|
args: [{ selector: 'monkey-date-range', imports: [
|
|
4376
4379
|
CommonModule,
|
|
@@ -4386,7 +4389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
4386
4389
|
'data-testid': 'monkey-date-range',
|
|
4387
4390
|
'[attr.id]': 'id',
|
|
4388
4391
|
'[id]': 'id'
|
|
4389
|
-
}, 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"] }]
|
|
4390
4393
|
}], ctorParameters: () => [], propDecorators: { startDate: [{
|
|
4391
4394
|
type: Input
|
|
4392
4395
|
}], endDate: [{
|
|
@@ -4449,10 +4452,10 @@ class MonkeyDividerComponent {
|
|
|
4449
4452
|
// eslint-disable-next-line no-self-assign
|
|
4450
4453
|
this.id = this.id;
|
|
4451
4454
|
}
|
|
4452
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4453
|
-
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 }); }
|
|
4454
4457
|
}
|
|
4455
|
-
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: [{
|
|
4456
4459
|
type: Component,
|
|
4457
4460
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-divider', standalone: true, template: '', host: {
|
|
4458
4461
|
'data-testid': 'monkey-divider',
|
|
@@ -4507,8 +4510,8 @@ class MonkeyDownloadButtonComponent {
|
|
|
4507
4510
|
onDownload() {
|
|
4508
4511
|
this.onChange.emit({ component: this });
|
|
4509
4512
|
}
|
|
4510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4511
|
-
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: `
|
|
4512
4515
|
<monkey-button
|
|
4513
4516
|
[type]="type"
|
|
4514
4517
|
[color]="color"
|
|
@@ -4539,7 +4542,7 @@ class MonkeyDownloadButtonComponent {
|
|
|
4539
4542
|
</monkey-button>
|
|
4540
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"] }] }); }
|
|
4541
4544
|
}
|
|
4542
|
-
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: [{
|
|
4543
4546
|
type: Component,
|
|
4544
4547
|
args: [{ selector: 'monkey-download-button', imports: [MonkeyButtonComponent], template: `
|
|
4545
4548
|
<monkey-button
|
|
@@ -4602,6 +4605,432 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
4602
4605
|
* MIT Licence
|
|
4603
4606
|
************************* */
|
|
4604
4607
|
|
|
4608
|
+
/** ************************
|
|
4609
|
+
* Copyright Monkey Exchange. All Rights Reserved
|
|
4610
|
+
* This style guide was developed by Monkey Exchange Team
|
|
4611
|
+
* MIT Licence
|
|
4612
|
+
************************* */
|
|
4613
|
+
class MonkeyRadioButtonComponent {
|
|
4614
|
+
get classes() {
|
|
4615
|
+
return `${this.position} ${this.size}`;
|
|
4616
|
+
}
|
|
4617
|
+
get disabled() {
|
|
4618
|
+
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
4619
|
+
return this.ngControl.disabled;
|
|
4620
|
+
}
|
|
4621
|
+
return this._disabled;
|
|
4622
|
+
}
|
|
4623
|
+
set disabled(value) {
|
|
4624
|
+
this._disabled = value;
|
|
4625
|
+
if (this.focused) {
|
|
4626
|
+
this.focused = false;
|
|
4627
|
+
this.stateChanges.next();
|
|
4628
|
+
}
|
|
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
|
+
}
|
|
4637
|
+
set value(value) {
|
|
4638
|
+
if (this._value !== value) {
|
|
4639
|
+
this._value = value;
|
|
4640
|
+
this._onChange(value);
|
|
4641
|
+
}
|
|
4642
|
+
}
|
|
4643
|
+
get value() {
|
|
4644
|
+
return this._value;
|
|
4645
|
+
}
|
|
4646
|
+
constructor(changeDetectorRef, formField) {
|
|
4647
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
4648
|
+
this.formField = formField;
|
|
4649
|
+
this.tabIndex = 0;
|
|
4650
|
+
this.onChange = new EventEmitter();
|
|
4651
|
+
this.onSearch = new EventEmitter();
|
|
4652
|
+
this.position = 'horizontal';
|
|
4653
|
+
this.size = 'lg';
|
|
4654
|
+
this._value = null;
|
|
4655
|
+
this._destroyRef = inject(DestroyRef);
|
|
4656
|
+
this.idGenerator = inject(IdGenerator);
|
|
4657
|
+
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
4658
|
+
this._elementRef = inject(ElementRef);
|
|
4659
|
+
this.focused = false;
|
|
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 = () => { };
|
|
4666
|
+
if (this.ngControl) {
|
|
4667
|
+
this.ngControl.valueAccessor = this;
|
|
4668
|
+
}
|
|
4669
|
+
}
|
|
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);
|
|
4705
|
+
});
|
|
4706
|
+
}
|
|
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
|
+
}
|
|
4717
|
+
_onFocus() {
|
|
4718
|
+
if (!this.disabled) {
|
|
4719
|
+
this.focused = true;
|
|
4720
|
+
this._onTouched();
|
|
4721
|
+
this.stateChanges.next();
|
|
4722
|
+
}
|
|
4723
|
+
}
|
|
4724
|
+
_onBlur() {
|
|
4725
|
+
this.focused = false;
|
|
4726
|
+
this.stateChanges.next();
|
|
4727
|
+
}
|
|
4728
|
+
registerOnChange(fn) {
|
|
4729
|
+
this._onChange = fn;
|
|
4730
|
+
}
|
|
4731
|
+
registerOnTouched(fn) {
|
|
4732
|
+
this._onTouched = fn;
|
|
4733
|
+
}
|
|
4734
|
+
setDisabledState(isDisabled) {
|
|
4735
|
+
this.disabled = isDisabled;
|
|
4736
|
+
this.initializeOptions();
|
|
4737
|
+
}
|
|
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
|
+
|
|
4605
5034
|
/** ************************
|
|
4606
5035
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
4607
5036
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -4610,88 +5039,939 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
4610
5039
|
class MonkeyFilterBarComponent {
|
|
4611
5040
|
constructor() {
|
|
4612
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();
|
|
4613
5051
|
this.showPopOver = false;
|
|
5052
|
+
this.showSubmenuPopover = false;
|
|
5053
|
+
this.showFilterInputPopover = false;
|
|
4614
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" }] : []));
|
|
4615
5090
|
this.closePopOver = () => {
|
|
4616
5091
|
this.showPopOver = false;
|
|
4617
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
|
+
}
|
|
4618
5124
|
}
|
|
4619
5125
|
ngAfterContentInit() { }
|
|
4620
|
-
ngOnChanges(changes) {
|
|
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
|
+
}
|
|
4621
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
|
+
*/
|
|
4622
5155
|
onShowPopOver(el) {
|
|
4623
5156
|
this.elementTarget = el.element;
|
|
4624
5157
|
this.showPopOver = true;
|
|
4625
5158
|
}
|
|
4626
|
-
|
|
4627
|
-
|
|
4628
|
-
|
|
4629
|
-
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
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) -->
|
|
4640
5597
|
|
|
4641
5598
|
<ng-template
|
|
4642
|
-
[monkeyPopover]="
|
|
4643
|
-
[monkeyPopoverTarget]="
|
|
4644
|
-
[monkeyPopoverClosed]="
|
|
4645
|
-
monkeyPopoverDir="ltr"
|
|
5599
|
+
[monkeyPopover]="showFilterInputPopover"
|
|
5600
|
+
[monkeyPopoverTarget]="filterInputTarget"
|
|
5601
|
+
[monkeyPopoverClosed]="closeFilterInputPopover"
|
|
5602
|
+
[monkeyPopoverDir]="isEditingActiveFilter ? 'ltr' : 'rt'"
|
|
4646
5603
|
[monkeyPopoverHideHeader]="true"
|
|
4647
5604
|
>
|
|
4648
|
-
<
|
|
4649
|
-
|
|
4650
|
-
|
|
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>
|
|
4651
5680
|
</ng-template>
|
|
4652
|
-
|
|
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"] }] }); }
|
|
4653
5717
|
}
|
|
4654
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
5718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
4655
5719
|
type: Component,
|
|
4656
5720
|
args: [{ selector: 'monkey-filter-bar', imports: [
|
|
5721
|
+
CommonModule,
|
|
4657
5722
|
FormsModule,
|
|
4658
5723
|
ReactiveFormsModule,
|
|
4659
5724
|
MonkeyFormFieldModule,
|
|
4660
|
-
MonkeyFormFieldModule,
|
|
4661
5725
|
MonkeyInputModule,
|
|
4662
5726
|
MonkeyButtonComponent,
|
|
4663
5727
|
UtilIconComponent,
|
|
4664
|
-
MonkeyOptionComponent
|
|
5728
|
+
MonkeyOptionComponent,
|
|
5729
|
+
MonkeyPopoverDirective,
|
|
5730
|
+
MonkeyDateRangeComponent,
|
|
5731
|
+
MonkeyBadgeComponent,
|
|
5732
|
+
MonkeyLabelDirective,
|
|
5733
|
+
MonkeyDividerComponent,
|
|
5734
|
+
MonkeyRadioButtonComponent,
|
|
5735
|
+
MonkeyIconButtonComponent,
|
|
5736
|
+
MonkeyPrefixDirective,
|
|
5737
|
+
MonkeyCheckboxComponent
|
|
4665
5738
|
], template: `
|
|
4666
|
-
<
|
|
4667
|
-
|
|
4668
|
-
|
|
4669
|
-
|
|
4670
|
-
|
|
4671
|
-
|
|
4672
|
-
|
|
4673
|
-
|
|
4674
|
-
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
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) -->
|
|
4678
5841
|
|
|
4679
5842
|
<ng-template
|
|
4680
|
-
[monkeyPopover]="
|
|
4681
|
-
[monkeyPopoverTarget]="
|
|
4682
|
-
[monkeyPopoverClosed]="
|
|
4683
|
-
monkeyPopoverDir="ltr"
|
|
5843
|
+
[monkeyPopover]="showFilterInputPopover"
|
|
5844
|
+
[monkeyPopoverTarget]="filterInputTarget"
|
|
5845
|
+
[monkeyPopoverClosed]="closeFilterInputPopover"
|
|
5846
|
+
[monkeyPopoverDir]="isEditingActiveFilter ? 'ltr' : 'rt'"
|
|
4684
5847
|
[monkeyPopoverHideHeader]="true"
|
|
4685
5848
|
>
|
|
4686
|
-
<
|
|
4687
|
-
|
|
4688
|
-
|
|
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>
|
|
4689
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
|
+
}
|
|
4690
5960
|
`, host: {
|
|
4691
5961
|
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
4692
5962
|
class: 'mecx-filter-bar'
|
|
4693
|
-
}, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .
|
|
4694
|
-
}] }
|
|
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
|
+
************************* */
|
|
4695
5975
|
|
|
4696
5976
|
/** ************************
|
|
4697
5977
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
@@ -4894,13 +6174,13 @@ class MonkeyInputCodeComponent {
|
|
|
4894
6174
|
setDisabledState(isDisabled) {
|
|
4895
6175
|
this.disabled = isDisabled;
|
|
4896
6176
|
}
|
|
4897
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
4898
|
-
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: [
|
|
4899
6179
|
// eslint-disable-next-line no-use-before-define
|
|
4900
6180
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputCodeComponent }
|
|
4901
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"] }] }); }
|
|
4902
6182
|
}
|
|
4903
|
-
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: [{
|
|
4904
6184
|
type: Component,
|
|
4905
6185
|
args: [{ selector: 'monkey-input-code', imports: [FormsModule], host: {
|
|
4906
6186
|
'data-testid': 'monkey-input-code',
|
|
@@ -5074,8 +6354,8 @@ class MonkeyInputDateRangeComponent {
|
|
|
5074
6354
|
// not to do
|
|
5075
6355
|
}
|
|
5076
6356
|
}
|
|
5077
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
5078
|
-
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: [
|
|
5079
6359
|
// eslint-disable-next-line no-use-before-define
|
|
5080
6360
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputDateRangeComponent }
|
|
5081
6361
|
], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -5107,7 +6387,7 @@ class MonkeyInputDateRangeComponent {
|
|
|
5107
6387
|
</ng-template>
|
|
5108
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" }] }); }
|
|
5109
6389
|
}
|
|
5110
|
-
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: [{
|
|
5111
6391
|
type: Component,
|
|
5112
6392
|
args: [{ selector: 'monkey-input-date-range', imports: [
|
|
5113
6393
|
CommonModule,
|
|
@@ -5559,8 +6839,8 @@ class MonkeySelectComponent {
|
|
|
5559
6839
|
// not to do
|
|
5560
6840
|
}
|
|
5561
6841
|
}
|
|
5562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
5563
|
-
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: [
|
|
5564
6844
|
// eslint-disable-next-line no-use-before-define
|
|
5565
6845
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
|
|
5566
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: [
|
|
@@ -5583,7 +6863,7 @@ class MonkeySelectComponent {
|
|
|
5583
6863
|
])
|
|
5584
6864
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5585
6865
|
}
|
|
5586
|
-
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: [{
|
|
5587
6867
|
type: Component,
|
|
5588
6868
|
args: [{ selector: 'monkey-select', imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
5589
6869
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -5705,7 +6985,7 @@ class MonkeyInputPhoneComponent {
|
|
|
5705
6985
|
this._value = null;
|
|
5706
6986
|
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
5707
6987
|
this.idGenerator = inject(IdGenerator);
|
|
5708
|
-
this.countryIsoCode =
|
|
6988
|
+
this.countryIsoCode = injectTokenWithWarning(MECX_COUNTRY_ISO_CODE, 'MECX_COUNTRY_ISO_CODE');
|
|
5709
6989
|
this.locale = inject(LOCALE_ID);
|
|
5710
6990
|
this.id = this.idGenerator.getId('monkey-input-phone-');
|
|
5711
6991
|
this.inputId = this.idGenerator.getId('monkey-input-phone-input-');
|
|
@@ -5864,8 +7144,8 @@ class MonkeyInputPhoneComponent {
|
|
|
5864
7144
|
return 20;
|
|
5865
7145
|
}
|
|
5866
7146
|
}
|
|
5867
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
5868
|
-
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: [
|
|
5869
7149
|
// eslint-disable-next-line no-use-before-define
|
|
5870
7150
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
|
|
5871
7151
|
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -5899,7 +7179,7 @@ class MonkeyInputPhoneComponent {
|
|
|
5899
7179
|
/>
|
|
5900
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 }] }); }
|
|
5901
7181
|
}
|
|
5902
|
-
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: [{
|
|
5903
7183
|
type: Component,
|
|
5904
7184
|
args: [{ selector: 'monkey-input-phone', imports: [
|
|
5905
7185
|
FormsModule,
|
|
@@ -6124,8 +7404,8 @@ class MonkeyInputUploadComponent {
|
|
|
6124
7404
|
};
|
|
6125
7405
|
}
|
|
6126
7406
|
}
|
|
6127
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6128
|
-
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: [
|
|
6129
7409
|
// eslint-disable-next-line no-use-before-define
|
|
6130
7410
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
|
|
6131
7411
|
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -6146,7 +7426,7 @@ class MonkeyInputUploadComponent {
|
|
|
6146
7426
|
}
|
|
6147
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"] }); }
|
|
6148
7428
|
}
|
|
6149
|
-
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: [{
|
|
6150
7430
|
type: Component,
|
|
6151
7431
|
args: [{ selector: 'monkey-input-upload', imports: [], template: `
|
|
6152
7432
|
<div class="mecx-input-upload-value" [class.has-value]="value">
|
|
@@ -6221,10 +7501,10 @@ class MonkeyModalActionsDirective {
|
|
|
6221
7501
|
this.mkAlign = 'end';
|
|
6222
7502
|
this.id = inject(IdGenerator).getId('monkey-modal-actions-');
|
|
6223
7503
|
}
|
|
6224
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6225
|
-
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 }); }
|
|
6226
7506
|
}
|
|
6227
|
-
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: [{
|
|
6228
7508
|
type: Directive,
|
|
6229
7509
|
args: [{
|
|
6230
7510
|
selector: 'monkey-modal-actions, [monkey-modal-actions]',
|
|
@@ -6247,10 +7527,10 @@ class MonkeyModalContentDirective {
|
|
|
6247
7527
|
constructor() {
|
|
6248
7528
|
this.id = inject(IdGenerator).getId('monkey-modal-content-');
|
|
6249
7529
|
}
|
|
6250
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6251
|
-
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 }); }
|
|
6252
7532
|
}
|
|
6253
|
-
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: [{
|
|
6254
7534
|
type: Directive,
|
|
6255
7535
|
args: [{
|
|
6256
7536
|
selector: 'monkey-modal-content, [monkey-modal-content]',
|
|
@@ -6271,10 +7551,10 @@ class MonkeyModalSubtitleDirective {
|
|
|
6271
7551
|
constructor() {
|
|
6272
7552
|
this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
|
|
6273
7553
|
}
|
|
6274
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6275
|
-
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 }); }
|
|
6276
7556
|
}
|
|
6277
|
-
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: [{
|
|
6278
7558
|
type: Directive,
|
|
6279
7559
|
args: [{
|
|
6280
7560
|
selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
|
|
@@ -6295,10 +7575,10 @@ class MonkeyModalTitleDirective {
|
|
|
6295
7575
|
constructor() {
|
|
6296
7576
|
this.id = inject(IdGenerator).getId('monkey-modal-title-');
|
|
6297
7577
|
}
|
|
6298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6299
|
-
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 }); }
|
|
6300
7580
|
}
|
|
6301
|
-
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: [{
|
|
6302
7582
|
type: Directive,
|
|
6303
7583
|
args: [{
|
|
6304
7584
|
selector: 'monkey-modal-title, [monkey-modal-title]',
|
|
@@ -6412,14 +7692,14 @@ class MonkeyModalComponent {
|
|
|
6412
7692
|
this.modalRef?.close();
|
|
6413
7693
|
}, 150);
|
|
6414
7694
|
}
|
|
6415
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6416
|
-
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: `
|
|
6417
7697
|
<div class="mecx-modal-header">
|
|
6418
7698
|
<div class="mecx-modal-header-group">
|
|
6419
7699
|
<div class="mecx-modal-header-title">
|
|
6420
7700
|
@if (modalRef?.icon) {
|
|
6421
7701
|
<div class="mecx-modal-header-icon">
|
|
6422
|
-
<i class="mk-i mk-i-{{modalRef?.icon}}"></i>
|
|
7702
|
+
<i class="mk-i mk-i-{{ modalRef?.icon }}"></i>
|
|
6423
7703
|
</div>
|
|
6424
7704
|
}
|
|
6425
7705
|
<ng-content select="monkey-modal-title"></ng-content>
|
|
@@ -6444,9 +7724,9 @@ class MonkeyModalComponent {
|
|
|
6444
7724
|
<ng-content select="[monkey-modal-content]"></ng-content>
|
|
6445
7725
|
<ng-content select="monkey-modal-actions"></ng-content>
|
|
6446
7726
|
<ng-content select="[monkey-modal-actions]"></ng-content>
|
|
6447
|
-
`, 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", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
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 }); }
|
|
6448
7728
|
}
|
|
6449
|
-
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: [{
|
|
6450
7730
|
type: Component,
|
|
6451
7731
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
|
|
6452
7732
|
<div class="mecx-modal-header">
|
|
@@ -6454,7 +7734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6454
7734
|
<div class="mecx-modal-header-title">
|
|
6455
7735
|
@if (modalRef?.icon) {
|
|
6456
7736
|
<div class="mecx-modal-header-icon">
|
|
6457
|
-
<i class="mk-i mk-i-{{modalRef?.icon}}"></i>
|
|
7737
|
+
<i class="mk-i mk-i-{{ modalRef?.icon }}"></i>
|
|
6458
7738
|
</div>
|
|
6459
7739
|
}
|
|
6460
7740
|
<ng-content select="monkey-modal-title"></ng-content>
|
|
@@ -6530,8 +7810,8 @@ class MonkeyModalConfirmationComponent {
|
|
|
6530
7810
|
onClose() {
|
|
6531
7811
|
this.modalRef.close();
|
|
6532
7812
|
}
|
|
6533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6534
|
-
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: `
|
|
6535
7815
|
<monkey-modal class="modal-confirmation">
|
|
6536
7816
|
<monkey-modal-content>
|
|
6537
7817
|
@if (config.icon) {
|
|
@@ -6549,7 +7829,7 @@ class MonkeyModalConfirmationComponent {
|
|
|
6549
7829
|
</monkey-modal>
|
|
6550
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 }); }
|
|
6551
7831
|
}
|
|
6552
|
-
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: [{
|
|
6553
7833
|
type: Component,
|
|
6554
7834
|
args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
|
|
6555
7835
|
<monkey-modal class="modal-confirmation">
|
|
@@ -6593,8 +7873,8 @@ class MonkeyModalDefaultComponent {
|
|
|
6593
7873
|
onClose() {
|
|
6594
7874
|
this.modalRef.close();
|
|
6595
7875
|
}
|
|
6596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6597
|
-
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: `
|
|
6598
7878
|
<monkey-modal>
|
|
6599
7879
|
<monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
|
|
6600
7880
|
<monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
|
|
@@ -6606,7 +7886,7 @@ class MonkeyModalDefaultComponent {
|
|
|
6606
7886
|
</monkey-modal>
|
|
6607
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"] }] }); }
|
|
6608
7888
|
}
|
|
6609
|
-
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: [{
|
|
6610
7890
|
type: Component,
|
|
6611
7891
|
args: [{
|
|
6612
7892
|
selector: 'monkey-modal-default',
|
|
@@ -6637,8 +7917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6637
7917
|
* MIT Licence
|
|
6638
7918
|
************************* */
|
|
6639
7919
|
class MonkeyModalModule {
|
|
6640
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6641
|
-
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,
|
|
6642
7922
|
MonkeyModalDefaultComponent,
|
|
6643
7923
|
MonkeyModalConfirmationComponent,
|
|
6644
7924
|
MonkeyModalTitleDirective,
|
|
@@ -6649,9 +7929,9 @@ class MonkeyModalModule {
|
|
|
6649
7929
|
MonkeyModalSubtitleDirective,
|
|
6650
7930
|
MonkeyModalContentDirective,
|
|
6651
7931
|
MonkeyModalActionsDirective] }); }
|
|
6652
|
-
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] }); }
|
|
6653
7933
|
}
|
|
6654
|
-
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: [{
|
|
6655
7935
|
type: NgModule,
|
|
6656
7936
|
args: [{
|
|
6657
7937
|
imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent],
|
|
@@ -6806,10 +8086,10 @@ class MonkeyModalService {
|
|
|
6806
8086
|
});
|
|
6807
8087
|
this.openDialogs.splice(0, this.openDialogs.length);
|
|
6808
8088
|
}
|
|
6809
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
6810
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.
|
|
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' }); }
|
|
6811
8091
|
}
|
|
6812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
8092
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyModalService, decorators: [{
|
|
6813
8093
|
type: Injectable,
|
|
6814
8094
|
args: [{ providedIn: 'root' }]
|
|
6815
8095
|
}] });
|
|
@@ -6820,191 +8100,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
6820
8100
|
* MIT Licence
|
|
6821
8101
|
************************* */
|
|
6822
8102
|
|
|
6823
|
-
/** ************************
|
|
6824
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
6825
|
-
* This style guide was developed by Monkey Exchange Team
|
|
6826
|
-
* MIT Licence
|
|
6827
|
-
************************* */
|
|
6828
|
-
class MonkeyRadioButtonComponent {
|
|
6829
|
-
get classes() {
|
|
6830
|
-
return `${this.position} ${this.size}`;
|
|
6831
|
-
}
|
|
6832
|
-
get disabled() {
|
|
6833
|
-
if (this.ngControl && this.ngControl.disabled !== null) {
|
|
6834
|
-
return this.ngControl.disabled;
|
|
6835
|
-
}
|
|
6836
|
-
return this._disabled;
|
|
6837
|
-
}
|
|
6838
|
-
set disabled(value) {
|
|
6839
|
-
this._disabled = value;
|
|
6840
|
-
if (this.focused) {
|
|
6841
|
-
this.focused = false;
|
|
6842
|
-
this.stateChanges.next();
|
|
6843
|
-
}
|
|
6844
|
-
}
|
|
6845
|
-
get required() {
|
|
6846
|
-
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
|
6847
|
-
}
|
|
6848
|
-
set required(value) {
|
|
6849
|
-
this._required = value;
|
|
6850
|
-
this.stateChanges.next();
|
|
6851
|
-
}
|
|
6852
|
-
set value(value) {
|
|
6853
|
-
if (this._value !== value) {
|
|
6854
|
-
this._value = value;
|
|
6855
|
-
this._onChange(value);
|
|
6856
|
-
}
|
|
6857
|
-
}
|
|
6858
|
-
get value() {
|
|
6859
|
-
return this._value;
|
|
6860
|
-
}
|
|
6861
|
-
constructor(changeDetectorRef, formField) {
|
|
6862
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
6863
|
-
this.formField = formField;
|
|
6864
|
-
this.tabIndex = 0;
|
|
6865
|
-
this.onChange = new EventEmitter();
|
|
6866
|
-
this.onSearch = new EventEmitter();
|
|
6867
|
-
this.position = 'horizontal';
|
|
6868
|
-
this.size = 'lg';
|
|
6869
|
-
this._value = null;
|
|
6870
|
-
this._destroyRef = inject(DestroyRef);
|
|
6871
|
-
this.idGenerator = inject(IdGenerator);
|
|
6872
|
-
this.ngControl = inject(NgControl, { self: true, optional: true });
|
|
6873
|
-
this._elementRef = inject(ElementRef);
|
|
6874
|
-
this.focused = false;
|
|
6875
|
-
this._disabled = false;
|
|
6876
|
-
this.id = this.idGenerator.getId('monkey-radiobutton-');
|
|
6877
|
-
this.stateChanges = new Subject();
|
|
6878
|
-
this.type = 'radio-button';
|
|
6879
|
-
this._onChange = () => { };
|
|
6880
|
-
this._onTouched = () => { };
|
|
6881
|
-
if (this.ngControl) {
|
|
6882
|
-
this.ngControl.valueAccessor = this;
|
|
6883
|
-
}
|
|
6884
|
-
}
|
|
6885
|
-
changeSelected() {
|
|
6886
|
-
setTimeout(() => {
|
|
6887
|
-
if (this.options) {
|
|
6888
|
-
this.options.forEach((opt) => {
|
|
6889
|
-
opt.onSelect(opt.value() === this.value);
|
|
6890
|
-
});
|
|
6891
|
-
}
|
|
6892
|
-
this.changeDetectorRef.markForCheck();
|
|
6893
|
-
});
|
|
6894
|
-
}
|
|
6895
|
-
initializeOptions() {
|
|
6896
|
-
setTimeout(() => {
|
|
6897
|
-
this.options?.forEach((option) => {
|
|
6898
|
-
option.type = 'radio';
|
|
6899
|
-
if (!option.action) {
|
|
6900
|
-
option.action = this.selectOption.bind(this, option);
|
|
6901
|
-
}
|
|
6902
|
-
});
|
|
6903
|
-
this.changeDetectorRef.markForCheck();
|
|
6904
|
-
}, 0);
|
|
6905
|
-
}
|
|
6906
|
-
ngAfterContentInit() {
|
|
6907
|
-
this.initializeOptions();
|
|
6908
|
-
this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
|
|
6909
|
-
this.initializeOptions();
|
|
6910
|
-
this.changeSelected();
|
|
6911
|
-
});
|
|
6912
|
-
}
|
|
6913
|
-
selectOption(option) {
|
|
6914
|
-
if (!option.disabled && !this.disabled) {
|
|
6915
|
-
this.value = option.value();
|
|
6916
|
-
this._onChange(this.value);
|
|
6917
|
-
this.onChange.emit(this.value);
|
|
6918
|
-
this.options.forEach((opt) => {
|
|
6919
|
-
opt.onSelect(opt.value() === this.value);
|
|
6920
|
-
});
|
|
6921
|
-
}
|
|
6922
|
-
}
|
|
6923
|
-
writeValue(value) {
|
|
6924
|
-
this.value = value;
|
|
6925
|
-
this.changeSelected();
|
|
6926
|
-
}
|
|
6927
|
-
onContainerClick(event) {
|
|
6928
|
-
if (this.disabled)
|
|
6929
|
-
return;
|
|
6930
|
-
this._elementRef.nativeElement.focus();
|
|
6931
|
-
}
|
|
6932
|
-
_onFocus() {
|
|
6933
|
-
if (!this.disabled) {
|
|
6934
|
-
this.focused = true;
|
|
6935
|
-
this._onTouched();
|
|
6936
|
-
this.stateChanges.next();
|
|
6937
|
-
}
|
|
6938
|
-
}
|
|
6939
|
-
_onBlur() {
|
|
6940
|
-
this.focused = false;
|
|
6941
|
-
this.stateChanges.next();
|
|
6942
|
-
}
|
|
6943
|
-
registerOnChange(fn) {
|
|
6944
|
-
this._onChange = fn;
|
|
6945
|
-
}
|
|
6946
|
-
registerOnTouched(fn) {
|
|
6947
|
-
this._onTouched = fn;
|
|
6948
|
-
}
|
|
6949
|
-
setDisabledState(isDisabled) {
|
|
6950
|
-
this.disabled = isDisabled;
|
|
6951
|
-
this.initializeOptions();
|
|
6952
|
-
}
|
|
6953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", 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: [
|
|
6955
|
-
// eslint-disable-next-line no-use-before-define
|
|
6956
|
-
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
6957
|
-
], 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 }); }
|
|
6958
|
-
}
|
|
6959
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
|
|
6960
|
-
type: Component,
|
|
6961
|
-
args: [{ selector: 'monkey-radiobutton', imports: [ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
6962
|
-
// eslint-disable-next-line no-use-before-define
|
|
6963
|
-
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
6964
|
-
], host: {
|
|
6965
|
-
'data-testid': 'monkey-radiobutton',
|
|
6966
|
-
class: 'mecx-radiobutton',
|
|
6967
|
-
'[class.mecx-disabled]': 'disabled',
|
|
6968
|
-
'[class.mecx-radiobutton-focused]': 'focused',
|
|
6969
|
-
'[attr.id]': 'id',
|
|
6970
|
-
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
6971
|
-
'(focus)': '_onFocus()',
|
|
6972
|
-
'(blur)': '_onBlur()'
|
|
6973
|
-
}, 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"] }]
|
|
6974
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
|
|
6975
|
-
type: Optional
|
|
6976
|
-
}] }], propDecorators: { options: [{
|
|
6977
|
-
type: ContentChildren,
|
|
6978
|
-
args: [MonkeyOptionComponent]
|
|
6979
|
-
}], tabIndex: [{
|
|
6980
|
-
type: Input
|
|
6981
|
-
}], onChange: [{
|
|
6982
|
-
type: Output
|
|
6983
|
-
}], onSearch: [{
|
|
6984
|
-
type: Output
|
|
6985
|
-
}], position: [{
|
|
6986
|
-
type: Input
|
|
6987
|
-
}], size: [{
|
|
6988
|
-
type: Input
|
|
6989
|
-
}], classes: [{
|
|
6990
|
-
type: HostBinding,
|
|
6991
|
-
args: ['class']
|
|
6992
|
-
}], disabled: [{
|
|
6993
|
-
type: Input,
|
|
6994
|
-
args: [{ transform: booleanAttribute }]
|
|
6995
|
-
}], required: [{
|
|
6996
|
-
type: Input,
|
|
6997
|
-
args: [{ transform: booleanAttribute }]
|
|
6998
|
-
}], value: [{
|
|
6999
|
-
type: Input
|
|
7000
|
-
}] } });
|
|
7001
|
-
|
|
7002
|
-
/** ************************
|
|
7003
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
7004
|
-
* This style guide was developed by Monkey Exchange Team
|
|
7005
|
-
* MIT Licence
|
|
7006
|
-
************************* */
|
|
7007
|
-
|
|
7008
8103
|
/** ************************
|
|
7009
8104
|
* Copyright Monkey Exchange. All Rights Reserved
|
|
7010
8105
|
* This style guide was developed by Monkey Exchange Team
|
|
@@ -7040,10 +8135,10 @@ class MonkeySecurityLevelComponent {
|
|
|
7040
8135
|
// eslint-disable-next-line no-self-assign
|
|
7041
8136
|
this.id = this.id;
|
|
7042
8137
|
}
|
|
7043
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7044
|
-
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 }); }
|
|
7045
8140
|
}
|
|
7046
|
-
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: [{
|
|
7047
8142
|
type: Component,
|
|
7048
8143
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [], selector: 'monkey-security-level', host: {
|
|
7049
8144
|
'data-testid': 'monkey-security-level',
|
|
@@ -7086,10 +8181,10 @@ class MonkeyStatusComponent {
|
|
|
7086
8181
|
// eslint-disable-next-line no-self-assign
|
|
7087
8182
|
this.id = this.id;
|
|
7088
8183
|
}
|
|
7089
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7090
|
-
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"] }); }
|
|
7091
8186
|
}
|
|
7092
|
-
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: [{
|
|
7093
8188
|
type: Component,
|
|
7094
8189
|
args: [{ selector: 'monkey-status', imports: [], host: {
|
|
7095
8190
|
'data-testid': 'monkey-status',
|
|
@@ -7132,8 +8227,8 @@ class MonkeyStepComponent {
|
|
|
7132
8227
|
this.hasSubSteps.set(false);
|
|
7133
8228
|
}
|
|
7134
8229
|
}
|
|
7135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7136
|
-
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: `
|
|
7137
8232
|
<div
|
|
7138
8233
|
class="item"
|
|
7139
8234
|
[class.active]="isActive()"
|
|
@@ -7168,7 +8263,7 @@ class MonkeyStepComponent {
|
|
|
7168
8263
|
}
|
|
7169
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"] }] }); }
|
|
7170
8265
|
}
|
|
7171
|
-
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: [{
|
|
7172
8267
|
type: Component,
|
|
7173
8268
|
args: [{ selector: 'monkey-step', standalone: false, template: `
|
|
7174
8269
|
<div
|
|
@@ -7274,10 +8369,10 @@ class MonkeyStepperComponent {
|
|
|
7274
8369
|
}
|
|
7275
8370
|
});
|
|
7276
8371
|
}
|
|
7277
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7278
|
-
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 }); }
|
|
7279
8374
|
}
|
|
7280
|
-
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: [{
|
|
7281
8376
|
type: Component,
|
|
7282
8377
|
args: [{ selector: 'monkey-stepper', standalone: false, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7283
8378
|
'data-testid': 'monkey-stepper',
|
|
@@ -7302,11 +8397,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7302
8397
|
* MIT Licence
|
|
7303
8398
|
************************* */
|
|
7304
8399
|
class MonkeyStepperModule {
|
|
7305
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7306
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
7307
|
-
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 }); }
|
|
7308
8403
|
}
|
|
7309
|
-
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: [{
|
|
7310
8405
|
type: NgModule,
|
|
7311
8406
|
args: [{
|
|
7312
8407
|
declarations: [MonkeyStepperComponent, MonkeyStepComponent],
|
|
@@ -7335,10 +8430,10 @@ class MonkeyPaginationActionComponent {
|
|
|
7335
8430
|
// eslint-disable-next-line no-self-assign
|
|
7336
8431
|
this.id = this.id;
|
|
7337
8432
|
}
|
|
7338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7339
|
-
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 }); }
|
|
7340
8435
|
}
|
|
7341
|
-
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: [{
|
|
7342
8437
|
type: Component,
|
|
7343
8438
|
args: [{ imports: [MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
|
|
7344
8439
|
'data-testid': 'monkey-pagination-action',
|
|
@@ -7380,10 +8475,10 @@ class MonkeyPaginationLabelComponent {
|
|
|
7380
8475
|
// eslint-disable-next-line no-self-assign
|
|
7381
8476
|
this.id = this.id;
|
|
7382
8477
|
}
|
|
7383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7384
|
-
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 }); }
|
|
7385
8480
|
}
|
|
7386
|
-
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: [{
|
|
7387
8482
|
type: Component,
|
|
7388
8483
|
args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
|
|
7389
8484
|
'data-testid': 'monkey-pagination-label',
|
|
@@ -7413,10 +8508,10 @@ class MonkeyPaginationSizeComponent {
|
|
|
7413
8508
|
// eslint-disable-next-line no-self-assign
|
|
7414
8509
|
this.id = this.id;
|
|
7415
8510
|
}
|
|
7416
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7417
|
-
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 }); }
|
|
7418
8513
|
}
|
|
7419
|
-
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: [{
|
|
7420
8515
|
type: Component,
|
|
7421
8516
|
args: [{ imports: [
|
|
7422
8517
|
FormsModule,
|
|
@@ -7528,10 +8623,10 @@ class MonkeyTableComponent {
|
|
|
7528
8623
|
this.stateChanges.emit({ loading });
|
|
7529
8624
|
}
|
|
7530
8625
|
}
|
|
7531
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7532
|
-
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 }); }
|
|
7533
8628
|
}
|
|
7534
|
-
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: [{
|
|
7535
8630
|
type: Component,
|
|
7536
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"] }]
|
|
7537
8632
|
}], propDecorators: { scroll: [{
|
|
@@ -7645,10 +8740,10 @@ class MonkeyColumnChecked {
|
|
|
7645
8740
|
ngOnDestroy() {
|
|
7646
8741
|
this._subscriptions.unsubscribe();
|
|
7647
8742
|
}
|
|
7648
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7649
|
-
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 }); }
|
|
7650
8745
|
}
|
|
7651
|
-
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: [{
|
|
7652
8747
|
type: Directive,
|
|
7653
8748
|
args: [{
|
|
7654
8749
|
selector: '[mkChecked]',
|
|
@@ -7779,10 +8874,10 @@ class MonkeyColumnExpansible {
|
|
|
7779
8874
|
ngOnDestroy() {
|
|
7780
8875
|
this._subscriptions.unsubscribe();
|
|
7781
8876
|
}
|
|
7782
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7783
|
-
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 }); }
|
|
7784
8879
|
}
|
|
7785
|
-
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: [{
|
|
7786
8881
|
type: Directive,
|
|
7787
8882
|
args: [{
|
|
7788
8883
|
selector: '[mkExpansible]',
|
|
@@ -7869,10 +8964,10 @@ class MonkeyColumnSortable {
|
|
|
7869
8964
|
ngOnDestroy() {
|
|
7870
8965
|
this.subscriptions.unsubscribe();
|
|
7871
8966
|
}
|
|
7872
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7873
|
-
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 }); }
|
|
7874
8969
|
}
|
|
7875
|
-
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: [{
|
|
7876
8971
|
type: Directive,
|
|
7877
8972
|
args: [{
|
|
7878
8973
|
selector: '[mkSortable]',
|
|
@@ -7906,10 +9001,10 @@ class MonkeyColumnStick {
|
|
|
7906
9001
|
constructor() {
|
|
7907
9002
|
this.position = 'right';
|
|
7908
9003
|
}
|
|
7909
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7910
|
-
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 }); }
|
|
7911
9006
|
}
|
|
7912
|
-
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: [{
|
|
7913
9008
|
type: Directive,
|
|
7914
9009
|
args: [{
|
|
7915
9010
|
selector: '[mkStick]',
|
|
@@ -7930,8 +9025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
7930
9025
|
* MIT Licence
|
|
7931
9026
|
************************* */
|
|
7932
9027
|
class MonkeyTableModule {
|
|
7933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
7934
|
-
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,
|
|
7935
9030
|
MonkeyColumnStick,
|
|
7936
9031
|
MonkeyColumnChecked,
|
|
7937
9032
|
MonkeyColumnSortable,
|
|
@@ -7944,10 +9039,10 @@ class MonkeyTableModule {
|
|
|
7944
9039
|
MonkeyColumnChecked,
|
|
7945
9040
|
MonkeyColumnSortable,
|
|
7946
9041
|
MonkeyColumnExpansible] }); }
|
|
7947
|
-
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,
|
|
7948
9043
|
MonkeyPaginationSizeComponent] }); }
|
|
7949
9044
|
}
|
|
7950
|
-
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: [{
|
|
7951
9046
|
type: NgModule,
|
|
7952
9047
|
args: [{
|
|
7953
9048
|
imports: [
|
|
@@ -8027,10 +9122,10 @@ class MonkeyTabLinkDirective {
|
|
|
8027
9122
|
}
|
|
8028
9123
|
}
|
|
8029
9124
|
}
|
|
8030
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8031
|
-
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 }); }
|
|
8032
9127
|
}
|
|
8033
|
-
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: [{
|
|
8034
9129
|
type: Directive,
|
|
8035
9130
|
args: [{
|
|
8036
9131
|
selector: '[monkey-tab-link]',
|
|
@@ -8069,14 +9164,14 @@ class MonkeyTabComponent {
|
|
|
8069
9164
|
this.onClick.emit(this.value);
|
|
8070
9165
|
}
|
|
8071
9166
|
}
|
|
8072
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8073
|
-
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: `
|
|
8074
9169
|
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
8075
9170
|
<ng-content />
|
|
8076
9171
|
</button>
|
|
8077
9172
|
`, isInline: true, styles: [":host{display:block}\n"] }); }
|
|
8078
9173
|
}
|
|
8079
|
-
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: [{
|
|
8080
9175
|
type: Component,
|
|
8081
9176
|
args: [{ selector: 'monkey-tab', standalone: false, template: `
|
|
8082
9177
|
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
@@ -8183,8 +9278,8 @@ class MonkeyTabsComponent {
|
|
|
8183
9278
|
ngOnDestroy() {
|
|
8184
9279
|
this.resizeObserver?.disconnect();
|
|
8185
9280
|
}
|
|
8186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8187
|
-
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: `
|
|
8188
9283
|
@if (hasScroll) {
|
|
8189
9284
|
<button
|
|
8190
9285
|
class="scroll-arrow scroll-arrow-left"
|
|
@@ -8219,7 +9314,7 @@ class MonkeyTabsComponent {
|
|
|
8219
9314
|
}
|
|
8220
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 }); }
|
|
8221
9316
|
}
|
|
8222
|
-
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: [{
|
|
8223
9318
|
type: Component,
|
|
8224
9319
|
args: [{ selector: 'monkey-tabs', standalone: false, encapsulation: ViewEncapsulation.None, template: `
|
|
8225
9320
|
@if (hasScroll) {
|
|
@@ -8285,11 +9380,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
8285
9380
|
* MIT Licence
|
|
8286
9381
|
************************* */
|
|
8287
9382
|
class MonkeyTabsModule {
|
|
8288
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8289
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.
|
|
8290
|
-
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 }); }
|
|
8291
9386
|
}
|
|
8292
|
-
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: [{
|
|
8293
9388
|
type: NgModule,
|
|
8294
9389
|
args: [{
|
|
8295
9390
|
declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective],
|
|
@@ -8331,10 +9426,10 @@ class MonkeyToastComponent {
|
|
|
8331
9426
|
this.onClose.emit(this.id);
|
|
8332
9427
|
}
|
|
8333
9428
|
}
|
|
8334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8335
|
-
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 }); }
|
|
8336
9431
|
}
|
|
8337
|
-
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: [{
|
|
8338
9433
|
type: Component,
|
|
8339
9434
|
args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
8340
9435
|
'data-testid': 'monkey-toast',
|
|
@@ -8410,10 +9505,10 @@ class MonkeyToggleComponent {
|
|
|
8410
9505
|
this._checked = !this._checked;
|
|
8411
9506
|
}
|
|
8412
9507
|
}
|
|
8413
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8414
|
-
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"] }] }); }
|
|
8415
9510
|
}
|
|
8416
|
-
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: [{
|
|
8417
9512
|
type: Component,
|
|
8418
9513
|
args: [{ selector: 'monkey-toggle', imports: [CommonModule], host: {
|
|
8419
9514
|
'data-testid': 'monkey-toggle',
|
|
@@ -8457,10 +9552,10 @@ class MonkeyToggleLineButtonComponent {
|
|
|
8457
9552
|
this.disabled = false;
|
|
8458
9553
|
this.onChange = new EventEmitter();
|
|
8459
9554
|
}
|
|
8460
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8461
|
-
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 }); }
|
|
8462
9557
|
}
|
|
8463
|
-
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: [{
|
|
8464
9559
|
type: Component,
|
|
8465
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"] }]
|
|
8466
9561
|
}], propDecorators: { disabled: [{
|
|
@@ -8527,10 +9622,10 @@ class MonkeyToggleLineComponent {
|
|
|
8527
9622
|
ngOnDestroy() {
|
|
8528
9623
|
this.subscriptions.unsubscribe();
|
|
8529
9624
|
}
|
|
8530
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8531
|
-
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 }); }
|
|
8532
9627
|
}
|
|
8533
|
-
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: [{
|
|
8534
9629
|
type: Component,
|
|
8535
9630
|
args: [{ selector: 'monkey-toggle-line', imports: [], encapsulation: ViewEncapsulation.None, host: {
|
|
8536
9631
|
'data-testid': 'monkey-toggle-line',
|
|
@@ -8591,10 +9686,10 @@ class MonkeyTooltipComponent {
|
|
|
8591
9686
|
this.afterClose.emit(true);
|
|
8592
9687
|
}
|
|
8593
9688
|
}
|
|
8594
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8595
|
-
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"] }] }); }
|
|
8596
9691
|
}
|
|
8597
|
-
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: [{
|
|
8598
9693
|
type: Component,
|
|
8599
9694
|
args: [{ selector: 'monkey-tooltip', imports: [NgTemplateOutlet], host: {
|
|
8600
9695
|
'data-testid': 'monkey-tooltip',
|
|
@@ -8776,10 +9871,10 @@ class MonkeyTooltipDirective {
|
|
|
8776
9871
|
onScroll() {
|
|
8777
9872
|
this.hide();
|
|
8778
9873
|
}
|
|
8779
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8780
|
-
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 }); }
|
|
8781
9876
|
}
|
|
8782
|
-
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: [{
|
|
8783
9878
|
type: Directive,
|
|
8784
9879
|
args: [{
|
|
8785
9880
|
selector: '[monkeyTooltip]',
|
|
@@ -8844,8 +9939,8 @@ class MonkeyUserProfileButtonComponent {
|
|
|
8844
9939
|
event.preventDefault();
|
|
8845
9940
|
this.open = true;
|
|
8846
9941
|
}
|
|
8847
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8848
|
-
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: `
|
|
8849
9944
|
<monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
|
|
8850
9945
|
<div class="lh-24 text-truncate flex-grow-1 fs-xxs text-gray-900">
|
|
8851
9946
|
{{ name }}
|
|
@@ -8865,7 +9960,7 @@ class MonkeyUserProfileButtonComponent {
|
|
|
8865
9960
|
</ng-template>
|
|
8866
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 }); }
|
|
8867
9962
|
}
|
|
8868
|
-
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: [{
|
|
8869
9964
|
type: Component,
|
|
8870
9965
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyAvatarComponent, UtilIconComponent, MonkeyPopoverDirective], selector: 'monkey-user-profile-button', template: `
|
|
8871
9966
|
<monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
|
|
@@ -8933,15 +10028,15 @@ class MonkeyUserProfileComponent {
|
|
|
8933
10028
|
// eslint-disable-next-line no-self-assign
|
|
8934
10029
|
this.id = this.id;
|
|
8935
10030
|
}
|
|
8936
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8937
|
-
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: `
|
|
8938
10033
|
<div class="icon">
|
|
8939
10034
|
<i class="mk-i mk-i-user-profile {{size()}}"></i>
|
|
8940
10035
|
</div>
|
|
8941
10036
|
<div class="text-truncate">{{ email() }}</div>
|
|
8942
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"] }); }
|
|
8943
10038
|
}
|
|
8944
|
-
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: [{
|
|
8945
10040
|
type: Component,
|
|
8946
10041
|
args: [{ selector: 'monkey-user-profile', template: `
|
|
8947
10042
|
<div class="icon">
|
|
@@ -8993,8 +10088,8 @@ class MonkeyPassNumberComponent {
|
|
|
8993
10088
|
this.onChange.emit(this.selected);
|
|
8994
10089
|
}
|
|
8995
10090
|
}
|
|
8996
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
8997
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
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: `
|
|
8998
10093
|
<div class="pin-selected">
|
|
8999
10094
|
@for (input of [0, 1, 2, 3]; track input) {
|
|
9000
10095
|
<div class="pin-input">
|
|
@@ -9016,7 +10111,7 @@ class MonkeyPassNumberComponent {
|
|
|
9016
10111
|
</div>
|
|
9017
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"] }); }
|
|
9018
10113
|
}
|
|
9019
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
10114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
|
|
9020
10115
|
type: Component,
|
|
9021
10116
|
args: [{ selector: 'monkey-pass-number', imports: [], template: `
|
|
9022
10117
|
<div class="pin-selected">
|
|
@@ -9104,8 +10199,8 @@ class MonkeyPassSecretNumberComponent {
|
|
|
9104
10199
|
this.onChange.emit(this.getPinPassword());
|
|
9105
10200
|
}
|
|
9106
10201
|
}
|
|
9107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
9108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.
|
|
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: `
|
|
9109
10204
|
<div class="pin-selected">
|
|
9110
10205
|
@for (input of [0, 1, 2, 3]; track input) {
|
|
9111
10206
|
<div class="pin-input" [class.filled]="selected[input]"></div>
|
|
@@ -9123,7 +10218,7 @@ class MonkeyPassSecretNumberComponent {
|
|
|
9123
10218
|
</div>
|
|
9124
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" }] }); }
|
|
9125
10220
|
}
|
|
9126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.
|
|
10221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
|
|
9127
10222
|
type: Component,
|
|
9128
10223
|
args: [{ selector: 'monkey-pass-secret-number', imports: [AsyncPipe], template: `
|
|
9129
10224
|
<div class="pin-selected">
|
|
@@ -9212,10 +10307,10 @@ class MonkeyBadgeDirective {
|
|
|
9212
10307
|
renderer.removeStyle(el.nativeElement, 'position');
|
|
9213
10308
|
this.badgeEl = null;
|
|
9214
10309
|
}
|
|
9215
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.
|
|
9216
|
-
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 }); }
|
|
9217
10312
|
}
|
|
9218
|
-
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: [{
|
|
9219
10314
|
type: Directive,
|
|
9220
10315
|
args: [{
|
|
9221
10316
|
selector: '[monkeyBadge]'
|
|
@@ -9244,5 +10339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
9244
10339
|
* Generated bundle index. Do not edit.
|
|
9245
10340
|
*/
|
|
9246
10341
|
|
|
9247
|
-
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, 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 };
|
|
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 };
|
|
9248
10343
|
//# sourceMappingURL=monkey-style-guide.mjs.map
|