| {"__symbolic":"module","version":4,"metadata":{"CovalentChipsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":19,"character":4}],"declarations":[{"__symbolic":"reference","name":"TdChipsComponent"},{"__symbolic":"reference","name":"TdChipDirective"},{"__symbolic":"reference","name":"TdAutocompleteOptionDirective"}],"exports":[{"__symbolic":"reference","name":"TdChipsComponent"},{"__symbolic":"reference","name":"TdChipDirective"},{"__symbolic":"reference","name":"TdAutocompleteOptionDirective"}]}]}],"members":{}},"TdChipDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":23,"character":37},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":20,"character":1},"arguments":[{"selector":"[td-chip]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":24,"character":63}]}]}},"TdAutocompleteOptionDirective":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@angular/cdk/portal","name":"TemplatePortalDirective","line":32,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":29,"character":1},"arguments":[{"selector":"[td-autocomplete-option]ng-template"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":24,"character":63}]}]}},"TdChipsBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":39,"character":41}]}]}},"_TdChipsMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":43,"character":33},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinDisabled","line":43,"character":59},"arguments":[{"__symbolic":"reference","name":"TdChipsBase"}]},[]]},"TdChipsComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdChipsMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":45,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":47,"character":13},"useExisting":{"__symbolic":"reference","name":"TdChipsComponent"},"multi":true}],"selector":"td-chips","inputs":["disabled","value"],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":55,"character":19},"member":"OnPush"},"template":"<div class=\"td-chips-wrapper\"\n [class.td-chips-stacked]=\"stacked\"\n [class.td-chips-input-before-position]=\"inputPosition === 'before'\">\n <ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"value\">\n <mat-basic-chip [class.td-chip-disabled]=\"disabled\"\n [class.td-chip-after-pad]=\"!canRemoveChip\"\n [disableRipple]=\"true\"\n [color]=\"color\"\n (keydown)=\"_chipKeydown($event, index)\"\n (blur)=\"_handleChipBlur($event, chip)\"\n (focus)=\"_handleChipFocus($event, chip)\">\n <div class=\"td-chip\" [class.td-chip-stacked]=\"stacked\">\n <span class=\"td-chip-content\">\n <span *ngIf=\"!_chipTemplate?.templateRef\">{{chip}}</span>\n <ng-template\n *ngIf=\"_chipTemplate?.templateRef\"\n [ngTemplateOutlet]=\"_chipTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ chip: chip }\">\n </ng-template>\n </span>\n <mat-icon *ngIf=\"canRemoveChip\" class=\"td-chip-removal\" (click)=\"_internalClick = removeChip(index)\">\n cancel\n </mat-icon>\n </div>\n </mat-basic-chip>\n </ng-template>\n <mat-form-field floatLabel=\"never\"\n class=\"td-chips-form-field\"\n [style.width.px]=\"canAddChip ? null : 0\"\n [style.height.px]=\"canAddChip ? null : 0\"\n [color]=\"color\">\n <input matInput\n #input\n [tabIndex]=\"-1\"\n [matAutocomplete]=\"autocomplete\"\n [formControl]=\"inputControl\"\n [placeholder]=\"displayPlaceHolder\"\n (keydown)=\"_inputKeydown($event)\"\n (keyup.enter)=\"_handleAddChip()\"\n (focus)=\"_handleFocus()\">\n </mat-form-field>\n <mat-autocomplete #autocomplete=\"matAutocomplete\"\n [displayWith]=\"_removeInputDisplay\"\n (optionSelected)=\"addChip($event.option.value)\">\n <ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"items\">\n <mat-option (click)=\"_setInternalClick()\" [value]=\"item\">\n <span *ngIf=\"!_autocompleteOptionTemplate?.templateRef\">{{item}}</span>\n <ng-template\n *ngIf=\"_autocompleteOptionTemplate?.templateRef\"\n [ngTemplateOutlet]=\"_autocompleteOptionTemplate?.templateRef\"\n [ngTemplateOutletContext]=\"{ option: item }\">\n </ng-template>\n </mat-option>\n </ng-template>\n </mat-autocomplete>\n</div>\n<div *ngIf=\"chipAddition\" class=\"mat-form-field-underline\"\n [class.mat-disabled]=\"disabled\">\n <span class=\"mat-form-field-ripple\"\n [class.mat-focused]=\"focused\"></span>\n</div>\n<ng-content></ng-content>","styles":[":host{display:block;padding:0 5px;min-height:48px}:host .td-chips-wrapper{min-height:42px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}:host .td-chips-wrapper.td-chips-stacked .mat-basic-chip,:host .td-chips-wrapper.td-chips-stacked .td-chips-form-field{width:100%}:host .td-chips-wrapper.td-chips-input-before-position .td-chips-form-field{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}:host .td-chip,:host .td-chip>.td-chip-content{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;min-width:0}:host .td-chip.td-chip-stacked,:host .td-chip>.td-chip-content.td-chip-stacked{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:2px}:host ::ng-deep .mat-basic-chip{display:inline-block;cursor:default;border-radius:16px;margin:8px 8px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;position:relative}html[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip{min-height:32px;line-height:32px;font-size:13px;padding:0 0 0 12px}html[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip .td-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{display:inline-block;-webkit-box-ordinal-group:-19;-ms-flex-order:-20;order:-20;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;height:32px;width:32px;margin:0 8px 0 -12px;border-radius:50%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-sizing:border-box;box-sizing:border-box}html[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar] bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar] bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 12px 0 0}html[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip.td-chip-after-pad bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip.td-chip-after-pad bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip mat-icon.td-chip-removal{margin:0 4px;font-size:21px;line-height:22px}:host ::ng-deep .mat-basic-chip mat-icon.td-chip-removal:hover{cursor:pointer}:host ::ng-deep .td-chips-stacked .mat-basic-chip{margin:4px 0}:host ::ng-deep .td-chips-stacked .mat-basic-chip:first-of-type{margin:8px 0 4px}:host ::ng-deep .td-chips-stacked .mat-basic-chip:last-of-type{margin:4px 0 8px}:host .mat-form-field-underline{position:relative;height:1px;width:100%;bottom:0}:host .mat-form-field-underline.mat-disabled{background-position:0;bottom:-4px;background-color:transparent}:host .mat-form-field-underline .mat-form-field-ripple{position:absolute;height:2px;top:0;width:100%;-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;-webkit-transform:scaleX(.5);-ms-transform:scaleX(.5);transform:scaleX(.5);visibility:hidden;opacity:0;-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2);transition:background-color .3s cubic-bezier(.55,0,.55,.2)}:host .mat-form-field-underline .mat-form-field-ripple.mat-focused{visibility:visible;opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear;transition:transform 150ms linear,background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear}:host.ng-invalid .mat-form-field-underline .mat-form-field-ripple{visibility:visible;opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear;transition:transform 150ms linear,background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none}"]}]}],"members":{"_nativeInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":79,"character":3},"arguments":["input"]}]}],"_inputChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":80,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":80,"character":13}]}]}],"_autocompleteTrigger":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":81,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteTrigger","line":81,"character":13}]}]}],"_chipsChildren":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":82,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChip","line":82,"character":16}]}]}],"_chipTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":84,"character":3},"arguments":[{"__symbolic":"reference","name":"TdChipDirective"}]}]}],"_autocompleteOptionTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":85,"character":3},"arguments":[{"__symbolic":"reference","name":"TdAutocompleteOptionDirective"}]}]}],"_options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":87,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":87,"character":16}]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3},"arguments":["items"]}]}],"stacked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":3},"arguments":["stacked"]}]}],"inputPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":3},"arguments":["inputPosition"]}]}],"requireMatch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":145,"character":3},"arguments":["requireMatch"]}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":158,"character":3},"arguments":["required"]}]}],"chipAddition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":3},"arguments":["chipAddition"]}]}],"chipRemoval":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":193,"character":3},"arguments":["chipRemoval"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":223,"character":3},"arguments":["placeholder"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":229,"character":3},"arguments":["debounce"]}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":236,"character":3},"arguments":["color"]}]}],"onAdd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":253,"character":3},"arguments":["add"]}]}],"onRemove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":260,"character":3},"arguments":["remove"]}]}],"onInputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":267,"character":3},"arguments":["inputChange"]}]}],"onChipFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":274,"character":3},"arguments":["chipFocus"]}]}],"onChipBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":281,"character":3},"arguments":["chipBlur"]}]}],"tabIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":286,"character":3},"arguments":["attr.tabindex"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":293,"character":15}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":293,"character":27},"arguments":[{"__symbolic":"reference","module":"@angular/common","name":"DOCUMENT","line":293,"character":34}]}],null],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":291,"character":35},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":292,"character":33},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":39,"character":41}]}],"compareWith":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":304,"character":3},"arguments":["compareWith"]}]}],"focusListener":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":311,"character":3},"arguments":["focus",["$event"]]}]}],"mousedownListener":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":323,"character":3},"arguments":["mousedown",["$event"]]}]}],"clickListener":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":336,"character":3},"arguments":["click",["$event"]]}]}],"keydownListener":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":350,"character":3},"arguments":["keydown",["$event"]]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"_setInternalClick":[{"__symbolic":"method"}],"onDisabledChange":[{"__symbolic":"method"}],"_handleAddChip":[{"__symbolic":"method"}],"addChip":[{"__symbolic":"method"}],"removeChip":[{"__symbolic":"method"}],"_handleChipBlur":[{"__symbolic":"method"}],"_handleChipFocus":[{"__symbolic":"method"}],"_handleFocus":[{"__symbolic":"method"}],"setFocusedState":[{"__symbolic":"method"}],"removeFocusedState":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"_inputKeydown":[{"__symbolic":"method"}],"_chipKeydown":[{"__symbolic":"method"}],"_removeInputDisplay":[{"__symbolic":"method"}],"_openAutocomplete":[{"__symbolic":"method"}],"_closeAutocomplete":[{"__symbolic":"method"}],"_focusChip":[{"__symbolic":"method"}],"_focusFirstChip":[{"__symbolic":"method"}],"_focusLastChip":[{"__symbolic":"method"}],"_toggleInput":[{"__symbolic":"method"}],"_setFirstOptionActive":[{"__symbolic":"method"}],"_watchOutsideClick":[{"__symbolic":"method"}]}}},"origins":{"CovalentChipsModule":"./chips.module","TdChipDirective":"./chips.component","TdAutocompleteOptionDirective":"./chips.component","TdChipsBase":"./chips.component","_TdChipsMixinBase":"./chips.component","TdChipsComponent":"./chips.component"},"importAs":"@covalent/core/chips"} |