monkey-style-guide-v2 0.0.126 → 0.0.127
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/scss/autocomplete/_index.scss +0 -1
- package/assets/scss/autocomplete/_styles.scss +0 -1
- package/assets/scss/directives/_badge.scss +2 -3
- package/assets/scss/directives/_index.scss +0 -1
- package/assets/scss/directives/_styles.scss +0 -1
- package/assets/scss/input/_index.scss +0 -1
- package/assets/scss/input/_styles.scss +0 -1
- package/assets/scss/partials/_helper-classes.scss +0 -1
- package/assets/scss/partials/_scrollbars.scss +0 -1
- package/assets/scss/partials/_skeleton-loading.scss +0 -1
- package/assets/scss/table/_index.scss +0 -1
- package/assets/scss/table/_styles.scss +0 -1
- package/assets/scss/typography/_index.scss +0 -1
- package/fesm2022/monkey-style-guide-v2.mjs +556 -532
- package/fesm2022/monkey-style-guide-v2.mjs.map +1 -1
- package/monkey-style-guide-v2-0.0.127.tgz +0 -0
- package/package.json +10 -10
- package/{index.d.ts → types/monkey-style-guide-v2.d.ts} +63 -24
- package/monkey-style-guide-v2-0.0.126.tgz +0 -0
|
@@ -4,13 +4,13 @@ import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
|
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
5
|
import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, effect, HostListener, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
|
|
6
6
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i1$1 from '@angular/forms';
|
|
8
8
|
import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
9
9
|
import { filter, of, map, BehaviorSubject, firstValueFrom, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
|
|
10
|
-
import * as i1$
|
|
10
|
+
import * as i1$2 from '@angular/cdk/overlay';
|
|
11
11
|
import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
|
|
12
12
|
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
13
|
-
import * as i1$
|
|
13
|
+
import * as i1$3 from '@angular/router';
|
|
14
14
|
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
|
|
15
15
|
import { HttpClient } from '@angular/common/http';
|
|
16
16
|
import { format, parseISO, addYears, subYears, subMonths, addMonths, getMonth, getYear, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameMonth, isBefore, isAfter, isToday, addDays, isWithinInterval, subDays } from 'date-fns';
|
|
@@ -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: "
|
|
35
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
34
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
35
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IdGenerator, providedIn: 'root' }); }
|
|
36
36
|
}
|
|
37
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
37
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: IdGenerator, decorators: [{
|
|
38
38
|
type: Injectable,
|
|
39
39
|
args: [{ providedIn: 'root' }]
|
|
40
40
|
}] });
|
|
@@ -85,8 +85,8 @@ class UtilIconComponent {
|
|
|
85
85
|
constructor() {
|
|
86
86
|
this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
87
87
|
}
|
|
88
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
88
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UtilIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
89
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: UtilIconComponent, isStandalone: true, selector: "util-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
90
90
|
@switch (name()) {
|
|
91
91
|
@case ('clear') {
|
|
92
92
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
|
|
@@ -342,7 +342,7 @@ class UtilIconComponent {
|
|
|
342
342
|
}
|
|
343
343
|
`, isInline: true, styles: [":host{display:flex;background-color:transparent}\n"] }); }
|
|
344
344
|
}
|
|
345
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UtilIconComponent, decorators: [{
|
|
346
346
|
type: Component,
|
|
347
347
|
args: [{ selector: 'util-icon', template: `
|
|
348
348
|
@switch (name()) {
|
|
@@ -633,8 +633,8 @@ class MonkeyAccordionComponent {
|
|
|
633
633
|
return;
|
|
634
634
|
this.open = !this.open;
|
|
635
635
|
}
|
|
636
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
637
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
636
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n <div class=\"title\">\n @if (titleRef) {\n <ng-container *ngTemplateOutlet=\"titleRef\" />\n } @else {\n {{ titleStr }}\n }\n </div>\n <util-icon class=\"icon\" name=\"arrowDown\" [class.rotated]=\"open\" />\n</div>\n<div class=\"content-wrapper\">\n @if (open) {\n <div [@content]>\n <div class=\"content\">\n <ng-content />\n </div>\n </div>\n }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{overflow:hidden}:host .content-wrapper .content{border-top:1px solid var(--mecx-color-gray-200);padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
|
|
638
638
|
trigger('content', [
|
|
639
639
|
state('void', style({
|
|
640
640
|
height: '0px'
|
|
@@ -652,7 +652,7 @@ class MonkeyAccordionComponent {
|
|
|
652
652
|
])
|
|
653
653
|
] }); }
|
|
654
654
|
}
|
|
655
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
655
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
|
|
656
656
|
type: Component,
|
|
657
657
|
args: [{ selector: 'monkey-accordion', imports: [CommonModule, UtilIconComponent], host: {
|
|
658
658
|
'data-testid': 'monkey-accordion',
|
|
@@ -717,21 +717,25 @@ class MonkeyActionBarComponent {
|
|
|
717
717
|
// eslint-disable-next-line no-self-assign
|
|
718
718
|
this.id = this.id;
|
|
719
719
|
}
|
|
720
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
721
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
720
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonkeyActionBarComponent, isStandalone: true, selector: "monkey-action-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-action-bar" }, properties: { "attr.id": "id", "id": "id", "class.open": "open()", "class": "this.classes" } }, ngImport: i0, template: `@if (open()) {
|
|
722
|
+
@if (label(); as lb) {
|
|
723
|
+
<span style="font-size: 13px" data-testid="label">
|
|
724
|
+
{{ lb }}
|
|
725
|
+
</span>
|
|
726
|
+
}
|
|
725
727
|
|
|
726
728
|
<ng-content></ng-content>
|
|
727
|
-
}`, 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
|
|
729
|
+
}`, 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 }); }
|
|
728
730
|
}
|
|
729
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyActionBarComponent, decorators: [{
|
|
730
732
|
type: Component,
|
|
731
|
-
args: [{ encapsulation: ViewEncapsulation.None,
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
733
|
+
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-action-bar', template: `@if (open()) {
|
|
734
|
+
@if (label(); as lb) {
|
|
735
|
+
<span style="font-size: 13px" data-testid="label">
|
|
736
|
+
{{ lb }}
|
|
737
|
+
</span>
|
|
738
|
+
}
|
|
735
739
|
|
|
736
740
|
<ng-content></ng-content>
|
|
737
741
|
}`, host: {
|
|
@@ -739,7 +743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
739
743
|
'[attr.id]': 'id',
|
|
740
744
|
'[id]': 'id',
|
|
741
745
|
'[class.open]': 'open()'
|
|
742
|
-
}, 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
|
|
746
|
+
}, 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"] }]
|
|
743
747
|
}], ctorParameters: () => [], propDecorators: { classes: [{
|
|
744
748
|
type: HostBinding,
|
|
745
749
|
args: ['class']
|
|
@@ -782,12 +786,12 @@ class MonkeyIconComponent {
|
|
|
782
786
|
throw new Error('monkey-icon must have icon input');
|
|
783
787
|
}
|
|
784
788
|
}
|
|
785
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
789
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
790
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
787
791
|
}
|
|
788
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyIconComponent, decorators: [{
|
|
789
793
|
type: Component,
|
|
790
|
-
args: [{ selector: 'monkey-icon', imports: [
|
|
794
|
+
args: [{ selector: 'monkey-icon', imports: [], template: '', encapsulation: ViewEncapsulation.None, host: {
|
|
791
795
|
'[class]': `_icon+' '+size`,
|
|
792
796
|
'[attr.id]': 'id',
|
|
793
797
|
'[id]': 'id'
|
|
@@ -838,10 +842,10 @@ class MonkeyAlertComponent {
|
|
|
838
842
|
};
|
|
839
843
|
return typeIcons[type];
|
|
840
844
|
}
|
|
841
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
842
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
845
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
846
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\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"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
843
847
|
}
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
|
|
845
849
|
type: Component,
|
|
846
850
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyIconComponent], selector: 'monkey-alert', host: {
|
|
847
851
|
'data-testid': 'monkey-alert',
|
|
@@ -899,19 +903,18 @@ class MonkeyPopoverContentComponent {
|
|
|
899
903
|
isTemplate(value) {
|
|
900
904
|
return value instanceof TemplateRef;
|
|
901
905
|
}
|
|
902
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
903
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
906
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
907
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
|
|
904
908
|
<div class="mecx-popover-container">
|
|
905
909
|
@if (!hideHeader) {
|
|
906
910
|
<div class="mecx-popover-header">
|
|
907
911
|
@if (title) {
|
|
908
912
|
<div>
|
|
909
|
-
|
|
913
|
+
@if (isTemplate(title)) {
|
|
910
914
|
<ng-container *ngTemplateOutlet="title"></ng-container>
|
|
911
|
-
|
|
912
|
-
<ng-template #stringTitle>
|
|
915
|
+
} @else {
|
|
913
916
|
{{ title }}
|
|
914
|
-
|
|
917
|
+
}
|
|
915
918
|
</div>
|
|
916
919
|
}
|
|
917
920
|
|
|
@@ -926,19 +929,20 @@ class MonkeyPopoverContentComponent {
|
|
|
926
929
|
</div>
|
|
927
930
|
|
|
928
931
|
@if (!hideActions) {
|
|
929
|
-
|
|
930
|
-
<
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
932
|
+
@if (actions) {
|
|
933
|
+
<div class="mecx-popover-actions">
|
|
934
|
+
@if (isTemplate(actions)) {
|
|
935
|
+
<ng-container *ngTemplateOutlet="actions"></ng-container>
|
|
936
|
+
} @else {
|
|
937
|
+
<span>{{ actions }}</span>
|
|
938
|
+
}
|
|
939
|
+
</div>
|
|
940
|
+
}
|
|
937
941
|
}
|
|
938
942
|
</div>
|
|
939
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.
|
|
943
|
+
`, 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"] }] }); }
|
|
940
944
|
}
|
|
941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
|
|
942
946
|
type: Component,
|
|
943
947
|
args: [{
|
|
944
948
|
selector: 'monkey-popover-content',
|
|
@@ -949,12 +953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
949
953
|
<div class="mecx-popover-header">
|
|
950
954
|
@if (title) {
|
|
951
955
|
<div>
|
|
952
|
-
|
|
956
|
+
@if (isTemplate(title)) {
|
|
953
957
|
<ng-container *ngTemplateOutlet="title"></ng-container>
|
|
954
|
-
|
|
955
|
-
<ng-template #stringTitle>
|
|
958
|
+
} @else {
|
|
956
959
|
{{ title }}
|
|
957
|
-
|
|
960
|
+
}
|
|
958
961
|
</div>
|
|
959
962
|
}
|
|
960
963
|
|
|
@@ -969,14 +972,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
969
972
|
</div>
|
|
970
973
|
|
|
971
974
|
@if (!hideActions) {
|
|
972
|
-
|
|
973
|
-
<
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
975
|
+
@if (actions) {
|
|
976
|
+
<div class="mecx-popover-actions">
|
|
977
|
+
@if (isTemplate(actions)) {
|
|
978
|
+
<ng-container *ngTemplateOutlet="actions"></ng-container>
|
|
979
|
+
} @else {
|
|
980
|
+
<span>{{ actions }}</span>
|
|
981
|
+
}
|
|
982
|
+
</div>
|
|
983
|
+
}
|
|
980
984
|
}
|
|
981
985
|
</div>
|
|
982
986
|
`
|
|
@@ -1200,10 +1204,10 @@ class MonkeyPopoverDirective {
|
|
|
1200
1204
|
this._resizeObserver.observe(this._componentRef.location.nativeElement);
|
|
1201
1205
|
}
|
|
1202
1206
|
}
|
|
1203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1204
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
1207
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1208
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.6", 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 }); }
|
|
1205
1209
|
}
|
|
1206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
|
|
1207
1211
|
type: Directive,
|
|
1208
1212
|
args: [{
|
|
1209
1213
|
selector: '[monkeyPopover]'
|
|
@@ -1311,10 +1315,10 @@ class MonkeyEcxAddressService {
|
|
|
1311
1315
|
return this.mappingData(resp.places);
|
|
1312
1316
|
}));
|
|
1313
1317
|
}
|
|
1314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1315
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyEcxAddressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1319
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyEcxAddressService, providedIn: 'root' }); }
|
|
1316
1320
|
}
|
|
1317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyEcxAddressService, decorators: [{
|
|
1318
1322
|
type: Injectable,
|
|
1319
1323
|
args: [{ providedIn: 'root' }]
|
|
1320
1324
|
}] });
|
|
@@ -1541,10 +1545,10 @@ class MonkeyDictionaryService {
|
|
|
1541
1545
|
return data[locale]?.[key] ?? null;
|
|
1542
1546
|
}));
|
|
1543
1547
|
}
|
|
1544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1545
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1548
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1549
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
|
|
1546
1550
|
}
|
|
1547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
|
|
1548
1552
|
type: Injectable,
|
|
1549
1553
|
args: [{
|
|
1550
1554
|
providedIn: 'root'
|
|
@@ -1570,10 +1574,10 @@ class MonkeyStepperService {
|
|
|
1570
1574
|
return new Map(items).set(id, step);
|
|
1571
1575
|
});
|
|
1572
1576
|
}
|
|
1573
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1574
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1578
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperService, providedIn: 'root' }); }
|
|
1575
1579
|
}
|
|
1576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperService, decorators: [{
|
|
1577
1581
|
type: Injectable,
|
|
1578
1582
|
args: [{
|
|
1579
1583
|
providedIn: 'root'
|
|
@@ -1658,10 +1662,10 @@ class MonkeyToastService {
|
|
|
1658
1662
|
}
|
|
1659
1663
|
return componentRef.instance;
|
|
1660
1664
|
}
|
|
1661
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1662
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1665
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1666
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
|
|
1663
1667
|
}
|
|
1664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1668
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToastService, decorators: [{
|
|
1665
1669
|
type: Injectable,
|
|
1666
1670
|
args: [{
|
|
1667
1671
|
providedIn: 'root'
|
|
@@ -1680,10 +1684,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1680
1684
|
* MIT Licence
|
|
1681
1685
|
************************* */
|
|
1682
1686
|
class MonkeyFormFieldControl {
|
|
1683
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1684
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1687
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1688
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyFormFieldControl, isStandalone: true, ngImport: i0 }); }
|
|
1685
1689
|
}
|
|
1686
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1690
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldControl, decorators: [{
|
|
1687
1691
|
type: Directive
|
|
1688
1692
|
}] });
|
|
1689
1693
|
|
|
@@ -1710,10 +1714,10 @@ class MonkeyDisplayDirective {
|
|
|
1710
1714
|
this.fallbackText = await firstValueFrom(this.i18nDictionary);
|
|
1711
1715
|
});
|
|
1712
1716
|
}
|
|
1713
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1714
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1717
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDisplayDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1718
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: MonkeyDisplayDirective, isStandalone: true, selector: "monkey-display", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
1715
1719
|
}
|
|
1716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDisplayDirective, decorators: [{
|
|
1717
1721
|
type: Directive,
|
|
1718
1722
|
args: [{
|
|
1719
1723
|
selector: 'monkey-display'
|
|
@@ -1726,10 +1730,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1726
1730
|
* MIT Licence
|
|
1727
1731
|
************************* */
|
|
1728
1732
|
class MonkeyErrorDirective {
|
|
1729
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1730
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1734
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyErrorDirective, isStandalone: true, selector: "monkey-error", ngImport: i0 }); }
|
|
1731
1735
|
}
|
|
1732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
|
|
1733
1737
|
type: Directive,
|
|
1734
1738
|
args: [{
|
|
1735
1739
|
selector: 'monkey-error'
|
|
@@ -1742,10 +1746,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1742
1746
|
* MIT Licence
|
|
1743
1747
|
************************* */
|
|
1744
1748
|
class MonkeyHelperDirective {
|
|
1745
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1746
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1749
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1750
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyHelperDirective, isStandalone: true, selector: "monkey-helper", ngImport: i0 }); }
|
|
1747
1751
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1752
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
|
|
1749
1753
|
type: Directive,
|
|
1750
1754
|
args: [{
|
|
1751
1755
|
selector: 'monkey-helper'
|
|
@@ -1758,10 +1762,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1758
1762
|
* MIT Licence
|
|
1759
1763
|
************************* */
|
|
1760
1764
|
class MonkeyInfoDirective {
|
|
1761
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1762
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1765
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1766
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyInfoDirective, isStandalone: true, selector: "monkey-info", ngImport: i0 }); }
|
|
1763
1767
|
}
|
|
1764
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
|
|
1765
1769
|
type: Directive,
|
|
1766
1770
|
args: [{
|
|
1767
1771
|
selector: 'monkey-info'
|
|
@@ -1774,10 +1778,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1774
1778
|
* MIT Licence
|
|
1775
1779
|
************************* */
|
|
1776
1780
|
class MonkeyLabelDirective {
|
|
1777
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1778
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1782
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyLabelDirective, isStandalone: true, selector: "monkey-label", ngImport: i0 }); }
|
|
1779
1783
|
}
|
|
1780
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
|
|
1781
1785
|
type: Directive,
|
|
1782
1786
|
args: [{
|
|
1783
1787
|
selector: 'monkey-label'
|
|
@@ -1790,10 +1794,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1790
1794
|
* MIT Licence
|
|
1791
1795
|
************************* */
|
|
1792
1796
|
class MonkeyPrefixDirective {
|
|
1793
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1794
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1797
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1798
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyPrefixDirective, isStandalone: true, selector: "monkey-prefix", ngImport: i0 }); }
|
|
1795
1799
|
}
|
|
1796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
|
|
1797
1801
|
type: Directive,
|
|
1798
1802
|
args: [{
|
|
1799
1803
|
selector: 'monkey-prefix'
|
|
@@ -1822,10 +1826,10 @@ class MonkeySuffixDirective {
|
|
|
1822
1826
|
this.action(event);
|
|
1823
1827
|
}
|
|
1824
1828
|
}
|
|
1825
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1826
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1830
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeySuffixDirective, isStandalone: true, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
|
|
1827
1831
|
}
|
|
1828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
|
|
1829
1833
|
type: Directive,
|
|
1830
1834
|
args: [{
|
|
1831
1835
|
selector: 'monkey-suffix',
|
|
@@ -2114,10 +2118,10 @@ class MonkeyFormFieldComponent {
|
|
|
2114
2118
|
this.control.onContainerClick(event);
|
|
2115
2119
|
}, 0);
|
|
2116
2120
|
}
|
|
2117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, 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()", "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:center}.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}.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 }); }
|
|
2119
2123
|
}
|
|
2120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2121
2125
|
type: Component,
|
|
2122
2126
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-form-field', exportAs: 'monkeyFormField', host: {
|
|
2123
2127
|
class: 'mecx-form-field',
|
|
@@ -2128,7 +2132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2128
2132
|
'[attr.id]': 'id',
|
|
2129
2133
|
'[id]': 'id',
|
|
2130
2134
|
'[class]': 'size'
|
|
2131
|
-
}, 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:center}.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}.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
|
|
2135
|
+
}, 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:center}.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}.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"] }]
|
|
2132
2136
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2133
2137
|
type: Input
|
|
2134
2138
|
}], hideAction: [{
|
|
@@ -2150,11 +2154,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2150
2154
|
* MIT Licence
|
|
2151
2155
|
************************* */
|
|
2152
2156
|
class MonkeyFormFieldModule {
|
|
2153
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2154
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2155
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2158
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [CommonModule, UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
|
|
2159
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldModule, imports: [CommonModule] }); }
|
|
2156
2160
|
}
|
|
2157
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
|
|
2158
2162
|
type: NgModule,
|
|
2159
2163
|
args: [{
|
|
2160
2164
|
imports: [CommonModule, UtilIconComponent],
|
|
@@ -2175,15 +2179,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2175
2179
|
* MIT Licence
|
|
2176
2180
|
************************* */
|
|
2177
2181
|
class MonkeyOptionComponent {
|
|
2178
|
-
constructor() {
|
|
2179
|
-
this.idGenerator = inject(IdGenerator);
|
|
2180
|
-
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
2181
|
-
this.disabled = false;
|
|
2182
|
-
this.type = 'select';
|
|
2183
|
-
this.selected = false;
|
|
2184
|
-
this.tabIndex = 0;
|
|
2185
|
-
this.id = this.idGenerator.getId('mecx-option-');
|
|
2186
|
-
}
|
|
2187
2182
|
get displayContent() {
|
|
2188
2183
|
return (this._content?.nativeElement.textContent || '').trim();
|
|
2189
2184
|
}
|
|
@@ -2196,6 +2191,22 @@ class MonkeyOptionComponent {
|
|
|
2196
2191
|
this.action?.();
|
|
2197
2192
|
}
|
|
2198
2193
|
}
|
|
2194
|
+
constructor() {
|
|
2195
|
+
this.idGenerator = inject(IdGenerator);
|
|
2196
|
+
this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
|
|
2197
|
+
this.disabled = false;
|
|
2198
|
+
this.type = 'select';
|
|
2199
|
+
this.selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
|
|
2200
|
+
this.tabIndex = 0;
|
|
2201
|
+
this.isSelected = computed(() => {
|
|
2202
|
+
return this._selectedState();
|
|
2203
|
+
}, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
|
|
2204
|
+
this.id = this.idGenerator.getId('mecx-option-');
|
|
2205
|
+
this._selectedState = signal(false, ...(ngDevMode ? [{ debugName: "_selectedState" }] : []));
|
|
2206
|
+
effect(() => {
|
|
2207
|
+
this._selectedState.set(this.selected());
|
|
2208
|
+
});
|
|
2209
|
+
}
|
|
2199
2210
|
onClick(event) {
|
|
2200
2211
|
this.handleAction(event);
|
|
2201
2212
|
}
|
|
@@ -2205,19 +2216,22 @@ class MonkeyOptionComponent {
|
|
|
2205
2216
|
this.handleAction(event);
|
|
2206
2217
|
}
|
|
2207
2218
|
}
|
|
2208
|
-
|
|
2209
|
-
|
|
2219
|
+
onSelect(select) {
|
|
2220
|
+
this._selectedState.set(select);
|
|
2221
|
+
}
|
|
2222
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2223
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
|
|
2210
2224
|
@if (type === 'checkbox') {
|
|
2211
2225
|
<span class="mecx-option-checkbox">
|
|
2212
2226
|
<util-icon class="icon" name="check" />
|
|
2213
2227
|
</span>
|
|
2214
2228
|
}
|
|
2215
2229
|
<div #content><ng-content /></div>
|
|
2216
|
-
`, 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: "
|
|
2230
|
+
`, 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 }); }
|
|
2217
2231
|
}
|
|
2218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
|
|
2219
2233
|
type: Component,
|
|
2220
|
-
args: [{ selector: 'monkey-option', standalone: true, imports: [
|
|
2234
|
+
args: [{ selector: 'monkey-option', standalone: true, imports: [UtilIconComponent], template: `
|
|
2221
2235
|
@if (type === 'checkbox') {
|
|
2222
2236
|
<span class="mecx-option-checkbox">
|
|
2223
2237
|
<util-icon class="icon" name="check" />
|
|
@@ -2229,11 +2243,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2229
2243
|
'[attr.id]': 'id',
|
|
2230
2244
|
class: 'mecx-option',
|
|
2231
2245
|
'[class.mecx-option-disabled]': 'disabled',
|
|
2232
|
-
'[class.mecx-option-selected]': '
|
|
2246
|
+
'[class.mecx-option-selected]': 'isSelected()',
|
|
2233
2247
|
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
2234
2248
|
'[class]': 'type'
|
|
2235
2249
|
}, 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"] }]
|
|
2236
|
-
}], propDecorators: { _content: [{
|
|
2250
|
+
}], ctorParameters: () => [], propDecorators: { _content: [{
|
|
2237
2251
|
type: ViewChild,
|
|
2238
2252
|
args: ['content', { static: true }]
|
|
2239
2253
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{
|
|
@@ -2241,7 +2255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2241
2255
|
args: [{ transform: booleanAttribute }]
|
|
2242
2256
|
}], type: [{
|
|
2243
2257
|
type: Input
|
|
2244
|
-
}], onClick: [{
|
|
2258
|
+
}], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], onClick: [{
|
|
2245
2259
|
type: HostListener,
|
|
2246
2260
|
args: ['click', ['$event']]
|
|
2247
2261
|
}], handleKeyDown: [{
|
|
@@ -2431,8 +2445,8 @@ class MonkeyAutocompleteComponent {
|
|
|
2431
2445
|
isSelected(option) {
|
|
2432
2446
|
return option?.value === this.value;
|
|
2433
2447
|
}
|
|
2434
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2435
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2448
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAutocompleteComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2449
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
2436
2450
|
// eslint-disable-next-line no-use-before-define
|
|
2437
2451
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteComponent }
|
|
2438
2452
|
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
|
|
@@ -2464,19 +2478,25 @@ class MonkeyAutocompleteComponent {
|
|
|
2464
2478
|
class="mecx-autocomplete-wrapper"
|
|
2465
2479
|
[style.width.px]="initialDisplayWidth"
|
|
2466
2480
|
>
|
|
2467
|
-
|
|
2468
|
-
<div
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2481
|
+
@if (options.length > 0) {
|
|
2482
|
+
<div class="mecx-autocomplete-options">
|
|
2483
|
+
@for (option of options; track option) {
|
|
2484
|
+
<div
|
|
2485
|
+
class="mecx-autocomplete-option"
|
|
2486
|
+
(click)="onSelect(option)"
|
|
2487
|
+
[class.mecx-autocomplete-selected]="isSelected(option)"
|
|
2488
|
+
>
|
|
2489
|
+
<ng-container
|
|
2490
|
+
*ngTemplateOutlet="
|
|
2491
|
+
optionTemplate || defaultTemplate;
|
|
2492
|
+
context: { $implicit: option }
|
|
2493
|
+
"
|
|
2494
|
+
>
|
|
2495
|
+
</ng-container>
|
|
2496
|
+
</div>
|
|
2497
|
+
}
|
|
2478
2498
|
</div>
|
|
2479
|
-
|
|
2499
|
+
}
|
|
2480
2500
|
@if (loading) {
|
|
2481
2501
|
<div class="mecx-autocomplete-loading">
|
|
2482
2502
|
<util-icon name="loading" />
|
|
@@ -2497,9 +2517,9 @@ class MonkeyAutocompleteComponent {
|
|
|
2497
2517
|
</monkey-option>
|
|
2498
2518
|
</ng-template>
|
|
2499
2519
|
</ng-template>
|
|
2500
|
-
`, 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.
|
|
2520
|
+
`, 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" }] }); }
|
|
2501
2521
|
}
|
|
2502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2522
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAutocompleteComponent, decorators: [{
|
|
2503
2523
|
type: Component,
|
|
2504
2524
|
args: [{ selector: 'monkey-autocomplete', imports: [
|
|
2505
2525
|
CommonModule,
|
|
@@ -2538,19 +2558,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2538
2558
|
class="mecx-autocomplete-wrapper"
|
|
2539
2559
|
[style.width.px]="initialDisplayWidth"
|
|
2540
2560
|
>
|
|
2541
|
-
|
|
2542
|
-
<div
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2561
|
+
@if (options.length > 0) {
|
|
2562
|
+
<div class="mecx-autocomplete-options">
|
|
2563
|
+
@for (option of options; track option) {
|
|
2564
|
+
<div
|
|
2565
|
+
class="mecx-autocomplete-option"
|
|
2566
|
+
(click)="onSelect(option)"
|
|
2567
|
+
[class.mecx-autocomplete-selected]="isSelected(option)"
|
|
2568
|
+
>
|
|
2569
|
+
<ng-container
|
|
2570
|
+
*ngTemplateOutlet="
|
|
2571
|
+
optionTemplate || defaultTemplate;
|
|
2572
|
+
context: { $implicit: option }
|
|
2573
|
+
"
|
|
2574
|
+
>
|
|
2575
|
+
</ng-container>
|
|
2576
|
+
</div>
|
|
2577
|
+
}
|
|
2552
2578
|
</div>
|
|
2553
|
-
|
|
2579
|
+
}
|
|
2554
2580
|
@if (loading) {
|
|
2555
2581
|
<div class="mecx-autocomplete-loading">
|
|
2556
2582
|
<util-icon name="loading" />
|
|
@@ -2792,8 +2818,8 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2792
2818
|
isSelected(option) {
|
|
2793
2819
|
return option === this.value;
|
|
2794
2820
|
}
|
|
2795
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2821
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAutocompleteAddressComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
2797
2823
|
// eslint-disable-next-line no-use-before-define
|
|
2798
2824
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyAutocompleteAddressComponent }
|
|
2799
2825
|
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }], viewQueries: [{ propertyName: "containerWrapper", first: true, predicate: ["containerWrapper"], descendants: true }], ngImport: i0, template: `
|
|
@@ -2832,17 +2858,20 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2832
2858
|
{{ loadingDictionary | async }}
|
|
2833
2859
|
</div>
|
|
2834
2860
|
}
|
|
2835
|
-
|
|
2836
|
-
<
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2861
|
+
@if (options.length > 0) {
|
|
2862
|
+
<div class="mecx-autocomplete-address-options">
|
|
2863
|
+
@for (option of options; track option) {
|
|
2864
|
+
<monkey-option
|
|
2865
|
+
class="mecx-autocomplete-address-option"
|
|
2866
|
+
(click)="onSelect(option)"
|
|
2867
|
+
[class.mecx-option-selected]="isSelected(option)"
|
|
2868
|
+
>
|
|
2869
|
+
<util-icon class="mecx-autocomplete-address-option-icon" name="location" />
|
|
2870
|
+
<span [innerHTML]="option.adrFormatAddress"></span>
|
|
2871
|
+
</monkey-option>
|
|
2872
|
+
}
|
|
2873
|
+
</div>
|
|
2874
|
+
}
|
|
2846
2875
|
@if (!loading && !options.length) {
|
|
2847
2876
|
<div class="mecx-autocomplete-address-no-data">
|
|
2848
2877
|
<util-icon class="mecx-autocomplete-address-no-data-icon" name="searchFail" />
|
|
@@ -2855,9 +2884,9 @@ class MonkeyAutocompleteAddressComponent {
|
|
|
2855
2884
|
</div>
|
|
2856
2885
|
</div>
|
|
2857
2886
|
</ng-template>
|
|
2858
|
-
`, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host input{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "
|
|
2887
|
+
`, 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" }] }); }
|
|
2859
2888
|
}
|
|
2860
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAutocompleteAddressComponent, decorators: [{
|
|
2861
2890
|
type: Component,
|
|
2862
2891
|
args: [{ selector: 'monkey-autocomplete-address', imports: [
|
|
2863
2892
|
CommonModule,
|
|
@@ -2903,17 +2932,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2903
2932
|
{{ loadingDictionary | async }}
|
|
2904
2933
|
</div>
|
|
2905
2934
|
}
|
|
2906
|
-
|
|
2907
|
-
<
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2935
|
+
@if (options.length > 0) {
|
|
2936
|
+
<div class="mecx-autocomplete-address-options">
|
|
2937
|
+
@for (option of options; track option) {
|
|
2938
|
+
<monkey-option
|
|
2939
|
+
class="mecx-autocomplete-address-option"
|
|
2940
|
+
(click)="onSelect(option)"
|
|
2941
|
+
[class.mecx-option-selected]="isSelected(option)"
|
|
2942
|
+
>
|
|
2943
|
+
<util-icon class="mecx-autocomplete-address-option-icon" name="location" />
|
|
2944
|
+
<span [innerHTML]="option.adrFormatAddress"></span>
|
|
2945
|
+
</monkey-option>
|
|
2946
|
+
}
|
|
2947
|
+
</div>
|
|
2948
|
+
}
|
|
2917
2949
|
@if (!loading && !options.length) {
|
|
2918
2950
|
<div class="mecx-autocomplete-address-no-data">
|
|
2919
2951
|
<util-icon class="mecx-autocomplete-address-no-data-icon" name="searchFail" />
|
|
@@ -3014,10 +3046,10 @@ class MonkeyAvatarComponent {
|
|
|
3014
3046
|
this.avatar = getInitial(value.name);
|
|
3015
3047
|
}
|
|
3016
3048
|
}
|
|
3017
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3018
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3049
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3050
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 <monkey-icon [icon]=\"avatar\" [size]=\"size()\" />\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"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3019
3051
|
}
|
|
3020
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
|
|
3021
3053
|
type: Component,
|
|
3022
3054
|
args: [{ imports: [MonkeyIconComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
|
|
3023
3055
|
'data-testid': 'monkey-avatar',
|
|
@@ -3071,12 +3103,12 @@ class MonkeyBadgeComponent {
|
|
|
3071
3103
|
};
|
|
3072
3104
|
}
|
|
3073
3105
|
}
|
|
3074
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3075
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 <monkey-icon class=\"icon\" [icon]=\"icon\"></monkey-icon>\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"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
|
|
3076
3108
|
}
|
|
3077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyBadgeComponent, decorators: [{
|
|
3078
3110
|
type: Component,
|
|
3079
|
-
args: [{ selector: 'monkey-badge', imports: [
|
|
3111
|
+
args: [{ selector: 'monkey-badge', imports: [MonkeyIconComponent], host: {
|
|
3080
3112
|
'data-testid': 'monkey-badge',
|
|
3081
3113
|
'[attr.id]': 'id'
|
|
3082
3114
|
}, template: "@if (text) {\n @if (icon) {\n <monkey-icon class=\"icon\" [icon]=\"icon\"></monkey-icon>\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"] }]
|
|
@@ -3137,10 +3169,10 @@ class MonkeyBreadcrumbComponent {
|
|
|
3137
3169
|
this._router.navigate([item.path]);
|
|
3138
3170
|
}
|
|
3139
3171
|
}
|
|
3140
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3141
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }); }
|
|
3142
3174
|
}
|
|
3143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
|
|
3144
3176
|
type: Component,
|
|
3145
3177
|
args: [{ selector: 'monkey-breadcrumb', imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
|
|
3146
3178
|
'data-testid': 'monkey-breadcrumb',
|
|
@@ -3197,16 +3229,16 @@ class MonkeyButtonComponent {
|
|
|
3197
3229
|
get element() {
|
|
3198
3230
|
return this.elementRef.nativeElement;
|
|
3199
3231
|
}
|
|
3200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }); }
|
|
3202
3234
|
}
|
|
3203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
|
|
3204
3236
|
type: Component,
|
|
3205
|
-
args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent
|
|
3237
|
+
args: [{ encapsulation: ViewEncapsulation.None, imports: [UtilIconComponent], selector: 'monkey-button', standalone: true, host: {
|
|
3206
3238
|
'data-testid': 'monkey-button',
|
|
3207
3239
|
'[attr.id]': 'id',
|
|
3208
3240
|
'[id]': 'id'
|
|
3209
|
-
}, template: "<button class=\"mecx-button {{ type }} {{ size }} {{ color }}\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n <ng-content
|
|
3241
|
+
}, 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"] }]
|
|
3210
3242
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
3211
3243
|
type: Input
|
|
3212
3244
|
}], color: [{
|
|
@@ -3334,8 +3366,8 @@ class MonkeyCheckboxComponent {
|
|
|
3334
3366
|
}
|
|
3335
3367
|
return '';
|
|
3336
3368
|
}
|
|
3337
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
3339
3371
|
{
|
|
3340
3372
|
provide: NG_VALUE_ACCESSOR,
|
|
3341
3373
|
useExisting: forwardRef(() => {
|
|
@@ -3367,7 +3399,7 @@ class MonkeyCheckboxComponent {
|
|
|
3367
3399
|
])
|
|
3368
3400
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3369
3401
|
}
|
|
3370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
|
|
3371
3403
|
type: Component,
|
|
3372
3404
|
args: [{ selector: 'monkey-checkbox', imports: [ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
3373
3405
|
trigger('iconAnimation', [
|
|
@@ -3572,8 +3604,8 @@ class MonkeyInputCurrencyDirective {
|
|
|
3572
3604
|
focusOutChanged() {
|
|
3573
3605
|
this.ngControl?.control?.markAsTouched();
|
|
3574
3606
|
}
|
|
3575
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3576
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
3607
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3608
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.6", 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: [
|
|
3577
3609
|
{
|
|
3578
3610
|
provide: MonkeyFormFieldControl,
|
|
3579
3611
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -3581,7 +3613,7 @@ class MonkeyInputCurrencyDirective {
|
|
|
3581
3613
|
}
|
|
3582
3614
|
], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
|
|
3583
3615
|
}
|
|
3584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputCurrencyDirective, decorators: [{
|
|
3585
3617
|
type: Directive,
|
|
3586
3618
|
args: [{
|
|
3587
3619
|
selector: 'input[monkey-input-currency]',
|
|
@@ -3594,7 +3626,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3594
3626
|
'[required]': 'required',
|
|
3595
3627
|
'[attr.name]': 'name || null',
|
|
3596
3628
|
'[attr.disabled]': 'disabled || null',
|
|
3597
|
-
'[attr.aria-invalid]': '(empty && required) ? null : errorState',
|
|
3598
3629
|
'[attr.aria-required]': 'required',
|
|
3599
3630
|
'[attr.id]': 'id',
|
|
3600
3631
|
'(focus)': 'focusChanged(true)',
|
|
@@ -3764,8 +3795,8 @@ class MonkeyInputDirective {
|
|
|
3764
3795
|
focusOutChanged() {
|
|
3765
3796
|
this.ngControl?.control?.markAsTouched();
|
|
3766
3797
|
}
|
|
3767
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3768
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
3798
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3799
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.6", 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: [
|
|
3769
3800
|
{
|
|
3770
3801
|
provide: MonkeyFormFieldControl,
|
|
3771
3802
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -3773,7 +3804,7 @@ class MonkeyInputDirective {
|
|
|
3773
3804
|
}
|
|
3774
3805
|
], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
|
|
3775
3806
|
}
|
|
3776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputDirective, decorators: [{
|
|
3777
3808
|
type: Directive,
|
|
3778
3809
|
args: [{
|
|
3779
3810
|
selector: 'input[monkey-input],textarea[monkey-input]',
|
|
@@ -3787,7 +3818,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3787
3818
|
'[required]': 'required',
|
|
3788
3819
|
'[attr.name]': 'name || null',
|
|
3789
3820
|
'[attr.disabled]': 'disabled || null',
|
|
3790
|
-
'[attr.aria-invalid]': '(empty && required) ? null : errorState',
|
|
3791
3821
|
'[attr.aria-required]': 'required',
|
|
3792
3822
|
'[attr.id]': 'id',
|
|
3793
3823
|
'(focus)': 'focusChanged(true)',
|
|
@@ -3828,11 +3858,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3828
3858
|
* MIT Licence
|
|
3829
3859
|
************************* */
|
|
3830
3860
|
class MonkeyInputModule {
|
|
3831
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3832
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3833
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3861
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3862
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputModule, declarations: [MonkeyInputDirective, MonkeyInputCurrencyDirective], exports: [MonkeyInputDirective, MonkeyInputCurrencyDirective] }); }
|
|
3863
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputModule, providers: [CurrencyPipe] }); }
|
|
3834
3864
|
}
|
|
3835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3865
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputModule, decorators: [{
|
|
3836
3866
|
type: NgModule,
|
|
3837
3867
|
args: [{
|
|
3838
3868
|
providers: [CurrencyPipe],
|
|
@@ -3875,16 +3905,16 @@ class MonkeyIconButtonComponent {
|
|
|
3875
3905
|
event.stopImmediatePropagation();
|
|
3876
3906
|
}
|
|
3877
3907
|
}
|
|
3878
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3879
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3908
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3909
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", loading: "loading", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n @if (!loading) {\n <monkey-icon name=\"icon\" [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\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)}.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: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
3880
3910
|
}
|
|
3881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
|
|
3882
3912
|
type: Component,
|
|
3883
3913
|
args: [{ selector: 'monkey-icon-button', imports: [CommonModule, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
3884
3914
|
'data-testid': 'monkey-icon-button',
|
|
3885
3915
|
'[attr.id]': 'id',
|
|
3886
3916
|
'[id]': 'id'
|
|
3887
|
-
}, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n <monkey-icon
|
|
3917
|
+
}, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled || loading\">\n <div class=\"content\">\n @if (loading) {\n <util-icon class=\"mecx-icon-loading\" name=\"loading\" />\n }\n @if (!loading) {\n <monkey-icon name=\"icon\" [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\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)}.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"] }]
|
|
3888
3918
|
}], ctorParameters: () => [], propDecorators: { type: [{
|
|
3889
3919
|
type: Input
|
|
3890
3920
|
}], size: [{
|
|
@@ -4110,16 +4140,16 @@ class MonkeyDateRangeMonthComponent {
|
|
|
4110
4140
|
endDate: this._handledEndDate
|
|
4111
4141
|
});
|
|
4112
4142
|
}
|
|
4113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDateRangeMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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", "id"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
4115
4145
|
}
|
|
4116
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDateRangeMonthComponent, decorators: [{
|
|
4117
4147
|
type: Component,
|
|
4118
4148
|
args: [{ selector: 'monkey-date-range-month', imports: [CommonModule, MonkeyIconButtonComponent], host: {
|
|
4119
4149
|
'data-testid': 'month',
|
|
4120
4150
|
'[attr.id]': 'id',
|
|
4121
4151
|
'[id]': 'id'
|
|
4122
|
-
}, template: "
|
|
4152
|
+
}, 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"] }]
|
|
4123
4153
|
}], ctorParameters: () => [], propDecorators: { month: [{
|
|
4124
4154
|
type: Input,
|
|
4125
4155
|
args: [{ required: true }]
|
|
@@ -4179,16 +4209,16 @@ class MonkeyDateRangeQuickActionsComponent {
|
|
|
4179
4209
|
this.selectedAction = key;
|
|
4180
4210
|
this.onChange.next(value);
|
|
4181
4211
|
}
|
|
4182
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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" }] }); }
|
|
4184
4214
|
}
|
|
4185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, decorators: [{
|
|
4186
4216
|
type: Component,
|
|
4187
4217
|
args: [{ selector: 'monkey-date-range-quick-actions', imports: [CommonModule], host: {
|
|
4188
4218
|
'data-testid': 'quick-actions',
|
|
4189
4219
|
'[attr.id]': 'id',
|
|
4190
4220
|
'[id]': 'id'
|
|
4191
|
-
}, template: "
|
|
4221
|
+
}, 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"] }]
|
|
4192
4222
|
}], ctorParameters: () => [], propDecorators: { onChange: [{
|
|
4193
4223
|
type: Output
|
|
4194
4224
|
}], id: [{
|
|
@@ -4374,10 +4404,10 @@ class MonkeyDateRangeComponent {
|
|
|
4374
4404
|
this.firstCalendar = calendars.firstCalendar;
|
|
4375
4405
|
this.secondCalendar = calendars.secondCalendar;
|
|
4376
4406
|
}
|
|
4377
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4407
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4408
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n {{ i18n?.ACTIONS?.CANCEL }}\n </monkey-button>\n <monkey-button\n size=\"md\"\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", "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" }] }); }
|
|
4379
4409
|
}
|
|
4380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
|
|
4381
4411
|
type: Component,
|
|
4382
4412
|
args: [{ selector: 'monkey-date-range', imports: [
|
|
4383
4413
|
CommonModule,
|
|
@@ -4393,7 +4423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4393
4423
|
'data-testid': 'monkey-date-range',
|
|
4394
4424
|
'[attr.id]': 'id',
|
|
4395
4425
|
'[id]': 'id'
|
|
4396
|
-
}, template: "
|
|
4426
|
+
}, 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=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n {{ i18n?.ACTIONS?.CANCEL }}\n </monkey-button>\n <monkey-button\n size=\"md\"\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"] }]
|
|
4397
4427
|
}], ctorParameters: () => [], propDecorators: { startDate: [{
|
|
4398
4428
|
type: Input
|
|
4399
4429
|
}], endDate: [{
|
|
@@ -4451,17 +4481,15 @@ class MonkeyDividerComponent {
|
|
|
4451
4481
|
}
|
|
4452
4482
|
constructor() {
|
|
4453
4483
|
this.size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
4454
|
-
this.vertical = input(false, ...(ngDevMode ?
|
|
4455
|
-
transform: booleanAttribute
|
|
4456
|
-
}]));
|
|
4484
|
+
this.vertical = input(false, { ...(ngDevMode ? { debugName: "vertical" } : {}), transform: booleanAttribute });
|
|
4457
4485
|
this._uid = inject(IdGenerator).getId('monkey-divider-');
|
|
4458
4486
|
// eslint-disable-next-line no-self-assign
|
|
4459
4487
|
this.id = this.id;
|
|
4460
4488
|
}
|
|
4461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
4489
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", 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 }); }
|
|
4463
4491
|
}
|
|
4464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDividerComponent, decorators: [{
|
|
4465
4493
|
type: Component,
|
|
4466
4494
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-divider', standalone: true, template: '', host: {
|
|
4467
4495
|
'data-testid': 'monkey-divider',
|
|
@@ -4516,8 +4544,8 @@ class MonkeyDownloadButtonComponent {
|
|
|
4516
4544
|
onDownload() {
|
|
4517
4545
|
this.onChange.emit({ component: this });
|
|
4518
4546
|
}
|
|
4519
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDownloadButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4548
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
|
|
4521
4549
|
<monkey-button
|
|
4522
4550
|
[type]="type"
|
|
4523
4551
|
[color]="color"
|
|
@@ -4528,24 +4556,29 @@ class MonkeyDownloadButtonComponent {
|
|
|
4528
4556
|
class="w-100"
|
|
4529
4557
|
>
|
|
4530
4558
|
<div class="content-download">
|
|
4531
|
-
|
|
4559
|
+
@if (!loading) {
|
|
4560
|
+
<ng-content select="[first]"></ng-content>
|
|
4561
|
+
}
|
|
4532
4562
|
<span><ng-content></ng-content></span>
|
|
4533
|
-
|
|
4563
|
+
@if (!loading) {
|
|
4564
|
+
<ng-content select="[last]"></ng-content>
|
|
4565
|
+
}
|
|
4534
4566
|
</div>
|
|
4535
4567
|
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
|
|
4568
|
+
@if (hasProgress) {
|
|
4569
|
+
<div
|
|
4570
|
+
class="content-download-progress"
|
|
4571
|
+
[style.--mecx-button-progress]="hasProgress ? safeProgress + '%' : null"
|
|
4572
|
+
>
|
|
4573
|
+
<span [class.pe-2]="enablleMargin">{{ safeProgress }}%</span>
|
|
4574
|
+
</div>
|
|
4575
|
+
}
|
|
4543
4576
|
</monkey-button>
|
|
4544
|
-
`, 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: "
|
|
4577
|
+
`, 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"] }] }); }
|
|
4545
4578
|
}
|
|
4546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4579
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyDownloadButtonComponent, decorators: [{
|
|
4547
4580
|
type: Component,
|
|
4548
|
-
args: [{ selector: 'monkey-download-button', imports: [
|
|
4581
|
+
args: [{ selector: 'monkey-download-button', imports: [MonkeyButtonComponent], template: `
|
|
4549
4582
|
<monkey-button
|
|
4550
4583
|
[type]="type"
|
|
4551
4584
|
[color]="color"
|
|
@@ -4556,18 +4589,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4556
4589
|
class="w-100"
|
|
4557
4590
|
>
|
|
4558
4591
|
<div class="content-download">
|
|
4559
|
-
|
|
4592
|
+
@if (!loading) {
|
|
4593
|
+
<ng-content select="[first]"></ng-content>
|
|
4594
|
+
}
|
|
4560
4595
|
<span><ng-content></ng-content></span>
|
|
4561
|
-
|
|
4596
|
+
@if (!loading) {
|
|
4597
|
+
<ng-content select="[last]"></ng-content>
|
|
4598
|
+
}
|
|
4562
4599
|
</div>
|
|
4563
4600
|
|
|
4564
|
-
|
|
4565
|
-
|
|
4566
|
-
|
|
4567
|
-
|
|
4568
|
-
|
|
4569
|
-
|
|
4570
|
-
|
|
4601
|
+
@if (hasProgress) {
|
|
4602
|
+
<div
|
|
4603
|
+
class="content-download-progress"
|
|
4604
|
+
[style.--mecx-button-progress]="hasProgress ? safeProgress + '%' : null"
|
|
4605
|
+
>
|
|
4606
|
+
<span [class.pe-2]="enablleMargin">{{ safeProgress }}%</span>
|
|
4607
|
+
</div>
|
|
4608
|
+
}
|
|
4571
4609
|
</monkey-button>
|
|
4572
4610
|
`, host: {
|
|
4573
4611
|
'[attr.data-testid]': "'monkey-download-button'",
|
|
@@ -4622,8 +4660,8 @@ class MonkeyFilterBarComponent {
|
|
|
4622
4660
|
this.elementTarget = el.element;
|
|
4623
4661
|
this.showPopOver = true;
|
|
4624
4662
|
}
|
|
4625
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4626
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
4663
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyFilterBarComponent, isStandalone: true, selector: "monkey-filter-bar", host: { properties: { "attr.data-testid": "'monkey-filter-bar'" }, classAttribute: "mecx-filter-bar" }, usesOnChanges: true, ngImport: i0, template: `
|
|
4627
4665
|
<monkey-form-field>
|
|
4628
4666
|
<input type="text" monkey-input placeholder="Pesquise pelo nome ou CNPJ" />
|
|
4629
4667
|
</monkey-form-field>
|
|
@@ -4648,12 +4686,11 @@ class MonkeyFilterBarComponent {
|
|
|
4648
4686
|
<monkey-option> Data de Emissão </monkey-option>
|
|
4649
4687
|
<monkey-option> Data de Vencimento </monkey-option>
|
|
4650
4688
|
</ng-template>
|
|
4651
|
-
`, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
4689
|
+
`, isInline: true, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled", "type", "selected"] }] }); }
|
|
4652
4690
|
}
|
|
4653
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyFilterBarComponent, decorators: [{
|
|
4654
4692
|
type: Component,
|
|
4655
4693
|
args: [{ selector: 'monkey-filter-bar', imports: [
|
|
4656
|
-
CommonModule,
|
|
4657
4694
|
FormsModule,
|
|
4658
4695
|
ReactiveFormsModule,
|
|
4659
4696
|
MonkeyFormFieldModule,
|
|
@@ -4689,13 +4726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
4689
4726
|
</ng-template>
|
|
4690
4727
|
`, host: {
|
|
4691
4728
|
'[attr.data-testid]': "'monkey-filter-bar'",
|
|
4692
|
-
class: 'mecx-filter-bar'
|
|
4693
|
-
'[class.mecx-filter-bar-disabled]': '_disabled',
|
|
4694
|
-
'[class.mecx-filter-bar-focused]': 'focused',
|
|
4695
|
-
'[attr.id]': 'id',
|
|
4696
|
-
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
4697
|
-
'(focus)': '_onFocus()',
|
|
4698
|
-
'(blur)': '_onBlur()'
|
|
4729
|
+
class: 'mecx-filter-bar'
|
|
4699
4730
|
}, styles: [":host{width:100%;display:inline-flex;min-width:0;gap:12px}:host .mecx-form-field{width:100%;max-width:400px}:host .btn-filter{width:100%;max-width:160px}\n"] }]
|
|
4700
4731
|
}] });
|
|
4701
4732
|
|
|
@@ -4900,15 +4931,15 @@ class MonkeyInputCodeComponent {
|
|
|
4900
4931
|
setDisabledState(isDisabled) {
|
|
4901
4932
|
this.disabled = isDisabled;
|
|
4902
4933
|
}
|
|
4903
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4904
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputCodeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
4905
4936
|
// eslint-disable-next-line no-use-before-define
|
|
4906
4937
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputCodeComponent }
|
|
4907
|
-
], 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:
|
|
4938
|
+
], 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"] }] }); }
|
|
4908
4939
|
}
|
|
4909
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputCodeComponent, decorators: [{
|
|
4910
4941
|
type: Component,
|
|
4911
|
-
args: [{ selector: 'monkey-input-code', imports: [
|
|
4942
|
+
args: [{ selector: 'monkey-input-code', imports: [FormsModule], host: {
|
|
4912
4943
|
'data-testid': 'monkey-input-code',
|
|
4913
4944
|
'[attr.id]': 'id',
|
|
4914
4945
|
'[id]': 'id'
|
|
@@ -5080,18 +5111,17 @@ class MonkeyInputDateRangeComponent {
|
|
|
5080
5111
|
// not to do
|
|
5081
5112
|
}
|
|
5082
5113
|
}
|
|
5083
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5084
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5114
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputDateRangeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
5085
5116
|
// eslint-disable-next-line no-use-before-define
|
|
5086
5117
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputDateRangeComponent }
|
|
5087
5118
|
], usesOnChanges: true, ngImport: i0, template: `
|
|
5088
5119
|
<span #popoverTarget (click)="onOpenPopover()">
|
|
5089
|
-
|
|
5120
|
+
@if (startDate) {
|
|
5090
5121
|
{{ startDate | date }} - {{ endDate | date }}
|
|
5091
|
-
|
|
5092
|
-
<ng-template #noDate>
|
|
5122
|
+
} @else {
|
|
5093
5123
|
{{ placeholder }}
|
|
5094
|
-
|
|
5124
|
+
}
|
|
5095
5125
|
</span>
|
|
5096
5126
|
|
|
5097
5127
|
<ng-template
|
|
@@ -5112,9 +5142,9 @@ class MonkeyInputDateRangeComponent {
|
|
|
5112
5142
|
>
|
|
5113
5143
|
</monkey-date-range>
|
|
5114
5144
|
</ng-template>
|
|
5115
|
-
`, 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: "
|
|
5145
|
+
`, 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" }] }); }
|
|
5116
5146
|
}
|
|
5117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputDateRangeComponent, decorators: [{
|
|
5118
5148
|
type: Component,
|
|
5119
5149
|
args: [{ selector: 'monkey-input-date-range', imports: [
|
|
5120
5150
|
CommonModule,
|
|
@@ -5125,12 +5155,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5125
5155
|
MonkeyDateRangeComponent
|
|
5126
5156
|
], template: `
|
|
5127
5157
|
<span #popoverTarget (click)="onOpenPopover()">
|
|
5128
|
-
|
|
5158
|
+
@if (startDate) {
|
|
5129
5159
|
{{ startDate | date }} - {{ endDate | date }}
|
|
5130
|
-
|
|
5131
|
-
<ng-template #noDate>
|
|
5160
|
+
} @else {
|
|
5132
5161
|
{{ placeholder }}
|
|
5133
|
-
|
|
5162
|
+
}
|
|
5134
5163
|
</span>
|
|
5135
5164
|
|
|
5136
5165
|
<ng-template
|
|
@@ -5290,7 +5319,7 @@ class MonkeySelectComponent {
|
|
|
5290
5319
|
}
|
|
5291
5320
|
else {
|
|
5292
5321
|
this.options.forEach((opt) => {
|
|
5293
|
-
opt.
|
|
5322
|
+
opt.onSelect(String(opt.value()) === this.value);
|
|
5294
5323
|
});
|
|
5295
5324
|
}
|
|
5296
5325
|
this.changeDetectorRef.markForCheck();
|
|
@@ -5343,7 +5372,7 @@ class MonkeySelectComponent {
|
|
|
5343
5372
|
}
|
|
5344
5373
|
setTimeout(() => {
|
|
5345
5374
|
const selected = this.options.find((opt) => {
|
|
5346
|
-
return opt.selected;
|
|
5375
|
+
return opt.selected();
|
|
5347
5376
|
});
|
|
5348
5377
|
if (selected) {
|
|
5349
5378
|
const element = this.overlayRef?.overlayElement.querySelector(`#${selected.id}`);
|
|
@@ -5495,18 +5524,18 @@ class MonkeySelectComponent {
|
|
|
5495
5524
|
const index = values.indexOf(`${option.value()}`);
|
|
5496
5525
|
if (index === -1) {
|
|
5497
5526
|
values.push(`${option.value()}`);
|
|
5498
|
-
option.
|
|
5527
|
+
option.onSelect(true);
|
|
5499
5528
|
}
|
|
5500
5529
|
else {
|
|
5501
5530
|
values.splice(index, 1);
|
|
5502
|
-
option.
|
|
5531
|
+
option.onSelect(false);
|
|
5503
5532
|
}
|
|
5504
5533
|
this.value = values.join(',');
|
|
5505
5534
|
}
|
|
5506
5535
|
else {
|
|
5507
5536
|
this.value = `${option.value()}`;
|
|
5508
5537
|
this.options.forEach((opt) => {
|
|
5509
|
-
opt.
|
|
5538
|
+
opt.onSelect(`${opt.value()}` === `${this.value}`);
|
|
5510
5539
|
});
|
|
5511
5540
|
this.closeDropdown();
|
|
5512
5541
|
this._onChange(this.value);
|
|
@@ -5567,11 +5596,11 @@ class MonkeySelectComponent {
|
|
|
5567
5596
|
// not to do
|
|
5568
5597
|
}
|
|
5569
5598
|
}
|
|
5570
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5571
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5599
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeySelectComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5600
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
5572
5601
|
// eslint-disable-next-line no-use-before-define
|
|
5573
5602
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
|
|
5574
|
-
], 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
|
|
5603
|
+
], 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: [
|
|
5575
5604
|
trigger('animation', [
|
|
5576
5605
|
transition(':enter', [
|
|
5577
5606
|
style({
|
|
@@ -5591,7 +5620,7 @@ class MonkeySelectComponent {
|
|
|
5591
5620
|
])
|
|
5592
5621
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5593
5622
|
}
|
|
5594
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5623
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeySelectComponent, decorators: [{
|
|
5595
5624
|
type: Component,
|
|
5596
5625
|
args: [{ selector: 'monkey-select', imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
5597
5626
|
// eslint-disable-next-line no-use-before-define
|
|
@@ -5623,8 +5652,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5623
5652
|
'[attr.tabindex]': 'disabled ? -1 : tabIndex',
|
|
5624
5653
|
'(focus)': '_onFocus()',
|
|
5625
5654
|
'(blur)': '_onBlur()'
|
|
5626
|
-
}, 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
|
|
5627
|
-
}], ctorParameters: () => [{ type: i1$
|
|
5655
|
+
}, 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"] }]
|
|
5656
|
+
}], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: MonkeyFormFieldComponent, decorators: [{
|
|
5628
5657
|
type: Optional
|
|
5629
5658
|
}] }], propDecorators: { overlayTemplate: [{
|
|
5630
5659
|
type: ViewChild,
|
|
@@ -5872,8 +5901,8 @@ class MonkeyInputPhoneComponent {
|
|
|
5872
5901
|
return 20;
|
|
5873
5902
|
}
|
|
5874
5903
|
}
|
|
5875
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5876
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
5877
5906
|
// eslint-disable-next-line no-use-before-define
|
|
5878
5907
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
|
|
5879
5908
|
], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -5905,12 +5934,11 @@ class MonkeyInputPhoneComponent {
|
|
|
5905
5934
|
(blur)="_onBlur()"
|
|
5906
5935
|
[attr.id]="inputId"
|
|
5907
5936
|
/>
|
|
5908
|
-
`, 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:
|
|
5937
|
+
`, 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 }] }); }
|
|
5909
5938
|
}
|
|
5910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5939
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
|
|
5911
5940
|
type: Component,
|
|
5912
5941
|
args: [{ selector: 'monkey-input-phone', imports: [
|
|
5913
|
-
CommonModule,
|
|
5914
5942
|
FormsModule,
|
|
5915
5943
|
ReactiveFormsModule,
|
|
5916
5944
|
MonkeySelectComponent,
|
|
@@ -6133,8 +6161,8 @@ class MonkeyInputUploadComponent {
|
|
|
6133
6161
|
};
|
|
6134
6162
|
}
|
|
6135
6163
|
}
|
|
6136
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6137
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
|
|
6138
6166
|
// eslint-disable-next-line no-use-before-define
|
|
6139
6167
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
|
|
6140
6168
|
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
@@ -6155,7 +6183,7 @@ class MonkeyInputUploadComponent {
|
|
|
6155
6183
|
}
|
|
6156
6184
|
`, 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"] }); }
|
|
6157
6185
|
}
|
|
6158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
|
|
6159
6187
|
type: Component,
|
|
6160
6188
|
args: [{ selector: 'monkey-input-upload', imports: [], template: `
|
|
6161
6189
|
<div class="mecx-input-upload-value" [class.has-value]="value">
|
|
@@ -6230,10 +6258,10 @@ class MonkeyModalActionsDirective {
|
|
|
6230
6258
|
this.mkAlign = 'end';
|
|
6231
6259
|
this.id = inject(IdGenerator).getId('monkey-modal-actions-');
|
|
6232
6260
|
}
|
|
6233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6234
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
6261
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6262
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
6235
6263
|
}
|
|
6236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
|
|
6237
6265
|
type: Directive,
|
|
6238
6266
|
args: [{
|
|
6239
6267
|
selector: 'monkey-modal-actions, [monkey-modal-actions]',
|
|
@@ -6256,10 +6284,10 @@ class MonkeyModalContentDirective {
|
|
|
6256
6284
|
constructor() {
|
|
6257
6285
|
this.id = inject(IdGenerator).getId('monkey-modal-content-');
|
|
6258
6286
|
}
|
|
6259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6260
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
6287
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6288
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyModalContentDirective, isStandalone: false, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
|
|
6261
6289
|
}
|
|
6262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
|
|
6263
6291
|
type: Directive,
|
|
6264
6292
|
args: [{
|
|
6265
6293
|
selector: 'monkey-modal-content, [monkey-modal-content]',
|
|
@@ -6280,10 +6308,10 @@ class MonkeyModalSubtitleDirective {
|
|
|
6280
6308
|
constructor() {
|
|
6281
6309
|
this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
|
|
6282
6310
|
}
|
|
6283
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6284
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
6311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6312
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyModalSubtitleDirective, isStandalone: false, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-subtitle" }, ngImport: i0 }); }
|
|
6285
6313
|
}
|
|
6286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
|
|
6287
6315
|
type: Directive,
|
|
6288
6316
|
args: [{
|
|
6289
6317
|
selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
|
|
@@ -6304,10 +6332,10 @@ class MonkeyModalTitleDirective {
|
|
|
6304
6332
|
constructor() {
|
|
6305
6333
|
this.id = inject(IdGenerator).getId('monkey-modal-title-');
|
|
6306
6334
|
}
|
|
6307
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6308
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
6335
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6336
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyModalTitleDirective, isStandalone: false, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
|
|
6309
6337
|
}
|
|
6310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6338
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
|
|
6311
6339
|
type: Directive,
|
|
6312
6340
|
args: [{
|
|
6313
6341
|
selector: 'monkey-modal-title, [monkey-modal-title]',
|
|
@@ -6319,11 +6347,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6319
6347
|
}]
|
|
6320
6348
|
}] });
|
|
6321
6349
|
|
|
6322
|
-
/** ************************
|
|
6323
|
-
* Copyright Monkey Exchange. All Rights Reserved
|
|
6324
|
-
* This style guide was developed by Monkey Exchange Team
|
|
6325
|
-
* MIT Licence
|
|
6326
|
-
************************* */
|
|
6327
6350
|
class MonkeyModalConfig {
|
|
6328
6351
|
constructor() {
|
|
6329
6352
|
this.panelClass = '';
|
|
@@ -6426,8 +6449,8 @@ class MonkeyModalComponent {
|
|
|
6426
6449
|
this.modalRef?.close();
|
|
6427
6450
|
}, 150);
|
|
6428
6451
|
}
|
|
6429
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6452
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonkeyModalComponent, isStandalone: false, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
|
|
6431
6454
|
<div class="mecx-modal-header">
|
|
6432
6455
|
<div class="mecx-modal-header-group">
|
|
6433
6456
|
<div class="mecx-modal-header-title">
|
|
@@ -6460,7 +6483,7 @@ class MonkeyModalComponent {
|
|
|
6460
6483
|
<ng-content select="[monkey-modal-actions]"></ng-content>
|
|
6461
6484
|
`, 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"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6462
6485
|
}
|
|
6463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6486
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalComponent, decorators: [{
|
|
6464
6487
|
type: Component,
|
|
6465
6488
|
args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
|
|
6466
6489
|
<div class="mecx-modal-header">
|
|
@@ -6498,7 +6521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6498
6521
|
tabindex: '-1',
|
|
6499
6522
|
'[attr.id]': 'modalRef?.id || null'
|
|
6500
6523
|
}, standalone: false, 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"] }]
|
|
6501
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$
|
|
6524
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.OverlayRef, decorators: [{
|
|
6502
6525
|
type: Optional
|
|
6503
6526
|
}] }, { type: MonkeyModalRef, decorators: [{
|
|
6504
6527
|
type: Optional
|
|
@@ -6532,7 +6555,7 @@ function reverseForEach(items, callback) {
|
|
|
6532
6555
|
* This style guide was developed by Monkey Exchange Team
|
|
6533
6556
|
* MIT Licence
|
|
6534
6557
|
************************* */
|
|
6535
|
-
class
|
|
6558
|
+
class MonkeyModalConfirmationComponent {
|
|
6536
6559
|
constructor(config, modalRef) {
|
|
6537
6560
|
this.config = config;
|
|
6538
6561
|
this.modalRef = modalRef;
|
|
@@ -6544,39 +6567,47 @@ class MonkeyModalDefaultComponent {
|
|
|
6544
6567
|
onClose() {
|
|
6545
6568
|
this.modalRef.close();
|
|
6546
6569
|
}
|
|
6547
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6548
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6549
|
-
<monkey-modal>
|
|
6550
|
-
<monkey-modal-
|
|
6551
|
-
|
|
6552
|
-
|
|
6553
|
-
|
|
6570
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalConfirmationComponent, deps: [{ token: MECX_MODAL_CONFIRMATION_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6571
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MonkeyModalConfirmationComponent, isStandalone: false, selector: "monkey-modal-confirmation", ngImport: i0, template: `
|
|
6572
|
+
<monkey-modal class="modal-confirmation">
|
|
6573
|
+
<monkey-modal-content>
|
|
6574
|
+
@if (config.icon) {
|
|
6575
|
+
<div class="modal-confirmation-icon {{ config.type }}">
|
|
6576
|
+
<monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
|
|
6577
|
+
</div>
|
|
6578
|
+
}
|
|
6579
|
+
<div class="confirmation-title" [innerHTML]="config.title"></div>
|
|
6580
|
+
<div class="confirmation-description" [innerHTML]="config.content"></div>
|
|
6581
|
+
</monkey-modal-content>
|
|
6582
|
+
<monkey-modal-actions>
|
|
6554
6583
|
<monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
|
|
6555
6584
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
6556
6585
|
</monkey-modal-actions>
|
|
6557
6586
|
</monkey-modal>
|
|
6558
|
-
`, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type:
|
|
6587
|
+
`, 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 monkey-icon{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 monkey-icon{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 monkey-icon{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 monkey-icon{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: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "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 }); }
|
|
6559
6588
|
}
|
|
6560
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
|
|
6561
6590
|
type: Component,
|
|
6562
|
-
args: [{
|
|
6563
|
-
|
|
6564
|
-
|
|
6565
|
-
|
|
6566
|
-
|
|
6567
|
-
|
|
6568
|
-
|
|
6569
|
-
|
|
6591
|
+
args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
|
|
6592
|
+
<monkey-modal class="modal-confirmation">
|
|
6593
|
+
<monkey-modal-content>
|
|
6594
|
+
@if (config.icon) {
|
|
6595
|
+
<div class="modal-confirmation-icon {{ config.type }}">
|
|
6596
|
+
<monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
|
|
6597
|
+
</div>
|
|
6598
|
+
}
|
|
6599
|
+
<div class="confirmation-title" [innerHTML]="config.title"></div>
|
|
6600
|
+
<div class="confirmation-description" [innerHTML]="config.content"></div>
|
|
6601
|
+
</monkey-modal-content>
|
|
6602
|
+
<monkey-modal-actions>
|
|
6570
6603
|
<monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
|
|
6571
6604
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
6572
6605
|
</monkey-modal-actions>
|
|
6573
6606
|
</monkey-modal>
|
|
6574
|
-
`,
|
|
6575
|
-
standalone: false
|
|
6576
|
-
}]
|
|
6607
|
+
`, standalone: false, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{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 monkey-icon{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 monkey-icon{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 monkey-icon{color:var(--mecx-color-success-500)}\n"] }]
|
|
6577
6608
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6578
6609
|
type: Inject,
|
|
6579
|
-
args: [
|
|
6610
|
+
args: [MECX_MODAL_CONFIRMATION_CONFIG]
|
|
6580
6611
|
}] }, { type: MonkeyModalRef, decorators: [{
|
|
6581
6612
|
type: Inject,
|
|
6582
6613
|
args: [MonkeyModalRef]
|
|
@@ -6587,7 +6618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6587
6618
|
* This style guide was developed by Monkey Exchange Team
|
|
6588
6619
|
* MIT Licence
|
|
6589
6620
|
************************* */
|
|
6590
|
-
class
|
|
6621
|
+
class MonkeyModalDefaultComponent {
|
|
6591
6622
|
constructor(config, modalRef) {
|
|
6592
6623
|
this.config = config;
|
|
6593
6624
|
this.modalRef = modalRef;
|
|
@@ -6599,47 +6630,39 @@ class MonkeyModalConfirmationComponent {
|
|
|
6599
6630
|
onClose() {
|
|
6600
6631
|
this.modalRef.close();
|
|
6601
6632
|
}
|
|
6602
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6603
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
6604
|
-
<monkey-modal
|
|
6605
|
-
<monkey-modal-
|
|
6606
|
-
|
|
6607
|
-
|
|
6608
|
-
|
|
6609
|
-
</div>
|
|
6610
|
-
}
|
|
6611
|
-
<div class="confirmation-title" [innerHTML]="config.title"></div>
|
|
6612
|
-
<div class="confirmation-description" [innerHTML]="config.content"></div>
|
|
6613
|
-
</monkey-modal-content>
|
|
6614
|
-
<monkey-modal-actions>
|
|
6633
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalDefaultComponent, deps: [{ token: MECX_MODAL_DEFAULT_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyModalDefaultComponent, isStandalone: false, selector: "monkey-modal-default", ngImport: i0, template: `
|
|
6635
|
+
<monkey-modal>
|
|
6636
|
+
<monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
|
|
6637
|
+
<monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
|
|
6638
|
+
<monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
|
|
6639
|
+
<monkey-modal-actions mkAlign="end">
|
|
6615
6640
|
<monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
|
|
6616
6641
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
6617
6642
|
</monkey-modal-actions>
|
|
6618
6643
|
</monkey-modal>
|
|
6619
|
-
`, isInline: true,
|
|
6644
|
+
`, 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"] }] }); }
|
|
6620
6645
|
}
|
|
6621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
|
|
6622
6647
|
type: Component,
|
|
6623
|
-
args: [{
|
|
6624
|
-
|
|
6625
|
-
|
|
6626
|
-
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
<div class="confirmation-title" [innerHTML]="config.title"></div>
|
|
6632
|
-
<div class="confirmation-description" [innerHTML]="config.content"></div>
|
|
6633
|
-
</monkey-modal-content>
|
|
6634
|
-
<monkey-modal-actions>
|
|
6648
|
+
args: [{
|
|
6649
|
+
selector: 'monkey-modal-default',
|
|
6650
|
+
template: `
|
|
6651
|
+
<monkey-modal>
|
|
6652
|
+
<monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
|
|
6653
|
+
<monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
|
|
6654
|
+
<monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
|
|
6655
|
+
<monkey-modal-actions mkAlign="end">
|
|
6635
6656
|
<monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
|
|
6636
6657
|
<monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
|
|
6637
6658
|
</monkey-modal-actions>
|
|
6638
6659
|
</monkey-modal>
|
|
6639
|
-
`,
|
|
6660
|
+
`,
|
|
6661
|
+
standalone: false
|
|
6662
|
+
}]
|
|
6640
6663
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6641
6664
|
type: Inject,
|
|
6642
|
-
args: [
|
|
6665
|
+
args: [MECX_MODAL_DEFAULT_CONFIG]
|
|
6643
6666
|
}] }, { type: MonkeyModalRef, decorators: [{
|
|
6644
6667
|
type: Inject,
|
|
6645
6668
|
args: [MonkeyModalRef]
|
|
@@ -6651,8 +6674,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6651
6674
|
* MIT Licence
|
|
6652
6675
|
************************* */
|
|
6653
6676
|
class MonkeyModalModule {
|
|
6654
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6655
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
6677
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6678
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
|
|
6656
6679
|
MonkeyModalDefaultComponent,
|
|
6657
6680
|
MonkeyModalConfirmationComponent,
|
|
6658
6681
|
MonkeyModalTitleDirective,
|
|
@@ -6663,9 +6686,9 @@ class MonkeyModalModule {
|
|
|
6663
6686
|
MonkeyModalSubtitleDirective,
|
|
6664
6687
|
MonkeyModalContentDirective,
|
|
6665
6688
|
MonkeyModalActionsDirective] }); }
|
|
6666
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
6689
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyIconButtonComponent] }); }
|
|
6667
6690
|
}
|
|
6668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalModule, decorators: [{
|
|
6669
6692
|
type: NgModule,
|
|
6670
6693
|
args: [{
|
|
6671
6694
|
imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent],
|
|
@@ -6820,10 +6843,10 @@ class MonkeyModalService {
|
|
|
6820
6843
|
});
|
|
6821
6844
|
this.openDialogs.splice(0, this.openDialogs.length);
|
|
6822
6845
|
}
|
|
6823
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6824
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6846
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6847
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
|
|
6825
6848
|
}
|
|
6826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyModalService, decorators: [{
|
|
6827
6850
|
type: Injectable,
|
|
6828
6851
|
args: [{ providedIn: 'root' }]
|
|
6829
6852
|
}] });
|
|
@@ -6900,7 +6923,7 @@ class MonkeyRadioButtonComponent {
|
|
|
6900
6923
|
setTimeout(() => {
|
|
6901
6924
|
if (this.options) {
|
|
6902
6925
|
this.options.forEach((opt) => {
|
|
6903
|
-
opt.
|
|
6926
|
+
opt.onSelect(opt.value() === this.value);
|
|
6904
6927
|
});
|
|
6905
6928
|
}
|
|
6906
6929
|
this.changeDetectorRef.markForCheck();
|
|
@@ -6930,7 +6953,7 @@ class MonkeyRadioButtonComponent {
|
|
|
6930
6953
|
this._onChange(this.value);
|
|
6931
6954
|
this.onChange.emit(this.value);
|
|
6932
6955
|
this.options.forEach((opt) => {
|
|
6933
|
-
opt.
|
|
6956
|
+
opt.onSelect(opt.value() === this.value);
|
|
6934
6957
|
});
|
|
6935
6958
|
}
|
|
6936
6959
|
}
|
|
@@ -6964,15 +6987,15 @@ class MonkeyRadioButtonComponent {
|
|
|
6964
6987
|
this.disabled = isDisabled;
|
|
6965
6988
|
this.initializeOptions();
|
|
6966
6989
|
}
|
|
6967
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6968
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
6990
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.6", 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: [
|
|
6969
6992
|
// eslint-disable-next-line no-use-before-define
|
|
6970
6993
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
6971
|
-
], 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:
|
|
6994
|
+
], 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 }); }
|
|
6972
6995
|
}
|
|
6973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6996
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
|
|
6974
6997
|
type: Component,
|
|
6975
|
-
args: [{ selector: 'monkey-radiobutton', imports: [
|
|
6998
|
+
args: [{ selector: 'monkey-radiobutton', imports: [ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
6976
6999
|
// eslint-disable-next-line no-use-before-define
|
|
6977
7000
|
{ provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
|
|
6978
7001
|
], host: {
|
|
@@ -7054,16 +7077,16 @@ class MonkeySecurityLevelComponent {
|
|
|
7054
7077
|
// eslint-disable-next-line no-self-assign
|
|
7055
7078
|
this.id = this.id;
|
|
7056
7079
|
}
|
|
7057
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7058
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
7080
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }); }
|
|
7059
7082
|
}
|
|
7060
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
|
|
7061
7084
|
type: Component,
|
|
7062
|
-
args: [{ encapsulation: ViewEncapsulation.None, imports: [
|
|
7085
|
+
args: [{ encapsulation: ViewEncapsulation.None, imports: [], selector: 'monkey-security-level', host: {
|
|
7063
7086
|
'data-testid': 'monkey-security-level',
|
|
7064
7087
|
'[attr.id]': 'id',
|
|
7065
7088
|
'[id]': 'id'
|
|
7066
|
-
}, template: "<div class=\"body\">\n <div>\n <span data-testid=\"label\"
|
|
7089
|
+
}, 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"] }]
|
|
7067
7090
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], strengthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "strengthLabel", required: false }] }], class: [{
|
|
7068
7091
|
type: HostBinding,
|
|
7069
7092
|
args: ['class']
|
|
@@ -7100,16 +7123,16 @@ class MonkeyStatusComponent {
|
|
|
7100
7123
|
// eslint-disable-next-line no-self-assign
|
|
7101
7124
|
this.id = this.id;
|
|
7102
7125
|
}
|
|
7103
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
7126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }); }
|
|
7105
7128
|
}
|
|
7106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
|
|
7107
7130
|
type: Component,
|
|
7108
|
-
args: [{ selector: 'monkey-status', imports: [
|
|
7131
|
+
args: [{ selector: 'monkey-status', imports: [], host: {
|
|
7109
7132
|
'data-testid': 'monkey-status',
|
|
7110
7133
|
'[attr.id]': 'id',
|
|
7111
7134
|
'[id]': 'id'
|
|
7112
|
-
}, template: "<div class=\"status\"></div>\n
|
|
7135
|
+
}, 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"] }]
|
|
7113
7136
|
}], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], class: [{
|
|
7114
7137
|
type: HostBinding,
|
|
7115
7138
|
args: ['class']
|
|
@@ -7134,85 +7157,85 @@ class MonkeyStepComponent {
|
|
|
7134
7157
|
this.label = '';
|
|
7135
7158
|
this.step = '';
|
|
7136
7159
|
this.icon = '';
|
|
7137
|
-
this.number = undefined;
|
|
7138
|
-
this.hasSubSteps = true;
|
|
7139
|
-
this.isSubStep = false;
|
|
7140
|
-
this.isCurrent = false;
|
|
7141
|
-
this.isComplete = false;
|
|
7142
|
-
this.isActive = false;
|
|
7160
|
+
this.number = signal(undefined, ...(ngDevMode ? [{ debugName: "number" }] : []));
|
|
7161
|
+
this.hasSubSteps = signal(true, ...(ngDevMode ? [{ debugName: "hasSubSteps" }] : []));
|
|
7162
|
+
this.isSubStep = signal(false, ...(ngDevMode ? [{ debugName: "isSubStep" }] : []));
|
|
7163
|
+
this.isCurrent = signal(false, ...(ngDevMode ? [{ debugName: "isCurrent" }] : []));
|
|
7164
|
+
this.isComplete = signal(false, ...(ngDevMode ? [{ debugName: "isComplete" }] : []));
|
|
7165
|
+
this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
|
|
7143
7166
|
}
|
|
7144
7167
|
ngAfterContentInit() {
|
|
7145
7168
|
if (this.subSteps.length <= 0) {
|
|
7146
|
-
this.hasSubSteps
|
|
7169
|
+
this.hasSubSteps.set(false);
|
|
7147
7170
|
}
|
|
7148
7171
|
}
|
|
7149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
|
|
7151
7174
|
<div
|
|
7152
7175
|
class="item"
|
|
7153
|
-
[class.active]="isActive"
|
|
7154
|
-
[class.complete]="isComplete"
|
|
7155
|
-
[class.current]="isCurrent"
|
|
7156
|
-
[class.substep]="isSubStep"
|
|
7176
|
+
[class.active]="isActive()"
|
|
7177
|
+
[class.complete]="isComplete()"
|
|
7178
|
+
[class.current]="isCurrent()"
|
|
7179
|
+
[class.substep]="isSubStep()"
|
|
7157
7180
|
>
|
|
7158
7181
|
<div class="step">
|
|
7159
7182
|
<div class="number" [class.icon]="!!icon">
|
|
7160
7183
|
@if (icon) {
|
|
7161
7184
|
<monkey-icon size="sm" [icon]="icon" />
|
|
7162
|
-
} @else if (isComplete) {
|
|
7185
|
+
} @else if (isComplete()) {
|
|
7163
7186
|
<util-icon name="check" />
|
|
7164
7187
|
} @else {
|
|
7165
|
-
{{ number }}
|
|
7188
|
+
{{ number() }}
|
|
7166
7189
|
}
|
|
7167
7190
|
</div>
|
|
7168
7191
|
</div>
|
|
7169
7192
|
<div class="label">
|
|
7170
7193
|
<div>{{ label }}</div>
|
|
7171
|
-
@if (isCurrent) {
|
|
7194
|
+
@if (isCurrent()) {
|
|
7172
7195
|
<div class="current-icon">
|
|
7173
7196
|
<monkey-icon icon="arrow-line-right" size="sm" />
|
|
7174
7197
|
</div>
|
|
7175
7198
|
}
|
|
7176
7199
|
</div>
|
|
7177
7200
|
</div>
|
|
7178
|
-
@if (hasSubSteps && (isActive || isCurrent)) {
|
|
7201
|
+
@if (hasSubSteps() && (isActive() || isCurrent())) {
|
|
7179
7202
|
<div class="substeps">
|
|
7180
7203
|
<ng-content />
|
|
7181
7204
|
</div>
|
|
7182
7205
|
}
|
|
7183
|
-
`, 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
|
|
7206
|
+
`, 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 monkey-icon{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 monkey-icon{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"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
|
|
7184
7207
|
}
|
|
7185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepComponent, decorators: [{
|
|
7186
7209
|
type: Component,
|
|
7187
7210
|
args: [{ selector: 'monkey-step', standalone: false, template: `
|
|
7188
7211
|
<div
|
|
7189
7212
|
class="item"
|
|
7190
|
-
[class.active]="isActive"
|
|
7191
|
-
[class.complete]="isComplete"
|
|
7192
|
-
[class.current]="isCurrent"
|
|
7193
|
-
[class.substep]="isSubStep"
|
|
7213
|
+
[class.active]="isActive()"
|
|
7214
|
+
[class.complete]="isComplete()"
|
|
7215
|
+
[class.current]="isCurrent()"
|
|
7216
|
+
[class.substep]="isSubStep()"
|
|
7194
7217
|
>
|
|
7195
7218
|
<div class="step">
|
|
7196
7219
|
<div class="number" [class.icon]="!!icon">
|
|
7197
7220
|
@if (icon) {
|
|
7198
7221
|
<monkey-icon size="sm" [icon]="icon" />
|
|
7199
|
-
} @else if (isComplete) {
|
|
7222
|
+
} @else if (isComplete()) {
|
|
7200
7223
|
<util-icon name="check" />
|
|
7201
7224
|
} @else {
|
|
7202
|
-
{{ number }}
|
|
7225
|
+
{{ number() }}
|
|
7203
7226
|
}
|
|
7204
7227
|
</div>
|
|
7205
7228
|
</div>
|
|
7206
7229
|
<div class="label">
|
|
7207
7230
|
<div>{{ label }}</div>
|
|
7208
|
-
@if (isCurrent) {
|
|
7231
|
+
@if (isCurrent()) {
|
|
7209
7232
|
<div class="current-icon">
|
|
7210
7233
|
<monkey-icon icon="arrow-line-right" size="sm" />
|
|
7211
7234
|
</div>
|
|
7212
7235
|
}
|
|
7213
7236
|
</div>
|
|
7214
7237
|
</div>
|
|
7215
|
-
@if (hasSubSteps && (isActive || isCurrent)) {
|
|
7238
|
+
@if (hasSubSteps() && (isActive() || isCurrent())) {
|
|
7216
7239
|
<div class="substeps">
|
|
7217
7240
|
<ng-content />
|
|
7218
7241
|
</div>
|
|
@@ -7221,7 +7244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7221
7244
|
'data-testid': 'monkey-step',
|
|
7222
7245
|
'[attr.id]': 'id',
|
|
7223
7246
|
'[id]': 'id'
|
|
7224
|
-
}, 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
|
|
7247
|
+
}, 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 monkey-icon{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 monkey-icon{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"] }]
|
|
7225
7248
|
}], propDecorators: { subSteps: [{
|
|
7226
7249
|
type: ContentChildren,
|
|
7227
7250
|
args: [MonkeyStepComponent]
|
|
@@ -7262,43 +7285,43 @@ class MonkeyStepperComponent {
|
|
|
7262
7285
|
render() {
|
|
7263
7286
|
let stepFound = false;
|
|
7264
7287
|
this.steps.forEach((step, index) => {
|
|
7265
|
-
step.number
|
|
7266
|
-
step.isCurrent
|
|
7267
|
-
if (step.isCurrent) {
|
|
7288
|
+
step.number.set(index + 1);
|
|
7289
|
+
step.isCurrent.set(this.currentStep === step.step);
|
|
7290
|
+
if (step.isCurrent()) {
|
|
7268
7291
|
stepFound = true;
|
|
7269
7292
|
}
|
|
7270
|
-
if (step.hasSubSteps) {
|
|
7293
|
+
if (step.hasSubSteps()) {
|
|
7271
7294
|
step.subSteps.forEach((subStep) => {
|
|
7272
|
-
subStep.isSubStep
|
|
7273
|
-
subStep.isCurrent
|
|
7274
|
-
if (subStep.isCurrent) {
|
|
7295
|
+
subStep.isSubStep.set(true);
|
|
7296
|
+
subStep.isCurrent.set(this.currentStep === subStep.step);
|
|
7297
|
+
if (subStep.isCurrent()) {
|
|
7275
7298
|
stepFound = true;
|
|
7276
7299
|
}
|
|
7277
|
-
subStep.isComplete
|
|
7300
|
+
subStep.isComplete.set(!stepFound);
|
|
7278
7301
|
});
|
|
7279
|
-
step.isComplete
|
|
7302
|
+
step.isComplete.set(step.subSteps.toArray().every((_) => {
|
|
7280
7303
|
return _.isComplete;
|
|
7281
|
-
});
|
|
7282
|
-
step.isActive
|
|
7304
|
+
}));
|
|
7305
|
+
step.isActive.set(step.subSteps.toArray().some((_) => {
|
|
7283
7306
|
return _.isCurrent;
|
|
7284
|
-
});
|
|
7307
|
+
}));
|
|
7285
7308
|
}
|
|
7286
7309
|
else {
|
|
7287
|
-
step.isComplete
|
|
7310
|
+
step.isComplete.set(!stepFound);
|
|
7288
7311
|
}
|
|
7289
7312
|
});
|
|
7290
7313
|
}
|
|
7291
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7292
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
7314
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7315
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
7293
7316
|
}
|
|
7294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperComponent, decorators: [{
|
|
7295
7318
|
type: Component,
|
|
7296
7319
|
args: [{ selector: 'monkey-stepper', standalone: false, template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7297
7320
|
'data-testid': 'monkey-stepper',
|
|
7298
7321
|
'[attr.id]': 'monkeyId',
|
|
7299
7322
|
'[id]': 'monkeyId',
|
|
7300
7323
|
'[class.horizontal]': `direction === 'horizontal'`
|
|
7301
|
-
}, 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
|
|
7324
|
+
}, 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"] }]
|
|
7302
7325
|
}], propDecorators: { steps: [{
|
|
7303
7326
|
type: ContentChildren,
|
|
7304
7327
|
args: [MonkeyStepComponent]
|
|
@@ -7316,11 +7339,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7316
7339
|
* MIT Licence
|
|
7317
7340
|
************************* */
|
|
7318
7341
|
class MonkeyStepperModule {
|
|
7319
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7320
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
7321
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
7342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7343
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent, MonkeyIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
|
|
7344
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperModule }); }
|
|
7322
7345
|
}
|
|
7323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7346
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyStepperModule, decorators: [{
|
|
7324
7347
|
type: NgModule,
|
|
7325
7348
|
args: [{
|
|
7326
7349
|
declarations: [MonkeyStepperComponent, MonkeyStepComponent],
|
|
@@ -7349,12 +7372,12 @@ class MonkeyPaginationActionComponent {
|
|
|
7349
7372
|
// eslint-disable-next-line no-self-assign
|
|
7350
7373
|
this.id = this.id;
|
|
7351
7374
|
}
|
|
7352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
7375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
7354
7377
|
}
|
|
7355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
|
|
7356
7379
|
type: Component,
|
|
7357
|
-
args: [{ imports: [
|
|
7380
|
+
args: [{ imports: [MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
|
|
7358
7381
|
'data-testid': 'monkey-pagination-action',
|
|
7359
7382
|
'[attr.id]': 'id',
|
|
7360
7383
|
'[id]': 'id'
|
|
@@ -7394,10 +7417,10 @@ class MonkeyPaginationLabelComponent {
|
|
|
7394
7417
|
// eslint-disable-next-line no-self-assign
|
|
7395
7418
|
this.id = this.id;
|
|
7396
7419
|
}
|
|
7397
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7398
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
7420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
7399
7422
|
}
|
|
7400
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
|
|
7401
7424
|
type: Component,
|
|
7402
7425
|
args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
|
|
7403
7426
|
'data-testid': 'monkey-pagination-label',
|
|
@@ -7427,13 +7450,12 @@ class MonkeyPaginationSizeComponent {
|
|
|
7427
7450
|
// eslint-disable-next-line no-self-assign
|
|
7428
7451
|
this.id = this.id;
|
|
7429
7452
|
}
|
|
7430
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7453
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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", "displayOnly"], outputs: ["onDisplayOnlyChange"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
7432
7455
|
}
|
|
7433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
|
|
7434
7457
|
type: Component,
|
|
7435
7458
|
args: [{ imports: [
|
|
7436
|
-
CommonModule,
|
|
7437
7459
|
FormsModule,
|
|
7438
7460
|
ReactiveFormsModule,
|
|
7439
7461
|
MonkeySelectComponent,
|
|
@@ -7543,12 +7565,12 @@ class MonkeyTableComponent {
|
|
|
7543
7565
|
this.stateChanges.emit({ loading });
|
|
7544
7566
|
}
|
|
7545
7567
|
}
|
|
7546
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }); }
|
|
7548
7570
|
}
|
|
7549
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTableComponent, decorators: [{
|
|
7550
7572
|
type: Component,
|
|
7551
|
-
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
|
|
7573
|
+
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"] }]
|
|
7552
7574
|
}], propDecorators: { scroll: [{
|
|
7553
7575
|
type: Input
|
|
7554
7576
|
}], loading: [{
|
|
@@ -7624,7 +7646,9 @@ class MonkeyColumnChecked {
|
|
|
7624
7646
|
ngOnInit() {
|
|
7625
7647
|
this.el.nativeElement.style.pointerEvents = 'none';
|
|
7626
7648
|
this._subscriptions.add(this.table?.stateChanges?.subscribe(() => {
|
|
7627
|
-
|
|
7649
|
+
queueMicrotask(() => {
|
|
7650
|
+
this.handleDisableFromStateChanges(this.table.loading);
|
|
7651
|
+
});
|
|
7628
7652
|
}));
|
|
7629
7653
|
}
|
|
7630
7654
|
ngAfterViewInit() {
|
|
@@ -7658,10 +7682,10 @@ class MonkeyColumnChecked {
|
|
|
7658
7682
|
ngOnDestroy() {
|
|
7659
7683
|
this._subscriptions.unsubscribe();
|
|
7660
7684
|
}
|
|
7661
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7662
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
7685
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnChecked, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7686
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
7663
7687
|
}
|
|
7664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnChecked, decorators: [{
|
|
7665
7689
|
type: Directive,
|
|
7666
7690
|
args: [{
|
|
7667
7691
|
selector: '[mkChecked]',
|
|
@@ -7772,7 +7796,9 @@ class MonkeyColumnExpansible {
|
|
|
7772
7796
|
ngOnInit() {
|
|
7773
7797
|
this.disabled = this.table.loading;
|
|
7774
7798
|
this._subscriptions.add(this.table?.stateChanges?.subscribe(() => {
|
|
7775
|
-
|
|
7799
|
+
queueMicrotask(() => {
|
|
7800
|
+
this.disabled = this.table.loading;
|
|
7801
|
+
});
|
|
7776
7802
|
}));
|
|
7777
7803
|
this.createSvgElement(this._opened);
|
|
7778
7804
|
}
|
|
@@ -7790,10 +7816,10 @@ class MonkeyColumnExpansible {
|
|
|
7790
7816
|
ngOnDestroy() {
|
|
7791
7817
|
this._subscriptions.unsubscribe();
|
|
7792
7818
|
}
|
|
7793
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7794
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
7819
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnExpansible, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7820
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
7795
7821
|
}
|
|
7796
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnExpansible, decorators: [{
|
|
7797
7823
|
type: Directive,
|
|
7798
7824
|
args: [{
|
|
7799
7825
|
selector: '[mkExpansible]',
|
|
@@ -7823,13 +7849,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7823
7849
|
* MIT Licence
|
|
7824
7850
|
************************* */
|
|
7825
7851
|
class MonkeyColumnSortable {
|
|
7852
|
+
get disabled() {
|
|
7853
|
+
return !!this.table?.loading;
|
|
7854
|
+
}
|
|
7826
7855
|
constructor(el, renderer, table) {
|
|
7827
7856
|
this.el = el;
|
|
7828
7857
|
this.renderer = renderer;
|
|
7829
7858
|
this.table = table;
|
|
7830
7859
|
this._sortableDirection = null;
|
|
7831
7860
|
this.subscriptions = new Subscription();
|
|
7832
|
-
this.disabled = false;
|
|
7833
7861
|
// not to do
|
|
7834
7862
|
}
|
|
7835
7863
|
createSvgElement(direction) {
|
|
@@ -7860,10 +7888,6 @@ class MonkeyColumnSortable {
|
|
|
7860
7888
|
this.renderer.appendChild(this.el.nativeElement, svg);
|
|
7861
7889
|
}
|
|
7862
7890
|
ngOnInit() {
|
|
7863
|
-
this.disabled = this.table.loading;
|
|
7864
|
-
this.subscriptions.add(this.table?.stateChanges?.subscribe(() => {
|
|
7865
|
-
this.disabled = this.table.loading;
|
|
7866
|
-
}));
|
|
7867
7891
|
this.createSvgElement(this._sortableDirection);
|
|
7868
7892
|
}
|
|
7869
7893
|
onClick() {
|
|
@@ -7882,10 +7906,10 @@ class MonkeyColumnSortable {
|
|
|
7882
7906
|
ngOnDestroy() {
|
|
7883
7907
|
this.subscriptions.unsubscribe();
|
|
7884
7908
|
}
|
|
7885
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7886
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
7909
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnSortable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7910
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", 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 }); }
|
|
7887
7911
|
}
|
|
7888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnSortable, decorators: [{
|
|
7889
7913
|
type: Directive,
|
|
7890
7914
|
args: [{
|
|
7891
7915
|
selector: '[mkSortable]',
|
|
@@ -7919,10 +7943,10 @@ class MonkeyColumnStick {
|
|
|
7919
7943
|
constructor() {
|
|
7920
7944
|
this.position = 'right';
|
|
7921
7945
|
}
|
|
7922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7923
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
7946
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnStick, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7947
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyColumnStick, isStandalone: false, selector: "[mkStick]", inputs: { position: ["mkStick", "position"] }, host: { properties: { "class": "\"mecx-column-stick-\"+position" }, classAttribute: "mecx-column-stick" }, ngImport: i0 }); }
|
|
7924
7948
|
}
|
|
7925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7949
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyColumnStick, decorators: [{
|
|
7926
7950
|
type: Directive,
|
|
7927
7951
|
args: [{
|
|
7928
7952
|
selector: '[mkStick]',
|
|
@@ -7943,8 +7967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7943
7967
|
* MIT Licence
|
|
7944
7968
|
************************* */
|
|
7945
7969
|
class MonkeyTableModule {
|
|
7946
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7947
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
7970
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7971
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTableModule, declarations: [MonkeyTableComponent,
|
|
7948
7972
|
MonkeyColumnStick,
|
|
7949
7973
|
MonkeyColumnChecked,
|
|
7950
7974
|
MonkeyColumnSortable,
|
|
@@ -7957,12 +7981,10 @@ class MonkeyTableModule {
|
|
|
7957
7981
|
MonkeyColumnChecked,
|
|
7958
7982
|
MonkeyColumnSortable,
|
|
7959
7983
|
MonkeyColumnExpansible] }); }
|
|
7960
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
7961
|
-
|
|
7962
|
-
MonkeyPaginationSizeComponent,
|
|
7963
|
-
MonkeyPaginationActionComponent] }); }
|
|
7984
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTableModule, imports: [CommonModule,
|
|
7985
|
+
MonkeyPaginationSizeComponent] }); }
|
|
7964
7986
|
}
|
|
7965
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTableModule, decorators: [{
|
|
7966
7988
|
type: NgModule,
|
|
7967
7989
|
args: [{
|
|
7968
7990
|
imports: [
|
|
@@ -8042,16 +8064,16 @@ class MonkeyTabLinkDirective {
|
|
|
8042
8064
|
}
|
|
8043
8065
|
}
|
|
8044
8066
|
}
|
|
8045
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8046
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
8067
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabLinkDirective, deps: [{ token: Router, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8068
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.6", 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 }); }
|
|
8047
8069
|
}
|
|
8048
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8070
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabLinkDirective, decorators: [{
|
|
8049
8071
|
type: Directive,
|
|
8050
8072
|
args: [{
|
|
8051
8073
|
selector: '[monkey-tab-link]',
|
|
8052
8074
|
standalone: false
|
|
8053
8075
|
}]
|
|
8054
|
-
}], ctorParameters: () => [{ type: i1$
|
|
8076
|
+
}], ctorParameters: () => [{ type: i1$3.Router, decorators: [{
|
|
8055
8077
|
type: Optional
|
|
8056
8078
|
}, {
|
|
8057
8079
|
type: Inject,
|
|
@@ -8084,14 +8106,14 @@ class MonkeyTabComponent {
|
|
|
8084
8106
|
this.onClick.emit(this.value);
|
|
8085
8107
|
}
|
|
8086
8108
|
}
|
|
8087
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8088
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
8109
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8110
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.6", 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: `
|
|
8089
8111
|
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
8090
8112
|
<ng-content />
|
|
8091
8113
|
</button>
|
|
8092
8114
|
`, isInline: true, styles: [":host{display:block}\n"] }); }
|
|
8093
8115
|
}
|
|
8094
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabComponent, decorators: [{
|
|
8095
8117
|
type: Component,
|
|
8096
8118
|
args: [{ selector: 'monkey-tab', standalone: false, template: `
|
|
8097
8119
|
<button type="button" [disabled]="disabled" (click)="handleClick()">
|
|
@@ -8106,6 +8128,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8106
8128
|
}], onClick: [{
|
|
8107
8129
|
type: Output
|
|
8108
8130
|
}], isSelected: [{
|
|
8131
|
+
type: Input
|
|
8132
|
+
}, {
|
|
8109
8133
|
type: HostBinding,
|
|
8110
8134
|
args: ['class.selected']
|
|
8111
8135
|
}] } });
|
|
@@ -8196,8 +8220,8 @@ class MonkeyTabsComponent {
|
|
|
8196
8220
|
ngOnDestroy() {
|
|
8197
8221
|
this.resizeObserver?.disconnect();
|
|
8198
8222
|
}
|
|
8199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8200
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8224
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
|
|
8201
8225
|
@if (hasScroll) {
|
|
8202
8226
|
<button
|
|
8203
8227
|
class="scroll-arrow scroll-arrow-left"
|
|
@@ -8232,7 +8256,7 @@ class MonkeyTabsComponent {
|
|
|
8232
8256
|
}
|
|
8233
8257
|
`, 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 }); }
|
|
8234
8258
|
}
|
|
8235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabsComponent, decorators: [{
|
|
8236
8260
|
type: Component,
|
|
8237
8261
|
args: [{ selector: 'monkey-tabs', standalone: false, encapsulation: ViewEncapsulation.None, template: `
|
|
8238
8262
|
@if (hasScroll) {
|
|
@@ -8298,11 +8322,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8298
8322
|
* MIT Licence
|
|
8299
8323
|
************************* */
|
|
8300
8324
|
class MonkeyTabsModule {
|
|
8301
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8302
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
8303
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
8325
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8326
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabsModule, declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective], exports: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective] }); }
|
|
8327
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabsModule }); }
|
|
8304
8328
|
}
|
|
8305
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8329
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTabsModule, decorators: [{
|
|
8306
8330
|
type: NgModule,
|
|
8307
8331
|
args: [{
|
|
8308
8332
|
declarations: [MonkeyTabsComponent, MonkeyTabComponent, MonkeyTabLinkDirective],
|
|
@@ -8333,7 +8357,6 @@ class MonkeyToastComponent {
|
|
|
8333
8357
|
this.onActionClick = new EventEmitter();
|
|
8334
8358
|
this.onClose = new EventEmitter();
|
|
8335
8359
|
this._uid = inject(IdGenerator).getId('monkey-toast-');
|
|
8336
|
-
this.animationState = 'hidden';
|
|
8337
8360
|
// eslint-disable-next-line no-self-assign
|
|
8338
8361
|
this.id = this.id;
|
|
8339
8362
|
}
|
|
@@ -8345,10 +8368,10 @@ class MonkeyToastComponent {
|
|
|
8345
8368
|
this.onClose.emit(this.id);
|
|
8346
8369
|
}
|
|
8347
8370
|
}
|
|
8348
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\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 <monkey-icon [icon]=\"actionIcon\" size=\"xs\" first></monkey-icon>\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: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8350
8373
|
}
|
|
8351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToastComponent, decorators: [{
|
|
8352
8375
|
type: Component,
|
|
8353
8376
|
args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
|
|
8354
8377
|
'data-testid': 'monkey-toast',
|
|
@@ -8378,9 +8401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8378
8401
|
}], class: [{
|
|
8379
8402
|
type: HostBinding,
|
|
8380
8403
|
args: ['class']
|
|
8381
|
-
}], animationState: [{
|
|
8382
|
-
type: HostBinding,
|
|
8383
|
-
args: ['animation']
|
|
8384
8404
|
}] } });
|
|
8385
8405
|
|
|
8386
8406
|
/** ************************
|
|
@@ -8427,10 +8447,10 @@ class MonkeyToggleComponent {
|
|
|
8427
8447
|
this._checked = !this._checked;
|
|
8428
8448
|
}
|
|
8429
8449
|
}
|
|
8430
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8431
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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"] }] }); }
|
|
8432
8452
|
}
|
|
8433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
|
|
8434
8454
|
type: Component,
|
|
8435
8455
|
args: [{ selector: 'monkey-toggle', imports: [CommonModule], host: {
|
|
8436
8456
|
'data-testid': 'monkey-toggle',
|
|
@@ -8474,16 +8494,20 @@ class MonkeyToggleLineButtonComponent {
|
|
|
8474
8494
|
this.disabled = false;
|
|
8475
8495
|
this.onChange = new EventEmitter();
|
|
8476
8496
|
}
|
|
8477
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8478
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8497
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToggleLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8498
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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 monkey-icon{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 monkey-icon{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] monkey-icon{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] monkey-icon{color:var(--mecx-color-white)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8479
8499
|
}
|
|
8480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToggleLineButtonComponent, decorators: [{
|
|
8481
8501
|
type: Component,
|
|
8482
|
-
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 monkey-icon{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 monkey-icon{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color
|
|
8502
|
+
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 monkey-icon{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 monkey-icon{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] monkey-icon{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] monkey-icon{color:var(--mecx-color-white)}\n"] }]
|
|
8483
8503
|
}], propDecorators: { disabled: [{
|
|
8484
8504
|
type: Input
|
|
8485
8505
|
}], onChange: [{
|
|
8486
8506
|
type: Output
|
|
8507
|
+
}], value: [{
|
|
8508
|
+
type: Input
|
|
8509
|
+
}], name: [{
|
|
8510
|
+
type: Input
|
|
8487
8511
|
}] } });
|
|
8488
8512
|
|
|
8489
8513
|
/** ************************
|
|
@@ -8540,16 +8564,16 @@ class MonkeyToggleLineComponent {
|
|
|
8540
8564
|
ngOnDestroy() {
|
|
8541
8565
|
this.subscriptions.unsubscribe();
|
|
8542
8566
|
}
|
|
8543
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
8567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToggleLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.6", 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 monkey-icon{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.lg{min-height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{min-height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{min-height:32px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
|
|
8545
8569
|
}
|
|
8546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyToggleLineComponent, decorators: [{
|
|
8547
8571
|
type: Component,
|
|
8548
|
-
args: [{ selector: 'monkey-toggle-line', imports: [
|
|
8572
|
+
args: [{ selector: 'monkey-toggle-line', imports: [], encapsulation: ViewEncapsulation.None, host: {
|
|
8549
8573
|
'data-testid': 'monkey-toggle-line',
|
|
8550
8574
|
'[attr.id]': 'id',
|
|
8551
8575
|
'[id]': 'id'
|
|
8552
|
-
}, 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 monkey-icon{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}monkey-toggle-line.lg
|
|
8576
|
+
}, 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 monkey-icon{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.lg{min-height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{min-height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{min-height:32px}\n"] }]
|
|
8553
8577
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
8554
8578
|
type: Input
|
|
8555
8579
|
}], name: [{
|
|
@@ -8604,10 +8628,10 @@ class MonkeyTooltipComponent {
|
|
|
8604
8628
|
this.afterClose.emit(true);
|
|
8605
8629
|
}
|
|
8606
8630
|
}
|
|
8607
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8608
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8631
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8632
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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"] }] }); }
|
|
8609
8633
|
}
|
|
8610
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
|
|
8611
8635
|
type: Component,
|
|
8612
8636
|
args: [{ selector: 'monkey-tooltip', imports: [NgTemplateOutlet], host: {
|
|
8613
8637
|
'data-testid': 'monkey-tooltip',
|
|
@@ -8789,10 +8813,10 @@ class MonkeyTooltipDirective {
|
|
|
8789
8813
|
onScroll() {
|
|
8790
8814
|
this.hide();
|
|
8791
8815
|
}
|
|
8792
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8793
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
8816
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8817
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.6", 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 }); }
|
|
8794
8818
|
}
|
|
8795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8819
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
|
|
8796
8820
|
type: Directive,
|
|
8797
8821
|
args: [{
|
|
8798
8822
|
selector: '[monkeyTooltip]',
|
|
@@ -8857,8 +8881,8 @@ class MonkeyUserProfileButtonComponent {
|
|
|
8857
8881
|
event.preventDefault();
|
|
8858
8882
|
this.open = true;
|
|
8859
8883
|
}
|
|
8860
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8861
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8884
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyUserProfileButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", 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: `
|
|
8862
8886
|
<monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
|
|
8863
8887
|
<div class="lh-24 text-truncate flex-grow-1 fs-xxs text-gray-900">
|
|
8864
8888
|
{{ name }}
|
|
@@ -8878,7 +8902,7 @@ class MonkeyUserProfileButtonComponent {
|
|
|
8878
8902
|
</ng-template>
|
|
8879
8903
|
`, 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 }); }
|
|
8880
8904
|
}
|
|
8881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8905
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyUserProfileButtonComponent, decorators: [{
|
|
8882
8906
|
type: Component,
|
|
8883
8907
|
args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyAvatarComponent, UtilIconComponent, MonkeyPopoverDirective], selector: 'monkey-user-profile-button', template: `
|
|
8884
8908
|
<monkey-avatar [size]="size" [src]="iconName ? { iconName } : { name }" />
|
|
@@ -8983,10 +9007,10 @@ class MonkeyBadgeDirective {
|
|
|
8983
9007
|
renderer.removeStyle(el.nativeElement, 'position');
|
|
8984
9008
|
this.badgeEl = null;
|
|
8985
9009
|
}
|
|
8986
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8987
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
9010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
9011
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: MonkeyBadgeDirective, isStandalone: true, selector: "[monkeyBadge]", inputs: { badgePosition: "badgePosition", badgeSize: "badgeSize", badgeHidden: "badgeHidden", monkeyBadge: "monkeyBadge", badgeBackground: "badgeBackground", badgeColor: "badgeColor" }, usesOnChanges: true, ngImport: i0 }); }
|
|
8988
9012
|
}
|
|
8989
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MonkeyBadgeDirective, decorators: [{
|
|
8990
9014
|
type: Directive,
|
|
8991
9015
|
args: [{
|
|
8992
9016
|
selector: '[monkeyBadge]'
|