chips.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. "use strict";
  2. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  3. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  4. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  5. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  6. return c > 3 && r && Object.defineProperty(target, key, r), r;
  7. };
  8. var __metadata = (this && this.__metadata) || function (k, v) {
  9. if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
  10. };
  11. Object.defineProperty(exports, "__esModule", { value: true });
  12. var core_1 = require("@angular/core");
  13. var common_1 = require("@angular/common");
  14. var shared_1 = require("../common/shared");
  15. var inputtext_1 = require("../inputtext/inputtext");
  16. var forms_1 = require("@angular/forms");
  17. exports.CHIPS_VALUE_ACCESSOR = {
  18. provide: forms_1.NG_VALUE_ACCESSOR,
  19. useExisting: core_1.forwardRef(function () { return Chips; }),
  20. multi: true
  21. };
  22. var Chips = /** @class */ (function () {
  23. function Chips(el) {
  24. this.el = el;
  25. this.allowDuplicate = true;
  26. this.onAdd = new core_1.EventEmitter();
  27. this.onRemove = new core_1.EventEmitter();
  28. this.onFocus = new core_1.EventEmitter();
  29. this.onBlur = new core_1.EventEmitter();
  30. this.onChipClick = new core_1.EventEmitter();
  31. this.onModelChange = function () { };
  32. this.onModelTouched = function () { };
  33. }
  34. Chips.prototype.ngAfterContentInit = function () {
  35. var _this = this;
  36. this.templates.forEach(function (item) {
  37. switch (item.getType()) {
  38. case 'item':
  39. _this.itemTemplate = item.template;
  40. break;
  41. default:
  42. _this.itemTemplate = item.template;
  43. break;
  44. }
  45. });
  46. };
  47. Chips.prototype.onClick = function (event) {
  48. this.inputViewChild.nativeElement.focus();
  49. };
  50. Chips.prototype.onItemClick = function (event, item) {
  51. this.onChipClick.emit({
  52. originalEvent: event,
  53. value: item
  54. });
  55. };
  56. Chips.prototype.writeValue = function (value) {
  57. this.value = value;
  58. this.updateMaxedOut();
  59. };
  60. Chips.prototype.registerOnChange = function (fn) {
  61. this.onModelChange = fn;
  62. };
  63. Chips.prototype.registerOnTouched = function (fn) {
  64. this.onModelTouched = fn;
  65. };
  66. Chips.prototype.setDisabledState = function (val) {
  67. this.disabled = val;
  68. };
  69. Chips.prototype.resolveFieldData = function (data, field) {
  70. if (data && field) {
  71. if (field.indexOf('.') == -1) {
  72. return data[field];
  73. }
  74. else {
  75. var fields = field.split('.');
  76. var value = data;
  77. for (var i = 0, len = fields.length; i < len; ++i) {
  78. value = value[fields[i]];
  79. }
  80. return value;
  81. }
  82. }
  83. else {
  84. return null;
  85. }
  86. };
  87. Chips.prototype.onInputFocus = function (event) {
  88. this.focus = true;
  89. this.onFocus.emit(event);
  90. };
  91. Chips.prototype.onInputBlur = function (event) {
  92. this.focus = false;
  93. if (this.addOnBlur && this.inputViewChild.nativeElement.value) {
  94. this.addItem(event, this.inputViewChild.nativeElement.value);
  95. this.inputViewChild.nativeElement.value = '';
  96. }
  97. this.onModelTouched();
  98. this.onBlur.emit(event);
  99. };
  100. Chips.prototype.removeItem = function (event, index) {
  101. if (this.disabled) {
  102. return;
  103. }
  104. var removedItem = this.value[index];
  105. this.value = this.value.filter(function (val, i) { return i != index; });
  106. this.onModelChange(this.value);
  107. this.onRemove.emit({
  108. originalEvent: event,
  109. value: removedItem
  110. });
  111. this.updateMaxedOut();
  112. };
  113. Chips.prototype.addItem = function (event, item) {
  114. this.value = this.value || [];
  115. if (item && item.trim().length) {
  116. if (this.allowDuplicate || this.value.indexOf(item) === -1) {
  117. this.value = this.value.concat([item]);
  118. this.onModelChange(this.value);
  119. this.onAdd.emit({
  120. originalEvent: event,
  121. value: item
  122. });
  123. }
  124. }
  125. this.updateMaxedOut();
  126. };
  127. Chips.prototype.onKeydown = function (event) {
  128. switch (event.which) {
  129. //backspace
  130. case 8:
  131. if (this.inputViewChild.nativeElement.value.length === 0 && this.value && this.value.length > 0) {
  132. this.value = this.value.slice();
  133. var removedItem = this.value.pop();
  134. this.onModelChange(this.value);
  135. this.onRemove.emit({
  136. originalEvent: event,
  137. value: removedItem
  138. });
  139. }
  140. break;
  141. //enter
  142. case 13:
  143. this.addItem(event, this.inputViewChild.nativeElement.value);
  144. this.inputViewChild.nativeElement.value = '';
  145. event.preventDefault();
  146. break;
  147. case 9:
  148. if (this.addOnTab && this.inputViewChild.nativeElement.value !== '') {
  149. this.addItem(event, this.inputViewChild.nativeElement.value);
  150. this.inputViewChild.nativeElement.value = '';
  151. event.preventDefault();
  152. }
  153. break;
  154. default:
  155. if (this.max && this.value && this.max === this.value.length) {
  156. event.preventDefault();
  157. }
  158. break;
  159. }
  160. };
  161. Chips.prototype.updateMaxedOut = function () {
  162. if (this.inputViewChild && this.inputViewChild.nativeElement) {
  163. if (this.max && this.value && this.max === this.value.length)
  164. this.inputViewChild.nativeElement.disabled = true;
  165. else
  166. this.inputViewChild.nativeElement.disabled = this.disabled || false;
  167. }
  168. };
  169. __decorate([
  170. core_1.Input(),
  171. __metadata("design:type", Object)
  172. ], Chips.prototype, "style", void 0);
  173. __decorate([
  174. core_1.Input(),
  175. __metadata("design:type", String)
  176. ], Chips.prototype, "styleClass", void 0);
  177. __decorate([
  178. core_1.Input(),
  179. __metadata("design:type", Boolean)
  180. ], Chips.prototype, "disabled", void 0);
  181. __decorate([
  182. core_1.Input(),
  183. __metadata("design:type", String)
  184. ], Chips.prototype, "field", void 0);
  185. __decorate([
  186. core_1.Input(),
  187. __metadata("design:type", String)
  188. ], Chips.prototype, "placeholder", void 0);
  189. __decorate([
  190. core_1.Input(),
  191. __metadata("design:type", Number)
  192. ], Chips.prototype, "max", void 0);
  193. __decorate([
  194. core_1.Input(),
  195. __metadata("design:type", Number)
  196. ], Chips.prototype, "tabindex", void 0);
  197. __decorate([
  198. core_1.Input(),
  199. __metadata("design:type", String)
  200. ], Chips.prototype, "inputId", void 0);
  201. __decorate([
  202. core_1.Input(),
  203. __metadata("design:type", Boolean)
  204. ], Chips.prototype, "allowDuplicate", void 0);
  205. __decorate([
  206. core_1.Input(),
  207. __metadata("design:type", Object)
  208. ], Chips.prototype, "inputStyle", void 0);
  209. __decorate([
  210. core_1.Input(),
  211. __metadata("design:type", Object)
  212. ], Chips.prototype, "inputStyleClass", void 0);
  213. __decorate([
  214. core_1.Input(),
  215. __metadata("design:type", Boolean)
  216. ], Chips.prototype, "addOnTab", void 0);
  217. __decorate([
  218. core_1.Input(),
  219. __metadata("design:type", Boolean)
  220. ], Chips.prototype, "addOnBlur", void 0);
  221. __decorate([
  222. core_1.Output(),
  223. __metadata("design:type", core_1.EventEmitter)
  224. ], Chips.prototype, "onAdd", void 0);
  225. __decorate([
  226. core_1.Output(),
  227. __metadata("design:type", core_1.EventEmitter)
  228. ], Chips.prototype, "onRemove", void 0);
  229. __decorate([
  230. core_1.Output(),
  231. __metadata("design:type", core_1.EventEmitter)
  232. ], Chips.prototype, "onFocus", void 0);
  233. __decorate([
  234. core_1.Output(),
  235. __metadata("design:type", core_1.EventEmitter)
  236. ], Chips.prototype, "onBlur", void 0);
  237. __decorate([
  238. core_1.Output(),
  239. __metadata("design:type", core_1.EventEmitter)
  240. ], Chips.prototype, "onChipClick", void 0);
  241. __decorate([
  242. core_1.ViewChild('inputtext', { static: false }),
  243. __metadata("design:type", core_1.ElementRef)
  244. ], Chips.prototype, "inputViewChild", void 0);
  245. __decorate([
  246. core_1.ContentChildren(shared_1.PrimeTemplate),
  247. __metadata("design:type", core_1.QueryList)
  248. ], Chips.prototype, "templates", void 0);
  249. Chips = __decorate([
  250. core_1.Component({
  251. selector: 'p-chips',
  252. template: "\n <div [ngClass]=\"'ui-chips ui-widget'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"onClick($event)\">\n <ul [ngClass]=\"{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}\">\n <li #token *ngFor=\"let item of value; let i = index;\" class=\"ui-chips-token ui-state-highlight ui-corner-all\" (click)=\"onItemClick($event, item)\">\n <span *ngIf=\"!disabled\" class=\"ui-chips-token-icon pi pi-fw pi-times\" (click)=\"removeItem($event,i)\"></span>\n <span *ngIf=\"!itemTemplate\" class=\"ui-chips-token-label\">{{field ? resolveFieldData(item,field) : item}}</span>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n </li>\n <li class=\"ui-chips-input-token\">\n <input #inputtext type=\"text\" [attr.id]=\"inputId\" [attr.placeholder]=\"(value && value.length ? null : placeholder)\" [attr.tabindex]=\"tabindex\" (keydown)=\"onKeydown($event)\" \n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" [disabled]=\"disabled\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\">\n </li>\n </ul>\n </div>\n ",
  253. providers: [exports.CHIPS_VALUE_ACCESSOR]
  254. }),
  255. __metadata("design:paramtypes", [core_1.ElementRef])
  256. ], Chips);
  257. return Chips;
  258. }());
  259. exports.Chips = Chips;
  260. var ChipsModule = /** @class */ (function () {
  261. function ChipsModule() {
  262. }
  263. ChipsModule = __decorate([
  264. core_1.NgModule({
  265. imports: [common_1.CommonModule, inputtext_1.InputTextModule, shared_1.SharedModule],
  266. exports: [Chips, inputtext_1.InputTextModule, shared_1.SharedModule],
  267. declarations: [Chips]
  268. })
  269. ], ChipsModule);
  270. return ChipsModule;
  271. }());
  272. exports.ChipsModule = ChipsModule;
  273. //# sourceMappingURL=chips.js.map