nw-style-guide 20.1.0 → 20.3.0-beta.0

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 (22) hide show
  1. package/fesm2022/nw-style-guide-picker.mjs +90 -32
  2. package/fesm2022/nw-style-guide-picker.mjs.map +1 -1
  3. package/fesm2022/nw-style-guide-tabs.mjs +9 -1
  4. package/fesm2022/nw-style-guide-tabs.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/picker/index.d.ts +4 -0
  7. package/sass/src/components/picker.component.scss +8 -0
  8. package/styles.css +1 -1
  9. package/tabs/index.d.ts +2 -0
  10. package/animations/package.json +0 -3
  11. package/autofocus/package.json +0 -3
  12. package/carousel/package.json +0 -3
  13. package/charts/package.json +0 -3
  14. package/email-input/package.json +0 -3
  15. package/feature-alerts/package.json +0 -3
  16. package/loader/package.json +0 -3
  17. package/picker/package.json +0 -3
  18. package/resize-observer/package.json +0 -3
  19. package/tabs/package.json +0 -3
  20. package/toasts/package.json +0 -3
  21. package/tooltips/package.json +0 -3
  22. package/word-cloud/package.json +0 -3
package/fesm2022/nw-style-guide-picker.mjs CHANGED
@@ -37,6 +37,7 @@ class NwPickerComponent {
37
37
  this.canViewResults = false;
38
38
  this.selectionsAreShowing = false;
39
39
  this.maxHeight = 400;
40
+ this.focusedItemIndex = -1;
40
41
  this._subs = [];
41
42
  }
42
43
  ngOnInit() {
@@ -220,6 +221,7 @@ class NwPickerComponent {
220
221
  closeResults() {
221
222
  this.canViewResults = false;
222
223
  this.searchTerm.setValue('');
224
+ this.focusedItemIndex = -1;
223
225
  this.closed.emit();
224
226
  this.chRef.detectChanges();
225
227
  }
@@ -228,6 +230,34 @@ class NwPickerComponent {
228
230
  this.searchTerm.setValue('');
229
231
  this.showResults();
230
232
  }
233
+ onInputKeyDown(event, item) {
234
+ if (!this.canViewResults || this.isMultiSelect) {
235
+ return;
236
+ }
237
+ switch (event.key) {
238
+ case 'ArrowDown':
239
+ this.navigateDown();
240
+ break;
241
+ case 'ArrowUp':
242
+ this.navigateUp();
243
+ break;
244
+ case 'Enter':
245
+ this.toggleItemInclusion(item, event);
246
+ break;
247
+ }
248
+ }
249
+ navigateDown() {
250
+ if (this.displayItems.length === 0) {
251
+ return;
252
+ }
253
+ this.focusedItemIndex = this.focusedItemIndex < this.displayItems.length - 1 ? this.focusedItemIndex + 1 : 0;
254
+ }
255
+ navigateUp() {
256
+ if (this.displayItems.length === 0) {
257
+ return;
258
+ }
259
+ this.focusedItemIndex = this.focusedItemIndex > 0 ? this.focusedItemIndex - 1 : this.displayItems.length - 1;
260
+ }
231
261
  getPlaceholderText() {
232
262
  return this.getSelections().length ?
233
263
  this.placeholderText :
@@ -262,9 +292,9 @@ class NwPickerComponent {
262
292
  class="form-control search-input {{inputClasses}} text-ellipsis"
263
293
  [formControl]="searchTerm"
264
294
  (focus)="onFocus()"
265
- (blur)="closeResults()"
266
295
  (keyup.escape)="inputEl.blur()"
267
- [placeholder]="inputPlaceholderText"/>
296
+ [placeholder]="inputPlaceholderText"
297
+ [attr.aria-label]="inputPlaceholderText"/>
268
298
 
269
299
  <div class="input-placeholder text-ellipsis" [innerHTML]="getPlaceholderText()"></div>
270
300
 
@@ -280,19 +310,21 @@ class NwPickerComponent {
280
310
 
281
311
  <button *ngIf="searchTerm.value"
282
312
  (mousedown)="preventBlur($event)"
283
- (click)="onReset($event);inputEl.focus()" class="close reset-icon">&times;</button>
313
+ (click)="onReset($event);inputEl.focus()" class="close reset-icon" aria-label="Clear search">&times;</button>
284
314
 
285
315
  <div class="search-results" *ngIf="canViewResults"
286
316
  [@slideUpIn]="isMobileDisplay ? 'in' : false"
287
317
  (mousedown)="preventBlur($event)">
288
318
 
289
319
  <div class="results-header">
290
- <button class="close" (click)="closeResults()" style="color: #000">&times;</button>
320
+ <button class="close" (click)="closeResults()" style="color: #000" aria-label="Close results">&times;</button>
291
321
  </div>
292
322
 
293
323
  <!-- Navigate up the tree -->
294
324
  <div class="results-actions" *ngIf="parentId && displayItems.length && !searchTerm.value.length">
295
- <a href="javascript:;" class="picker-action" (click)="ascend($event, getParentItem(parentId))">
325
+ <a tabindex="0" role="button" aria-label="Go Back" class="picker-action"
326
+ (click)="ascend($event, getParentItem(parentId))"
327
+ (keydown.enter)="ascend($event, getParentItem(parentId))">
296
328
  <i class="fas fa-long-arrow-alt-left" aria-hidden="true"></i>
297
329
  {{getParentItem(parentId).displayName}}
298
330
  </a>
@@ -303,8 +335,8 @@ class NwPickerComponent {
303
335
 
304
336
  <div class="results-actions" *ngIf="shouldShowSelections && !selectionsAreShowing && parentId == null && !searchTerm.value.length">
305
337
  <ng-container *ngIf="getSelections().length">
306
- <a href="javascript:;" class="picker-action" (click)="editSelections($event)">Edit selections</a>
307
- <a href="javascript:;" class="picker-action" (click)="clearSelections($event)">Clear selections</a>
338
+ <a tabindex="0" role="button" class="picker-action" (click)="editSelections($event)" (keydown.enter)="editSelections($event)">Edit selections</a>
339
+ <a tabindex="0" role="button" class="picker-action" (click)="clearSelections($event)" (keydown.enter)="clearSelections($event)">Clear selections</a>
308
340
  </ng-container>
309
341
 
310
342
  <ng-container *ngIf="!getSelections().length">
@@ -315,10 +347,10 @@ class NwPickerComponent {
315
347
  <!-- DISPLAY THE SELECTED ITEMS -->
316
348
  <ng-container *ngIf="selectionsAreShowing">
317
349
  <div class="results-actions">
318
- <a href="javascript:;" class="picker-action" (click)="selectionsAreShowing = false">
350
+ <a role="button" class="picker-action" (click)="selectionsAreShowing = false">
319
351
  <i class="fas fa-long-arrow-alt-left" aria-hidden="true"></i> Back
320
352
  </a>
321
- <a href="javascript:;" class="picker-action" *ngIf="getSelections().length" (click)="clearSelections($event)">Clear all</a>
353
+ <a role="button" class="picker-action" *ngIf="getSelections().length" (click)="clearSelections($event)">Clear all</a>
322
354
  </div>
323
355
 
324
356
  <div class="selected-items">
@@ -329,7 +361,7 @@ class NwPickerComponent {
329
361
  <span class="result-item">
330
362
  <span class="item-label">{{item.displayName}}</span>
331
363
 
332
- <button class="close" style="color: #000000" (click)="clearSelection($event, item)">
364
+ <button class="close" style="color: #000000" (click)="clearSelection($event, item)" [attr.aria-label]="'Remove ' + item.displayName">
333
365
  &times;
334
366
  </button>
335
367
  </span>
@@ -341,18 +373,27 @@ class NwPickerComponent {
341
373
  <ng-container *ngIf="!selectionsAreShowing">
342
374
  <div class="search-result" *ngFor="let item of displayItems"
343
375
  [class.active]="item.added"
376
+ [attr.tabindex]="isMultiSelect ? -1 : 0"
344
377
  [class.excluded]="item.excluded"
345
- [class.has-children]="hasChildren(item.id)">
378
+ [class.has-children]="hasChildren(item.id)"
379
+ (keydown)="onInputKeyDown($event, item)"
380
+ role="option">
346
381
 
347
382
  <span class="result-item">
348
383
  <div class="checkbox checkbox-placeholder" *ngIf="isMultiSelect">
349
- <input id="include-{{item.id}}" type="checkbox" (click)="toggleItemInclusion(item, $event)" [checked]="item.added">
350
- <label for="include-{{item.id}}"></label>
384
+ <input tabindex="0" id="include-{{item.id}}" type="checkbox"
385
+ (click)="toggleItemInclusion(item, $event)"
386
+ [checked]="item.added"
387
+ (keydown.enter)="toggleItemInclusion(item, $event)">
388
+ <label for="include-{{item.id}}" [attr.aria-label]="'Select ' + item.displayName"></label>
351
389
  </div>
352
390
 
353
391
  <div class="checkbox checkbox-exclusion checkbox-placeholder" *ngIf="canExclude && isMultiSelect">
354
- <input id="exclude-{{item.id}}" type="checkbox" (click)="toggleItemExclusion(item, $event)" [checked]="item.excluded">
355
- <label for="exclude-{{item.id}}"></label>
392
+ <input tabindex="0" id="exclude-{{item.id}}" type="checkbox"
393
+ (click)="toggleItemExclusion(item, $event)"
394
+ [checked]="item.excluded"
395
+ (keydown.enter)="toggleItemExclusion(item, $event)">
396
+ <label for="exclude-{{item.id}}" [attr.aria-label]="'Exclude ' + item.displayName"></label>
356
397
  </div>
357
398
 
358
399
  <span class="item-label" title="{{item.displayName}}" (click)="toggleItemInclusion(item, $event)">
@@ -364,7 +405,10 @@ class NwPickerComponent {
364
405
  </ng-container>
365
406
  </span>
366
407
 
367
- <button class="btn btn-ghost drilldown" *ngIf="hasChildren(item.id)" (click)="setDisplayItemsFromParentId(item.id, $event); desc.emit(getParentItem(parentId))">
408
+ <button class="btn btn-ghost drilldown"
409
+ *ngIf="hasChildren(item.id)"
410
+ (click)="setDisplayItemsFromParentId(item.id, $event); desc.emit(getParentItem(parentId))"
411
+ [attr.aria-label]="'Expand ' + item.displayName">
368
412
  <i class="fas fa-chevron-right" aria-hidden="true"></i>
369
413
  </button>
370
414
  </span>
@@ -405,9 +449,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
405
449
  class="form-control search-input {{inputClasses}} text-ellipsis"
406
450
  [formControl]="searchTerm"
407
451
  (focus)="onFocus()"
408
- (blur)="closeResults()"
409
452
  (keyup.escape)="inputEl.blur()"
410
- [placeholder]="inputPlaceholderText"/>
453
+ [placeholder]="inputPlaceholderText"
454
+ [attr.aria-label]="inputPlaceholderText"/>
411
455
 
412
456
  <div class="input-placeholder text-ellipsis" [innerHTML]="getPlaceholderText()"></div>
413
457
 
@@ -423,19 +467,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
423
467
 
424
468
  <button *ngIf="searchTerm.value"
425
469
  (mousedown)="preventBlur($event)"
426
- (click)="onReset($event);inputEl.focus()" class="close reset-icon">&times;</button>
470
+ (click)="onReset($event);inputEl.focus()" class="close reset-icon" aria-label="Clear search">&times;</button>
427
471
 
428
472
  <div class="search-results" *ngIf="canViewResults"
429
473
  [@slideUpIn]="isMobileDisplay ? 'in' : false"
430
474
  (mousedown)="preventBlur($event)">
431
475
 
432
476
  <div class="results-header">
433
- <button class="close" (click)="closeResults()" style="color: #000">&times;</button>
477
+ <button class="close" (click)="closeResults()" style="color: #000" aria-label="Close results">&times;</button>
434
478
  </div>
435
479
 
436
480
  <!-- Navigate up the tree -->
437
481
  <div class="results-actions" *ngIf="parentId && displayItems.length && !searchTerm.value.length">
438
- <a href="javascript:;" class="picker-action" (click)="ascend($event, getParentItem(parentId))">
482
+ <a tabindex="0" role="button" aria-label="Go Back" class="picker-action"
483
+ (click)="ascend($event, getParentItem(parentId))"
484
+ (keydown.enter)="ascend($event, getParentItem(parentId))">
439
485
  <i class="fas fa-long-arrow-alt-left" aria-hidden="true"></i>
440
486
  {{getParentItem(parentId).displayName}}
441
487
  </a>
@@ -446,8 +492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
446
492
 
447
493
  <div class="results-actions" *ngIf="shouldShowSelections && !selectionsAreShowing && parentId == null && !searchTerm.value.length">
448
494
  <ng-container *ngIf="getSelections().length">
449
- <a href="javascript:;" class="picker-action" (click)="editSelections($event)">Edit selections</a>
450
- <a href="javascript:;" class="picker-action" (click)="clearSelections($event)">Clear selections</a>
495
+ <a tabindex="0" role="button" class="picker-action" (click)="editSelections($event)" (keydown.enter)="editSelections($event)">Edit selections</a>
496
+ <a tabindex="0" role="button" class="picker-action" (click)="clearSelections($event)" (keydown.enter)="clearSelections($event)">Clear selections</a>
451
497
  </ng-container>
452
498
 
453
499
  <ng-container *ngIf="!getSelections().length">
@@ -458,10 +504,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
458
504
  <!-- DISPLAY THE SELECTED ITEMS -->
459
505
  <ng-container *ngIf="selectionsAreShowing">
460
506
  <div class="results-actions">
461
- <a href="javascript:;" class="picker-action" (click)="selectionsAreShowing = false">
507
+ <a role="button" class="picker-action" (click)="selectionsAreShowing = false">
462
508
  <i class="fas fa-long-arrow-alt-left" aria-hidden="true"></i> Back
463
509
  </a>
464
- <a href="javascript:;" class="picker-action" *ngIf="getSelections().length" (click)="clearSelections($event)">Clear all</a>
510
+ <a role="button" class="picker-action" *ngIf="getSelections().length" (click)="clearSelections($event)">Clear all</a>
465
511
  </div>
466
512
 
467
513
  <div class="selected-items">
@@ -472,7 +518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
472
518
  <span class="result-item">
473
519
  <span class="item-label">{{item.displayName}}</span>
474
520
 
475
- <button class="close" style="color: #000000" (click)="clearSelection($event, item)">
521
+ <button class="close" style="color: #000000" (click)="clearSelection($event, item)" [attr.aria-label]="'Remove ' + item.displayName">
476
522
  &times;
477
523
  </button>
478
524
  </span>
@@ -484,18 +530,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
484
530
  <ng-container *ngIf="!selectionsAreShowing">
485
531
  <div class="search-result" *ngFor="let item of displayItems"
486
532
  [class.active]="item.added"
533
+ [attr.tabindex]="isMultiSelect ? -1 : 0"
487
534
  [class.excluded]="item.excluded"
488
- [class.has-children]="hasChildren(item.id)">
535
+ [class.has-children]="hasChildren(item.id)"
536
+ (keydown)="onInputKeyDown($event, item)"
537
+ role="option">
489
538
 
490
539
  <span class="result-item">
491
540
  <div class="checkbox checkbox-placeholder" *ngIf="isMultiSelect">
492
- <input id="include-{{item.id}}" type="checkbox" (click)="toggleItemInclusion(item, $event)" [checked]="item.added">
493
- <label for="include-{{item.id}}"></label>
541
+ <input tabindex="0" id="include-{{item.id}}" type="checkbox"
542
+ (click)="toggleItemInclusion(item, $event)"
543
+ [checked]="item.added"
544
+ (keydown.enter)="toggleItemInclusion(item, $event)">
545
+ <label for="include-{{item.id}}" [attr.aria-label]="'Select ' + item.displayName"></label>
494
546
  </div>
495
547
 
496
548
  <div class="checkbox checkbox-exclusion checkbox-placeholder" *ngIf="canExclude && isMultiSelect">
497
- <input id="exclude-{{item.id}}" type="checkbox" (click)="toggleItemExclusion(item, $event)" [checked]="item.excluded">
498
- <label for="exclude-{{item.id}}"></label>
549
+ <input tabindex="0" id="exclude-{{item.id}}" type="checkbox"
550
+ (click)="toggleItemExclusion(item, $event)"
551
+ [checked]="item.excluded"
552
+ (keydown.enter)="toggleItemExclusion(item, $event)">
553
+ <label for="exclude-{{item.id}}" [attr.aria-label]="'Exclude ' + item.displayName"></label>
499
554
  </div>
500
555
 
501
556
  <span class="item-label" title="{{item.displayName}}" (click)="toggleItemInclusion(item, $event)">
@@ -507,7 +562,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
507
562
  </ng-container>
508
563
  </span>
509
564
 
510
- <button class="btn btn-ghost drilldown" *ngIf="hasChildren(item.id)" (click)="setDisplayItemsFromParentId(item.id, $event); desc.emit(getParentItem(parentId))">
565
+ <button class="btn btn-ghost drilldown"
566
+ *ngIf="hasChildren(item.id)"
567
+ (click)="setDisplayItemsFromParentId(item.id, $event); desc.emit(getParentItem(parentId))"
568
+ [attr.aria-label]="'Expand ' + item.displayName">
511
569
  <i class="fas fa-chevron-right" aria-hidden="true"></i>
512
570
  </button>
513
571
  </span>
package/fesm2022/nw-style-guide-picker.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nw-style-guide-picker.mjs","sources":["../../../projects/nw-style-guide/picker/picker.component.ts","../../../projects/nw-style-guide/picker/picker.module.ts","../../../projects/nw-style-guide/picker/nw-style-guide-picker.ts"],"sourcesContent":["import { Component, Input, Output, ChangeDetectorRef, ChangeDetectionStrategy, EventEmitter, ViewChild, ElementRef, OnInit, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';\nimport { trigger, transition, animate, style } from '@angular/animations';\nimport { FormControl } from '@angular/forms';\nimport { IPickerItem } from './IPickerItem';\nimport { Subscription } from 'rxjs';\nimport { isUndefined } from 'lodash-es';\n\n@Component({\n selector: 'nw-angular-picker',\n template: `\n <div class=\"nw-picker\">\n <!-- START: NOT xs screen -->\n <div class=\"input-container hidden-xs\" [class.disabled]=\"isDisabled\">\n <input type=\"text\" #inputEl\n class=\"form-control search-input {{inputClasses}} text-ellipsis\"\n [formControl]=\"searchTerm\"\n (focus)=\"onFocus()\"\n (blur)=\"closeResults()\"\n (keyup.escape)=\"inputEl.blur()\"\n [placeholder]=\"inputPlaceholderText\"/>\n\n <div class=\"input-placeholder text-ellipsis\" [innerHTML]=\"getPlaceholderText()\"></div>\n\n <i *ngIf=\"!isChevronHidden\" (click)=\"showResults();inputEl.focus()\" class=\"caret dropdown-icon\"></i>\n </div>\n\n <!-- END: NOT xs screen -->\n\n <!-- START: IS xs screen -->\n <div (click)=\"showResults()\" class=\"form-control search-input hidden-sm hidden-md hidden-lg text-ellipsis\" [innerHTML]=\"getPlaceholderText()\"></div>\n <i (click)=\"showResults()\" class=\"caret dropdown-icon hidden-sm hidden-md hidden-lg\"></i>\n <!-- END: IS xs screen -->\n\n <button *ngIf=\"searchTerm.value\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"onReset($event);inputEl.focus()\" class=\"close reset-icon\">&times;</button>\n\n <div class=\"search-results\" *ngIf=\"canViewResults\"\n [@slideUpIn]=\"isMobileDisplay ? 'in' : false\"\n (mousedown)=\"preventBlur($event)\">\n\n <div class=\"results-header\">\n <button class=\"close\" (click)=\"closeResults()\" style=\"color: #000\">&times;</button>\n </div>\n\n <!-- Navigate up the tree -->\n <div class=\"results-actions\" *ngIf=\"parentId && displayItems.length && !searchTerm.value.length\">\n <a href=\"javascript:;\" class=\"picker-action\" (click)=\"ascend($event, getParentItem(parentId))\">\n <i class=\"fas fa-long-arrow-alt-left\" aria-hidden=\"true\"></i>\n {{getParentItem(parentId).displayName}}\n </a>\n </div>\n\n <div class=\"scroll-container\" #searchResultsScrollEl\n [style.max-height]=\"getMaxHeight(searchResultsScrollEl)\">\n\n <div class=\"results-actions\" *ngIf=\"shouldShowSelections && !selectionsAreShowing && parentId == null && !searchTerm.value.length\">\n <ng-container *ngIf=\"getSelections().length\">\n <a href=\"javascript:;\" class=\"picker-action\" (click)=\"editSelections($event)\">Edit selections</a>\n <a href=\"javascript:;\" class=\"picker-action\" (click)=\"clearSelections($event)\">Clear selections</a>\n </ng-container>\n\n <ng-container *ngIf=\"!getSelections().length\">\n <em>No selections</em>\n </ng-container>\n </div>\n\n <!-- DISPLAY THE SELECTED ITEMS -->\n <ng-container *ngIf=\"selectionsAreShowing\">\n <div class=\"results-actions\">\n <a href=\"javascript:;\" class=\"picker-action\" (click)=\"selectionsAreShowing = false\">\n <i class=\"fas fa-long-arrow-alt-left\" aria-hidden=\"true\"></i> Back\n </a>\n <a href=\"javascript:;\" class=\"picker-action\" *ngIf=\"getSelections().length\" (click)=\"clearSelections($event)\">Clear all</a>\n </div>\n\n <div class=\"selected-items\">\n <div class=\"search-result\"\n [ngClass]=\"{ 'active': item.added, 'excluded': item.excluded }\"\n *ngFor=\"let item of getSelections()\">\n\n <span class=\"result-item\">\n <span class=\"item-label\">{{item.displayName}}</span>\n\n <button class=\"close\" style=\"color: #000000\" (click)=\"clearSelection($event, item)\">\n &times;\n </button>\n </span>\n\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!selectionsAreShowing\">\n <div class=\"search-result\" *ngFor=\"let item of displayItems\"\n [class.active]=\"item.added\"\n [class.excluded]=\"item.excluded\"\n [class.has-children]=\"hasChildren(item.id)\">\n\n <span class=\"result-item\">\n <div class=\"checkbox checkbox-placeholder\" *ngIf=\"isMultiSelect\">\n <input id=\"include-{{item.id}}\" type=\"checkbox\" (click)=\"toggleItemInclusion(item, $event)\" [checked]=\"item.added\">\n <label for=\"include-{{item.id}}\"></label>\n </div>\n\n <div class=\"checkbox checkbox-exclusion checkbox-placeholder\" *ngIf=\"canExclude && isMultiSelect\">\n <input id=\"exclude-{{item.id}}\" type=\"checkbox\" (click)=\"toggleItemExclusion(item, $event)\" [checked]=\"item.excluded\">\n <label for=\"exclude-{{item.id}}\"></label>\n </div>\n\n <span class=\"item-label\" title=\"{{item.displayName}}\" (click)=\"toggleItemInclusion(item, $event)\">\n {{item.displayName}}\n <ng-container *ngIf=\"searchTerm.value.length && item.searchValues?.length\">\n <span> -\n <em class=\"small\" *ngFor=\"let val of item.searchValues; let isLast=last\">{{val}}{{isLast ? '' : ', '}}</em>\n </span>\n </ng-container>\n </span>\n\n <button class=\"btn btn-ghost drilldown\" *ngIf=\"hasChildren(item.id)\" (click)=\"setDisplayItemsFromParentId(item.id, $event); desc.emit(getParentItem(parentId))\">\n <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"></i>\n </button>\n </span>\n\n </div>\n\n\n <div class=\"results-actions\" *ngIf=\"displayItems.length < 1\">\n <em>No results</em>\n </div>\n </ng-container>\n </div>\n\n <ng-content select=\".results-footer\"></ng-content>\n </div>\n </div>\n\t`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n trigger('slideUpIn', [\n transition('void => in', [\n style({ top: '100%', transform: 'scale(0)' }),\n animate(200, style({ top: 0, transform: 'scale(1)' }))\n ]),\n transition('in => void', [\n animate(200, style({ top: '100%', transform: 'scale(0)' }))\n ])\n ])\n ],\n standalone: false\n})\n\nexport class NwPickerComponent implements OnInit, OnChanges, OnDestroy {\n\n @Input() items: IPickerItem[];\n @Input() inputClasses: string = '';\n @Input() placeholderText: string = 'Search...';\n @Input() inputPlaceholderText: string = 'Search...';\n @Input() noSelectionsPlaceholderText: string = 'Search...';\n @Input() initialParentId: any = null;\n @Input() shouldShowSelections: boolean = true;\n @Input() canExclude: boolean = true;\n @Input() isHeightDynamic: boolean;\n @Input() isMultiSelect: boolean = true;\n @Input() isMobileDisplay: boolean = false;\n @Input() isDisabled: boolean = false;\n @Input() isChevronHidden: boolean = false;\n\n @Output() selections: EventEmitter<IPickerItem[]> = new EventEmitter<IPickerItem[]>();\n @Output() toggleInclude: EventEmitter<{ item: IPickerItem; searchTerm: string }> = new EventEmitter<{ item: IPickerItem; searchTerm: string }>();\n @Output() toggleExclude: EventEmitter<{ item: IPickerItem; searchTerm: string }> = new EventEmitter<{ item: IPickerItem; searchTerm: string }>();\n @Output() edit: EventEmitter<any> = new EventEmitter<any>();\n @Output() closed: EventEmitter<any> = new EventEmitter<any>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() focus: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();\n @Output() clearAll: EventEmitter<any> = new EventEmitter<any>();\n @Output() clearSingle: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();\n @Output() clearSearch: EventEmitter<any> = new EventEmitter<any>();\n @Output() desc: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();\n @Output() asc: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();\n\n @ViewChild('inputEl', { static: true }) inputEl: ElementRef;\n\n public displayItems: IPickerItem[];\n public searchTerm: FormControl<string> = new FormControl();\n public canViewResults: boolean = false;\n public parentId: any;\n public selectionsAreShowing: boolean = false;\n public maxHeight: number = 400;\n private _subs: Subscription[] = [];\n\n constructor(public chRef: ChangeDetectorRef) { }\n\n ngOnInit() {\n this.parentId = this.initialParentId;\n this.subscribeToSearchTermChanges();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (this.isDisabled) {\n this.searchTerm.disable();\n }\n }\n\n subscribeToSearchTermChanges() {\n const sub = this.searchTerm.valueChanges.subscribe(val => {\n this.selectionsAreShowing = false;\n\n if (val.length) {\n const displayItems = this.items.filter(item => {\n return (item.searchValues || []).some(value => {\n return value.toLowerCase().includes(val.toLowerCase());\n }) || item.displayName.toLowerCase().includes(val.toLowerCase());\n });\n // remove duplicate items\n this.displayItems = displayItems.reduce((items, item) => items.find(x => x.id === item.id) ? [...items] : [...items, item], []);\n } else {\n this.setDisplayItemsFromParentId(this.parentId);\n }\n });\n\n this._subs.push(sub);\n }\n\n ascend(event: Event, item: IPickerItem) {\n event.stopPropagation();\n this.setDisplayItemsFromParentId(item.parentId);\n this.asc.emit(item);\n }\n\n setDisplayItemsFromParentId(parentId, e?: KeyboardEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n if (!this.hasChildren(parentId)) {\n return;\n }\n this.resetSearchTerm();\n this.parentId = parentId;\n this.displayItems = this.items.filter(i => i.parentId === this.parentId);\n }\n\n displaySelectedItems() {\n this.displayItems = this.getSelections();\n }\n\n getSelections() {\n return this.items.filter(ci => ci.added || ci.excluded);\n }\n\n getParentItem(parentId) {\n return this.items.find(i => i.id === parentId);\n }\n\n hasChildren(id) {\n return this.items.filter(i => i.parentId === id).length;\n }\n\n editSelections(event: Event) {\n event.stopPropagation();\n this.selectionsAreShowing = true;\n this.edit.emit(event);\n }\n\n clearSelection(event: Event, item: IPickerItem) {\n event.stopPropagation();\n item.added = false;\n item.excluded = false;\n\n this.clearSingle.emit(item);\n\n if (this.getSelections().length < 1) {\n this.setDisplayItemsFromParentId(null);\n this.selectionsAreShowing = false;\n }\n\n this.selections.emit(this.getSelections());\n }\n\n clearSelections(e?: KeyboardEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n this.items = this.items.map(ci => {\n ci.added = false;\n ci.excluded = false;\n\n return ci;\n });\n\n this.clearAll.emit();\n\n this.setDisplayItemsFromParentId(null);\n this.selectionsAreShowing = false;\n\n this.selections.emit(this.getSelections());\n }\n\n toggleItemInclusion(item: IPickerItem, e: KeyboardEvent) {\n e.stopPropagation();\n\n // we're assuming that if the component is not multiSelect, then only\n // one item can be selected at any time\n if (!this.isMultiSelect) {\n this.items.forEach(item => {\n item.added = false;\n item.excluded = false;\n });\n }\n item.added = this.isMultiSelect ? !item.added : true;\n item.excluded = false;\n\n // setting flag for duplicate id's as in case of location for selection and deselection on checkbox click\n if (this.isMultiSelect) {\n this.items.forEach(pickerItem => {\n if (item.id === pickerItem.id) {\n pickerItem.added = item.added;\n }\n });\n }\n\n this.toggleAncestors(item, false, false);\n this.toggleDescendants(item, false);\n\n this.toggleInclude.emit({ item: item, searchTerm: this.searchTerm.value });\n this.selections.emit(this.getSelections());\n\n if (!this.isMultiSelect) {\n this.inputEl.nativeElement.blur();\n }\n }\n\n toggleItemExclusion(item: IPickerItem, e: KeyboardEvent) {\n e.stopPropagation();\n\n item.added = false;\n item.excluded = !item.excluded;\n // setting flag for duplicate id's as in case of location for selection and deselection on checkbox click\n if (this.isMultiSelect) {\n this.items.forEach(pickerItem => {\n if (item.id === pickerItem.id) {\n pickerItem.excluded = item.excluded;\n }\n });\n }\n\n this.toggleDescendants(item, false, false);\n this.toggleAncestors(item, undefined, false);\n\n this.toggleExclude.emit({ item: item, searchTerm: this.searchTerm.value });\n this.selections.emit(this.getSelections());\n\n if (!this.isMultiSelect) {\n this.inputEl.nativeElement.blur();\n }\n }\n\n toggleDescendants(item: IPickerItem, add?: boolean, exclude?: boolean) {\n this.items.filter(ci => ci.parentId === item.id).forEach(ci => {\n if (!isUndefined(add)) {\n ci.added = add;\n }\n\n if (!isUndefined(exclude)) {\n ci.excluded = exclude;\n }\n\n this.toggleDescendants(ci, add, exclude);\n });\n }\n\n toggleAncestors(item: IPickerItem, add?: boolean, exclude?: boolean) {\n this.items.filter(ci => ci.id === item.parentId).forEach(ci => {\n if (!isUndefined(add)) {\n ci.added = add;\n }\n\n if (!isUndefined(exclude)) {\n ci.excluded = exclude;\n }\n\n this.toggleAncestors(ci, add, exclude);\n });\n }\n\n preventBlur(e: KeyboardEvent) {\n // prevent blurring of the search input\n e.preventDefault();\n }\n\n resetSearchTerm() {\n this.searchTerm.setValue('', { emitEvent: false });\n }\n\n onFocus() {\n if (!this.isDisabled) {\n this.showResults();\n this.focus.emit(this.inputEl);\n }\n }\n\n showResults() {\n if (!this.isDisabled) {\n this.parentId = this.initialParentId;\n this.canViewResults = true;\n\n this.setDisplayItemsFromParentId(this.parentId);\n }\n }\n\n close() {\n this.inputEl.nativeElement.blur();\n }\n\n closeResults() {\n this.canViewResults = false;\n this.searchTerm.setValue('');\n this.closed.emit();\n this.chRef.detectChanges();\n }\n\n onReset($event?: KeyboardEvent) {\n this.clearSearch.emit();\n this.searchTerm.setValue('');\n this.showResults();\n }\n\n getPlaceholderText() {\n return this.getSelections().length ?\n this.placeholderText :\n this.noSelectionsPlaceholderText;\n }\n\n getMaxHeight(el: HTMLElement) {\n // no dynamic height for mobile\n if (this.isMobileDisplay) {\n return;\n }\n\n if (this.isHeightDynamic) {\n const appContainer = document.querySelector('.app-container') as HTMLElement;\n const appContainerOffsetTop = appContainer.getBoundingClientRect().top;\n const elOffsetTop = el.getBoundingClientRect().top;\n const buffer = 50;\n\n const height = appContainer.offsetHeight - (elOffsetTop - appContainerOffsetTop);\n\n if (height < this.maxHeight) {\n return height - buffer + 'px';\n }\n }\n return;\n }\n\n ngOnDestroy() {\n this._subs.forEach(sub => sub.unsubscribe());\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { NwPickerComponent } from './picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule\n ],\n declarations: [NwPickerComponent],\n exports: [NwPickerComponent]\n})\nexport class NwPickerModule { }","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"nw-style-guide-picker.mjs","sources":["../../../projects/nw-style-guide/picker/picker.component.ts","../../../projects/nw-style-guide/picker/picker.module.ts","../../../projects/nw-style-guide/picker/nw-style-guide-picker.ts"],"sourcesContent":["import { Component, Input, Output, ChangeDetectorRef, ChangeDetectionStrategy, EventEmitter, ViewChild, ElementRef, OnInit, OnDestroy, SimpleChanges, OnChanges } from '@angular/core';\nimport { trigger, transition, animate, style } from '@angular/animations';\nimport { FormControl } from '@angular/forms';\nimport { IPickerItem } from './IPickerItem';\nimport { Subscription } from 'rxjs';\nimport { isUndefined } from 'lodash-es';\n\n@Component({\n selector: 'nw-angular-picker',\n template: `\n <div class=\"nw-picker\">\n <!-- START: NOT xs screen -->\n <div class=\"input-container hidden-xs\" [class.disabled]=\"isDisabled\">\n <input type=\"text\" #inputEl\n class=\"form-control search-input {{inputClasses}} text-ellipsis\"\n [formControl]=\"searchTerm\"\n (focus)=\"onFocus()\"\n (keyup.escape)=\"inputEl.blur()\"\n [placeholder]=\"inputPlaceholderText\"\n [attr.aria-label]=\"inputPlaceholderText\"/>\n\n <div class=\"input-placeholder text-ellipsis\" [innerHTML]=\"getPlaceholderText()\"></div>\n\n <i *ngIf=\"!isChevronHidden\" (click)=\"showResults();inputEl.focus()\" class=\"caret dropdown-icon\"></i>\n </div>\n\n <!-- END: NOT xs screen -->\n\n <!-- START: IS xs screen -->\n <div (click)=\"showResults()\" class=\"form-control search-input hidden-sm hidden-md hidden-lg text-ellipsis\" [innerHTML]=\"getPlaceholderText()\"></div>\n <i (click)=\"showResults()\" class=\"caret dropdown-icon hidden-sm hidden-md hidden-lg\"></i>\n <!-- END: IS xs screen -->\n\n <button *ngIf=\"searchTerm.value\"\n (mousedown)=\"preventBlur($event)\"\n (click)=\"onReset($event);inputEl.focus()\" class=\"close reset-icon\" aria-label=\"Clear search\">&times;</button>\n\n <div class=\"search-results\" *ngIf=\"canViewResults\"\n [@slideUpIn]=\"isMobileDisplay ? 'in' : false\"\n (mousedown)=\"preventBlur($event)\">\n\n <div class=\"results-header\">\n <button class=\"close\" (click)=\"closeResults()\" style=\"color: #000\" aria-label=\"Close results\">&times;</button>\n </div>\n\n <!-- Navigate up the tree -->\n <div class=\"results-actions\" *ngIf=\"parentId && displayItems.length && !searchTerm.value.length\">\n <a tabindex=\"0\" role=\"button\" aria-label=\"Go Back\" class=\"picker-action\" \n (click)=\"ascend($event, getParentItem(parentId))\"\n (keydown.enter)=\"ascend($event, getParentItem(parentId))\">\n <i class=\"fas fa-long-arrow-alt-left\" aria-hidden=\"true\"></i>\n {{getParentItem(parentId).displayName}}\n </a>\n </div>\n\n <div class=\"scroll-container\" #searchResultsScrollEl\n [style.max-height]=\"getMaxHeight(searchResultsScrollEl)\">\n\n <div class=\"results-actions\" *ngIf=\"shouldShowSelections && !selectionsAreShowing && parentId == null && !searchTerm.value.length\">\n <ng-container *ngIf=\"getSelections().length\">\n <a tabindex=\"0\" role=\"button\" class=\"picker-action\" (click)=\"editSelections($event)\" (keydown.enter)=\"editSelections($event)\">Edit selections</a>\n <a tabindex=\"0\" role=\"button\" class=\"picker-action\" (click)=\"clearSelections($event)\" (keydown.enter)=\"clearSelections($event)\">Clear selections</a>\n </ng-container>\n\n <ng-container *ngIf=\"!getSelections().length\">\n <em>No selections</em>\n </ng-container>\n </div>\n\n <!-- DISPLAY THE SELECTED ITEMS -->\n <ng-container *ngIf=\"selectionsAreShowing\">\n <div class=\"results-actions\">\n <a role=\"button\" class=\"picker-action\" (click)=\"selectionsAreShowing = false\">\n <i class=\"fas fa-long-arrow-alt-left\" aria-hidden=\"true\"></i> Back\n </a>\n <a role=\"button\" class=\"picker-action\" *ngIf=\"getSelections().length\" (click)=\"clearSelections($event)\">Clear all</a>\n </div>\n\n <div class=\"selected-items\">\n <div class=\"search-result\"\n [ngClass]=\"{ 'active': item.added, 'excluded': item.excluded }\"\n *ngFor=\"let item of getSelections()\">\n\n <span class=\"result-item\">\n <span class=\"item-label\">{{item.displayName}}</span>\n\n <button class=\"close\" style=\"color: #000000\" (click)=\"clearSelection($event, item)\" [attr.aria-label]=\"'Remove ' + item.displayName\">\n &times;\n </button>\n </span>\n\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!selectionsAreShowing\">\n <div class=\"search-result\" *ngFor=\"let item of displayItems\"\n [class.active]=\"item.added\"\n [attr.tabindex]=\"isMultiSelect ? -1 : 0\"\n [class.excluded]=\"item.excluded\"\n [class.has-children]=\"hasChildren(item.id)\"\n (keydown)=\"onInputKeyDown($event, item)\"\n role=\"option\">\n\n <span class=\"result-item\">\n <div class=\"checkbox checkbox-placeholder\" *ngIf=\"isMultiSelect\">\n <input tabindex=\"0\" id=\"include-{{item.id}}\" type=\"checkbox\" \n (click)=\"toggleItemInclusion(item, $event)\" \n [checked]=\"item.added\" \n (keydown.enter)=\"toggleItemInclusion(item, $event)\">\n <label for=\"include-{{item.id}}\" [attr.aria-label]=\"'Select ' + item.displayName\"></label>\n </div>\n\n <div class=\"checkbox checkbox-exclusion checkbox-placeholder\" *ngIf=\"canExclude && isMultiSelect\">\n <input tabindex=\"0\" id=\"exclude-{{item.id}}\" type=\"checkbox\" \n (click)=\"toggleItemExclusion(item, $event)\" \n [checked]=\"item.excluded\" \n (keydown.enter)=\"toggleItemExclusion(item, $event)\">\n <label for=\"exclude-{{item.id}}\" [attr.aria-label]=\"'Exclude ' + item.displayName\"></label>\n </div>\n\n <span class=\"item-label\" title=\"{{item.displayName}}\" (click)=\"toggleItemInclusion(item, $event)\">\n {{item.displayName}}\n <ng-container *ngIf=\"searchTerm.value.length && item.searchValues?.length\">\n <span> -\n <em class=\"small\" *ngFor=\"let val of item.searchValues; let isLast=last\">{{val}}{{isLast ? '' : ', '}}</em>\n </span>\n </ng-container>\n </span>\n\n <button class=\"btn btn-ghost drilldown\" \n *ngIf=\"hasChildren(item.id)\" \n (click)=\"setDisplayItemsFromParentId(item.id, $event); desc.emit(getParentItem(parentId))\"\n [attr.aria-label]=\"'Expand ' + item.displayName\">\n <i class=\"fas fa-chevron-right\" aria-hidden=\"true\"></i>\n </button>\n </span>\n\n </div>\n\n\n <div class=\"results-actions\" *ngIf=\"displayItems.length < 1\">\n <em>No results</em>\n </div>\n </ng-container>\n </div>\n\n <ng-content select=\".results-footer\"></ng-content>\n </div>\n </div>\n\t`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n animations: [\n trigger('slideUpIn', [\n transition('void => in', [\n style({ top: '100%', transform: 'scale(0)' }),\n animate(200, style({ top: 0, transform: 'scale(1)' }))\n ]),\n transition('in => void', [\n animate(200, style({ top: '100%', transform: 'scale(0)' }))\n ])\n ])\n ],\n standalone: false\n})\n\nexport class NwPickerComponent implements OnInit, OnChanges, OnDestroy {\n\n @Input() items: IPickerItem[];\n @Input() inputClasses: string = '';\n @Input() placeholderText: string = 'Search...';\n @Input() inputPlaceholderText: string = 'Search...';\n @Input() noSelectionsPlaceholderText: string = 'Search...';\n @Input() initialParentId: any = null;\n @Input() shouldShowSelections: boolean = true;\n @Input() canExclude: boolean = true;\n @Input() isHeightDynamic: boolean;\n @Input() isMultiSelect: boolean = true;\n @Input() isMobileDisplay: boolean = false;\n @Input() isDisabled: boolean = false;\n @Input() isChevronHidden: boolean = false;\n\n @Output() selections: EventEmitter<IPickerItem[]> = new EventEmitter<IPickerItem[]>();\n @Output() toggleInclude: EventEmitter<{ item: IPickerItem; searchTerm: string }> = new EventEmitter<{ item: IPickerItem; searchTerm: string }>();\n @Output() toggleExclude: EventEmitter<{ item: IPickerItem; searchTerm: string }> = new EventEmitter<{ item: IPickerItem; searchTerm: string }>();\n @Output() edit: EventEmitter<any> = new EventEmitter<any>();\n @Output() closed: EventEmitter<any> = new EventEmitter<any>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n @Output() focus: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();\n @Output() clearAll: EventEmitter<any> = new EventEmitter<any>();\n @Output() clearSingle: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();\n @Output() clearSearch: EventEmitter<any> = new EventEmitter<any>();\n @Output() desc: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();\n @Output() asc: EventEmitter<IPickerItem> = new EventEmitter<IPickerItem>();\n\n @ViewChild('inputEl', { static: true }) inputEl: ElementRef;\n\n public displayItems: IPickerItem[];\n public searchTerm: FormControl<string> = new FormControl();\n public canViewResults: boolean = false;\n public parentId: any;\n public selectionsAreShowing: boolean = false;\n public maxHeight: number = 400;\n public focusedItemIndex: number = -1;\n private _subs: Subscription[] = [];\n\n constructor(public chRef: ChangeDetectorRef) { }\n\n ngOnInit() {\n this.parentId = this.initialParentId;\n this.subscribeToSearchTermChanges();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (this.isDisabled) {\n this.searchTerm.disable();\n }\n }\n\n subscribeToSearchTermChanges() {\n const sub = this.searchTerm.valueChanges.subscribe(val => {\n this.selectionsAreShowing = false;\n\n if (val.length) {\n const displayItems = this.items.filter(item => {\n return (item.searchValues || []).some(value => {\n return value.toLowerCase().includes(val.toLowerCase());\n }) || item.displayName.toLowerCase().includes(val.toLowerCase());\n });\n // remove duplicate items\n this.displayItems = displayItems.reduce((items, item) => items.find(x => x.id === item.id) ? [...items] : [...items, item], []);\n } else {\n this.setDisplayItemsFromParentId(this.parentId);\n }\n });\n\n this._subs.push(sub);\n }\n\n ascend(event: Event, item: IPickerItem) {\n event.stopPropagation();\n this.setDisplayItemsFromParentId(item.parentId);\n this.asc.emit(item);\n }\n\n setDisplayItemsFromParentId(parentId, e?: KeyboardEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n if (!this.hasChildren(parentId)) {\n return;\n }\n this.resetSearchTerm();\n this.parentId = parentId;\n this.displayItems = this.items.filter(i => i.parentId === this.parentId);\n }\n\n displaySelectedItems() {\n this.displayItems = this.getSelections();\n }\n\n getSelections() {\n return this.items.filter(ci => ci.added || ci.excluded);\n }\n\n getParentItem(parentId) {\n return this.items.find(i => i.id === parentId);\n }\n\n hasChildren(id) {\n return this.items.filter(i => i.parentId === id).length;\n }\n\n editSelections(event: Event) {\n event.stopPropagation();\n this.selectionsAreShowing = true;\n this.edit.emit(event);\n }\n\n clearSelection(event: Event, item: IPickerItem) {\n event.stopPropagation();\n item.added = false;\n item.excluded = false;\n\n this.clearSingle.emit(item);\n\n if (this.getSelections().length < 1) {\n this.setDisplayItemsFromParentId(null);\n this.selectionsAreShowing = false;\n }\n\n this.selections.emit(this.getSelections());\n }\n\n clearSelections(e?: KeyboardEvent) {\n if (e) {\n e.stopPropagation();\n }\n\n this.items = this.items.map(ci => {\n ci.added = false;\n ci.excluded = false;\n\n return ci;\n });\n\n this.clearAll.emit();\n\n this.setDisplayItemsFromParentId(null);\n this.selectionsAreShowing = false;\n\n this.selections.emit(this.getSelections());\n }\n\n toggleItemInclusion(item: IPickerItem, e: KeyboardEvent) {\n e.stopPropagation();\n\n // we're assuming that if the component is not multiSelect, then only\n // one item can be selected at any time\n if (!this.isMultiSelect) {\n this.items.forEach(item => {\n item.added = false;\n item.excluded = false;\n });\n }\n item.added = this.isMultiSelect ? !item.added : true;\n item.excluded = false;\n\n // setting flag for duplicate id's as in case of location for selection and deselection on checkbox click\n if (this.isMultiSelect) {\n this.items.forEach(pickerItem => {\n if (item.id === pickerItem.id) {\n pickerItem.added = item.added;\n }\n });\n }\n\n this.toggleAncestors(item, false, false);\n this.toggleDescendants(item, false);\n\n this.toggleInclude.emit({ item: item, searchTerm: this.searchTerm.value });\n this.selections.emit(this.getSelections());\n\n if (!this.isMultiSelect) {\n this.inputEl.nativeElement.blur();\n }\n }\n\n toggleItemExclusion(item: IPickerItem, e: KeyboardEvent) {\n e.stopPropagation();\n\n item.added = false;\n item.excluded = !item.excluded;\n // setting flag for duplicate id's as in case of location for selection and deselection on checkbox click\n if (this.isMultiSelect) {\n this.items.forEach(pickerItem => {\n if (item.id === pickerItem.id) {\n pickerItem.excluded = item.excluded;\n }\n });\n }\n\n this.toggleDescendants(item, false, false);\n this.toggleAncestors(item, undefined, false);\n\n this.toggleExclude.emit({ item: item, searchTerm: this.searchTerm.value });\n this.selections.emit(this.getSelections());\n\n if (!this.isMultiSelect) {\n this.inputEl.nativeElement.blur();\n }\n }\n\n toggleDescendants(item: IPickerItem, add?: boolean, exclude?: boolean) {\n this.items.filter(ci => ci.parentId === item.id).forEach(ci => {\n if (!isUndefined(add)) {\n ci.added = add;\n }\n\n if (!isUndefined(exclude)) {\n ci.excluded = exclude;\n }\n\n this.toggleDescendants(ci, add, exclude);\n });\n }\n\n toggleAncestors(item: IPickerItem, add?: boolean, exclude?: boolean) {\n this.items.filter(ci => ci.id === item.parentId).forEach(ci => {\n if (!isUndefined(add)) {\n ci.added = add;\n }\n\n if (!isUndefined(exclude)) {\n ci.excluded = exclude;\n }\n\n this.toggleAncestors(ci, add, exclude);\n });\n }\n\n preventBlur(e: KeyboardEvent) {\n // prevent blurring of the search input\n e.preventDefault();\n }\n\n resetSearchTerm() {\n this.searchTerm.setValue('', { emitEvent: false });\n }\n\n onFocus() {\n if (!this.isDisabled) {\n this.showResults();\n this.focus.emit(this.inputEl);\n }\n }\n\n showResults() {\n if (!this.isDisabled) {\n this.parentId = this.initialParentId;\n this.canViewResults = true;\n\n this.setDisplayItemsFromParentId(this.parentId);\n }\n }\n\n close() {\n this.inputEl.nativeElement.blur();\n }\n\n closeResults() {\n this.canViewResults = false;\n this.searchTerm.setValue('');\n this.focusedItemIndex = -1;\n this.closed.emit();\n this.chRef.detectChanges();\n }\n\n onReset($event?: KeyboardEvent) {\n this.clearSearch.emit();\n this.searchTerm.setValue('');\n this.showResults();\n }\n\n onInputKeyDown(event: KeyboardEvent, item: IPickerItem) {\n if (!this.canViewResults || this.isMultiSelect) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n this.navigateDown();\n break;\n case 'ArrowUp':\n this.navigateUp();\n break;\n case 'Enter':\n this.toggleItemInclusion(item, event);\n break;\n }\n }\n\n navigateDown() {\n if (this.displayItems.length === 0) {\n return;\n }\n \n this.focusedItemIndex = this.focusedItemIndex < this.displayItems.length - 1 ? this.focusedItemIndex + 1 : 0;\n }\n\n navigateUp() {\n if (this.displayItems.length === 0) {\n return;\n }\n \n this.focusedItemIndex = this.focusedItemIndex > 0 ? this.focusedItemIndex - 1 : this.displayItems.length - 1;\n }\n\n getPlaceholderText() {\n return this.getSelections().length ?\n this.placeholderText :\n this.noSelectionsPlaceholderText;\n }\n\n getMaxHeight(el: HTMLElement) {\n // no dynamic height for mobile\n if (this.isMobileDisplay) {\n return;\n }\n\n if (this.isHeightDynamic) {\n const appContainer = document.querySelector('.app-container') as HTMLElement;\n const appContainerOffsetTop = appContainer.getBoundingClientRect().top;\n const elOffsetTop = el.getBoundingClientRect().top;\n const buffer = 50;\n\n const height = appContainer.offsetHeight - (elOffsetTop - appContainerOffsetTop);\n\n if (height < this.maxHeight) {\n return height - buffer + 'px';\n }\n }\n return;\n }\n\n ngOnDestroy() {\n this._subs.forEach(sub => sub.unsubscribe());\n }\n\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { NwPickerComponent } from './picker.component';\n\n@NgModule({\n imports: [\n CommonModule,\n ReactiveFormsModule\n ],\n declarations: [NwPickerComponent],\n exports: [NwPickerComponent]\n})\nexport class NwPickerModule { }","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2022/nw-style-guide-tabs.mjs CHANGED
@@ -25,6 +25,8 @@ class TabDirective {
25
25
  this.elRef = elRef;
26
26
  this._tabsService = _tabsService;
27
27
  this.isActive = false;
28
+ this.role = 'tab';
29
+ this.tabindex = 0;
28
30
  }
29
31
  ngOnChanges(changes) {
30
32
  const hasChanged = changes.isActive &&
@@ -35,7 +37,7 @@ class TabDirective {
35
37
  }
36
38
  }
37
39
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabDirective, deps: [{ token: i0.ElementRef }, { token: TabsService }], target: i0.ɵɵFactoryTarget.Directive }); }
38
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TabDirective, isStandalone: false, selector: "[nwTab]", inputs: { isActive: "isActive" }, host: { properties: { "class.active": "this.isActive" } }, usesOnChanges: true, ngImport: i0 }); }
40
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TabDirective, isStandalone: false, selector: "[nwTab]", inputs: { isActive: "isActive" }, host: { properties: { "class.active": "this.isActive", "attr.role": "this.role", "attr.tabindex": "this.tabindex" } }, usesOnChanges: true, ngImport: i0 }); }
39
41
  }
40
42
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TabDirective, decorators: [{
41
43
  type: Directive,
@@ -48,6 +50,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
48
50
  args: ['class.active']
49
51
  }, {
50
52
  type: Input
53
+ }], role: [{
54
+ type: HostBinding,
55
+ args: ['attr.role']
56
+ }], tabindex: [{
57
+ type: HostBinding,
58
+ args: ['attr.tabindex']
51
59
  }] } });
52
60
 
53
61
  class TabsComponent {
package/fesm2022/nw-style-guide-tabs.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nw-style-guide-tabs.mjs","sources":["../../../projects/nw-style-guide/tabs/tabs.service.ts","../../../projects/nw-style-guide/tabs/tab.directive.ts","../../../projects/nw-style-guide/tabs/tabs.component.ts","../../../projects/nw-style-guide/tabs/tabs.module.ts","../../../projects/nw-style-guide/tabs/nw-style-guide-tabs.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\nimport { Subject, Observable } from \"rxjs\";\nimport { TabDirective } from \"./tab.directive\";\n\n@Injectable()\nexport class TabsService {\n\n private _activeChange: Subject<TabDirective> = new Subject();\n public activeChange: Observable<TabDirective> = this._activeChange.asObservable();\n\n notifyActiveChange(tab: TabDirective) {\n this._activeChange.next(tab);\n }\n}\n","import { Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { TabsService } from './tabs.service';\n\n@Directive({\n selector: '[nwTab]',\n standalone: false\n})\nexport class TabDirective implements OnChanges {\n\n @HostBinding('class.active') @Input() isActive: boolean = false;\n\n constructor(\n public elRef: ElementRef<HTMLElement>,\n private _tabsService: TabsService) {}\n\n ngOnChanges(changes: SimpleChanges) {\n const hasChanged = changes.isActive &&\n changes.isActive.previousValue !== changes.isActive.currentValue &&\n !changes.isActive.firstChange;\n\n if (hasChanged && this.isActive) {\n this._tabsService.notifyActiveChange(this);\n }\n }\n}\n","import { Component, ContentChildren, QueryList, Input, ElementRef, ViewChild, OnInit, ChangeDetectorRef, OnDestroy, ChangeDetectionStrategy, AfterContentInit } from '@angular/core';\nimport { TabDirective } from './tab.directive';\nimport { fromEvent, Subscription, Observable, merge } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { TabsService } from './tabs.service';\n\n@Component({\n selector: 'nw-tabs',\n template: `\n <div class=\"scroll-container\" #scrollContainer>\n <ul class=\"nav nav-tabs\" [ngClass]=\"tabSizeClass\" role=\"tablist\">\n <ng-content></ng-content>\n\n <li #activeBar class=\"nav-tabs-active-bar\" [ngStyle]=\"getActiveStyles()\"></li>\n </ul>\n </div>\n\n <div class=\"pagination-container\" *ngIf=\"shouldShowPagination\">\n <div class=\"prev-page\" *ngIf=\"shouldShowPrev\" (click)=\"prev()\" [ngStyle]=\"background\">\n <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n </div>\n <div class=\"next-page\" *ngIf=\"shouldShowNext\" (click)=\"next()\" [ngStyle]=\"background\">\n <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n </div>\n </div>\n\n <ng-template #paginator>\n <button class=\"btn btn-md btn-ghost-alt\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n </ng-template>\n `,\n providers: [TabsService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n :host, ul {\n position: relative;\n }\n `],\n standalone: false\n})\n\nexport class TabsComponent implements OnInit, AfterContentInit, OnDestroy {\n\n @Input() size: 'sm' | 'md' | 'lg' = 'md';\n @Input() maskColor: string = '#373737';\n\n @ViewChild('scrollContainer', { static: true }) scrollContainer: ElementRef<HTMLElement>;\n @ViewChild('activeBar', { static: true }) activeBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabDirective) tabs: QueryList<TabDirective> = new QueryList();\n\n private _scrollAndResizeSub: Subscription;\n private _activeChangeSub: Subscription;\n private _transitionEndSub: Subscription;\n private _tabsChangeSub: Subscription;\n private _paginationTolerance: number = 100;\n\n constructor(\n private _cdRef: ChangeDetectorRef,\n private _tabsService: TabsService) {}\n\n ngOnInit() {\n const scrollStop$: Observable<Event> = fromEvent(this.scrollContainer.nativeElement, 'scroll');\n const windowResizeStop$: Observable<Event> = fromEvent(window, 'resize');\n\n this._scrollAndResizeSub = merge(scrollStop$, windowResizeStop$)\n .pipe(debounceTime(50))\n .subscribe(_ => this._cdRef.detectChanges());\n\n this.subscribeToActiveChange();\n this.subscribeToActiveBarTransitionEnd();\n }\n\n ngAfterContentInit() {\n this.subscribeToTabsChange();\n }\n\n subscribeToActiveChange() {\n this._activeChangeSub = this._tabsService.activeChange.subscribe(tab => {\n this.scrollToTabIfRequired(tab);\n\n setTimeout(() => {\n this._cdRef.detectChanges();\n }, 0);\n });\n }\n\n subscribeToTabsChange() {\n this._tabsChangeSub = this.tabs.changes.subscribe(tabs => {\n setTimeout(() => {\n this._cdRef.detectChanges();\n }, 0);\n });\n }\n\n subscribeToActiveBarTransitionEnd() {\n this._transitionEndSub = fromEvent(this.activeBar.nativeElement, 'transitionend')\n .pipe(debounceTime(50))\n .subscribe(() => {\n console.log('transition ended');\n this._cdRef.detectChanges();\n });\n }\n\n getActiveTab(): TabDirective {\n return this.tabs.filter(t => t.isActive)[0];\n }\n\n get tabSizeClass(): string {\n return `nav-${this.size}`;\n }\n\n getActiveStyles(): { [key: string]: string } {\n const tab: TabDirective = this.getActiveTab();\n\n if (tab) {\n return {\n width: tab.elRef.nativeElement.getBoundingClientRect().width + 'px',\n left: tab.elRef.nativeElement.offsetLeft + 'px'\n };\n }\n return {};\n }\n\n getScrollEl(): HTMLElement {\n return this.scrollContainer.nativeElement;\n }\n\n get background() {\n return {\n 'background': `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`\n };\n }\n\n get clientWidth(): number {\n return this.getScrollEl().clientWidth;\n }\n\n get shouldShowPagination(): boolean {\n return +(this.getScrollEl().scrollWidth / this.clientWidth).toFixed(1) >= 1;\n }\n\n get shouldShowPrev(): boolean {\n return this.getScrollEl().scrollLeft >= 1;\n }\n\n get shouldShowNext(): boolean {\n return this.getScrollEl().scrollLeft + this.clientWidth < this.getScrollEl().scrollWidth;\n }\n\n prev(): void {\n this.getScrollEl().scrollLeft -= (this.clientWidth - this._paginationTolerance);\n }\n\n next() {\n this.getScrollEl().scrollLeft += (this.clientWidth - this._paginationTolerance);\n }\n\n scrollToTabIfRequired(tab: TabDirective) {\n const offsetLeft = tab.elRef.nativeElement.offsetLeft;\n const position = {\n left: offsetLeft,\n right: offsetLeft + tab.elRef.nativeElement.clientWidth\n };\n\n const shouldScrollLeft: boolean = position.left < this.getScrollEl().scrollLeft;\n const shouldScrollRight: boolean = position.right > (this.getScrollEl().scrollLeft + this.clientWidth);\n\n if (shouldScrollLeft) {\n this.getScrollEl().scrollLeft = position.left - 30;\n } else if (shouldScrollRight) {\n this.getScrollEl().scrollLeft = position.right - this.clientWidth + 12 + 30; // plus 12 for margin\n }\n }\n\n ngOnDestroy() {\n this._scrollAndResizeSub.unsubscribe();\n this._activeChangeSub.unsubscribe();\n this._transitionEndSub.unsubscribe();\n this._tabsChangeSub.unsubscribe();\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsComponent } from './tabs.component';\nimport { TabDirective } from './tab.directive';\n\n@NgModule({\n imports: [\n CommonModule\n ],\n declarations: [\n TabsComponent,\n TabDirective\n ],\n exports: [\n TabsComponent,\n TabDirective\n ]\n})\nexport class TabsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.TabsService"],"mappings":"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"}
1
+ {"version":3,"file":"nw-style-guide-tabs.mjs","sources":["../../../projects/nw-style-guide/tabs/tabs.service.ts","../../../projects/nw-style-guide/tabs/tab.directive.ts","../../../projects/nw-style-guide/tabs/tabs.component.ts","../../../projects/nw-style-guide/tabs/tabs.module.ts","../../../projects/nw-style-guide/tabs/nw-style-guide-tabs.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\nimport { Subject, Observable } from \"rxjs\";\nimport { TabDirective } from \"./tab.directive\";\n\n@Injectable()\nexport class TabsService {\n\n private _activeChange: Subject<TabDirective> = new Subject();\n public activeChange: Observable<TabDirective> = this._activeChange.asObservable();\n\n notifyActiveChange(tab: TabDirective) {\n this._activeChange.next(tab);\n }\n}\n","import { Directive, ElementRef, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { TabsService } from './tabs.service';\n\n@Directive({\n selector: '[nwTab]',\n standalone: false\n})\nexport class TabDirective implements OnChanges {\n\n @HostBinding('class.active') @Input() isActive: boolean = false;\n @HostBinding('attr.role') role = 'tab';\n @HostBinding('attr.tabindex') tabindex = 0;\n\n constructor(\n public elRef: ElementRef<HTMLElement>,\n private _tabsService: TabsService) {}\n\n ngOnChanges(changes: SimpleChanges) {\n const hasChanged = changes.isActive &&\n changes.isActive.previousValue !== changes.isActive.currentValue &&\n !changes.isActive.firstChange;\n\n if (hasChanged && this.isActive) {\n this._tabsService.notifyActiveChange(this);\n }\n }\n}\n","import { Component, ContentChildren, QueryList, Input, ElementRef, ViewChild, OnInit, ChangeDetectorRef, OnDestroy, ChangeDetectionStrategy, AfterContentInit } from '@angular/core';\nimport { TabDirective } from './tab.directive';\nimport { fromEvent, Subscription, Observable, merge } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\nimport { TabsService } from './tabs.service';\n\n@Component({\n selector: 'nw-tabs',\n template: `\n <div class=\"scroll-container\" #scrollContainer>\n <ul class=\"nav nav-tabs\" [ngClass]=\"tabSizeClass\" role=\"tablist\">\n <ng-content></ng-content>\n\n <li #activeBar class=\"nav-tabs-active-bar\" [ngStyle]=\"getActiveStyles()\"></li>\n </ul>\n </div>\n\n <div class=\"pagination-container\" *ngIf=\"shouldShowPagination\">\n <div class=\"prev-page\" *ngIf=\"shouldShowPrev\" (click)=\"prev()\" [ngStyle]=\"background\">\n <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n </div>\n <div class=\"next-page\" *ngIf=\"shouldShowNext\" (click)=\"next()\" [ngStyle]=\"background\">\n <ng-container *ngTemplateOutlet=\"paginator\"></ng-container>\n </div>\n </div>\n\n <ng-template #paginator>\n <button class=\"btn btn-md btn-ghost-alt\">\n <i class=\"fas fa-chevron-left\"></i>\n </button>\n </ng-template>\n `,\n providers: [TabsService],\n changeDetection: ChangeDetectionStrategy.OnPush,\n styles: [`\n :host, ul {\n position: relative;\n }\n `],\n standalone: false\n})\n\nexport class TabsComponent implements OnInit, AfterContentInit, OnDestroy {\n\n @Input() size: 'sm' | 'md' | 'lg' = 'md';\n @Input() maskColor: string = '#373737';\n\n @ViewChild('scrollContainer', { static: true }) scrollContainer: ElementRef<HTMLElement>;\n @ViewChild('activeBar', { static: true }) activeBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabDirective) tabs: QueryList<TabDirective> = new QueryList();\n\n private _scrollAndResizeSub: Subscription;\n private _activeChangeSub: Subscription;\n private _transitionEndSub: Subscription;\n private _tabsChangeSub: Subscription;\n private _paginationTolerance: number = 100;\n\n constructor(\n private _cdRef: ChangeDetectorRef,\n private _tabsService: TabsService) {}\n\n ngOnInit() {\n const scrollStop$: Observable<Event> = fromEvent(this.scrollContainer.nativeElement, 'scroll');\n const windowResizeStop$: Observable<Event> = fromEvent(window, 'resize');\n\n this._scrollAndResizeSub = merge(scrollStop$, windowResizeStop$)\n .pipe(debounceTime(50))\n .subscribe(_ => this._cdRef.detectChanges());\n\n this.subscribeToActiveChange();\n this.subscribeToActiveBarTransitionEnd();\n }\n\n ngAfterContentInit() {\n this.subscribeToTabsChange();\n }\n\n subscribeToActiveChange() {\n this._activeChangeSub = this._tabsService.activeChange.subscribe(tab => {\n this.scrollToTabIfRequired(tab);\n\n setTimeout(() => {\n this._cdRef.detectChanges();\n }, 0);\n });\n }\n\n subscribeToTabsChange() {\n this._tabsChangeSub = this.tabs.changes.subscribe(tabs => {\n setTimeout(() => {\n this._cdRef.detectChanges();\n }, 0);\n });\n }\n\n subscribeToActiveBarTransitionEnd() {\n this._transitionEndSub = fromEvent(this.activeBar.nativeElement, 'transitionend')\n .pipe(debounceTime(50))\n .subscribe(() => {\n console.log('transition ended');\n this._cdRef.detectChanges();\n });\n }\n\n getActiveTab(): TabDirective {\n return this.tabs.filter(t => t.isActive)[0];\n }\n\n get tabSizeClass(): string {\n return `nav-${this.size}`;\n }\n\n getActiveStyles(): { [key: string]: string } {\n const tab: TabDirective = this.getActiveTab();\n\n if (tab) {\n return {\n width: tab.elRef.nativeElement.getBoundingClientRect().width + 'px',\n left: tab.elRef.nativeElement.offsetLeft + 'px'\n };\n }\n return {};\n }\n\n getScrollEl(): HTMLElement {\n return this.scrollContainer.nativeElement;\n }\n\n get background() {\n return {\n 'background': `linear-gradient(to left, rgba(0,0,0,0), ${this.maskColor})`\n };\n }\n\n get clientWidth(): number {\n return this.getScrollEl().clientWidth;\n }\n\n get shouldShowPagination(): boolean {\n return +(this.getScrollEl().scrollWidth / this.clientWidth).toFixed(1) >= 1;\n }\n\n get shouldShowPrev(): boolean {\n return this.getScrollEl().scrollLeft >= 1;\n }\n\n get shouldShowNext(): boolean {\n return this.getScrollEl().scrollLeft + this.clientWidth < this.getScrollEl().scrollWidth;\n }\n\n prev(): void {\n this.getScrollEl().scrollLeft -= (this.clientWidth - this._paginationTolerance);\n }\n\n next() {\n this.getScrollEl().scrollLeft += (this.clientWidth - this._paginationTolerance);\n }\n\n scrollToTabIfRequired(tab: TabDirective) {\n const offsetLeft = tab.elRef.nativeElement.offsetLeft;\n const position = {\n left: offsetLeft,\n right: offsetLeft + tab.elRef.nativeElement.clientWidth\n };\n\n const shouldScrollLeft: boolean = position.left < this.getScrollEl().scrollLeft;\n const shouldScrollRight: boolean = position.right > (this.getScrollEl().scrollLeft + this.clientWidth);\n\n if (shouldScrollLeft) {\n this.getScrollEl().scrollLeft = position.left - 30;\n } else if (shouldScrollRight) {\n this.getScrollEl().scrollLeft = position.right - this.clientWidth + 12 + 30; // plus 12 for margin\n }\n }\n\n ngOnDestroy() {\n this._scrollAndResizeSub.unsubscribe();\n this._activeChangeSub.unsubscribe();\n this._transitionEndSub.unsubscribe();\n this._tabsChangeSub.unsubscribe();\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabsComponent } from './tabs.component';\nimport { TabDirective } from './tab.directive';\n\n@NgModule({\n imports: [\n CommonModule\n ],\n declarations: [\n TabsComponent,\n TabDirective\n ],\n exports: [\n TabsComponent,\n TabDirective\n ]\n})\nexport class TabsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.TabsService"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nw-style-guide",
3
- "version": "20.1.0",
3
+ "version": "20.3.0-beta.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/NewsWhip/style-guide"
package/picker/index.d.ts CHANGED
@@ -55,6 +55,7 @@ declare class NwPickerComponent implements OnInit, OnChanges, OnDestroy {
55
55
  parentId: any;
56
56
  selectionsAreShowing: boolean;
57
57
  maxHeight: number;
58
+ focusedItemIndex: number;
58
59
  private _subs;
59
60
  constructor(chRef: ChangeDetectorRef);
60
61
  ngOnInit(): void;
@@ -80,6 +81,9 @@ declare class NwPickerComponent implements OnInit, OnChanges, OnDestroy {
80
81
  close(): void;
81
82
  closeResults(): void;
82
83
  onReset($event?: KeyboardEvent): void;
84
+ onInputKeyDown(event: KeyboardEvent, item: IPickerItem): void;
85
+ navigateDown(): void;
86
+ navigateUp(): void;
83
87
  getPlaceholderText(): string;
84
88
  getMaxHeight(el: HTMLElement): string;
85
89
  ngOnDestroy(): void;
package/sass/src/components/picker.component.scss CHANGED
@@ -107,6 +107,14 @@ nw-angular-picker {
107
107
 
108
108
  .checkbox {
109
109
  margin: 0;
110
+
111
+ input {
112
+ margin-top: 10px;
113
+ display: block;
114
+ left: 20px;
115
+ opacity: 0;
116
+ z-index: -1;
117
+ }
110
118
  }
111
119
  }
112
120
  &.excluded {