@stackline/angular-multiselect-dropdown 2.0.4 → 4.0.1
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/README.md +71 -33
- package/multiselect.component.css +153 -38
- package/package.json +10 -22
- package/src/app/angular2-multiselect-dropdown/multiselect.component.html +1 -1
- package/src/app/angular2-multiselect-dropdown/multiselect.component.scss +153 -36
- package/src/app/angular2-multiselect-dropdown/multiselect.component.ts +28 -4
- package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts +1 -0
- package/themes/custom.theme.css +203 -0
- package/themes/custom.theme.scss +202 -0
- package/themes/default.theme.css +37 -0
- package/themes/default.theme.scss +35 -0
- package/multiselect.component.css.map +0 -1
|
@@ -277,7 +277,9 @@ $base-color: #0079FE;
|
|
|
277
277
|
padding-left: 15px !important;
|
|
278
278
|
}
|
|
279
279
|
|
|
280
|
-
.stackline-dropdown.theme-material
|
|
280
|
+
.stackline-dropdown.theme-material ,
|
|
281
|
+
.stackline-dropdown.theme-dark ,
|
|
282
|
+
.stackline-dropdown.theme-custom {
|
|
281
283
|
--ms-primary: #3f51b5;
|
|
282
284
|
--ms-primary-soft: rgba(63, 81, 181, 0.12);
|
|
283
285
|
--ms-surface: #ffffff;
|
|
@@ -290,6 +292,9 @@ $base-color: #0079FE;
|
|
|
290
292
|
--ms-chip-bg: #e8eaf6;
|
|
291
293
|
--ms-chip-text: #303f9f;
|
|
292
294
|
--ms-chip-remove: #303f9f;
|
|
295
|
+
--ms-divider: rgba(125, 119, 134, 0.16);
|
|
296
|
+
--ms-section-bg: rgba(247, 242, 250, 0.76);
|
|
297
|
+
--ms-selected-text: var(--ms-primary);
|
|
293
298
|
--ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);
|
|
294
299
|
--ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);
|
|
295
300
|
display: block;
|
|
@@ -298,11 +303,55 @@ $base-color: #0079FE;
|
|
|
298
303
|
font: inherit;
|
|
299
304
|
}
|
|
300
305
|
|
|
301
|
-
.stackline-dropdown.theme-
|
|
306
|
+
.stackline-dropdown.theme-dark {
|
|
307
|
+
--ms-primary: #8ab4f8;
|
|
308
|
+
--ms-primary-soft: rgba(138, 180, 248, 0.18);
|
|
309
|
+
--ms-surface: #151a23;
|
|
310
|
+
--ms-surface-soft: #202736;
|
|
311
|
+
--ms-surface-muted: #111722;
|
|
312
|
+
--ms-outline: #384456;
|
|
313
|
+
--ms-outline-strong: #8ab4f8;
|
|
314
|
+
--ms-on-surface: #edf2f7;
|
|
315
|
+
--ms-on-surface-muted: #aab6c5;
|
|
316
|
+
--ms-chip-bg: #263247;
|
|
317
|
+
--ms-chip-text: #d7e6ff;
|
|
318
|
+
--ms-chip-remove: #d7e6ff;
|
|
319
|
+
--ms-divider: rgba(170, 182, 197, 0.18);
|
|
320
|
+
--ms-section-bg: #101620;
|
|
321
|
+
--ms-selected-text: #d7e6ff;
|
|
322
|
+
--ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
|
|
323
|
+
--ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.stackline-dropdown.theme-custom {
|
|
327
|
+
--ms-primary: var(--stackline-ms-primary, #0f766e);
|
|
328
|
+
--ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));
|
|
329
|
+
--ms-surface: var(--stackline-ms-surface, #ffffff);
|
|
330
|
+
--ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);
|
|
331
|
+
--ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);
|
|
332
|
+
--ms-outline: var(--stackline-ms-outline, #99f6e4);
|
|
333
|
+
--ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);
|
|
334
|
+
--ms-on-surface: var(--stackline-ms-on-surface, #102a2a);
|
|
335
|
+
--ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);
|
|
336
|
+
--ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);
|
|
337
|
+
--ms-chip-text: var(--stackline-ms-chip-text, #115e59);
|
|
338
|
+
--ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);
|
|
339
|
+
--ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));
|
|
340
|
+
--ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);
|
|
341
|
+
--ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));
|
|
342
|
+
--ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));
|
|
343
|
+
--ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.stackline-dropdown.theme-material .selected-list ,
|
|
347
|
+
.stackline-dropdown.theme-dark .selected-list ,
|
|
348
|
+
.stackline-dropdown.theme-custom .selected-list {
|
|
302
349
|
width: 100%;
|
|
303
350
|
}
|
|
304
351
|
|
|
305
|
-
.stackline-dropdown.theme-material .selected-list .c-btn
|
|
352
|
+
.stackline-dropdown.theme-material .selected-list .c-btn ,
|
|
353
|
+
.stackline-dropdown.theme-dark .selected-list .c-btn ,
|
|
354
|
+
.stackline-dropdown.theme-custom .selected-list .c-btn {
|
|
306
355
|
position: relative;
|
|
307
356
|
display: flex;
|
|
308
357
|
align-items: center;
|
|
@@ -322,17 +371,23 @@ $base-color: #0079FE;
|
|
|
322
371
|
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
|
|
323
372
|
}
|
|
324
373
|
|
|
325
|
-
.stackline-dropdown.theme-material .selected-list .c-btn:hover
|
|
374
|
+
.stackline-dropdown.theme-material .selected-list .c-btn:hover ,
|
|
375
|
+
.stackline-dropdown.theme-dark .selected-list .c-btn:hover ,
|
|
376
|
+
.stackline-dropdown.theme-custom .selected-list .c-btn:hover {
|
|
326
377
|
border-color: var(--ms-outline-strong);
|
|
327
378
|
}
|
|
328
379
|
|
|
329
|
-
.stackline-dropdown.theme-material .selected-list .c-btn.disabled
|
|
380
|
+
.stackline-dropdown.theme-material .selected-list .c-btn.disabled ,
|
|
381
|
+
.stackline-dropdown.theme-dark .selected-list .c-btn.disabled ,
|
|
382
|
+
.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {
|
|
330
383
|
background: var(--ms-surface);
|
|
331
384
|
cursor: not-allowed;
|
|
332
385
|
opacity: .72;
|
|
333
386
|
}
|
|
334
387
|
|
|
335
|
-
.stackline-dropdown.theme-material .selected-list .c-list
|
|
388
|
+
.stackline-dropdown.theme-material .selected-list .c-list ,
|
|
389
|
+
.stackline-dropdown.theme-dark .selected-list .c-list ,
|
|
390
|
+
.stackline-dropdown.theme-custom .selected-list .c-list {
|
|
336
391
|
display: flex;
|
|
337
392
|
flex: 1 1 auto;
|
|
338
393
|
flex-wrap: wrap;
|
|
@@ -344,7 +399,9 @@ $base-color: #0079FE;
|
|
|
344
399
|
float: none;
|
|
345
400
|
}
|
|
346
401
|
|
|
347
|
-
.stackline-dropdown.theme-material .selected-list .c-list .c-token
|
|
402
|
+
.stackline-dropdown.theme-material .selected-list .c-list .c-token ,
|
|
403
|
+
.stackline-dropdown.theme-dark .selected-list .c-list .c-token ,
|
|
404
|
+
.stackline-dropdown.theme-custom .selected-list .c-list .c-token {
|
|
348
405
|
position: relative;
|
|
349
406
|
display: inline-block;
|
|
350
407
|
vertical-align: middle;
|
|
@@ -362,7 +419,9 @@ $base-color: #0079FE;
|
|
|
362
419
|
float: none;
|
|
363
420
|
}
|
|
364
421
|
|
|
365
|
-
.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label
|
|
422
|
+
.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label ,
|
|
423
|
+
.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label ,
|
|
424
|
+
.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {
|
|
366
425
|
display: inline-flex;
|
|
367
426
|
align-items: center;
|
|
368
427
|
float: none;
|
|
@@ -374,7 +433,9 @@ $base-color: #0079FE;
|
|
|
374
433
|
overflow-wrap: anywhere;
|
|
375
434
|
}
|
|
376
435
|
|
|
377
|
-
.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove
|
|
436
|
+
.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove ,
|
|
437
|
+
.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove ,
|
|
438
|
+
.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {
|
|
378
439
|
position: absolute;
|
|
379
440
|
right: 10px;
|
|
380
441
|
top: 50%;
|
|
@@ -389,7 +450,9 @@ $base-color: #0079FE;
|
|
|
389
450
|
cursor: pointer;
|
|
390
451
|
}
|
|
391
452
|
|
|
392
|
-
.stackline-dropdown.theme-material .selected-list .countplaceholder
|
|
453
|
+
.stackline-dropdown.theme-material .selected-list .countplaceholder ,
|
|
454
|
+
.stackline-dropdown.theme-dark .selected-list .countplaceholder ,
|
|
455
|
+
.stackline-dropdown.theme-custom .selected-list .countplaceholder {
|
|
393
456
|
display: inline-flex;
|
|
394
457
|
flex: 0 0 auto;
|
|
395
458
|
align-items: center;
|
|
@@ -403,7 +466,11 @@ $base-color: #0079FE;
|
|
|
403
466
|
}
|
|
404
467
|
|
|
405
468
|
.stackline-dropdown.theme-material .selected-list .fa-angle-down,
|
|
406
|
-
.stackline-dropdown.theme-
|
|
469
|
+
.stackline-dropdown.theme-dark .selected-list .fa-angle-down,
|
|
470
|
+
.stackline-dropdown.theme-custom .selected-list .fa-angle-down,
|
|
471
|
+
.stackline-dropdown.theme-material .selected-list .fa-angle-up ,
|
|
472
|
+
.stackline-dropdown.theme-dark .selected-list .fa-angle-up ,
|
|
473
|
+
.stackline-dropdown.theme-custom .selected-list .fa-angle-up {
|
|
407
474
|
position: absolute;
|
|
408
475
|
top: 50%;
|
|
409
476
|
right: 16px;
|
|
@@ -418,7 +485,9 @@ $base-color: #0079FE;
|
|
|
418
485
|
pointer-events: none;
|
|
419
486
|
}
|
|
420
487
|
|
|
421
|
-
.stackline-dropdown.theme-material .dropdown-list
|
|
488
|
+
.stackline-dropdown.theme-material .dropdown-list ,
|
|
489
|
+
.stackline-dropdown.theme-dark .dropdown-list ,
|
|
490
|
+
.stackline-dropdown.theme-custom .dropdown-list {
|
|
422
491
|
position: absolute;
|
|
423
492
|
width: 100%;
|
|
424
493
|
padding-top: 8px;
|
|
@@ -426,12 +495,20 @@ $base-color: #0079FE;
|
|
|
426
495
|
}
|
|
427
496
|
|
|
428
497
|
.stackline-dropdown.theme-material .arrow-up,
|
|
498
|
+
.stackline-dropdown.theme-dark .arrow-up,
|
|
499
|
+
.stackline-dropdown.theme-custom .arrow-up,
|
|
429
500
|
.stackline-dropdown.theme-material .arrow-down,
|
|
430
|
-
.stackline-dropdown.theme-
|
|
501
|
+
.stackline-dropdown.theme-dark .arrow-down,
|
|
502
|
+
.stackline-dropdown.theme-custom .arrow-down,
|
|
503
|
+
.stackline-dropdown.theme-material .arrow-2 ,
|
|
504
|
+
.stackline-dropdown.theme-dark .arrow-2 ,
|
|
505
|
+
.stackline-dropdown.theme-custom .arrow-2 {
|
|
431
506
|
display: none;
|
|
432
507
|
}
|
|
433
508
|
|
|
434
|
-
.stackline-dropdown.theme-material .list-area
|
|
509
|
+
.stackline-dropdown.theme-material .list-area ,
|
|
510
|
+
.stackline-dropdown.theme-dark .list-area ,
|
|
511
|
+
.stackline-dropdown.theme-custom .list-area {
|
|
435
512
|
overflow: hidden;
|
|
436
513
|
border-radius: 22px;
|
|
437
514
|
background: var(--ms-surface);
|
|
@@ -440,25 +517,31 @@ $base-color: #0079FE;
|
|
|
440
517
|
margin: 0;
|
|
441
518
|
}
|
|
442
519
|
|
|
443
|
-
.stackline-dropdown.theme-material .select-all
|
|
520
|
+
.stackline-dropdown.theme-material .select-all ,
|
|
521
|
+
.stackline-dropdown.theme-dark .select-all ,
|
|
522
|
+
.stackline-dropdown.theme-custom .select-all {
|
|
444
523
|
padding: 10px 14px;
|
|
445
|
-
border-bottom: 1px solid
|
|
446
|
-
background:
|
|
524
|
+
border-bottom: 1px solid var(--ms-divider);
|
|
525
|
+
background: var(--ms-section-bg);
|
|
447
526
|
text-align: left;
|
|
448
527
|
}
|
|
449
528
|
|
|
450
|
-
.stackline-dropdown.theme-material .list-filter
|
|
529
|
+
.stackline-dropdown.theme-material .list-filter ,
|
|
530
|
+
.stackline-dropdown.theme-dark .list-filter ,
|
|
531
|
+
.stackline-dropdown.theme-custom .list-filter {
|
|
451
532
|
position: relative;
|
|
452
533
|
display: flex;
|
|
453
534
|
align-items: center;
|
|
454
535
|
min-height: 52px;
|
|
455
536
|
padding-left: 48px;
|
|
456
537
|
padding-right: 44px;
|
|
457
|
-
border-bottom: 1px solid
|
|
538
|
+
border-bottom: 1px solid var(--ms-divider);
|
|
458
539
|
background: var(--ms-surface);
|
|
459
540
|
}
|
|
460
541
|
|
|
461
|
-
.stackline-dropdown.theme-material .list-filter input
|
|
542
|
+
.stackline-dropdown.theme-material .list-filter input ,
|
|
543
|
+
.stackline-dropdown.theme-dark .list-filter input ,
|
|
544
|
+
.stackline-dropdown.theme-custom .list-filter input {
|
|
462
545
|
width: 100%;
|
|
463
546
|
height: 100%;
|
|
464
547
|
border: 0;
|
|
@@ -468,15 +551,21 @@ $base-color: #0079FE;
|
|
|
468
551
|
padding: 0;
|
|
469
552
|
}
|
|
470
553
|
|
|
471
|
-
.stackline-dropdown.theme-material .list-filter input::placeholder
|
|
554
|
+
.stackline-dropdown.theme-material .list-filter input::placeholder ,
|
|
555
|
+
.stackline-dropdown.theme-dark .list-filter input::placeholder ,
|
|
556
|
+
.stackline-dropdown.theme-custom .list-filter input::placeholder {
|
|
472
557
|
color: var(--ms-on-surface-muted);
|
|
473
558
|
}
|
|
474
559
|
|
|
475
|
-
.stackline-dropdown.theme-material .list-filter input:focus
|
|
560
|
+
.stackline-dropdown.theme-material .list-filter input:focus ,
|
|
561
|
+
.stackline-dropdown.theme-dark .list-filter input:focus ,
|
|
562
|
+
.stackline-dropdown.theme-custom .list-filter input:focus {
|
|
476
563
|
outline: none;
|
|
477
564
|
}
|
|
478
565
|
|
|
479
|
-
.stackline-dropdown.theme-material .list-filter .fa
|
|
566
|
+
.stackline-dropdown.theme-material .list-filter .fa ,
|
|
567
|
+
.stackline-dropdown.theme-dark .list-filter .fa ,
|
|
568
|
+
.stackline-dropdown.theme-custom .list-filter .fa {
|
|
480
569
|
position: absolute;
|
|
481
570
|
top: 50%;
|
|
482
571
|
left: 16px;
|
|
@@ -489,14 +578,18 @@ $base-color: #0079FE;
|
|
|
489
578
|
color: var(--ms-on-surface-muted);
|
|
490
579
|
}
|
|
491
580
|
|
|
492
|
-
.stackline-dropdown.theme-material .dropdown-list ul
|
|
581
|
+
.stackline-dropdown.theme-material .dropdown-list ul ,
|
|
582
|
+
.stackline-dropdown.theme-dark .dropdown-list ul ,
|
|
583
|
+
.stackline-dropdown.theme-custom .dropdown-list ul {
|
|
493
584
|
list-style: none;
|
|
494
585
|
margin: 0;
|
|
495
586
|
padding: 8px;
|
|
496
587
|
overflow: auto;
|
|
497
588
|
}
|
|
498
589
|
|
|
499
|
-
.stackline-dropdown.theme-material .dropdown-list ul li
|
|
590
|
+
.stackline-dropdown.theme-material .dropdown-list ul li ,
|
|
591
|
+
.stackline-dropdown.theme-dark .dropdown-list ul li ,
|
|
592
|
+
.stackline-dropdown.theme-custom .dropdown-list ul li {
|
|
500
593
|
align-items: center;
|
|
501
594
|
min-height: 0;
|
|
502
595
|
margin: 4px;
|
|
@@ -508,23 +601,33 @@ $base-color: #0079FE;
|
|
|
508
601
|
transition: background-color .16s ease, color .16s ease;
|
|
509
602
|
}
|
|
510
603
|
|
|
511
|
-
.stackline-dropdown.theme-material .dropdown-list ul li:first-child
|
|
604
|
+
.stackline-dropdown.theme-material .dropdown-list ul li:first-child ,
|
|
605
|
+
.stackline-dropdown.theme-dark .dropdown-list ul li:first-child ,
|
|
606
|
+
.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {
|
|
512
607
|
padding-top: 12px;
|
|
513
608
|
}
|
|
514
609
|
|
|
515
|
-
.stackline-dropdown.theme-material .dropdown-list ul li:last-child
|
|
610
|
+
.stackline-dropdown.theme-material .dropdown-list ul li:last-child ,
|
|
611
|
+
.stackline-dropdown.theme-dark .dropdown-list ul li:last-child ,
|
|
612
|
+
.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {
|
|
516
613
|
padding-bottom: 12px;
|
|
517
614
|
}
|
|
518
615
|
|
|
519
|
-
.stackline-dropdown.theme-material .dropdown-list ul li:hover
|
|
616
|
+
.stackline-dropdown.theme-material .dropdown-list ul li:hover ,
|
|
617
|
+
.stackline-dropdown.theme-dark .dropdown-list ul li:hover ,
|
|
618
|
+
.stackline-dropdown.theme-custom .dropdown-list ul li:hover {
|
|
520
619
|
background: var(--ms-surface-soft);
|
|
521
620
|
}
|
|
522
621
|
|
|
523
|
-
.stackline-dropdown.theme-material .pure-checkbox
|
|
622
|
+
.stackline-dropdown.theme-material .pure-checkbox ,
|
|
623
|
+
.stackline-dropdown.theme-dark .pure-checkbox ,
|
|
624
|
+
.stackline-dropdown.theme-custom .pure-checkbox {
|
|
524
625
|
position: relative;
|
|
525
626
|
}
|
|
526
627
|
|
|
527
|
-
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label
|
|
628
|
+
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label ,
|
|
629
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"] + label ,
|
|
630
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"] + label {
|
|
528
631
|
position: relative;
|
|
529
632
|
display: block;
|
|
530
633
|
width: 100%;
|
|
@@ -536,7 +639,9 @@ $base-color: #0079FE;
|
|
|
536
639
|
user-select: none;
|
|
537
640
|
}
|
|
538
641
|
|
|
539
|
-
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label:before
|
|
642
|
+
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label:before ,
|
|
643
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"] + label:before ,
|
|
644
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"] + label:before {
|
|
540
645
|
box-sizing: content-box;
|
|
541
646
|
content: '';
|
|
542
647
|
position: absolute;
|
|
@@ -551,7 +656,9 @@ $base-color: #0079FE;
|
|
|
551
656
|
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
|
|
552
657
|
}
|
|
553
658
|
|
|
554
|
-
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label:after
|
|
659
|
+
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"] + label:after ,
|
|
660
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"] + label:after ,
|
|
661
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"] + label:after {
|
|
555
662
|
box-sizing: content-box;
|
|
556
663
|
content: '';
|
|
557
664
|
position: absolute;
|
|
@@ -571,21 +678,31 @@ $base-color: #0079FE;
|
|
|
571
678
|
}
|
|
572
679
|
|
|
573
680
|
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:focus + label:before,
|
|
574
|
-
.stackline-dropdown.theme-
|
|
681
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"]:focus + label:before,
|
|
682
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"]:focus + label:before,
|
|
683
|
+
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:hover + label:before ,
|
|
684
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"]:hover + label:before ,
|
|
685
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"]:hover + label:before {
|
|
575
686
|
border-color: var(--ms-primary);
|
|
576
687
|
background: var(--ms-surface-soft);
|
|
577
688
|
}
|
|
578
689
|
|
|
579
|
-
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:checked + label:before
|
|
690
|
+
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:checked + label:before ,
|
|
691
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"]:checked + label:before ,
|
|
692
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"]:checked + label:before {
|
|
580
693
|
border-color: var(--ms-primary);
|
|
581
694
|
background: var(--ms-primary);
|
|
582
695
|
}
|
|
583
696
|
|
|
584
|
-
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:checked + label:after
|
|
697
|
+
.stackline-dropdown.theme-material .pure-checkbox input[type="checkbox"]:checked + label:after ,
|
|
698
|
+
.stackline-dropdown.theme-dark .pure-checkbox input[type="checkbox"]:checked + label:after ,
|
|
699
|
+
.stackline-dropdown.theme-custom .pure-checkbox input[type="checkbox"]:checked + label:after {
|
|
585
700
|
transform: rotate(-45deg) scale(1);
|
|
586
701
|
}
|
|
587
702
|
|
|
588
|
-
.stackline-dropdown.theme-material .list-message
|
|
703
|
+
.stackline-dropdown.theme-material .list-message ,
|
|
704
|
+
.stackline-dropdown.theme-dark .list-message ,
|
|
705
|
+
.stackline-dropdown.theme-custom .list-message {
|
|
589
706
|
margin: 0;
|
|
590
707
|
padding: 20px 14px;
|
|
591
708
|
color: var(--ms-on-surface-muted);
|
|
@@ -21,10 +21,10 @@ const noop = () => {
|
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
@Component({
|
|
24
|
-
selector: 'angular2-multiselect',
|
|
25
|
-
template: "<div class=\"stackline-dropdown\" [ngClass]=\"
|
|
24
|
+
selector: 'angular-multiselect, angular2-multiselect',
|
|
25
|
+
template: "<div class=\"stackline-dropdown\" [ngClass]=\"getDropdownClasses()\" (clickOutside)=\"closeDropdown()\">\n <div class=\"selected-list\">\n <div class=\"c-btn\" (click)=\"toggleDropdown($event)\" [ngClass]=\"{'disabled': settings.disabled}\">\n <span *ngIf=\"selectedItems?.length == 0\">{{settings.text}}</span>\n <span *ngIf=\"settings.singleSelection\">\n <span *ngFor=\"let item of selectedItems;trackBy: trackByFn;\">\n {{item[settings.labelKey]}}\n </span>\n </span>\n <div class=\"c-list\" *ngIf=\"selectedItems?.length > 0 && !settings.singleSelection\">\n <div class=\"c-token\" *ngFor=\"let item of selectedItems;trackBy: trackByFn;let k = index\" [hidden]=\"k > settings.badgeShowLimit-1\">\n <span *ngIf=\"!badgeTempl\" class=\"c-label\">{{item[settings.labelKey]}}</span>\n <span *ngIf=\"badgeTempl\" class=\"c-label\">\n <c-templateRenderer [data]=\"badgeTempl\" [item]=\"item\"></c-templateRenderer>\n </span>\n <span class=\"fa fa-remove\" (click)=\"onItemClick(item,k,$event)\"></span>\n </div>\n </div> \n <span class=\"countplaceholder\" *ngIf=\"selectedItems?.length > settings.badgeShowLimit\">+{{selectedItems?.length - settings.badgeShowLimit }}</span>\n <span class=\"fa\" [ngClass]=\"{'fa-angle-down': !isActive,'fa-angle-up':isActive}\"></span>\n </div> \n </div>\n <div class=\"dropdown-list\" [hidden]=\"!isActive\">\n <div class=\"arrow-up arrow-2\"></div>\n <div class=\"arrow-up\"></div>\n <div class=\"list-area\">\n <div class=\"pure-checkbox select-all\" *ngIf=\"settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection\" (click)=\"toggleSelectAll()\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelectAll\" [disabled]=\"settings.limitSelection == selectedItems?.length\"/>\n <label>\n <span [hidden]=\"isSelectAll\">{{settings.selectAllText}}</span>\n <span [hidden]=\"!isSelectAll\">{{settings.unSelectAllText}}</span>\n </label>\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && !settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" [(ngModel)]=\"filter\">\n </div> \n <div class=\"list-filter\" *ngIf=\"settings.enableSearchFilter && settings.lazyLoading\">\n <span class=\"fa fa-search\"></span>\n <input #searchInput type=\"text\" [placeholder]=\"settings.searchPlaceholderText\" (keyup)=\"filterInfiniteList($event)\">\n </div>\n <ul *ngIf=\"!settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" class=\"lazyContainer\" >\n <span *ngIf=\"itemTempl\">\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && !settings.lazyLoading\" >\n <li *ngFor=\"let item of data | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n <span *ngIf=\"!itemTempl && settings.lazyLoading\" >\n <div [ngStyle]=\"{'height':totalHeight+'px'}\" style=\"position: relative;\">\n\n \n <li *ngFor=\"let item of chunkArray | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" style=\"position: absolute;width: 100%;\" class=\"pure-checkbox\" [styleProp]=\"chunkIndex[i]\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </div>\n </span>\n </ul>\n <div *ngIf=\"settings.groupBy\" [style.maxHeight] = \"settings.maxHeight+'px'\" style=\"overflow: auto;\">\n <ul *ngFor=\"let obj of groupedData ; let i = index;\" class=\"list-grp\">\n <h4 *ngIf=\"(obj.value | listFilter:filter ).length > 0\">{{obj.key}}</h4>\n <span *ngIf=\"itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label></label>\n <c-templateRenderer [data]=\"itemTempl\" [item]=\"item\"></c-templateRenderer>\n </li>\n </span>\n <span *ngIf=\"!itemTempl\" >\n <li *ngFor=\"let item of obj.value | listFilter:filter; let i = index;\" (click)=\"onItemClick(item,i,$event)\" class=\"pure-checkbox\">\n <input *ngIf=\"settings.showCheckbox\" type=\"checkbox\" [checked]=\"isSelected(item)\" [disabled]=\"settings.limitSelection == selectedItems?.length && !isSelected(item)\"/>\n <label>{{item[settings.labelKey]}}</label>\n </li>\n </span>\n </ul>\n </div>\n <h5 class=\"list-message\" *ngIf=\"data?.length == 0\">{{settings.noDataLabel}}</h5>\n </div>\n </div>\n</div>\n",
|
|
26
26
|
host: { '[class]': 'defaultSettings.classes' },
|
|
27
|
-
styles: [".stackline-dropdown {\n position: relative;\n}\n\n.c-btn {\n display: inline-block;\n background: #fff;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 14px;\n color: #333;\n}\n\n.c-btn.disabled {\n background: #ccc;\n}\n\n.c-btn:focus {\n outline: none;\n}\n\n.selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n flex-wrap: wrap;\n min-width: 0;\n float: none;\n padding: 0px;\n margin: 0px;\n width: auto;\n}\n.selected-list .c-list .c-token {\n list-style: none;\n padding: 0px 5px;\n background: #0079FE;\n color: #fff;\n border-radius: 2px;\n margin-right: 4px;\n margin-top: 2px;\n float: left;\n}\n.selected-list .c-list .c-token .c-label {\n display: block;\n float: left;\n /*width: 50px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n margin-left: 1px;\n font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n font-size: 15pt;\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0 0 0 6px;\n line-height: 1;\n}\n.selected-list .c-btn {\n box-sizing: border-box;\n width: 100%;\n box-shadow: 0px 1px 5px #959595;\n padding: 10px 36px 10px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n position: relative;\n}\n\n.dropdown-list {\n position: absolute;\n padding-top: 14px;\n width: 100%;\n z-index: 9999;\n}\n.dropdown-list ul {\n padding: 0px;\n list-style: none;\n overflow: auto;\n margin: 0px;\n}\n.dropdown-list ul li {\n padding: 10px 10px;\n cursor: pointer;\n text-align: left;\n}\n.dropdown-list ul li:first-child {\n padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n background: #cccccc;\n border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n background: #f2f2f2;\n}\n\n.arrow-up {\n width: 0;\n height: 0;\n border-left: 13px solid transparent;\n border-right: 13px solid transparent;\n border-bottom: 15px solid #fff;\n margin-left: 15px;\n position: absolute;\n top: 0;\n}\n\n.arrow-2 {\n border-bottom: 15px solid #ccc;\n top: -1px;\n}\n\n.list-area {\n border: 1px solid #ccc;\n border-radius: 3px;\n background: #fff;\n margin: 0px;\n box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n padding: 10px;\n border-bottom: 1px solid #ccc;\n text-align: left;\n}\n\n.list-filter {\n border-bottom: 1px solid #ccc;\n position: relative;\n}\n.list-filter input {\n border: 0px;\n width: 100%;\n height: 35px;\n padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n outline: none;\n}\n.list-filter .fa {\n position: absolute;\n top: 10px;\n left: 13px;\n color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: #0079FE;\n background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n position: relative;\n padding-left: 2em;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n margin: 0px;\n color: #000;\n font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n color: #0079FE;\n position: absolute;\n top: 50%;\n left: 0;\n width: 14px;\n height: 14px;\n margin-top: -9px;\n border: 2px solid #0079FE;\n text-align: center;\n transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n background-color: #0079FE;\n position: absolute;\n top: 50%;\n left: 4px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n transform: scale(0);\n transform-origin: 50%;\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n background-color: transparent;\n top: 50%;\n left: 4px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n content: \"\";\n transform: rotate(-45deg) scale(1);\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n text-align: center;\n}\n\n.list-grp {\n padding: 0 15px !important;\n}\n\n.list-grp h4 {\n text-transform: capitalize;\n margin: 15px 0px 0px 0px;\n font-size: 14px;\n font-weight: 700;\n}\n\n.list-grp > li {\n padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material {\n --ms-primary: #3f51b5;\n --ms-primary-soft: rgba(63, 81, 181, 0.12);\n --ms-surface: #ffffff;\n --ms-surface-soft: #f5f7fb;\n --ms-surface-muted: #e8eaf6;\n --ms-outline: #c5cae9;\n --ms-outline-strong: #7986cb;\n --ms-on-surface: #212121;\n --ms-on-surface-muted: #5f6368;\n --ms-chip-bg: #e8eaf6;\n --ms-chip-text: #303f9f;\n --ms-chip-remove: #303f9f;\n --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n display: block;\n width: 100%;\n color: var(--ms-on-surface);\n font: inherit;\n}\n\n.stackline-dropdown.theme-material .selected-list {\n width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn {\n position: relative;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n width: 100%;\n min-height: 56px;\n padding: 11px 54px 11px 16px;\n border-radius: 18px;\n border: 1px solid var(--ms-outline);\n background: var(--ms-surface);\n box-shadow: var(--ms-shadow-soft);\n color: var(--ms-on-surface);\n cursor: pointer;\n font-size: inherit;\n line-height: 1.45;\n transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover {\n border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled {\n background: var(--ms-surface);\n cursor: not-allowed;\n opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n gap: 8px;\n width: auto;\n min-width: 0;\n margin: 0;\n padding: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token {\n position: relative;\n display: inline-block;\n vertical-align: middle;\n min-height: 32px;\n max-width: 100%;\n padding: 6px 30px 6px 12px;\n background: var(--ms-chip-bg);\n color: var(--ms-chip-text);\n border-radius: 999px;\n box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n line-height: 1.35;\n white-space: normal;\n overflow-wrap: anywhere;\n margin: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label {\n display: inline-flex;\n align-items: center;\n float: none;\n min-width: 0;\n max-width: 100%;\n line-height: 1.3;\n font-weight: 500;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove {\n position: absolute;\n right: 10px;\n top: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-left: 0;\n transform: translateY(-50%);\n color: var(--ms-chip-remove);\n cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0;\n line-height: 1;\n color: var(--ms-on-surface-muted);\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up {\n position: absolute;\n top: 50%;\n right: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n font-size: 15pt;\n pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list {\n position: absolute;\n width: 100%;\n padding-top: 8px;\n z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-material .arrow-2 {\n display: none;\n}\n\n.stackline-dropdown.theme-material .list-area {\n overflow: hidden;\n border-radius: 22px;\n background: var(--ms-surface);\n border: 1px solid var(--ms-outline);\n box-shadow: var(--ms-shadow);\n margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all {\n padding: 10px 14px;\n border-bottom: 1px solid rgba(125, 119, 134, 0.16);\n background: rgba(247, 242, 250, 0.76);\n text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 52px;\n padding-left: 48px;\n padding-right: 44px;\n border-bottom: 1px solid rgba(125, 119, 134, 0.16);\n background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input {\n width: 100%;\n height: 100%;\n border: 0;\n background: transparent;\n color: var(--ms-on-surface);\n font: inherit;\n padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder {\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus {\n outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa {\n position: absolute;\n top: 50%;\n left: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul {\n list-style: none;\n margin: 0;\n padding: 8px;\n overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li {\n align-items: center;\n min-height: 0;\n margin: 4px;\n padding: 12px 14px;\n border-radius: 14px;\n cursor: pointer;\n text-align: left;\n line-height: 1.35;\n transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child {\n padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child {\n padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover {\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox {\n position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label {\n position: relative;\n display: block;\n width: 100%;\n margin: 0;\n padding-left: 32px;\n color: inherit;\n cursor: pointer;\n font-weight: 500;\n user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n width: 16px;\n height: 16px;\n margin-top: -10px;\n border: 2px solid var(--ms-outline-strong);\n border-radius: 5px;\n background: var(--ms-surface);\n transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 5px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n background: transparent;\n transform: rotate(-45deg) scale(0);\n transform-origin: 50%;\n transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message {\n margin: 0;\n padding: 20px 14px;\n color: var(--ms-on-surface-muted);\n text-align: center;\n}\n\n/*# sourceMappingURL=multiselect.component.css.map */\n"],
|
|
27
|
+
styles: [".stackline-dropdown {\n position: relative;\n}\n\n.c-btn {\n display: inline-block;\n background: #fff;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 14px;\n color: #333;\n}\n\n.c-btn.disabled {\n background: #ccc;\n}\n\n.c-btn:focus {\n outline: none;\n}\n\n.selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n flex-wrap: wrap;\n min-width: 0;\n float: none;\n padding: 0px;\n margin: 0px;\n width: auto;\n}\n.selected-list .c-list .c-token {\n list-style: none;\n padding: 0px 5px;\n background: #0079FE;\n color: #fff;\n border-radius: 2px;\n margin-right: 4px;\n margin-top: 2px;\n float: left;\n}\n.selected-list .c-list .c-token .c-label {\n display: block;\n float: left;\n /*width: 50px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;*/\n}\n.selected-list .c-list .c-token .fa-remove {\n margin-left: 1px;\n font-size: 12px;\n}\n.selected-list .fa-angle-down, .selected-list .fa-angle-up {\n font-size: 15pt;\n position: absolute;\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n}\n.selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0 0 0 6px;\n line-height: 1;\n}\n.selected-list .c-btn {\n box-sizing: border-box;\n width: 100%;\n box-shadow: 0px 1px 5px #959595;\n padding: 10px 36px 10px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n position: relative;\n}\n\n.dropdown-list {\n position: absolute;\n padding-top: 14px;\n width: 100%;\n z-index: 9999;\n}\n.dropdown-list ul {\n padding: 0px;\n list-style: none;\n overflow: auto;\n margin: 0px;\n}\n.dropdown-list ul li {\n padding: 10px 10px;\n cursor: pointer;\n text-align: left;\n}\n.dropdown-list ul li:first-child {\n padding-top: 10px;\n}\n.dropdown-list ul li:last-child {\n padding-bottom: 10px;\n}\n.dropdown-list ul li:hover {\n background: #f5f5f5;\n}\n.dropdown-list ::-webkit-scrollbar {\n width: 8px;\n}\n.dropdown-list ::-webkit-scrollbar-thumb {\n background: #cccccc;\n border-radius: 5px;\n}\n.dropdown-list ::-webkit-scrollbar-track {\n background: #f2f2f2;\n}\n\n.arrow-up {\n width: 0;\n height: 0;\n border-left: 13px solid transparent;\n border-right: 13px solid transparent;\n border-bottom: 15px solid #fff;\n margin-left: 15px;\n position: absolute;\n top: 0;\n}\n\n.arrow-2 {\n border-bottom: 15px solid #ccc;\n top: -1px;\n}\n\n.list-area {\n border: 1px solid #ccc;\n border-radius: 3px;\n background: #fff;\n margin: 0px;\n box-shadow: 0px 1px 5px #959595;\n}\n\n.select-all {\n padding: 10px;\n border-bottom: 1px solid #ccc;\n text-align: left;\n}\n\n.list-filter {\n border-bottom: 1px solid #ccc;\n position: relative;\n}\n.list-filter input {\n border: 0px;\n width: 100%;\n height: 35px;\n padding: 0px 0px 0px 35px;\n}\n.list-filter input:focus {\n outline: none;\n}\n.list-filter .fa {\n position: absolute;\n top: 10px;\n left: 13px;\n color: #888;\n}\n\n.pure-checkbox input[type=checkbox] {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.pure-checkbox input[type=checkbox]:focus + label:before,\n.pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: #0079FE;\n background-color: #f2f2f2;\n}\n\n.pure-checkbox input[type=checkbox]:active + label:before {\n transition-duration: 0s;\n}\n\n.pure-checkbox input[type=checkbox] + label {\n position: relative;\n padding-left: 2em;\n vertical-align: middle;\n user-select: none;\n cursor: pointer;\n margin: 0px;\n color: #000;\n font-weight: 300;\n}\n\n.pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n color: #0079FE;\n position: absolute;\n top: 50%;\n left: 0;\n width: 14px;\n height: 14px;\n margin-top: -9px;\n border: 2px solid #0079FE;\n text-align: center;\n transition: all 0.4s ease;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n background-color: #0079FE;\n position: absolute;\n top: 50%;\n left: 4px;\n width: 10px;\n height: 10px;\n margin-top: -5px;\n transform: scale(0);\n transform-origin: 50%;\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=checkbox]:disabled + label:before {\n border-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:focus + label:before .pure-checkbox input[type=checkbox]:disabled:hover + label:before {\n background-color: inherit;\n}\n\n.pure-checkbox input[type=checkbox]:disabled:checked + label:before {\n background-color: #cccccc;\n}\n\n.pure-checkbox input[type=checkbox] + label:after {\n background-color: transparent;\n top: 50%;\n left: 4px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n transform: rotate(-45deg) scale(0);\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n content: \"\";\n transform: rotate(-45deg) scale(1);\n transition: transform 200ms ease-out;\n}\n\n.pure-checkbox input[type=radio]:checked + label:before {\n background-color: white;\n}\n\n.pure-checkbox input[type=radio]:checked + label:after {\n transform: scale(1);\n}\n\n.pure-checkbox input[type=radio] + label:before {\n border-radius: 50%;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:before {\n background: #0079FE;\n}\n\n.pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.list-message {\n text-align: center;\n}\n\n.list-grp {\n padding: 0 15px !important;\n}\n\n.list-grp h4 {\n text-transform: capitalize;\n margin: 15px 0px 0px 0px;\n font-size: 14px;\n font-weight: 700;\n}\n\n.list-grp > li {\n padding-left: 15px !important;\n}\n\n.stackline-dropdown.theme-material,\n.stackline-dropdown.theme-dark,\n.stackline-dropdown.theme-custom {\n --ms-primary: #3f51b5;\n --ms-primary-soft: rgba(63, 81, 181, 0.12);\n --ms-surface: #ffffff;\n --ms-surface-soft: #f5f7fb;\n --ms-surface-muted: #e8eaf6;\n --ms-outline: #c5cae9;\n --ms-outline-strong: #7986cb;\n --ms-on-surface: #212121;\n --ms-on-surface-muted: #5f6368;\n --ms-chip-bg: #e8eaf6;\n --ms-chip-text: #303f9f;\n --ms-chip-remove: #303f9f;\n --ms-divider: rgba(125, 119, 134, 0.16);\n --ms-section-bg: rgba(247, 242, 250, 0.76);\n --ms-selected-text: var(--ms-primary);\n --ms-shadow: 0 1px 2px rgba(33, 33, 33, 0.16), 0 12px 32px rgba(63, 81, 181, 0.12);\n --ms-shadow-soft: 0 1px 2px rgba(33, 33, 33, 0.12), 0 4px 12px rgba(33, 33, 33, 0.08);\n display: block;\n width: 100%;\n color: var(--ms-on-surface);\n font: inherit;\n}\n\n.stackline-dropdown.theme-dark {\n --ms-primary: #8ab4f8;\n --ms-primary-soft: rgba(138, 180, 248, 0.18);\n --ms-surface: #151a23;\n --ms-surface-soft: #202736;\n --ms-surface-muted: #111722;\n --ms-outline: #384456;\n --ms-outline-strong: #8ab4f8;\n --ms-on-surface: #edf2f7;\n --ms-on-surface-muted: #aab6c5;\n --ms-chip-bg: #263247;\n --ms-chip-text: #d7e6ff;\n --ms-chip-remove: #d7e6ff;\n --ms-divider: rgba(170, 182, 197, 0.18);\n --ms-section-bg: #101620;\n --ms-selected-text: #d7e6ff;\n --ms-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);\n --ms-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.28);\n}\n\n.stackline-dropdown.theme-custom {\n --ms-primary: var(--stackline-ms-primary, #0f766e);\n --ms-primary-soft: var(--stackline-ms-primary-soft, rgba(15, 118, 110, 0.14));\n --ms-surface: var(--stackline-ms-surface, #ffffff);\n --ms-surface-soft: var(--stackline-ms-surface-soft, #ecfdf5);\n --ms-surface-muted: var(--stackline-ms-surface-muted, #d1fae5);\n --ms-outline: var(--stackline-ms-outline, #99f6e4);\n --ms-outline-strong: var(--stackline-ms-outline-strong, #0f766e);\n --ms-on-surface: var(--stackline-ms-on-surface, #102a2a);\n --ms-on-surface-muted: var(--stackline-ms-on-surface-muted, #47615f);\n --ms-chip-bg: var(--stackline-ms-chip-bg, #ccfbf1);\n --ms-chip-text: var(--stackline-ms-chip-text, #115e59);\n --ms-chip-remove: var(--stackline-ms-chip-remove, #115e59);\n --ms-divider: var(--stackline-ms-divider, rgba(15, 118, 110, 0.16));\n --ms-section-bg: var(--stackline-ms-section-bg, #f0fdfa);\n --ms-selected-text: var(--stackline-ms-selected-text, var(--ms-primary));\n --ms-shadow: var(--stackline-ms-shadow, 0 18px 42px rgba(15, 118, 110, 0.15));\n --ms-shadow-soft: var(--stackline-ms-shadow-soft, 0 1px 2px rgba(15, 118, 110, 0.16), 0 8px 18px rgba(15, 118, 110, 0.09));\n}\n\n.stackline-dropdown.theme-material .selected-list,\n.stackline-dropdown.theme-dark .selected-list,\n.stackline-dropdown.theme-custom .selected-list {\n width: 100%;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn,\n.stackline-dropdown.theme-dark .selected-list .c-btn,\n.stackline-dropdown.theme-custom .selected-list .c-btn {\n position: relative;\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 8px;\n width: 100%;\n min-height: 56px;\n padding: 11px 54px 11px 16px;\n border-radius: 18px;\n border: 1px solid var(--ms-outline);\n background: var(--ms-surface);\n box-shadow: var(--ms-shadow-soft);\n color: var(--ms-on-surface);\n cursor: pointer;\n font-size: inherit;\n line-height: 1.45;\n transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn:hover,\n.stackline-dropdown.theme-dark .selected-list .c-btn:hover,\n.stackline-dropdown.theme-custom .selected-list .c-btn:hover {\n border-color: var(--ms-outline-strong);\n}\n\n.stackline-dropdown.theme-material .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-dark .selected-list .c-btn.disabled,\n.stackline-dropdown.theme-custom .selected-list .c-btn.disabled {\n background: var(--ms-surface);\n cursor: not-allowed;\n opacity: 0.72;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list,\n.stackline-dropdown.theme-dark .selected-list .c-list,\n.stackline-dropdown.theme-custom .selected-list .c-list {\n display: flex;\n flex: 1 1 auto;\n flex-wrap: wrap;\n gap: 8px;\n width: auto;\n min-width: 0;\n margin: 0;\n padding: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token {\n position: relative;\n display: inline-block;\n vertical-align: middle;\n min-height: 32px;\n max-width: 100%;\n padding: 6px 30px 6px 12px;\n background: var(--ms-chip-bg);\n color: var(--ms-chip-text);\n border-radius: 999px;\n box-shadow: inset 0 0 0 1px rgba(103, 80, 164, 0.08);\n line-height: 1.35;\n white-space: normal;\n overflow-wrap: anywhere;\n margin: 0;\n float: none;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .c-label,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .c-label {\n display: inline-flex;\n align-items: center;\n float: none;\n min-width: 0;\n max-width: 100%;\n line-height: 1.3;\n font-weight: 500;\n white-space: normal;\n overflow-wrap: anywhere;\n}\n\n.stackline-dropdown.theme-material .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-dark .selected-list .c-list .c-token .fa-remove,\n.stackline-dropdown.theme-custom .selected-list .c-list .c-token .fa-remove {\n position: absolute;\n right: 10px;\n top: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n margin-left: 0;\n transform: translateY(-50%);\n color: var(--ms-chip-remove);\n cursor: pointer;\n}\n\n.stackline-dropdown.theme-material .selected-list .countplaceholder,\n.stackline-dropdown.theme-dark .selected-list .countplaceholder,\n.stackline-dropdown.theme-custom .selected-list .countplaceholder {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n align-self: center;\n margin: 0;\n line-height: 1;\n color: var(--ms-on-surface-muted);\n font-size: 0.8rem;\n font-weight: 600;\n}\n\n.stackline-dropdown.theme-material .selected-list .fa-angle-down,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-down,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-down,\n.stackline-dropdown.theme-material .selected-list .fa-angle-up,\n.stackline-dropdown.theme-dark .selected-list .fa-angle-up,\n.stackline-dropdown.theme-custom .selected-list .fa-angle-up {\n position: absolute;\n top: 50%;\n right: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n font-size: 15pt;\n pointer-events: none;\n}\n\n.stackline-dropdown.theme-material .dropdown-list,\n.stackline-dropdown.theme-dark .dropdown-list,\n.stackline-dropdown.theme-custom .dropdown-list {\n position: absolute;\n width: 100%;\n padding-top: 8px;\n z-index: 99999;\n}\n\n.stackline-dropdown.theme-material .arrow-up,\n.stackline-dropdown.theme-dark .arrow-up,\n.stackline-dropdown.theme-custom .arrow-up,\n.stackline-dropdown.theme-material .arrow-down,\n.stackline-dropdown.theme-dark .arrow-down,\n.stackline-dropdown.theme-custom .arrow-down,\n.stackline-dropdown.theme-material .arrow-2,\n.stackline-dropdown.theme-dark .arrow-2,\n.stackline-dropdown.theme-custom .arrow-2 {\n display: none;\n}\n\n.stackline-dropdown.theme-material .list-area,\n.stackline-dropdown.theme-dark .list-area,\n.stackline-dropdown.theme-custom .list-area {\n overflow: hidden;\n border-radius: 22px;\n background: var(--ms-surface);\n border: 1px solid var(--ms-outline);\n box-shadow: var(--ms-shadow);\n margin: 0;\n}\n\n.stackline-dropdown.theme-material .select-all,\n.stackline-dropdown.theme-dark .select-all,\n.stackline-dropdown.theme-custom .select-all {\n padding: 10px 14px;\n border-bottom: 1px solid var(--ms-divider);\n background: var(--ms-section-bg);\n text-align: left;\n}\n\n.stackline-dropdown.theme-material .list-filter,\n.stackline-dropdown.theme-dark .list-filter,\n.stackline-dropdown.theme-custom .list-filter {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 52px;\n padding-left: 48px;\n padding-right: 44px;\n border-bottom: 1px solid var(--ms-divider);\n background: var(--ms-surface);\n}\n\n.stackline-dropdown.theme-material .list-filter input,\n.stackline-dropdown.theme-dark .list-filter input,\n.stackline-dropdown.theme-custom .list-filter input {\n width: 100%;\n height: 100%;\n border: 0;\n background: transparent;\n color: var(--ms-on-surface);\n font: inherit;\n padding: 0;\n}\n\n.stackline-dropdown.theme-material .list-filter input::placeholder,\n.stackline-dropdown.theme-dark .list-filter input::placeholder,\n.stackline-dropdown.theme-custom .list-filter input::placeholder {\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .list-filter input:focus,\n.stackline-dropdown.theme-dark .list-filter input:focus,\n.stackline-dropdown.theme-custom .list-filter input:focus {\n outline: none;\n}\n\n.stackline-dropdown.theme-material .list-filter .fa,\n.stackline-dropdown.theme-dark .list-filter .fa,\n.stackline-dropdown.theme-custom .list-filter .fa {\n position: absolute;\n top: 50%;\n left: 16px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n transform: translateY(-50%);\n color: var(--ms-on-surface-muted);\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul,\n.stackline-dropdown.theme-dark .dropdown-list ul,\n.stackline-dropdown.theme-custom .dropdown-list ul {\n list-style: none;\n margin: 0;\n padding: 8px;\n overflow: auto;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li,\n.stackline-dropdown.theme-dark .dropdown-list ul li,\n.stackline-dropdown.theme-custom .dropdown-list ul li {\n align-items: center;\n min-height: 0;\n margin: 4px;\n padding: 12px 14px;\n border-radius: 14px;\n cursor: pointer;\n text-align: left;\n line-height: 1.35;\n transition: background-color 0.16s ease, color 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:first-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:first-child {\n padding-top: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-dark .dropdown-list ul li:last-child,\n.stackline-dropdown.theme-custom .dropdown-list ul li:last-child {\n padding-bottom: 12px;\n}\n\n.stackline-dropdown.theme-material .dropdown-list ul li:hover,\n.stackline-dropdown.theme-dark .dropdown-list ul li:hover,\n.stackline-dropdown.theme-custom .dropdown-list ul li:hover {\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox,\n.stackline-dropdown.theme-dark .pure-checkbox,\n.stackline-dropdown.theme-custom .pure-checkbox {\n position: relative;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label {\n position: relative;\n display: block;\n width: 100%;\n margin: 0;\n padding-left: 32px;\n color: inherit;\n cursor: pointer;\n font-weight: 500;\n user-select: none;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:before {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 0;\n width: 16px;\n height: 16px;\n margin-top: -10px;\n border: 2px solid var(--ms-outline-strong);\n border-radius: 5px;\n background: var(--ms-surface);\n transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox] + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox] + label:after {\n box-sizing: content-box;\n content: \"\";\n position: absolute;\n top: 50%;\n left: 5px;\n width: 8px;\n height: 3px;\n margin-top: -4px;\n border-style: solid;\n border-color: #ffffff;\n border-width: 0 0 3px 3px;\n border-image: none;\n background: transparent;\n transform: rotate(-45deg) scale(0);\n transform-origin: 50%;\n transition: transform 0.16s ease;\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:focus + label:before,\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:hover + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:hover + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-surface-soft);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:before,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:before {\n border-color: var(--ms-primary);\n background: var(--ms-primary);\n}\n\n.stackline-dropdown.theme-material .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-dark .pure-checkbox input[type=checkbox]:checked + label:after,\n.stackline-dropdown.theme-custom .pure-checkbox input[type=checkbox]:checked + label:after {\n transform: rotate(-45deg) scale(1);\n}\n\n.stackline-dropdown.theme-material .list-message,\n.stackline-dropdown.theme-dark .list-message,\n.stackline-dropdown.theme-custom .list-message {\n margin: 0;\n padding: 20px 14px;\n color: var(--ms-on-surface-muted);\n text-align: center;\n}\n"],
|
|
28
28
|
providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALIDATION]
|
|
29
29
|
})
|
|
30
30
|
|
|
@@ -96,11 +96,35 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
|
|
|
96
96
|
searchAutofocus: true,
|
|
97
97
|
lazyLoading: false,
|
|
98
98
|
labelKey: 'itemName',
|
|
99
|
-
theme: 'classic'
|
|
99
|
+
theme: 'classic',
|
|
100
|
+
skin: 'classic'
|
|
100
101
|
}
|
|
101
102
|
public parseError: boolean;
|
|
102
103
|
constructor(public _elementRef : ElementRef) {
|
|
103
104
|
|
|
105
|
+
}
|
|
106
|
+
getThemeName(): string {
|
|
107
|
+
let rawTheme: any = 'classic';
|
|
108
|
+
if (this.settings) {
|
|
109
|
+
rawTheme = this.settings.skin || this.settings.theme || 'classic';
|
|
110
|
+
}
|
|
111
|
+
let theme = String(rawTheme).toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
|
|
112
|
+
theme = theme.replace(/^-+|-+$/g, '');
|
|
113
|
+
return theme || 'classic';
|
|
114
|
+
}
|
|
115
|
+
getDropdownClasses(): string {
|
|
116
|
+
let theme = this.getThemeName();
|
|
117
|
+
let className = 'theme-' + theme;
|
|
118
|
+
if (theme !== 'classic' && theme !== 'material' && theme !== 'dark' && theme !== 'custom') {
|
|
119
|
+
className += ' theme-custom';
|
|
120
|
+
}
|
|
121
|
+
if (this.isActive) {
|
|
122
|
+
className += ' is-open';
|
|
123
|
+
}
|
|
124
|
+
if (this.settings && this.settings.disabled) {
|
|
125
|
+
className += ' is-disabled';
|
|
126
|
+
}
|
|
127
|
+
return className;
|
|
104
128
|
}
|
|
105
129
|
ngOnInit() {
|
|
106
130
|
this.settings = Object.assign(this.defaultSettings, this.settings);
|