monkey-style-guide-v2 0.0.9 → 0.0.17

package/fesm2022/monkey-style-guide-v2.mjs

@@ -2,16 +2,18 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
 import * as i1$1 from '@angular/common';
 import { CommonModule, CurrencyPipe, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, inject, TemplateRef, booleanAttribute, Component, Input, ViewEncapsulation, input, output, HostListener, Directive, NgModule, EventEmitter, Injector, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ContentChildren, Output, HostBinding, ElementRef, DEFAULT_CURRENCY_CODE, ContentChild, LOCALE_ID, ViewChild, Optional, Inject } from '@angular/core';
+import { Injectable, inject, TemplateRef, booleanAttribute, Component, Input, ViewEncapsulation, input, output, HostListener, Directive, NgModule, EventEmitter, Injector, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ContentChildren, Output, HostBinding, ElementRef, DEFAULT_CURRENCY_CODE, ContentChild, LOCALE_ID, InjectionToken, Optional, Inject, ViewChild } from '@angular/core';
 import { Subject, takeUntil, merge, Subscription } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
-import { Router } from '@angular/router';
+import { OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { Router, NavigationStart } from '@angular/router';
 import * as i1$2 from '@angular/forms';
 import { NgControl, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
+import { hasModifierKey } from '@angular/cdk/keycodes';
 
 const counters = {};
 class IdGenerator {
@@ -1566,171 +1568,471 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeySecurityLevelComponent {
-    get class() {
-        if (this.score() === 0) {
-            return 'empty';
-        }
-        if (this.score() < 300) {
-            return 'weak';
-        }
-        if (this.score() >= 300 && this.score() < 800) {
-            return 'medium';
-        }
-        if (this.score() >= 800 && this.score() < 1000) {
-            return 'strong';
+class MonkeyModalRef {
+    constructor(overlayRef, config) {
+        this.overlayRef = overlayRef;
+        this.config = config;
+        this.closed = new Subject();
+        this.id = config.id;
+        this.icon = config.icon;
+        this.disableClose = config.disableClose;
+        this.closeOnNavigation = config.closeOnNavigation;
+        this.backdropClick = overlayRef.backdropClick();
+        this.keydownEvents = overlayRef.keydownEvents();
+        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
+        this.keydownEvents.subscribe((event) => {
+            if (event.key === 'Escape' && !this.disableClose && !hasModifierKey(event)) {
+                event.preventDefault();
+                this.close(undefined);
+            }
+        });
+        this.backdropClick.subscribe(() => {
+            if (!this.disableClose) {
+                this.close(undefined);
+            }
+        });
+    }
+    close(result) {
+        if (this.componentInstance) {
+            const closedSubject = this.closed;
+            this.overlayRef.dispose();
+            closedSubject.next(result);
+            closedSubject.complete();
+            // eslint-disable-next-line no-multi-assign
+            this.componentInstance = null;
         }
-        return 'very-strong';
     }
-    get id() {
-        return this._id;
+    afterClosed() {
+        return this.closed;
     }
-    set id(value) {
-        this._id = value || this._uid;
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+const MECX_MODAL_DATA = new InjectionToken('mecxModalData');
+const MECX_MODAL_DEFAULT_CONFIG = new InjectionToken('mecxModalDefaultConfig');
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+function reverseForEach(items, callback) {
+    let i = items.length;
+    // eslint-disable-next-line no-plusplus
+    while (i--) {
+        callback(items[i]);
     }
-    constructor() {
-        this.label = input();
-        this.score = input.required();
-        this.strengthLabel = input();
-        this._uid = inject(IdGenerator).getId('monkey-security-level-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
+}
+
+class MonkeyModalComponent {
+    constructor(_elementRef, viewContainerRef, overlayRef, modalRef) {
+        this._elementRef = _elementRef;
+        this.viewContainerRef = viewContainerRef;
+        this.overlayRef = overlayRef;
+        this.modalRef = modalRef;
+        this._navigationSubscription = null;
+        this._router = inject(Router);
+        // not to do
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    ngAfterViewInit() {
+        console.log(this.modalRef);
+        if (this._elementRef) {
+            this._elementRef.nativeElement.focus();
+        }
+        if (this.modalRef?.closeOnNavigation) {
+            this._navigationSubscription = this._router.events.subscribe((event) => {
+                if (event instanceof NavigationStart) {
+                    this.close();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this._navigationSubscription) {
+            this._navigationSubscription.unsubscribe();
+            this._navigationSubscription = null;
+        }
+    }
+    close() {
+        this.overlayRef?.dispose();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalComponent, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
+    <div class="mecx-modal-header">
+      <div class="mecx-modal-header-group">
+        <div class="mecx-modal-header-title">
+          @if (modalRef?.icon) {
+            <div class="mecx-modal-header-icon">
+              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
+            </div>
+          }
+          <ng-content select="monkey-modal-title"></ng-content>
+          <ng-content select="[monkey-modal-title]"></ng-content>
+        </div>
+
+        <ng-content select="monkey-modal-subtitle"></ng-content>
+        <ng-content select="[monkey-modal-subtitle]"></ng-content>
+      </div>
+      @if (!modalRef?.disableClose) {
+        <monkey-icon-button
+          size="sm"
+          type="tertiary"
+          icon="close"
+          class="mecx-modal-close"
+          (click)="close()"
+        >
+          x
+        </monkey-icon-button>
+      }
+    </div>
+    <ng-content select="monkey-modal-content"></ng-content>
+    <ng-content select="[monkey-modal-content]"></ng-content>
+    <ng-content select="monkey-modal-actions"></ng-content>
+    <ng-content select="[monkey-modal-actions]"></ng-content>
+  `, isInline: true, styles: ["monkey-modal{display:flex;flex-direction:column;background:#fff;border-radius:8px}.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:12px;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:18px;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:.42px;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;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.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:#00000052}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, decorators: [{
             type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
-                        'data-testid': 'monkey-security-level',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], id: [{
-                type: Input
-            }] } });
+            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
+    <div class="mecx-modal-header">
+      <div class="mecx-modal-header-group">
+        <div class="mecx-modal-header-title">
+          @if (modalRef?.icon) {
+            <div class="mecx-modal-header-icon">
+              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
+            </div>
+          }
+          <ng-content select="monkey-modal-title"></ng-content>
+          <ng-content select="[monkey-modal-title]"></ng-content>
+        </div>
+
+        <ng-content select="monkey-modal-subtitle"></ng-content>
+        <ng-content select="[monkey-modal-subtitle]"></ng-content>
+      </div>
+      @if (!modalRef?.disableClose) {
+        <monkey-icon-button
+          size="sm"
+          type="tertiary"
+          icon="close"
+          class="mecx-modal-close"
+          (click)="close()"
+        >
+          x
+        </monkey-icon-button>
+      }
+    </div>
+    <ng-content select="monkey-modal-content"></ng-content>
+    <ng-content select="[monkey-modal-content]"></ng-content>
+    <ng-content select="monkey-modal-actions"></ng-content>
+    <ng-content select="[monkey-modal-actions]"></ng-content>
+  `, host: {
+                        class: 'mecx-modal',
+                        tabindex: '-1',
+                        '[attr.id]': 'modalRef?.id || null'
+                    }, styles: ["monkey-modal{display:flex;flex-direction:column;background:#fff;border-radius:8px}.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:12px;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:18px;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:.42px;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;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.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:#00000052}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.OverlayRef, decorators: [{
+                    type: Optional
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Optional
+                }] }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyStatusComponent {
-    get class() {
-        return `${this.type()} ${this.size()}`;
+class MonkeyModalTitleDirective {
+    constructor() {
+        this.id = inject(IdGenerator).getId('monkey-modal-title-');
     }
-    get id() {
-        return this._id;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-title, [monkey-modal-title]',
+                    host: {
+                        class: 'mecx-modal-title',
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalSubtitleDirective {
+    constructor() {
+        this.id = inject(IdGenerator).getId('monkey-modal-subtitle-');
     }
-    set id(value) {
-        this._id = value || this._uid;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-subtitle" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-subtitle, [monkey-modal-subtitle]',
+                    host: {
+                        class: 'mecx-modal-subtitle',
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalContentDirective {
+    constructor() {
+        this.id = inject(IdGenerator).getId('monkey-modal-content-');
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-content, [monkey-modal-content]',
+                    host: {
+                        class: 'mecx-modal-content',
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalActionsDirective {
     constructor() {
-        this.type = input.required();
-        this.size = input('md');
-        this.label = input();
-        this._uid = inject(IdGenerator).getId('monkey-status-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
+        this.mkAlign = 'end';
+        this.id = inject(IdGenerator).getId('monkey-modal-actions-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-status', standalone: true, imports: [CommonModule], host: {
-                        'data-testid': 'monkey-status',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], id: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-actions, [monkey-modal-actions]',
+                    host: {
+                        '[class]': `'mecx-modal-actions align-'+mkAlign`,
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }], propDecorators: { mkAlign: [{
                 type: Input
             }] } });
 
+class MonkeyModalDefaultComponent {
+    constructor(config, modalRef) {
+        this.config = config;
+        this.modalRef = modalRef;
+        this.title = '';
+        this.subtitle = '';
+        this.content = '';
+        this.cancelLabel = '';
+        this.okLabel = '';
+        // not to do
+    }
+    ngAfterViewInit() {
+        // console.log(this.data);
+    }
+    onSubmit() {
+        this.modalRef.close(true);
+    }
+    onClose() {
+        this.modalRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalDefaultComponent, deps: [{ token: MECX_MODAL_DEFAULT_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalDefaultComponent, selector: "monkey-modal-default", ngImport: i0, template: `
+    <monkey-modal>
+      <monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
+      <monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
+      <monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
+      <monkey-modal-actions mkAlign="end">
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]" }, { kind: "directive", type: MonkeyModalSubtitleDirective, selector: "monkey-modal-subtitle, [monkey-modal-subtitle]" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'monkey-modal-default',
+                    template: `
+    <monkey-modal>
+      <monkey-modal-title [innerHTML]="config.title"></monkey-modal-title>
+      <monkey-modal-subtitle [innerHTML]="config.subtitle"></monkey-modal-subtitle>
+      <monkey-modal-content [innerHTML]="config.content"></monkey-modal-content>
+      <monkey-modal-actions mkAlign="end">
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MECX_MODAL_DEFAULT_CONFIG]
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Inject,
+                    args: [MonkeyModalRef]
+                }] }] });
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyPaginationActionComponent {
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this._uid;
-    }
+class MonkeyModalConfig {
     constructor() {
-        this.next = false;
-        this.prev = false;
-        this.onAction = new EventEmitter();
-        this._uid = inject(IdGenerator).getId('monkey-pagination-action-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
+        this.panelClass = '';
+        this.hasBackdrop = true;
+        this.backdropClass = 'mecx-modal-overlay';
+        this.disableClose = false;
+        this.width = '';
+        this.height = '';
+        this.data = null;
+        this.closeOnNavigation = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [CommonModule, MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
-                        'data-testid': 'monkey-pagination-action',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { disabled: [{
-                type: Input
-            }], first: [{
-                type: Input
-            }], last: [{
-                type: Input
-            }], next: [{
-                type: Input,
-                args: [{ required: true }]
-            }], prev: [{
-                type: Input,
-                args: [{ required: true }]
-            }], onAction: [{
-                type: Output
-            }], id: [{
-                type: Input
-            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyPaginationLabelComponent {
-    get id() {
-        return this._id;
+class MonkeyModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
+            MonkeyModalDefaultComponent,
+            MonkeyModalTitleDirective,
+            MonkeyModalSubtitleDirective,
+            MonkeyModalContentDirective,
+            MonkeyModalActionsDirective], imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent], exports: [MonkeyModalComponent,
+            MonkeyModalTitleDirective,
+            MonkeyModalSubtitleDirective,
+            MonkeyModalContentDirective,
+            MonkeyModalActionsDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent],
+                    declarations: [
+                        MonkeyModalComponent,
+                        MonkeyModalDefaultComponent,
+                        MonkeyModalTitleDirective,
+                        MonkeyModalSubtitleDirective,
+                        MonkeyModalContentDirective,
+                        MonkeyModalActionsDirective
+                    ],
+                    exports: [
+                        MonkeyModalComponent,
+                        MonkeyModalTitleDirective,
+                        MonkeyModalSubtitleDirective,
+                        MonkeyModalContentDirective,
+                        MonkeyModalActionsDirective
+                    ]
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+        this._idGenerator = inject(IdGenerator);
+        this._openDialogsAtThisLevel = [];
+        this._parentDialog = inject(MonkeyModalService, { optional: true, skipSelf: true });
+        // not to do
     }
-    set id(value) {
-        this._id = value || this._uid;
+    get openDialogs() {
+        return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
     }
-    constructor() {
-        this._uid = inject(IdGenerator).getId('monkey-pagination-label-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
+    getOverlayConfig(config) {
+        const state = new OverlayConfig({
+            positionStrategy: config?.positionStrategy ||
+                this.overlay.position().global().centerHorizontally().centerVertically(),
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            panelClass: config.panelClass,
+            hasBackdrop: config.hasBackdrop,
+            minWidth: config.minWidth,
+            minHeight: config.minHeight,
+            maxWidth: config.maxWidth,
+            maxHeight: config.maxHeight,
+            width: config.width,
+            height: config.height,
+            disposeOnNavigation: config.closeOnNavigation
+        });
+        if (config.backdropClass) {
+            state.backdropClass = config.backdropClass;
+        }
+        return state;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPaginationLabelComponent, isStandalone: true, selector: "monkey-pagination-label", inputs: { id: "id" }, host: { attributes: { "data-testid": "monkey-pagination-label" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationLabel"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    createInjector(config, dialogRef, overlayRef, fallbackInjector) {
+        const providers = [
+            { provide: OverlayRef, useValue: overlayRef },
+            { provide: MonkeyModalRef, useValue: dialogRef },
+            { provide: MECX_MODAL_DATA, useValue: config.data }
+        ];
+        if (config.providers) {
+            providers.push(...config.providers);
+        }
+        return Injector.create({ parent: fallbackInjector, providers });
+    }
+    open(component, config) {
+        const defaultConfig = new MonkeyModalConfig();
+        config = { ...defaultConfig, ...config };
+        config.id = this._idGenerator.getId('monkey-modal-');
+        const overlayConfig = this.getOverlayConfig(config);
+        const overlayRef = this.overlay.create(overlayConfig);
+        const modalRef = new MonkeyModalRef(overlayRef, config);
+        const injector = this.createInjector(config, modalRef, overlayRef, this.injector);
+        const componentPortal = new ComponentPortal(component, null, injector);
+        const componentRef = overlayRef.attach(componentPortal);
+        modalRef.componentInstance = componentRef.instance;
+        this.openDialogs.push(modalRef);
+        return modalRef;
+    }
+    openDefault(params, config) {
+        const providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
+        config.providers = providers;
+        config.icon = config.icon ? config.icon : 'help';
+        return this.open(MonkeyModalDefaultComponent, config);
+    }
+    closeAll() {
+        reverseForEach(this.openDialogs, (dialog) => {
+            return dialog.close();
+        });
+        this.openDialogs.splice(0, this.openDialogs.length);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
-                        'data-testid': 'monkey-pagination-label',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -1783,6 +2085,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySecurityLevelComponent {
+    get class() {
+        if (this.score() === 0) {
+            return 'empty';
+        }
+        if (this.score() < 300) {
+            return 'weak';
+        }
+        if (this.score() >= 300 && this.score() < 800) {
+            return 'medium';
+        }
+        if (this.score() >= 800 && this.score() < 1000) {
+            return 'strong';
+        }
+        return 'very-strong';
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.label = input();
+        this.score = input.required();
+        this.strengthLabel = input();
+        this._uid = inject(IdGenerator).getId('monkey-security-level-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
+                        'data-testid': 'monkey-security-level',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2122,6 +2476,125 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyStatusComponent {
+    get class() {
+        return `${this.type()} ${this.size()}`;
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.type = input.required();
+        this.size = input('md');
+        this.label = input();
+        this._uid = inject(IdGenerator).getId('monkey-status-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-status', standalone: true, imports: [CommonModule], host: {
+                        'data-testid': 'monkey-status',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPaginationActionComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.next = false;
+        this.prev = false;
+        this.onAction = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-pagination-action-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
+                        'data-testid': 'monkey-pagination-action',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], next: [{
+                type: Input,
+                args: [{ required: true }]
+            }], prev: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onAction: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPaginationLabelComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this._uid = inject(IdGenerator).getId('monkey-pagination-label-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPaginationLabelComponent, isStandalone: true, selector: "monkey-pagination-label", inputs: { id: "id" }, host: { attributes: { "data-testid": "monkey-pagination-label" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationLabel"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
+                        'data-testid': 'monkey-pagination-label',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }] } });
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -3159,5 +3632,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MonkeyAccordionComponent, MonkeyAlertComponent, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDestroyService, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyError, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelper, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyIconsService, MonkeyInfo, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyLabel, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPrefix, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffix, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, ToastRef, getCurrencySymbol, validateType };
+export { MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MonkeyAccordionComponent, MonkeyAlertComponent, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDestroyService, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyError, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelper, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyIconsService, MonkeyInfo, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyLabel, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalDefaultComponent, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPrefix, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffix, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, ToastRef, getCurrencySymbol, reverseForEach, validateType };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map