ms-design-system 0.0.42 → 0.0.44
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 +217 -125
- package/fesm2022/ms-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/assets/scss/margin.scss +39 -0
- package/src/assets/scss/padding.scss +31 -0
- package/src/styles.scss +18 -18
- package/types/ms-design-system.d.ts +12 -2
- 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
|
@@ -1,12 +1,12 @@
|
|
|
1
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 {
|
|
4
|
+
import { Input, Component, EventEmitter, ContentChild, Output, 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 i1 from '@angular/platform-browser';
|
|
7
8
|
import * as i3 from 'ng-inline-svg-2';
|
|
8
9
|
import { InlineSVGModule } from 'ng-inline-svg-2';
|
|
9
|
-
import * as i1 from '@angular/platform-browser';
|
|
10
10
|
import * as i2$1 from '@angular/router';
|
|
11
11
|
import { NavigationEnd } from '@angular/router';
|
|
12
12
|
import { filter } from 'rxjs/operators';
|
|
@@ -14,6 +14,114 @@ import { BehaviorSubject } from 'rxjs';
|
|
|
14
14
|
import * as i1$2 from 'ng-inline-svg';
|
|
15
15
|
import { InlineSVGModule as InlineSVGModule$1 } from 'ng-inline-svg';
|
|
16
16
|
|
|
17
|
+
const ICONS = {
|
|
18
|
+
"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>",
|
|
19
|
+
"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>",
|
|
20
|
+
"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>",
|
|
21
|
+
"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>",
|
|
22
|
+
"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>",
|
|
23
|
+
"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>",
|
|
24
|
+
"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>",
|
|
25
|
+
"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>",
|
|
26
|
+
"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>",
|
|
27
|
+
"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>",
|
|
28
|
+
"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>",
|
|
29
|
+
"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>",
|
|
30
|
+
"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>",
|
|
31
|
+
"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>",
|
|
32
|
+
"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>",
|
|
33
|
+
"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>",
|
|
34
|
+
"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>",
|
|
35
|
+
"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>",
|
|
36
|
+
"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>",
|
|
37
|
+
"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>",
|
|
38
|
+
"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>",
|
|
39
|
+
"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>",
|
|
40
|
+
"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>",
|
|
41
|
+
"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>",
|
|
42
|
+
"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>",
|
|
43
|
+
"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>",
|
|
44
|
+
"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>",
|
|
45
|
+
"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>",
|
|
46
|
+
"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>",
|
|
47
|
+
"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>",
|
|
48
|
+
"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>",
|
|
49
|
+
"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>",
|
|
50
|
+
"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>",
|
|
51
|
+
"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>",
|
|
52
|
+
"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>",
|
|
53
|
+
"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>",
|
|
54
|
+
"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>",
|
|
55
|
+
"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>",
|
|
56
|
+
"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>",
|
|
57
|
+
"chevron-left": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M15 18L9 12L15 6\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
58
|
+
"arrow-up-right": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 17L17 7M17 7H7M17 7V17\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
59
|
+
"file-plus": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 11.9412V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H14M15 17H21\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
60
|
+
"plan": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 11.9412V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H14M15 17H21\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>",
|
|
61
|
+
"truck": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M17.7448 2.81298C18.7095 1.8165 20.3036 1.80361 21.2843 2.78436C22.2382 3.73823 22.2559 5.27921 21.3243 6.25481L18.5456 9.16457C18.3278 9.39265 18.219 9.50668 18.1518 9.64024C18.0924 9.75847 18.0571 9.88732 18.0478 10.0193C18.0374 10.1684 18.0728 10.3221 18.1438 10.6293L19.8717 18.1169C19.9444 18.4323 19.9808 18.59 19.9691 18.7426C19.9587 18.8776 19.921 19.0091 19.8582 19.1291C19.7873 19.2647 19.6729 19.3792 19.444 19.608L19.0732 19.9788C18.4671 20.585 18.164 20.888 17.8538 20.9429C17.583 20.9908 17.3043 20.925 17.0835 20.761C16.8306 20.5733 16.695 20.1666 16.424 19.3534L14.4142 13.3241L11.0689 16.6695C10.8692 16.8691 10.7694 16.969 10.7026 17.0866C10.6434 17.1907 10.6034 17.3047 10.5846 17.423C10.5633 17.5565 10.5789 17.6968 10.61 17.9775L10.7937 19.6309C10.8249 19.9116 10.8405 20.0519 10.8192 20.1854C10.8004 20.3037 10.7604 20.4177 10.7012 20.5219C10.6344 20.6394 10.5346 20.7393 10.3349 20.939L10.1374 21.1365C9.66434 21.6095 9.42781 21.8461 9.16496 21.9146C8.93442 21.9746 8.68999 21.9504 8.47571 21.8463C8.2314 21.7276 8.04585 21.4493 7.67475 20.8926L6.10643 18.5401C6.04013 18.4407 6.00698 18.391 5.96849 18.3459C5.9343 18.3058 5.89701 18.2685 5.85694 18.2343C5.81184 18.1958 5.76212 18.1627 5.66267 18.0964L3.31018 16.5281C2.75354 16.157 2.47521 15.9714 2.35649 15.7271C2.25236 15.5128 2.22816 15.2684 2.28824 15.0378C2.35674 14.775 2.59327 14.5385 3.06633 14.0654L3.26384 13.8679C3.46352 13.6682 3.56337 13.5684 3.68095 13.5016C3.78511 13.4424 3.89906 13.4024 4.01736 13.3836C4.15089 13.3623 4.29123 13.3779 4.5719 13.4091L6.22529 13.5928C6.50596 13.6239 6.6463 13.6395 6.77983 13.6182C6.89813 13.5994 7.01208 13.5594 7.11624 13.5002C7.23382 13.4334 7.33366 13.3336 7.53335 13.1339L10.8787 9.7886L4.84939 7.77884C4.03616 7.50776 3.62955 7.37222 3.44176 7.11932C3.27777 6.89848 3.212 6.61984 3.2599 6.34898C3.31477 6.03879 3.61784 5.73572 4.22399 5.12957L4.59476 4.7588C4.82365 4.52991 4.9381 4.41546 5.07369 4.34457C5.1937 4.28183 5.3252 4.24411 5.46023 4.23371C5.61278 4.22197 5.77049 4.25836 6.0859 4.33115L13.545 6.05249C13.855 6.12401 14.01 6.15978 14.1596 6.14914C14.3041 6.13886 14.4446 6.09733 14.5714 6.02742C14.7028 5.95501 14.8134 5.84074 15.0347 5.6122L17.7448 2.81298Z\" stroke=\"black\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
class MsIcon {
|
|
65
|
+
sanitizer;
|
|
66
|
+
name;
|
|
67
|
+
color = 'ms-icon-black';
|
|
68
|
+
svg;
|
|
69
|
+
size = 'small'; // default
|
|
70
|
+
width = 16;
|
|
71
|
+
height = 16;
|
|
72
|
+
strokeWidth = 1.25;
|
|
73
|
+
constructor(sanitizer) {
|
|
74
|
+
this.sanitizer = sanitizer;
|
|
75
|
+
}
|
|
76
|
+
ngOnInit() {
|
|
77
|
+
const icon = ICONS[this.name] || '';
|
|
78
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
79
|
+
console.log(this.svg, 'svg');
|
|
80
|
+
console.log(ICONS, 'ICONS');
|
|
81
|
+
console.log(this.name, 'name');
|
|
82
|
+
this.getsize();
|
|
83
|
+
}
|
|
84
|
+
ngOnChanges() {
|
|
85
|
+
const icon = ICONS[this.name] || '';
|
|
86
|
+
this.svg = this.sanitizer.bypassSecurityTrustHtml(icon);
|
|
87
|
+
this.getsize();
|
|
88
|
+
console.log(this.svg, 'svg');
|
|
89
|
+
console.log(ICONS, 'ICONS');
|
|
90
|
+
console.log(this.name, 'name');
|
|
91
|
+
}
|
|
92
|
+
getsize() {
|
|
93
|
+
switch (this.size) {
|
|
94
|
+
case 'small':
|
|
95
|
+
this.width = this.height = 16;
|
|
96
|
+
this.strokeWidth = 1.25;
|
|
97
|
+
break;
|
|
98
|
+
case 'medium':
|
|
99
|
+
this.width = this.height = 20;
|
|
100
|
+
this.strokeWidth = 1.5;
|
|
101
|
+
break;
|
|
102
|
+
case 'large':
|
|
103
|
+
this.width = this.height = 24;
|
|
104
|
+
this.strokeWidth = 1.75;
|
|
105
|
+
break;
|
|
106
|
+
default:
|
|
107
|
+
this.width = this.height = 20;
|
|
108
|
+
this.strokeWidth = 1.5;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
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 }] });
|
|
113
|
+
}
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsIcon, decorators: [{
|
|
115
|
+
type: Component,
|
|
116
|
+
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"] }]
|
|
117
|
+
}], ctorParameters: () => [{ type: i1.DomSanitizer }], propDecorators: { name: [{
|
|
118
|
+
type: Input
|
|
119
|
+
}], color: [{
|
|
120
|
+
type: Input
|
|
121
|
+
}], size: [{
|
|
122
|
+
type: Input
|
|
123
|
+
}] } });
|
|
124
|
+
|
|
17
125
|
class MsButton {
|
|
18
126
|
el;
|
|
19
127
|
type = 'button';
|
|
@@ -54,6 +162,7 @@ class MsButton {
|
|
|
54
162
|
.trim();
|
|
55
163
|
}
|
|
56
164
|
get userClass() {
|
|
165
|
+
console.log(this.class, 'class');
|
|
57
166
|
return this.class;
|
|
58
167
|
}
|
|
59
168
|
/** Generate HTML string */
|
|
@@ -65,15 +174,15 @@ class MsButton {
|
|
|
65
174
|
let innerHtml = '';
|
|
66
175
|
if (this.iconOnly) {
|
|
67
176
|
// Icon-only → just icon, centered
|
|
68
|
-
innerHtml = `<
|
|
177
|
+
innerHtml = `<ms-icon [name]="'${this.icon}'" [color]="'${this.getColor()}'"></ms-icon>`;
|
|
69
178
|
}
|
|
70
179
|
else if (this.icon && this.iconPosition === 'prefix') {
|
|
71
180
|
// Prefix → icon before text
|
|
72
|
-
innerHtml = `<
|
|
181
|
+
innerHtml = `<ms-icon [name]="'${this.icon}'" [color]="'${this.getColor()}'" class="ms-me-1"></ms-icon> ${this.textSrc}`;
|
|
73
182
|
}
|
|
74
183
|
else if (this.icon && this.iconPosition === 'suffix') {
|
|
75
184
|
// Suffix → icon after text
|
|
76
|
-
innerHtml = `${this.textSrc} <
|
|
185
|
+
innerHtml = `${this.textSrc} <ms-icon [name]="'${this.icon}'" [color]="'${this.getColor()}'" class="ms-ms-1"></ms-icon>`;
|
|
77
186
|
}
|
|
78
187
|
else {
|
|
79
188
|
// Text only
|
|
@@ -128,12 +237,26 @@ class MsButton {
|
|
|
128
237
|
event.preventDefault();
|
|
129
238
|
}
|
|
130
239
|
}
|
|
240
|
+
getColor() {
|
|
241
|
+
if (this.variant === 'label') {
|
|
242
|
+
return 'ms-icon-black';
|
|
243
|
+
}
|
|
244
|
+
else if (this.variant === 'default') {
|
|
245
|
+
return 'ms-icon-black';
|
|
246
|
+
}
|
|
247
|
+
else if (this.variant === 'light') {
|
|
248
|
+
return 'ms-icon-black';
|
|
249
|
+
}
|
|
250
|
+
{
|
|
251
|
+
return 'ms-icon-white';
|
|
252
|
+
}
|
|
253
|
+
}
|
|
131
254
|
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
|
|
255
|
+
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' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n }\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n @if (!iconOnly && textSrc) {\n <span [ngClass]=\"{'ms-mg-lif': icon && iconPosition === 'prefix', 'ms-mg-rig': icon && iconPosition === 'suffix'}\">{{ textSrc }}</span>\n }\n @if (icon && iconPosition === 'suffix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n }\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\" class=\"sdfsd\">\n <!-- @if (icon && iconPosition === 'prefix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n }\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n @if (!iconOnly && textSrc) {\n <span class=\"ms-inline-btn\">\n {{ textSrc }}\n </span>\n }\n @if (icon && iconPosition === 'suffix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n } -->\n</ng-content>\n}", styles: ["ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}\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"] }] });
|
|
133
256
|
}
|
|
134
257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsButton, decorators: [{
|
|
135
258
|
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
|
|
259
|
+
args: [{ selector: 'ms-button', imports: [CommonModule, MsIcon], template: "@if (buttonType ==='Playground') {\n <a [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n\n @if (icon && iconPosition === 'prefix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n }\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n @if (!iconOnly && textSrc) {\n <span [ngClass]=\"{'ms-mg-lif': icon && iconPosition === 'prefix', 'ms-mg-rig': icon && iconPosition === 'suffix'}\">{{ textSrc }}</span>\n }\n @if (icon && iconPosition === 'suffix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n }\n</a>\n}@else {\n <ng-content [type]=\"type\" [class.disabled]=\"disabled\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\" class=\"sdfsd\">\n <!-- @if (icon && iconPosition === 'prefix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n }\n @if (!iconOnly && !textSrc) {\n <span><ng-content></ng-content></span>\n }\n @if (!iconOnly && textSrc) {\n <span class=\"ms-inline-btn\">\n {{ textSrc }}\n </span>\n }\n @if (icon && iconPosition === 'suffix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n } -->\n</ng-content>\n}", styles: ["ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}\n"] }]
|
|
137
260
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
|
|
138
261
|
type: Input
|
|
139
262
|
}], variant: [{
|
|
@@ -205,109 +328,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
205
328
|
type: Output
|
|
206
329
|
}] } });
|
|
207
330
|
|
|
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
331
|
const FLAGICONS = {
|
|
312
332
|
"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
333
|
"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>",
|
|
@@ -420,6 +440,7 @@ class MsDropdown {
|
|
|
420
440
|
// @Input() items: DropdownItem[] = [];
|
|
421
441
|
set items(value) {
|
|
422
442
|
this._items = value ? this.cloneItems(value) : [];
|
|
443
|
+
this.initializeSelection();
|
|
423
444
|
}
|
|
424
445
|
icon;
|
|
425
446
|
iconPosition = 'suffix';
|
|
@@ -463,6 +484,9 @@ class MsDropdown {
|
|
|
463
484
|
this.el = el;
|
|
464
485
|
this.cdr = cdr;
|
|
465
486
|
}
|
|
487
|
+
ngOnInit() {
|
|
488
|
+
this.initializeSelection();
|
|
489
|
+
}
|
|
466
490
|
isOpen = false;
|
|
467
491
|
searchTerm = '';
|
|
468
492
|
dropdownPosition = signal('down', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : []));
|
|
@@ -499,6 +523,28 @@ class MsDropdown {
|
|
|
499
523
|
selected: !!item.selected
|
|
500
524
|
}));
|
|
501
525
|
}
|
|
526
|
+
initializeSelection() {
|
|
527
|
+
if (!this.selectedItem || !this._items.length)
|
|
528
|
+
return;
|
|
529
|
+
if (this.allowMultiple) {
|
|
530
|
+
const selectedLabels = this.selectedItem.split(',').map(label => label.trim());
|
|
531
|
+
this._items.forEach(item => {
|
|
532
|
+
if (selectedLabels.includes(item.label)) {
|
|
533
|
+
item.selected = true;
|
|
534
|
+
}
|
|
535
|
+
});
|
|
536
|
+
this.selectedItems = this._items.filter(i => i.selected);
|
|
537
|
+
}
|
|
538
|
+
else {
|
|
539
|
+
const matchingItem = this._items.find(item => item.label === this.selectedItem);
|
|
540
|
+
if (matchingItem) {
|
|
541
|
+
this._items.forEach(i => (i.selected = false));
|
|
542
|
+
matchingItem.selected = true;
|
|
543
|
+
this.selectedItems = [matchingItem];
|
|
544
|
+
this.selectedItemObj = matchingItem;
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
}
|
|
502
548
|
selectItem(item) {
|
|
503
549
|
if (item.disabled || item.divider)
|
|
504
550
|
return;
|
|
@@ -629,11 +675,11 @@ class MsDropdown {
|
|
|
629
675
|
this.isOpen = false;
|
|
630
676
|
}
|
|
631
677
|
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 });
|
|
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" }] });
|
|
678
|
+
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-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\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [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 <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\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','padding': searchable ? '0px' : '4px 0'}\"\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;margin-left:auto}.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{display:flex;align-items:center}.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}.ms-input-placeholder{font-size:14px!important}:-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-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" }] });
|
|
633
679
|
}
|
|
634
680
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsDropdown, decorators: [{
|
|
635
681
|
type: Component,
|
|
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"] }]
|
|
682
|
+
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-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\">\n <!-- <span [inlineSVG]=\"'../../../../assets/data-grid/icons/' + icon + '.svg'\"></span> -->\n <ms-icon class=\"ms_icon ms-d-flex ms-align-items-center ms-ms-3\" [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 <ms-flag-icon class=\"ms-country-flag ms-me-2\" [name]=\"selectedItemObj?.label | lowercase\"></ms-flag-icon>\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','padding': searchable ? '0px' : '4px 0'}\"\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;margin-left:auto}.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{display:flex;align-items:center}.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}.ms-input-placeholder{font-size:14px!important}:-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-placeholder{color:#9ca3af}input:focus-visible{outline:none}\n"] }]
|
|
637
683
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { text: [{
|
|
638
684
|
type: Input
|
|
639
685
|
}], isDisabled: [{
|
|
@@ -914,12 +960,20 @@ class MsBadge {
|
|
|
914
960
|
event.preventDefault();
|
|
915
961
|
}
|
|
916
962
|
}
|
|
963
|
+
getColor() {
|
|
964
|
+
if (!this.isDark) {
|
|
965
|
+
return 'ms-icon-black';
|
|
966
|
+
}
|
|
967
|
+
else {
|
|
968
|
+
return 'ms-icon-white';
|
|
969
|
+
}
|
|
970
|
+
}
|
|
917
971
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBadge, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] });
|
|
972
|
+
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\n\n\n\n <span [class.disabled]=\"disabled\" [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n <!-- @if (icon && iconPosition === 'prefix') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n } -->\n <span >{{ text }}</span>\n <!-- <span [ngClass]=\"{'ms-mg-lif': icon && iconPosition === 'prefix', 'ms-mg-rig': icon && iconPosition === 'suffix'}\">{{ text }}</span> -->\n\n <!-- @if (icon && iconPosition === 'suffix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n } -->\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}}ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}\n"] });
|
|
919
973
|
}
|
|
920
974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsBadge, decorators: [{
|
|
921
975
|
type: Component,
|
|
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"] }]
|
|
976
|
+
args: [{ selector: 'ms-badge', imports: [], template: "@if(skeleton){\n <span [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" >\n </span>\n \n}@else{\n\n\n\n\n <span [class.disabled]=\"disabled\" [class.badge-skeleton]=\"skeleton\" [class]=\"classes + ' ' + userClass\" (click)=\"onClick($event)\">\n <!-- @if (icon && iconPosition === 'prefix') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n } -->\n <span >{{ text }}</span>\n <!-- <span [ngClass]=\"{'ms-mg-lif': icon && iconPosition === 'prefix', 'ms-mg-rig': icon && iconPosition === 'suffix'}\">{{ text }}</span> -->\n\n <!-- @if (icon && iconPosition === 'suffix' && variant != 'link') {\n <ms-icon [name]=\"icon\" [color]=\"getColor()\"></ms-icon>\n } -->\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}}ms-icon{display:flex}.ms-mg-lif{margin-left:6px!important}.ms-mg-rig{margin-right:6px!important}\n"] }]
|
|
923
977
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
|
|
924
978
|
type: Input
|
|
925
979
|
}], radiussize: [{
|
|
@@ -1148,7 +1202,7 @@ class MsRadioButton {
|
|
|
1148
1202
|
useExisting: forwardRef(() => MsRadioButton),
|
|
1149
1203
|
multi: true
|
|
1150
1204
|
}
|
|
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"] });
|
|
1205
|
+
], 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\";: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}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:transparent;border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843))}::-webkit-scrollbar-thumb:hover{background:#cfcfcf}.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}.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;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0%}.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:0px}.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"] });
|
|
1152
1206
|
}
|
|
1153
1207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsRadioButton, decorators: [{
|
|
1154
1208
|
type: Component,
|
|
@@ -1163,7 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1163
1217
|
useExisting: forwardRef(() => MsRadioButton),
|
|
1164
1218
|
multi: true
|
|
1165
1219
|
}
|
|
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"] }]
|
|
1220
|
+
], 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\";: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}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:transparent;border-radius:6px}::-webkit-scrollbar-thumb{border-radius:6px;background:var(--semantics-fill-status-subtle-secondary-default, rgba(31, 36, 40, .1019607843))}::-webkit-scrollbar-thumb:hover{background:#cfcfcf}.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}.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;line-height:40px;font-weight:600;letter-spacing:-1%;margin:0%}h2{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-1%;margin:0%}h3{font-size:20px;line-height:25px;font-weight:600;letter-spacing:-1%;margin:0%}p,div,span{font-size:14px;line-height:20px;font-weight:400;letter-spacing:0%}.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:0px}.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"] }]
|
|
1167
1221
|
}], propDecorators: { label: [{
|
|
1168
1222
|
type: Input
|
|
1169
1223
|
}], name: [{
|
|
@@ -2996,14 +3050,15 @@ class MsSidebar {
|
|
|
2996
3050
|
search = false;
|
|
2997
3051
|
setting = false;
|
|
2998
3052
|
userDetail = false;
|
|
3053
|
+
country = false;
|
|
3054
|
+
userDetailList;
|
|
2999
3055
|
badge = false;
|
|
3000
3056
|
details;
|
|
3057
|
+
flagsLists;
|
|
3001
3058
|
select = new EventEmitter();
|
|
3002
3059
|
searchText = '';
|
|
3003
3060
|
filteredMenuData = [];
|
|
3004
3061
|
isCollapsed = false;
|
|
3005
|
-
// openSections: any;
|
|
3006
|
-
// openSections: { [key: string]: boolean } = {};
|
|
3007
3062
|
flyoutSectionId = null;
|
|
3008
3063
|
flyoutItems = [];
|
|
3009
3064
|
flyoutTop = 0;
|
|
@@ -3023,12 +3078,40 @@ class MsSidebar {
|
|
|
3023
3078
|
return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
|
|
3024
3079
|
}
|
|
3025
3080
|
selectedSectionId = null;
|
|
3081
|
+
// flagsLists: any = [];
|
|
3026
3082
|
constructor(sanitizer, router, topbarService) {
|
|
3027
3083
|
this.sanitizer = sanitizer;
|
|
3028
3084
|
this.router = router;
|
|
3029
3085
|
this.topbarService = topbarService;
|
|
3086
|
+
const countryMap = {
|
|
3087
|
+
afghanistan: "af",
|
|
3088
|
+
pakistan: "pk",
|
|
3089
|
+
india: "in"
|
|
3090
|
+
};
|
|
3091
|
+
const flagsList = Object.entries(FLAGICONS).map(([name, svg]) => {
|
|
3092
|
+
if (!name || !svg)
|
|
3093
|
+
return null;
|
|
3094
|
+
const lower = name.toLowerCase();
|
|
3095
|
+
return {
|
|
3096
|
+
countryCode: countryMap?.[lower] || lower.substring(0, 2),
|
|
3097
|
+
label: lower.replace(/\b\w/g, c => c.toUpperCase()),
|
|
3098
|
+
value: countryMap?.[lower] || lower.substring(0, 2),
|
|
3099
|
+
icon: svg,
|
|
3100
|
+
select: false
|
|
3101
|
+
};
|
|
3102
|
+
}).filter(Boolean);
|
|
3103
|
+
this.flagsLists = flagsList;
|
|
3030
3104
|
}
|
|
3105
|
+
selectedCountry = null;
|
|
3106
|
+
selectedContry;
|
|
3031
3107
|
ngOnInit() {
|
|
3108
|
+
this.flagsLists.forEach((ele) => {
|
|
3109
|
+
if (ele?.selected) {
|
|
3110
|
+
this.selectedCountry = ele.label;
|
|
3111
|
+
this.selectedContry = ele;
|
|
3112
|
+
}
|
|
3113
|
+
});
|
|
3114
|
+
console.log(this.selectedContry, 'selectedContry');
|
|
3032
3115
|
this.filteredMenuData = JSON.parse(JSON.stringify(this.details));
|
|
3033
3116
|
this.setActiveItemByRoute(this.router.url);
|
|
3034
3117
|
// subscribe to route changes
|
|
@@ -3155,12 +3238,15 @@ class MsSidebar {
|
|
|
3155
3238
|
console.log(data);
|
|
3156
3239
|
this.rotate[data.id] = !this.rotate[data.id];
|
|
3157
3240
|
}
|
|
3241
|
+
onSelectionChange(event) {
|
|
3242
|
+
console.log(event);
|
|
3243
|
+
}
|
|
3158
3244
|
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"] }] });
|
|
3245
|
+
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", country: "country", userDetailList: "userDetailList", badge: "badge", details: "details", flagsLists: "flagsLists" }, outputs: { select: "select" }, ngImport: i0, template: "<div class=\"ms-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\n\n\n\n\n\n\n\n\n\n\n@if(country){\n <div class=\"ms-mt-3\" [ngClass]=\"{'ms-mb-3': !isCollapsed}\">\n <ms-dropdown *ngIf=\"!isCollapsed\"\n [text]=\"'Country'\"\n [isDisabled]=\"false\"\n [selectedItem]=\"selectedCountry\"\n [multiSelectDisplay]=\"'text'\"\n [allowMultiple]=\"false\"\n [icon]=\"'chevron-down'\"\n [iconPosition]=\"'suffix'\"\n [items]=\"flagsLists\"\n [closeOnSelect]=\"true\"\n [closeOnClickOutside]=\"true\"\n [showFlagImage]=\"true\"\n [searchable]=\"true\"\n (selectionChange)=\"onSelectionChange($event)\">\n </ms-dropdown>\n @if(isCollapsed){\n <div class=\"menu-section-country\">\n <div class=\"menu-item-country\">\n <ms-flag-icon [name]=\"selectedContry?.label | lowercase \"></ms-flag-icon>\n </div>\n </div>\n }\n </div>\n}\n\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 <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\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 <span class=\"\" [ngClass]=\"{'ms-me-2': !isCollapsed}\">\n <ms-icon [name]=\"section.icon\" ></ms-icon>\n\n </span>\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 <span alt=\"Chevron\" class=\"\" (click)=\"rotating(section)\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n <ms-icon [name]=\"'chevron-up'\" [size]=\"'small'\" *ngIf=\"rotate[section.id]\"></ms-icon>\n <ms-icon [name]=\"'chevron-down'\" [size]=\"'small'\" *ngIf=\"!rotate[section.id]\"></ms-icon>\n </span>\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]=\"{'ms-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 && userDetailList){\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 && flyoutItems?.length > 0\"\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: [".ms-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}.ms-sidebar.collapsed{width:60px;padding:10px;display:flex;align-items:center}.ms-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}.menu-item-country{display:flex;align-items:center;padding:12px;font-size:14px!important;cursor:pointer;margin-bottom:4px;transition:all .3s ease;border-radius:8px;background:#fff;border:1px solid #E0E0E0}.menu-item-country ms-flag-icon{display:flex!important}.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}.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}ms-icon{display:flex}.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}.ms-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"] }, { 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"] }, { 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" }] });
|
|
3160
3246
|
}
|
|
3161
3247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsSidebar, decorators: [{
|
|
3162
3248
|
type: Component,
|
|
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"] }]
|
|
3249
|
+
args: [{ selector: 'ms-sidebar', standalone: true, imports: [CommonModule, FormsModule, MsDropdown, MsFlagIcon, MsIcon], template: "<div class=\"ms-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\n\n\n\n\n\n\n\n\n\n\n@if(country){\n <div class=\"ms-mt-3\" [ngClass]=\"{'ms-mb-3': !isCollapsed}\">\n <ms-dropdown *ngIf=\"!isCollapsed\"\n [text]=\"'Country'\"\n [isDisabled]=\"false\"\n [selectedItem]=\"selectedCountry\"\n [multiSelectDisplay]=\"'text'\"\n [allowMultiple]=\"false\"\n [icon]=\"'chevron-down'\"\n [iconPosition]=\"'suffix'\"\n [items]=\"flagsLists\"\n [closeOnSelect]=\"true\"\n [closeOnClickOutside]=\"true\"\n [showFlagImage]=\"true\"\n [searchable]=\"true\"\n (selectionChange)=\"onSelectionChange($event)\">\n </ms-dropdown>\n @if(isCollapsed){\n <div class=\"menu-section-country\">\n <div class=\"menu-item-country\">\n <ms-flag-icon [name]=\"selectedContry?.label | lowercase \"></ms-flag-icon>\n </div>\n </div>\n }\n </div>\n}\n\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 <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\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 <span class=\"\" [ngClass]=\"{'ms-me-2': !isCollapsed}\">\n <ms-icon [name]=\"section.icon\" ></ms-icon>\n\n </span>\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 <span alt=\"Chevron\" class=\"\" (click)=\"rotating(section)\" *ngIf=\"!isCollapsed && section.sub_menu?.length > 0\">\n <ms-icon [name]=\"'chevron-up'\" [size]=\"'small'\" *ngIf=\"rotate[section.id]\"></ms-icon>\n <ms-icon [name]=\"'chevron-down'\" [size]=\"'small'\" *ngIf=\"!rotate[section.id]\"></ms-icon>\n </span>\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]=\"{'ms-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 && userDetailList){\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 && flyoutItems?.length > 0\"\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: [".ms-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}.ms-sidebar.collapsed{width:60px;padding:10px;display:flex;align-items:center}.ms-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}.menu-item-country{display:flex;align-items:center;padding:12px;font-size:14px!important;cursor:pointer;margin-bottom:4px;transition:all .3s ease;border-radius:8px;background:#fff;border:1px solid #E0E0E0}.menu-item-country ms-flag-icon{display:flex!important}.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}.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}ms-icon{display:flex}.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}.ms-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"] }]
|
|
3164
3250
|
}], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i2$1.Router }, { type: TopbarService }], propDecorators: { id: [{
|
|
3165
3251
|
type: Input
|
|
3166
3252
|
}], search: [{
|
|
@@ -3169,10 +3255,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3169
3255
|
type: Input
|
|
3170
3256
|
}], userDetail: [{
|
|
3171
3257
|
type: Input
|
|
3258
|
+
}], country: [{
|
|
3259
|
+
type: Input
|
|
3260
|
+
}], userDetailList: [{
|
|
3261
|
+
type: Input
|
|
3172
3262
|
}], badge: [{
|
|
3173
3263
|
type: Input
|
|
3174
3264
|
}], details: [{
|
|
3175
3265
|
type: Input
|
|
3266
|
+
}], flagsLists: [{
|
|
3267
|
+
type: Input
|
|
3176
3268
|
}], select: [{
|
|
3177
3269
|
type: Output
|
|
3178
3270
|
}] } });
|
|
@@ -3206,7 +3298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
3206
3298
|
|
|
3207
3299
|
class MsFileUploader {
|
|
3208
3300
|
cdr;
|
|
3209
|
-
label = "";
|
|
3301
|
+
label = "Upload file";
|
|
3210
3302
|
required = false;
|
|
3211
3303
|
readonly = false;
|
|
3212
3304
|
disabled = false;
|
|
@@ -3382,11 +3474,11 @@ class MsFileUploader {
|
|
|
3382
3474
|
return this.accept.split(',').map(ext => ext.trim().toUpperCase()).join(', ');
|
|
3383
3475
|
}
|
|
3384
3476
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
3477
|
+
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\">{{ label }}</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]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/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%}.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: "directive", type: i3.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"] }] });
|
|
3386
3478
|
}
|
|
3387
3479
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsFileUploader, decorators: [{
|
|
3388
3480
|
type: Component,
|
|
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"] }]
|
|
3481
|
+
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\">{{ label }}</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]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/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]=\"'https://ds-doc.sentrixbar.com/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%}.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"] }]
|
|
3390
3482
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
3391
3483
|
type: Input
|
|
3392
3484
|
}], required: [{
|
|
@@ -3439,11 +3531,11 @@ class MsTopbar {
|
|
|
3439
3531
|
this.searchChange.emit('');
|
|
3440
3532
|
}
|
|
3441
3533
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTopbar, deps: [{ token: TopbarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
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 }] });
|
|
3534
|
+
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 <ms-icon [name]=\"'layers'\"></ms-icon>\n <div class=\"ms-title-sm\">\n {{detail?.title}}\n </div>\n </div>\n <div class=\"ms-search\">\n <div class=\"search-container\">\n \n <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\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%);pointer-events:none}ms-icon{display:flex}.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 }, { kind: "component", type: MsIcon, selector: "ms-icon", inputs: ["name", "color", "size"] }] });
|
|
3443
3535
|
}
|
|
3444
3536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MsTopbar, decorators: [{
|
|
3445
3537
|
type: Component,
|
|
3446
|
-
args: [{ selector: 'ms-topbar', imports: [CommonModule, FormsModule], 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 <
|
|
3538
|
+
args: [{ selector: 'ms-topbar', imports: [CommonModule, FormsModule, MsIcon], 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 <ms-icon [name]=\"'layers'\"></ms-icon>\n <div class=\"ms-title-sm\">\n {{detail?.title}}\n </div>\n </div>\n <div class=\"ms-search\">\n <div class=\"search-container\">\n \n <span class=\"search-icon\">\n<ms-icon [name]=\"'search'\" [size]=\"'small'\"></ms-icon>\n</span>\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%);pointer-events:none}ms-icon{display:flex}.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"] }]
|
|
3447
3539
|
}], ctorParameters: () => [{ type: TopbarService }], propDecorators: { variant: [{
|
|
3448
3540
|
type: Input
|
|
3449
3541
|
}], title: [{
|