source: trip-planner-front/node_modules/primeng/fesm2015/primeng-chips.mjs@ 8d391a1

Last change on this file since 8d391a1 was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 14.8 KB
Line 
1import * as i0 from '@angular/core';
2import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
3import * as i1 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import { PrimeTemplate, SharedModule } from 'primeng/api';
6import { InputTextModule } from 'primeng/inputtext';
7import { NG_VALUE_ACCESSOR } from '@angular/forms';
8
9const CHIPS_VALUE_ACCESSOR = {
10 provide: NG_VALUE_ACCESSOR,
11 useExisting: forwardRef(() => Chips),
12 multi: true
13};
14class Chips {
15 constructor(el, cd) {
16 this.el = el;
17 this.cd = cd;
18 this.allowDuplicate = true;
19 this.onAdd = new EventEmitter();
20 this.onRemove = new EventEmitter();
21 this.onFocus = new EventEmitter();
22 this.onBlur = new EventEmitter();
23 this.onChipClick = new EventEmitter();
24 this.onModelChange = () => { };
25 this.onModelTouched = () => { };
26 }
27 ngAfterContentInit() {
28 this.templates.forEach((item) => {
29 switch (item.getType()) {
30 case 'item':
31 this.itemTemplate = item.template;
32 break;
33 default:
34 this.itemTemplate = item.template;
35 break;
36 }
37 });
38 this.updateFilledState();
39 }
40 onClick() {
41 this.inputViewChild.nativeElement.focus();
42 }
43 onInput() {
44 this.updateFilledState();
45 }
46 onPaste(event) {
47 if (!this.disabled) {
48 if (this.separator) {
49 let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
50 pastedData.split(this.separator).forEach(val => {
51 this.addItem(event, val, true);
52 });
53 this.inputViewChild.nativeElement.value = '';
54 }
55 this.updateFilledState();
56 }
57 }
58 updateFilledState() {
59 if (!this.value || this.value.length === 0) {
60 this.filled = (this.inputViewChild && this.inputViewChild.nativeElement && this.inputViewChild.nativeElement.value != '');
61 }
62 else {
63 this.filled = true;
64 }
65 }
66 onItemClick(event, item) {
67 this.onChipClick.emit({
68 originalEvent: event,
69 value: item
70 });
71 }
72 writeValue(value) {
73 this.value = value;
74 this.updateMaxedOut();
75 this.cd.markForCheck();
76 }
77 registerOnChange(fn) {
78 this.onModelChange = fn;
79 }
80 registerOnTouched(fn) {
81 this.onModelTouched = fn;
82 }
83 setDisabledState(val) {
84 this.disabled = val;
85 this.cd.markForCheck();
86 }
87 resolveFieldData(data, field) {
88 if (data && field) {
89 if (field.indexOf('.') == -1) {
90 return data[field];
91 }
92 else {
93 let fields = field.split('.');
94 let value = data;
95 for (var i = 0, len = fields.length; i < len; ++i) {
96 value = value[fields[i]];
97 }
98 return value;
99 }
100 }
101 else {
102 return null;
103 }
104 }
105 onInputFocus(event) {
106 this.focus = true;
107 this.onFocus.emit(event);
108 }
109 onInputBlur(event) {
110 this.focus = false;
111 if (this.addOnBlur && this.inputViewChild.nativeElement.value) {
112 this.addItem(event, this.inputViewChild.nativeElement.value, false);
113 }
114 this.onModelTouched();
115 this.onBlur.emit(event);
116 }
117 removeItem(event, index) {
118 if (this.disabled) {
119 return;
120 }
121 let removedItem = this.value[index];
122 this.value = this.value.filter((val, i) => i != index);
123 this.onModelChange(this.value);
124 this.onRemove.emit({
125 originalEvent: event,
126 value: removedItem
127 });
128 this.updateFilledState();
129 this.updateMaxedOut();
130 }
131 addItem(event, item, preventDefault) {
132 this.value = this.value || [];
133 if (item && item.trim().length) {
134 if (this.allowDuplicate || this.value.indexOf(item) === -1) {
135 this.value = [...this.value, item];
136 this.onModelChange(this.value);
137 this.onAdd.emit({
138 originalEvent: event,
139 value: item
140 });
141 }
142 }
143 this.updateFilledState();
144 this.updateMaxedOut();
145 this.inputViewChild.nativeElement.value = '';
146 if (preventDefault) {
147 event.preventDefault();
148 }
149 }
150 onKeydown(event) {
151 switch (event.which) {
152 //backspace
153 case 8:
154 if (this.inputViewChild.nativeElement.value.length === 0 && this.value && this.value.length > 0) {
155 this.value = [...this.value];
156 let removedItem = this.value.pop();
157 this.onModelChange(this.value);
158 this.onRemove.emit({
159 originalEvent: event,
160 value: removedItem
161 });
162 this.updateFilledState();
163 }
164 break;
165 //enter
166 case 13:
167 this.addItem(event, this.inputViewChild.nativeElement.value, true);
168 break;
169 case 9:
170 if (this.addOnTab && this.inputViewChild.nativeElement.value !== '') {
171 this.addItem(event, this.inputViewChild.nativeElement.value, true);
172 }
173 break;
174 default:
175 if (this.max && this.value && this.max === this.value.length) {
176 event.preventDefault();
177 }
178 else if (this.separator) {
179 if (this.separator === ',' && event.which === 188) {
180 this.addItem(event, this.inputViewChild.nativeElement.value, true);
181 }
182 }
183 break;
184 }
185 }
186 updateMaxedOut() {
187 if (this.inputViewChild && this.inputViewChild.nativeElement) {
188 if (this.max && this.value && this.max === this.value.length)
189 this.inputViewChild.nativeElement.disabled = true;
190 else
191 this.inputViewChild.nativeElement.disabled = this.disabled || false;
192 }
193 }
194}
195Chips.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Chips, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
196Chips.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Chips, selector: "p-chips", inputs: { style: "style", styleClass: "styleClass", disabled: "disabled", field: "field", placeholder: "placeholder", max: "max", ariaLabelledBy: "ariaLabelledBy", tabindex: "tabindex", inputId: "inputId", allowDuplicate: "allowDuplicate", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", addOnTab: "addOnTab", addOnBlur: "addOnBlur", separator: "separator" }, outputs: { onAdd: "onAdd", onRemove: "onRemove", onFocus: "onFocus", onBlur: "onBlur", onChipClick: "onChipClick" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus" }, classAttribute: "p-element p-inputwrapper" }, providers: [CHIPS_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["inputtext"], descendants: true }], ngImport: i0, template: `
197 <div [ngClass]="'p-chips p-component'" [ngStyle]="style" [class]="styleClass" (click)="onClick()">
198 <ul [ngClass]="{'p-inputtext p-chips-multiple-container':true,'p-focus':focus,'p-disabled':disabled}">
199 <li #token *ngFor="let item of value; let i = index;" class="p-chips-token" (click)="onItemClick($event, item)">
200 <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
201 <span *ngIf="!itemTemplate" class="p-chips-token-label">{{field ? resolveFieldData(item,field) : item}}</span>
202 <span *ngIf="!disabled" class="p-chips-token-icon pi pi-times-circle" (click)="removeItem($event,i)"></span>
203 </li>
204 <li class="p-chips-input-token">
205 <input #inputtext type="text" [attr.id]="inputId" [attr.placeholder]="(value && value.length ? null : placeholder)" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)"
206 (input)="onInput()" (paste)="onPaste($event)" [attr.aria-labelledby]="ariaLabelledBy" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled" [ngStyle]="inputStyle" [class]="inputStyleClass">
207 </li>
208 </ul>
209 </div>
210 `, isInline: true, styles: [".p-chips{display:inline-flex}.p-chips-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-chips-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-chips-input-token{flex:1 1 auto;display:inline-flex}.p-chips-token-icon{cursor:pointer}.p-chips-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.p-fluid .p-chips{display:flex}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
211i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Chips, decorators: [{
212 type: Component,
213 args: [{ selector: 'p-chips', template: `
214 <div [ngClass]="'p-chips p-component'" [ngStyle]="style" [class]="styleClass" (click)="onClick()">
215 <ul [ngClass]="{'p-inputtext p-chips-multiple-container':true,'p-focus':focus,'p-disabled':disabled}">
216 <li #token *ngFor="let item of value; let i = index;" class="p-chips-token" (click)="onItemClick($event, item)">
217 <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
218 <span *ngIf="!itemTemplate" class="p-chips-token-label">{{field ? resolveFieldData(item,field) : item}}</span>
219 <span *ngIf="!disabled" class="p-chips-token-icon pi pi-times-circle" (click)="removeItem($event,i)"></span>
220 </li>
221 <li class="p-chips-input-token">
222 <input #inputtext type="text" [attr.id]="inputId" [attr.placeholder]="(value && value.length ? null : placeholder)" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)"
223 (input)="onInput()" (paste)="onPaste($event)" [attr.aria-labelledby]="ariaLabelledBy" (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled" [ngStyle]="inputStyle" [class]="inputStyleClass">
224 </li>
225 </ul>
226 </div>
227 `, host: {
228 'class': 'p-element p-inputwrapper',
229 '[class.p-inputwrapper-filled]': 'filled',
230 '[class.p-inputwrapper-focus]': 'focus'
231 }, providers: [CHIPS_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".p-chips{display:inline-flex}.p-chips-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-chips-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-chips-input-token{flex:1 1 auto;display:inline-flex}.p-chips-token-icon{cursor:pointer}.p-chips-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.p-fluid .p-chips{display:flex}\n"] }]
232 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { style: [{
233 type: Input
234 }], styleClass: [{
235 type: Input
236 }], disabled: [{
237 type: Input
238 }], field: [{
239 type: Input
240 }], placeholder: [{
241 type: Input
242 }], max: [{
243 type: Input
244 }], ariaLabelledBy: [{
245 type: Input
246 }], tabindex: [{
247 type: Input
248 }], inputId: [{
249 type: Input
250 }], allowDuplicate: [{
251 type: Input
252 }], inputStyle: [{
253 type: Input
254 }], inputStyleClass: [{
255 type: Input
256 }], addOnTab: [{
257 type: Input
258 }], addOnBlur: [{
259 type: Input
260 }], separator: [{
261 type: Input
262 }], onAdd: [{
263 type: Output
264 }], onRemove: [{
265 type: Output
266 }], onFocus: [{
267 type: Output
268 }], onBlur: [{
269 type: Output
270 }], onChipClick: [{
271 type: Output
272 }], inputViewChild: [{
273 type: ViewChild,
274 args: ['inputtext']
275 }], templates: [{
276 type: ContentChildren,
277 args: [PrimeTemplate]
278 }] } });
279class ChipsModule {
280}
281ChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
282ChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ChipsModule, declarations: [Chips], imports: [CommonModule, InputTextModule, SharedModule], exports: [Chips, InputTextModule, SharedModule] });
283ChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ChipsModule, imports: [[CommonModule, InputTextModule, SharedModule], InputTextModule, SharedModule] });
284i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ChipsModule, decorators: [{
285 type: NgModule,
286 args: [{
287 imports: [CommonModule, InputTextModule, SharedModule],
288 exports: [Chips, InputTextModule, SharedModule],
289 declarations: [Chips]
290 }]
291 }] });
292
293/**
294 * Generated bundle index. Do not edit.
295 */
296
297export { CHIPS_VALUE_ACCESSOR, Chips, ChipsModule };
Note: See TracBrowser for help on using the repository browser.