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