ngx-tags/ngx-tags.metadata.json

To install this library, run:

{"__symbolic":"module","version":4,"metadata":{"NgxTagsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":11,"character":12},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":11,"character":27}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ɵb"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"ngx-tags","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":12,"character":13},"useExisting":{"__symbolic":"reference","name":"ɵa"},"multi":true}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":16,"character":17},"member":"None"},"template":"<section class=\"ngx-tags\">\n  <section class=\"tag-container\" [closeMenu]=\"isMenuOpen\" (whenClickedOut)=\"whenClickedOut()\" [ngClass]=\"{'ngx-tags-disabled':disabled}\" >\n    <span class=\"tag\" *ngFor=\"let tag of tags;let $index = index\" [ngClass]=\"{'tag-readonly': tag.readonly}\">\n      <ng-container [ngTemplateOutletContext]=\"{ item: tag, index: $index,tagLabel:tagLabel,tagEditable:tagEditable }\"\n        [ngTemplateOutlet]=\"tagTemplate ? tagTemplate:defaultTagItemTemplate\">\n      </ng-container>\n      <a href=\"#\" class=\"close\" [hidden]=\"!canDeleteTags\" (click)=\"del($index)\"></a>\n    </span>\n    <span class=\"tag-input\" >\n      <input type=\"text\" *ngIf=\"canAddTags\" [(ngModel)]=\"inputTag\" (blur)=\"blur()\"\n        [placeholder]=\"placeholder\" (keydown.enter)=\"enter($event)\" (keydown.backspace)=\"backspace()\"\n        (input)=\"input()\">\n        </span>\n    </section>\n  <ngx-tags-dropdown [items]=\"_options\" [dropdownItemTemplate]=\"dropdownItemTemplate\" [tagLabel]=\"tagLabel\" [inputTag]=\"inputTag\" (select)=\"select($event) \" [hidden]=\"!isMenuOpen\"></ngx-tags-dropdown>\n</section>\n\n<ng-template #defaultTagItemTemplate let-item=\"item\" let-tagLabel=\"tagLabel\" let-input=\"input\" let-tagEditable=\"tagEditable\" let-index=\"index\">\n  <ngx-tag [item]=\"item\" [tagEditable]=\"tagEditable\" [tagLabel]=\"tagLabel\" [index]=\"index\" (change)=\"save($event)\"></ngx-tag>\n</ng-template>","styles":[".ngx-tags{position:relative;display:block;width:100%}.ngx-tags .ngx-tags-disabled{opacity:.7;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.ngx-tags .tag-container{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;box-sizing:border-box}.ngx-tags .tag-container .tag,.ngx-tags .tag-container .tag-input{background:#9dc1ff;padding:.25rem;border-radius:.25rem;margin-right:.25rem;display:inline-flex;align-items:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.ngx-tags .tag-container .tag-input{background:#fff}.ngx-tags .tag-container .tag-input input{border:none;outline:0;min-width:140px;max-width:100%;height:100%;margin-left:4px;box-sizing:border-box;display:inline-block}.ngx-tags .tag-container .tag-readonly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:.7}.ngx-tags .tag-container .close{position:relative;display:inline-block;width:10px;height:10px;opacity:.8}.ngx-tags .tag-container .close:hover{opacity:1}.ngx-tags .tag-container .close:after,.ngx-tags .tag-container .close:before{position:absolute;left:3px;content:' ';height:11px;width:2px;background-color:#333}.ngx-tags .tag-container .close:before{transform:rotate(45deg)}.ngx-tags .tag-container .close:after{transform:rotate(-45deg)}.item:hover,.keynav-active{background:#e1e4e8}.dropdown{margin:0;padding:0;border:1px solid #e1e4e8;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);border-radius:2px;max-height:200px;overflow-y:auto;position:absolute;background:#fff;display:block;width:100%;z-index:1}.item{padding:4px 2px;display:block}"]}]}],"members":{"tagTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"dropdownItemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"maxTags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"tagLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"tagValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"removeLastOnBackspace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"canDeleteTags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"canAddTags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":3}}]}],"clearOnBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"allowDupes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"onlyFromDropdown":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"tagEditable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"whenClickedOut":[{"__symbolic":"method"}],"enter":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"clearInput":[{"__symbolic":"method"}],"del":[{"__symbolic":"method"}],"backspace":[{"__symbolic":"method"}],"input":[{"__symbolic":"method"}],"filterByInput":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"addToModal":[{"__symbolic":"method"}],"createTag":[{"__symbolic":"method"}],"hasReachedMaxTags":[{"__symbolic":"method"}],"isDuplicate":[{"__symbolic":"method"}],"emitChange":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","members":{"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"ngx-tags-dropdown","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":11,"character":17},"member":"None"},"template":"<article class=\"dropdown\"  #dropdown tabindex=\"0\">\n\t<a class=\"item\" *ngFor=\"let item of items;let $index =index\" (click)=\"emitSelectedItem(item,$index)\" [ngClass]=\"{'keynav-active':$index == _focusIndex}\" [InView]=\"$index == _focusIndex\" >\n   <ng-container \n      [ngTemplateOutletContext]=\"{ \n        item: item, \n        label: tagLabel, \n        input: inputTag, \n        index: index }\"\n      [ngTemplateOutlet]=\"dropdownItemTemplate ? dropdownItemTemplate : defaultDropdownItemTemplate\">\n    </ng-container>\n  </a>\n</article>\n<ng-template \n  #defaultDropdownItemTemplate\n  let-item=\"item\"\n  let-label=\"label\"\n  let-input=\"input\"\n  let-index=\"index\">\n    <span > {{item[label]}}</span>\n</ng-template>\n"}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"tagLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"inputTag":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"dropdownItemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"select":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":28,"character":3},"arguments":["document:keydown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"selectOnEnter":[{"__symbolic":"method"}],"navDropdown":[{"__symbolic":"method"}],"emitSelectedItem":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ngx-tag","template":"<span (keydown.enter)=\"save($event)\"  contenteditable=\"false\" (blur)=\"blur()\" #tagContent>\n  {{(tagLabel) ? item[tagLabel] : item }}\n</span>\n\n\n"}]}],"members":{"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"tagLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"tagEditable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":3}}]}],"tagContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":15,"character":3},"arguments":["tagContent"]}]}],"dbclick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":24,"character":3},"arguments":["dblclick",["$event"]]}]}],"keydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":3},"arguments":["keydown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor"}],"toggleEditMode":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[closeMenu]"}]}],"members":{"whenClickedOut":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":7,"character":3}}]}],"closeMenu":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":3}}]}],"onMouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":9,"character":3},"arguments":["document:mouseup",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":29}]}],"isOutside":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[InView]"}]}],"members":{"InView":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":10,"character":26}]}],"ngOnChanges":[{"__symbolic":"method"}],"setInView":[{"__symbolic":"method"}]}}},"origins":{"NgxTagsModule":"./lib/ngxTags.module","ɵa":"./lib/ngxTags.component","ɵb":"./lib/ngxTagsValueAccessor","ɵc":"./lib/components/dropdown/dropdown.component","ɵd":"./lib/components/tag/tag.component","ɵe":"./lib/directives/close-menu.directive","ɵf":"./lib/directives/in-view.directive"},"importAs":"ngx-tags"}