ms-design-system 0.0.40 → 0.0.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ms-design-system.mjs +308 -241
- package/fesm2022/ms-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/font/Inter_18pt-ExtraBold.ttf +0 -0
- package/src/assets/font/Inter_18pt-Italic.ttf +0 -0
- package/src/assets/font/Inter_18pt-Medium.ttf +0 -0
- package/src/assets/font/Inter_18pt-Regular.ttf +0 -0
- package/src/assets/font/Inter_18pt-SemiBold.ttf +0 -0
- package/src/assets/font/Inter_28pt-Bold.ttf +0 -0
- package/src/assets/scss/breakpoint.scss +30 -32
- package/src/assets/scss/grid.scss +2 -2
- package/src/styles.scss +57 -4
- package/types/ms-design-system.d.ts +8 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import * as i1 from '@angular/common';
|
|
1
|
+
import * as i1$1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, ContentChild, Output, Input, Component, HostListener, ViewChild, forwardRef, booleanAttribute,
|
|
4
|
+
import { EventEmitter, ContentChild, Output, Input, Component, signal, HostListener, ViewChild, forwardRef, booleanAttribute, Injectable, Directive, NgModule, makeEnvironmentProviders, createComponent } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i3 from 'ng-inline-svg-2';
|
|
8
8
|
import { InlineSVGModule } from 'ng-inline-svg-2';
|
|
9
|
-
import * as i1
|
|
10
|
-
import * as i2$
|
|
9
|
+
import * as i1 from '@angular/platform-browser';
|
|
10
|
+
import * as i2$1 from '@angular/router';
|
|
11
11
|
import { NavigationEnd } from '@angular/router';
|
|
12
12
|
import { filter } from 'rxjs/operators';
|
|
13
13
|
import { BehaviorSubject } from 'rxjs';
|
|
@@ -129,11 +129,11 @@ class MsButton {
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
132
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
132
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsButton, isStandalone: true, selector: "ms-button", inputs: { type: "type", variant: "variant", size: "size", radiussize: "radiussize", block: "block", disabled: "disabled", isBorder: "isBorder", textSrc: "textSrc", icon: "icon", iconPosition: "iconPosition", iconOnly: "iconOnly", class: "class", buttonType: "buttonType" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
|
-
args: [{ selector: 'ms-button', imports: [CommonModule], template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"] }]
|
|
136
|
+
args: [{ selector: 'ms-button', imports: [CommonModule], template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n <!-- @if (icon && iconPosition === 'prefix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'prefix']\"></i>\n } -->\n\n <!-- \uD83D\uDC47 IMPORTANT: This shows <ms-button>Click Me</ms-button> -->\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n\n <!-- If textSrc is given -->\n @if (!iconOnly && textSrc) {\n <span>{{ textSrc }}</span>\n }\n\n <!-- @if (icon && iconPosition === 'suffix') {\n <i [ngClass]=\"iconOnly ? [icon, 'btn-icon'] : [icon, 'btn-icon', 'suffix']\"></i>\n } -->\n</ng-content>\n}" }]
|
|
137
137
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}], variant: [{
|
|
@@ -190,11 +190,11 @@ class MsSpinner {
|
|
|
190
190
|
this.htmlChange.emit(this.getHtmlString());
|
|
191
191
|
}
|
|
192
192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsSpinner, isStandalone: true, selector: "ms-spinner", inputs: { color: "color", size: "size", text: "text" }, outputs: { htmlChange: "htmlChange" }, usesOnChanges: true, ngImport: i0, template: "\n<div class=\"ms-spinner-container\" [class]=\"spinnerSize\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n @if(text){\n <p class=\"ms-spinner-text\">Loading...</p>\n }\n</div>\n\n\n<!-- <div class=\"ms-spinner-container\" [ngClass]=\"size\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n <p *ngIf=\"text\" class=\"ms-spinner-text\">Loading...</p>\n</div> -->\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
193
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsSpinner, isStandalone: true, selector: "ms-spinner", inputs: { color: "color", size: "size", text: "text" }, outputs: { htmlChange: "htmlChange" }, usesOnChanges: true, ngImport: i0, template: "\n<div class=\"ms-spinner-container\" [class]=\"spinnerSize\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n @if(text){\n <p class=\"ms-spinner-text\">Loading...</p>\n }\n</div>\n\n\n<!-- <div class=\"ms-spinner-container\" [ngClass]=\"size\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n <p *ngIf=\"text\" class=\"ms-spinner-text\">Loading...</p>\n</div> -->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
194
194
|
}
|
|
195
195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSpinner, decorators: [{
|
|
196
196
|
type: Component,
|
|
197
|
-
args: [{ selector: 'ms-spinner', imports: [CommonModule], template: "\n<div class=\"ms-spinner-container\" [class]=\"spinnerSize\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n @if(text){\n <p class=\"ms-spinner-text\">Loading...</p>\n }\n</div>\n\n\n<!-- <div class=\"ms-spinner-container\" [ngClass]=\"size\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n <p *ngIf=\"text\" class=\"ms-spinner-text\">Loading...</p>\n</div> -->\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"] }]
|
|
197
|
+
args: [{ selector: 'ms-spinner', imports: [CommonModule], template: "\n<div class=\"ms-spinner-container\" [class]=\"spinnerSize\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n @if(text){\n <p class=\"ms-spinner-text\">Loading...</p>\n }\n</div>\n\n\n<!-- <div class=\"ms-spinner-container\" [ngClass]=\"size\">\n <div class=\"ms-spinner\" [class]=\"spinnerColor\"></div>\n <p *ngIf=\"text\" class=\"ms-spinner-text\">Loading...</p>\n</div> -->\n" }]
|
|
198
198
|
}], propDecorators: { color: [{
|
|
199
199
|
type: Input
|
|
200
200
|
}], size: [{
|
|
@@ -205,6 +205,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
205
205
|
type: Output
|
|
206
206
|
}] } });
|
|
207
207
|
|
|
208
|
+
const ICONS = {
|
|
209
|
+
"info-circle": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
210
|
+
"download": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M21 21H3M18 11L12 17M12 17L6 11M12 17V3\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
211
|
+
"setting": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.7273 14.7273C18.6063 15.0015 18.5702 15.3056 18.6236 15.6005C18.6771 15.8954 18.8177 16.1676 19.0273 16.3818L19.0818 16.4364C19.2509 16.6052 19.385 16.8057 19.4765 17.0265C19.568 17.2472 19.6151 17.4838 19.6151 17.7227C19.6151 17.9617 19.568 18.1983 19.4765 18.419C19.385 18.6397 19.2509 18.8402 19.0818 19.0091C18.913 19.1781 18.7124 19.3122 18.4917 19.4037C18.271 19.4952 18.0344 19.5423 17.7955 19.5423C17.5565 19.5423 17.3199 19.4952 17.0992 19.4037C16.8785 19.3122 16.678 19.1781 16.5091 19.0091L16.4545 18.9545C16.2403 18.745 15.9682 18.6044 15.6733 18.5509C15.3784 18.4974 15.0742 18.5335 14.8 18.6545C14.5311 18.7698 14.3018 18.9611 14.1403 19.205C13.9788 19.4489 13.8921 19.7347 13.8909 20.0273V20.1818C13.8909 20.664 13.6994 21.1265 13.3584 21.4675C13.0174 21.8084 12.5549 22 12.0727 22C11.5905 22 11.1281 21.8084 10.7871 21.4675C10.4461 21.1265 10.2545 20.664 10.2545 20.1818V20.1C10.2475 19.7991 10.1501 19.5073 9.97501 19.2625C9.79991 19.0176 9.55521 18.8312 9.27273 18.7273C8.99853 18.6063 8.69437 18.5702 8.39947 18.6236C8.10456 18.6771 7.83244 18.8177 7.61818 19.0273L7.56364 19.0818C7.39478 19.2509 7.19425 19.385 6.97353 19.4765C6.7528 19.568 6.51621 19.6151 6.27727 19.6151C6.03834 19.6151 5.80174 19.568 5.58102 19.4765C5.36029 19.385 5.15977 19.2509 4.99091 19.0818C4.82186 18.913 4.68775 18.7124 4.59626 18.4917C4.50476 18.271 4.45766 18.0344 4.45766 17.7955C4.45766 17.5565 4.50476 17.3199 4.59626 17.0992C4.68775 16.8785 4.82186 16.678 4.99091 16.5091L5.04545 16.4545C5.25503 16.2403 5.39562 15.9682 5.4491 15.6733C5.50257 15.3784 5.46647 15.0742 5.34545 14.8C5.23022 14.5311 5.03887 14.3018 4.79497 14.1403C4.55107 13.9788 4.26526 13.8921 3.97273 13.8909H3.81818C3.33597 13.8909 2.87351 13.6994 2.53253 13.3584C2.19156 13.0174 2 12.5549 2 12.0727C2 11.5905 2.19156 11.1281 2.53253 10.7871C2.87351 10.4461 3.33597 10.2545 3.81818 10.2545H3.9C4.2009 10.2475 4.49273 10.1501 4.73754 9.97501C4.98236 9.79991 5.16883 9.55521 5.27273 9.27273C5.39374 8.99853 5.42984 8.69437 5.37637 8.39947C5.3229 8.10456 5.18231 7.83244 4.97273 7.61818L4.91818 7.56364C4.74913 7.39478 4.61503 7.19425 4.52353 6.97353C4.43203 6.7528 4.38493 6.51621 4.38493 6.27727C4.38493 6.03834 4.43203 5.80174 4.52353 5.58102C4.61503 5.36029 4.74913 5.15977 4.91818 4.99091C5.08704 4.82186 5.28757 4.68775 5.50829 4.59626C5.72901 4.50476 5.96561 4.45766 6.20455 4.45766C6.44348 4.45766 6.68008 4.50476 6.9008 4.59626C7.12152 4.68775 7.32205 4.82186 7.49091 4.99091L7.54545 5.04545C7.75971 5.25503 8.03183 5.39562 8.32674 5.4491C8.62164 5.50257 8.9258 5.46647 9.2 5.34545H9.27273C9.54161 5.23022 9.77093 5.03887 9.93245 4.79497C10.094 4.55107 10.1807 4.26526 10.1818 3.97273V3.81818C10.1818 3.33597 10.3734 2.87351 10.7144 2.53253C11.0553 2.19156 11.5178 2 12 2C12.4822 2 12.9447 2.19156 13.2856 2.53253C13.6266 2.87351 13.8182 3.33597 13.8182 3.81818V3.9C13.8193 4.19253 13.906 4.47834 14.0676 4.72224C14.2291 4.96614 14.4584 5.15749 14.7273 5.27273C15.0015 5.39374 15.3056 5.42984 15.6005 5.37637C15.8954 5.3229 16.1676 5.18231 16.3818 4.97273L16.4364 4.91818C16.6052 4.74913 16.8057 4.61503 17.0265 4.52353C17.2472 4.43203 17.4838 4.38493 17.7227 4.38493C17.9617 4.38493 18.1983 4.43203 18.419 4.52353C18.6397 4.61503 18.8402 4.74913 19.0091 4.91818C19.1781 5.08704 19.3122 5.28757 19.4037 5.50829C19.4952 5.72901 19.5423 5.96561 19.5423 6.20455C19.5423 6.44348 19.4952 6.68008 19.4037 6.9008C19.3122 7.12152 19.1781 7.32205 19.0091 7.49091L18.9545 7.54545C18.745 7.75971 18.6044 8.03183 18.5509 8.32674C18.4974 8.62164 18.5335 8.9258 18.6545 9.2V9.27273C18.7698 9.54161 18.9611 9.77093 19.205 9.93245C19.4489 10.094 19.7347 10.1807 20.0273 10.1818H20.1818C20.664 10.1818 21.1265 10.3734 21.4675 10.7144C21.8084 11.0553 22 11.5178 22 12C22 12.4822 21.8084 12.9447 21.4675 13.2856C21.1265 13.6266 20.664 13.8182 20.1818 13.8182H20.1C19.8075 13.8193 19.5217 13.906 19.2778 14.0676C19.0339 14.2291 18.8425 14.4584 18.7273 14.7273Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
212
|
+
"add": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
213
|
+
"trash": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
214
|
+
"chevron-down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
215
|
+
"chevron-right": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
216
|
+
"chevron-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
217
|
+
"bell": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 22\" fill=\"none\"><path d=\"M7.09321 20C7.79834 20.6224 8.72459 21 9.73903 21C10.7535 21 11.6797 20.6224 12.3849 20M15.739 7C15.739 5.4087 15.1069 3.88258 13.9817 2.75736C12.8565 1.63214 11.3303 1 9.73903 1C8.14773 1 6.62161 1.63214 5.49639 2.75736C4.37117 3.88258 3.73903 5.4087 3.73903 7C3.73903 10.0902 2.9595 12.206 2.0887 13.6054C1.35416 14.7859 0.986891 15.3761 1.00036 15.5408C1.01527 15.7231 1.05389 15.7926 1.20081 15.9016C1.33349 16 1.93162 16 3.12789 16H16.3502C17.5464 16 18.1446 16 18.2773 15.9016C18.4242 15.7926 18.4628 15.7231 18.4777 15.5408C18.4912 15.3761 18.1239 14.7859 17.3894 13.6054C16.5186 12.206 15.739 10.0902 15.739 7Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
218
|
+
"close": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
219
|
+
"search": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
220
|
+
"calender": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
221
|
+
"refresh": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M2 10C2 10 4.00498 7.26822 5.63384 5.63824C7.26269 4.00827 9.5136 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.89691 21 4.43511 18.2543 3.35177 14.5M2 10V4M2 10H8\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
222
|
+
"information": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M11 15V11M11 7H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
223
|
+
"edit": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M16.5 8.82843L12.5 4.82843M1 20.3284L4.38437 19.9524C4.79786 19.9064 5.0046 19.8835 5.19785 19.8209C5.36929 19.7654 5.53245 19.687 5.68289 19.5878C5.85245 19.476 5.99955 19.3289 6.29373 19.0347L19.5 5.82843C20.6046 4.72386 20.6046 2.933 19.5 1.82843C18.3955 0.723859 16.6046 0.723857 15.5 1.82843L2.29373 15.0347C1.99955 15.3289 1.85246 15.476 1.74064 15.6455C1.64143 15.796 1.56301 15.9591 1.50751 16.1306C1.44496 16.3238 1.42198 16.5306 1.37604 16.9441L1 20.3284Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
224
|
+
"minus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
225
|
+
"currency-dollar": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M1 15C1 17.2091 2.79086 19 5 19H9C11.2091 19 13 17.2091 13 15C13 12.7909 11.2091 11 9 11H5C2.79086 11 1 9.20914 1 7C1 4.79086 2.79086 3 5 3H9C11.2091 3 13 4.79086 13 7M7 1V21\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
226
|
+
"menu": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 14\" fill=\"none\"><path d=\"M1 7H19M1 1H19M1 13H13\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
227
|
+
"switch-vertical": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 18\" fill=\"none\"><path d=\"M5 1V17M5 17L1 13M5 17L9 13M15 17V1M15 1L11 5M15 1L19 5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
228
|
+
"dots-horizontal": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
229
|
+
"arrow-down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 5V19M12 19L19 12M12 19L5 12\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
230
|
+
"arrow-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 19V5M12 5L5 12M12 5L19 12\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
231
|
+
"check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 6L9 17L4 12\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
232
|
+
"globe": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M14 1.4578C13.053 1.16035 12.0452 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21C16.5228 21 21 16.5228 21 11C21 9.28467 20.5681 7.67022 19.8071 6.25945M16 4.75H16.005M9.50005 20.8883L9.50016 18.6849C9.50017 18.5656 9.54286 18.4502 9.62053 18.3596L12.1063 15.4594C12.3106 15.2211 12.2473 14.8556 11.9748 14.6999L9.11853 13.0677C9.04093 13.0234 8.97663 12.9591 8.93234 12.8814L7.07046 9.61863C6.97356 9.44882 6.78657 9.35107 6.59183 9.36841L1.06418 9.86074M20 5C20 7.20914 18 9 16 11C14 9 12 7.20914 12 5C12 2.79086 13.7909 1 16 1C18.2091 1 20 2.79086 20 5ZM16.25 4.75C16.25 4.88807 16.1381 5 16 5C15.8619 5 15.75 4.88807 15.75 4.75C15.75 4.61193 15.8619 4.5 16 4.5C16.1381 4.5 16.25 4.61193 16.25 4.75Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
233
|
+
"credit-card": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M22 10H2M11 14H6M2 8.2L2 15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.07989 19 5.2 19L18.8 19C19.9201 19 20.4802 19 20.908 18.782C21.2843 18.5903 21.5903 18.2843 21.782 17.908C22 17.4802 22 16.9201 22 15.8V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.7157 21.2843 5.40974 20.908 5.21799C20.4802 5 19.9201 5 18.8 5L5.2 5C4.0799 5 3.51984 5 3.09202 5.21799C2.7157 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.07989 2 8.2Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
234
|
+
"calendar-check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 10H3M16 2V6M8 2V6M9 16L11 18L15.5 13.5M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
235
|
+
"calendar-minus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 15H15M21 8H3M16 2V5M8 2V5M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
236
|
+
"annotation-alert": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 10.5V7M12 14H12.01M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
237
|
+
"marker-pin": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 14.2864C3.14864 15.1031 2 16.2412 2 17.5C2 19.9853 6.47715 22 12 22C17.5228 22 22 19.9853 22 17.5C22 16.2412 20.8514 15.1031 19 14.2864M18 8C18 12.0637 13.5 14 12 17C10.5 14 6 12.0637 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
238
|
+
"layers": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M1.00024 10.941L10.6425 15.7621C10.7737 15.8277 10.8392 15.8605 10.908 15.8734C10.969 15.8848 11.0315 15.8848 11.0924 15.8734C11.1612 15.8605 11.2268 15.8277 11.358 15.7621L21.0002 10.941M1.00024 15.941L10.6425 20.7621C10.7737 20.8277 10.8392 20.8605 10.908 20.8734C10.969 20.8848 11.0315 20.8848 11.0924 20.8734C11.1612 20.8605 11.2268 20.8277 11.358 20.7621L21.0002 15.941M1.00024 5.94098L10.6425 1.11987C10.7737 1.05428 10.8392 1.02148 10.908 1.00857C10.969 0.997142 11.0315 0.997142 11.0924 1.00857C11.1612 1.02148 11.2268 1.05428 11.358 1.11987L21.0002 5.94098L11.358 10.7621C11.2268 10.8277 11.1612 10.8605 11.0924 10.8734C11.0315 10.8848 10.969 10.8848 10.908 10.8734C10.8392 10.8605 10.7737 10.8277 10.6425 10.7621L1.00024 5.94098Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
239
|
+
"book-open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 20\" fill=\"none\"><path d=\"M11 19L10.8999 18.8499C10.2053 17.808 9.85798 17.287 9.3991 16.9098C8.99286 16.5759 8.52476 16.3254 8.02161 16.1726C7.45325 16 6.82711 16 5.57482 16H4.2C3.07989 16 2.51984 16 2.09202 15.782C1.71569 15.5903 1.40973 15.2843 1.21799 14.908C1 14.4802 1 13.9201 1 12.8V4.2C1 3.07989 1 2.51984 1.21799 2.09202C1.40973 1.71569 1.71569 1.40973 2.09202 1.21799C2.51984 1 3.07989 1 4.2 1H4.6C6.84021 1 7.96031 1 8.81596 1.43597C9.56861 1.81947 10.1805 2.43139 10.564 3.18404C11 4.03968 11 5.15979 11 7.4M11 19V7.4M11 19L11.1001 18.8499C11.7947 17.808 12.142 17.287 12.6009 16.9098C13.0071 16.5759 13.4752 16.3254 13.9784 16.1726C14.5467 16 15.1729 16 16.4252 16H17.8C18.9201 16 19.4802 16 19.908 15.782C20.2843 15.5903 20.5903 15.2843 20.782 14.908C21 14.4802 21 13.9201 21 12.8V4.2C21 3.07989 21 2.51984 20.782 2.09202C20.5903 1.71569 20.2843 1.40973 19.908 1.21799C19.4802 1 18.9201 1 17.8 1H17.4C15.1598 1 14.0397 1 13.184 1.43597C12.4314 1.81947 11.8195 2.43139 11.436 3.18404C11 4.03968 11 5.15979 11 7.4\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
240
|
+
"clock-rewind": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 20\" fill=\"none\"><path d=\"M20.7 11.5L18.7005 9.5L16.7 11.5M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C13.3019 1 16.1885 2.77814 17.7545 5.42909M10 5V10L13 12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
241
|
+
"Grid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M8.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V8.4C3 8.96005 3 9.24008 3.10899 9.45399C3.20487 9.64215 3.35785 9.79513 3.54601 9.89101C3.75992 10 4.03995 10 4.6 10H8.4C8.96005 10 9.24008 10 9.45399 9.89101C9.64215 9.79513 9.79513 9.64215 9.89101 9.45399C10 9.24008 10 8.96005 10 8.4V4.6C10 4.03995 10 3.75992 9.89101 3.54601C9.79513 3.35785 9.64215 3.20487 9.45399 3.10899C9.24008 3 8.96005 3 8.4 3Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.4 3H15.6C15.0399 3 14.7599 3 14.546 3.10899C14.3578 3.20487 14.2049 3.35785 14.109 3.54601C14 3.75992 14 4.03995 14 4.6V8.4C14 8.96005 14 9.24008 14.109 9.45399C14.2049 9.64215 14.3578 9.79513 14.546 9.89101C14.7599 10 15.0399 10 15.6 10H19.4C19.9601 10 20.2401 10 20.454 9.89101C20.6422 9.79513 20.7951 9.64215 20.891 9.45399C21 9.24008 21 8.96005 21 8.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.4 14H15.6C15.0399 14 14.7599 14 14.546 14.109C14.3578 14.2049 14.2049 14.3578 14.109 14.546C14 14.7599 14 15.0399 14 15.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V15.6C21 15.0399 21 14.7599 20.891 14.546C20.7951 14.3578 20.6422 14.2049 20.454 14.109C20.2401 14 19.9601 14 19.4 14Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.4 14H4.6C4.03995 14 3.75992 14 3.54601 14.109C3.35785 14.2049 3.20487 14.3578 3.10899 14.546C3 14.7599 3 15.0399 3 15.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V15.6C10 15.0399 10 14.7599 9.89101 14.546C9.79513 14.3578 9.64215 14.2049 9.45399 14.109C9.24008 14 8.96005 14 8.4 14Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
242
|
+
"dots-vertical": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
243
|
+
"copy": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M4 14C3.06812 14 2.60218 14 2.23463 13.8478C1.74458 13.6448 1.35523 13.2554 1.15224 12.7654C1 12.3978 1 11.9319 1 11V4.2C1 3.0799 1 2.51984 1.21799 2.09202C1.40973 1.71569 1.71569 1.40973 2.09202 1.21799C2.51984 1 3.0799 1 4.2 1H11C11.9319 1 12.3978 1 12.7654 1.15224C13.2554 1.35523 13.6448 1.74458 13.8478 2.23463C14 2.60218 14 3.06812 14 4M11.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V11.2C21 10.0799 21 9.51984 20.782 9.09202C20.5903 8.71569 20.2843 8.40973 19.908 8.21799C19.4802 8 18.9201 8 17.8 8H11.2C10.0799 8 9.51984 8 9.09202 8.21799C8.71569 8.40973 8.40973 8.71569 8.21799 9.09202C8 9.51984 8 10.0799 8 11.2V17.8C8 18.9201 8 19.4802 8.21799 19.908C8.40973 20.2843 8.71569 20.5903 9.09202 20.782C9.51984 21 10.0799 21 11.2 21Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
244
|
+
"share": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 9L21 3M21 3H15M21 3L13 11M10 5H7.8C6.11984 5 5.27976 5 4.63803 5.32698C4.07354 5.6146 3.6146 6.07354 3.32698 6.63803C3 7.27976 3 8.11984 3 9.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H14.2C15.8802 21 16.7202 21 17.362 20.673C17.9265 20.3854 18.3854 19.9265 18.673 19.362C19 18.7202 19 17.8802 19 16.2V14\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
245
|
+
"moon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M20.9548 11.9115C19.5779 14.3267 16.9791 15.9552 14 15.9552C9.58172 15.9552 6 12.3734 6 7.95516C6 4.9758 7.62867 2.37683 10.0443 1C4.96975 1.48114 1 5.75444 1 10.9549C1 16.4778 5.47715 20.9549 11 20.9549C16.2002 20.9549 20.4733 16.9856 20.9548 11.9115Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
246
|
+
"stars": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M5.5 12L6.28446 13.5689C6.54995 14.0999 6.68269 14.3654 6.86003 14.5954C7.01739 14.7996 7.20041 14.9826 7.40455 15.14C7.63462 15.3173 7.9001 15.4501 8.43108 15.7155L10 16.5L8.43108 17.2845C7.9001 17.5499 7.63462 17.6827 7.40455 17.86C7.20041 18.0174 7.01739 18.2004 6.86003 18.4046C6.68269 18.6346 6.54995 18.9001 6.28446 19.4311L5.5 21L4.71554 19.4311C4.45005 18.9001 4.31731 18.6346 4.13997 18.4046C3.98261 18.2004 3.79959 18.0174 3.59545 17.86C3.36538 17.6827 3.0999 17.5499 2.56892 17.2845L1 16.5L2.56892 15.7155C3.0999 15.4501 3.36538 15.3173 3.59545 15.14C3.79959 14.9826 3.98261 14.7996 4.13997 14.5954C4.31731 14.3654 4.45005 14.0999 4.71554 13.5689L5.5 12Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 1L15.1786 4.06442C15.4606 4.79765 15.6016 5.16426 15.8209 5.47264C16.0153 5.74595 16.254 5.98475 16.5274 6.17909C16.8357 6.39836 17.2024 6.53937 17.9356 6.82138L21 8L17.9356 9.17862C17.2024 9.46063 16.8357 9.60164 16.5274 9.82091C16.254 10.0153 16.0153 10.254 15.8209 10.5274C15.6016 10.8357 15.4606 11.2024 15.1786 11.9356L14 15L12.8214 11.9356C12.5394 11.2024 12.3984 10.8357 12.1791 10.5274C11.9847 10.254 11.746 10.0153 11.4726 9.82091C11.1643 9.60164 10.7976 9.46063 10.0644 9.17862L7 8L10.0644 6.82138C10.7976 6.53937 11.1643 6.39836 11.4726 6.17909C11.746 5.98475 11.9847 5.74595 12.1791 5.47264C12.3984 5.16426 12.5394 4.79765 12.8214 4.06442L14 1Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
247
|
+
"arrow-square-left": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 5.25C3 4.65326 3.23705 4.08097 3.65901 3.65901C4.08097 3.23705 4.65326 3 5.25 3H18.75C19.3467 3 19.919 3.23705 20.341 3.65901C20.7629 4.08097 21 4.65326 21 5.25V18.75C21 19.3467 20.7629 19.919 20.341 20.341C19.919 20.7629 19.3467 21 18.75 21H5.25C4.65326 21 4.08097 20.7629 3.65901 20.341C3.23705 19.919 3 19.3467 3 18.75V5.25Z\" stroke=\"#1B1F22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.625 3V21\" stroke=\"#1B1F22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.375 9.75L13.125 12L15.375 14.25\" stroke=\"#1B1F22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
|
|
248
|
+
};
|
|
249
|
+
|
|
250
|
+
class MsIcon {
|
|
251
|
+
sanitizer;
|
|
252
|
+
name;
|
|
253
|
+
color = 'ms-icon-black';
|
|
254
|
+
svg;
|
|
255
|
+
size = 'small'; // default
|
|
256
|
+
width = 16;
|
|
257
|
+
height = 16;
|
|
258
|
+
strokeWidth = 1.25;
|
|
259
|
+
constructor(sanitizer) {
|
|
260
|
+
this.sanitizer = sanitizer;
|
|
261
|
+
}
|
|
262
|
+
ngOnInit() {
|
|
263
|
+
const icon = ICONS[this.name] || '';
|
|
264
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
265
|
+
console.log(this.svg, 'svg');
|
|
266
|
+
console.log(ICONS, 'ICONS');
|
|
267
|
+
console.log(this.name, 'name');
|
|
268
|
+
this.getsize();
|
|
269
|
+
}
|
|
270
|
+
ngOnChanges() {
|
|
271
|
+
const icon = ICONS[this.name] || '';
|
|
272
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
273
|
+
this.getsize();
|
|
274
|
+
console.log(this.svg, 'svg');
|
|
275
|
+
console.log(ICONS, 'ICONS');
|
|
276
|
+
console.log(this.name, 'name');
|
|
277
|
+
}
|
|
278
|
+
getsize() {
|
|
279
|
+
switch (this.size) {
|
|
280
|
+
case 'small':
|
|
281
|
+
this.width = this.height = 16;
|
|
282
|
+
this.strokeWidth = 1.25;
|
|
283
|
+
break;
|
|
284
|
+
case 'medium':
|
|
285
|
+
this.width = this.height = 20;
|
|
286
|
+
this.strokeWidth = 1.5;
|
|
287
|
+
break;
|
|
288
|
+
case 'large':
|
|
289
|
+
this.width = this.height = 24;
|
|
290
|
+
this.strokeWidth = 1.75;
|
|
291
|
+
break;
|
|
292
|
+
default:
|
|
293
|
+
this.width = this.height = 20;
|
|
294
|
+
this.strokeWidth = 1.5;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
298
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsIcon, isStandalone: true, selector: "ms-icon", inputs: { name: "name", color: "color", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [attr.stroke-width]=\"strokeWidth\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}.ms-icon-gray{color:#6a6b6d!important}.ms-icon-black{color:#1b1f22!important}.ms-icon-red{color:#da3e37!important}.ms-icon-blue{color:#0084ff!important}.ms-icon-white{color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
299
|
+
}
|
|
300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, decorators: [{
|
|
301
|
+
type: Component,
|
|
302
|
+
args: [{ selector: 'ms-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [attr.stroke-width]=\"strokeWidth\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}.ms-icon-gray{color:#6a6b6d!important}.ms-icon-black{color:#1b1f22!important}.ms-icon-red{color:#da3e37!important}.ms-icon-blue{color:#0084ff!important}.ms-icon-white{color:#fff!important}\n"] }]
|
|
303
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { name: [{
|
|
304
|
+
type: Input
|
|
305
|
+
}], color: [{
|
|
306
|
+
type: Input
|
|
307
|
+
}], size: [{
|
|
308
|
+
type: Input
|
|
309
|
+
}] } });
|
|
310
|
+
|
|
311
|
+
const FLAGICONS = {
|
|
312
|
+
"afghanistan": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178571\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178571)\"><path d=\"M17.2178 1.19002C15.5908 0.404014 13.8067 -0.00285185 11.9998 1.5046e-05C10.1298 1.5046e-05 8.35977 0.428015 6.78277 1.19002L5.73877 12L6.78277 22.81C8.4095 23.5958 10.1932 24.0027 11.9998 24C13.8698 24 15.6398 23.572 17.2178 22.81L18.2598 12L17.2178 1.19002Z\" fill=\"#D80027\"/><path d=\"M6.783 1.19141C4.75006 2.17283 3.03518 3.70778 1.83534 5.61996C0.635501 7.53213 -0.00063641 9.74397 4.77761e-07 12.0014C-0.000260168 14.2585 0.636054 16.4699 1.83587 18.3817C3.03569 20.2935 4.75037 21.8281 6.783 22.8094V1.19141Z\" fill=\"black\"/><path d=\"M17.2178 1.19141V22.8104C19.2505 21.8288 20.9652 20.2938 22.1649 18.3817C23.3645 16.4695 24.0005 14.2577 23.9998 12.0004C24.0003 9.74324 23.3642 7.53169 22.1646 5.61972C20.9649 3.70775 19.2504 2.1729 17.2178 1.19141Z\" fill=\"#496E2D\"/><path d=\"M11.9998 7.82667C11.4463 7.8181 10.8966 7.91972 10.3828 8.12562C9.86892 8.33151 9.40115 8.63756 9.0067 9.02596C8.61224 9.41435 8.29899 9.87733 8.08517 10.3879C7.87135 10.8986 7.76123 11.4466 7.76123 12.0002C7.76123 12.5537 7.87135 13.1018 8.08517 13.6124C8.29899 14.123 8.61224 14.586 9.0067 14.9744C9.40115 15.3628 9.86892 15.6688 10.3828 15.8747C10.8966 16.0806 11.4463 16.1822 11.9998 16.1737C13.0955 16.1567 14.1406 15.7095 14.9094 14.9287C15.6783 14.1479 16.1092 13.096 16.1092 12.0002C16.1092 10.9043 15.6783 9.85248 14.9094 9.07164C14.1406 8.2908 13.0955 7.84363 11.9998 7.82667Z\" fill=\"#FFDA44\"/><path d=\"M12 10.4355C11.424 10.4355 10.957 10.9025 10.957 11.4795V13.0445H13.044V11.4795C13.044 10.9025 12.577 10.4355 12.001 10.4355H12Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
313
|
+
"albania": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178584\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178584)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#D80027\"/><path d=\"M18.7828 8.90733H14.4358C14.5857 8.75027 14.7013 8.56373 14.7752 8.35957C14.8492 8.15542 14.8798 7.93811 14.8652 7.72147C14.8506 7.50483 14.7911 7.2936 14.6904 7.10122C14.5898 6.90883 14.4502 6.73949 14.2805 6.60397C14.1109 6.46844 13.9149 6.36971 13.705 6.31403C13.4952 6.25836 13.276 6.24696 13.0615 6.28057C12.847 6.31419 12.6418 6.39207 12.459 6.50926C12.2762 6.62646 12.1198 6.78041 11.9998 6.96133C11.8144 6.68003 11.5432 6.46609 11.2265 6.35134C10.9098 6.23659 10.5645 6.22718 10.242 6.32449C9.91945 6.42181 9.63698 6.62065 9.43659 6.89143C9.2362 7.16221 9.12859 7.49046 9.12977 7.82733C9.12977 8.24733 9.29577 8.62733 9.56377 8.90733H5.21777C5.21777 10.0603 6.22177 10.9943 7.37377 10.9943H7.30377C7.30377 12.1473 8.23877 13.0813 9.39177 13.0813C9.39177 13.4553 9.48977 13.8053 9.66177 14.1083L7.93077 15.8383L9.25877 17.1673L11.1428 15.2833C11.2168 15.3103 11.2928 15.3323 11.3718 15.3463L10.2328 17.9163L11.9998 19.8273L13.7668 17.9173L12.6288 15.3473C12.7068 15.333 12.7834 15.312 12.8578 15.2843L14.7418 17.1683L16.0698 15.8403L14.3388 14.1083C14.5108 13.8063 14.6088 13.4563 14.6088 13.0823C14.8828 13.0823 15.1542 13.0283 15.4074 12.9235C15.6606 12.8186 15.8907 12.6649 16.0845 12.4711C16.2783 12.2773 16.432 12.0472 16.5369 11.794C16.6418 11.5408 16.6958 11.2694 16.6958 10.9953H16.6258C17.7788 10.9953 18.7828 10.0613 18.7828 8.90833V8.90733Z\" fill=\"black\"/></g></svg>",
|
|
314
|
+
"algeria": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178592\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178592)\"><path d=\"M12.0001 0C18.6281 0 24.0001 5.373 24.0001 12C24.0001 18.627 18.6281 24 12.0001 24C12.0001 23.478 10.4351 12 10.4351 12L12.0011 0H12.0001Z\" fill=\"#F0F0F0\"/><path d=\"M12 24C5.373 24 0 18.627 0 12C0 5.373 5.373 0 12 0\" fill=\"#496E2D\"/><path d=\"M14.578 9.69922L13.594 11.0562L11.999 10.5382L12.985 11.8942L12.001 13.2512L13.595 12.7312L14.581 14.0872L14.58 12.4112L16.174 11.8922L14.579 11.3752V9.70022L14.578 9.69922Z\" fill=\"#D80027\"/><path d=\"M12.9952 15.3917C12.4793 15.3913 11.9702 15.2733 11.5068 15.0465C11.0434 14.8197 10.6378 14.4901 10.321 14.0829C10.0042 13.6756 9.78447 13.2015 9.67859 12.6965C9.57272 12.1916 9.58347 11.6691 9.71003 11.1689C9.83658 10.6687 10.0756 10.204 10.4089 9.81015C10.7422 9.4163 11.161 9.1037 11.6333 8.89615C12.1057 8.68859 12.6192 8.59157 13.1347 8.61245C13.6502 8.63334 14.1542 8.77159 14.6082 9.01667C14.0209 8.44205 13.2771 8.05354 12.4699 7.89985C11.6627 7.74615 10.8282 7.8341 10.0708 8.15267C9.31341 8.47125 8.66689 9.00627 8.21227 9.6907C7.75764 10.3751 7.51514 11.1785 7.51514 12.0002C7.51514 12.8218 7.75764 13.6252 8.21227 14.3096C8.66689 14.9941 9.31341 15.5291 10.0708 15.8477C10.8282 16.1662 11.6627 16.2542 12.4699 16.1005C13.2771 15.9468 14.0209 15.5583 14.6082 14.9837C14.1282 15.2437 13.5782 15.3917 12.9952 15.3917Z\" fill=\"#D80027\"/></g></svg>",
|
|
315
|
+
"andorra": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178602\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178602)\"><path d=\"M6.78277 22.81C8.4095 23.5958 10.1932 24.0027 11.9998 24C13.8698 24 15.6398 23.572 17.2178 22.81L18.2598 12L17.2178 1.19002C15.5908 0.404014 13.8067 -0.00285185 11.9998 1.5046e-05C10.1298 1.5046e-05 8.35977 0.428015 6.78277 1.19002L5.73877 12L6.78277 22.81Z\" fill=\"#FFDA44\"/><path d=\"M17.2168 22.8104C19.2495 21.8288 20.9642 20.2938 22.1639 18.3817C23.3635 16.4695 23.9995 14.2577 23.9988 12.0004C23.9993 9.74324 23.3633 7.53169 22.1636 5.61972C20.964 3.70775 19.2494 2.1729 17.2168 1.19141V22.8104Z\" fill=\"#D80027\"/><path d=\"M6.783 22.8095V1.18945C4.74991 2.17095 3.03493 3.70606 1.83508 5.61843C0.635224 7.53079 -0.000824239 9.74285 8.01622e-07 12.0005C-0.000259844 14.2576 0.636054 16.469 1.83587 18.3808C3.03569 20.2925 4.75037 21.8282 6.783 22.8095Z\" fill=\"#0052B4\"/><path d=\"M12.0001 16.1731V12.0001H15.1301V13.5651C15.1301 13.8371 14.6091 14.8331 13.3201 15.6521C12.8331 15.9621 12.3281 16.0621 12.0001 16.1731ZM12.0001 8.86914H8.87012V11.9991H12.0001V8.86914Z\" fill=\"#D80027\"/><path d=\"M13.5652 7.82623C13.5652 7.64309 13.517 7.46318 13.4254 7.30459C13.3338 7.146 13.2021 7.01433 13.0434 6.9228C12.8848 6.83127 12.7049 6.78313 12.5217 6.7832C12.3386 6.78328 12.1587 6.83157 12.0002 6.92323C11.8416 6.83157 11.6617 6.78328 11.4786 6.7832C11.2955 6.78313 11.1155 6.83127 10.9569 6.9228C10.7983 7.01433 10.6666 7.146 10.575 7.30459C10.4834 7.46318 10.4352 7.64309 10.4352 7.82623H7.82617V13.0442C7.82617 14.9862 9.36917 16.1092 10.5782 16.6912C10.4623 16.8899 10.4154 17.1212 10.4446 17.3493C10.4738 17.5774 10.5776 17.7894 10.7398 17.9524C10.902 18.1154 11.1135 18.2202 11.3415 18.2506C11.5694 18.2809 11.801 18.2351 12.0002 18.1202C12.1994 18.2342 12.4307 18.2793 12.6581 18.2486C12.8856 18.2179 13.0966 18.1131 13.2585 17.9504C13.4204 17.7877 13.5242 17.5762 13.5538 17.3485C13.5833 17.1209 13.5371 16.8899 13.4222 16.6912C14.6322 16.1092 16.1742 14.9862 16.1742 13.0442V7.82523H13.5652V7.82623ZM14.6092 13.0442C14.6092 13.3152 14.6092 14.1432 13.3212 14.9622C12.9067 15.2202 12.4638 15.4292 12.0012 15.5852C11.5379 15.4294 11.0943 15.2203 10.6792 14.9622C9.39117 14.1422 9.39117 13.3162 9.39117 13.0442V9.39023H14.6092V13.0422V13.0442Z\" fill=\"#FF9811\"/></g></svg>",
|
|
316
|
+
"angola": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178613\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178613)\"><path d=\"M0 12C0 5.373 5.373 0 12 0C18.627 0 24 5.373 24 12C23.478 12 12 13.565 12 13.565L0 12Z\" fill=\"#D80027\"/><path d=\"M24 12C24 18.628 18.627 24 12 24C5.373 24 0 18.628 0 12\" fill=\"black\"/><path d=\"M10.354 9.54466L11.371 10.2827L10.983 11.4787L12 10.7387L13.017 11.4767L12.627 10.2817L13.644 9.54166L12.387 9.54266L11.998 8.34766L11.611 9.54366H10.353L10.354 9.54466Z\" fill=\"#FFDA44\"/><path d=\"M15.0002 6.80397C14.0886 6.27628 13.0535 5.99956 12.0002 6.00197V7.56697C12.7786 7.56528 13.5435 7.76989 14.2172 8.15997C15.2347 8.74908 15.9769 9.71772 16.2812 10.8534C16.5855 11.9891 16.4269 13.1991 15.8402 14.218C15.2511 15.2355 14.2824 15.9778 13.1467 16.282C12.0111 16.5863 10.8011 16.4277 9.78216 15.841C9.18573 15.4971 8.67816 15.0184 8.30016 14.443L6.99316 15.306C7.50532 16.0841 8.19269 16.7314 9.00016 17.196C10.3785 17.9895 12.0152 18.204 13.5514 17.7925C15.0876 17.381 16.398 16.3771 17.1952 15.001C17.9893 13.6225 18.2042 11.9853 17.7927 10.4486C17.3812 8.91186 16.3769 7.60113 15.0002 6.80397Z\" fill=\"#FFDA44\"/><path d=\"M8.53913 10.9551C8.33996 11.3192 8.2936 11.7476 8.41025 12.1459C8.52689 12.5442 8.79699 12.8799 9.16113 13.0791L14.2451 15.8571C13.8991 16.4891 14.0831 17.2581 14.7151 17.6041L16.0881 18.3551C16.2384 18.4373 16.4033 18.4891 16.5736 18.5076C16.7438 18.526 16.9161 18.5108 17.0804 18.4627C17.2448 18.4146 17.3981 18.3346 17.5315 18.2272C17.6649 18.1199 17.7759 17.9873 17.8581 17.8371L18.6091 16.4641L8.53913 10.9551Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
317
|
+
"antigua": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178624\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178624)\"><path d=\"M0 11.9992C0 12.8202 0.083 13.6232 0.24 14.3992L12 15.1292L23.76 14.3992C24.082 12.8154 24.082 11.183 23.76 9.59919L12 8.86719L0.24 9.59719C0.083 10.3742 0 11.1762 0 11.9992Z\" fill=\"#0052B4\"/><path d=\"M23.7602 14.4004H0.240234C1.35223 19.8754 6.19423 24.0004 12.0002 24.0004C17.8052 24.0004 22.6482 19.8774 23.7602 14.4004Z\" fill=\"#F0F0F0\"/><path d=\"M0.240234 9.6H23.7602C22.6482 4.123 17.8052 0 12.0002 0C6.19423 0 1.35223 4.123 0.240234 9.6Z\" fill=\"black\"/><path d=\"M17.2182 9.60072H6.7832L8.9152 8.59772L7.7802 6.53272L10.0952 6.97572L10.3882 4.63672L12.0012 6.35672L13.6132 4.63672L13.9062 6.97572L16.2212 6.53272L15.0862 8.59772L17.2182 9.59972V9.60072Z\" fill=\"#FFDA44\"/><path d=\"M1.35768e-05 12.0008C1.35768e-05 18.6288 5.37301 24.0008 12 24.0008L2.40001 4.80078C0.838637 6.87609 -0.00390063 9.4037 1.35768e-05 12.0008ZM12 24.0008C18.627 24.0008 24 18.6278 24 12.0008C24 9.29878 23.107 6.80578 21.6 4.80078L12 24.0008Z\" fill=\"#A2001D\"/></g></svg>",
|
|
318
|
+
"barbuda": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178624\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178624)\"><path d=\"M0 11.9992C0 12.8202 0.083 13.6232 0.24 14.3992L12 15.1292L23.76 14.3992C24.082 12.8154 24.082 11.183 23.76 9.59919L12 8.86719L0.24 9.59719C0.083 10.3742 0 11.1762 0 11.9992Z\" fill=\"#0052B4\"/><path d=\"M23.7602 14.4004H0.240234C1.35223 19.8754 6.19423 24.0004 12.0002 24.0004C17.8052 24.0004 22.6482 19.8774 23.7602 14.4004Z\" fill=\"#F0F0F0\"/><path d=\"M0.240234 9.6H23.7602C22.6482 4.123 17.8052 0 12.0002 0C6.19423 0 1.35223 4.123 0.240234 9.6Z\" fill=\"black\"/><path d=\"M17.2182 9.60072H6.7832L8.9152 8.59772L7.7802 6.53272L10.0952 6.97572L10.3882 4.63672L12.0012 6.35672L13.6132 4.63672L13.9062 6.97572L16.2212 6.53272L15.0862 8.59772L17.2182 9.59972V9.60072Z\" fill=\"#FFDA44\"/><path d=\"M1.35768e-05 12.0008C1.35768e-05 18.6288 5.37301 24.0008 12 24.0008L2.40001 4.80078C0.838637 6.87609 -0.00390063 9.4037 1.35768e-05 12.0008ZM12 24.0008C18.627 24.0008 24 18.6278 24 12.0008C24 9.29878 23.107 6.80578 21.6 4.80078L12 24.0008Z\" fill=\"#A2001D\"/></g></svg>",
|
|
319
|
+
"argentina": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178635\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178635)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M11.9999 -0.00195265C9.74282 -0.00221329 7.53141 0.634101 5.61962 1.83392C3.70783 3.03374 2.17319 4.74841 1.19192 6.78105H22.8099C21.8285 4.74811 20.2935 3.03323 18.3814 1.83339C16.4692 0.633547 14.2574 -0.00258954 11.9999 -0.00195265ZM11.9999 23.998C14.2574 23.9987 16.4692 23.3625 18.3814 22.1627C20.2935 20.9629 21.8285 19.248 22.8099 17.215H1.19092C2.1722 19.2482 3.70709 20.9633 5.61928 22.1633C7.53146 23.3633 9.74337 23.9996 12.0009 23.999L11.9999 23.998Z\" fill=\"#338AF3\"/><path d=\"M15.5861 11.9999L14.1211 12.6899L14.9011 14.1089L13.3101 13.8039L13.1081 15.4119L12.0001 14.2289L10.8911 15.4119L10.6901 13.8039L9.09806 14.1089L9.87806 12.6889L8.41406 11.9999L9.88006 11.3099L9.10006 9.89089L10.6901 10.1959L10.8921 8.58789L12.0001 9.77089L13.1081 8.58789L13.3101 10.1959L14.9001 9.88989L14.1201 11.3099L15.5851 11.9989L15.5861 11.9999Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
320
|
+
"united states": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><g clip-path=\"url(#clip0_1067_178528)\"><mask id=\"mask0_1067_178528\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178528)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M11.4771 11.9994H24.0001C24.0007 10.9425 23.8619 9.89004 23.5871 8.86942H11.4781L11.4771 11.9994ZM11.4771 5.73742H22.2381C21.5042 4.54095 20.5671 3.48173 19.4691 2.60742H11.4771V5.73742ZM12.0001 23.9994C14.8241 23.9994 17.4201 23.0234 19.4701 21.3904H4.53009C6.65149 23.0833 9.28603 24.0034 12.0001 23.9994ZM1.76109 18.2594H22.2381C22.8349 17.286 23.2889 16.2319 23.5861 15.1294H0.413086C0.713086 16.2454 1.17109 17.2964 1.76109 18.2594Z\" fill=\"#D80027\"/><path d=\"M5.559 1.874H6.652L5.635 2.613L6.024 3.809L5.006 3.069L3.989 3.809L4.325 2.776C3.429 3.522 2.645 4.396 1.997 5.37H2.347L1.7 5.84C1.6 6.008 1.503 6.18 1.41 6.353L1.72 7.304L1.142 6.885C1 7.19 0.868 7.5 0.75 7.817L1.09 8.865H2.348L1.331 9.605L1.719 10.8L0.702 10.061L0.092 10.504C0.033 10.994 0 11.494 0 12H12V0C9.63 0 7.42 0.688 5.559 1.874ZM6.024 10.8L5.006 10.061L3.989 10.8L4.378 9.604L3.361 8.865H4.618L5.006 7.67L5.395 8.865H6.652L5.635 9.605L6.024 10.8ZM5.635 6.109L6.024 7.304L5.006 6.565L3.989 7.305L4.378 6.109L3.361 5.369H4.618L5.006 4.174L5.395 5.37H6.652L5.635 6.109ZM10.328 10.8L9.311 10.061L8.294 10.8L8.682 9.604L7.665 8.865H8.922L9.311 7.67L9.699 8.865H10.957L9.939 9.605L10.328 10.8ZM9.939 6.109L10.328 7.304L9.311 6.565L8.294 7.305L8.682 6.109L7.665 5.369H8.922L9.311 4.174L9.699 5.37H10.957L9.939 6.109ZM9.939 2.613L10.328 3.809L9.311 3.069L8.294 3.809L8.682 2.613L7.665 1.874H8.922L9.311 0.678L9.699 1.874H10.957L9.939 2.613Z\" fill=\"#0052B4\"/></g></g><defs><clipPath id=\"clip0_1067_178528\"><rect width=\"24\" height=\"24\" fill=\"white\"/></clipPath></defs></svg>",
|
|
321
|
+
"germany": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><g clip-path=\"url(#clip0_1067_178537)\"><mask id=\"mask0_1067_178537\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178537)\"><path d=\"M0.746094 16.1758C2.44209 20.7458 6.84009 24.0008 12.0001 24.0008C17.1601 24.0008 21.5581 20.7438 23.2531 16.1748L12.0001 15.1328L0.746094 16.1758Z\" fill=\"#FFDA44\"/><path d=\"M12.0001 0C6.84009 0 2.44209 3.258 0.746094 7.828L12.0001 8.87L23.2531 7.827C21.5581 3.257 17.1601 0 12.0001 0Z\" fill=\"black\"/><path d=\"M0.746008 7.82617C0.251015 9.16205 -0.00161125 10.5755 7.73241e-06 12.0002C7.73241e-06 13.4672 0.264008 14.8732 0.746008 16.1742H23.254C23.736 14.8742 24 13.4672 24 12.0002C24 10.5322 23.736 9.12617 23.254 7.82617H0.746008Z\" fill=\"#D80027\"/></g></g><defs><clipPath id=\"clip0_1067_178537\"><rect width=\"24\" height=\"24\" fill=\"white\"/></clipPath></defs></svg>",
|
|
322
|
+
"france": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><g clip-path=\"url(#clip0_1067_178546)\"><mask id=\"mask0_1067_178546\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178546)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M24.0001 12.0001C24.0001 6.84009 20.7431 2.44209 16.1741 0.746094V23.2541C20.7441 21.5581 24.0001 17.1591 24.0001 12.0001Z\" fill=\"#D80027\"/><path d=\"M0 11.9991C0 17.1591 3.257 21.5581 7.826 23.2531V0.746094C3.256 2.44209 0 6.84009 0 12.0001V11.9991Z\" fill=\"#0052B4\"/></g></g><defs><clipPath id=\"clip0_1067_178546\"><rect width=\"24\" height=\"24\" fill=\"white\"/></clipPath></defs></svg>",
|
|
323
|
+
"china": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><g clip-path=\"url(#clip0_1067_178555)\"><mask id=\"mask0_1067_178555\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178555)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#D80027\"/><path d=\"M6.56693 7.30077L7.60293 10.4888H10.9549L8.24493 12.4618L9.28093 15.6498L6.56693 13.6808L3.85293 15.6498L4.89293 12.4618L2.17993 10.4898H5.52993L6.56693 7.30077ZM14.2259 18.5848L13.4339 17.6098L12.2619 18.0638L12.9419 17.0098L12.1489 16.0298L13.3639 16.3528L14.0479 15.2988L14.1139 16.5548L15.3319 16.8778L14.1559 17.3278L14.2259 18.5848ZM15.8019 15.7248L16.1769 14.5248L15.1499 13.7988L16.4069 13.7798L16.7769 12.5798L17.1849 13.7698L18.4409 13.7568L17.4329 14.5068L17.8359 15.6968L16.8099 14.9708L15.8019 15.7248ZM17.9259 8.80677L17.3729 9.93677L18.2729 10.8128L17.0299 10.6348L16.4769 11.7598L16.2619 10.5218L15.0149 10.3438L16.1299 9.75777L15.9149 8.51577L16.8149 9.39277L17.9249 8.80677H17.9259ZM14.2599 5.38477L14.1649 6.63677L15.3329 7.10977L14.1089 7.40977L14.0199 8.66577L13.3599 7.59777L12.1359 7.89777L12.9459 6.93677L12.2809 5.87277L13.4479 6.34577L14.2589 5.38477H14.2599Z\" fill=\"#FFDA44\"/></g></g><defs><clipPath id=\"clip0_1067_178555\"><rect width=\"24\" height=\"24\" fill=\"white\"/></clipPath></defs></svg>",
|
|
324
|
+
"canada": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178564\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178564)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M24 12.0005C24.0007 9.74312 23.3647 7.53136 22.1651 5.61919C20.9654 3.70703 19.2508 2.17202 17.218 1.19045V22.8105C19.2509 21.8288 20.9657 20.2936 22.1653 18.3813C23.365 16.4689 24.0009 14.257 24 11.9995V12.0005ZM8.01622e-07 11.9995C-0.000636087 14.2569 0.635501 16.4687 1.83534 18.3809C3.03518 20.2931 4.75006 21.828 6.783 22.8095V1.18945C4.74991 2.17095 3.03493 3.70606 1.83508 5.61843C0.635224 7.53079 -0.000824239 9.74285 8.01622e-07 12.0005V11.9995ZM14.087 13.5655L16.174 12.5225L15.131 11.9995V10.9565L13.043 11.9995L14.087 9.91245H13.044L12 8.34945L10.957 9.91445H9.913L10.957 12.0015L8.87 10.9585V11.9995L7.826 12.5215L9.913 13.5645L9.391 14.6085H11.478V16.1735H12.522V14.6095H14.609L14.087 13.5655Z\" fill=\"#D80027\"/></g></svg>",
|
|
325
|
+
"pakistan": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178572\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178572)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M5.52895e-07 12.0009C5.52895e-07 16.5499 2.53 20.5069 6.26 22.5419V1.46094C4.36528 2.49261 2.7838 4.01611 1.68213 5.87101C0.580454 7.7259 -0.000654323 9.84355 5.52895e-07 12.0009Z\" fill=\"#F0F0F0\"/><path d=\"M12 0C9.92001 0 7.96601 0.53 6.26001 1.46V22.542C8.02086 23.5015 9.9947 24.0029 12 24C18.627 24 24 18.627 24 12C24 5.372 18.627 0 12 0Z\" fill=\"#496E2D\"/><path d=\"M17.1299 13.9852C16.7115 14.2871 16.2297 14.4896 15.7211 14.5772C15.2126 14.6648 14.6908 14.6352 14.1954 14.4906C13.7001 14.346 13.2443 14.0903 12.8627 13.7429C12.4811 13.3955 12.1839 12.9656 11.9936 12.486C11.8033 12.0064 11.7249 11.4896 11.7646 10.9751C11.8042 10.4606 11.9607 9.96196 12.2222 9.5171C12.4836 9.07224 12.8432 8.69292 13.2735 8.40804C13.7037 8.12315 14.1933 7.94022 14.7049 7.87317C13.8924 7.75146 13.062 7.87226 12.3178 8.22045C11.5736 8.56863 10.9487 9.12871 10.5214 9.8305C10.0941 10.5323 9.88347 11.3446 9.91584 12.1656C9.94821 12.9865 10.2222 13.7797 10.7034 14.4457C11.1846 15.1117 11.8516 15.6208 12.6209 15.9093C13.3902 16.1978 14.2276 16.2529 15.028 16.0676C15.8285 15.8823 16.5564 15.4648 17.1207 14.8676C17.6849 14.2703 18.0604 13.5199 18.1999 12.7102C17.9553 13.2178 17.5874 13.6561 17.1299 13.9852ZM17.0659 7.82617L17.9209 8.74817L19.0609 8.21917L18.4499 9.31717L19.3049 10.2392L18.0709 9.99617L17.4589 11.0942L17.3089 9.84617L16.0749 9.60317L17.2159 9.07417L17.0659 7.82617Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
326
|
+
"india": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178582\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178582)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M11.9999 -0.00195265C9.7425 -0.00258954 7.53067 0.633547 5.61849 1.83339C3.70632 3.03323 2.17136 4.74811 1.18994 6.78105H22.8099C21.8285 4.74811 20.2936 3.03323 18.3814 1.83339C16.4692 0.633547 14.2574 -0.00258954 11.9999 -0.00195265Z\" fill=\"#FF9811\"/><path d=\"M11.9999 23.9998C14.2572 24.0002 16.4688 23.364 18.3808 22.1642C20.2928 20.9644 21.8276 19.2496 22.8089 17.2168H1.18994C2.17136 19.2497 3.70632 20.9646 5.61849 22.1645C7.53067 23.3643 9.7425 24.0004 11.9999 23.9998Z\" fill=\"#6DA544\"/><path d=\"M11.9999 16.1722C13.1069 16.1722 14.1686 15.7325 14.9514 14.9497C15.7342 14.1669 16.1739 13.1052 16.1739 11.9982C16.1739 10.8912 15.7342 9.82953 14.9514 9.04675C14.1686 8.26398 13.1069 7.82422 11.9999 7.82422C10.8929 7.82422 9.83124 8.26398 9.04846 9.04675C8.26569 9.82953 7.82593 10.8912 7.82593 11.9982C7.82593 13.1052 8.26569 14.1669 9.04846 14.9497C9.83124 15.7325 10.8929 16.1722 11.9999 16.1722Z\" fill=\"#0052B4\"/><path d=\"M12.0001 14.6067C12.6921 14.6067 13.3557 14.3318 13.845 13.8425C14.3342 13.3532 14.6091 12.6896 14.6091 11.9977C14.6091 11.3057 14.3342 10.6421 13.845 10.1528C13.3557 9.66355 12.6921 9.38867 12.0001 9.38867C11.3082 9.38867 10.6446 9.66355 10.1553 10.1528C9.66599 10.6421 9.39111 11.3057 9.39111 11.9977C9.39111 12.6896 9.66599 13.3532 10.1553 13.8425C10.6446 14.3318 11.3082 14.6067 12.0001 14.6067Z\" fill=\"#F0F0F0\"/><path d=\"M11.9999 8.7793L12.8059 10.6053L14.7889 10.3893L13.6099 11.9993L14.7889 13.6093L12.8059 13.3933L11.9999 15.2183L11.1949 13.3933L9.21191 13.6093L10.3899 11.9993L9.21191 10.3893L11.1949 10.6053L11.9999 8.7803V8.7793Z\" fill=\"#0052B4\"/></g></svg>",
|
|
327
|
+
"armenia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178594\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178594)\"><path d=\"M24 12.0007C24 10.5327 23.736 9.12669 23.254 7.82669L12 7.30469L0.746008 7.82669C0.251036 9.16257 -0.00159005 10.5761 7.52996e-06 12.0007C7.52996e-06 13.4687 0.264008 14.8747 0.746008 16.1747L12 16.6967L23.254 16.1747C23.736 14.8747 24 13.4687 24 12.0007Z\" fill=\"#0052B4\"/><path d=\"M12.0001 23.9998C17.1601 23.9998 21.5581 20.7428 23.2531 16.1738H0.746094C2.44209 20.7438 6.84009 23.9998 12.0001 23.9998Z\" fill=\"#FF9811\"/><path d=\"M0.746094 7.826H23.2531C21.5581 3.256 17.1601 0 12.0001 0C6.84009 0 2.44209 3.256 0.746094 7.826Z\" fill=\"#D80027\"/></g></svg>",
|
|
328
|
+
"australia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178603\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178603)\"><path d=\"M24 12C24 18.627 18.627 24 12 24C5.373 24 0 18.627 0 12C0 12.003 12 0 12 0C18.627 0 24 5.373 24 12Z\" fill=\"#0052B4\"/><path d=\"M11.968 12.0007H12V11.9688L11.968 12.0007Z\" fill=\"#F0F0F0\"/><path d=\"M12 6.262V0H11.998C5.372 0 0 5.374 0 12H6.26V8.475L9.786 12.001H11.968L12 11.969V9.787L8.474 6.262H12Z\" fill=\"#F0F0F0\"/><path d=\"M6.07094 1.56641C4.19228 2.63657 2.63594 4.19222 1.56494 6.07041V12.0004H4.69494V4.69641H11.9999V1.56641H6.07094Z\" fill=\"#D80027\"/><path d=\"M12 10.5248L7.73796 6.25977H6.26196L12 12.0018V10.5258V10.5248Z\" fill=\"#D80027\"/><path d=\"M7.23704 14.0868L7.89604 15.4638L9.38304 15.1208L8.71704 16.4937L9.91304 17.4427L8.42404 17.7778L8.42804 19.3048L7.23804 18.3498L6.04604 19.3048L6.05104 17.7778L4.56104 17.4427L5.75804 16.4937L5.09104 15.1208L6.57904 15.4648L7.23704 14.0868ZM17.967 16.6957L18.297 17.3848L19.04 17.2127L18.707 17.8997L19.305 18.3737L18.56 18.5417L18.562 19.3048L17.967 18.8277L17.371 19.3048L17.373 18.5417L16.629 18.3737L17.227 17.8997L16.894 17.2127L17.638 17.3848L17.967 16.6957ZM14.903 9.39175L15.233 10.0818L15.976 9.90875L15.643 10.5958L16.241 11.0698L15.497 11.2378L15.499 12.0008L14.903 11.5237L14.308 12.0008L14.31 11.2378L13.565 11.0698L14.163 10.5958L13.83 9.90875L14.574 10.0807L14.904 9.39175H14.903ZM17.967 5.21875L18.297 5.90675L19.04 5.73475L18.707 6.42175L19.305 6.89575L18.56 7.06375L18.562 7.82675L17.967 7.34975L17.371 7.82675L17.373 7.06375L16.629 6.89575L17.227 6.42175L16.894 5.73475L17.638 5.90675L17.967 5.21875ZM20.642 8.34875L20.971 9.03675L21.715 8.86475L21.381 9.55175L21.98 10.0257L21.235 10.1937L21.237 10.9577L20.642 10.4798L20.046 10.9577L20.048 10.1937L19.304 10.0257L19.902 9.55175L19.569 8.86475L20.312 9.03675L20.642 8.34875ZM18.729 12.0008L18.988 12.7977H19.826L19.148 13.2908L19.408 14.0877L18.729 13.5958L18.051 14.0877L18.31 13.2908L17.632 12.7988H18.47L18.729 12.0008Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
329
|
+
"austria": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178615\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178615)\"><path d=\"M23.254 16.1723C23.736 14.8723 24 13.4662 24 11.9982C24 10.5302 23.736 9.12425 23.254 7.82425L12 6.78125L0.746009 7.82425C0.25092 9.16045 -0.00170789 10.5743 8.68941e-06 11.9992C8.68941e-06 13.4672 0.264009 14.8733 0.746009 16.1733L12 17.2162L23.254 16.1723Z\" fill=\"#F0F0F0\"/><path d=\"M12.0001 24C17.1601 24 21.5581 20.743 23.2531 16.174H0.746094C2.44209 20.744 6.84009 24 12.0001 24ZM12.0001 0C6.84009 0 2.44209 3.256 0.746094 7.826H23.2531C21.5581 3.256 17.1601 0 12.0001 0Z\" fill=\"#D80027\"/></g></svg>",
|
|
330
|
+
"azerbaijan": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178623\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178623)\"><path d=\"M24 12.0007C24 10.5327 23.736 9.12669 23.254 7.82669L12 7.30469L0.746008 7.82669C0.251036 9.16257 -0.00159005 10.5761 7.52996e-06 12.0007C7.52996e-06 13.4687 0.264008 14.8747 0.746008 16.1747L12 16.6967L23.254 16.1747C23.736 14.8747 24 13.4687 24 12.0007Z\" fill=\"#D80027\"/><path d=\"M12.0001 23.9998C17.1601 23.9998 21.5591 20.7428 23.2541 16.1738H0.74707C2.44307 20.7438 6.84107 23.9998 12.0011 23.9998H12.0001Z\" fill=\"#6DA544\"/><path d=\"M0.74707 7.825H23.2541C21.5601 3.255 17.1601 2.3021e-07 12.0011 2.3021e-07C6.84007 -0.00099977 2.44307 3.256 0.74707 7.825Z\" fill=\"#338AF3\"/><path d=\"M12.2601 15.3917C11.7442 15.3912 11.2352 15.273 10.7719 15.0461C10.3085 14.8192 9.90309 14.4895 9.58639 14.0823C9.2697 13.675 9.05011 13.2009 8.94433 12.6959C8.83856 12.191 8.8494 11.6685 8.97602 11.1684C9.10264 10.6683 9.3417 10.2036 9.67501 9.80986C10.0083 9.41608 10.4271 9.10355 10.8994 8.89605C11.3718 8.68855 11.8852 8.59156 12.4007 8.61246C12.9162 8.63336 13.4201 8.77161 13.8741 9.01667C13.2868 8.44205 12.5429 8.05354 11.7358 7.89985C10.9286 7.74615 10.0941 7.8341 9.33666 8.15268C8.57928 8.47125 7.93276 9.00627 7.47814 9.6907C7.02351 10.3751 6.78101 11.1785 6.78101 12.0002C6.78101 12.8218 7.02351 13.6252 7.47814 14.3096C7.93276 14.9941 8.57928 15.5291 9.33666 15.8477C10.0941 16.1662 10.9286 16.2542 11.7358 16.1005C12.5429 15.9468 13.2868 15.5583 13.8741 14.9837C13.3941 15.2437 12.8431 15.3917 12.2601 15.3917Z\" fill=\"#F0F0F0\"/><path d=\"M14.87 9.65039L15.319 10.9144L16.529 10.3384L15.954 11.5494L17.217 11.9994L15.954 12.4484L16.529 13.6584L15.319 13.0834L14.869 14.3464L14.42 13.0834L13.21 13.6594L13.785 12.4484L12.521 11.9984L13.785 11.5494L13.209 10.3394L14.42 10.9144L14.87 9.65139V9.65039Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
331
|
+
"bahamas": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178634\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178634)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#FFDA44\"/><path d=\"M7.30589 7.82501H23.2559C21.5599 3.25501 17.1599 9.42403e-06 11.9999 9.42403e-06C10.4239 -0.00196892 8.86306 0.30755 7.40708 0.910775C5.95111 1.514 4.6287 2.39904 3.51589 3.51501L7.30489 7.82601L7.30589 7.82501ZM7.30489 16.172H23.2549C21.5579 20.742 17.1599 24 11.9999 24C10.4237 24.0021 8.86273 23.6926 7.40658 23.0894C5.95043 22.4861 4.62786 21.6011 3.51489 20.485L7.30389 16.173L7.30489 16.172Z\" fill=\"#338AF3\"/><path d=\"M3.51501 3.51367C-1.17199 8.20067 -1.17199 15.7987 3.51501 20.4837L12 11.9997L3.51501 3.51367Z\" fill=\"black\"/></g></svg>",
|
|
332
|
+
"bahrain": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178643\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178643)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M12 -0.000953125C9.59104 -0.000953125 7.35004 0.709047 5.47004 1.93005L8.55604 4.00005L4.69604 6.00005L8.55604 8.00005L4.69604 10L8.55604 12L4.69604 14L8.55604 16L4.69604 18L8.55604 20L5.47004 22.069C7.4134 23.3321 9.6823 24.0024 12 23.998C18.627 23.998 24 18.625 24 11.998C24 5.37105 18.627 -0.00195312 12 -0.00195312V-0.000953125Z\" fill=\"#D80027\"/></g></svg>",
|
|
333
|
+
"bangladesh": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178651\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178651)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#496E2D\"/><path d=\"M9.39107 17.2182C10.7748 17.2182 12.1019 16.6685 13.0804 15.69C14.0589 14.7116 14.6086 13.3845 14.6086 12.0007C14.6086 10.6169 14.0589 9.28984 13.0804 8.31137C12.1019 7.3329 10.7748 6.7832 9.39107 6.7832C8.00744 6.7832 6.68047 7.33285 5.7021 8.31123C4.72372 9.2896 4.17407 10.6166 4.17407 12.0002C4.17407 13.3838 4.72372 14.7108 5.7021 15.6892C6.68047 16.6676 8.00744 17.2172 9.39107 17.2172V17.2182Z\" fill=\"#D80027\"/></g></svg>",
|
|
334
|
+
"barbados": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178659\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178659)\"><path d=\"M17.218 1.19002C15.591 0.404014 13.8069 -0.00285185 12 1.5046e-05C10.13 1.5046e-05 8.36001 0.428015 6.78301 1.19002L5.73901 12L6.78301 22.81C8.40974 23.5958 10.1934 24.0027 12 24C13.87 24 15.64 23.572 17.218 22.81L18.26 12L17.218 1.19002Z\" fill=\"#FFDA44\"/><path d=\"M6.783 1.19141C4.75006 2.17283 3.03518 3.70778 1.83534 5.61996C0.635501 7.53213 -0.00063641 9.74397 4.77761e-07 12.0014C-0.000260168 14.2585 0.636054 16.4699 1.83587 18.3817C3.03569 20.2935 4.75037 21.8281 6.783 22.8094V1.19141ZM17.218 1.19241V22.8094C19.2506 21.8279 20.9652 20.2931 22.1648 18.3811C23.3645 16.4691 24.0005 14.2576 24 12.0004C24.0004 9.74341 23.3642 7.53208 22.1646 5.6203C20.9649 3.70853 19.2504 2.17382 17.218 1.19241Z\" fill=\"#0052B4\"/><path d=\"M15.652 7.30277L14.952 6.95277C14.91 7.03777 13.996 8.89777 13.846 11.7378H12.782V7.30277L12 6.25977L11.217 7.30277V11.7378H10.153C10.003 8.89777 9.08997 7.03777 9.04697 6.95277L7.64697 7.65277C7.65697 7.67277 8.60797 9.60877 8.60797 12.5208V13.3028H11.217V17.7378H12.782V13.3028H15.391V12.5208C15.391 11.0148 15.651 9.77377 15.87 8.99677C16.108 8.15077 16.35 7.65677 16.353 7.65177L15.652 7.30277Z\" fill=\"black\"/></g></svg>",
|
|
335
|
+
"belarus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178668\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178668)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#FCFCFC\"/><path d=\"M4.95697 11.1299L3.65197 8.76292L4.95697 6.43392L6.26097 8.76392L4.95697 11.1299ZM2.34697 11.1299L1.04297 8.76292L2.34697 6.43392L3.65197 8.76292L2.34697 11.1299ZM4.95697 17.5649L3.65197 15.1989L4.95697 12.8689L6.26097 15.1989L4.95697 17.5649ZM2.34697 17.5649L1.04297 15.1989L2.34697 12.8689L3.65197 15.1989L2.34697 17.5649ZM6.25997 2.32992L5.89097 1.66992C5.22897 2.06292 4.60797 2.51692 4.03497 3.02492L4.95597 4.69592L6.25997 2.32992ZM4.95597 19.3049L4.02597 20.9669C4.59697 21.4769 5.21797 21.9309 5.87997 22.3239L6.25997 21.6339L4.95597 19.3049Z\" fill=\"#A2001D\"/><path d=\"M7.30398 15.1309V23.0469C8.74598 23.6609 10.333 24.0009 11.999 24.0009C17.159 24.0009 21.558 20.7449 23.253 16.1749L7.30298 15.1319L7.30398 15.1309Z\" fill=\"#6DA544\"/><path d=\"M23.253 16.174C23.735 14.874 23.999 13.468 23.999 12C23.999 5.373 18.627 0 11.999 0C10.333 0 8.74596 0.34 7.30396 0.954V16.174H23.253Z\" fill=\"#A2001D\"/></g></svg>",
|
|
336
|
+
"belgium": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178678\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178678)\"><path d=\"M16.174 0.747007C14.8382 0.251674 13.4247 -0.00129142 12 7.53309e-06C10.5753 -0.00159148 9.16172 0.251384 7.82598 0.747007L6.78198 12L7.82598 23.254C9.12598 23.736 10.532 24 12 24C13.4246 24.0013 14.838 23.7487 16.174 23.254L17.216 12L16.174 0.747007Z\" fill=\"#FFDA44\"/><path d=\"M24.0001 11.9991C24.0001 6.83914 20.7431 2.43914 16.1741 0.744141V23.2511C20.7441 21.5561 24.0001 17.1581 24.0001 11.9981V11.9991Z\" fill=\"#D80027\"/><path d=\"M0 12.0001C0 17.1601 3.256 21.5581 7.826 23.2541V0.746094C3.256 2.44209 0 6.84009 0 12.0001Z\" fill=\"black\"/></g></svg>",
|
|
337
|
+
"belize": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178687\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178687)\"><path d=\"M24 11.9995C24 7.88045 21.925 4.24745 18.764 2.08645L12 1.56445L5.237 2.08645C3.62222 3.18679 2.30091 4.66521 1.38815 6.39296C0.475384 8.12071 -0.00116478 10.0454 2.13789e-06 11.9995C2.13789e-06 16.1185 2.075 19.7515 5.237 21.9125L12 22.4345L18.764 21.9125C20.3786 20.812 21.6997 19.3335 22.6123 17.6058C23.5249 15.878 24.0013 13.9534 24 11.9995Z\" fill=\"#0052B4\"/><path d=\"M18.7641 2.08701C16.7724 0.723998 14.4145 -0.00362747 12.0011 1.35985e-05C9.49008 1.35985e-05 7.16308 0.770013 5.23708 2.08701H18.7641ZM5.23608 21.913C7.22805 23.2762 9.58632 24.0039 12.0001 24C14.5091 24 16.8371 23.23 18.7631 21.913H5.23608Z\" fill=\"#A2001D\"/><path d=\"M12 17.7388C12.7627 17.753 13.5206 17.6151 14.2293 17.3331C14.9381 17.051 15.5835 16.6306 16.1279 16.0963C16.6723 15.5619 17.1048 14.9245 17.3999 14.2211C17.6951 13.5177 17.8472 12.7626 17.8472 11.9998C17.8472 11.237 17.6951 10.4818 17.3999 9.77844C17.1048 9.07507 16.6723 8.43759 16.1279 7.90327C15.5835 7.36894 14.9381 6.94848 14.2293 6.66647C13.5206 6.38445 12.7627 6.24653 12 6.26077C10.4965 6.28883 9.06406 6.90581 8.01069 7.97903C6.95732 9.05225 6.36719 10.496 6.36719 11.9998C6.36719 13.5036 6.95732 14.9473 8.01069 16.0205C9.06406 17.0937 10.4965 17.7107 12 17.7388Z\" fill=\"#F0F0F0\"/><path d=\"M12.0001 15.1301C12.8304 15.1301 13.6266 14.8003 14.2137 14.2132C14.8008 13.6262 15.1306 12.8299 15.1306 11.9996C15.1306 11.1694 14.8008 10.3731 14.2137 9.78604C13.6266 9.19896 12.8304 8.86914 12.0001 8.86914C11.17 8.86914 10.3739 9.19891 9.78687 9.7859C9.19988 10.3729 8.87012 11.169 8.87012 11.9991C8.87012 12.8293 9.19988 13.6254 9.78687 14.2124C10.3739 14.7994 11.17 15.1291 12.0001 15.1291V15.1301Z\" fill=\"#F0F0F0\"/><path d=\"M12 11.2168L10.303 11.9998V13.3038L11.998 14.3468L13.694 13.3038V11.9998L11.998 11.2168H12Z\" fill=\"#0052B4\"/><path d=\"M13.695 10.4365H10.304V12.0005H13.695V10.4365Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
338
|
+
"benin": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178700\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178700)\"><path d=\"M7.82593 10.957L8.86993 23.587C9.89054 23.8618 10.943 24.0007 11.9999 24C18.6269 24 23.9999 18.628 23.9999 12L7.82593 10.957Z\" fill=\"#D80027\"/><path d=\"M7.82593 12L8.86993 0.414001C9.8905 0.1389 10.9429 -0.000302159 11.9999 4.92451e-07C18.6269 4.92451e-07 23.9999 5.373 23.9999 12H7.82593Z\" fill=\"#FFDA44\"/><path d=\"M0 11.9991C0 17.5431 3.76 22.2091 8.87 23.5851V0.412109C3.76 1.78911 0 6.45411 0 11.9991Z\" fill=\"#6DA544\"/></g></svg>",
|
|
339
|
+
"bhutan": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178709\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178709)\"><path d=\"M3.51403 20.4845C-1.17297 15.7985 -1.17297 8.2005 3.51403 3.5145C8.20003 -1.1715 15.798 -1.1715 20.484 3.5145C20.484 3.5155 23.67 14.2985 18.984 18.9845C14.298 23.6715 3.51703 20.4885 3.51403 20.4845Z\" fill=\"#FFDA44\"/><path d=\"M3.51514 20.4847C8.20114 25.1707 15.7991 25.1707 20.4851 20.4847C25.1721 15.7977 25.1721 8.19967 20.4851 3.51367L3.51514 20.4837V20.4847Z\" fill=\"#FF9811\"/><path d=\"M18.7889 6.78231V4.69531H14.7889L14.4829 5.00131C13.3959 6.08831 13.5789 7.35631 13.7129 8.28131C13.8359 9.14131 13.8509 9.46931 13.5319 9.78931C13.2119 10.1093 12.8829 10.0933 12.0239 9.96931C11.0979 9.83631 9.82991 9.65331 8.74391 10.7403C7.65591 11.8273 7.83891 13.0953 7.97291 14.0203C8.09691 14.8803 8.11191 15.2093 7.79291 15.5283C7.47291 15.8483 7.14391 15.8323 6.28491 15.7083C5.9376 15.6508 5.58681 15.6167 5.23491 15.6063L5.21191 17.6933C5.44291 17.6953 5.70791 17.7333 5.98691 17.7743C6.35129 17.835 6.71959 17.8691 7.08891 17.8763C7.49791 17.8763 7.92891 17.8183 8.35391 17.6343V19.3043H11.4839V17.7383H9.91991V16.6953H10.9629V15.1303H10.1299C10.1699 14.6233 10.0999 14.1393 10.0399 13.7233C9.91591 12.8643 9.89991 12.5353 10.2199 12.2163C10.5399 11.8963 10.8679 11.9113 11.7269 12.0363C12.4019 12.1323 13.2579 12.2563 14.0939 11.8953V13.5653H17.2239V11.9993H15.6589V10.9563H16.7029V9.39031H15.8689C15.9089 8.88331 15.8389 8.39831 15.7789 7.98331C15.6919 7.38331 15.6589 7.04131 15.7559 6.78131H18.7899L18.7889 6.78231Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
340
|
+
"bolivia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1067_178718\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1067_178718)\"><path d=\"M24 11.9997C24.0014 10.5754 23.7488 9.16228 23.254 7.82669L12 7.30469L0.746007 7.82669C0.251111 9.16224 -0.00151457 10.5754 6.83101e-06 11.9997C6.83101e-06 13.4677 0.264007 14.8737 0.746007 16.1727L12 16.6957L23.254 16.1747C23.736 14.8747 24 13.4677 24 12.0007V11.9997Z\" fill=\"#FFDA44\"/><path d=\"M12.0001 23.9998C17.1601 23.9998 21.5581 20.7428 23.2531 16.1738H0.746094C2.44209 20.7438 6.84009 23.9998 12.0001 23.9998Z\" fill=\"#6DA544\"/><path d=\"M0.746094 7.826H23.2531C21.5581 3.256 17.1601 0 12.0001 0C6.84009 0 2.44209 3.257 0.746094 7.826Z\" fill=\"#D80027\"/></g></svg>",
|
|
341
|
+
"bosnia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178762\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178762)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M12 -0.000953125C9.9817 -0.00230752 7.99576 0.505827 6.22618 1.47636C4.4566 2.44689 2.96065 3.84842 1.87695 5.55105L18.15 22.304C19.9341 21.24 21.4113 19.7307 22.4368 17.9241C23.4623 16.1175 24.0009 14.0754 24 11.998C24 5.37105 18.627 -0.00195312 12 -0.00195312V-0.000953125Z\" fill=\"#FFDA44\"/><path d=\"M24 11.999C24.0041 9.00809 22.8873 6.1242 20.87 3.91602V20.081C22.8877 17.873 24.0044 14.989 24 11.998V11.999ZM14.99 22.586H16.247L16.635 21.389L17.024 22.585H17.654C18.041 22.377 18.414 22.15 18.774 21.903L2.095 5.22302C1.821 5.62402 1.57 6.04302 1.345 6.47702L1.493 6.93302L2.75 6.93202L1.734 7.67202L2.123 8.86602L1.105 8.12802L0.499001 8.57002C0.167688 9.68252 -0.000396993 10.8372 7.04068e-07 11.998C7.04068e-07 18.625 5.373 23.998 12 23.998C13.401 23.998 14.746 23.758 15.996 23.316L14.99 22.586ZM2.677 11.476L3.064 10.281L2.047 9.54202H3.304L3.692 8.34602L4.081 9.54102H5.338L4.321 10.28L4.711 11.475L3.693 10.737L2.677 11.476ZM5.265 14.086L5.653 12.889L4.636 12.151H5.893L6.28 10.955L6.67 12.15H7.926L6.91 12.889L7.3 14.084L6.282 13.346L5.265 14.086ZM7.854 16.694L8.241 15.498L7.224 14.76H8.481L8.869 13.563L9.258 14.759L10.515 14.758L9.499 15.498L9.888 16.692L8.87 15.954L7.854 16.694ZM11.459 18.564L10.442 19.302L10.83 18.107L9.813 17.368H11.07L11.457 16.172L11.847 17.367H13.104L12.087 18.106L12.477 19.301L11.459 18.563V18.564ZM13.031 21.911L13.419 20.716L12.401 19.977H13.658L14.046 18.781L14.436 19.976H15.692L14.676 20.715L15.065 21.91L14.048 21.172L13.031 21.911Z\" fill=\"#0052B4\"/></g></svg>",
|
|
342
|
+
"herzegovina": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178762\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178762)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M12 -0.000953125C9.9817 -0.00230752 7.99576 0.505827 6.22618 1.47636C4.4566 2.44689 2.96065 3.84842 1.87695 5.55105L18.15 22.304C19.9341 21.24 21.4113 19.7307 22.4368 17.9241C23.4623 16.1175 24.0009 14.0754 24 11.998C24 5.37105 18.627 -0.00195312 12 -0.00195312V-0.000953125Z\" fill=\"#FFDA44\"/><path d=\"M24 11.999C24.0041 9.00809 22.8873 6.1242 20.87 3.91602V20.081C22.8877 17.873 24.0044 14.989 24 11.998V11.999ZM14.99 22.586H16.247L16.635 21.389L17.024 22.585H17.654C18.041 22.377 18.414 22.15 18.774 21.903L2.095 5.22302C1.821 5.62402 1.57 6.04302 1.345 6.47702L1.493 6.93302L2.75 6.93202L1.734 7.67202L2.123 8.86602L1.105 8.12802L0.499001 8.57002C0.167688 9.68252 -0.000396993 10.8372 7.04068e-07 11.998C7.04068e-07 18.625 5.373 23.998 12 23.998C13.401 23.998 14.746 23.758 15.996 23.316L14.99 22.586ZM2.677 11.476L3.064 10.281L2.047 9.54202H3.304L3.692 8.34602L4.081 9.54102H5.338L4.321 10.28L4.711 11.475L3.693 10.737L2.677 11.476ZM5.265 14.086L5.653 12.889L4.636 12.151H5.893L6.28 10.955L6.67 12.15H7.926L6.91 12.889L7.3 14.084L6.282 13.346L5.265 14.086ZM7.854 16.694L8.241 15.498L7.224 14.76H8.481L8.869 13.563L9.258 14.759L10.515 14.758L9.499 15.498L9.888 16.692L8.87 15.954L7.854 16.694ZM11.459 18.564L10.442 19.302L10.83 18.107L9.813 17.368H11.07L11.457 16.172L11.847 17.367H13.104L12.087 18.106L12.477 19.301L11.459 18.563V18.564ZM13.031 21.911L13.419 20.716L12.401 19.977H13.658L14.046 18.781L14.436 19.976H15.692L14.676 20.715L15.065 21.91L14.048 21.172L13.031 21.911Z\" fill=\"#0052B4\"/></g></svg>",
|
|
343
|
+
"botswana": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178771\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178771)\"><path d=\"M0.567003 8.34817C0.190383 9.52888 -0.000889511 10.7608 3.10981e-06 12.0002C3.10981e-06 13.2742 0.199003 14.5002 0.567003 15.6522L12 16.1742L23.433 15.6522C23.801 14.5002 24 13.2732 24 12.0002C24 10.7262 23.8 9.50017 23.433 8.34817L12 7.82617L0.567003 8.34817Z\" fill=\"#F0F0F0\"/><path d=\"M23.9999 12.0001C23.9999 11.2891 23.9379 10.5911 23.8189 9.91406H0.179865C-0.0625591 11.2945 -0.0625591 12.7066 0.179865 14.0871H23.8199C23.9402 13.3983 24.0004 12.7003 23.9999 12.0011V12.0001Z\" fill=\"black\"/><path d=\"M11.9999 24C17.3539 24 21.8879 20.493 23.4329 15.652H0.565918C2.11192 20.493 6.64592 24 11.9999 24ZM11.9999 0C6.64592 0 2.11192 3.505 0.565918 8.346H23.4329C21.8879 3.506 17.3529 0 11.9999 0Z\" fill=\"#338AF3\"/></g></svg>",
|
|
344
|
+
"brazil": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178780\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178780)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#6DA544\"/><path d=\"M11.9999 4.69531L21.9129 11.9993L11.9999 19.3043L2.08691 11.9993L11.9999 4.69531Z\" fill=\"#FFDA44\"/><path d=\"M12.0002 16.1742C13.1072 16.1742 14.1689 15.7344 14.9516 14.9516C15.7344 14.1689 16.1742 13.1072 16.1742 12.0002C16.1742 10.8932 15.7344 9.83148 14.9516 9.04871C14.1689 8.26593 13.1072 7.82617 12.0002 7.82617C10.8932 7.82617 9.83148 8.26593 9.04871 9.04871C8.26593 9.83148 7.82617 10.8932 7.82617 12.0002C7.82617 13.1072 8.26593 14.1689 9.04871 14.9516C9.83148 15.7344 10.8932 16.1742 12.0002 16.1742Z\" fill=\"#F0F0F0\"/><path d=\"M9.91315 11.7404C9.20592 11.7398 8.50264 11.846 7.82715 12.0554C7.83876 12.938 8.12992 13.7942 8.65876 14.5008C9.1876 15.2075 9.92689 15.7283 10.7704 15.9883C11.6138 16.2484 12.518 16.2343 13.353 15.9481C14.1879 15.6618 14.9106 15.1183 15.4171 14.3954C14.7585 13.5674 13.9215 12.8987 12.9685 12.439C12.0156 11.9793 10.9712 11.7405 9.91315 11.7404ZM16.0961 12.8004C16.2937 11.7892 16.1102 10.7407 15.5811 9.85661C15.052 8.97252 14.2146 8.31539 13.23 8.01166C12.2455 7.70793 11.1834 7.77907 10.2482 8.2114C9.31292 8.64373 8.57063 9.40669 8.16415 10.3534C9.58536 10.0595 11.0578 10.1297 12.4446 10.5575C13.8314 10.9854 15.0875 11.7569 16.0961 12.8004Z\" fill=\"#0052B4\"/></g></svg>",
|
|
345
|
+
"brunei": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178790\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178790)\"><path d=\"M12.0004 23.998C18.6274 23.998 23.9984 18.626 23.9984 11.999C23.9984 5.37295 18.6274 0.00195326 12.0004 0.00195326C5.37444 0.000953265 0.00244141 5.37295 0.00244141 12C0.00244141 18.627 5.37444 23.999 12.0004 23.999V23.998Z\" fill=\"#F0F0F0\"/><path d=\"M1.61037 6.001C1.08071 6.91587 0.6742 7.89668 0.401367 8.918L20.4674 20.503C21.2161 19.757 21.863 18.9154 22.3914 18L1.60937 6L1.61037 6.001Z\" fill=\"black\"/><path d=\"M17.9982 1.61087C13.1982 -1.16313 7.27823 -0.239128 3.53123 3.49687L23.5972 15.0819C24.9592 9.96887 22.7992 4.38087 17.9982 1.60887V1.61087ZM6.00023 22.3909C10.8012 25.1629 16.7202 24.2389 20.4672 20.5029L0.402229 8.91787C-0.959771 14.0309 1.19923 19.6189 6.00023 22.3909Z\" fill=\"#FFDA44\"/><path d=\"M15.3902 10.697C15.3895 11.2126 15.2712 11.7213 15.0444 12.1843C14.8175 12.6474 14.4879 13.0525 14.0809 13.369C13.6738 13.6855 13.1999 13.9049 12.6952 14.0106C12.1905 14.1164 11.6684 14.1056 11.1685 13.9791C10.6687 13.8526 10.2042 13.6137 9.81058 13.2807C9.41694 12.9476 9.10446 12.5292 8.89691 12.0572C8.68937 11.5851 8.59223 11.072 8.6129 10.5568C8.63357 10.0416 8.77149 9.53786 9.01617 9.08398C8.44175 9.67117 8.0534 10.4148 7.89979 11.2218C7.74618 12.0287 7.83414 12.8631 8.15266 13.6202C8.47117 14.3774 9.00607 15.0237 9.69032 15.4782C10.3746 15.9327 11.1777 16.1751 11.9992 16.1751C12.8206 16.1751 13.6238 15.9327 14.308 15.4782C14.9923 15.0237 15.5272 14.3774 15.8457 13.6202C16.1642 12.8631 16.2522 12.0287 16.0986 11.2218C15.945 10.4148 15.5566 9.67117 14.9822 9.08398C15.2422 9.56398 15.3902 10.114 15.3902 10.697Z\" fill=\"#D80027\"/><path d=\"M12.7833 6.78516H11.2183V14.6092H12.7833V6.78516Z\" fill=\"#D80027\"/><path d=\"M14.6081 8.34961H9.39212C9.39212 8.70961 9.70512 9.00161 10.0651 9.00161H10.0441C10.0441 9.36161 10.3361 9.65361 10.6961 9.65361C10.6961 10.0136 10.9881 10.3066 11.3481 10.3066H12.6521C13.0121 10.3066 13.3041 10.0146 13.3041 9.65361C13.6641 9.65361 13.9561 9.36261 13.9561 9.00161H13.9351C14.2951 9.00161 14.6081 8.70961 14.6081 8.34961ZM15.6521 15.1316H8.34912V16.6966H15.6521V15.1316Z\" fill=\"#D80027\"/><path d=\"M16.6942 15.6523H13.5642V17.2173H16.6942V15.6523ZM10.4352 15.6523H7.30518V17.2173H10.4352V15.6523Z\" fill=\"#D80027\"/></g></svg>",
|
|
346
|
+
"bulgaria": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178803\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178803)\"><path d=\"M24 11.9997C24.0014 10.5754 23.7488 9.16228 23.254 7.82669L12 7.30469L0.746006 7.82669C0.251152 9.16225 -0.00147216 10.5754 6.45326e-06 11.9997C6.45326e-06 13.4677 0.264006 14.8737 0.746006 16.1737L12 16.6957L23.254 16.1747C23.736 14.8747 24 13.4677 24 12.0007V11.9997Z\" fill=\"#496E2D\"/><path d=\"M12.0001 23.9998C17.1601 23.9998 21.5581 20.7428 23.2531 16.1738H0.746094C2.44209 20.7438 6.84009 23.9998 12.0001 23.9998Z\" fill=\"#D80027\"/><path d=\"M0.746094 7.825H23.2531C21.5581 3.255 17.1601 0 12.0001 0C6.84009 0 2.44209 3.256 0.746094 7.825Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
347
|
+
"burkina faso": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178821\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178821)\"><path d=\"M0 12C0 5.373 5.373 0 12 0C18.627 0 24 5.373 24 12C23.478 12 12 13.565 12 13.565L0 12Z\" fill=\"#D80027\"/><path d=\"M24 12C24 18.628 18.627 24 12 24C5.373 24 0 18.629 0 12\" fill=\"#6DA544\"/><path d=\"M12.0002 7.82422L12.9072 10.6142H15.8412L13.4672 12.3392L14.3742 15.1292L12.0002 13.4042L9.62716 15.1292L10.5342 12.3392L8.16016 10.6142H11.0942L12.0002 7.82422Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
348
|
+
"burundi": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178830\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178830)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M19.3069 2.47963C17.2104 0.871576 14.642 0 11.9999 0C9.35771 0 6.78934 0.871576 4.69287 2.47963L11.9999 9.78663L19.3069 2.47963ZM11.9999 14.2136L4.69287 21.5206C6.78934 23.1287 9.35771 24.0003 11.9999 24.0003C14.642 24.0003 17.2104 23.1287 19.3069 21.5206L11.9999 14.2136Z\" fill=\"#D80027\"/><path d=\"M9.78722 11.9994L2.48022 4.69336C0.872411 6.78974 0.000976563 9.35792 0.000976562 11.9999C0.000976563 14.6418 0.872411 17.21 2.48022 19.3064L9.78722 11.9994ZM14.2152 11.9994L21.5212 19.3064C23.129 17.21 24.0005 14.6418 24.0005 11.9999C24.0005 9.35792 23.129 6.78974 21.5212 4.69336L14.2152 11.9994Z\" fill=\"#6DA544\"/><path d=\"M12.0002 17.2182C13.384 17.2182 14.7111 16.6685 15.6895 15.69C16.668 14.7116 17.2177 13.3845 17.2177 12.0007C17.2177 10.6169 16.668 9.28984 15.6895 8.31137C14.7111 7.3329 13.384 6.7832 12.0002 6.7832C10.6164 6.7832 9.28936 7.3329 8.31088 8.31137C7.33241 9.28984 6.78271 10.6169 6.78271 12.0007C6.78271 13.3845 7.33241 14.7116 8.31088 15.69C9.28936 16.6685 10.6164 17.2182 12.0002 17.2182Z\" fill=\"#F0F0F0\"/><path d=\"M12.0001 8.34766L12.4521 9.13066H13.3551L12.9041 9.91266L13.3551 10.6957H12.4521L12.0001 11.4797L11.5481 10.6967H10.6451L11.0961 9.91366L10.6451 9.13166H11.5481L12.0001 8.34766ZM9.70315 12.0007L10.1551 12.7837H11.0591L10.6071 13.5657L11.0591 14.3487H10.1551L9.70315 15.1307L9.25115 14.3487H8.34814L8.79914 13.5657L8.34814 12.7837H9.25115L9.70315 11.9997V12.0007ZM14.2971 12.0007L14.7491 12.7837H15.6521L15.2011 13.5657L15.6521 14.3487H14.7491L14.2971 15.1307L13.8451 14.3487H12.9411L13.3931 13.5657L12.9411 12.7837H13.8451L14.2971 12.0007Z\" fill=\"#D80027\"/></g></svg>",
|
|
349
|
+
"cambodia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178855\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178855)\"><path d=\"M9.619e-06 12.0008C9.619e-06 14.0807 0.52901 16.0357 1.46001 17.7407L12 18.7847L22.54 17.7407C23.5016 15.9806 24.0037 14.0064 24 12.0008C24 9.92275 23.471 7.96775 22.54 6.26275L12 5.21875L1.46001 6.26275C0.499554 8.0226 -0.00253431 9.99587 9.619e-06 12.0008Z\" fill=\"#D80027\"/><path d=\"M1.45898 6.26196H22.541C21.5092 4.36708 19.9856 2.78551 18.1305 1.68383C16.2754 0.582144 14.1575 0.00112116 12 0.0019559C9.84242 0.000488529 7.72442 0.581137 5.86924 1.6827C4.01407 2.78425 2.49045 4.36692 1.45898 6.26196ZM12 24.001C16.548 24.001 20.506 21.471 22.54 17.741H1.45998C2.49157 19.6355 4.01492 21.2169 5.86962 22.3186C7.72433 23.4202 9.84177 24.0014 11.999 24.001H12Z\" fill=\"#0052B4\"/><path d=\"M16.174 14.3484V12.7834H15.131V10.6964L14.088 9.65341L13.044 10.6964V8.60941L12.001 7.56641L10.957 8.60941V10.6964L9.91396 9.65341L8.86996 10.6964V12.7834H7.82696V14.3484H6.78296V15.9144H17.218V14.3484H16.174Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
350
|
+
"cameroon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178864\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178864)\"><path d=\"M17.218 1.19197C15.591 0.405967 13.8069 -0.000898721 12 0.00196817C10.13 0.00196817 8.36001 0.428968 6.78301 1.19197L5.73901 12.002L6.78301 22.811C8.40973 23.5968 10.1934 24.0037 12 24.001C13.87 24.001 15.64 23.574 17.218 22.811L18.26 12.001L17.218 1.19197Z\" fill=\"#D80027\"/><path d=\"M12.0001 7.82617L13.0361 11.0152H16.3891L13.6761 12.9852L14.7121 16.1752L12.0001 14.2032L9.28808 16.1732L10.3241 12.9852L7.61108 11.0142H10.9641L12.0001 7.82617Z\" fill=\"#FFDA44\"/><path d=\"M6.783 1.19336C4.75037 2.17463 3.03569 3.70928 1.83587 5.62106C0.636053 7.53285 -0.000260565 9.74426 8.00415e-08 12.0014C-0.000260565 14.2585 0.636053 16.4699 1.83587 18.3817C3.03569 20.2934 4.75037 21.8281 6.783 22.8094V1.19336Z\" fill=\"#496E2D\"/><path d=\"M17.218 1.19336V22.8104C19.2506 21.8289 20.9652 20.294 22.1648 18.382C23.3645 16.4701 24.0006 14.2585 24 12.0014C24.0004 9.74437 23.3642 7.53303 22.1646 5.62125C20.9649 3.70948 19.2505 2.17477 17.218 1.19336Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
351
|
+
"central african republic": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178874\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178874)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M22.54 6.26011C21.7631 4.83598 20.7061 3.58375 19.4327 2.57874C18.1593 1.57374 16.6957 0.836747 15.13 0.412109L14.608 6.26011H22.54ZM1.45898 6.26011H9.39098L8.86998 0.413109C7.30422 0.837863 5.84057 1.57501 4.56712 2.58019C3.29368 3.58537 2.23676 4.8378 1.45998 6.26211L1.45898 6.26011Z\" fill=\"#0052B4\"/><path d=\"M14.608 12.002V17.741H22.541C23.5009 15.9799 24.0026 14.0057 24 12H14.608V12.002ZM9.391 12H0C0 14.08 0.529 16.035 1.46 17.74H9.39L9.391 12Z\" fill=\"#6DA544\"/><path d=\"M1.45898 17.7402C2.23591 19.1643 3.29289 20.4165 4.56632 21.4215C5.83975 22.4265 7.30333 23.1635 8.86898 23.5882L9.39098 18.4732L1.45898 17.7402ZM15.13 23.5882C16.6957 23.1636 18.1593 22.4266 19.4327 21.4216C20.7061 20.4166 21.7631 19.1644 22.54 17.7402L14.608 18.4742L15.13 23.5882Z\" fill=\"#FFDA44\"/><path d=\"M14.608 18.4742L22.541 17.7402H14.608V18.4742ZM9.39096 17.7402H1.45996L9.39196 18.4732V17.7402H9.39096Z\" fill=\"#FFDA44\"/><path d=\"M12.0001 6.12782e-07C10.9431 -0.00033704 9.89069 0.138866 8.87012 0.414001V23.587C9.89073 23.8618 10.9432 24.0007 12.0001 24C13.0841 24 14.1331 23.856 15.1311 23.587V0.414001C14.1105 0.1389 13.0581 -0.000302039 12.0011 6.12782e-07H12.0001Z\" fill=\"#D80027\"/><path d=\"M6.45401 2.61037L6.77801 3.60637H7.82601L6.97801 4.22138L7.30201 5.21837L6.45401 4.60238L5.60701 5.21837L5.93101 4.22138L5.08301 3.60637H6.13101L6.45401 2.61037Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
352
|
+
"chad": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178887\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178887)\"><path d=\"M11.9999 7.52996e-06C10.5329 7.52996e-06 9.12593 0.264008 7.82593 0.746008L7.30493 12L7.82593 23.253C9.12593 23.735 10.5329 24 11.9999 24C13.4679 24 14.8739 23.735 16.1739 23.253L16.6959 12L16.1739 0.746008C14.838 0.251036 13.4246 -0.00159005 11.9999 7.52996e-06Z\" fill=\"#FFDA44\"/><path d=\"M24 11.9991C24 6.83909 20.744 2.44109 16.175 0.746094V23.2531C20.745 21.5571 24 17.1591 24 11.9991Z\" fill=\"#D80027\"/><path d=\"M7.826 23.2531V0.746094C3.256 2.44109 0 6.83909 0 11.9991C0 17.1591 3.256 21.5571 7.826 23.2531Z\" fill=\"#0052B4\"/></g></svg>",
|
|
353
|
+
"chile": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178906\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178906)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M24 12C24 18.628 18.627 24 12 24C5.373 24 0 18.628 0 12C0 5.37302 12 12 12 12H24Z\" fill=\"#D80027\"/><path d=\"M0 12C0 5.373 5.373 0 12 0V12H0Z\" fill=\"#0052B4\"/><path d=\"M7.14305 4.17383L7.92005 6.56583H10.4351L8.40005 8.04383L9.17705 10.4348L7.14305 8.95683L5.10905 10.4348L5.88605 8.04383L3.85205 6.56583H6.36605L7.14305 4.17383Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
354
|
+
"iran": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178940\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178940)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M15.8979 8.86914H14.3279C14.3409 9.04114 14.3479 9.21514 14.3479 9.39014C14.3479 10.5511 14.0579 11.6761 13.5519 12.4771C13.3959 12.7241 13.1339 13.0731 12.7819 13.3081V8.86914H11.2169V13.3091C10.8669 13.0741 10.6039 12.7251 10.4479 12.4791C9.94191 11.6771 9.65191 10.5521 9.65191 9.39114C9.65191 9.21614 9.65991 9.04214 9.67191 8.87014H8.10191C8.09191 9.04114 8.08691 9.21514 8.08691 9.39114C8.08691 12.6101 9.80591 15.1311 11.9999 15.1311C14.1939 15.1311 15.9129 12.6101 15.9129 9.39114C15.9129 9.21514 15.9079 9.04114 15.8979 8.87014V8.86914Z\" fill=\"#D80027\"/><path d=\"M4.95689 5.73705H6.52189V6.78105H8.08789V5.73705H9.65289V6.78105H11.2179V5.73705H12.7829V6.78105H14.3479V5.73705H15.9139V6.78105H17.4789V5.73705H19.0439V6.78105H22.8099C21.8285 4.74811 20.2935 3.03323 18.3813 1.83339C16.4692 0.633547 14.2573 -0.00258954 11.9999 -0.00195265C9.7428 -0.00221329 7.53138 0.634101 5.6196 1.83392C3.70781 3.03374 2.17317 4.74841 1.19189 6.78105H4.95789V5.73705H4.95689Z\" fill=\"#6DA544\"/><path d=\"M19.0439 17.2168V18.2608H17.4799V17.2168H15.9149V18.2608H14.3499V17.2168H12.7839V18.2608H11.2189V17.2168H9.65292V18.2608H8.08792V17.2168H6.52192V18.2608H4.95692V17.2168H1.19092C2.17234 19.2497 3.70729 20.9646 5.61947 22.1645C7.53164 23.3643 9.74348 24.0004 12.0009 23.9998C14.2582 24.0002 16.4698 23.364 18.3818 22.1642C20.2938 20.9644 21.8286 19.2496 22.8099 17.2168H19.0439Z\" fill=\"#D80027\"/></g></svg>",
|
|
355
|
+
"united kingdom": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178950\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178950)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M2.48009 4.69311C1.524 5.93578 0.821666 7.35437 0.413086 8.86811H6.65609L2.48009 4.69311ZM23.5861 8.86911C23.1776 7.35503 22.4753 5.93609 21.5191 4.69311L17.3441 8.87011L23.5861 8.86911ZM0.413086 15.1301C0.821569 16.6442 1.5239 18.0631 2.48009 19.3061L6.65609 15.1301H0.413086ZM19.3051 2.48011C18.0625 1.52369 16.6439 0.821016 15.1301 0.412109V6.65511L19.3051 2.48011ZM4.69309 21.5181C5.93607 22.4743 7.35501 23.1766 8.86909 23.5851V17.3421L4.69309 21.5181ZM8.86909 0.412109C7.35493 0.820894 5.93599 1.52357 4.69309 2.48011L8.87009 6.65511L8.86909 0.412109ZM15.1301 23.5851C16.6438 23.1764 18.0624 22.4741 19.3051 21.5181L15.1301 17.3421V23.5851ZM17.3441 15.1301L21.5191 19.3061C22.4753 18.0631 23.1776 16.6442 23.5861 15.1301H17.3441Z\" fill=\"#0052B4\"/><path d=\"M23.898 10.4345H13.565V0.101465C12.526 -0.0338218 11.4739 -0.0338218 10.435 0.101465V10.4345H0.101954C-0.0333335 11.4734 -0.0333335 12.5255 0.101954 13.5645H10.435V23.8975C11.4739 24.0328 12.526 24.0328 13.565 23.8975V13.5645H23.898C24.0332 12.5255 24.0332 11.4734 23.898 10.4345Z\" fill=\"#D80027\"/><path d=\"M15.1301 15.1315L20.4861 20.4865C20.7321 20.2405 20.9661 19.9835 21.1911 19.7165L16.6071 15.1315H15.1301ZM8.87006 15.1315L3.51506 20.4865C3.76106 20.7325 4.01806 20.9675 4.28506 21.1915L8.87006 16.6075V15.1315ZM8.87006 8.87055L3.51506 3.51455C3.26903 3.76089 3.03381 4.0178 2.81006 4.28455L7.39406 8.87055H8.87006ZM15.1301 8.87055L20.4861 3.51555C20.2397 3.26951 19.9828 3.03429 19.7161 2.81055L15.1301 7.39455V8.87055Z\" fill=\"#D80027\"/></g></svg>",
|
|
356
|
+
"united arab emirates": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178960\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178960)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M6.78198 16.1738L7.82598 23.2538C9.12598 23.7358 10.532 23.9998 12 23.9998C17.16 23.9998 21.558 20.7438 23.253 16.1738H6.78198Z\" fill=\"black\"/><path d=\"M6.78198 7.82701L7.82598 0.747007C9.16172 0.251384 10.5753 -0.00159148 12 7.53309e-06C17.16 7.53309e-06 21.558 3.25701 23.253 7.82701H6.78198Z\" fill=\"#6DA544\"/><path d=\"M0 12.0001C0 17.1601 3.257 21.5581 7.826 23.2541V0.746094C3.256 2.44209 0 6.84009 0 12.0001Z\" fill=\"#A2001D\"/></g></svg>",
|
|
357
|
+
"turkey": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178970\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178970)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#D80027\"/><path d=\"M11.5091 9.80469L12.4931 11.1617L14.0881 10.6447L13.1021 11.9997L14.0861 13.3567L12.4921 12.8377L11.5061 14.1937L11.5071 12.5167L9.91309 11.9997L11.5081 11.4817V9.80569L11.5091 9.80469Z\" fill=\"#F0F0F0\"/><path d=\"M8.82212 15.3907C8.306 15.3906 7.79671 15.2728 7.33305 15.0461C6.86938 14.8194 6.46358 14.4898 6.14657 14.0825C5.82955 13.6753 5.60968 13.201 5.50372 12.6959C5.39776 12.1908 5.40849 11.6681 5.53511 11.1678C5.66172 10.6674 5.90088 10.2026 6.23435 9.80868C6.56783 9.41476 6.98682 9.10216 7.4594 8.8947C7.93198 8.68723 8.44568 8.59038 8.96137 8.61152C9.47705 8.63266 9.9811 8.77123 10.4351 9.01667C9.84781 8.44205 9.10397 8.05354 8.29681 7.89985C7.48965 7.74615 6.65509 7.8341 5.8977 8.15268C5.14031 8.47125 4.4938 9.00627 4.03917 9.6907C3.58455 10.3751 3.34204 11.1785 3.34204 12.0002C3.34204 12.8218 3.58455 13.6252 4.03917 14.3096C4.4938 14.9941 5.14031 15.5291 5.8977 15.8477C6.65509 16.1662 7.48965 16.2542 8.29681 16.1005C9.10397 15.9468 9.84781 15.5583 10.4351 14.9837C9.95512 15.2437 9.40612 15.3907 8.82212 15.3907Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
358
|
+
"sri lanka": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178979\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178979)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#FFDA44\"/><path d=\"M9.3911 2.08594H5.2371C5.0531 2.21194 4.8721 2.34294 4.6961 2.47894L3.6521 11.9989L4.6961 21.5189C4.8721 21.6549 5.0531 21.7859 5.2361 21.9119H9.3911V2.08594Z\" fill=\"#FF9811\"/><path d=\"M3.97142e-06 11.9995C-0.00149506 13.8406 0.421385 15.6573 1.23581 17.3085C2.05023 18.9597 3.23427 20.401 4.696 21.5205V2.48047C3.23454 3.5997 2.05066 5.04066 1.23625 6.69151C0.421839 8.34235 -0.00118764 10.1587 3.97142e-06 11.9995Z\" fill=\"#6DA544\"/><path d=\"M19.3049 7.31445V7.61445L19.3149 7.61745L19.3049 7.31445Z\" fill=\"#FFDA44\"/><path d=\"M23.0431 15.1299H20.7831L19.8261 16.1729V18.2599H17.7391V17.2169H18.7821V15.1299H14.0861V16.4339H13.0431V13.9479C12.8787 13.8014 12.7472 13.6218 12.6572 13.4208C12.5673 13.2199 12.5208 13.0021 12.5211 12.7819V5.99894C12.5211 5.13494 13.2221 4.43394 14.0861 4.43394V14.0859H16.1731L16.8901 13.4889C16.7612 13.1825 16.6949 12.8534 16.6951 12.5209V10.9559H15.1301V7.82594H18.2601C18.2601 7.30394 19.0431 6.78194 19.0431 6.78194C19.0431 6.78194 19.8261 7.30394 19.8261 7.82494V10.9559C20.4061 10.9629 21.3281 10.9479 22.3251 10.9559C22.0631 10.4979 21.9131 9.95594 21.9131 9.39094C21.9131 8.46994 22.3101 7.64194 22.9431 7.06894C22.0329 5.05614 20.5869 3.33232 18.7631 2.08594H10.9561V21.9119H18.7631C20.9942 20.3883 22.6473 18.1578 23.4561 15.5799L23.0431 15.1299Z\" fill=\"#A2001D\"/></g></svg>",
|
|
359
|
+
"malaysia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_178990\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_178990)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M11.4791 12.0004H24.0001C24.0007 10.9434 23.8619 9.89099 23.5871 8.87037H11.4791V12.0004ZM11.4791 5.73937H22.2391C21.5052 4.54289 20.5681 3.48367 19.4701 2.60938H11.4801L11.4791 5.73937ZM12.0011 24.0004C14.8251 24.0004 17.4211 23.0244 19.4711 21.3924H4.53106C6.65268 23.0847 9.28716 24.0045 12.0011 24.0004ZM1.76206 18.2604H22.2391C22.8358 17.2869 23.2898 16.2328 23.5871 15.1304H0.414062C0.710768 16.233 1.16476 17.2872 1.76206 18.2604Z\" fill=\"#D80027\"/><path d=\"M12 12V0C5.373 0 0 5.373 0 12H12Z\" fill=\"#0052B4\"/><path d=\"M7.97993 10.2708C7.52838 10.2707 7.08281 10.1675 6.67719 9.96907C6.27156 9.77065 5.91657 9.48227 5.63927 9.12589C5.36197 8.76951 5.16967 8.35453 5.07703 7.91259C4.98438 7.47064 4.99383 7.01337 5.10466 6.57563C5.21549 6.13789 5.42477 5.73122 5.71656 5.3866C6.00836 5.04198 6.37495 4.76851 6.78843 4.58703C7.20191 4.40554 7.65136 4.32083 8.10254 4.33934C8.55371 4.35785 8.99471 4.4791 9.39193 4.69385C8.87806 4.19112 8.22724 3.85123 7.52104 3.71678C6.81484 3.58233 6.08466 3.6593 5.42201 3.93805C4.75936 4.21679 4.19371 4.6849 3.79596 5.28373C3.39821 5.88256 3.18604 6.58546 3.18604 7.30435C3.18604 8.02323 3.39821 8.72613 3.79596 9.32496C4.19371 9.92379 4.75936 10.3919 5.42201 10.6706C6.08466 10.9494 6.81484 11.0264 7.52104 10.8919C8.22724 10.7575 8.87806 10.4176 9.39193 9.91484C8.9585 10.15 8.47304 10.2717 7.97993 10.2708Z\" fill=\"#FFDA44\"/><path d=\"M8.81603 5.2168L9.34303 6.3188L10.533 6.0438L10 7.1428L10.957 7.9018L9.76603 8.1698L9.76903 9.3908L8.81603 8.6268L7.86403 9.3908L7.86703 8.1708L6.67603 7.9008L7.63303 7.1428L7.10003 6.0438L8.29003 6.3188L8.81603 5.2168Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
360
|
+
"saudi arabia": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_179001\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_179001)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#6DA544\"/><path d=\"M6.78291 14.3482C6.78291 15.2122 7.48391 15.9132 8.34791 15.9132H13.0439C13.0439 16.6332 13.6279 17.2172 14.3479 17.2172H15.9139C16.6339 17.2172 17.2179 16.6332 17.2179 15.9132V14.3482H6.78291ZM17.3469 6.7832V10.4352C17.3469 11.0112 16.8789 11.4792 16.3039 11.4792V13.0442C16.9954 13.0431 17.6583 12.7679 18.1472 12.2788C18.6361 11.7897 18.9111 11.1267 18.9119 10.4352V6.7832H17.3469ZM6.12991 10.4352C6.12991 11.0102 5.66191 11.4782 5.08691 11.4782V13.0442C5.77862 13.0434 6.44177 12.7683 6.93088 12.2792C7.41999 11.7901 7.69512 11.1269 7.69591 10.4352V6.7832H6.12991V10.4352Z\" fill=\"#F0F0F0\"/><path d=\"M16.565 6.7832H15V10.4352H16.565V6.7832ZM12.652 8.8702C12.6479 8.9365 12.6187 8.99874 12.5703 9.04423C12.5219 9.08973 12.4579 9.11506 12.3915 9.11506C12.3251 9.11506 12.2612 9.08973 12.2127 9.04423C12.1643 8.99874 12.1351 8.9365 12.131 8.8702V6.7832H10.565V8.8702C10.5609 8.9365 10.5317 8.99874 10.4833 9.04423C10.4349 9.08973 10.3709 9.11506 10.3045 9.11506C10.2381 9.11506 10.1742 9.08973 10.1257 9.04423C10.0773 8.99874 10.0481 8.9365 10.044 8.8702V6.7832H8.479V8.8702C8.479 9.8772 9.298 10.6962 10.305 10.6962C10.692 10.6962 11.052 10.5742 11.348 10.3672C11.7187 10.627 12.173 10.739 12.622 10.6812C12.512 11.1382 12.1 11.4792 11.609 11.4792V13.0442C12.3007 13.0434 12.9639 12.7683 13.453 12.2792C13.9421 11.7901 14.2172 11.1269 14.218 10.4352V6.7832H12.652V8.8702Z\" fill=\"#F0F0F0\"/><path d=\"M10.826 11.4785H8.47998V13.0435H10.827L10.826 11.4785Z\" fill=\"#F0F0F0\"/></g></svg>",
|
|
361
|
+
"qatar": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1068_179011\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1068_179011)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M24.0001 12C24.0001 5.373 18.6271 0 12.0001 0C9.65207 0 7.46207 0.675 5.61307 1.84L8.24307 2.957L4.69507 4.465L8.24307 5.972L4.69507 7.48L8.24307 8.987L4.69507 10.494L8.24307 12L4.69507 13.507L8.24307 15.014L4.69507 16.522L8.24307 18.029L4.69507 19.536L8.24307 21.043L5.61407 22.16C7.5258 23.3651 9.7402 24.0032 12.0001 24C18.6271 24 24.0001 18.627 24.0001 12Z\" fill=\"#751A46\"/></g></svg>"
|
|
362
|
+
};
|
|
363
|
+
|
|
364
|
+
class MsFlagIcon {
|
|
365
|
+
sanitizer;
|
|
366
|
+
name;
|
|
367
|
+
svg;
|
|
368
|
+
size = 'small'; // default
|
|
369
|
+
width = 16;
|
|
370
|
+
height = 16;
|
|
371
|
+
constructor(sanitizer) {
|
|
372
|
+
this.sanitizer = sanitizer;
|
|
373
|
+
}
|
|
374
|
+
ngOnInit() {
|
|
375
|
+
const icon = FLAGICONS[this.name] || '';
|
|
376
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
377
|
+
this.getsize();
|
|
378
|
+
}
|
|
379
|
+
ngOnChanges() {
|
|
380
|
+
const icon = FLAGICONS[this.name] || '';
|
|
381
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
382
|
+
this.getsize();
|
|
383
|
+
}
|
|
384
|
+
getsize() {
|
|
385
|
+
switch (this.size) {
|
|
386
|
+
case 'small':
|
|
387
|
+
this.width = this.height = 16;
|
|
388
|
+
// this.strokeWidth = 1.25;
|
|
389
|
+
break;
|
|
390
|
+
case 'medium':
|
|
391
|
+
this.width = this.height = 20;
|
|
392
|
+
// this.strokeWidth = 1.5;
|
|
393
|
+
break;
|
|
394
|
+
case 'large':
|
|
395
|
+
this.width = this.height = 24;
|
|
396
|
+
// this.strokeWidth = 1.75;
|
|
397
|
+
break;
|
|
398
|
+
default:
|
|
399
|
+
this.width = this.height = 20;
|
|
400
|
+
// this.strokeWidth = 1.5;
|
|
401
|
+
}
|
|
402
|
+
}
|
|
403
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFlagIcon, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
404
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsFlagIcon, isStandalone: true, selector: "ms-flag-icon", inputs: { name: "name", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
405
|
+
}
|
|
406
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFlagIcon, decorators: [{
|
|
407
|
+
type: Component,
|
|
408
|
+
args: [{ selector: 'ms-flag-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}\n"] }]
|
|
409
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { name: [{
|
|
410
|
+
type: Input
|
|
411
|
+
}], size: [{
|
|
412
|
+
type: Input
|
|
413
|
+
}] } });
|
|
414
|
+
|
|
208
415
|
class MsDropdown {
|
|
209
416
|
el;
|
|
210
417
|
cdr;
|
|
@@ -238,6 +445,11 @@ class MsDropdown {
|
|
|
238
445
|
inputWarningState = false;
|
|
239
446
|
inputFocusState = false;
|
|
240
447
|
required = false;
|
|
448
|
+
size = 'md';
|
|
449
|
+
variant = 'primary';
|
|
450
|
+
radiussize = 'md';
|
|
451
|
+
iconOnly = false;
|
|
452
|
+
useInputField = false;
|
|
241
453
|
selectionChange = new EventEmitter();
|
|
242
454
|
validationTouched = false;
|
|
243
455
|
selectedValues = new Set();
|
|
@@ -253,11 +465,15 @@ class MsDropdown {
|
|
|
253
465
|
}
|
|
254
466
|
isOpen = false;
|
|
255
467
|
searchTerm = '';
|
|
468
|
+
dropdownPosition = signal('down', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
|
|
256
469
|
onTriggerClick() {
|
|
257
470
|
if (this.isDisabled)
|
|
258
471
|
return;
|
|
259
472
|
if (this.allowMultiple && this.multiSelectDisplay === 'tags') {
|
|
260
473
|
this.isOpen = !this.isOpen;
|
|
474
|
+
if (this.isOpen) {
|
|
475
|
+
this.checkDropdownPosition();
|
|
476
|
+
}
|
|
261
477
|
return;
|
|
262
478
|
}
|
|
263
479
|
this.toggleDropdown();
|
|
@@ -270,8 +486,12 @@ class MsDropdown {
|
|
|
270
486
|
this.tagInput?.nativeElement.focus();
|
|
271
487
|
}
|
|
272
488
|
toggleDropdown() {
|
|
273
|
-
if (!this.isDisabled)
|
|
489
|
+
if (!this.isDisabled) {
|
|
274
490
|
this.isOpen = !this.isOpen;
|
|
491
|
+
if (this.isOpen) {
|
|
492
|
+
this.checkDropdownPosition();
|
|
493
|
+
}
|
|
494
|
+
}
|
|
275
495
|
}
|
|
276
496
|
cloneItems(items) {
|
|
277
497
|
return items.map(item => ({
|
|
@@ -385,15 +605,35 @@ class MsDropdown {
|
|
|
385
605
|
getTagsWrapperPadding() {
|
|
386
606
|
return (this.inputFocusState || this.selectedItems.length > 0) ? 42 : 0;
|
|
387
607
|
}
|
|
608
|
+
checkDropdownPosition() {
|
|
609
|
+
setTimeout(() => {
|
|
610
|
+
const triggerElement = this.el.nativeElement.querySelector('.ms-dropdown-wrapper');
|
|
611
|
+
if (!triggerElement)
|
|
612
|
+
return;
|
|
613
|
+
const triggerRect = triggerElement.getBoundingClientRect();
|
|
614
|
+
const dropdownMenu = this.el.nativeElement.querySelector('.ms-dropdown-menu');
|
|
615
|
+
if (!dropdownMenu)
|
|
616
|
+
return;
|
|
617
|
+
const dropdownHeight = parseInt(this.maxHeight) || 250;
|
|
618
|
+
const spaceBelow = window.innerHeight - triggerRect.bottom;
|
|
619
|
+
const spaceAbove = triggerRect.top;
|
|
620
|
+
if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
|
|
621
|
+
this.dropdownPosition.set('up');
|
|
622
|
+
}
|
|
623
|
+
else {
|
|
624
|
+
this.dropdownPosition.set('down');
|
|
625
|
+
}
|
|
626
|
+
}, 0);
|
|
627
|
+
}
|
|
388
628
|
close() {
|
|
389
629
|
this.isOpen = false;
|
|
390
630
|
}
|
|
391
631
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
392
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", inputs: { text: "text", isDisabled: "isDisabled", items: "items", icon: "icon", iconPosition: "iconPosition", closeOnSelect: "closeOnSelect", closeOnClickOutside: "closeOnClickOutside", selectedItem: "selectedItem", allowMultiple: "allowMultiple", maxHeight: "maxHeight", loading: "loading", error: "error", ariaLabel: "ariaLabel", searchable: "searchable", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", customClass: "customClass", dropdownMenuClass: "dropdownMenuClass", dropdownMenuWidth: "dropdownMenuWidth", showFlagImage: "showFlagImage", multiSelectDisplay: "multiSelectDisplay", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputErrorState: "inputErrorState", inputWarningState: "inputWarningState", inputFocusState: "inputFocusState", required: "required" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-justify-content-between ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n\n <!-- Selected Flag -->\n <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" />\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon ms-ms-3\">\n <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" />\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"dropdownMenuClass\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Loader -->\n <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n </div>\n\n <!-- Dropdown content -->\n <ng-container *ngIf=\"!loading\">\n <!-- Search input -->\n <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n <input type=\"text\" [(ngModel)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n </div>\n\n <!-- Dropdown items -->\n <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n <button *ngFor=\"let item of filteredItems; let i = index\"\n class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n [disabled]=\"item.disabled\"\n [class.ms-selected]=\"item.selected\"\n [class.ms-p-0]=\"item.divider\"\n (click)=\"selectItem(item)\">\n <!-- \u2705 MULTI-SELECT CHECKBOX -->\n <!-- <input *ngIf=\"allowMultiple && !item.divider\"\n type=\"checkbox\"\n class=\"ms-me-2\"\n [checked]=\"item.selected\"/> -->\n <span *ngIf=\"item.icon\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span>\n\n <!-- COUNTRY FLAG -->\n <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" />\n\n <!-- COUNTRY NAME -->\n <span class=\"ms-country-label\">\n {{ item.label }}\n </span>\n\n <!-- {{ item.label }} -->\n </button>\n </ng-container>\n\n <ng-template #noResults>\n <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n </ng-template>\n </ng-container>\n </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;top:100%;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;margin-top:6px}.ms-dropdown-item{width:100%;text-align:left;padding:12px;background:none;border:none;cursor:pointer;transition:background-color .2s}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }] });
|
|
632
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDropdown, isStandalone: true, selector: "ms-dropdown", inputs: { text: "text", isDisabled: "isDisabled", items: "items", icon: "icon", iconPosition: "iconPosition", closeOnSelect: "closeOnSelect", closeOnClickOutside: "closeOnClickOutside", selectedItem: "selectedItem", allowMultiple: "allowMultiple", maxHeight: "maxHeight", loading: "loading", error: "error", ariaLabel: "ariaLabel", searchable: "searchable", searchPlaceholder: "searchPlaceholder", noResultsText: "noResultsText", customClass: "customClass", dropdownMenuClass: "dropdownMenuClass", dropdownMenuWidth: "dropdownMenuWidth", showFlagImage: "showFlagImage", multiSelectDisplay: "multiSelectDisplay", inputPlaceholder: "inputPlaceholder", inputLabel: "inputLabel", inputErrorState: "inputErrorState", inputWarningState: "inputWarningState", inputFocusState: "inputFocusState", required: "required", size: "size", variant: "variant", radiussize: "radiussize", iconOnly: "iconOnly", useInputField: "useInputField" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-justify-content-between ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Selected Flag -->\n <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" /> -->\n <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon ms-ms-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" />\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Loader -->\n <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n </div>\n\n <!-- Dropdown content -->\n <ng-container *ngIf=\"!loading\">\n <!-- Search input -->\n <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n <input type=\"text\" [(ngModel)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n\n <!-- Dropdown items -->\n <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n <button *ngFor=\"let item of filteredItems; let i = index\"\n class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n [disabled]=\"item.disabled\"\n [class.ms-selected]=\"item.selected\"\n [class.ms-p-0]=\"item.divider\"\n (click)=\"selectItem(item)\">\n <!-- MULTI-SELECT TICK ICON -->\n <div>\n\n </div>\n <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n <!-- COUNTRY FLAG -->\n <!-- <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" /> -->\n <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n <!-- <span>{{item.label | lowercase}}</span> -->\n <!-- COUNTRY NAME -->\n <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n {{ item.label }}\n </span>\n <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n <!-- </span> -->\n <!-- {{ item.label }} -->\n </button>\n </ng-container>\n\n <ng-template #noResults>\n <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n </ng-template>\n </ng-container>\n </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-input-placeholder{font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
|
|
393
633
|
}
|
|
394
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
|
|
395
635
|
type: Component,
|
|
396
|
-
args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner], template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-justify-content-between ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n\n <!-- Selected Flag -->\n <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" />\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon ms-ms-3\">\n <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" />\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"dropdownMenuClass\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Loader -->\n <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n </div>\n\n <!-- Dropdown content -->\n <ng-container *ngIf=\"!loading\">\n <!-- Search input -->\n <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n <input type=\"text\" [(ngModel)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n </div>\n\n <!-- Dropdown items -->\n <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n <button *ngFor=\"let item of filteredItems; let i = index\"\n class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n [disabled]=\"item.disabled\"\n [class.ms-selected]=\"item.selected\"\n [class.ms-p-0]=\"item.divider\"\n (click)=\"selectItem(item)\">\n <!-- \u2705 MULTI-SELECT CHECKBOX -->\n <!-- <input *ngIf=\"allowMultiple && !item.divider\"\n type=\"checkbox\"\n class=\"ms-me-2\"\n [checked]=\"item.selected\"/> -->\n <span *ngIf=\"item.icon\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span>\n\n <!-- COUNTRY FLAG -->\n <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" />\n\n <!-- COUNTRY NAME -->\n <span class=\"ms-country-label\">\n {{ item.label }}\n </span>\n\n <!-- {{ item.label }} -->\n </button>\n </ng-container>\n\n <ng-template #noResults>\n <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n </ng-template>\n </ng-container>\n </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;top:100%;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;margin-top:6px}.ms-dropdown-item{width:100%;text-align:left;padding:12px;background:none;border:none;cursor:pointer;transition:background-color .2s}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"] }]
|
|
636
|
+
args: [{ selector: 'ms-dropdown', standalone: true, imports: [CommonModule, FormsModule, MsButton, InlineSVGModule, MsSpinner, MsIcon, MsFlagIcon], template: "<div class=\"ms-dropdown-wrapper ms-w-100\" [ngClass]=\"customClass\"\n (click)=\"onTriggerClick()\">\n <div class=\"ms-dropdown-field ms-d-flex ms-align-items-center ms-w-100\">\n <!-- allowMultiple && multiSelectDisplay === 'tags' -->\n <div class=\"ms-input-wrapper\" *ngIf=\"allowMultiple && multiSelectDisplay === 'tags'\"\n [class.focused]=\"isFocused\"\n [class.error]=\"hasError\"\n [class.disabled]=\"isDisabled\"\n [class.ms-input-focus]=\"inputFocusState || isOpen || (selectedItems.length > 0)\"\n (click)=\"focusInput()\" [class.ms-dropdown-form-control]=\"visibleTags.length > 0\">\n\n <div class=\"ms-dropdown-display ms-d-flex ms-align-items-center ms-justify-content-between ms-w-100\">\n\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-tags-wrapper-suffix-icon ms-me-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Selected Flag -->\n <!-- <img *ngIf=\"showFlagImage && selectedItemObj?.countryCode\"\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.label | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ selectedItemObj?.label }}\" /> -->\n <ms-flag-icon *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\n\n <!-- TAGS -->\n <span class=\"ms-tag ms-me-1\" *ngFor=\"let item of visibleTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n\n <!-- +N MORE -->\n <span class=\"ms-tag ms-more-btn\"\n *ngIf=\"hiddenTagsCount() > 0\"\n (click)=\"toggleHiddenTags(); $event.stopPropagation()\">\n +{{ hiddenTagsCount() }} more\n </span>\n\n <!-- DROPDOWN FOR HIDDEN TAGS -->\n <div class=\"ms-hidden-tags-dropdown\"\n *ngIf=\"isHiddenTagsOpen && hiddenTagsCount() > 0\"\n (click)=\"$event.stopPropagation()\">\n <span class=\"ms-tag\" *ngFor=\"let item of hiddenTags\">\n {{ item.label }}\n <span class=\"ms-tag-close ms-ms-1\" (click)=\"removeTag(item, $event)\">\u00D7</span>\n </span>\n </div>\n\n <!-- Placeholder -->\n <span *ngIf=\"selectedItems.length === 0\"\n class=\"ms-input-placeholder\">\n {{ inputPlaceholder || 'Default Dropdown' }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-tags-wrapper-suffix-icon ms-ms-3\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n </div>\n\n </div>\n\n <!-- Input Field Trigger -->\n <div *ngIf=\"multiSelectDisplay !== 'tags'\" \n class=\"ms-dropdown-input-wrapper ms-w-100\"\n (click)=\"onTriggerClick(); $event.stopPropagation()\">\n\n <div class=\"ms-input-wrapper\" [class.ms-input-selected]=\"(selectedItems.length > 0)\" [class.ms-input-focus]=\"inputFocusState || isOpen\"\n [class.ms-input-error]=\"inputErrorState || isSelectionRequired()\"\n [class.ms-input-warning]=\"inputWarningState\" [class.disabled]=\"isDisabled\">\n <!-- Prefix Icon -->\n <span *ngIf=\"icon && iconPosition === 'prefix'\" class=\"ms-input-prefix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n\n <!-- Flag -->\n <span *ngIf=\"showFlagImage && selectedItemObj?.countryCode\" class=\"flag_image_container\">\n <img\n [src]=\"'../../../../assets/data-grid/flags/' + (selectedItemObj?.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n [alt]=\"selectedItemObj.label || ''\" />\n </span>\n\n <!-- VALUE TEXT -->\n <span class=\"ms-input-value ms-me-3\"\n [class.ms-placeholder]=\"!(selectedItem || text)\">\n {{ selectedItem || text || inputPlaceholder }}\n </span>\n\n <!-- Suffix Icon -->\n <span *ngIf=\"icon && iconPosition === 'suffix'\" class=\"ms-input-suffix-icon\">\n <!-- <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center\" [name]=\"icon\" [size]=\"'small'\"></ms-icon>\n </span>\n </div>\n </div>\n </div>\n\n\n <div *ngIf=\"isOpen\" class=\"ms-dropdown-menu\" [ngClass]=\"[dropdownMenuClass || '', 'ms-dropdown-' + dropdownPosition()]\"\n [style.maxHeight]=\"maxHeight\"\n [ngStyle]=\"{'overflowY': 'auto', 'overflowX': 'hidden'}\"\n (click)=\"$event.stopPropagation()\">\n \n <!-- Loader -->\n <div *ngIf=\"loading\" class=\"ms-dropdown-loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'md'\"></ms-spinner>\n </div>\n\n <!-- Dropdown content -->\n <ng-container *ngIf=\"!loading\">\n <!-- Search input -->\n <div *ngIf=\"searchable\" class=\"ms-dropdown-search-container\">\n <input type=\"text\" [(ngModel)]=\"searchTerm\"\n [placeholder]=\"searchPlaceholder\" class=\"ms-dropdown-search\" />\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n\n <!-- Dropdown items -->\n <ng-container *ngIf=\"filteredItems.length > 0; else noResults\">\n <button *ngFor=\"let item of filteredItems; let i = index\"\n class=\"ms-dropdown-item ms-d-flex ms-align-items-center\"\n [disabled]=\"item.disabled\"\n [class.ms-selected]=\"item.selected\"\n [class.ms-p-0]=\"item.divider\"\n (click)=\"selectItem(item)\">\n <!-- MULTI-SELECT TICK ICON -->\n <div>\n\n </div>\n <!-- <span *ngIf=\"item.icon && !showFlagImage\" [inlineSVG]=\"'../../../../assets/data-grid/icons/' + item.icon\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\"></span> -->\n <ms-icon *ngIf=\"item.icon && !showFlagImage\" class=\"ms-dropdown-item-icon ms-d-flex ms-me-2\" [name]=\"item.icon\" [size]=\"'small'\"></ms-icon>\n\n <!-- COUNTRY FLAG -->\n <!-- <img *ngIf=\"item.icon && showFlagImage\"\n [src]=\"'../../../../assets/data-grid/flags/' + (item.countryCode | lowercase) + '.svg'\"\n class=\"ms-country-flag ms-me-2\"\n alt=\"{{ item.label }}\" /> -->\n <ms-flag-icon *ngIf=\"item.icon && showFlagImage\" [name]=\"item.label | lowercase\"></ms-flag-icon>\n <!-- <span>{{item.label | lowercase}}</span> -->\n <!-- COUNTRY NAME -->\n <span [style.padding-left.px]=\"showFlagImage || item.icon ? 10 : 0\" class=\"ms-country-label\">\n {{ item.label }}\n </span>\n <!-- <span *ngIf=\"item.selected\" [inlineSVG]=\"'../../../../assets/data-grid/icons/blue-check.svg'\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\">\n <ms-icon [name]=\"'check'\" [size]=\"'small'\"></ms-icon> -->\n <ms-icon *ngIf=\"item.selected\" class=\"dropdown_tick_icon ms-d-flex ms-me-2\" [name]=\"'check'\" [color]=\"'ms-icon-blue'\" [size]=\"'small'\"></ms-icon>\n <!-- </span> -->\n <!-- {{ item.label }} -->\n </button>\n </ng-container>\n\n <ng-template #noResults>\n <div class=\"ms-dropdown-no-results\">{{ noResultsText }}</div>\n </ng-template>\n </ng-container>\n </div>\n</div>", styles: [".ms-dropdown-wrapper{position:relative;display:inline-block}.ms-dropdown-trigger{width:100%;cursor:pointer}.ms-input-wrapper.ms-input-error,.ms-input-wrapper.ms-input-error:hover{border-color:#dc2626}.ms-input-wrapper.ms-input-warning,.ms-input-wrapper.ms-input-warning:hover{border-color:#f59e0b}.ms-input-wrapper.ms-input-focus .ms-dropdown-input-field{border-color:#3b82f6}.ms-input-wrapper.ms-input-focus .ms-input-tags-field{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f61a}.ms-dropdown-input-label{font-size:14px;font-weight:500;color:#374151;margin:0}.ms-dropdown-input-label .ms-required{color:#dc2626;margin-left:2px}.ms-dropdown-input-field-wrapper{display:flex;align-items:center;position:relative;gap:0}.ms-dropdown-input-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-dropdown-input-suffix-icon{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:#6b7280}.ms-dropdown-input-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-prefix-icon{display:flex;align-items:center;justify-content:center;padding-left:12px;flex-shrink:0;color:#6b7280}.ms-tags-wrapper-prefix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-tags-wrapper-suffix-icon{flex-shrink:0;color:#6b7280}.ms-tags-wrapper-suffix-icon span{display:flex;align-items:center;width:18px;height:18px}.ms-input-wrapper{flex:1;padding:10px 12px;border:1px solid #E0E0E0;border-radius:8px;font-size:14px;color:#374151;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover:not(.disabled,.ms-input-error,.ms-input-warning){border-color:#3b82f6}.ms-input-wrapper:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-input-wrapper.disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-input-wrapper::placeholder{color:#9ca3af}.ms-input-wrapper.disabled:hover{border-color:#e0e0e0!important}.ms-dropdown-menu{position:absolute;left:0;right:0;z-index:1000;border-radius:12px;background-color:#fff;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0;padding:4px 0}.ms-dropdown-menu.ms-dropdown-down{top:100%;margin-top:6px}.ms-dropdown-menu.ms-dropdown-up{bottom:100%;margin-bottom:6px}.ms-dropdown-item{width:100%;text-align:left;padding:8px 12px;background:none;border:none;cursor:pointer;transition:background-color .2s;font-size:14px!important;font-weight:400}.ms-dropdown-item .ms-country-label{font-size:14px!important;color:#1b1f22;padding-left:10px}.ms-dropdown-item:hover{background-color:#f5f5f5}.ms-dropdown-item.ms-selected{background:#0084ff1a}.dropdown_tick_icon{margin-left:auto}.ms-dropdown-search{width:-webkit-fill-available;padding:12px;margin:12px;border:1px solid #d1d5db;border-radius:8px}.ms-dropdown-search-container{position:sticky;top:0;background-color:#fff}.ms-dropdown-search-container input{padding-left:40px}.ms-dropdown-search-container .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}.ms-dropdown-no-results{padding:6px 12px;color:#9ca3af;font-style:italic}.ms-country-flag{width:18px;height:14px;object-fit:cover;border-radius:2px}.flag_image_container .ms-country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-country-dial{font-size:12px;color:#6b7280}.ms-dropdown-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}.ms-dropdown-loader .ms-spinner{display:flex;align-items:center;justify-content:center}.ms-dropdown-loader .ms-spinner .ms-spinner-circle{width:30px;height:30px;border:3px solid #e5e7eb;border-top:3px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.ms-loader-text{margin:0;font-size:14px;color:#6b7280;font-weight:500}@keyframes spin{to{transform:rotate(360deg)}}.ms-tag{border-radius:4px;padding:4px 8px;font-size:12px;display:inline-flex;align-items:center;background:#1f24281a;color:#1b1f22}.ms-tag .ms-tag-close{cursor:pointer}.ms-tag-remove{cursor:pointer;margin-left:6px;font-weight:700}.ms-tag-input{border:none;outline:none;min-width:60px}.ms-tag-container{border:1px solid gainsboro;border-radius:4px;padding:4px 8px}.ms-more-btn{background:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-hidden-tags-dropdown{position:absolute;top:100%;left:0;right:0;border-radius:8px;padding:4px;margin-top:4px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px;height:60px;max-height:120px;overflow-y:auto;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014}.ms-hidden-tags-dropdown .ms-tag{width:fit-content;height:fit-content}.ms-dropdown-form-control{padding:.2rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;opacity:1;border-width:1px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::placeholder{color:#6a6b6d;opacity:1}::-webkit-input-placeholder{color:#6a6b6d}::-moz-placeholder{color:#6a6b6d;opacity:1}:-ms-input-placeholder{color:#6a6b6d}:-moz-placeholder{color:#6a6b6d;opacity:1}.ms-hover{border:1px solid #0084FF;box-shadow:0 0 0 1px #b7dcff}.ms-input-wrapper{position:relative;display:flex;align-items:center;height:36px;padding:0 8px;border-radius:8px;cursor:pointer;background:#fff;border:1px solid #E0E0E0;font-size:14px!important;min-width:200px;transition:border-color .2s,box-shadow .2s}.ms-input-wrapper:hover{border-color:#0084ff}.ms-input-selected{border-color:#0084ff;box-shadow:none}.ms-input-wrapper.ms-input-focus{border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-input-value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px!important}.ms-input-placeholder{font-size:14px!important}.ms-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"] }]
|
|
397
637
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { text: [{
|
|
398
638
|
type: Input
|
|
399
639
|
}], isDisabled: [{
|
|
@@ -448,6 +688,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
448
688
|
type: Input
|
|
449
689
|
}], required: [{
|
|
450
690
|
type: Input
|
|
691
|
+
}], size: [{
|
|
692
|
+
type: Input
|
|
693
|
+
}], variant: [{
|
|
694
|
+
type: Input
|
|
695
|
+
}], radiussize: [{
|
|
696
|
+
type: Input
|
|
697
|
+
}], iconOnly: [{
|
|
698
|
+
type: Input
|
|
699
|
+
}], useInputField: [{
|
|
700
|
+
type: Input
|
|
451
701
|
}], selectionChange: [{
|
|
452
702
|
type: Output
|
|
453
703
|
}], tagInput: [{
|
|
@@ -540,7 +790,7 @@ class MsCheckbox {
|
|
|
540
790
|
useExisting: forwardRef(() => MsCheckbox),
|
|
541
791
|
multi: true
|
|
542
792
|
}
|
|
543
|
-
], usesOnChanges: true, ngImport: i0, template: "<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.checkbox-skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input style=\"width: 16px;height: 16px;\"\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"] });
|
|
793
|
+
], usesOnChanges: true, ngImport: i0, template: "<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.checkbox-skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input style=\"width: 16px;height: 16px;\"\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\n", styles: [""] });
|
|
544
794
|
}
|
|
545
795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsCheckbox, decorators: [{
|
|
546
796
|
type: Component,
|
|
@@ -555,7 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
555
805
|
useExisting: forwardRef(() => MsCheckbox),
|
|
556
806
|
multi: true
|
|
557
807
|
}
|
|
558
|
-
], template: "<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.checkbox-skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input style=\"width: 16px;height: 16px;\"\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}\n"] }]
|
|
808
|
+
], template: "<label\n class=\"ms-checkbox\"\n [class.disabled]=\"disabled\"\n [class.invalid]=\"invalid\"\n [class.checkbox-skeleton]=\"skeleton\"\n>\n @if (skeleton) {\n <div class=\"ms-checkbox-skeleton\"></div>\n } @else {\n\n <input style=\"width: 16px;height: 16px;\"\n type=\"checkbox\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"toggle()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-checkbox-box\">\n @if (indeterminate) {\n <span class=\"ms-indeterminate\"></span>\n } @else if (checked) {\n <span class=\"ms-checkmark\">✓</span>\n }\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }\n</label>\n\n" }]
|
|
559
809
|
}], propDecorators: { label: [{
|
|
560
810
|
type: Input
|
|
561
811
|
}], disabled: [{
|
|
@@ -665,11 +915,11 @@ class MsBadge {
|
|
|
665
915
|
}
|
|
666
916
|
}
|
|
667
917
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBadge, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
668
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsBadge, isStandalone: true, selector: "ms-badge", inputs: { color: "color", radiussize: "radiussize", block: "block", disabled: "disabled", isDark: "isDark", skeleton: "skeleton", text: "text", icon: "icon", iconOnly: "iconOnly", iconPosition: "iconPosition", class: "class" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(skeleton){\n <span [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" >\n </span>\n \n}@else{\n <span [class.disabled]=\"disabled\" [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n <span>{{ text }}</span>\n </span>\n\n}", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.badge-skeleton{height:2.5rem;border-radius:4px;width:26px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
|
|
918
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsBadge, isStandalone: true, selector: "ms-badge", inputs: { color: "color", radiussize: "radiussize", block: "block", disabled: "disabled", isDark: "isDark", skeleton: "skeleton", text: "text", icon: "icon", iconOnly: "iconOnly", iconPosition: "iconPosition", class: "class" }, outputs: { htmlChange: "htmlChange", click: "click" }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(skeleton){\n <span [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" >\n </span>\n \n}@else{\n <span [class.disabled]=\"disabled\" [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n <span>{{ text }}</span>\n </span>\n\n}", styles: [".badge-skeleton{height:2.5rem;border-radius:4px;width:26px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
|
|
669
919
|
}
|
|
670
920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBadge, decorators: [{
|
|
671
921
|
type: Component,
|
|
672
|
-
args: [{ selector: 'ms-badge', imports: [], template: "@if(skeleton){\n <span [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" >\n </span>\n \n}@else{\n <span [class.disabled]=\"disabled\" [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n <span>{{ text }}</span>\n </span>\n\n}", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.badge-skeleton{height:2.5rem;border-radius:4px;width:26px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
922
|
+
args: [{ selector: 'ms-badge', imports: [], template: "@if(skeleton){\n <span [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" >\n </span>\n \n}@else{\n <span [class.disabled]=\"disabled\" [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n <span>{{ text }}</span>\n </span>\n\n}", styles: [".badge-skeleton{height:2.5rem;border-radius:4px;width:26px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
673
923
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
|
|
674
924
|
type: Input
|
|
675
925
|
}], radiussize: [{
|
|
@@ -780,7 +1030,7 @@ class MsToggle {
|
|
|
780
1030
|
useExisting: forwardRef(() => MsToggle),
|
|
781
1031
|
multi: true
|
|
782
1032
|
}
|
|
783
|
-
], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-toggle\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n @if(!skeleton){\n <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggle()\" (blur)=\"markTouched()\" />\n <span class=\"ms-toggle-track\">\n <span class=\"ms-toggle-thumb\"></span>\n </span>\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }@else{\n <div class=\"ms-radio-skeleton\"></div>\n }\n</label>\n\n\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.toggle-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-radio-skeleton{width:30px;height:18px;border-radius:50%;background:#e5e7eb;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}\n"] });
|
|
1033
|
+
], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-toggle\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n @if(!skeleton){\n <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggle()\" (blur)=\"markTouched()\" />\n <span class=\"ms-toggle-track\">\n <span class=\"ms-toggle-thumb\"></span>\n </span>\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }@else{\n <div class=\"ms-radio-skeleton\"></div>\n }\n</label>\n\n\n", styles: [".toggle-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-radio-skeleton{width:30px;height:18px;border-radius:50%;background:#e5e7eb;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}\n"] });
|
|
784
1034
|
}
|
|
785
1035
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToggle, decorators: [{
|
|
786
1036
|
type: Component,
|
|
@@ -795,7 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
795
1045
|
useExisting: forwardRef(() => MsToggle),
|
|
796
1046
|
multi: true
|
|
797
1047
|
}
|
|
798
|
-
], template: "<label class=\"ms-toggle\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n @if(!skeleton){\n <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggle()\" (blur)=\"markTouched()\" />\n <span class=\"ms-toggle-track\">\n <span class=\"ms-toggle-thumb\"></span>\n </span>\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }@else{\n <div class=\"ms-radio-skeleton\"></div>\n }\n</label>\n\n\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.toggle-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-radio-skeleton{width:30px;height:18px;border-radius:50%;background:#e5e7eb;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}\n"] }]
|
|
1048
|
+
], template: "<label class=\"ms-toggle\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" [class.invalid]=\"invalid\" [class.toggle-skeleton]=\"skeleton\">\n @if(!skeleton){\n <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggle()\" (blur)=\"markTouched()\" />\n <span class=\"ms-toggle-track\">\n <span class=\"ms-toggle-thumb\"></span>\n </span>\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n }@else{\n <div class=\"ms-radio-skeleton\"></div>\n }\n</label>\n\n\n", styles: [".toggle-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-radio-skeleton{width:30px;height:18px;border-radius:50%;background:#e5e7eb;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}\n"] }]
|
|
799
1049
|
}], propDecorators: { label: [{
|
|
800
1050
|
type: Input
|
|
801
1051
|
}], class: [{
|
|
@@ -898,7 +1148,7 @@ class MsRadioButton {
|
|
|
898
1148
|
useExisting: forwardRef(() => MsRadioButton),
|
|
899
1149
|
multi: true
|
|
900
1150
|
}
|
|
901
|
-
], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-radio\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.radio-skeleton]=\"skeleton\"\n [class.invalid]=\"invalid\">\n \n @if (skeleton) {\n <div class=\"ms-radio-skeleton\"></div>\n } @else {\n <input\n type=\"radio\"\n [name]=\"name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"select()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-radio-circle\">\n <span class=\"ms-radio-dot\"></span>\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n}\n</label>\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
|
|
1151
|
+
], usesOnChanges: true, ngImport: i0, template: "<label class=\"ms-radio\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.radio-skeleton]=\"skeleton\"\n [class.invalid]=\"invalid\">\n \n @if (skeleton) {\n <div class=\"ms-radio-skeleton\"></div>\n } @else {\n <input\n type=\"radio\"\n [name]=\"name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"select()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-radio-circle\">\n <span class=\"ms-radio-dot\"></span>\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n}\n</label>\n", styles: [".radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
|
|
902
1152
|
}
|
|
903
1153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsRadioButton, decorators: [{
|
|
904
1154
|
type: Component,
|
|
@@ -913,7 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
913
1163
|
useExisting: forwardRef(() => MsRadioButton),
|
|
914
1164
|
multi: true
|
|
915
1165
|
}
|
|
916
|
-
], template: "<label class=\"ms-radio\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.radio-skeleton]=\"skeleton\"\n [class.invalid]=\"invalid\">\n \n @if (skeleton) {\n <div class=\"ms-radio-skeleton\"></div>\n } @else {\n <input\n type=\"radio\"\n [name]=\"name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"select()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-radio-circle\">\n <span class=\"ms-radio-dot\"></span>\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n}\n</label>\n", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
1166
|
+
], template: "<label class=\"ms-radio\"\n [class.checked]=\"checked\"\n [class.disabled]=\"disabled\"\n [class.radio-skeleton]=\"skeleton\"\n [class.invalid]=\"invalid\">\n \n @if (skeleton) {\n <div class=\"ms-radio-skeleton\"></div>\n } @else {\n <input\n type=\"radio\"\n [name]=\"name\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"select()\"\n (blur)=\"markTouched()\"\n />\n\n <span class=\"ms-radio-circle\">\n <span class=\"ms-radio-dot\"></span>\n </span>\n\n @if (label) {\n <span class=\"ms-label\">{{ label }}</span>\n }\n}\n</label>\n", styles: [".radio-skeleton{border-radius:50%;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
917
1167
|
}], propDecorators: { label: [{
|
|
918
1168
|
type: Input
|
|
919
1169
|
}], name: [{
|
|
@@ -958,9 +1208,6 @@ class MsInlineEdit {
|
|
|
958
1208
|
this.cdr = cdr;
|
|
959
1209
|
}
|
|
960
1210
|
ngOnInit() { }
|
|
961
|
-
/**
|
|
962
|
-
* Enable editing mode
|
|
963
|
-
*/
|
|
964
1211
|
enableEdit() {
|
|
965
1212
|
if (this.readonly)
|
|
966
1213
|
return;
|
|
@@ -976,9 +1223,6 @@ class MsInlineEdit {
|
|
|
976
1223
|
}
|
|
977
1224
|
}, 0);
|
|
978
1225
|
}
|
|
979
|
-
/**
|
|
980
|
-
* Save the edited value
|
|
981
|
-
*/
|
|
982
1226
|
saveValue() {
|
|
983
1227
|
if (!this.validateInput()) {
|
|
984
1228
|
return;
|
|
@@ -994,9 +1238,6 @@ class MsInlineEdit {
|
|
|
994
1238
|
this.isSuccess.set(false);
|
|
995
1239
|
}, 500);
|
|
996
1240
|
}
|
|
997
|
-
/**
|
|
998
|
-
* Cancel editing and revert changes
|
|
999
|
-
*/
|
|
1000
1241
|
cancelEdit() {
|
|
1001
1242
|
this.isEditing.set(false);
|
|
1002
1243
|
this.editingValue = this.value;
|
|
@@ -1004,9 +1245,6 @@ class MsInlineEdit {
|
|
|
1004
1245
|
this.isSuccess.set(false);
|
|
1005
1246
|
this.cancelled.emit();
|
|
1006
1247
|
}
|
|
1007
|
-
/**
|
|
1008
|
-
* Handle input value change
|
|
1009
|
-
*/
|
|
1010
1248
|
onInputChange(event) {
|
|
1011
1249
|
const target = event.target;
|
|
1012
1250
|
this.editingValue = target.value;
|
|
@@ -1021,21 +1259,13 @@ class MsInlineEdit {
|
|
|
1021
1259
|
this.hasError.set(false);
|
|
1022
1260
|
}
|
|
1023
1261
|
}
|
|
1024
|
-
/**
|
|
1025
|
-
* Handle focus event
|
|
1026
|
-
*/
|
|
1027
1262
|
onFocus() {
|
|
1028
1263
|
this.isFocused.set(true);
|
|
1029
1264
|
}
|
|
1030
|
-
/**
|
|
1031
|
-
* Handle blur event
|
|
1032
|
-
*/
|
|
1033
1265
|
onBlur() {
|
|
1034
1266
|
this.isFocused.set(false);
|
|
1267
|
+
this.saveValue();
|
|
1035
1268
|
}
|
|
1036
|
-
/**
|
|
1037
|
-
* Handle keyboard events
|
|
1038
|
-
*/
|
|
1039
1269
|
onKeyDown(event) {
|
|
1040
1270
|
if (event.key === 'Enter') {
|
|
1041
1271
|
event.preventDefault();
|
|
@@ -1046,17 +1276,12 @@ class MsInlineEdit {
|
|
|
1046
1276
|
this.cancelEdit();
|
|
1047
1277
|
}
|
|
1048
1278
|
}
|
|
1049
|
-
/**
|
|
1050
|
-
* Validate input based on rules
|
|
1051
|
-
*/
|
|
1052
1279
|
validateInput() {
|
|
1053
1280
|
const val = this.editingValue.trim();
|
|
1054
|
-
// Required check
|
|
1055
1281
|
if (this.required && !val) {
|
|
1056
1282
|
this.hasError.set(true);
|
|
1057
1283
|
return false;
|
|
1058
1284
|
}
|
|
1059
|
-
// Empty field is valid if not required
|
|
1060
1285
|
if (!val && !this.required) {
|
|
1061
1286
|
return true;
|
|
1062
1287
|
}
|
|
@@ -1095,18 +1320,15 @@ class MsInlineEdit {
|
|
|
1095
1320
|
this.hasError.set(false);
|
|
1096
1321
|
return true;
|
|
1097
1322
|
}
|
|
1098
|
-
/**
|
|
1099
|
-
* Get display text
|
|
1100
|
-
*/
|
|
1101
1323
|
getDisplayText() {
|
|
1102
1324
|
return this.value || this.placeholder;
|
|
1103
1325
|
}
|
|
1104
1326
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInlineEdit, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsInlineEdit, isStandalone: true, selector: "app-ms-inline-edit", inputs: { value: "value", placeholder: "placeholder", fieldType: "fieldType", disabled: "disabled", required: "required", readonly: "readonly", pattern: "pattern", minlength: "minlength", maxlength: "maxlength", state: "state" }, outputs: { change: "change", saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n [class.ms-focus]=\"isFocused()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/pencil.svg'\"></span>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{width:100%;padding:.5rem .75rem;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;background-color:#fff;font-family:inherit;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1327
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsInlineEdit, isStandalone: true, selector: "app-ms-inline-edit", inputs: { value: "value", placeholder: "placeholder", fieldType: "fieldType", disabled: "disabled", required: "required", readonly: "readonly", pattern: "pattern", minlength: "minlength", maxlength: "maxlength", state: "state" }, outputs: { change: "change", saved: "saved", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n [class.ms-focus]=\"isFocused()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onBlur()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/pencil.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{width:-webkit-fill-available;padding:.5rem .75rem;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;background-color:#fff;font-family:inherit;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1106
1328
|
}
|
|
1107
1329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInlineEdit, decorators: [{
|
|
1108
1330
|
type: Component,
|
|
1109
|
-
args: [{ selector: 'app-ms-inline-edit', imports: [CommonModule, FormsModule, InlineSVGModule, ReactiveFormsModule], template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n [class.ms-focus]=\"isFocused()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/pencil.svg'\"></span>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{width:100%;padding:.5rem .75rem;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;background-color:#fff;font-family:inherit;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
1331
|
+
args: [{ selector: 'app-ms-inline-edit', imports: [CommonModule, FormsModule, InlineSVGModule, ReactiveFormsModule], template: "<div class=\"ms-inline-edit-container\" \n [class.ms-editing]=\"isEditing()\"\n [class.ms-has-error]=\"hasError()\"\n [class.ms-has-success]=\"isSuccess()\"\n [class.ms-disabled]=\"disabled\"\n [class.ms-focus]=\"isFocused()\"\n (blur)=\"onBlur()\"\n (keydown.enter)=\"onBlur()\"\n [ngClass]=\"state\">\n\n <!-- Display Mode -->\n <div class=\"ms-inline-edit-display\" \n *ngIf=\"!isEditing()\"\n [class.ms-hover]=\"state === 'ms-hover'\"\n [class.ms-disabled]=\"disabled\">\n \n <!-- Disabled Input Field (when disabled) -->\n <input \n *ngIf=\"disabled\"\n type=\"text\"\n class=\"ms-inline-edit-display-input ms-form-control\"\n [value]=\"getDisplayText()\"\n [placeholder]=\"placeholder\"\n disabled\n readonly />\n\n <!-- Display Text (when not disabled) -->\n <span \n *ngIf=\"!disabled\"\n class=\"ms-inline-edit-text\" \n [class.ms-placeholder]=\"!value\">\n {{ getDisplayText() }}\n </span>\n\n <!-- Edit Icon Button -->\n <button \n type=\"button\"\n class=\"ms-inline-edit-btn\"\n (click)=\"enableEdit()\"\n aria-label=\"Edit\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/pencil.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n\n <!-- Edit Mode -->\n <div class=\"ms-inline-edit-form\" *ngIf=\"isEditing()\">\n \n <!-- Input Field -->\n <input\n type=\"text\"\n class=\"ms-inline-edit-input\"\n [class.ms-error]=\"hasError()\"\n [value]=\"editingValue\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [attr.minlength]=\"minlength\"\n [attr.maxlength]=\"maxlength\"\n (input)=\"onInputChange($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\" />\n\n <!-- Action Buttons -->\n <!-- <div class=\"ms-inline-edit-actions\">\n <button \n type=\"button\"\n class=\"ms-inline-edit-save\"\n [disabled]=\"hasError()\"\n (click)=\"saveValue()\"\n aria-label=\"Save\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/check.json'\"></span>\n </button>\n <button \n type=\"button\"\n class=\"ms-inline-edit-cancel\"\n (click)=\"cancelEdit()\"\n aria-label=\"Cancel\">\n <span [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/close.json'\"></span>\n </button>\n </div> -->\n\n <!-- Error Message -->\n <div class=\"ms-inline-edit-error\" *ngIf=\"hasError()\">\n <span *ngIf=\"required && !editingValue.trim()\">This field is required</span>\n <span *ngIf=\"minlength && editingValue.length < minlength\">Minimum {{ minlength }} characters required</span>\n <span *ngIf=\"maxlength && editingValue.length > maxlength\">Maximum {{ maxlength }} characters allowed</span>\n <span *ngIf=\"fieldType === 'email'\">Invalid email format</span>\n <span *ngIf=\"fieldType === 'number'\">Must be a valid number</span>\n </div>\n </div>\n\n</div>", styles: [".ms-inline-edit-container{display:inline-block;width:100%;font-family:inherit}.ms-inline-edit-container .ms-inline-edit-display{position:relative}.ms-inline-edit-container .ms-inline-edit-display:hover:not(.ms-disabled){border-color:var(--semantics-border-neutral-hover, #999999);background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display.ms-hover:not(.ms-disabled){border-color:var(--semantics-border-brand-default, #0084FF);background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-inline-edit-container .ms-inline-edit-display.ms-disabled{opacity:.6;cursor:not-allowed;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);border-color:var(--semantics-border-neutral-default, #E0E0E0);cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-display-input::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text{flex:1;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);word-break:break-word}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-text.ms-placeholder{color:var(--semantic-fg-neutral-placeholder, #999999);font-style:italic}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn{flex-shrink:0;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;cursor:pointer;color:var(--semantic-fg-neutral-default, #666666);opacity:0;visibility:hidden;transition:all .2s ease;position:absolute;top:8px;bottom:0;right:12px;display:flex;align-items:center}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn:hover{color:var(--semantics-border-brand-default, #0084FF);transform:scale(1.1)}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display .ms-inline-edit-btn span ::ng-deep svg{width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-display:hover .ms-inline-edit-btn{opacity:1;visibility:visible}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn{opacity:.7;visibility:visible;color:var(--semantics-border-brand-default, #0084FF);cursor:pointer}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display .ms-inline-edit-btn:hover{opacity:1}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{width:-webkit-fill-available;padding:.5rem .75rem;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;background-color:#fff;font-family:inherit;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);transition:all .2s ease;resize:vertical}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:focus{outline:none;border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input.ms-error:focus,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea.ms-error:focus{border-color:var(--semantic-fg-error-default, #D33C3C);box-shadow:0 0 0 2px #d33c3c26}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input::placeholder,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-input:disabled,.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea:disabled{background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);color:var(--semantic-fg-neutral-default, #666666);cursor:not-allowed;opacity:.6}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-textarea{min-height:4rem;resize:both}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions{display:flex;gap:.5rem;margin-top:.25rem}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;background:#fff;border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;cursor:pointer;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:hover:not(:disabled){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border-color:var(--semantics-border-brand-default, #0084FF);color:var(--semantics-border-brand-default, #0084FF)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button:disabled{opacity:.5;cursor:not-allowed}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions button span ::ng-deep svg{width:60%;height:60%}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save{background-color:var(--semantic-fg-success-default, #00935C);border-color:var(--semantic-fg-success-default, #00935C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:hover:not(:disabled){background-color:var(--semantic-fg-success-hover, #007A4A);border-color:var(--semantic-fg-success-hover, #007A4A)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-save:disabled{background-color:var(--semantic-fg-neutral-default, #CCCCCC);border-color:var(--semantic-fg-neutral-default, #CCCCCC);opacity:.5}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel{background-color:var(--semantic-fg-error-default, #D33C3C);border-color:var(--semantic-fg-error-default, #D33C3C);color:#fff}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-actions .ms-inline-edit-cancel:hover:not(:disabled){background-color:var(--semantic-fg-error-hover, #B91C1C);border-color:var(--semantic-fg-error-hover, #B91C1C)}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error{padding:.5rem .75rem;background-color:#d33c3c1a;border-left:3px solid var(--semantic-fg-error-default, #D33C3C);border-radius:2px;font-size:.75rem;color:var(--semantic-fg-error-default, #D33C3C);font-weight:500;animation:slideIn .2s ease}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span{display:block}.ms-inline-edit-container .ms-inline-edit-form .ms-inline-edit-error span:not(:last-child){margin-bottom:.25rem}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display{border-color:var(--semantic-fg-error-default, #D33C3C)!important;background-color:#d33c3c05!important}.ms-inline-edit-container.ms-has-error .ms-inline-edit-display .ms-inline-edit-text{color:var(--semantic-fg-error-default, #D33C3C)}.ms-inline-edit-container.ms-has-success .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important}.ms-inline-edit-container.ms-focus .ms-inline-edit-display{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-inline-edit-container.ms-disabled .ms-inline-edit-display{opacity:1;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}@keyframes slideIn{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
1110
1332
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
1111
1333
|
type: Input
|
|
1112
1334
|
}], placeholder: [{
|
|
@@ -1302,11 +1524,11 @@ class MsPasswordField {
|
|
|
1302
1524
|
}
|
|
1303
1525
|
}
|
|
1304
1526
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPasswordField, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPasswordField, isStandalone: true, selector: "app-ms-password-field", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", autocomplete: "autocomplete", disabled: "disabled", required: "required", readonly: "readonly", skeleton: "skeleton", value: "value", showRequirements: "showRequirements", minLength: "minLength", requireUppercase: "requireUppercase", requireLowercase: "requireLowercase", requireNumbers: "requireNumbers", requireSpecialChars: "requireSpecialChars" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", passwordStrengthChange: "passwordStrengthChange" }, ngImport: i0, template: "<div class=\"ms-password-field-wrapper\">\n <!-- Password Input -->\n <div class=\"ms-password-input-container\" [class.disabled]=\"disabled\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"isFocused()\">\n <input\n [type]=\"showPassword() ? 'text' : 'password'\"\n class=\"ms-form-control ms-password-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder\"\n [attr.autocomplete]=\"autocomplete\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"onPasswordChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n (input)=\"onPasswordChange($event)\"\n />\n\n <!-- Toggle Password Visibility Button -->\n <button\n type=\"button\"\n class=\"ms-password-toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"
|
|
1527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPasswordField, isStandalone: true, selector: "app-ms-password-field", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", autocomplete: "autocomplete", disabled: "disabled", required: "required", readonly: "readonly", skeleton: "skeleton", value: "value", showRequirements: "showRequirements", minLength: "minLength", requireUppercase: "requireUppercase", requireLowercase: "requireLowercase", requireNumbers: "requireNumbers", requireSpecialChars: "requireSpecialChars" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", passwordStrengthChange: "passwordStrengthChange" }, ngImport: i0, template: "<div class=\"ms-password-field-wrapper\">\n <!-- Password Input -->\n <div class=\"ms-password-input-container\" [class.disabled]=\"disabled\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"isFocused()\">\n <input\n [type]=\"showPassword() ? 'text' : 'password'\"\n class=\"ms-form-control ms-password-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder\"\n [attr.autocomplete]=\"autocomplete\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"onPasswordChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n (input)=\"onPasswordChange($event)\"\n />\n\n <!-- Toggle Password Visibility Button -->\n <button\n type=\"button\"\n class=\"ms-password-toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\">\n <span class=\"ms-d-flex ms-align-items-center\">\n <img [src]=\" showPassword()\n ? 'https://ds-doc.sentrixbar.com/assets/data-grid/icons/eye16x16.svg'\n : 'https://ds-doc.sentrixbar.com/assets/data-grid/icons/eye-closed.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n\n <!-- Password Strength Indicator -->\n <div *ngIf=\"value\" class=\"ms-password-strength\">\n <div class=\"ms-strength-bar-container\">\n <div class=\"ms-strength-bar\" [style.width.%]=\"passwordScore()\" [style.backgroundColor]=\"getStrengthColor()\"></div>\n </div>\n <span class=\"ms-strength-text\" [style.color]=\"getStrengthColor()\">\n Strength: {{ passwordStrength() | uppercase }}\n </span>\n </div>\n\n <!-- Password Requirements List -->\n <div *ngIf=\"showRequirements && value\" class=\"ms-password-requirements\">\n <!-- <div class=\"ms-requirements-title\">Password Requirements:</div> -->\n <ul class=\"ms-requirements-list\">\n <li *ngFor=\"let requirement of requirements\" [class.ms-requirement-met]=\"requirement.isMet\" [class.ms-requirement-unmet]=\"!requirement.isMet\">\n <span class=\"ms-requirement-icon\" [class.ms-icon-success]=\"requirement.isMet\" [class.ms-icon-error]=\"!requirement.isMet\">\n <svg *ngIf=\"requirement.isMet\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n <svg *ngIf=\"!requirement.isMet\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n </svg>\n </span>\n <span class=\"ms-requirement-label\">{{ requirement.label }}</span>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".ms-password-field-wrapper{width:100%;display:flex;flex-direction:column;gap:12px}.ms-password-field-wrapper .ms-password-input-container{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--semantics-border-subtle-disabled, #CCCCCC);border-radius:8px;padding:0 12px;transition:all .2s ease;background-color:#fff;height:36px}.ms-password-field-wrapper .ms-password-input-container.disabled{background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5);cursor:not-allowed}.ms-password-field-wrapper .ms-password-input-container:hover:not(.disabled){border-color:#0084ff}.ms-password-field-wrapper .ms-password-input-container.ms-focus:not(.disabled){border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-password-field-wrapper .ms-password-input-container.ms-has-error:not(.disabled){border-color:#da3e37}.ms-password-field-wrapper .ms-password-input-container.ms-has-error:not(.disabled) input{color:#ef4444}.ms-password-field-wrapper .ms-password-input-container.ms-has-error:not(.disabled) input::placeholder{color:#fca5a5}.ms-password-field-wrapper .ms-password-input-container.ms-has-success:not(.disabled){border-color:#22c55e}.ms-password-field-wrapper .ms-password-input-container.ms-has-success:not(.disabled) input{color:#15803d}.ms-password-field-wrapper .ms-password-input-container .ms-password-input{flex:1;background:transparent;padding:10px 0;font-size:14px;font-family:inherit;border:none;outline:none;box-shadow:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-webkit-outer-spin-button,.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-webkit-inner-spin-button{display:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-webkit-textfield-decoration-container{display:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-ms-reveal{display:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input.ms-form-control{background:none!important}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::placeholder{color:#9ca3af}.ms-password-field-wrapper .ms-password-input-container .ms-password-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:color .2s ease}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn:hover:not(:disabled){color:#1f2937}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn:disabled{cursor:not-allowed;opacity:.5}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn svg{width:20px;height:20px}.ms-password-field-wrapper .ms-password-strength{display:flex;flex-direction:column;gap:6px}.ms-password-field-wrapper .ms-password-strength .ms-strength-bar-container{width:100%;height:4px;background-color:#e5e7eb;border-radius:2px;overflow:hidden}.ms-password-field-wrapper .ms-password-strength .ms-strength-bar-container .ms-strength-bar{height:100%;transition:width .3s ease,background-color .3s ease}.ms-password-field-wrapper .ms-password-strength .ms-strength-text{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.ms-password-field-wrapper .ms-password-requirements{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:12px}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-title{font-size:12px;font-weight:600;color:#374151;margin-bottom:8px;text-transform:uppercase}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7280;transition:color .2s ease}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-met{color:#22c55e;font-weight:500}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-met .ms-requirement-icon{color:#22c55e}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-unmet,.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-unmet .ms-requirement-icon{color:#ef4444}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li .ms-requirement-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li .ms-requirement-icon svg{width:100%;height:100%}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li .ms-requirement-label{flex:1}input[type=password]{background-color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }] });
|
|
1306
1528
|
}
|
|
1307
1529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPasswordField, decorators: [{
|
|
1308
1530
|
type: Component,
|
|
1309
|
-
args: [{ selector: 'app-ms-password-field', imports: [CommonModule, FormsModule, InlineSVGModule], template: "<div class=\"ms-password-field-wrapper\">\n <!-- Password Input -->\n <div class=\"ms-password-input-container\" [class.disabled]=\"disabled\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"isFocused()\">\n <input\n [type]=\"showPassword() ? 'text' : 'password'\"\n class=\"ms-form-control ms-password-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder\"\n [attr.autocomplete]=\"autocomplete\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"onPasswordChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n (input)=\"onPasswordChange($event)\"\n />\n\n <!-- Toggle Password Visibility Button -->\n <button\n type=\"button\"\n class=\"ms-password-toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\"
|
|
1531
|
+
args: [{ selector: 'app-ms-password-field', imports: [CommonModule, FormsModule, InlineSVGModule], template: "<div class=\"ms-password-field-wrapper\">\n <!-- Password Input -->\n <div class=\"ms-password-input-container\" [class.disabled]=\"disabled\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"isFocused()\">\n <input\n [type]=\"showPassword() ? 'text' : 'password'\"\n class=\"ms-form-control ms-password-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder\"\n [attr.autocomplete]=\"autocomplete\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"onPasswordChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (keydown)=\"onKeydown($event)\"\n (keyup)=\"onKeyup($event)\"\n (input)=\"onPasswordChange($event)\"\n />\n\n <!-- Toggle Password Visibility Button -->\n <button\n type=\"button\"\n class=\"ms-password-toggle-btn\"\n [disabled]=\"disabled\"\n (click)=\"togglePasswordVisibility()\"\n [attr.aria-label]=\"showPassword() ? 'Hide password' : 'Show password'\">\n <span class=\"ms-d-flex ms-align-items-center\">\n <img [src]=\" showPassword()\n ? 'https://ds-doc.sentrixbar.com/assets/data-grid/icons/eye16x16.svg'\n : 'https://ds-doc.sentrixbar.com/assets/data-grid/icons/eye-closed.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n\n <!-- Password Strength Indicator -->\n <div *ngIf=\"value\" class=\"ms-password-strength\">\n <div class=\"ms-strength-bar-container\">\n <div class=\"ms-strength-bar\" [style.width.%]=\"passwordScore()\" [style.backgroundColor]=\"getStrengthColor()\"></div>\n </div>\n <span class=\"ms-strength-text\" [style.color]=\"getStrengthColor()\">\n Strength: {{ passwordStrength() | uppercase }}\n </span>\n </div>\n\n <!-- Password Requirements List -->\n <div *ngIf=\"showRequirements && value\" class=\"ms-password-requirements\">\n <!-- <div class=\"ms-requirements-title\">Password Requirements:</div> -->\n <ul class=\"ms-requirements-list\">\n <li *ngFor=\"let requirement of requirements\" [class.ms-requirement-met]=\"requirement.isMet\" [class.ms-requirement-unmet]=\"!requirement.isMet\">\n <span class=\"ms-requirement-icon\" [class.ms-icon-success]=\"requirement.isMet\" [class.ms-icon-error]=\"!requirement.isMet\">\n <svg *ngIf=\"requirement.isMet\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n <svg *ngIf=\"!requirement.isMet\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"></line>\n <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"></line>\n </svg>\n </span>\n <span class=\"ms-requirement-label\">{{ requirement.label }}</span>\n </li>\n </ul>\n </div>\n</div>\n", styles: [".ms-password-field-wrapper{width:100%;display:flex;flex-direction:column;gap:12px}.ms-password-field-wrapper .ms-password-input-container{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--semantics-border-subtle-disabled, #CCCCCC);border-radius:8px;padding:0 12px;transition:all .2s ease;background-color:#fff;height:36px}.ms-password-field-wrapper .ms-password-input-container.disabled{background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5);cursor:not-allowed}.ms-password-field-wrapper .ms-password-input-container:hover:not(.disabled){border-color:#0084ff}.ms-password-field-wrapper .ms-password-input-container.ms-focus:not(.disabled){border-color:#0084ff;box-shadow:0 0 0 1px #b7dcff}.ms-password-field-wrapper .ms-password-input-container.ms-has-error:not(.disabled){border-color:#da3e37}.ms-password-field-wrapper .ms-password-input-container.ms-has-error:not(.disabled) input{color:#ef4444}.ms-password-field-wrapper .ms-password-input-container.ms-has-error:not(.disabled) input::placeholder{color:#fca5a5}.ms-password-field-wrapper .ms-password-input-container.ms-has-success:not(.disabled){border-color:#22c55e}.ms-password-field-wrapper .ms-password-input-container.ms-has-success:not(.disabled) input{color:#15803d}.ms-password-field-wrapper .ms-password-input-container .ms-password-input{flex:1;background:transparent;padding:10px 0;font-size:14px;font-family:inherit;border:none;outline:none;box-shadow:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-webkit-outer-spin-button,.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-webkit-inner-spin-button{display:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-webkit-textfield-decoration-container{display:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::-ms-reveal{display:none}.ms-password-field-wrapper .ms-password-input-container .ms-password-input.ms-form-control{background:none!important}.ms-password-field-wrapper .ms-password-input-container .ms-password-input::placeholder{color:#9ca3af}.ms-password-field-wrapper .ms-password-input-container .ms-password-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:color .2s ease}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn:hover:not(:disabled){color:#1f2937}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn:disabled{cursor:not-allowed;opacity:.5}.ms-password-field-wrapper .ms-password-input-container .ms-password-toggle-btn svg{width:20px;height:20px}.ms-password-field-wrapper .ms-password-strength{display:flex;flex-direction:column;gap:6px}.ms-password-field-wrapper .ms-password-strength .ms-strength-bar-container{width:100%;height:4px;background-color:#e5e7eb;border-radius:2px;overflow:hidden}.ms-password-field-wrapper .ms-password-strength .ms-strength-bar-container .ms-strength-bar{height:100%;transition:width .3s ease,background-color .3s ease}.ms-password-field-wrapper .ms-password-strength .ms-strength-text{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.ms-password-field-wrapper .ms-password-requirements{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;padding:12px}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-title{font-size:12px;font-weight:600;color:#374151;margin-bottom:8px;text-transform:uppercase}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7280;transition:color .2s ease}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-met{color:#22c55e;font-weight:500}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-met .ms-requirement-icon{color:#22c55e}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-unmet,.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li.ms-requirement-unmet .ms-requirement-icon{color:#ef4444}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li .ms-requirement-icon{flex-shrink:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li .ms-requirement-icon svg{width:100%;height:100%}.ms-password-field-wrapper .ms-password-requirements .ms-requirements-list li .ms-requirement-label{flex:1}input[type=password]{background-color:#fff!important}\n"] }]
|
|
1310
1532
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { id: [{
|
|
1311
1533
|
type: Input
|
|
1312
1534
|
}], name: [{
|
|
@@ -1522,11 +1744,11 @@ class MsPhoneInput {
|
|
|
1522
1744
|
this.isChildFocused = true;
|
|
1523
1745
|
}
|
|
1524
1746
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPhoneInput, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1525
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPhoneInput, isStandalone: true, selector: "app-ms-phone-input", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", readonly: "readonly", disabled: "disabled", required: "required", skeleton: "skeleton", invalid: "invalid", pattern: "pattern", value: "value", countryList: "countryList", selectedCountry: "selectedCountry" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", countryChange: "countryChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" />\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <span class=\"chevron-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/chevron-down.svg'\"></span>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <!-- <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" /> -->\n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" />\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\-\\(\\)\\+\\s]*'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{width:100%;padding:.75rem;border:none;border-bottom:1px solid var(--semantics-border-neutral-default, #CCCCCC);font-size:.875rem;outline:none;background:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-flag-small{width:1.5rem;height:1rem;object-fit:cover;border-radius:2px;flex-shrink:0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important;box-shadow:0 0 0 1px #da3e3740}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPhoneInput, isStandalone: true, selector: "app-ms-phone-input", inputs: { id: "id", name: "name", placeholder: "placeholder", state: "state", readonly: "readonly", disabled: "disabled", required: "required", skeleton: "skeleton", invalid: "invalid", pattern: "pattern", value: "value", countryList: "countryList", selectedCountry: "selectedCountry" }, outputs: { change: "change", focus: "focus", blur: "blur", keydown: "keydown", keyup: "keyup", countryChange: "countryChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <!-- <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" /> -->\n <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <span class=\"chevron-icon\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\" alt=\"Icon\" >\n </span>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <div class=\"ms-position-relative phone-input-search\">\n <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" />\n <!-- <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span> -->\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n \n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <!-- <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" /> -->\n <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\-\\(\\)\\+\\s]*'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important;box-shadow:0 0 0 1px #da3e3740}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsFlagIcon, selector: "ms-flag-icon", inputs: ["name", "size"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }] });
|
|
1526
1748
|
}
|
|
1527
1749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPhoneInput, decorators: [{
|
|
1528
1750
|
type: Component,
|
|
1529
|
-
args: [{ selector: 'app-ms-phone-input', imports: [CommonModule, FormsModule, InlineSVGModule], template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" />\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <span class=\"chevron-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/chevron-down.svg'\"></span>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <!-- <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" /> -->\n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" />\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\-\\(\\)\\+\\s]*'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{width:100%;padding:.75rem;border:none;border-bottom:1px solid var(--semantics-border-neutral-default, #CCCCCC);font-size:.875rem;outline:none;background:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-flag-small{width:1.5rem;height:1rem;object-fit:cover;border-radius:2px;flex-shrink:0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important;box-shadow:0 0 0 1px #da3e3740}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}\n"] }]
|
|
1751
|
+
args: [{ selector: 'app-ms-phone-input', imports: [CommonModule, FormsModule, InlineSVGModule, MsFlagIcon, MsIcon], template: "<!-- Phone Number Input with Country Selector -->\n<div class=\"ms-phone-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <div class=\"ms-phone-input-group ms-common-hover ms-d-flex\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.ms-focus]=\"isChildFocused || state === 'ms-focus'\">\n \n <!-- Country Selector Dropdown (Left Side) -->\n <div class=\"phone-country-selector-wrapper\">\n <!-- Selector Button -->\n <button\n type=\"button\"\n class=\"country-selector-button\"\n [class.disabled]=\"disabled\"\n [class.active]=\"isDropdownOpen\"\n (click)=\"toggleDropdown()\"\n [disabled]=\"disabled\">\n \n <!-- Selected Country Flag -->\n <!-- <img\n *ngIf=\"selectedCountry?.countryCode\"\n [src]=\"getCountryFlagPath(selectedCountry)\"\n [alt]=\"selectedCountry?.label\"\n class=\"country-flag\" /> -->\n <ms-flag-icon *ngIf=\"selectedCountry?.countryCode\" class=\"country-flag\" [size]=\"'small'\" [name]=\"selectedCountry?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Code -->\n <span class=\"country-code\">{{ selectedCountry?.dialCode || 'US' }}</span>\n \n <!-- Chevron Icon -->\n <span class=\"chevron-icon\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/chevron-down.svg'\" alt=\"Icon\" >\n </span>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"country-dropdown\" *ngIf=\"isDropdownOpen\">\n <!-- Search Input -->\n <div class=\"ms-position-relative phone-input-search\">\n <input\n type=\"text\"\n class=\"country-search\"\n placeholder=\"Search country...\"\n [value]=\"searchTerm\"\n (input)=\"onSearch($event)\" />\n <!-- <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span> -->\n <ms-icon class=\"ms_icon\" [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n </div>\n \n\n <!-- Countries List -->\n <div class=\"countries-list\">\n <button\n *ngFor=\"let country of filteredCountries\"\n type=\"button\"\n class=\"country-item\"\n [class.active]=\"selectedCountry?.countryCode === country.countryCode\"\n (click)=\"selectCountry(country)\">\n \n <!-- Flag -->\n <!-- <img\n [src]=\"getCountryFlagPath(country)\"\n [alt]=\"country.label\"\n class=\"country-flag-small\" /> -->\n <ms-flag-icon class=\"country-flag-small\" [size]=\"'small'\" [name]=\"country?.label | lowercase\"></ms-flag-icon>\n \n <!-- Country Label and Code -->\n <div class=\"country-info\">\n <span class=\"country-label\">{{ country.label }}</span>\n <!-- <span class=\"country-code-dial\">{{ country.countryCode }} \u2022 {{ country.dialCode }}</span> -->\n </div>\n </button>\n </div>\n\n <!-- No Results -->\n <div *ngIf=\"filteredCountries.length === 0\" class=\"no-results\">\n No countries found\n </div>\n </div>\n </div>\n\n <!-- Phone Number Input -->\n <input\n type=\"tel\"\n class=\"ms-phone-input-field\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [attr.pattern]=\"pattern || '[0-9\\-\\(\\)\\+\\s]*'\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event);onChildFocus()\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\" />\n </div>\n</div>\n", styles: [".ms-phone-input-container{display:flex;flex-direction:column;width:100%}.ms-phone-input-container .ms-phone-input-group{position:relative}.ms-phone-input-container .ms-phone-input-group .ms-phone-country-selector{flex-shrink:0;border-right:1px solid var(--semantics-border-neutral-default, #CCCCCC)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper{display:inline-block;flex-shrink:0;border-right:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button{display:flex;align-items:center;gap:.5rem;padding:8px;background:none;border:none;cursor:pointer;border-radius:4px 0 0 4px;transition:all .2s ease;color:var(--semantic-fg-neutral-strong, #333333);font-size:.875rem;font-weight:400;white-space:nowrap}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.disabled{opacity:.5;cursor:not-allowed}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-flag{width:16px;height:16px;object-fit:cover;border-radius:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .country-code{font-weight:500!important;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon{width:1rem;height:1rem;display:flex;align-items:center;justify-content:center;transition:transform .2s}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button .chevron-icon svg{width:100%;height:100%}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-selector-button.active .chevron-icon{transform:rotate(180deg)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown{position:absolute;left:0;right:0;background:#fff;border-radius:12px;z-index:1000;min-width:280px;max-height:400px;overflow-y:auto;margin-top:.5rem;box-shadow:0 2px 12px #00000014;border:1px solid #E0E0E0}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search{padding:.75rem;margin:12px;font-size:.875rem;outline:none;background:#fff;box-sizing:border-box;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;width:-webkit-fill-available;padding-left:40px;font-weight:400}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search:focus{background-color:#fff}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-search::placeholder{color:#6a6b6d}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .countries-list{display:flex;flex-direction:column}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item{display:flex;align-items:center;gap:.75rem;padding:8px 12px;background:none;border:none;cursor:pointer;text-align:left;transition:all .2s;color:#1b1f22;font-size:14px}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:last-child{border-bottom:none}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item:hover:not(.active){background-color:var(--semantic-bg-neutral-subtle, #FAFAFA)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active{background-color:var(--semantic-bg-brand-subtle, #F0F7FF)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item.active .country-label{color:var(--semantics-border-brand-default, #0084FF);font-weight:600}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info{display:flex;flex-direction:column;gap:.125rem;flex:1;font-size:14px!important}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-label{font-size:.875rem;font-weight:500;color:var(--semantic-fg-neutral-strong, #333333)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .country-item .country-info .country-code-dial{font-size:.75rem;color:var(--semantic-fg-neutral-default, #666666)}.ms-phone-input-container .ms-phone-input-group .phone-country-selector-wrapper .country-dropdown .no-results{padding:1rem;text-align:center;color:var(--semantic-fg-neutral-default, #666666);font-size:.875rem}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-group.ms-common-hover:has(.ms-phone-input-field):focus{border:1px solid #D33C3C}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field{flex:1;border:none;background:none;padding:8px;font-size:.875rem;color:var(--semantic-fg-neutral-strong, #333333);font-family:inherit;outline:none}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field::placeholder{color:var(--semantic-fg-neutral-placeholder, #999999)}.ms-phone-input-container .ms-phone-input-group .ms-phone-input-field:disabled{cursor:not-allowed;opacity:.6}.ms-phone-input-container.ms-has-error .ms-phone-input-group{border-color:var(--semantic-fg-error-default, #D33C3C)!important;box-shadow:0 0 0 1px #da3e3740!important}.ms-phone-input-container.ms-has-success:not(.ms-has-error) .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #00935C)!important;background-color:#36b37e05!important;box-shadow:0 0 0 1px #da3e3740}.ms-phone-input-container.ms-focus .ms-phone-input-group{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-phone-input-container .ms-common-hover.ms-focus .phone-country-selector-wrapper{border-right:1px solid #0084FF}.ms-phone-input-container.ms-has-success .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-success .ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #00935C}.ms-phone-input-container.ms-has-error .ms-common-hover .phone-country-selector-wrapper{border-right:1px solid #D33C3C}.ms-common-hover:hover:not(.disabled) .phone-country-selector-wrapper{border-right:1px solid #0084FF}.phone-input-search .ms_icon{position:absolute;z-index:99999999;top:25px;left:25px;bottom:0;width:16px;height:16px}\n"] }]
|
|
1530
1752
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { id: [{
|
|
1531
1753
|
type: Input
|
|
1532
1754
|
}], name: [{
|
|
@@ -1699,7 +1921,17 @@ class MsInputField {
|
|
|
1699
1921
|
}
|
|
1700
1922
|
handleInput(event) {
|
|
1701
1923
|
const target = event.target;
|
|
1702
|
-
|
|
1924
|
+
let newVal = target.value;
|
|
1925
|
+
// Validate that only numbers are allowed when prefix is present
|
|
1926
|
+
if (this.prefix && newVal) {
|
|
1927
|
+
const numericOnly = newVal.replace(/\D/g, '');
|
|
1928
|
+
if (newVal !== numericOnly) {
|
|
1929
|
+
target.value = numericOnly;
|
|
1930
|
+
newVal = numericOnly;
|
|
1931
|
+
this.hasError.set(true);
|
|
1932
|
+
return;
|
|
1933
|
+
}
|
|
1934
|
+
}
|
|
1703
1935
|
this.value = newVal;
|
|
1704
1936
|
this.onChange(newVal);
|
|
1705
1937
|
if (this.required && !newVal) {
|
|
@@ -1849,7 +2081,7 @@ class MsInputField {
|
|
|
1849
2081
|
useExisting: forwardRef(() => MsInputField),
|
|
1850
2082
|
multi: true,
|
|
1851
2083
|
},
|
|
1852
|
-
], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"multiple && fileNames.length > 1\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n \u00D7\n </button>\n </div>\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" />\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" />\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [".ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control.ms-has-suffix{padding-right:35px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:35px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:10px 8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:10px 8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{display:flex;flex-direction:column;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #00935C);background-color:#36b37e05}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #00935C}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsInlineEdit, selector: "app-ms-inline-edit", inputs: ["value", "placeholder", "fieldType", "disabled", "required", "readonly", "pattern", "minlength", "maxlength", "state"], outputs: ["change", "saved", "cancelled"] }, { kind: "component", type: MsPasswordField, selector: "app-ms-password-field", inputs: ["id", "name", "placeholder", "state", "autocomplete", "disabled", "required", "readonly", "skeleton", "value", "showRequirements", "minLength", "requireUppercase", "requireLowercase", "requireNumbers", "requireSpecialChars"], outputs: ["change", "focus", "blur", "keydown", "keyup", "passwordStrengthChange"] }, { kind: "component", type: MsPhoneInput, selector: "app-ms-phone-input", inputs: ["id", "name", "placeholder", "state", "readonly", "disabled", "required", "skeleton", "invalid", "pattern", "value", "countryList", "selectedCountry"], outputs: ["change", "focus", "blur", "keydown", "keyup", "countryChange"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] });
|
|
2084
|
+
], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display ms-w-100\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"multiple && fileNames.length > 1\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n \u00D7\n </button>\n </div>\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" />\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"prefix ? '\\\\d+' : (pattern || null)\"\n [attr.inputmode]=\"prefix ? 'numeric' : (inputmode || null)\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" />\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [".ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control{padding:8px}.ms-form-control.ms-has-suffix{padding-right:32px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:32px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field{height:36px}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{display:flex;flex-direction:column;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);background-color:#fff}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MsInlineEdit, selector: "app-ms-inline-edit", inputs: ["value", "placeholder", "fieldType", "disabled", "required", "readonly", "pattern", "minlength", "maxlength", "state"], outputs: ["change", "saved", "cancelled"] }, { kind: "component", type: MsPasswordField, selector: "app-ms-password-field", inputs: ["id", "name", "placeholder", "state", "autocomplete", "disabled", "required", "readonly", "skeleton", "value", "showRequirements", "minLength", "requireUppercase", "requireLowercase", "requireNumbers", "requireSpecialChars"], outputs: ["change", "focus", "blur", "keydown", "keyup", "passwordStrengthChange"] }, { kind: "component", type: MsPhoneInput, selector: "app-ms-phone-input", inputs: ["id", "name", "placeholder", "state", "readonly", "disabled", "required", "skeleton", "invalid", "pattern", "value", "countryList", "selectedCountry"], outputs: ["change", "focus", "blur", "keydown", "keyup", "countryChange"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i3.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }] });
|
|
1853
2085
|
}
|
|
1854
2086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsInputField, decorators: [{
|
|
1855
2087
|
type: Component,
|
|
@@ -1859,7 +2091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1859
2091
|
useExisting: forwardRef(() => MsInputField),
|
|
1860
2092
|
multi: true,
|
|
1861
2093
|
},
|
|
1862
|
-
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"multiple && fileNames.length > 1\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n \u00D7\n </button>\n </div>\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" />\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" />\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [".ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control.ms-has-suffix{padding-right:35px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:35px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:10px 8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:10px 8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{display:flex;flex-direction:column;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #00935C);background-color:#36b37e05}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #00935C}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"] }]
|
|
2094
|
+
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(fieldType === 'quantity'){\n <div class=\"ms-quantity-field\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\"\n [class.ms-has-error]=\"invalid\"\n [class.ms-has-warning]=\"state === 'ms-warning'\"\n [class.ms-has-focus]=\"state === 'ms-focus'\">\n \n <input\n type=\"number\"\n class=\"ms-quantity-input ms-form-control ms-100\"\n [(ngModel)]=\"value\"\n [min]=\"minValue\"\n [max]=\"maxValue\"\n [step]=\"step\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"invalid\"\n [attr.data-state]=\"state\"\n (change)=\"onInputChange($event)\"\n placeholder=\"{{placeholder}}\">\n \n <div class=\"ms-quantity-controls\">\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-plus\"\n [disabled]=\"disabled || (getNumValue() >= maxValue)\"\n (click)=\"increment()\"\n [attr.aria-label]=\"'Increase quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/plus.svg'\">+</span>\n </button>\n <span class=\"ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/suffix-divider.svg'\"></span>\n <button\n type=\"button\"\n class=\"ms-quantity-btn ms-quantity-minus\"\n [disabled]=\"disabled || (getNumValue() <= minValue)\"\n (click)=\"decrement()\"\n [attr.aria-label]=\"'Decrease quantity'\">\n <span class=\"ms-quantity-icon ms-d-flex ms-align-items-center\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/minus.svg'\"></span>\n </button>\n </div>\n </div>\n }@else if(type === 'file'){\n <div class=\"ms-file-input-container\" [class.ms-has-error]=\"hasError()\" [class.ms-has-success]=\"isSuccess()\" [class.ms-focus]=\"state === 'ms-focus'\">\n <input\n type=\"file\"\n class=\"ms-file-input-hidden\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileChange($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n #fileInputElement />\n \n <!-- File Input Field with Display and Button -->\n <div class=\"ms-file-input-field ms-d-flex ms-common-hover ms-overflow-hidden\" [class.disabled]=\"disabled\" [class.error]=\"hasError()\" [class.focused]=\"state === 'ms-focus'\">\n <button \n type=\"button\"\n class=\"ms-file-choose-btn\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\">\n Choose File\n </button>\n <input\n type=\"button\"\n class=\"ms-file-input-display ms-w-100\"\n [value]=\"fileNames.length > 0 ? fileNames[0] : (placeholder || 'No file selected')\"\n (click)=\"fileInputElement.click()\"\n [disabled]=\"disabled\"\n [class.has-file]=\"fileNames.length > 0\" />\n </div>\n\n <!-- Selected Files List (for multiple files) -->\n <div *ngIf=\"multiple && fileNames.length > 1\" class=\"ms-file-list\">\n <div *ngFor=\"let fileName of fileNames; let i = index\" class=\"ms-file-item\">\n <span class=\"ms-file-name\">{{ fileName }}</span>\n <button \n type=\"button\" \n class=\"ms-file-remove\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\"\n aria-label=\"Remove file\">\n \u00D7\n </button>\n </div>\n </div>\n </div>\n }@else if(type == 'password'){\n <app-ms-password-field\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [autocomplete]=\"passwordAutocomplete\"\n [showRequirements]=\"showPasswordRequirements\"\n [minLength]=\"passwordMinLength\"\n [requireUppercase]=\"passwordRequireUppercase\"\n [requireLowercase]=\"passwordRequireLowercase\"\n [requireNumbers]=\"passwordRequireNumbers\"\n [requireSpecialChars]=\"passwordRequireSpecialChars\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (passwordStrengthChange)=\"passwordStrengthChange.emit($event)\">\n </app-ms-password-field>\n }@else if(type === 'phone'){\n <app-ms-phone-input\n [placeholder]=\"placeholder\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [state]=\"state\"\n [countryList]=\"countryList\"\n [value]=\"value\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n (countryChange)=\"countryChange.emit($event)\">\n </app-ms-phone-input>\n }\n <!-- @else if(type === 'search'){\n <div class=\"ms-search-input-wrapper\">\n <input\n type=\"search\"\n class=\"ms-form-control ms-search-input\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || 'Search...'\"\n [attr.autocomplete]=\"autocomplete || 'off'\"\n [class.invalid]=\"invalid\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span class=\"ms-search-icon\" [inlineSVG]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/search.svg'\"></span>\n </div>\n } -->\n @else if(fieldType === 'inline-editing'){\n <app-ms-inline-edit\n [placeholder]=\"placeholder\"\n [state]=\"state\"\n [disabled]=\"disabled\"\n [value]=\"value\"\n [required]=\"required\"\n [pattern]=\"pattern\"\n [minlength]=\"minlength\"\n [maxlength]=\"maxlength\"\n (change)=\"valueChange.emit($event)\">\n </app-ms-inline-edit>\n }@else if(prefix || suffix || type === 'search'){\n <div class=\"ms-input-wrapper\" [class.ms-has-prefix-container]=\"prefix\" [class.ms-has-suffix-container]=\"suffix\" [class.ms-has-search-icon]=\"type === 'search'\">\n <span *ngIf=\"prefix\" class=\"ms-input-prefix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + prefix + '.svg'\" alt=\"prefix\" />\n </span>\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [class.ms-has-prefix]=\"prefix\"\n [class.ms-has-suffix]=\"suffix\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"prefix ? '\\\\d+' : (pattern || null)\"\n [attr.inputmode]=\"prefix ? 'numeric' : (inputmode || null)\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n <span *ngIf=\"suffix\" class=\"ms-input-suffix\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/' + suffix + '.svg'\" alt=\"suffix\" />\n </span>\n </div>\n }\n @else{\n <input\n class=\"ms-form-control\"\n [class.ms-error]=\"hasError()\"\n [class.ms-success]=\"isSuccess()\"\n [class]=\"state\"\n [attr.type]=\"type\"\n [attr.id]=\"id || null\"\n [attr.name]=\"name || null\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.autocomplete]=\"autocomplete || null\"\n [attr.min]=\"min ?? null\"\n [attr.max]=\"max ?? null\"\n [attr.step]=\"step ?? null\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [class.invalid]=\"invalid\"\n [attr.pattern]=\"pattern || null\"\n [attr.inputmode]=\"inputmode || null\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [value]=\"value\"\n (input)=\"handleInput($event)\"\n (change)=\"change.emit($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"keydown.emit($event)\"\n (keyup)=\"keyup.emit($event)\"\n />\n }\n</ng-container>\n \n<ng-template #skeleton>\n <div class=\"ms-skeleton-input\"></div>\n</ng-template>", styles: [".ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}.ms-input-field-container label{font-size:14px;font-weight:500;color:#1b1f22}.ms-input-wrapper{display:flex;align-items:center;position:relative;width:100%;border-radius:4px;background-color:#fff;transition:border-color .2s;height:36px}.ms-input-wrapper:focus-within{border-color:#3b82f6}.ms-form-control{padding:8px}.ms-form-control.ms-has-suffix{padding-right:32px}.ms-has-suffix-container .ms-input-suffix{position:absolute;right:0}.ms-input-prefix,.ms-input-suffix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img,.ms-input-suffix img{width:18px;height:18px;display:block}.ms-quantity-field{display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-controls{display:flex;align-items:center;gap:0;padding:0 4px;flex-shrink:0;position:absolute;right:0}.ms-quantity-btn{background:none;border:none;padding:0 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-input-prefix{display:flex;align-items:center;justify-content:center;padding:0 9px;flex-shrink:0;color:#6b7280}.ms-input-prefix img{width:18px;height:18px;display:block}.ms-form-control.ms-has-prefix{padding-left:32px}.ms-has-prefix-container .ms-input-prefix{position:absolute}.ms-quantity-field{position:relative;display:flex;align-items:center;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border-radius:8px}.ms-quantity-field.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-quantity-field.ms-has-warning{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b1a}.ms-quantity-field.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-quantity-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#374151;font-size:16px;font-weight:600;transition:background-color .2s,color .2s;flex-shrink:0;height:32px;width:32px;border-radius:3px}.ms-quantity-btn:disabled{cursor:not-allowed;color:#d1d5db}.ms-quantity-input{flex:1;text-align:left;font-size:14px;font-weight:500;color:#374151;padding:0 12px;height:100%;background-color:transparent}.ms-quantity-input:focus{outline:none}.ms-quantity-input:disabled{background-color:#f3f4f6;color:#9ca3af;cursor:not-allowed}.ms-quantity-input::-webkit-outer-spin-button,.ms-quantity-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ms-quantity-input[type=number]{-moz-appearance:textfield}.ms-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-file-input-container .ms-file-input-hidden{display:none}.ms-file-input-container .ms-file-input-field{height:36px}.ms-file-input-container .ms-file-input-field .ms-file-input-display{background:none;border:none;padding:8px;font-size:14px;color:#ababab;cursor:pointer;text-align:left}.ms-file-input-container .ms-file-input-field .ms-file-input-display.has-file{color:var(--semantic-fg-neutral-strong, #333333);font-weight:500}.ms-file-input-container .ms-file-input-field .ms-file-input-display:disabled{cursor:not-allowed}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn{padding:8px;border:none;border-right:1px solid #E0E0E0;background-color:#fff;color:#0084ff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.ms-file-input-container .ms-file-input-field .ms-file-choose-btn:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container .ms-file-list{display:flex;flex-direction:column;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--semantic-bg-neutral-subtle, #FAFAFA);border:1px solid var(--semantics-border-neutral-default, #CCCCCC);border-radius:4px;gap:.5rem}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-name{font-size:.875rem;color:var(--semantic-fg-neutral-default, #666666);word-break:break-all;flex:1}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove{background:none;border:none;color:#999;font-size:1.25rem;cursor:pointer;padding:0;min-width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;transition:color .2s}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:hover:not(:disabled){color:var(--semantic-fg-error-default, #D33C3C)}.ms-file-input-container .ms-file-list .ms-file-item .ms-file-remove:disabled{opacity:.5;cursor:not-allowed}.ms-file-input-container.ms-has-error .ms-file-input-field{border-color:var(--semantic-fg-error-default, #D33C3C);background-color:#d33c3c05}.ms-file-input-container.ms-has-success .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);background-color:#fff}.ms-file-input-container.ms-focus .ms-file-input-field{border-color:var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0084ff33}.ms-common-hover{border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;transition:all .2s ease;overflow:hidden}.ms-common-hover:hover:not(.disabled){border-color:#0084ff}.ms-common-hover:hover:not(.disabled) .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-common-hover.focused{border-color:#0084ff;box-shadow:0 0 0 2px #0084ff33}.ms-common-hover.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e37}.ms-common-hover.ms-error:hover:not(.disabled){border-color:#da3e37}.ms-common-hover.disabled{opacity:.5;cursor:not-allowed;background:var(--semantics-surface-subtle-primary-disabled, #F5F5F5)}.ms-file-input-container.ms-has-error .ms-common-hover .ms-file-choose-btn{border-right:1px solid #D33C3C}.ms-file-input-container.ms-has-success .ms-common-hover .ms-file-choose-btn{border-right:1px solid #0084FF}.ms-has-search-icon{height:36px}.ms-has-search-icon input{height:100%}\n"] }]
|
|
1863
2095
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
1864
2096
|
type: Input
|
|
1865
2097
|
}], id: [{
|
|
@@ -2244,7 +2476,7 @@ class MsTextArea {
|
|
|
2244
2476
|
useExisting: forwardRef(() => MsTextArea),
|
|
2245
2477
|
multi: true,
|
|
2246
2478
|
},
|
|
2247
|
-
], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;\" >\n <!-- Paragraph Type Dropdown -->\n\n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Bold Button -->\n <ms-button \n (click)=\"toggleBold()\" \n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Italic Button -->\n <ms-button \n (click)=\"toggleItalic()\" \n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Underline Button -->\n <ms-button \n (click)=\"toggleUnderline()\" \n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <ms-dropdown [items]=\"listTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleLinkDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n\n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n\n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleImageDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n\n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Image URL:</label>\n <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>Alt Text:</label>\n <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\" \n [ngStyle]=\"{ \n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '', \n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n</div>\n }\n\n</ng-container>\n\n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.textarea-container{width:fit-content}.textarea-container .formatting-toolbar{top:0;left:0;right:0;background:#f5f5f5;border-bottom:1px solid #E0E0E0;height:45px}.textarea-container .formatting-toolbar .formatting-select{border:none!important;background:transparent!important}.textarea-container .formatting-toolbar .formatting-divider{width:1px;height:24px;background-color:#d1d5db;margin:0 7px}.textarea-container .formatting-toolbar .formatting-btn{cursor:pointer;border:none;height:32px;width:32px;background:transparent;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#374151}.textarea-container .formatting-toolbar .formatting-btn:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .list-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151;fill:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display:hover{background-color:#e5e7eb}.formatting-btn.active{background:#d6d6d6!important;border-radius:6px;color:#000}.ms-textArea.list-bulleted{list-style-type:disc}.ms-textArea.list-numbered{list-style-type:decimal}.ms-textArea.list-lettered{list-style-type:lower-alpha}.insertion-dropdown{position:absolute;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:12px;min-width:250px;box-shadow:0 4px 6px -1px #0000001a;z-index:100;top:45px}.insertion-dropdown.link-dropdown,.insertion-dropdown.image-dropdown{right:0}.insertion-dropdown .dropdown-form-group{margin-bottom:12px}.insertion-dropdown .dropdown-form-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#374151}.insertion-dropdown .dropdown-form-group input{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:3px;font-size:13px;box-sizing:border-box;transition:border-color .2s ease}.insertion-dropdown .dropdown-form-group input:focus{outline:none;border-color:#3b82f6}.insertion-dropdown .dropdown-buttons{display:flex;gap:6px;margin-top:12px}.insertion-dropdown .dropdown-buttons ms-button{flex:1;padding:6px 10px;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.insertion-dropdown .dropdown-buttons ms-button.btn-insert{background-color:#3b82f6;color:#fff}.insertion-dropdown .dropdown-buttons ms-button.btn-insert:hover{background-color:#2563eb}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel{background-color:#e5e7eb;color:#374151}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel:hover{background-color:#d1d5db}.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}ms-dropdown ::ng-deep .ms-dropdown-input-field{width:70px;background:transparent;border:none}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsButton, selector: "ms-button", inputs: ["type", "variant", "size", "radiussize", "block", "disabled", "isBorder", "textSrc", "icon", "iconPosition", "iconOnly", "class", "buttonType"], outputs: ["htmlChange", "click"] }, { kind: "component", type: MsDropdown, selector: "ms-dropdown", inputs: ["text", "isDisabled", "items", "icon", "iconPosition", "closeOnSelect", "closeOnClickOutside", "selectedItem", "allowMultiple", "maxHeight", "loading", "error", "ariaLabel", "searchable", "searchPlaceholder", "noResultsText", "customClass", "dropdownMenuClass", "dropdownMenuWidth", "showFlagImage", "multiSelectDisplay", "inputPlaceholder", "inputLabel", "inputErrorState", "inputWarningState", "inputFocusState", "required"], outputs: ["selectionChange"] }] });
|
|
2479
|
+
], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;\" >\n <!-- Paragraph Type Dropdown -->\n\n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Bold Button -->\n <ms-button \n (click)=\"toggleBold()\" \n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Italic Button -->\n <ms-button \n (click)=\"toggleItalic()\" \n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Underline Button -->\n <ms-button \n (click)=\"toggleUnderline()\" \n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <ms-dropdown [items]=\"listTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleLinkDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n\n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n\n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleImageDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n\n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Image URL:</label>\n <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>Alt Text:</label>\n <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\" \n [ngStyle]=\"{ \n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '', \n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n</div>\n }\n\n</ng-container>\n\n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: [".textarea-container{width:fit-content}.textarea-container .formatting-toolbar{top:0;left:0;right:0;background:#f5f5f5;border-bottom:1px solid #E0E0E0;height:45px}.textarea-container .formatting-toolbar .formatting-select{border:none!important;background:transparent!important}.textarea-container .formatting-toolbar .formatting-divider{width:1px;height:24px;background-color:#d1d5db;margin:0 7px}.textarea-container .formatting-toolbar .formatting-btn{cursor:pointer;border:none;height:32px;width:32px;background:transparent;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#374151}.textarea-container .formatting-toolbar .formatting-btn:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .list-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151;fill:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display:hover{background-color:#e5e7eb}.formatting-btn.active{background:#d6d6d6!important;border-radius:6px;color:#000}.ms-textArea{max-width:100%;width:-webkit-fill-available}.ms-textArea.list-bulleted{list-style-type:disc}.ms-textArea.list-numbered{list-style-type:decimal}.ms-textArea.list-lettered{list-style-type:lower-alpha}.insertion-dropdown{position:absolute;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:12px;min-width:250px;box-shadow:0 4px 6px -1px #0000001a;z-index:100;top:45px}.insertion-dropdown.link-dropdown,.insertion-dropdown.image-dropdown{right:0}.insertion-dropdown .dropdown-form-group{margin-bottom:12px}.insertion-dropdown .dropdown-form-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#374151}.insertion-dropdown .dropdown-form-group input{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:3px;font-size:13px;box-sizing:border-box;transition:border-color .2s ease}.insertion-dropdown .dropdown-form-group input:focus{outline:none;border-color:#3b82f6}.insertion-dropdown .dropdown-buttons{display:flex;gap:6px;margin-top:12px}.insertion-dropdown .dropdown-buttons ms-button{flex:1;padding:6px 10px;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.insertion-dropdown .dropdown-buttons ms-button.btn-insert{background-color:#3b82f6;color:#fff}.insertion-dropdown .dropdown-buttons ms-button.btn-insert:hover{background-color:#2563eb}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel{background-color:#e5e7eb;color:#374151}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel:hover{background-color:#d1d5db}.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}ms-dropdown ::ng-deep .ms-dropdown-input-field{width:70px;background:transparent;border:none}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsButton, selector: "ms-button", inputs: ["type", "variant", "size", "radiussize", "block", "disabled", "isBorder", "textSrc", "icon", "iconPosition", "iconOnly", "class", "buttonType"], outputs: ["htmlChange", "click"] }, { kind: "component", type: MsDropdown, selector: "ms-dropdown", inputs: ["text", "isDisabled", "items", "icon", "iconPosition", "closeOnSelect", "closeOnClickOutside", "selectedItem", "allowMultiple", "maxHeight", "loading", "error", "ariaLabel", "searchable", "searchPlaceholder", "noResultsText", "customClass", "dropdownMenuClass", "dropdownMenuWidth", "showFlagImage", "multiSelectDisplay", "inputPlaceholder", "inputLabel", "inputErrorState", "inputWarningState", "inputFocusState", "required", "size", "variant", "radiussize", "iconOnly", "useInputField"], outputs: ["selectionChange"] }] });
|
|
2248
2480
|
}
|
|
2249
2481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTextArea, decorators: [{
|
|
2250
2482
|
type: Component,
|
|
@@ -2254,7 +2486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2254
2486
|
useExisting: forwardRef(() => MsTextArea),
|
|
2255
2487
|
multi: true,
|
|
2256
2488
|
},
|
|
2257
|
-
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;\" >\n <!-- Paragraph Type Dropdown -->\n\n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Bold Button -->\n <ms-button \n (click)=\"toggleBold()\" \n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Italic Button -->\n <ms-button \n (click)=\"toggleItalic()\" \n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Underline Button -->\n <ms-button \n (click)=\"toggleUnderline()\" \n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <ms-dropdown [items]=\"listTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleLinkDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n\n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n\n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleImageDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n\n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Image URL:</label>\n <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>Alt Text:</label>\n <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\" \n [ngStyle]=\"{ \n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '', \n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n</div>\n }\n\n</ng-container>\n\n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.textarea-container{width:fit-content}.textarea-container .formatting-toolbar{top:0;left:0;right:0;background:#f5f5f5;border-bottom:1px solid #E0E0E0;height:45px}.textarea-container .formatting-toolbar .formatting-select{border:none!important;background:transparent!important}.textarea-container .formatting-toolbar .formatting-divider{width:1px;height:24px;background-color:#d1d5db;margin:0 7px}.textarea-container .formatting-toolbar .formatting-btn{cursor:pointer;border:none;height:32px;width:32px;background:transparent;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#374151}.textarea-container .formatting-toolbar .formatting-btn:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .list-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151;fill:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display:hover{background-color:#e5e7eb}.formatting-btn.active{background:#d6d6d6!important;border-radius:6px;color:#000}.ms-textArea.list-bulleted{list-style-type:disc}.ms-textArea.list-numbered{list-style-type:decimal}.ms-textArea.list-lettered{list-style-type:lower-alpha}.insertion-dropdown{position:absolute;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:12px;min-width:250px;box-shadow:0 4px 6px -1px #0000001a;z-index:100;top:45px}.insertion-dropdown.link-dropdown,.insertion-dropdown.image-dropdown{right:0}.insertion-dropdown .dropdown-form-group{margin-bottom:12px}.insertion-dropdown .dropdown-form-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#374151}.insertion-dropdown .dropdown-form-group input{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:3px;font-size:13px;box-sizing:border-box;transition:border-color .2s ease}.insertion-dropdown .dropdown-form-group input:focus{outline:none;border-color:#3b82f6}.insertion-dropdown .dropdown-buttons{display:flex;gap:6px;margin-top:12px}.insertion-dropdown .dropdown-buttons ms-button{flex:1;padding:6px 10px;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.insertion-dropdown .dropdown-buttons ms-button.btn-insert{background-color:#3b82f6;color:#fff}.insertion-dropdown .dropdown-buttons ms-button.btn-insert:hover{background-color:#2563eb}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel{background-color:#e5e7eb;color:#374151}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel:hover{background-color:#d1d5db}.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}ms-dropdown ::ng-deep .ms-dropdown-input-field{width:70px;background:transparent;border:none}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
2489
|
+
], template: "<ng-container *ngIf=\"!loading; else skeleton\">\n @if(!showFormatOptions){\n <textarea\n class=\"ms-textArea\"\n [class.ms-error]=\"hasError()\"\n [class.invalid]=\"invalid\"\n [class]=\"state\"\n [id]=\"id\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [autocomplete]=\"autocomplete\"\n [readonly]=\"readonly\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n [attr.minlength]=\"minlength ?? null\"\n [attr.maxlength]=\"maxlength ?? null\"\n [rows]=\"ms_rows\"\n [cols]=\"ms_cols\"\n [value]=\"value()\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur($event)\"\n [style.resize]=\"showResizeIcon ? 'vertical' : 'none'\"\n [style.overflowY]=\"scrollable ? 'auto' : 'hidden'\"\n \n ></textarea>\n }@else if(showFormatOptions){\n <div class=\"ms-position-relative textarea-container\" [class]=\"state\">\n <div class=\"formatting-toolbar ms-position-absolute ms-d-flex ms-gap-2 ms-align-items-center ms-border\" style=\"background-color: #f9fafb; border-start-start-radius: 20px;\n border-start-end-radius: 20px;\" >\n <!-- Paragraph Type Dropdown -->\n\n <ms-dropdown [items]=\"paraTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Paragraph'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectPara($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Bold Button -->\n <ms-button \n (click)=\"toggleBold()\" \n [class.active]=\"isBold\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Bold\">\n B\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Italic Button -->\n <ms-button \n (click)=\"toggleItalic()\" \n [class.active]=\"isItalic\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Italic\">\n I\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Underline Button -->\n <ms-button \n (click)=\"toggleUnderline()\" \n [class.active]=\"isUnderline\"\n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Underline\">\n U\n </ms-button>\n\n <div class=\"formatting-divider\"></div>\n\n <!-- Text Alignment Dropdown -->\n <ms-dropdown [items]=\"formattingItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Left align'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectItem($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n\n <ms-dropdown [items]=\"listTypeItems\" [dropdownMenuWidth]=\"'170px'\" [selectedItem]=\"'Bulleted List'\" [closeOnClickOutside]=\"true\" (selectionChange)=\"onSelectlistType($event)\"></ms-dropdown>\n\n <div class=\"formatting-divider\"></div>\n <!-- Link Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleLinkDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Link\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"></path>\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"></path>\n </svg>\n </ms-button>\n\n <!-- Link Dropdown -->\n <div *ngIf=\"showLinkDropdown\" class=\"insertion-dropdown link-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Link Text:</label>\n <input type=\"text\" [(ngModel)]=\"linkText\" placeholder=\"Enter link text\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>URL:</label>\n <input type=\"text\" [(ngModel)]=\"linkUrl\" placeholder=\"https://example.com\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertLink()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeLinkDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n\n <!-- Image Button -->\n <div class=\"ms-position-relative\">\n <ms-button \n (click)=\"toggleImageDropdown()\" \n class=\"formatting-btn ms-d-flex ms-align-items-center ms-justify-content-center\"\n title=\"Insert Image\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle>\n <polyline points=\"21 15 16 10 5 21\"></polyline>\n </svg>\n </ms-button>\n\n <!-- Image Dropdown -->\n <div *ngIf=\"showImageDropdown\" class=\"insertion-dropdown image-dropdown\">\n <div class=\"dropdown-form-group\">\n <label>Image URL:</label>\n <input type=\"text\" [(ngModel)]=\"imageUrl\" placeholder=\"https://example.com/image.jpg\" />\n </div>\n <div class=\"dropdown-form-group\">\n <label>Alt Text:</label>\n <input type=\"text\" [(ngModel)]=\"imageAlt\" placeholder=\"Image description\" />\n </div>\n <div class=\"dropdown-buttons\">\n <ms-button (click)=\"insertImage()\" class=\"btn-insert ms-d-flex ms-align-items-center ms-justify-content-center\">Insert</ms-button>\n <ms-button (click)=\"closeImageDropdown()\" class=\"btn-cancel ms-d-flex ms-align-items-center ms-justify-content-center\">Cancel</ms-button>\n </div>\n </div>\n </div>\n </div>\n <textarea\n #textArea\n placeholder=\"Enter name\"\n [(ngModel)]=\"textValue\"\n [attr.rows]=\"ms_rows\"\n [attr.cols]=\"ms_cols\"\n [attr.maxlength]=\"maxlength\"\n [attr.readonly]=\"readonly ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [style.resize]=\"autoResize ? 'both' : 'none'\"\n [style.overflow]=\"scrollable ? 'auto' : 'hidden'\"\n [style.textAlign]=\"textAlignment\"\n [style.fontSize]=\"fontSize\"\n [style.fontWeight]=\"isBold ? 'bold' : fontWeight\"\n [style.fontStyle]=\"isItalic ? 'italic' : 'normal'\"\n [style.textDecoration]=\"isUnderline ? 'underline' : 'none'\"\n [style.paddingLeft]=\"listType !== 'none' ? '32px' : '12px'\"\n [ngClass]=\"'list-' + listType\" (keydown.enter)=\"handleEnter($event)\"\n class=\"ms-textArea\" \n [ngStyle]=\"{ \n 'max-width': maxWidth ? maxWidth + 'px' : 'auto',\n 'max-height': maxHeight ? maxHeight + 'px' : 'auto',\n 'padding-top': showFormatOptions ? '55px' : '', \n 'border-radius': '20px', 'overflowY': 'auto'\n }\"></textarea>\n</div>\n }\n\n</ng-container>\n\n<ng-template #skeleton>\n <div class=\"ms-skeleton-text\"></div>\n</ng-template>", styles: [".textarea-container{width:fit-content}.textarea-container .formatting-toolbar{top:0;left:0;right:0;background:#f5f5f5;border-bottom:1px solid #E0E0E0;height:45px}.textarea-container .formatting-toolbar .formatting-select{border:none!important;background:transparent!important}.textarea-container .formatting-toolbar .formatting-divider{width:1px;height:24px;background-color:#d1d5db;margin:0 7px}.textarea-container .formatting-toolbar .formatting-btn{cursor:pointer;border:none;height:32px;width:32px;background:transparent;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#374151}.textarea-container .formatting-toolbar .formatting-btn:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151}.textarea-container .formatting-toolbar .alignment-dropdown-wrapper .alignment-icon-display:hover{background-color:#e5e7eb}.textarea-container .formatting-toolbar .list-dropdown-wrapper{position:relative;display:inline-flex;align-items:center}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown{position:absolute;opacity:0;width:32px;height:32px;cursor:pointer;z-index:10}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option{padding:8px;background:#fff;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-dropdown option:checked{background:#d6d6d6;color:#000}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:4px;background:#fff;cursor:pointer;pointer-events:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display svg{width:16px;height:16px;stroke:#374151;color:#374151;fill:none}.textarea-container .formatting-toolbar .list-dropdown-wrapper .list-icon-display:hover{background-color:#e5e7eb}.formatting-btn.active{background:#d6d6d6!important;border-radius:6px;color:#000}.ms-textArea{max-width:100%;width:-webkit-fill-available}.ms-textArea.list-bulleted{list-style-type:disc}.ms-textArea.list-numbered{list-style-type:decimal}.ms-textArea.list-lettered{list-style-type:lower-alpha}.insertion-dropdown{position:absolute;background:#fff;border:1px solid #d1d5db;border-radius:4px;padding:12px;min-width:250px;box-shadow:0 4px 6px -1px #0000001a;z-index:100;top:45px}.insertion-dropdown.link-dropdown,.insertion-dropdown.image-dropdown{right:0}.insertion-dropdown .dropdown-form-group{margin-bottom:12px}.insertion-dropdown .dropdown-form-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:500;color:#374151}.insertion-dropdown .dropdown-form-group input{width:100%;padding:6px 8px;border:1px solid #d1d5db;border-radius:3px;font-size:13px;box-sizing:border-box;transition:border-color .2s ease}.insertion-dropdown .dropdown-form-group input:focus{outline:none;border-color:#3b82f6}.insertion-dropdown .dropdown-buttons{display:flex;gap:6px;margin-top:12px}.insertion-dropdown .dropdown-buttons ms-button{flex:1;padding:6px 10px;border:none;border-radius:3px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.insertion-dropdown .dropdown-buttons ms-button.btn-insert{background-color:#3b82f6;color:#fff}.insertion-dropdown .dropdown-buttons ms-button.btn-insert:hover{background-color:#2563eb}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel{background-color:#e5e7eb;color:#374151}.insertion-dropdown .dropdown-buttons ms-button.btn-cancel:hover{background-color:#d1d5db}.ms-active,.ms-hover{border:1px solid var(--semantics-border-brand-default, #0084FF)}.ms-focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33}.ms-success{border:1px solid var(--semantics-border-brand-default, #00935C);box-shadow:0 0 0 2px #36b37e33}.ms-form-control.ms-success{border-color:#00935c;box-shadow:0 0 0 2px #36b37e33}.ms-warning{box-shadow:0 0 0 1px #ffe1bf;border:1px solid var(--semantics-border-brand-default, #F58600)}.ms-error{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-brand-default, #dc2626)}ms-dropdown ::ng-deep .ms-dropdown-input-field{width:70px;background:transparent;border:none}.ms-skeleton-input{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
2258
2490
|
}], propDecorators: { id: [{
|
|
2259
2491
|
type: Input
|
|
2260
2492
|
}], name: [{
|
|
@@ -2537,11 +2769,11 @@ class MsAvatar {
|
|
|
2537
2769
|
this.expanded = !this.expanded;
|
|
2538
2770
|
}
|
|
2539
2771
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsAvatar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2540
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsAvatar, isStandalone: true, selector: "ms-avatar", inputs: { color: "color", variant: "variant", size: "size", text: "text", icon: "icon", img: "img", shape: "shape", disabled: "disabled", skeleton: "skeleton", isStatusShow: "isStatusShow", subType: "subType", label: "label", label2: "label2", status: "status", max: "max", avatars: "avatars", block: "block", class: "class" }, outputs: { htmlChange: "htmlChange", click: "click", avatarClick: "avatarClick" }, host: { listeners: { "document:click": "clickOutside($event)" } }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(skeleton){\n<div class=\"ms-avatar-skeleton\" [class]=\"shape\"></div>\n}@else{\n @if(!isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [ngClass]=\"{'no-background': variant === 'single_image'}\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\" \n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials' && text\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n } @else if(!isSubType && (variant === 'multi_initials' || variant === 'multi_image')) {\n <!-- AVATAR GROUP -->\n <div class=\"ms-avatar-group\">\n <ng-container *ngFor=\"let avatar of avatars | slice:0:max; let i = index;\">\n <div class=\"ms-avatar ms-ms\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" [ngClass]=\"{'no-background': variant === 'multi_image'}\"\n (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" [class]=\"'ms-avatar-img-'+ shape\"\n [title]=\"avatar?.text\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'multi_initials' && avatar.initials\" [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </ng-container>\n <div *ngIf=\"avatars.length > max\" (click)=\"toggleExtra($event)\" class=\"ms-avatar extra ms-ms\"\n [class]=\"classes + ' ' + userClass\">\n +{{ avatars.length - max }}\n </div>\n </div>\n <div *ngIf=\"extraOpen\" class=\"ms-avatar-dropdown\">\n <div class=\"ms-avatar-list ms-mt-2\" [class.scroll]=\"expanded\">\n <ng-container *ngFor=\"let avatar of expanded ? extraAvatars : (extraAvatars | slice:0:3)\">\n <div class=\"ms-ms ms-dropdown-data\">\n @if(variant === 'multi_image' && avatar.src){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" class=\"ms-me-2\"\n [class]=\"'ms-avatar-img-'+ shape\" style=\"width: 24px;height: 24px;\" [title]=\"avatar.text\" />\n <span *ngIf=\"variant === 'multi_image' && avatar.text\" [title]=\"avatar.text\">{{ avatar.text }}</span>\n </div>\n }@else if(variant === 'multi_initials' && avatar.initials){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <div class=\"ms-avatar-group\">\n <div class=\"ms-me-2\" [class]=\"classes + ' ' + userClass\">\n <span [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </div>\n <span *ngIf=\"variant === 'multi_initials'\" [title]=\"avatar.initials\">{{ avatar.initials }}</span>\n </div>\n }\n </div>\n </ng-container>\n </div>\n \n <!-- ACTION -->\n <div class=\"ms-avatar-action\" (click)=\"toggleExpand()\">\n {{ expanded ? 'Show less' : 'Show more' }}\n </div>\n \n </div>\n } @else if(isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-d-flex ms-align-items-center\">\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\"\n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials'\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n @if(subType != 'combine'){\n <div class=\"ms-d-flex ms-ms-2\">\n <div *ngIf=\"label\" [title]=\"label\">\n @if(subType === 'primary'){\n <span class=\"ms-label-primary\">{{ label }}</span>\n } @else if(subType === 'secondory'){\n <span class=\"ms-label-secondory\">{{ label }}</span>\n }\n </div>\n </div>\n }@else{\n <div *ngIf=\"label && label2 && subType === 'combine'\" [title]=\"label\" class=\"ms-d-flex ms-ms-2 ms-flex-column\">\n <span class=\"ms-label-primary\">{{ label }}</span>\n <span class=\"ms-label-secondory\">{{ label2 }}</span>\n </div>\n }\n\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n \n </div>\n }\n}", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.ms-avatar-skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;border-radius:50%;font-size:16px!important;width:40px;height:40px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
|
|
2772
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsAvatar, isStandalone: true, selector: "ms-avatar", inputs: { color: "color", variant: "variant", size: "size", text: "text", icon: "icon", img: "img", shape: "shape", disabled: "disabled", skeleton: "skeleton", isStatusShow: "isStatusShow", subType: "subType", label: "label", label2: "label2", status: "status", max: "max", avatars: "avatars", block: "block", class: "class" }, outputs: { htmlChange: "htmlChange", click: "click", avatarClick: "avatarClick" }, host: { listeners: { "document:click": "clickOutside($event)" } }, queries: [{ propertyName: "projectedContent", first: true, predicate: ["projectedContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if(skeleton){\n<div class=\"ms-avatar-skeleton\" [class]=\"shape\"></div>\n}@else{\n @if(!isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [ngClass]=\"{'no-background': variant === 'single_image'}\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\" \n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials' && text\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n } @else if(!isSubType && (variant === 'multi_initials' || variant === 'multi_image')) {\n <!-- AVATAR GROUP -->\n <div class=\"ms-avatar-group\">\n <ng-container *ngFor=\"let avatar of avatars | slice:0:max; let i = index;\">\n <div class=\"ms-avatar ms-ms\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" [ngClass]=\"{'no-background': variant === 'multi_image'}\"\n (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" [class]=\"'ms-avatar-img-'+ shape\"\n [title]=\"avatar?.text\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'multi_initials' && avatar.initials\" [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </ng-container>\n <div *ngIf=\"avatars.length > max\" (click)=\"toggleExtra($event)\" class=\"ms-avatar extra ms-ms\"\n [class]=\"classes + ' ' + userClass\">\n +{{ avatars.length - max }}\n </div>\n </div>\n <div *ngIf=\"extraOpen\" class=\"ms-avatar-dropdown\">\n <div class=\"ms-avatar-list ms-mt-2\" [class.scroll]=\"expanded\">\n <ng-container *ngFor=\"let avatar of expanded ? extraAvatars : (extraAvatars | slice:0:3)\">\n <div class=\"ms-ms ms-dropdown-data\">\n @if(variant === 'multi_image' && avatar.src){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" class=\"ms-me-2\"\n [class]=\"'ms-avatar-img-'+ shape\" style=\"width: 24px;height: 24px;\" [title]=\"avatar.text\" />\n <span *ngIf=\"variant === 'multi_image' && avatar.text\" [title]=\"avatar.text\">{{ avatar.text }}</span>\n </div>\n }@else if(variant === 'multi_initials' && avatar.initials){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <div class=\"ms-avatar-group\">\n <div class=\"ms-me-2\" [class]=\"classes + ' ' + userClass\">\n <span [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </div>\n <span *ngIf=\"variant === 'multi_initials'\" [title]=\"avatar.initials\">{{ avatar.initials }}</span>\n </div>\n }\n </div>\n </ng-container>\n </div>\n \n <!-- ACTION -->\n <div class=\"ms-avatar-action\" (click)=\"toggleExpand()\">\n {{ expanded ? 'Show less' : 'Show more' }}\n </div>\n \n </div>\n } @else if(isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-d-flex ms-align-items-center\">\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\"\n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials'\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n @if(subType != 'combine'){\n <div class=\"ms-d-flex ms-ms-2\">\n <div *ngIf=\"label\" [title]=\"label\">\n @if(subType === 'primary'){\n <span class=\"ms-label-primary\">{{ label }}</span>\n } @else if(subType === 'secondory'){\n <span class=\"ms-label-secondory\">{{ label }}</span>\n }\n </div>\n </div>\n }@else{\n <div *ngIf=\"label && label2 && subType === 'combine'\" [title]=\"label\" class=\"ms-d-flex ms-ms-2 ms-flex-column\">\n <span class=\"ms-label-primary\">{{ label }}</span>\n <span class=\"ms-label-secondory\">{{ label2 }}</span>\n </div>\n }\n\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n \n </div>\n }\n}", styles: [".ms-avatar-skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;border-radius:50%;font-size:16px!important;width:40px;height:40px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }] });
|
|
2541
2773
|
}
|
|
2542
2774
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsAvatar, decorators: [{
|
|
2543
2775
|
type: Component,
|
|
2544
|
-
args: [{ selector: 'ms-avatar', imports: [CommonModule], template: "@if(skeleton){\n<div class=\"ms-avatar-skeleton\" [class]=\"shape\"></div>\n}@else{\n @if(!isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [ngClass]=\"{'no-background': variant === 'single_image'}\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\" \n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials' && text\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n } @else if(!isSubType && (variant === 'multi_initials' || variant === 'multi_image')) {\n <!-- AVATAR GROUP -->\n <div class=\"ms-avatar-group\">\n <ng-container *ngFor=\"let avatar of avatars | slice:0:max; let i = index;\">\n <div class=\"ms-avatar ms-ms\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" [ngClass]=\"{'no-background': variant === 'multi_image'}\"\n (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" [class]=\"'ms-avatar-img-'+ shape\"\n [title]=\"avatar?.text\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'multi_initials' && avatar.initials\" [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </ng-container>\n <div *ngIf=\"avatars.length > max\" (click)=\"toggleExtra($event)\" class=\"ms-avatar extra ms-ms\"\n [class]=\"classes + ' ' + userClass\">\n +{{ avatars.length - max }}\n </div>\n </div>\n <div *ngIf=\"extraOpen\" class=\"ms-avatar-dropdown\">\n <div class=\"ms-avatar-list ms-mt-2\" [class.scroll]=\"expanded\">\n <ng-container *ngFor=\"let avatar of expanded ? extraAvatars : (extraAvatars | slice:0:3)\">\n <div class=\"ms-ms ms-dropdown-data\">\n @if(variant === 'multi_image' && avatar.src){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" class=\"ms-me-2\"\n [class]=\"'ms-avatar-img-'+ shape\" style=\"width: 24px;height: 24px;\" [title]=\"avatar.text\" />\n <span *ngIf=\"variant === 'multi_image' && avatar.text\" [title]=\"avatar.text\">{{ avatar.text }}</span>\n </div>\n }@else if(variant === 'multi_initials' && avatar.initials){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <div class=\"ms-avatar-group\">\n <div class=\"ms-me-2\" [class]=\"classes + ' ' + userClass\">\n <span [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </div>\n <span *ngIf=\"variant === 'multi_initials'\" [title]=\"avatar.initials\">{{ avatar.initials }}</span>\n </div>\n }\n </div>\n </ng-container>\n </div>\n \n <!-- ACTION -->\n <div class=\"ms-avatar-action\" (click)=\"toggleExpand()\">\n {{ expanded ? 'Show less' : 'Show more' }}\n </div>\n \n </div>\n } @else if(isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-d-flex ms-align-items-center\">\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\"\n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials'\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n @if(subType != 'combine'){\n <div class=\"ms-d-flex ms-ms-2\">\n <div *ngIf=\"label\" [title]=\"label\">\n @if(subType === 'primary'){\n <span class=\"ms-label-primary\">{{ label }}</span>\n } @else if(subType === 'secondory'){\n <span class=\"ms-label-secondory\">{{ label }}</span>\n }\n </div>\n </div>\n }@else{\n <div *ngIf=\"label && label2 && subType === 'combine'\" [title]=\"label\" class=\"ms-d-flex ms-ms-2 ms-flex-column\">\n <span class=\"ms-label-primary\">{{ label }}</span>\n <span class=\"ms-label-secondory\">{{ label2 }}</span>\n </div>\n }\n\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n \n </div>\n }\n}", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.ms-avatar-skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;border-radius:50%;font-size:16px!important;width:40px;height:40px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
2776
|
+
args: [{ selector: 'ms-avatar', imports: [CommonModule], template: "@if(skeleton){\n<div class=\"ms-avatar-skeleton\" [class]=\"shape\"></div>\n}@else{\n @if(!isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [ngClass]=\"{'no-background': variant === 'single_image'}\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\" \n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials' && text\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n } @else if(!isSubType && (variant === 'multi_initials' || variant === 'multi_image')) {\n <!-- AVATAR GROUP -->\n <div class=\"ms-avatar-group\">\n <ng-container *ngFor=\"let avatar of avatars | slice:0:max; let i = index;\">\n <div class=\"ms-avatar ms-ms\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" [ngClass]=\"{'no-background': variant === 'multi_image'}\"\n (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" [class]=\"'ms-avatar-img-'+ shape\"\n [title]=\"avatar?.text\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'multi_initials' && avatar.initials\" [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </ng-container>\n <div *ngIf=\"avatars.length > max\" (click)=\"toggleExtra($event)\" class=\"ms-avatar extra ms-ms\"\n [class]=\"classes + ' ' + userClass\">\n +{{ avatars.length - max }}\n </div>\n </div>\n <div *ngIf=\"extraOpen\" class=\"ms-avatar-dropdown\">\n <div class=\"ms-avatar-list ms-mt-2\" [class.scroll]=\"expanded\">\n <ng-container *ngFor=\"let avatar of expanded ? extraAvatars : (extraAvatars | slice:0:3)\">\n <div class=\"ms-ms ms-dropdown-data\">\n @if(variant === 'multi_image' && avatar.src){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <img *ngIf=\"variant === 'multi_image' && avatar.src\" [src]=\"avatar.src\" class=\"ms-me-2\"\n [class]=\"'ms-avatar-img-'+ shape\" style=\"width: 24px;height: 24px;\" [title]=\"avatar.text\" />\n <span *ngIf=\"variant === 'multi_image' && avatar.text\" [title]=\"avatar.text\">{{ avatar.text }}</span>\n </div>\n }@else if(variant === 'multi_initials' && avatar.initials){\n <div class=\"ms-d-flex ms-align-items-center ms-mx-2\">\n <div class=\"ms-avatar-group\">\n <div class=\"ms-me-2\" [class]=\"classes + ' ' + userClass\">\n <span [class]=\"sizeClass\" [title]=\"avatar?.initials\">\n {{ getInitialName(avatar.initials) }}\n </span>\n </div>\n </div>\n <span *ngIf=\"variant === 'multi_initials'\" [title]=\"avatar.initials\">{{ avatar.initials }}</span>\n </div>\n }\n </div>\n </ng-container>\n </div>\n \n <!-- ACTION -->\n <div class=\"ms-avatar-action\" (click)=\"toggleExpand()\">\n {{ expanded ? 'Show less' : 'Show more' }}\n </div>\n \n </div>\n } @else if(isSubType && (variant === 'single_image' || variant === 'single_initials') ){\n <div class=\"ms-d-flex ms-align-items-center\">\n <div class=\"ms-avatar\" [class]=\"classes + ' ' + userClass\" [class.disabled]=\"disabled\" (click)=\"onClick($event)\">\n <!-- IMAGE -->\n <img *ngIf=\"variant === 'single_image' && img\" [src]=\"img\" [title]=\"text\" [class]=\"sizeClass\"\n [class]=\"'ms-avatar-img-'+ shape\" />\n <!-- INITIALS -->\n <span *ngIf=\"variant === 'single_initials'\" [class]=\"sizeClass\" [title]=\"text\">\n {{ initials }}\n </span>\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n </div>\n @if(subType != 'combine'){\n <div class=\"ms-d-flex ms-ms-2\">\n <div *ngIf=\"label\" [title]=\"label\">\n @if(subType === 'primary'){\n <span class=\"ms-label-primary\">{{ label }}</span>\n } @else if(subType === 'secondory'){\n <span class=\"ms-label-secondory\">{{ label }}</span>\n }\n </div>\n </div>\n }@else{\n <div *ngIf=\"label && label2 && subType === 'combine'\" [title]=\"label\" class=\"ms-d-flex ms-ms-2 ms-flex-column\">\n <span class=\"ms-label-primary\">{{ label }}</span>\n <span class=\"ms-label-secondory\">{{ label2 }}</span>\n </div>\n }\n\n <span *ngIf=\"isStatusShow\" class=\"ms-avatar-status\" [class.online]=\"status === 'online'\"\n [class.offline]=\"status === 'offline'\" [class.busy]=\"status === 'busy'\"></span>\n \n </div>\n }\n}", styles: [".ms-avatar-skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite;border-radius:50%;font-size:16px!important;width:40px;height:40px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
|
|
2545
2777
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
|
|
2546
2778
|
type: Input
|
|
2547
2779
|
}], variant: [{
|
|
@@ -2592,109 +2824,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
2592
2824
|
args: ['document:click', ['$event']]
|
|
2593
2825
|
}] } });
|
|
2594
2826
|
|
|
2595
|
-
const ICONS = {
|
|
2596
|
-
"info-circle": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2597
|
-
"download": "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M21 21H3M18 11L12 17M12 17L6 11M12 17V3\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2598
|
-
"setting": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M18.7273 14.7273C18.6063 15.0015 18.5702 15.3056 18.6236 15.6005C18.6771 15.8954 18.8177 16.1676 19.0273 16.3818L19.0818 16.4364C19.2509 16.6052 19.385 16.8057 19.4765 17.0265C19.568 17.2472 19.6151 17.4838 19.6151 17.7227C19.6151 17.9617 19.568 18.1983 19.4765 18.419C19.385 18.6397 19.2509 18.8402 19.0818 19.0091C18.913 19.1781 18.7124 19.3122 18.4917 19.4037C18.271 19.4952 18.0344 19.5423 17.7955 19.5423C17.5565 19.5423 17.3199 19.4952 17.0992 19.4037C16.8785 19.3122 16.678 19.1781 16.5091 19.0091L16.4545 18.9545C16.2403 18.745 15.9682 18.6044 15.6733 18.5509C15.3784 18.4974 15.0742 18.5335 14.8 18.6545C14.5311 18.7698 14.3018 18.9611 14.1403 19.205C13.9788 19.4489 13.8921 19.7347 13.8909 20.0273V20.1818C13.8909 20.664 13.6994 21.1265 13.3584 21.4675C13.0174 21.8084 12.5549 22 12.0727 22C11.5905 22 11.1281 21.8084 10.7871 21.4675C10.4461 21.1265 10.2545 20.664 10.2545 20.1818V20.1C10.2475 19.7991 10.1501 19.5073 9.97501 19.2625C9.79991 19.0176 9.55521 18.8312 9.27273 18.7273C8.99853 18.6063 8.69437 18.5702 8.39947 18.6236C8.10456 18.6771 7.83244 18.8177 7.61818 19.0273L7.56364 19.0818C7.39478 19.2509 7.19425 19.385 6.97353 19.4765C6.7528 19.568 6.51621 19.6151 6.27727 19.6151C6.03834 19.6151 5.80174 19.568 5.58102 19.4765C5.36029 19.385 5.15977 19.2509 4.99091 19.0818C4.82186 18.913 4.68775 18.7124 4.59626 18.4917C4.50476 18.271 4.45766 18.0344 4.45766 17.7955C4.45766 17.5565 4.50476 17.3199 4.59626 17.0992C4.68775 16.8785 4.82186 16.678 4.99091 16.5091L5.04545 16.4545C5.25503 16.2403 5.39562 15.9682 5.4491 15.6733C5.50257 15.3784 5.46647 15.0742 5.34545 14.8C5.23022 14.5311 5.03887 14.3018 4.79497 14.1403C4.55107 13.9788 4.26526 13.8921 3.97273 13.8909H3.81818C3.33597 13.8909 2.87351 13.6994 2.53253 13.3584C2.19156 13.0174 2 12.5549 2 12.0727C2 11.5905 2.19156 11.1281 2.53253 10.7871C2.87351 10.4461 3.33597 10.2545 3.81818 10.2545H3.9C4.2009 10.2475 4.49273 10.1501 4.73754 9.97501C4.98236 9.79991 5.16883 9.55521 5.27273 9.27273C5.39374 8.99853 5.42984 8.69437 5.37637 8.39947C5.3229 8.10456 5.18231 7.83244 4.97273 7.61818L4.91818 7.56364C4.74913 7.39478 4.61503 7.19425 4.52353 6.97353C4.43203 6.7528 4.38493 6.51621 4.38493 6.27727C4.38493 6.03834 4.43203 5.80174 4.52353 5.58102C4.61503 5.36029 4.74913 5.15977 4.91818 4.99091C5.08704 4.82186 5.28757 4.68775 5.50829 4.59626C5.72901 4.50476 5.96561 4.45766 6.20455 4.45766C6.44348 4.45766 6.68008 4.50476 6.9008 4.59626C7.12152 4.68775 7.32205 4.82186 7.49091 4.99091L7.54545 5.04545C7.75971 5.25503 8.03183 5.39562 8.32674 5.4491C8.62164 5.50257 8.9258 5.46647 9.2 5.34545H9.27273C9.54161 5.23022 9.77093 5.03887 9.93245 4.79497C10.094 4.55107 10.1807 4.26526 10.1818 3.97273V3.81818C10.1818 3.33597 10.3734 2.87351 10.7144 2.53253C11.0553 2.19156 11.5178 2 12 2C12.4822 2 12.9447 2.19156 13.2856 2.53253C13.6266 2.87351 13.8182 3.33597 13.8182 3.81818V3.9C13.8193 4.19253 13.906 4.47834 14.0676 4.72224C14.2291 4.96614 14.4584 5.15749 14.7273 5.27273C15.0015 5.39374 15.3056 5.42984 15.6005 5.37637C15.8954 5.3229 16.1676 5.18231 16.3818 4.97273L16.4364 4.91818C16.6052 4.74913 16.8057 4.61503 17.0265 4.52353C17.2472 4.43203 17.4838 4.38493 17.7227 4.38493C17.9617 4.38493 18.1983 4.43203 18.419 4.52353C18.6397 4.61503 18.8402 4.74913 19.0091 4.91818C19.1781 5.08704 19.3122 5.28757 19.4037 5.50829C19.4952 5.72901 19.5423 5.96561 19.5423 6.20455C19.5423 6.44348 19.4952 6.68008 19.4037 6.9008C19.3122 7.12152 19.1781 7.32205 19.0091 7.49091L18.9545 7.54545C18.745 7.75971 18.6044 8.03183 18.5509 8.32674C18.4974 8.62164 18.5335 8.9258 18.6545 9.2V9.27273C18.7698 9.54161 18.9611 9.77093 19.205 9.93245C19.4489 10.094 19.7347 10.1807 20.0273 10.1818H20.1818C20.664 10.1818 21.1265 10.3734 21.4675 10.7144C21.8084 11.0553 22 11.5178 22 12C22 12.4822 21.8084 12.9447 21.4675 13.2856C21.1265 13.6266 20.664 13.8182 20.1818 13.8182H20.1C19.8075 13.8193 19.5217 13.906 19.2778 14.0676C19.0339 14.2291 18.8425 14.4584 18.7273 14.7273Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2599
|
-
"add": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2600
|
-
"trash": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 3H15M3 6H21M19 6L18.2987 16.5193C18.1935 18.0975 18.1409 18.8867 17.8 19.485C17.4999 20.0118 17.0472 20.4353 16.5017 20.6997C15.882 21 15.0911 21 13.5093 21H10.4907C8.90891 21 8.11803 21 7.49834 20.6997C6.95276 20.4353 6.50009 20.0118 6.19998 19.485C5.85911 18.8867 5.8065 18.0975 5.70129 16.5193L5 6M10 10.5V15.5M14 10.5V15.5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2601
|
-
"chevron-down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2602
|
-
"chevron-right": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2603
|
-
"chevron-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2604
|
-
"bell": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 22\" fill=\"none\"><path d=\"M7.09321 20C7.79834 20.6224 8.72459 21 9.73903 21C10.7535 21 11.6797 20.6224 12.3849 20M15.739 7C15.739 5.4087 15.1069 3.88258 13.9817 2.75736C12.8565 1.63214 11.3303 1 9.73903 1C8.14773 1 6.62161 1.63214 5.49639 2.75736C4.37117 3.88258 3.73903 5.4087 3.73903 7C3.73903 10.0902 2.9595 12.206 2.0887 13.6054C1.35416 14.7859 0.986891 15.3761 1.00036 15.5408C1.01527 15.7231 1.05389 15.7926 1.20081 15.9016C1.33349 16 1.93162 16 3.12789 16H16.3502C17.5464 16 18.1446 16 18.2773 15.9016C18.4242 15.7926 18.4628 15.7231 18.4777 15.5408C18.4912 15.3761 18.1239 14.7859 17.3894 13.6054C16.5186 12.206 15.739 10.0902 15.739 7Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2605
|
-
"close": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2606
|
-
"search": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M19 19L14.65 14.65M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2607
|
-
"calender": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2608
|
-
"refresh": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M2 10C2 10 4.00498 7.26822 5.63384 5.63824C7.26269 4.00827 9.5136 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.89691 21 4.43511 18.2543 3.35177 14.5M2 10V4M2 10H8\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2609
|
-
"information": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M11 15V11M11 7H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2610
|
-
"edit": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M16.5 8.82843L12.5 4.82843M1 20.3284L4.38437 19.9524C4.79786 19.9064 5.0046 19.8835 5.19785 19.8209C5.36929 19.7654 5.53245 19.687 5.68289 19.5878C5.85245 19.476 5.99955 19.3289 6.29373 19.0347L19.5 5.82843C20.6046 4.72386 20.6046 2.933 19.5 1.82843C18.3955 0.723859 16.6046 0.723857 15.5 1.82843L2.29373 15.0347C1.99955 15.3289 1.85246 15.476 1.74064 15.6455C1.64143 15.796 1.56301 15.9591 1.50751 16.1306C1.44496 16.3238 1.42198 16.5306 1.37604 16.9441L1 20.3284Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2611
|
-
"minus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2612
|
-
"currency-dollar": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M1 15C1 17.2091 2.79086 19 5 19H9C11.2091 19 13 17.2091 13 15C13 12.7909 11.2091 11 9 11H5C2.79086 11 1 9.20914 1 7C1 4.79086 2.79086 3 5 3H9C11.2091 3 13 4.79086 13 7M7 1V21\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2613
|
-
"menu": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 14\" fill=\"none\"><path d=\"M1 7H19M1 1H19M1 13H13\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2614
|
-
"switch-vertical": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 18\" fill=\"none\"><path d=\"M5 1V17M5 17L1 13M5 17L9 13M15 17V1M15 1L11 5M15 1L19 5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2615
|
-
"dots-horizontal": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2616
|
-
"arrow-down": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 5V19M12 19L19 12M12 19L5 12\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2617
|
-
"arrow-up": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 19V5M12 5L5 12M12 5L19 12\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2618
|
-
"check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 6L9 17L4 12\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2619
|
-
"globe": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M14 1.4578C13.053 1.16035 12.0452 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21C16.5228 21 21 16.5228 21 11C21 9.28467 20.5681 7.67022 19.8071 6.25945M16 4.75H16.005M9.50005 20.8883L9.50016 18.6849C9.50017 18.5656 9.54286 18.4502 9.62053 18.3596L12.1063 15.4594C12.3106 15.2211 12.2473 14.8556 11.9748 14.6999L9.11853 13.0677C9.04093 13.0234 8.97663 12.9591 8.93234 12.8814L7.07046 9.61863C6.97356 9.44882 6.78657 9.35107 6.59183 9.36841L1.06418 9.86074M20 5C20 7.20914 18 9 16 11C14 9 12 7.20914 12 5C12 2.79086 13.7909 1 16 1C18.2091 1 20 2.79086 20 5ZM16.25 4.75C16.25 4.88807 16.1381 5 16 5C15.8619 5 15.75 4.88807 15.75 4.75C15.75 4.61193 15.8619 4.5 16 4.5C16.1381 4.5 16.25 4.61193 16.25 4.75Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2620
|
-
"credit-card": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M22 10H2M11 14H6M2 8.2L2 15.8C2 16.9201 2 17.4802 2.21799 17.908C2.40973 18.2843 2.71569 18.5903 3.09202 18.782C3.51984 19 4.07989 19 5.2 19L18.8 19C19.9201 19 20.4802 19 20.908 18.782C21.2843 18.5903 21.5903 18.2843 21.782 17.908C22 17.4802 22 16.9201 22 15.8V8.2C22 7.0799 22 6.51984 21.782 6.09202C21.5903 5.7157 21.2843 5.40974 20.908 5.21799C20.4802 5 19.9201 5 18.8 5L5.2 5C4.0799 5 3.51984 5 3.09202 5.21799C2.7157 5.40973 2.40973 5.71569 2.21799 6.09202C2 6.51984 2 7.07989 2 8.2Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2621
|
-
"calendar-check": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 10H3M16 2V6M8 2V6M9 16L11 18L15.5 13.5M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2622
|
-
"calendar-minus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M9 15H15M21 8H3M16 2V5M8 2V5M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.6146 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.6146 3.6146 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.6146 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2623
|
-
"annotation-alert": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 10.5V7M12 14H12.01M9.9 19.2L11.36 21.1467C11.5771 21.4362 11.6857 21.5809 11.8188 21.6327C11.9353 21.678 12.0647 21.678 12.1812 21.6327C12.3143 21.5809 12.4229 21.4362 12.64 21.1467L14.1 19.2C14.3931 18.8091 14.5397 18.6137 14.7185 18.4645C14.9569 18.2656 15.2383 18.1248 15.5405 18.0535C15.7671 18 16.0114 18 16.5 18C17.8978 18 18.5967 18 19.1481 17.7716C19.8831 17.4672 20.4672 16.8831 20.7716 16.1481C21 15.5967 21 14.8978 21 13.5V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V13.5C3 14.8978 3 15.5967 3.22836 16.1481C3.53284 16.8831 4.11687 17.4672 4.85195 17.7716C5.40326 18 6.10218 18 7.5 18C7.98858 18 8.23287 18 8.45951 18.0535C8.76169 18.1248 9.04312 18.2656 9.2815 18.4645C9.46028 18.6137 9.60685 18.8091 9.9 19.2Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2624
|
-
"marker-pin": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M5 14.2864C3.14864 15.1031 2 16.2412 2 17.5C2 19.9853 6.47715 22 12 22C17.5228 22 22 19.9853 22 17.5C22 16.2412 20.8514 15.1031 19 14.2864M18 8C18 12.0637 13.5 14 12 17C10.5 14 6 12.0637 6 8C6 4.68629 8.68629 2 12 2C15.3137 2 18 4.68629 18 8ZM13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2625
|
-
"layers": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M1.00024 10.941L10.6425 15.7621C10.7737 15.8277 10.8392 15.8605 10.908 15.8734C10.969 15.8848 11.0315 15.8848 11.0924 15.8734C11.1612 15.8605 11.2268 15.8277 11.358 15.7621L21.0002 10.941M1.00024 15.941L10.6425 20.7621C10.7737 20.8277 10.8392 20.8605 10.908 20.8734C10.969 20.8848 11.0315 20.8848 11.0924 20.8734C11.1612 20.8605 11.2268 20.8277 11.358 20.7621L21.0002 15.941M1.00024 5.94098L10.6425 1.11987C10.7737 1.05428 10.8392 1.02148 10.908 1.00857C10.969 0.997142 11.0315 0.997142 11.0924 1.00857C11.1612 1.02148 11.2268 1.05428 11.358 1.11987L21.0002 5.94098L11.358 10.7621C11.2268 10.8277 11.1612 10.8605 11.0924 10.8734C11.0315 10.8848 10.969 10.8848 10.908 10.8734C10.8392 10.8605 10.7737 10.8277 10.6425 10.7621L1.00024 5.94098Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2626
|
-
"book-open": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 20\" fill=\"none\"><path d=\"M11 19L10.8999 18.8499C10.2053 17.808 9.85798 17.287 9.3991 16.9098C8.99286 16.5759 8.52476 16.3254 8.02161 16.1726C7.45325 16 6.82711 16 5.57482 16H4.2C3.07989 16 2.51984 16 2.09202 15.782C1.71569 15.5903 1.40973 15.2843 1.21799 14.908C1 14.4802 1 13.9201 1 12.8V4.2C1 3.07989 1 2.51984 1.21799 2.09202C1.40973 1.71569 1.71569 1.40973 2.09202 1.21799C2.51984 1 3.07989 1 4.2 1H4.6C6.84021 1 7.96031 1 8.81596 1.43597C9.56861 1.81947 10.1805 2.43139 10.564 3.18404C11 4.03968 11 5.15979 11 7.4M11 19V7.4M11 19L11.1001 18.8499C11.7947 17.808 12.142 17.287 12.6009 16.9098C13.0071 16.5759 13.4752 16.3254 13.9784 16.1726C14.5467 16 15.1729 16 16.4252 16H17.8C18.9201 16 19.4802 16 19.908 15.782C20.2843 15.5903 20.5903 15.2843 20.782 14.908C21 14.4802 21 13.9201 21 12.8V4.2C21 3.07989 21 2.51984 20.782 2.09202C20.5903 1.71569 20.2843 1.40973 19.908 1.21799C19.4802 1 18.9201 1 17.8 1H17.4C15.1598 1 14.0397 1 13.184 1.43597C12.4314 1.81947 11.8195 2.43139 11.436 3.18404C11 4.03968 11 5.15979 11 7.4\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2627
|
-
"clock-rewind": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 20\" fill=\"none\"><path d=\"M20.7 11.5L18.7005 9.5L16.7 11.5M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C13.3019 1 16.1885 2.77814 17.7545 5.42909M10 5V10L13 12\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2628
|
-
"Grid": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M8.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V8.4C3 8.96005 3 9.24008 3.10899 9.45399C3.20487 9.64215 3.35785 9.79513 3.54601 9.89101C3.75992 10 4.03995 10 4.6 10H8.4C8.96005 10 9.24008 10 9.45399 9.89101C9.64215 9.79513 9.79513 9.64215 9.89101 9.45399C10 9.24008 10 8.96005 10 8.4V4.6C10 4.03995 10 3.75992 9.89101 3.54601C9.79513 3.35785 9.64215 3.20487 9.45399 3.10899C9.24008 3 8.96005 3 8.4 3Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.4 3H15.6C15.0399 3 14.7599 3 14.546 3.10899C14.3578 3.20487 14.2049 3.35785 14.109 3.54601C14 3.75992 14 4.03995 14 4.6V8.4C14 8.96005 14 9.24008 14.109 9.45399C14.2049 9.64215 14.3578 9.79513 14.546 9.89101C14.7599 10 15.0399 10 15.6 10H19.4C19.9601 10 20.2401 10 20.454 9.89101C20.6422 9.79513 20.7951 9.64215 20.891 9.45399C21 9.24008 21 8.96005 21 8.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.4 14H15.6C15.0399 14 14.7599 14 14.546 14.109C14.3578 14.2049 14.2049 14.3578 14.109 14.546C14 14.7599 14 15.0399 14 15.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V15.6C21 15.0399 21 14.7599 20.891 14.546C20.7951 14.3578 20.6422 14.2049 20.454 14.109C20.2401 14 19.9601 14 19.4 14Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.4 14H4.6C4.03995 14 3.75992 14 3.54601 14.109C3.35785 14.2049 3.20487 14.3578 3.10899 14.546C3 14.7599 3 15.0399 3 15.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V15.6C10 15.0399 10 14.7599 9.89101 14.546C9.79513 14.3578 9.64215 14.2049 9.45399 14.109C9.24008 14 8.96005 14 8.4 14Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2629
|
-
"dots-vertical": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2630
|
-
"copy": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M4 14C3.06812 14 2.60218 14 2.23463 13.8478C1.74458 13.6448 1.35523 13.2554 1.15224 12.7654C1 12.3978 1 11.9319 1 11V4.2C1 3.0799 1 2.51984 1.21799 2.09202C1.40973 1.71569 1.71569 1.40973 2.09202 1.21799C2.51984 1 3.0799 1 4.2 1H11C11.9319 1 12.3978 1 12.7654 1.15224C13.2554 1.35523 13.6448 1.74458 13.8478 2.23463C14 2.60218 14 3.06812 14 4M11.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V11.2C21 10.0799 21 9.51984 20.782 9.09202C20.5903 8.71569 20.2843 8.40973 19.908 8.21799C19.4802 8 18.9201 8 17.8 8H11.2C10.0799 8 9.51984 8 9.09202 8.21799C8.71569 8.40973 8.40973 8.71569 8.21799 9.09202C8 9.51984 8 10.0799 8 11.2V17.8C8 18.9201 8 19.4802 8.21799 19.908C8.40973 20.2843 8.71569 20.5903 9.09202 20.782C9.51984 21 10.0799 21 11.2 21Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2631
|
-
"share": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M21 9L21 3M21 3H15M21 3L13 11M10 5H7.8C6.11984 5 5.27976 5 4.63803 5.32698C4.07354 5.6146 3.6146 6.07354 3.32698 6.63803C3 7.27976 3 8.11984 3 9.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H14.2C15.8802 21 16.7202 21 17.362 20.673C17.9265 20.3854 18.3854 19.9265 18.673 19.362C19 18.7202 19 17.8802 19 16.2V14\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2632
|
-
"moon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M20.9548 11.9115C19.5779 14.3267 16.9791 15.9552 14 15.9552C9.58172 15.9552 6 12.3734 6 7.95516C6 4.9758 7.62867 2.37683 10.0443 1C4.96975 1.48114 1 5.75444 1 10.9549C1 16.4778 5.47715 20.9549 11 20.9549C16.2002 20.9549 20.4733 16.9856 20.9548 11.9115Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2633
|
-
"stars": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 22 22\" fill=\"none\"><path d=\"M5.5 12L6.28446 13.5689C6.54995 14.0999 6.68269 14.3654 6.86003 14.5954C7.01739 14.7996 7.20041 14.9826 7.40455 15.14C7.63462 15.3173 7.9001 15.4501 8.43108 15.7155L10 16.5L8.43108 17.2845C7.9001 17.5499 7.63462 17.6827 7.40455 17.86C7.20041 18.0174 7.01739 18.2004 6.86003 18.4046C6.68269 18.6346 6.54995 18.9001 6.28446 19.4311L5.5 21L4.71554 19.4311C4.45005 18.9001 4.31731 18.6346 4.13997 18.4046C3.98261 18.2004 3.79959 18.0174 3.59545 17.86C3.36538 17.6827 3.0999 17.5499 2.56892 17.2845L1 16.5L2.56892 15.7155C3.0999 15.4501 3.36538 15.3173 3.59545 15.14C3.79959 14.9826 3.98261 14.7996 4.13997 14.5954C4.31731 14.3654 4.45005 14.0999 4.71554 13.5689L5.5 12Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 1L15.1786 4.06442C15.4606 4.79765 15.6016 5.16426 15.8209 5.47264C16.0153 5.74595 16.254 5.98475 16.5274 6.17909C16.8357 6.39836 17.2024 6.53937 17.9356 6.82138L21 8L17.9356 9.17862C17.2024 9.46063 16.8357 9.60164 16.5274 9.82091C16.254 10.0153 16.0153 10.254 15.8209 10.5274C15.6016 10.8357 15.4606 11.2024 15.1786 11.9356L14 15L12.8214 11.9356C12.5394 11.2024 12.3984 10.8357 12.1791 10.5274C11.9847 10.254 11.746 10.0153 11.4726 9.82091C11.1643 9.60164 10.7976 9.46063 10.0644 9.17862L7 8L10.0644 6.82138C10.7976 6.53937 11.1643 6.39836 11.4726 6.17909C11.746 5.98475 11.9847 5.74595 12.1791 5.47264C12.3984 5.16426 12.5394 4.79765 12.8214 4.06442L14 1Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
2634
|
-
"arrow-square-left": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M3 5.25C3 4.65326 3.23705 4.08097 3.65901 3.65901C4.08097 3.23705 4.65326 3 5.25 3H18.75C19.3467 3 19.919 3.23705 20.341 3.65901C20.7629 4.08097 21 4.65326 21 5.25V18.75C21 19.3467 20.7629 19.919 20.341 20.341C19.919 20.7629 19.3467 21 18.75 21H5.25C4.65326 21 4.08097 20.7629 3.65901 20.341C3.23705 19.919 3 19.3467 3 18.75V5.25Z\" stroke=\"#1B1F22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.625 3V21\" stroke=\"#1B1F22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.375 9.75L13.125 12L15.375 14.25\" stroke=\"#1B1F22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
|
|
2635
|
-
};
|
|
2636
|
-
|
|
2637
|
-
class MsIcon {
|
|
2638
|
-
sanitizer;
|
|
2639
|
-
name;
|
|
2640
|
-
color = 'ms-icon-black';
|
|
2641
|
-
svg;
|
|
2642
|
-
size = 'small'; // default
|
|
2643
|
-
width = 16;
|
|
2644
|
-
height = 16;
|
|
2645
|
-
strokeWidth = 1.25;
|
|
2646
|
-
constructor(sanitizer) {
|
|
2647
|
-
this.sanitizer = sanitizer;
|
|
2648
|
-
}
|
|
2649
|
-
ngOnInit() {
|
|
2650
|
-
const icon = ICONS[this.name] || '';
|
|
2651
|
-
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
2652
|
-
console.log(this.svg, 'svg');
|
|
2653
|
-
console.log(ICONS, 'ICONS');
|
|
2654
|
-
console.log(this.name, 'name');
|
|
2655
|
-
this.getsize();
|
|
2656
|
-
}
|
|
2657
|
-
ngOnChanges() {
|
|
2658
|
-
const icon = ICONS[this.name] || '';
|
|
2659
|
-
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
2660
|
-
this.getsize();
|
|
2661
|
-
console.log(this.svg, 'svg');
|
|
2662
|
-
console.log(ICONS, 'ICONS');
|
|
2663
|
-
console.log(this.name, 'name');
|
|
2664
|
-
}
|
|
2665
|
-
getsize() {
|
|
2666
|
-
switch (this.size) {
|
|
2667
|
-
case 'small':
|
|
2668
|
-
this.width = this.height = 16;
|
|
2669
|
-
this.strokeWidth = 1.25;
|
|
2670
|
-
break;
|
|
2671
|
-
case 'medium':
|
|
2672
|
-
this.width = this.height = 20;
|
|
2673
|
-
this.strokeWidth = 1.5;
|
|
2674
|
-
break;
|
|
2675
|
-
case 'large':
|
|
2676
|
-
this.width = this.height = 24;
|
|
2677
|
-
this.strokeWidth = 1.75;
|
|
2678
|
-
break;
|
|
2679
|
-
default:
|
|
2680
|
-
this.width = this.height = 20;
|
|
2681
|
-
this.strokeWidth = 1.5;
|
|
2682
|
-
}
|
|
2683
|
-
}
|
|
2684
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
2685
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsIcon, isStandalone: true, selector: "ms-icon", inputs: { name: "name", color: "color", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [attr.stroke-width]=\"strokeWidth\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}.ms-icon-gray{color:#6a6b6d!important}.ms-icon-black{color:#1b1f22!important}.ms-icon-red{color:#da3e37!important}.ms-icon-blue{color:#0084ff!important}.ms-icon-white{color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2686
|
-
}
|
|
2687
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, decorators: [{
|
|
2688
|
-
type: Component,
|
|
2689
|
-
args: [{ selector: 'ms-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\" [attr.stroke-width]=\"strokeWidth\" [ngClass]=\"color\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}.ms-icon-gray{color:#6a6b6d!important}.ms-icon-black{color:#1b1f22!important}.ms-icon-red{color:#da3e37!important}.ms-icon-blue{color:#0084ff!important}.ms-icon-white{color:#fff!important}\n"] }]
|
|
2690
|
-
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{
|
|
2691
|
-
type: Input
|
|
2692
|
-
}], color: [{
|
|
2693
|
-
type: Input
|
|
2694
|
-
}], size: [{
|
|
2695
|
-
type: Input
|
|
2696
|
-
}] } });
|
|
2697
|
-
|
|
2698
2827
|
class MsPagination {
|
|
2699
2828
|
totalItems = 0;
|
|
2700
2829
|
pageSize = 20;
|
|
@@ -2802,11 +2931,11 @@ class MsPagination {
|
|
|
2802
2931
|
});
|
|
2803
2932
|
}
|
|
2804
2933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2805
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPagination, isStandalone: true, selector: "ms-pagination", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", loading: "loading", disabled: "disabled" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\">\n <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n <span>\n {{ selectedPageSize }}\n </span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#323130}.ms-page-size{display:flex;align-items:center;gap:6px}.ms-select:focus{border-color:#0084ff!important}.ms-select:focus-visible{outline-color:#0084ff!important}.ms-muted,.ms-results{color:#605e5c;font-size:14px!important}.ms-pages{display:flex;align-items:center;gap:4px}.ms-page-btn{min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;background:transparent;border-radius:8px;font-size:14px;color:#6a6b6d;cursor:pointer}.ms-page-btn:hover:not(.active):not(.disabled){background-color:#f5f5f5!important}.ms-page-btn.active{border:1px solid #ccc;color:#1b1f22}.ms-page-btn.disabled{color:#a19f9d;cursor:not-allowed}.ms-page-btn:focus{border:1px solid #0084FF!important}.ms-ellipsis{padding:0 4px;color:#605e5c}.ms-vl{height:20px;width:1px;background-color:#ccc!important}.custom-select{position:relative;width:55px;height:26px;padding:2px 8px!important;font-size:14px;border:1px solid #c8c6c4;border-radius:8px;background-color:#fff;font-weight:500!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.selected{margin-top:2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.options{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;background:#fff;list-style:none;margin:4px 0 0;padding:0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.options li{padding:5px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1b1f22;font-family:Family/Sans;font-weight:500!important;font-style:Regular;font-size:14px!important;line-height:18px!important;letter-spacing:0%}.tick-icon{color:green;font-weight:700}.arrow-icon ::ng-deep svg{margin-top:2px}.custom-select:not(.open-up) .options{top:100%}.custom-select.open-up .options{bottom:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
2934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsPagination, isStandalone: true, selector: "ms-pagination", inputs: { totalItems: "totalItems", pageSize: "pageSize", currentPage: "currentPage", pageSizeOptions: "pageSizeOptions", loading: "loading", disabled: "disabled" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\">\n <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n <span>\n {{ selectedPageSize }}\n </span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [".ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#323130}.ms-page-size{display:flex;align-items:center;gap:6px}.ms-select:focus{border-color:#0084ff!important}.ms-select:focus-visible{outline-color:#0084ff!important}.ms-muted,.ms-results{color:#605e5c;font-size:14px!important}.ms-pages{display:flex;align-items:center;gap:4px}.ms-page-btn{min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;background:transparent;border-radius:8px;font-size:14px;color:#6a6b6d;cursor:pointer}.ms-page-btn:hover:not(.active):not(.disabled){background-color:#f5f5f5!important}.ms-page-btn.active{border:1px solid #ccc;color:#1b1f22}.ms-page-btn.disabled{color:#a19f9d;cursor:not-allowed}.ms-page-btn:focus{border:1px solid #0084FF!important}.ms-ellipsis{padding:0 4px;color:#605e5c}.ms-vl{height:20px;width:1px;background-color:#ccc!important}.custom-select{position:relative;width:55px;height:26px;padding:2px 8px!important;font-size:14px;border:1px solid #c8c6c4;border-radius:8px;background-color:#fff;font-weight:500!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.selected{margin-top:2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.options{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;background:#fff;list-style:none;margin:4px 0 0;padding:0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.options li{padding:5px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1b1f22;font-family:Family/Sans;font-weight:500!important;font-style:Regular;font-size:14px!important;line-height:18px!important;letter-spacing:0%}.tick-icon{color:green;font-weight:700}.arrow-icon ::ng-deep svg{margin-top:2px}.custom-select:not(.open-up) .options{top:100%}.custom-select.open-up .options{bottom:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
2806
2935
|
}
|
|
2807
2936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsPagination, decorators: [{
|
|
2808
2937
|
type: Component,
|
|
2809
|
-
args: [{ selector: 'ms-pagination', imports: [CommonModule, FormsModule, MsIcon], template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\">\n <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n <span>\n {{ selectedPageSize }}\n </span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: ["@charset \"UTF-8\";.content{height:100vh;gap:80;opacity:1;border-radius:0;padding:20px;background:var(--semantics-bg-subtle-primary-default, #F5F5F5);overflow:hidden}.content.collapsed{width:1590px!important}@media(min-width:992px){.content{padding-left:50px;padding-right:50px}}@media(min-width:1200px){.content{padding-left:80px;padding-right:80px}}@media(min-width:1400px){.content{padding-left:110px;padding-right:110px}}@media(min-width:1401px){.content{max-width:1400px;min-width:700px;margin:0 auto;padding-left:110px;padding-right:110px}}.ms-row{display:flex;flex-wrap:wrap;margin-left:-.5rem;margin-right:-.5rem;margin-bottom:-1rem}[class^=ms-col],[class*=\" ms-col\"]{box-sizing:border-box;padding-left:.5rem;padding-right:.5rem;margin-bottom:1rem}.ms-col{flex:1 0 0%}.ms-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-3{flex:0 0 25%;max-width:25%}.ms-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-6{flex:0 0 50%;max-width:50%}.ms-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-9{flex:0 0 75%;max-width:75%}.ms-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-12{flex:0 0 100%;max-width:100%}@media(min-width:576px){.ms-col-sm{flex:1 0 0%}.ms-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-sm-3{flex:0 0 25%;max-width:25%}.ms-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-sm-6{flex:0 0 50%;max-width:50%}.ms-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-sm-9{flex:0 0 75%;max-width:75%}.ms-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-sm-12{flex:0 0 100%;max-width:100%}}@media(min-width:768px){.ms-col-md{flex:1 0 0%}.ms-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-md-3{flex:0 0 25%;max-width:25%}.ms-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-md-6{flex:0 0 50%;max-width:50%}.ms-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-md-9{flex:0 0 75%;max-width:75%}.ms-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-md-12{flex:0 0 100%;max-width:100%}}@media(min-width:992px){.ms-col-lg{flex:1 0 0%}.ms-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-lg-3{flex:0 0 25%;max-width:25%}.ms-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-lg-6{flex:0 0 50%;max-width:50%}.ms-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-lg-9{flex:0 0 75%;max-width:75%}.ms-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-lg-12{flex:0 0 100%;max-width:100%}}@media(min-width:1200px){.ms-col-xl{flex:1 0 0%}.ms-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xl-3{flex:0 0 25%;max-width:25%}.ms-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xl-6{flex:0 0 50%;max-width:50%}.ms-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xl-9{flex:0 0 75%;max-width:75%}.ms-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xl-12{flex:0 0 100%;max-width:100%}}@media(min-width:1400px){.ms-col-xxl{flex:1 0 0%}.ms-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.ms-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.ms-col-xxl-3{flex:0 0 25%;max-width:25%}.ms-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.ms-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.ms-col-xxl-6{flex:0 0 50%;max-width:50%}.ms-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.ms-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.ms-col-xxl-9{flex:0 0 75%;max-width:75%}.ms-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.ms-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.ms-col-xxl-12{flex:0 0 100%;max-width:100%}}.ms-gx-0{--ms-gutter-x: 0rem}.ms-gy-0{--ms-gutter-y: 0rem}.ms-gx-1{--ms-gutter-x: .25rem}.ms-gy-1{--ms-gutter-y: .25rem}.ms-gx-2{--ms-gutter-x: .5rem}.ms-gy-2{--ms-gutter-y: .5rem}.ms-gx-3{--ms-gutter-x: .75rem}.ms-gy-3{--ms-gutter-y: .75rem}.ms-gx-4{--ms-gutter-x: 1rem}.ms-gy-4{--ms-gutter-y: 1rem}.ms-gx-5{--ms-gutter-x: 1.25rem}.ms-gy-5{--ms-gutter-y: 1.25rem}.ms-row{--ms-gutter-x: 1rem;--ms-gutter-y: 1rem;margin-left:calc(-1 * var(--ms-gutter-x) / 2);margin-right:calc(-1 * var(--ms-gutter-x) / 2);margin-bottom:calc(-1 * var(--ms-gutter-y))}[class^=ms-col],[class*=\" ms-col\"]{padding-left:calc(var(--ms-gutter-x) / 2);padding-right:calc(var(--ms-gutter-x) / 2);margin-bottom:var(--ms-gutter-y)}:root{--primary: #0084FF;--secondary: #6c757d;--success: #28a745;--danger: #DA3E37;--warning: #F58600;--info: #17a2b8;--light: #f8f9fa;--dark: #343a40;--link: #007bff;--defaultborder: #CCCCCC;--skeleton: #EBEBEB;--muted: #6A6B6D}.ms-rounded-none{border-radius:0!important;-webkit-border-radius:0px!important;-moz-border-radius:0px!important;-ms-border-radius:0px!important;-o-border-radius:0px!important}.ms-rounded-sm{border-radius:6px!important;-webkit-border-radius:6px!important;-moz-border-radius:6px!important;-ms-border-radius:6px!important;-o-border-radius:6px!important}.ms-rounded-md{border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-rounded-lg{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-rounded-circle{border-radius:50px!important;-webkit-border-radius:50px!important;-moz-border-radius:50px!important;-ms-border-radius:50px!important;-o-border-radius:50px!important}.ms-btn{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn.disabled,.ms-btn:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-sm{border:1px solid transparent;font-size:13px!important;font-weight:400!important;line-height:16px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-md{border:1px solid transparent;font-size:14px!important;font-weight:400!important;line-height:18px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn-lg{border:1px solid transparent;font-size:16px!important;font-weight:400!important;line-height:20px!important;text-align:center!important;text-decoration:none!important;display:inline-block!important;cursor:pointer!important;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-moz-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-ms-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important;-o-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out!important}.ms-btn{height:16px;padding:5px 12px!important;display:flex!important;align-items:center!important}.ms-btn-sm{height:14px!important;padding:4px 12px!important;display:flex!important;align-items:center!important}.ms-btn-md{height:16px!important;padding:7px 12px!important;display:flex!important;align-items:center!important}.ms-btn-lg{height:18px!important;padding:8px 16px!important;display:flex!important;align-items:center!important}.ms-btn-label{border:0px!important}.ms-btn-focus{border:thin solid #0084FF!important}.ms-btn-default{background-color:transparent!important;border-color:var(--defaultborder)!important;color:#171717!important}.ms-btn-default:hover{background-color:#e2e6ea!important;border-color:#b3b3b3!important}.ms-btn-default:focus{box-shadow:0 0 0 .1rem #007bff40!important;border-color:var(--primary)!important;outline:none!important}.ms-btn-default:active{background-color:#dae0e5!important;border-color:#a6a6a6!important}.ms-btn-default.disabled,.ms-btn-default:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-pressed{background:#ebebeb!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-disabled{background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important;box-shadow:0 0 0 1px #b7dcff!important}.ms-btn-hover{background:#f5f5f5!important;color:#1b1f22!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-btn-focus{background:transparent!important;border:thin solid #0084FF!important;color:#1b1f22!important}.ms-btn-primary{background-color:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}.ms-btn-primary:hover{background-color:#0070d9!important;border-color:#006acc!important}.ms-btn-primary.disabled,.ms-btn-primary:disabled{opacity:.65!important;background-color:#0070d9!important;cursor:not-allowed!important}.ms-btn-secondary{background-color:var(--secondary)!important;border-color:var(--secondary)!important;color:#fff!important}.ms-btn-secondary:hover{background-color:#5a6268!important;border-color:#545b62!important}.ms-btn-secondary.disabled,.ms-btn-secondary:disabled{opacity:.65!important;background-color:#5a6268!important;cursor:not-allowed!important}.ms-btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.ms-btn-success:hover{background-color:#218838!important;border-color:#1e7e34!important}.ms-btn-success.disabled,.ms-btn-success:disabled{opacity:.65!important;background-color:#218838!important;cursor:not-allowed!important}.ms-btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.ms-btn-danger:hover{background-color:#c62c25!important;border-color:#bb2923!important}.ms-btn-danger.disabled,.ms-btn-danger:disabled{opacity:.65!important;background-color:#c62c25!important;cursor:not-allowed!important}.ms-btn-warning{background-color:var(--warning)!important;border-color:var(--warning)!important;color:#fff!important}.ms-btn-warning:hover{background-color:#cf7100!important;border-color:#c26a00!important}.ms-btn-warning.disabled,.ms-btn-warning:disabled{opacity:.65!important;background-color:#cf7100!important;cursor:not-allowed!important}.ms-btn-info{background-color:var(--info)!important;border-color:var(--info)!important;color:#fff!important}.ms-btn-info:hover{background-color:#138496!important;border-color:#117a8b!important}.ms-btn-info.disabled,.ms-btn-info:disabled{opacity:.65!important;background-color:#138496!important;cursor:not-allowed!important}.ms-btn-light{background-color:var(--light)!important;border-color:var(--light)!important;color:#212529!important}.ms-btn-light:hover{background-color:#e2e6ea!important;border-color:#dae0e5!important}.ms-btn-light.disabled,.ms-btn-light:disabled{opacity:.65!important;background-color:#e2e6ea!important;cursor:not-allowed!important}.ms-btn-dark{background-color:var(--dark)!important;border-color:var(--dark)!important;color:#fff!important}.ms-btn-dark:hover{background-color:#23272b!important;border-color:#1d2124!important}.ms-btn-dark.disabled,.ms-btn-dark:disabled{opacity:.65!important;background-color:#23272b!important;cursor:not-allowed!important}.ms-btn-link{background-color:transparent!important;border-color:transparent!important;color:var(--link)!important}.ms-btn-link:hover{color:#0056b3!important;text-decoration:underline!important}.ms-btn-link.disabled,.ms-btn-link:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-subtle{background-color:transparent!important;border-color:transparent!important;color:#000!important}.ms-btn-subtle:hover{color:#000!important}.ms-btn-subtle.disabled,.ms-btn-subtle:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-btn-skeleton{background:var(--skeleton)!important;background-size:200% 100%!important;animation:shimmer 1.5s infinite!important;color:transparent!important;border-color:#ebebeb;cursor:default!important;-webkit-animation:shimmer 1.5s infinite!important}@keyframes shimmer{0%{background-position:-200% 0!important}to{background-position:200% 0!important}}h1{font-size:32px!important;line-height:40px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h2{font-size:24px!important;line-height:30px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}h3{font-size:20px!important;line-height:25px!important;font-weight:600!important;letter-spacing:-1%!important;margin:0%!important}p,div,span{font-size:16px!important;line-height:20px!important;font-weight:400!important;letter-spacing:0%!important}.ms-card{position:relative!important;display:flex!important;flex-direction:column!important;min-width:0!important;word-wrap:break-word!important;background-color:#fff!important;background-clip:border-box!important;border:1px solid rgba(0,0,0,.125)!important;border-radius:8px!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}.ms-card-header{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important;border-top-left-radius:calc(.75rem - 1px)!important;border-top-right-radius:calc(.75rem - 1px)!important}.ms-card-toolbar{padding:10px 16px!important;margin-bottom:0!important;border-bottom:1px solid rgba(0,0,0,.125)!important}ms-button{cursor:pointer;pointer-events:auto}ms-button.disabled{cursor:not-allowed!important;pointer-events:none;opacity:.6;background:#ebebeb!important;color:#8a8585!important;border:1px solid var(--semantics-border-subtle-primary, #CCCCCC)!important}.ms-card-body{flex:1 1 auto!important}.ms-card-title{margin-top:.5rem!important;margin-bottom:.5rem!important;font-size:1.25rem!important;font-weight:500!important}.ms-card-text{margin-top:0!important;margin-bottom:1rem!important}.ms-text-primary{color:var(--primary)!important}.ms-text-secondary{color:var(--secondary)!important}.ms-text-success{color:var(--success)!important}.ms-text-danger{color:var(--danger)!important}.ms-text-warning{color:var(--warning)!important}.ms-text-info{color:var(--info)!important}.ms-text-light{color:var(--light)!important}.ms-text-dark{color:var(--dark)!important}.ms-text-link{color:var(--link)!important}.ms-text-muted{color:var(--muted)!important}.ms-f-w-100{font-weight:100!important}.ms-f-w-200{font-weight:200!important}.ms-f-w-300{font-weight:300!important}.ms-f-w-400{font-weight:400!important}.ms-f-w-500{font-weight:500!important}.ms-f-w-600{font-weight:600!important}.ms-f-w-700{font-weight:700!important}.ms-f-w-800{font-weight:800!important}.ms-f-w-900{font-weight:900!important}.ms-fs-8{font-size:8px!important}.ms-fs-10{font-size:10px!important}.ms-fs-12{font-size:12px!important}.ms-fs-14{font-size:14px!important}.ms-fs-16{font-size:16px!important}.ms-fs-18{font-size:18px!important}.ms-fs-20{font-size:20px!important}.ms-fs-22{font-size:22px!important}.ms-fs-24{font-size:24px!important}.ms-fs-26{font-size:26px!important}.ms-fs-28{font-size:28px!important}.ms-fs-30{font-size:30px!important}.ms-fs-32{font-size:32px!important}.ms-rounded-default{border-radius:12px!important;-webkit-border-radius:12px!important;-moz-border-radius:12px!important;-ms-border-radius:12px!important;-o-border-radius:12px!important}.ms-border{border:1px solid #E0E0E0!important}.ms-border-left{border-left:1px solid #E0E0E0!important}.ms-border-bottom{border-bottom:1px solid var(--semantics-border-status-success-primary-default, #E0E0E0)!important}.ms-border-0{border:none!important}.ms-border-right{border-right:1px solid #E0E0E0!important}.ms-border-top{border-top:1px solid #E0E0E0!important}.ms-border-bottom-success-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-success-2px{border:2px solid var(--semantics-border-status-success-primary-default, #00935C)!important}.ms-border-bottom-danger-2px{border-bottom:2px solid var(--semantics-border-status-success-primary-default, #DA3E37)!important}.ms-align-items-start{align-items:start!important}.ms-align-items-end{align-items:end!important}.ms-mt-1{margin-top:.25rem!important}.ms-mt-2{margin-top:.5rem!important}.ms-mt-4{margin-top:1.5rem!important}.ms-mt-5{margin-top:3rem!important}.ms-mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.ms-mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.ms-mx-3{margin-left:1rem!important;margin-right:1rem!important}.ms-mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}.ms-mx-5{margin-left:3rem!important;margin-right:3rem!important}.ms-my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.ms-my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.ms-my-3{margin-top:1rem!important;margin-bottom:1rem!important}.ms-my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.ms-my-5{margin-top:3rem!important;margin-bottom:3rem!important}.ms-ms-1{margin-left:.25rem!important}.ms-ms-2{margin-left:.5rem!important}.ms-ms-4{margin-left:1.5rem!important}.ms-ms-5{margin-left:3rem!important}.ms-mb-1{margin-bottom:.25rem!important}.ms-mb-2{margin-bottom:.5rem!important}.ms-mb-4{margin-bottom:1.5rem!important}.ms-mb-5{margin-bottom:3rem!important}label{font-family:Family/Sans!important;font-weight:450!important;font-style:Regular!important;font-size:14px!important;line-height:18px!important;letter-spacing:0%!important;color:var(--semantics-text-subtle-primary-default, #1B1F22)!important}select{height:36px!important;opacity:1!important;border-width:Thin!important;padding:4px 8px!important;border-radius:8px!important;background:var(--semantics-surface-subtle-primary-default, #FFFFFF)!important;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0)!important;-webkit-border-radius:8px!important;-moz-border-radius:8px!important;-ms-border-radius:8px!important;-o-border-radius:8px!important}ms-button .ms-btn-default{border:none!important}.ms-btn-default ::ng-deep a{border:none!important}.ms-w-33{width:33.333%!important}.ms-cursor-pointer{cursor:pointer!important}.ms-pointer-events-none{pointer-events:none!important}.ms-shadow-sm{box-shadow:0 .125rem .25rem #00000013!important}.ms-shadow{box-shadow:0 .5rem 1rem #00000026!important}.ms-shadow-lg{box-shadow:0 1rem 3rem #0000002d!important}.ms-overflow-hidden{overflow:hidden!important}.ms-overflow-auto{overflow:auto!important}.ms-overflow-scroll{overflow:scroll!important}.ms-overflow-overlay{overflow:overlay!important}.ms-text-start{text-align:left!important}.ms-text-center{text-align:center!important}.ms-text-end{text-align:right!important}.ms-w-25{width:25%!important}.ms-w-50{width:50%!important}.ms-w-75{width:75%!important}.ms-w-100{width:100%!important}.ms-p-0{padding:0!important}.ms-p-1{padding:.25rem!important}.ms-p-2{padding:.5rem!important}.ms-p-3{padding:1rem!important}.ms-p-4{padding:1.5rem!important}.ms-p-5{padding:3rem!important}.ms-pt-0{padding-top:0!important}.ms-pt-1{padding-top:.25rem!important}.ms-pt-3{padding-top:1rem!important}.ms-pt-4{padding-top:1.5rem!important}.ms-pt-5{padding-top:3rem!important}.ms-pt-2{padding-top:.5rem!important}.ms-ps-5{padding-left:3rem!important}.ms-ps-4{padding-left:1.5rem!important}.ms-ps-3{padding-left:1rem!important}.ms-ps-2{padding-left:.5rem!important}.ms-ps-1{padding-left:.25rem!important}.ms-pe-5{padding-right:3rem!important}.ms-pe-4{padding-right:1.5rem!important}.ms-pe-3{padding-right:1rem!important}.ms-pe-2{padding-right:.5rem!important}.ms-pe-1{padding-right:.25rem!important}.ms-pb-3{padding-bottom:1rem!important}.ms-m-0{margin:0!important}.ms-m-1{margin:.25rem!important}.ms-m-2{margin:.5rem!important}.ms-m-3{margin:1rem!important}.ms-m-4{margin:1.5rem!important}.ms-m-5{margin:3rem!important}.ms-mt-3{margin-top:1rem!important}.ms-mb-3{margin-bottom:1rem!important}.ms-ms-3{margin-left:1rem!important}.ms-me-0{margin-right:0!important}.ms-me-1{margin-right:.25rem!important}.ms-me-2{margin-right:.5rem!important}.ms-me-3{margin-right:1rem!important}.ms-me-4{margin-right:1.5rem!important}.ms-me-5{margin-right:3rem!important}.ms-mx-auto{margin-left:auto!important;margin-right:auto!important}.ms-align-items-start{align-items:flex-start!important}.ms-align-items-center{align-items:center!important}.ms-align-items-end{align-items:flex-end!important}.ms-align-items-stretch{align-items:stretch!important}.ms-justify-content-start{justify-content:flex-start!important}.ms-justify-content-center{justify-content:center!important}.ms-justify-content-end{justify-content:flex-end!important}.ms-justify-content-between{justify-content:space-between!important}.ms-justify-content-around{justify-content:space-around!important}.ms-justify-content-evenly{justify-content:space-evenly!important}.ms-flex-wrap{flex-wrap:wrap!important}.ms-flex-nowrap{flex-wrap:nowrap!important}.ms-flex-row{flex-direction:row!important}.ms-flex-column{flex-direction:column!important}.ms-flex-row-reverse{flex-direction:row-reverse!important}.ms-flex-column-reverse{flex-direction:column-reverse!important}.ms-position-relative{position:relative!important}.ms-position-absolute{position:absolute!important}.ms-position-fixed{position:fixed!important}.ms-position-sticky{position:sticky!important}.ms-d-block{display:block!important}.ms-d-inline{display:inline!important}.ms-d-inline-block{display:inline-block!important}.ms-d-flex{display:flex!important}.ms-d-inline-flex{display:inline-flex!important}.ms-d-none{display:none!important}.ms-h-25{height:25%!important}.ms-h-50{height:50%!important}.ms-h-75{height:75%!important}.ms-h-100{height:100%!important}.ms-min-vh-100{min-height:100vh!important}.ms-container{padding-left:12px!important;padding-right:12px!important}.ms-scroll-h-195-calc{height:calc(100vh - 195px)!important;overflow:overlay!important}.ms-checkbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-checkbox input{position:absolute;opacity:0}.ms-checkbox .ms-checkbox-box{width:16px;height:16px;border:1px solid #CCCCCC;border-radius:4px;display:grid;place-items:center;background:#fff}.ms-checkbox .ms-checkmark{color:#fff;font-size:13px!important;display:flex;align-items:center;margin-top:-3px}.ms-checkbox .ms-indeterminate{width:10px;height:2px;background:#fff;border-radius:1px}.ms-checkbox input:checked+.ms-checkbox-box,.ms-checkbox .ms-checkbox-box:has(.ms-indeterminate){background:#2563eb;border-color:#2563eb}.ms-checkbox:hover:not(.disabled):not(.skeleton) .ms-checkbox-box{border-color:#2563eb}.ms-checkbox input:focus+.ms-checkbox-box{outline:2px solid #B7DCFF;outline-offset:2px}.ms-checkbox.invalid .ms-checkbox-box{border-color:#dc2626}.ms-checkbox.disabled{opacity:.5;cursor:not-allowed}.ms-checkbox.disabled input:checked+.ms-checkbox-box,.ms-checkbox.disabled .ms-checkbox-box:has(.ms-indeterminate){background:#ebebeb;border-color:#e0e0e0}.ms-checkbox.disabled .ms-checkmark{color:#ababab}.ms-checkbox .ms-label{font-size:14px!important}.ms-checkbox .ms-checkbox-skeleton{width:18px;height:18px;border-radius:4px;background:#e5e7eb}.ms-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 12px!important;font-size:.85rem!important;font-weight:500!important;cursor:default!important;height:16px!important;-webkit-user-select:none!important;user-select:none!important;transition:background .2s;-webkit-transition:background .2s;-moz-transition:background .2s;-ms-transition:background .2s;-o-transition:background .2s}.ms-badge.disabled,.ms-badge:disabled{opacity:.65!important;cursor:not-allowed!important;background-color:#f5f5f5!important;color:#b0b0b0!important}.ms-badge:hover{opacity:.85!important}.ms-badge i{font-style:normal;font-weight:700}.ms-badge-default{background-color:#e0e0e0;color:#6c6c6c}.ms-badge-primary{background-color:#e7f1ff;color:#1a73e8}.ms-badge-success{background-color:#e6f4ea;color:#188038}.ms-badge-warning{background-color:#fff4e5;color:#f57c00}.ms-badge-danger{background-color:#fdecea;color:#d93025}.ms-badge-default-dark{background-color:#3c3c3c;color:#fff}.ms-badge-primary-dark{background-color:#1a73e8;color:#fff}.ms-badge-success-dark{background-color:#188038;color:#fff}.ms-badge-warning-dark{background-color:#f57c00;color:#fff}.ms-badge-danger-dark{background-color:#d93025;color:#fff}.badge-row{display:flex;gap:10px;margin-bottom:8px}.ms-toggle{display:inline-flex;align-items:center;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;transition:.3s}.ms-toggle input{position:absolute;opacity:0;width:0;height:0}.ms-toggle .ms-toggle-track{background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843));border-radius:20px;position:relative;transition:background .3s;margin-right:8px}.ms-toggle .ms-toggle-track .ms-toggle-thumb{background:#fff;border-radius:50%;position:absolute;top:1px;left:2px;transition:left .3s,background .3s;box-shadow:0 1px 3px #0000004d}.ms-toggle .ms-label{font-size:14px;color:#333}.ms-toggle:hover:not(.disabled) .ms-toggle-track{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle .ms-radio-circle:focus{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF);outline-offset:2px}.ms-toggle.invalid .ms-toggle-track{border:1px solid red}.ms-toggle.disabled{cursor:not-allowed;opacity:.6}.ms-toggle.disabled .ms-toggle input:checked{background:var(--semantics-fill-status-info-secondary-disabled, rgba(0, 132, 255, .1019607843))}.ms-toggle.disabled .ms-label{color:#999}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-sm input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 16px);top:.05rem}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track{background:#007bff}.ms-toggle.ms-toggle-lg input:checked+.ms-toggle-track .ms-toggle-thumb{left:calc(100% - 19px);top:.15rem}.ms-toggle input:checked+.ms-toggle-track:hover{border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle input:focus+.ms-toggle-track{box-shadow:0 0 0 .91px var(--primitivesbrandblue-100);border:.91px solid var(--semantics-border-brand-default, #0084FF)}.ms-toggle.ms-toggle-sm .ms-toggle-track{width:28px;height:16px}.ms-toggle.ms-toggle-sm .ms-toggle-track .ms-toggle-thumb{width:13px;height:13px}.ms-toggle.ms-toggle-lg .ms-toggle-track{width:36px;height:20px}.ms-toggle.ms-toggle-lg .ms-toggle-track .ms-toggle-thumb{width:16px;height:16px}.ms-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.ms-radio input{position:absolute;opacity:0}.ms-radio .ms-radio-circle{width:14px;height:14px;border:2px solid #CCCCCC;border-radius:50%;display:grid;align-items:center;place-items:center;place-content:center;background:#fff}.ms-radio .ms-radio-dot{width:10px;height:10px;background:#2563eb;border-radius:50%}.ms-radio input:checked+.ms-radio-circle{border-color:#2563eb}.ms-radio input:checked+.ms-radio-circle .ms-radio-dot{display:block}.ms-radio .ms-radio-dot{display:none}.ms-radio:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#2563eb}.ms-radio input:focus+.ms-radio-circle{outline:2px solid #B7DCFF;outline-offset:2px}.ms-radio.invalid .ms-radio-circle{border-color:#dc2626}.ms-radio.disabled{opacity:.5;cursor:not-allowed}.ms-radio.disabled input:checked+.ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled:hover:not(.disabled):not(.skeleton) .ms-radio-circle{border-color:#ccc;background-color:#ebebeb}.ms-radio.disabled .ms-radio-dot{background:#1f24281a}.ms-radio .ms-radio-skeleton{width:18px;height:18px;border-radius:50%;background:#e5e7eb}.ms-form-control{padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;height:10px;gap:6;opacity:1;border-width:1px;padding:12px 8px;width:-webkit-fill-available}.ms-form-control.disabled,.ms-form-control:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-form-control.ms-error{border-color:#da3e37;box-shadow:0 0 0 1px #da3e3740}.ms-form-control:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-form-control:read-only{background-color:#fafafa}.ms-form-control[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-form-control[readonly]::placeholder{color:#a5adba}.ms-form-control::placeholder{color:#ababab;opacity:1}.ms-form-control:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-form-control.ms-error,.ms-form-control.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar.no-background{background:none!important}.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar .ms-avatar-img-circle{border-radius:50%;background:none!important;background-color:none!important}.ms-avatar .ms-avatar-img-square{background-color:none!important;background:none!important;border-radius:6px}.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group{display:flex}.ms-avatar-group .ms-ms{margin-left:-5px}.ms-avatar-group.ms-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;background:var(--semantics-avatar-six, #EBEBEB);color:var(--semantics-text-on-fill-subtle-disabled, #ABABAB);cursor:pointer;overflow:visible}.ms-avatar-group.ms-avatar img{width:100%;height:100%;object-fit:cover}.ms-avatar-group.ms-avatar.ms-avatar-circle{border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%}.ms-avatar-group.ms-avatar.ms-avatar-square{border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.ms-avatar-group.ms-avatar.disabled{opacity:.5;cursor:not-allowed}.ms-avatar-group.ms-avatar.ms-avatar-xs{width:20px;height:20px}.ms-avatar-group.ms-avatar.ms-avatar-xs .ms-avatar-xs{font-size:8px!important}.ms-avatar-group.ms-avatar.ms-avatar-sm{width:24px;height:24px}.ms-avatar-group.ms-avatar.ms-avatar-sm .ms-avatar-sm{font-size:10px!important}.ms-avatar-group.ms-avatar.ms-avatar-md{width:28px;height:28px}.ms-avatar-group.ms-avatar.ms-avatar-md .ms-avatar-md{font-size:12px!important}.ms-avatar-group.ms-avatar.ms-avatar-lg{width:32px;height:32px}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-lg{font-size:14px!important}.ms-avatar-group.ms-avatar.ms-avatar-xl{width:40px;height:40px}.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-xl{font-size:16px!important}.ms-avatar-group.ms-avatar.ms-avatar-skeleton{background:#e5e7eb}.ms-avatar-group.ms-avatar .ms-avatar-status{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}.ms-avatar-group.ms-avatar .ms-avatar-status.online{background:#22c55e}.ms-avatar-group.ms-avatar .ms-avatar-status.offline{background:#9ca3af}.ms-avatar-group.ms-avatar .ms-avatar-status.busy{background:#ef4444}.ms-avatar-group.ms-avatar.ms-avatar-lg .ms-avatar-status,.ms-avatar-group.ms-avatar.ms-avatar-xl .ms-avatar-status{width:10px;height:10px}.ms-avatar-group .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-group .ms-avatar-img-circle{border-radius:50%}.ms-avatar-group .ms-avatar-img-square{border-radius:6px}.ms-avatar-dropdown{margin-top:6px;width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #0000001f;padding:8px}.ms-avatar-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:hidden}.ms-avatar-list.scroll{max-height:180px;overflow-y:auto}.ms-avatar-list .ms-avatar-img{width:100%;height:100%;object-fit:cover}.ms-avatar-list .ms-avatar-img-circle{border-radius:50%}.ms-avatar-list .ms-avatar-img-square{border-radius:6px}.ms-avatar-action{margin-top:6px;text-align:center;font-size:12px;font-weight:600;color:#2563eb;cursor:pointer}.ms-dropdown-data{background-color:transparent!important}.ms-label-primary{white-space:nowrap;text-decoration:ellipsis;color:#292a2e;font-weight:500!important}.ms-label-secondory{white-space:nowrap;text-decoration:ellipsis;color:#6b6e76;font-size:12px!important}.ms-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.ms-spinner{border-radius:50%;border:6px solid transparent;animation:spin 1s linear infinite}.ms-spinner-text{color:#6a6b6d;font-weight:500;text-align:center;margin:0!important}.ms-spinner-sm .ms-spinner{width:16px!important;height:16px!important;border-width:2px!important}.ms-spinner-sm .ms-spinner-text{margin-top:4px!important;font-size:12px!important}.ms-spinner-md .ms-spinner{width:24px!important;height:24px!important;border-width:3px!important}.ms-spinner-md .ms-spinner-text{margin-top:6px!important;font-size:14px!important}.ms-spinner-lg .ms-spinner{width:48px!important;height:48px!important;border-width:5px!important}.ms-spinner-lg .ms-spinner-text{margin-top:8px!important;font-size:18px!important}.ms-spinner-xl .ms-spinner{width:96px!important;height:96px!important;border-width:8px!important}.ms-spinner-xl .ms-spinner-text{margin-top:10px!important;font-size:22px!important}.ms-spinner-primary{border-top-color:#0084ff;border-right-color:#0084ff;border-bottom-color:#0084ff}.ms-spinner-secondary{border-top-color:#68696b;border-right-color:#68696b;border-bottom-color:#68696b}.ms-spinner-black{border-top-color:#121314;border-right-color:#121314;border-bottom-color:#121314}.ms-spinner-light{border-top-color:#f5f5f5;border-right-color:#f5f5f5;border-bottom-color:#f5f5f5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ms-textArea{resize:vertical;transition:height .2s ease;padding:.6rem .8rem;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px;font-size:.95rem;transition:border-color .2s,box-shadow .2s;background:#fff;color:#1b1f22;font-family:Segoe UI,sans-serif;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;gap:6;opacity:1;border-width:1px;padding:12px 8px}.ms-textArea.disabled,.ms-textArea:disabled{opacity:.65!important;cursor:not-allowed!important}.ms-textArea.ms-error{border-color:#d9534f;box-shadow:0 0 0 1px #da3e3740}.ms-textArea:disabled{background-color:#f5f5f5;cursor:not-allowed}.ms-textArea:read-only{background-color:#fafafa}.ms-textArea[readonly]{background-color:#f4f5f7;color:#6b778c;cursor:not-allowed;border-color:#dfe1e6}.ms-textArea[readonly]::placeholder{color:#a5adba}.ms-textArea::placeholder{color:#ababab;opacity:1}.ms-textArea:focus{box-shadow:0 0 0 1px var(--primitivesbrandblue-100);border:1px solid var(--semantics-border-brand-default, #0084FF);box-shadow:0 0 0 2px #0052cc33;outline:none}.ms-textArea.ms-error,.ms-textArea.invalid{box-shadow:0 0 0 1px #da3e3740;border:1px solid var(--semantics-border-status-error-primary-default, #DA3E37)}.ms-skeleton-text{width:100%;height:2.5rem;border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ms-bg-white{background-color:#fff}.ms-bg-light{background-color:#e0e0e0}.ms-accordion{width:100%}.ms-accordion-item{margin-bottom:5px}.ms-accordion-header{cursor:pointer;padding:20px;border:1px solid #E0E0E0;border-radius:16px;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:background-color .3s ease}.ms-accordion-text{display:flex;align-items:center}.ms-accordion-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid #E0E0E0;margin-right:8px;flex-shrink:0}.ms-accordion-text-content{display:flex;flex-direction:column;row-gap:4px}.ms-accordion-title{font-weight:500!important;font-size:16px!important;line-height:20px!important;letter-spacing:0px}.ms-accordion-subtext{font-weight:400!important;font-size:14px!important;letter-spacing:0px;color:#6a6b6d}.ms-accordion-more{background:none;border:none;cursor:pointer;padding:0 8px;column-gap:8px;margin-left:auto;color:#6a6b6d;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.ms-accordion-header::-webkit-details-marker{display:none}.ms-accordion-header:after{content:\"\";width:16px;height:16px;background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg);background-size:contain;background-repeat:no-repeat;transition:transform .3s ease}.ms-accordion-item[open] .ms-accordion-header:after{background-image:url(https://ds-doc.sentrixbar.com/assets/svg/chevron-down.svg);transform:rotate(0)}.ms-accordion-content{padding:0 20px 20px;border:1px solid #ddd;border-top:none;border-radius:0 0 16px 16px;animation:slideDown .3s ease-out}.ms-accordion-item[open]>.ms-accordion-header{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.ms-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.ms-drawer{position:fixed;background-color:#fff;box-shadow:-2px 0 5px #0000004d;transition:transform .3s ease;z-index:1000}.ms-drawer.right{top:0;right:0;width:25%;height:100%;transform:translate(100%)}.ms-drawer.right.open{transform:translate(0)}.ms-drawer.left{top:0;left:0;width:25%;height:100%;transform:translate(-100%)}.ms-drawer.left.open{transform:translate(0)}.ms-drawer.bottom{bottom:0;left:0;width:100%;height:25%;transform:translateY(100%)}.ms-drawer.bottom.open{transform:translateY(0)}.ms-drawer.top{top:0;left:0;width:100%;height:25%;transform:translateY(-100%)}.ms-drawer.top.open{transform:translateY(0)}.ms-drawer-header{padding:16px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.ms-close-btn{background:none;border:none;font-size:24px;cursor:pointer}.ms-drawer-body{padding:16px;height:calc(100% - 160px);overflow-y:auto}.ms-drawer-footer{padding:16px;border-top:1px solid #ddd;position:relative;bottom:0;background-color:#fff}.ms-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.ms-modal-content{background:#fff;padding:20px;border-radius:16px;width:90%;border:1px solid #E0E0E0;box-shadow:0 4px 6px #0000001a}.ms-modal-sm{max-width:440px}.ms-modal-md{max-width:640px}.ms-modal-lg{max-width:840px}.ms-modal-xl{max-width:1040px}.ms-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.ms-modal-header{margin:0;font-size:16px!important;font-weight:550!important;color:#1b1f22}.ms-close-btn:hover{color:#1b1f22}.ms-modal-body{font-size:16px;color:#6a6b6d;margin-top:16px;margin-bottom:24px}.ms-modal-footer{display:flex;justify-content:flex-end;gap:12px}@media(max-width:768px){.ms-modal-content{width:95%;padding:16px;height:-webkit-fill-available;overflow-y:auto}.ms-modal-sm,.ms-modal-md,.ms-modal-lg .ms-modal-xl{max-width:95%}}.ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#323130}.ms-page-size{display:flex;align-items:center;gap:6px}.ms-select:focus{border-color:#0084ff!important}.ms-select:focus-visible{outline-color:#0084ff!important}.ms-muted,.ms-results{color:#605e5c;font-size:14px!important}.ms-pages{display:flex;align-items:center;gap:4px}.ms-page-btn{min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;background:transparent;border-radius:8px;font-size:14px;color:#6a6b6d;cursor:pointer}.ms-page-btn:hover:not(.active):not(.disabled){background-color:#f5f5f5!important}.ms-page-btn.active{border:1px solid #ccc;color:#1b1f22}.ms-page-btn.disabled{color:#a19f9d;cursor:not-allowed}.ms-page-btn:focus{border:1px solid #0084FF!important}.ms-ellipsis{padding:0 4px;color:#605e5c}.ms-vl{height:20px;width:1px;background-color:#ccc!important}.custom-select{position:relative;width:55px;height:26px;padding:2px 8px!important;font-size:14px;border:1px solid #c8c6c4;border-radius:8px;background-color:#fff;font-weight:500!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.selected{margin-top:2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.options{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;background:#fff;list-style:none;margin:4px 0 0;padding:0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.options li{padding:5px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1b1f22;font-family:Family/Sans;font-weight:500!important;font-style:Regular;font-size:14px!important;line-height:18px!important;letter-spacing:0%}.tick-icon{color:green;font-weight:700}.arrow-icon ::ng-deep svg{margin-top:2px}.custom-select:not(.open-up) .options{top:100%}.custom-select.open-up .options{bottom:100%}\n"] }]
|
|
2938
|
+
args: [{ selector: 'ms-pagination', imports: [CommonModule, FormsModule, MsIcon], template: "<div class=\"ms-pagination\" [class.disabled]=\"disabled\">\n <div class=\"ms-page-size\">\n <div class=\"custom-select\" [class.open-up]=\"openUp\">\n <div class=\"selected\" (click)=\"toggleDropdown($event)\">\n <span>\n {{ selectedPageSize }}\n </span>\n <div class=\"arrow-icon\">\n <ms-icon [name]=\"'chevron-down'\" *ngIf=\"!dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n <ms-icon [name]=\"'chevron-up'\" *ngIf=\"dropdownOpen\" [color]=\"'ms-icon-black'\"></ms-icon>\n </div>\n </div>\n <ul class=\"options\" *ngIf=\"dropdownOpen\">\n <li *ngFor=\"let s of pageSizeOptions\" (click)=\"changePageSize(s)\">\n {{ s }}\n <span *ngIf=\"s === selectedPageSize\" class=\"tick-icon\">\n <ms-icon [name]=\"'check'\" [color]=\"'ms-icon-blue'\"></ms-icon>\n </span>\n </li>\n </ul>\n </div>\n <span class=\"ms-muted\">per page</span>\n <div class=\"ms-vl\"></div>\n\n <div class=\"ms-results\">\n Showing {{ fromRecord }}\u2013{{ toRecord }} of {{ totalItems }} results\n </div>\n </div>\n <div class=\"ms-pages\">\n <button class=\"ms-page-btn\" (click)=\"prev()\" [disabled]=\"currentPage === 1 || loading || disabled\">\u2039</button>\n <button *ngFor=\"let p of pages\" class=\"ms-page-btn\" [class.active]=\"p === currentPage\"\n [disabled]=\"isEllipsis(p) || loading || disabled\" (click)=\"changePage(p)\">\n {{ p }}\n </button>\n <button class=\"ms-page-btn\" (click)=\"next()\"\n [disabled]=\"currentPage === totalPages || loading || disabled\">\u203A</button>\n </div>\n <div class=\"loader\" *ngIf=\"loading\">Loading...</div>\n</div>", styles: [".ms-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#323130}.ms-page-size{display:flex;align-items:center;gap:6px}.ms-select:focus{border-color:#0084ff!important}.ms-select:focus-visible{outline-color:#0084ff!important}.ms-muted,.ms-results{color:#605e5c;font-size:14px!important}.ms-pages{display:flex;align-items:center;gap:4px}.ms-page-btn{min-width:32px;height:32px;padding:0 6px;border:1px solid transparent;background:transparent;border-radius:8px;font-size:14px;color:#6a6b6d;cursor:pointer}.ms-page-btn:hover:not(.active):not(.disabled){background-color:#f5f5f5!important}.ms-page-btn.active{border:1px solid #ccc;color:#1b1f22}.ms-page-btn.disabled{color:#a19f9d;cursor:not-allowed}.ms-page-btn:focus{border:1px solid #0084FF!important}.ms-ellipsis{padding:0 4px;color:#605e5c}.ms-vl{height:20px;width:1px;background-color:#ccc!important}.custom-select{position:relative;width:55px;height:26px;padding:2px 8px!important;font-size:14px;border:1px solid #c8c6c4;border-radius:8px;background-color:#fff;font-weight:500!important;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.selected{margin-top:2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.options{position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;background:#fff;list-style:none;margin:4px 0 0;padding:0;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}.options li{padding:5px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1b1f22;font-family:Family/Sans;font-weight:500!important;font-style:Regular;font-size:14px!important;line-height:18px!important;letter-spacing:0%}.tick-icon{color:green;font-weight:700}.arrow-icon ::ng-deep svg{margin-top:2px}.custom-select:not(.open-up) .options{top:100%}.custom-select.open-up .options{bottom:100%}\n"] }]
|
|
2810
2939
|
}], propDecorators: { totalItems: [{
|
|
2811
2940
|
type: Input
|
|
2812
2941
|
}], pageSize: [{
|
|
@@ -3026,13 +3155,13 @@ class MsSidebar {
|
|
|
3026
3155
|
console.log(data);
|
|
3027
3156
|
this.rotate[data.id] = !this.rotate[data.id];
|
|
3028
3157
|
}
|
|
3029
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1
|
|
3030
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsSidebar, isStandalone: true, selector: "ms-sidebar", inputs: { id: "id", search: "search", setting: "setting", userDetail: "userDetail", badge: "badge", details: "details" }, outputs: { select: "select" }, ngImport: i0, template: "<div class=\"sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n <div class=\"ms-d-flex ms-justify-content-between\">\n <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\">\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n </button>\n </div>\n @if(search){\n <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\" >\n <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n <input type=\"text\" placeholder=\"Search...\" class=\"search-input \" [(ngModel)]=\"searchText\"\n (input)=\"filterMenu()\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/search.svg\" alt=\"Search\" class=\"search-icon\">\n </div>\n </div>\n }\n <div class=\"menu-container\" >\n <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/svg/' + section.icon\" alt=\"Icon\" class=\"ms-me-2 icon\">\n <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n <span class=\"badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{ section?.sub_menu?.length }}</span>\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg\" alt=\"Chevron\" class=\"chevron\" (click)=\"rotating(section)\"\n [ngClass]=\"{'rotated': rotate[section.id]}\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n </div>\n <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\"\n (click)=\"selectItem(item , section)\"\n [ngClass]=\"{'active-section': activeItem === item.id}\">\n {{ item.label }}\n </li>\n</ul>\n\n\n</div>\n </div>\n<div class=\"\" [ngClass]=\"{'sidebar-footer': userDetail || setting}\">\n @if(setting){\n <div class=\"Settings-section menu-item \" >\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n <span class=\"user-name ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n </div>\n }\n @if(userDetail){\n <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\" (click)=\"toggleProfileFlyout()\">\n <div class=\"user-avatar\">{{ userInitials }}</div>\n <span class=\"user-name ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-section\">\n <div class=\"flyout-title\">Switch Account</div>\n <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n <div class=\"account-info\">\n <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n <div class=\"account-details\">\n <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n </div>\n </div>\n <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n </div>\n </div>\n <button class=\"flyout-button\" >Add Account</button>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-item sign-out\" >Sign Out</div>\n </div>\n </div>\n }\n</div>\n</div>\n<ul class=\"submenu-flyout\"\n *ngIf=\"isCollapsed && flyoutSectionId\"\n [style.top.px]=\"flyoutTop\">\n <li *ngFor=\"let item of flyoutItems\"\n (click)=\"selectItem(item, flyoutItems)\">\n {{ item.label }}\n </li>\n</ul>", styles: [".sidebar{display:flex;flex-direction:column;top:0;left:0;height:100vh;border:1px solid #dee2e6;transition:width .3s ease;z-index:1000}.menu-container{flex:1;overflow-y:auto;scrollbar-width:none}.menu-container::-webkit-scrollbar{display:none}.sidebar.collapsed{width:60px;padding:10px}.sidebar.expanded{width:250px;padding:10px}.toggle-btn{padding:10px;background:none;border:none;cursor:pointer}.menu-item{display:flex;align-items:center;padding:12px;font-size:14px!important;color:#6a6b6d;cursor:pointer;margin-bottom:4px;transition:all .3s ease}.menu-item:hover{border-radius:8px;background:#ebebeb}.active-section{border-radius:8px;font-weight:600;border:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014}.active-section .title{color:#000}.icon{width:20px;height:20px;flex-shrink:0}.title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsed .title{display:none}.submenu{list-style:none;padding-left:22px;color:#6a6b6d;font-size:14px!important;margin:0 0 4px;position:relative}.submenu:before{content:\"\";position:absolute;left:15px;top:0;width:2px;height:100%;background-color:#ccc;animation:slideDown .3s ease-out}@keyframes slideDown{0%{height:0}to{height:100%}}.submenu-item{padding:12px 12px 12px 10px;border-radius:8px;display:flex;align-items:center;cursor:pointer}.submenu-item:hover{background-color:#ebebeb}.chevron{width:16px;height:16px;transition:transform .2s}.chevron.rotated{transform:rotate(270deg)}.chevron{transform:rotate(90deg)}.badge{background-color:#1b1f22;padding:6px;font-size:12px!important;color:#fff;border-radius:8px;width:10px;height:10px;display:flex;align-items:center;justify-content:center;font-weight:500;margin-left:8px;margin-right:8px;flex-shrink:0}.search-wrapper{position:relative;width:100%}.search-input{border:none;border-bottom:1px solid #dee2e6;background:transparent;padding:8px 8px 8px 22px;font-size:14px;color:#6a6b6d;outline:none;transition:border-color .3s ease;width:218px}.search-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5}.search-input:hover{border-bottom-color:#adb5bd}.search-input:focus{border-bottom-color:#007bff}.search-input:active{border-bottom-color:#0056b3}.search-input:disabled{border-bottom-color:#e9ecef;color:#adb5bd;cursor:not-allowed}.search-hidden{transform:translateY(-100%);opacity:0;transition:all .3s ease}.submenu-flyout{position:fixed;transform:translate(63px);border-radius:12px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:200px;list-style:none;padding:4px;margin:0;max-height:50vh;overflow-y:auto}.submenu-flyout li{padding:12px;color:#6a6b6d;cursor:pointer}.submenu-flyout li:hover,.submenu-flyout li:active{background:#f5f5f5;color:#1b1f22;border-radius:8px}.sidebar-footer{padding-top:10px;border-top:1px solid #dee2e6;background:inherit}.Settings-section{display:flex;align-items:center}.profile-section{display:flex;align-items:center;margin-bottom:10px;position:relative;cursor:pointer}.user-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.user-name{font-size:14px;color:#6a6b6d}.profile-flyout{position:absolute;border-radius:8px;bottom:100%;left:262px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:250px;padding:10px}.flyout-item{padding:10px 15px;cursor:pointer;font-size:14px}.flyout-item:hover{background:#e0e0e0;border-radius:12px}.flyout-divider{border:none;border-top:1px solid #dee2e6;margin:5px 0}.flyout-section{padding:0 15px}.flyout-title{font-size:14px!important;font-weight:700!important;margin-bottom:5px!important;color:#6a6b6d!important}.account-item{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;padding:10px 0 10px 10px}.account-item:hover{background:#e0e0e0;border-radius:12px}.account-item input{margin-right:10px;margin-top:5px}.account-info{display:flex;align-items:center}.account-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.account-details{display:flex;flex-direction:column}.account-name{font-size:12px;font-weight:500;color:#333}.account-email{font-size:10px;color:#666}.flyout-button{width:calc(100% - 30px);margin:10px 15px;padding:8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.flyout-button:hover{background:#0056b3}.sign-out{color:#dc3545;text-align:center}.sign-out:hover{background:#f8d7da}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, deps: [{ token: i1.DomSanitizer }, { token: i2$1.Router }, { token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsSidebar, isStandalone: true, selector: "ms-sidebar", inputs: { id: "id", search: "search", setting: "setting", userDetail: "userDetail", badge: "badge", details: "details" }, outputs: { select: "select" }, ngImport: i0, template: "<div class=\"sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n <div class=\"ms-d-flex ms-justify-content-between\">\n <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\">\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n </button>\n </div>\n @if(search){\n <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\" >\n <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n <input type=\"text\" placeholder=\"Search...\" class=\"search-input \" [(ngModel)]=\"searchText\"\n (input)=\"filterMenu()\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/search.svg\" alt=\"Search\" class=\"search-icon\">\n </div>\n </div>\n }\n <div class=\"menu-container\" >\n <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/svg/' + section.icon\" alt=\"Icon\" class=\"ms-me-2 icon\">\n <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n <span class=\"badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{ section?.sub_menu?.length }}</span>\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg\" alt=\"Chevron\" class=\"chevron\" (click)=\"rotating(section)\"\n [ngClass]=\"{'rotated': rotate[section.id]}\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n </div>\n <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\"\n (click)=\"selectItem(item , section)\"\n [ngClass]=\"{'active-section': activeItem === item.id}\">\n {{ item.label }}\n </li>\n</ul>\n\n\n</div>\n </div>\n<div class=\"\" [ngClass]=\"{'sidebar-footer': userDetail || setting}\">\n @if(setting){\n <div class=\"Settings-section menu-item \" >\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n <span class=\"user-name ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n </div>\n }\n @if(userDetail){\n <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\" (click)=\"toggleProfileFlyout()\">\n <div class=\"user-avatar\">{{ userInitials }}</div>\n <span class=\"user-name ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-section\">\n <div class=\"flyout-title\">Switch Account</div>\n <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n <div class=\"account-info\">\n <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n <div class=\"account-details\">\n <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n </div>\n </div>\n <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n </div>\n </div>\n <button class=\"flyout-button\" >Add Account</button>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-item sign-out\" >Sign Out</div>\n </div>\n </div>\n }\n</div>\n</div>\n<ul class=\"submenu-flyout\"\n *ngIf=\"isCollapsed && flyoutSectionId\"\n [style.top.px]=\"flyoutTop\">\n <li *ngFor=\"let item of flyoutItems\"\n (click)=\"selectItem(item, flyoutItems)\">\n {{ item.label }}\n </li>\n</ul>", styles: [".sidebar{display:flex;flex-direction:column;top:0;left:0;height:100vh;border:1px solid #dee2e6;transition:width .3s ease;z-index:1000}.menu-container{flex:1;overflow-y:auto;scrollbar-width:none}.menu-container::-webkit-scrollbar{display:none}.sidebar.collapsed{width:60px;padding:10px}.sidebar.expanded{width:250px;padding:10px}.toggle-btn{padding:10px;background:none;border:none;cursor:pointer}.menu-item{display:flex;align-items:center;padding:12px;font-size:14px!important;color:#6a6b6d;cursor:pointer;margin-bottom:4px;transition:all .3s ease}.menu-item:hover{border-radius:8px;background:#ebebeb}.active-section{border-radius:8px;font-weight:600;border:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014}.active-section .title{color:#000}.icon{width:20px;height:20px;flex-shrink:0}.title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsed .title{display:none}.submenu{list-style:none;padding-left:22px;color:#6a6b6d;font-size:14px!important;margin:0 0 4px;position:relative}.submenu:before{content:\"\";position:absolute;left:15px;top:0;width:2px;height:100%;background-color:#ccc;animation:slideDown .3s ease-out}@keyframes slideDown{0%{height:0}to{height:100%}}.submenu-item{padding:12px 12px 12px 10px;border-radius:8px;display:flex;align-items:center;cursor:pointer}.submenu-item:hover{background-color:#ebebeb}.chevron{width:16px;height:16px;transition:transform .2s}.chevron.rotated{transform:rotate(270deg)}.chevron{transform:rotate(90deg)}.badge{background-color:#1b1f22;padding:6px;font-size:12px!important;color:#fff;border-radius:8px;width:10px;height:10px;display:flex;align-items:center;justify-content:center;font-weight:500;margin-left:8px;margin-right:8px;flex-shrink:0}.search-wrapper{position:relative;width:100%}.search-input{border:none;border-bottom:1px solid #dee2e6;background:transparent;padding:8px 8px 8px 22px;font-size:14px;color:#6a6b6d;outline:none;transition:border-color .3s ease;width:218px}.search-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5}.search-input:hover{border-bottom-color:#adb5bd}.search-input:focus{border-bottom-color:#007bff}.search-input:active{border-bottom-color:#0056b3}.search-input:disabled{border-bottom-color:#e9ecef;color:#adb5bd;cursor:not-allowed}.search-hidden{transform:translateY(-100%);opacity:0;transition:all .3s ease}.submenu-flyout{position:fixed;transform:translate(63px);border-radius:12px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:200px;list-style:none;padding:4px;margin:0;max-height:50vh;overflow-y:auto}.submenu-flyout li{padding:12px;color:#6a6b6d;cursor:pointer}.submenu-flyout li:hover,.submenu-flyout li:active{background:#f5f5f5;color:#1b1f22;border-radius:8px}.sidebar-footer{padding-top:10px;border-top:1px solid #dee2e6;background:inherit}.Settings-section{display:flex;align-items:center}.profile-section{display:flex;align-items:center;margin-bottom:10px;position:relative;cursor:pointer}.user-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.user-name{font-size:14px;color:#6a6b6d}.profile-flyout{position:absolute;border-radius:8px;bottom:100%;left:262px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:250px;padding:10px}.flyout-item{padding:10px 15px;cursor:pointer;font-size:14px}.flyout-item:hover{background:#e0e0e0;border-radius:12px}.flyout-divider{border:none;border-top:1px solid #dee2e6;margin:5px 0}.flyout-section{padding:0 15px}.flyout-title{font-size:14px!important;font-weight:700!important;margin-bottom:5px!important;color:#6a6b6d!important}.account-item{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;padding:10px 0 10px 10px}.account-item:hover{background:#e0e0e0;border-radius:12px}.account-item input{margin-right:10px;margin-top:5px}.account-info{display:flex;align-items:center}.account-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.account-details{display:flex;flex-direction:column}.account-name{font-size:12px;font-weight:500;color:#333}.account-email{font-size:10px;color:#666}.flyout-button{width:calc(100% - 30px);margin:10px 15px;padding:8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.flyout-button:hover{background:#0056b3}.sign-out{color:#dc3545;text-align:center}.sign-out:hover{background:#f8d7da}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3031
3160
|
}
|
|
3032
3161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, decorators: [{
|
|
3033
3162
|
type: Component,
|
|
3034
3163
|
args: [{ selector: 'ms-sidebar', standalone: true, imports: [CommonModule, FormsModule], template: "<div class=\"sidebar\" [ngClass]=\"{'collapsed': isCollapsed, 'expanded': !isCollapsed}\">\n <div class=\"ms-d-flex ms-justify-content-between\">\n <img src=\"https://ds-doc.sentrixbar.com/logo.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/logo-small.svg\" alt=\"Logo\" class=\"logo\" *ngIf=\"isCollapsed\" (click)=\"toggleSidebar()\">\n <button class=\"toggle-btn\" (click)=\"toggleSidebar()\" *ngIf=\"!isCollapsed\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sidebar-left-expand.svg\" alt=\"Toggle\" class=\"icon\">\n </button>\n </div>\n @if(search){\n <div class=\"ms-d-flex ms-justify-content-between ms-mb-2\" [ngClass]=\"{'search-hidden': !isSearchVisible}\" >\n <div class=\"search-wrapper\" *ngIf=\"!isCollapsed\">\n <input type=\"text\" placeholder=\"Search...\" class=\"search-input \" [(ngModel)]=\"searchText\"\n (input)=\"filterMenu()\">\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/search.svg\" alt=\"Search\" class=\"search-icon\">\n </div>\n </div>\n }\n <div class=\"menu-container\" >\n <div *ngFor=\"let section of filteredMenuData\" class=\"menu-section\">\n <div class=\"menu-item \" (click)=\"toggleSection(section, $event)\"\n [ngClass]=\"{'active-section':selectedSectionId === section.id}\">\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/svg/' + section.icon\" alt=\"Icon\" class=\"ms-me-2 icon\">\n <span class=\"title ms-f-w-500\">{{ section.title }}</span>\n <span class=\"badge\" *ngIf=\"section?.sub_menu?.length > 0 && section?.sub_menu?.length > 0 && !isCollapsed\">{{ section?.sub_menu?.length }}</span>\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/chevron-right.svg\" alt=\"Chevron\" class=\"chevron\" (click)=\"rotating(section)\"\n [ngClass]=\"{'rotated': rotate[section.id]}\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n </div>\n <ul class=\"submenu\" *ngIf=\"openSections[section.id] && !isCollapsed\">\n <li class=\"submenu-item \" *ngFor=\"let item of section.sub_menu\"\n (click)=\"selectItem(item , section)\"\n [ngClass]=\"{'active-section': activeItem === item.id}\">\n {{ item.label }}\n </li>\n</ul>\n\n\n</div>\n </div>\n<div class=\"\" [ngClass]=\"{'sidebar-footer': userDetail || setting}\">\n @if(setting){\n <div class=\"Settings-section menu-item \" >\n <img src=\"https://ds-doc.sentrixbar.com/assets/svg/sparkles.svg\" alt=\"Settings\" class=\"ms-me-2 icon\">\n <span class=\"user-name ms-f-w-500\" *ngIf=\"!isCollapsed\">Settings</span>\n </div>\n }\n @if(userDetail){\n <div class=\"profile-section menu-item\" #profileSection [ngClass]=\"{'active-section': profileFlyoutVisible}\" (click)=\"toggleProfileFlyout()\">\n <div class=\"user-avatar\">{{ userInitials }}</div>\n <span class=\"user-name ms-f-w-500 \" *ngIf=\"!isCollapsed\">{{ userName || 'User Name' }}</span>\n <div class=\"profile-flyout\" *ngIf=\"profileFlyoutVisible\">\n <div class=\"flyout-item\" (click)=\"viewProfile()\">View Profile</div>\n <div class=\"flyout-item\" (click)=\"accountSettings()\">Account Settings</div>\n <div class=\"flyout-item\" (click)=\"documentation()\">Documentation</div>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-section\">\n <div class=\"flyout-title\">Switch Account</div>\n <div *ngFor=\"let account of accounts; let i = index\" class=\"account-item\">\n <div class=\"account-info\">\n <div class=\"account-avatar\">{{ getInitials(account.name) }}</div>\n <div class=\"account-details\">\n <div class=\"account-name ms-f-w-500\">{{ account.name }}</div>\n <div class=\"account-email ms-fs-12\">{{ account.email }}</div>\n </div>\n </div>\n <input type=\"radio\" [checked]=\"account.selected\" (change)=\"selectAccount(i)\" name=\"account\">\n </div>\n </div>\n <button class=\"flyout-button\" >Add Account</button>\n <hr class=\"flyout-divider\">\n <div class=\"flyout-item sign-out\" >Sign Out</div>\n </div>\n </div>\n }\n</div>\n</div>\n<ul class=\"submenu-flyout\"\n *ngIf=\"isCollapsed && flyoutSectionId\"\n [style.top.px]=\"flyoutTop\">\n <li *ngFor=\"let item of flyoutItems\"\n (click)=\"selectItem(item, flyoutItems)\">\n {{ item.label }}\n </li>\n</ul>", styles: [".sidebar{display:flex;flex-direction:column;top:0;left:0;height:100vh;border:1px solid #dee2e6;transition:width .3s ease;z-index:1000}.menu-container{flex:1;overflow-y:auto;scrollbar-width:none}.menu-container::-webkit-scrollbar{display:none}.sidebar.collapsed{width:60px;padding:10px}.sidebar.expanded{width:250px;padding:10px}.toggle-btn{padding:10px;background:none;border:none;cursor:pointer}.menu-item{display:flex;align-items:center;padding:12px;font-size:14px!important;color:#6a6b6d;cursor:pointer;margin-bottom:4px;transition:all .3s ease}.menu-item:hover{border-radius:8px;background:#ebebeb}.active-section{border-radius:8px;font-weight:600;border:1px solid #E0E0E0;background:#fff;box-shadow:0 1px 2px #00000014}.active-section .title{color:#000}.icon{width:20px;height:20px;flex-shrink:0}.title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsed .title{display:none}.submenu{list-style:none;padding-left:22px;color:#6a6b6d;font-size:14px!important;margin:0 0 4px;position:relative}.submenu:before{content:\"\";position:absolute;left:15px;top:0;width:2px;height:100%;background-color:#ccc;animation:slideDown .3s ease-out}@keyframes slideDown{0%{height:0}to{height:100%}}.submenu-item{padding:12px 12px 12px 10px;border-radius:8px;display:flex;align-items:center;cursor:pointer}.submenu-item:hover{background-color:#ebebeb}.chevron{width:16px;height:16px;transition:transform .2s}.chevron.rotated{transform:rotate(270deg)}.chevron{transform:rotate(90deg)}.badge{background-color:#1b1f22;padding:6px;font-size:12px!important;color:#fff;border-radius:8px;width:10px;height:10px;display:flex;align-items:center;justify-content:center;font-weight:500;margin-left:8px;margin-right:8px;flex-shrink:0}.search-wrapper{position:relative;width:100%}.search-input{border:none;border-bottom:1px solid #dee2e6;background:transparent;padding:8px 8px 8px 22px;font-size:14px;color:#6a6b6d;outline:none;transition:border-color .3s ease;width:218px}.search-icon{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;opacity:.5}.search-input:hover{border-bottom-color:#adb5bd}.search-input:focus{border-bottom-color:#007bff}.search-input:active{border-bottom-color:#0056b3}.search-input:disabled{border-bottom-color:#e9ecef;color:#adb5bd;cursor:not-allowed}.search-hidden{transform:translateY(-100%);opacity:0;transition:all .3s ease}.submenu-flyout{position:fixed;transform:translate(63px);border-radius:12px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:200px;list-style:none;padding:4px;margin:0;max-height:50vh;overflow-y:auto}.submenu-flyout li{padding:12px;color:#6a6b6d;cursor:pointer}.submenu-flyout li:hover,.submenu-flyout li:active{background:#f5f5f5;color:#1b1f22;border-radius:8px}.sidebar-footer{padding-top:10px;border-top:1px solid #dee2e6;background:inherit}.Settings-section{display:flex;align-items:center}.profile-section{display:flex;align-items:center;margin-bottom:10px;position:relative;cursor:pointer}.user-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.user-name{font-size:14px;color:#6a6b6d}.profile-flyout{position:absolute;border-radius:8px;bottom:100%;left:262px;background:#fff;border:1px solid #dee2e6;box-shadow:0 2px 8px #0000001a;z-index:1001;min-width:250px;padding:10px}.flyout-item{padding:10px 15px;cursor:pointer;font-size:14px}.flyout-item:hover{background:#e0e0e0;border-radius:12px}.flyout-divider{border:none;border-top:1px solid #dee2e6;margin:5px 0}.flyout-section{padding:0 15px}.flyout-title{font-size:14px!important;font-weight:700!important;margin-bottom:5px!important;color:#6a6b6d!important}.account-item{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;padding:10px 0 10px 10px}.account-item:hover{background:#e0e0e0;border-radius:12px}.account-item input{margin-right:10px;margin-top:5px}.account-info{display:flex;align-items:center}.account-avatar{width:20px;height:20px;border-radius:50%;margin-right:10px;background-color:#007bff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:700}.account-details{display:flex;flex-direction:column}.account-name{font-size:12px;font-weight:500;color:#333}.account-email{font-size:10px;color:#666}.flyout-button{width:calc(100% - 30px);margin:10px 15px;padding:8px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.flyout-button:hover{background:#0056b3}.sign-out{color:#dc3545;text-align:center}.sign-out:hover{background:#f8d7da}\n"] }]
|
|
3035
|
-
}], ctorParameters: () => [{ type: i1
|
|
3164
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$1.Router }, { type: TopbarService }], propDecorators: { id: [{
|
|
3036
3165
|
type: Input
|
|
3037
3166
|
}], search: [{
|
|
3038
3167
|
type: Input
|
|
@@ -3060,7 +3189,7 @@ class MsTooltip {
|
|
|
3060
3189
|
return this.text.split('\n').slice(1, 4); // max 3 lines
|
|
3061
3190
|
}
|
|
3062
3191
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3063
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsTooltip, isStandalone: true, selector: "ms-tooltip", inputs: { text: "text", position: "position", bgColor: "bgColor", showArrow: "showArrow" }, ngImport: i0, template: "<div class=\"tooltip-container\" \n [ngClass]=\"[position, showArrow ? 'with-arrow' : 'no-arrow']\"\n [ngStyle]=\"{'background-color': bgColor}\">\n <div class=\"tooltip-title\">{{ title }}</div>\n <div class=\"tooltip-paragraph\">\n <div *ngFor=\"let line of paragraphLines\" class=\"tooltip-line\">\n {{ line }}\n </div>\n </div>\n</div>\n", styles: [".tooltip-trigger{cursor:pointer;border:none;background:#007bff;color:#fff;padding:6px 12px;font-size:14px;border-radius:4px}.tooltip-wrapper:hover .tooltip-container{display:block}.top{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.top-left{bottom:100%;left:0;margin-bottom:8px;transform:none}.top-right{bottom:100%;right:0;margin-bottom:8px;transform:none}.bottom-left{top:100%;left:0;margin-top:8px;transform:none}.bottom-right{top:100%;right:0;margin-top:8px;transform:none}.tooltip-container.with-arrow:after{content:\"\";position:absolute;border-style:solid}.tooltip-container.no-arrow:after{display:none}.top.with-arrow:after{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom.with-arrow:after{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.left.with-arrow:after{top:50%;left:100%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent #0E0F10}.right.with-arrow:after{top:50%;right:100%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent #0E0F10 transparent transparent}.top-left.with-arrow:after{top:100%;left:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.top-right.with-arrow:after{top:100%;right:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom-left.with-arrow:after{bottom:100%;left:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.bottom-right.with-arrow:after{bottom:100%;right:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.tooltip-title{font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-paragraph{display:flex;flex-direction:column;text-align:left}.tooltip-line{line-height:1.2;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word;text-align:left}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:absolute;padding:6px 10px;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;z-index:1000;box-shadow:0 2px 6px #0000004d;background-color:#0e0f10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3192
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsTooltip, isStandalone: true, selector: "ms-tooltip", inputs: { text: "text", position: "position", bgColor: "bgColor", showArrow: "showArrow" }, ngImport: i0, template: "<div class=\"tooltip-container\" \n [ngClass]=\"[position, showArrow ? 'with-arrow' : 'no-arrow']\"\n [ngStyle]=\"{'background-color': bgColor}\">\n <div class=\"tooltip-title\">{{ title }}</div>\n <div class=\"tooltip-paragraph\">\n <div *ngFor=\"let line of paragraphLines\" class=\"tooltip-line\">\n {{ line }}\n </div>\n </div>\n</div>\n", styles: [".tooltip-trigger{cursor:pointer;border:none;background:#007bff;color:#fff;padding:6px 12px;font-size:14px;border-radius:4px}.tooltip-wrapper:hover .tooltip-container{display:block}.top{bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px}.bottom{top:100%;left:50%;transform:translate(-50%);margin-top:8px}.left{right:100%;top:50%;transform:translateY(-50%);margin-right:8px}.right{left:100%;top:50%;transform:translateY(-50%);margin-left:8px}.top-left{bottom:100%;left:0;margin-bottom:8px;transform:none}.top-right{bottom:100%;right:0;margin-bottom:8px;transform:none}.bottom-left{top:100%;left:0;margin-top:8px;transform:none}.bottom-right{top:100%;right:0;margin-top:8px;transform:none}.tooltip-container.with-arrow:after{content:\"\";position:absolute;border-style:solid}.tooltip-container.no-arrow:after{display:none}.top.with-arrow:after{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom.with-arrow:after{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.left.with-arrow:after{top:50%;left:100%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent #0E0F10}.right.with-arrow:after{top:50%;right:100%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent #0E0F10 transparent transparent}.top-left.with-arrow:after{top:100%;left:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.top-right.with-arrow:after{top:100%;right:16px;transform:none;border-width:6px 6px 0 6px;border-color:#0E0F10 transparent transparent transparent}.bottom-left.with-arrow:after{bottom:100%;left:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.bottom-right.with-arrow:after{bottom:100%;right:16px;transform:none;border-width:0 6px 6px 6px;border-color:transparent transparent #0E0F10 transparent}.tooltip-title{font-weight:700;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-paragraph{display:flex;flex-direction:column;text-align:left}.tooltip-line{line-height:1.2;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word;text-align:left}.tooltip-wrapper{position:relative;display:inline-block}.tooltip-container{position:absolute;padding:6px 10px;color:#fff;font-size:12px;border-radius:4px;white-space:nowrap;z-index:1000;box-shadow:0 2px 6px #0000004d;background-color:#0e0f10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3064
3193
|
}
|
|
3065
3194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTooltip, decorators: [{
|
|
3066
3195
|
type: Component,
|
|
@@ -3253,11 +3382,11 @@ class MsFileUploader {
|
|
|
3253
3382
|
return this.accept.split(',').map(ext => ext.trim().toUpperCase()).join(', ');
|
|
3254
3383
|
}
|
|
3255
3384
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-2\">Upload file</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%;max-width:500px;min-width:500px}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #d1d5db;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:16px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px;font-weight:500;color:#1f2937;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:12px;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "directive", type: i2$1.InlineSVGDirective, selector: "[inlineSVG]", inputs: ["inlineSVG", "resolveSVGUrl", "replaceContents", "prepend", "injectComponent", "cacheSVG", "setSVGAttributes", "removeSVGAttributes", "forceEvalStyles", "evalScripts", "fallbackImgUrl", "fallbackSVG", "onSVGLoaded"], outputs: ["onSVGInserted", "onSVGFailed"] }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
|
|
3385
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsFileUploader, isStandalone: true, selector: "ms-file-uploader", inputs: { label: "label", required: "required", readonly: "readonly", disabled: "disabled", accept: "accept", multiple: "multiple", maxFileSize: "maxFileSize", variant: "variant", skeleton: "skeleton" }, outputs: { uploadedFilesChange: "uploadedFilesChange" }, viewQueries: [{ propertyName: "fileInputButton", first: true, predicate: ["fileInputButton"], descendants: true }, { propertyName: "fileInputDragDrop", first: true, predicate: ["fileInputDragDrop"], descendants: true }], ngImport: i0, template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-2\">Upload file</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/upload.svg'\" alt=\"Icon\">\n </span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/file-plus.svg'\" alt=\"Icon\" >\n </span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/File-pdf.svg'\" alt=\"Icon\" >\n </span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/x.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: InlineSVGModule }, { kind: "component", type: MsSpinner, selector: "ms-spinner", inputs: ["color", "size", "text"], outputs: ["htmlChange"] }] });
|
|
3257
3386
|
}
|
|
3258
3387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, decorators: [{
|
|
3259
3388
|
type: Component,
|
|
3260
|
-
args: [{ selector: 'ms-file-uploader', imports: [CommonModule, FormsModule, ReactiveFormsModule, InlineSVGModule, MsSpinner], template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-2\">Upload file</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/upload.svg'\"></span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/file-plus.svg'\"></span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span [inlineSVG]=\"'../../../../../../assets/data-grid/icons/File-pdf.svg'\"></span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" [inlineSVG]=\"'../../../../../../assets/data-grid/icons/x.svg'\"></span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%;max-width:500px;min-width:500px}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #d1d5db;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:16px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px;font-weight:500;color:#1f2937;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:12px;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
3389
|
+
args: [{ selector: 'ms-file-uploader', imports: [CommonModule, FormsModule, ReactiveFormsModule, InlineSVGModule, MsSpinner], template: "@if (skeleton) {\n <div class=\"ms-file-uploader-skeleton\" [class]=\"variant\"></div>\n} @else {\n<div class=\"file-uploader-wrapper\">\n <!-- <div *ngIf=\"label\" class=\"file-uploader-label\">\n <label>{{ label }} <span *ngIf=\"required\" class=\"required\">*</span></label>\n </div> -->\n\n <!-- ===================== BUTTON VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'button'\">\n <!-- Instructions -->\n <div class=\"file-uploader-instructions button-variant\">\n <p class=\"ms-mb-2\">Upload file</p>\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Button Upload Area -->\n <div class=\"button-upload-area\">\n <button \n type=\"button\"\n class=\"upload-button\"\n (click)=\"triggerFileInput()\"\n [disabled]=\"disabled\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/upload.svg'\" alt=\"Icon\">\n </span>\n <span>Upload file</span>\n </button>\n \n <!-- <p class=\"button-hint\">or drag and drop</p> -->\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputButton\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </ng-container>\n\n <!-- ===================== DRAG & DROP VARIANT ===================== -->\n <ng-container *ngIf=\"variant === 'dragdrop'\">\n <!-- Instructions outside the border -->\n <div class=\"file-uploader-instructions dragdrop-variant\">\n <p class=\"instruction-text\">\n <span>Max file size:</span> {{ maxFileSize }} | \n <span>Accepted formats:</span> {{ getAcceptFormats() }}\n </p>\n </div>\n\n <!-- Drag and Drop Area with Dotted Border -->\n <div \n class=\"file-uploader-dropzone\"\n [class.dragover]=\"isDragOver\"\n [class.disabled]=\"disabled\"\n [class.error]=\"showError || invalidFileError\"\n [class.focused]=\"isFocused\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDropFiles($event)\"\n (click)=\"triggerFileInput()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\">\n \n <!-- Upload Icon and Text -->\n <div class=\"dropzone-content\">\n <span class=\"upload-icon\" >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/file-plus.svg'\" alt=\"Icon\" >\n </span>\n <p class=\"upload-text\">Drag and drop your files here</p>\n <p class=\"upload-subtext\">or <span class=\"click-text\">click to browse</span></p>\n </div>\n\n <!-- Hidden File Input -->\n <input \n #fileInputDragDrop\n type=\"file\" \n [accept]=\"accept\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (change)=\"onFileInputChange($event)\"\n style=\"display: none;\">\n </div>\n </ng-container>\n\n <!-- Error Message -->\n <div *ngIf=\"showError\" class=\"error-message\">\n <p>This field is required. Please select at least one file.</p>\n </div>\n\n <!-- Uploaded Files List (Shared for both variants) -->\n <div *ngIf=\"uploadedFiles.length > 0\" class=\"uploaded-files\">\n <div class=\"files-list\">\n <div *ngFor=\"let file of uploadedFiles; let i = index\" class=\"file-item\">\n <div class=\"file-info\">\n <span >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/File-pdf.svg'\" alt=\"Icon\" >\n </span>\n <div class=\"file-details\">\n <p class=\"file-name\" [title]=\"file.name\">{{ file.name }}</p>\n <p class=\"file-size\">{{ file.size }}</p>\n </div>\n </div>\n\n <div class=\"file-actions\">\n <!-- Loader State -->\n <div *ngIf=\"file.isLoading\" class=\"loader\">\n <ms-spinner [color]=\"'primary'\" [size]=\"'sm'\"></ms-spinner>\n </div>\n\n <!-- Success Tick State -->\n <div *ngIf=\"file.isSuccess && !file.isLoading\" class=\"success-tick\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </div>\n\n <!-- Remove Button State -->\n <button \n *ngIf=\"!file.isLoading && !file.isSuccess\"\n type=\"button\"\n class=\"remove-btn\"\n (click)=\"removeFile(i)\"\n [disabled]=\"disabled\">\n <span class=\"d-flex align-items-center\" >\n <img [src]=\"'https://ds-doc.sentrixbar.com/assets/data-grid/icons/x.svg'\" alt=\"Icon\">\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n}", styles: [".file-uploader-wrapper{display:flex;flex-direction:column;gap:10px;width:100%}.file-uploader-wrapper .file-uploader-label{display:flex;align-items:center;gap:4px;margin-bottom:8px}.file-uploader-wrapper .file-uploader-label label{font-size:14px;font-weight:600;color:#1f2937;margin:0}.file-uploader-wrapper .file-uploader-label .required{color:#ef4444;font-weight:700}.file-uploader-wrapper .file-uploader-instructions{padding:8px 0;border-radius:4px}.file-uploader-wrapper .file-uploader-instructions .instruction-text{font-size:13px!important;color:#6a6b6d;margin:0;line-height:1.5;font-weight:400}.file-uploader-wrapper .file-uploader-instructions .instruction-text span{font-size:13px!important}.file-uploader-wrapper .file-uploader-instructions .instruction-text strong{color:#374151;font-weight:600}.file-uploader-wrapper .file-uploader-instructions.button-variant{padding:12px 0!important}.file-uploader-wrapper .button-upload-area{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-radius:8px}.file-uploader-wrapper .button-upload-area .upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background-color:#0084ff;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.file-uploader-wrapper .button-upload-area .upload-button svg{width:20px;height:20px}.file-uploader-wrapper .button-upload-area .upload-button:active:not(:disabled){transform:scale(.98)}.file-uploader-wrapper .button-upload-area .upload-button:disabled{background-color:#d1d5db;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .button-upload-area .upload-button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.file-uploader-wrapper .button-upload-area .button-hint{font-size:13px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone{position:relative;padding:20px;border:3px dotted #CCCCCC;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-height:170px}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled){border-color:#0084ff}.file-uploader-wrapper .file-uploader-dropzone.dragover:not(.disabled){border-color:#3b82f6;background-color:#eff6ff;transform:scale(1.02)}.file-uploader-wrapper .file-uploader-dropzone.disabled{background-color:#f3f4f6;cursor:not-allowed;opacity:.6}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled){border-color:#ef4444;background-color:#fef2f2}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled):hover{border-color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.error:not(.disabled) .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled){border-color:#0084ff;outline-offset:2px}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error{border-color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-icon{color:#ef4444}.file-uploader-wrapper .file-uploader-dropzone.focused:not(.disabled).error .dropzone-content .upload-text{color:#dc2626}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content{text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-icon{width:32px;height:32px;color:#6b7280;transition:color .3s ease}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-text{font-size:14px!important;font-weight:400!important;color:#6a6b6d;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext{font-size:14px;color:#6b7280;margin:0}.file-uploader-wrapper .file-uploader-dropzone .dropzone-content .upload-subtext .click-text{color:#3b82f6;font-weight:600;cursor:pointer}.file-uploader-wrapper .file-uploader-dropzone:hover:not(.disabled) .upload-icon{color:#3b82f6}.file-uploader-wrapper .uploaded-files .uploaded-title{font-size:14px;font-weight:600;color:#1f2937;margin:0 0 12px}.file-uploader-wrapper .uploaded-files .files-list{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.file-uploader-wrapper .uploaded-files .file-item{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border:1px solid #B7DCFF;border-radius:6px;background:#0084ff1a;transition:all .2s ease}.file-uploader-wrapper .uploaded-files .file-item .file-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-icon{width:24px;height:24px;color:#6b7280;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details{display:flex;flex-direction:column;gap:4px;min-width:0}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-name{font-size:14px!important;font-weight:400!important;color:#1b1f22;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-uploader-wrapper .uploaded-files .file-item .file-info .file-details .file-size{font-size:14px!important;color:#9ca3af;margin:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#10b981;animation:scaleIn .3s ease-out}.file-uploader-wrapper .uploaded-files .file-item .file-actions .success-tick svg{width:20px;height:20px;stroke-width:3}.file-uploader-wrapper .uploaded-files .file-item .remove-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background-color:transparent;cursor:pointer;border-radius:4px;transition:all .2s ease;flex-shrink:0;border:none;box-shadow:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:focus-visible{border:none;box-shadow:none;outline:none}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:hover:not(:disabled){box-shadow:0 0 0 1px #b7dcff;border:1px solid #0084FF}.file-uploader-wrapper .uploaded-files .file-item .remove-btn span{width:16px;height:16px}.file-uploader-wrapper .uploaded-files .file-item .remove-btn:disabled{cursor:not-allowed;opacity:.5}.file-uploader-wrapper .error-message{margin-top:8px;padding:8px 12px;background-color:#fef2f2;border-left:3px solid #ef4444;border-radius:4px}.file-uploader-wrapper .error-message p{font-size:13px;color:#dc2626;margin:0;font-weight:500}.ms-file-uploader-skeleton.button{width:150px;height:40px}.ms-file-uploader-skeleton.dragdrop{width:500px;height:215px}.ms-file-uploader-skeleton{border-radius:4px;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
3261
3390
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
3262
3391
|
type: Input
|
|
3263
3392
|
}], required: [{
|
|
@@ -3286,68 +3415,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3286
3415
|
args: ['fileInputDragDrop']
|
|
3287
3416
|
}] } });
|
|
3288
3417
|
|
|
3289
|
-
const FLAGICONS = {
|
|
3290
|
-
"afghanistan": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178571\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178571)\"><path d=\"M17.2178 1.19002C15.5908 0.404014 13.8067 -0.00285185 11.9998 1.5046e-05C10.1298 1.5046e-05 8.35977 0.428015 6.78277 1.19002L5.73877 12L6.78277 22.81C8.4095 23.5958 10.1932 24.0027 11.9998 24C13.8698 24 15.6398 23.572 17.2178 22.81L18.2598 12L17.2178 1.19002Z\" fill=\"#D80027\"/><path d=\"M6.783 1.19141C4.75006 2.17283 3.03518 3.70778 1.83534 5.61996C0.635501 7.53213 -0.00063641 9.74397 4.77761e-07 12.0014C-0.000260168 14.2585 0.636054 16.4699 1.83587 18.3817C3.03569 20.2935 4.75037 21.8281 6.783 22.8094V1.19141Z\" fill=\"black\"/><path d=\"M17.2178 1.19141V22.8104C19.2505 21.8288 20.9652 20.2938 22.1649 18.3817C23.3645 16.4695 24.0005 14.2577 23.9998 12.0004C24.0003 9.74324 23.3642 7.53169 22.1646 5.61972C20.9649 3.70775 19.2504 2.1729 17.2178 1.19141Z\" fill=\"#496E2D\"/><path d=\"M11.9998 7.82667C11.4463 7.8181 10.8966 7.91972 10.3828 8.12562C9.86892 8.33151 9.40115 8.63756 9.0067 9.02596C8.61224 9.41435 8.29899 9.87733 8.08517 10.3879C7.87135 10.8986 7.76123 11.4466 7.76123 12.0002C7.76123 12.5537 7.87135 13.1018 8.08517 13.6124C8.29899 14.123 8.61224 14.586 9.0067 14.9744C9.40115 15.3628 9.86892 15.6688 10.3828 15.8747C10.8966 16.0806 11.4463 16.1822 11.9998 16.1737C13.0955 16.1567 14.1406 15.7095 14.9094 14.9287C15.6783 14.1479 16.1092 13.096 16.1092 12.0002C16.1092 10.9043 15.6783 9.85248 14.9094 9.07164C14.1406 8.2908 13.0955 7.84363 11.9998 7.82667Z\" fill=\"#FFDA44\"/><path d=\"M12 10.4355C11.424 10.4355 10.957 10.9025 10.957 11.4795V13.0445H13.044V11.4795C13.044 10.9025 12.577 10.4355 12.001 10.4355H12Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
3291
|
-
"albania": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178584\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178584)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#D80027\"/><path d=\"M18.7828 8.90733H14.4358C14.5857 8.75027 14.7013 8.56373 14.7752 8.35957C14.8492 8.15542 14.8798 7.93811 14.8652 7.72147C14.8506 7.50483 14.7911 7.2936 14.6904 7.10122C14.5898 6.90883 14.4502 6.73949 14.2805 6.60397C14.1109 6.46844 13.9149 6.36971 13.705 6.31403C13.4952 6.25836 13.276 6.24696 13.0615 6.28057C12.847 6.31419 12.6418 6.39207 12.459 6.50926C12.2762 6.62646 12.1198 6.78041 11.9998 6.96133C11.8144 6.68003 11.5432 6.46609 11.2265 6.35134C10.9098 6.23659 10.5645 6.22718 10.242 6.32449C9.91945 6.42181 9.63698 6.62065 9.43659 6.89143C9.2362 7.16221 9.12859 7.49046 9.12977 7.82733C9.12977 8.24733 9.29577 8.62733 9.56377 8.90733H5.21777C5.21777 10.0603 6.22177 10.9943 7.37377 10.9943H7.30377C7.30377 12.1473 8.23877 13.0813 9.39177 13.0813C9.39177 13.4553 9.48977 13.8053 9.66177 14.1083L7.93077 15.8383L9.25877 17.1673L11.1428 15.2833C11.2168 15.3103 11.2928 15.3323 11.3718 15.3463L10.2328 17.9163L11.9998 19.8273L13.7668 17.9173L12.6288 15.3473C12.7068 15.333 12.7834 15.312 12.8578 15.2843L14.7418 17.1683L16.0698 15.8403L14.3388 14.1083C14.5108 13.8063 14.6088 13.4563 14.6088 13.0823C14.8828 13.0823 15.1542 13.0283 15.4074 12.9235C15.6606 12.8186 15.8907 12.6649 16.0845 12.4711C16.2783 12.2773 16.432 12.0472 16.5369 11.794C16.6418 11.5408 16.6958 11.2694 16.6958 10.9953H16.6258C17.7788 10.9953 18.7828 10.0613 18.7828 8.90833V8.90733Z\" fill=\"black\"/></g></svg>",
|
|
3292
|
-
"algeria": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178592\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178592)\"><path d=\"M12.0001 0C18.6281 0 24.0001 5.373 24.0001 12C24.0001 18.627 18.6281 24 12.0001 24C12.0001 23.478 10.4351 12 10.4351 12L12.0011 0H12.0001Z\" fill=\"#F0F0F0\"/><path d=\"M12 24C5.373 24 0 18.627 0 12C0 5.373 5.373 0 12 0\" fill=\"#496E2D\"/><path d=\"M14.578 9.69922L13.594 11.0562L11.999 10.5382L12.985 11.8942L12.001 13.2512L13.595 12.7312L14.581 14.0872L14.58 12.4112L16.174 11.8922L14.579 11.3752V9.70022L14.578 9.69922Z\" fill=\"#D80027\"/><path d=\"M12.9952 15.3917C12.4793 15.3913 11.9702 15.2733 11.5068 15.0465C11.0434 14.8197 10.6378 14.4901 10.321 14.0829C10.0042 13.6756 9.78447 13.2015 9.67859 12.6965C9.57272 12.1916 9.58347 11.6691 9.71003 11.1689C9.83658 10.6687 10.0756 10.204 10.4089 9.81015C10.7422 9.4163 11.161 9.1037 11.6333 8.89615C12.1057 8.68859 12.6192 8.59157 13.1347 8.61245C13.6502 8.63334 14.1542 8.77159 14.6082 9.01667C14.0209 8.44205 13.2771 8.05354 12.4699 7.89985C11.6627 7.74615 10.8282 7.8341 10.0708 8.15267C9.31341 8.47125 8.66689 9.00627 8.21227 9.6907C7.75764 10.3751 7.51514 11.1785 7.51514 12.0002C7.51514 12.8218 7.75764 13.6252 8.21227 14.3096C8.66689 14.9941 9.31341 15.5291 10.0708 15.8477C10.8282 16.1662 11.6627 16.2542 12.4699 16.1005C13.2771 15.9468 14.0209 15.5583 14.6082 14.9837C14.1282 15.2437 13.5782 15.3917 12.9952 15.3917Z\" fill=\"#D80027\"/></g></svg>",
|
|
3293
|
-
"andorra": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178602\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178602)\"><path d=\"M6.78277 22.81C8.4095 23.5958 10.1932 24.0027 11.9998 24C13.8698 24 15.6398 23.572 17.2178 22.81L18.2598 12L17.2178 1.19002C15.5908 0.404014 13.8067 -0.00285185 11.9998 1.5046e-05C10.1298 1.5046e-05 8.35977 0.428015 6.78277 1.19002L5.73877 12L6.78277 22.81Z\" fill=\"#FFDA44\"/><path d=\"M17.2168 22.8104C19.2495 21.8288 20.9642 20.2938 22.1639 18.3817C23.3635 16.4695 23.9995 14.2577 23.9988 12.0004C23.9993 9.74324 23.3633 7.53169 22.1636 5.61972C20.964 3.70775 19.2494 2.1729 17.2168 1.19141V22.8104Z\" fill=\"#D80027\"/><path d=\"M6.783 22.8095V1.18945C4.74991 2.17095 3.03493 3.70606 1.83508 5.61843C0.635224 7.53079 -0.000824239 9.74285 8.01622e-07 12.0005C-0.000259844 14.2576 0.636054 16.469 1.83587 18.3808C3.03569 20.2925 4.75037 21.8282 6.783 22.8095Z\" fill=\"#0052B4\"/><path d=\"M12.0001 16.1731V12.0001H15.1301V13.5651C15.1301 13.8371 14.6091 14.8331 13.3201 15.6521C12.8331 15.9621 12.3281 16.0621 12.0001 16.1731ZM12.0001 8.86914H8.87012V11.9991H12.0001V8.86914Z\" fill=\"#D80027\"/><path d=\"M13.5652 7.82623C13.5652 7.64309 13.517 7.46318 13.4254 7.30459C13.3338 7.146 13.2021 7.01433 13.0434 6.9228C12.8848 6.83127 12.7049 6.78313 12.5217 6.7832C12.3386 6.78328 12.1587 6.83157 12.0002 6.92323C11.8416 6.83157 11.6617 6.78328 11.4786 6.7832C11.2955 6.78313 11.1155 6.83127 10.9569 6.9228C10.7983 7.01433 10.6666 7.146 10.575 7.30459C10.4834 7.46318 10.4352 7.64309 10.4352 7.82623H7.82617V13.0442C7.82617 14.9862 9.36917 16.1092 10.5782 16.6912C10.4623 16.8899 10.4154 17.1212 10.4446 17.3493C10.4738 17.5774 10.5776 17.7894 10.7398 17.9524C10.902 18.1154 11.1135 18.2202 11.3415 18.2506C11.5694 18.2809 11.801 18.2351 12.0002 18.1202C12.1994 18.2342 12.4307 18.2793 12.6581 18.2486C12.8856 18.2179 13.0966 18.1131 13.2585 17.9504C13.4204 17.7877 13.5242 17.5762 13.5538 17.3485C13.5833 17.1209 13.5371 16.8899 13.4222 16.6912C14.6322 16.1092 16.1742 14.9862 16.1742 13.0442V7.82523H13.5652V7.82623ZM14.6092 13.0442C14.6092 13.3152 14.6092 14.1432 13.3212 14.9622C12.9067 15.2202 12.4638 15.4292 12.0012 15.5852C11.5379 15.4294 11.0943 15.2203 10.6792 14.9622C9.39117 14.1422 9.39117 13.3162 9.39117 13.0442V9.39023H14.6092V13.0422V13.0442Z\" fill=\"#FF9811\"/></g></svg>",
|
|
3294
|
-
"angola": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178613\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178613)\"><path d=\"M0 12C0 5.373 5.373 0 12 0C18.627 0 24 5.373 24 12C23.478 12 12 13.565 12 13.565L0 12Z\" fill=\"#D80027\"/><path d=\"M24 12C24 18.628 18.627 24 12 24C5.373 24 0 18.628 0 12\" fill=\"black\"/><path d=\"M10.354 9.54466L11.371 10.2827L10.983 11.4787L12 10.7387L13.017 11.4767L12.627 10.2817L13.644 9.54166L12.387 9.54266L11.998 8.34766L11.611 9.54366H10.353L10.354 9.54466Z\" fill=\"#FFDA44\"/><path d=\"M15.0002 6.80397C14.0886 6.27628 13.0535 5.99956 12.0002 6.00197V7.56697C12.7786 7.56528 13.5435 7.76989 14.2172 8.15997C15.2347 8.74908 15.9769 9.71772 16.2812 10.8534C16.5855 11.9891 16.4269 13.1991 15.8402 14.218C15.2511 15.2355 14.2824 15.9778 13.1467 16.282C12.0111 16.5863 10.8011 16.4277 9.78216 15.841C9.18573 15.4971 8.67816 15.0184 8.30016 14.443L6.99316 15.306C7.50532 16.0841 8.19269 16.7314 9.00016 17.196C10.3785 17.9895 12.0152 18.204 13.5514 17.7925C15.0876 17.381 16.398 16.3771 17.1952 15.001C17.9893 13.6225 18.2042 11.9853 17.7927 10.4486C17.3812 8.91186 16.3769 7.60113 15.0002 6.80397Z\" fill=\"#FFDA44\"/><path d=\"M8.53913 10.9551C8.33996 11.3192 8.2936 11.7476 8.41025 12.1459C8.52689 12.5442 8.79699 12.8799 9.16113 13.0791L14.2451 15.8571C13.8991 16.4891 14.0831 17.2581 14.7151 17.6041L16.0881 18.3551C16.2384 18.4373 16.4033 18.4891 16.5736 18.5076C16.7438 18.526 16.9161 18.5108 17.0804 18.4627C17.2448 18.4146 17.3981 18.3346 17.5315 18.2272C17.6649 18.1199 17.7759 17.9873 17.8581 17.8371L18.6091 16.4641L8.53913 10.9551Z\" fill=\"#FFDA44\"/></g></svg>",
|
|
3295
|
-
"antigua": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178624\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178624)\"><path d=\"M0 11.9992C0 12.8202 0.083 13.6232 0.24 14.3992L12 15.1292L23.76 14.3992C24.082 12.8154 24.082 11.183 23.76 9.59919L12 8.86719L0.24 9.59719C0.083 10.3742 0 11.1762 0 11.9992Z\" fill=\"#0052B4\"/><path d=\"M23.7602 14.4004H0.240234C1.35223 19.8754 6.19423 24.0004 12.0002 24.0004C17.8052 24.0004 22.6482 19.8774 23.7602 14.4004Z\" fill=\"#F0F0F0\"/><path d=\"M0.240234 9.6H23.7602C22.6482 4.123 17.8052 0 12.0002 0C6.19423 0 1.35223 4.123 0.240234 9.6Z\" fill=\"black\"/><path d=\"M17.2182 9.60072H6.7832L8.9152 8.59772L7.7802 6.53272L10.0952 6.97572L10.3882 4.63672L12.0012 6.35672L13.6132 4.63672L13.9062 6.97572L16.2212 6.53272L15.0862 8.59772L17.2182 9.59972V9.60072Z\" fill=\"#FFDA44\"/><path d=\"M1.35768e-05 12.0008C1.35768e-05 18.6288 5.37301 24.0008 12 24.0008L2.40001 4.80078C0.838637 6.87609 -0.00390063 9.4037 1.35768e-05 12.0008ZM12 24.0008C18.627 24.0008 24 18.6278 24 12.0008C24 9.29878 23.107 6.80578 21.6 4.80078L12 24.0008Z\" fill=\"#A2001D\"/></g></svg>",
|
|
3296
|
-
"barbuda": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178624\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178624)\"><path d=\"M0 11.9992C0 12.8202 0.083 13.6232 0.24 14.3992L12 15.1292L23.76 14.3992C24.082 12.8154 24.082 11.183 23.76 9.59919L12 8.86719L0.24 9.59719C0.083 10.3742 0 11.1762 0 11.9992Z\" fill=\"#0052B4\"/><path d=\"M23.7602 14.4004H0.240234C1.35223 19.8754 6.19423 24.0004 12.0002 24.0004C17.8052 24.0004 22.6482 19.8774 23.7602 14.4004Z\" fill=\"#F0F0F0\"/><path d=\"M0.240234 9.6H23.7602C22.6482 4.123 17.8052 0 12.0002 0C6.19423 0 1.35223 4.123 0.240234 9.6Z\" fill=\"black\"/><path d=\"M17.2182 9.60072H6.7832L8.9152 8.59772L7.7802 6.53272L10.0952 6.97572L10.3882 4.63672L12.0012 6.35672L13.6132 4.63672L13.9062 6.97572L16.2212 6.53272L15.0862 8.59772L17.2182 9.59972V9.60072Z\" fill=\"#FFDA44\"/><path d=\"M1.35768e-05 12.0008C1.35768e-05 18.6288 5.37301 24.0008 12 24.0008L2.40001 4.80078C0.838637 6.87609 -0.00390063 9.4037 1.35768e-05 12.0008ZM12 24.0008C18.627 24.0008 24 18.6278 24 12.0008C24 9.29878 23.107 6.80578 21.6 4.80078L12 24.0008Z\" fill=\"#A2001D\"/></g></svg>",
|
|
3297
|
-
"argentina": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><mask id=\"mask0_1063_178635\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\"><path d=\"M0 0H24V24H0V0Z\" fill=\"white\"/></mask><g mask=\"url(#mask0_1063_178635)\"><path d=\"M12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24Z\" fill=\"#F0F0F0\"/><path d=\"M11.9999 -0.00195265C9.74282 -0.00221329 7.53141 0.634101 5.61962 1.83392C3.70783 3.03374 2.17319 4.74841 1.19192 6.78105H22.8099C21.8285 4.74811 20.2935 3.03323 18.3814 1.83339C16.4692 0.633547 14.2574 -0.00258954 11.9999 -0.00195265ZM11.9999 23.998C14.2574 23.9987 16.4692 23.3625 18.3814 22.1627C20.2935 20.9629 21.8285 19.248 22.8099 17.215H1.19092C2.1722 19.2482 3.70709 20.9633 5.61928 22.1633C7.53146 23.3633 9.74337 23.9996 12.0009 23.999L11.9999 23.998Z\" fill=\"#338AF3\"/><path d=\"M15.5861 11.9999L14.1211 12.6899L14.9011 14.1089L13.3101 13.8039L13.1081 15.4119L12.0001 14.2289L10.8911 15.4119L10.6901 13.8039L9.09806 14.1089L9.87806 12.6889L8.41406 11.9999L9.88006 11.3099L9.10006 9.89089L10.6901 10.1959L10.8921 8.58789L12.0001 9.77089L13.1081 8.58789L13.3101 10.1959L14.9001 9.88989L14.1201 11.3099L15.5851 11.9989L15.5861 11.9999Z\" fill=\"#FFDA44\"/></g></svg>"
|
|
3298
|
-
};
|
|
3299
|
-
|
|
3300
|
-
class MsFlagIcon {
|
|
3301
|
-
sanitizer;
|
|
3302
|
-
name;
|
|
3303
|
-
svg;
|
|
3304
|
-
size = 'small'; // default
|
|
3305
|
-
width = 16;
|
|
3306
|
-
height = 16;
|
|
3307
|
-
constructor(sanitizer) {
|
|
3308
|
-
this.sanitizer = sanitizer;
|
|
3309
|
-
}
|
|
3310
|
-
ngOnInit() {
|
|
3311
|
-
const icon = FLAGICONS[this.name] || '';
|
|
3312
|
-
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
3313
|
-
this.getsize();
|
|
3314
|
-
}
|
|
3315
|
-
ngOnChanges() {
|
|
3316
|
-
const icon = FLAGICONS[this.name] || '';
|
|
3317
|
-
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
3318
|
-
this.getsize();
|
|
3319
|
-
}
|
|
3320
|
-
getsize() {
|
|
3321
|
-
switch (this.size) {
|
|
3322
|
-
case 'small':
|
|
3323
|
-
this.width = this.height = 16;
|
|
3324
|
-
// this.strokeWidth = 1.25;
|
|
3325
|
-
break;
|
|
3326
|
-
case 'medium':
|
|
3327
|
-
this.width = this.height = 20;
|
|
3328
|
-
// this.strokeWidth = 1.5;
|
|
3329
|
-
break;
|
|
3330
|
-
case 'large':
|
|
3331
|
-
this.width = this.height = 24;
|
|
3332
|
-
// this.strokeWidth = 1.75;
|
|
3333
|
-
break;
|
|
3334
|
-
default:
|
|
3335
|
-
this.width = this.height = 20;
|
|
3336
|
-
// this.strokeWidth = 1.5;
|
|
3337
|
-
}
|
|
3338
|
-
}
|
|
3339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFlagIcon, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
3340
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsFlagIcon, isStandalone: true, selector: "ms-flag-icon", inputs: { name: "name", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3341
|
-
}
|
|
3342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFlagIcon, decorators: [{
|
|
3343
|
-
type: Component,
|
|
3344
|
-
args: [{ selector: 'ms-flag-icon', imports: [CommonModule, FormsModule], template: "<span [innerHTML]=\"svg\" [ngStyle]=\"{'width.px': width, 'height.px': height, 'display':'inline-block'}\"></span>", styles: ["span{display:inline-block;width:24px;height:24px}\n"] }]
|
|
3345
|
-
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { name: [{
|
|
3346
|
-
type: Input
|
|
3347
|
-
}], size: [{
|
|
3348
|
-
type: Input
|
|
3349
|
-
}] } });
|
|
3350
|
-
|
|
3351
3418
|
class MsTopbar {
|
|
3352
3419
|
topbarService;
|
|
3353
3420
|
variant = 'title';
|
|
@@ -3372,7 +3439,7 @@ class MsTopbar {
|
|
|
3372
3439
|
this.searchChange.emit('');
|
|
3373
3440
|
}
|
|
3374
3441
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTopbar, deps: [{ token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3375
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTopbar, isStandalone: true, selector: "ms-topbar", inputs: { variant: "variant", title: "title", breadcrumb: "breadcrumb", detail: "detail" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "@if(variant ==='detail'){\n<div class=\"ms-topbar-container ms-card-header\">\n <div class=\"ms-topbar-title-lg\">\n <div class=\"ms-title-lg\">\n {{detail?.title}}\n </div>\n <div class=\"ms-description\">\n {{detail?.description}}\n </div>\n </div>\n</div>\n} @else if(variant ==='title'){\n<div class=\"ms-topbar-container ms-card-header\">\n <div class=\"ms-topbar-title-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M3.30225 10.0003L10.0003 13.3098L16.6983 10.0003M3.30225 13.3098L10.0003 16.6193L16.6983 13.3098M10.0003 3.38135L3.30225 6.69085L10.0003 10.0003L16.6983 6.69085L10.0003 3.38135Z\"\n stroke=\"#1B1F22\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"ms-title-sm\">\n {{detail?.title}}\n </div>\n </div>\n <div class=\"ms-search\">\n <div class=\"search-container\">\n <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">×</button>\n </div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n <path\n d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n fill=\"#1B1F22\" />\n </svg>\n </div>\n</div>\n} @else if(variant ==='breadcrumb'){\n<div class=\"ms-topbar-container ms-card-header\">\n <nav class=\"ms-breadcrumb\">\n <ng-container *ngFor=\"let item of detail?.BreadcrumbItem; let last = last\">\n <a *ngIf=\"!last\" [ngClass]=\"{active: item?.router}\" class=\"ms-breadcrumb-item\">\n {{ item.label }}\n </a>\n <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n <span class=\"breadcrumb-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 11.5L12 4l9 7.5\"></path>\n <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n </svg>\n </span>\n {{ item.label }}\n </span>\n <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n </ng-container>\n </nav>\n <div class=\"ms-search\">\n <div class=\"search-container\">\n <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">×</button>\n </div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n <path\n d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n fill=\"#1B1F22\" />\n </svg>\n </div>\n</div>\n}", styles: ["@charset \"UTF-8\";.ms-topbar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px 32px;height:70px!important;border-radius:11px 11px 0 0/11px 11px 0px 0px}.ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}.search-container{position:relative;width:240px}.search-input{width:100%;padding:8px 12px 8px 36px;font-size:14px;border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;outline:none;box-sizing:border-box;transition:border-color .3s ease}.search-input:focus{border-color:#999}.search-input::placeholder{color:#aaa}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}.search-input:valid~.clear-btn,.search-input:focus~.clear-btn{display:block}.clear-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:24px;color:#999;cursor:pointer;display:none;width:24px;height:24px;line-height:20px;text-align:center}.ms-search{display:flex;align-items:center;gap:10px}.ms-topbar-title-sm{display:flex}.ms-title-sm{font-size:16px;font-weight:600;margin-left:6px;color:#1b1f22}.ms-title-lg{font-size:32px!important;font-weight:550!important;color:#1b1f22;margin-bottom:10px}.ms-description{font-size:16px!important;color:#6a6b6d!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3442
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTopbar, isStandalone: true, selector: "ms-topbar", inputs: { variant: "variant", title: "title", breadcrumb: "breadcrumb", detail: "detail" }, outputs: { searchChange: "searchChange" }, usesOnChanges: true, ngImport: i0, template: "@if(variant ==='detail'){\n<div class=\"ms-topbar-container ms-card-header\">\n <div class=\"ms-topbar-title-lg\">\n <div class=\"ms-title-lg\">\n {{detail?.title}}\n </div>\n <div class=\"ms-description\">\n {{detail?.description}}\n </div>\n </div>\n</div>\n} @else if(variant ==='title'){\n<div class=\"ms-topbar-container ms-card-header\">\n <div class=\"ms-topbar-title-sm\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path\n d=\"M3.30225 10.0003L10.0003 13.3098L16.6983 10.0003M3.30225 13.3098L10.0003 16.6193L16.6983 13.3098M10.0003 3.38135L3.30225 6.69085L10.0003 10.0003L16.6983 6.69085L10.0003 3.38135Z\"\n stroke=\"#1B1F22\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <div class=\"ms-title-sm\">\n {{detail?.title}}\n </div>\n </div>\n <div class=\"ms-search\">\n <div class=\"search-container\">\n <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">×</button>\n </div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n <path\n d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n fill=\"#1B1F22\" />\n </svg>\n </div>\n</div>\n} @else if(variant ==='breadcrumb'){\n<div class=\"ms-topbar-container ms-card-header\">\n <nav class=\"ms-breadcrumb\">\n <ng-container *ngFor=\"let item of detail?.BreadcrumbItem; let last = last\">\n <a *ngIf=\"!last\" [ngClass]=\"{active: item?.router}\" class=\"ms-breadcrumb-item\">\n {{ item.label }}\n </a>\n <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n <span class=\"breadcrumb-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 11.5L12 4l9 7.5\"></path>\n <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n </svg>\n </span>\n {{ item.label }}\n </span>\n <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n </ng-container>\n </nav>\n <div class=\"ms-search\">\n <div class=\"search-container\">\n <svg class=\"search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" class=\"search-input\" placeholder=\"Search\" required (input)=\"onSearch($event)\">\n <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\"\n onclick=\"this.previousElementSibling.value=''; this.previousElementSibling.focus();\">×</button>\n </div>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"#1B1F22\" stroke-width=\"1.25\" stroke-linejoin=\"round\" />\n <path\n d=\"M8.00024 4.3335L8.0003 3.7085H8.00024V4.3335ZM8.24438 4.34229L8.73773 4.726C8.87974 4.54341 8.9093 4.29732 8.81455 4.08629C8.71981 3.87527 8.51626 3.73383 8.28545 3.71864L8.24438 4.34229ZM7.33325 7.00049H6.70825V7.00054L7.33325 7.00049ZM10.0676 11.0269L10.4206 11.5426C10.6113 11.4121 10.7144 11.1872 10.6888 10.9576C10.6632 10.7281 10.5131 10.5313 10.2985 10.446L10.0676 11.0269ZM8.00024 11.6665V12.2915H8.0003L8.00024 11.6665ZM4.33325 8.00049H3.70825V8.00054L4.33325 8.00049ZM8.00024 4.3335L8.00019 4.9585C8.06491 4.9585 8.13205 4.96124 8.20332 4.96593L8.24438 4.34229L8.28545 3.71864C8.19529 3.7127 8.09969 3.7085 8.0003 3.7085L8.00024 4.3335ZM8.24438 4.34229L7.75104 3.95857C7.09798 4.79822 6.70825 5.85471 6.70825 7.00049H7.33325H7.95825C7.95825 6.14265 8.2491 5.35423 8.73773 4.726L8.24438 4.34229ZM7.33325 7.00049L6.70825 7.00054C6.70841 9.09376 8.00599 10.8801 9.8368 11.6077L10.0676 11.0269L10.2985 10.446C8.92647 9.90079 7.95837 8.56342 7.95825 7.00044L7.33325 7.00049ZM10.0676 11.0269L9.71461 10.5111C9.22599 10.8456 8.63689 11.0414 8.00019 11.0415L8.00024 11.6665L8.0003 12.2915C8.89814 12.2914 9.73183 12.0141 10.4206 11.5426L10.0676 11.0269ZM8.00024 11.6665V11.0415C6.32032 11.0415 4.9584 9.68003 4.95825 8.00043L4.33325 8.00049L3.70825 8.00054C3.70846 10.3707 5.63029 12.2915 8.00024 12.2915V11.6665ZM4.33325 8.00049H4.95825C4.95825 6.32062 6.32038 4.9585 8.00024 4.9585V4.3335V3.7085C5.63002 3.7085 3.70825 5.63027 3.70825 8.00049H4.33325Z\"\n fill=\"#1B1F22\" />\n </svg>\n </div>\n</div>\n}", styles: ["@charset \"UTF-8\";.ms-topbar-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px 32px;height:70px!important;border-radius:11px 11px 0 0/11px 11px 0px 0px}.ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}.search-container{position:relative;width:240px}.search-input{width:100%;padding:8px 12px 8px 36px;font-size:14px;border:1px solid #E0E0E0;border-radius:8px;background-color:#fff;outline:none;box-sizing:border-box;transition:border-color .3s ease}.search-input:focus{border-color:#999}.search-input::placeholder{color:#aaa}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}.search-input:valid~.clear-btn,.search-input:focus~.clear-btn{display:block}.clear-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:24px;color:#999;cursor:pointer;display:none;width:24px;height:24px;line-height:20px;text-align:center}.ms-search{display:flex;align-items:center;gap:10px}.ms-topbar-title-sm{display:flex}.ms-title-sm{font-size:16px;font-weight:600;margin-left:6px;color:#1b1f22}.ms-title-lg{font-size:32px!important;font-weight:550!important;color:#1b1f22;margin-bottom:10px}.ms-description{font-size:16px!important;color:#6a6b6d!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3376
3443
|
}
|
|
3377
3444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTopbar, decorators: [{
|
|
3378
3445
|
type: Component,
|
|
@@ -3407,7 +3474,7 @@ class MsTabs {
|
|
|
3407
3474
|
this.select.emit(selectedTab);
|
|
3408
3475
|
}
|
|
3409
3476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3410
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTabs, isStandalone: true, selector: "ms-tabs", inputs: { tabsType: "tabsType", styleType: "styleType", tabsList: "tabsList", skeleton: "skeleton", disabled: "disabled" }, outputs: { select: "select" }, ngImport: i0, template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div class=\"tab skeleton\"></div>\n </div>\n</div>\n}", styles: [".ms-default-tabs .tabs{display:flex;gap:20px}.ms-default-tabs input[type=radio]{display:none}.ms-default-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-tabs .tab.skeleton{background:#ebebeb;padding:7px 24px}.ms-pill-tabs .tabs{display:flex;gap:20px}.ms-pill-tabs input[type=radio]{display:none}.ms-pill-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs{display:flex;gap:20px}.ms-line-tabs .ms-tab:hover{color:#1b1f22!important;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22!important;border-bottom:2px solid #0084FF}.ms-default-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-default-vertical-tabs input[type=radio]{display:none}.ms-default-vertical-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-vertical-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-vertical-tabs .tab.skeleton{background:#ebebeb;padding:16px 24px}.ms-pill-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-pill-vertical-tabs input[type=radio]{display:none}.ms-pill-vertical-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-line-tabs input[type=radio]{display:none}.ms-line-tabs .ms-tab{padding:7px 12px;background:none;color:#6a6b6d!important;border:0;cursor:pointer;font-size:14px;font-weight:450}.ms-line-tabs .ms-tab:hover{color:#1b1f22;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;border-bottom:2px solid #0084FF;outline:1px solid #0084FF!important;outline-color:#0084ff!important;border-radius:6px;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsTabs, isStandalone: true, selector: "ms-tabs", inputs: { tabsType: "tabsType", styleType: "styleType", tabsList: "tabsList", skeleton: "skeleton", disabled: "disabled" }, outputs: { select: "select" }, ngImport: i0, template: "@if(!skeleton && tabsType === 'horizontel'){\n@if(styleType === 'default'){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-tabs\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if (!skeleton && tabsType === 'vertical'){\n@if(styleType === 'default'){\n<div class=\"ms-default-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'pill'){\n<div class=\"ms-pill-vertical-tabs\">\n <div class=\"tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}@else if (styleType === 'line'){\n<div class=\"ms-line-tabs\">\n <div class=\"ms-tabs-vertical\">\n <div *ngFor=\"let item of tabsList; let i = index\">\n <input type=\"radio\" [id]=\"item.id\" [name]=\"item.name\" [checked]=\"item.checked\"\n (click)=\"onSelect(item , i )\" />\n <label [for]=\"item.id\" class=\"ms-tab\" [ngClass]=\"{ disabled: disabled || item.disable}\">\n {{ item.name }}\n </label>\n </div>\n </div>\n</div>\n}\n}@else if(skeleton){\n<div class=\"ms-default-tabs\">\n <div class=\"tabs\">\n <div class=\"tab skeleton\"></div>\n </div>\n</div>\n}", styles: [".ms-default-tabs .tabs{display:flex;gap:20px}.ms-default-tabs input[type=radio]{display:none}.ms-default-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-tabs .tab.skeleton{background:#ebebeb;padding:7px 24px}.ms-pill-tabs .tabs{display:flex;gap:20px}.ms-pill-tabs input[type=radio]{display:none}.ms-pill-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs{display:flex;gap:20px}.ms-line-tabs .ms-tab:hover{color:#1b1f22!important;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22!important;border-bottom:2px solid #0084FF}.ms-default-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-default-vertical-tabs input[type=radio]{display:none}.ms-default-vertical-tabs .tab{padding:7px 12px;border-radius:6px;color:#6a6b6d!important;border:1px solid rgba(42,47,58,0);cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-default-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22!important}.ms-default-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-default-vertical-tabs .tab.disabled{background:#ebebeb;color:#ababab!important;cursor:not-allowed}.ms-default-vertical-tabs .tab.skeleton{background:#ebebeb;padding:16px 24px}.ms-pill-vertical-tabs .tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-pill-vertical-tabs input[type=radio]{display:none}.ms-pill-vertical-tabs .tab{padding:7px 12px;border-radius:6px;background:#fff;color:#1b1f22;border:1px solid #0084FF;cursor:pointer;font-size:14px;font-weight:450;transition:all .25s ease}.ms-pill-vertical-tabs .tab:hover{background:#f5f5f5;color:#1b1f22}.ms-pill-vertical-tabs input[type=radio]:checked+.tab{background:#e5f3ff;color:#005aad!important}.ms-line-tabs .ms-tabs-vertical{display:flex;gap:20px;flex-wrap:nowrap;flex-direction:column}.ms-line-tabs input[type=radio]{display:none}.ms-line-tabs .ms-tab{padding:7px 12px;background:none;color:#6a6b6d!important;border:0;cursor:pointer;font-size:14px;font-weight:450}.ms-line-tabs .ms-tab:hover{color:#1b1f22;border-bottom:2px solid #E0E0E0}.ms-line-tabs input[type=radio]:checked+.ms-tab{color:#1b1f22;border-bottom:2px solid #0084FF}.ms-line-tabs .ms-tab.disabled{color:#1b1f22;border-bottom:2px solid #0084FF;outline:1px solid #0084FF!important;outline-color:#0084ff!important;border-radius:6px;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3411
3478
|
}
|
|
3412
3479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTabs, decorators: [{
|
|
3413
3480
|
type: Component,
|
|
@@ -3438,7 +3505,7 @@ class MsBreadcrumb {
|
|
|
3438
3505
|
this.itemsChange.emit(newItems);
|
|
3439
3506
|
}
|
|
3440
3507
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3441
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsBreadcrumb, isStandalone: true, selector: "ms-breadcrumb", inputs: { items: "items", separatorType: "separatorType" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<nav class=\"ms-breadcrumb\">\n <ng-container *ngFor=\"let item of items; let i = index; let last = last\">\n\n <!-- Clickable items -->\n <a *ngIf=\"!last\" class=\"ms-breadcrumb-item\" (click)=\"onItemClick(i, item)\">\n\n <!-- Home icon only for first -->\n <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 11.5L12 4l9 7.5\"></path>\n <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n </svg>\n </span>\n\n {{ item.label }}\n </a>\n\n <!-- Last item -->\n <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n\n @if(separatorType === 'separator'){\n <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 11.5L12 4l9 7.5\"></path>\n <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n </svg>\n </span>\n }@else if(separatorType === 'separator-arrow'){\n <span *ngIf=\"i === 0\" class=\"breadcrumb-separator-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 6l6 6-6 6\"></path>\n </svg>\n </span>\n }\n\n {{ item.label }}\n </span>\n\n <!-- Separator -->\n @if(separatorType === 'separator'){\n <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n }@else if(separatorType === 'separator-arrow'){\n <span *ngIf=\"!last\" class=\"breadcrumb-separator-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 6l6 6-6 6\"></path>\n </svg>\n </span>\n\n }\n\n </ng-container>\n</nav>", styles: [".ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsBreadcrumb, isStandalone: true, selector: "ms-breadcrumb", inputs: { items: "items", separatorType: "separatorType" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<nav class=\"ms-breadcrumb\">\n <ng-container *ngFor=\"let item of items; let i = index; let last = last\">\n\n <!-- Clickable items -->\n <a *ngIf=\"!last\" class=\"ms-breadcrumb-item\" (click)=\"onItemClick(i, item)\">\n\n <!-- Home icon only for first -->\n <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 11.5L12 4l9 7.5\"></path>\n <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n </svg>\n </span>\n\n {{ item.label }}\n </a>\n\n <!-- Last item -->\n <span *ngIf=\"last\" class=\"ms-breadcrumb-item active\">\n\n @if(separatorType === 'separator'){\n <span *ngIf=\"i === 0\" class=\"breadcrumb-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M3 11.5L12 4l9 7.5\"></path>\n <path d=\"M5 10.5V20h5v-6h4v6h5V10.5\"></path>\n </svg>\n </span>\n }@else if(separatorType === 'separator-arrow'){\n <span *ngIf=\"i === 0\" class=\"breadcrumb-separator-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 6l6 6-6 6\"></path>\n </svg>\n </span>\n }\n\n {{ item.label }}\n </span>\n\n <!-- Separator -->\n @if(separatorType === 'separator'){\n <span *ngIf=\"!last\" class=\"breadcrumb-separator\">/</span>\n }@else if(separatorType === 'separator-arrow'){\n <span *ngIf=\"!last\" class=\"breadcrumb-separator-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 6l6 6-6 6\"></path>\n </svg>\n </span>\n\n }\n\n </ng-container>\n</nav>", styles: [".ms-breadcrumb{display:flex;align-items:center;gap:4px;font-size:14px;color:#6a6b6d}.ms-breadcrumb-item{display:inline-flex;align-items:center;gap:6px;color:#6a6b6d;text-decoration:none;font-weight:400}.breadcrumb-icon{font-size:14px;padding-top:4px}.breadcrumb-separator{color:#6a6b6d}.ms-breadcrumb-item:hover{text-decoration:underline;color:#1b1f22}.ms-breadcrumb-item.active{cursor:default;text-decoration:none;font-size:14px!important;color:#1b1f22}.breadcrumb-icon svg{width:16px;height:16px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ms-breadcrumb-item:focus-visible{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.ms-breadcrumb-item:focus{outline:2px solid #0084FF;outline-offset:2px;border-radius:2px}.breadcrumb-separator-icon svg{width:14px;height:14px;fill:none;stroke:#6a6b6d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;padding-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3442
3509
|
}
|
|
3443
3510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBreadcrumb, decorators: [{
|
|
3444
3511
|
type: Component,
|
|
@@ -3484,7 +3551,7 @@ class MsToaster {
|
|
|
3484
3551
|
clearTimeout(this.timeoutId);
|
|
3485
3552
|
}
|
|
3486
3553
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsToaster, isStandalone: true, selector: "ms-toaster", inputs: { type: "type", icon: "icon", title: "title", message: "message", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: " <div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n <div class=\"ms-content-wrapper\">\n <div class=\"ms-icon-section icon-2x ms-me-2\">\n @if(type !== 'danger') {\n <!-- <ms-icon name=\"check\" size=\"small\"></ms-icon> -->\n <!-- <span [inlineSVG]=\"getIconClass()\"></span> -->\n <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n @if (type === 'danger') {\n <ms-icon [name]=\"'information'\" [color]=\"'ms-icon-white'\"></ms-icon>\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/infoIconNew.svg'\"></span> -->\n }\n </div>\n\n <div class=\"ms-text-section\">\n @if(title) {\n <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n }\n <p class=\"ms-toaster-message\">{{ message }}</p>\n </div>\n </div>\n\n <div class=\"ms-action-section\">\n <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n </div>\n </div>\n</div>\n\n \n\n\n ", styles: [".ms-toaster-wrapper{position:fixed;z-index:9999;padding:10px}.ms-toaster-wrapper.top-right{top:20px;right:20px}.ms-toaster-wrapper.top-left{top:20px;left:20px}.ms-toaster-wrapper.bottom-right{bottom:20px;right:20px}.ms-toaster-wrapper.bottom-left{bottom:20px;left:20px}.ms-toaster-wrapper.top-center{top:20px;left:50%;transform:translate(-50%)}.ms-toaster-wrapper.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.ms-toaster-container{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:8px;min-width:300px;color:#fff;font-family:sans-serif;height:44px}.ms-toaster-container.black{background-color:#121212}.ms-toaster-container.primary{background-color:#3b82f6}.ms-toaster-container.success{background-color:#22c55e}.ms-toaster-container.danger{background-color:#e5484d}.ms-toaster-container .ms-content-wrapper{display:flex;align-items:center;gap:12px}.ms-toaster-container .ms-text-section{display:flex;flex-direction:column}.ms-toaster-container .ms-text-section .ms-toaster-title{margin:0;font-size:14px;font-weight:600}.ms-toaster-container .ms-text-section .ms-toaster-message{margin:0;font-size:13px;opacity:.9}.ms-toaster-container .ms-action-section{display:flex;align-items:center;gap:10px}.ms-toaster-container .ms-action-section .ms-action-btn{background:none;border:none;color:#fff;cursor:pointer;font-weight:500}.ms-toaster-container .ms-action-section .ms-close-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:18px}.ms-custom{position:relative}.ms-icon-section{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3554
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MsToaster, isStandalone: true, selector: "ms-toaster", inputs: { type: "type", icon: "icon", title: "title", message: "message", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: " <div class=\"ms-toaster-wrapper\" [ngClass]=\"position\">\n <div class=\"ms-toaster-container\" [ngClass]=\"type\">\n <div class=\"ms-content-wrapper\">\n <div class=\"ms-icon-section icon-2x ms-me-2\">\n @if(type !== 'danger') {\n <!-- <ms-icon name=\"check\" size=\"small\"></ms-icon> -->\n <!-- <span [inlineSVG]=\"getIconClass()\"></span> -->\n <ms-icon [name]=\"getIconClass()\" [color]=\"'ms-icon-white'\"></ms-icon>\n }\n @if (type === 'danger') {\n <ms-icon [name]=\"'information'\" [color]=\"'ms-icon-white'\"></ms-icon>\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/infoIconNew.svg'\"></span> -->\n }\n </div>\n\n <div class=\"ms-text-section\">\n @if(title) {\n <h4 class=\"ms-toaster-title\">{{ title }}</h4>\n }\n <p class=\"ms-toaster-message\">{{ message }}</p>\n </div>\n </div>\n\n <div class=\"ms-action-section\">\n <button class=\"ms-close-btn\" (click)=\"closeToaster()\">\u00D7</button>\n </div>\n </div>\n</div>\n\n \n\n\n ", styles: [".ms-toaster-wrapper{position:fixed;z-index:9999;padding:10px}.ms-toaster-wrapper.top-right{top:20px;right:20px}.ms-toaster-wrapper.top-left{top:20px;left:20px}.ms-toaster-wrapper.bottom-right{bottom:20px;right:20px}.ms-toaster-wrapper.bottom-left{bottom:20px;left:20px}.ms-toaster-wrapper.top-center{top:20px;left:50%;transform:translate(-50%)}.ms-toaster-wrapper.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.ms-toaster-container{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:8px;min-width:300px;color:#fff;font-family:sans-serif;height:44px}.ms-toaster-container.black{background-color:#121212}.ms-toaster-container.primary{background-color:#3b82f6}.ms-toaster-container.success{background-color:#22c55e}.ms-toaster-container.danger{background-color:#e5484d}.ms-toaster-container .ms-content-wrapper{display:flex;align-items:center;gap:12px}.ms-toaster-container .ms-text-section{display:flex;flex-direction:column}.ms-toaster-container .ms-text-section .ms-toaster-title{margin:0;font-size:14px;font-weight:600}.ms-toaster-container .ms-text-section .ms-toaster-message{margin:0;font-size:13px;opacity:.9}.ms-toaster-container .ms-action-section{display:flex;align-items:center;gap:10px}.ms-toaster-container .ms-action-section .ms-action-btn{background:none;border:none;color:#fff;cursor:pointer;font-weight:500}.ms-toaster-container .ms-action-section .ms-close-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:18px}.ms-custom{position:relative}.ms-icon-section{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3488
3555
|
}
|
|
3489
3556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsToaster, decorators: [{
|
|
3490
3557
|
type: Component,
|
|
@@ -3818,7 +3885,7 @@ class Calendar {
|
|
|
3818
3885
|
get leftDays() { return this.getDays(this.leftMonth, this.leftYear); }
|
|
3819
3886
|
get rightDays() { return this.getDays(this.rightMonth, this.rightYear); }
|
|
3820
3887
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3821
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Calendar, isStandalone: true, selector: "app-calendar", inputs: { mode: "mode", selectedDate: "selectedDate", fromDate: "fromDate", toDate: "toDate", leftMonth: "leftMonth", leftYear: "leftYear", rightMonth: "rightMonth", rightYear: "rightYear" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"calendar-wrapper\">\n\n <!-- SINGLE MODE -->\n <ng-container *ngIf=\"mode==='single'\">\n <div class=\"calendar single-calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth()\"><</span> -->\n <!-- <span class=\"icon\" (click)=\"nextMonth()\">></span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n <div class=\"grid\">\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n </div>\n <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n {{ d.date.getDate() }}\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <ng-container *ngIf=\"mode === 'range'\">\n <div class=\"range-calendar\">\n\n <div class=\"calendars\">\n\n <!-- LEFT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('left')\"><</span>\n <span class=\"icon\" (click)=\"nextMonth('left')\">></span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, leftDays),\n 'range-end': isRowRangeEnd(i, leftDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n <!-- RIGHT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('right')\"><</span>\n <span class=\"icon\" (click)=\"nextMonth('right')\">></span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, rightDays),\n 'range-end': isRowRangeEnd(i, rightDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- RANGE ACTIONS -->\n <div class=\"range-actions\">\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n </div>\n\n </div>\n </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.rotate-180{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3888
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Calendar, isStandalone: true, selector: "app-calendar", inputs: { mode: "mode", selectedDate: "selectedDate", fromDate: "fromDate", toDate: "toDate", leftMonth: "leftMonth", leftYear: "leftYear", rightMonth: "rightMonth", rightYear: "rightYear" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"calendar-wrapper\">\n\n <!-- SINGLE MODE -->\n <ng-container *ngIf=\"mode==='single'\">\n <div class=\"calendar single-calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth()\"><</span> -->\n <!-- <span class=\"icon\" (click)=\"nextMonth()\">></span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth()\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n <div class=\"grid\">\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\"><strong>{{ d }}</strong>\n </div>\n <div class=\"day\" *ngFor=\"let d of getDays(leftMonth, leftYear)\"\n [class.selected]=\"isSameDate(d.date, selectedDate)\" [class.today]=\"isToday(d.date)\"\n [class.disabled]=\"d.type!=='current'\" (mousedown)=\"d.type==='current' && select(d.date)\">\n {{ d.date.getDate() }}\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"isSameDate(d.date, selectedDate) ? '#fff' : '#0084FF'\"></span>\n </div>\n </div>\n </div>\n </ng-container>\n\n\n <ng-container *ngIf=\"mode === 'range'\">\n <div class=\"range-calendar\">\n\n <div class=\"calendars\">\n\n <!-- LEFT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[leftMonth] }} {{ leftYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('left')\"><</span>\n <span class=\"icon\" (click)=\"nextMonth('left')\">></span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('left')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of leftDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, leftDays),\n 'range-end': isRowRangeEnd(i, leftDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, leftDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n <!-- RIGHT CALENDAR -->\n <div class=\"calendar\">\n <div class=\"header\">\n <strong>{{ monthNames[rightMonth] }} {{ rightYear }}</strong>\n <div class=\"icons\">\n <!-- <span class=\"icon\" (click)=\"prevMonth('right')\"><</span>\n <span class=\"icon\" (click)=\"nextMonth('right')\">></span> -->\n <ms-icon class=\"icon rotate-180\" (click)=\"prevMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n <ms-icon class=\"icon\" (click)=\"nextMonth('right')\" [name]=\"'chevron-right'\"></ms-icon>\n </div>\n </div>\n\n <div class=\"grid\">\n <!-- Day names -->\n <div class=\"day-name\" *ngFor=\"let d of ['Su','Mo','Tu','We','Th','Fr','Sa']\">\n <strong>{{ d }}</strong>\n </div>\n\n <!-- Days -->\n <div *ngFor=\"let d of rightDays; let i = index\" [ngClass]=\"{\n 'is-in-range': isInRange(d.date),\n 'range-start': isRowRangeStart(i, rightDays),\n 'range-end': isRowRangeEnd(i, rightDays)\n }\" (click)=\"d.type === 'current' && select(d.date)\" class=\"day-outer\">\n\n <div class=\"day\" [ngClass]=\"getDayClasses(d, i, rightDays)\">\n <span>{{ d.date.getDate() }}</span>\n <span *ngIf=\"isToday(d.date)\" class=\"dot\"\n [style.background-color]=\"(isInRange(d.date) && (isSameDate(d.date, fromDate) || isSameDate(d.date, toDate))) ? '#fff' : '#0084FF'\"></span>\n </div>\n\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- RANGE ACTIONS -->\n <div class=\"range-actions\">\n <button class=\"btn cancel\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"btn apply\" (click)=\"onApply()\">Apply</button>\n </div>\n\n </div>\n </ng-container>\n\n\n</div>", styles: [".calendar-wrapper{display:flex;flex-direction:column;margin-top:4px}.calendars{display:flex;width:616px}.calendar{width:312px;min-height:320px;background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.single-calendar{border:1px solid #E0E0E0;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.range-calendar{width:616px;height:440px;border:1px solid #E0E0E0;background:#fff;box-shadow:0 2px 12px #00000014;border-radius:12px;z-index:9999}.calendars .calendar{width:100%;background:#fff;border-radius:12px;display:flex;flex-direction:column;box-sizing:border-box}.header{width:100%;height:40px;display:flex;justify-content:space-between;align-items:center}.header strong{font-size:14px;font-weight:600}.icons{display:flex;gap:8px}.icon{width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:20px;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s}.icon:hover{background:#e0f0ff}.grid{display:grid;grid-template-columns:repeat(7,1fr);grid-column-gap:0;grid-row-gap:4px}.day-name{height:40px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:500;color:#1b1f22}.day{position:relative;width:100%;height:40px;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:500;line-height:18px;color:#1b1f22;cursor:pointer;box-sizing:border-box;transition:background .15s,border .15s}.day:hover{background:#e0f0ff;border:1px solid #0084FF;border-radius:8px;flex-direction:column;color:#0084ff}.day.today{color:#0084ff}.dot{position:absolute;bottom:4px;width:3px;height:3px;border-radius:1px;background-color:#0084ff}.day.selected{background:#007bff;color:#fff;border-radius:8px}.day.selected.today{color:#fff}.day.selected.today .dot{background-color:#fff}.is-in-range{background:#0084ff1a}.is-in-range.range-start{border-top-left-radius:8px;border-bottom-left-radius:8px}.is-in-range.range-end{border-top-right-radius:8px;border-bottom-right-radius:8px}.day.range-first{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px!important;box-sizing:border-box}.day.range-last{background:#0084ff;color:#fff;border:4px solid #0084FF;border-radius:8px;box-sizing:border-box}.day.disabled{color:#aaa;cursor:default;background:none}.range-actions{width:595px;height:32px;display:flex;justify-content:flex-end;gap:8px}.range-actions .btn{height:32px;padding:0 12px;border-radius:8px;border:1px solid #E0E0E0;background:#fff;cursor:pointer;font-size:13px}.range-actions .btn.apply{background-color:#007bff;color:#fff;border:none}.rotate-180{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3822
3889
|
}
|
|
3823
3890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Calendar, decorators: [{
|
|
3824
3891
|
type: Component,
|
|
@@ -4221,7 +4288,7 @@ class MsDatePicker {
|
|
|
4221
4288
|
return regex.test(value);
|
|
4222
4289
|
}
|
|
4223
4290
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\">\n\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-form-control.ms-has-prefix{padding-left:40px}.ms-form-control.ms-has-suffix{padding-right:40px}.ms-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error{border:1px solid #ef4444!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Calendar, selector: "app-calendar", inputs: ["mode", "selectedDate", "fromDate", "toDate", "leftMonth", "leftYear", "rightMonth", "rightYear"], outputs: ["dateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
4291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MsDatePicker, isStandalone: true, selector: "ms-date-picker", inputs: { required: "required", readonly: "readonly", pattern: "pattern", skeleton: "skeleton", prefix: "prefix", dateType: "dateType", disabled: "disabled", invalid: "invalid", selectedSate: "selectedSate", minDate: "minDate", maxDate: "maxDate", mode: "mode" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container class=\"ms-d-flex ms-flex-column ms-input-field-container\">\n\n <div *ngIf=\"dateType == 'datepicker'\" class=\"ms-date-field\" [class.ms-has-error]=\"invalid\" [class]=\"selectedSate\"\n [class.ms-has-focus]=\"selectedSate === 'ms-focus'\" [class.ms-has-prefix-container]=\"prefix\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [class.disabled]=\"disabled\" [disabled]=\"disabled\"\n (click)=\"onInputClick($event)\" [attr.aria-invalid]=\"invalid\" [class]=\"selectedSate\" [(ngModel)]=\"singleDate\"\n [class.ms-file-uploader-skeleton]=\"skeleton\" (input)=\"onSingleDateInput($event)\">\n </div>\n <div *ngIf=\"dateType == 'datepicker-icon'\" class=\"ms-date-range-dual-wrapper\" [class.ms-has-suffix]=\"true\">\n\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"mm/dd/yyyy\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"singleDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onSingleDateInput($event)\">\n <span class=\"ms-date-suffix\" (click)=\"open('single')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType == 'daterange'\" class=\"ms-date-range-dual-wrapper\">\n <input type=\"text\" class=\"ms-form-control\" [class.ms-has-prefix]=\"prefix\" placeholder=\"Select a range\"\n [required]=\"required\" [readonly]=\"readonly\" [pattern]=\"pattern\" [disabled]=\"disabled\" [(ngModel)]=\"rangeDate\"\n [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\" [class.ms-file-uploader-skeleton]=\"skeleton\"\n (input)=\"onRangeDateInput($event)\" maxlength=\"23\">\n <span class=\"ms-date-suffix\" (click)=\"open('range')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n <div *ngIf=\"dateType === 'daterange-dual'\" class=\"ms-date-range-from-to-wrapper\">\n <div>\n <label>From</label>\n <div class=\"ms-date-wrapper ms-me-3 ms-mt-2\">\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"fromDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'from')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n <div>\n <label>To</label>\n <!-- TO DATE -->\n <div class=\"ms-date-wrapper ms-mt-2\">\n\n <input type=\"text\" class=\"ms-form-control\" placeholder=\"mm/dd/yyyy\" [required]=\"required\" [readonly]=\"readonly\"\n [pattern]=\"pattern\" [disabled]=\"disabled\" [attr.aria-invalid]=\"invalid\" [attr.data-state]=\"selectedSate\"\n [(ngModel)]=\"toDateInput\" [class.ms-file-uploader-skeleton]=\"skeleton\" />\n <span class=\"ms-date-suffix\" (click)=\"open('single', 'to')\">\n <ms-icon [name]=\"'calender'\"></ms-icon>\n </span>\n </div>\n </div>\n\n\n </div>\n\n\n <app-calendar *ngIf=\"showCalendar\" [mode]=\"mode\" [selectedDate]=\"selectedDate\" (dateChange)=\"onDateChange($event)\"\n [fromDate]=\"fromDate\" [toDate]=\"toDate\" [leftMonth]=\"leftMonth\" [leftYear]=\"leftYear\" [rightMonth]=\"rightMonth\"\n [rightYear]=\"rightYear\">\n </app-calendar>\n</div>", styles: [".ms-date-field,.ms-date-range-dual-wrapper,.ms-date-wrapper{display:flex;align-items:center;position:relative;width:240px;height:36px;border-radius:8px;background-color:#fff;border:1px solid #E0E0E0;padding:0;overflow:hidden;box-sizing:border-box;transition:border-color .2s,box-shadow .2s,background-color .2s;z-index:0}.ms-date-range-from-to-wrapper{display:flex;align-items:center;position:relative;background-color:#fff;padding:0;overflow:hidden;box-sizing:border-box;z-index:0}.ms-form-control{flex:1;border:none;outline:none;height:100%;font-size:14px;font-weight:500;color:#374151;background-color:transparent;padding:0 12px;box-sizing:border-box;z-index:2}.ms-form-control.ms-has-prefix{padding-left:40px}.ms-form-control.ms-has-suffix{padding-right:40px}.ms-form-control:disabled{color:#9ca3af;cursor:not-allowed;background-color:transparent}.ms-date-prefix,.ms-date-suffix{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;z-index:3}.ms-date-prefix img,.ms-date-suffix img{width:16px;height:16px}.ms-date-prefix{left:12px}.ms-date-suffix{right:12px}.ms-date-field,.ms-date-wrapper{display:flex;align-items:center;border:1px solid #d1d5db;overflow:visible;background-color:#fff;height:36px;transition:border-color .2s,box-shadow .2s;padding:0;border:1px solid var(--semantics-border-subtle-secondary, #E0E0E0);border-radius:8px}.ms-date-field.ms-has-focus,.ms-date-wrapper.ms-has-focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.ms-date-field.ms-has-error,.ms-date-wrapper.ms-has-error{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.ms-date-field:hover:not(:disabled),.ms-date-wrapper:hover:not(:disabled){border-color:#3b82f6}.ms-date-field.ms-disabled,.ms-date-wrapper.ms-disabled{border:1px solid #d1d5db!important}.ms-date-field.ms-error,.ms-date-wrapper.ms-error{border:1px solid #ef4444!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: Calendar, selector: "app-calendar", inputs: ["mode", "selectedDate", "fromDate", "toDate", "leftMonth", "leftYear", "rightMonth", "rightYear"], outputs: ["dateChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MsDesignSystemModule }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
4225
4292
|
}
|
|
4226
4293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDatePicker, decorators: [{
|
|
4227
4294
|
type: Component,
|