monkey-style-guide 21.0.3 → 21.0.4

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.
Files changed (8) hide show
  1. package/assets/scss/partials/_icons.scss +38 -0
  2. package/assets/scss/partials/_index.scss +1 -0
  3. package/fesm2022/monkey-style-guide.mjs +249 -99
  4. package/fesm2022/monkey-style-guide.mjs.map +1 -1
  5. package/monkey-style-guide-21.0.4.tgz +0 -0
  6. package/package.json +1 -1
  7. package/types/monkey-style-guide.d.ts +45 -23
  8. package/monkey-style-guide-21.0.3.tgz +0 -0
package/fesm2022/monkey-style-guide.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
2
2
  import * as i1 from '@angular/common';
3
- import { CommonModule, NgTemplateOutlet, CurrencyPipe } from '@angular/common';
3
+ import { CommonModule, NgTemplateOutlet, CurrencyPipe, AsyncPipe } from '@angular/common';
4
4
  import * as i0 from '@angular/core';
5
5
  import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, effect, HostListener, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, Injector, forwardRef, ChangeDetectionStrategy, ViewChildren, DOCUMENT } from '@angular/core';
6
6
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -79,6 +79,13 @@ function normalizeStringToSearch(text) {
79
79
  .replace(/[\u0300-\u036f]/g, '')
80
80
  .toLowerCase();
81
81
  }
82
+ function shuffle(array) {
83
+ for (let i = array.length - 1; i > 0; i--) {
84
+ const j = Math.floor(Math.random() * (i + 1));
85
+ [array[i], array[j]] = [array[j], array[i]];
86
+ }
87
+ return array;
88
+ }
82
89
 
83
90
  /* eslint-disable max-len */
84
91
  class UtilIconComponent {
@@ -757,59 +764,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
757
764
  * MIT Licence
758
765
  ************************* */
759
766
 
760
- /** ************************
761
- * Copyright Monkey Exchange. All Rights Reserved
762
- * This style guide was developed by Monkey Exchange Team
763
- * MIT Licence
764
- ************************* */
765
- class MonkeyIconComponent {
766
- set icon(val) {
767
- if (val) {
768
- this._icon = `mk-i mk-i-${val}`;
769
- }
770
- }
771
- get id() {
772
- return this._id;
773
- }
774
- set id(value) {
775
- this._id = value || this._uid;
776
- }
777
- constructor() {
778
- this.size = 'lg';
779
- this._icon = '';
780
- this._uid = inject(IdGenerator).getId('monkey-icon-');
781
- // eslint-disable-next-line no-self-assign
782
- this.id = this.id;
783
- }
784
- ngOnInit() {
785
- if (!this._icon) {
786
- throw new Error('monkey-icon must have icon input');
787
- }
788
- }
789
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
790
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
791
- }
792
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyIconComponent, decorators: [{
793
- type: Component,
794
- args: [{ selector: 'monkey-icon', imports: [], template: '', encapsulation: ViewEncapsulation.None, host: {
795
- '[class]': `_icon+' '+size`,
796
- '[attr.id]': 'id',
797
- '[id]': 'id'
798
- }, styles: ["monkey-icon{display:inline-flex;align-items:center;justify-content:center}monkey-icon.sm{font-size:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"] }]
799
- }], ctorParameters: () => [], propDecorators: { icon: [{
800
- type: Input
801
- }], size: [{
802
- type: Input
803
- }], id: [{
804
- type: Input
805
- }] } });
806
-
807
- /** ************************
808
- * Copyright Monkey Exchange. All Rights Reserved
809
- * This style guide was developed by Monkey Exchange Team
810
- * MIT Licence
811
- ************************* */
812
-
813
767
  /** ************************
814
768
  * Copyright Monkey Exchange. All Rights Reserved
815
769
  * This style guide was developed by Monkey Exchange Team
@@ -843,15 +797,15 @@ class MonkeyAlertComponent {
843
797
  return typeIcons[type];
844
798
  }
845
799
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
846
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
800
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <i class=\"mk-i mk-i-{{icon(type())}} {{'monkey-alert__card__type-' + type()}}\"></i>\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-medium fs-base\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
847
801
  }
848
802
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
849
803
  type: Component,
850
- args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyIconComponent], selector: 'monkey-alert', host: {
804
+ args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-alert', host: {
851
805
  'data-testid': 'monkey-alert',
852
806
  '[attr.id]': 'id',
853
807
  '[id]': 'id'
854
- }, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <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"] }]
808
+ }, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n @if (type()) {\n <i class=\"mk-i mk-i-{{icon(type())}} {{'monkey-alert__card__type-' + type()}}\"></i>\n }\n <div class=\"monkey-alert__card__content\">\n <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n @if (buttonLabel()) {\n <div>\n <a\n href=\"javascript:void(0)\"\n class=\"mecx-link fw-medium fs-base\"\n (click)=\"onButtonClicked.emit()\"\n >\n <span>{{ buttonLabel() }}</span>\n </a>\n </div>\n }\n </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .mecx-link{letter-spacing:.42px}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:var(--mecx-spaces-xs);padding:var(--mecx-spaces-cozy)}monkey-alert .monkey-alert__card.alert{background-color:var(--mecx-color-warning-100);border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:var(--mecx-color-success-100);border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column}monkey-alert .monkey-alert__card__title{color:var(--mecx-color-gray-900);font-size:var(--mecx-fs-base);font-weight:var(--mecx-fw-semibold);letter-spacing:.14px;line-height:var(--mecx-lh-24)}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:var(--mecx-fs-xxs);font-weight:var(--mecx-fw-regular);letter-spacing:.14px;line-height:var(--mecx-lh-24);margin-bottom:8px}\n"] }]
855
809
  }], ctorParameters: () => [], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], onButtonClicked: [{ type: i0.Output, args: ["onButtonClicked"] }], id: [{
856
810
  type: Input
857
811
  }] } });
@@ -1377,7 +1331,8 @@ class MonkeyDictionaryService {
1377
1331
  NEXT_6_MONTHS: 'Próximos 6 meses',
1378
1332
  NEXT_12_MONTHS: 'Próximos 12 meses'
1379
1333
  }
1380
- }
1334
+ },
1335
+ OR: 'ou'
1381
1336
  },
1382
1337
  'es-CL': {
1383
1338
  EDIT: 'Editar',
@@ -1422,7 +1377,8 @@ class MonkeyDictionaryService {
1422
1377
  NEXT_6_MONTHS: 'Próximos 6 meses',
1423
1378
  NEXT_12_MONTHS: 'Próximos 12 meses'
1424
1379
  }
1425
- }
1380
+ },
1381
+ OR: 'o'
1426
1382
  },
1427
1383
  'es-MX': {
1428
1384
  EDIT: 'Editar',
@@ -1467,7 +1423,8 @@ class MonkeyDictionaryService {
1467
1423
  NEXT_6_MONTHS: 'Próximos 6 meses',
1468
1424
  NEXT_12_MONTHS: 'Próximos 12 meses'
1469
1425
  }
1470
- }
1426
+ },
1427
+ OR: 'o'
1471
1428
  },
1472
1429
  'en-US': {
1473
1430
  EDIT: 'Edit',
@@ -1512,7 +1469,8 @@ class MonkeyDictionaryService {
1512
1469
  NEXT_6_MONTHS: 'Next 6 months',
1513
1470
  NEXT_12_MONTHS: 'Next 12 months'
1514
1471
  }
1515
- }
1472
+ },
1473
+ OR: 'or'
1516
1474
  }
1517
1475
  });
1518
1476
  const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
@@ -3052,15 +3010,15 @@ class MonkeyAvatarComponent {
3052
3010
  }
3053
3011
  }
3054
3012
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3055
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
3013
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonkeyAvatarComponent, isStandalone: true, selector: "monkey-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-avatar" }, properties: { "attr.id": "_id", "id": "_id", "class": "this.classes" } }, ngImport: i0, template: "@switch (avatarType) {\n @case ('name') {\n <p [class]=\"size()\">{{ avatar }}</p>\n }\n\n @case ('icon') {\n <i class=\"mk-i mk-i-{{ avatar }} {{size()}}\"></i>\n }\n\n @case ('image') {\n <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n }\n}\n", styles: ["monkey-avatar{align-items:center;background:var(--mecx-color-gray-100);border-radius:4px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center}monkey-avatar.xs{height:24px;width:24px}monkey-avatar.sm{height:32px;width:32px}monkey-avatar.md{border-radius:8px;height:40px;width:40px}monkey-avatar.lg{border-radius:12px;height:48px;width:48px}monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}monkey-avatar p.xs{font-size:16px}monkey-avatar p.sm{font-size:18px}monkey-avatar p.md{font-size:20px}monkey-avatar p.lg{font-size:22px}monkey-avatar img{border-radius:4px;height:auto}monkey-avatar img.xs{width:24px}monkey-avatar img.sm{width:32px}monkey-avatar img.md{border-radius:8px;width:40px}monkey-avatar img.lg{border-radius:12px;width:48px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
3056
3014
  }
3057
3015
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
3058
3016
  type: Component,
3059
- args: [{ imports: [MonkeyIconComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
3017
+ args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-avatar', host: {
3060
3018
  'data-testid': 'monkey-avatar',
3061
3019
  '[attr.id]': '_id',
3062
3020
  '[id]': '_id'
3063
- }, template: "@switch (avatarType) {\n @case ('name') {\n <p [class]=\"size()\">{{ avatar }}</p>\n }\n\n @case ('icon') {\n <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"] }]
3021
+ }, template: "@switch (avatarType) {\n @case ('name') {\n <p [class]=\"size()\">{{ avatar }}</p>\n }\n\n @case ('icon') {\n <i class=\"mk-i mk-i-{{ avatar }} {{size()}}\"></i>\n }\n\n @case ('image') {\n <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n }\n}\n", styles: ["monkey-avatar{align-items:center;background:var(--mecx-color-gray-100);border-radius:4px;display:flex;flex-shrink:0;flex-direction:column;justify-content:center}monkey-avatar.xs{height:24px;width:24px}monkey-avatar.sm{height:32px;width:32px}monkey-avatar.md{border-radius:8px;height:40px;width:40px}monkey-avatar.lg{border-radius:12px;height:48px;width:48px}monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}monkey-avatar p.xs{font-size:16px}monkey-avatar p.sm{font-size:18px}monkey-avatar p.md{font-size:20px}monkey-avatar p.lg{font-size:22px}monkey-avatar img{border-radius:4px;height:auto}monkey-avatar img.xs{width:24px}monkey-avatar img.sm{width:32px}monkey-avatar img.md{border-radius:8px;width:40px}monkey-avatar img.lg{border-radius:12px;width:48px}\n"] }]
3064
3022
  }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], classes: [{
3065
3023
  type: HostBinding,
3066
3024
  args: ['class']
@@ -3109,14 +3067,14 @@ class MonkeyBadgeComponent {
3109
3067
  }
3110
3068
  }
3111
3069
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3112
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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"] }] }); }
3070
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonkeyBadgeComponent, isStandalone: true, selector: "monkey-badge", inputs: { type: "type", typeColors: "typeColors", size: "size", largePadding: ["largePadding", "largePadding", booleanAttribute], icon: "icon", text: "text" }, host: { attributes: { "data-testid": "monkey-badge" }, properties: { "attr.id": "id", "style": "this.hostVariables", "class": "this.size", "class.large-padding": "this.largePadding" } }, ngImport: i0, template: "@if (text) {\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}}\"></i>\n }\n <span>\n {{ text }}\n </span>\n} @else {\n <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;border-radius:8px;align-items:center;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, var(--mecx-color-gray-900));background-color:var(--monkey-badge-background, var(--mecx-color-gray-50))}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px;padding:4px 8px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px;padding:8px 12px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px;padding:12px 16px}:host.lg .icon{font-size:24px}\n"] }); }
3113
3071
  }
3114
3072
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyBadgeComponent, decorators: [{
3115
3073
  type: Component,
3116
- args: [{ selector: 'monkey-badge', imports: [MonkeyIconComponent], host: {
3074
+ args: [{ selector: 'monkey-badge', host: {
3117
3075
  'data-testid': 'monkey-badge',
3118
3076
  '[attr.id]': 'id'
3119
- }, template: "@if (text) {\n @if (icon) {\n <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"] }]
3077
+ }, template: "@if (text) {\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}}\"></i>\n }\n <span>\n {{ text }}\n </span>\n} @else {\n <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;border-radius:8px;align-items:center;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, var(--mecx-color-gray-900));background-color:var(--monkey-badge-background, var(--mecx-color-gray-50))}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px;padding:4px 8px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px;padding:8px 12px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px;padding:12px 16px}:host.lg .icon{font-size:24px}\n"] }]
3120
3078
  }], propDecorators: { hostVariables: [{
3121
3079
  type: HostBinding,
3122
3080
  args: ['style']
@@ -3911,15 +3869,15 @@ class MonkeyIconButtonComponent {
3911
3869
  }
3912
3870
  }
3913
3871
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3914
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
3872
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 <i class=\"mk-i mk-i-{{icon}} {{size}}\"></i>\n }\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
3915
3873
  }
3916
3874
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
3917
3875
  type: Component,
3918
- args: [{ selector: 'monkey-icon-button', imports: [CommonModule, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
3876
+ args: [{ selector: 'monkey-icon-button', imports: [CommonModule, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
3919
3877
  'data-testid': 'monkey-icon-button',
3920
3878
  '[attr.id]': 'id',
3921
3879
  '[id]': 'id'
3922
- }, 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"] }]
3880
+ }, 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 <i class=\"mk-i mk-i-{{icon}} {{size}}\"></i>\n }\n </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:var(--mecx-spaces-small);transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button.secondary{border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white)}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus-visible{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}.mecx-icon-loading{display:flex}.mecx-icon-loading svg path{fill:var(--mecx-color-theme-main)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
3923
3881
  }], ctorParameters: () => [], propDecorators: { type: [{
3924
3882
  type: Input
3925
3883
  }], size: [{
@@ -6461,7 +6419,7 @@ class MonkeyModalComponent {
6461
6419
  <div class="mecx-modal-header-title">
6462
6420
  @if (modalRef?.icon) {
6463
6421
  <div class="mecx-modal-header-icon">
6464
- <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
6422
+ <i class="mk-i mk-i-{{modalRef?.icon}}"></i>
6465
6423
  </div>
6466
6424
  }
6467
6425
  <ng-content select="monkey-modal-title"></ng-content>
@@ -6486,7 +6444,7 @@ class MonkeyModalComponent {
6486
6444
  <ng-content select="[monkey-modal-content]"></ng-content>
6487
6445
  <ng-content select="monkey-modal-actions"></ng-content>
6488
6446
  <ng-content select="[monkey-modal-actions]"></ng-content>
6489
- `, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:var(--mecx-color-white);border-radius:16px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:16px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--mecx-color-gray-200);padding:16px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:var(--mecx-color-overlay)}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
6447
+ `, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:var(--mecx-color-white);border-radius:16px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:16px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--mecx-color-gray-200);padding:16px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:var(--mecx-color-overlay)}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "loading", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
6490
6448
  }
6491
6449
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyModalComponent, decorators: [{
6492
6450
  type: Component,
@@ -6496,7 +6454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
6496
6454
  <div class="mecx-modal-header-title">
6497
6455
  @if (modalRef?.icon) {
6498
6456
  <div class="mecx-modal-header-icon">
6499
- <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
6457
+ <i class="mk-i mk-i-{{modalRef?.icon}}"></i>
6500
6458
  </div>
6501
6459
  }
6502
6460
  <ng-content select="monkey-modal-title"></ng-content>
@@ -6578,7 +6536,7 @@ class MonkeyModalConfirmationComponent {
6578
6536
  <monkey-modal-content>
6579
6537
  @if (config.icon) {
6580
6538
  <div class="modal-confirmation-icon {{ config.type }}">
6581
- <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
6539
+ <i class="mk-i mk-i-{{ config.icon }} xxl"></i>
6582
6540
  </div>
6583
6541
  }
6584
6542
  <div class="confirmation-title" [innerHTML]="config.title"></div>
@@ -6589,7 +6547,7 @@ class MonkeyModalConfirmationComponent {
6589
6547
  <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
6590
6548
  </monkey-modal-actions>
6591
6549
  </monkey-modal>
6592
- `, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon 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 }); }
6550
+ `, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon i{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning i{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error i{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success i{color:var(--mecx-color-success-500)}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
6593
6551
  }
6594
6552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
6595
6553
  type: Component,
@@ -6598,7 +6556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
6598
6556
  <monkey-modal-content>
6599
6557
  @if (config.icon) {
6600
6558
  <div class="modal-confirmation-icon {{ config.type }}">
6601
- <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
6559
+ <i class="mk-i mk-i-{{ config.icon }} xxl"></i>
6602
6560
  </div>
6603
6561
  }
6604
6562
  <div class="confirmation-title" [innerHTML]="config.title"></div>
@@ -6609,7 +6567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
6609
6567
  <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
6610
6568
  </monkey-modal-actions>
6611
6569
  </monkey-modal>
6612
- `, standalone: false, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon 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"] }]
6570
+ `, standalone: false, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 8px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon i{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning i{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error i{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success i{color:var(--mecx-color-success-500)}\n"] }]
6613
6571
  }], ctorParameters: () => [{ type: undefined, decorators: [{
6614
6572
  type: Inject,
6615
6573
  args: [MECX_MODAL_CONFIRMATION_CONFIG]
@@ -6686,7 +6644,7 @@ class MonkeyModalModule {
6686
6644
  MonkeyModalTitleDirective,
6687
6645
  MonkeyModalSubtitleDirective,
6688
6646
  MonkeyModalContentDirective,
6689
- MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent], exports: [MonkeyModalComponent,
6647
+ MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent], exports: [MonkeyModalComponent,
6690
6648
  MonkeyModalTitleDirective,
6691
6649
  MonkeyModalSubtitleDirective,
6692
6650
  MonkeyModalContentDirective,
@@ -6696,7 +6654,7 @@ class MonkeyModalModule {
6696
6654
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyModalModule, decorators: [{
6697
6655
  type: NgModule,
6698
6656
  args: [{
6699
- imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent],
6657
+ imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent],
6700
6658
  declarations: [
6701
6659
  MonkeyModalComponent,
6702
6660
  MonkeyModalDefaultComponent,
@@ -7186,7 +7144,7 @@ class MonkeyStepComponent {
7186
7144
  <div class="step">
7187
7145
  <div class="number" [class.icon]="!!icon">
7188
7146
  @if (icon) {
7189
- <monkey-icon size="sm" [icon]="icon" />
7147
+ <i class="mk-i mk-i-{{ icon }} sm"></i>
7190
7148
  } @else if (isComplete()) {
7191
7149
  <util-icon name="check" />
7192
7150
  } @else {
@@ -7198,7 +7156,7 @@ class MonkeyStepComponent {
7198
7156
  <div>{{ label }}</div>
7199
7157
  @if (isCurrent()) {
7200
7158
  <div class="current-icon">
7201
- <monkey-icon icon="arrow-line-right" size="sm" />
7159
+ <i class="mk-i mk-i-arrow-line-right sm"></i>
7202
7160
  </div>
7203
7161
  }
7204
7162
  </div>
@@ -7208,7 +7166,7 @@ class MonkeyStepComponent {
7208
7166
  <ng-content />
7209
7167
  </div>
7210
7168
  }
7211
- `, isInline: true, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon 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"] }] }); }
7169
+ `, isInline: true, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon i{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number i{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
7212
7170
  }
7213
7171
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyStepComponent, decorators: [{
7214
7172
  type: Component,
@@ -7223,7 +7181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
7223
7181
  <div class="step">
7224
7182
  <div class="number" [class.icon]="!!icon">
7225
7183
  @if (icon) {
7226
- <monkey-icon size="sm" [icon]="icon" />
7184
+ <i class="mk-i mk-i-{{ icon }} sm"></i>
7227
7185
  } @else if (isComplete()) {
7228
7186
  <util-icon name="check" />
7229
7187
  } @else {
@@ -7235,7 +7193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
7235
7193
  <div>{{ label }}</div>
7236
7194
  @if (isCurrent()) {
7237
7195
  <div class="current-icon">
7238
- <monkey-icon icon="arrow-line-right" size="sm" />
7196
+ <i class="mk-i mk-i-arrow-line-right sm"></i>
7239
7197
  </div>
7240
7198
  }
7241
7199
  </div>
@@ -7249,7 +7207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
7249
7207
  'data-testid': 'monkey-step',
7250
7208
  '[attr.id]': 'id',
7251
7209
  '[id]': 'id'
7252
- }, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon 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"] }]
7210
+ }, styles: [":host{display:block}:host .item{display:flex;gap:var(--mecx-spaces-xs);align-items:center}:host .step .number{flex-shrink:0;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px var(--mecx-color-gray-700);box-sizing:border-box;width:18px;height:18px}:host .step .number.icon{border:none}:host .label{display:flex;align-items:center;gap:var(--mecx-spaces-xs);justify-content:space-between;width:100%}@media(max-width:575.98px){:host .label{text-align:center}}:host .substeps{display:flex;flex-direction:column;gap:var(--mecx-spaces-xs);margin-top:var(--mecx-spaces-small);margin-left:18px}:host .substeps .number{display:none}:host .active{color:var(--mecx-color-gray-900)}:host .active .number{border-color:var(--mecx-color-theme-main);color:var(--mecx-color-theme-main)}:host .current{color:var(--mecx-color-theme-main)}:host .current .number{border-color:var(--mecx-color-theme-main)}:host .current-icon{display:flex;align-items:center;color:var(--mecx-color-theme-main)}:host .current-icon i{color:var(--mecx-color-theme-main)}:host .complete .number{border-color:var(--mecx-color-success-main);background:var(--mecx-color-success-main);color:var(--mecx-color-white)}:host .complete .number i{color:var(--mecx-color-white)}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
7253
7211
  }], propDecorators: { subSteps: [{
7254
7212
  type: ContentChildren,
7255
7213
  args: [MonkeyStepComponent]
@@ -7345,14 +7303,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
7345
7303
  ************************* */
7346
7304
  class MonkeyStepperModule {
7347
7305
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
7348
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent, MonkeyIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
7306
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MonkeyStepperModule, declarations: [MonkeyStepperComponent, MonkeyStepComponent], imports: [UtilIconComponent], exports: [MonkeyStepperComponent, MonkeyStepComponent] }); }
7349
7307
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyStepperModule }); }
7350
7308
  }
7351
7309
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyStepperModule, decorators: [{
7352
7310
  type: NgModule,
7353
7311
  args: [{
7354
7312
  declarations: [MonkeyStepperComponent, MonkeyStepComponent],
7355
- imports: [UtilIconComponent, MonkeyIconComponent],
7313
+ imports: [UtilIconComponent],
7356
7314
  exports: [MonkeyStepperComponent, MonkeyStepComponent]
7357
7315
  }]
7358
7316
  }] });
@@ -8374,16 +8332,16 @@ class MonkeyToastComponent {
8374
8332
  }
8375
8333
  }
8376
8334
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
8377
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
8335
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}} lg\"></i>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "color", "size", "type", "loading", "id"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
8378
8336
  }
8379
8337
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyToastComponent, decorators: [{
8380
8338
  type: Component,
8381
- args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, MonkeyIconComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
8339
+ args: [{ selector: 'monkey-toast', imports: [MonkeyButtonComponent, UtilIconComponent], encapsulation: ViewEncapsulation.None, host: {
8382
8340
  'data-testid': 'monkey-toast',
8383
8341
  '(animationend)': 'onAnimationEnd($event)',
8384
8342
  '[attr.id]': 'id',
8385
8343
  '[id]': 'id'
8386
- }, 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"] }]
8344
+ }, template: "<div class=\"monkey-toast-content\">\n @if (icon) {\n <i class=\"mk-i mk-i-{{icon}} lg\"></i>\n }\n <div>\n <div class=\"monkey-toast-message\">\n {{ message }}\n </div>\n @if (actionLabel) {\n <div class=\"monkey-toast-action\">\n <monkey-button\n class=\"monkey-toast-btn-action\"\n type=\"tertiary\"\n size=\"sm\"\n (click)=\"onActionClick.emit(id)\"\n >\n {{ actionLabel }}\n @if (actionIcon) {\n <i class=\"mk-i mk-i-{{actionIcon}} xs\" first></i>\n }\n </monkey-button>\n </div>\n }\n </div>\n</div>\n@if (isClosable) {\n <div class=\"monkey-toast-divider\"></div>\n <div class=\"monkey-toast-close\" (click)=\"close()\">\n <util-icon name=\"clear\" />\n </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:300px;width:100%;gap:var(--mecx-spaces-medium);padding:var(--mecx-spaces-medium);box-shadow:0 8px 16px 0 var(--mecx-color-box-shadow);background-color:var(--mecx-color-gray-900);color:var(--mecx-color-white);border-radius:4px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .monkey-toast-content{display:flex;gap:var(--mecx-spaces-xs);line-height:var(--mecx-lh-24);font-size:var(--mecx-fs-xxs);letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action{margin:8px 0 0 -12px}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:var(--mecx-color-white)!important;outline-color:var(--mecx-color-white)}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-white)!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;opacity:.2;background-color:var(--mecx-color-white)}monkey-toast .monkey-toast-close{display:flex;align-items:center;justify-content:center;cursor:pointer}monkey-toast .monkey-toast-close svg *{fill:var(--mecx-color-white)!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:var(--mecx-color-error-700)}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.warning{background-color:var(--mecx-color-warning-main)}monkey-toast.warning .monkey-toast-divider{background-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-content{color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-close svg *{fill:var(--mecx-color-gray-900)!important}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button{color:var(--mecx-color-gray-900)!important;outline-color:var(--mecx-color-gray-900)}monkey-toast.warning .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:var(--mecx-color-gray-900)!important}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"] }]
8387
8345
  }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
8388
8346
  type: Input
8389
8347
  }], icon: [{
@@ -8500,11 +8458,11 @@ class MonkeyToggleLineButtonComponent {
8500
8458
  this.onChange = new EventEmitter();
8501
8459
  }
8502
8460
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyToggleLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8503
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", 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 }); }
8461
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: MonkeyToggleLineButtonComponent, isStandalone: true, selector: "monkey-toggle-line-button", inputs: { disabled: "disabled", value: "value", name: "name" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<input\n type=\"radio\"\n [name]=\"name\"\n [id]=\"value + '-' + name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label i{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label i{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=true] i{color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false] i{color:var(--mecx-color-white)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
8504
8462
  }
8505
8463
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyToggleLineButtonComponent, decorators: [{
8506
8464
  type: Component,
8507
- args: [{ selector: 'monkey-toggle-line-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<input\n type=\"radio\"\n [name]=\"name\"\n [id]=\"value + '-' + name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label 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"] }]
8465
+ args: [{ selector: 'monkey-toggle-line-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<input\n type=\"radio\"\n [name]=\"name\"\n [id]=\"value + '-' + name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);transition:all .2s ease-in-out}monkey-toggle-line-button label i{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label i{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=true] i{color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false]{background-color:var(--mecx-color-error-700);color:var(--mecx-color-white)}monkey-toggle-line-button input:checked+label[for*=false] i{color:var(--mecx-color-white)}\n"] }]
8508
8466
  }], propDecorators: { disabled: [{
8509
8467
  type: Input
8510
8468
  }], onChange: [{
@@ -8570,7 +8528,7 @@ class MonkeyToggleLineComponent {
8570
8528
  this.subscriptions.unsubscribe();
8571
8529
  }
8572
8530
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyToggleLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8573
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", 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{height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{height:32px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
8531
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: MonkeyToggleLineComponent, isStandalone: true, selector: "monkey-toggle-line", inputs: { value: "value", name: "name", size: "size", disabled: ["disabled", "disabled", booleanAttribute], id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle-line" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, queries: [{ propertyName: "radioButtons", predicate: MonkeyToggleLineButtonComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label i{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label i{color:var(--mecx-color-success-main)}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.lg{height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{height:32px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
8574
8532
  }
8575
8533
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyToggleLineComponent, decorators: [{
8576
8534
  type: Component,
@@ -8578,7 +8536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
8578
8536
  'data-testid': 'monkey-toggle-line',
8579
8537
  '[attr.id]': 'id',
8580
8538
  '[id]': 'id'
8581
- }, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label 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{height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{height:32px}\n"] }]
8539
+ }, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label i{color:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label i{color:var(--mecx-color-success-main)}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.lg{height:48px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.md{height:40px}monkey-toggle-line.sm label{font-size:14px}monkey-toggle-line.sm{height:32px}\n"] }]
8582
8540
  }], ctorParameters: () => [], propDecorators: { value: [{
8583
8541
  type: Input
8584
8542
  }], name: [{
@@ -8978,16 +8936,16 @@ class MonkeyUserProfileComponent {
8978
8936
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8979
8937
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: MonkeyUserProfileComponent, isStandalone: true, selector: "monkey-user-profile", inputs: { email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-user-profile" }, properties: { "attr.id": "id", "id": "id", "class": "size()" } }, ngImport: i0, template: `
8980
8938
  <div class="icon">
8981
- <monkey-icon icon="user-profile" [size]="size()" />
8939
+ <i class="mk-i mk-i-user-profile {{size()}}"></i>
8982
8940
  </div>
8983
8941
  <div class="text-truncate">{{ email() }}</div>
8984
- `, isInline: true, styles: [":host{display:inline-flex;align-items:center;background:var(--mecx-color-gray-200);border-radius:8px;font-size:14px;color:var(--mecx-color-gray-900);padding:4px 16px 4px 4px;gap:4px;max-width:min(350px,100%);min-width:0;line-height:24px;box-sizing:border-box;height:32px}:host .icon{align-items:center;background:var(--mecx-color-white);border-radius:4px;display:flex;flex-direction:column;height:24px;width:24px;justify-content:center;color:var(--mecx-color-gray-900);flex-shrink:0}:host.md{height:40px}:host.md .icon{height:32px;width:32px}:host.lg{height:48px;font-size:16px}:host.lg .icon{height:40px;width:40px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
8942
+ `, isInline: true, styles: [":host{display:inline-flex;align-items:center;background:var(--mecx-color-gray-200);border-radius:8px;font-size:14px;color:var(--mecx-color-gray-900);padding:4px 16px 4px 4px;gap:4px;max-width:min(350px,100%);min-width:0;line-height:24px;box-sizing:border-box;height:32px}:host .icon{align-items:center;background:var(--mecx-color-white);border-radius:4px;display:flex;flex-direction:column;height:24px;width:24px;justify-content:center;color:var(--mecx-color-gray-900);flex-shrink:0}:host.md{height:40px}:host.md .icon{height:32px;width:32px}:host.lg{height:48px;font-size:16px}:host.lg .icon{height:40px;width:40px}\n"] }); }
8985
8943
  }
8986
8944
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyUserProfileComponent, decorators: [{
8987
8945
  type: Component,
8988
- args: [{ imports: [MonkeyIconComponent], selector: 'monkey-user-profile', template: `
8946
+ args: [{ selector: 'monkey-user-profile', template: `
8989
8947
  <div class="icon">
8990
- <monkey-icon icon="user-profile" [size]="size()" />
8948
+ <i class="mk-i mk-i-user-profile {{size()}}"></i>
8991
8949
  </div>
8992
8950
  <div class="text-truncate">{{ email() }}</div>
8993
8951
  `, host: {
@@ -9006,6 +8964,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
9006
8964
  * MIT Licence
9007
8965
  ************************* */
9008
8966
 
8967
+ /** ************************
8968
+ * Copyright Monkey Exchange. All Rights Reserved
8969
+ * This style guide was developed by Monkey Exchange Team
8970
+ * MIT Licence
8971
+ ************************* */
8972
+ class MonkeyPassNumberComponent {
8973
+ get id() {
8974
+ return this._id;
8975
+ }
8976
+ set id(value) {
8977
+ this._id = value || this._uid;
8978
+ }
8979
+ constructor() {
8980
+ this._uid = inject(IdGenerator).getId('monkey-pass-number-');
8981
+ this.selected = [];
8982
+ this.onChange = output();
8983
+ // eslint-disable-next-line no-self-assign
8984
+ this.id = this.id;
8985
+ }
8986
+ clear() {
8987
+ this.selected = [];
8988
+ this.onChange.emit(this.selected);
8989
+ }
8990
+ onPress(pin) {
8991
+ if (this.selected.length < 4) {
8992
+ this.selected.push(pin);
8993
+ this.onChange.emit(this.selected);
8994
+ }
8995
+ }
8996
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyPassNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8997
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonkeyPassNumberComponent, isStandalone: true, selector: "monkey-pass-number", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
8998
+ <div class="pin-selected">
8999
+ @for (input of [0, 1, 2, 3]; track input) {
9000
+ <div class="pin-input">
9001
+ {{ selected[input] }}
9002
+ </div>
9003
+ }
9004
+ </div>
9005
+ <div class="grid">
9006
+ @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
9007
+ <div class="button" (click)="onPress(pin)">
9008
+ {{ pin }}
9009
+ </div>
9010
+ }
9011
+ <div></div>
9012
+ <div class="button" (click)="onPress(0)">0</div>
9013
+ <div class="button secondary" (click)="clear()">
9014
+ <i class="mk-i mk-i-delete"></i>
9015
+ </div>
9016
+ </div>
9017
+ `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }); }
9018
+ }
9019
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyPassNumberComponent, decorators: [{
9020
+ type: Component,
9021
+ args: [{ selector: 'monkey-pass-number', imports: [], template: `
9022
+ <div class="pin-selected">
9023
+ @for (input of [0, 1, 2, 3]; track input) {
9024
+ <div class="pin-input">
9025
+ {{ selected[input] }}
9026
+ </div>
9027
+ }
9028
+ </div>
9029
+ <div class="grid">
9030
+ @for (pin of [1, 2, 3, 4, 5, 6, 7, 8, 9]; track pin) {
9031
+ <div class="button" (click)="onPress(pin)">
9032
+ {{ pin }}
9033
+ </div>
9034
+ }
9035
+ <div></div>
9036
+ <div class="button" (click)="onPress(0)">0</div>
9037
+ <div class="button secondary" (click)="clear()">
9038
+ <i class="mk-i mk-i-delete"></i>
9039
+ </div>
9040
+ </div>
9041
+ `, host: {
9042
+ 'data-testid': 'monkey-pass-number',
9043
+ '[attr.id]': 'id',
9044
+ '[id]': 'id'
9045
+ }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
9046
+ }], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
9047
+ type: Input
9048
+ }] } });
9049
+
9050
+ /** ************************
9051
+ * Copyright Monkey Exchange. All Rights Reserved
9052
+ * This style guide was developed by Monkey Exchange Team
9053
+ * MIT Licence
9054
+ ************************* */
9055
+ class MonkeyPassSecretNumberComponent {
9056
+ get id() {
9057
+ return this._id;
9058
+ }
9059
+ set id(value) {
9060
+ this._id = value || this._uid;
9061
+ }
9062
+ constructor() {
9063
+ this._uid = inject(IdGenerator).getId('monkey-pass-secret-number-');
9064
+ this.orLabel = inject(MonkeyDictionaryService).get('OR');
9065
+ this.pins = [];
9066
+ this.selected = [];
9067
+ this.onChange = output();
9068
+ // eslint-disable-next-line no-self-assign
9069
+ this.id = this.id;
9070
+ }
9071
+ ngOnInit() {
9072
+ const qtd = 10;
9073
+ const pinPasswords = shuffle(new Array(qtd).fill(qtd).map((value, i) => {
9074
+ return (value * i) / qtd;
9075
+ }));
9076
+ this.pins = pinPasswords
9077
+ .map((value, index) => {
9078
+ return {
9079
+ first: value,
9080
+ last: pinPasswords[pinPasswords.length - index - 1]
9081
+ };
9082
+ })
9083
+ .slice(0, 5);
9084
+ }
9085
+ clear() {
9086
+ this.selected = [];
9087
+ this.onChange.emit(this.getPinPassword());
9088
+ }
9089
+ getPinPassword() {
9090
+ const result = {
9091
+ passNumber1: '',
9092
+ passNumber2: '',
9093
+ passNumber3: '',
9094
+ passNumber4: ''
9095
+ };
9096
+ this.selected.forEach((value, index) => {
9097
+ result[`passNumber${index + 1}`] = value;
9098
+ });
9099
+ return result;
9100
+ }
9101
+ onPress(pin) {
9102
+ if (this.selected.length < 4) {
9103
+ this.selected.push(`${pin.first}${pin.last}`);
9104
+ this.onChange.emit(this.getPinPassword());
9105
+ }
9106
+ }
9107
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyPassSecretNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9108
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MonkeyPassSecretNumberComponent, isStandalone: true, selector: "monkey-pass-secret-number", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pass-secret-number" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: `
9109
+ <div class="pin-selected">
9110
+ @for (input of [0, 1, 2, 3]; track input) {
9111
+ <div class="pin-input" [class.filled]="selected[input]"></div>
9112
+ }
9113
+ </div>
9114
+ <div class="grid">
9115
+ @for (pin of pins; track pin) {
9116
+ <div class="button" (click)="onPress(pin)">
9117
+ {{ pin.first }} {{ orLabel | async }} {{ pin.last }}
9118
+ </div>
9119
+ }
9120
+ <div class="button secondary" (click)="clear()">
9121
+ <i class="mk-i mk-i-delete"></i>
9122
+ </div>
9123
+ </div>
9124
+ `, isInline: true, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] }); }
9125
+ }
9126
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MonkeyPassSecretNumberComponent, decorators: [{
9127
+ type: Component,
9128
+ args: [{ selector: 'monkey-pass-secret-number', imports: [AsyncPipe], template: `
9129
+ <div class="pin-selected">
9130
+ @for (input of [0, 1, 2, 3]; track input) {
9131
+ <div class="pin-input" [class.filled]="selected[input]"></div>
9132
+ }
9133
+ </div>
9134
+ <div class="grid">
9135
+ @for (pin of pins; track pin) {
9136
+ <div class="button" (click)="onPress(pin)">
9137
+ {{ pin.first }} {{ orLabel | async }} {{ pin.last }}
9138
+ </div>
9139
+ }
9140
+ <div class="button secondary" (click)="clear()">
9141
+ <i class="mk-i mk-i-delete"></i>
9142
+ </div>
9143
+ </div>
9144
+ `, host: {
9145
+ 'data-testid': 'monkey-pass-secret-number',
9146
+ '[attr.id]': 'id',
9147
+ '[id]': 'id'
9148
+ }, styles: [":host{display:flex;width:100%;max-width:350px;flex-direction:column;gap:1rem}:host .pin-selected{display:flex;align-items:center;justify-content:center;gap:8px}:host .pin-selected .pin-input{width:32px;height:32px;border:2px solid var(--mecx-color-gray-400);box-sizing:border-box;border-radius:4px;background-color:var(--mecx-color-white);display:flex;justify-content:center;align-items:center;line-height:24px;font-weight:600;font-size:14px;position:relative}:host .pin-selected .pin-input.filled:before{content:\"\";border-radius:50%;width:8px;height:8px;background-color:var(--mecx-color-gray-900);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}:host .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}:host .button{background:var(--mecx-color-gray-900);border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:24px;font-size:14px;color:var(--mecx-color-white);font-weight:600;cursor:pointer;width:100%;height:48px}:host .button.secondary{background:var(--mecx-color-white);box-sizing:border-box;border:2px solid var(--mecx-color-gray-400)}:host .button.secondary i{color:var(--mecx-color-gray-900)}\n"] }]
9149
+ }], ctorParameters: () => [], propDecorators: { onChange: [{ type: i0.Output, args: ["onChange"] }], id: [{
9150
+ type: Input
9151
+ }] } });
9152
+
9153
+ /** ************************
9154
+ * Copyright Monkey Exchange. All Rights Reserved
9155
+ * This style guide was developed by Monkey Exchange Team
9156
+ * MIT Licence
9157
+ ************************* */
9158
+
9009
9159
  /** ************************
9010
9160
  * Copyright Monkey Exchange. All Rights Reserved
9011
9161
  * This style guide was developed by Monkey Exchange Team
@@ -9094,5 +9244,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
9094
9244
  * Generated bundle index. Do not edit.
9095
9245
  */
9096
9246
 
9097
- export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, getCurrencySymbol, injectTokenWithWarning };
9247
+ export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, getCurrencySymbol, injectTokenWithWarning };
9098
9248
  //# sourceMappingURL=monkey-style-guide.mjs.map