@firestitch/chip 8.1.9 → 13.0.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 (39) hide show
  1. package/app/components/chip/chip.component.d.ts +19 -9
  2. package/app/components/chips/chips.component.d.ts +12 -8
  3. package/app/fs-chip.module.d.ts +10 -1
  4. package/app/services/chips.service.d.ts +5 -2
  5. package/esm2020/app/components/chip/chip.component.mjs +221 -0
  6. package/esm2020/app/components/chips/chips.component.mjs +132 -0
  7. package/esm2020/app/fs-chip.module.mjs +44 -0
  8. package/esm2020/app/services/chips.service.mjs +47 -0
  9. package/esm2020/firestitch-chip.mjs +5 -0
  10. package/esm2020/public_api.mjs +7 -0
  11. package/fesm2015/firestitch-chip.mjs +442 -0
  12. package/fesm2015/firestitch-chip.mjs.map +1 -0
  13. package/fesm2020/firestitch-chip.mjs +440 -0
  14. package/fesm2020/firestitch-chip.mjs.map +1 -0
  15. package/firestitch-chip.d.ts +1 -3
  16. package/package.json +21 -12
  17. package/public_api.d.ts +2 -0
  18. package/styles.scss +0 -190
  19. package/bundles/firestitch-chip.umd.js +0 -837
  20. package/bundles/firestitch-chip.umd.js.map +0 -1
  21. package/bundles/firestitch-chip.umd.min.js +0 -2
  22. package/bundles/firestitch-chip.umd.min.js.map +0 -1
  23. package/esm2015/app/components/chip/chip.component.js +0 -336
  24. package/esm2015/app/components/chips/chips.component.js +0 -236
  25. package/esm2015/app/fs-chip.module.js +0 -39
  26. package/esm2015/app/services/chips.service.js +0 -93
  27. package/esm2015/firestitch-chip.js +0 -13
  28. package/esm2015/public_api.js +0 -10
  29. package/esm5/app/components/chip/chip.component.js +0 -392
  30. package/esm5/app/components/chips/chips.component.js +0 -287
  31. package/esm5/app/fs-chip.module.js +0 -46
  32. package/esm5/app/services/chips.service.js +0 -119
  33. package/esm5/firestitch-chip.js +0 -13
  34. package/esm5/public_api.js +0 -10
  35. package/fesm2015/firestitch-chip.js +0 -709
  36. package/fesm2015/firestitch-chip.js.map +0 -1
  37. package/fesm5/firestitch-chip.js +0 -845
  38. package/fesm5/firestitch-chip.js.map +0 -1
  39. package/firestitch-chip.metadata.json +0 -1
@@ -1,709 +0,0 @@
1
- import { Injectable, Component, forwardRef, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding, Input, EventEmitter, Optional, HostListener, Output, NgModule } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { MatIconModule } from '@angular/material/icon';
4
- import { FsLabelModule } from '@firestitch/label';
5
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
- import { Subject } from 'rxjs';
7
- import { takeUntil, debounceTime } from 'rxjs/operators';
8
- import { find } from 'lodash-es';
9
-
10
- /**
11
- * @fileoverview added by tsickle
12
- * Generated from: app/services/chips.service.ts
13
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
14
- */
15
- class FsChipsService {
16
- constructor() {
17
- this.chips = [];
18
- this._chipItemsChanged$ = new Subject();
19
- this._selectionChanged$ = new Subject();
20
- this._destroy$ = new Subject();
21
- }
22
- /**
23
- * @return {?}
24
- */
25
- get selectionChanged$() {
26
- return this._selectionChanged$.
27
- pipe(takeUntil(this._destroy$));
28
- }
29
- /**
30
- * @return {?}
31
- */
32
- get chipItemsChanged$() {
33
- return this._chipItemsChanged$
34
- .pipe(takeUntil(this._destroy$), debounceTime(50));
35
- }
36
- /**
37
- * @return {?}
38
- */
39
- ngOnDestroy() {
40
- this._destroy$.next();
41
- this._destroy$.complete();
42
- }
43
- /**
44
- * @param {?} selected
45
- * @param {?} value
46
- * @return {?}
47
- */
48
- selectionChanged(selected, value) {
49
- this._selectionChanged$.next({
50
- selected: selected,
51
- value: value,
52
- });
53
- }
54
- /**
55
- * @param {?} chip
56
- * @return {?}
57
- */
58
- register(chip) {
59
- this.chips.push(chip);
60
- this._chipItemsChanged$.next();
61
- }
62
- /**
63
- * @param {?} chip
64
- * @return {?}
65
- */
66
- destroy(chip) {
67
- /** @type {?} */
68
- const index = this.chips.indexOf(chip);
69
- if (index > -1) {
70
- this.chips.splice(index, 1);
71
- this._chipItemsChanged$.next();
72
- }
73
- }
74
- }
75
- FsChipsService.decorators = [
76
- { type: Injectable }
77
- ];
78
- /** @nocollapse */
79
- FsChipsService.ctorParameters = () => [];
80
- if (false) {
81
- /** @type {?} */
82
- FsChipsService.prototype.chips;
83
- /**
84
- * @type {?}
85
- * @private
86
- */
87
- FsChipsService.prototype._chipItemsChanged$;
88
- /**
89
- * @type {?}
90
- * @private
91
- */
92
- FsChipsService.prototype._selectionChanged$;
93
- /**
94
- * @type {?}
95
- * @private
96
- */
97
- FsChipsService.prototype._destroy$;
98
- }
99
-
100
- /**
101
- * @fileoverview added by tsickle
102
- * Generated from: app/components/chips/chips.component.ts
103
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
104
- */
105
- class FsChipsComponent {
106
- /**
107
- * @param {?} _cdRef
108
- * @param {?} _chipsService
109
- */
110
- constructor(_cdRef, _chipsService) {
111
- this._cdRef = _cdRef;
112
- this._chipsService = _chipsService;
113
- this.classFsChips = true;
114
- this.classHasChips = false;
115
- this.multiple = true;
116
- this.onChange = (/**
117
- * @return {?}
118
- */
119
- () => { });
120
- this.onTouch = (/**
121
- * @return {?}
122
- */
123
- () => { });
124
- this._value = [];
125
- this._destroy$ = new Subject();
126
- this.subscribeToItemsChange();
127
- this.subscribeToSelectionChange();
128
- }
129
- /**
130
- * @return {?}
131
- */
132
- get chips() {
133
- return this._chipsService.chips;
134
- }
135
- /**
136
- * @param {?} value
137
- * @return {?}
138
- */
139
- set value(value) {
140
- if (this._value !== value) {
141
- this._value = value;
142
- this.onChange(this._value);
143
- this.onTouch(this._value);
144
- }
145
- }
146
- /**
147
- * @return {?}
148
- */
149
- get value() {
150
- return this._value;
151
- }
152
- /**
153
- * @return {?}
154
- */
155
- ngOnDestroy() {
156
- this._destroy$.next();
157
- this._destroy$.complete();
158
- }
159
- /**
160
- * @param {?} value
161
- * @return {?}
162
- */
163
- writeValue(value) {
164
- if (value !== this.value) {
165
- this._value = value;
166
- }
167
- this.updateChips();
168
- }
169
- /**
170
- * @param {?} fn
171
- * @return {?}
172
- */
173
- registerOnChange(fn) { this.onChange = fn; }
174
- /**
175
- * @param {?} fn
176
- * @return {?}
177
- */
178
- registerOnTouched(fn) { this.onTouch = fn; }
179
- /**
180
- * Update ngModel value when selection changed
181
- * @private
182
- * @return {?}
183
- */
184
- subscribeToSelectionChange() {
185
- this._chipsService.selectionChanged$
186
- .pipe(takeUntil(this._destroy$))
187
- .subscribe((/**
188
- * @param {?} __0
189
- * @return {?}
190
- */
191
- ({ selected, value }) => {
192
- if (!selected) {
193
- /** @type {?} */
194
- const valueIndex = this.value.findIndex((/**
195
- * @param {?} item
196
- * @return {?}
197
- */
198
- (item) => {
199
- return this.compareFn(item, value);
200
- }));
201
- if (valueIndex > -1) {
202
- this.value.splice(valueIndex, 1);
203
- this.onChange(this._value);
204
- this.onTouch(this._value);
205
- }
206
- }
207
- else {
208
- this.value.push(value);
209
- this.onChange(this._value);
210
- this.onTouch(this._value);
211
- }
212
- }));
213
- }
214
- /**
215
- * Update selection if item was added or removed
216
- * @private
217
- * @return {?}
218
- */
219
- subscribeToItemsChange() {
220
- this._chipsService.chipItemsChanged$
221
- .pipe(takeUntil(this._destroy$))
222
- .subscribe((/**
223
- * @return {?}
224
- */
225
- () => {
226
- this.classHasChips = !!this._chipsService.chips.length;
227
- this.updateChips();
228
- }));
229
- }
230
- /**
231
- * @private
232
- * @param {?} o1
233
- * @param {?} o2
234
- * @return {?}
235
- */
236
- compareFn(o1, o2) {
237
- if (this.compare) {
238
- return this.compare(o1, o2);
239
- }
240
- return o1 === o2;
241
- }
242
- /**
243
- * @private
244
- * @return {?}
245
- */
246
- updateChips() {
247
- if (this.multiple && Array.isArray(this.value) && this.chips) {
248
- this.chips.forEach((/**
249
- * @param {?} chip
250
- * @return {?}
251
- */
252
- (chip) => {
253
- chip.selected = find(this.value, (/**
254
- * @param {?} o
255
- * @return {?}
256
- */
257
- (o) => {
258
- return this.compareFn(o, chip.value);
259
- })) !== undefined;
260
- }));
261
- }
262
- this._cdRef.markForCheck();
263
- }
264
- }
265
- FsChipsComponent.decorators = [
266
- { type: Component, args: [{
267
- selector: 'fs-chips',
268
- template: "<ng-content></ng-content>\n",
269
- providers: [
270
- {
271
- provide: NG_VALUE_ACCESSOR,
272
- useExisting: forwardRef((/**
273
- * @return {?}
274
- */
275
- () => FsChipsComponent)),
276
- multi: true,
277
- },
278
- FsChipsService,
279
- ],
280
- changeDetection: ChangeDetectionStrategy.OnPush,
281
- styles: [""]
282
- }] }
283
- ];
284
- /** @nocollapse */
285
- FsChipsComponent.ctorParameters = () => [
286
- { type: ChangeDetectorRef },
287
- { type: FsChipsService }
288
- ];
289
- FsChipsComponent.propDecorators = {
290
- classFsChips: [{ type: HostBinding, args: ['class.fs-chips',] }],
291
- classHasChips: [{ type: HostBinding, args: ['class.has-chips',] }],
292
- compare: [{ type: Input }],
293
- multiple: [{ type: Input }]
294
- };
295
- if (false) {
296
- /** @type {?} */
297
- FsChipsComponent.prototype.classFsChips;
298
- /** @type {?} */
299
- FsChipsComponent.prototype.classHasChips;
300
- /** @type {?} */
301
- FsChipsComponent.prototype.compare;
302
- /** @type {?} */
303
- FsChipsComponent.prototype.multiple;
304
- /** @type {?} */
305
- FsChipsComponent.prototype.onChange;
306
- /** @type {?} */
307
- FsChipsComponent.prototype.onTouch;
308
- /**
309
- * @type {?}
310
- * @private
311
- */
312
- FsChipsComponent.prototype._value;
313
- /**
314
- * @type {?}
315
- * @private
316
- */
317
- FsChipsComponent.prototype._destroy$;
318
- /**
319
- * @type {?}
320
- * @private
321
- */
322
- FsChipsComponent.prototype._cdRef;
323
- /**
324
- * @type {?}
325
- * @private
326
- */
327
- FsChipsComponent.prototype._chipsService;
328
- }
329
-
330
- /**
331
- * @fileoverview added by tsickle
332
- * Generated from: app/components/chip/chip.component.ts
333
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
334
- */
335
- class FsChipComponent {
336
- /**
337
- * @param {?} _cdRef
338
- * @param {?} _chips
339
- */
340
- constructor(_cdRef, _chips) {
341
- this._cdRef = _cdRef;
342
- this._chips = _chips;
343
- this.fsChip = true;
344
- this._outlined = false;
345
- this._selectable = false;
346
- this._image = false;
347
- this._selected = false;
348
- this._removable = false;
349
- this.styleBackgroundColor = '';
350
- this.styleColor = '';
351
- this.styleBorderColor = '';
352
- this.classSmall = false;
353
- this.classTiny = false;
354
- this.classMicro = false;
355
- this.value = null;
356
- this.selectedToggled = new EventEmitter();
357
- this.removed = new EventEmitter();
358
- this.$destroy = new Subject();
359
- this._backgroundColor = '';
360
- this._color = '';
361
- }
362
- /**
363
- * @param {?} value
364
- * @return {?}
365
- */
366
- set setSize(value) {
367
- this._size = value;
368
- this.classSmall = value === 'small';
369
- this.classTiny = value === 'tiny';
370
- this.classMicro = value === 'micro';
371
- }
372
- ;
373
- /**
374
- * @return {?}
375
- */
376
- click() {
377
- if (this.selectable) {
378
- this.selected = !this.selected;
379
- this.selectedToggled.emit({ value: this.value, selected: this.selected });
380
- if (this._chips) {
381
- this._chips.selectionChanged(this.selected, this.value);
382
- }
383
- }
384
- }
385
- /**
386
- * @param {?} value
387
- * @return {?}
388
- */
389
- set backgroundColor(value) {
390
- this._backgroundColor = value;
391
- this.updateStyles();
392
- }
393
- ;
394
- /**
395
- * @param {?} value
396
- * @return {?}
397
- */
398
- set borderColor(value) {
399
- this.styleBorderColor = value;
400
- this.updateStyles();
401
- }
402
- /**
403
- * @param {?} value
404
- * @return {?}
405
- */
406
- set color(value) {
407
- this._color = value;
408
- this.updateStyles();
409
- }
410
- /**
411
- * @return {?}
412
- */
413
- get color() {
414
- return this._color;
415
- }
416
- /**
417
- * @param {?} value
418
- * @return {?}
419
- */
420
- set outlined(value) {
421
- this._outlined = value;
422
- this.updateStyles();
423
- }
424
- ;
425
- /**
426
- * @return {?}
427
- */
428
- get outlined() {
429
- return this._outlined;
430
- }
431
- /**
432
- * @param {?} value
433
- * @return {?}
434
- */
435
- set removable(value) {
436
- this._removable = value;
437
- this._cdRef.markForCheck();
438
- }
439
- ;
440
- /**
441
- * @return {?}
442
- */
443
- get removable() {
444
- return this._removable;
445
- }
446
- /**
447
- * @param {?} value
448
- * @return {?}
449
- */
450
- set selectable(value) {
451
- this._selectable = value;
452
- }
453
- ;
454
- /**
455
- * @return {?}
456
- */
457
- get selectable() {
458
- return this._selectable;
459
- }
460
- /**
461
- * @param {?} value
462
- * @return {?}
463
- */
464
- set selected(value) {
465
- this._selected = value;
466
- this._cdRef.markForCheck();
467
- }
468
- ;
469
- /**
470
- * @return {?}
471
- */
472
- get selected() {
473
- return this._selected;
474
- }
475
- /**
476
- * @param {?} value
477
- * @return {?}
478
- */
479
- set image(value) {
480
- this._image = value;
481
- this._cdRef.markForCheck();
482
- }
483
- ;
484
- /**
485
- * @return {?}
486
- */
487
- get image() {
488
- return this._image;
489
- }
490
- /**
491
- * @return {?}
492
- */
493
- ngOnInit() {
494
- if (this._chips) {
495
- this._chips.register(this);
496
- }
497
- }
498
- /**
499
- * @return {?}
500
- */
501
- ngOnDestroy() {
502
- if (this._chips) {
503
- this._chips.destroy(this);
504
- }
505
- this.$destroy.next();
506
- this.$destroy.complete();
507
- }
508
- /**
509
- * @param {?} event
510
- * @return {?}
511
- */
512
- remove(event) {
513
- this.removed.next(event);
514
- }
515
- /**
516
- * @private
517
- * @param {?} hexcolor
518
- * @return {?}
519
- */
520
- isContrastYIQBlack(hexcolor) {
521
- if (!hexcolor) {
522
- return true;
523
- }
524
- hexcolor = hexcolor.replace('#', '');
525
- /** @type {?} */
526
- const r = parseInt(hexcolor.substr(0, 2), 16);
527
- /** @type {?} */
528
- const g = parseInt(hexcolor.substr(2, 2), 16);
529
- /** @type {?} */
530
- const b = parseInt(hexcolor.substr(4, 2), 16);
531
- /** @type {?} */
532
- const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
533
- return yiq >= 200;
534
- }
535
- /**
536
- * @private
537
- * @return {?}
538
- */
539
- updateStyles() {
540
- this.styleBackgroundColor = this._backgroundColor;
541
- if (this._color) {
542
- this.styleColor = this._color;
543
- }
544
- else if (!this._outlined) {
545
- this.styleColor = this.isContrastYIQBlack(this.styleBackgroundColor) ? '#474747' : '#fff';
546
- }
547
- if (this._outlined) {
548
- this.styleBackgroundColor = '';
549
- if (this._color) {
550
- this.styleBorderColor = this._color;
551
- }
552
- }
553
- this._cdRef.markForCheck();
554
- }
555
- }
556
- FsChipComponent.decorators = [
557
- { type: Component, args: [{
558
- selector: 'fs-chip',
559
- template: "<img *ngIf=\"image\" [src]=\"image\" class=\"image\" alt=\"\">\n<div class=\"fs-chip-content\">\n <ng-content></ng-content>\n</div>\n<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\n",
560
- changeDetection: ChangeDetectionStrategy.OnPush,
561
- styles: [""]
562
- }] }
563
- ];
564
- /** @nocollapse */
565
- FsChipComponent.ctorParameters = () => [
566
- { type: ChangeDetectorRef },
567
- { type: FsChipsService, decorators: [{ type: Optional }] }
568
- ];
569
- FsChipComponent.propDecorators = {
570
- fsChip: [{ type: HostBinding, args: ['class.fs-chip',] }],
571
- _outlined: [{ type: HostBinding, args: ['class.outlined',] }],
572
- _selectable: [{ type: HostBinding, args: ['class.selectable',] }],
573
- _image: [{ type: HostBinding, args: ['class.imaged',] }],
574
- _selected: [{ type: HostBinding, args: ['class.selected',] }],
575
- _removable: [{ type: HostBinding, args: ['class.removable',] }],
576
- styleBackgroundColor: [{ type: HostBinding, args: ['style.backgroundColor',] }],
577
- styleColor: [{ type: HostBinding, args: ['style.color',] }],
578
- styleBorderColor: [{ type: HostBinding, args: ['style.borderColor',] }],
579
- classSmall: [{ type: HostBinding, args: ['class.small',] }],
580
- classTiny: [{ type: HostBinding, args: ['class.tiny',] }],
581
- classMicro: [{ type: HostBinding, args: ['class.micro',] }],
582
- setSize: [{ type: Input, args: ['size',] }],
583
- click: [{ type: HostListener, args: ['click',] }],
584
- value: [{ type: Input }],
585
- backgroundColor: [{ type: Input }],
586
- borderColor: [{ type: Input }],
587
- color: [{ type: Input }],
588
- outlined: [{ type: Input }],
589
- removable: [{ type: Input }],
590
- selectable: [{ type: Input }],
591
- selected: [{ type: Input }],
592
- image: [{ type: Input }],
593
- selectedToggled: [{ type: Output }],
594
- removed: [{ type: Output }]
595
- };
596
- if (false) {
597
- /** @type {?} */
598
- FsChipComponent.prototype.fsChip;
599
- /** @type {?} */
600
- FsChipComponent.prototype._outlined;
601
- /** @type {?} */
602
- FsChipComponent.prototype._selectable;
603
- /** @type {?} */
604
- FsChipComponent.prototype._image;
605
- /** @type {?} */
606
- FsChipComponent.prototype._selected;
607
- /** @type {?} */
608
- FsChipComponent.prototype._removable;
609
- /** @type {?} */
610
- FsChipComponent.prototype.styleBackgroundColor;
611
- /** @type {?} */
612
- FsChipComponent.prototype.styleColor;
613
- /** @type {?} */
614
- FsChipComponent.prototype.styleBorderColor;
615
- /** @type {?} */
616
- FsChipComponent.prototype.classSmall;
617
- /** @type {?} */
618
- FsChipComponent.prototype.classTiny;
619
- /** @type {?} */
620
- FsChipComponent.prototype.classMicro;
621
- /** @type {?} */
622
- FsChipComponent.prototype.value;
623
- /** @type {?} */
624
- FsChipComponent.prototype.selectedToggled;
625
- /** @type {?} */
626
- FsChipComponent.prototype.removed;
627
- /** @type {?} */
628
- FsChipComponent.prototype.$destroy;
629
- /**
630
- * @type {?}
631
- * @private
632
- */
633
- FsChipComponent.prototype._backgroundColor;
634
- /**
635
- * @type {?}
636
- * @private
637
- */
638
- FsChipComponent.prototype._color;
639
- /**
640
- * @type {?}
641
- * @private
642
- */
643
- FsChipComponent.prototype._size;
644
- /**
645
- * @type {?}
646
- * @private
647
- */
648
- FsChipComponent.prototype._cdRef;
649
- /**
650
- * @type {?}
651
- * @private
652
- */
653
- FsChipComponent.prototype._chips;
654
- /* Skipping unhandled member: ;*/
655
- /* Skipping unhandled member: ;*/
656
- /* Skipping unhandled member: ;*/
657
- /* Skipping unhandled member: ;*/
658
- /* Skipping unhandled member: ;*/
659
- /* Skipping unhandled member: ;*/
660
- /* Skipping unhandled member: ;*/
661
- }
662
-
663
- /**
664
- * @fileoverview added by tsickle
665
- * Generated from: app/fs-chip.module.ts
666
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
667
- */
668
- class FsChipModule {
669
- /**
670
- * @return {?}
671
- */
672
- static forRoot() {
673
- return {
674
- ngModule: FsChipModule
675
- };
676
- }
677
- }
678
- FsChipModule.decorators = [
679
- { type: NgModule, args: [{
680
- imports: [
681
- CommonModule,
682
- MatIconModule,
683
- FsLabelModule
684
- ],
685
- exports: [
686
- FsChipsComponent,
687
- FsChipComponent,
688
- ],
689
- declarations: [
690
- FsChipsComponent,
691
- FsChipComponent,
692
- ]
693
- },] }
694
- ];
695
-
696
- /**
697
- * @fileoverview added by tsickle
698
- * Generated from: public_api.ts
699
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
700
- */
701
-
702
- /**
703
- * @fileoverview added by tsickle
704
- * Generated from: firestitch-chip.ts
705
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
706
- */
707
-
708
- export { FsChipModule, FsChipsComponent as ɵa, FsChipsService as ɵb, FsChipComponent as ɵc };
709
- //# sourceMappingURL=firestitch-chip.js.map