@stackline/angular-multiselect-dropdown 2.0.4 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +259 -218
  2. package/multiselect.component.css +180 -39
  3. package/package.json +6 -18
  4. package/src/app/angular2-multiselect-dropdown/multiselect.component.html +2 -1
  5. package/src/app/angular2-multiselect-dropdown/multiselect.component.scss +157 -38
  6. package/src/app/angular2-multiselect-dropdown/multiselect.component.ts +36 -4
  7. package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts +1 -0
  8. package/multiselect.component.css.map +0 -1
package/src/app/angular2-multiselect-dropdown/multiselect.component.scss CHANGED
@@ -72,7 +72,7 @@ $base-color: #0079FE;
72
72
  box-sizing: border-box;
73
73
  width: 100%;
74
74
  box-shadow: 0px 1px 5px #959595;
75
- padding: 10px 36px 10px 10px;
75
+ padding: 10px 68px 10px 10px;
76
76
  cursor: pointer;
77
77
  display: flex;
78
78
  align-items: center;
@@ -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-material .selected-list {
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;
@@ -310,7 +359,7 @@ $base-color: #0079FE;
310
359
  gap: 8px;
311
360
  width: 100%;
312
361
  min-height: 56px;
313
- padding: 11px 54px 11px 16px;
362
+ padding: 11px 84px 11px 16px;
314
363
  border-radius: 18px;
315
364
  border: 1px solid var(--ms-outline);
316
365
  background: var(--ms-surface);
@@ -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-material .selected-list .fa-angle-up {
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-material .arrow-2 {
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 rgba(125, 119, 134, 0.16);
446
- background: rgba(247, 242, 250, 0.76);
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 rgba(125, 119, 134, 0.16);
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,23 +678,35 @@ $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-material .pure-checkbox input[type="checkbox"]:hover + label:before {
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);
592
709
  text-align: center;
593
710
  }
711
+
712
+ .selected-list .clear-all{font-size:12pt;position:absolute;right:42px;top:50%;transform:translateY(-50%);cursor:pointer}.stackline-dropdown.theme-material .selected-list .clear-all,.stackline-dropdown.theme-dark .selected-list .clear-all,.stackline-dropdown.theme-custom .selected-list .clear-all{position:absolute;top:50%;right:42px;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;transform:translateY(-50%);color:var(--ms-on-surface-muted);cursor:pointer}
package/src/app/angular2-multiselect-dropdown/multiselect.component.ts CHANGED
@@ -21,10 +21,10 @@ const noop = () => {
21
21
  };
22
22
 
23
23
  @Component({
24
- selector: 'angular2-multiselect',
25
- template: "<div class=\"stackline-dropdown\" [ngClass]=\"{'theme-material': settings.theme == 'material', 'theme-classic': settings.theme != 'material'}\" (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",
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 fa-remove clear-all\" *ngIf=\"settings.clearAll && selectedItems?.length > 0 && !settings.disabled\" (click)=\"clearSelection($event);$event.stopPropagation()\"></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 68px 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 84px 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,36 @@ 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',
101
+ clearAll: true
100
102
  }
101
103
  public parseError: boolean;
102
104
  constructor(public _elementRef : ElementRef) {
103
105
 
106
+ }
107
+ getThemeName(): string {
108
+ let rawTheme: any = 'classic';
109
+ if (this.settings) {
110
+ rawTheme = this.settings.skin || this.settings.theme || 'classic';
111
+ }
112
+ let theme = String(rawTheme).toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
113
+ theme = theme.replace(/^-+|-+$/g, '');
114
+ return theme || 'classic';
115
+ }
116
+ getDropdownClasses(): string {
117
+ let theme = this.getThemeName();
118
+ let className = 'theme-' + theme;
119
+ if (theme !== 'classic' && theme !== 'material' && theme !== 'dark' && theme !== 'custom') {
120
+ className += ' theme-custom';
121
+ }
122
+ if (this.isActive) {
123
+ className += ' is-open';
124
+ }
125
+ if (this.settings && this.settings.disabled) {
126
+ className += ' is-disabled';
127
+ }
128
+ return className;
104
129
  }
105
130
  ngOnInit() {
106
131
  this.settings = Object.assign(this.defaultSettings, this.settings);
@@ -254,6 +279,13 @@ export class AngularMultiSelect implements OnInit, ControlValueAccessor, OnChang
254
279
  this.onChangeCallback(this.selectedItems);
255
280
  this.onTouchedCallback(this.selectedItems);
256
281
  }
282
+ clearSelection(e?: any) {
283
+ this.selectedItems = [];
284
+ this.isSelectAll = false;
285
+ this.onChangeCallback(this.selectedItems);
286
+ this.onTouchedCallback(this.selectedItems);
287
+ this.onDeSelectAll.emit(this.selectedItems);
288
+ }
257
289
  toggleDropdown(evt: any) {
258
290
  if (this.settings.disabled) {
259
291
  return false;
package/src/app/angular2-multiselect-dropdown/multiselect.interface.ts CHANGED
@@ -18,4 +18,5 @@ export interface DropdownSettings{
18
18
  lazyLoading?: boolean;
19
19
  labelKey?: String;
20
20
  theme?: String;
21
+ skin?: String;
21
22
  }
package/multiselect.component.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["src/app/angular2-multiselect-dropdown/multiselect.component.scss"],"names":[],"mappings":"AAGA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACQ;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA,YAjCC;EAkCD;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;AACA;AAAA;AAAA;AAAA;;AAKJ;EACI;EACA;;AAIZ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;AAAA;EAGE,cA/KW;EAgLX;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OAlMW;EAmMX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,kBAhNW;EAiNX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EAEE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE,YAjQW;;;AAmQb;EACE;;;AAEF;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;AAAA;AAAA;EAGI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA","file":"multiselect.component.css"}